perf(EditorToolbar): batch toolbar updates and memoize item state

Author: Jannchie

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, onBeforeUnmount, shallowRef, watch } from 'vue'
 import { Primitive, Separator, useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
@@ -154,59 +154,118 @@ const groups = computed(() =>
     : []
 )
 
-function isActive(item: EditorToolbarItem): boolean {
-  if (!props.editor?.isEditable) {
-    return false
+type ToolbarItemState = {
+  active: boolean
+  disabled: boolean
+}
+
+const stateVersion = shallowRef(0)
+const itemStateCache = new WeakMap<object, { version: number, state: ToolbarItemState }>()
+const dropdownItemsCache = new WeakMap<object, { version: number, items: DropdownMenuItem[][] }>()
+let refreshFrameId: number | null = null
+
+function scheduleStateRefresh() {
+  if (refreshFrameId !== null) {
+    return
   }
 
-  // Check for dropdown (has items property)
-  if (('items' in item) && item.items?.length) {
-    return item.items?.some((item): boolean => isActive(item as EditorToolbarItem)) || false
+  if (typeof requestAnimationFrame === 'function') {
+    refreshFrameId = requestAnimationFrame(() => {
+      refreshFrameId = null
+      stateVersion.value++
+    })
+    return
   }
 
-  // Check for plain button (no kind property)
-  if (!('kind' in item)) {
-    return item.active ?? false
+  stateVersion.value++
+}
+
+function cancelStateRefresh() {
+  if (refreshFrameId !== null && typeof cancelAnimationFrame === 'function') {
+    cancelAnimationFrame(refreshFrameId)
   }
 
-  // Check for editor item (has kind property)
-  const handler = handlers?.value?.[item.kind]
-  return handler?.isActive(props.editor, item as any) || false
+  refreshFrameId = null
 }
 
-function isDisabled(item: EditorToolbarItem): boolean {
+function getItemState(item: EditorToolbarItem): ToolbarItemState {
+  const currentVersion = stateVersion.value
+  const key = item as object
+  const cached = itemStateCache.get(key)
+
+  if (cached && cached.version === currentVersion) {
+    return cached.state
+  }
+
+  const state = resolveItemState(item)
+  itemStateCache.set(key, {
+    version: currentVersion,
+    state
+  })
+
+  return state
+}
+
+function resolveItemState(item: EditorToolbarItem): ToolbarItemState {
   if (!props.editor?.isEditable) {
-    return true
+    return {
+      active: false,
+      disabled: true
+    }
   }
 
   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')
+    let hasActionableItems = false
+    let active = false
+    let allActionableDisabled = true
+
+    for (const child of items as EditorToolbarDropdownChildItem[]) {
+      const state = getItemState(child as EditorToolbarItem)
+      const type = (child as DropdownMenuItem).type
+      const isStructural = type === 'separator' || type === 'label'
+
+      active = active || state.active
 
-    if (actionableItems.length === 0) {
-      return true
+      if (!isStructural) {
+        hasActionableItems = true
+        allActionableDisabled = allActionableDisabled && state.disabled
+      }
     }
 
-    return actionableItems.every((item: any) => isDisabled(item))
+    return {
+      active,
+      disabled: !hasActionableItems || allActionableDisabled
+    }
   }
 
   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) || false,
+    disabled: !!handler.isDisabled?.(props.editor, item) || !handler.canExecute(props.editor, item)
   }
+}
 
-  // Check if item can be executed
-  return !handler.canExecute(props.editor, item)
+function isActive(item: EditorToolbarItem): boolean {
+  return getItemState(item).active
+}
+
+function isDisabled(item: EditorToolbarItem): boolean {
+  return getItemState(item).disabled
 }
 
 function onClick(e: MouseEvent, item: EditorToolbarItem) {
@@ -240,7 +299,7 @@ function getActiveChildItem(item: EditorToolbarDropdownItem): EditorToolbarItem
     if (!('kind' in childItem)) {
       return false
     }
-    return isActive(childItem as EditorToolbarItem)
+    return getItemState(childItem as EditorToolbarItem).active
   }) as EditorToolbarItem | undefined
 }
 
@@ -298,14 +357,61 @@ function mapDropdownItem(item: EditorToolbarDropdownChildItem): DropdownMenuItem
 }
 
 function getDropdownItems(item: EditorToolbarDropdownItem) {
+  const currentVersion = stateVersion.value
+  const key = item as object
+  const cached = dropdownItemsCache.get(key)
+
+  if (cached && cached.version === currentVersion) {
+    return cached.items
+  }
+
   if (!item.items) {
     return []
   }
 
-  return isArrayOfArray(item.items)
+  const mappedItems = isArrayOfArray(item.items)
     ? item.items.map((group: any) => group.map(mapDropdownItem))
     : [item.items.map(mapDropdownItem)]
+
+  dropdownItemsCache.set(key, {
+    version: currentVersion,
+    items: mappedItems
+  })
+
+  return mappedItems
 }
+
+watch(() => handlers.value, () => {
+  scheduleStateRefresh()
+}, { deep: true })
+
+watch(() => props.editor, (editor, _, onCleanup) => {
+  scheduleStateRefresh()
+
+  if (typeof (editor as any)?.on !== 'function' || typeof (editor as any)?.off !== 'function') {
+    return
+  }
+
+  const onStateChange = () => {
+    scheduleStateRefresh()
+  }
+
+  editor.on('selectionUpdate', onStateChange)
+  editor.on('focus', onStateChange)
+  editor.on('blur', onStateChange)
+  editor.on('transaction', onStateChange)
+
+  onCleanup(() => {
+    editor.off('selectionUpdate', onStateChange)
+    editor.off('focus', onStateChange)
+    editor.off('blur', onStateChange)
+    editor.off('transaction', onStateChange)
+  })
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  cancelStateRefresh()
+})
 </script>
 
 <template>

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,63 @@ 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 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()
+  })
 })