fix(track-changes): honor independent replacements in story editors

Author: harbournick

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

@@ -4431,6 +4431,13 @@ export class PresentationEditor extends EventEmitter {
         });
       },
       onSurfaceTransaction: ({ sourceEditor, surface, headerId, sectionType, transaction, duration }) => {
+        if (transaction?.docChanged && headerId) {
+          this.#invalidateTrackedChangesForStory({
+            kind: 'story',
+            storyType: 'headerFooterPart',
+            refId: headerId,
+          });
+        }
         this.emit('headerFooterTransaction', {
           editor: this.#editor,
           sourceEditor,
@@ -4477,6 +4484,7 @@ export class PresentationEditor extends EventEmitter {
       if (!transaction?.docChanged) {
         return;
       }
+      this.#invalidateTrackedChangesForStory(session.locator);
       this.#flowBlockCache.setHasExternalChanges(true);
       this.#pendingDocChange = true;
       this.#selectionSync.onLayoutStart();
@@ -4510,6 +4518,14 @@ export class PresentationEditor extends EventEmitter {
     session.editor.setOptions?.({ documentMode: this.#documentMode });
   }
 
+  #invalidateTrackedChangesForStory(locator: StoryLocator): void {
+    try {
+      getTrackedChangeIndex(this.#editor).invalidate(locator);
+    } catch {
+      // Tracked-change sync is best-effort while a live story session is typing.
+    }
+  }
+
   #ensureStorySessionManager(): StoryPresentationSessionManager {
     if (this.#storySessionManager) {
       return this.#storySessionManager;

packages/super-editor/src/editors/v1/core/story-editor-factory.test.ts

@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import type { Editor } from './Editor.js';
+import { createStoryEditor } from './story-editor-factory.ts';
+import { initTestEditor } from '../tests/helpers/helpers.js';
+
+const createdEditors: Editor[] = [];
+
+function trackEditor(editor: Editor): Editor {
+  createdEditors.push(editor);
+  return editor;
+}
+
+afterEach(() => {
+  while (createdEditors.length > 0) {
+    const editor = createdEditors.pop();
+    try {
+      editor?.destroy?.();
+    } catch {
+      // best-effort cleanup for test editors
+    }
+  }
+});
+
+describe('createStoryEditor', () => {
+  it('inherits tracked changes configuration from the parent editor', () => {
+    const parent = trackEditor(
+      initTestEditor({
+        mode: 'text',
+        content: '<p>Hello world</p>',
+        trackedChanges: {
+          visible: true,
+          mode: 'review',
+          enabled: true,
+          replacements: 'independent',
+        },
+      }).editor as Editor,
+    );
+
+    const child = trackEditor(
+      createStoryEditor(
+        parent,
+        {
+          type: 'doc',
+          content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Header text' }] }],
+        },
+        {
+          documentId: 'hf:part:rId9',
+          isHeaderOrFooter: true,
+          headless: true,
+        },
+      ),
+    );
+
+    expect(child.options.trackedChanges).toEqual({
+      visible: true,
+      mode: 'review',
+      enabled: true,
+      replacements: 'independent',
+    });
+
+    child.options.trackedChanges!.replacements = 'paired';
+    expect(parent.options.trackedChanges?.replacements).toBe('independent');
+  });
+});

packages/super-editor/src/editors/v1/core/story-editor-factory.ts

@@ -129,6 +129,9 @@ export function createStoryEditor(
   const inheritedExtensions = parentEditor.options.extensions?.length
     ? [...parentEditor.options.extensions]
     : undefined;
+  const inheritedTrackedChanges = parentEditor.options.trackedChanges
+    ? { ...parentEditor.options.trackedChanges }
+    : undefined;
   const StoryEditorClass = parentEditor.constructor as new (options: Partial<EditorOptions>) => Editor;
 
   const storyEditor = new StoryEditorClass({
@@ -145,6 +148,7 @@ export function createStoryEditor(
     mediaFiles: media,
     fonts: parentEditor.options.fonts,
     user: parentEditor.options.user,
+    trackedChanges: inheritedTrackedChanges,
     isHeaderOrFooter,
     isHeadless,
     pagination: false,
@@ -157,7 +161,9 @@ export function createStoryEditor(
     // Only set element when not headless
     ...(isHeadless ? {} : { element }),
 
-    // Disable collaboration, comments, and tracked changes for story editors
+    // Disable collaboration and comment threading for story editors.
+    // Tracked-change configuration is inherited from the parent editor so
+    // suggesting-mode story sessions honor the same replacement model.
     ydoc: null,
     collaborationProvider: null,
     isCommentsEnabled: false,

tests/behavior/tests/comments/story-tracked-change-independent-replacement.spec.ts

@@ -0,0 +1,191 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test, type Locator, type Page } from '../../fixtures/superdoc.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const HEADER_DOC_PATH = path.resolve(__dirname, '../../test-data/pagination/longer-header.docx');
+const FOOTNOTE_DOC_PATH = path.resolve(
+  __dirname,
+  '../../../../packages/super-editor/src/editors/v1/tests/data/basic-footnotes.docx',
+);
+
+test.skip(!fs.existsSync(HEADER_DOC_PATH), 'Header/footer test document not available — run pnpm corpus:pull');
+test.skip(!fs.existsSync(FOOTNOTE_DOC_PATH), 'Footnote test document not available');
+
+test.use({
+  config: {
+    comments: 'panel',
+    trackChanges: true,
+    replacements: 'independent',
+    useHiddenHostForStoryParts: true,
+  },
+});
+
+async function activateHeader(page: Page) {
+  const header = page.locator('.superdoc-page-header').first();
+  await header.waitFor({ state: 'visible', timeout: 15_000 });
+  const box = await header.boundingBox();
+  expect(box).toBeTruthy();
+  await page.mouse.dblclick(box!.x + box!.width / 2, box!.y + box!.height / 2);
+}
+
+async function activateFooter(page: Page) {
+  const footer = page.locator('.superdoc-page-footer').first();
+  await footer.scrollIntoViewIfNeeded();
+  await footer.waitFor({ state: 'visible', timeout: 15_000 });
+  const box = await footer.boundingBox();
+  expect(box).toBeTruthy();
+  await page.mouse.dblclick(box!.x + box!.width / 2, box!.y + box!.height / 2);
+}
+
+async function activateFootnote(page: Page) {
+  const footnote = page.locator('[data-block-id^="footnote-1-"]').first();
+  await footnote.scrollIntoViewIfNeeded();
+  await footnote.waitFor({ state: 'visible', timeout: 15_000 });
+  const box = await footnote.boundingBox();
+  expect(box).toBeTruthy();
+  await page.mouse.dblclick(box!.x + box!.width / 2, box!.y + box!.height / 2);
+}
+
+async function replaceFirstTwoLettersInActiveStory(page: Page, replacementText: string) {
+  return page.evaluate(
+    ({ replacement }) => {
+      const presentation = (window as any).editor?.presentationEditor;
+      const hostEditor = (window as any).editor;
+      const activeEditor = presentation?.getActiveEditor?.();
+      if (!activeEditor || activeEditor === hostEditor) {
+        throw new Error('Expected an active story editor.');
+      }
+
+      const storyText = activeEditor.state.doc.textBetween(0, activeEditor.state.doc.content.size, '\n', '\n') ?? '';
+      const match = storyText.match(/[A-Za-z]{2,}/);
+      if (!match || match.index == null) {
+        throw new Error(`No replaceable word found in active story text: "${storyText}"`);
+      }
+
+      const deletedText = storyText.slice(match.index, match.index + 2);
+      const positions: number[] = [];
+      activeEditor.state.doc.descendants((node: any, pos: number) => {
+        if (!node?.isText || !node.text) return;
+        for (let i = 0; i < node.text.length; i += 1) positions.push(pos + i);
+      });
+
+      const from = positions[match.index];
+      const to = positions[match.index + 1] + 1;
+      const success = activeEditor.commands.insertTrackedChange({ from, to, text: replacement });
+
+      return {
+        success,
+        activeDocumentId: activeEditor.options.documentId,
+        trackedChanges: activeEditor.options.trackedChanges ?? null,
+        deletedText,
+        replacement,
+      };
+    },
+    { replacement: replacementText },
+  );
+}
+
+async function expectIndependentStoryBubbles(page: Page, deletedText: string, insertedText: string) {
+  await expect
+    .poll(
+      () =>
+        page.evaluate(
+          ({ deleted, inserted }) => {
+            const comments = (window as any).superdoc?.commentsStore?.commentsList ?? [];
+            const trackedChangeComments = comments.filter((comment: any) => comment?.trackedChange);
+            const matchingComments = trackedChangeComments.filter(
+              (comment: any) => comment?.deletedText === deleted || comment?.trackedChangeText === inserted,
+            );
+            const floatingCount = (window as any).superdoc?.commentsStore?.getFloatingComments?.length ?? 0;
+            const dialogTexts = Array.from(document.querySelectorAll('.comment-placeholder .comments-dialog'))
+              .map((node) => node.textContent ?? '')
+              .filter(Boolean);
+
+            return {
+              matchingTypes: matchingComments.map((comment: any) => comment?.trackedChangeType).sort(),
+              matchingDeletedTexts: matchingComments.map((comment: any) => comment?.deletedText).filter(Boolean),
+              matchingInsertedTexts: matchingComments.map((comment: any) => comment?.trackedChangeText).filter(Boolean),
+              floatingCount,
+              dialogTexts,
+            };
+          },
+          { deleted: deletedText, inserted: insertedText },
+        ),
+      { timeout: 10_000 },
+    )
+    .toEqual(
+      expect.objectContaining({
+        matchingTypes: ['trackDelete', 'trackInsert'],
+        matchingDeletedTexts: [deletedText],
+        matchingInsertedTexts: [insertedText],
+      }),
+    );
+}
+
+async function expectActiveStoryReplacementMode(page: Page) {
+  await expect
+    .poll(() =>
+      page.evaluate(() => (window as any).editor?.presentationEditor?.getActiveEditor?.()?.options?.trackedChanges),
+    )
+    .toEqual(
+      expect.objectContaining({
+        replacements: 'independent',
+      }),
+    );
+}
+
+test('header replacement sidebar stays independent in suggesting mode', async ({ superdoc }) => {
+  await superdoc.loadDocument(HEADER_DOC_PATH);
+  await superdoc.waitForStable();
+  await superdoc.setDocumentMode('suggesting');
+  await superdoc.waitForStable();
+
+  await activateHeader(superdoc.page);
+  await superdoc.waitForStable();
+  await expectActiveStoryReplacementMode(superdoc.page);
+
+  const result = await replaceFirstTwoLettersInActiveStory(superdoc.page, 'x');
+  expect(result.success).toBe(true);
+  expect(result.activeDocumentId).not.toBe(
+    (await superdoc.page.evaluate(() => (window as any).editor?.options?.documentId)) ?? null,
+  );
+
+  await superdoc.waitForStable();
+  await expectIndependentStoryBubbles(superdoc.page, result.deletedText, result.replacement);
+});
+
+test('footer replacement sidebar stays independent in suggesting mode', async ({ superdoc }) => {
+  await superdoc.loadDocument(HEADER_DOC_PATH);
+  await superdoc.waitForStable();
+  await superdoc.setDocumentMode('suggesting');
+  await superdoc.waitForStable();
+
+  await activateFooter(superdoc.page);
+  await superdoc.waitForStable();
+  await expectActiveStoryReplacementMode(superdoc.page);
+
+  const result = await replaceFirstTwoLettersInActiveStory(superdoc.page, 'x');
+  expect(result.success).toBe(true);
+
+  await superdoc.waitForStable();
+  await expectIndependentStoryBubbles(superdoc.page, result.deletedText, result.replacement);
+});
+
+test('footnote replacement sidebar stays independent in suggesting mode', async ({ superdoc }) => {
+  await superdoc.loadDocument(FOOTNOTE_DOC_PATH);
+  await superdoc.waitForStable();
+  await superdoc.setDocumentMode('suggesting');
+  await superdoc.waitForStable();
+
+  await activateFootnote(superdoc.page);
+  await superdoc.waitForStable();
+  await expectActiveStoryReplacementMode(superdoc.page);
+
+  const result = await replaceFirstTwoLettersInActiveStory(superdoc.page, 'x');
+  expect(result.success).toBe(true);
+
+  await superdoc.waitForStable();
+  await expectIndependentStoryBubbles(superdoc.page, result.deletedText, result.replacement);
+});