[lexical-yjs] Feature: Allow passing in custom syncCursorPositions …

…function to collab hook (#7053)
facebook · Jan 15, 2025 · 136a565 · 136a565
1 parent 415c576
commit 136a565
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/lexical-react/src/shared/useYjsCollaboration.tsx b/packages/lexical-react/src/shared/useYjsCollaboration.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import type {Binding, Provider} from '@lexical/yjs';
+import type {Binding, Provider, SyncCursorPositionsFn} from '@lexical/yjs';
 import type {LexicalEditor} from 'lexical';
 
 import {mergeRegister} from '@lexical/utils';
@@ -54,6 +54,7 @@ export function useYjsCollaboration(
   cursorsContainerRef?: CursorsContainerRef,
   initialEditorState?: InitialEditorStateType,
   awarenessData?: object,
+  syncCursorPositionsFn: SyncCursorPositionsFn = syncCursorPositions,
 ): JSX.Element {
   const isReloadingDoc = useRef(false);
 
@@ -90,7 +91,7 @@ export function useYjsCollaboration(
     };
 
     const onAwarenessUpdate = () => {
-      syncCursorPositions(binding, provider);
+      syncCursorPositionsFn(binding, provider);
     };
 
     const onYjsTreeChanges = (
@@ -102,7 +103,13 @@ export function useYjsCollaboration(
       const origin = transaction.origin;
       if (origin !== binding) {
         const isFromUndoManger = origin instanceof UndoManager;
-        syncYjsChangesToLexical(binding, provider, events, isFromUndoManger);
+        syncYjsChangesToLexical(
+          binding,
+          provider,
+          events,
+          isFromUndoManger,
+          syncCursorPositionsFn,
+        );
       }
     };
 
@@ -191,6 +198,7 @@ export function useYjsCollaboration(
     shouldBootstrap,
     awarenessData,
     setDoc,
+    syncCursorPositionsFn,
   ]);
   const cursorsContainer = useMemo(() => {
     const ref = (element: null | HTMLElement) => {

diff --git a/packages/lexical-yjs/src/SyncCursors.ts b/packages/lexical-yjs/src/SyncCursors.ts
@@ -410,6 +410,11 @@ function getCollabNodeAndOffset(
   return [null, 0];
 }
 
+export type SyncCursorPositionsFn = (
+  binding: Binding,
+  provider: Provider,
+) => void;
+
 export function syncCursorPositions(
   binding: Binding,
   provider: Provider,

diff --git a/packages/lexical-yjs/src/SyncEditorStates.ts b/packages/lexical-yjs/src/SyncEditorStates.ts
@@ -26,6 +26,7 @@ import {CollabTextNode} from './CollabTextNode';
 import {
   $syncLocalCursorPosition,
   syncCursorPositions,
+  SyncCursorPositionsFn,
   syncLexicalSelectionToYjs,
 } from './SyncCursors';
 import {
@@ -83,6 +84,7 @@ export function syncYjsChangesToLexical(
   provider: Provider,
   events: Array<YEvent<YText>>,
   isFromUndoManger: boolean,
+  syncCursorPositionsFn: SyncCursorPositionsFn = syncCursorPositions,
 ): void {
   const editor = binding.editor;
   const currentEditorState = editor._editorState;
@@ -129,7 +131,7 @@ export function syncYjsChangesToLexical(
     },
     {
       onUpdate: () => {
-        syncCursorPositions(binding, provider);
+        syncCursorPositionsFn(binding, provider);
         // If there was a collision on the top level paragraph
         // we need to re-add a paragraph. To ensure this insertion properly syncs with other clients,
         // it must be placed outside of the update block above that has tags 'collaboration' or 'historic'.

diff --git a/packages/lexical-yjs/src/index.ts b/packages/lexical-yjs/src/index.ts
@@ -114,6 +114,7 @@ export function setLocalStateFocus(
 export {
   getAnchorAndFocusCollabNodesForUserState,
   syncCursorPositions,
+  type SyncCursorPositionsFn,
 } from './SyncCursors';
 export {
   syncLexicalUpdateToYjs,