From 7146386d1586c16de38dcbd721aac2ce068e2333 Mon Sep 17 00:00:00 2001
From: Jannchie <jannchie@gmail.com>
Date: Sun, 5 Apr 2026 19:59:21 +0900
Subject: [PATCH 1/4] refactor(editor-toolbar): refactor toolbar rendering into
 renderer component and memoize item state

---
 src/runtime/components/EditorToolbar.vue      | 409 ++++++++++++------
 .../components/EditorToolbarItemRenderer.vue  |  54 +++
 test/components/EditorToolbar.spec.ts         |  75 ++++
 3 files changed, 408 insertions(+), 130 deletions(-)
 create mode 100644 src/runtime/components/EditorToolbarItemRenderer.vue

diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
index 0b8d08ae06..74e301b0a6 100644
--- a/src/runtime/components/EditorToolbar.vue
+++ b/src/runtime/components/EditorToolbar.vue
@@ -96,7 +96,7 @@ export type EditorToolbarSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<EditorToolbarItem>">
-import { computed, inject } from 'vue'
+import { computed, inject, shallowRef, watch, type ShallowRef } from 'vue'
 import { Primitive, Separator, useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
@@ -106,9 +106,7 @@ import { useComponentUI } from '../composables/useComponentUI'
 import { isArrayOfArray, pick, omit } from '../utils'
 import { createHandlers } from '../utils/editor'
 import { tv } from '../utils/tv'
-import UButton from './Button.vue'
-import UDropdownMenu from './DropdownMenu.vue'
-import UTooltip from './Tooltip.vue'
+import EditorToolbarItemRenderer from './EditorToolbarItemRenderer.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -146,67 +144,116 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorToolba
   layout: props.layout
 }))
 
-const groups = computed(() =>
-  props.items?.length
-    ? isArrayOfArray(props.items)
-      ? props.items
-      : [props.items as NestedItem<T>[]]
-    : []
-)
+type ToolbarItemState = {
+  active: boolean
+  disabled: boolean
+}
 
