@37signals/lexxy 0.9.11-beta → 0.9.13-beta

package/dist/lexxy.esm.js

@@ -1,10 +1,10 @@
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $ensureForwardRangeSelection, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isTextNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, $createParagraphNode, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $getChildCaretAtIndex, $createLineBreakNode, PASTE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, PASTE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
-import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
@@ -128,7 +128,9 @@ class ListenerBin {
 function createElement(name, properties, content = "") {
   const element = document.createElement(name);
   for (const [ key, value ] of Object.entries(properties || {})) {
-    if (key in element) {
+    if (key === "dataset") {
+      Object.entries(value).forEach(([ key, value ]) => (element.dataset[key] = value));
+    } else if (key in element) {
       element[key] = value;
     } else if (value !== null && value !== undefined) {
       element.setAttribute(key, value);
@@ -180,7 +182,19 @@ function extractPlainTextFromHtml(innerHtml = "") {
 }
 
 function isActiveAndVisible(element) {
-  return element && !element.disabled && element.checkVisibility()
+  return element && !element.disabled && checkVisibility(element)
+}
+
+// no `checkVisibility` in Safari < 17.4
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility
+function checkVisibility(element, options) {
+  if (element.checkVisibility) {
+    return element.checkVisibility(options)
+  } else {
+    // Will not work for body or a fixed position element child of the body
+    // which is OK since that doesn't apply in the toolbar where this is used
+    return Boolean(element.offsetParent)
+  }
 }
 
 function handleRollingTabIndex(elements, event) {
@@ -393,6 +407,7 @@ var ToolbarIcons = {
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
   #listeners = new ListenerBin()
+  #refreshToolbarAF = null
 
   constructor() {
     super();
@@ -403,7 +418,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   connectedCallback() {
-    requestAnimationFrame(() => this.#refreshToolbarOverflow());
+    this.requestOverflowRefresh();
     this.setAttribute("role", "toolbar");
     this.#installResizeObserver();
   }
@@ -415,9 +430,12 @@ class LexicalToolbarElement extends HTMLElement {
   dispose() {
     this.#listeners.dispose();
 
+    cancelAnimationFrame(this.#refreshToolbarAF);
+
     this.editorElement = null;
     this.editor = null;
     this.selection = null;
+    this.#refreshToolbarAF = null;
 
     this.#createEditorPromise();
   }
@@ -443,10 +461,9 @@ class LexicalToolbarElement extends HTMLElement {
     this.#bindButtons();
     this.#bindHotkeys();
     this.#resetTabIndexValues();
-    this.#setItemPositionValues();
     this.#monitorSelectionChanges();
     this.#monitorHistoryChanges();
-    this.#refreshToolbarOverflow();
+    this.requestOverflowRefresh();
     this.#bindFocusListeners();
 
     this.resolveEditorPromise(editorElement);
@@ -458,6 +475,23 @@ class LexicalToolbarElement extends HTMLElement {
     return this.editorElement || await this.editorPromise
   }
 
+  requestOverflowRefresh() {
+    if (this.#refreshToolbarAF != null) return
+
+    this.#refreshToolbarAF = requestAnimationFrame(() => {
+      this.#refreshOverflow();
+      this.#refreshToolbarAF = null;
+    });
+  }
+
+  closeDropdowns({ except } = {}) {
+    this.#dropdowns.forEach((dropdown) => {
+      if (dropdown !== except) {
+        dropdown.close({ focusEditor: false });
+      }
+    });
+  }
+
   #reconnect() {
     this.disconnectedCallback();
     this.connectedCallback();
@@ -472,7 +506,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #installResizeObserver() {
-    const resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
+    const resizeObserver = new ResizeObserver(() => this.requestOverflowRefresh());
     resizeObserver.observe(this);
     this.#listeners.track(() => resizeObserver.disconnect());
   }
@@ -539,30 +573,29 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleEditorFocus = () => {
-    const firstVisible = this.#focusableItems.find(isActiveAndVisible);
+    const firstVisible = this.#buttons.find(isActiveAndVisible);
     if (firstVisible) firstVisible.tabIndex = 0;
   }
 
   #handleEditorBlur = () => {
     this.#resetTabIndexValues();
-    this.#closeDropdowns();
   }
 
   #handleKeydown = (event) => {
-    handleRollingTabIndex(this.#focusableItems, event);
+    handleRollingTabIndex(this.#buttons, event);
   }
 
   #resetTabIndexValues() {
-    this.#focusableItems.forEach((button) => {
+    this.#buttons.forEach((button) => {
       button.tabIndex = -1;
     });
   }
 
   #monitorSelectionChanges() {
-    this.#listeners.track(this.editor.registerUpdateListener(() => {
-      this.editor.getEditorState().read(() => {
+    this.#listeners.track(this.editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
         this.#updateButtonStates();
-        this.#closeDropdowns();
+        this.closeDropdowns();
       });
     }));
   }
@@ -630,96 +663,106 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #refreshToolbarOverflow = () => {
+  #refreshOverflow() {
+    this.#hideOverflowMenuButton();
     this.#resetToolbarOverflow();
+    this.#reindexToolbarItems();
     this.#compactMenu();
 
-    this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
-    this.#overflow.setAttribute("nonce", getNonce());
+    const isOverflowing = this.#overflowMenuDropdown.children.length > 0;
 
-    const isOverflowing = this.#overflowMenu.children.length > 0;
     this.toggleAttribute("overflowing", isOverflowing);
-    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
-  }
-
-  // Separates layout reads from DOM writes to avoid forced reflows during init.
-  // Measures every button's right edge in a single read pass, figures out which
-  // buttons overflow using math, and then moves them in a single write pass.
-  // The previous implementation interleaved `scrollWidth`/`clientWidth` reads with
-  // `prepend()` writes inside a loop, forcing one full browser reflow per button.
-  #compactMenu() {
-    const buttons = this.#buttons;
-    if (buttons.length === 0) return
-
-    const availableWidth = this.clientWidth + 1; // +1 for Safari zoom rounding
-    const buttonRightEdges = buttons.map(button => button.offsetLeft + button.offsetWidth);
-
-    let firstOverflowing = -1;
-    for (let i = 0; i < buttons.length; i++) {
-      if (buttonRightEdges[i] > availableWidth) {
-        firstOverflowing = i;
-        break
-      }
-    }
-
-    if (firstOverflowing === -1) return
-
-    // Move one extra button to reserve space for the overflow control, which is
-    // `display: none` until we show it — matching the previous implementation's
-    // "move one more after it stops overflowing" behaviour.
-    const overflowIndex = Math.max(0, firstOverflowing - 1);
-    const overflowButtons = buttons.slice(overflowIndex).reverse();
-    for (const button of overflowButtons) {
-      this.#overflowMenu.prepend(button);
-    }
+    this.#setOverflowMenuNonce();
+    this.#showOverflowMenuButton(isOverflowing);
   }
 
   #resetToolbarOverflow() {
-    const items = Array.from(this.#overflowMenu.children);
+    const items = Array.from(this.#overflowMenuDropdown.children);
     items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
 
     for (const item of items) {
-      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflow;
+      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflowMenuButton;
+      item.removeAttribute("role");
       this.insertBefore(item, nextItem);
     }
   }
 
+  #showOverflowMenuButton(show = true) {
+    this.#overflowMenuDropdown.toggleAttribute("disabled", !show);
+    this.#overflowMenuButton.style.display = show ? "block" : "none";
+  }
+
+  #hideOverflowMenuButton() {
+    this.#showOverflowMenuButton(false);
+  }
+
   #itemPosition(item) {
     return parseInt(item.dataset.position ?? "999")
   }
 
-  #setItemPositionValues() {
+  #reindexToolbarItems() {
     this.#toolbarItems.forEach((item, index) => {
-      if (item.dataset.position === undefined) {
-        item.dataset.position = index;
-      }
+      item.dataset.position = index;
     });
   }
 
-  #closeDropdowns() {
-   this.#dropdowns.forEach((details) => {
-     details.open = false;
-   });
- }
+  #compactMenu() {
+    const overflowWidth = this.#getOverflowWidth();
+
+    if (overflowWidth > 0) {
+      this.#showOverflowMenuButton();
+      const gap = this.#getToolbarGap();
+      const spaceForOverflow = gap + this.#overflowMenuButton.offsetWidth;
+      this.#reclaimWidth(overflowWidth + spaceForOverflow, { gap });
+    }
+  }
+
+  #getOverflowWidth() {
+    return this.scrollWidth - this.clientWidth
+  }
+
+  #reclaimWidth(overflowWidth, { gap }) {
+    const buttons = this.#overflowableButtons;
+    const overflowButtons = [];
+    let recoveredWidth = 0;
+
+    while (recoveredWidth < overflowWidth && buttons.length) {
+      const button = buttons.pop();
+
+      overflowButtons.push(button);
+      button.role = "menuitem";
+      recoveredWidth += button.offsetWidth + gap;
+    }
+
+    this.#overflowMenuDropdown.append(...overflowButtons.reverse());
+  }
+
+  #setOverflowMenuNonce() {
+    this.#overflowMenuButton.setAttribute("nonce", getNonce());
+  }
+
+  #getToolbarGap() {
+    return parseFloat(window.getComputedStyle(this).columnGap) || 0
+  }
 
   get #dropdowns() {
-    return this.querySelectorAll("details")
+    return this.querySelectorAll(":scope .lexxy-editor__toolbar-dropdown")
   }
 
-  get #overflow() {
+  get #overflowMenuButton() {
     return this.querySelector(".lexxy-editor__toolbar-overflow")
   }
 
-  get #overflowMenu() {
-    return this.querySelector(".lexxy-editor__toolbar-overflow-menu")
+  get #overflowMenuDropdown() {
+    return this.#overflowMenuButton?.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  get #buttons() {
-    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow='true'])"))
+  get #overflowableButtons() {
+    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow])"))
   }
 
-  get #focusableItems() {
-    return Array.from(this.querySelectorAll(":scope button, :scope > details > summary"))
+  get #buttons() {
+    return Array.from(this.querySelectorAll(":scope button"))
   }
 
   get #toolbarItems() {
@@ -727,6 +770,8 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   static get defaultTemplate() {
+    const linkInputId = generateDomId("lexxy-link-url");
+
     return `
       <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadImage" data-prevent-overflow="true" title="Add images and video">
         ${ToolbarIcons.image}
@@ -744,59 +789,59 @@ class LexicalToolbarElement extends HTMLElement {
       ${ToolbarIcons.italic}
       </button>
 
-      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" name="format" title="Text formatting">
+      <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-dropdown">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="format" title="Text formatting" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.heading}
-        </summary>
-        <div class="lexxy-editor__toolbar-dropdown-list">
-          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph">
+        </button>
+        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-dropdown-list" hidden>
+          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitem">
             ${ToolbarIcons.paragraph} <span>Normal</span>
           </button>
-          <button type="button" name="heading-large" data-command="setFormatHeadingLarge" title="Large heading">
+          <button type="button" name="heading-large" data-command="setFormatHeadingLarge" title="Large heading" role="menuitem">
             ${ToolbarIcons.h2} <span>Large Heading</span>
           </button>
-          <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading">
+          <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading" role="menuitem">
             ${ToolbarIcons.h3} <span>Medium Heading</span>
           </button>
-          <button class="lexxy-editor__toolbar-group-end" type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
+          <button class="lexxy-editor__toolbar-group-end" type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading" role="menuitem">
             ${ToolbarIcons.h4} <span>Small Heading</span>
           </button>
           <div class="lexxy-editor__toolbar-separator" role="separator"></div>
-          <button type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
+          <button type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough" role="menuitem">
             ${ToolbarIcons.strikethrough} <span>Strikethrough</span>
           </button>
-          <button type="button" name="underline" data-command="underline" title="Underline">
+          <button type="button" name="underline" data-command="underline" title="Underline" role="menuitem">
             ${ToolbarIcons.underline} <span>Underline</span>
           </button>
           <div class="lexxy-editor__toolbar-separator" role="separator"></div>
-          <button type="button" name="clear-formatting" data-command="clearFormatting" title="Clear formatting">
+          <button type="button" name="clear-formatting" data-command="clearFormatting" title="Clear formatting" role="menuitem">
             ${ToolbarIcons.clearFormatting} <span>Clear formatting</span>
           </button>
         </div>
-      </details>
+      </lexxy-toolbar-dropdown>
 
-      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
+      <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--highlight">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="highlight" title="Color highlight" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.highlight}
-        </summary>
-        <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-content">
+        </button>
+        <div data-dropdown-panel role="menu" hidden>
           <div class="lexxy-highlight-colors"></div>
-          <button data-command="removeHighlight" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
-        </lexxy-highlight-dropdown>
-      </details>
+          <button data-command="removeHighlight" type="button" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset" role="menuitem">Remove all coloring</button>
+        </div>
+      </lexxy-highlight-dropdown>
 
-      <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
+      <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--link">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="link" title="Link" data-hotkey="cmd+k ctrl+k" aria-haspopup="dialog" aria-expanded="false">
           ${ToolbarIcons.link}
-        </summary>
-        <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
-          <input type="url" placeholder="Enter a URL…" class="input">
+        </button>
+        <div data-dropdown-panel role="dialog" aria-label="Link" hidden>
+          <input type="url" placeholder="Enter a URL…" class="input" id="${linkInputId}">
           <div class="lexxy-editor__toolbar-dropdown-actions">
             <button type="button" class="lexxy-editor__toolbar-button" value="link">Link</button>
             <button type="button" class="lexxy-editor__toolbar-button" value="unlink">Unlink</button>
           </div>
-        </lexxy-link-dropdown>
-      </details>
+        </div>
+      </lexxy-link-dropdown>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
         ${ToolbarIcons.quote}
@@ -821,9 +866,7 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.hr}
       </button>
 
-      <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
-
-      <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo" disabled aria-disabled="true">
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--push-right" type="button" name="undo" data-command="undo" title="Undo" disabled aria-disabled="true">
         ${ToolbarIcons.undo}
       </button>
 
@@ -831,601 +874,1043 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.redo}
       </button>
 
-      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-overflow" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">${ToolbarIcons.overflow}</summary>
-        <div class="lexxy-editor__toolbar-dropdown-content lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
-      </details>
+      <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-button--push-right lexxy-editor__toolbar-overflow">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Show more toolbar buttons">
+          ${ToolbarIcons.overflow}
+        </button>
+        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons" hidden></div>
+      </lexxy-toolbar-dropdown>
     `
   }
 }
 
-function deepMerge(target, source) {
-  const result = { ...target, ...source };
-  for (const [ key, value ] of Object.entries(source)) {
-    if (arePlainHashes(target[key], value)) {
-      result[key] = deepMerge(target[key], value);
-    }
-  }
-
-  return result
-}
+function debounce(fn, wait) {
+  let timeout;
 
-function arePlainHashes(...values) {
-  return values.every(value => value && value.constructor == Object)
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), wait);
+  }
 }
 
