fix: abstracted away from exposing the provider directly

makeplane · Nov 26, 2024 · 5d34895 · 5d34895
1 parent 2d648c7
commit 5d34895
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
@@ -23,6 +23,7 @@ import type {
   IMentionSuggestion,
   TEditorCommands,
   TFileHandler,
+  TDocumentEventEmitter,
 } from "@/types";
 
 export interface CustomEditorProps {
@@ -296,7 +297,7 @@ export const useEditor = (props: CustomEditorProps) => {
         Y.applyUpdate(document, value);
       },
       emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
-      listenToRealTimeUpdate: () => provider,
+      listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
     }),
     [editorRef, savedSelection]
   );

diff --git a/packages/editor/src/core/hooks/use-read-only-editor.ts b/packages/editor/src/core/hooks/use-read-only-editor.ts
@@ -118,7 +118,7 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
       };
     },
     emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
-    listenToRealTimeUpdate: () => provider,
+    listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
     getHeadings: () => editorRef?.current?.storage.headingList.headings,
   }));
 

diff --git a/packages/editor/src/core/types/document-events.ts b/packages/editor/src/core/types/document-events.ts
@@ -2,3 +2,8 @@ import { DocumentEventKey, DocumentRealtimeEvents } from "@/helpers/document-eve
 
 export type TDocumentEventsClient = (typeof DocumentRealtimeEvents)[DocumentEventKey]["client"];
 export type TDocumentEventsServer = (typeof DocumentRealtimeEvents)[DocumentEventKey]["server"];
+
+export type TDocumentEventEmitter = {
+  on: (event: string, callback: (message: { payload: TDocumentEventsClient }) => void) => void;
+  off: (event: string, callback: (message: { payload: TDocumentEventsClient }) => void) => void;
+};
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
@@ -14,8 +14,8 @@ import {
   TServerHandler,
 } from "@/types";
 import { TTextAlign } from "@/extensions";
-import { HocuspocusProvider, HocuspocusProviderWebsocket } from "@hocuspocus/provider";
-import { TDocumentEventsServer } from "src/lib";
+import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
+import { TDocumentEventsServer, TDocumentEventEmitter } from "src/lib";
 
 export type TEditorCommands =
   | "text"
@@ -86,7 +86,7 @@ export type EditorReadOnlyRefApi = {
   onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
   getHeadings: () => IMarking[];
   emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
-  listenToRealTimeUpdate: () => HocuspocusProvider;
+  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
 };
 
 export interface EditorRefApi extends EditorReadOnlyRefApi {

diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx
@@ -23,7 +23,7 @@ import { ExportPageModal } from "@/components/pages";
 // helpers
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useCollaborativePageActions } from "@/hooks/use-live-server-realtime";
+import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
 import { usePageFilters } from "@/hooks/use-page-filters";
 import { useQueryParams } from "@/hooks/use-query-params";
 // store

diff --git a/web/core/hooks/use-live-server-realtime.tsx → .../hooks/use-collaborative-page-actions.tsx b/web/core/hooks/use-live-server-realtime.tsx → .../hooks/use-collaborative-page-actions.tsx
@@ -73,7 +73,12 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
   }, [currentActionBeingProcessed, editorRef]);
 
   useEffect(() => {
-    const provider = editorRef?.listenToRealTimeUpdate();
+    const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate();
+    // __AUTO_GENERATED_PRINT_VAR_START__
+    console.log(
+      "useCollaborativePageActions#(anon) realTimeStatelessMessageListener:",
+      realTimeStatelessMessageListener
+    ); // __AUTO_GENERATED_PRINT_VAR_END__
 
     const handleStatelessMessage = (message: { payload: TDocumentEventsClient }) => {
       if (currentActionBeingProcessed === message.payload) {
@@ -86,10 +91,10 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
       }
     };
 
-    provider?.on("stateless", handleStatelessMessage);
+    realTimeStatelessMessageListener?.on("stateless", handleStatelessMessage);
 
     return () => {
-      provider?.off("stateless", handleStatelessMessage);
+      realTimeStatelessMessageListener?.off("stateless", handleStatelessMessage);
     };
   }, [editorRef, currentActionBeingProcessed, executeCollaborativeAction, actionHandlerMap]);