fix: ensure we do not duplicate bubble text

e2e-tests/tests/visuals/comments.spec.js

@@ -74,4 +74,44 @@ test.describe('viewing mode comments visibility', () => {
       timeout: 30_000,
     });
   });
+
+  test('should show inserted and removed text in tracked change replacement bubble', async ({ page }) => {
+    await goToPageAndWaitForEditor(page, { includeComments: true });
+    await page.locator('input[type="file"]').setInputFiles(`${config.commentsDocumentsFolder}/basic-comments.docx`);
+
+    await page.waitForFunction(() => window.superdoc !== undefined && window.editor !== undefined, null, {
+      polling: 100,
+      timeout: 10_000,
+    });
+
+    const superEditor = page.locator('div.super-editor').first();
+    const targetText = 'replaced_token';
+    const insertedText = 'inserted_token';
+
+    await superEditor.click();
+    await page.keyboard.type(` ${targetText}`);
+    for (let i = 0; i < targetText.length; i += 1) {
+      await page.keyboard.press('Shift+ArrowLeft');
+    }
+
+    const trackChangesToggled = await page.evaluate(() => window.editor.commands.toggleTrackChanges());
+    expect(trackChangesToggled).toBe(true);
+    await page.keyboard.type(insertedText);
+    await sleep(600);
+
+    const replacementBubble = page
+      .getByRole('dialog')
+      .filter({ hasText: 'Added:' })
+      .filter({ hasText: 'inserted_token' })
+      .filter({ hasText: 'Deleted:' })
+      .filter({ hasText: 'replaced_token' })
+      .first();
+
+    await expect(replacementBubble).toBeVisible();
+    await expect(replacementBubble).toContainText('Added:');
+    await expect(replacementBubble).toContainText('inserted_token');
+    await expect(replacementBubble).toContainText('Deleted:');
+    await expect(replacementBubble).toContainText('replaced_token');
+    await expect(replacementBubble).toHaveScreenshot('tracked-change-replacement-bubble.png');
+  });
 });

packages/super-editor/src/extensions/comment/comments-plugin.js

@@ -868,11 +868,22 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   // When isDeletionInsertion is true, nodesWithMark should contain both types
   let nodesToUse;
   if (isDeletionInsertion) {
-    // For replacements, use nodes found in document (which should include both insertion and deletion)
-    // Also include nodes from step.slice and deletionNodes if they exist (for newly created replacements)
-    const allNodes = [...nodesWithMark, ...nodes, ...(deletionNodes || [])];
-    // Remove duplicates by comparing node identity
-    nodesToUse = Array.from(new Set(allNodes));
+    // For replacements, prefer nodes found in the document to avoid duplicating text
+    // when step.slice/deletionNodes include overlapping content.
+    const hasInsertNode = nodesWithMark.some((node) =>
+      node.marks.find((nodeMark) => nodeMark.type.name === TrackInsertMarkName),
+    );
+    const hasDeleteNode = nodesWithMark.some((node) =>
+      node.marks.find((nodeMark) => nodeMark.type.name === TrackDeleteMarkName),
+    );
+
+    const fallbackNodes = [
+      ...(!hasInsertNode && nodes?.length ? nodes : []),
+      ...(!hasDeleteNode && deletionNodes?.length ? deletionNodes : []),
+    ];
+    // safety net for identity dedupe
+    // work is done above
+    nodesToUse = Array.from(new Set([...nodesWithMark, ...fallbackNodes]));
   } else {
     // For non-replacements, use nodes found in document or fall back to step nodes
     nodesToUse = nodesWithMark.length ? nodesWithMark : node ? [node] : [];

packages/super-editor/src/extensions/comment/comments-plugin.test.js

@@ -916,6 +916,44 @@ describe('internal helper functions', () => {
     expect(combinedResult.deletionText).toBe('Removed');
   });
 
+  it('does not duplicate replacement text when creating tracked change comments', () => {
+    const schema = createCommentSchema();
+    const insertMark = schema.marks[TrackInsertMarkName].create({
+      id: 'replace-1',
+      author: 'Author',
+      authorEmail: 'author@example.com',
+      date: 'today',
+    });
+    const deleteMark = schema.marks[TrackDeleteMarkName].create({
+      id: 'replace-1',
+      author: 'Author',
+      authorEmail: 'author@example.com',
+      date: 'today',
+    });
+
+    const docInsertNode = schema.text('replacement', [insertMark]);
+    const docDeleteNode = schema.text('original', [deleteMark]);
+    const doc = schema.node('doc', null, [schema.node('paragraph', null, [docInsertNode, docDeleteNode])]);
+    const state = EditorState.create({ schema, doc });
+
+    // Simulate step slice and deletion nodes from a replacement transaction
+    const stepInsertNodes = [schema.text('replacement', [insertMark])];
+    const deletionNodes = [schema.text('original', [deleteMark])];
+
+    const payload = createOrUpdateTrackedChangeComment({
+      event: 'add',
+      marks: { insertedMark: insertMark, deletionMark: deleteMark, formatMark: null },
+      deletionNodes,
+      nodes: stepInsertNodes,
+      newEditorState: state,
+      documentId: 'doc-1',
+    });
+
+    expect(payload?.trackedChangeText).toBe('replacement');
+    expect(payload?.trackedChangeText).not.toBe('replacementt');
+    expect(payload?.deletedText).toBe('original');
+  });
+
   it('createOrUpdateTrackedChangeComment builds add and update payloads', () => {
     const schema = createCommentSchema();
     const insertMark = schema.marks[TrackInsertMarkName].create({