-class Configuration {
-  #tree = {}
+function debounceAsync(fn, wait) {
+  let timeout;
 
-  constructor(...configs) {
-    this.merge(...configs);
-  }
+  return (...args) => {
+    clearTimeout(timeout);
 
-  merge(...configs) {
-    return this.#tree = configs.reduce(deepMerge, this.#tree)
+    return new Promise((resolve, reject) => {
+      timeout = setTimeout(async () => {
+        try {
+          const result = await fn(...args);
+          resolve(result);
+        } catch (err) {
+          reject(err);
+        }
+      }, wait);
+    })
   }
+}
 
-  get(path) {
-    const keys = path.split(".");
-    return keys.reduce((node, key) => node[key], this.#tree)
-  }
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-function range(from, to) {
-  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
+function nextFrame() {
+  return new Promise(requestAnimationFrame)
 }
 
-const global = new Configuration({
-  attachmentTagName: "action-text-attachment",
-  attachmentContentTypeNamespace: "actiontext",
-  authenticatedUploads: false,
-  extensions: []
-});
+class ToolbarDropdown extends HTMLElement {
+  #listeners = new ListenerBin()
 
-const presets = new Configuration({
-  default: {
-    attachments: true,
-    markdown: true,
-    multiLine: true,
-    permittedAttachmentTypes: null,
-    richText: true,
-    toolbar: {
-      upload: "both"
-    },
-    highlight: {
-      buttons: {
-        color: range(1, 9).map(n => `var(--highlight-${n})`),
-        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
-      },
-      permit: {
-        color: [],
-        "background-color": []
-      }
-    }
+  connectedCallback() {
+    this.#onToolbarEditor(() => {
+      this.#registerListeners();
+      this.editorReady();
+    });
   }
-});
 
-var Lexxy = {
-  global,
-  presets,
-  configure({ global: newGlobal, ...newPresets }) {
-    if (newGlobal) {
-      global.merge(newGlobal);
-    }
-    presets.merge(newPresets);
+  disconnectedCallback() {
+    this.#listeners.dispose();
   }
-};
-
-function setSanitizerConfig(allowedTags) {
-  DOMPurify.clearConfig();
-  DOMPurify.setConfig(buildConfig(allowedTags));
-}
-
-function sanitize(html) {
-  return DOMPurify.sanitize(html)
-}
-
-function bytesToHumanSize(bytes) {
-  if (bytes === 0) return "0 B"
-  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${ value.toFixed(2) } ${ sizes[i] }`
-}
 
-function extractFileName(string) {
-  return string.split("/").pop()
-}
+  editorReady() {}
+  onOpen() {}
+  onClose() {}
 
-// The content attribute is raw HTML (matching Trix/ActionText). Older Lexxy
-// versions JSON-encoded it, so try JSON.parse first for backward compatibility.
-function parseAttachmentContent(content) {
-  try {
-    return JSON.parse(content)
-  } catch {
-    return content
+  get trigger() {
+    return this.querySelector(":scope > [data-dropdown-trigger]")
   }
-}
 
-class CustomActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "custom_action_text_attachment"
+  get panel() {
+    return this.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  get toolbar() {
+    return this.closest("lexxy-toolbar")
   }
 
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  get editorElement() {
+    return this.toolbar?.editorElement
   }
 
-  static importDOM() {
-    return {
-      [this.TAG_NAME]: (element) => {
-        if (!element.getAttribute("content")) {
-          return null
-        }
-
-        return {
-          conversion: (attachment) => {
-            // Preserve initial space if present since Lexical removes it
-            const nodes = [];
-            const previousSibling = attachment.previousSibling;
-            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
-
-            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
+  get editor() {
+    return this.toolbar?.editor
+  }
 
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml,
-              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
-              contentType: attachment.getAttribute("content-type")
-            }));
+  get isOpen() {
+    return this.panel.hidden === false
+  }
 
-            const nextSibling = attachment.nextSibling;
-            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
+  get isClosed() {
+    return !this.isOpen
+  }
 
-            return { node: nodes }
-          },
-          priority: 2
-        }
-      }
-    }
+  track(...listeners) {
+    this.#listeners.track(...listeners);
   }
 
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
+  open() {
+    if (this.isOpen) return
+    this.trigger.setAttribute("aria-expanded", "true");
+    this.panel.hidden = false;
+    this.onOpen();
+    this.#focusFirstInteractive();
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
-    super(key);
+  close({ focusEditor = true } = {}) {
+    if (focusEditor) this.editor?.focus();
 
-    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+    if (this.isClosed) return
+    this.trigger.setAttribute("aria-expanded", "false");
+    this.panel.hidden = true;
+    this.onClose();
+  }
 
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
-    this.sgid = sgid;
-    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
-    this.innerHtml = innerHtml;
-    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+  #registerListeners() {
+    this.#listeners.track(
+      registerEventListener(this, "keydown", this.#handleKeyDown),
+      registerEventListener(this.trigger, "click", this.#handleTriggerClick)
+    );
   }
 
-  createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+  #handleTriggerClick = () => {
+    if (this.isOpen) {
+      this.close({ focusEditor: false });
+    } else {
+      this.toolbar?.closeDropdowns({ except: this });
+      this.open();
+    }
+  }
 
-    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
+  async #onToolbarEditor(callback) {
+    if (!this.toolbar) return
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+    await this.toolbar.getEditorElement();
+    if (this.isConnected && this.toolbar) callback();
+  }
 
-    return figure
+  #handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.close();
+    }
   }
 
-  updateDOM() {
-    return false
+  async #focusFirstInteractive() {
+    this.#interactiveElements[0]?.focus();
+    await this.#resetTabIndexValues();
   }
 
-  getTextContent() {
-    return "\ufeff"
+  async #resetTabIndexValues() {
+    await nextFrame();
+    this.#buttons.forEach((element, index) => {
+      element.setAttribute("tabindex", index === 0 ? 0 : "-1");
+    });
   }
 
-  getReadableTextContent() {
-    return this.plainText || `[${this.contentType}]`
+  get #interactiveElements() {
+    return Array.from(this.panel.querySelectorAll("button, input"))
   }
 
-  isInline() {
-    return true
+  get #buttons() {
+    return Array.from(this.panel.querySelectorAll("button"))
   }
+}
 
-  exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      content: this.innerHtml,
-      "content-type": this.contentType
-    });
+const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
+const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
-    return { element: attachment }
+// Use Symbol instead of null since $getSelectionStyleValueForProperty
+// responds differently for backward selections if null is the default
+// see https://github.com/facebook/lexical/issues/8013
+const NO_STYLE = Symbol("no_style");
+
+class HighlightDropdown extends ToolbarDropdown {
+  editorReady() {
+    this.#setUpButtons();
+    this.#registerButtonHandlers();
   }
 
-  exportJSON() {
-    return {
-      type: "custom_action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      contentType: this.contentType,
-      innerHtml: this.innerHtml,
-      plainText: this.plainText
-    }
+  onOpen() {
+    this.editor.getEditorState().read(() => {
+      this.#updateColorButtonStates($getSelection());
+    });
   }
 
-  decorate() {
-    return null
+  #registerButtonHandlers() {
+    this.#colorButtons.forEach(button => {
+      this.track(registerEventListener(button, "click", this.#handleColorButtonClick));
+    });
   }
-}
 
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
-}
+  #setUpButtons() {
+    this.#buttonContainer.innerHTML = "";
 
-function isUrl(string) {
-  try {
-    new URL(string);
-    return true
-  } catch {
-    return false
+    const colorGroups = this.editorElement.config.get("highlight.buttons");
+
+    this.#populateButtonGroup("color", colorGroups.color);
+    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
+
+    const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
+    this.panel.style.setProperty("--max-colors", maxNumberOfColors);
   }
-}
 
-function normalizeFilteredText(string) {
-  return string
-    .toLowerCase()
-    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
-}
+  #populateButtonGroup(attribute, values) {
+    values.forEach((value, index) => {
+      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
+    });
+  }
 
-function filterMatchPosition(text, potentialMatch) {
-  const normalizedText = normalizeFilteredText(text);
-  const normalizedMatch = normalizeFilteredText(potentialMatch);
+  #createButton(attribute, value, index) {
+    return createElement("button", {
+      type: "button",
+      dataset: { value, style: attribute },
+      style: `${attribute}: ${value}`,
+      class: "lexxy-editor__toolbar-button lexxy-highlight-button",
+      name: `${attribute}-${index}`,
+      role: "menuitem"
+    })
+  }
 
-  if (!normalizedMatch) return 0
+  #handleColorButtonClick = (event) => {
+    event.preventDefault();
 
-  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
-  return match ? match.index : -1
-}
+    const button = event.target.closest(APPLY_HIGHLIGHT_SELECTOR);
+    if (!button) return
 
-function upcaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+    const { style, value } = button.dataset;
 
-function escapeForRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-}
+    this.editor.dispatchCommand("toggleHighlight", { [style]: value });
+    this.close();
+  }
 
-// Parses a value that may arrive as a boolean or as a string (e.g. from DOM
-// getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
-function parseBoolean(value) {
-  if (typeof value === "string") return value === "true"
-  return Boolean(value)
-}
+  #updateColorButtonStates(selection) {
+    if (!$isRangeSelection(selection)) { return }
 
-class LexxyExtension {
-  #editorElement
+    // Use non-"" default, so "" indicates mixed highlighting
+    const textColor = $getSelectionStyleValueForProperty(selection, "color", NO_STYLE);
+    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-  }
+    this.#colorButtons.forEach(button => {
+      const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
+      const next = matchesSelection.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
+    });
 
-  get editorElement() {
-    return this.#editorElement
+    const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
+    this.panel.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
-  get editorConfig() {
-    return this.#editorElement.config
+  get #buttonContainer() {
+    return this.panel.querySelector(".lexxy-highlight-colors")
   }
 
-  // optional: defaults to true
-  get enabled() {
-    return true
+  get #colorButtons() {
+    return Array.from(this.panel.querySelectorAll(APPLY_HIGHLIGHT_SELECTOR))
   }
+}
 
-  get lexicalExtension() {
-    return null
-  }
+class LinkDropdown extends ToolbarDropdown {
+  editorReady() {
+    this.input = this.panel.querySelector("input");
 
-  get allowedElements() {
-    return []
+    this.track(
+      registerEventListener(this.input, "keydown", this.#handleEnter),
+      registerEventListener(this.linkButton, "click", this.#handleLink),
+      registerEventListener(this.unlinkButton, "click", this.#handleUnlink)
+    );
   }
 
-  initializeToolbar(_lexxyToolbar) {
+  onOpen() {
+    this.input.value = this.#selectedLinkUrl;
+    this.input.required = true;
+  }
 
+  onClose() {
+    this.input.required = false;
   }
 
-  dispose() {
+  get linkButton() {
+    return this.panel.querySelector("[value='link']")
   }
-}
 
-function $containsRangeSelection(node, selection = $getSelection()) {
-  if ($isRangeSelection(selection)) {
-    const { commonAncestor } = $getCommonAncestor(selection.focus.getNode(), selection.anchor.getNode());
-    return $findMatchingParent(commonAncestor, parent => parent.is(node))
-  } else {
-    return false
+  get unlinkButton() {
+    return this.panel.querySelector("[value='unlink']")
   }
-}
 
-function $createNodeSelectionWith(...nodes) {
-  const selection = $createNodeSelection();
-  nodes.forEach(node => selection.add(node.getKey()));
-  return selection
-}
+  #handleEnter = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#handleLink(event);
+    }
+  }
 
-function $isShadowRoot(node) {
-  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
-}
+  #handleLink = () => {
+    if (!this.input.checkValidity()) {
+      this.input.reportValidity();
+      return
+    }
 
-function $makeSafeForRoot(node) {
-  if ($isTextNode(node)) {
-    return $wrapNodeInElement(node, $createParagraphNode)
-  } else if (node.isParentRequired()) {
-    const parent = node.createRequiredParent();
-    return $wrapNodeInElement(node, parent)
-  } else {
-    return node
+    this.editor.dispatchCommand("link", this.input.value);
+    this.close();
   }
-}
 
-function getListType(node) {
-  const list = $getNearestNodeOfType(node, ListNode);
-  return list?.getListType() ?? null
-}
+  #handleUnlink = () => {
+    this.editor.dispatchCommand("unlink");
+    this.close();
+  }
 
-function isEditorFocused(editor) {
-  const rootElement = editor.getRootElement();
-  return rootElement !== null && rootElement.contains(document.activeElement)
+  get #selectedLinkUrl() {
+    return this.editor.getEditorState().read(() => {
+      const linkNode = this.editorElement.selection.nearestNodeOfType(LinkNode);
+      return linkNode?.getURL() ?? ""
+    })
+  }
 }
 
-function $isAtNodeEdge(point, atStart = null) {
-  if (atStart === null) {
-    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
-  } else {
-    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+function deepMerge(target, source) {
+  const result = { ...target, ...source };
+  for (const [ key, value ] of Object.entries(source)) {
+    if (arePlainHashes(target[key], value)) {
+      result[key] = deepMerge(target[key], value);
+    }
   }
-}
 
-function $isAtNodeStart(point) {
-  return point.offset === 0
+  return result
 }
 
-function extendTextNodeConversion(conversionName, ...callbacks) {
-  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
-    ...conversionOutput,
-    forChild: (lexicalNode, parentNode) => {
-      const originalForChild = conversionOutput?.forChild ?? (x => x);
-      let childNode = originalForChild(lexicalNode, parentNode);
-
-
-      if ($isTextNode(childNode)) {
-        childNode = callbacks.reduce(
-          (childNode, callback) => callback(childNode, element) ?? childNode,
-          childNode
-        );
-        return childNode
-      }
-    }
-  }))
+function arePlainHashes(...values) {
+  return values.every(value => value && value.constructor == Object)
 }
 
-function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
-  return (element) => {
-    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
-    if (!converter) return null
+class Configuration {
+  #tree = {}
 
-    const conversionOutput = converter.conversion(element);
-    if (!conversionOutput) return conversionOutput
+  constructor(...configs) {
+    this.merge(...configs);
+  }
 
-    return callback(conversionOutput, element) ?? conversionOutput
+  merge(...configs) {
+    return this.#tree = configs.reduce(deepMerge, this.#tree)
   }
-}
 
-function $isCursorOnLastLine(selection) {
-  const anchorNode = selection.anchor.getNode();
-  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
-  const children = elementNode.getChildren();
-  if (children.length === 0) return true
-
-  const lastChild = children[children.length - 1];
-
-  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
-  if (anchorNode === lastChild) return true
-
-  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
-  if (lastLineBreakIndex === -1) return true
-
-  const anchorIndex = children.indexOf(anchorNode);
-  return anchorIndex > lastLineBreakIndex
+  get(path) {
+    const keys = path.split(".");
+    return keys.reduce((node, key) => node[key], this.#tree)
+  }
 }
 
-function $isBlankNode(node) {
-  if (node.getTextContent().trim() !== "") return false
-
-  const children = node.getChildren?.();
-  if (!children || children.length === 0) return true
-
-  return children.every(child => {
-    if ($isLineBreakNode(child)) return true
-    return $isBlankNode(child)
-  })
+function range(from, to) {
+  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
 }
 
-function $trimTrailingBlankNodes(parent) {
-  for (const child of $lastToFirstIterator(parent)) {
-    if ($isBlankNode(child)) {
-      child.remove();
-    } else {
-      break
+const global = new Configuration({
+  attachmentTagName: "action-text-attachment",
+  attachmentContentTypeNamespace: "actiontext",
+  authenticatedUploads: false,
+  extensions: []
+});
+
+const presets = new Configuration({
+  default: {
+    attachments: true,
+    markdown: true,
+    multiLine: true,
+    permittedAttachmentTypes: null,
+    richText: true,
+    toolbar: {
+      upload: "both"
+    },
+    highlight: {
+      buttons: {
+        color: range(1, 9).map(n => `var(--highlight-${n})`),
+        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+      },
+      permit: {
+        color: [],
+        "background-color": []
+      }
     }
   }
-}
+});
 
-// A list item is structurally empty if it contains no meaningful content.
-// Unlike getTextContent().trim() === "", this walks descendants to ensure
-// decorator nodes (mentions, attachments whose getTextContent() may return
-// invisible characters like \ufeff) are treated as non-empty content.
-function $isListItemStructurallyEmpty(listItem) {
-  const children = listItem.getChildren();
-  for (const child of children) {
-    if ($isDecoratorNode(child)) return false
-    if ($isLineBreakNode(child)) continue
-    if ($isTextNode(child)) {
-      if (child.getTextContent().trim() !== "") return false
-    } else if ($isElementNode(child)) {
-      if (child.getTextContent().trim() !== "") return false
+var Lexxy = {
+  global,
+  presets,
+  configure({ global: newGlobal, ...newPresets }) {
+    if (newGlobal) {
+      global.merge(newGlobal);
     }
+    presets.merge(newPresets);
   }
-  return true
+};
+
+function setSanitizerConfig(allowedTags) {
+  DOMPurify.clearConfig();
+  DOMPurify.setConfig(buildConfig(allowedTags));
 }
 
-function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
-  return $isTextNode(node)
-    && node.getTextContent() === " "
-    && index === childCount - 1
-    && previousNode instanceof CustomActionTextAttachmentNode
+function sanitize(html) {
+  return DOMPurify.sanitize(html)
 }
 
-function $splitParagraphsAtLineBreakBoundaries(selection) {
-  $ensureForwardRangeSelection(selection);
+function bytesToHumanSize(bytes) {
+  if (bytes === 0) return "0 B"
+  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  return `${ value.toFixed(2) } ${ sizes[i] }`
+}
 
-  // Split focus first so the anchor split position stays valid.
-  $splitAtNearestLineBreak(selection.focus, "next");
-  $splitAtNearestLineBreak(selection.anchor, "previous");
+function extractFileName(string) {
+  return string.split("/").pop()
 }
 
-function $splitAtNearestLineBreak(point, direction) {
-  const paragraph = point.getNode().getTopLevelElement();
-  if (!paragraph || !$isParagraphNode(paragraph)) return
+// The content attribute is raw HTML (matching Trix/ActionText). Older Lexxy
+// versions JSON-encoded it, so try JSON.parse first for backward compatibility.
+function parseAttachmentContent(content) {
+  try {
+    return JSON.parse(content)
+  } catch {
+    return content
+  }
+}
 
-  const pointNode = point.getNode();
-  const selectionChild = pointNode.getParent().is(paragraph) ? pointNode : pointNode.getParentOrThrow();
-  const lineBreakCaret = $caretAtNearestNodeOfType(selectionChild, LineBreakNode, direction);
-  if (!lineBreakCaret) return
+function mimeTypeToExtension(mimeType) {
+  if (!mimeType) return null
 
-  const lineBreak = lineBreakCaret.origin;
-  const isEdge = lineBreakCaret.getNodeAtCaret() === null;
+  const extension = mimeType.split("/")[1];
+  return extension
+}
 
-  if (!isEdge) {
-    $splitNode(paragraph, lineBreak.getIndexWithinParent());
+class CustomActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "custom_action_text_attachment"
   }
 
-  lineBreak.remove();
-}
+  static clone(node) {
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  }
 
-function $caretAtNearestNodeOfType(node, klass, direction) {
-  for (const caret of $getSiblingCaret(node, direction)) {
-    if (caret.origin instanceof klass) return caret
+  static importJSON(serializedNode) {
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
   }
-  return null
-}
 
-// Payload: Record<nodeKey, { patch?, replace? }>
-//   - patch: plain object, shallow-merged into the existing node's properties
-//   - replace: a LexicalNode instance that replaces the node
-const REWRITE_HISTORY_COMMAND = createCommand("REWRITE_HISTORY_COMMAND");
+  static importDOM() {
+    return {
+      [this.TAG_NAME]: (element) => {
+        if (!element.getAttribute("content")) {
+          return null
+        }
 
-class RewritableHistoryExtension extends LexxyExtension {
-  #historyState = null
+        return {
+          conversion: (attachment) => {
+            // Preserve initial space if present since Lexical removes it
+            const nodes = [];
+            const previousSibling = attachment.previousSibling;
+            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
 
-  get lexicalExtension() {
-    return defineExtension({
-      name: "lexxy/rewritable-history",
-      dependencies: [ HistoryExtension ],
-      register: (editor, _config, state) => {
-        const historyOutput = state.getDependency(HistoryExtension).output;
-        this.#historyState = historyOutput.historyState.value;
+            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
 
-        return editor.registerCommand(
-          REWRITE_HISTORY_COMMAND,
-          (rewrites) => this.#rewriteHistory(rewrites),
-          COMMAND_PRIORITY_EDITOR
-        )
-      }
-    })
-  }
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml,
+              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
+              contentType: attachment.getAttribute("content-type")
+            }));
 
-  get historyState() {
-    return this.#historyState
-  }
+            const nextSibling = attachment.nextSibling;
+            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
 
-  get #allHistoryEntries() {
-    const entries = Array.from(this.#historyState.undoStack);
-    if (this.#historyState.current) entries.push(this.#historyState.current);
-    return entries.concat(this.#historyState.redoStack)
+            return { node: nodes }
+          },
+          priority: 2
+        }
+      }
+    }
   }
 
-  #rewriteHistory(rewrites) {
-    this.#applyRewritesImmediatelyToCurrentState(rewrites);
-    this.#applyRewritesToHistory(rewrites);
-
-    return true
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
   }
 
-  #applyRewritesImmediatelyToCurrentState(rewrites) {
-    $getEditor().update(() => {
-      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
-        const node = $getNodeByKey(nodeKey);
-        if (!node) continue
+  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+    super(key);
 
-        if (patch) Object.assign(node.getWritable(), patch);
-        if (replace) node.replace(replace);
-      }
-    }, { discrete: true, tag: this.#getBackgroundUpdateTags() });
-  }
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
 
-  #applyRewritesToHistory(rewrites) {
-    const nodeKeys = Object.keys(rewrites);
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
+    this.innerHtml = innerHtml;
+    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+  }
 
-    for (const entry of this.#allHistoryEntries) {
-      if (!this.#entryHasSomeKeys(entry, nodeKeys)) continue
+  createDOM() {
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
-      const editorState = entry.editorState = safeCloneEditorState(entry.editorState);
+    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
 
-      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
-        const node = editorState._nodeMap.get(nodeKey);
-        if (!node) continue
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
 
-        if (patch) {
-          this.#patchNodeInEditorState(editorState, node, patch);
-        } else if (replace) {
-          this.#replaceNodeInEditorState(editorState, node, replace);
-        }
-      }
-    }
+    return figure
   }
 
-  #entryHasSomeKeys(entry, nodeKeys) {
-    return nodeKeys.some(key => entry.editorState._nodeMap.has(key))
+  updateDOM() {
+    return false
   }
 
-  #getBackgroundUpdateTags() {
-    const tags = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
-    if (!isEditorFocused(this.editorElement.editor)) { tags.push(SKIP_DOM_SELECTION_TAG); }
-    return tags
+  getTextContent() {
+    return "\ufeff"
   }
 
-  #patchNodeInEditorState(editorState, node, patch) {
-    editorState._nodeMap.set(node.__key, $cloneNodeWithPatch(node, patch));
+  getReadableTextContent() {
+    return this.plainText || `[${this.contentType}]`
   }
 
-  #replaceNodeInEditorState(editorState, node, replaceWith) {
-    editorState._nodeMap.set(node.__key, $cloneNodeAdoptingKeys(replaceWith, node));
+  isInline() {
+    return true
   }
-}
 
-function $cloneNodeWithPatch(node, patch) {
-  const clone = $cloneWithProperties(node);
+  exportDOM() {
+    const attachment = createElement(this.tagName, {
+      sgid: this.sgid,
+      content: this.innerHtml,
+      "content-type": this.contentType
+    });
+
+    return { element: attachment }
+  }
+
+  exportJSON() {
+    return {
+      type: "custom_action_text_attachment",
+      version: 1,
+      tagName: this.tagName,
+      sgid: this.sgid,
+      contentType: this.contentType,
+      innerHtml: this.innerHtml,
+      plainText: this.plainText
+    }
+  }
+
+  decorate() {
+    return null
+  }
+}
+
+function dasherize(value) {
+  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
+}
+
+function isAutolinkableURL(string) {
+  return /^(?:[a-z0-9]+:\/\/|www\.)[^\s]+$/i.test(string)
+}
+
+function normalizeFilteredText(string) {
+  return string
+    .toLowerCase()
+    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
+}
+
+function filterMatchPosition(text, potentialMatch) {
+  const normalizedText = normalizeFilteredText(text);
+  const normalizedMatch = normalizeFilteredText(potentialMatch);
+
+  if (!normalizedMatch) return 0
+
+  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
+  return match ? match.index : -1
+}
+
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+function escapeForRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+// Parses a value that may arrive as a boolean or as a string (e.g. from DOM
+// getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
+function parseBoolean(value) {
+  if (typeof value === "string") return value === "true"
+  return Boolean(value)
+}
+
+class LexxyExtension {
+  #editorElement
+
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+  }
+
+  get editorElement() {
+    return this.#editorElement
+  }
+
+  get editorConfig() {
+    return this.#editorElement.config
+  }
+
+  // optional: defaults to true
+  get enabled() {
+    return true
+  }
+
+  get lexicalExtension() {
+    return null
+  }
+
+  get allowedElements() {
+    return []
+  }
+
+  initializeToolbar(_lexxyToolbar) {
+
+  }
+
+  setEditorValidity(flags, message) {
+    this.editorElement.setElementValidity(this, flags, message);
+  }
+
+  dispose() {
+  }
+}
+
+function $containsRangeSelection(node, selection = $getSelection()) {
+  if ($isRangeSelection(selection)) {
+    const { commonAncestor } = $getCommonAncestor(selection.focus.getNode(), selection.anchor.getNode());
+    return $findMatchingParent(commonAncestor, parent => parent.is(node))
+  } else {
+    return false
+  }
+}
+
+function $createNodeSelectionWith(...nodes) {
+  const selection = $createNodeSelection();
+  nodes.forEach(node => selection.add(node.getKey()));
+  return selection
+}
+
+function $isShadowRoot(node) {
+  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
+}
+
+function $makeSafeForRoot(node) {
+  if ($isTextNode(node)) {
+    return $wrapNodeInElement(node, $createParagraphNode)
+  } else if (node.isParentRequired()) {
+    const parent = node.createRequiredParent();
+    return $wrapNodeInElement(node, parent)
+  } else {
+    return node
+  }
+}
+
+function getListType(node) {
+  const list = $getNearestNodeOfType(node, ListNode);
+  return list?.getListType() ?? null
+}
+
+function isEditorFocused(editor) {
+  const rootElement = editor.getRootElement();
+  return rootElement !== null && rootElement.contains(document.activeElement)
+}
+
+function $isAtNodeEdge(point, atStart = null) {
+  if (atStart === null) {
+    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
+  } else {
+    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+  }
+}
+
+function $isAtNodeStart(point) {
+  return point.offset === 0
+}
+
+function extendTextNodeConversion(conversionName, ...callbacks) {
+  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
+    ...conversionOutput,
+    forChild: (lexicalNode, parentNode) => {
+      const originalForChild = conversionOutput?.forChild ?? (x => x);
+      let childNode = originalForChild(lexicalNode, parentNode);
+
+
+      if ($isTextNode(childNode)) {
+        childNode = callbacks.reduce(
+          (childNode, callback) => callback(childNode, element) ?? childNode,
+          childNode
+        );
+        return childNode
+      }
+    }
+  }))
+}
+
+function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
+  return (element) => {
+    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
+    if (!converter) return null
+
+    const conversionOutput = converter.conversion(element);
+    if (!conversionOutput) return conversionOutput
+
+    return callback(conversionOutput, element) ?? conversionOutput
+  }
+}
+
+function $isCursorOnLastLine(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+  const children = elementNode.getChildren();
+  if (children.length === 0) return true
+
+  const lastChild = children[children.length - 1];
+
+  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
+  if (anchorNode === lastChild) return true
+
+  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
+  if (lastLineBreakIndex === -1) return true
+
+  const anchorIndex = children.indexOf(anchorNode);
+  return anchorIndex > lastLineBreakIndex
+}
+
+function $isBlankNode(node) {
+  if (node.getTextContent().trim() !== "") return false
+
+  const children = node.getChildren?.();
+  if (!children || children.length === 0) return true
+
+  return children.every(child => {
+    if ($isLineBreakNode(child)) return true
+    return $isBlankNode(child)
+  })
+}
+
+function $trimTrailingBlankNodes(parent) {
+  for (const child of $lastToFirstIterator(parent)) {
+    if ($isBlankNode(child)) {
+      child.remove();
+    } else {
+      break
+    }
+  }
+}
+
+// A list item is structurally empty if it contains no meaningful content.
+// Unlike getTextContent().trim() === "", this walks descendants to ensure
+// decorator nodes (mentions, attachments whose getTextContent() may return
+// invisible characters like \ufeff) are treated as non-empty content.
+function $isListItemStructurallyEmpty(listItem) {
+  const children = listItem.getChildren();
+  for (const child of children) {
+    if ($isDecoratorNode(child)) return false
+    if ($isLineBreakNode(child)) continue
+    if ($isTextNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    } else if ($isElementNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    }
+  }
+  return true
+}
+
+function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
+  return $isTextNode(node)
+    && node.getTextContent() === " "
+    && index === childCount - 1
+    && previousNode instanceof CustomActionTextAttachmentNode
+}
+
+function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
+  const topLevelElements = new Set();
+  for (const node of selection.getNodes()) {
+    const topLevel = node.getTopLevelElement();
+    if (topLevel) topLevelElements.add(topLevel);
+  }
+
+  for (const element of topLevelElements) {
+    if (!$isParagraphNode(element)) continue
+
+    const children = element.getChildren();
+    if (!children.some($isLineBreakNode)) continue
+
+    const groups = [ [] ];
+    for (const child of children) {
+      if ($isLineBreakNode(child)) {
+        groups.push([]);
+        child.remove();
+      } else {
+        groups[groups.length - 1].push(child);
+      }
+    }
+
+    for (const group of groups) {
+      if (group.length === 0) continue
+      const paragraph = $createParagraphNode();
+      group.forEach(child => paragraph.append(child));
+      element.insertBefore(paragraph);
+    }
+    if (groups.some(group => group.length > 0)) element.remove();
+  }
+}
+
+function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
+  $ensureForwardRangeSelection(selection);
+
+  const focusCaret = $caretFromPoint(selection.focus, "next");
+  const anchorCaret = $caretFromPoint(selection.anchor, "previous");
+
+  // A collapsed cursor adjacent to a <br> would claim it from both sides via
+  // inward-edge; force outward-only walks so each side finds its own boundary.
+  const skipInwardEdge = selection.isCollapsed();
+  const focusBrCaret = $getCaretAtLineBreakBoundary(focusCaret, skipInwardEdge);
+  let anchorBrCaret = $getCaretAtLineBreakBoundary(anchorCaret, skipInwardEdge);
+
+  if (focusBrCaret?.origin.is(anchorBrCaret?.origin)) {
+    anchorBrCaret = null;
+  }
+
+  // Splitting focus first keeps the anchor <br>'s position stable.
+  const focusOuter = focusBrCaret && $splitAroundLineBreak(focusBrCaret);
+  const anchorOuter = anchorBrCaret && $splitAroundLineBreak(anchorBrCaret);
+
+  const innerStart = anchorOuter?.getNextSibling() ?? selection.anchor.getNode().getTopLevelElement();
+  const innerEnd = focusOuter?.getPreviousSibling() ?? selection.focus.getNode().getTopLevelElement();
+  if (!innerStart || !innerEnd) return
+
+  $setSelectionFromCaretRange($getCaretRange(
+    $normalizeCaret($getChildCaret(innerStart, "next")),
+    $getCaretInDirection(
+      $normalizeCaret($getChildCaret(innerEnd, "previous")),
+      "next",
+    ),
+  ));
+}
+
+function $getCaretAtLineBreakBoundary(caret, skipInwardEdge = false) {
+  const paragraph = caret.origin.getTopLevelElement();
+  if (!paragraph || !$isParagraphNode(paragraph)) return null
+
+  const lineBreak = (skipInwardEdge ? null : $inwardEdgeLineBreak(caret, paragraph))
+    ?? $outwardLineBreak(caret, paragraph);
+
+  return lineBreak ? $getSiblingCaret(lineBreak, caret.direction) : null
+}
+
+// Prefer a <br> the cursor is sitting flush against, except when a further <br>
+// also exists outward — that one is the real paragraph break for this side.
+function $inwardEdgeLineBreak(caret, paragraph) {
+  let candidateCaret;
+
+  if (
+    ($isChildCaret(caret) && caret.origin.is(paragraph)) ||
+    ($isTextPointCaret(caret) && $isExtendableTextPointCaret(caret.getFlipped()))
+  ) {
+    candidateCaret = null;
+  } else if ($isSiblingCaret(caret) && caret.getParentAtCaret().is(paragraph)) {
+    candidateCaret = caret;
+  } else {
+    const childCaret = $paragraphChildCaretAtInwardEdge(caret, paragraph);
+    candidateCaret = childCaret ? $rewindSiblingCaret(childCaret) : null;
+  }
+
+  if (candidateCaret && $isLineBreakNode(candidateCaret.origin)) {
+    return $candidateUnlessShadowed(candidateCaret)
+  } else {
+    return null
+  }
+}
+
+function $candidateUnlessShadowed(candidateCaret) {
+  const outward = candidateCaret.getNodeAtCaret();
+  return $isLineBreakNode(outward) ? null : candidateCaret.origin
+}
+
+function $outwardLineBreak(caret, paragraph) {
+  const startCaret = $outwardWalkStartCaret(caret, paragraph);
+  if (!startCaret) return null
+
+  for (const { origin } of startCaret) {
+    if (!origin.getParent().is(paragraph)) break
+    if ($isLineBreakNode(origin)) return origin
+  }
+  return null
+}
+
+function $outwardWalkStartCaret(caret, paragraph) {
+  if (caret.getParentAtCaret().is(paragraph)) {
+    return caret
+  } else {
+    return $paragraphChildCaretContaining(caret, paragraph)
+  }
+}
+
+function $paragraphChildCaretContaining(caret, paragraph) {
+  let cursor = caret.getSiblingCaret();
+  while (cursor && !cursor.origin.getParent()?.is(paragraph)) {
+    cursor = cursor.getParentCaret();
+  }
+  return cursor?.origin.getParent()?.is(paragraph) ? cursor : null
+}
+
+// Only succeeds when the cursor is flush against the inward edge of every
+// ancestor between itself and the paragraph child.
+function $paragraphChildCaretAtInwardEdge(caret, paragraph) {
+  let cursor = caret.getSiblingCaret();
+  while (cursor && !cursor.origin.getParent()?.is(paragraph)) {
+    if (cursor.getNodeAtCaret()) return null
+    cursor = cursor.getParentCaret();
+  }
+  return cursor?.origin.getParent()?.is(paragraph) ? cursor : null
+}
+
+function $splitAroundLineBreak(lineBreakCaret) {
+  let outer = null;
+
+  if (lineBreakCaret.getNodeAtCaret() === null) {
+    lineBreakCaret.origin.remove();
+  } else {
+    const lineBreak = lineBreakCaret.origin;
+    const splitCaret = $getCaretInDirection($rewindSiblingCaret(lineBreakCaret), "next");
+
+    $splitAtPointCaretNext(splitCaret);
+    outer = lineBreak.getTopLevelElement();
+    lineBreak.remove();
+  }
+
+  return outer
+}
+
+// Payload: Record<nodeKey, { patch?, replace? }>
+//   - patch: plain object, shallow-merged into the existing node's properties
+//   - replace: a LexicalNode instance that replaces the node
+const REWRITE_HISTORY_COMMAND = createCommand("REWRITE_HISTORY_COMMAND");
+
+class RewritableHistoryExtension extends LexxyExtension {
+  #historyState = null
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/rewritable-history",
+      dependencies: [ HistoryExtension ],
+      register: (editor, _config, state) => {
+        const historyOutput = state.getDependency(HistoryExtension).output;
+        this.#historyState = historyOutput.historyState.value;
+
+        return editor.registerCommand(
+          REWRITE_HISTORY_COMMAND,
+          (rewrites) => this.#rewriteHistory(rewrites),
+          COMMAND_PRIORITY_EDITOR
+        )
+      }
+    })
+  }
+
+  get historyState() {
+    return this.#historyState
+  }
+
+  get #allHistoryEntries() {
+    const entries = Array.from(this.#historyState.undoStack);
+    if (this.#historyState.current) entries.push(this.#historyState.current);
+    return entries.concat(this.#historyState.redoStack)
+  }
+
+  #rewriteHistory(rewrites) {
+    this.#applyRewritesImmediatelyToCurrentState(rewrites);
+    this.#applyRewritesToHistory(rewrites);
+
+    return true
+  }
+
+  #applyRewritesImmediatelyToCurrentState(rewrites) {
+    $getEditor().update(() => {
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = $getNodeByKey(nodeKey);
+        if (!node) continue
+
+        if (patch) Object.assign(node.getWritable(), patch);
+        if (replace) node.replace(replace);
+      }
+    }, { discrete: true, tag: this.#getBackgroundUpdateTags() });
+  }
+
+  #applyRewritesToHistory(rewrites) {
+    const nodeKeys = Object.keys(rewrites);
+
+    for (const entry of this.#allHistoryEntries) {
+      if (!this.#entryHasSomeKeys(entry, nodeKeys)) continue
+
+      const editorState = entry.editorState = safeCloneEditorState(entry.editorState);
+
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = editorState._nodeMap.get(nodeKey);
+        if (!node) continue
+
+        if (patch) {
+          this.#patchNodeInEditorState(editorState, node, patch);
+        } else if (replace) {
+          this.#replaceNodeInEditorState(editorState, node, replace);
+        }
+      }
+    }
+  }
+
+  #entryHasSomeKeys(entry, nodeKeys) {
+    return nodeKeys.some(key => entry.editorState._nodeMap.has(key))
+  }
+
+  #getBackgroundUpdateTags() {
+    const tags = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+    if (!isEditorFocused(this.editorElement.editor)) { tags.push(SKIP_DOM_SELECTION_TAG); }
+    return tags
+  }
+
+  #patchNodeInEditorState(editorState, node, patch) {
+    editorState._nodeMap.set(node.__key, $cloneNodeWithPatch(node, patch));
+  }
+
+  #replaceNodeInEditorState(editorState, node, replaceWith) {
+    editorState._nodeMap.set(node.__key, $cloneNodeAdoptingKeys(replaceWith, node));
+  }
+}
+
+function $cloneNodeWithPatch(node, patch) {
+  const clone = $cloneWithProperties(node);
   Object.assign(clone, patch);
   return clone
 }
@@ -1873,11 +2358,6 @@ function $isActionTextAttachmentNode(node) {
   return node instanceof ActionTextAttachmentNode
 }
 
-function $generateFilteredNodesFromDOM(editorElement, doc) {
-  const nodes = $generateNodesFromDOM(editorElement.editor, doc);
-  return filterDisallowedAttachmentNodes(nodes, editorElement)
-}
-
 function filterDisallowedAttachmentNodes(nodes, editorElement) {
   return nodes
     .filter(node => !isDisallowedAttachment(node, editorElement))
@@ -1896,6 +2376,67 @@ function isDisallowedAttachment(node, editorElement) {
          !editorElement.permitsAttachmentContentType(node.contentType)
 }
 
+// Replaces inline `data:image/...` attachments with upload nodes that flow through the normal
+// file upload pipeline.
+//
+// Without this step, pasted-from-Google-Docs-style content lands in the editor with the entire
+// base64 image embedded in the attachment's `src`, which then persists into the saved HTML and
+// bloats the stored document.
+//
+// Each conversion dispatches the cancelable `lexxy:file-accept` event so the host's allowlist (and
+// any other listener) can refuse the synthesized File before it's accepted into the upload
+// pipeline; on refusal, the node is dropped silently — matching how `Contents#uploadFiles` handles
+// file-picker rejections.
+function $convertInlineImageDataURIs(nodes, editorElement) {
+  const topLevel = nodes
+    .map(node => isInlineImageDataURIAttachment(node) ? $tryCreateUploadFromDataURI(node, editorElement) : node)
+    .filter(node => node !== null);
+
+  for (const node of topLevel) {
+    for (const desc of $descendantsMatching([ node ], isInlineImageDataURIAttachment)) {
+      const upload = $tryCreateUploadFromDataURI(desc, editorElement);
+      if (upload) {
+        desc.replace(upload);
+      } else {
+        desc.remove();
+      }
+    }
+  }
+
+  return topLevel
+}
+
+function isInlineImageDataURIAttachment(node) {
+  return node instanceof ActionTextAttachmentNode &&
+    /^data:image\/[^,]*;base64,/i.test(node.src ?? "")
+}
+
+function $tryCreateUploadFromDataURI(node, editorElement) {
+  const file = dataURIToFile(node.src);
+  if (file && editorElement.acceptsFile(file)) {
+    return editorElement.contents.$createUploadNode(file)
+  }
+  return null
+}
+
+function dataURIToFile(dataURI) {
+  try {
+    const [ header, data ] = dataURI.split(",");
+
+    // https://datatracker.ietf.org/doc/html/rfc6838#section-4.2
+    const mimeType = header.match(/^data:(image\/[A-Za-z0-9][A-Za-z0-9!#$&\-^_.+]*)/)?.[1];
+    if (mimeType) {
+      const bytes = Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+      const extension = mimeTypeToExtension(mimeType) ?? "png";
+      return new File([ bytes ], `pasted-image-${Date.now()}.${extension}`, { type: mimeType })
+    } else {
+      return null
+    }
+  } catch {
+    return null
+  }
+}
+
 class HorizontalDividerNode extends DecoratorNode {
   static getType() {
     return "horizontal_divider"
@@ -3150,12 +3691,18 @@ class CommandDispatcher {
   #registerDragAndDropHandlers() {
     if (this.editorElement.supportsAttachments) {
       this.dragCounter = 0;
-      const root = this.editor.getRootElement();
       this.#listeners.track(
-        registerEventListener(root, "dragover", this.#handleDragOver.bind(this)),
-        registerEventListener(root, "drop", this.#handleDrop.bind(this)),
-        registerEventListener(root, "dragenter", this.#handleDragEnter.bind(this)),
-        registerEventListener(root, "dragleave", this.#handleDragLeave.bind(this))
+        this.editor.registerRootListener((rootElement) => {
+          if (rootElement) {
+            const teardowns = [
+              registerEventListener(rootElement, "dragover", this.#handleDragOver.bind(this)),
+              registerEventListener(rootElement, "drop", this.#handleDrop.bind(this)),
+              registerEventListener(rootElement, "dragenter", this.#handleDragEnter.bind(this)),
+              registerEventListener(rootElement, "dragleave", this.#handleDragLeave.bind(this))
+            ];
+            return () => teardowns.forEach((teardown) => teardown())
+          }
+        })
       );
     }
   }
@@ -3254,42 +3801,6 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-function debounce(fn, wait) {
-  let timeout;
-
-  return (...args) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => fn(...args), wait);
-  }
-}
-
-function debounceAsync(fn, wait) {
-  let timeout;
-
-  return (...args) => {
-    clearTimeout(timeout);
-
-    return new Promise((resolve, reject) => {
-      timeout = setTimeout(async () => {
-        try {
-          const result = await fn(...args);
-          resolve(result);
-        } catch (err) {
-          reject(err);
-        }
-      }, wait);
-    })
-  }
-}
-
-function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-function nextFrame() {
-  return new Promise(requestAnimationFrame)
-}
-
 class Selection {
   #listeners = new ListenerBin()
 
@@ -3361,32 +3872,6 @@ class Selection {
     return { node: null, offset: 0 }
   }
 
-  preservingSelection(fn) {
-    let selectionState = null;
-
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (selection && $isRangeSelection(selection)) {
-        selectionState = {
-          anchor: { key: selection.anchor.key, offset: selection.anchor.offset },
-          focus: { key: selection.focus.key, offset: selection.focus.offset }
-        };
-      }
-    });
-
-    fn();
-
-    if (selectionState) {
-      this.editor.update(() => {
-        const selection = $getSelection();
-        if (selection && $isRangeSelection(selection)) {
-          selection.anchor.set(selectionState.anchor.key, selectionState.anchor.offset, "text");
-          selection.focus.set(selectionState.focus.key, selectionState.focus.offset, "text");
-        }
-      });
-    }
-  }
-
   getFormat() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return {}
@@ -3651,46 +4136,59 @@ class Selection {
       return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
     }, COMMAND_PRIORITY_LOW));
 
-    const rootElement = this.editor.getRootElement();
     this.#listeners.track(
-      registerEventListener(rootElement, "lexxy:internal:move-to-next-line", () => this.#selectOrAppendNextLine())
+      this.editor.registerRootListener((rootElement) => {
+        if (rootElement) {
+          return registerEventListener(rootElement, "lexxy:internal:move-to-next-line", () => this.#selectOrAppendNextLine())
+        }
+      })
     );
   }
 
   #containEditorFocus() {
     // Workaround for a bizarre Chrome bug where the cursor abandons the editor to focus on not-focusable elements
     // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
-    this.editorContentElement.addEventListener("keydown", (event) => {
-      if (event.key === "ArrowUp") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
-
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.previousElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.previousElementSibling;
-          }
+    this.#listeners.track(
+      this.editor.registerRootListener((rootElement) => {
+        if (rootElement) {
+          const handler = (event) => this.#handleArrowKeyOnLexicalCursor(event);
+          rootElement.addEventListener("keydown", handler, true);
+          return () => rootElement.removeEventListener("keydown", handler, true)
+        }
+      })
+    );
+  }
 
-          if (!currentElement) {
-            event.preventDefault();
-          }
+  #handleArrowKeyOnLexicalCursor(event) {
+    if (event.key === "ArrowUp") {
+      const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+
+      if (lexicalCursor) {
+        let currentElement = lexicalCursor.previousElementSibling;
+        while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+          currentElement = currentElement.previousElementSibling;
+        }
+
+        if (!currentElement) {
+          event.preventDefault();
         }
       }
+    }
 
-      if (event.key === "ArrowDown") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+    if (event.key === "ArrowDown") {
+      const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
 
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.nextElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.nextElementSibling;
-          }
+      if (lexicalCursor) {
+        let currentElement = lexicalCursor.nextElementSibling;
+        while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+          currentElement = currentElement.nextElementSibling;
+        }
 
-          if (!currentElement) {
-            event.preventDefault();
-          }
+        if (!currentElement) {
+          event.preventDefault();
         }
       }
-    }, true);
+    }
   }
 
   #syncSelectedClasses() {
@@ -4013,472 +4511,193 @@ class Selection {
     const parentElement = this.#getElementFromNode(anchorNode);
 
     if (parentElement instanceof HTMLElement) {
-      const computed = window.getComputedStyle(parentElement);
-      return parseFloat(computed.fontSize)
-    }
-
-    return 0
-  }
-
-  #getElementFromNode(node) {
-    return node?.nodeType === Node.TEXT_NODE ? node.parentElement : node
-  }
-
-  #getCollapsedSelectionData() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
-      return { anchorNode: null, offset: 0 }
-    }
-
-    const { anchor } = selection;
-    return { anchorNode: anchor.getNode(), offset: anchor.offset }
-  }
-
-  #getNodeAfterTextNode(anchorNode, offset) {
-    if (offset === anchorNode.getTextContentSize()) {
-      return this.#getNextNodeFromTextEnd(anchorNode)
-    }
-    return null
-  }
-
-  #getNextNodeFromTextEnd(anchorNode) {
-    const nextSibling = anchorNode.getNextSibling();
-    if ($isDecoratorNode(nextSibling)) {
-      return nextSibling
-    }
-    if (nextSibling != null) {
-      return null
-    }
-    const parent = anchorNode.getParent();
-    return parent ? parent.getNextSibling() : null
-  }
-
-  #getNodeAfterElementNode(anchorNode, offset) {
-    if (offset < anchorNode.getChildrenSize()) {
-      return anchorNode.getChildAtIndex(offset)
-    }
-    return this.#findNextSiblingUp(anchorNode)
-  }
-
-  #getNodeBeforeTextNode(anchorNode, offset) {
-    if (offset === 0) {
-      return this.#getPreviousNodeFromTextStart(anchorNode)
-    }
-    return null
-  }
-
-  #getPreviousNodeFromTextStart(anchorNode) {
-    const previousSibling = anchorNode.getPreviousSibling();
-    if ($isDecoratorNode(previousSibling)) {
-      return previousSibling
-    }
-    if (previousSibling != null) {
-      return null
-    }
-    const parent = anchorNode.getParent();
-    return parent ? parent.getPreviousSibling() : null
-  }
-
-  #getNodeBeforeElementNode(anchorNode, offset) {
-    if (offset > 0) {
-      return anchorNode.getChildAtIndex(offset - 1)
-    }
-    return this.#findPreviousSiblingUp(anchorNode)
-  }
-
-  #findNextSiblingUp(node) {
-    let current = node;
-    while (current && current.getNextSibling() == null) {
-      current = current.getParent();
-    }
-    return current ? current.getNextSibling() : null
-  }
-
-  #findPreviousSiblingUp(node) {
-    let current = node;
-    while (current && current.getPreviousSibling() == null) {
-      current = current.getParent();
-    }
-    return current ? current.getPreviousSibling() : null
-  }
-
-  #isCursorOnFirstVisualLineOfBlock(anchorNode) {
-    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "first")
-  }
-
-  #isCursorOnLastVisualLineOfBlock(anchorNode) {
-    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "last")
-  }
-
-  // Check whether the cursor sits on the first or last visual line of its
-  // top-level block by comparing the Y position of the cursor with the Y
-  // position of the block's start (first line) or end (last line).
-  #isCursorOnEdgeLineOfBlock(anchorNode, edge) {
-    const topLevelElement = anchorNode.getTopLevelElement();
-    if (!topLevelElement) return false
-
-    const domElement = this.editor.getElementByKey(topLevelElement.getKey());
-    if (!domElement) return false
-
-    const nativeSelection = window.getSelection();
-    if (!nativeSelection?.rangeCount) return false
-
-    const cursorRect = this.#getReliableRectFromRange(nativeSelection.getRangeAt(0));
-    if (!cursorRect || this.#isRectUnreliable(cursorRect)) return false
-
-    const edgeRect = this.#getEdgeCharRect(domElement, edge);
-    if (!edgeRect || this.#isRectUnreliable(edgeRect)) return false
-
-    const tolerance = edgeRect.height > 0 ? edgeRect.height * 0.5 : 5;
-    return Math.abs(cursorRect.top - edgeRect.top) < tolerance
-  }
-
-  // Get a reliable bounding rect for the first or last character in a DOM
-  // element by creating a non-collapsed range around it.
-  #getEdgeCharRect(element, edge) {
-    const walker = document.createTreeWalker(element, 4 /* NodeFilter.SHOW_TEXT */);
-    let textNode;
-
-    if (edge === "first") {
-      textNode = walker.nextNode();
-    } else {
-      while (walker.nextNode()) textNode = walker.currentNode;
-    }
-
-    if (!textNode || textNode.length === 0) return null
-
-    const range = document.createRange();
-    if (edge === "first") {
-      range.setStart(textNode, 0);
-      range.setEnd(textNode, 1);
-    } else {
-      range.setStart(textNode, textNode.length - 1);
-      range.setEnd(textNode, textNode.length);
-    }
-
-    return range.getBoundingClientRect()
-  }
-}
-
-class EditorConfiguration {
-  #editorElement
-  #config
-
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-    this.#config = new Configuration(
-      Lexxy.presets.get("default"),
-      Lexxy.presets.get(editorElement.preset),
-      this.#overrides
-    );
-  }
-
-  get(path) {
-    return this.#config.get(path)
-  }
-
-  get #overrides() {
-    const overrides = {};
-    for (const option of this.#defaultOptions) {
-      const attribute = dasherize(option);
-      if (this.#editorElement.hasAttribute(attribute)) {
-        overrides[option] = this.#parseAttribute(attribute);
-      }
-    }
-    return overrides
-  }
-
-  get #defaultOptions() {
-    return Object.keys(Lexxy.presets.get("default"))
-  }
-
-  #parseAttribute(attribute) {
-    const value = this.#editorElement.getAttribute(attribute);
-    try {
-      return JSON.parse(value)
-    } catch {
-      return value
-    }
-  }
-}
-
-async function loadFileIntoImage(file, image) {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-
-    image.addEventListener("load", () => {
-      resolve(image);
-    });
-
-    reader.onload = (event) => {
-      image.src = event.target.result || null;
-    };
-
-    reader.readAsDataURL(file);
-  })
-}
-
-class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
-  static getType() {
-    return "action_text_attachment_upload"
-  }
-
-  static clone(node) {
-    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
-  }
-
-  static importJSON(serializedNode) {
-    return new ActionTextAttachmentUploadNode({ ...serializedNode })
-  }
-
-  // Should never run since this is a transient node. Defined to remove console warning.
-  static importDOM() {
-    return null
-  }
-
-  constructor(node, key) {
-    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError, fileName, contentType } = node;
-    super({ ...node, contentType: file?.type ?? contentType }, key);
-    this.file = file ?? null;
-    this.fileName = file?.name ?? fileName;
-    this.uploadUrl = uploadUrl;
-    this.blobUrlTemplate = blobUrlTemplate;
-    this.progress = progress ?? null;
-    this.width = width;
-    this.height = height;
-    this.uploadError = uploadError;
-  }
-
-  createDOM() {
-    if (this.uploadError) return this.createDOMForError()
-
-    // This side-effect is trigged on DOM load to fire only once and avoid multiple
-    // uploads through cloning. The upload is guarded from restarting in case the
-    // node is reloaded from saved state such as from history.
-    this.#startUploadIfNeeded();
-
-    // Bridge-managed uploads (uploadUrl is null) don't have file data to show
-    // an image preview, so always show the file icon during upload.
-    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null;
-    const figure = this.createAttachmentFigure(canPreviewFile);
-
-    if (canPreviewFile) {
-      const img = figure.appendChild(this.#createDOMForImage());
-
-      // load file locally to set dimensions and prevent vertical shifting
-      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
-    } else {
-      figure.appendChild(this.#createDOMForFile());
+      const computed = window.getComputedStyle(parentElement);
+      return parseFloat(computed.fontSize)
     }
 
-    figure.appendChild(this.#createCaption());
-    figure.appendChild(this.#createProgressBar());
-
-    return figure
+    return 0
   }
 
-  updateDOM(prevNode, dom) {
-    if (this.uploadError !== prevNode.uploadError) return true
+  #getElementFromNode(node) {
+    return node?.nodeType === Node.TEXT_NODE ? node.parentElement : node
+  }
 
-    if (prevNode.progress !== this.progress) {
-      const progress = dom.querySelector("progress");
-      progress.value = this.progress ?? 0;
+  #getCollapsedSelectionData() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+      return { anchorNode: null, offset: 0 }
     }
 
-    return false
+    const { anchor } = selection;
+    return { anchorNode: anchor.getNode(), offset: anchor.offset }
   }
 
-  exportDOM() {
-    return { element: null }
+  #getNodeAfterTextNode(anchorNode, offset) {
+    if (offset === anchorNode.getTextContentSize()) {
+      return this.#getNextNodeFromTextEnd(anchorNode)
+    }
+    return null
   }
 
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "action_text_attachment_upload",
-      version: 1,
-      fileName: this.fileName,
-      contentType: this.contentType,
-      uploadUrl: this.uploadUrl,
-      blobUrlTemplate: this.blobUrlTemplate,
-      progress: this.progress,
-      width: this.width,
-      height: this.height,
-      uploadError: this.uploadError
+  #getNextNodeFromTextEnd(anchorNode) {
+    const nextSibling = anchorNode.getNextSibling();
+    if ($isDecoratorNode(nextSibling)) {
+      return nextSibling
+    }
+    if (nextSibling != null) {
+      return null
     }
+    const parent = anchorNode.getParent();
+    return parent ? parent.getNextSibling() : null
   }
 
-  get #uploadStarted() {
-    return this.progress !== null
+  #getNodeAfterElementNode(anchorNode, offset) {
+    if (offset < anchorNode.getChildrenSize()) {
+      return anchorNode.getChildAtIndex(offset)
+    }
+    return this.#findNextSiblingUp(anchorNode)
   }
 
-  #createDOMForImage() {
-    return createElement("img")
+  #getNodeBeforeTextNode(anchorNode, offset) {
+    if (offset === 0) {
+      return this.#getPreviousNodeFromTextStart(anchorNode)
+    }
+    return null
   }
 
