From 52090f7de46f2cf63b709f91d9cf6863cd512c51 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Tue, 26 Nov 2024 14:42:22 +0530 Subject: [PATCH] fix: abstracted away from exposing the provider directly --- packages/editor/src/core/hooks/use-editor.ts | 3 ++- packages/editor/src/core/hooks/use-read-only-editor.ts | 2 +- packages/editor/src/core/types/document-events.ts | 5 +++++ packages/editor/src/core/types/editor.ts | 6 +++--- .../components/pages/editor/header/options-dropdown.tsx | 2 +- ...rver-realtime.tsx => use-collaborative-page-actions.tsx} | 6 +++--- 6 files changed, 15 insertions(+), 9 deletions(-) rename web/core/hooks/{use-live-server-realtime.tsx => use-collaborative-page-actions.tsx} (93%) diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts index bef6ced428d..77733d212a0 100644 --- 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 index e79edc3a2c3..b6b1a8a15a6 100644 --- 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 index d686cff3372..f05966713a9 100644 --- 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 index a76bba10f46..ad1ddd24041 100644 --- 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 index 13b81fa4155..e2eda4c6491 100644 --- 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 b/web/core/hooks/use-collaborative-page-actions.tsx similarity index 93% rename from web/core/hooks/use-live-server-realtime.tsx rename to web/core/hooks/use-collaborative-page-actions.tsx index bfe036ea1f3..09b3621e317 100644 --- a/web/core/hooks/use-live-server-realtime.tsx +++ b/web/core/hooks/use-collaborative-page-actions.tsx @@ -73,7 +73,7 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead }, [currentActionBeingProcessed, editorRef]); useEffect(() => { - const provider = editorRef?.listenToRealTimeUpdate(); + const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate(); const handleStatelessMessage = (message: { payload: TDocumentEventsClient }) => { if (currentActionBeingProcessed === message.payload) { @@ -86,10 +86,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]);