@domternal/vanilla 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,4 +1,4 @@
-import { Document, Paragraph, Text, BaseKeymap, History, PluginKey, defaultIcons, Editor, ToolbarController, positionFloatingOnce, defaultBubbleContexts, createBubbleMenuPlugin, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
+import { Document, Paragraph, Text, BaseKeymap, History, PluginKey, defaultIcons, Editor, ToolbarController, positionFloatingOnce, refocusEditorAfterCommand, defaultBubbleContexts, createBubbleMenuPlugin, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
 
 // src/shared/isBrowser.ts
 var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
@@ -154,7 +154,7 @@ var DomternalEditor = class extends EventTarget {
   // === Internal ===
   #wireEditorEvents() {
     this.#transactionHandler = ({ transaction }) => {
-      if (transaction.docChanged) {
+      if (transaction.docChanged && !transaction.getMeta("skipUpdate")) {
         this.#onUpdate?.({ editor: this.editor });
         this.dispatchEvent(
           new CustomEvent("update", { detail: { editor: this.editor } })
@@ -757,9 +757,7 @@ var DomternalToolbar = class extends EventTarget {
       return;
     }
     this.#controller.executeCommand(item);
-    requestAnimationFrame(() => {
-      this.#editor.view.focus();
-    });
+    refocusEditorAfterCommand(this.#editor.view);
   }
   #onDropdownToggle(dd) {
     const wasOpen = this.#controller.openDropdown === dd.name;
@@ -791,9 +789,7 @@ var DomternalToolbar = class extends EventTarget {
     } else {
       this.#controller.executeCommand(item);
     }
-    requestAnimationFrame(() => {
-      this.#editor.view.focus();
-    });
+    refocusEditorAfterCommand(this.#editor.view);
   }
   #onButtonFocus(name) {
     const index = this.#controller.getFlatIndex(name);
@@ -857,7 +853,7 @@ var DomternalToolbar = class extends EventTarget {
   #focusCurrentButton() {
     const buttons = this.host.querySelectorAll(".dm-toolbar-button");
     const btn = buttons.item(this.#controller.focusedIndex);
-    btn.focus();
+    btn?.focus();
   }
   #focusDropdownItem(direction, first) {
     const panel = this.#dropdownPanelEl;
@@ -1560,9 +1556,7 @@ var DomternalBubbleMenu = class extends EventTarget {
   #onDropdownItemClick(sub) {
     this.closeDropdown();
     ToolbarController.executeItem(this.#editor, sub);
-    requestAnimationFrame(() => {
-      this.#editor.view.focus();
-    });
+    refocusEditorAfterCommand(this.#editor.view);
   }
   // === Dropdown lifecycle ===
   #attachDropdownListeners(trigger, panel) {
@@ -1811,9 +1805,7 @@ var DomternalFloatingMenu = class extends EventTarget {
   #onItemClick(item) {
     if (this.#destroyed || !this.#controller) return;
     this.#controller.execute(item);
-    requestAnimationFrame(() => {
-      this.#editor.view.focus();
-    });
+    refocusEditorAfterCommand(this.#editor.view);
   }
   #onKeyDown(event) {
     if (!this.#controller) return;