@37signals/lexxy 0.9.3-beta → 0.9.4-beta

package/dist/lexxy.esm.js

@@ -1,119 +1,33 @@
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markup-templating';
-import 'prismjs/components/prism-ruby';
-import 'prismjs/components/prism-php';
-import 'prismjs/components/prism-go';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-diff';
+import { createElement, extractPlainTextFromHtml, 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, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, mergeRegister as mergeRegister$1, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode, $ensureForwardRangeSelection } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, ParagraphNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, $getChildCaretAtIndex, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
-import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, registerList } from '@lexical/list';
+import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
-import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
+import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
-import { createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
-export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-diff';
 
-// Configure Prism for manual highlighting mode
-// This must be set before importing prismjs
-window.Prism = window.Prism || {};
-window.Prism.manual = true;
-
-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 arePlainHashes(...values) {
-  return values.every(value => value && value.constructor == Object)
-}
-
-class Configuration {
-  #tree = {}
-
-  constructor(...configs) {
-    this.merge(...configs);
-  }
-
-  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 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,
-    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);
-  }
-};
-
-const ALLOWED_HTML_TAGS = [ "a", "b", "blockquote", "br", "code", "div", "em",
-  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "u", "ul", "table", "tbody", "tr", "th", "td" ];
-
-const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
-  "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
-  "previewable", "sgid", "src", "style", "title", "url", "width" ];
+const ALLOWED_HTML_ATTRIBUTES = [ "class", "contenteditable", "href", "src", "style", "title" ];
 
 const ALLOWED_STYLE_PROPERTIES = [ "color", "background-color" ];
 
@@ -144,10 +58,22 @@ DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   }
 });
 
