fix(comments): track change edits in body get matched in comments bubble (#3305)

* feat(comments): implement refresh functionality for tracked-change comments by IDs

* chore: add comments

* fix: shallow equal build

* fix(comments): inline match logic

* refactor: use exported equal check

* fix: use correct indexing for doc position

* test: use actual mapping

Author: palmer-cl

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 { Mapping, StepMap } from 'prosemirror-transform';
 import { ySyncPluginKey } from 'y-prosemirror';
 import { Extension } from '../../super-editor/src/editors/v1/core/Extension.js';
 import {
@@ -120,6 +121,7 @@ vi.mock('@superdoc/super-editor', () => ({
   SuperEditor: SuperEditorStub,
   AIWriter: AIWriterStub,
   getTrackedChangeIndex: getTrackedChangeIndexMock,
+  TrackChangesBasePluginKey: 'TrackChangesBasePluginKey',
   PresentationEditor: class PresentationEditorMock {
     static getInstance(documentId) {
       return mockState.instances.get(documentId);
@@ -194,6 +196,7 @@ const buildCommentsStore = () => ({
   handleEditorLocationsUpdate: vi.fn(),
   clearEditorCommentPositions: vi.fn(),
   handleTrackedChangeUpdate: vi.fn(),
+  refreshTrackedChangeCommentsByIds: vi.fn(),
   syncTrackedChangePositionsWithDocument: vi.fn(),
   syncTrackedChangeComments: vi.fn(),
   removePendingComment: vi.fn(),
@@ -1001,6 +1004,72 @@ describe('SuperDoc.vue', () => {
     expect(commentsStoreStub.syncTrackedChangeComments).not.toHaveBeenCalled();
   });
 
+  it('refreshes only touched tracked-change comments from normal body 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 transaction = {
+      getMeta: vi.fn((key) =>
+        key === 'TrackChangesBasePluginKey'
+          ? {
+              insertedMark: { attrs: { id: 'tracked-insert-1' } },
+              deletionMark: { attrs: { id: 'tracked-delete-1' } },
+              formatMark: { attrs: { id: 'tracked-format-1' } },
+            }
+          : undefined,
+      ),
+    };
+
+    options.onTransaction({ editor: editorMock, transaction, duration: 3 });
+
+    expect(commentsStoreStub.syncTrackedChangePositionsWithDocument).not.toHaveBeenCalled();
+    expect(commentsStoreStub.syncTrackedChangeComments).not.toHaveBeenCalled();
+    expect(commentsStoreStub.refreshTrackedChangeCommentsByIds).not.toHaveBeenCalled();
+
+    await Promise.resolve();
+    expect(commentsStoreStub.refreshTrackedChangeCommentsByIds).toHaveBeenCalledWith({
+      superdoc: superdocStub,
+      editor: editorMock,
+      changeIds: ['tracked-insert-1', 'tracked-delete-1', 'tracked-format-1'],
+      broadcastChanges: true,
+    });
+  });
+
+  it('refreshes tracked-change comments found in changed transaction ranges', 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 trackedNode = {
+      marks: [{ type: { name: 'trackInsert' }, attrs: { id: 'tracked-range-1' } }],
+    };
+    const transaction = {
+      docChanged: true,
+      doc: {
+        content: { size: 20 },
+        nodesBetween: vi.fn((from, to, visitor) => visitor(trackedNode)),
+      },
+      mapping: new Mapping([new StepMap([4, 0, 1])]),
+      getMeta: vi.fn(() => undefined),
+    };
+
+    options.onTransaction({ editor: editorMock, transaction, duration: 3 });
+
+    await Promise.resolve();
+    expect(transaction.doc.nodesBetween).toHaveBeenCalledWith(3, 6, expect.any(Function));
+    expect(commentsStoreStub.refreshTrackedChangeCommentsByIds).toHaveBeenCalledWith({
+      superdoc: superdocStub,
+      editor: editorMock,
+      changeIds: ['tracked-range-1'],
+      broadcastChanges: true,
+    });
+  });
+
   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

@@ -33,7 +33,13 @@ import { useSuperdocStore } from '@superdoc/stores/superdoc-store';
 import { useCommentsStore } from '@superdoc/stores/comments-store';
 
 import { DOCX, PDF, HTML } from '@superdoc/common';
-import { SuperEditor, AIWriter, PresentationEditor, getTrackedChangeIndex } from '@superdoc/super-editor';
+import {
+  SuperEditor,
+  AIWriter,
+  PresentationEditor,
+  getTrackedChangeIndex,
+  TrackChangesBasePluginKey,
+} from '@superdoc/super-editor';
 import { ySyncPluginKey } from 'y-prosemirror';
 import HtmlViewer from './components/HtmlViewer/HtmlViewer.vue';
 import useComment from './components/CommentsLayer/use-comment';
@@ -45,6 +51,7 @@ import { getVisibleThreadAnchorClientY } from './helpers/comment-focus.js';
 import { useUiFontFamily } from './composables/useUiFontFamily.js';
 import { usePasswordPrompt } from './composables/use-password-prompt.js';
 import { useFindReplace } from './composables/use-find-replace.js';
+import { collectTouchedTrackedChangeIds } from './helpers/collect-touched-tracked-change-ids.js';
 import SurfaceHost from './components/surfaces/SurfaceHost.vue';
 
 const PdfViewer = defineAsyncComponent(() => import('./components/PdfViewer/PdfViewer.vue'));
@@ -116,6 +123,7 @@ const {
   showAddComment,
   handleEditorLocationsUpdate,
   handleTrackedChangeUpdate,
+  refreshTrackedChangeCommentsByIds,
   syncTrackedChangePositionsWithDocument,
   syncTrackedChangeComments,
   addComment,
@@ -258,18 +266,31 @@ const flushQueuedTrackedChangeCommentResync = () => {
   queuedTrackedChangeCommentResync = null;
   if (!pendingResync?.editor) return;
 
-  syncTrackedChangeComments({
+  if (pendingResync.fullResync) {
+    syncTrackedChangeComments({
+      superdoc: proxy.$superdoc,
+      editor: pendingResync.editor,
+      broadcastChanges: pendingResync.broadcastChanges,
+    });
+    return;
+  }
+
+  refreshTrackedChangeCommentsByIds({
     superdoc: proxy.$superdoc,
     editor: pendingResync.editor,
+    changeIds: Array.from(pendingResync.changeIds ?? []),
     broadcastChanges: pendingResync.broadcastChanges,
   });
 };
 
-const queueTrackedChangeCommentResync = ({ editor, broadcastChanges = true } = {}) => {
-  if (!editor) return;
+const queueTrackedChangeCommentResync = ({ editor, changeIds = null, broadcastChanges = true } = {}) => {
+  if (!editor || (changeIds && !changeIds.size)) return;
 
+  const existingChangeIds = queuedTrackedChangeCommentResync?.changeIds ?? new Set();
   queuedTrackedChangeCommentResync = {
     editor,
+    fullResync: !changeIds || Boolean(queuedTrackedChangeCommentResync?.fullResync),
+    changeIds: changeIds ? new Set([...existingChangeIds, ...changeIds]) : existingChangeIds,
     broadcastChanges: Boolean(queuedTrackedChangeCommentResync?.broadcastChanges) || Boolean(broadcastChanges),
   };
 
@@ -1159,6 +1180,10 @@ const shouldResyncTrackedChangeThreads = (transaction, ySyncMeta = transaction?.
   return isLocalHistoryUndoRedo || isLocalCollabUndoRedo || isCollaborationReplayTransaction(transaction, ySyncMeta);
 };
 
+const collectTouchedChangeIds = (transaction) => {
+  return collectTouchedTrackedChangeIds(transaction, { trackChangesPluginKey: TrackChangesBasePluginKey });
+};
+
 const onEditorTransaction = (payload = {}) => {
   const { editor, transaction } = payload;
   const ySyncMeta = transaction?.getMeta?.(ySyncPluginKey);
@@ -1174,6 +1199,11 @@ const onEditorTransaction = (payload = {}) => {
       // collaboration comment update is already shared through the comments ydoc.
       broadcastChanges: !isPeerCollaborationReplayTransaction(transaction, ySyncMeta),
     });
+  } else {
+    queueTrackedChangeCommentResync({
+      editor,
+      changeIds: collectTouchedChangeIds(transaction),
+    });
   }
 
   emitEditorTransaction(buildEditorTransactionPayload(payload));

packages/superdoc/src/helpers/collect-touched-tracked-change-ids.js

@@ -0,0 +1,51 @@
+/**
+ * Collect tracked-change mark IDs from ranges touched by a ProseMirror transaction.
+ *
+ * @param {import('prosemirror-state').Transaction} transaction
+ * @param {object} [options]
+ * @param {object|null} [options.trackChangesPluginKey] - The TrackChangesBasePluginKey to read metadata from
+ * @returns {Set<string>} Set of tracked-change mark IDs
+ */
+export function collectTouchedTrackedChangeIds(transaction, { trackChangesPluginKey = null } = {}) {
+  const ids = new Set();
+  const addMarkId = (mark) => {
+    const id = mark?.attrs?.id;
+    if (id != null) ids.add(String(id));
+  };
+
+  // AIDEV-NOTE: Existing tracked-change edits can update the live mark text
+  // without reporting that mark in TrackChangesBasePluginKey metadata. Keep
+  // the changed-range scan so the sidebar bubble refreshes for those edits.
+  const meta = trackChangesPluginKey ? transaction?.getMeta?.(trackChangesPluginKey) : null;
+  if (meta) {
+    [meta.insertedMark, meta.deletionMark, meta.formatMark].forEach(addMarkId);
+  }
+
+  if (!transaction?.docChanged || !transaction?.doc || !transaction?.mapping?.maps?.length) return ids;
+
+  // Map each step's output range through all subsequent steps to get coordinates
+  // valid in transaction.doc (the final document). Individual step maps report
+  // newStart/newEnd relative to intermediate documents, not the final doc —
+  // using them directly causes wrong lookups in multi-step transactions
+  // (e.g. IME/composition, paste, batched edits).
+  const docSize = transaction.doc.content.size;
+  transaction.mapping.maps.forEach((stepMap, stepIndex) => {
+    stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
+      const mappingOffset = stepIndex + 1;
+      const mappedFrom = transaction.mapping.slice(mappingOffset).map(newStart, 1);
+      const mappedTo = transaction.mapping.slice(mappingOffset).map(newEnd, -1);
+      const from = Math.max(0, mappedFrom - 1);
+      const to = Math.min(docSize, mappedTo + 1);
+      if (from >= to) return;
+
+      transaction.doc.nodesBetween(from, to, (node) => {
+        node.marks?.forEach((mark) => {
+          const markName = mark.type?.name;
+          if (markName === 'trackInsert' || markName === 'trackDelete' || markName === 'trackFormat') addMarkId(mark);
+        });
+      });
+    });
+  });
+
+  return ids;
+}