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 () =>"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.