YjsTiptapReactText editors

Setting an initial or default value in Tiptap

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 Tiptap

Tiptap allows you to set a default value by setting content in useEditor, however when connected to Yjs this will trigger the duplication problem.

function Editor({ doc, provider }: EditorProps) {  const editor = useEditor({    content: "<p>This will duplicate on load</p>",
    // Options    // ...  });
  return <EditorContent 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.getText() === "") {        editor.commands.setContent(`          <h1>Default content</h1>          <p>            My <strong>paragraph</strong>          </p>        `);      }    }
    setDefault();    provider.on("sync", setDefault);    return () => provider.off("sync", setDefault);  }, [provider, editor]);
  return <EditorContent editor={editor} />;}

Note that we’re assuming your Tiptap 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.