perf(editor-toolbar): batch toolbar state updates with rAF and avoid redundant editor serialization

Author: Jannchie

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

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,20 +406,55 @@ 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)
         }
       }
     }
   }
 }
 
+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)
 }

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)
+  })
 })

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()
   })
 })