@domternal/vue 0.9.1 → 0.11.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
@@ -10,7 +10,7 @@ function useEditor(options = {}) {
   let pendingContent = null;
   function wireEvents(ed) {
     ed.on("transaction", ({ transaction }) => {
-      if (transaction.docChanged) {
+      if (transaction.docChanged && !transaction.getMeta("skipUpdate")) {
         options.onUpdate?.({ editor: ed });
       }
       if (!transaction.docChanged && transaction.selectionSet) {
@@ -40,17 +40,19 @@ function useEditor(options = {}) {
     options.onCreate?.(ed);
     return ed;
   }
-  function destroyCurrentEditor() {
+  function destroyCurrentEditor(insertClone = true) {
     const current = editor.value;
     if (current && !current.isDestroyed) {
       pendingContent = current.getJSON();
       options.onDestroy?.();
-      const dom = current.view.dom;
-      const parent = dom.parentNode;
-      if (parent) {
-        const clone = dom.cloneNode(true);
-        clone.style.pointerEvents = "none";
-        parent.insertBefore(clone, dom);
+      if (insertClone) {
+        const dom = current.view.dom;
+        const parent = dom.parentNode;
+        if (parent) {
+          const clone = dom.cloneNode(true);
+          clone.style.pointerEvents = "none";
+          parent.insertBefore(clone, dom);
+        }
       }
       current.destroy();
     }
@@ -61,7 +63,14 @@ function useEditor(options = {}) {
     createEditorInstance(element, options.content ?? "", options.autofocus ?? false);
   }
   onMounted(() => {
-    if (editor.value) return;
+    const ed = editor.value;
+    if (ed) {
+      const mount = editorRef.value;
+      if (mount && ed.view.dom.parentElement !== mount) {
+        mount.appendChild(ed.view.dom);
+      }
+      return;
+    }
     const element = editorRef.value ?? document.createElement("div");
     const initialContent = pendingContent ?? options.content ?? "";
     pendingContent = null;
@@ -85,7 +94,7 @@ function useEditor(options = {}) {
       if (!editor.value || editor.value.isDestroyed) return;
       if (newExtensions === oldExtensions) return;
       const element = editor.value.view.dom.parentElement ?? document.createElement("div");
-      destroyCurrentEditor();
+      destroyCurrentEditor(false);
       const initialContent = pendingContent ?? "";
       pendingContent = null;
       createEditorInstance(element, initialContent, false);
@@ -858,9 +867,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 +883,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 +1390,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 +1703,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;