-  #createDOMForFile() {
-    const extension = this.#getFileExtension();
-    const span = createElement("span", { className: "attachment__icon", textContent: extension });
-    return span
+  #getPreviousNodeFromTextStart(anchorNode) {
+    const previousSibling = anchorNode.getPreviousSibling();
+    if ($isDecoratorNode(previousSibling)) {
+      return previousSibling
+    }
+    if (previousSibling != null) {
+      return null
+    }
+    const parent = anchorNode.getParent();
+    return parent ? parent.getPreviousSibling() : null
   }
 
-  #getFileExtension() {
-    return (this.fileName || "").split(".").pop().toLowerCase()
+  #getNodeBeforeElementNode(anchorNode, offset) {
+    if (offset > 0) {
+      return anchorNode.getChildAtIndex(offset - 1)
+    }
+    return this.#findPreviousSiblingUp(anchorNode)
   }
 
-  #createCaption() {
-    const figcaption = createElement("figcaption", { className: "attachment__caption" });
-
-    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.fileName || "" });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file?.size) });
-    figcaption.appendChild(nameSpan);
-    figcaption.appendChild(sizeSpan);
-
-    return figcaption
+  #findNextSiblingUp(node) {
+    let current = node;
+    while (current && current.getNextSibling() == null) {
+      current = current.getParent();
+    }
+    return current ? current.getNextSibling() : null
   }
 
