YjsBlockNoteReactText editors

Setting an initial or default value in BlockNote

Yjs doesn’t allow you to set an initial value for a document, as documents are stored as a list of changes, rather than as the current state. If you were to try add a default value, this would instead be sent as an append command, meaning that it would be added to any existing data in the document, instead of working as a default value.

Setting content in BlockNote

BlockNote allows you to set a default value by setting initialContent in useCreateBlockNote, however when connected to Yjs this will trigger the duplication problem.

function Editor({ doc, provider }: EditorProps) {  const editor: BlockNoteEditor = useCreateBlockNote({    initialContent: [{ type: "paragraph", content: "Hello world" }],
    // Other options    // ...  });
  return <BlockNoteView editor={editor} />;}

Default value with Yjs

To avoid this problem, you can instead wait for Liveblocks Yjs to connect, check if the editor’s content is empty, and then set a default value.

function Editor({ doc, provider }: EditorProps) {  const editor = useEditor({    // Options    // ...  });
  // Set default state  useEffect(() => {    function setDefault() {      if (!editor) {        return;      }
      if (editor.document.length === 1) {        editor.insertBlocks(          [{ type: "paragraph", content: "Hello world" }],          editor.document[0]        );      }    }
    if (provider.isReady) {      setDefault();    }
    provider.on("sync", setDefault);    return () => provider.off("sync", setDefault);  }, [provider, editor]);
  return <BlockNoteView editor={editor} />;}

Note that we’re assuming your BlockNote application is set up as recommended in our getting started guide.

Related guides

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.