[Bug] Pasting multiple paragraphs of text makes block output null

[enkota]

Noticed that if you try pasting a few paragraphs of text into the editor the blocks data output will return null. Adding a space after will update the data, but not great if someone pastes a few paragraphs and saves.

Steps to reproduce:

1. Go to the editor demo page - https://editorjs.io
2. Empty the editor fully and paste in the following text:

Lorem ipsum dolor sit amet praesent bibendum est interdum nibh purus. Platea duis pellentesque risus maecenas nisi urna mollis dictumst a tellus. Fringilla iaculis tempor nunc platea porta gravida vel sapien fermentum iaculis. A eu faucibus molestie quam malesuada tristique pulvinar pellentesque. Sollicitudin euismod tincidunt convallis mattis velit elit bibendum ultricies dictum arcu eget urna.

Consequat odio sollicitudin massa vivamus nisl lobortis neque eget diam adipiscing phasellus etiam iaculis. Sed tristique pretium venenatis vulputate pretium purus velit cras fames duis leo porta platea. Dictumst molestie mollis sagittis mollis tristique sagittis in ultrices. Viverra tempus labore dui dapibus malesuada pellentesque pretium aliquet sodales odio consectetur. Labore nulla sapien dui facilisis aliqua libero eiusmod sagittis hac.

Incididunt malesuada purus vivamus dui tempus fusce sodales dapibus turpis bibendum odio viverra libero tincidunt. Quis fusce dolore luctus consectetur luctus nibh suspendisse integer labore convallis. Laoreet dapibus viverra laoreet malesuada tristique leo mollis maecenas fusce porttitor dictum quisque ut. Quis risus imperdiet habitasse pellentesque condimentum mi lobortis lectus sodales quam congue erat ultrices hendrerit. Tincidunt porttitor in eget praesent lobortis sagittis labore tellus tristique ut eiusmod posuere eiusmod.

3. Look at the data preview below the editor. You can see the "Blocks" value is an empty array.

Expected behavior: It should output the pasted text. Interestingly, sometimes it will work fine, seems to output null more often than not though.

https://user-images.githubusercontent.com/13979799/130320444-aeae9c94-da11-4b66-ba20-2933d16c1223.mov

Screenshots:

Device, Browser, OS: Safari 14.1.2 - Mac 11.5.2

Editor.js version: 2.22.2

[unityoxb]

I also found the same problem. After copying the content from other places, if there is no change, the content is empty after submission.

[Broutard]

+1 Pleassssssse fix this bug, it's very annoying :(

This bug appeared in the 2.22.0 release, the debug log is

[Broutard]

Same behavior in your website :

[vasiliy-l]

I was able to overcome this issue using the onChange callback by calling the api.saver.save() with a small delay. 🤷‍♂️ https://editorjs.io/configuration#editor-modifications-callback https://editorjs.io/saver#save

This approach also helped me to fix related bug when editor doesn't delete multiple blocks at once https://github.com/codex-team/editor.js/issues/1699

const handleChange = (api /*, block */) => {
  setTimeout(() => {
    api.saver.save().then(
      (editorData) => console.log(JSON.stringify(editorData))
    );
  }, 200);    
};

const editor = new EditorJS({
  ... // pass configuration props
  onChange: handleChange, 
});

[orbachar]

thanks for that, exactly fixed both of my issues.

any update on this team?

[dlinardi]

thanks for that, exactly fixed both of my issues.

any update on this team?

facing this issue right now, anyway you can share a snippet of how you fixed this?

[orbachar]

thanks for that, exactly fixed both of my issues. any update on this team?

facing this issue right now, anyway you can share a snippet of how you fixed this?

sure, I am using react-editor-js but the idea is the same, use setTimeout on your save handler

    async function onChange(): Promise<void> {
        const { onChange = noop } = props;

        setTimeout(async () => { // HACK - temp fix https://github.com/codex-team/editor.js/issues/1755
            const data = await editorCore.current.save();
            onChange(data);
        }, 200); <-------------- the trick you are looking for 
    }

    return (
        <div css={getBaseStyle()} data-test={testId} className={`transition bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-50 ${className}`}>
            <Suspense fallback={<Spinner className="mx-auto" />}>
                <ReactEditorJS
                    onInitialize={handleInitialize}
                    tools={tools}
                    defaultValue={initialData}
                    onChange={onChange}
                    placeholder={placeholder}
                />
            </Suspense>
        </div>
    );

[patrys]

Possibly related to #2065

[azizoid]

Guys, do you plan to fix this bug?

[SimonVillage]

any update on this? It's been more than a year

[berkaygurbuz]

I was able to overcome this issue using the onChange callback by calling the api.saver.save() with a small delay. 🤷‍♂️ https://editorjs.io/configuration#editor-modifications-callback https://editorjs.io/saver#save

This approach also helped me to fix related bug when editor doesn't delete multiple blocks at once #1699

const handleChange = (api /*, block */) => {
  setTimeout(() => {
    api.saver.save().then(
      (editorData) => console.log(JSON.stringify(editorData))
    );
  }, 200);    
};

const editor = new EditorJS({
  ... // pass configuration props
  onChange: handleChange, 
});

@vasiliy-l Your workaround worked for me. I am wondering, how can i save the data when the user press save.