@domternal/vanilla 0.14.0 → 0.15.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginKey, IconSet, Editor, AnyExtension, Content, FocusPosition, JSONContent, ToolbarController, ToolbarLayoutEntry, ToolbarButton, ToolbarDropdown, BubbleMenuOptions, FloatingMenuController, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
+import { PluginKey, IconSet, Editor, AnyExtension, Content, EditorPreset, FocusPosition, JSONContent, ToolbarController, ToolbarLayoutEntry, ToolbarButton, ToolbarDropdown, BubbleMenuOptions, FloatingMenuController, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
 
 /**
  * SSR-safe environment check.
@@ -200,6 +200,12 @@ interface DomternalEditorOptions {
     content?: Content;
     /** Whether the editor is editable. @default true */
     editable?: boolean;
+    /**
+     * Editing experience preset. `'notion'` paints `dm-notion-mode` on the
+     * `.dm-editor` host and switches preset-aware extensions to their Notion
+     * behavior, replacing the hand-written class. Create-time only.
+     */
+    preset?: EditorPreset;
     /** Where to autofocus on mount. @default false */
     autofocus?: FocusPosition;
     /**
@@ -584,14 +590,13 @@ interface DomternalBubbleMenuOptions extends CustomContentOption {
  * "..." for block context menu) are rendered automatically when the
  * corresponding extensions are loaded.
  *
- * Re-renders are batched via `requestAnimationFrame`. DOM is rebuilt on every
- * transaction because the item list changes with context (selection moves
- * between text and code-block, for example).
+ * Re-renders are batched via `requestAnimationFrame`. The structure is rebuilt
+ * only when the item list changes; a state-only render updates the nodes on
+ * screen, so a press that outlives a transaction still produces a click.
  *
- * **Stable identity convention.** Trigger buttons (including the "A" and "..."
- * trailing triggers and dropdown triggers) are DESTROYED and RECREATED on
- * every transaction. Consumers that store a reference to a trigger element
- * (e.g. as a popover anchor) should:
+ * **Stable identity convention.** A trigger survives a state-only render but
+ * NOT an item-list change, so consumers holding a reference to one (e.g. as a
+ * popover anchor) should still:
  * - Either listen for `selectionUpdate` / `transaction` and re-resolve the
  *   anchor via `host.querySelector('.dm-ncp-trigger')` on demand
  * - Or match the trigger by class + container (`closest('.dm-bubble-menu')`)

package/dist/index.js

@@ -82,7 +82,8 @@ var DomternalEditor = class extends EventTarget {
       extensions: [...defaults, ...options.extensions ?? []],
       content: options.content ?? "",
       editable: options.editable ?? true,
-      autofocus: options.autofocus ?? false
+      autofocus: options.autofocus ?? false,
+      ...options.preset ? { preset: options.preset } : {}
     });
     this.#wireEditorEvents();
     this.#onCreate?.(this.editor);
@@ -359,6 +360,8 @@ var DomternalToolbar = class extends EventTarget {
   #lastGroupsRef = null;
   /** Maps top-level button/dropdown name -> rendered trigger element. */
   #buttonEls = /* @__PURE__ */ new Map();
+  /** Trigger markup last written, so a re-render does not rewrite it blindly. */
+  #triggerHtml = /* @__PURE__ */ new WeakMap();
   /** Rendered dropdown panel elements (created lazily when opened). */
   #dropdownPanelEl = null;
   #cleanupFloating = null;
@@ -452,6 +455,17 @@ var DomternalToolbar = class extends EventTarget {
       },
       { signal }
     );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!this.#controller.openDropdown) return;