-  #createProgressBar() {
-    return createElement("progress", { value: this.progress ?? 0, max: 100 })
+  #findPreviousSiblingUp(node) {
+    let current = node;
+    while (current && current.getPreviousSibling() == null) {
+      current = current.getParent();
+    }
+    return current ? current.getPreviousSibling() : null
   }
 
-  #setDimensionsFromImage({ width, height }) {
-    if (this.#hasDimensions) return
-
-    this.patchAndRewriteHistory({ width, height });
+  #isCursorOnFirstVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "first")
   }
 
-  get #hasDimensions() {
-    return Boolean(this.width && this.height)
+  #isCursorOnLastVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "last")
   }
 
-  async #startUploadIfNeeded() {
-    if (this.#uploadStarted) return
-    if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
+  // Check whether the cursor sits on the first or last visual line of its
+  // top-level block by comparing the Y position of the cursor with the Y
+  // position of the block's start (first line) or end (last line).
+  #isCursorOnEdgeLineOfBlock(anchorNode, edge) {
+    const topLevelElement = anchorNode.getTopLevelElement();
+    if (!topLevelElement) return false
 
-    this.#setUploadStarted();
+    const domElement = this.editor.getElementByKey(topLevelElement.getKey());
+    if (!domElement) return false
 
-    const { DirectUpload } = await import('@rails/activestorage');
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection?.rangeCount) return false
 
