@37signals/lexxy 0.9.10-beta → 0.9.12-beta

package/dist/lexxy.esm.js

@@ -1,11 +1,10 @@
-import { isActiveAndVisible, extractPlainTextFromHtml, createElement, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 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, 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, PASTE_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, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, 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, $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 { 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';
@@ -126,6 +125,78 @@ class ListenerBin {
   }
 }
 
+function createElement(name, properties, content = "") {
+  const element = document.createElement(name);
+  for (const [ key, value ] of Object.entries(properties || {})) {
+    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);
+    }
+  }
+  if (content) {
+    element.innerHTML = content;
+  }
+  return element
+}
+
+function parseHtml(html) {
+  const parser = new DOMParser();
+  return parser.parseFromString(html, "text/html")
+}
+
+function createAttachmentFigure(contentType, isPreviewable, fileName) {
+  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
+  return createElement("figure", {
+    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
+    "data-content-type": contentType
+  })
+}
+
+function isPreviewableImage(contentType) {
+  return contentType.startsWith("image/") && !contentType.includes("svg")
+}
+
+function dispatch(element, eventName, detail = null, cancelable = false) {
+  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
+}
+
+function addBlockSpacing(doc) {
+  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
+  for (const block of blocks) {
+    const spacer = doc.createElement("p");
+    spacer.appendChild(doc.createElement("br"));
+    block.before(spacer);
+  }
+}
+
+function generateDomId(prefix) {
+  const randomPart = Math.random().toString(36).slice(2, 10);
+  return `${prefix}-${randomPart}`
+}
+
+function extractPlainTextFromHtml(innerHtml = "") {
+  return parseHtml(innerHtml).body.textContent.trim()
+}
+
+function isActiveAndVisible(element) {
+  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) {
   const previousActiveElement = document.activeElement;
 
@@ -336,6 +407,7 @@ var ToolbarIcons = {
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
   #listeners = new ListenerBin()
+  #refreshToolbarAF = null
 
   constructor() {
     super();
@@ -346,7 +418,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   connectedCallback() {
-    requestAnimationFrame(() => this.#refreshToolbarOverflow());
+    this.requestOverflowRefresh();
     this.setAttribute("role", "toolbar");
     this.#installResizeObserver();
   }
@@ -358,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();
   }
@@ -386,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);
@@ -401,6 +475,15 @@ class LexicalToolbarElement extends HTMLElement {
     return this.editorElement || await this.editorPromise
   }
 
+  requestOverflowRefresh() {
+    if (this.#refreshToolbarAF != null) return
+
+    this.#refreshToolbarAF = requestAnimationFrame(() => {
+      this.#refreshOverflow();
+      this.#refreshToolbarAF = null;
+    });
+  }
+
   #reconnect() {
     this.disconnectedCallback();
     this.connectedCallback();
@@ -415,7 +498,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());
   }
@@ -482,30 +565,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();
       });
     }));
   }
@@ -553,41 +635,53 @@ class LexicalToolbarElement extends HTMLElement {
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.setAttribute("aria-pressed", isPressed.toString());
+      const next = isPressed.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
     }
   }
 
   #setButtonDisabled(name, isDisabled) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.disabled = isDisabled;
-      button.setAttribute("aria-disabled", isDisabled.toString());
+      if (button.disabled !== isDisabled) {
+        button.disabled = isDisabled;
+      }
+      const next = isDisabled.toString();
+      if (button.getAttribute("aria-disabled") !== next) {
+        button.setAttribute("aria-disabled", next);
+      }
     }
   }
 
-  #refreshToolbarOverflow = () => {
+  #refreshOverflow() {
     this.#resetToolbarOverflow();
+    this.#reindexToolbarItems();
     this.#compactMenu();
 
-    this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
-    this.#overflow.setAttribute("nonce", getNonce());
-
     const isOverflowing = this.#overflowMenu.children.length > 0;
+
     this.toggleAttribute("overflowing", isOverflowing);
+
+    this.#overflow.style.display = isOverflowing ? "block" : "none";
+    this.#overflow.setAttribute("nonce", getNonce());
+
     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;
+    const buttons = this.#overflowButtons;
     if (buttons.length === 0) return
 
-    const availableWidth = this.clientWidth + 1; // +1 for Safari zoom rounding
-    const buttonRightEdges = buttons.map(button => button.offsetLeft + button.offsetWidth);
+    const availableWidth = this.clientWidth;
+    const buttonRightEdges = buttons.map(button => {
+      const style = window.getComputedStyle(button);
+      return button.offsetLeft + button.offsetWidth + parseFloat(style.marginRight)
+    });
 
     let firstOverflowing = -1;
     for (let i = 0; i < buttons.length; i++) {
@@ -600,12 +694,12 @@ class LexicalToolbarElement extends HTMLElement {
     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.
+    // `display: none` until we show it
     const overflowIndex = Math.max(0, firstOverflowing - 1);
     const overflowButtons = buttons.slice(overflowIndex).reverse();
     for (const button of overflowButtons) {
       this.#overflowMenu.prepend(button);
+      button.role = "menuitem";
     }
   }
 
@@ -615,6 +709,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     for (const item of items) {
       const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflow;
+      item.removeAttribute("role");
       this.insertBefore(item, nextItem);
     }
   }
@@ -623,22 +718,22 @@ class LexicalToolbarElement extends HTMLElement {
     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;
-   });
- }
+  closeDropdowns({ except } = {}) {
+    this.#dropdowns.forEach((dropdown) => {
+      if (dropdown !== except) {
+        dropdown.close({ focusEditor: false });
+      }
+    });
+  }
 
   get #dropdowns() {
-    return this.querySelectorAll("details")
+    return this.querySelectorAll(":scope .lexxy-editor__toolbar-dropdown")
   }
 
   get #overflow() {
@@ -646,15 +741,15 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   get #overflowMenu() {
-    return this.querySelector(".lexxy-editor__toolbar-overflow-menu")
+    return this.#overflow?.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  get #buttons() {
+  get #overflowButtons() {
     return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow='true'])"))
   }
 
