fix: show only after editor loads

makeplane · Sep 17, 2024 · cd29430 · cd29430
1 parent 448a615
commit cd29430
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -30,6 +30,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     user,
   } = props;
   // initialize Hocuspocus provider
+  console.log("afdafd");
   const provider = useMemo(
     () =>
       new HocuspocusProvider({
@@ -44,8 +45,8 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
           if (data.event.code === 1006) serverHandler?.onServerError?.();
         },
         onSynced: () => {
-          console.log("ran", id);
-          provider.sendStateless("Hello from client");
+          console.log("ran");
+          serverHandler?.onSynced?.();
         },
       }),
     [id, realtimeConfig, serverHandler, user.id]

diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
@@ -21,6 +21,7 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
     user,
   } = props;
   // initialize Hocuspocus provider
+  console.log("afdafd read only");
   const provider = useMemo(
     () =>
       new HocuspocusProvider({
@@ -33,7 +34,8 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
           if (data.event.code === 1006) serverHandler?.onServerError?.();
         },
         onSynced: () => {
-          console.log("ran", id);
+          console.log("ran");
+          serverHandler?.onSynced?.();
         },
       }),
     [id, realtimeConfig, serverHandler, user.id]

diff --git a/packages/editor/src/core/types/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
@@ -17,6 +17,7 @@ import {
 export type TServerHandler = {
   onConnect?: () => void;
   onServerError?: () => void;
+  onSynced?: () => void;
 };
 
 type TCollaborativeEditorHookProps = {

diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // document-editor
@@ -60,6 +60,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     sidePeekVisible,
     updateMarkings,
   } = props;
+  // states
+  const [isSynced, setIsSynced] = useState(false);
+
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
@@ -108,10 +111,16 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     handleConnectionStatus(true);
   }, []);
 
+  const handleServerSynced = useCallback(() => {
+    console.log("handleServerSynced called");
+    setIsSynced(true);
+  }, []);
+
   const serverHandler: TServerHandler = useMemo(
     () => ({
       onConnect: handleServerConnect,
       onServerError: handleServerError,
+      onSynced: handleServerSynced,
     }),
     []
   );
@@ -132,6 +141,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     [projectId, workspaceSlug]
   );
 
+  console.log("isSynced", isSynced);
+
   if (pageId === undefined) return <PageContentLoader />;
 
   return (