diff --git a/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.test.js b/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.test.js
new file mode 100644
index 0000000000..9ca4b21559
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.test.js
@@ -0,0 +1,38 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+// Mock the extension helpers so the component can mount without a real editor.
+vi.mock('@extensions/linked-styles/index.js', () => ({
+ getQuickFormatList: () => [
+ { id: 'Normal', definition: { attrs: { name: 'Normal' }, styles: {} } },
+ { id: 'Heading1', definition: { attrs: { name: 'Heading 1' }, styles: {} } },
+ ],
+ generateLinkedStyleString: () => '',
+}));
+
+import LinkedStyle from './LinkedStyle.vue';
+
+describe('LinkedStyle dropdown', () => {
+ let wrapper;
+ beforeEach(() => {
+ wrapper = mount(LinkedStyle, { props: { editor: {}, selectedOption: 'Normal' } });
+ });
+
+ it('emits "select" with the style when a row name is clicked', async () => {
+ await wrapper.findAll('.style-name')[1].trigger('click');
+ const events = wrapper.emitted('select');
+ expect(events).toBeTruthy();
+ expect(events[0][0].id).toBe('Heading1');
+ });
+
+ it('emits "update" with the style when the row update action is clicked', async () => {
+ const updateBtn = wrapper.findAll('[data-item="btn-linkedStyles-update"]')[1];
+ expect(updateBtn.exists()).toBe(true);
+ await updateBtn.trigger('click');
+ const events = wrapper.emitted('update');
+ expect(events).toBeTruthy();
+ expect(events[0][0].id).toBe('Heading1');
+ // Clicking update must NOT also apply the style.
+ expect(wrapper.emitted('select')).toBeFalsy();
+ });
+});
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.vue b/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.vue
index 8487d98906..6745fa2bfb 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/LinkedStyle.vue
@@ -3,7 +3,7 @@ import { computed, ref, onMounted } from 'vue';
import { toolbarIcons } from './toolbarIcons.js';
import { generateLinkedStyleString, getQuickFormatList } from '@extensions/linked-styles/index.js';
-const emit = defineEmits(['select']);
+const emit = defineEmits(['select', 'update']);
const styleRefs = ref([]);
const props = defineProps({
editor: {
@@ -19,6 +19,10 @@ const select = (style) => {
emit('select', style);
};
+const update = (style) => {
+ emit('update', style);
+};
+
const moveToNextStyle = (index) => {
if (index === styleRefs.value.length - 1) {
return;
@@ -78,21 +82,66 @@ onMounted(() => {
>
{{ style.definition.attrs.name }}
+