fix: update dropdown trigger label on select

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

@@ -10,11 +10,13 @@ const createDropdownItem = (selectedKey) => ({
   isNarrow: ref(false),
   isWide: ref(false),
   disabled: ref(false),
+  label: ref(''),
   expand: ref(false),
   tooltip: ref('Test'),
   dropdownStyles: ref({}),
   dropdownValueKey: ref('key'),
   selectedValue: ref(selectedKey),
+  hideLabel: ref(false),
   attributes: ref({ ariaLabel: 'Test dropdown' }),
   nestedOptions: ref([
     {
@@ -37,7 +39,7 @@ const mountWithItem = (item) =>
       toolbarItems: [item],
       overflowItems: [],
     },
-  });
+});
 
 describe('ButtonGroup dropdownOptions selected class', () => {
   it('does not mark render option as selected even when selectedValue matches', () => {
@@ -56,3 +58,27 @@ describe('ButtonGroup dropdownOptions selected class', () => {
     expect(options[1].props.class).toBe('selected');
   });
 });
+
+describe('ButtonGroup handleSelect', () => {
+  it('updates trigger label and selectedValue when an option with a label is selected', () => {
+    const item = createDropdownItem('');
+    const wrapper = mountWithItem(item);
+    const dropdown = wrapper.findComponent({ name: 'ToolbarDropdown' });
+
+    dropdown.vm.$emit('select', 'plain-match', { key: 'plain-match', label: 'Plain option' });
+
+    expect(item.label.value).toBe('Plain option');
+    expect(item.selectedValue.value).toBe('plain-match');
+  });
+
+  it('does not update trigger label when hideLabel is true (icon-only dropdown)', () => {
+    const item = { ...createDropdownItem(''), hideLabel: ref(true) };
+    const wrapper = mountWithItem(item);
+    const dropdown = wrapper.findComponent({ name: 'ToolbarDropdown' });
+
+    dropdown.vm.$emit('select', 'plain-match', { key: 'plain-match', label: 'Plain option' });
+
+    expect(item.label.value).toBe('');
+    expect(item.selectedValue.value).toBe('plain-match');
+  });
+});

packages/super-editor/src/components/toolbar/ButtonGroup.vue

@@ -136,6 +136,10 @@ const handleSelect = (item, option) => {
   const value = item.dropdownValueKey.value ? option[item.dropdownValueKey.value] : option.label;
   emit('command', { item, argument: value, option });
   item.selectedValue.value = option.key;
+
+  if (option?.label && !item.hideLabel?.value) {
+    item.label.value = option.label;
+  }
 };
 
 const dropdownOptions = (item) => {

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

@@ -1023,6 +1023,7 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.lineHeight,
     hasCaret: false,
     hasInlineTextInput: false,
+    hideLabel: true,
     inlineTextInputVisible: false,
     suppressActiveHighlight: true,
     isWide: false,