fix(tracked-changes): sync tracked changes store on undo and redo (#2164)

* feat(comments): synchronize tracked change positions with document on undo/redo actions

* refactor: match editorCommentPositions for undo

* fix: add edge cases for commentId vs importedId

* fix: use the same logic for keys in sidebar

* fix: further normalize comment ids

* chore: cleanup tests and dupe function

Author: palmer-cl

packages/super-editor/src/core/presentation-editor/PresentationEditor.ts

@@ -2644,20 +2644,17 @@ export class PresentationEditor extends EventEmitter {
         this.#epochMapper.recordTransaction(transaction);
         this.#selectionSync.setDocEpoch(this.#epochMapper.getCurrentEpoch());
 
+        const inputType = transaction.getMeta?.('inputType');
         // Detect Y.js-origin transactions (remote collaboration changes).
         // These bypass the blockNodePlugin's sdBlockRev increment to prevent
         // feedback loops, so the FlowBlockCache's fast revision comparison
-        // cannot be trusted — signal it to fall through to JSON comparison.
+        // cannot be trusted. History undo/redo can also restore tracked-mark-only
+        // changes where visible text stays the same, so use the same JSON fallback.
         const ySyncMeta = transaction.getMeta?.(ySyncPluginKey);
-        if (ySyncMeta?.isChangeOrigin && transaction.docChanged) {
-          this.#flowBlockCache?.setHasExternalChanges(true);
-        }
-        // History undo/redo can restore prior paragraph content while preserving/reusing
-        // sdBlockRev values, which makes the cache's fast revision check unsafe.
-        // Force JSON comparison for this render cycle to avoid stale paragraph reuse.
-        const inputType = transaction.getMeta?.('inputType');
-        const isHistoryType = inputType === 'historyUndo' || inputType === 'historyRedo';
-        if (isHistoryType && transaction.docChanged) {
+        const shouldBypassFastRevision =
+          transaction.docChanged &&
+          (ySyncMeta?.isChangeOrigin || inputType === 'historyUndo' || inputType === 'historyRedo');
+        if (shouldBypassFastRevision) {
           this.#flowBlockCache?.setHasExternalChanges(true);
         }
       }

packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts

@@ -25,6 +25,8 @@ const {
   mockOnHeaderFooterDataUpdate,
   mockUpdateYdocDocxData,
   mockEditorOverlayManager,
+  mockFlowBlockCacheInstances,
+  MockFlowBlockCache,
 } = vi.hoisted(() => {
   const createDefaultConverter = () => ({
     headers: {
@@ -106,6 +108,19 @@ const {
   };
 
   const editors: Array<{ editor: ReturnType<typeof createSectionEditor> }> = [];
+  const mockFlowBlockCacheInstances: Array<{
+    clear: ReturnType<typeof vi.fn>;
+    setHasExternalChanges: ReturnType<typeof vi.fn>;
+  }> = [];
+
+  class MockFlowBlockCache {
+    clear = vi.fn();
+    setHasExternalChanges = vi.fn();
+
+    constructor() {
+      mockFlowBlockCacheInstances.push(this);
+    }
+  }
 
   return {
     createDefaultConverter,
@@ -145,6 +160,8 @@ const {
       getActiveEditorHost: vi.fn(() => null),
       destroy: vi.fn(),
     })),
+    mockFlowBlockCacheInstances,
+    MockFlowBlockCache,
   };
 });
 
@@ -219,6 +236,7 @@ vi.mock('@superdoc/pm-adapter', async (importOriginal) => {
   return {
     ...actual,
     toFlowBlocks: mockToFlowBlocks,
+    FlowBlockCache: MockFlowBlockCache,
   };
 });
 
@@ -319,6 +337,7 @@ describe('PresentationEditor', () => {
     };
     mockEditorConverterStore.mediaFiles = {};
     createdSectionEditors.length = 0;
+    mockFlowBlockCacheInstances.length = 0;
 
     // Reset static instances
     (PresentationEditor as typeof PresentationEditor & { instances: Map<string, unknown> }).instances = new Map();
@@ -2404,6 +2423,48 @@ describe('PresentationEditor', () => {
       expect(layoutUpdatedCount).toBeGreaterThan(afterDocUpdate);
     });
 
+    it('marks the flow-block cache dirty for history undo and redo updates', async () => {
+      mockIncrementalLayout.mockResolvedValue(buildLayoutResult());
+
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'test-doc',
+      });
+
+      const mockEditorInstance = (Editor as unknown as MockedEditor).mock.results[
+        (Editor as unknown as MockedEditor).mock.results.length - 1
+      ].value;
+
+      await waitForLayoutUpdate();
+
+      const flowBlockCache = mockFlowBlockCacheInstances.at(-1);
+      expect(flowBlockCache).toBeDefined();
+      flowBlockCache!.setHasExternalChanges.mockClear();
+
+      const onCalls = mockEditorInstance.on as unknown as Mock;
+      const updateCall = onCalls.mock.calls.find((call) => call[0] === 'update');
+      expect(updateCall).toBeDefined();
+
+      const handleUpdate = updateCall![1] as (payload: { transaction: { docChanged: boolean; getMeta: Mock } }) => void;
+      const makeTransaction = (inputType: string) => ({
+        docChanged: true,
+        getMeta: vi.fn((key: string) => (key === 'inputType' ? inputType : undefined)),
+        mapping: {
+          appendMapping: vi.fn(),
+          slice: vi.fn(() => ({
+            appendMapping: vi.fn(),
+          })),
+        },
+      });
+
+      handleUpdate({ transaction: makeTransaction('historyUndo') });
+      handleUpdate({ transaction: makeTransaction('historyRedo') });
+
+      expect(flowBlockCache!.setHasExternalChanges).toHaveBeenCalledTimes(2);
+      expect(flowBlockCache!.setHasExternalChanges).toHaveBeenNthCalledWith(1, true);
+      expect(flowBlockCache!.setHasExternalChanges).toHaveBeenNthCalledWith(2, true);
+    });
+
     it('should remove pageStyleUpdate listener on destroy', () => {
       editor = new PresentationEditor({
         element: container,

packages/superdoc/src/SuperDoc.vue

@@ -90,6 +90,7 @@ const {
   showAddComment,
   handleEditorLocationsUpdate,
   handleTrackedChangeUpdate,
+  syncTrackedChangePositionsWithDocument,
   addComment,
   getComment,
   COMMENT_EVENTS,
@@ -686,6 +687,15 @@ const onEditorCommentsUpdate = (params = {}) => {
 };
 
 const onEditorTransaction = ({ editor, transaction, duration }) => {
+  const inputType = transaction?.getMeta?.('inputType');
+
+  // 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') {
+    const documentId = editor?.options?.documentId;
+    syncTrackedChangePositionsWithDocument({ documentId, editor });
+  }
+
   if (typeof proxy.$superdoc.config.onTransaction === 'function') {
     proxy.$superdoc.config.onTransaction({ editor, transaction, duration });
   }

packages/superdoc/src/components/CommentsLayer/FloatingComments.vue

@@ -66,6 +66,7 @@ const props = defineProps({
 
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
+const { getCommentAliasIds, getCommentPositionKey, resolveCommentPositionEntry } = commentsStore;
 
 const { getFloatingComments, activeComment, editorCommentPositions, pendingComment } = storeToRefs(commentsStore);
 const { activeZoom } = storeToRefs(superdocStore);
@@ -76,10 +77,15 @@ const commentsRenderKey = ref(0);
 // Resolve activeComment (which stores commentId) to the position key used by allPositions
 // (which prefers importedId). Without this, imported Word comments where importedId !== commentId
 // would fail the template guard and could unmount when scrolled out of the observer viewport.
+const resolveLayoutKey = (commentOrId, preferredId) => {
+  const { key } = resolveCommentPositionEntry(commentOrId, preferredId);
+  if (key) return key;
+  return getCommentAliasIds(commentOrId)[0] ?? getCommentPositionKey(commentOrId);
+};
+
 const activeCommentKey = computed(() => {
   if (!activeComment.value) return null;
-  const comment = commentsStore.getComment(activeComment.value);
-  return comment ? commentsStore.getCommentPositionKey(comment) : null;
+  return resolveLayoutKey(activeComment.value);
 });
 
 // Heights: measured (actual) or estimated. Seeded from module-level cache to
@@ -98,8 +104,7 @@ const observedElements = new Set();
 
 // Compute anchor position for a comment from editor position data
 const getAnchorTop = (comment) => {
-  const key = commentsStore.getCommentPositionKey(comment);
-  const positionEntry = editorCommentPositions.value[key];
+  const { entry: positionEntry } = resolveCommentPositionEntry(comment);
 
   if (props.currentDocument.type === 'application/pdf') {
     const zoom = (activeZoom.value ?? 100) / 100;
@@ -131,7 +136,7 @@ const allPositions = computed(() => {
 
   const positions = [];
   for (const comment of comments) {
-    const key = commentsStore.getCommentPositionKey(comment);
+    const key = resolveLayoutKey(comment);
     const top = getAnchorTop(comment);
     if (!key || typeof top !== 'number' || isNaN(top)) continue;
 
@@ -246,14 +251,14 @@ const handleDialog = (dialog) => {
   nextTick(() => {
     const bounds = elementRef.value?.getBoundingClientRect();
     if (!bounds || bounds.height <= 0) return;
-    const key = commentsStore.getCommentPositionKey(rawId);
+    const key = resolveLayoutKey(rawId, rawId);
     if (key) storeHeight(key, bounds.height);
   });
 };
 
 // Re-measure a specific comment dialog when it signals a resize (e.g. text truncation toggle)
 const handleResize = (comment) => {
-  const key = commentsStore.getCommentPositionKey(comment);
+  const key = resolveLayoutKey(comment);
   if (!key) return;
   nextTick(() => {
     const el = placeholderRefs.value[key];
@@ -319,7 +324,7 @@ watch(activeComment, () => {
   if (!activeComment.value) return;
   const comment = commentsStore.getComment(activeComment.value);
   if (!comment) return;
-  const key = commentsStore.getCommentPositionKey(comment);
+  const key = resolveLayoutKey(comment);
   if (!key) return;
 
   nextTick(() => {