🐛(frontend) fix initial content with collaboration

The way the initial content was created was causing
issues with the collaboration server.
As soon a user started typing, the problem was gone.
This commit fixes that by letting Blocknote
managing the initial content, then we update the
Blocknote initial content with our initial content.

Author: AntoLC

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to
 
 ## Fixed
 
+- 🐛(frontend) fix initial content with collaboration #484
 - 🐛(frontend) Fix hidden menu on Firefox #468
 - 🐛(backend) fix sanitize problem IA #490
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -128,6 +128,23 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   );
   useHeadings(editor);
 
+  /**
+   * With the collaboration it gets complicated to create the initial block
+   * better to let Blocknote manage, then we update the block with the content.
+   */
+  useEffect(() => {
+    if (doc.content) {
+      return;
+    }
+
+    setTimeout(() => {
+      editor.updateBlock(editor.document[0], {
+        type: 'heading',
+        content: '',
+      });
+    }, 100);
+  }, [editor, doc.content]);
+
   useEffect(() => {
     setEditor(editor);
 

src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx

@@ -2,7 +2,7 @@ import { HocuspocusProvider } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 import { create } from 'zustand';
 
-import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management';
+import { Base64, Doc } from '@/features/docs/doc-management';
 
 export interface UseDocStore {
   currentDoc?: Doc;
@@ -28,15 +28,6 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
 
     if (initialDoc) {
       Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
-    } else {
-      const initialDocContent = [
-        {
-          type: 'heading',
-          content: '',
-        },
-      ];
-
-      blocksToYDoc(initialDocContent, doc);
     }
 
     const provider = new HocuspocusProvider({

src/frontend/apps/impress/src/features/docs/doc-management/utils.ts

@@ -12,23 +12,6 @@ export const currentDocRole = (abilities: Doc['abilities']): Role => {
         : Role.READER;
 };
 
-type BasicBlock = {
-  type: string;
-  content: string;
-};
-export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
-  const xmlFragment = doc.getXmlFragment('document-store');
-
-  blocks.forEach((block) => {
-    const xmlElement = new Y.XmlElement(block.type);
-    if (block.content) {
-      xmlElement.insert(0, [new Y.XmlText(block.content)]);
-    }
-
-    xmlFragment.push([xmlElement]);
-  });
-};
-
 export const base64ToYDoc = (base64: string) => {
   const uint8Array = Buffer.from(base64, 'base64');
   const ydoc = new Y.Doc();