Merge pull request #140 from superdoc/nick/fix-behavior

fix: repair comment behavior regressions

Note: this ports only the public subtree changes from a mixed source commit (8 public paths, 45 non-public paths ignored).

Ported-From-Source-Repo: superdoc/orbit
Ported-From-Source-Commit: f033b3cd7f1e567e4414936f5d9fdc86f2b8e0fe
Ported-Public-Prefix: superdoc/public

Author: harbournick

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

@@ -6352,7 +6352,17 @@ export class PresentationEditor extends EventEmitter {
   }
 
   #syncActiveStorySessionDocumentMode(session: StoryPresentationSession | null): void {
-    if (!session || session.kind !== 'note') {
+    if (!session) {
+      return;
+    }
+
+    if (session.kind === 'headerFooter') {
+      this.#headerFooterSession?.setDocumentMode(this.#documentMode);
+      this.#headerFooterSession?.syncEditorDocumentMode(session.editor);
+      return;
+    }
+
+    if (session.kind !== 'note') {
       return;
     }
 

packages/super-editor/src/editors/v1/core/presentation-editor/header-footer/HeaderFooterSessionManager.ts

@@ -772,6 +772,11 @@ export class HeaderFooterSessionManager {
     }
   }
 
+  syncEditorDocumentMode(editor: Editor | null): void {
+    if (!editor) return;
+    this.#applyChildEditorDocumentMode(editor, this.#documentMode);
+  }
+
   setTrackedChangesRenderConfig(config: HeaderFooterTrackedChangesRenderConfig): void {
     const nextConfig: HeaderFooterTrackedChangesRenderConfig = {
       mode: config.mode,

packages/super-editor/src/editors/v1/core/presentation-editor/tests/HeaderFooterSessionManager.test.ts

@@ -520,6 +520,42 @@ describe('HeaderFooterSessionManager', () => {
     expect(activeEditor.view.dom.getAttribute('documentmode')).toBe('suggesting');
   });
 
+  it('syncs a provided header/footer editor to the current document mode', () => {
+    manager = new HeaderFooterSessionManager({
+      painterHost,
+      visibleHost,
+      selectionOverlay,
+      editor: createMainEditorStub(),
+      defaultPageSize: { w: 612, h: 792 },
+      defaultMargins: {
+        top: 72,
+        right: 72,
+        bottom: 72,
+        left: 72,
+        header: 36,
+        footer: 36,
+      },
+    });
+    const storyEditor = createHeaderFooterEditorStub(document.createElement('div')) as unknown as {
+      commands: {
+        disableTrackChangesShowOriginal: ReturnType<typeof vi.fn>;
+        enableTrackChanges: ReturnType<typeof vi.fn>;
+      };
+      setOptions: ReturnType<typeof vi.fn>;
+      setEditable: ReturnType<typeof vi.fn>;
+      view: { dom: HTMLElement };
+    };
+
+    manager.setDocumentMode('suggesting');
+    manager.syncEditorDocumentMode(storyEditor as unknown as Editor);
+
+    expect(storyEditor.commands.disableTrackChangesShowOriginal).toHaveBeenCalledTimes(1);
+    expect(storyEditor.commands.enableTrackChanges).toHaveBeenCalledTimes(1);
+    expect(storyEditor.setOptions).toHaveBeenCalledWith({ documentMode: 'suggesting' });
+    expect(storyEditor.setEditable).toHaveBeenCalledWith(true);
+    expect(storyEditor.view.dom.getAttribute('documentmode')).toBe('suggesting');
+  });
+
   it('exits the active story session when leaving header/footer mode', async () => {
     const pageElement = document.createElement('div');
     pageElement.dataset.pageIndex = '0';

packages/superdoc/src/SuperDoc.vue

@@ -2008,8 +2008,7 @@ const collectTouchedChangeIds = (transaction) => {
   return collectTouchedTrackedChangeIds(transaction, { trackChangesPluginKey: TrackChangesBasePluginKey });
 };
 
-const onEditorTransaction = (payload = {}) => {
-  const { editor, transaction } = payload;
+const queueTrackedChangeCommentResyncForTransaction = ({ editor, transaction } = {}) => {
   const ySyncMeta = transaction?.getMeta?.(ySyncPluginKey);
 
   // Call sync on editor transaction for undo/redo in both local history
@@ -2036,6 +2035,10 @@ const onEditorTransaction = (payload = {}) => {
       changeIds: collectTouchedChangeIds(transaction),
     });
   }
+};
+
+const onEditorTransaction = (payload = {}) => {
+  queueTrackedChangeCommentResyncForTransaction(payload);
 
   emitEditorTransaction(buildEditorTransactionPayload(payload));
 };

packages/superdoc/src/components/CommentsLayer/CommentDialog.test.js

@@ -1519,6 +1519,67 @@ describe('CommentDialog.vue', () => {
     expect(headers[2].props('comment').commentId).toBe('child-2');
   });
 
+  it('re-collapses an expanded thread when active comment leaves the parent thread', async () => {
+    const replyOne = reactive({
+      uid: 'uid-reply-1',
+      commentId: 'reply-1',
+      parentCommentId: 'comment-1',
+      email: 'reply1@example.com',
+      commentText: '<p>First reply</p>',
+      createdTime: 1000,
+      fileId: 'doc-1',
+      fileType: 'DOCX',
+      setActive: vi.fn(),
+      setText: vi.fn(),
+      setIsInternal: vi.fn(),
+      resolveComment: vi.fn(),
+      trackedChange: false,
+      selection: {
+        getValues: () => ({ selectionBounds: { top: 120, bottom: 150, left: 20, right: 40 } }),
+        selectionBounds: { top: 120, bottom: 150, left: 20, right: 40 },
+      },
+    });
+    const replyTwo = reactive({
+      uid: 'uid-reply-2',
+      commentId: 'reply-2',
+      parentCommentId: 'comment-1',
+      email: 'reply2@example.com',
+      commentText: '<p>Second reply</p>',
+      createdTime: 2000,
+      fileId: 'doc-1',
+      fileType: 'DOCX',
+      setActive: vi.fn(),
+      setText: vi.fn(),
+      setIsInternal: vi.fn(),
+      resolveComment: vi.fn(),
+      trackedChange: false,
+      selection: {
+        getValues: () => ({ selectionBounds: { top: 120, bottom: 150, left: 20, right: 40 } }),
+        selectionBounds: { top: 120, bottom: 150, left: 20, right: 40 },
+      },
+    });
+
+    const { wrapper } = await mountDialog({
+      extraComments: [replyOne, replyTwo],
+      props: { autoFocus: false },
+    });
+
+    commentsStoreStub.activeComment.value = 'comment-1';
+    await nextTick();
+
+    const collapsedPill = wrapper.find('.collapsed-replies');
+    expect(collapsedPill.exists()).toBe(true);
+    await collapsedPill.trigger('click');
+    await nextTick();
+    expect(wrapper.findAll('.conversation-item')).toHaveLength(3);
+
+    commentsStoreStub.activeComment.value = replyTwo.commentId;
+    await nextTick();
+
+    expect(wrapper.find('.collapsed-replies').exists()).toBe(true);
+    expect(wrapper.findAll('.conversation-item')).toHaveLength(2);
+  });
+
   it('threads range-based comments under tracked change parent', async () => {
     const rangeBasedRoot = reactive({
       uid: 'uid-range-root',

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

@@ -366,14 +366,16 @@ const checkOverflow = () => {
 watch(parentBodyRef, () => {
   nextTick(checkOverflow);
 });
-// Reset truncation, thread collapse, and reply state when card becomes inactive
+const resetInactiveThreadState = () => {
+  textExpanded.value = false;
+  threadExpanded.value = false;
+  isReplying.value = false;
+  nextTick(() => emit('resize'));
+};
+
+// Reset truncation, thread collapse, and reply state when card becomes inactive.
 watch(isDialogActive, (active) => {
-  if (!active) {
-    textExpanded.value = false;
-    threadExpanded.value = false;
-    isReplying.value = false;
-    nextTick(() => emit('resize'));
-  }
+  if (!active) resetInactiveThreadState();
 });
 
 /* ── Step 3: Thread collapse ──
@@ -388,7 +390,6 @@ const childComments = computed(() => comments.value.slice(1));
 const shouldCollapseThread = computed(() => {
   if (props.comment.trackedChange) return false;
   if (threadExpanded.value) return false;
-  if (isDialogActive.value || activeCommentBelongsToDialog.value) return false;
   return childComments.value.length >= 2;
 });
 
@@ -432,6 +433,11 @@ const expandThread = () => {
   nextTick(() => emit('resize'));
 };
 
+watch(activeComment, (commentId) => {
+  if (commentId === props.comment.commentId) return;
+  resetInactiveThreadState();
+});
+
 const isInternalDropdownDisabled = computed(() => {
   if (props.comment.resolvedTime) return true;
   return getConfig.value.readOnly;

packages/superdoc/src/core/SuperDoc.test.js

@@ -1917,7 +1917,7 @@ describe('SuperDoc core', () => {
     expect(setDocumentMode).toHaveBeenLastCalledWith('suggesting');
   });
 
-  it('routes document mode changes through all registered runtimes for a document before falling back to legacy editors', async () => {
+  it('routes document mode changes through registered runtimes and their presentation editors before legacy fallback', async () => {
     const { superdocStore } = createAppHarness();
     const legacyDocMode = vi.fn();
     const runtimeBackedEditorMode = vi.fn();
@@ -1958,13 +1958,13 @@ describe('SuperDoc core', () => {
     instance.registerEditorRuntime(runtimeA);
     instance.registerEditorRuntime(runtimeB);
 
-    instance.setDocumentMode('viewing');
+    instance.setDocumentMode('suggesting');
 
-    expect(setModeA).toHaveBeenCalledWith('viewing');
-    expect(setModeB).toHaveBeenCalledWith('viewing');
+    expect(setModeA).toHaveBeenCalledWith('suggesting');
+    expect(setModeB).toHaveBeenCalledWith('suggesting');
     expect(runtimeBackedEditorMode).not.toHaveBeenCalled();
-    expect(runtimeBackedPresentationMode).not.toHaveBeenCalled();
-    expect(legacyDocMode).toHaveBeenCalledWith('viewing');
+    expect(runtimeBackedPresentationMode).toHaveBeenCalledWith('suggesting');
+    expect(legacyDocMode).toHaveBeenCalledWith('suggesting');
   });
 
   it('syncs a stale presentation host class after runtime document-mode propagation', async () => {

packages/superdoc/src/core/SuperDoc.ts

@@ -2391,23 +2391,25 @@ export class SuperDoc extends EventEmitter<SuperDocEventMap> {
   #applyDocumentMode(doc: RuntimeDocument, mode: DocumentMode) {
     const documentId = typeof doc.id === 'string' && doc.id.length > 0 ? doc.id : null;
     const presentationEditor = typeof doc.getPresentationEditor === 'function' ? doc.getPresentationEditor() : null;
+    let appliedToRuntime = false;
     if (documentId) {
       const runtimes = this.#editorRuntimeRegistry.getAllByDocumentId(documentId);
       if (runtimes.length > 0) {
         for (const runtime of runtimes) {
           runtime.setDocumentMode(mode);
         }
-        if (presentationEditor && this.#isPresentationModeClassStale(presentationEditor, mode)) {
-          presentationEditor.setDocumentMode(mode);
-        }
-        return;
+        appliedToRuntime = true;
       }
     }
 
     if (presentationEditor) {
-      presentationEditor.setDocumentMode(mode);
+      if (!appliedToRuntime || mode !== 'viewing' || this.#isPresentationModeClassStale(presentationEditor, mode)) {
+        presentationEditor.setDocumentMode(mode);
+      }
       return;
     }
+    if (appliedToRuntime) return;
+
     const editor = typeof doc.getEditor === 'function' ? doc.getEditor() : null;
     if (editor) {
       editor.setDocumentMode(mode);