block edit on useEffect not working about blocknote

[i-am-chitti]

@davidliudev, the useEffect runs even before the blocknote editor is ready. Have a look at this snippet -

const editor = useBlockNote({
    domAttributes: {
      editor: {
        class: "editor",
        "data-test": "editor",
      },
    },
    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
    onEditorReady: () => console.log("Editor is ready now"),
  });

  useEffect(() => {
    console.log("From useEffect");
    editor.insertBlocks(
      [{ content: "Hello!" }],
      editor.getTextCursorPosition().block,
      "after"
    );
  }, [editor]);

We get this output in console -

From useEffect
Editor is ready now

As BlockNote editor takes little time to initialize and after it's ready the onEditorReady callback is triggerred. But useEffect is synchronous due to which it's triggerred immediately. Since, editor isn't ready, the block insertion doesn't work and replaced by what's used to during initialization.

To avoid this, you can use the onEditorReady callback to insert the block. The code is -

const editor = useBlockNote({
    domAttributes: {
      editor: {
        class: "editor",
        "data-test": "editor",
      },
    },
    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
    onEditorReady: (edtior) => {
      editor.insertBlocks(
        [{ content: "Hello!" }],
        editor.getTextCursorPosition().block,
        "after"
      );
    },
  });

Also, note that the onEditorReady accepts an async function as well. For preprocessing, you can leverage it and pass the resolution further.

[davidliudev]

Umm...I see. This behavior is different from other editors.
The reason I am doing this is that I have a file name string passed in as a prop and I need to load content from disk as the prop changes.

That's why I am putting it in useEffect...

But if the editor is not ready onMount then how to achieve this goal?
Like setting a isEditorReadyRef and then only update when the flag is true?
This may miss a few updates IMO...

[matthewlipski]

You shouldn't need to add an isEditorReadyRef - you can just check if the editor is ready using editor.ready. But yes I would use a useEffect hook with the file name prop in the dependency array, and inside the useEffect call editor.insertBlocks if editor.ready is true.