fix: resync tracked-change bubbles on collaboration undo/redo (#2770)

* fix: resync tracked-change bubbles on collaboration undo/redo

* fix(superdoc): sync tracked change comments on peer undo/redo replay

---------

Co-authored-by: Nick Bernal <nick@superdoc.dev>

Author: artem-harbour

packages/superdoc/src/SuperDoc.test.js

@@ -4,6 +4,7 @@ import { h, defineComponent, ref, shallowRef, reactive, nextTick } from 'vue';
 import { DOCX } from '@superdoc/common';
 import { Schema } from 'prosemirror-model';
 import { EditorState, TextSelection } from 'prosemirror-state';
+import { ySyncPluginKey } from 'y-prosemirror';
 import { Extension } from '../../super-editor/src/editors/v1/core/Extension.js';
 import {
   CommentsPlugin,
@@ -744,6 +745,7 @@ describe('SuperDoc.vue', () => {
     expect(commentsStoreStub.syncTrackedChangeComments).toHaveBeenCalledWith({
       superdoc: superdocStub,
       editor: editorMock,
+      broadcastChanges: true,
     });
 
     commentsStoreStub.syncTrackedChangePositionsWithDocument.mockClear();
@@ -762,9 +764,112 @@ describe('SuperDoc.vue', () => {
     expect(commentsStoreStub.syncTrackedChangeComments).toHaveBeenCalledWith({
       superdoc: superdocStub,
       editor: editorMock,
+      broadcastChanges: true,
     });
   });
 
+  it('resyncs tracked-change threads on collaboration undo/redo transactions', async () => {
+    const superdocStub = createSuperdocStub();
+    const wrapper = await mountComponent(superdocStub);
+    await nextTick();
+
+    const options = wrapper.findComponent(SuperEditorStub).props('options');
+    const editorMock = { options: { documentId: 'doc-1' } };
+
+    const makeTransaction = ({ inputType, ySyncMeta } = {}) => ({
+      getMeta: vi.fn((key) => {
+        if (key === 'inputType') return inputType;
+        if (key === ySyncPluginKey) return ySyncMeta;
+        return undefined;
+      }),
+    });
+
+    options.onTransaction({
+      editor: editorMock,
+      transaction: makeTransaction({
+        ySyncMeta: { isChangeOrigin: true, isUndoRedoOperation: true },
+      }),
+      duration: 4,
+    });
+
+    expect(commentsStoreStub.syncTrackedChangePositionsWithDocument).toHaveBeenCalledWith({
+      documentId: 'doc-1',
+      editor: editorMock,
+    });
+    expect(commentsStoreStub.syncTrackedChangeComments).toHaveBeenCalledWith({
+      superdoc: superdocStub,
+      editor: editorMock,
+      broadcastChanges: true,
+    });
+  });
+
+  it('resyncs tracked-change threads on peer collaboration replays', async () => {
+    const superdocStub = createSuperdocStub();
+    const wrapper = await mountComponent(superdocStub);
+    await nextTick();
+
+    const options = wrapper.findComponent(SuperEditorStub).props('options');
+    const editorMock = { options: { documentId: 'doc-1' } };
+
+    const makeTransaction = ({ inputType, ySyncMeta, docChanged = false } = {}) => ({
+      docChanged,
+      getMeta: vi.fn((key) => {
+        if (key === 'inputType') return inputType;
+        if (key === ySyncPluginKey) return ySyncMeta;
+        return undefined;
+      }),
+    });
+
+    options.onTransaction({
+      editor: editorMock,
+      transaction: makeTransaction({
+        docChanged: true,
+        ySyncMeta: { isChangeOrigin: true, isUndoRedoOperation: false },
+      }),
+      duration: 6,
+    });
+
+    expect(commentsStoreStub.syncTrackedChangePositionsWithDocument).toHaveBeenCalledWith({
+      documentId: 'doc-1',
+      editor: editorMock,
+    });
+    expect(commentsStoreStub.syncTrackedChangeComments).toHaveBeenCalledWith({
+      superdoc: superdocStub,
+      editor: editorMock,
+      broadcastChanges: false,
+    });
+  });
+
+  it('does not resync tracked-change threads on meta-only collaboration updates', async () => {
+    const superdocStub = createSuperdocStub();
+    const wrapper = await mountComponent(superdocStub);
+    await nextTick();
+
+    const options = wrapper.findComponent(SuperEditorStub).props('options');
+    const editorMock = { options: { documentId: 'doc-1' } };
+
+    const makeTransaction = ({ inputType, ySyncMeta, docChanged = false } = {}) => ({
+      docChanged,
+      getMeta: vi.fn((key) => {
+        if (key === 'inputType') return inputType;
+        if (key === ySyncPluginKey) return ySyncMeta;
+        return undefined;
+      }),
+    });
+
+    options.onTransaction({
+      editor: editorMock,
+      transaction: makeTransaction({
+        docChanged: false,
+        ySyncMeta: { isChangeOrigin: true, isUndoRedoOperation: false },
+      }),
+      duration: 7,
+    });
+
+    expect(commentsStoreStub.syncTrackedChangePositionsWithDocument).not.toHaveBeenCalled();
+    expect(commentsStoreStub.syncTrackedChangeComments).not.toHaveBeenCalled();
+  });
+
   it('reconciles replay updates by importedId before commentId to avoid duplicate comments', async () => {
     const superdocStub = createSuperdocStub();
     const wrapper = await mountComponent(superdocStub);

packages/superdoc/src/SuperDoc.vue

@@ -31,6 +31,7 @@ import { useCommentsStore } from '@superdoc/stores/comments-store';
 
 import { DOCX, PDF, HTML } from '@superdoc/common';
 import { SuperEditor, AIWriter, PresentationEditor } from '@superdoc/super-editor';
+import { ySyncPluginKey } from 'y-prosemirror';
 import HtmlViewer from './components/HtmlViewer/HtmlViewer.vue';
 import useComment from './components/CommentsLayer/use-comment';
 import AiLayer from './components/AiLayer/AiLayer.vue';
@@ -1083,16 +1084,48 @@ const onEditorCommentsUpdate = (params = {}) => {
   }
 };
 
+const isHistoryUndoRedoInput = (inputType) => inputType === 'historyUndo' || inputType === 'historyRedo';
+
+const isCollaborationReplayTransaction = (transaction, ySyncMeta) => {
+  return Boolean(transaction?.docChanged && ySyncMeta?.isChangeOrigin);
+};
+
+const isPeerCollaborationReplayTransaction = (transaction, ySyncMeta) => {
+  const inputType = transaction?.getMeta?.('inputType');
+  return (
+    isCollaborationReplayTransaction(transaction, ySyncMeta) &&
+    !isHistoryUndoRedoInput(inputType) &&
+    !Boolean(ySyncMeta?.isUndoRedoOperation)
+  );
+};
+
+const shouldResyncTrackedChangeThreads = (transaction, ySyncMeta = transaction?.getMeta?.(ySyncPluginKey)) => {
+  const inputType = transaction?.getMeta?.('inputType');
+  const isLocalHistoryUndoRedo = isHistoryUndoRedoInput(inputType);
+  const isLocalCollabUndoRedo = Boolean(ySyncMeta?.isUndoRedoOperation);
+
+  // Peer editors do not retain the local UndoManager flag. A collaborator's
+  // undo/redo arrives as a generic Yjs-origin document replay, so treat those
+  // replays as tracked-change resync points and keep the resync path idempotent.
+  return isLocalHistoryUndoRedo || isLocalCollabUndoRedo || isCollaborationReplayTransaction(transaction, ySyncMeta);
+};
+
 const onEditorTransaction = (payload = {}) => {
   const { editor, transaction } = payload;
-  const inputType = transaction?.getMeta?.('inputType');
+  const ySyncMeta = transaction?.getMeta?.(ySyncPluginKey);
 
-  // Call sync on editor transaction but only if it's undo or redo
-  // This could be extended to other listeners in the future
-  if (inputType === 'historyUndo' || inputType === 'historyRedo') {
+  // Call sync on editor transaction for undo/redo in both local history
+  // and collaboration replay modes.
+  if (shouldResyncTrackedChangeThreads(transaction, ySyncMeta)) {
     const documentId = editor?.options?.documentId;
     syncTrackedChangePositionsWithDocument({ documentId, editor });
-    syncTrackedChangeComments({ superdoc: proxy.$superdoc, editor });
+    syncTrackedChangeComments({
+      superdoc: proxy.$superdoc,
+      editor,
+      // Remote replay should rebuild only local sidebar state. The authoritative
+      // collaboration comment update is already shared through the comments ydoc.
+      broadcastChanges: !isPeerCollaborationReplayTransaction(transaction, ySyncMeta),
+    });
   }
 
   emitEditorTransaction(buildEditorTransactionPayload(payload));