-    const upload = new DirectUpload(this.file, this.uploadUrl, this);
-    upload.delegate = this.#createUploadDelegate();
+    const cursorRect = this.#getReliableRectFromRange(nativeSelection.getRangeAt(0));
+    if (!cursorRect || this.#isRectUnreliable(cursorRect)) return false
 
-    this.#dispatchEvent("lexxy:upload-start", { file: this.file });
+    const edgeRect = this.#getEdgeCharRect(domElement, edge);
+    if (!edgeRect || this.#isRectUnreliable(edgeRect)) return false
 
-    upload.create((error, blob) => {
-      if (error) {
-        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error });
-        this.#handleUploadError(error);
-      } else {
-        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error: null });
-        this.editor.update(() => {
-          this.$showUploadedAttachment(blob);
-        });
-      }
-    });
+    const tolerance = edgeRect.height > 0 ? edgeRect.height * 0.5 : 5;
+    return Math.abs(cursorRect.top - edgeRect.top) < tolerance
   }
 
-  #createUploadDelegate() {
-    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
-
-    return {
-      directUploadWillCreateBlobWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
-      },
-      directUploadWillStoreFileWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
+  // Get a reliable bounding rect for the first or last character in a DOM
+  // element by creating a non-collapsed range around it.
+  #getEdgeCharRect(element, edge) {
+    const walker = document.createTreeWalker(element, 4 /* NodeFilter.SHOW_TEXT */);
+    let textNode;
 
-        const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
-        request.upload.addEventListener("progress", uploadProgressHandler);
-      }
+    if (edge === "first") {
+      textNode = walker.nextNode();
+    } else {
+      while (walker.nextNode()) textNode = walker.currentNode;
     }
-  }
 
-  #setUploadStarted() {
-    this.#setProgress(1);
-  }
+    if (!textNode || textNode.length === 0) return null
 