-function buildConfig() {
+function buildConfig(allowedElements) {
+  const tagAttributes = {};
+
+  for (const element of allowedElements) {
+    if (typeof element === "string") {
+      tagAttributes[element] ||= [];
+    } else {
+      tagAttributes[element.tag] ||= [];
+      tagAttributes[element.tag].push(...element.attributes);
+    }
+  }
+
   return {
-    ALLOWED_TAGS: ALLOWED_HTML_TAGS.concat(Lexxy.global.get("attachmentTagName")),
+    ALLOWED_TAGS: Object.keys(tagAttributes),
     ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
+    ADD_ATTR: (attribute, tag) => tagAttributes[tag]?.includes(attribute),
     ADD_URI_SAFE_ATTR: [ "caption", "filename" ],
     SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
   }
@@ -158,6 +84,34 @@ function getNonce() {
   return element?.content
 }
 
+// Register an event listener with a return function to deregister the listener. Both the element and
+// the listener are WeakRefs so neither is pinned in memory by the deregister function.
+function registerEventListener(element, type, listener, options) {
+  element.addEventListener(type, listener, options);
+  const elementRef = new WeakRef(element);
+  const listenerRef = new WeakRef(listener);
+
+  return function deregisterListener() {
+    const listener = listenerRef.deref();
+    if (listener) elementRef.deref()?.removeEventListener(type, listener, options);
+  }
+}
+
+class ListenerBin {
+  #listeners = []
+
+  track(...listeners) {
+    this.#listeners.push(...listeners);
+  }
+
+  dispose() {
+    while (this.#listeners.length) {
+      const teardown = this.#listeners.pop();
+      teardown();
+    }
+  }
+}
+
 function handleRollingTabIndex(elements, event) {
   const previousActiveElement = document.activeElement;
 
@@ -293,6 +247,11 @@ var ToolbarIcons = {
     <path d="M9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13C2 12.4477 2.44772 12 3 12H9ZM15 8C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H3C2.44772 10 2 9.55228 2 9C2 8.44772 2.44772 8 3 8H15ZM15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H15Z"/>
   </svg>`,
 
+  "clearFormatting":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.0607 2.07533C10.8417 1.29432 12.1078 1.2943 12.8888 2.07533L16.424 5.61049C17.205 6.39154 17.205 7.65854 16.424 8.43959L9.44937 15.4142C9.07435 15.7891 8.5656 16.0001 8.03531 16.0001H5.0148C4.55074 16.0001 4.10309 15.8385 3.74722 15.547L3.60074 15.4142L1.57534 13.3888C0.79431 12.6078 0.794336 11.3417 1.57534 10.5607L10.0607 2.07533ZM2.98941 11.9747L5.0148 14.0001H8.03531L9.71792 12.3165L6.18179 8.78139L2.98941 11.9747Z"/>
+  </svg>`,
+
   "highlight":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <path d="M16.4564 14.4272C17.1356 15.5592 16.3204 17.0002 15.0003 17.0004C13.68 17.0004 12.864 15.5593 13.5433 14.4272L15.0003 12.0004L16.4564 14.4272ZM5.1214 1.70746C5.51192 1.31693 6.14494 1.31693 6.53546 1.70746L9.7171 4.8891L13.2532 8.42426C14.2295 9.40056 14.2295 10.9841 13.2532 11.9604L9.7171 15.4955C8.74078 16.4718 7.15822 16.4718 6.18195 15.4955L2.64679 11.9604C1.67048 10.9841 1.67048 9.40057 2.64679 8.42426L6.18195 4.8891C6.30299 4.76805 6.43323 4.66177 6.57062 4.57074L5.1214 3.12152C4.73091 2.73104 4.73099 2.09799 5.1214 1.70746ZM8.30304 6.30316C8.10776 6.10815 7.79119 6.10799 7.59601 6.30316L4.06085 9.83929L3.9964 9.91742C3.88661 10.0838 3.88645 10.3019 3.9964 10.4682L4.02277 10.5004H11.8763C12.0312 10.3043 12.02 10.0205 11.8392 9.83929L8.30304 6.30316Z"/>
@@ -366,6 +325,7 @@ var ToolbarIcons = {
 
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
+  #listeners = new ListenerBin()
 
   constructor() {
     super();
@@ -386,12 +346,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   dispose() {
-    this.#uninstallResizeObserver();
-    this.#unbindButtons();
-    this.#unbindHotkeys();
-    this.#unbindFocusListeners();
-    this.unregisterSelectionListener?.();
-    this.unregisterHistoryListener?.();
+    this.#listeners.dispose();
 
     this.editorElement = null;
     this.editor = null;
@@ -450,23 +405,13 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #installResizeObserver() {
-    this.resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
-    this.resizeObserver.observe(this);
-  }
-
-  #uninstallResizeObserver() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
+    const resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
+    resizeObserver.observe(this);
+    this.#listeners.track(() => resizeObserver.disconnect());
   }
 
   #bindButtons() {
-    this.addEventListener("click", this.#handleButtonClicked);
-  }
-
-  #unbindButtons() {
-    this.removeEventListener("click", this.#handleButtonClicked);
+    this.#listeners.track(registerEventListener(this, "click", this.#handleButtonClicked));
   }
 
   #handleButtonClicked = (event) => {
@@ -491,11 +436,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindHotkeys() {
-    this.editorElement.addEventListener("keydown", this.#handleHotkey);
-  }
-
-  #unbindHotkeys() {
-    this.editorElement?.removeEventListener("keydown", this.#handleHotkey);
+    this.#listeners.track(registerEventListener(this.editorElement, "keydown", this.#handleHotkey));
   }
 
   #handleHotkey = (event) => {
@@ -523,15 +464,11 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindFocusListeners() {
-    this.editorElement.addEventListener("lexxy:focus", this.#handleEditorFocus);
-    this.editorElement.addEventListener("lexxy:blur", this.#handleEditorBlur);
-    this.addEventListener("keydown", this.#handleKeydown);
-  }
-
-  #unbindFocusListeners() {
-    this.editorElement?.removeEventListener("lexxy:focus", this.#handleEditorFocus);
-    this.editorElement?.removeEventListener("lexxy:blur", this.#handleEditorBlur);
-    this.removeEventListener("keydown", this.#handleKeydown);
+    this.#listeners.track(
+      registerEventListener(this.editorElement, "lexxy:focus", this.#handleEditorFocus),
+      registerEventListener(this.editorElement, "lexxy:blur", this.#handleEditorBlur),
+      registerEventListener(this, "keydown", this.#handleKeydown)
+    );
   }
 
   #handleEditorFocus = () => {
@@ -554,18 +491,18 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorSelectionChanges() {
-    this.unregisterSelectionListener = this.editor.registerUpdateListener(() => {
+    this.#listeners.track(this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
         this.#closeDropdowns();
       });
-    });
+    }));
   }
 
   #monitorHistoryChanges() {
-    this.unregisterHistoryListener = this.editor.registerUpdateListener(() => {
+    this.#listeners.track(this.editor.registerUpdateListener(() => {
       this.#updateUndoRedoButtonStates();
-    });
+    }));
   }
 
   #updateUndoRedoButtonStates() {
@@ -755,6 +692,10 @@ class LexicalToolbarElement extends HTMLElement {
           <button type="button" name="underline" data-command="underline" title="Underline">
             ${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">
+            ${ToolbarIcons.clearFormatting} <span>Clear formatting</span>
+          </button>
         </div>
       </details>
 
@@ -773,13 +714,11 @@ class LexicalToolbarElement extends HTMLElement {
           ${ToolbarIcons.link}
         </summary>
         <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
-          <form method="dialog">
-            <input type="url" placeholder="Enter a URL…" class="input">
-            <div class="lexxy-editor__toolbar-dropdown-actions">
-              <button type="submit" class="lexxy-editor__toolbar-button" value="link">Link</button>
-              <button type="button" class="lexxy-editor__toolbar-button" value="unlink">Unlink</button>
-            </div>
-          </form>
+          <input type="url" placeholder="Enter a URL…" class="input">
+          <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>
 
@@ -824,6 +763,96 @@ class LexicalToolbarElement extends HTMLElement {
   }
 }
 
+class HorizontalDividerNode extends DecoratorNode {
+  static getType() {
+    return "horizontal_divider"
+  }
+
+  static clone(node) {
+    return new HorizontalDividerNode(node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new HorizontalDividerNode()
+  }
+
+  static importDOM() {
+    return {
+      "hr": (hr) => {
+        return {
+          conversion: () => ({
+            node: new HorizontalDividerNode()
+          }),
+          priority: 1
+        }
+      }
+    }
+  }
+
+  constructor(key) {
+    super(key);
+  }
+
+  createDOM() {
+    const figure = createElement("figure", { className: "horizontal-divider" });
+    const hr = createElement("hr");
+
+    figure.appendChild(hr);
+
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
+
+    return figure
+  }
+
+  updateDOM() {
+    return true
+  }
+
+  getTextContent() {
+    return "┄\n\n"
+  }
+
+  isInline() {
+    return false
+  }
+
+  exportDOM() {
+    const hr = createElement("hr");
+    return { element: hr }
+  }
+
+  exportJSON() {
+    return {
+      type: "horizontal_divider",
+      version: 1
+    }
+  }
+
+  decorate() {
+    return null
+  }
+}
+
+const HORIZONTAL_DIVIDER = {
+  dependencies: [ HorizontalDividerNode ],
+  export: (node) => {
+    return node instanceof HorizontalDividerNode ? "---" : null
+  },
+  regExpStart: /^-{3,}\s?$/,
+  replace: (parentNode, children, match, endMatch, linesInBetween, isImport) => {
+    const hrNode = new HorizontalDividerNode();
+    parentNode.replace(hrNode);
+
+    if (!isImport) {
+      const paragraph = $createParagraphNode();
+      hrNode.insertAfter(paragraph);
+      paragraph.select();
+    }
+  },
+  type: "multiline-element"
+};
+
 const PUNCTUATION_OR_SPACE = /[^\w]/;
 
 // Supplements Lexical's built-in registerMarkdownShortcuts to handle the case
@@ -1053,75 +1082,92 @@ var theme = {
   }
 };
 
-class HorizontalDividerNode extends DecoratorNode {
-  static getType() {
-    return "horizontal_divider"
-  }
-
-  static clone(node) {
-    return new HorizontalDividerNode(node.__key)
-  }
-
-  static importJSON(serializedNode) {
-    return new HorizontalDividerNode()
-  }
-
-  static importDOM() {
-    return {
-      "hr": (hr) => {
-        return {
-          conversion: () => ({
-            node: new HorizontalDividerNode()
-          }),
-          priority: 1
-        }
-      }
+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);
     }
   }
 
-  constructor(key) {
-    super(key);
-  }
-
-  createDOM() {
-    const figure = createElement("figure", { className: "horizontal-divider" });
-    const hr = createElement("hr");
+  return result
+}
 
-    figure.appendChild(hr);
+function arePlainHashes(...values) {
+  return values.every(value => value && value.constructor == Object)
+}
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+class Configuration {
+  #tree = {}
 
-    return figure
+  constructor(...configs) {
+    this.merge(...configs);
   }
 
-  updateDOM() {
-    return true
+  merge(...configs) {
+    return this.#tree = configs.reduce(deepMerge, this.#tree)
   }
 
-  getTextContent() {
-    return "┄\n\n"
+  get(path) {
+    const keys = path.split(".");
+    return keys.reduce((node, key) => node[key], this.#tree)
   }
+}
 
-  isInline() {
-    return false
-  }
+function range(from, to) {
+  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
+}
 
-  exportDOM() {
-    const hr = createElement("hr");
-    return { element: hr }
-  }
+const global = new Configuration({
+  attachmentTagName: "action-text-attachment",
+  attachmentContentTypeNamespace: "actiontext",
+  authenticatedUploads: false,
+  extensions: []
+});
 
-  exportJSON() {
-    return {
-      type: "horizontal_divider",
-      version: 1
+const presets = new Configuration({
+  default: {
+    attachments: true,
+    markdown: true,
+    multiLine: true,
+    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": []
+      }
     }
   }
+});
 
-  decorate() {
-    return null
+var Lexxy = {
+  global,
+  presets,
+  configure({ global: newGlobal, ...newPresets }) {
+    if (newGlobal) {
+      global.merge(newGlobal);
+    }
+    presets.merge(newPresets);
   }
+};
+
+function sanitize(html, allowedElements) {
+  return DOMPurify.sanitize(html, buildConfig(allowedElements))
+}
+
+// Sanitize HTML for custom attachment content (mentions, cards, etc.).
+// Uses DOMPurify defaults to strip XSS vectors (scripts, event handlers)
+// while preserving the richer tag set that server-rendered attachment
+// content legitimately uses (e.g. <span>, <div>, <img>).
+function sanitizeAttachmentContent(html) {
+  return DOMPurify.sanitize(html)
 }
 
 function bytesToHumanSize(bytes) {
@@ -1216,7 +1262,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   createDOM() {
     const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
-    figure.insertAdjacentHTML("beforeend", this.innerHtml);
+    figure.insertAdjacentHTML("beforeend", sanitizeAttachmentContent(this.innerHtml));
 
     const deleteButton = createElement("lexxy-node-delete-button");
     figure.appendChild(deleteButton);
@@ -1514,6 +1560,10 @@ class LexxyExtension {
     return null
   }
 
+  get allowedElements() {
+    return []
+  }
+
   initializeToolbar(_lexxyToolbar) {
 
   }
@@ -1736,6 +1786,13 @@ function $applyHighlightRangesToCodeNode(codeNode, highlights) {
     const childRanges = $buildChildRanges(codeNode);
 
     for (const { node, start: nodeStart, end: nodeEnd } of childRanges) {
+      // Skip plain TextNodes: only CodeHighlightNodes can be split into
+      // styled replacements here. The retokenizer normally converts any
+      // TextNode children back to CodeHighlightNodes before this runs,
+      // but the iteration over $buildChildRanges has to keep counting
+      // them so character offsets stay aligned with the saved ranges.
+      if (!$isCodeHighlightNode(node)) continue
+
       // Check if this child overlaps with the highlight range
       const overlapStart = Math.max(hlStart, nodeStart);
       const overlapEnd = Math.min(hlEnd, nodeEnd);
@@ -1784,7 +1841,7 @@ function $buildChildRanges(codeNode) {
   let charOffset = 0;
 
   for (const child of codeNode.getChildren()) {
-    if ($isCodeHighlightNode(child)) {
+    if ($isCodeHighlightNode(child) || $isTextNode(child)) {
       const text = child.getTextContent();
       childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
       charOffset += text.length;
@@ -1797,6 +1854,23 @@ function $buildChildRanges(codeNode) {
   return childRanges
 }
 
+// Extract highlight ranges from the Lexical node tree of a CodeNode.
+// This mirrors extractHighlightRanges (which works on DOM elements during
+// HTML import) but reads from live CodeHighlightNode children instead.
+function $extractHighlightRangesFromCodeNode(codeNode) {
+  const ranges = [];
+  const childRanges = $buildChildRanges(codeNode);
+
+  for (const { node, start, end } of childRanges) {
+    const style = node.getStyle();
+    if (style && hasHighlightStyles(style)) {
+      ranges.push({ start, end, style });
+    }
+  }
+
+  return ranges
+}
+
 function buildCanonicalizers(config) {
   return [
     new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
@@ -1824,15 +1898,23 @@ function $toggleSelectionStyles(editor, styles) {
 function $selectionIsInCodeBlock(selection) {
   const nodes = selection.getNodes();
   return nodes.some((node) => {
-    const parent = $isCodeHighlightNode(node) ? node.getParent() : node;
-    return $isCodeNode(parent)
+    // A text node inside a code block may be either a CodeHighlightNode
+    // (after retokenization) or a plain TextNode (after splitText or before
+    // the retokenizer has run). Check the parent in both cases.
+    if ($isCodeHighlightNode(node) || $isTextNode(node)) {
+      return $isCodeNode(node.getParent())
+    }
+    return $isCodeNode(node)
   })
 }
 
 function $patchCodeHighlightStyles(editor, selection, patch) {
-  // Capture selection state and node keys before the nested update
+  // Capture selection state and node keys before the nested update.
+  // Accept both CodeHighlightNode and TextNode children of a CodeNode
+  // because splitText creates TextNode instances and the retokenizer
+  // may not have converted them back to CodeHighlightNodes yet.
   const nodeKeys = selection.getNodes()
-    .filter((node) => $isCodeHighlightNode(node))
+    .filter((node) => ($isCodeHighlightNode(node) || $isTextNode(node)) && $isCodeNode(node.getParent()))
     .map((node) => ({
       key: node.getKey(),
       startOffset: $getNodeSelectionOffsets(node, selection)[0],
@@ -1846,14 +1928,18 @@ function $patchCodeHighlightStyles(editor, selection, patch) {
   // are committed before editor.focus() triggers a second update cycle
   // that would re-run transforms and wipe out the styles.
   editor.update(() => {
+    const affectedCodeNodes = new Set();
+
     for (const { key, startOffset, endOffset, textSize } of nodeKeys) {
       const node = $getNodeByKey(key);
-      if (!node || !$isCodeHighlightNode(node)) continue
+      if (!node) continue
 
       const parent = node.getParent();
       if (!$isCodeNode(parent)) continue
       if (startOffset === endOffset) continue
 
+      affectedCodeNodes.add(parent);
+
       if (startOffset === 0 && endOffset === textSize) {
         $applyStylePatchToNode(node, patch);
       } else {
@@ -1862,6 +1948,17 @@ function $patchCodeHighlightStyles(editor, selection, patch) {
         $applyStylePatchToNode(targetNode, patch);
       }
     }
+
+    // After applying styles, save highlight ranges for each affected CodeNode.
+    // The code retokenizer will replace the styled nodes with fresh unstyled
+    // tokens when transforms run. The pending highlights are picked up by the
+    // CodeNode mutation listener and reapplied after retokenization.
+    for (const codeNode of affectedCodeNodes) {
+      const ranges = $extractHighlightRangesFromCodeNode(codeNode);
+      if (ranges.length > 0) {
+        $getPendingHighlights(editor).set(codeNode.getKey(), ranges);
+      }
+    }
   }, { skipTransforms: true, discrete: true });
 }
 
@@ -1985,6 +2082,7 @@ const COMMANDS = [
   "setFormatHeadingMedium",
   "setFormatHeadingSmall",
   "setFormatParagraph",
+  "clearFormatting",
   "insertUnorderedList",
   "insertOrderedList",
   "insertQuoteBlock",
@@ -2002,7 +2100,7 @@ const COMMANDS = [
 
 class CommandDispatcher {
   #selectionBeforeDrag = null
-  #unregister = []
+  #listeners = new ListenerBin()
 
   static configureFor(editorElement) {
     return new CommandDispatcher(editorElement)
@@ -2084,7 +2182,7 @@ class CommandDispatcher {
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
       this.contents.applyParagraphFormat();
     } else {
-      this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      this.contents.applyUnorderedListFormat();
     }
   }
 
@@ -2097,7 +2195,7 @@ class CommandDispatcher {
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
       this.contents.applyParagraphFormat();
     } else {
-      this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      this.contents.applyOrderedListFormat();
     }
   }
 
@@ -2195,6 +2293,10 @@ class CommandDispatcher {
     this.contents.applyParagraphFormat();
   }
 
+  dispatchClearFormatting() {
+    this.contents.clearFormatting();
+  }
+
   dispatchUploadImage() {
     this.#dispatchUploadAttachment("image/*,video/*");
   }
@@ -2236,10 +2338,7 @@ class CommandDispatcher {
   }
 
   dispose() {
-    while (this.#unregister.length) {
-      const unregister = this.#unregister.pop();
-      unregister();
-    }
+    this.#listeners.dispose();
   }
 
   #registerCommands() {
@@ -2252,7 +2351,7 @@ class CommandDispatcher {
   }
 
   #registerCommandHandler(command, priority, handler) {
-    this.#unregister.push(this.editor.registerCommand(command, handler, priority));
+    this.#listeners.track(this.editor.registerCommand(command, handler, priority));
   }
 
   #registerKeyboardCommands() {
@@ -2277,10 +2376,13 @@ class CommandDispatcher {
   #registerDragAndDropHandlers() {
     if (this.editorElement.supportsAttachments) {
       this.dragCounter = 0;
-      this.editor.getRootElement().addEventListener("dragover", this.#handleDragOver.bind(this));
-      this.editor.getRootElement().addEventListener("drop", this.#handleDrop.bind(this));
-      this.editor.getRootElement().addEventListener("dragenter", this.#handleDragEnter.bind(this));
-      this.editor.getRootElement().addEventListener("dragleave", this.#handleDragLeave.bind(this));
+      const root = this.editor.getRootElement();
+      this.#listeners.track(
+        registerEventListener(root, "dragover", this.#handleDragOver.bind(this)),
+        registerEventListener(root, "drop", this.#handleDrop.bind(this)),
+        registerEventListener(root, "dragenter", this.#handleDragEnter.bind(this)),
+        registerEventListener(root, "dragleave", this.#handleDragLeave.bind(this))
+      );
     }
   }
 
@@ -2509,13 +2611,15 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewable, altText, caption, contentType, fileName, fileSize, width, height }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
     super(key);
 
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
     this.src = src;
+    this.previewSrc = previewSrc;
     this.previewable = parseBoolean(previewable);
+    this.pendingPreview = pendingPreview;
     this.altText = altText || "";
     this.caption = caption || "";
     this.contentType = contentType || "";
@@ -2523,16 +2627,23 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.fileSize = fileSize;
     this.width = width;
     this.height = height;
+    this.uploadError = uploadError;
 
     this.editor = $getEditor();
   }
 
   createDOM() {
+    if (this.uploadError) return this.createDOMForError()
+    if (this.pendingPreview) return this.#createDOMForPendingPreview()
+
     const figure = this.createAttachmentFigure();
 
     if (this.isPreviewableAttachment) {
       figure.appendChild(this.#createDOMForImage());
       figure.appendChild(this.#createEditableCaption());
+    } else if (this.isVideo) {
+      figure.appendChild(this.#createDOMForFile());
+      figure.appendChild(this.#createEditableCaption());
     } else {
       figure.appendChild(this.#createDOMForFile());
       figure.appendChild(this.#createDOMForNotImage());
@@ -2541,7 +2652,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return figure
   }
 
-  updateDOM(_prevNode, dom) {
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
+
     const caption = dom.querySelector("figcaption textarea");
     if (caption && this.caption) {
       caption.value = this.caption;
@@ -2598,6 +2711,13 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return null
   }
 
+  createDOMForError() {
+    const figure = this.createAttachmentFigure();
+    figure.classList.add("attachment--error");
+    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.fileName || "file"}` }));
+    return figure
+  }
+
   createAttachmentFigure(previewable = this.isPreviewableAttachment) {
     const figure = createAttachmentFigure(this.contentType, previewable, this.fileName);
     figure.draggable = true;
@@ -2617,32 +2737,147 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return isPreviewableImage(this.contentType)
   }
 
+  get isVideo() {
+    return this.contentType.startsWith("video/")
+  }
+
+  #createDOMForPendingPreview() {
+    const figure = this.createAttachmentFigure(false);
+    figure.appendChild(this.#createDOMForFile());
+    figure.appendChild(this.#createDOMForNotImage());
+    this.#pollForPreview(figure);
+    return figure
+  }
+
   #createDOMForImage(options = {}) {
-    const img = createElement("img", { src: this.src, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
+    const initialSrc = this.previewSrc || this.src;
+    const img = createElement("img", { src: initialSrc, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
 
     if (this.previewable && !this.isPreviewableImage) {
       img.onerror = () => this.#swapPreviewToFileDOM(img);
     }
 
+    if (this.previewSrc) {
+      this.#preloadAndSwapSrc(img);
+    }
+
     const container = createElement("div", { className: "attachment__container" });
     container.appendChild(img);
     return container
   }
 
+  #preloadAndSwapSrc(img) {
+    const previewSrc = this.previewSrc;
+    const serverImage = new Image();
+
+    serverImage.onload = () => this.#handleImageLoaded(img, previewSrc);
+    serverImage.onerror = () => this.#handleImageLoadError(previewSrc);
+    serverImage.src = this.src;
+  }
+
+  #handleImageLoaded(img, previewSrc) {
+    img.src = this.src;
+    this.editor.update(() => {
+      if (this.isAttached()) this.getWritable().previewSrc = null;
+    }, { tag: this.#backgroundUpdateTags });
+    this.#revokePreviewSrc(previewSrc);
+  }
+
+  #handleImageLoadError(previewSrc) {
+    this.editor.update(() => {
+      if (this.isAttached()) {
+        this.getWritable().previewSrc = null;
+        this.getWritable().uploadError = true;
+      }
+    }, { tag: this.#backgroundUpdateTags });
+    this.#revokePreviewSrc(previewSrc);
+  }
+
+  get #backgroundUpdateTags() {
+    const rootElement = this.editor.getRootElement();
+    const editorHasFocus = rootElement !== null && rootElement.contains(document.activeElement);
+
+    if (editorHasFocus) {
+      return SILENT_UPDATE_TAGS
+    } else {
+      return [ ...SILENT_UPDATE_TAGS, SKIP_DOM_SELECTION_TAG ]
+    }
+  }
+
+  #revokePreviewSrc(previewSrc) {
+    if (previewSrc?.startsWith("blob:")) URL.revokeObjectURL(previewSrc);
+  }
+
   #swapPreviewToFileDOM(img) {
     const figure = img.closest("figure.attachment");
     if (!figure) return
 
-    figure.className = figure.className.replace("attachment--preview", "attachment--file");
+    this.#swapFigureContent(figure, "attachment--preview", "attachment--file", () => {
+      figure.appendChild(this.#createDOMForFile());
+      figure.appendChild(this.#createDOMForNotImage());
+    });
+  }
+
+  #pollForPreview(figure) {
+    let attempt = 0;
+    const maxAttempts = 10;
 
-    const container = figure.querySelector(".attachment__container");
-    if (container) container.remove();
+    const tryLoad = () => {
+      if (!this.editor.read(() => this.isAttached())) return
 
-    const caption = figure.querySelector("figcaption");
-    if (caption) caption.remove();
+      const img = new Image();
+      const cacheBustedSrc = `${this.src}${this.src.includes("?") ? "&" : "?"}_=${Date.now()}`;
 
-    figure.appendChild(this.#createDOMForFile());
-    figure.appendChild(this.#createDOMForNotImage());
+      img.onload = () => {
+        if (!this.editor.read(() => this.isAttached())) return
+
+        // The placeholder is a file-type icon SVG (86×100). A real thumbnail
+        // generated from PDF/video content is significantly larger.
+        if (img.naturalWidth > 150 && img.naturalHeight > 150) {
+          this.#swapToPreviewDOM(figure, cacheBustedSrc);
+        } else {
+          retry();
+        }
+      };
+      img.onerror = () => retry();
+      img.src = cacheBustedSrc;
+    };
+
+    const retry = () => {
+      attempt++;
+      if (attempt < maxAttempts && this.editor.read(() => this.isAttached())) {
+        const delay = Math.min(2000 * Math.pow(1.5, attempt), 15000);
+        setTimeout(tryLoad, delay);
+      }
+    };
+
+    // Give the server time to start processing before the first attempt
+    setTimeout(tryLoad, 3000);
+  }
+
+  #swapToPreviewDOM(figure, previewSrc) {
+    this.#swapFigureContent(figure, "attachment--file", "attachment--preview", () => {
+      const img = createElement("img", { src: previewSrc, draggable: false, alt: this.altText });
+      img.onerror = () => this.#swapPreviewToFileDOM(img);
+      const container = createElement("div", { className: "attachment__container" });
+      container.appendChild(img);
+      figure.appendChild(container);
+      figure.appendChild(this.#createEditableCaption());
+    });
+
+    this.editor.update(() => {
+      if (this.isAttached()) this.getWritable().pendingPreview = false;
+    }, { tag: this.#backgroundUpdateTags });
+  }
+
+  #swapFigureContent(figure, fromClass, toClass, renderContent) {
+    figure.className = figure.className.replace(fromClass, toClass);
+
+    for (const child of [ ...figure.querySelectorAll(".attachment__container, .attachment__icon, figcaption") ]) {
+      child.remove();
+    }
+
+    renderContent();
   }
 
   get #imageDimensions() {
@@ -2733,7 +2968,7 @@ function $isActionTextAttachmentNode(node) {
 }
 
 class Selection {
-  #unregister = []
+  #listeners = new ListenerBin()
 
   constructor(editorElement) {
     this.editorElement = editorElement;
@@ -2884,6 +3119,15 @@ class Selection {
     const anchorElement = anchorNode.getTopLevelElement();
     if (!anchorElement) return false
 
+    // When anchor and focus are in different block-level children of the same
+    // top-level element (e.g. two paragraphs inside a blockquote), this is a
+    // multi-line selection, not a single-line one.
+    const anchorBlock = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParent();
+    const focusBlock = $isElementNode(focusNode) ? focusNode : focusNode.getParent();
+    if (anchorBlock !== focusBlock && anchorBlock !== anchorElement) {
+      return false
+    }
+
     const nodes = selection.getNodes();
     for (const node of nodes) {
       if ($isLineBreakNode(node)) {
@@ -2997,10 +3241,7 @@ class Selection {
     this.editor = null;
     this.previouslySelectedKeys = null;
 
-    while (this.#unregister.length) {
-      const unregister = this.#unregister.pop();
-      unregister();
-    }
+    this.#listeners.dispose();
   }
 
   // When all inline code text is deleted, Lexical's selection retains the stale
@@ -3018,7 +3259,7 @@ class Selection {
   // detects that stale state and clears it so newly typed text won't be
   // code-formatted.
   #clearStaleInlineCodeFormat() {
-    this.#unregister.push(this.editor.registerUpdateListener(({ editorState, tags }) => {
+    this.#listeners.track(this.editor.registerUpdateListener(({ editorState, tags }) => {
       if (tags.has("history-merge") || tags.has("skip-dom-selection")) return
 
       let isStale = false;
@@ -3066,7 +3307,7 @@ class Selection {
   }
 
   #processSelectionChangeCommands() {
-    this.#unregister.push(mergeRegister$1(
+    this.#listeners.track(
       this.editor.registerCommand(KEY_ARROW_LEFT_COMMAND, this.#selectPreviousNode.bind(this), COMMAND_PRIORITY_LOW),
       this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#selectNextNode.bind(this), COMMAND_PRIORITY_LOW),
       this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW),
@@ -3077,21 +3318,21 @@ class Selection {
       this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
         this.current = $getSelection();
       }, COMMAND_PRIORITY_LOW)
-    ));
+    );
   }
 
   #listenForNodeSelections() {
-    this.#unregister.push(this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
+    this.#listeners.track(this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
       if (!isDOMNode(target)) return false
 
       const targetNode = $getNearestNodeFromDOMNode(target);
       return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
     }, COMMAND_PRIORITY_LOW));
 
-    const moveNextLineHandler = () => this.#selectOrAppendNextLine();
     const rootElement = this.editor.getRootElement();
-    rootElement.addEventListener("lexxy:internal:move-to-next-line", moveNextLineHandler);
-    this.#unregister.push(() => rootElement.removeEventListener("lexxy:internal:move-to-next-line", moveNextLineHandler));
+    this.#listeners.track(
+      registerEventListener(rootElement, "lexxy:internal:move-to-next-line", () => this.#selectOrAppendNextLine())
+    );
   }
 
   #containEditorFocus() {
@@ -3296,13 +3537,20 @@ class Selection {
   }
 
   // When backspace is pressed on an empty list item that has siblings,
-  // remove the empty item and place the cursor appropriately. Without this,
-  // Lexical's default collapseAtStart converts the empty item into a paragraph
-  // above the list, causing the cursor to jump away from the list content.
+  // handle the deletion appropriately:
+  //
+  // - Middle/end items (has previous sibling): remove the empty item and
+  //   place the cursor at the end of the previous sibling. Without this,
+  //   Lexical's default collapseAtStart converts the empty item into a
+  //   paragraph above the list, causing the cursor to jump away.
+  //
+  // - First item (no previous sibling): convert to a paragraph above the
+  //   list, matching the standard "unwrap list formatting" behavior that
+  //   users expect from pressing backspace at the start of a list item.
   //
-  // This only applies when there IS a next sibling — if the empty item is the
-  // last one in the list, Lexical's default (convert to paragraph) provides
-  // the standard "exit list" behavior.
+  // When the empty item is the last/only one in the list, we return false
+  // and let Lexical's default (convert to paragraph) provide the standard
+  // "exit list" behavior.
   #removeEmptyListItem() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
@@ -3319,11 +3567,17 @@ class Selection {
     const previousSibling = listItem.getPreviousSibling();
     if (previousSibling) {
       previousSibling.selectEnd();
-    } else {
-      nextSibling.selectStart();
+      listItem.remove();
+      return true
     }
 
+    const listNode = $getNearestNodeOfType(listItem, ListNode);
+    if (!listNode) return false
+
+    const paragraph = $createParagraphNode();
+    listNode.insertBefore(paragraph);
     listItem.remove();
+    paragraph.selectStart();
     return true
   }
 
@@ -3583,10 +3837,6 @@ class Selection {
   }
 }
 
-function sanitize(html) {
-  return DOMPurify.sanitize(html, buildConfig())
-}
-
 class EditorConfiguration {
   #editorElement
   #config
@@ -3629,6 +3879,107 @@ class EditorConfiguration {
   }
 }
 
+class ProvisionalParagraphNode extends ParagraphNode {
+  $config() {
+    return this.config("provisonal_paragraph", {
+      extends: ParagraphNode,
+      importDOM: () => null,
+      $transform: (node) => {
+        node.concretizeIfEdited(node);
+        node.removeUnlessRequired(node);
+      }
+    })
+  }
+
+  static neededBetween(nodeBefore, nodeAfter) {
+    return !$isSelectableElement(nodeBefore, "next")
+      && !$isSelectableElement(nodeAfter, "previous")
+  }
+
+  createDOM(editor) {
+    const p = super.createDOM(editor);
+    const selected = this.isSelected($getSelection());
+    p.classList.add("provisional-paragraph");
+    p.classList.toggle("hidden", !selected);
+    return p
+  }
+
+  updateDOM(_prevNode, dom) {
+    const selected = this.isSelected($getSelection());
+    dom.classList.toggle("hidden", !selected);
+    return false
+  }
+
+  getTextContent() {
+    return ""
+  }
+
+  exportDOM() {
+    return {
+      element: null
+    }
+  }
+
+  // override as Lexical has an interesting view of collapsed selection in ElementNodes
+  // https://github.com/facebook/lexical/blob/f1e4f66014377b1f2595aec2b0ee17f5b7ef4dfc/packages/lexical/src/LexicalNode.ts#L646
+  isSelected(selection = null) {
+    const targetSelection = selection || $getSelection();
+    if (!targetSelection) return false
+
+    if (targetSelection.getNodes().some(node => node.is(this) || this.isParentOf(node))) return true
+
+    // A collapsed range selection on the parent element at an offset adjacent to
+    // this node means the caret is visually at this paragraph's position. Treat it
+    // as selected so the paragraph is visible and the caret renders correctly.
+    //
+    // Both the offset matching our index (cursor just before us) and index + 1
+    // (cursor just after us) count, because the provisional paragraph is an
+    // invisible spacer: the browser resolves both offsets to the same visual spot.
+    if ($isRangeSelection(targetSelection) && targetSelection.isCollapsed()) {
+      const { anchor } = targetSelection;
+      const parent = this.getParent();
+      if (parent && anchor.getNode().is(parent) && anchor.type === "element") {
+        const index = this.getIndexWithinParent();
+        return anchor.offset === index || anchor.offset === index + 1
+      }
+    }
+
+    return false
+  }
+
+  removeUnlessRequired(self = this.getLatest()) {
+    if (!self.required) self.remove();
+  }
+
+  concretizeIfEdited(self = this.getLatest()) {
+    if (self.getTextContentSize() > 0) {
+      self.replace($createParagraphNode(), true);
+    }
+  }
+
+
+  get required() {
+    return this.isDirectRootChild && ProvisionalParagraphNode.neededBetween(...this.immediateSiblings)
+  }
+
+  get isDirectRootChild() {
+    const parent = this.getParent();
+    return $isRootOrShadowRoot(parent)
+  }
+
+  get immediateSiblings() {
+    return [ this.getPreviousSibling(), this.getNextSibling() ]
+  }
+}
+
+function $isProvisionalParagraphNode(node) {
+  return node instanceof ProvisionalParagraphNode
+}
+
+function $isSelectableElement(node, direction) {
+  return $isElementNode(node) && (direction === "next" ? node.canInsertTextBefore() : node.canInsertTextAfter())
+}
+
 async function loadFileIntoImage(file, image) {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -3677,7 +4028,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   createDOM() {
-    if (this.uploadError) return this.#createDOMForError()
+    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
@@ -3737,13 +4088,6 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return this.progress !== null
   }
 
-  #createDOMForError() {
-    const figure = this.createAttachmentFigure();
-    figure.classList.add("attachment--error");
-    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.file?.name ?? "file"}` }));
-    return figure
-  }
-
   #createDOMForImage() {
     return createElement("img")
   }
@@ -3853,10 +4197,13 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   showUploadedAttachment(blob) {
-    const replacementNode = this.#toActionTextAttachmentNodeWith(blob);
+    const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
+
+    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
+    const shouldSelectAfterReplacement = this.#selectionIncludesUploadNode;
     this.replace(replacementNode);
 
-    if ($isRootOrShadowRoot(replacementNode.getParent())) {
+    if (shouldSelectAfterReplacement && $isRootOrShadowRoot(replacementNode.getParent())) {
       replacementNode.selectNext();
     }
 
@@ -3880,8 +4227,22 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return rootElement !== null && rootElement.contains(document.activeElement)
   }
 
-  #toActionTextAttachmentNodeWith(blob) {
-    const conversion = new AttachmentNodeConversion(this, blob);
+  get #selectionIncludesUploadNode() {
+    const selection = $getSelection();
+    if (selection === null) return false
+
+    if (selection.getNodes().some((node) => node.is(this))) return true
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+
+    const anchorNode = selection.anchor.getNode();
+    if (!$isProvisionalParagraphNode(anchorNode) || !anchorNode.isEmpty()) return false
+
+    const previousSibling = anchorNode.getPreviousSibling();
+    return previousSibling !== null && previousSibling.is(this)
+  }
+
+  #toActionTextAttachmentNodeWith(blob, previewSrc) {
+    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
     return conversion.toAttachmentNode()
   }
 
@@ -3892,16 +4253,19 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
 }
 
 class AttachmentNodeConversion {
-  constructor(uploadNode, blob) {
+  constructor(uploadNode, blob, previewSrc) {
     this.uploadNode = uploadNode;
     this.blob = blob;
+    this.previewSrc = previewSrc;
   }
 
   toAttachmentNode() {
     return new ActionTextAttachmentNode({
       ...this.uploadNode,
       ...this.#propertiesFromBlob,
-      src: this.#src
+      src: this.#src,
+      previewSrc: this.previewSrc,
+      pendingPreview: this.blob.previewable && !this.uploadNode.isPreviewableImage
     })
   }
 
@@ -4140,7 +4504,7 @@ class Uploader {
   }
 
   $insertUploadNodes() {
-    this.nodes.forEach(this.contents.insertAtCursor);
+    this.contents.insertAtCursor(...this.nodes);
   }
 
   get #nodeUrlProperties() {
@@ -4237,43 +4601,30 @@ class Contents {
     this.editor = null;
   }
 
+  get selection() { return this.editorElement.selection }
+
   insertHtml(html, { tag } = {}) {
     this.insertDOM(parseHtml(html), { tag });
   }
 
   insertDOM(doc, { tag } = {}) {
     this.#unwrapPlaceholderAnchors(doc);
-    if (tag === PASTE_TAG) this.#stripTableCellColorStyles(doc);
 
     this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
+      if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
 
       const nodes = $generateNodesFromDOM(this.editor, doc);
       if (!this.#insertUploadNodes(nodes)) {
-        selection.insertNodes(nodes);
+        this.insertAtCursor(...nodes);
       }
     }, { tag });
   }
 
-  insertAtCursor(node) {
-    let selection = $getSelection() ?? $getRoot().selectEnd();
-    const selectedNodes = selection?.getNodes();
+  insertAtCursor(...nodes) {
+    const selection = $getSelection() ?? $getRoot().selectEnd();
+    const inserter = NodeInserter.for(selection);
 
-    if ($isRangeSelection(selection)) {
-      const anchorNode = selection.anchor.getNode();
-      if ($isShadowRoot(anchorNode)) {
-        const paragraph = $createParagraphNode();
-        anchorNode.append(paragraph);
-        selection = paragraph.selectStart();
-      }
-      selection.insertNodes([ node ]);
-    } else if ($isNodeSelection(selection) && selectedNodes.length > 0) {
-      // Overrides Lexical's default behavior of _removing_ the currently selected nodes
-      // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
-      const lastNode = selectedNodes.at(-1);
-      lastNode.insertAfter(node);
-    }
+    inserter.insertNodes(nodes);
   }
 
   insertAtCursorEnsuringLineBelow(node) {
@@ -4295,11 +4646,30 @@ class Contents {
     $setBlocksType(selection, () => $createHeadingNode(tag));
   }
 
-  #applyCodeBlockFormat() {
+  applyUnorderedListFormat() {
+    this.#splitParagraphsAtLineBreaksUnlessInsideList();
+    this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+  }
+
+  applyOrderedListFormat() {
+    this.#splitParagraphsAtLineBreaksUnlessInsideList();
+    this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+  }
+
+  clearFormatting() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
-    $setBlocksType(selection, () => $createCodeNode("plain"));
+    $forEachSelectedTextNode(node => {
+      node.setFormat(0);
+      node.setStyle("");
+    });
+
+    $toggleLink(null);
+
+    this.#topLevelElementsInSelection(selection).filter($isQuoteNode).forEach(node => this.#unwrap(node));
+
+    $setBlocksType(selection, () => $createParagraphNode());
   }
 
   toggleCodeBlock() {
@@ -4308,12 +4678,16 @@ class Contents {
 
     if (this.#insertNodeIfRoot($createCodeNode("plain"))) return
 
-    const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
+    const blockElements = this.#blockLevelElementsInSelection(selection);
+    const allCode = blockElements.every($isCodeNode);
 
-    if (topLevelElement && !$isCodeNode(topLevelElement)) {
-      this.#applyCodeBlockFormat();
+    if (allCode) {
+      blockElements.forEach(node => this.#unwrapCodeBlock(node));
     } else {
-      this.applyParagraphFormat();
+      const codeNode = $createCodeNode("plain");
+      blockElements.at(-1).insertAfter(codeNode);
+      codeNode.selectEnd();
+      this.insertAtCursor(...blockElements);
     }
   }
 
@@ -4562,9 +4936,42 @@ class Contents {
     return false
   }
 
+  #unwrapCodeBlock(codeNode) {
+    const children = codeNode.getChildren();
+    const groups = [ [] ];
+
+    for (const child of children) {
+      if ($isLineBreakNode(child)) {
+        groups.push([]);
+      } else {
+        groups[groups.length - 1].push(child.getTextContent());
+      }
+    }
+
+    for (const group of groups) {
+      const paragraph = $createParagraphNode();
+      const text = group.join("");
+      if (text) {
+        paragraph.append($createTextNode(text));
+      }
+      codeNode.insertBefore(paragraph);
+    }
+
+    codeNode.remove();
+  }
+
+  #splitParagraphsAtLineBreaksUnlessInsideList() {
+    if (this.selection.isInsideList) return
+
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    this.#splitParagraphsAtLineBreaks(selection);
+  }
+
   #splitParagraphsAtLineBreaks(selection) {
-    const anchorKey = selection.anchor.getNode().getKey();
-    const focusKey = selection.focus.getNode().getKey();
+    const anchorTopLevel = selection.anchor.getNode().getTopLevelElement();
+    const focusTopLevel = selection.focus.getNode().getTopLevelElement();
     const topLevelElements = this.#topLevelElementsInSelection(selection);
 
     for (const element of topLevelElements) {
@@ -4576,10 +4983,9 @@ class Contents {
       // Check whether this paragraph needs splitting: skip only if neither
       // selection endpoint is inside it (meaning it's a middle paragraph
       // fully between anchor and focus with no partial lines to split off).
-      const hasEndpoint = children.some(child =>
-        child.getKey() === anchorKey || child.getKey() === focusKey
-      );
-      if (!hasEndpoint) continue
+      // Compare top-level elements so endpoints inside nested inline nodes
+      // (e.g. text inside a LinkNode) are still recognized.
+      if (element !== anchorTopLevel && element !== focusTopLevel) continue
 
       const groups = [ [] ];
       for (const child of children) {
@@ -4601,6 +5007,15 @@ class Contents {
     }
   }
 
+  #blockLevelElementsInSelection(selection) {
+    const blocks = new Set();
+    for (const node of selection.getNodes()) {
+      blocks.add($getNearestBlockElementAncestorOrThrow(node));
+    }
+
+    return Array.from(blocks)
+  }
+
   #topLevelElementsInSelection(selection) {
     const elements = new Set();
     for (const node of selection.getNodes()) {
@@ -4788,6 +5203,109 @@ function $isShadowRoot(node) {
   return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
 }
 
+class NodeInserter {
+  static for(selection) {
+    const INSERTERS = [
+      CodeNodeInserter,
+      QuoteNodeInserter,
+      ShadowRootNodeInserter,
+      NodeSelectionNodeInserter
+    ];
+    const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
+    return Inserter ? new Inserter(selection) : selection
+  }
+
+  constructor(selection) {
+    this.selection = selection;
+  }
+}
+
+class CodeNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $getNearestNodeOfType(selection.anchor?.getNode(), CodeNode)
+  }
+
+  insertNodes(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
+
+    $ensureForwardRangeSelection(this.selection);
+    const focusNode = this.selection.focus.getNode();
+    const codeNode = $getNearestNodeOfType(focusNode, CodeNode);
+    const insertionIndex = focusNode.is(codeNode) ? 0 : focusNode.getIndexWithinParent();
+
+    const caret = $getChildCaretAtIndex(codeNode, insertionIndex + 1, "previous");
+
+    for (const node of nodes) {
+      if (!node.isAttached()) continue
+      if (caret.getNodeAtCaret() && $isElementNode(node)) { caret.insert($createLineBreakNode()); }
+
+      caret.insert(this.#convertNodeToCodeChild(node));
+    }
+
+    caret.getNodeAtCaret().selectEnd();
+  }
+
+  #convertNodeToCodeChild(node) {
+    if ($isLineBreakNode(node)) {
+      return node
+    } else {
+      node.remove();
+      return $createTextNode(node.getTextContent())
+    }
+  }
+
+}
+
+// Lexical will split a QuoteNode when inserting other Elements - we want them simply inserted as-is
+class QuoteNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $getNearestNodeOfType(selection.anchor?.getNode(), QuoteNode)
+  }
+
+  insertNodes(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
+
+    $ensureForwardRangeSelection(this.selection);
+    let lastNode = this.selection.focus.getNode();
+    for (const node of nodes) {
+      lastNode = lastNode.insertAfter(node);
+    }
+
+    lastNode.selectEnd();
+  }
+}
+
+class ShadowRootNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $isShadowRoot(selection?.anchor.getNode())
+  }
+
+  insertNodes(nodes) {
+    const anchorNode = this.selection.anchor.getNode();
+    const paragraph = $createParagraphNode();
+    anchorNode.append(paragraph);
+
+    paragraph.selectStart().insertNodes(nodes);
+  }
+}
+
+class NodeSelectionNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $isNodeSelection(selection)
+  }
+
+  insertNodes(nodes) {
+    const selectedNodes = this.selection.getNodes();
+
+    // Overrides Lexical's default behavior of _removing_ the currently selected nodes
+    // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
+    let lastNode = selectedNodes.at(-1);
+    for (const node of nodes) {
+      lastNode = lastNode.insertAfter(node);
+    }
+  }
+}
+
 class Clipboard {
   constructor(editorElement) {
     this.editorElement = editorElement;
@@ -4967,9 +5485,31 @@ class Extensions {
   }
 
   initializeToolbars() {
-    if (this.#lexxyToolbar) {
-      this.enabledExtensions.forEach(ext => ext.initializeToolbar(this.#lexxyToolbar));
-    }
+    const toolbar = this.#lexxyToolbar;
+    if (!toolbar) return
+
+    this.#clearPreviousExtensionToolbarButtons(toolbar);
+    this.#addExtensionToolbarButtons(toolbar);
+  }
+
+  #clearPreviousExtensionToolbarButtons(toolbar) {
+    toolbar.querySelectorAll("[data-lexxy-extension]").forEach(el => el.remove());
+  }
+
+  #addExtensionToolbarButtons(toolbar) {
+    this.enabledExtensions.forEach(ext => {
+      const childrenBefore = new Set(toolbar.children);
+      ext.initializeToolbar(toolbar);
+      for (const child of toolbar.children) {
+        if (!childrenBefore.has(child)) {
+          child.setAttribute("data-lexxy-extension", "");
+        }
+      }
+    });
+  }
+
+  get allowedElements() {
+    return this.enabledExtensions.flatMap(ext => ext.allowedElements)
   }
 
   get #lexxyToolbar() {
@@ -5005,7 +5545,7 @@ class BrowserAdapter {
   }
 }
 
-// Custom TextNode exportDOM that avoids redundant bold/italic wrapping.
+// Custom TextNode exportDOM that avoids redundant wrapping.
 //
 // Lexical's built-in TextNode.exportDOM() calls createDOM() which produces semantic tags
 // like <strong> for bold and <em> for italic, then unconditionally wraps the result
@@ -5015,6 +5555,9 @@ class BrowserAdapter {
 // This custom export skips <b> when <strong> is already present and <i> when <em> is
 // already present, while preserving <s> and <u> wrappers which have no semantic equivalents
 // in createDOM's output.
+//
+// Any <span> elements produced by createDOM() are unwrapped, since they only carry
+// editor classes that aren't meaningful in exported HTML.
 
 function exportTextNodeDOM(editor, textNode) {
   const element = textNode.createDOM(editor._config, editor);
@@ -5043,7 +5586,7 @@ function exportTextNodeDOM(editor, textNode) {
     result = wrapWith(result, "u");
   }
 
-  return { element: result }
+  return { element: unwrapSpans(result) }
 }
 
 function containsTag(element, tagName) {
@@ -5059,105 +5602,14 @@ function wrapWith(element, tag) {
   return wrapper
 }
 
-class ProvisionalParagraphNode extends ParagraphNode {
-  $config() {
-    return this.config("provisonal_paragraph", {
-      extends: ParagraphNode,
-      importDOM: () => null,
-      $transform: (node) => {
-        node.concretizeIfEdited(node);
-        node.removeUnlessRequired(node);
-      }
-    })
-  }
-
-  static neededBetween(nodeBefore, nodeAfter) {
-    return !$isSelectableElement(nodeBefore, "next")
-      && !$isSelectableElement(nodeAfter, "previous")
-  }
-
-  createDOM(editor) {
-    const p = super.createDOM(editor);
-    const selected = this.isSelected($getSelection());
-    p.classList.add("provisional-paragraph");
-    p.classList.toggle("hidden", !selected);
-    return p
-  }
-
-  updateDOM(_prevNode, dom) {
-    const selected = this.isSelected($getSelection());
-    dom.classList.toggle("hidden", !selected);
-    return false
-  }
-
-  getTextContent() {
-    return ""
-  }
-
-  exportDOM() {
-    return {
-      element: null
-    }
-  }
-
-  // override as Lexical has an interesting view of collapsed selection in ElementNodes
-  // https://github.com/facebook/lexical/blob/f1e4f66014377b1f2595aec2b0ee17f5b7ef4dfc/packages/lexical/src/LexicalNode.ts#L646
-  isSelected(selection = null) {
-    const targetSelection = selection || $getSelection();
-    if (!targetSelection) return false
-
-    if (targetSelection.getNodes().some(node => node.is(this) || this.isParentOf(node))) return true
-
-    // A collapsed range selection on the parent element at an offset adjacent to
-    // this node means the caret is visually at this paragraph's position. Treat it
-    // as selected so the paragraph is visible and the caret renders correctly.
-    //
-    // Both the offset matching our index (cursor just before us) and index + 1
-    // (cursor just after us) count, because the provisional paragraph is an
-    // invisible spacer: the browser resolves both offsets to the same visual spot.
-    if ($isRangeSelection(targetSelection) && targetSelection.isCollapsed()) {
-      const { anchor } = targetSelection;
-      const parent = this.getParent();
-      if (parent && anchor.getNode().is(parent) && anchor.type === "element") {
-        const index = this.getIndexWithinParent();
-        return anchor.offset === index || anchor.offset === index + 1
-      }
-    }
-
-    return false
-  }
-
-  removeUnlessRequired(self = this.getLatest()) {
-    if (!self.required) self.remove();
-  }
-
-  concretizeIfEdited(self = this.getLatest()) {
-    if (self.getTextContentSize() > 0) {
-      self.replace($createParagraphNode(), true);
-    }
-  }
-
-
-  get required() {
-    return this.isDirectRootChild && ProvisionalParagraphNode.neededBetween(...this.immediateSiblings)
-  }
-
-  get isDirectRootChild() {
-    const parent = this.getParent();
-    return $isRootOrShadowRoot(parent)
-  }
+function unwrapSpans(element) {
+  if (element.tagName === "SPAN") return element.firstChild
 
-  get immediateSiblings() {
-    return [ this.getPreviousSibling(), this.getNextSibling() ]
+  for (const span of element.querySelectorAll("span")) {
+    span.replaceWith(...span.childNodes);
   }
-}
-
-function $isProvisionalParagraphNode(node) {
-  return node instanceof ProvisionalParagraphNode
-}
 
-function $isSelectableElement(node, direction) {
-  return $isElementNode(node) && (direction === "next" ? node.canInsertTextBefore() : node.canInsertTextAfter())
+  return element
 }
 
 class ProvisionalParagraphExtension extends LexxyExtension {
@@ -5310,6 +5762,10 @@ class TablesExtension extends LexxyExtension {
     return this.editorElement.supportsRichText
   }
 
+  get allowedElements() {
+    return [ "figure", "tbody" ]
+  }
+
   get lexicalExtension() {
     return defineExtension({
       name: "lexxy/tables",
@@ -5413,21 +5869,21 @@ class AttachmentDragAndDrop {
   #draggedNodeKey = null
   #rafId = null
   #draggingRafId = null
-  #cleanupFns = []
+  #listeners = new ListenerBin()
 
   constructor(editor) {
     this.#editor = editor;
 
     // Register Lexical commands at HIGH priority to intercept before the
     // base @lexical/rich-text handlers (which return true and consume the events).
-    this.#cleanupFns.push(
+    this.#listeners.track(
       editor.registerCommand(DRAGSTART_COMMAND, (event) => this.#handleDragStart(event), COMMAND_PRIORITY_HIGH),
       editor.registerCommand(DROP_COMMAND, (event) => this.#handleDrop(event), COMMAND_PRIORITY_HIGH),
     );
 
     // Use a root listener to register DOM-level dragover/dragend handlers
     // (these events need throttled rAF handling that works better as DOM listeners).
-    const unregister = editor.registerRootListener((root, prevRoot) => {
+    this.#listeners.track(editor.registerRootListener((root, prevRoot) => {
       if (prevRoot) {
         prevRoot.removeEventListener("dragover", this.#onDragOver);
         prevRoot.removeEventListener("dragend", this.#onDragEnd);
@@ -5436,14 +5892,12 @@ class AttachmentDragAndDrop {
         root.addEventListener("dragover", this.#onDragOver);
         root.addEventListener("dragend", this.#onDragEnd);
       }
-    });
-    this.#cleanupFns.push(unregister);
+    }));
   }
 
   destroy() {
     this.#cleanup();
-    for (const fn of this.#cleanupFns) fn();
-    this.#cleanupFns = [];
+    this.#listeners.dispose();
   }
 
   // -- Event handlers --------------------------------------------------------
@@ -5765,11 +6219,18 @@ class AttachmentDragAndDrop {
   }
 }
 
+const ATTACHMENT_ATTRIBUTES = [ "alt", "caption", "content", "content-type", "data-direct-upload-id",
+  "data-sgid", "filename", "filesize", "height", "presentation", "previewable", "sgid", "url", "width" ];
+
 class AttachmentsExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsAttachments
   }
 
+  get allowedElements() {
+    return [ { tag: ActionTextAttachmentNode.TAG_NAME, attributes: ATTACHMENT_ATTRIBUTES } ]
+  }
+
   get lexicalExtension() {
     return defineExtension({
       name: "lexxy/action-text-attachments",
@@ -6057,6 +6518,7 @@ class LexicalEditorElement extends HTMLElement {
   #initialValue = ""
   #validationTextArea = document.createElement("textarea")
   #editorInitializedRafId = null
+  #listeners = new ListenerBin()
   #disposables = []
 
   constructor() {
@@ -6072,6 +6534,7 @@ class LexicalEditorElement extends HTMLElement {
 
     this.editor = this.#createEditor();
     this.#disposables.push(this.editor);
+    this.#disposables.push(this.#listeners);
 
     this.contents = new Contents(this);
     this.#disposables.push(this.contents);
@@ -6235,7 +6698,7 @@ class LexicalEditorElement extends HTMLElement {
   get value() {
     if (!this.cachedValue) {
       this.editor?.getEditorState().read(() => {
-        this.cachedValue = sanitize($generateHtmlFromNodes(this.editor, null));
+        this.cachedValue = sanitize($generateHtmlFromNodes(this.editor, null), this.#allowedElements);
       });
     }
 
@@ -6308,7 +6771,7 @@ class LexicalEditorElement extends HTMLElement {
       theme: theme,
       nodes: this.#lexicalNodes,
       html: {
-        export: new Map([ [ TextNode, exportTextNodeDOM ] ])
+        export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportTextNodeDOM ] ])
       }
     },
       ...this.extensions.lexicalExtensions
@@ -6392,7 +6855,9 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #resetBeforeTurboCaches() {
-    document.addEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
+    this.#listeners.track(
+      registerEventListener(document, "turbo:before-cache", this.#handleTurboBeforeCache)
+    );
   }
 
   #handleTurboBeforeCache = (event) => {
@@ -6400,7 +6865,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #synchronizeWithChanges() {
-    this.#addUnregisterHandler(this.editor.registerUpdateListener(({ editorState }) => {
+    this.#listeners.track(this.editor.registerUpdateListener(({ editorState }) => {
       this.#clearCachedValues();
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
@@ -6414,18 +6879,6 @@ class LexicalEditorElement extends HTMLElement {
     this.cachedStringValue = null;
   }
 
-  #addUnregisterHandler(handler) {
-    this.unregisterHandlers = this.unregisterHandlers || [];
-    this.unregisterHandlers.push(handler);
-  }
-
-  #unregisterHandlers() {
-    this.unregisterHandlers?.forEach((handler) => {
-      handler();
-    });
-    this.unregisterHandlers = null;
-  }
-
   #registerComponents() {
     const registered = [];
 
@@ -6437,9 +6890,10 @@ class LexicalEditorElement extends HTMLElement {
       this.#registerTableComponents();
       this.#registerCodeHiglightingComponents();
       if (this.supportsMarkdown) {
-          registered.push(
-            registerMarkdownShortcuts(this.editor, TRANSFORMERS),
-            registerMarkdownLeadingTagHandler(this.editor, TRANSFORMERS)
+        const transformers = [ ...TRANSFORMERS, HORIZONTAL_DIVIDER ];
+        registered.push(
+          registerMarkdownShortcuts(this.editor, transformers),
+          registerMarkdownLeadingTagHandler(this.editor, transformers)
         );
       }
     } else {
@@ -6448,7 +6902,7 @@ class LexicalEditorElement extends HTMLElement {
     this.historyState = createEmptyHistoryState();
     registered.push(registerHistory(this.editor, this.historyState, 20));
 
-    this.#addUnregisterHandler(mergeRegister$1(...registered));
+    this.#listeners.track(...registered);
   }
 
   #registerTableComponents() {
@@ -6468,7 +6922,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #handleEnter() {
     // We can't prevent these externally using regular keydown because Lexical handles it first.
-    this.#addUnregisterHandler(this.editor.registerCommand(
+    this.#listeners.track(this.editor.registerCommand(
       KEY_ENTER_COMMAND,
       (event) => {
         // Prevent CTRL+ENTER
@@ -6490,13 +6944,10 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #registerFocusEvents() {
-    this.addEventListener("focusin", this.#handleFocusIn);
-    this.addEventListener("focusout", this.#handleFocusOut);
-
-    this.#addUnregisterHandler(() => {
-      this.removeEventListener("focusin", this.#handleFocusIn);
-      this.removeEventListener("focusout", this.#handleFocusOut);
-    });
+    this.#listeners.track(
+      registerEventListener(this, "focusin", this.#handleFocusIn),
+      registerEventListener(this, "focusout", this.#handleFocusOut)
+    );
   }
 
   #handleFocusIn(event) {
@@ -6582,6 +7033,15 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
+  get #allowedElements() {
+    return this.#importableTags.concat(this.extensions.allowedElements)
+  }
+
+  get #importableTags() {
+    const tags = Array.from(this.editor._htmlConversions.keys());
+    return tags.filter(tag => !tag.startsWith("#"))
+  }
+
   #dispatchAttributesChange() {
     let attributes = null;
     let linkHref = null;
@@ -6698,10 +7158,6 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #dispose() {
-    this.#unregisterHandlers();
-    this.adapter = null;
-    document.removeEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
-
     while (this.#disposables.length) {
       this.#disposables.pop().dispose();
     }
@@ -6742,18 +7198,21 @@ function $getReadableTextContent(node) {
 }
 
 class ToolbarDropdown extends HTMLElement {
+  #listeners = new ListenerBin()
+
   connectedCallback() {
     this.container = this.closest("details");
 
-    this.container.addEventListener("toggle", this.#handleToggle);
-    this.container.addEventListener("keydown", this.#handleKeyDown);
+    this.#listeners.track(
+      registerEventListener(this.container, "toggle", this.#handleToggle),
+      registerEventListener(this.container, "keydown", this.#handleKeyDown)
+    );
 
     this.#onToolbarEditor(this.initialize.bind(this));
   }
 
   disconnectedCallback() {
-    this.container?.removeEventListener("toggle", this.#handleToggle);
-    this.container?.removeEventListener("keydown", this.#handleKeyDown);
+    this.#listeners.dispose();
   }
 
   get toolbar() {
@@ -6768,6 +7227,10 @@ class ToolbarDropdown extends HTMLElement {
     return this.toolbar.editor
   }
 
+  track(...listeners) {
+    this.#listeners.track(...listeners);
+  }
+
   initialize() {
     // Any post-editor initialization
   }
@@ -6819,18 +7282,23 @@ class ToolbarDropdown extends HTMLElement {
 class LinkDropdown extends ToolbarDropdown {
   connectedCallback() {
     super.connectedCallback();
+
     this.input = this.querySelector("input");
 
-    this.container.addEventListener("toggle", this.#handleToggle);
-    this.addEventListener("submit", this.#handleSubmit);
-    this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink);
+    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)
+    );
   }
 
-  disconnectedCallback() {
-    this.container?.removeEventListener("toggle", this.#handleToggle);
-    this.removeEventListener("submit", this.#handleSubmit);
-    this.querySelector("[value='unlink']")?.removeEventListener("click", this.#handleUnlink);
-    super.disconnectedCallback();
+  get linkButton() {
+    return this.querySelector("[value='link']")
+  }
+
+  get unlinkButton() {
+    return this.querySelector("[value='unlink']")
   }
 
   #handleToggle = ({ newState }) => {
@@ -6838,9 +7306,21 @@ class LinkDropdown extends ToolbarDropdown {
     this.input.required = newState === "open";
   }
 
-  #handleSubmit = (event) => {
-    const command = event.submitter?.value;
-    this.editor.dispatchCommand(command, this.input.value);
+  #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();
   }
 
@@ -6850,23 +7330,10 @@ class LinkDropdown extends ToolbarDropdown {
   }
 
   get #selectedLinkUrl() {
-    let url = "";
-
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      let node = selection.getNodes()[0];
-      while (node && node.getParent()) {
-        if ($isLinkNode(node)) {
-          url = node.getURL();
-          break
-        }
-        node = node.getParent();
-      }
-    });
-
-    return url
+    return this.editor.getEditorState().read(() => {
+      const linkNode = this.editorElement.selection.nearestNodeOfType(LinkNode);
+      return linkNode?.getUrl() ?? null
+    })
   }
 }
 
@@ -6886,23 +7353,14 @@ class HighlightDropdown extends ToolbarDropdown {
 
   connectedCallback() {
     super.connectedCallback();
-    this.container.addEventListener("toggle", this.#handleToggle);
-  }
-
-  disconnectedCallback() {
-    this.container?.removeEventListener("toggle", this.#handleToggle);
-    this.#removeButtonHandlers();
-    super.disconnectedCallback();
+    this.track(registerEventListener(this.container, "toggle", this.#handleToggle));
   }
 
   #registerButtonHandlers() {
-    this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick));
-    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick);
-  }
-
-  #removeButtonHandlers() {
-    this.#colorButtons.forEach(button => button.removeEventListener("click", this.#handleColorButtonClick));
-    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR)?.removeEventListener("click", this.#handleRemoveHighlightClick);
+    this.#colorButtons.forEach(button => {
+      this.track(registerEventListener(button, "click", this.#handleColorButtonClick));
+    });
+    this.track(registerEventListener(this.querySelector(REMOVE_HIGHLIGHT_SELECTOR), "click", this.#handleRemoveHighlightClick));
   }
 
   #setUpButtons() {
@@ -7124,9 +7582,11 @@ class RemoteFilterSource extends BaseSource {
 const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
 
 class LexicalPromptElement extends HTMLElement {
+  #globalListeners = new ListenerBin()
+  #popoverListeners = new ListenerBin()
+
   constructor() {
     super();
-    this.keyListeners = [];
     this.showPopoverId = 0;
   }
 
@@ -7140,6 +7600,8 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.#popoverListeners.dispose();
+    this.#globalListeners.dispose();
     this.source = null;
     this.popoverElement = null;
   }
@@ -7189,7 +7651,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #addTriggerListener() {
-    const unregister = this.#editor.registerUpdateListener(({ editorState }) => {
+    this.#popoverListeners.track(this.#editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         if (this.#selection.isInsideCodeBlock) return
 
@@ -7212,18 +7674,18 @@ class LexicalPromptElement extends HTMLElement {
               const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
 
               if (isAtStart || isPrecededBySpaceOrNewline) {
-                unregister();
+                this.#popoverListeners.dispose();
                 this.#showPopover();
               }
             }
           }
         }
       });
-    });
+    }));
   }
 
   #addCursorPositionListener() {
-    this.cursorPositionListener = this.#editor.registerUpdateListener(({ editorState }) => {
+    this.#popoverListeners.track(this.#editor.registerUpdateListener(({ editorState }) => {
       if (this.closed) return
 
       editorState.read(() => {
@@ -7250,14 +7712,7 @@ class LexicalPromptElement extends HTMLElement {
           this.#hidePopover();
         }
       });
-    });
-  }
-
-  #removeCursorPositionListener() {
-    if (this.cursorPositionListener) {
-      this.cursorPositionListener();
-      this.cursorPositionListener = null;
-    }
+    }));
   }
 
   get #editor() {
@@ -7284,8 +7739,10 @@ class LexicalPromptElement extends HTMLElement {
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
     this.#selectFirstOption();
 
-    this.#editorElement.addEventListener("keydown", this.#handleKeydownOnPopover);
-    this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
+    this.#popoverListeners.track(
+      registerEventListener(this.#editorElement, "keydown", this.#handleKeydownOnPopover),
+      registerEventListener(this.#editorElement, "lexxy:change", this.#filterOptions)
+    );
 
     this.#registerKeyListeners();
     this.#addCursorPositionListener();
@@ -7293,16 +7750,20 @@ class LexicalPromptElement extends HTMLElement {
 
   #registerKeyListeners() {
     // We can't use a regular keydown for Enter as Lexical handles it first
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
+    this.#popoverListeners.track(
+      this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL),
+      this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL)
+    );
 
     if (this.#doesSpaceSelect) {
-      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
+      this.#popoverListeners.track(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
     }
 
     // Register arrow keys with CRITICAL priority to prevent Lexical's selection handlers from running
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_CRITICAL));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_CRITICAL));
+    this.#popoverListeners.track(
+      this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_CRITICAL),
+      this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_CRITICAL)
+    );
   }
 
   #handleArrowUp(event) {
@@ -7394,21 +7855,12 @@ class LexicalPromptElement extends HTMLElement {
     this.showPopoverId++;
     this.#clearSelection();
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", false);
-    this.#editorElement.removeEventListener("lexxy:change", this.#filterOptions);
-    this.#editorElement.removeEventListener("keydown", this.#handleKeydownOnPopover);
-
-    this.#unregisterKeyListeners();
-    this.#removeCursorPositionListener();
+    this.#popoverListeners.dispose();
 
     await nextFrame();
     this.#addTriggerListener();
   }
 
-  #unregisterKeyListeners() {
-    this.keyListeners.forEach((unregister) => unregister());
-    this.keyListeners = [];
-  }
-
   #filterOptions = async () => {
     if (this.initialPrompt) {
       this.initialPrompt = false;
@@ -7585,7 +8037,7 @@ class LexicalPromptElement extends HTMLElement {
     popoverContainer.style.position = "absolute";
     popoverContainer.setAttribute("nonce", getNonce());
     popoverContainer.append(...await this.source.buildListItems());
-    popoverContainer.addEventListener("click", this.#handlePopoverClick);
+    this.#globalListeners.track(registerEventListener(popoverContainer, "click", this.#handlePopoverClick));
     this.#editorElement.appendChild(popoverContainer);
     return popoverContainer
   }
@@ -7606,12 +8058,14 @@ class LexicalPromptElement extends HTMLElement {
 
 class CodeLanguagePicker extends HTMLElement {
   #abortController = null
+  #listeners = new ListenerBin()
 
   connectedCallback() {
     this.editorElement = this.closest("lexxy-editor");
     this.editor = this.editorElement.editor;
     this.classList.add("lexxy-floating-controls");
     this.#abortController = new AbortController();
+    this.#listeners.track(() => this.#abortController?.abort());
 
     this.#attachLanguagePicker();
     this.#hide();
@@ -7623,10 +8077,7 @@ class CodeLanguagePicker extends HTMLElement {
   }
 
   dispose() {
-    this.#abortController?.abort();
-    this.#abortController = null;
-    this.unregisterUpdateListener?.();
-    this.unregisterUpdateListener = null;
+    this.#listeners.dispose();
   }
 
   #attachLanguagePicker() {
@@ -7634,13 +8085,13 @@ class CodeLanguagePicker extends HTMLElement {
 
     const signal = this.#abortController.signal;
 
-    this.languagePickerElement.addEventListener("change", () => {
+    this.#listeners.track(registerEventListener(this.languagePickerElement, "change", () => {
       this.#updateCodeBlockLanguage(this.languagePickerElement.value);
-    }, { signal });
+    }, { signal }));
 
-    this.languagePickerElement.addEventListener("mousedown", (event) => {
+    this.#listeners.track(registerEventListener(this.languagePickerElement, "mousedown", (event) => {
       this.#dispatchOpenEvent(event);
-    }, { signal });
+    }, { signal }));
 
     this.languagePickerElement.setAttribute("nonce", getNonce());
     this.appendChild(this.languagePickerElement);
@@ -7666,20 +8117,18 @@ class CodeLanguagePicker extends HTMLElement {
   get #languages() {
     const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
 
-    if (!languages.ruby) languages.ruby = "Ruby";
-    if (!languages.php) languages.php = "PHP";
-    if (!languages.go) languages.go = "Go";
-    if (!languages.bash) languages.bash = "Bash";
-    if (!languages.json) languages.json = "JSON";
-    if (!languages.diff) languages.diff = "Diff";
-
-    const sortedEntries = Object.entries(languages)
-      .sort(([ , a ], [ , b ]) => a.localeCompare(b));
+    languages.ruby ||= "Ruby";
+    languages.php ||= "PHP";
+    languages.go ||= "Go";
+    languages.bash ||= "Bash";
+    languages.json ||= "JSON";
+    languages.diff ||= "Diff";
 
     // Place the "plain" entry first, then the rest of language sorted alphabetically
-    const plainIndex = sortedEntries.findIndex(([ key ]) => key === "plain");
-    const plainEntry = sortedEntries.splice(plainIndex, 1)[0];
-    return Object.fromEntries([ plainEntry, ...sortedEntries ])
+    delete languages.plain;
+    const sortedEntries = Object.entries(languages)
+      .sort((a, b) => a[1].localeCompare(b[1]));
+    return { plain: "Plain text", ...Object.fromEntries(sortedEntries) }
   }
 
   #dispatchOpenEvent(event) {
@@ -7708,8 +8157,8 @@ class CodeLanguagePicker extends HTMLElement {
   }
 
   #monitorForCodeBlockSelection() {
-    this.unregisterUpdateListener = this.editor.registerUpdateListener(() => {
-      this.editor.getEditorState().read(() => {
+    this.#listeners.track(this.editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
         const codeNode = this.#getCurrentCodeNode();
 
         if (codeNode) {
@@ -7718,26 +8167,11 @@ class CodeLanguagePicker extends HTMLElement {
           this.#hide();
         }
       });
-    });
+    }));
   }
 
   #getCurrentCodeNode() {
-    const selection = $getSelection();
-
-    if (!$isRangeSelection(selection)) {
-      return null
-    }
-
-    const anchorNode = selection.anchor.getNode();
-    const parentNode = anchorNode.getParent();
-
-    if ($isCodeNode(anchorNode)) {
-      return anchorNode
-    } else if ($isCodeNode(parentNode)) {
-      return parentNode
-    }
-
-    return null
+    return this.editorElement.selection.nearestNodeOfType(CodeNode)
   }
 
   #codeNodeWasSelected(codeNode) {
@@ -7824,6 +8258,8 @@ class NodeDeleteButton extends HTMLElement {
 }
 
 class TableController {
+  #listeners = new ListenerBin()
+
   constructor(editorElement) {
     this.editor = editorElement.editor;
     this.contents = editorElement.contents;
@@ -7839,7 +8275,7 @@ class TableController {
     this.currentTableNodeKey = null;
     this.currentCellKey = null;
 
-    this.#unregisterKeyHandlers();
+    this.#listeners.dispose();
   }
 
   get currentCell() {
@@ -8121,16 +8557,10 @@ class TableController {
 
   #registerKeyHandlers() {
     // We can't prevent these externally using regular keydown because Lexical handles it first.
-    this.unregisterBackspaceKeyHandler = this.editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => this.#handleBackspaceKey(event), COMMAND_PRIORITY_HIGH);
-    this.unregisterEnterKeyHandler = this.editor.registerCommand(KEY_ENTER_COMMAND, (event) => this.#handleEnterKey(event), COMMAND_PRIORITY_HIGH);
-  }
-
-  #unregisterKeyHandlers() {
-    this.unregisterBackspaceKeyHandler?.();
-    this.unregisterEnterKeyHandler?.();
-
-    this.unregisterBackspaceKeyHandler = null;
-    this.unregisterEnterKeyHandler = null;
+    this.#listeners.track(
+      this.editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => this.#handleBackspaceKey(event), COMMAND_PRIORITY_HIGH),
+      this.editor.registerCommand(KEY_ENTER_COMMAND, (event) => this.#handleEnterKey(event), COMMAND_PRIORITY_HIGH)
+    );
   }
 
   #handleBackspaceKey(event) {
@@ -8224,6 +8654,8 @@ var TableIcons = {
 };
 
 class TableTools extends HTMLElement {
+  #listeners = new ListenerBin()
+
   connectedCallback() {
     this.tableController = new TableController(this.#editorElement);
     this.classList.add("lexxy-floating-controls");
@@ -8239,12 +8671,7 @@ class TableTools extends HTMLElement {
   }
 
   dispose() {
-    this.#unregisterKeyboardShortcuts();
-
-    this.unregisterUpdateListener?.();
-    this.unregisterUpdateListener = null;
-
-    this.removeEventListener("keydown", this.#handleToolsKeydown);
+    this.#listeners.dispose();
 
     this.tableController?.destroy();
     this.tableController = null;
@@ -8269,7 +8696,7 @@ class TableTools extends HTMLElement {
     this.appendChild(this.#createColumnButtonsContainer());
 
     this.appendChild(this.#createDeleteTableButton());
-    this.addEventListener("keydown", this.#handleToolsKeydown);
+    this.#listeners.track(registerEventListener(this, "keydown", this.#handleToolsKeydown));
   }
 
   #createButtonsContainer(childType, setCountProperty, moreMenu) {
@@ -8362,12 +8789,7 @@ class TableTools extends HTMLElement {
   }
 
   #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH);
-  }
-
-  #unregisterKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts?.();
-    this.unregisterKeyboardShortcuts = null;
+    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH));
   }
 
   #handleAccessibilityShortcutKey = (event) => {
@@ -8437,7 +8859,7 @@ class TableTools extends HTMLElement {
   }
 
   #monitorForTableSelection() {
-    this.unregisterUpdateListener = this.#editor.registerUpdateListener(() => {
+    this.#listeners.track(this.#editor.registerUpdateListener(() => {
       this.tableController.updateSelectedTable();
 
       const tableNode = this.tableController.currentTableNode;
@@ -8446,7 +8868,7 @@ class TableTools extends HTMLElement {
       } else {
         this.#hide();
       }
-    });
+    }));
   }
 
   #executeTableCommand(command) {