refactor(toolbar): use labelAttr for generic activation and add tests (#2515)

Replace hardcoded setFontSize/setFontFamily check with item.labelAttr
for flexible dropdown activation when editor is unfocused. Add unit
tests for the activation path and a behavior test for the overflow
menu font selection scenario.

Author: caio-pizzol

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

@@ -1138,11 +1138,9 @@ export class SuperToolbar extends EventEmitter {
     // until the next selection update (after the user clicks into the editor).
     if (!wasFocused && isMarkToggle) {
       this.pendingMarkCommands.push({ command, argument, item });
-      const shouldPassActivationAttrs = item?.command === 'setFontSize' || item?.command === 'setFontFamily';
-      if (shouldPassActivationAttrs) {
-        const itemName = item?.name?.value;
-        const activationAttrs = argument && itemName ? { [itemName]: argument } : {};
-        item?.activate?.(activationAttrs);
+      const labelAttr = item?.labelAttr?.value;
+      if (labelAttr && argument) {
+        item?.activate?.({ [labelAttr]: argument });
       } else {
         item?.activate?.();
       }

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

@@ -280,6 +280,43 @@ describe('SuperToolbar sticky mark persistence', () => {
     expect(throwingSetFontSize).not.toHaveBeenCalled();
     expect(toolbar.pendingMarkCommands).toHaveLength(0);
   });
+
+  it('passes activation attrs to activate() for setFontSize when editor is unfocused', () => {
+    mockEditor.view.hasFocus = vi.fn(() => false);
+    const item = {
+      command: 'setFontSize',
+      name: { value: 'fontSize' },
+      labelAttr: { value: 'fontSize' },
+      activate: vi.fn(),
+    };
+
+    toolbar.emitCommand({ item, argument: '24pt' });
+
+    expect(item.activate).toHaveBeenCalledWith({ fontSize: '24pt' });
+  });
+
+  it('passes activation attrs to activate() for setFontFamily when editor is unfocused', () => {
+    mockEditor.view.hasFocus = vi.fn(() => false);
+    const item = {
+      command: 'setFontFamily',
+      name: { value: 'fontFamily' },
+      labelAttr: { value: 'fontFamily' },
+      activate: vi.fn(),
+    };
+
+    toolbar.emitCommand({ item, argument: 'Arial, sans-serif' });
+
+    expect(item.activate).toHaveBeenCalledWith({ fontFamily: 'Arial, sans-serif' });
+  });
+
+  it('calls activate() without attrs for non-font mark toggles when editor is unfocused', () => {
+    mockEditor.view.hasFocus = vi.fn(() => false);
+    const item = { command: 'toggleBold', name: { value: 'bold' }, activate: vi.fn() };
+
+    toolbar.emitCommand({ item });
+
+    expect(item.activate).toHaveBeenCalledWith();
+  });
 });
 
 describe('SuperToolbar error handling for command failures', () => {

tests/behavior/tests/toolbar/overflow-dropdown-label.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '../../fixtures/superdoc.js';
+
+test.use({ config: { toolbar: 'full' } });
+
+test('font family applies and label updates when selected from overflow menu', async ({ superdoc }) => {
+  await superdoc.type('Hello world');
+  await superdoc.waitForStable();
+
+  // Select the text
+  const pos = await superdoc.findTextPos('Hello world');
+  await superdoc.setTextSelection(pos, pos + 'Hello world'.length);
+  await superdoc.waitForStable();
+
+  // Shrink viewport so toolbar items overflow
+  await superdoc.page.setViewportSize({ width: 400, height: 600 });
+  await superdoc.waitForStable();
+
+  // Skip if overflow menu doesn't appear
+  const overflowBtn = superdoc.page.locator('[data-item="btn-overflow"]');
+  if (!(await overflowBtn.isVisible())) {
+    test.skip();
+  }
+
+  // Open overflow menu
+  await overflowBtn.click();
+  await superdoc.page.locator('.overflow-menu_items').waitFor({ state: 'visible', timeout: 5000 });
+  await superdoc.waitForStable();
+
+  // Select Georgia from font family dropdown
+  await superdoc.page.locator('[data-item="btn-fontFamily"]').click();
+  await superdoc.waitForStable();
+  await superdoc.page.locator('[data-item="btn-fontFamily-option"]').filter({ hasText: 'Georgia' }).click();
+  await superdoc.waitForStable();
+
+  // Click into the editor to trigger pending command execution
+  await superdoc.page
+    .locator('.presentation-editor__viewport')
+    .first()
+    .click({ position: { x: 50, y: 50 } });
+  await superdoc.waitForStable();
+
+  // Verify the font was applied to the text
+  await superdoc.assertTextMarkAttrs('Hello world', 'textStyle', { fontFamily: 'Georgia, serif' });
+
+  // Re-select text and check the toolbar label updated
+  const newPos = await superdoc.findTextPos('Hello world');
+  await superdoc.setTextSelection(newPos, newPos + 'Hello world'.length);
+  await superdoc.waitForStable();
+
+  // Restore viewport to see font family in main toolbar
+  await superdoc.page.setViewportSize({ width: 1600, height: 1200 });
+  await superdoc.waitForStable();
+
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"]')).toContainText('Georgia');
+});