-  #handleUploadProgress(event, request) {
-    const progress = Math.round(event.loaded / event.total * 100);
-    try {
-      this.#setProgress(progress);
-      this.#dispatchEvent("lexxy:upload-progress", { file: this.file, progress });
-    } catch {
-      request.abort();
+    const range = document.createRange();
+    if (edge === "first") {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, 1);
+    } else {
+      range.setStart(textNode, textNode.length - 1);
+      range.setEnd(textNode, textNode.length);
     }
-  }
-
-  #setProgress(progress) {
-    this.patchAndRewriteHistory({ progress });
-  }
-
-  #handleUploadError(error) {
-    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
-
-    this.patchAndRewriteHistory({ uploadError: true });
-  }
-
-  $showUploadedAttachment(blob) {
-    const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
 
-    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
-    this.replaceAndRewriteHistory(replacementNode);
-
-    return replacementNode.getKey()
-  }
-
-  #toActionTextAttachmentNodeWith(blob, previewSrc) {
-    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
-    return conversion.toAttachmentNode()
-  }
-
-  #dispatchEvent(name, detail) {
-    const figure = this.editor.getElementByKey(this.getKey());
-    if (figure) dispatch(figure, name, detail);
+    return range.getBoundingClientRect()
   }
 }
 
-class AttachmentNodeConversion {
-  constructor(uploadNode, blob, previewSrc) {
-    this.uploadNode = uploadNode;
-    this.blob = blob;
-    this.previewSrc = previewSrc;
-  }
-
-  toAttachmentNode() {
-    return new ActionTextAttachmentNode({
-      ...this.uploadNode,
-      ...this.#propertiesFromBlob,
-      src: this.#src,
-      previewSrc: this.previewSrc,
-      pendingPreview: this.blob.previewable && !this.uploadNode.isPreviewableImage
-    })
-  }
+class EditorConfiguration {
+  #editorElement
+  #config
 
-  get #propertiesFromBlob() {
-    const { blob } = this;
-    return {
-      sgid: blob.attachable_sgid,
-      altText: blob.filename,
-      contentType: blob.content_type,
-      fileName: blob.filename,
-      fileSize: blob.byte_size,
-      previewable: blob.previewable,
-    }
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+    this.#config = new Configuration(
+      Lexxy.presets.get("default"),
+      Lexxy.presets.get(editorElement.preset),
+      this.#overrides
+    );
   }
 
-  get #src() {
-    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  get(path) {
+    return this.#config.get(path)
   }
 
-  get #blobSrc() {
-    return this.uploadNode.blobUrlTemplate
-      .replace(":signed_id", this.blob.signed_id)
-      .replace(":filename", encodeURIComponent(this.blob.filename))
+  get #overrides() {
+    const overrides = {};
+    for (const option of this.#defaultOptions) {
+      const attribute = dasherize(option);
+      if (this.#editorElement.hasAttribute(attribute)) {
+        overrides[option] = this.#parseAttribute(attribute);
+      }
+    }
+    return overrides
   }
-}
 
-function $createActionTextAttachmentUploadNode(...args) {
-  return new ActionTextAttachmentUploadNode(...args)
+  get #defaultOptions() {
+    return Object.keys(Lexxy.presets.get("default"))
+  }
+
+  #parseAttribute(attribute) {
+    const value = this.#editorElement.getAttribute(attribute);
+    try {
+      return JSON.parse(value)
+    } catch {
+      return value
+    }
+  }
 }
 
 class ImageGalleryNode extends ElementNode {
@@ -4670,119 +4889,385 @@ class Uploader {
     this.selection = editorElement.selection;
   }
 
-  get files() {
-    return Array.from(this.#files)
+  get files() {
+    return Array.from(this.#files)
+  }
+
+  $uploadFiles() {
+    this.$createUploadNodes();
+    this.$insertUploadNodes();
+  }
+
+  $createUploadNodes() {
+    this.nodes = this.files.map(file => this.contents.$createUploadNode(file));
+  }
+
+  $insertUploadNodes() {
+    this.contents.insertAtCursor(...this.nodes);
+  }
+}
+
+class GalleryUploader extends Uploader {
+  #gallery
+
+  static handle(editorElement, files) {
+    return this.isMultipleImageUpload(files) || this.gallerySelection(editorElement.selection)
+  }
+
+  static isMultipleImageUpload(files) {
+    let imageFileCount = 0;
+    for (const file of files) {
+      if (isPreviewableImage(file.type)) imageFileCount++;
+      if (imageFileCount > 1) return true
+    }
+    return false
+  }
+
+  static gallerySelection(selection) {
+    return selection.isOnPreviewableImage || this.selectionIsAfterGalleryEdge(selection)
+  }
+
+  static selectionIsAfterGalleryEdge(selection) {
+    return selection.isAtNodeStart && ImageGalleryNode.canCollapseWith(selection.nodeBeforeCursor)
+  }
+
+  $insertUploadNodes() {
+    this.#findOrCreateGallery();
+    this.#insertImagesInGallery();
+    this.#insertNonImagesAfterGallery();
+  }
+
+  #findOrCreateGallery() {
+    if (this.selection.isOnPreviewableImage) {
+      this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
+    } else if (this.#selectionIsAfterGalleryEdge) {
+      this.#gallery = $findOrCreateGalleryForImage(this.selection.nodeBeforeCursor);
+    } else {
+      this.#gallery = $createImageGalleryNode();
+      this.contents.insertAtCursor(this.#gallery);
+    }
+  }
+
+  get #selectionIsAfterGalleryEdge() {
+    return this.constructor.selectionIsAfterGalleryEdge(this.selection)
+  }
+
+  get #selectedNode() {
+    const { node } = this.selection.selectedNodeWithOffset();
+    return node
+  }
+
+  get #galleryInsertPosition() {
+    if (this.#selectionIsAfterGalleryEdge) return this.#gallery.getChildrenSize()
+
+    const anchor = $getSelection()?.anchor;
+    const galleryHasElementSelection = anchor?.getNode().is(this.#gallery);
+    if (galleryHasElementSelection) return anchor.offset
+
+    const selectedNode = this.#selectedNode;
+    const childIndex = this.#gallery.isParentOf(selectedNode) && selectedNode.getIndexWithinParent();
+    return childIndex !== false ? (childIndex + 1) : 0
+  }
+
+  get #imageNodes() {
+    return this.nodes.filter(node => ImageGalleryNode.isValidChild(node))
+  }
+
+  get #nonImageNodes() {
+    return this.nodes.filter(node => !ImageGalleryNode.isValidChild(node))
+  }
+
+  #insertImagesInGallery() {
+    this.#gallery.splice(this.#galleryInsertPosition, 0, this.#imageNodes);
+  }
+
+  #insertNonImagesAfterGallery() {
+    let beforeNode = this.#gallery;
+
+    for (const node of this.#nonImageNodes) {
+      beforeNode.insertAfter(node);
+      beforeNode = node;
+    }
+  }
+}
+
+async function loadFileIntoImage(file, image) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+
+    image.addEventListener("load", () => {
+      resolve(image);
+    });
+
+    reader.onload = (event) => {
+      image.src = event.target.result || null;
+    };
+
+    reader.readAsDataURL(file);
+  })
+}
+
+class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
+  static getType() {
+    return "action_text_attachment_upload"
+  }
+
+  static clone(node) {
+    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentUploadNode({ ...serializedNode })
+  }
+
+  // Should never run since this is a transient node. Defined to remove console warning.
+  static importDOM() {
+    return null
+  }
+
+  constructor(node, key) {
+    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError, fileName, contentType } = node;
+    super({ ...node, contentType: file?.type ?? contentType }, key);
+    this.file = file ?? null;
+    this.fileName = file?.name ?? fileName;
+    this.uploadUrl = uploadUrl;
+    this.blobUrlTemplate = blobUrlTemplate;
+    this.progress = progress ?? null;
+    this.width = width;
+    this.height = height;
+    this.uploadError = uploadError;
+  }
+
+  createDOM() {
+    if (this.uploadError) return this.createDOMForError()
+
+    // This side-effect is trigged on DOM load to fire only once and avoid multiple
+    // uploads through cloning. The upload is guarded from restarting in case the
+    // node is reloaded from saved state such as from history.
+    this.#startUploadIfNeeded();
+
+    // Bridge-managed uploads (uploadUrl is null) don't have file data to show
+    // an image preview, so always show the file icon during upload.
+    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null;
+    const figure = this.createAttachmentFigure(canPreviewFile);
+
+    if (canPreviewFile) {
+      const img = figure.appendChild(this.#createDOMForImage());
+
+      // load file locally to set dimensions and prevent vertical shifting
+      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
+    } else {
+      figure.appendChild(this.#createDOMForFile());
+    }
+
+    figure.appendChild(this.#createCaption());
+    figure.appendChild(this.#createProgressBar());
+
+    return figure
+  }
+
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
+
+    if (prevNode.progress !== this.progress) {
+      const progress = dom.querySelector("progress");
+      progress.value = this.progress ?? 0;
+    }
+
+    return false
+  }
+
+  exportDOM() {
+    return { element: null }
+  }
+
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "action_text_attachment_upload",
+      version: 1,
+      fileName: this.fileName,
+      contentType: this.contentType,
+      uploadUrl: this.uploadUrl,
+      blobUrlTemplate: this.blobUrlTemplate,
+      progress: this.progress,
+      width: this.width,
+      height: this.height,
+      uploadError: this.uploadError
+    }
+  }
+
+  get #uploadStarted() {
+    return this.progress !== null
+  }
+
+  #createDOMForImage() {
+    return createElement("img")
+  }
+
+  #createDOMForFile() {
+    const extension = this.#getFileExtension();
+    const span = createElement("span", { className: "attachment__icon", textContent: extension });
+    return span
+  }
+
+  #getFileExtension() {
+    return (this.fileName || "").split(".").pop().toLowerCase()
   }
 
-  $uploadFiles() {
-    this.$createUploadNodes();
-    this.$insertUploadNodes();
-  }
+  #createCaption() {
+    const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
-  $createUploadNodes() {
-    this.nodes = this.files.map(file =>
-      $createActionTextAttachmentUploadNode({
-        ...this.#nodeUrlProperties,
-        file: file,
-        contentType: file.type
-      })
-    );
-  }
+    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.fileName || "" });
+    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file?.size) });
+    figcaption.appendChild(nameSpan);
+    figcaption.appendChild(sizeSpan);
 
-  $insertUploadNodes() {
-    this.contents.insertAtCursor(...this.nodes);
+    return figcaption
   }
 
-  get #nodeUrlProperties() {
-    return {
-      uploadUrl: this.editorElement.directUploadUrl,
-      blobUrlTemplate: this.editorElement.blobUrlTemplate
-    }
+  #createProgressBar() {
+    return createElement("progress", { value: this.progress ?? 0, max: 100 })
   }
-}
 
-class GalleryUploader extends Uploader {
-  #gallery
+  #setDimensionsFromImage({ width, height }) {
+    if (this.#hasDimensions) return
 
-  static handle(editorElement, files) {
-    return this.isMultipleImageUpload(files) || this.gallerySelection(editorElement.selection)
+    this.patchAndRewriteHistory({ width, height });
   }
 
-  static isMultipleImageUpload(files) {
-    let imageFileCount = 0;
-    for (const file of files) {
-      if (isPreviewableImage(file.type)) imageFileCount++;
-      if (imageFileCount > 1) return true
-    }
-    return false
+  get #hasDimensions() {
+    return Boolean(this.width && this.height)
   }
 
-  static gallerySelection(selection) {
-    return selection.isOnPreviewableImage || this.selectionIsAfterGalleryEdge(selection)
+  async #startUploadIfNeeded() {
+    if (this.#uploadStarted) return
+    if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
+
+    this.#setUploadStarted();
+
+    const { DirectUpload } = await import('@rails/activestorage');
+
+    const upload = new DirectUpload(this.file, this.uploadUrl, this);
+    upload.delegate = this.#createUploadDelegate();
+
+    this.#dispatchEvent("lexxy:upload-start", { file: this.file });
+
+    upload.create((error, blob) => {
+      if (error) {
+        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error });
+        this.#handleUploadError(error);
+      } else {
+        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error: null });
+        this.editor.update(() => {
+          this.$showUploadedAttachment(blob);
+        });
+      }
+    });
   }
 
-  static selectionIsAfterGalleryEdge(selection) {
-    return selection.isAtNodeStart && ImageGalleryNode.canCollapseWith(selection.nodeBeforeCursor)
+  #createUploadDelegate() {
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
+
+    return {
+      directUploadWillCreateBlobWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+      },
+      directUploadWillStoreFileWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+
+        const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
+        request.upload.addEventListener("progress", uploadProgressHandler);
+      }
+    }
   }
 
-  $insertUploadNodes() {
-    this.#findOrCreateGallery();
-    this.#insertImagesInGallery();
-    this.#insertNonImagesAfterGallery();
+  #setUploadStarted() {
+    this.#setProgress(1);
   }
 
-  #findOrCreateGallery() {
-    if (this.selection.isOnPreviewableImage) {
-      this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
-    } else if (this.#selectionIsAfterGalleryEdge) {
-      this.#gallery = $findOrCreateGalleryForImage(this.selection.nodeBeforeCursor);
-    } else {
-      this.#gallery = $createImageGalleryNode();
-      this.contents.insertAtCursor(this.#gallery);
+  #handleUploadProgress(event, request) {
+    const progress = Math.round(event.loaded / event.total * 100);
+    try {
+      this.#setProgress(progress);
+      this.#dispatchEvent("lexxy:upload-progress", { file: this.file, progress });
+    } catch {
+      request.abort();
     }
   }
 
-  get #selectionIsAfterGalleryEdge() {
-    return this.constructor.selectionIsAfterGalleryEdge(this.selection)
+  #setProgress(progress) {
+    this.patchAndRewriteHistory({ progress });
   }
 
-  get #selectedNode() {
-    const { node } = this.selection.selectedNodeWithOffset();
-    return node
+  #handleUploadError(error) {
+    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
+
+    this.patchAndRewriteHistory({ uploadError: true });
   }
 
-  get #galleryInsertPosition() {
-    if (this.#selectionIsAfterGalleryEdge) return this.#gallery.getChildrenSize()
+  $showUploadedAttachment(blob) {
+    const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
 
-    const anchor = $getSelection()?.anchor;
-    const galleryHasElementSelection = anchor?.getNode().is(this.#gallery);
-    if (galleryHasElementSelection) return anchor.offset
+    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
+    this.replaceAndRewriteHistory(replacementNode);
 
-    const selectedNode = this.#selectedNode;
-    const childIndex = this.#gallery.isParentOf(selectedNode) && selectedNode.getIndexWithinParent();
-    return childIndex !== false ? (childIndex + 1) : 0
+    return replacementNode.getKey()
   }
 
-  get #imageNodes() {
-    return this.nodes.filter(node => ImageGalleryNode.isValidChild(node))
+  #toActionTextAttachmentNodeWith(blob, previewSrc) {
+    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
+    return conversion.toAttachmentNode()
   }
 
-  get #nonImageNodes() {
-    return this.nodes.filter(node => !ImageGalleryNode.isValidChild(node))
+  #dispatchEvent(name, detail) {
+    const figure = this.editor.getElementByKey(this.getKey());
+    if (figure) dispatch(figure, name, detail);
   }
+}
 