-  get #focusableItems() {
-    return Array.from(this.querySelectorAll(":scope button, :scope > details > summary"))
+  get #buttons() {
+    return Array.from(this.querySelectorAll(":scope button"))
   }
 
   get #toolbarItems() {
@@ -662,6 +757,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}
@@ -679,59 +776,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}
@@ -756,9 +853,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>
 
@@ -766,399 +861,723 @@ 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));
-}
+  editorReady() {}
+  onOpen() {}
+  onClose() {}
 
-function sanitize(html) {
-  return DOMPurify.sanitize(html)
-}
+  get trigger() {
+    return this.querySelector(":scope > [data-dropdown-trigger]")
+  }
 
-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] }`
-}
+  get panel() {
+    return this.querySelector(":scope > [data-dropdown-panel]")
+  }
 
-function extractFileName(string) {
-  return string.split("/").pop()
-}
+  get toolbar() {
+    return this.closest("lexxy-toolbar")
+  }
 
-// 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 editorElement() {
+    return this.toolbar?.editorElement
   }
-}
 
-class CustomActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "custom_action_text_attachment"
+  get editor() {
+    return this.toolbar?.editor
   }
 
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  get isOpen() {
+    return this.panel.hidden === false
   }
 
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  get isClosed() {
+    return !this.isOpen
   }
 
-  static importDOM() {
-    return {
-      [this.TAG_NAME]: (element) => {
-        if (!element.getAttribute("content")) {
-          return null
-        }
+  track(...listeners) {
+    this.#listeners.track(...listeners);
+  }
 
-        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(" "));
-            }
+  open() {
+    if (this.isOpen) return
+    this.trigger.setAttribute("aria-expanded", "true");
+    this.panel.hidden = false;
+    this.onOpen();
+    this.#focusFirstInteractive();
+  }
 
-            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
+  close({ focusEditor = true } = {}) {
+    if (focusEditor) this.editor?.focus();
 
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml,
-              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
-              contentType: attachment.getAttribute("content-type")
-            }));
+    if (this.isClosed) return
+    this.trigger.setAttribute("aria-expanded", "false");
+    this.panel.hidden = true;
+    this.onClose();
+  }
 
-            const nextSibling = attachment.nextSibling;
-            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
+  #registerListeners() {
+    this.#listeners.track(
+      registerEventListener(this, "keydown", this.#handleKeyDown),
+      registerEventListener(this.trigger, "click", this.#handleTriggerClick)
+    );
+  }
 
-            return { node: nodes }
-          },
-          priority: 2
-        }
-      }
+  #handleTriggerClick = () => {
+    if (this.isOpen) {
+      this.close({ focusEditor: false });
+    } else {
+      this.toolbar?.closeDropdowns({ except: this });
+      this.open();
     }
   }
 
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
+  async #onToolbarEditor(callback) {
+    if (!this.toolbar) return
+
+    await this.toolbar.getEditorElement();
+    if (this.isConnected && this.toolbar) callback();
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
-    super(key);
+  #handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.close();
+    }
+  }
 
-    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+  async #focusFirstInteractive() {
+    this.#interactiveElements[0]?.focus();
+    await this.#resetTabIndexValues();
+  }
 
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
-    this.sgid = sgid;
-    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
-    this.innerHtml = innerHtml;
-    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+  async #resetTabIndexValues() {
+    await nextFrame();
+    this.#buttons.forEach((element, index) => {
+      element.setAttribute("tabindex", index === 0 ? 0 : "-1");
+    });
   }
 
-  createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+  get #interactiveElements() {
+    return Array.from(this.panel.querySelectorAll("button, input"))
+  }
 
-    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
+  get #buttons() {
+    return Array.from(this.panel.querySelectorAll("button"))
+  }
+}
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
+const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
-    return figure
-  }
+// 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");
 
-  updateDOM() {
-    return false
+class HighlightDropdown extends ToolbarDropdown {
+  editorReady() {
+    this.#setUpButtons();
+    this.#registerButtonHandlers();
   }
 
-  getTextContent() {
-    return "\ufeff"
+  onOpen() {
+    this.editor.getEditorState().read(() => {
+      this.#updateColorButtonStates($getSelection());
+    });
   }
 
-  getReadableTextContent() {
-    return this.plainText || `[${this.contentType}]`
+  #registerButtonHandlers() {
+    this.#colorButtons.forEach(button => {
+      this.track(registerEventListener(button, "click", this.#handleColorButtonClick));
+    });
   }
 
-  isInline() {
-    return true
-  }
+  #setUpButtons() {
+    this.#buttonContainer.innerHTML = "";
 
-  exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      content: this.innerHtml,
-      "content-type": this.contentType
-    });
+    const colorGroups = this.editorElement.config.get("highlight.buttons");
 
-    return { element: attachment }
-  }
+    this.#populateButtonGroup("color", colorGroups.color);
+    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
 
-  exportJSON() {
-    return {
-      type: "custom_action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      contentType: this.contentType,
-      innerHtml: this.innerHtml,
-      plainText: this.plainText
-    }
+    const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
+    this.panel.style.setProperty("--max-colors", maxNumberOfColors);
   }
 
-  decorate() {
-    return null
+  #populateButtonGroup(attribute, values) {
+    values.forEach((value, index) => {
+      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
+    });
   }
-}
-
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
-}
 
-function isUrl(string) {
-  try {
-    new URL(string);
-    return true
-  } catch {
-    return false
+  #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"
+    })
   }
-}
-
-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);
+  #handleColorButtonClick = (event) => {
+    event.preventDefault();
 
-  if (!normalizedMatch) return 0
+    const button = event.target.closest(APPLY_HIGHLIGHT_SELECTOR);
+    if (!button) return
 
-  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
-  return match ? match.index : -1
-}
+    const { style, value } = button.dataset;
 
-function upcaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+    this.editor.dispatchCommand("toggleHighlight", { [style]: value });
+    this.close();
+  }
 
-function escapeForRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-}
+  #updateColorButtonStates(selection) {
+    if (!$isRangeSelection(selection)) { return }
 
-// 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)
-}
+    // Use non-"" default, so "" indicates mixed highlighting
+    const textColor = $getSelectionStyleValueForProperty(selection, "color", NO_STYLE);
+    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
 
-class LexxyExtension {
-  #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);
+      }
+    });
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
+    const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
+    this.panel.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
-  get editorElement() {
-    return this.#editorElement
+  get #buttonContainer() {
+    return this.panel.querySelector(".lexxy-highlight-colors")
   }
 
-  get editorConfig() {
-    return this.#editorElement.config
+  get #colorButtons() {
+    return Array.from(this.panel.querySelectorAll(APPLY_HIGHLIGHT_SELECTOR))
   }
+}
 
-  // optional: defaults to true
-  get enabled() {
-    return true
+class LinkDropdown extends ToolbarDropdown {
+  editorReady() {
+    this.input = this.panel.querySelector("input");
+
+    this.track(
+      registerEventListener(this.input, "keydown", this.#handleEnter),
+      registerEventListener(this.linkButton, "click", this.#handleLink),
+      registerEventListener(this.unlinkButton, "click", this.#handleUnlink)
+    );
   }
 
-  get lexicalExtension() {
-    return null
+  onOpen() {
+    this.input.value = this.#selectedLinkUrl;
+    this.input.required = true;
   }
 
-  get allowedElements() {
-    return []
+  onClose() {
+    this.input.required = false;
   }
 
-  initializeToolbar(_lexxyToolbar) {
+  get linkButton() {
+    return this.panel.querySelector("[value='link']")
+  }
 
+  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)
+  }
+
+  get(path) {
+    const keys = path.split(".");
+    return keys.reduce((node, key) => node[key], 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
+function range(from, to) {
+  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
+}
+
+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": []
+      }
+    }
+  }
+});
+
+var Lexxy = {
+  global,
+  presets,
+  configure({ global: newGlobal, ...newPresets }) {
+    if (newGlobal) {
+      global.merge(newGlobal);
+    }
+    presets.merge(newPresets);
+  }
+};
+
+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()
+}
+
+// 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
+  }
+}
+
+function mimeTypeToExtension(mimeType) {
+  if (!mimeType) return null
+
+  const extension = mimeType.split("/")[1];
+  return extension
+}
+
+class CustomActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "custom_action_text_attachment"
+  }
+
+  static clone(node) {
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  }
+
+  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"));
+
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml,
+              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
+              contentType: attachment.getAttribute("content-type")
+            }));
+
+            const nextSibling = attachment.nextSibling;
+            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
+
+            return { node: nodes }
+          },
+          priority: 2
+        }
+      }
+    }
+  }
+
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+    super(key);
+
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
+    this.innerHtml = innerHtml;
+    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+  }
+
+  createDOM() {
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+
+    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
+
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
+
+    return figure
+  }
+
+  updateDOM() {
+    return false
+  }
+
+  getTextContent() {
+    return "\ufeff"
+  }
+
+  getReadableTextContent() {
+    return this.plainText || `[${this.contentType}]`
+  }
+
+  isInline() {
+    return true
+  }
+
+  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) {
+
+  }
+
+  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];
 
@@ -1796,11 +2215,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))
@@ -1819,6 +2233,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"
@@ -2813,17 +3288,12 @@ class CommandDispatcher {
     this.editor = editorElement.editor;
     this.selection = editorElement.selection;
     this.contents = editorElement.contents;
-    this.clipboard = editorElement.clipboard;
 
     this.#registerCommands();
     this.#registerKeyboardCommands();
     this.#registerDragAndDropHandlers();
   }
 
-  dispatchPaste(event) {
-    return this.clipboard.paste(event)
-  }
-
   dispatchBold() {
     this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
   }
@@ -3050,8 +3520,6 @@ class CommandDispatcher {
       const methodName = `dispatch${capitalize(command)}`;
       this.#registerCommandHandler(command, 0, this[methodName].bind(this));
     }
-
-    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
   }
 
   #registerCommandHandler(command, priority, handler) {
@@ -3184,42 +3652,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()
 
@@ -3412,6 +3844,11 @@ class Selection {
     return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage
   }
 
+  get isAtNodeStart() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    return anchorNode && offset === 0
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -4127,577 +4564,574 @@ class EditorConfiguration {
   }
 }
 
-async function loadFileIntoImage(file, image) {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-
-    image.addEventListener("load", () => {
-      resolve(image);
-    });
+class ImageGalleryNode extends ElementNode {
+  $config() {
+    return this.config("image_gallery", {
+      extends: ElementNode,
+    })
+  }
 
-    reader.onload = (event) => {
-      image.src = event.target.result || null;
-    };
+  static transform() {
+    return (gallery) => {
+      gallery.unwrapEmptyNode()
+        || gallery.replaceWithSingularChild()
+        || gallery.splitAroundInvalidChild();
+    }
+  }
 
-    reader.readAsDataURL(file);
-  })
-}
+  static importDOM() {
+    return {
+      div: (element) => {
+        if (!this.#isGalleryElement(element)) return null
 
-class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
-  static getType() {
-    return "action_text_attachment_upload"
+        return {
+          conversion: () => {
+            return {
+              node: $createImageGalleryNode()
+            }
+          },
+          priority: 2
+        }
+      }
+    }
   }
 
-  static clone(node) {
-    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
+  static canCollapseWith(node) {
+    return $isImageGalleryNode(node) || this.isValidChild(node)
   }
 
-  static importJSON(serializedNode) {
-    return new ActionTextAttachmentUploadNode({ ...serializedNode })
+  static isValidChild(node) {
+    return $isActionTextAttachmentNode(node) && node.isPreviewableImage
   }
 
-  // Should never run since this is a transient node. Defined to remove console warning.
-  static importDOM() {
-    return null
+  static #isGalleryElement(element) {
+    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
+    return element.textContent.trim() === ""
+      && attachmentChildren.length > 0
+      && element.children.length === attachmentChildren.length
   }
 
-  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;
+  static get #attachmentTags() {
+    return Object.keys(ActionTextAttachmentNode.importDOM())
   }
 
   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());
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return div
+  }
 
-      // load file locally to set dimensions and prevent vertical shifting
-      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
-    } else {
-      figure.appendChild(this.#createDOMForFile());
-    }
+  updateDOM(_prevNode, dom) {
+    dom.className = this.#galleryClassNames;
+    return false
+  }
 
-    figure.appendChild(this.#createCaption());
-    figure.appendChild(this.#createProgressBar());
+  canBeEmpty() {
+    // Return `true` to conform to `$isBlock(node)`
+    // We clean-up empty galleries with a transform
+    return true
+  }
 
-    return figure
+  collapseAtStart(_selection) {
+    return true
   }
 
-  updateDOM(prevNode, dom) {
-    if (this.uploadError !== prevNode.uploadError) return true
+  insertNewAfter(selection, restoreSelection) {
+    const selectionBeforeLastChild = selection.anchor.getNode().is(this) && selection.anchor.offset == this.getChildrenSize() - 1;
+    if (selectionBeforeLastChild) {
+      const paragraph = $createParagraphNode();
+      this.insertAfter(paragraph, false);
+      paragraph.insertAfter(this.getLastChild(), false);
+      paragraph.selectEnd();
 
-    if (prevNode.progress !== this.progress) {
-      const progress = dom.querySelector("progress");
-      progress.value = this.progress ?? 0;
+      // return null as selection has been managed
+      return null
     }
 
-    return false
+    const newNode = $createImageGalleryNode();
+    this.insertAfter(newNode, restoreSelection);
+    return newNode
+  }
+
+  getImageAttachments() {
+    const children = this.getChildren();
+    return children.filter($isActionTextAttachmentNode)
   }
 
   exportDOM() {
-    return { element: null }
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return { element: div }
   }
 
-  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
+  collapseWith(node, backwards) {
+    if (!ImageGalleryNode.canCollapseWith(node)) return false
+
+    if (backwards) {
+      $insertFirst(this, node);
+    } else {
+      this.append(node);
     }
-  }
 
-  get #uploadStarted() {
-    return this.progress !== null
-  }
+    $unwrapAndFilterDescendants(this, ImageGalleryNode.isValidChild);
 
-  #createDOMForImage() {
-    return createElement("img")
+    return true
   }
 
-  #createDOMForFile() {
-    const extension = this.#getFileExtension();
-    const span = createElement("span", { className: "attachment__icon", textContent: extension });
-    return span
+  unwrapEmptyNode() {
+    if (this.isEmpty()) {
+      const paragraph = $createParagraphNode();
+      return this.replace(paragraph)
+    }
   }
 
-  #getFileExtension() {
-    return (this.fileName || "").split(".").pop().toLowerCase()
+  replaceWithSingularChild() {
+    if (this.#hasSingularChild) {
+      const child = this.getFirstChild();
+      return this.replace(child)
+    }
   }
 
-  #createCaption() {
-    const figcaption = createElement("figcaption", { className: "attachment__caption" });
+  splitAroundInvalidChild() {
+    for (const child of $firstToLastIterator(this)) {
+      if (ImageGalleryNode.isValidChild(child)) continue
 
-    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);
+      const poppedNode = $makeSafeForRoot(child);
+      const [ topGallery, secondGallery ] = this.splitAtIndex(poppedNode.getIndexWithinParent());
+      topGallery.insertAfter(poppedNode);
+      poppedNode.selectEnd();
 
-    return figcaption
-  }
+      // remove an empty gallery rather than let it unwrap to a paragraph
+      if (secondGallery.isEmpty()) secondGallery.remove();
 
-  #createProgressBar() {
-    return createElement("progress", { value: this.progress ?? 0, max: 100 })
+      break
+    }
   }
 
-  #setDimensionsFromImage({ width, height }) {
-    if (this.#hasDimensions) return
+  splitAtIndex(index) {
+    return $splitNode(this, index)
+  }
 
-    this.patchAndRewriteHistory({ width, height });
+  get #hasSingularChild() {
+    return this.getChildrenSize() === 1
   }
 
-  get #hasDimensions() {
-    return Boolean(this.width && this.height)
+  get #galleryClassNames() {
+    return `attachment-gallery attachment-gallery--${this.getChildrenSize()}`
   }
+}
 
-  async #startUploadIfNeeded() {
-    if (this.#uploadStarted) return
-    if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
+function $createImageGalleryNode() {
+  return new ImageGalleryNode()
+}
 
-    this.#setUploadStarted();
+function $isImageGalleryNode(node) {
+  return node instanceof ImageGalleryNode
+}
 
-    const { DirectUpload } = await import('@rails/activestorage');
+function $findOrCreateGalleryForImage(node) {
+  if (!ImageGalleryNode.canCollapseWith(node)) return null
 
-    const upload = new DirectUpload(this.file, this.uploadUrl, this);
-    upload.delegate = this.#createUploadDelegate();
+  const existingGallery = $getNearestNodeOfType(node, ImageGalleryNode);
+  return existingGallery ?? $wrapNodeInElement(node, $createImageGalleryNode)
+}
 
-    this.#dispatchEvent("lexxy:upload-start", { file: this.file });
+class Uploader {
+  #files
 
-    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 for(editorElement, files) {
+    const UploaderKlass = GalleryUploader.handle(editorElement, files) ? GalleryUploader : Uploader;
+    return new UploaderKlass(editorElement, files)
   }
 
-  #createUploadDelegate() {
-    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
+  constructor(editorElement, files, options = {}) {
+    this.#files = files;
+    this.options = options;
 
-    return {
-      directUploadWillCreateBlobWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
-      },
-      directUploadWillStoreFileWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
+    this.editorElement = editorElement;
+    this.contents = editorElement.contents;
+    this.selection = editorElement.selection;
+  }
 
-        const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
-        request.upload.addEventListener("progress", uploadProgressHandler);
-      }
-    }
+  get files() {
+    return Array.from(this.#files)
   }
 
-  #setUploadStarted() {
-    this.#setProgress(1);
+  $uploadFiles() {
+    this.$createUploadNodes();
+    this.$insertUploadNodes();
   }
 
-  #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();
+  $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
   }
 
-  #setProgress(progress) {
-    this.patchAndRewriteHistory({ progress });
+  static gallerySelection(selection) {
+    return selection.isOnPreviewableImage || this.selectionIsAfterGalleryEdge(selection)
   }
 
-  #handleUploadError(error) {
-    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
-
-    this.patchAndRewriteHistory({ uploadError: true });
+  static selectionIsAfterGalleryEdge(selection) {
+    return selection.isAtNodeStart && ImageGalleryNode.canCollapseWith(selection.nodeBeforeCursor)
   }
 
-  $showUploadedAttachment(blob) {
-    const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
-
-    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
-    this.replaceAndRewriteHistory(replacementNode);
+  $insertUploadNodes() {
+    this.#findOrCreateGallery();
+    this.#insertImagesInGallery();
+    this.#insertNonImagesAfterGallery();
+  }
 
-    return replacementNode.getKey()
+  #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);
+    }
   }
 
-  #toActionTextAttachmentNodeWith(blob, previewSrc) {
-    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
-    return conversion.toAttachmentNode()
+  get #selectionIsAfterGalleryEdge() {
+    return this.constructor.selectionIsAfterGalleryEdge(this.selection)
   }
 
-  #dispatchEvent(name, detail) {
-    const figure = this.editor.getElementByKey(this.getKey());
-    if (figure) dispatch(figure, name, detail);
+  get #selectedNode() {
+    const { node } = this.selection.selectedNodeWithOffset();
+    return node
   }
-}
 
-class AttachmentNodeConversion {
-  constructor(uploadNode, blob, previewSrc) {
-    this.uploadNode = uploadNode;
-    this.blob = blob;
-    this.previewSrc = previewSrc;
+  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
   }
 
-  toAttachmentNode() {
-    return new ActionTextAttachmentNode({
-      ...this.uploadNode,
-      ...this.#propertiesFromBlob,
-      src: this.#src,
-      previewSrc: this.previewSrc,
-      pendingPreview: this.blob.previewable && !this.uploadNode.isPreviewableImage
-    })
+  get #imageNodes() {
+    return this.nodes.filter(node => ImageGalleryNode.isValidChild(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 #nonImageNodes() {
+    return this.nodes.filter(node => !ImageGalleryNode.isValidChild(node))
   }
 
-  get #src() {
-    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  #insertImagesInGallery() {
+    this.#gallery.splice(this.#galleryInsertPosition, 0, this.#imageNodes);
   }
 
-  get #blobSrc() {
-    return this.uploadNode.blobUrlTemplate
-      .replace(":signed_id", this.blob.signed_id)
-      .replace(":filename", encodeURIComponent(this.blob.filename))
+  #insertNonImagesAfterGallery() {
+    let beforeNode = this.#gallery;
+
+    for (const node of this.#nonImageNodes) {
+      beforeNode.insertAfter(node);
+      beforeNode = node;
+    }
   }
 }
 
-function $createActionTextAttachmentUploadNode(...args) {
-  return new ActionTextAttachmentUploadNode(...args)
-}
+async function loadFileIntoImage(file, image) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
 
-class ImageGalleryNode extends ElementNode {
-  $config() {
-    return this.config("image_gallery", {
-      extends: ElementNode,
-    })
-  }
+    image.addEventListener("load", () => {
+      resolve(image);
+    });
 
-  static transform() {
-    return (gallery) => {
-      gallery.unwrapEmptyNode()
-        || gallery.replaceWithSingularChild()
-        || gallery.splitAroundInvalidChild();
-    }
-  }
+    reader.onload = (event) => {
+      image.src = event.target.result || null;
+    };
 
-  static importDOM() {
-    return {
-      div: (element) => {
-        if (!this.#isGalleryElement(element)) return null
+    reader.readAsDataURL(file);
+  })
+}
 
-        return {
-          conversion: () => {
-            return {
-              node: $createImageGalleryNode()
-            }
-          },
-          priority: 2
-        }
-      }
-    }
+class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
+  static getType() {
+    return "action_text_attachment_upload"
   }
 
-  static canCollapseWith(node) {
-    return $isImageGalleryNode(node) || this.isValidChild(node)
+  static clone(node) {
+    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
   }
 
-  static isValidChild(node) {
-    return $isActionTextAttachmentNode(node) && node.isPreviewableImage
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentUploadNode({ ...serializedNode })
   }
 
-  static #isGalleryElement(element) {
-    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
-    return element.textContent.trim() === ""
-      && attachmentChildren.length > 0
-      && element.children.length === attachmentChildren.length
+  // Should never run since this is a transient node. Defined to remove console warning.
+  static importDOM() {
+    return null
   }
 
-  static get #attachmentTags() {
-    return Object.keys(ActionTextAttachmentNode.importDOM())
+  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() {
-    const div = document.createElement("div");
-    div.className = this.#galleryClassNames;
-    return div
-  }
-
-  updateDOM(_prevNode, dom) {
-    dom.className = this.#galleryClassNames;
-    return false
-  }
+    if (this.uploadError) return this.createDOMForError()
 
-  canBeEmpty() {
-    // Return `true` to conform to `$isBlock(node)`
-    // We clean-up empty galleries with a transform
-    return true
-  }
+    // 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();
 
-  collapseAtStart(_selection) {
-    return true
-  }
+    // 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);
 
-  insertNewAfter(selection, restoreSelection) {
-    const selectionBeforeLastChild = selection.anchor.getNode().is(this) && selection.anchor.offset == this.getChildrenSize() - 1;
-    if (selectionBeforeLastChild) {
-      const paragraph = $createParagraphNode();
-      this.insertAfter(paragraph, false);
-      paragraph.insertAfter(this.getLastChild(), false);
-      paragraph.selectEnd();
+    if (canPreviewFile) {
+      const img = figure.appendChild(this.#createDOMForImage());
 
-      // return null as selection has been managed
-      return null
+      // 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 newNode = $createImageGalleryNode();
-    this.insertAfter(newNode, restoreSelection);
-    return newNode
-  }
-
-  getImageAttachments() {
-    const children = this.getChildren();
-    return children.filter($isActionTextAttachmentNode)
-  }
+    figure.appendChild(this.#createCaption());
+    figure.appendChild(this.#createProgressBar());
 
-  exportDOM() {
-    const div = document.createElement("div");
-    div.className = this.#galleryClassNames;
-    return { element: div }
+    return figure
   }
 
-  collapseWith(node, backwards) {
-    if (!ImageGalleryNode.canCollapseWith(node)) return false
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
 
-    if (backwards) {
-      $insertFirst(this, node);
-    } else {
-      this.append(node);
+    if (prevNode.progress !== this.progress) {
+      const progress = dom.querySelector("progress");
+      progress.value = this.progress ?? 0;
     }
 
-    $unwrapAndFilterDescendants(this, ImageGalleryNode.isValidChild);
+    return false
+  }
 
-    return true
+  exportDOM() {
+    return { element: null }
   }
 
-  unwrapEmptyNode() {
-    if (this.isEmpty()) {
-      const paragraph = $createParagraphNode();
-      return this.replace(paragraph)
+  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
     }
   }
 
-  replaceWithSingularChild() {
-    if (this.#hasSingularChild) {
-      const child = this.getFirstChild();
-      return this.replace(child)
-    }
+  get #uploadStarted() {
+    return this.progress !== null
+  }
+
+  #createDOMForImage() {
+    return createElement("img")
   }
 
-  splitAroundInvalidChild() {
-    for (const child of $firstToLastIterator(this)) {
-      if (ImageGalleryNode.isValidChild(child)) continue
+  #createDOMForFile() {
+    const extension = this.#getFileExtension();
+    const span = createElement("span", { className: "attachment__icon", textContent: extension });
+    return span
+  }
 
-      const poppedNode = $makeSafeForRoot(child);
-      const [ topGallery, secondGallery ] = this.splitAtIndex(poppedNode.getIndexWithinParent());
-      topGallery.insertAfter(poppedNode);
-      poppedNode.selectEnd();
+  #getFileExtension() {
+    return (this.fileName || "").split(".").pop().toLowerCase()
+  }
 
-      // remove an empty gallery rather than let it unwrap to a paragraph
-      if (secondGallery.isEmpty()) secondGallery.remove();
+  #createCaption() {
+    const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
-      break
-    }
+    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
   }
 
-  splitAtIndex(index) {
-    return $splitNode(this, index)
+  #createProgressBar() {
+    return createElement("progress", { value: this.progress ?? 0, max: 100 })
   }
 
-  get #hasSingularChild() {
-    return this.getChildrenSize() === 1
+  #setDimensionsFromImage({ width, height }) {
+    if (this.#hasDimensions) return
+
+    this.patchAndRewriteHistory({ width, height });
   }
 
-  get #galleryClassNames() {
-    return `attachment-gallery attachment-gallery--${this.getChildrenSize()}`
+  get #hasDimensions() {
+    return Boolean(this.width && this.height)
   }
-}
 
-function $createImageGalleryNode() {
-  return new ImageGalleryNode()
-}
+  async #startUploadIfNeeded() {
+    if (this.#uploadStarted) return
+    if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
 
-function $isImageGalleryNode(node) {
-  return node instanceof ImageGalleryNode
-}
+    this.#setUploadStarted();
 
-function $findOrCreateGalleryForImage(node) {
-  if (!ImageGalleryNode.canCollapseWith(node)) return null
+    const { DirectUpload } = await import('@rails/activestorage');
 
-  const existingGallery = $getNearestNodeOfType(node, ImageGalleryNode);
-  return existingGallery ?? $wrapNodeInElement(node, $createImageGalleryNode)
-}
+    const upload = new DirectUpload(this.file, this.uploadUrl, this);
+    upload.delegate = this.#createUploadDelegate();
 
-class Uploader {
-  #files
+    this.#dispatchEvent("lexxy:upload-start", { file: this.file });
 
-  static for(editorElement, files) {
-    const UploaderKlass = GalleryUploader.handle(editorElement, files) ? GalleryUploader : Uploader;
-    return new UploaderKlass(editorElement, files)
+    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);
+        });
+      }
+    });
   }
 
-  constructor(editorElement, files) {
-    this.#files = files;
-
-    this.editorElement = editorElement;
-    this.contents = editorElement.contents;
-    this.selection = editorElement.selection;
-  }
+  #createUploadDelegate() {
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
 
-  get files() {
-    return Array.from(this.#files)
-  }
+    return {
+      directUploadWillCreateBlobWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+      },
+      directUploadWillStoreFileWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
 
-  $uploadFiles() {
-    this.$createUploadNodes();
-    this.$insertUploadNodes();
+        const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
+        request.upload.addEventListener("progress", uploadProgressHandler);
+      }
+    }
   }
 
-  $createUploadNodes() {
-    this.nodes = this.files.map(file =>
-      $createActionTextAttachmentUploadNode({
-        ...this.#nodeUrlProperties,
-        file: file,
-        contentType: file.type
-      })
-    );
+  #setUploadStarted() {
+    this.#setProgress(1);
   }
 
-  $insertUploadNodes() {
-    this.contents.insertAtCursor(...this.nodes);
+  #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 #nodeUrlProperties() {
-    return {
-      uploadUrl: this.editorElement.directUploadUrl,
-      blobUrlTemplate: this.editorElement.blobUrlTemplate
-    }
+  #setProgress(progress) {
+    this.patchAndRewriteHistory({ progress });
   }
-}
 
-class GalleryUploader extends Uploader {
-  #gallery
+  #handleUploadError(error) {
+    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
 
-  static handle(editorElement, files) {
-    return this.#isMultipleImageUpload(files) || this.#gallerySelection(editorElement.selection)
+    this.patchAndRewriteHistory({ uploadError: true });
   }
 
-  static #isMultipleImageUpload(files) {
-    let imageFileCount = 0;
-    for (const file of files) {
-      if (isPreviewableImage(file.type)) imageFileCount++;
-      if (imageFileCount > 1) return true
-    }
-    return false
-  }
+  $showUploadedAttachment(blob) {
+    const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
 
-  static #gallerySelection(selection) {
-    if (selection.isOnPreviewableImage) return true
+    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
+    this.replaceAndRewriteHistory(replacementNode);
 
-    const { node: selectedNode } = selection.selectedNodeWithOffset();
-    return $getNearestNodeOfType(selectedNode, ImageGalleryNode) !== null
+    return replacementNode.getKey()
   }
 
-  $insertUploadNodes() {
-    this.#findOrCreateGallery();
-    this.#insertImagesInGallery();
-    this.#insertNonImagesAfterGallery();
+  #toActionTextAttachmentNodeWith(blob, previewSrc) {
+    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
+    return conversion.toAttachmentNode()
   }
 
-  #findOrCreateGallery() {
-    if (this.selection.isOnPreviewableImage) {
-      this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
-    } else {
-      this.#gallery = $createImageGalleryNode();
-      this.contents.insertAtCursor(this.#gallery);
-    }
+  #dispatchEvent(name, detail) {
+    const figure = this.editor.getElementByKey(this.getKey());
+    if (figure) dispatch(figure, name, detail);
   }
+}
 
-  get #selectedNode() {
-    const { node } = this.selection.selectedNodeWithOffset();
-    return node
+class AttachmentNodeConversion {
+  constructor(uploadNode, blob, previewSrc) {
+    this.uploadNode = uploadNode;
+    this.blob = blob;
+    this.previewSrc = previewSrc;
   }
 
-  get #galleryInsertPosition() {
-    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
+  toAttachmentNode() {
+    return new ActionTextAttachmentNode({
+      ...this.uploadNode,
+      ...this.#propertiesFromBlob,
+      src: this.#src,
+      previewSrc: this.previewSrc,
+      pendingPreview: this.blob.previewable && !this.uploadNode.isPreviewableImage
+    })
   }
 
-  get #imageNodes() {
-    return this.nodes.filter(node => ImageGalleryNode.isValidChild(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 #nonImageNodes() {
-    return this.nodes.filter(node => !ImageGalleryNode.isValidChild(node))
+  get #src() {
+    return this.blob.previewable ? this.blob.url : this.#blobSrc
   }
 
-  #insertImagesInGallery() {
-    this.#gallery.splice(this.#galleryInsertPosition, 0, this.#imageNodes);
+  get #blobSrc() {
+    return this.uploadNode.blobUrlTemplate
+      .replace(":signed_id", this.blob.signed_id)
+      .replace(":filename", encodeURIComponent(this.blob.filename))
   }
+}
 
-  #insertNonImagesAfterGallery() {
-    let beforeNode = this.#gallery;
-
-    for (const node of this.#nonImageNodes) {
-      beforeNode.insertAfter(node);
-      beforeNode = node;
-    }
-  }
+function $createActionTextAttachmentUploadNode(...args) {
+  return new ActionTextAttachmentUploadNode(...args)
 }
 
 class NodeInserter {
@@ -4806,7 +5240,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);
       }
@@ -5015,7 +5449,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);
@@ -5029,6 +5463,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
 
@@ -5367,14 +5810,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.
@@ -5396,10 +5835,22 @@ class Contents {
 }
 
 class Clipboard {
+  #listeners = new ListenerBin()
+
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
     this.contents = editorElement.contents;
+
+    this.#registerPasteCommands();
+  }
+
+  dispose() {
+    this.editorElement = null;
+    this.editor = null;
+    this.contents = null;
+
+    this.#listeners.dispose();
   }
 
   paste(event) {
@@ -5424,6 +5875,25 @@ class Clipboard {
     return handled
   }
 
+  #registerPasteCommands() {
+    this.#listeners.track(
+      this.editor.registerCommand(PASTE_COMMAND, this.paste.bind(this), COMMAND_PRIORITY_NORMAL),
+      this.editor.registerCommand(
+        SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+        (payload) => this.#handleParsedClipboardNodes(payload),
+        COMMAND_PRIORITY_NORMAL
+      )
+    );
+  }
+
+  #handleParsedClipboardNodes({ nodes, selection }) {
+    const url = $bareUrlFromSingleLink(nodes);
+    if (!url) return false
+
+    this.#insertSingleLinkAt(selection, url);
+    return true
+  }
+
   #isPlainTextOrURLPasted(clipboardData) {
     return this.#isOnlyPlainTextPasted(clipboardData) || this.#isOnlyURLPasted(clipboardData)
   }
@@ -5473,9 +5943,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) {
@@ -5486,6 +5956,24 @@ class Clipboard {
     });
   }
 
+  #insertSingleLinkAt(selection, url) {
+    if (!$isRangeSelection(selection)) return
+
+    if (!selection.isCollapsed()) {
+      $toggleLink(null);
+      $toggleLink(url);
+      return
+    }
+
+    const linkNode = $createLinkNode(url).append($createTextNode(url));
+    selection.insertNodes([ linkNode ]);
+
+    // Defer the lexxy:insert-link event until after the active update commits;
+    // listeners may run editor mutations of their own.
+    const nodeKey = linkNode.getKey();
+    Promise.resolve().then(() => this.#dispatchLinkInsertEvent(nodeKey, { url }));
+  }
+
   #dispatchLinkInsertEvent(nodeKey, payload) {
     const linkManipulationMethods = {
       replaceLinkWith: (html, options) => this.contents.replaceNodeWithHTML(nodeKey, html, options),
@@ -5577,6 +6065,28 @@ class Clipboard {
   }
 }
 
+function $bareUrlFromSingleLink(nodes) {
+  if (nodes.length !== 1) return null
+
+  const node = nodes[0];
+  if ($isLinkNode(node)) return $bareUrlFromLink(node)
+
+  if ($isParagraphNode(node)) {
+    const children = node.getChildren();
+    if (children.length === 1 && $isLinkNode(children[0])) {
+      return $bareUrlFromLink(children[0])
+    }
+  }
+
+  return null
+}
+
+function $bareUrlFromLink(linkNode) {
+  const url = linkNode.getURL();
+  if (!url) return null
+  return linkNode.getTextContent() === url ? url : null
+}
+
 class Extensions {
 
   constructor(lexxyElement) {
@@ -5595,6 +6105,13 @@ class Extensions {
 
     this.#clearPreviousExtensionToolbarButtons(toolbar);
     this.#addExtensionToolbarButtons(toolbar);
+    toolbar.requestOverflowRefresh();
+  }
+
+  dispose() {
+    while (this.enabledExtensions.length) {
+      this.enabledExtensions.pop().dispose();
+    }
   }
 
   #clearPreviousExtensionToolbarButtons(toolbar) {
@@ -6002,9 +6519,15 @@ class TablesExtension extends LexxyExtension {
         setScrollableTablesActive(editor, true);
 
         return mergeRegister(
-          // Register Lexical table plugins
           registerTablePlugin(editor),
-          registerTableSelectionObserver(editor, true),
+
+          // Lexxy registers extensions before setRootElement(), but table
+          // drag-selection needs a root before wiring its pointer handlers.
+          editor.registerRootListener((rootElement) => {
+            if (rootElement) {
+              return registerTableSelectionObserver(editor, true)
+            }
+          }),
 
           // Bug fix: Prevent hardcoded background color (Lexical #8089)
           editor.registerNodeTransform(TableCellNode, (node) => {
@@ -6712,7 +7235,8 @@ class FormatEscapeExtension extends LexxyExtension {
             KEY_ARROW_DOWN_COMMAND,
             (event) => $handleArrowDownInCodeBlock(event),
             COMMAND_PRIORITY_NORMAL
-          )
+          ),
+          editor.registerNodeTransform(QuoteNode, $ensureQuoteHasParagraphChild)
         )
       }
     })
@@ -6765,6 +7289,13 @@ function $handleArrowDownInCodeBlock(event) {
   return false
 }
 
+function $ensureQuoteHasParagraphChild(quoteNode) {
+  if (!quoteNode.isEmpty()) return
+
+  quoteNode.append($createParagraphNode());
+  if ($containsRangeSelection(quoteNode)) quoteNode.getFirstChild().select();
+}
+
 class LinkOpenerExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsRichText
@@ -6828,6 +7359,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
@@ -6852,6 +7415,7 @@ class LexicalEditorElement extends HTMLElement {
     this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
     this.extensions = new Extensions(this);
+    this.#disposables.push(this.extensions);
 
     this.editor = this.#createEditor();
     this.#disposables.push(this.editor);
@@ -6864,6 +7428,8 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.selection);
 
     this.clipboard = new Clipboard(this);
+    this.#disposables.push(this.clipboard);
+
     this.adapter = new BrowserAdapter();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
@@ -6935,7 +7501,8 @@ class LexicalEditorElement extends HTMLElement {
       RewritableHistoryExtension,
       AttachmentsExtension,
       FormatEscapeExtension,
-      LinkOpenerExtension
+      LinkOpenerExtension,
+      PreventLexicalTripleClickExtension
     ]
   }
 
@@ -6966,6 +7533,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())
   }
@@ -7088,7 +7665,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)
@@ -7597,253 +8174,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;
-      button.setAttribute("aria-pressed", matchesSelection);
-    });
-
-    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 = "") {
@@ -8236,7 +8566,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #selectOption(listItem) {
-    this.#clearSelection();
+    this.#clearListItemSelection();
     listItem.toggleAttribute("aria-selected", true);
     listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
     listItem.focus();
@@ -8246,18 +8576,28 @@ class LexicalPromptElement extends HTMLElement {
       this.#editorElement.focus();
     });
 
-    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
-    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
-    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
+    this.#setEditorAssociationAttribute("aria-controls", this.popoverElement.id);
+    this.#setEditorAssociationAttribute("aria-activedescendant", listItem.id);
+    this.#setEditorAssociationAttribute("aria-haspopup", "listbox");
   }
 
-  #clearSelection() {
+  #clearListItemSelection() {
     this.#listItemElements.forEach((item) => { item.toggleAttribute("aria-selected", false); });
+  }
+
+  #clearSelection() {
+    this.#clearListItemSelection();
     this.#editorContentElement.removeAttribute("aria-controls");
     this.#editorContentElement.removeAttribute("aria-activedescendant");
     this.#editorContentElement.removeAttribute("aria-haspopup");
   }
 
+  #setEditorAssociationAttribute(name, value) {
+    if (this.#editorContentElement.getAttribute(name) !== value) {
+      this.#editorContentElement.setAttribute(name, value);
+    }
+  }
+
   #positionPopover() {
     const { x, y, fontSize } = this.#selection.cursorPosition;
     const editorRect = this.#editorElement.getBoundingClientRect();
@@ -8353,7 +8693,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);
   }
@@ -8435,7 +8775,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) {
@@ -9414,14 +9754,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 ]) => {