Initial content

Author: yoen-velt

apps/react/text-editors/libraries/tiptap/tiptap-demo/app/document/DocumentContext.tsx

@@ -20,13 +20,9 @@ export function useCurrentDocument(): CurrentDocument {
       setDocumentId(docId);
       localStorage.setItem('tiptap-document-id', docId);
     } else {
-      const stored = localStorage.getItem('tiptap-document-id');
-      if (stored) {
-        docId = stored;
-      } else {
-        docId = `doc-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-        localStorage.setItem('tiptap-document-id', docId);
-      }
+      // Always create a new document with timestamp to ensure fresh start
+      docId = `doc-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+      localStorage.setItem('tiptap-document-id', docId);
 
       const newUrl = `${window.location.pathname}?documentId=${docId}`;
       window.history.pushState({}, '', newUrl);

apps/react/text-editors/libraries/tiptap/tiptap-demo/components/document/TipTapComponent/TipTapComponent.tsx

@@ -17,13 +17,21 @@ import { InlineH1, InlineH2, InlineH3 } from './extensions'
 export default function TipTapComponent({ scrollContainerRef }: TipTapComponentProps) {
   const { documentId } = useCurrentDocument()
   const veltUser = useVeltEventCallback('userUpdate')
+  const [hasInitialized, setHasInitialized] = React.useState(false)
 
-  // Initialize CRDT extension
-  const { VeltCrdt } = useVeltTiptapCrdtExtension({
-    editorId: documentId || 'default-editor',
+  // Initialize CRDT extension without initialContent to avoid encryption errors
+  // We'll set initial content manually after the editor is ready
+  const { VeltCrdt, isLoading } = useVeltTiptapCrdtExtension({
+    editorId: documentId,
+    onSynced: (doc) => {
+      console.log('Document synced successfully', doc)
+    },
+    onConnectionError: (error) => {
+      console.error('CRDT connection error:', error)
+    }
   })
 
-  // Initialize the editor
+  // Initialize the editor with empty content
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -40,9 +48,30 @@ export default function TipTapComponent({ scrollContainerRef }: TipTapComponentP
       TiptapVeltComments,
       ...(VeltCrdt ? [VeltCrdt] : []),
     ],
-    content: initialContent,
+    content: '', // Start with empty content
+    immediatelyRender: false,
   }, [VeltCrdt])
 
+  // Set initial content if document is empty after editor initializes
+  useEffect(() => {
+    if (editor && !isLoading && !hasInitialized) {
+      // Small delay to ensure CRDT has fully loaded
+      const timer = setTimeout(() => {
+        const currentText = editor.getText()
+        console.log('Current editor text:', currentText)
+
+        // If document is completely empty, set initial content
+        if (!currentText || currentText.trim().length === 0) {
+          console.log('Setting initial content...')
+          editor.commands.setContent(initialContent)
+        }
+        setHasInitialized(true)
+      }, 1000) // Wait 1 second for CRDT to fully sync
+
+      return () => clearTimeout(timer)
+    }
+  }, [editor, isLoading, hasInitialized])
+
   // Comment annotations
   const commentAnnotations = useCommentAnnotations()
 
@@ -65,10 +94,16 @@ export default function TipTapComponent({ scrollContainerRef }: TipTapComponentP
           <div className="w-full max-w-[850px]">
             <div className="bg-[rgb(17,17,17)] border border-[rgb(20,20,20)] border-solid rounded-[16px] p-[42px_56px_64px_56px] min-h-[880px]">
               <div className="w-full max-w-[738px]">
-                <EditorContent
-                  editor={editor}
-                  className="tiptap-editor-content prose prose-invert max-w-none"
-                />
+                {isLoading ? (
+                  <div className="flex items-center justify-center h-32 text-gray-400">
+                    Loading editor...
+                  </div>
+                ) : (
+                  <EditorContent
+                    editor={editor}
+                    className="tiptap-editor-content prose prose-invert max-w-none"
+                  />
+                )}
               </div>
 
               {/* Bubble Menu for Comments */}