@domternal/vue 0.9.1 → 0.10.0

package/README.md

@@ -21,14 +21,14 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
 - **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
 - **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
-- **65+ extensions across 15 packages** - nodes, marks, and behavior extensions
-- **120+ chainable commands** - `editor.chain().focus().toggleBold().run()`
+- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
+- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
 - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
 - **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
-- **Light and dark theme** - 70+ CSS custom properties for full visual control
+- **Light and dark theme** - 120+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
 

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, computed, Fragment, ref, watch, shallowRef, onMounted, nextTick, onScopeDispose, watchEffect, Teleport, inject, provide, getCurrentInstance, customRef, markRaw, shallowReactive, render } from 'vue';
-import { positionFloatingOnce, PluginKey, positionFloating, ToolbarController, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, defaultBubbleContexts, createBubbleMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History } from '@domternal/core';
+import { positionFloatingOnce, PluginKey, positionFloating, ToolbarController, refocusEditorAfterCommand, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, defaultBubbleContexts, createBubbleMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 
 // src/useEditor.ts
@@ -858,9 +858,7 @@ var DomternalToolbar = defineComponent({
         return;
       }
       executeCommand(item);
-      requestAnimationFrame(() => {
-        editor.view.focus();
-      });
+      refocusEditorAfterCommand(editor.view);
     }
     function onDropdownItemClick(item, event) {
       const editor = props.editor ?? contextEditor.value;
@@ -876,9 +874,7 @@ var DomternalToolbar = defineComponent({
       } else {
         executeCommand(item);
       }
-      requestAnimationFrame(() => {
-        editor.view.focus();
-      });
+      refocusEditorAfterCommand(editor.view);
     }
     function onButtonFocus(name) {
       const index = controllerRef.current?.getFlatIndex(name) ?? -1;
@@ -1385,9 +1381,7 @@ var DomternalBubbleMenu = defineComponent({
       const ed = editorRef.value;
       if (!ed) return;
       ToolbarController.executeItem(ed, sub);
-      requestAnimationFrame(() => {
-        ed.view.focus();
-      });
+      refocusEditorAfterCommand(ed.view);
     };
     const colorBtnRef = ref();
     const blockMenuBtnRef = ref();
@@ -1700,9 +1694,7 @@ var DomternalFloatingMenu = defineComponent({
       const ed = currentEditor;
       if (!ctl || !ed) return;
       ctl.execute(item);
-      requestAnimationFrame(() => {
-        ed.view.focus();
-      });
+      refocusEditorAfterCommand(ed.view);
     };
     const onMenuKeyDown = (e) => {
       const ctl = controller.value;