fix: applying formatting to header/footer (#2904)

Co-authored-by: Artem Nistuley <artem@superdoc.dev>

Author: artem-harbour

packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js

@@ -115,6 +115,34 @@ describe('Toolbar', () => {
     removeSpy.mockRestore();
   });
 
+  it('does not restore selection when active editor is header/footer', async () => {
+    const restoreSelection = vi.fn();
+    const mockToolbar = createMockToolbar();
+    mockToolbar.activeEditor = {
+      options: { isHeaderOrFooter: true },
+      commands: { restoreSelection },
+    };
+
+    const ButtonGroupStub = defineComponent({
+      emits: ['item-clicked'],
+      template: '<button data-test="emit-item-clicked" @click="$emit(\'item-clicked\')">emit</button>',
+    });
+
+    const wrapper = mount(Toolbar, {
+      global: {
+        stubs: { ButtonGroup: ButtonGroupStub },
+        plugins: [
+          (app) => {
+            app.config.globalProperties.$toolbar = mockToolbar;
+          },
+        ],
+      },
+    });
+
+    await wrapper.find('[data-test="emit-item-clicked"]').trigger('click');
+    expect(restoreSelection).not.toHaveBeenCalled();
+  });
+
   it('does not attach ResizeObserver when responsiveToContainer is disabled', () => {
     const observe = vi.fn();
     const disconnect = vi.fn();

packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue

@@ -110,7 +110,10 @@ const handleCommand = ({ item, argument, option }) => {
 };
 
 const restoreSelection = () => {
-  proxy.$toolbar.activeEditor?.commands?.restoreSelection();
+  const editor = proxy.$toolbar.activeEditor;
+  if (!editor) return;
+  if (editor.options?.isHeaderOrFooter) return;
+  editor.commands?.restoreSelection();
 };
 
 /**

packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js

@@ -775,9 +775,10 @@ export class SuperToolbar extends EventEmitter {
       return;
     }
 
-    // If the editor wasn't focused and this is a mark toggle, queue it and keep the button active
-    // until the next selection update (after the user clicks into the editor).
-    if (!wasFocused && isMarkToggle) {
+    // Queue unfocused mark toggles only for body editors.
+    // Header/footer mark toggles execute immediately to avoid waiting for
+    // selectionUpdate and requiring an extra selection change.
+    if (!wasFocused && isMarkToggle && !this.activeEditor?.options?.isHeaderOrFooter) {
       this.pendingMarkCommands.push({ command, argument, item });
       const labelAttr = item?.labelAttr?.value;
       if (labelAttr && argument) {

packages/super-editor/src/editors/v1/core/commands/helpers/resolveHeaderFooterSelection.js

@@ -0,0 +1,5 @@
+export function resolveHeaderFooterSelection({ tr }) {
+  // Keep selection resolution centralized here so header/footer-specific fallback
+  // logic can be reintroduced in one place if we need it again.
+  return tr?.selection;
+}

packages/super-editor/src/editors/v1/core/commands/setMark.js

@@ -1,13 +1,11 @@
 import { Attribute } from '../Attribute.js';
 import { getMarkType } from '../helpers/getMarkType.js';
 import { isTextSelection } from '../helpers/isTextSelection.js';
+import { resolveHeaderFooterSelection } from './helpers/resolveHeaderFooterSelection.js';
 import { addParagraphRunProperty } from '../helpers/syncParagraphRunProperties.js';
 
-function canSetMark(editor, state, tr, newMarkType) {
-  let { selection } = tr;
-  if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
-  }
+function canSetMark(state, tr, newMarkType) {
+  const selection = resolveHeaderFooterSelection({ tr });
   let cursor = null;
 
   if (isTextSelection(selection)) {
@@ -53,11 +51,8 @@ function canSetMark(editor, state, tr, newMarkType) {
  * @param attributes Attributes to add.
  */
 //prettier-ignore
-export const setMark = (typeOrName, attributes = {}) => ({ tr, state, dispatch, editor }) => {
-    let { selection } = tr;
-    if (editor.options.isHeaderOrFooter) {
-      selection = editor.options.lastSelection;
-    }
+export const setMark = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+    const selection = resolveHeaderFooterSelection({ tr });
     const { empty, ranges } = selection;
     const type = getMarkType(typeOrName, state.schema);
 
@@ -107,5 +102,5 @@ export const setMark = (typeOrName, attributes = {}) => ({ tr, state, dispatch,
       }
     }
 
-    return canSetMark(editor, state, tr, type);
+    return canSetMark(state, tr, type);
   };

packages/super-editor/src/editors/v1/core/commands/unsetAllMarks.js

@@ -1,3 +1,5 @@
+import { resolveHeaderFooterSelection } from './helpers/resolveHeaderFooterSelection.js';
+
 /**
  * Remove all marks in the current selection.
  *
@@ -11,11 +13,8 @@
  * only, the undo path restores the exact marks that were visible to the user.
  */
 //prettier-ignore
-export const unsetAllMarks = () => ({ tr, dispatch, editor }) => {
-  let { selection } = tr;
-  if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
-  }
+export const unsetAllMarks = () => ({ tr, dispatch }) => {
+  const selection = resolveHeaderFooterSelection({ tr });
   const { empty, ranges } = selection;
 
   if (dispatch) {

packages/super-editor/src/editors/v1/core/commands/unsetMark.js

@@ -1,5 +1,6 @@
 import { getMarkRange } from '../helpers/getMarkRange.js';
 import { getMarkType } from '../helpers/getMarkType.js';
+import { resolveHeaderFooterSelection } from './helpers/resolveHeaderFooterSelection.js';
 import { removeParagraphRunProperty } from '../helpers/syncParagraphRunProperties.js';
 
 /**
@@ -8,12 +9,9 @@ import { removeParagraphRunProperty } from '../helpers/syncParagraphRunPropertie
  * @param options.extendEmptyMarkRange Removes the mark even across the current selection.
  */
 //prettier-ignore
-export const unsetMark = (typeOrName, options = {}) => ({ tr, state, dispatch, editor }) => {
+export const unsetMark = (typeOrName, options = {}) => ({ tr, state, dispatch }) => {
   const { extendEmptyMarkRange = false } = options;
-  let { selection } = tr;
-  if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
-  }
+  const selection = resolveHeaderFooterSelection({ tr });
   const type = getMarkType(typeOrName, state.schema);
   const { $from, empty, ranges } = selection;
 

packages/super-editor/src/editors/v1/tests/toolbar/super-toolbar-commands.test.js

@@ -267,6 +267,25 @@ describe('SuperToolbar sticky mark persistence', () => {
 
     expect(item.activate).toHaveBeenCalledWith();
   });
+
+  it('executes mark toggles immediately for header/footer editors instead of queueing', () => {
+    mockEditor.options.isHeaderOrFooter = true;
+    mockEditor.view.hasFocus = vi.fn(() => false);
+    const setFontSize = vi.fn();
+    mockEditor.commands.setFontSize = setFontSize;
+
+    const item = {
+      command: 'setFontSize',
+      name: { value: 'fontSize' },
+      labelAttr: { value: 'fontSize' },
+      activate: vi.fn(),
+    };
+
+    toolbar.emitCommand({ item, argument: '24pt' });
+
+    expect(toolbar.pendingMarkCommands).toHaveLength(0);
+    expect(setFontSize).toHaveBeenCalledWith('24pt');
+  });
 });
 
 describe('SuperToolbar error handling for command failures', () => {