-  #insertImagesInGallery() {
-    this.#gallery.splice(this.#galleryInsertPosition, 0, this.#imageNodes);
+class AttachmentNodeConversion {
+  constructor(uploadNode, blob, previewSrc) {
+    this.uploadNode = uploadNode;
+    this.blob = blob;
+    this.previewSrc = previewSrc;
   }
 
-  #insertNonImagesAfterGallery() {
-    let beforeNode = this.#gallery;
+  toAttachmentNode() {
+    return new ActionTextAttachmentNode({
+      ...this.uploadNode,
+      ...this.#propertiesFromBlob,
+      src: this.#src,
+      previewSrc: this.previewSrc,
+      pendingPreview: this.blob.previewable && !this.uploadNode.isPreviewableImage
+    })
+  }
 
-    for (const node of this.#nonImageNodes) {
-      beforeNode.insertAfter(node);
-      beforeNode = node;
+  get #propertiesFromBlob() {
+    const { blob } = this;
+    return {
+      sgid: blob.attachable_sgid,
+      altText: blob.filename,
+      contentType: blob.content_type,
+      fileName: blob.filename,
+      fileSize: blob.byte_size,
+      previewable: blob.previewable,
     }
   }
+
+  get #src() {
+    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  }
+
+  get #blobSrc() {
+    return this.uploadNode.blobUrlTemplate
+      .replace(":signed_id", this.blob.signed_id)
+      .replace(":filename", encodeURIComponent(this.blob.filename))
+  }
+}
+
+function $createActionTextAttachmentUploadNode(...args) {
+  return new ActionTextAttachmentUploadNode(...args)
 }
 
 class NodeInserter {
@@ -4891,7 +5376,7 @@ class Contents {
     this.editor.update(() => {
       if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
 
-      const nodes = $generateFilteredNodesFromDOM(this.editorElement, doc);
+      const nodes = this.editorElement.$generateNodesFromDOM(doc);
       if (!this.#insertUploadNodes(nodes)) {
         this.insertAtCursor(...nodes);
       }
@@ -4914,6 +5399,7 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
     $setBlocksType(selection, () => $createParagraphNode());
   }
 
@@ -4921,6 +5407,7 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
     $setBlocksType(selection, () => $createHeadingNode(tag));
   }
 
@@ -4962,10 +5449,14 @@ class Contents {
     if (allCode) {
       blockElements.forEach(node => this.#unwrapCodeBlock(node));
     } else {
+      $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+      const elements = this.#blockLevelElementsInSelection(selection);
+      if (elements.length === 0) return
+
       const codeNode = $createCodeNode("plain");
-      blockElements.at(-1).insertAfter(codeNode);
+      elements.at(-1).insertAfter(codeNode);
       codeNode.selectEnd();
-      this.insertAtCursor(...blockElements);
+      this.insertAtCursor(...elements);
     }
   }
 
@@ -4984,8 +5475,7 @@ class Contents {
     } else {
       topLevelElements.filter($isQuoteNode).forEach(node => this.#unwrap(node));
 
-      $splitParagraphsAtLineBreakBoundaries(selection);
-
+       $expandSelectionToLineBreaksAndSplitAtEdges(selection);
       const elements = this.#topLevelElementsInSelection(selection);
       if (elements.length === 0) return
 
@@ -5100,7 +5590,7 @@ class Contents {
       console.warn("This editor does not supports attachments (it's configured with [attachments=false])");
       return
     }
-    const validFiles = Array.from(files).filter(this.#shouldUploadFile.bind(this));
+    const validFiles = Array.from(files).filter(file => this.editorElement.acceptsFile(file));
 
     this.editor.update(() => {
       const uploader = Uploader.for(this.editorElement, validFiles);
@@ -5114,6 +5604,15 @@ class Contents {
     });
   }
 
+  $createUploadNode(file) {
+    return $createActionTextAttachmentUploadNode({
+      file,
+      uploadUrl: this.editorElement.directUploadUrl,
+      blobUrlTemplate: this.editorElement.blobUrlTemplate,
+      contentType: file.type,
+    })
+  }
+
   insertPendingAttachment(file) {
     if (!this.editorElement.supportsAttachments) return null
 
@@ -5244,45 +5743,8 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
-    this.#splitParagraphsAtLineBreaks(selection);
-  }
-
-  #splitParagraphsAtLineBreaks(selection) {
-    const anchorTopLevel = selection.anchor.getNode().getTopLevelElement();
-    const focusTopLevel = selection.focus.getNode().getTopLevelElement();
-    const topLevelElements = this.#topLevelElementsInSelection(selection);
-
-    for (const element of topLevelElements) {
-      if (!$isParagraphNode(element)) continue
-
-      const children = element.getChildren();
-      if (!children.some($isLineBreakNode)) continue
-
-      // Check whether this paragraph needs splitting: skip only if neither
-      // selection endpoint is inside it (meaning it's a middle paragraph
-      // fully between anchor and focus with no partial lines to split off).
-      // Compare top-level elements so endpoints inside nested inline nodes
-      // (e.g. text inside a LinkNode) are still recognized.
-      if (element !== anchorTopLevel && element !== focusTopLevel) continue
-
-      const groups = [ [] ];
-      for (const child of children) {
-        if ($isLineBreakNode(child)) {
-          groups.push([]);
-          child.remove();
-        } else {
-          groups[groups.length - 1].push(child);
-        }
-      }
-
-      for (const group of groups) {
-        if (group.length === 0) continue
-        const paragraph = $createParagraphNode();
-        group.forEach(child => paragraph.append(child));
-        element.insertBefore(paragraph);
-      }
-      if (groups.some(group => group.length > 0)) element.remove();
-    }
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+    $splitSelectedParagraphsAtInnerLineBreaks(selection);
   }
 
   #blockLevelElementsInSelection(selection) {
@@ -5452,14 +5914,10 @@ class Contents {
   }
 
   #createHtmlNodeWith(html) {
-    const htmlNodes = $generateFilteredNodesFromDOM(this.editorElement, parseHtml(html));
+    const htmlNodes = this.editorElement.$generateNodesFromDOM(parseHtml(html));
     return htmlNodes[0] || $createParagraphNode()
   }
 
-  #shouldUploadFile(file) {
-    return dispatch(this.editorElement, "lexxy:file-accept", { file }, true)
-  }
-
   // When the selection anchor is on a shadow root (e.g. a table cell), Lexical's
   // insertNodes can't find a block parent and fails silently. Normalize the
   // selection to point inside the shadow root's content instead.
@@ -5551,8 +6009,12 @@ class Clipboard {
 
   #isOnlyURLPasted(clipboardData) {
     // Safari URLs are copied as a text/plain + text/uri-list object
+    // App ShareSheet URLs are copied as solo text/uri-list object
     const types = Array.from(clipboardData.types);
-    return types.length === 2 && types.includes("text/uri-list") && types.includes("text/plain")
+    return types.length
+      && types.length <= 2
+      && types.includes("text/uri-list")
+      && (types.length < 2 || types.includes("text/plain"))
   }
 
   #isPastingIntoCodeBlock() {
@@ -5589,9 +6051,9 @@ class Clipboard {
   #pastePlainText(clipboardData) {
     const item = clipboardData.items[0];
     item.getAsString((text) => {
-      if (isUrl(text) && this.contents.hasSelectedText()) {
+      if (isAutolinkableURL(text) && this.contents.hasSelectedText()) {
         this.contents.createLinkWithSelectedText(text);
-      } else if (isUrl(text)) {
+      } else if (isAutolinkableURL(text)) {
         const nodeKey = this.contents.createLink(text);
         this.#dispatchLinkInsertEvent(nodeKey, { url: text });
       } else if (this.editorElement.supportsMarkdown) {
@@ -5751,6 +6213,7 @@ class Extensions {
 
     this.#clearPreviousExtensionToolbarButtons(toolbar);
     this.#addExtensionToolbarButtons(toolbar);
+    toolbar.requestOverflowRefresh();
   }
 
   dispose() {
@@ -6609,7 +7072,11 @@ class AttachmentDragAndDrop {
 const ATTACHMENT_ATTRIBUTES = [ "alt", "caption", "content", "content-type", "data-direct-upload-id",
   "data-sgid", "filename", "filesize", "height", "presentation", "previewable", "sgid", "url", "width" ];
 
+const UPLOADS_BUSY_MESSAGE = "Please wait for all files to upload";
+
 class AttachmentsExtension extends LexxyExtension {
+  #uploadsCount = 0
+
   get enabled() {
     return this.editorElement.supportsAttachments
   }
@@ -6626,17 +7093,41 @@ class AttachmentsExtension extends LexxyExtension {
         ActionTextAttachmentUploadNode,
         ImageGalleryNode
       ],
-      register(editor) {
+      register: (editor) => {
         const dragAndDrop = new AttachmentDragAndDrop(editor);
 
         return mergeRegister(
           editor.registerNodeTransform(ActionTextAttachmentNode, $extractAttachmentFromParagraph),
           editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL),
+          editor.registerMutationListener(ActionTextAttachmentUploadNode, this.#handleUploadMutations.bind(this)),
           () => dragAndDrop.destroy()
         )
       }
     })
   }
+
+  #handleUploadMutations(mutations) {
+    const previousUploadsCount = this.#uploadsCount;
+    for (const [ , mutation ] of mutations) {
+      if (mutation === "created") {
+        this.#uploadsCount++;
+      } else if (mutation === "destroyed") {
+        this.#uploadsCount--;
+      }
+    }
+
+    if (this.#uploadsCount !== previousUploadsCount) {
+      this.#setUploadsValidity();
+    }
+  }
+
+  #setUploadsValidity() {
+    if (this.#uploadsCount) {
+      this.setEditorValidity({ customError: true }, UPLOADS_BUSY_MESSAGE);
+    } else {
+      this.setEditorValidity({});
+    }
+  }
 }
 
 // Decorator nodes can be wrapped in a Paragraph Node by Lexical when contained in a <div>
@@ -7004,6 +7495,38 @@ function $openLink(target) {
   }
 }
 
+class PreventLexicalTripleClickExtension extends LexxyExtension {
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/prevent-lexical-triple-click",
+      register: (editor) => editor.registerRootListener((rootElement) => {
+        if (rootElement) {
+          return registerEventListener(
+            rootElement,
+            "click",
+            this.#handleTripleClick.bind(this),
+            { capture: true }
+          )
+        }
+      })
+    })
+  }
+
+  // Stop propagation of the triple-click to prevent Lexical's handler from running.
+  //
+  // Lexical's onClick handler implements a triple-click handler that is trivial/anemic/naïve. The
+  // intention of the change, made in facebook/lexical#4512, seems to be to deal with browsers'
+  // "overselection" behavior, where a triple-click selection might end at offset 0 of the following
+  // block, which can cause issues when transforming the selection. But the implementation breaks
+  // many common real-world use cases and Lexxy does not demonstrate the behavior it's intended to
+  // work around (in headers or tables).
+  #handleTripleClick(event) {
+    if (event.detail === 3) {
+      event.stopPropagation();
+    }
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -7012,12 +7535,16 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
-  #validationTextArea = document.createElement("textarea")
-  #editorInitializedRafId = null
+  #initializeEventDispatched = false
+  #editorInitializedDispatched = false
+  #valueLoaded = false
   #listeners = new ListenerBin()
   #disposables = []
   #historyState = { undo: false, redo: false }
 
+  #validity = new Map()
+  #validationTextArea = document.createElement("textarea")
+
   constructor() {
     super();
     this.internals = this.attachInternals();
@@ -7050,29 +7577,40 @@ class LexicalEditorElement extends HTMLElement {
 
     this.#initialize();
 
-    this.#scheduleEditorInitializedDispatch();
     this.toggleAttribute("connected", true);
 
-    this.#handleAutofocus();
-
-    this.valueBeforeDisconnect = null;
+    requestAnimationFrame(() => {
+      this.#mountRoot();
+      this.#handleAutofocus();
+      this.#dispatchInitialize();
+    });
   }
 
   disconnectedCallback() {
-    this.#cancelEditorInitializedDispatch();
-    this.valueBeforeDisconnect = this.value;
+    this.#initializeEventDispatched = false;
+    this.#editorInitializedDispatched = false;
+    if (this.#valueLoaded) {
+      this.valueBeforeDisconnect = this.value;
+    } else {
+      this.valueBeforeDisconnect = null;
+    }
+    this.#valueLoaded = false;
     this.#reset(); // Prevent hangs with Safari when morphing
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+    if (name === "connected") this.connectedChangedCallback(oldValue, newValue);
+    if (name === "required") this.requiredChangedCallback(oldValue, newValue);
+  }
+
+  connectedChangedCallback(oldValue, newValue) {
+    if (this.isConnected && oldValue != null && oldValue !== newValue) {
       requestAnimationFrame(() => this.#reconnect());
     }
+  }
 
-    if (name === "required" && this.isConnected) {
-      this.#validationTextArea.required = this.hasAttribute("required");
-      this.#setValidity();
-    }
+  requiredChangedCallback() {
+    if (this.isConnected) this.#requestValidityRefresh();
   }
 
   formResetCallback() {
@@ -7098,6 +7636,27 @@ class LexicalEditorElement extends HTMLElement {
     return this.getAttribute("name")
   }
 
+  get required() {
+    return this.hasAttribute("required")
+  }
+
+  get validity() {
+    return this.internals.validity
+  }
+
+  checkValidity() {
+    return this.internals.checkValidity()
+  }
+
+  reportValidity() {
+    return this.internals.reportValidity()
+  }
+
+  setElementValidity(key, flags, message) {
+    this.#validity.set(key, { flags, message });
+    this.#requestValidityRefresh();
+  }
+
   get toolbarElement() {
     if (!this.#hasToolbar) return null
 
@@ -7114,7 +7673,8 @@ class LexicalEditorElement extends HTMLElement {
       RewritableHistoryExtension,
       AttachmentsExtension,
       FormatEscapeExtension,
-      LinkOpenerExtension
+      LinkOpenerExtension,
+      PreventLexicalTripleClickExtension
     ]
   }
 
@@ -7145,6 +7705,16 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
+  acceptsFile(file) {
+    return dispatch(this, "lexxy:file-accept", { file }, true)
+  }
+
+  $generateNodesFromDOM(doc) {
+    let nodes = $generateNodesFromDOM(this.editor, doc);
+    if ($hasUpdateTag(PASTE_TAG)) nodes = $convertInlineImageDataURIs(nodes, this);
+    return filterDisallowedAttachmentNodes(nodes, this)
+  }
+
   get isEmpty() {
     return [ "<p><br></p>", "<p></p>", "" ].includes(this.value.trim())
   }
@@ -7182,7 +7752,7 @@ class LexicalEditorElement extends HTMLElement {
 
     if (!this.editor) return
 
-    this.#cancelEditorInitializedDispatch();
+    this.#editorInitializedDispatched = true;
     this.#dispatchEditorInitialized();
     this.#dispatchAttributesChange();
   }
@@ -7237,6 +7807,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   set value(html) {
+    this.#valueLoaded = true;
     const editorHasFocus = this.#isContentFocused;
 
     this.editor.update(() => {
@@ -7267,7 +7838,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #parseHtmlIntoLexicalNodes(html) {
     if (!html) html = "<p></p>";
-    const nodes = $generateFilteredNodesFromDOM(this, parseHtml(`${html}`));
+    const nodes = this.$generateNodesFromDOM(parseHtml(`${html}`));
 
     return nodes
       .filter(this.#isNotWhitespaceOnlyNode)
@@ -7333,11 +7904,17 @@ class LexicalEditorElement extends HTMLElement {
       ...this.extensions.lexicalExtensions
     );
 
-    editor.setRootElement(this.editorContentElement);
-
     return editor
   }
 
+  // Toggling editable around setRootElement skips Lexical's DOM-selection sync,
+  // which would otherwise steal focus from elsewhere on the page.
+  #mountRoot() {
+    this.editor.setEditable(false);
+    this.editor.setRootElement(this.editorContentElement);
+    this.editor.setEditable(true);
+  }
+
   get #lexicalNodes() {
     const nodes = [ CustomActionTextAttachmentNode ];
 
@@ -7394,7 +7971,6 @@ class LexicalEditorElement extends HTMLElement {
 
     this.internals.setFormValue(html);
     this._internalFormValue = html;
-    this.#validationTextArea.value = this.isEmpty ? "" : html;
 
     if (changed) {
       dispatch(this, "lexxy:change");
@@ -7406,10 +7982,12 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #loadInitialValue() {
-    const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
-    this.editor.update(() => {
-      this.value = this.#initialValue = initialHtml;
-    }, { tag: HISTORY_MERGE_TAG });
+    if (!this.#valueLoaded) {
+      const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
+      this.editor.update(() => {
+        this.value = this.#initialValue = initialHtml;
+      }, { tag: HISTORY_MERGE_TAG });
+    }
   }
 
   #resetBeforeTurboCaches() {
@@ -7429,11 +8007,50 @@ class LexicalEditorElement extends HTMLElement {
       this.#clearCachedValues();
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
-      this.#setValidity();
+      this.#requestValidityRefresh();
       this.#dispatchAttributesChange();
     }));
   }
 
+  async #requestValidityRefresh() {
+    await nextFrame();
+
+    if (this.isConnected) this.#refreshValidity();
+  }
+
+  #refreshValidity() {
+    this.#refreshInternalValidity();
+    const { validity, message } = this.#calculateValidity();
+    this.internals.setValidity(validity, message, this.editorContentElement);
+  }
+
+  #refreshInternalValidity() {
+    this.#validationTextArea.required = this.required && this.isBlank;
+    const flags = this.#validationTextArea.validity;
+    const message = this.#validationTextArea.validationMessage;
+
+    this.#validity.set(this, { flags, message });
+  }
+
+  #calculateValidity() {
+    const validity = {};
+    const messages = [];
+
+    for (const { flags, message } of this.#validity.values()) {
+      // internal TextArea's ValidityState can contain `valid: true`
+      if (flags.valid === true) continue
+
+      for (const flag in flags) {
+        if (flags[flag]) {
+          validity[flag] = true;
+          messages.push(message);
+        }
+      }
+    }
+
+    return { validity, message: messages.join("\n") }
+  }
+
   #clearCachedValues() {
     this.cachedValue = null;
     this.cachedStringValue = null;
@@ -7589,14 +8206,6 @@ class LexicalEditorElement extends HTMLElement {
     this.classList.toggle("lexxy-editor--empty", this.isEmpty);
   }
 
-  #setValidity() {
-    if (this.#validationTextArea.validity.valid) {
-      this.internals.setValidity({});
-    } else {
-      this.internals.setValidity(this.#validationTextArea.validity, this.#validationTextArea.validationMessage, this.editorContentElement);
-    }
-  }
-
   #configureSanitizer() {
     setSanitizerConfig(this.#allowedElements);
   }
@@ -7660,22 +8269,18 @@ class LexicalEditorElement extends HTMLElement {
     });
   }
 
-  #scheduleEditorInitializedDispatch() {
-    this.#cancelEditorInitializedDispatch();
-    this.#editorInitializedRafId = requestAnimationFrame(() => {
-      this.#editorInitializedRafId = null;
-      if (!this.isConnected || !this.adapter) return
-
-      dispatch(this, "lexxy:initialize");
-      this.#dispatchEditorInitialized();
-    });
-  }
-
-  #cancelEditorInitializedDispatch() {
-    if (this.#editorInitializedRafId == null) return
+  #dispatchInitialize() {
+    if (this.isConnected && this.adapter) {
+      if (!this.#initializeEventDispatched) {
+        this.#initializeEventDispatched = true;
+        dispatch(this, "lexxy:initialize");
+      }
 
-    cancelAnimationFrame(this.#editorInitializedRafId);
-    this.#editorInitializedRafId = null;
+      if (!this.#editorInitializedDispatched) {
+        this.#editorInitializedDispatched = true;
+        this.#dispatchEditorInitialized();
+      }
+    }
   }
 
   get #resolvedHighlightColors() {
@@ -7726,8 +8331,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #reset() {
-    this.#cancelEditorInitializedDispatch();
     this.#dispose();
+    this.#resetValidity();
     this.editorContentElement?.remove();
     this.editorContentElement = null;
 
@@ -7747,6 +8352,10 @@ class LexicalEditorElement extends HTMLElement {
     this.valueBeforeDisconnect = null;
     this.connectedCallback();
   }
+
+  #resetValidity() {
+    this.#validity = new Map();
+  }
 }
 
 // Like $getRoot().getTextContent() but uses readable text for custom attachment nodes
