@beyondwork/docx-react-component 1.0.33 → 1.0.35

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -42,6 +42,8 @@ import {
   createCommandBridgePlugins,
   type CommandBridgeCallbacks,
 } from "./pm-command-bridge";
+import { createCollabPlugins } from "./pm-collab-plugins";
+import { prosemirrorToYXmlFragment } from "y-prosemirror";
 import { buildDecorations } from "./pm-decorations";
 import { createContextualInteractionPlugin } from "./pm-contextual-ui";
 import {
@@ -71,6 +73,8 @@ import type { MediaPreviewDescriptor } from "./pm-state-from-snapshot";
  */
 export interface TwProseMirrorSurfaceProps {
   currentUser: EditorUser;
+  ydoc?: import("yjs").Doc;
+  awareness?: import("y-protocols/awareness").Awareness;
   snapshot: RuntimeRenderSnapshot;
   canonicalDocument: CanonicalDocumentEnvelope;
   documentNavigation: DocumentNavigationSnapshot;
@@ -219,6 +223,7 @@ export const TwProseMirrorSurface = forwardRef<
       createSurfaceDecorationKey({
         markupDisplay,
         showTrackedChanges,
+        suggestionsEnabled,
         canEdit,
         activeCommentId: snapshot.comments.activeCommentId,
         activeRevisionId: props.activeRevisionId,
@@ -242,36 +247,51 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeWorkflowScopeIds,
       props.workflowScopes,
       showTrackedChanges,
+      suggestionsEnabled,
       snapshot.comments.activeCommentId,
     ],
   );
 
+  const isCollabMode = Boolean(props.ydoc);
+
   // Create PM plugins (stable across renders — callbacks accessed via ref)
   const plugins = useMemo(() => {
+    const selectionCallbacks = {
+      onSelectionChange: (sel: SelectionSnapshot) => callbacksRef.current?.onSelectionChange(sel),
+      getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
+      isSelectionSyncSuppressed: () =>
+        callbacksRef.current?.isSelectionSyncSuppressed?.() ?? false,
+    };
+
+    const corePlugins = props.ydoc
+      ? createCollabPlugins({
+          ydoc: props.ydoc,
+          awareness: props.awareness,
+          selectionCallbacks,
+        })
+      : createCommandBridgePlugins({
+          ...selectionCallbacks,
+          onInsertText: (text) => callbacksRef.current?.onInsertText(text),
+          onDeleteBackward: () => callbacksRef.current?.onDeleteBackward(),
+          onDeleteForward: () => callbacksRef.current?.onDeleteForward(),
+          onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
+          onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
+          onInsertTab: () => callbacksRef.current?.onInsertTab(),
+          onOutdentTab: () => callbacksRef.current?.onOutdentTab?.(),
+          onUndo: () => callbacksRef.current?.onUndo(),
+          onRedo: () => callbacksRef.current?.onRedo(),
+          onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
+        });
+
     return [
-      ...createCommandBridgePlugins({
-        onInsertText: (text) => callbacksRef.current?.onInsertText(text),
-        onDeleteBackward: () => callbacksRef.current?.onDeleteBackward(),
-        onDeleteForward: () => callbacksRef.current?.onDeleteForward(),
-        onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
-        onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
-        onInsertTab: () => callbacksRef.current?.onInsertTab(),
-        onOutdentTab: () => callbacksRef.current?.onOutdentTab?.(),
-        onUndo: () => callbacksRef.current?.onUndo(),
-        onRedo: () => callbacksRef.current?.onRedo(),
-        onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
-        onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
-        getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
-        isSelectionSyncSuppressed: () =>
-          callbacksRef.current?.isSelectionSyncSuppressed?.() ?? false,
-      }),
+      ...corePlugins,
       createContextualInteractionPlugin({
         onCommentActivated: (commentId) => props.onCommentActivated?.(commentId),
         onRevisionActivated: (revisionId) => props.onRevisionActivated?.(revisionId),
       }),
       createSearchPlugin(),
     ];
-  }, [props.onCommentActivated, props.onRevisionActivated]);
+  }, [props.onCommentActivated, props.onRevisionActivated, props.ydoc, props.awareness]);
 
   const applyDecorationProps = useCallback(
     (view: EditorView, positionMap: PositionMap): void => {
@@ -318,10 +338,14 @@ export const TwProseMirrorSurface = forwardRef<
     ],
   );
 
-  // Create or update the PM document only when the structural key changes.
   useEffect(() => {
     if (!mountRef.current || !surface) return;
 
+    // Collab mode: y-prosemirror owns the doc after initial mount
+    if (isCollabMode && viewRef.current) {
+      return;
+    }
+
     if (viewRef.current && documentBuildKeyRef.current === documentBuildKey) {
       return;
     }
@@ -355,19 +379,23 @@ export const TwProseMirrorSurface = forwardRef<
     incrementInvalidationCounter("pm.laneA.rebuilds");
 
     if (!viewRef.current) {
-      // First time surface is available — create the EditorView
       const view = new EditorView(mountRef.current, {
         state,
         nodeViews: tableNodeViews,
         editable: () => canEdit,
         decorations: () => decorations,
-        dispatchTransaction(tr) {
-          const newState = view.state.apply(tr);
-          view.updateState(newState);
-        },
       });
       viewRef.current = view;
       recordPerfSample("pm.mount");
+
+      if (isCollabMode && props.ydoc) {
+        const yXmlFragment = props.ydoc.getXmlFragment("prosemirror");
+        if (yXmlFragment.length === 0) {
+          props.ydoc.transact(() => {
+            prosemirrorToYXmlFragment(view.state.doc, yXmlFragment);
+          });
+        }
+      }
     } else {
       suppressSelectionEchoRef.current = true;
       viewRef.current.updateState(state);
@@ -391,10 +419,12 @@ export const TwProseMirrorSurface = forwardRef<
   }, [
     applyDecorationProps,
     documentBuildKey,
+    isCollabMode,
     surface,
     snapshot.selection,
     plugins,
     props.mediaPreviews,
+    props.ydoc,
   ]);
 
   // Update decorations and editability without rebuilding the PM document.
@@ -427,6 +457,7 @@ export const TwProseMirrorSurface = forwardRef<
   ]);
 
   useEffect(() => {
+    if (isCollabMode) return;
     const view = viewRef.current;
     const positionMap = positionMapRef.current;
     if (!view || !surface || !positionMap) {
@@ -448,7 +479,7 @@ export const TwProseMirrorSurface = forwardRef<
     queueMicrotask(() => {
       suppressSelectionEchoRef.current = false;
     });
-  }, [snapshot.selection, surface]);
+  }, [isCollabMode, snapshot.selection, surface]);
 
   useEffect(() => {
     if (!pendingSelectionProbeRef.current) {