-function isActive(item: EditorToolbarItem): boolean {
-  if (!props.editor?.isEditable) {
-    return false
-  }
+type ToolbarDropdownState = {
+  activeChildIcon?: string
+  activeChildLabel?: string
+  items: DropdownMenuItem[][]
+}
 
-  // Check for dropdown (has items property)
-  if (('items' in item) && item.items?.length) {
-    return item.items?.some((item): boolean => isActive(item as EditorToolbarItem)) || false
-  }
+type ToolbarGroupEntry = {
+  item: EditorToolbarItem
+  key: string
+  index: number
+}
 
-  // Check for plain button (no kind property)
-  if (!('kind' in item)) {
-    return item.active ?? false
+type ToolbarRenderEntry = ToolbarGroupEntry & {
+  buttonProps: ShallowRef<Record<string, any>>
+  dropdownState: ShallowRef<ToolbarDropdownState | undefined>
+  dropdownItems: ShallowRef<DropdownMenuItem[][]>
+  dropdownProps?: ShallowRef<Record<string, any> | undefined>
+  slotName: string
+  state: ShallowRef<ToolbarItemState>
+  tooltip?: TooltipProps
+}
+
+function createItemKey(groupIndex: number, path: number[]) {
+  return `${groupIndex}-${path.join('-')}`
+}
+
+function normalizeGroups(items: T | undefined): EditorToolbarItem[][] {
+  if (!items?.length) {
+    return []
   }
 
-  // Check for editor item (has kind property)
-  const handler = handlers?.value?.[item.kind]
-  return handler?.isActive(props.editor, item as any) || false
+  return isArrayOfArray(items)
+    ? items as EditorToolbarItem[][]
+    : [items as EditorToolbarItem[]]
 }
 
-function isDisabled(item: EditorToolbarItem): boolean {
-  if (!props.editor?.isEditable) {
-    return true
+function normalizeDropdownGroups(items: ArrayOrNested<EditorToolbarDropdownChildItem> | undefined): EditorToolbarDropdownChildItem[][] {
+  if (!items?.length) {
+    return []
   }
 
-  if ('items' in item && item.items?.length) {
-    const items = isArrayOfArray(item.items) ? item.items.flat() : item.items
-    // Filter out structural elements (separators, labels)
-    const actionableItems = items.filter((item: any) => item.type !== 'separator' && item.type !== 'label')
+  return isArrayOfArray(items)
+    ? items as EditorToolbarDropdownChildItem[][]
+    : [items as EditorToolbarDropdownChildItem[]]
+}
 
-    if (actionableItems.length === 0) {
-      return true
+const groups = computed<ToolbarGroupEntry[][]>(() =>
+  normalizeGroups(props.items).map((group, groupIndex) =>
+    group.map((item, index) => ({
+      item,
+      index,
+      key: createItemKey(groupIndex, [index])
+    }))
+  )
+)
+
+const itemKeyMap = computed(() => {
+  const map = new WeakMap<object, string>()
+
+  for (const group of groups.value) {
+    for (const entry of group) {
+      map.set(entry.item as object, entry.key)
     }
+  }
+
+  return map
+})
 
-    return actionableItems.every((item: any) => isDisabled(item))
+function resolveBaseItemState(item: EditorToolbarItem): ToolbarItemState {
+  if (!props.editor?.isEditable) {
+    return {
+      active: false,
+      disabled: true
+    }
   }
 
   if (!('kind' in item)) {
-    return item.disabled ?? false
+    return {
+      active: item.active ?? false,
+      disabled: item.disabled ?? false
+    }
   }
 
   const handler = handlers?.value?.[item.kind]
   if (!handler) {
-    return false
+    return {
+      active: false,
+      disabled: false
+    }
   }
 
-  // Check item-specific disabled state
-  if (handler.isDisabled?.(props.editor, item)) {
-    return true
+  return {
+    active: handler.isActive(props.editor, item as any),
+    disabled: !!handler.isDisabled?.(props.editor, item as any) || !handler.canExecute(props.editor, item as any)
   }
+}
 
-  // Check if item can be executed
-  return !handler.canExecute(props.editor, item)
+function resolveDropdownChildren(children: DropdownMenuItem['children']): DropdownMenuItem['children'] {
+  if (!Array.isArray(children)) {
+    return children
+  }
+
+  return isArrayOfArray(children)
+    ? children.map(group => group.map(child => resolveDropdownChild(child as EditorToolbarDropdownChildItem).item))
+    : children.map(child => resolveDropdownChild(child as EditorToolbarDropdownChildItem).item)
 }
 
 function onClick(e: MouseEvent, item: EditorToolbarItem) {
@@ -229,33 +276,77 @@ function onClick(e: MouseEvent, item: EditorToolbarItem) {
   }
 }
 
-function getActiveChildItem(item: EditorToolbarDropdownItem): EditorToolbarItem | undefined {
-  if (!item.items) {
-    return undefined
+function resolveDropdownChild(item: EditorToolbarDropdownChildItem): { item: DropdownMenuItem, state: ToolbarItemState, actionable: boolean } {
+  const children: DropdownMenuItem['children'] = 'children' in item
+    ? resolveDropdownChildren(item.children)
+    : undefined
+
+  const state = resolveBaseItemState(item as EditorToolbarItem)
+
+  if (!('kind' in item)) {
+    return {
+      item: children ? { ...item, children } : item,
+      state,
+      actionable: item.type !== 'separator' && item.type !== 'label'
+    }
+  }
+
+  return {
+    item: {
+      ...item,
+      ...(children && { children }),
+      active: state.active,
+      disabled: state.disabled,
+      onSelect: (e: Event) => onClick(e as MouseEvent, item as EditorToolbarItem)
+    },
+    state,
+    actionable: true
+  }
+}
+
+function resolveToolbarItem(item: EditorToolbarItem): { state: ToolbarItemState, dropdown?: ToolbarDropdownState } {
+  if (!('items' in item) || !item.items?.length) {
+    return { state: resolveBaseItemState(item) }
   }
 
-  const items = isArrayOfArray(item.items) ? item.items.flat() : item.items
+  const dropdownGroups = normalizeDropdownGroups(item.items)
+  const resolvedGroups = dropdownGroups.map(group => group.map(child => resolveDropdownChild(child)))
+  const resolvedItems = resolvedGroups.flat()
+  const actionableItems = resolvedItems.filter(({ actionable }) => actionable)
+  const activeChild = resolvedItems.find(({ item, state }) => {
+    return 'kind' in item && state.active
+  })?.item as EditorToolbarItem | undefined
 
-  return items.find((childItem: any): childItem is EditorToolbarItem => {
-    if (!('kind' in childItem)) {
-      return false
+  return {
+    state: {
+      active: resolvedItems.some(({ state }) => state.active),
+      disabled: actionableItems.length === 0 || actionableItems.every(({ state }) => state.disabled)
+    },
+    dropdown: {
+      activeChildIcon: activeChild?.icon,
+      activeChildLabel: activeChild?.label,
+      items: resolvedGroups.map(group => group.map(({ item }) => item))
     }
-    return isActive(childItem as EditorToolbarItem)
-  }) as EditorToolbarItem | undefined
+  }
+}
+
+function sameToolbarItemState(a: ToolbarItemState, b: ToolbarItemState) {
+  return a.active === b.active && a.disabled === b.disabled
 }
 
-function getButtonProps(item: EditorToolbarItem) {
+function sameDropdownButtonProps(a: ToolbarDropdownState | undefined, b: ToolbarDropdownState | undefined) {
+  return a?.activeChildIcon === b?.activeChildIcon
+    && a?.activeChildLabel === b?.activeChildLabel
+}
+
+function buildButtonProps(item: EditorToolbarItem, dropdownState?: ToolbarDropdownState) {
   const baseProps = omit(item as any, ['kind', 'mark', 'align', 'level', 'href', 'src', 'pos', 'items', 'slot', 'checkedIcon', 'loadingIcon', 'externalIcon', 'content', 'arrow', 'portal', 'modal', 'tooltip', 'onClick'])
 
-  // For dropdown items, use the active child's icon if available
-  if ('items' in item && item.items?.length) {
-    const activeChild = getActiveChildItem(item)
-    if (activeChild?.icon) {
-      baseProps.icon = activeChild.icon
-    }
-    if (activeChild?.label && baseProps.label !== undefined) {
-      baseProps.label = activeChild.label
-    }
+  if (dropdownState?.activeChildIcon) {
+    baseProps.icon = dropdownState.activeChildIcon
+  }
+  if (dropdownState?.activeChildLabel && baseProps.label !== undefined) {
+    baseProps.label = dropdownState.activeChildLabel
   }
 
   return defu(baseProps, {
@@ -267,44 +358,119 @@ function getButtonProps(item: EditorToolbarItem) {
   })
 }
 
-function getDropdownProps(item: EditorToolbarDropdownItem) {
-  const baseProps = pick(item as any, ['size', 'checkedIcon', 'loadingIcon', 'externalIcon', 'content', 'arrow', 'portal', 'modal', 'ui'])
+function buildRenderGroups(): ToolbarRenderEntry[][] {
+  return groups.value.map(group =>
+    group.map((entry) => {
+      const resolved = resolveToolbarItem(entry.item)
+      const hasDropdown = 'items' in entry.item && entry.item.items?.length
+
+      return {
+        ...entry,
+        buttonProps: shallowRef(buildButtonProps(entry.item, resolved.dropdown)),
+        dropdownState: shallowRef(resolved.dropdown),
+        dropdownItems: shallowRef(resolved.dropdown?.items || []),
+        dropdownProps: shallowRef(hasDropdown ? getDropdownProps(entry.item as EditorToolbarDropdownItem) : undefined),
+        slotName: entry.item.slot || 'item',
+        state: shallowRef(resolved.state),
+        tooltip: entry.item.tooltip
+      }
+    })
+  )
+}
 
-  return defu(baseProps, {
-    modal: false,
-    size: props.size
-  })
+const renderGroups = shallowRef<ToolbarRenderEntry[][]>(buildRenderGroups())
+
+function refreshState(force = false) {
+  for (const group of renderGroups.value) {
+    for (const entry of group) {
+      const resolved = resolveToolbarItem(entry.item)
+      const stateChanged = force || !sameToolbarItemState(entry.state.value, resolved.state)
+
+      if (stateChanged) {
+        entry.state.value = resolved.state
+      }
+
+      if ('items' in entry.item && entry.item.items?.length) {
+        const previousDropdownState = entry.dropdownState.value
+
+        // Always update dropdown items since child active/disabled states may change
+        entry.dropdownState.value = resolved.dropdown
+        entry.dropdownItems.value = resolved.dropdown?.items || []
+
+        // Only rebuild button props when activeChild icon/label changes
+        if (stateChanged || force || !sameDropdownButtonProps(previousDropdownState, resolved.dropdown)) {
+          entry.buttonProps.value = buildButtonProps(entry.item, resolved.dropdown)
+        }
+      }
+    }
+  }
 }
 
-function mapDropdownItem(item: EditorToolbarDropdownChildItem): DropdownMenuItem {
-  // Recursively map children if present
-  const children = 'children' in item && Array.isArray(item.children)
-    ? item.children.map(mapDropdownItem)
-    : undefined
+watch(() => props.items, () => {
+  renderGroups.value = buildRenderGroups()
+}, { deep: true })
 
-  // If it's a separator or label (no 'kind' property), return with mapped children
-  if (!('kind' in item)) {
-    return children ? { ...item, children } : item
+watch(() => [props.color, props.variant, props.activeColor, props.activeVariant, props.size], () => {
+  renderGroups.value = buildRenderGroups()
+})
+
+watch(() => handlers.value, () => {
+  refreshState(true)
+}, { deep: true })
+
+watch(() => props.editor, (editor, _, onCleanup) => {
+  refreshState(true)
+
+  if (typeof (editor as any)?.on !== 'function' || typeof (editor as any)?.off !== 'function') {
+    return
   }
 
-  const editorToolbarItem = item as EditorToolbarDropdownChildItem
-  return {
-    ...editorToolbarItem,
-    ...(children && { children }),
-    active: isActive(editorToolbarItem),
-    disabled: isDisabled(editorToolbarItem),
-    onSelect: (e: Event) => onClick(e as MouseEvent, editorToolbarItem)
+  const onTransaction = () => {
+    refreshState()
   }
-}
 
-function getDropdownItems(item: EditorToolbarDropdownItem) {
-  if (!item.items) {
-    return []
+  editor.on('transaction', onTransaction)
+
+  onCleanup(() => {
+    editor.off('transaction', onTransaction)
+  })
+}, { immediate: true })
+
+function getRenderEntry(key: string) {
+  for (const group of renderGroups.value) {
+    for (const entry of group) {
+      if (entry.key === key) {
+        return entry
+      }
+    }
   }
+}
+
+function isActive(item: EditorToolbarItem): boolean {
+  const key = itemKeyMap.value.get(item as object)
+  const entry = key ? getRenderEntry(key) : undefined
+
+  return entry
+    ? entry.state.value.active
+    : resolveToolbarItem(item).state.active
+}
+
+function isDisabled(item: EditorToolbarItem): boolean {
+  const key = itemKeyMap.value.get(item as object)
+  const entry = key ? getRenderEntry(key) : undefined
 
-  return isArrayOfArray(item.items)
-    ? item.items.map((group: any) => group.map(mapDropdownItem))
-    : [item.items.map(mapDropdownItem)]
+  return entry
+    ? entry.state.value.disabled
+    : resolveToolbarItem(item).state.disabled
+}
+
+function getDropdownProps(item: EditorToolbarDropdownItem) {
+  const baseProps = pick(item as any, ['size', 'checkedIcon', 'loadingIcon', 'externalIcon', 'content', 'arrow', 'portal', 'modal', 'ui'])
+
+  return defu(baseProps, {
+    modal: false,
+    size: props.size
+  })
 }
 </script>
 
@@ -323,53 +489,36 @@ function getDropdownItems(item: EditorToolbarDropdownItem) {
     }"
   >
     <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
-      <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
+      <template v-for="(group, groupIndex) in renderGroups" :key="`group-${groupIndex}`">
         <div role="group" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <slot
-              :name="((item.slot || 'item') as keyof EditorToolbarSlots<T>)"
-              :item="(item as any)"
-              :index="index"
-              :is-active="isActive"
-              :is-disabled="isDisabled"
-              :on-click="onClick"
-            >
-              <UDropdownMenu
-                v-if="('items' in item && item.items?.length)"
-                v-bind="getDropdownProps(item as EditorToolbarDropdownItem)"
-                :items="getDropdownItems(item as EditorToolbarDropdownItem)"
-              >
-                <UTooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...(item.tooltip || {}) }">
-                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
-                </UTooltip>
-
-                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
-              </UDropdownMenu>
-
-              <UTooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...(item.tooltip || {}) }">
-                <UButton
-                  :active="isActive(item)"
-                  :disabled="isDisabled(item)"
-                  v-bind="getButtonProps(item)"
-                  :ui="item.ui"
-                  @click="onClick($event, item)"
-                />
-              </UTooltip>
-
-              <UButton
-                v-else
-                :active="isActive(item)"
-                :disabled="isDisabled(item)"
-                v-bind="getButtonProps(item)"
-                :ui="item.ui"
-                @click="onClick($event, item)"
+          <template v-for="entry in group" :key="entry.key">
+            <template v-if="$slots[entry.slotName]">
+              <slot
+                :name="(entry.slotName as keyof EditorToolbarSlots<T>)"
+                :item="(entry.item as any)"
+                :index="entry.index"
+                :is-active="isActive"
+                :is-disabled="isDisabled"
+                :on-click="onClick"
+              />
+            </template>
+
+            <template v-else>
+              <EditorToolbarItemRenderer
+                :item="entry.item"
+                :state="entry.state"
+                :button-props="entry.buttonProps"
+                :dropdown-items="entry.dropdownItems"
+                :dropdown-props="entry.dropdownProps"
+                :tooltip="entry.tooltip"
+                :on-click="onClick"
               />
-            </slot>
+            </template>
           </template>
         </div>
 
         <Separator
-          v-if="groupIndex < groups.length - 1"
+          v-if="groupIndex < renderGroups.length - 1"
           data-slot="separator"
           :class="ui.separator({ class: uiProp?.separator })"
           orientation="vertical"
diff --git a/src/runtime/components/EditorToolbarItemRenderer.vue b/src/runtime/components/EditorToolbarItemRenderer.vue
new file mode 100644
index 0000000000..59f07cc71b
--- /dev/null
+++ b/src/runtime/components/EditorToolbarItemRenderer.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+import type { ShallowRef } from 'vue'
+import type { DropdownMenuItem, TooltipProps } from '../types'
+import type { EditorToolbarItem } from './EditorToolbar.vue'
+
+export interface EditorToolbarItemRendererProps {
+  item: EditorToolbarItem
+  state: ShallowRef<{ active: boolean, disabled: boolean }>
+  buttonProps: ShallowRef<Record<string, any>>
+  dropdownItems: ShallowRef<DropdownMenuItem[][]>
+  dropdownProps?: ShallowRef<Record<string, any> | undefined>
+  tooltip?: TooltipProps
+  onClick: (e: MouseEvent, item: EditorToolbarItem) => void
+}
+</script>
+
+<script setup lang="ts">
+import UButton from './Button.vue'
+import UDropdownMenu from './DropdownMenu.vue'
+import UTooltip from './Tooltip.vue'
+
+defineProps<EditorToolbarItemRendererProps>()
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="('items' in item && item.items?.length)"
+    v-bind="dropdownProps?.value"
+    :items="dropdownItems.value"
+  >
+    <UTooltip v-if="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
+      <UButton :active="state.value.active" :disabled="state.value.disabled" v-bind="buttonProps.value" @click="onClick($event, item)" />
+    </UTooltip>
+
+    <UButton v-else :active="state.value.active" :disabled="state.value.disabled" v-bind="buttonProps.value" @click="onClick($event, item)" />
+  </UDropdownMenu>
+
+  <UTooltip v-else-if="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
+    <UButton
+      :active="state.value.active"
+      :disabled="state.value.disabled"
+      v-bind="buttonProps.value"
+      @click="onClick($event, item)"
+    />
+  </UTooltip>
+
+  <UButton
+    v-else
+    :active="state.value.active"
+    :disabled="state.value.disabled"
+    v-bind="buttonProps.value"
+    @click="onClick($event, item)"
+  />
+</template>
diff --git a/test/components/EditorToolbar.spec.ts b/test/components/EditorToolbar.spec.ts
index 58110abc74..d8c244d94b 100644
--- a/test/components/EditorToolbar.spec.ts
+++ b/test/components/EditorToolbar.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { computed, nextTick } from 'vue'
 import { renderEach } from '../component-render'
 import type { Editor } from '@tiptap/vue-3'
 import EditorToolbar from '../../src/runtime/components/EditorToolbar.vue'
@@ -61,6 +62,30 @@ describe('EditorToolbar', () => {
   }]]
   const props = { editor: { registerPlugin: vi.fn() } as unknown as Editor, items }
 
+  function createMockEditor() {
+    const listeners = new Map<string, Set<() => void>>()
+
+    return {
+      isEditable: true,
+      registerPlugin: vi.fn(),
+      on: vi.fn((event: string, callback: () => void) => {
+        if (!listeners.has(event)) {
+          listeners.set(event, new Set())
+        }
+
+        listeners.get(event)?.add(callback)
+      }),
+      off: vi.fn((event: string, callback: () => void) => {
+        listeners.get(event)?.delete(callback)
+      }),
+      emit(event: string) {
+        for (const callback of listeners.get(event) || []) {
+          callback()
+        }
+      }
+    } as unknown as Editor & { emit: (event: string) => void }
+  }
+
   renderEach(EditorToolbar, [
     // Props
     ['with as', { props: { ...props, as: 'section' } }],
@@ -79,4 +104,54 @@ describe('EditorToolbar', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  it('avoids recomputing handler state on unrelated rerenders', async () => {
+    const editor = createMockEditor()
+    const isActive = vi.fn(() => false)
+    const canExecute = vi.fn(() => true)
+    const isDisabled = vi.fn(() => false)
+
+    const wrapper = await mountSuspended(EditorToolbar, {
+      props: {
+        editor,
+        items: [[{
+          'kind': 'customAction',
+          'icon': 'i-lucide-wand-sparkles',
+          'aria-label': 'Custom action'
+        } as any]]
+      },
+      global: {
+        provide: {
+          editorHandlers: computed(() => ({
+            customAction: {
+              isActive,
+              canExecute,
+              isDisabled,
+              execute: () => ({
+                run: () => true
+              })
+            }
+          }))
+        }
+      }
+    })
+
+    const initialIsActiveCalls = isActive.mock.calls.length
+    const initialCanExecuteCalls = canExecute.mock.calls.length
+    const initialIsDisabledCalls = isDisabled.mock.calls.length
+
+    await wrapper.setProps({ class: 'overflow-x-auto' })
+    await nextTick()
+
+    expect(isActive).toHaveBeenCalledTimes(initialIsActiveCalls)
+    expect(canExecute).toHaveBeenCalledTimes(initialCanExecuteCalls)
+    expect(isDisabled).toHaveBeenCalledTimes(initialIsDisabledCalls)
+
+    editor.emit('transaction')
+    await nextTick()
+
+    expect(isActive).toHaveBeenCalledTimes(initialIsActiveCalls + 1)
+    expect(canExecute).toHaveBeenCalledTimes(initialCanExecuteCalls + 1)
+    expect(isDisabled).toHaveBeenCalledTimes(initialIsDisabledCalls + 1)
+  })
 })

From 4affc2f26cb542180f351dd9a1e1adb67acd7422 Mon Sep 17 00:00:00 2001
From: Jannchie <jannchie@gmail.com>
Date: Sun, 5 Apr 2026 20:05:36 +0900
Subject: [PATCH 2/4] refactor(editor-toolbar): replace VNode type import with
 inline import to remove unused import

---
 src/runtime/components/EditorToolbar.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
index 74e301b0a6..5f7ade4de9 100644
--- a/src/runtime/components/EditorToolbar.vue
+++ b/src/runtime/components/EditorToolbar.vue
@@ -1,6 +1,5 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { Editor } from '@tiptap/vue-3'
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
@@ -84,7 +83,7 @@ type SlotPropsProps = {
   isDisabled: (item: EditorToolbarItem) => boolean
   onClick: (e: MouseEvent, item: EditorToolbarItem) => void
 }
-type SlotProps<T extends EditorToolbarItem> = (props: { item: T } & SlotPropsProps) => VNode[]
+type SlotProps<T extends EditorToolbarItem> = (props: { item: T } & SlotPropsProps) => import('vue').VNode[]
 
 export type EditorToolbarSlots<
   A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>,

From a380bfaaeb4a7d14d8f542d53178b3b11015a3a9 Mon Sep 17 00:00:00 2001
From: Jannchie <jannchie@gmail.com>
Date: Sun, 5 Apr 2026 23:52:48 +0900
Subject: [PATCH 3/4] perf(editor-toolbar): optimize toolbar item lookup and
 add data-slot attributes

---
 src/runtime/components/EditorToolbar.vue      | 23 ++++---
 .../components/EditorToolbarItemRenderer.vue  | 18 ++++--
 .../EditorToolbar-vue.spec.ts.snap            | 60 +++++++++----------
 .../__snapshots__/EditorToolbar.spec.ts.snap  | 60 +++++++++----------
 4 files changed, 89 insertions(+), 72 deletions(-)

diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
index 5f7ade4de9..f6b56bdaec 100644
--- a/src/runtime/components/EditorToolbar.vue
+++ b/src/runtime/components/EditorToolbar.vue
@@ -95,7 +95,8 @@ export type EditorToolbarSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<EditorToolbarItem>">
-import { computed, inject, shallowRef, watch, type ShallowRef } from 'vue'
+import { computed, inject, shallowRef, watch } from 'vue'
+import type { ShallowRef } from 'vue'
 import { Primitive, Separator, useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
@@ -216,6 +217,18 @@ const itemKeyMap = computed(() => {
   return map
 })
 
+const renderEntryMap = computed(() => {
+  const map = new Map<string, ToolbarRenderEntry>()
+
+  for (const group of renderGroups.value) {
+    for (const entry of group) {
+      map.set(entry.key, entry)
+    }
+  }
+
+  return map
+})
+
 function resolveBaseItemState(item: EditorToolbarItem): ToolbarItemState {
   if (!props.editor?.isEditable) {
     return {
@@ -436,13 +449,7 @@ watch(() => props.editor, (editor, _, onCleanup) => {
 }, { immediate: true })
 
 function getRenderEntry(key: string) {
-  for (const group of renderGroups.value) {
-    for (const entry of group) {
-      if (entry.key === key) {
-        return entry
-      }
-    }
-  }
+  return renderEntryMap.value.get(key)
 }
 
 function isActive(item: EditorToolbarItem): boolean {
diff --git a/src/runtime/components/EditorToolbarItemRenderer.vue b/src/runtime/components/EditorToolbarItemRenderer.vue
index 59f07cc71b..b419e10655 100644
--- a/src/runtime/components/EditorToolbarItemRenderer.vue
+++ b/src/runtime/components/EditorToolbarItemRenderer.vue
@@ -25,18 +25,27 @@ defineProps<EditorToolbarItemRendererProps>()
 <template>
   <UDropdownMenu
     v-if="('items' in item && item.items?.length)"
+    data-slot="dropdown"
     v-bind="dropdownProps?.value"
     :items="dropdownItems.value"
   >
-    <UTooltip v-if="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
-      <UButton :active="state.value.active" :disabled="state.value.disabled" v-bind="buttonProps.value" @click="onClick($event, item)" />
+    <UTooltip v-if="tooltip" data-slot="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
+      <UButton data-slot="button" :active="state.value.active" :disabled="state.value.disabled" v-bind="buttonProps.value" @click="onClick($event, item)" />
     </UTooltip>
 
-    <UButton v-else :active="state.value.active" :disabled="state.value.disabled" v-bind="buttonProps.value" @click="onClick($event, item)" />
+    <UButton
+      v-else
+      data-slot="button"
+      :active="state.value.active"
+      :disabled="state.value.disabled"
+      v-bind="buttonProps.value"
+      @click="onClick($event, item)"
+    />
   </UDropdownMenu>
 
-  <UTooltip v-else-if="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
+  <UTooltip v-else-if="tooltip" data-slot="tooltip" :disabled="state.value.disabled" v-bind="{ ...(tooltip || {}) }">
     <UButton
+      data-slot="button"
       :active="state.value.active"
       :disabled="state.value.disabled"
       v-bind="buttonProps.value"
@@ -46,6 +55,7 @@ defineProps<EditorToolbarItemRendererProps>()
 
   <UButton
     v-else
+    data-slot="button"
     :active="state.value.active"
     :disabled="state.value.disabled"
     v-bind="buttonProps.value"
diff --git a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
index 08289fc347..93cebcba70 100644
--- a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`EditorToolbar > renders with as correctly 1`] = `
 "<section role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -11,19 +11,19 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -33,7 +33,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
 
 exports[`EditorToolbar > renders with class correctly 1`] = `
 "<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 overflow-x-auto">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -42,19 +42,19 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -74,7 +74,7 @@ exports[`EditorToolbar > renders with item slot correctly 1`] = `
 exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
 "<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
   <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -83,19 +83,19 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
       <!--teleport end-->
     </div>
     <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -107,7 +107,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
 exports[`EditorToolbar > renders with layout floating correctly 1`] = `
 "<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
   <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -116,19 +116,19 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
       <!--teleport end-->
     </div>
     <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -139,7 +139,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
 
 exports[`EditorToolbar > renders with ui correctly 1`] = `
 "<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -148,19 +148,19 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-default"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/EditorToolbar.spec.ts.snap b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
index 03be30ad0b..b381118ebf 100644
--- a/test/components/__snapshots__/EditorToolbar.spec.ts.snap
+++ b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`EditorToolbar > renders with as correctly 1`] = `
 "<section role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -11,19 +11,19 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -33,7 +33,7 @@ exports[`EditorToolbar > renders with as correctly 1`] = `
 
 exports[`EditorToolbar > renders with class correctly 1`] = `
 "<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 overflow-x-auto">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -42,19 +42,19 @@ exports[`EditorToolbar > renders with class correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -74,7 +74,7 @@ exports[`EditorToolbar > renders with item slot correctly 1`] = `
 exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
 "<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
   <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -83,19 +83,19 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
       <!--teleport end-->
     </div>
     <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -107,7 +107,7 @@ exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
 exports[`EditorToolbar > renders with layout floating correctly 1`] = `
 "<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
   <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -116,19 +116,19 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
       <!--teleport end-->
     </div>
     <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
-    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -139,7 +139,7 @@ exports[`EditorToolbar > renders with layout floating correctly 1`] = `
 
 exports[`EditorToolbar > renders with ui correctly 1`] = `
 "<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="base" aria-label="Headings" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -148,19 +148,19 @@ exports[`EditorToolbar > renders with ui correctly 1`] = `
     <!--teleport end-->
   </div>
   <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-default"></div>
-  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" data-slot="base" aria-label="Bold" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Italic" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Underline" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Strikethrough" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    </button><button type="button" disabled="" data-slot="base" aria-label="Code" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>

From 07fbade925d2b83a41014c64a547030f93efe57e Mon Sep 17 00:00:00 2001
From: Jannchie <jannchie@gmail.com>
Date: Wed, 8 Apr 2026 16:14:26 +0900
Subject: [PATCH 4/4] perf(editor-toolbar): batch toolbar state updates with
 rAF and avoid redundant editor serialization

---
 src/runtime/components/Editor.vue        | 36 +++++++------
 src/runtime/components/EditorToolbar.vue | 67 +++++++++++++++++++++---
 test/components/Editor.spec.ts           | 33 +++++++++++-
 test/components/EditorToolbar.spec.ts    |  9 ++++
 4 files changed, 121 insertions(+), 24 deletions(-)

diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index e65fa5e816..e501d3e669 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -85,7 +85,7 @@ export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandle
 </script>
 
 <script setup lang="ts" generic="T extends Content, H extends EditorCustomHandlers">
-import { computed, provide, useAttrs, watch } from 'vue'
+import { computed, provide, shallowRef, useAttrs, watch } from 'vue'
 import { defu } from 'defu'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { mergeAttributes } from '@tiptap/core'
@@ -133,6 +133,7 @@ const editorProps = computed(() => defu(props.editorProps, {
   }
 } as EditorOptions['editorProps']))
 const contentType = computed(() => props.contentType || (typeof props.modelValue === 'string' ? 'html' : 'json'))
+const lastSyncedContent = shallowRef(serializeContent(props.modelValue, contentType.value))
 const starterKit = computed(() => defu(props.starterKit, {
   code: false,
   horizontalRule: false,
@@ -222,43 +223,48 @@ const editor = useEditor({
       value = editor.getText()
     }
 
+    lastSyncedContent.value = serializeContent(value as T, contentType.value)
     emits('update:modelValue', value as T)
   }
 })
 
-watch(() => props.modelValue, (newVal) => {
+watch([() => props.modelValue, contentType], ([newVal, type]) => {
   if (!editor.value || newVal == null) {
     return
   }
 
-  const currentContent = contentType.value === 'html'
-    ? editor.value.getHTML()
-    : contentType.value === 'json'
-      ? JSON.stringify(editor.value.getJSON())
-      : contentType.value === 'markdown'
-        ? editor.value.getMarkdown()
-        : editor.value.getText()
+  const newContent = serializeContent(newVal, type)
 
-  const newContent = contentType.value === 'json' && typeof newVal === 'object'
-    ? JSON.stringify(newVal)
-    : String(newVal)
-
-  if (currentContent !== newContent) {
+  if (newContent !== lastSyncedContent.value) {
     // Store current cursor position
     const currentSelection = editor.value.state.selection
     const currentPos = currentSelection.from
 
     // Set the new content
-    editor.value.commands.setContent(newVal, { contentType: contentType.value })
+    editor.value.commands.setContent(newVal, { contentType: type })
 
     // Restore cursor position if the position is still valid in the new content
     const newDoc = editor.value.state.doc
     if (currentPos <= newDoc.content.size) {
       editor.value.commands.setTextSelection(currentPos)
     }
+
+    lastSyncedContent.value = newContent
   }
 })
 
+function serializeContent(value: Content | undefined, type: EditorContentType) {
+  if (value == null) {
+    return ''
+  }
+
+  if (type === 'json' && typeof value === 'object') {
+    return JSON.stringify(value)
+  }
+
+  return String(value)
+}
+
 const handlers = computed(() => ({
   ...createHandlers(),
   ...props.handlers
diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
index f6b56bdaec..0b3efcb858 100644
--- a/src/runtime/components/EditorToolbar.vue
+++ b/src/runtime/components/EditorToolbar.vue
@@ -95,7 +95,7 @@ export type EditorToolbarSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<EditorToolbarItem>">
-import { computed, inject, shallowRef, watch } from 'vue'
+import { computed, inject, onBeforeUnmount, shallowRef, watch } from 'vue'
 import type { ShallowRef } from 'vue'
 import { Primitive, Separator, useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
@@ -391,6 +391,8 @@ function buildRenderGroups(): ToolbarRenderEntry[][] {
 }
 
 const renderGroups = shallowRef<ToolbarRenderEntry[][]>(buildRenderGroups())
+let pendingFrameId: number | null = null
+let pendingForceRefresh = false
 
 function refreshState(force = false) {
   for (const group of renderGroups.value) {
@@ -404,13 +406,15 @@ function refreshState(force = false) {
 
       if ('items' in entry.item && entry.item.items?.length) {
         const previousDropdownState = entry.dropdownState.value
+        const dropdownChanged = !sameDropdownButtonProps(previousDropdownState, resolved.dropdown)
 
-        // Always update dropdown items since child active/disabled states may change
-        entry.dropdownState.value = resolved.dropdown
-        entry.dropdownItems.value = resolved.dropdown?.items || []
+        if (force || stateChanged || dropdownChanged) {
+          entry.dropdownState.value = resolved.dropdown
+          entry.dropdownItems.value = resolved.dropdown?.items || []
+        }
 
         // Only rebuild button props when activeChild icon/label changes
-        if (stateChanged || force || !sameDropdownButtonProps(previousDropdownState, resolved.dropdown)) {
+        if (stateChanged || force || dropdownChanged) {
           entry.buttonProps.value = buildButtonProps(entry.item, resolved.dropdown)
         }
       }
@@ -418,6 +422,39 @@ function refreshState(force = false) {
   }
 }
 
+function flushRefresh() {
+  const force = pendingForceRefresh
+  pendingForceRefresh = false
+  pendingFrameId = null
+  refreshState(force)
+}
+
+function scheduleRefresh(force = false) {
+  pendingForceRefresh ||= force
+
+  if (pendingFrameId !== null) {
+    return
+  }
+
+  if (typeof requestAnimationFrame === 'function') {
+    pendingFrameId = requestAnimationFrame(() => {
+      flushRefresh()
+    })
+    return
+  }
+
+  flushRefresh()
+}
+
+function cancelScheduledRefresh() {
+  if (pendingFrameId !== null && typeof cancelAnimationFrame === 'function') {
+    cancelAnimationFrame(pendingFrameId)
+  }
+
+  pendingFrameId = null
+  pendingForceRefresh = false
+}
+
 watch(() => props.items, () => {
   renderGroups.value = buildRenderGroups()
 }, { deep: true })
@@ -427,27 +464,41 @@ watch(() => [props.color, props.variant, props.activeColor, props.activeVariant,
 })
 
 watch(() => handlers.value, () => {
-  refreshState(true)
+  scheduleRefresh(true)
 }, { deep: true })
 
 watch(() => props.editor, (editor, _, onCleanup) => {
-  refreshState(true)
+  scheduleRefresh(true)
 
   if (typeof (editor as any)?.on !== 'function' || typeof (editor as any)?.off !== 'function') {
     return
   }
 
+  const onSelectionUpdate = () => {
+    scheduleRefresh()
+  }
+
   const onTransaction = () => {
-    refreshState()
+    scheduleRefresh()
   }
 
+  editor.on('selectionUpdate', onSelectionUpdate)
+  editor.on('focus', onSelectionUpdate)
+  editor.on('blur', onSelectionUpdate)
   editor.on('transaction', onTransaction)
 
   onCleanup(() => {
+    editor.off('selectionUpdate', onSelectionUpdate)
+    editor.off('focus', onSelectionUpdate)
+    editor.off('blur', onSelectionUpdate)
     editor.off('transaction', onTransaction)
   })
 }, { immediate: true })
 
+onBeforeUnmount(() => {
+  cancelScheduledRefresh()
+})
+
 function getRenderEntry(key: string) {
   return renderEntryMap.value.get(key)
 }
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index 34c8da2fee..cd97955186 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, nextTick, ref } from 'vue'
 import { renderEach } from '../component-render'
 import Editor from '../../src/runtime/components/Editor.vue'
 
@@ -26,4 +27,34 @@ describe('Editor', () => {
 
     wrapper.unmount()
   })
+
+  it('avoids serializing markdown twice for internal v-model updates', async () => {
+    const wrapper = await mountSuspended(defineComponent({
+      components: { Editor },
+      setup() {
+        const modelValue = ref('# Nuxt UI\n\nEditor content')
+
+        return {
+          modelValue
+        }
+      },
+      template: '<Editor v-model="modelValue" content-type="markdown" />'
+    }))
+
+    const editorWrapper = (wrapper as any).getComponent(Editor)
+    const exposedEditor = (editorWrapper.vm as { editor?: any }).editor
+    const editor = exposedEditor?.commands ? exposedEditor : exposedEditor?.value
+
+    expect(editor).toBeTruthy()
+
+    const getMarkdown = vi.spyOn(editor, 'getMarkdown')
+    getMarkdown.mockClear()
+
+    editor.commands.setContent('# Nuxt UI', { contentType: 'markdown' })
+
+    await nextTick()
+    await nextTick()
+
+    expect(getMarkdown).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/test/components/EditorToolbar.spec.ts b/test/components/EditorToolbar.spec.ts
index d8c244d94b..6c3c839415 100644
--- a/test/components/EditorToolbar.spec.ts
+++ b/test/components/EditorToolbar.spec.ts
@@ -148,10 +148,19 @@ describe('EditorToolbar', () => {
     expect(isDisabled).toHaveBeenCalledTimes(initialIsDisabledCalls)
 
     editor.emit('transaction')
+    await new Promise<void>((resolve) => {
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(() => resolve())
+        return
+      }
+      setTimeout(() => resolve(), 0)
+    })
     await nextTick()
 
     expect(isActive).toHaveBeenCalledTimes(initialIsActiveCalls + 1)
     expect(canExecute).toHaveBeenCalledTimes(initialCanExecuteCalls + 1)
     expect(isDisabled).toHaveBeenCalledTimes(initialIsDisabledCalls + 1)
+
+    wrapper.unmount()
   })
 })