@@ -7776,256 +8385,6 @@ function $getReadableTextContent(node) {
   return node.getTextContent()
 }
 
-class ToolbarDropdown extends HTMLElement {
-  #listeners = new ListenerBin()
-
-  connectedCallback() {
-    this.container = this.closest("details");
-
-    this.#listeners.track(
-      registerEventListener(this.container, "toggle", this.#handleToggle),
-      registerEventListener(this.container, "keydown", this.#handleKeyDown)
-    );
-
-    this.#onToolbarEditor(this.initialize.bind(this));
-  }
-
-  disconnectedCallback() {
-    this.#listeners.dispose();
-  }
-
-  get toolbar() {
-    return this.closest("lexxy-toolbar")
-  }
-
-  get editorElement() {
-    return this.toolbar.editorElement
-  }
-
-  get editor() {
-    return this.toolbar.editor
-  }
-
-  track(...listeners) {
-    this.#listeners.track(...listeners);
-  }
-
-  initialize() {
-    // Any post-editor initialization
-  }
-
-  close() {
-    this.editor.focus();
-    this.container.open = false;
-  }
-
-  async #onToolbarEditor(callback) {
-    await this.toolbar.editorElement;
-    callback();
-  }
-
-  #handleToggle = () => {
-    if (this.container.open) {
-      this.#handleOpen();
-    }
-  }
-
-  async #handleOpen() {
-    this.#interactiveElements[0].focus();
-    this.#resetTabIndexValues();
-  }
-
-  #handleKeyDown = (event) => {
-    if (event.key === "Escape") {
-      event.stopPropagation();
-      this.close();
-    }
-  }
-
-  async #resetTabIndexValues() {
-    await nextFrame();
-    this.#buttons.forEach((element, index) => {
-      element.setAttribute("tabindex", index === 0 ? 0 : "-1");
-    });
-  }
-
-  get #interactiveElements() {
-    return Array.from(this.querySelectorAll("button, input"))
-  }
-
-  get #buttons() {
-    return Array.from(this.querySelectorAll("button"))
-  }
-}
-
-class LinkDropdown extends ToolbarDropdown {
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.input = this.querySelector("input");
-
-    this.track(
-      registerEventListener(this.container, "toggle", this.#handleToggle),
-      registerEventListener(this.input, "keydown", this.#handleEnter),
-      registerEventListener(this.linkButton, "click", this.#handleLink),
-      registerEventListener(this.unlinkButton, "click", this.#handleUnlink)
-    );
-  }
-
-  get linkButton() {
-    return this.querySelector("[value='link']")
-  }
-
-  get unlinkButton() {
-    return this.querySelector("[value='unlink']")
-  }
-
-  #handleToggle = ({ newState }) => {
-    this.input.value = this.#selectedLinkUrl;
-    this.input.required = newState === "open";
-  }
-
-  #handleEnter = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.#handleLink(event);
-    }
-  }
-
-  #handleLink = () => {
-    if (!this.input.checkValidity()) {
-      this.input.reportValidity();
-      return
-    }
-
-    this.editor.dispatchCommand("link", this.input.value);
-    this.close();
-  }
-
-  #handleUnlink = () => {
-    this.editor.dispatchCommand("unlink");
-    this.close();
-  }
-
-  get #selectedLinkUrl() {
-    return this.editor.getEditorState().read(() => {
-      const linkNode = this.editorElement.selection.nearestNodeOfType(LinkNode);
-      return linkNode?.getURL() ?? ""
-    })
-  }
-}
-
-const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
-const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
-
-// Use Symbol instead of null since $getSelectionStyleValueForProperty
-// responds differently for backward selections if null is the default
-// see https://github.com/facebook/lexical/issues/8013
-const NO_STYLE = Symbol("no_style");
-
-class HighlightDropdown extends ToolbarDropdown {
-  initialize() {
-    this.#setUpButtons();
-    this.#registerButtonHandlers();
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.track(registerEventListener(this.container, "toggle", this.#handleToggle));
-  }
-
-  #registerButtonHandlers() {
-    this.#colorButtons.forEach(button => {
-      this.track(registerEventListener(button, "click", this.#handleColorButtonClick));
-    });
-    this.track(registerEventListener(this.querySelector(REMOVE_HIGHLIGHT_SELECTOR), "click", this.#handleRemoveHighlightClick));
-  }
-
-  #setUpButtons() {
-    this.#buttonContainer.innerHTML = "";
-
-    const colorGroups = this.editorElement.config.get("highlight.buttons");
-
-    this.#populateButtonGroup("color", colorGroups.color);
-    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
-
-    const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
-    this.style.setProperty("--max-colors", maxNumberOfColors);
-  }
-
-  #populateButtonGroup(attribute, values) {
-    values.forEach((value, index) => {
-      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
-    });
-  }
-
-  #createButton(attribute, value, index) {
-    const button = document.createElement("button");
-    button.dataset.style = attribute;
-    button.style.setProperty(attribute, value);
-    button.dataset.value = value;
-    button.classList.add("lexxy-editor__toolbar-button", "lexxy-highlight-button");
-    button.name = attribute + "-" + index;
-    return button
-  }
-
-  #handleToggle = ({ newState }) => {
-    if (newState === "open") {
-      this.editor.getEditorState().read(() => {
-        this.#updateColorButtonStates($getSelection());
-      });
-    }
-  }
-
-  #handleColorButtonClick = (event) => {
-    event.preventDefault();
-
-    const button = event.target.closest(APPLY_HIGHLIGHT_SELECTOR);
-    if (!button) return
-
-    const attribute = button.dataset.style;
-    const value = button.dataset.value;
-
-    this.editor.dispatchCommand("toggleHighlight", { [attribute]: value });
-    this.close();
-  }
-
-  #handleRemoveHighlightClick = (event) => {
-    event.preventDefault();
-
-    this.editor.dispatchCommand("removeHighlight");
-    this.close();
-  }
-
-  #updateColorButtonStates(selection) {
-    if (!$isRangeSelection(selection)) { return }
-
-    // Use non-"" default, so "" indicates mixed highlighting
-    const textColor = $getSelectionStyleValueForProperty(selection, "color", NO_STYLE);
-    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
-
-    this.#colorButtons.forEach(button => {
-      const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
-      const next = matchesSelection.toString();
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next);
-      }
-    });
-
-    const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
-    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
-  }
-
-  get #buttonContainer() {
-    return this.querySelector(".lexxy-highlight-colors")
-  }
-
-  get #colorButtons() {
-    return Array.from(this.querySelectorAll(APPLY_HIGHLIGHT_SELECTOR))
-  }
-}
-
 class BaseSource {
   // Template method to override
   async buildListItems(filter = "") {
@@ -8384,6 +8743,7 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#doesSpaceSelect) {
       this.#popoverListeners.track(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
+      this.#popoverListeners.track(this.#editor.registerCommand(INPUT_COMMAND, this.#handleInputCommand.bind(this), COMMAND_PRIORITY_CRITICAL));
     }
 
     // Register arrow keys with CRITICAL priority to prevent Lexical's selection handlers from running
@@ -8417,16 +8777,12 @@ class LexicalPromptElement extends HTMLElement {
     return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
   }
 
-  #selectOption(listItem) {
+  #selectOption(listItem, { scrollIntoView = false } = {}) {
     this.#clearListItemSelection();
     listItem.toggleAttribute("aria-selected", true);
-    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    listItem.focus();
-
-    // Preserve selection to prevent cursor jump
-    this.#selection.preservingSelection(() => {
-      this.#editorElement.focus();
-    });
+    if (scrollIntoView) {
+      listItem.scrollIntoView({ block: "nearest", container: "nearest", behavior: "smooth" });
+    }
 
     this.#setEditorAssociationAttribute("aria-controls", this.popoverElement.id);
     this.#setEditorAssociationAttribute("aria-activedescendant", listItem.id);
@@ -8545,7 +8901,7 @@ class LexicalPromptElement extends HTMLElement {
 
   #showEmptyResults() {
     this.popoverElement.classList.add("lexxy-prompt-menu--empty");
-    const el = createElement("li", { innerHTML: this.#emptyResultsMessage });
+    const el = createElement("li", { textContent: this.#emptyResultsMessage });
     el.classList.add("lexxy-prompt-menu__item--empty");
     this.popoverElement.append(el);
   }
@@ -8570,17 +8926,22 @@ class LexicalPromptElement extends HTMLElement {
         }
       });
     }
-    // Arrow keys are now handled via Lexical commands with HIGH priority
+    // Arrow keys are handled via Lexical commands
+  }
+
+  // Android Mobile keyboard doesn't trigger KEY_SPACE_COMMAND
+  #handleInputCommand(event) {
+    if (event.inputType === "insertText" && event.data === " ") return this.#handleSelectedOption(event)
   }
 
   #moveSelectionDown() {
     const nextIndex = this.#selectedIndex + 1;
-    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
+    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex], { scrollIntoView: true });
   }
 
   #moveSelectionUp() {
     const previousIndex = this.#selectedIndex - 1;
-    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
+    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex], { scrollIntoView: true });
   }
 
   get #selectedIndex() {
@@ -8627,7 +8988,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #buildEditableTextNodes(template) {
-    return $generateFilteredNodesFromDOM(this.#editorElement, parseHtml(`${template.innerHTML}`))
+    return this.#editorElement.$generateNodesFromDOM(parseHtml(`${template.innerHTML}`))
   }
 
   #insertTemplatesAsAttachments(templates, stringToReplace, fallbackSgid = null) {
@@ -9606,14 +9967,19 @@ class TableTools extends HTMLElement {
 
 function defineElements() {
   const elements = {
+    // Toolbar must be registered BEFORE Editor
     "lexxy-toolbar": LexicalToolbarElement,
-    "lexxy-editor": LexicalEditorElement,
-    "lexxy-link-dropdown": LinkDropdown,
+    "lexxy-toolbar-dropdown": ToolbarDropdown,
     "lexxy-highlight-dropdown": HighlightDropdown,
+    "lexxy-link-dropdown": LinkDropdown,
+
+    "lexxy-editor": LexicalEditorElement,
+
+    // Prompt must be registered AFTER Editor
     "lexxy-prompt": LexicalPromptElement,
     "lexxy-code-language-picker": CodeLanguagePicker,
     "lexxy-node-delete-button": NodeDeleteButton,
-    "lexxy-table-tools": TableTools,
+    "lexxy-table-tools": TableTools
   };
 
   Object.entries(elements).forEach(([ name, element ]) => {