+        if (e.key !== "Escape") return;
+        if (this.host.contains(document.activeElement)) return;
+        this.closeDropdown();
+        e.preventDefault();
+      },
+      { signal }
+    );
     this.host.addEventListener(
       "keydown",
       (e) => {
@@ -549,7 +563,9 @@ var DomternalToolbar = class extends EventTarget {
     btn.setAttribute("aria-label", dd.label);
     btn.title = dd.label;
     btn.setAttribute("data-dropdown", dd.name);
-    btn.innerHTML = this.#resolveDropdownTriggerHtml(dd);
+    const triggerHtml = this.#resolveDropdownTriggerHtml(dd);
+    this.#triggerHtml.set(btn, triggerHtml);
+    btn.innerHTML = triggerHtml;
     btn.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
@@ -626,7 +642,8 @@ var DomternalToolbar = class extends EventTarget {
     btn.setAttribute("aria-expanded", String(isOpen));
     btn.tabIndex = flat === focusedIndex ? 0 : -1;
     const newHtml = this.#resolveDropdownTriggerHtml(dd);
-    if (btn.innerHTML !== newHtml) {
+    if (this.#triggerHtml.get(btn) !== newHtml) {
+      this.#triggerHtml.set(btn, newHtml);
       btn.innerHTML = newHtml;
     }
   }
@@ -1031,7 +1048,8 @@ function computeTrailingState(editor, opts) {
   }
   return {
     isNodeSelection: isNode,
-    showColorPickerButton: opts.hasNotionColorPicker,
+    // Hidden without a live notionColorOpen listener: the trigger would be dead.
+    showColorPickerButton: opts.hasNotionColorPicker && editor.listenerCount("notionColorOpen") > 0,
     showBlockMenuButton: opts.hasBlockContextMenu,
     blockMenuButtonDisabled: blockMenuDisabled,
     currentTextColorVar: textVar,
@@ -1080,6 +1098,15 @@ var DomternalBubbleMenu = class extends EventTarget {
   #activeMap = /* @__PURE__ */ new Map();
   #disabledMap = /* @__PURE__ */ new Map();
   #trailing = { ...INITIAL_TRAILING_STATE };
+  // Structure rebuilt only on an item-list change, so a pressed button lives.
+  #structureKey = null;
+  #buttonEls = /* @__PURE__ */ new Map();
+  // Icon markup last WRITTEN. `btn.innerHTML` returns the browser's
+  // re-serialisation, so comparing against it rewrites every render and
+  // replaces the glyph under the pointer. Keyed by element: names repeat.
+  #iconHtml = /* @__PURE__ */ new WeakMap();
+  #colorTriggerEl = null;
+  #blockMenuTriggerEl = null;
   // Dropdown state (text-align dropdown inside bubble menu)
   #openDropdown = null;
   #dropdownPanelEl = null;
@@ -1186,6 +1213,7 @@ var DomternalBubbleMenu = class extends EventTarget {
   setIcons(icons) {
     if (this.#destroyed) return;
     this.#icons = icons;
+    this.#structureKey = null;
     this.#scheduleRender();
   }
   /** Close any open dropdown (text-align). No-op if nothing is open. */
@@ -1362,19 +1390,51 @@ var DomternalBubbleMenu = class extends EventTarget {
       this.#render();
     });
   }
+  /** Signature of what decides which nodes exist; equal keys reuse the DOM. */
+  #computeStructureKey() {
+    const items = this.#resolvedItems.map(
+      (item) => item.type === "dropdown" ? `${item.type}:${item.name}:${item.items.map((sub) => sub.name).join(",")}` : `${item.type}:${item.name}`
+    ).join("|");
+    const t = this.#trailing;
+    return [
+      items,
+      t.showColorPickerButton && !t.isNodeSelection ? "color" : "",
+      t.showBlockMenuButton && !t.isNodeSelection ? "block" : "",
+      this.#customContent ? "custom" : ""
+    ].join("#");
+  }
+  /**
+   * Runs on every transaction, and pointer motion alone dispatches those. A
+   * render lands a frame late, so rebuilding wholesale can replace a button
+   * between mousedown and mouseup: the two events share no element and the
+   * browser fires no click at all. Structure only on an item-list change,
+   * state in place otherwise, as the toolbar does.
+   */
   #render() {
-    this.host.replaceChildren();
-    this.#cleanupDropdownFloating?.();
-    this.#cleanupDropdownFloating = null;
-    this.#dropdownAbortCtl?.abort();
-    this.#dropdownAbortCtl = null;
-    this.#dropdownPanelEl = null;
     if (this.#openDropdown !== null) {
       const stillExists = this.#resolvedItems.some(
         (item) => item.type === "dropdown" && item.name === this.#openDropdown
       );
-      if (!stillExists) this.#openDropdown = null;
+      if (!stillExists) {
+        this.#openDropdown = null;
+        this.#detachDropdown();
+      }
     }
+    const key = this.#computeStructureKey();
+    if (key === this.#structureKey) {
+      this.#updateButtons();
+    } else {
+      this.#renderStructure();
+      this.#structureKey = key;
+    }
+    this.#syncDropdownPanel();
+  }
+  #renderStructure() {
+    this.host.replaceChildren();
+    this.#buttonEls.clear();
+    this.#colorTriggerEl = null;
+    this.#blockMenuTriggerEl = null;
+    this.#detachDropdown();
     for (const item of this.#resolvedItems) {
       if (item.type === "separator") {
         this.host.appendChild(this.#createSeparator(item.name));
@@ -1415,13 +1475,14 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.setAttribute("aria-label", item.label);
     btn.setAttribute("aria-pressed", String(isActive));
     btn.title = item.label;
-    btn.innerHTML = resolveIcon(item.icon, this.#icons);
+    this.#setIconHtml(btn, resolveIcon(item.icon, this.#icons));
     btn.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
     btn.addEventListener("click", (e) => {
       this.#onButtonClick(item, e);
     });
+    this.#buttonEls.set(item.name, btn);
     return btn;
   }
   #createDropdownTrigger(dd) {
@@ -1441,7 +1502,7 @@ var DomternalBubbleMenu = class extends EventTarget {
     trigger.setAttribute("aria-label", dd.label);
     trigger.title = dd.label;
     trigger.dataset["dropdown"] = dd.name;
-    trigger.innerHTML = triggerHtml;
+    this.#setIconHtml(trigger, triggerHtml);
     trigger.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
@@ -1449,12 +1510,7 @@ var DomternalBubbleMenu = class extends EventTarget {
       this.#onDropdownToggle(dd);
     });
     wrapper.appendChild(trigger);
-    if (this.#openDropdown === dd.name) {
-      const panel = this.#createDropdownPanel(dd);
-      wrapper.appendChild(panel);
-      this.#dropdownPanelEl = panel;
-      this.#attachDropdownListeners(trigger, panel);
-    }
+    this.#buttonEls.set(dd.name, trigger);
     return wrapper;
   }
   #createDropdownPanel(dd) {
@@ -1472,6 +1528,7 @@ var DomternalBubbleMenu = class extends EventTarget {
       if (subActive) subBtn.classList.add("dm-toolbar-dropdown-item--active");
       subBtn.setAttribute("role", "menuitem");
       subBtn.setAttribute("aria-label", sub.label);
+      subBtn.dataset["dropdownItem"] = sub.name;
       subBtn.innerHTML = subHtml;
       subBtn.addEventListener("mousedown", (e) => {
         e.preventDefault();
@@ -1507,6 +1564,7 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.addEventListener("click", () => {
       this.openColorPicker(btn);
     });
+    this.#colorTriggerEl = btn;
     return btn;
   }
   #createBlockMenuTrigger() {
@@ -1525,8 +1583,83 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.addEventListener("click", () => {
       this.openBlockContextMenu(btn);
     });
+    this.#blockMenuTriggerEl = btn;
     return btn;
   }
+  // === In-place updates (the common render) ===
+  #updateButtons() {
+    for (const item of this.#resolvedItems) {
+      if (item.type === "separator") continue;
+      const el = this.#buttonEls.get(item.name);
+      if (!el) continue;
+      if (item.type === "dropdown") this.#updateDropdownTrigger(item, el);
+      else this.#updateButton(item, el);
+    }
+    const t = this.#trailing;
+    if (this.#colorTriggerEl) {
+      this.#colorTriggerEl.classList.toggle("dm-toolbar-button--active", t.hasAnyColor);
+      const glyph = this.#colorTriggerEl.querySelector(".dm-ncp-trigger-glyph");
+      if (glyph) glyph.style.color = t.currentTextColorVar ?? "";
+      const underline = this.#colorTriggerEl.querySelector(".dm-ncp-trigger-underline");
+      if (underline) underline.style.backgroundColor = t.currentBgColorVar ?? "";
+    }
+    if (this.#blockMenuTriggerEl) {
+      this.#blockMenuTriggerEl.disabled = t.blockMenuButtonDisabled;
+      this.#blockMenuTriggerEl.title = t.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options";
+    }
+  }
+  #updateButton(item, btn) {
+    const isActive = this.#activeMap.get(item.name) ?? false;
+    const isDisabled = this.#disabledMap.get(item.name) ?? false;
+    btn.classList.toggle("dm-toolbar-button--active", isActive);
+    btn.disabled = isDisabled;
+    btn.setAttribute("aria-pressed", String(isActive));
+    this.#setIconHtml(btn, resolveIcon(item.icon, this.#icons));
+  }
+  /** Writes icon markup only when it differs from what was written last. */
+  #setIconHtml(el, html) {
+    if (this.#iconHtml.get(el) === html) return;
+    this.#iconHtml.set(el, html);
+    el.innerHTML = html;
+  }
+  #updateDropdownTrigger(dd, trigger) {
+    const dropdownActive = dd.items.some((sub) => this.#activeMap.get(sub.name) ?? false);
+    const activeChild = dd.dynamicIcon ? dd.items.find((sub) => this.#activeMap.get(sub.name) ?? false) : void 0;
+    const html = resolveIcon(activeChild?.icon ?? dd.icon, this.#icons) + DROPDOWN_CARET2;
+    trigger.classList.toggle("dm-toolbar-button--active", dropdownActive);
+    trigger.setAttribute("aria-expanded", String(this.#openDropdown === dd.name));
+    this.#setIconHtml(trigger, html);
+  }
+  /** Builds the open dropdown's panel, or refreshes the marks on an open one. */
+  #syncDropdownPanel() {
+    const open = this.#openDropdown;
+    if (open === null) {
+      if (this.#dropdownPanelEl) this.#detachDropdown();
+      return;
+    }
+    const dd = this.#resolvedItems.find(
+      (item) => item.type === "dropdown" && item.name === open
+    );
+    if (!dd) return;
+    const panel = this.#dropdownPanelEl;
+    if (panel?.isConnected === true) {
+      for (const sub of dd.items) {
+        const subBtn = panel.querySelector(`[data-dropdown-item="${sub.name}"]`);
+        subBtn?.classList.toggle(
+          "dm-toolbar-dropdown-item--active",
+          this.#activeMap.get(sub.name) ?? false
+        );
+      }
+      return;
+    }
+    const trigger = this.#buttonEls.get(open);
+    const wrapper = trigger?.parentElement;
+    if (!trigger || !wrapper) return;
+    const fresh = this.#createDropdownPanel(dd);
+    wrapper.appendChild(fresh);
+    this.#dropdownPanelEl = fresh;
+    this.#attachDropdownListeners(trigger, fresh);
+  }
   // === Event handlers ===
   #onButtonClick(item, event) {
     if (this.#openDropdown) this.closeDropdown();