@37signals/lexxy 0.9.9-beta.preview5 → 0.9.10-beta

package/dist/lexxy.esm.js

@@ -1,19 +1,19 @@
-import { isActiveAndVisible, createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
+import { isActiveAndVisible, extractPlainTextFromHtml, createElement, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $ensureForwardRangeSelection, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_EDITOR, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $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, $addUpdateTag, ElementNode, $getChildCaretAtIndex, $createLineBreakNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isTextNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, $createParagraphNode, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $getChildCaretAtIndex, $createLineBreakNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching, IS_APPLE } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
+import { HistoryExtension } from '@lexical/history';
 import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 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 { HistoryExtension } from '@lexical/history';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 import 'prismjs';
@@ -774,41 +774,185 @@ class LexicalToolbarElement extends HTMLElement {
   }
 }
 
-class HorizontalDividerNode extends DecoratorNode {
+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,
+    permittedAttachmentTypes: null,
+    richText: true,
+    toolbar: {
+      upload: "both"
+    },
+    highlight: {
+      buttons: {
+        color: range(1, 9).map(n => `var(--highlight-${n})`),
+        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+      },
+      permit: {
+        color: [],
+        "background-color": []
+      }
+    }
+  }
+});
+
+var Lexxy = {
+  global,
+  presets,
+  configure({ global: newGlobal, ...newPresets }) {
+    if (newGlobal) {
+      global.merge(newGlobal);
+    }
+    presets.merge(newPresets);
+  }
+};
+
+function setSanitizerConfig(allowedTags) {
+  DOMPurify.clearConfig();
+  DOMPurify.setConfig(buildConfig(allowedTags));
+}
+
+function sanitize(html) {
+  return DOMPurify.sanitize(html)
+}
+
+function bytesToHumanSize(bytes) {
+  if (bytes === 0) return "0 B"
+  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  return `${ value.toFixed(2) } ${ sizes[i] }`
+}
+
+function extractFileName(string) {
+  return string.split("/").pop()
+}
+
+// The content attribute is raw HTML (matching Trix/ActionText). Older Lexxy
+// versions JSON-encoded it, so try JSON.parse first for backward compatibility.
+function parseAttachmentContent(content) {
+  try {
+    return JSON.parse(content)
+  } catch {
+    return content
+  }
+}
+
+class CustomActionTextAttachmentNode extends DecoratorNode {
   static getType() {
-    return "horizontal_divider"
+    return "custom_action_text_attachment"
   }
 
   static clone(node) {
-    return new HorizontalDividerNode(node.__key)
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
   }
 
   static importJSON(serializedNode) {
-    return new HorizontalDividerNode()
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
   }
 
   static importDOM() {
     return {
-      "hr": (hr) => {
+      [this.TAG_NAME]: (element) => {
+        if (!element.getAttribute("content")) {
+          return null
+        }
+
         return {
-          conversion: () => ({
-            node: new HorizontalDividerNode()
-          }),
-          priority: 1
+          conversion: (attachment) => {
+            // Preserve initial space if present since Lexical removes it
+            const nodes = [];
+            const previousSibling = attachment.previousSibling;
+            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
+
+            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
+
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml,
+              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
+              contentType: attachment.getAttribute("content-type")
+            }));
+
+            const nextSibling = attachment.nextSibling;
+            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
+
+            return { node: nodes }
+          },
+          priority: 2
         }
       }
     }
   }
 
-  constructor(key) {
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
     super(key);
+
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
+    this.innerHtml = innerHtml;
+    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
   }
 
   createDOM() {
-    const figure = createElement("figure", { className: "horizontal-divider" });
-    const hr = createElement("hr");
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
-    figure.appendChild(hr);
+    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
 
     const deleteButton = createElement("lexxy-node-delete-button");
     figure.appendChild(deleteButton);
@@ -817,26 +961,40 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 
   updateDOM() {
-    return true
+    return false
   }
 
   getTextContent() {
-    return "┄\n\n"
+    return "\ufeff"
+  }
+
+  getReadableTextContent() {
+    return this.plainText || `[${this.contentType}]`
   }
 
   isInline() {
-    return false
+    return true
   }
 
   exportDOM() {
-    const hr = createElement("hr");
-    return { element: hr }
+    const attachment = createElement(this.tagName, {
+      sgid: this.sgid,
+      content: this.innerHtml,
+      "content-type": this.contentType
+    });
+
+    return { element: attachment }
   }
 
   exportJSON() {
     return {
-      type: "horizontal_divider",
-      version: 1
+      type: "custom_action_text_attachment",
+      version: 1,
+      tagName: this.tagName,
+      sgid: this.sgid,
+      contentType: this.contentType,
+      innerHtml: this.innerHtml,
+      plainText: this.plainText
     }
   }
 
@@ -845,407 +1003,439 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 }
 
-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);
+function dasherize(value) {
+  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
+}
 
-    if (!isImport) {
-      const paragraph = $createParagraphNode();
-      hrNode.insertAfter(paragraph);
-      paragraph.select();
-    }
-  },
-  type: "multiline-element"
-};
+function isUrl(string) {
+  try {
+    new URL(string);
+    return true
+  } catch {
+    return false
+  }
+}
 
-const PUNCTUATION_OR_SPACE = /[^\w]/;
+function normalizeFilteredText(string) {
+  return string
+    .toLowerCase()
+    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
+}
 
-// Supplements Lexical's built-in registerMarkdownShortcuts to handle the case
-// where a user types a leading tag before text that already ends with a
-// trailing tag (e.g. typing ` before `hello`` or ** before **hello**).
-//
-// Lexical's markdown shortcut handler only triggers format transformations when
-// the closing tag is the character just typed. When the opening tag is typed
-// instead (e.g. typing ` before `hello`` to form ``hello``), the built-in
-// handler doesn't match because it looks backward from the cursor for an
-// opening tag, but the cursor is right after it.
-//
-// This listener detects that scenario for ALL text format transformers
-// (backtick, bold, italic, strikethrough, etc.) and applies the appropriate
-// format.
-function registerMarkdownLeadingTagHandler(editor, transformers) {
-  const textFormatTransformers = transformers
-    .filter(t => t.type === "text-format")
-    .sort((a, b) => b.tag.length - a.tag.length); // Longer tags first
+function filterMatchPosition(text, potentialMatch) {
+  const normalizedText = normalizeFilteredText(text);
+  const normalizedMatch = normalizeFilteredText(potentialMatch);
 
-  return editor.registerUpdateListener(({ tags, dirtyLeaves, editorState, prevEditorState }) => {
-    if (tags.has("historic") || tags.has("collaboration")) return
-    if (editor.isComposing()) return
+  if (!normalizedMatch) return 0
 
-    const selection = editorState.read($getSelection);
-    const prevSelection = prevEditorState.read($getSelection);
+  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
+  return match ? match.index : -1
+}
 
-    if (!$isRangeSelection(prevSelection) || !$isRangeSelection(selection) || !selection.isCollapsed()) return
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
 
-    const anchorKey = selection.anchor.key;
-    const anchorOffset = selection.anchor.offset;
+function escapeForRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
 
-    if (!dirtyLeaves.has(anchorKey)) return
+// Parses a value that may arrive as a boolean or as a string (e.g. from DOM
+// getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
+function parseBoolean(value) {
+  if (typeof value === "string") return value === "true"
+  return Boolean(value)
+}
 
-    const anchorNode = editorState.read(() => $getNodeByKey(anchorKey));
-    if (!$isTextNode(anchorNode)) return
+class LexxyExtension {
+  #editorElement
 
-    // Only trigger when cursor moved forward (typing)
-    const prevOffset = prevSelection.anchor.key === anchorKey ? prevSelection.anchor.offset : 0;
-    if (anchorOffset <= prevOffset) return
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+  }
 
-    const textContent = editorState.read(() => anchorNode.getTextContent());
+  get editorElement() {
+    return this.#editorElement
+  }
 
-    // Try each transformer, longest tags first
-    for (const transformer of textFormatTransformers) {
-      const tag = transformer.tag;
-      const tagLen = tag.length;
+  get editorConfig() {
+    return this.#editorElement.config
+  }
 
-      // The typed characters must end at the cursor position and form the opening tag
-      const openTagStart = anchorOffset - tagLen;
-      if (openTagStart < 0) continue
+  // optional: defaults to true
+  get enabled() {
+    return true
+  }
 
-      const candidateOpenTag = textContent.slice(openTagStart, anchorOffset);
-      if (candidateOpenTag !== tag) continue
+  get lexicalExtension() {
+    return null
+  }
 
-      // Disambiguate from longer tags: if the character before the opening tag
-      // is the same as the tag character, this might be part of a longer tag
-      // (e.g. seeing `*` when the user is actually typing `**`)
-      const tagChar = tag[0];
-      if (openTagStart > 0 && textContent[openTagStart - 1] === tagChar) continue
+  get allowedElements() {
+    return []
+  }
 
-      // Check intraword constraint: if intraword is false, the character before
-      // the opening tag must be a space, punctuation, or the start of the text
-      if (transformer.intraword === false && openTagStart > 0) {
-        const beforeChar = textContent[openTagStart - 1];
-        if (beforeChar && !PUNCTUATION_OR_SPACE.test(beforeChar)) continue
-      }
+  initializeToolbar(_lexxyToolbar) {
 
-      // Search forward for a closing tag in the same text node
-      const searchStart = anchorOffset;
-      const closeTagIndex = textContent.indexOf(tag, searchStart);
-      if (closeTagIndex < 0) continue
+  }
+}
 
-      // Disambiguate closing tag from longer tags: if the character right after
-      // the closing tag is the same as the tag character, skip
-      // (e.g. `*hello**` — the first `*` at index 6 is part of `**`)
-      if (textContent[closeTagIndex + tagLen] === tagChar) continue
+function $createNodeSelectionWith(...nodes) {
+  const selection = $createNodeSelection();
+  nodes.forEach(node => selection.add(node.getKey()));
+  return selection
+}
 
-      // Also check if the character before the closing tag start is the same
-      // tag character (e.g. the closing tag might be a suffix of a longer sequence)
-      if (closeTagIndex > 0 && textContent[closeTagIndex - 1] === tagChar) continue
+function $isShadowRoot(node) {
+  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
+}
 
-      // There must be content between the tags (not just empty or whitespace-adjacent)
-      const innerStart = anchorOffset;
-      const innerEnd = closeTagIndex;
-      if (innerEnd <= innerStart) continue
+function $makeSafeForRoot(node) {
+  if ($isTextNode(node)) {
+    return $wrapNodeInElement(node, $createParagraphNode)
+  } else if (node.isParentRequired()) {
+    const parent = node.createRequiredParent();
+    return $wrapNodeInElement(node, parent)
+  } else {
+    return node
+  }
+}
 
-      // No space immediately after opening tag
-      if (textContent[innerStart] === " ") continue
+function getListType(node) {
+  const list = $getNearestNodeOfType(node, ListNode);
+  return list?.getListType() ?? null
+}
 
-      // No space immediately before closing tag
-      if (textContent[innerEnd - 1] === " ") continue
+function isEditorFocused(editor) {
+  const rootElement = editor.getRootElement();
+  return rootElement !== null && rootElement.contains(document.activeElement)
+}
 
-      // Check intraword constraint for closing tag
-      if (transformer.intraword === false) {
-        const afterCloseChar = textContent[closeTagIndex + tagLen];
-        if (afterCloseChar && !PUNCTUATION_OR_SPACE.test(afterCloseChar)) continue
-      }
+function $isAtNodeEdge(point, atStart = null) {
+  if (atStart === null) {
+    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
+  } else {
+    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+  }
+}
 
-      editor.update(() => {
-        const node = $getNodeByKey(anchorKey);
-        if (!node || !$isTextNode(node)) return
+function $isAtNodeStart(point) {
+  return point.offset === 0
+}
 
-        const parent = node.getParent();
-        if (parent === null || $isCodeNode(parent)) return
+function extendTextNodeConversion(conversionName, ...callbacks) {
+  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
+    ...conversionOutput,
+    forChild: (lexicalNode, parentNode) => {
+      const originalForChild = conversionOutput?.forChild ?? (x => x);
+      let childNode = originalForChild(lexicalNode, parentNode);
 
-        $applyFormatFromLeadingTag(node, openTagStart, transformer);
-      });
 
-      break // Only apply the first (longest) matching transformer
+      if ($isTextNode(childNode)) {
+        childNode = callbacks.reduce(
+          (childNode, callback) => callback(childNode, element) ?? childNode,
+          childNode
+        );
+        return childNode
+      }
     }
-  })
+  }))
 }
 
-function $applyFormatFromLeadingTag(anchorNode, openTagStart, transformer) {
-  const tag = transformer.tag;
-  const tagLen = tag.length;
-  const textContent = anchorNode.getTextContent();
+function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
+  return (element) => {
+    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
+    if (!converter) return null
 
-  const innerStart = openTagStart + tagLen;
-  const closeTagIndex = textContent.indexOf(tag, innerStart);
-  if (closeTagIndex < 0) return
+    const conversionOutput = converter.conversion(element);
+    if (!conversionOutput) return conversionOutput
 
-  const inner = textContent.slice(innerStart, closeTagIndex);
-  if (inner.length === 0) return
+    return callback(conversionOutput, element) ?? conversionOutput
+  }
+}
 
-  // Remove both tags and apply format
-  const before = textContent.slice(0, openTagStart);
-  const after = textContent.slice(closeTagIndex + tagLen);
+function $isCursorOnLastLine(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+  const children = elementNode.getChildren();
+  if (children.length === 0) return true
 
-  anchorNode.setTextContent(before + inner + after);
+  const lastChild = children[children.length - 1];
 
-  const nextSelection = $createRangeSelection();
-  $setSelection(nextSelection);
+  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
+  if (anchorNode === lastChild) return true
 
-  // Select the inner text to apply formatting
-  nextSelection.anchor.set(anchorNode.getKey(), openTagStart, "text");
-  nextSelection.focus.set(anchorNode.getKey(), openTagStart + inner.length, "text");
+  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
+  if (lastLineBreakIndex === -1) return true
 
-  for (const format of transformer.format) {
-    if (!nextSelection.hasFormat(format)) {
-      nextSelection.formatText(format);
-    }
-  }
+  const anchorIndex = children.indexOf(anchorNode);
+  return anchorIndex > lastLineBreakIndex
+}
 
-  // Collapse selection to end of formatted text and clear the format
-  // so subsequent typing is plain text
-  nextSelection.anchor.set(nextSelection.focus.key, nextSelection.focus.offset, nextSelection.focus.type);
+function $isBlankNode(node) {
+  if (node.getTextContent().trim() !== "") return false
 
-  for (const format of transformer.format) {
-    if (nextSelection.hasFormat(format)) {
-      nextSelection.toggleFormat(format);
+  const children = node.getChildren?.();
+  if (!children || children.length === 0) return true
+
+  return children.every(child => {
+    if ($isLineBreakNode(child)) return true
+    return $isBlankNode(child)
+  })
+}
+
+function $trimTrailingBlankNodes(parent) {
+  for (const child of $lastToFirstIterator(parent)) {
+    if ($isBlankNode(child)) {
+      child.remove();
+    } else {
+      break
     }
   }
 }
 
-var theme = {
-  text: {
-    bold: "lexxy-content__bold",
-    italic: "lexxy-content__italic",
-    strikethrough: "lexxy-content__strikethrough",
-    underline: "lexxy-content__underline",
-    highlight: "lexxy-content__highlight"
-  },
-  tableCellHeader: "lexxy-content__table-cell--header",
-  tableCellSelected: "lexxy-content__table-cell--selected",
-  tableSelection: "lexxy-content__table--selection",
-  tableScrollableWrapper: "lexxy-content__table-wrapper",
-  tableCellHighlight: "lexxy-content__table-cell--highlight",
-  tableCellFocus: "lexxy-content__table-cell--focus",
-  list: {
-    nested: {
-      listitem: "lexxy-nested-listitem",
-    }
-  },
-  codeHighlight: {
-    addition: "code-token__selector",
-    atrule: "code-token__attr",
-    attr: "code-token__attr",
-    "attr-name": "code-token__attr",
-    "attr-value": "code-token__selector",
-    boolean: "code-token__property",
-    bold: "code-token__variable",
-    builtin: "code-token__selector",
-    cdata: "code-token__comment",
-    char: "code-token__selector",
-    class: "code-token__function",
-    "class-name": "code-token__function",
-    color: "code-token__property",
-    comment: "code-token__comment",
-    constant: "code-token__property",
-    coord: "code-token__comment",
-    decorator: "code-token__function",
-    deleted: "code-token__operator",
-    deletion: "code-token__operator",
-    directive: "code-token__attr",
-    "directive-hash": "code-token__property",
-    doctype: "code-token__comment",
-    entity: "code-token__operator",
-    function: "code-token__function",
-    hexcode: "code-token__property",
-    important: "code-token__function",
-    inserted: "code-token__selector",
-    italic: "code-token__comment",
-    keyword: "code-token__attr",
-    line: "code-token__selector",
-    namespace: "code-token__variable",
-    number: "code-token__property",
-    macro: "code-token__function",
-    operator: "code-token__operator",
-    parameter: "code-token__variable",
-    prolog: "code-token__comment",
-    property: "code-token__property",
-    punctuation: "code-token__punctuation",
-    "raw-string": "code-token__operator",
-    regex: "code-token__variable",
-    script: "code-token__function",
-    selector: "code-token__selector",
-    string: "code-token__selector",
-    style: "code-token__function",
-    symbol: "code-token__property",
-    tag: "code-token__property",
-    title: "code-token__function",
-    "type-definition": "code-token__function",
-    url: "code-token__operator",
-    variable: "code-token__variable",
-  }
-};
-
-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);
+// A list item is structurally empty if it contains no meaningful content.
+// Unlike getTextContent().trim() === "", this walks descendants to ensure
+// decorator nodes (mentions, attachments whose getTextContent() may return
+// invisible characters like \ufeff) are treated as non-empty content.
+function $isListItemStructurallyEmpty(listItem) {
+  const children = listItem.getChildren();
+  for (const child of children) {
+    if ($isDecoratorNode(child)) return false
+    if ($isLineBreakNode(child)) continue
+    if ($isTextNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    } else if ($isElementNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
     }
   }
-
-  return result
+  return true
 }
 
-function arePlainHashes(...values) {
-  return values.every(value => value && value.constructor == Object)
+function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
+  return $isTextNode(node)
+    && node.getTextContent() === " "
+    && index === childCount - 1
+    && previousNode instanceof CustomActionTextAttachmentNode
 }
 
-class Configuration {
-  #tree = {}
-
-  constructor(...configs) {
-    this.merge(...configs);
-  }
-
-  merge(...configs) {
-    return this.#tree = configs.reduce(deepMerge, this.#tree)
-  }
+function $splitParagraphsAtLineBreakBoundaries(selection) {
+  $ensureForwardRangeSelection(selection);
 
-  get(path) {
-    const keys = path.split(".");
-    return keys.reduce((node, key) => node[key], this.#tree)
-  }
+  // Split focus first so the anchor split position stays valid.
+  $splitAtNearestLineBreak(selection.focus, "next");
+  $splitAtNearestLineBreak(selection.anchor, "previous");
 }
 
-function range(from, to) {
-  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
-}
+function $splitAtNearestLineBreak(point, direction) {
+  const paragraph = point.getNode().getTopLevelElement();
+  if (!paragraph || !$isParagraphNode(paragraph)) return
 
-const global = new Configuration({
-  attachmentTagName: "action-text-attachment",
-  attachmentContentTypeNamespace: "actiontext",
-  authenticatedUploads: false,
-  extensions: []
-});
+  const pointNode = point.getNode();
+  const selectionChild = pointNode.getParent().is(paragraph) ? pointNode : pointNode.getParentOrThrow();
+  const lineBreakCaret = $caretAtNearestNodeOfType(selectionChild, LineBreakNode, direction);
+  if (!lineBreakCaret) return
 
-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": []
-      }
-    }
-  }
-});
+  const lineBreak = lineBreakCaret.origin;
+  const isEdge = lineBreakCaret.getNodeAtCaret() === null;
 
-var Lexxy = {
-  global,
-  presets,
-  configure({ global: newGlobal, ...newPresets }) {
-    if (newGlobal) {
-      global.merge(newGlobal);
-    }
-    presets.merge(newPresets);
+  if (!isEdge) {
+    $splitNode(paragraph, lineBreak.getIndexWithinParent());
   }
-};
 
-function setSanitizerConfig(allowedTags) {
-  DOMPurify.clearConfig();
-  DOMPurify.setConfig(buildConfig(allowedTags));
+  lineBreak.remove();
 }
 
-function sanitize(html) {
-  return DOMPurify.sanitize(html)
+function $caretAtNearestNodeOfType(node, klass, direction) {
+  for (const caret of $getSiblingCaret(node, direction)) {
+    if (caret.origin instanceof klass) return caret
+  }
+  return null
 }
 
-function bytesToHumanSize(bytes) {
-  if (bytes === 0) return "0 B"
-  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${ value.toFixed(2) } ${ sizes[i] }`
-}
+// Payload: Record<nodeKey, { patch?, replace? }>
+//   - patch: plain object, shallow-merged into the existing node's properties
+//   - replace: a LexicalNode instance that replaces the node
+const REWRITE_HISTORY_COMMAND = createCommand("REWRITE_HISTORY_COMMAND");
 
-function extractFileName(string) {
-  return string.split("/").pop()
-}
+class RewritableHistoryExtension extends LexxyExtension {
+  #historyState = null
 
-// The content attribute is raw HTML (matching Trix/ActionText). Older Lexxy
-// versions JSON-encoded it, so try JSON.parse first for backward compatibility.
-function parseAttachmentContent(content) {
-  try {
-    return JSON.parse(content)
-  } catch {
-    return content
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/rewritable-history",
+      dependencies: [ HistoryExtension ],
+      register: (editor, _config, state) => {
+        const historyOutput = state.getDependency(HistoryExtension).output;
+        this.#historyState = historyOutput.historyState.value;
+
+        return editor.registerCommand(
+          REWRITE_HISTORY_COMMAND,
+          (rewrites) => this.#rewriteHistory(rewrites),
+          COMMAND_PRIORITY_EDITOR
+        )
+      }
+    })
   }
-}
 
-class CustomActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "custom_action_text_attachment"
+  get historyState() {
+    return this.#historyState
   }
 
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  get #allHistoryEntries() {
+    const entries = Array.from(this.#historyState.undoStack);
+    if (this.#historyState.current) entries.push(this.#historyState.current);
+    return entries.concat(this.#historyState.redoStack)
   }
 
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  #rewriteHistory(rewrites) {
+    this.#applyRewritesImmediatelyToCurrentState(rewrites);
+    this.#applyRewritesToHistory(rewrites);
+
+    return true
   }
 
-  static importDOM() {
-    return {
-      [this.TAG_NAME]: (element) => {
-        if (!element.getAttribute("content")) {
-          return null
-        }
+  #applyRewritesImmediatelyToCurrentState(rewrites) {
+    $getEditor().update(() => {
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = $getNodeByKey(nodeKey);
+        if (!node) continue
 
-        return {
-          conversion: (attachment) => {
-            // Preserve initial space if present since Lexical removes it
-            const nodes = [];
-            const previousSibling = attachment.previousSibling;
-            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
+        if (patch) Object.assign(node.getWritable(), patch);
+        if (replace) node.replace(replace);
+      }
+    }, { discrete: true, tag: this.#getBackgroundUpdateTags() });
+  }
 
-            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
+  #applyRewritesToHistory(rewrites) {
+    const nodeKeys = Object.keys(rewrites);
 
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml,
-              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
-              contentType: attachment.getAttribute("content-type")
-            }));
+    for (const entry of this.#allHistoryEntries) {
+      if (!this.#entryHasSomeKeys(entry, nodeKeys)) continue
 
-            const nextSibling = attachment.nextSibling;
-            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
+      const editorState = entry.editorState = safeCloneEditorState(entry.editorState);
 
-            return { node: nodes }
-          },
-          priority: 2
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = editorState._nodeMap.get(nodeKey);
+        if (!node) continue
+
+        if (patch) {
+          this.#patchNodeInEditorState(editorState, node, patch);
+        } else if (replace) {
+          this.#replaceNodeInEditorState(editorState, node, replace);
+        }
+      }
+    }
+  }
+
+  #entryHasSomeKeys(entry, nodeKeys) {
+    return nodeKeys.some(key => entry.editorState._nodeMap.has(key))
+  }
+
+  #getBackgroundUpdateTags() {
+    const tags = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+    if (!isEditorFocused(this.editorElement.editor)) { tags.push(SKIP_DOM_SELECTION_TAG); }
+    return tags
+  }
+
+  #patchNodeInEditorState(editorState, node, patch) {
+    editorState._nodeMap.set(node.__key, $cloneNodeWithPatch(node, patch));
+  }
+
+  #replaceNodeInEditorState(editorState, node, replaceWith) {
+    editorState._nodeMap.set(node.__key, $cloneNodeAdoptingKeys(replaceWith, node));
+  }
+}
+
+function $cloneNodeWithPatch(node, patch) {
+  const clone = $cloneWithProperties(node);
+  Object.assign(clone, patch);
+  return clone
+}
+
+function $cloneNodeAdoptingKeys(node, previousNode) {
+  const clone = $cloneWithProperties(node);
+  clone.__key = previousNode.__key;
+  clone.__parent = previousNode.__parent;
+  clone.__prev = previousNode.__prev;
+  clone.__next = previousNode.__next;
+  return clone
+}
+
+// EditorState#clone() keeps the same map reference.
+// A new Map is needed to prevent editing Lexical's internal map
+// Warning: this bypasses DEV's safety map freezing
+function safeCloneEditorState(editorState) {
+  const clone = editorState.clone();
+  clone._nodeMap = new Map(editorState._nodeMap);
+  return clone
+}
+
+class ActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "action_text_attachment"
+  }
+
+  static clone(node) {
+    return new ActionTextAttachmentNode({ ...node }, node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentNode({ ...serializedNode })
+  }
+
+  static importDOM() {
+    return {
+      [this.TAG_NAME]: () => {
+        return {
+          conversion: (attachment) => ({
+            node: new ActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              src: attachment.getAttribute("url"),
+              previewable: attachment.getAttribute("previewable"),
+              altText: attachment.getAttribute("alt"),
+              caption: attachment.getAttribute("caption"),
+              contentType: attachment.getAttribute("content-type"),
+              fileName: attachment.getAttribute("filename"),
+              fileSize: attachment.getAttribute("filesize"),
+              width: attachment.getAttribute("width"),
+              height: attachment.getAttribute("height")
+            })
+          }), priority: 1
+        }
+      },
+      "img": () => {
+        return {
+          conversion: (img) => {
+            const fileName = extractFileName(img.getAttribute("src") ?? "");
+            return {
+              node: new ActionTextAttachmentNode({
+                src: img.getAttribute("src"),
+                fileName: fileName,
+                caption: img.getAttribute("alt") || "",
+                contentType: "image/*",
+                width: img.getAttribute("width"),
+                height: img.getAttribute("height")
+              })
+            }
+          }, priority: 1
+        }
+      },
+      "video": () => {
+        return {
+          conversion: (video) => {
+            const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
+            const fileName = videoSource?.split("/")?.pop();
+            const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
+
+            return {
+              node: new ActionTextAttachmentNode({
+                src: videoSource,
+                fileName: fileName,
+                contentType: contentType
+              })
+            }
+          }, priority: 1
         }
       }
     }
@@ -1255,50 +1445,79 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
     super(key);
 
-    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
-
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
-    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
-    this.innerHtml = innerHtml;
-    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+    this.src = src;
+    this.previewSrc = previewSrc;
+    this.previewable = parseBoolean(previewable);
+    this.pendingPreview = pendingPreview;
+    this.altText = altText || "";
+    this.caption = caption || "";
+    this.contentType = contentType || "";
+    this.fileName = fileName || "";
+    this.fileSize = fileSize;
+    this.width = width;
+    this.height = height;
+    this.uploadError = uploadError;
+
+    this.editor = $getEditor();
   }
 
   createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+    if (this.uploadError) return this.createDOMForError()
+    if (this.pendingPreview) return this.#createDOMForPendingPreview()
 
-    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
+    const figure = this.createAttachmentFigure();
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+    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());
+    }
 
     return figure
   }
 
-  updateDOM() {
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
+
+    const caption = dom.querySelector("figcaption textarea");
+    if (caption && this.caption) {
+      caption.value = this.caption;
+    }
+
     return false
   }
 
   getTextContent() {
-    return "\ufeff"
-  }
-
-  getReadableTextContent() {
-    return this.plainText || `[${this.contentType}]`
+    return `[${this.caption || this.fileName}]\n\n`
   }
 
   isInline() {
-    return true
+    return this.isAttached() && !this.getParent().is($getNearestRootOrShadowRoot(this))
   }
 
   exportDOM() {
     const attachment = createElement(this.tagName, {
       sgid: this.sgid,
-      content: this.innerHtml,
-      "content-type": this.contentType
+      previewable: this.previewable || null,
+      url: this.src,
+      alt: this.altText,
+      caption: this.caption,
+      "content-type": this.contentType,
+      filename: this.fileName,
+      filesize: this.fileSize,
+      width: this.width,
+      height: this.height,
+      presentation: "gallery"
     });
 
     return { element: attachment }
@@ -1306,1894 +1525,1699 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
 
   exportJSON() {
     return {
-      type: "custom_action_text_attachment",
+      type: "action_text_attachment",
       version: 1,
       tagName: this.tagName,
       sgid: this.sgid,
+      src: this.src,
+      previewable: this.previewable,
+      altText: this.altText,
+      caption: this.caption,
       contentType: this.contentType,
-      innerHtml: this.innerHtml,
-      plainText: this.plainText
+      fileName: this.fileName,
+      fileSize: this.fileSize,
+      width: this.width,
+      height: this.height
     }
   }
 
   decorate() {
     return null
   }
-}
-
-function $createNodeSelectionWith(...nodes) {
-  const selection = $createNodeSelection();
-  nodes.forEach(node => selection.add(node.getKey()));
-  return selection
-}
-
-function $isShadowRoot(node) {
-  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
-}
 
-function $makeSafeForRoot(node) {
-  if ($isTextNode(node)) {
-    return $wrapNodeInElement(node, $createParagraphNode)
-  } else if (node.isParentRequired()) {
-    const parent = node.createRequiredParent();
-    return $wrapNodeInElement(node, parent)
-  } else {
-    return node
+  createDOMForError() {
+    const figure = this.createAttachmentFigure();
+    figure.classList.add("attachment--error");
+    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.fileName || "file"}` }));
+    return figure
   }
-}
 
-function getListType(node) {
-  const list = $getNearestNodeOfType(node, ListNode);
-  return list?.getListType() ?? null
-}
+  createAttachmentFigure(previewable = this.isPreviewableAttachment) {
+    const figure = createAttachmentFigure(this.contentType, previewable, this.fileName);
+    figure.draggable = true;
+    figure.dataset.lexicalNodeKey = this.__key;
 
-function isEditorFocused(editor) {
-  const rootElement = editor.getRootElement();
-  return rootElement !== null && rootElement.contains(document.activeElement)
-}
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
 
-function $isAtNodeEdge(point, atStart = null) {
-  if (atStart === null) {
-    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
-  } else {
-    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+    return figure
   }
-}
 
-function $isAtNodeStart(point) {
-  return point.offset === 0
-}
-
-function extendTextNodeConversion(conversionName, ...callbacks) {
-  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
-    ...conversionOutput,
-    forChild: (lexicalNode, parentNode) => {
-      const originalForChild = conversionOutput?.forChild ?? (x => x);
-      let childNode = originalForChild(lexicalNode, parentNode);
+  get isPreviewableAttachment() {
+    return this.isPreviewableImage || this.previewable
+  }
 
+  get isPreviewableImage() {
+    return isPreviewableImage(this.contentType)
+  }
 
-      if ($isTextNode(childNode)) {
-        childNode = callbacks.reduce(
-          (childNode, callback) => callback(childNode, element) ?? childNode,
-          childNode
-        );
-        return childNode
-      }
-    }
-  }))
-}
-
-function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
-  return (element) => {
-    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
-    if (!converter) return null
+  get isVideo() {
+    return this.contentType.startsWith("video/")
+  }
 
-    const conversionOutput = converter.conversion(element);
-    if (!conversionOutput) return conversionOutput
+  #createDOMForPendingPreview() {
+    const figure = this.createAttachmentFigure(false);
+    figure.appendChild(this.#createDOMForFile());
+    figure.appendChild(this.#createDOMForNotImage());
+    this.#pollForPreview(figure);
+    return figure
+  }
 
-    return callback(conversionOutput, element) ?? conversionOutput
+  patchAndRewriteHistory(patch) {
+    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
+      [this.getKey()]: { patch }
+    });
   }
-}
 
-function $isCursorOnLastLine(selection) {
-  const anchorNode = selection.anchor.getNode();
-  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
-  const children = elementNode.getChildren();
-  if (children.length === 0) return true
+  replaceAndRewriteHistory(node) {
+    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
+      [this.getKey()]: { replace: node }
+    });
+  }
 
-  const lastChild = children[children.length - 1];
+  #createDOMForImage(options = {}) {
+    const initialSrc = this.previewSrc || this.src;
+    const img = createElement("img", { src: initialSrc, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
 
-  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
-  if (anchorNode === lastChild) return true
+    if (this.previewable && !this.isPreviewableImage) {
+      img.onerror = () => this.#swapPreviewToFileDOM(img);
+    }
 
-  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
-  if (lastLineBreakIndex === -1) return true
+    if (this.previewSrc) {
+      this.#preloadAndSwapSrc(img);
+    }
 
-  const anchorIndex = children.indexOf(anchorNode);
-  return anchorIndex > lastLineBreakIndex
-}
+    const container = createElement("div", { className: "attachment__container" });
+    container.appendChild(img);
+    return container
+  }
 
-function $isBlankNode(node) {
-  if (node.getTextContent().trim() !== "") return false
+  #preloadAndSwapSrc(img) {
+    const previewSrc = this.previewSrc;
+    const serverImage = new Image();
 
-  const children = node.getChildren?.();
-  if (!children || children.length === 0) return true
+    serverImage.onload = () => this.#handleImageLoaded(img, previewSrc);
+    serverImage.onerror = () => this.#handleImageLoadError(previewSrc);
+    serverImage.src = this.src;
+  }
 
-  return children.every(child => {
-    if ($isLineBreakNode(child)) return true
-    return $isBlankNode(child)
-  })
-}
+  #handleImageLoaded(img, previewSrc) {
+    img.src = this.src;
+    this.patchAndRewriteHistory({ previewSrc: null });
+    this.#revokePreviewSrc(previewSrc);
+  }
 
-function $trimTrailingBlankNodes(parent) {
-  for (const child of $lastToFirstIterator(parent)) {
-    if ($isBlankNode(child)) {
-      child.remove();
-    } else {
-      break
-    }
+  #handleImageLoadError(previewSrc) {
+    this.patchAndRewriteHistory({
+      previewSrc: null,
+      uploadError: true
+    });
+    this.#revokePreviewSrc(previewSrc);
   }
-}
 
-// A list item is structurally empty if it contains no meaningful content.
-// Unlike getTextContent().trim() === "", this walks descendants to ensure
-// decorator nodes (mentions, attachments whose getTextContent() may return
-// invisible characters like \ufeff) are treated as non-empty content.
-function $isListItemStructurallyEmpty(listItem) {
-  const children = listItem.getChildren();
-  for (const child of children) {
-    if ($isDecoratorNode(child)) return false
-    if ($isLineBreakNode(child)) continue
-    if ($isTextNode(child)) {
-      if (child.getTextContent().trim() !== "") return false
-    } else if ($isElementNode(child)) {
-      if (child.getTextContent().trim() !== "") return false
-    }
+  #revokePreviewSrc(previewSrc) {
+    if (previewSrc?.startsWith("blob:")) URL.revokeObjectURL(previewSrc);
   }
-  return true
-}
 
-function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
-  return $isTextNode(node)
-    && node.getTextContent() === " "
-    && index === childCount - 1
-    && previousNode instanceof CustomActionTextAttachmentNode
-}
+  #swapPreviewToFileDOM(img) {
+    const figure = img.closest("figure.attachment");
+    if (!figure) return
 
-function $splitParagraphsAtLineBreakBoundaries(selection) {
-  $ensureForwardRangeSelection(selection);
+    this.#swapFigureContent(figure, "attachment--preview", "attachment--file", () => {
+      figure.appendChild(this.#createDOMForFile());
+      figure.appendChild(this.#createDOMForNotImage());
+    });
+  }
 
-  // Split focus first so the anchor split position stays valid.
-  $splitAtNearestLineBreak(selection.focus, "next");
-  $splitAtNearestLineBreak(selection.anchor, "previous");
-}
+  #pollForPreview(figure) {
+    let attempt = 0;
+    const maxAttempts = 10;
 
-function $splitAtNearestLineBreak(point, direction) {
-  const paragraph = point.getNode().getTopLevelElement();
-  if (!paragraph || !$isParagraphNode(paragraph)) return
+    const tryLoad = () => {
+      if (!this.editor.read(() => this.isAttached())) return
 
-  const pointNode = point.getNode();
-  const selectionChild = pointNode.getParent().is(paragraph) ? pointNode : pointNode.getParentOrThrow();
-  const lineBreakCaret = $caretAtNearestNodeOfType(selectionChild, LineBreakNode, direction);
-  if (!lineBreakCaret) return
+      const img = new Image();
+      const cacheBustedSrc = `${this.src}${this.src.includes("?") ? "&" : "?"}_=${Date.now()}`;
 
-  const lineBreak = lineBreakCaret.origin;
-  const isEdge = lineBreakCaret.getNodeAtCaret() === null;
+      img.onload = () => {
+        if (!this.editor.read(() => this.isAttached())) return
 
-  if (!isEdge) {
-    $splitNode(paragraph, lineBreak.getIndexWithinParent());
-  }
+        // 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;
+    };
 
-  lineBreak.remove();
-}
+    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);
+      }
+    };
 
-function $caretAtNearestNodeOfType(node, klass, direction) {
-  for (const caret of $getSiblingCaret(node, direction)) {
-    if (caret.origin instanceof klass) return caret
+    // Give the server time to start processing before the first attempt
+    setTimeout(tryLoad, 3000);
   }
-  return null
-}
-
-// Shared, strictly-contained element used to attach ephemeral nodes when we
-// need to read computed styles (e.g. canonicalizing style values, resolving
-// CSS custom properties). The container is created once and attached to
-// `document.body` once; subsequent child mutations happen *inside* the
-// contained subtree so they do not invalidate style on the rest of the page.
-//
-// Without this, `document.body.appendChild(...)` / `element.remove()` calls
-// forced the browser to re-evaluate every ancestor-dependent selector (`:has()`,
-// descendant combinators, universal sibling rules) across the document on each
-// invocation — a 13,000+ element style recalc per call on a typical Basecamp
-// page.
 
-let resolverRoot = null;
+  #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());
+    });
 
-function styleResolverRoot() {
-  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
+    this.patchAndRewriteHistory({ pendingPreview: false });
+  }
 
-  resolverRoot = document.createElement("div");
-  resolverRoot.setAttribute("aria-hidden", "true");
-  resolverRoot.setAttribute("data-lexxy-style-resolver", "");
-  // `contain: strict` (size, layout, paint, style) isolates everything.
-  // The root itself paints nothing (visibility hidden), has zero
-  // geometric impact (position fixed, intrinsic size via contain), and
-  // never leaks style invalidation to its ancestors.
-  resolverRoot.style.cssText = "contain: strict; position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none; width: 0; height: 0;";
-  document.body.appendChild(resolverRoot);
-  return resolverRoot
-}
+  #swapFigureContent(figure, fromClass, toClass, renderContent) {
+    figure.className = figure.className.replace(fromClass, toClass);
 
-function isSelectionHighlighted(selection) {
-  if (!$isRangeSelection(selection)) return false
+    for (const child of [ ...figure.querySelectorAll(".attachment__container, .attachment__icon, figcaption") ]) {
+      child.remove();
+    }
 
-  if (selection.isCollapsed()) {
-    return hasHighlightStyles(selection.style)
-  } else {
-    return selection.hasFormat("highlight")
+    renderContent();
   }
-}
-
-function getHighlightStyles(selection) {
-  if (!$isRangeSelection(selection)) return null
 
-  let styles = getStyleObjectFromCSS(selection.style);
-  if (!styles.color && !styles["background-color"]) {
-    const anchorNode = selection.anchor.getNode();
-    if ($isTextNode(anchorNode)) {
-      styles = getStyleObjectFromCSS(anchorNode.getStyle());
+  get #imageDimensions() {
+    if (this.width && this.height) {
+      return { width: this.width, height: this.height }
+    } else {
+      return {}
     }
   }
 
-  const color = styles.color || null;
-  const backgroundColor = styles["background-color"] || null;
-  if (!color && !backgroundColor) return null
+  #createDOMForFile() {
+    const extension = this.fileName ? this.fileName.split(".").pop().toLowerCase() : "unknown";
+    return createElement("span", { className: "attachment__icon", textContent: `${extension}` })
+  }
 
-  return { color, backgroundColor }
-}
-
-function hasHighlightStyles(cssOrStyles) {
-  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
-  return !!(styles.color || styles["background-color"])
-}
-
-function applyCanonicalizers(styles, canonicalizers = []) {
-  return canonicalizers.reduce((css, canonicalizer) => {
-    return canonicalizer.applyCanonicalization(css)
-  }, styles)
-}
+  #createDOMForNotImage() {
+    const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
-class StyleCanonicalizer {
-  constructor(property, allowedValues= []) {
-    this._property = property;
-    this._allowedValues = allowedValues;
-    this._canonicalValues = this.#allowedValuesIdentityObject;
-  }
+    const nameTag = createElement("strong", { className: "attachment__name", textContent: this.caption || this.fileName });
 
-  applyCanonicalization(css) {
-    const styles = { ...getStyleObjectFromCSS(css) };
+    figcaption.appendChild(nameTag);
 
-    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
-    if (!styles[this._property]) {
-      delete styles[this._property];
+    if (this.fileSize) {
+      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
+      figcaption.appendChild(sizeSpan);
     }
 
-    return getCSSFromStyleObject(styles)
+    return figcaption
   }
 
-  getCanonicalAllowedValue(value) {
-    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
-  }
+  #createEditableCaption() {
+    const caption = createElement("figcaption", { className: "attachment__caption" });
+    const input = createElement("textarea", {
+      value: this.caption,
+      placeholder: this.fileName,
+      rows: "1"
+    });
 
-  // Private
+    input.addEventListener("focusin", () => input.placeholder = "Add caption...");
+    input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
+    input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
+    input.addEventListener("copy", (event) => event.stopPropagation());
+    input.addEventListener("cut", (event) => event.stopPropagation());
+    input.addEventListener("paste", (event) => event.stopPropagation());
 
-  get #allowedValuesIdentityObject() {
-    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+    caption.appendChild(input);
+
+    return caption
   }
 
-  #resolveCannonicalValue(value) {
-    let index = this.#computedAllowedValues.indexOf(value);
-    if (index === -1) {
-      index = this.#computedAllowedValues.indexOf(computeStyleValues(this._property, [ value ])[0]);
-    }
-    return index === -1 ? null : this._allowedValues[index]
+  #handleCaptionInputBlurred(event) {
+    this.#updateCaptionValueFromInput(event.target);
   }
 
-  get #computedAllowedValues() {
-    return this._computedAllowedValues ||= computeStyleValues(this._property, this._allowedValues)
+  #updateCaptionValueFromInput(input) {
+    input.placeholder = this.fileName;
+    this.editor.update(() => {
+      this.getWritable().caption = input.value;
+    });
   }
-}
 
-// Separates DOM writes from layout reads to avoid forced reflows, and attaches
-// resolver elements to a strictly-contained root (outside the normal document
-// flow) so neither the attach nor the detach invalidate styles on the rest of
-// the page. Without containment, appending to `document.body` triggered a
-// page-wide style recalc on every canonicalization pass.
-function computeStyleValues(property, values) {
-  const fragment = document.createDocumentFragment();
+  #handleCaptionInputKeydown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.target.blur();
 
-  const elements = values.map(value => {
-    const element = createElement("span", { style: `display: none; ${property}: ${value};` });
-    fragment.appendChild(element);
-    return element
-  });
+      this.editor.update(() => {
+        // Place the cursor after the current image
+        this.selectNext(0, 0);
+      }, {
+        tag: HISTORY_MERGE_TAG
+      });
+    }
 
-  styleResolverRoot().appendChild(fragment);
+    // Stop all keydown events from bubbling to the Lexical root element.
+    // The caption textarea is outside Lexical's content model and should
+    // handle its own keyboard events natively (Ctrl+A, Ctrl+C, Ctrl+X, etc.).
+    event.stopPropagation();
+  }
+}
 
-  const computed = elements.map(element =>
-    window.getComputedStyle(element).getPropertyValue(property)
-  );
+function $createActionTextAttachmentNode(...args) {
+  return new ActionTextAttachmentNode(...args)
+}
 
-  elements.forEach(element => element.remove());
-  return computed
+function $isActionTextAttachmentNode(node) {
+  return node instanceof ActionTextAttachmentNode
 }
 
-class LexxyExtension {
-  #editorElement
+function $generateFilteredNodesFromDOM(editorElement, doc) {
+  const nodes = $generateNodesFromDOM(editorElement.editor, doc);
+  return filterDisallowedAttachmentNodes(nodes, editorElement)
+}
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-  }
+function filterDisallowedAttachmentNodes(nodes, editorElement) {
+  return nodes
+    .filter(node => !isDisallowedAttachment(node, editorElement))
+    .map(node => {
+      $descendantsMatching([ node ], descendant => isDisallowedAttachment(descendant, editorElement))
+        .forEach(descendant => descendant.remove());
+      return node
+    })
+}
 
-  get editorElement() {
-    return this.#editorElement
-  }
+function isDisallowedAttachment(node, editorElement) {
+  const isAttachmentNode =
+    node instanceof CustomActionTextAttachmentNode ||
+    node instanceof ActionTextAttachmentNode;
+  return isAttachmentNode &&
+         !editorElement.permitsAttachmentContentType(node.contentType)
+}
 
-  get editorConfig() {
-    return this.#editorElement.config
+class HorizontalDividerNode extends DecoratorNode {
+  static getType() {
+    return "horizontal_divider"
   }
 
-  // optional: defaults to true
-  get enabled() {
-    return true
+  static clone(node) {
+    return new HorizontalDividerNode(node.__key)
   }
 
-  get lexicalExtension() {
-    return null
+  static importJSON(serializedNode) {
+    return new HorizontalDividerNode()
   }
 
-  get allowedElements() {
-    return []
+  static importDOM() {
+    return {
+      "hr": (hr) => {
+        return {
+          conversion: () => ({
+            node: new HorizontalDividerNode()
+          }),
+          priority: 1
+        }
+      }
+    }
   }
 
-  initializeToolbar(_lexxyToolbar) {
-
+  constructor(key) {
+    super(key);
   }
-}
 
-const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
-const REMOVE_HIGHLIGHT_COMMAND = createCommand();
-const BLANK_STYLES = { "color": null, "background-color": null };
+  createDOM() {
+    const figure = createElement("figure", { className: "horizontal-divider" });
+    const hr = createElement("hr");
 
-const hasPastedStylesState = createState("hasPastedStyles", {
-  parse: (value) => value || false
-});
+    figure.appendChild(hr);
 
-// Stores pending highlight ranges extracted during HTML import, keyed by CodeNode key.
-// After the code retokenizer creates fresh CodeHighlightNodes, a mutation listener
-// reads this map and re-applies the highlight styles. Scoped per editor instance
-// so entries don't leak across editors or outlive a torn-down editor.
-const pendingCodeHighlights = new WeakMap();
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
 
-class HighlightExtension extends LexxyExtension {
-  get enabled() {
-    return this.editorElement.supportsRichText
+    return figure
   }
 
-  get lexicalExtension() {
-    const extension = defineExtension({
-      dependencies: [ RichTextExtension ],
-      name: "lexxy/highlight",
-      config: {
-        color: { buttons: [], permit: [] },
-        "background-color": { buttons: [], permit: [] }
-      },
-      html: {
-        import: {
-          mark: $markConversion
-        }
-      },
-      register(editor, config) {
-        // keep the ref to the canonicalizers for optimized css conversion
-        const canonicalizers = buildCanonicalizers(config);
-
-        // Register the <pre> converter directly in the conversion cache so it
-        // coexists with other extensions' "pre" converters (the extension-level
-        // html.import uses Object.assign, which means only one "pre" per key).
-        $registerPreConversion(editor);
-
-        return mergeRegister(
-          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, (styles) => $toggleSelectionStyles(editor, styles), COMMAND_PRIORITY_NORMAL),
-          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(editor, BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
-          editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
-          editor.registerNodeTransform(CodeHighlightNode, $syncHighlightWithCodeHighlightNode),
-          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers)),
-          editor.registerMutationListener(CodeNode, (mutations) => {
-            $applyPendingCodeHighlights(editor, mutations);
-          }, { skipInitialization: true })
-        )
-      }
-    });
+  updateDOM() {
+    return true
+  }
 
-    return [ extension, this.editorConfig.get("highlight") ]
+  getTextContent() {
+    return "┄\n\n"
   }
-}
 
-function $applyHighlightStyle(textNode, element) {
-  const elementStyles = {
-    color: element.style?.color,
-    "background-color": element.style?.backgroundColor
-  };
+  isInline() {
+    return false
+  }
 
-  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
-  const highlightStyle = getCSSFromStyleObject(elementStyles);
+  exportDOM() {
+    const hr = createElement("hr");
+    return { element: hr }
+  }
 
-  if (highlightStyle.length) {
-    return textNode.setStyle(textNode.getStyle() + highlightStyle)
+  exportJSON() {
+    return {
+      type: "horizontal_divider",
+      version: 1
+    }
   }
-}
 
-function $markConversion() {
-  return {
-    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
-    priority: 1
+  decorate() {
+    return null
   }
 }
 
-// Register a custom <pre> converter directly in the editor's HTML conversion
-// cache. We can't use the extension-level html.import because Object.assign
-// merges all extensions' converters by tag, and a later extension (e.g.
-// TrixContentExtension) would overwrite ours.
-function $registerPreConversion(editor) {
-  if (!editor._htmlConversions) return
-
-  let preEntries = editor._htmlConversions.get("pre");
-  if (!preEntries) {
-    preEntries = [];
-    editor._htmlConversions.set("pre", preEntries);
-  }
-  preEntries.push($preConversionWithHighlightsFactory(editor));
-}
-
-// Returns a <pre> converter factory scoped to a specific editor instance.
-// The factory extracts highlight ranges from <mark> elements before the code
-// retokenizer can destroy them. The ranges are stored in pendingCodeHighlights
-// and applied after retokenization via a mutation listener.
-function $preConversionWithHighlightsFactory(editor) {
-  return function $preConversionWithHighlights(domNode) {
-    const highlights = extractHighlightRanges(domNode);
-    if (highlights.length === 0) return null
-
-    return {
-      conversion: (domNode) => {
-        const language = domNode.getAttribute("data-language");
-        const codeNode = $createCodeNode(language);
-        $getPendingHighlights(editor).set(codeNode.getKey(), highlights);
-        return { node: codeNode }
-      },
-      priority: 2
-    }
-  }
-}
-
-// Walk the DOM tree inside a <pre> element and build a list of
-// { start, end, style } ranges for every <mark> element found.
-function extractHighlightRanges(preElement) {
-  const ranges = [];
-  const codeElement = preElement.querySelector("code") || preElement;
-
-  let offset = 0;
-
-  function walk(node) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      offset += node.textContent.length;
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      // <br> maps to a LineBreakNode (1 character) in Lexical
-      if (node.tagName === "BR") {
-        offset += 1;
-        return
-      }
-
-      const isMark = node.tagName === "MARK";
-      const start = offset;
-
-      for (const child of node.childNodes) {
-        walk(child);
-      }
-
-      if (isMark) {
-        const style = extractHighlightStyleFromElement(node);
-        if (style) {
-          ranges.push({ start, end: offset, style });
-        }
-      }
-    }
-  }
-
-  for (const child of codeElement.childNodes) {
-    walk(child);
-  }
-
-  return ranges
-}
-
-function $getPendingHighlights(editor) {
-  let map = pendingCodeHighlights.get(editor);
-  if (!map) {
-    map = new Map();
-    pendingCodeHighlights.set(editor, map);
-  }
-  return map
-}
-
-function extractHighlightStyleFromElement(element) {
-  const styles = {};
-  if (element.style?.color) styles.color = element.style.color;
-  if (element.style?.backgroundColor) styles["background-color"] = element.style.backgroundColor;
-  const css = getCSSFromStyleObject(styles);
-  return css.length > 0 ? css : null
-}
-
-// Called from the CodeNode mutation listener after the retokenizer has
-// replaced TextNodes with fresh CodeHighlightNodes.
-function $applyPendingCodeHighlights(editor, mutations) {
-  const pending = $getPendingHighlights(editor);
-  const keysToProcess = [];
+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);
 
-  for (const [ key, type ] of mutations) {
-    if (type !== "destroyed" && pending.has(key)) {
-      keysToProcess.push(key);
+    if (!isImport) {
+      const paragraph = $createParagraphNode();
+      hrNode.insertAfter(paragraph);
+      paragraph.select();
     }
-  }
+  },
+  type: "multiline-element"
+};
 
-  if (keysToProcess.length === 0) return
+const PUNCTUATION_OR_SPACE = /[^\w]/;
 
-  // Use a deferred update so the retokenizer has finished its
-  // skipTransforms update before we touch the nodes.
-  editor.update(() => {
-    for (const key of keysToProcess) {
-      const highlights = pending.get(key);
-      pending.delete(key);
-      if (!highlights) continue
+// Supplements Lexical's built-in registerMarkdownShortcuts to handle the case
+// where a user types a leading tag before text that already ends with a
+// trailing tag (e.g. typing ` before `hello`` or ** before **hello**).
+//
+// Lexical's markdown shortcut handler only triggers format transformations when
+// the closing tag is the character just typed. When the opening tag is typed
+// instead (e.g. typing ` before `hello`` to form ``hello``), the built-in
+// handler doesn't match because it looks backward from the cursor for an
+// opening tag, but the cursor is right after it.
+//
+// This listener detects that scenario for ALL text format transformers
+// (backtick, bold, italic, strikethrough, etc.) and applies the appropriate
+// format.
+function registerMarkdownLeadingTagHandler(editor, transformers) {
+  const textFormatTransformers = transformers
+    .filter(t => t.type === "text-format")
+    .sort((a, b) => b.tag.length - a.tag.length); // Longer tags first
 
-      const codeNode = $getNodeByKey(key);
-      if (!codeNode || !$isCodeNode(codeNode)) continue
+  return editor.registerUpdateListener(({ tags, dirtyLeaves, editorState, prevEditorState }) => {
+    if (tags.has("historic") || tags.has("collaboration")) return
+    if (editor.isComposing()) return
 
-      $applyHighlightRangesToCodeNode(codeNode, highlights);
-    }
-  }, { skipTransforms: true, discrete: true });
-}
+    const selection = editorState.read($getSelection);
+    const prevSelection = prevEditorState.read($getSelection);
 
-// Apply saved highlight ranges to the CodeHighlightNode children
-// of a CodeNode, splitting nodes at range boundaries as needed.
-// We can't use TextNode.splitText() because it creates TextNode
-// instances (not CodeHighlightNodes) for the split parts. Instead,
-// we manually create CodeHighlightNode replacements.
-function $applyHighlightRangesToCodeNode(codeNode, highlights) {
-  if (highlights.length === 0) return
+    if (!$isRangeSelection(prevSelection) || !$isRangeSelection(selection) || !selection.isCollapsed()) return
 
-  for (const { start: hlStart, end: hlEnd, style } of highlights) {
-    // Rebuild the child-to-offset mapping for each highlight range because
-    // earlier ranges may have split nodes, invalidating previous mappings.
-    const childRanges = $buildChildRanges(codeNode);
+    const anchorKey = selection.anchor.key;
+    const anchorOffset = selection.anchor.offset;
 
-    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
+    if (!dirtyLeaves.has(anchorKey)) return
 
-      // Check if this child overlaps with the highlight range
-      const overlapStart = Math.max(hlStart, nodeStart);
-      const overlapEnd = Math.min(hlEnd, nodeEnd);
+    const anchorNode = editorState.read(() => $getNodeByKey(anchorKey));
+    if (!$isTextNode(anchorNode)) return
 
-      if (overlapStart >= overlapEnd) continue
+    // Only trigger when cursor moved forward (typing)
+    const prevOffset = prevSelection.anchor.key === anchorKey ? prevSelection.anchor.offset : 0;
+    if (anchorOffset <= prevOffset) return
 
-      // Calculate offsets relative to this node
-      const relStart = overlapStart - nodeStart;
-      const relEnd = overlapEnd - nodeStart;
-      const nodeLength = nodeEnd - nodeStart;
+    const textContent = editorState.read(() => anchorNode.getTextContent());
 
-      if (relStart === 0 && relEnd === nodeLength) {
-        // Entire node is highlighted - apply style directly
-        node.setStyle(style);
-        $setCodeHighlightFormat(node, true);
-      } else {
-        // Need to split: replace the node with 2 or 3 CodeHighlightNodes
-        const text = node.getTextContent();
-        const highlightType = node.getHighlightType();
-        const replacements = [];
+    // Try each transformer, longest tags first
+    for (const transformer of textFormatTransformers) {
+      const tag = transformer.tag;
+      const tagLen = tag.length;
 
-        if (relStart > 0) {
-          replacements.push($createCodeHighlightNode(text.slice(0, relStart), highlightType));
-        }
+      // The typed characters must end at the cursor position and form the opening tag
+      const openTagStart = anchorOffset - tagLen;
+      if (openTagStart < 0) continue
 
-        const styledNode = $createCodeHighlightNode(text.slice(relStart, relEnd), highlightType);
-        styledNode.setStyle(style);
-        $setCodeHighlightFormat(styledNode, true);
-        replacements.push(styledNode);
+      const candidateOpenTag = textContent.slice(openTagStart, anchorOffset);
+      if (candidateOpenTag !== tag) continue
 
-        if (relEnd < nodeLength) {
-          replacements.push($createCodeHighlightNode(text.slice(relEnd), highlightType));
-        }
+      // Disambiguate from longer tags: if the character before the opening tag
+      // is the same as the tag character, this might be part of a longer tag
+      // (e.g. seeing `*` when the user is actually typing `**`)
+      const tagChar = tag[0];
+      if (openTagStart > 0 && textContent[openTagStart - 1] === tagChar) continue
 
-        for (const replacement of replacements) {
-          node.insertBefore(replacement);
-        }
-        node.remove();
+      // Check intraword constraint: if intraword is false, the character before
+      // the opening tag must be a space, punctuation, or the start of the text
+      if (transformer.intraword === false && openTagStart > 0) {
+        const beforeChar = textContent[openTagStart - 1];
+        if (beforeChar && !PUNCTUATION_OR_SPACE.test(beforeChar)) continue
       }
-    }
-  }
-}
 
-function $buildChildRanges(codeNode) {
-  const childRanges = [];
-  let charOffset = 0;
-
-  for (const child of codeNode.getChildren()) {
-    if ($isCodeHighlightNode(child) || $isTextNode(child)) {
-      const text = child.getTextContent();
-      childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
-      charOffset += text.length;
-    } else {
-      // LineBreakNode, TabNode - count as 1 character each (\n, \t)
-      charOffset += 1;
-    }
-  }
-
-  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 ]),
-    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
-  ]
-}
-
-function $toggleSelectionStyles(editor, styles) {
-  const selection = $getSelection();
-  if (!$isRangeSelection(selection)) return
+      // Search forward for a closing tag in the same text node
+      const searchStart = anchorOffset;
+      const closeTagIndex = textContent.indexOf(tag, searchStart);
+      if (closeTagIndex < 0) continue
 
-  const patch = {};
-  for (const property in styles) {
-    const oldValue = $getSelectionStyleValueForProperty(selection, property);
-    patch[property] = toggleOrReplace(oldValue, styles[property]);
-  }
+      // Disambiguate closing tag from longer tags: if the character right after
+      // the closing tag is the same as the tag character, skip
+      // (e.g. `*hello**` — the first `*` at index 6 is part of `**`)
+      if (textContent[closeTagIndex + tagLen] === tagChar) continue
 
-  if ($selectionIsInCodeBlock(selection)) {
-    $patchCodeHighlightStyles(editor, selection, patch);
-  } else {
-    $patchStyleText(selection, patch);
-  }
-}
+      // Also check if the character before the closing tag start is the same
+      // tag character (e.g. the closing tag might be a suffix of a longer sequence)
+      if (closeTagIndex > 0 && textContent[closeTagIndex - 1] === tagChar) continue
 
-function $selectionIsInCodeBlock(selection) {
-  const nodes = selection.getNodes();
-  return nodes.some((node) => {
-    // 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)
-  })
-}
+      // There must be content between the tags (not just empty or whitespace-adjacent)
+      const innerStart = anchorOffset;
+      const innerEnd = closeTagIndex;
+      if (innerEnd <= innerStart) continue
 
-function $patchCodeHighlightStyles(editor, selection, patch) {
-  // 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) || $isTextNode(node)) && $isCodeNode(node.getParent()))
-    .map((node) => ({
-      key: node.getKey(),
-      startOffset: $getNodeSelectionOffsets(node, selection)[0],
-      endOffset: $getNodeSelectionOffsets(node, selection)[1],
-      textSize: node.getTextContentSize()
-    }));
+      // No space immediately after opening tag
+      if (textContent[innerStart] === " ") continue
 
-  // Use skipTransforms to prevent the code highlighting system from
-  // re-tokenizing and wiping out the style changes we apply.
-  // Use discrete to force a synchronous commit, ensuring the changes
-  // 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();
+      // No space immediately before closing tag
+      if (textContent[innerEnd - 1] === " ") continue
 
-    for (const { key, startOffset, endOffset, textSize } of nodeKeys) {
-      const node = $getNodeByKey(key);
-      if (!node) continue
+      // Check intraword constraint for closing tag
+      if (transformer.intraword === false) {
+        const afterCloseChar = textContent[closeTagIndex + tagLen];
+        if (afterCloseChar && !PUNCTUATION_OR_SPACE.test(afterCloseChar)) continue
+      }
 
-      const parent = node.getParent();
-      if (!$isCodeNode(parent)) continue
-      if (startOffset === endOffset) continue
+      editor.update(() => {
+        const node = $getNodeByKey(anchorKey);
+        if (!node || !$isTextNode(node)) return
 
-      affectedCodeNodes.add(parent);
+        const parent = node.getParent();
+        if (parent === null || $isCodeNode(parent)) return
 
-      if (startOffset === 0 && endOffset === textSize) {
-        $applyStylePatchToNode(node, patch);
-      } else {
-        const splitNodes = node.splitText(startOffset, endOffset);
-        const targetNode = splitNodes[startOffset === 0 ? 0 : 1];
-        $applyStylePatchToNode(targetNode, patch);
-      }
-    }
+        $applyFormatFromLeadingTag(node, openTagStart, transformer);
+      });
 
-    // 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);
-      }
+      break // Only apply the first (longest) matching transformer
     }
-  }, { skipTransforms: true, discrete: true });
+  })
 }
 
-function $getNodeSelectionOffsets(node, selection) {
-  const nodeKey = node.getKey();
-  const anchorKey = selection.anchor.key;
-  const focusKey = selection.focus.key;
-  const textSize = node.getTextContentSize();
+function $applyFormatFromLeadingTag(anchorNode, openTagStart, transformer) {
+  const tag = transformer.tag;
+  const tagLen = tag.length;
+  const textContent = anchorNode.getTextContent();
 
-  const isAnchor = nodeKey === anchorKey;
-  const isFocus = nodeKey === focusKey;
+  const innerStart = openTagStart + tagLen;
+  const closeTagIndex = textContent.indexOf(tag, innerStart);
+  if (closeTagIndex < 0) return
 
-  // Determine if selection is forward or backward
-  const isForward = selection.isBackward() === false;
+  const inner = textContent.slice(innerStart, closeTagIndex);
+  if (inner.length === 0) return
 
-  let start = 0;
-  let end = textSize;
+  // Remove both tags and apply format
+  const before = textContent.slice(0, openTagStart);
+  const after = textContent.slice(closeTagIndex + tagLen);
 
-  if (isForward) {
-    if (isAnchor) start = selection.anchor.offset;
-    if (isFocus) end = selection.focus.offset;
-  } else {
-    if (isFocus) start = selection.focus.offset;
-    if (isAnchor) end = selection.anchor.offset;
-  }
+  anchorNode.setTextContent(before + inner + after);
 
-  return [ start, end ]
-}
+  const nextSelection = $createRangeSelection();
+  $setSelection(nextSelection);
 
-function $applyStylePatchToNode(node, patch) {
-  const prevStyles = getStyleObjectFromCSS(node.getStyle());
-  const newStyles = { ...prevStyles };
+  // Select the inner text to apply formatting
+  nextSelection.anchor.set(anchorNode.getKey(), openTagStart, "text");
+  nextSelection.focus.set(anchorNode.getKey(), openTagStart + inner.length, "text");
 
-  for (const [ key, value ] of Object.entries(patch)) {
-    if (value === null) {
-      delete newStyles[key];
-    } else {
-      newStyles[key] = value;
+  for (const format of transformer.format) {
+    if (!nextSelection.hasFormat(format)) {
+      nextSelection.formatText(format);
     }
   }
 
-  const newCSSText = getCSSFromStyleObject(newStyles);
-  node.setStyle(newCSSText);
-
-  // Sync the highlight format using TextNode's setFormat to bypass
-  // CodeHighlightNode's no-op override
-  const shouldHaveHighlight = hasHighlightStyles(newCSSText);
-  const hasHighlight = node.hasFormat("highlight");
+  // Collapse selection to end of formatted text and clear the format
+  // so subsequent typing is plain text
+  nextSelection.anchor.set(nextSelection.focus.key, nextSelection.focus.offset, nextSelection.focus.type);
 
-  if (shouldHaveHighlight !== hasHighlight) {
-    $setCodeHighlightFormat(node, shouldHaveHighlight);
+  for (const format of transformer.format) {
+    if (nextSelection.hasFormat(format)) {
+      nextSelection.toggleFormat(format);
+    }
   }
 }
 
-function $setCodeHighlightFormat(node, shouldHaveHighlight) {
-  const writable = node.getWritable();
-  const IS_HIGHLIGHT = 1 << 7;
-
-  if (shouldHaveHighlight) {
-    writable.__format |= IS_HIGHLIGHT;
-  } else {
-    writable.__format &= ~IS_HIGHLIGHT;
+var theme = {
+  text: {
+    bold: "lexxy-content__bold",
+    italic: "lexxy-content__italic",
+    strikethrough: "lexxy-content__strikethrough",
+    underline: "lexxy-content__underline",
+    highlight: "lexxy-content__highlight"
+  },
+  tableCellHeader: "lexxy-content__table-cell--header",
+  tableCellSelected: "lexxy-content__table-cell--selected",
+  tableSelection: "lexxy-content__table--selection",
+  tableScrollableWrapper: "lexxy-content__table-wrapper",
+  tableCellHighlight: "lexxy-content__table-cell--highlight",
+  tableCellFocus: "lexxy-content__table-cell--focus",
+  list: {
+    nested: {
+      listitem: "lexxy-nested-listitem",
+    }
+  },
+  codeHighlight: {
+    addition: "code-token__selector",
+    atrule: "code-token__attr",
+    attr: "code-token__attr",
+    "attr-name": "code-token__attr",
+    "attr-value": "code-token__selector",
+    boolean: "code-token__property",
+    bold: "code-token__variable",
+    builtin: "code-token__selector",
+    cdata: "code-token__comment",
+    char: "code-token__selector",
+    class: "code-token__function",
+    "class-name": "code-token__function",
+    color: "code-token__property",
+    comment: "code-token__comment",
+    constant: "code-token__property",
+    coord: "code-token__comment",
+    decorator: "code-token__function",
+    deleted: "code-token__operator",
+    deletion: "code-token__operator",
+    directive: "code-token__attr",
+    "directive-hash": "code-token__property",
+    doctype: "code-token__comment",
+    entity: "code-token__operator",
+    function: "code-token__function",
+    hexcode: "code-token__property",
+    important: "code-token__function",
+    inserted: "code-token__selector",
+    italic: "code-token__comment",
+    keyword: "code-token__attr",
+    line: "code-token__selector",
+    namespace: "code-token__variable",
+    number: "code-token__property",
+    macro: "code-token__function",
+    operator: "code-token__operator",
+    parameter: "code-token__variable",
+    prolog: "code-token__comment",
+    property: "code-token__property",
+    punctuation: "code-token__punctuation",
+    "raw-string": "code-token__operator",
+    regex: "code-token__variable",
+    script: "code-token__function",
+    selector: "code-token__selector",
+    string: "code-token__selector",
+    style: "code-token__function",
+    symbol: "code-token__property",
+    tag: "code-token__property",
+    title: "code-token__function",
+    "type-definition": "code-token__function",
+    url: "code-token__operator",
+    variable: "code-token__variable",
   }
-}
+};
 
-function toggleOrReplace(oldValue, newValue) {
-  return oldValue === newValue ? null : newValue
-}
+// Shared, strictly-contained element used to attach ephemeral nodes when we
+// need to read computed styles (e.g. canonicalizing style values, resolving
+// CSS custom properties). The container is created once and attached to
+// `document.body` once; subsequent child mutations happen *inside* the
+// contained subtree so they do not invalidate style on the rest of the page.
+//
+// Without this, `document.body.appendChild(...)` / `element.remove()` calls
+// forced the browser to re-evaluate every ancestor-dependent selector (`:has()`,
+// descendant combinators, universal sibling rules) across the document on each
+// invocation — a 13,000+ element style recalc per call on a typical Basecamp
+// page.
 
-function $syncHighlightWithStyle(textNode) {
-  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
-    textNode.toggleFormat("highlight");
-  }
-}
+let resolverRoot = null;
 
-function $syncHighlightWithCodeHighlightNode(node) {
-  const parent = node.getParent();
-  if (!$isCodeNode(parent)) return
+function styleResolverRoot() {
+  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
 
-  const shouldHaveHighlight = hasHighlightStyles(node.getStyle());
-  const hasHighlight = node.hasFormat("highlight");
+  resolverRoot = document.createElement("div");
+  resolverRoot.setAttribute("aria-hidden", "true");
+  resolverRoot.setAttribute("data-lexxy-style-resolver", "");
+  // `contain: strict` (size, layout, paint, style) isolates everything.
+  // The root itself paints nothing (visibility hidden), has zero
+  // geometric impact (position fixed, intrinsic size via contain), and
+  // never leaks style invalidation to its ancestors.
+  resolverRoot.style.cssText = "contain: strict; position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none; width: 0; height: 0;";
+  document.body.appendChild(resolverRoot);
+  return resolverRoot
+}
 
-  if (shouldHaveHighlight !== hasHighlight) {
-    $setCodeHighlightFormat(node, shouldHaveHighlight);
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
+
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
   }
 }
 
-function $canonicalizePastedStyles(textNode, canonicalizers = []) {
-  if ($hasPastedStyles(textNode)) {
-    $setPastedStyles(textNode, false);
-
-    const canonicalizedCSS = applyCanonicalizers(textNode.getStyle(), canonicalizers);
-    textNode.setStyle(canonicalizedCSS);
+function getHighlightStyles(selection) {
+  if (!$isRangeSelection(selection)) return null
 
-    const selection = $getSelection();
-    if (textNode.isSelected(selection)) {
-      selection.setStyle(textNode.getStyle());
-      selection.setFormat(textNode.getFormat());
+  let styles = getStyleObjectFromCSS(selection.style);
+  if (!styles.color && !styles["background-color"]) {
+    const anchorNode = selection.anchor.getNode();
+    if ($isTextNode(anchorNode)) {
+      styles = getStyleObjectFromCSS(anchorNode.getStyle());
     }
   }
-}
 
-function $setPastedStyles(textNode, value = true) {
-  $setState(textNode, hasPastedStylesState, value);
-}
+  const color = styles.color || null;
+  const backgroundColor = styles["background-color"] || null;
+  if (!color && !backgroundColor) return null
 
-function $hasPastedStyles(textNode) {
-  return $getState(textNode, hasPastedStylesState)
+  return { color, backgroundColor }
 }
 
-const COMMANDS = [
-  "bold",
-  "italic",
-  "strikethrough",
-  "underline",
-  "link",
-  "unlink",
-  "toggleHighlight",
-  "removeHighlight",
-  "setFormatHeadingLarge",
-  "setFormatHeadingMedium",
-  "setFormatHeadingSmall",
-  "setFormatParagraph",
-  "clearFormatting",
-  "insertUnorderedList",
-  "insertOrderedList",
-  "insertQuoteBlock",
-  "insertCodeBlock",
-  "setCodeLanguage",
-  "insertHorizontalDivider",
-  "uploadImage",
-  "uploadFile",
-
-  "insertTable",
-
-  "undo",
-  "redo"
-];
-
-class CommandDispatcher {
-  #selectionBeforeDrag = null
-  #listeners = new ListenerBin()
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
+}
 
-  static configureFor(editorElement) {
-    return new CommandDispatcher(editorElement)
+function applyCanonicalizers(styles, canonicalizers = []) {
+  return canonicalizers.reduce((css, canonicalizer) => {
+    return canonicalizer.applyCanonicalization(css)
+  }, styles)
+}
+
+class StyleCanonicalizer {
+  constructor(property, allowedValues= []) {
+    this._property = property;
+    this._allowedValues = allowedValues;
+    this._canonicalValues = this.#allowedValuesIdentityObject;
   }
 
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editor = editorElement.editor;
-    this.selection = editorElement.selection;
-    this.contents = editorElement.contents;
-    this.clipboard = editorElement.clipboard;
+  applyCanonicalization(css) {
+    const styles = { ...getStyleObjectFromCSS(css) };
 
-    this.#registerCommands();
-    this.#registerKeyboardCommands();
-    this.#registerDragAndDropHandlers();
-  }
+    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
+    if (!styles[this._property]) {
+      delete styles[this._property];
+    }
 
-  dispatchPaste(event) {
-    return this.clipboard.paste(event)
+    return getCSSFromStyleObject(styles)
   }
 
-  dispatchBold() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  getCanonicalAllowedValue(value) {
+    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
   }
 
-  dispatchItalic() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-  }
+  // Private
 
-  dispatchStrikethrough() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+  get #allowedValuesIdentityObject() {
+    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
   }
 
-  dispatchUnderline() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+  #resolveCannonicalValue(value) {
+    let index = this.#computedAllowedValues.indexOf(value);
+    if (index === -1) {
+      index = this.#computedAllowedValues.indexOf(computeStyleValues(this._property, [ value ])[0]);
+    }
+    return index === -1 ? null : this._allowedValues[index]
   }
 
-  dispatchToggleHighlight(styles) {
-    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
+  get #computedAllowedValues() {
+    return this._computedAllowedValues ||= computeStyleValues(this._property, this._allowedValues)
   }
+}
 
-  dispatchRemoveHighlight() {
-    this.editor.dispatchCommand(REMOVE_HIGHLIGHT_COMMAND);
-  }
+// Separates DOM writes from layout reads to avoid forced reflows, and attaches
+// resolver elements to a strictly-contained root (outside the normal document
+// flow) so neither the attach nor the detach invalidate styles on the rest of
+// the page. Without containment, appending to `document.body` triggered a
+// page-wide style recalc on every canonicalization pass.
+function computeStyleValues(property, values) {
+  const fragment = document.createDocumentFragment();
 
-  dispatchLink(url) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
+  const elements = values.map(value => {
+    const element = createElement("span", { style: `display: none; ${property}: ${value};` });
+    fragment.appendChild(element);
+    return element
+  });
 
-      const anchorNode = selection.anchor.getNode();
+  styleResolverRoot().appendChild(fragment);
 
-      if (selection.isCollapsed() && !$getNearestNodeOfType(anchorNode, LinkNode)) {
-        const autoLinkNode = $createAutoLinkNode(url);
-        const textNode = $createTextNode(url);
-        autoLinkNode.append(textNode);
-        selection.insertNodes([ autoLinkNode ]);
-      } else {
-        $toggleLink(url);
-      }
-    });
-  }
+  const computed = elements.map(element =>
+    window.getComputedStyle(element).getPropertyValue(property)
+  );
 
-  dispatchUnlink() {
-    this.editor.update(() => {
-      // Let adapters signal whether unlink should target a frozen link key.
-      if (this.editorElement.adapter.unlinkFrozenNode?.()) {
-        return
-      }
+  elements.forEach(element => element.remove());
+  return computed
+}
 
-      $toggleLink(null);
-    });
-  }
+const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
+const REMOVE_HIGHLIGHT_COMMAND = createCommand();
+const BLANK_STYLES = { "color": null, "background-color": null };
 
-  dispatchInsertUnorderedList() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
+const hasPastedStylesState = createState("hasPastedStyles", {
+  parse: (value) => value || false
+});
 
-    const anchorNode = selection.anchor.getNode();
+// Stores pending highlight ranges extracted during HTML import, keyed by CodeNode key.
+// After the code retokenizer creates fresh CodeHighlightNodes, a mutation listener
+// reads this map and re-applies the highlight styles. Scoped per editor instance
+// so entries don't leak across editors or outlive a torn-down editor.
+const pendingCodeHighlights = new WeakMap();
 
-    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
-      this.contents.applyParagraphFormat();
-    } else {
-      this.contents.applyUnorderedListFormat();
-    }
+class HighlightExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
   }
 
-  dispatchInsertOrderedList() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
-
-    const anchorNode = selection.anchor.getNode();
+  get lexicalExtension() {
+    const extension = defineExtension({
+      dependencies: [ RichTextExtension ],
+      name: "lexxy/highlight",
+      config: {
+        color: { buttons: [], permit: [] },
+        "background-color": { buttons: [], permit: [] }
+      },
+      html: {
+        import: {
+          mark: $markConversion
+        }
+      },
+      register(editor, config) {
+        // keep the ref to the canonicalizers for optimized css conversion
+        const canonicalizers = buildCanonicalizers(config);
 
-    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
-      this.contents.applyParagraphFormat();
-    } else {
-      this.contents.applyOrderedListFormat();
-    }
-  }
+        // Register the <pre> converter directly in the conversion cache so it
+        // coexists with other extensions' "pre" converters (the extension-level
+        // html.import uses Object.assign, which means only one "pre" per key).
+        $registerPreConversion(editor);
 
-  dispatchInsertQuoteBlock() {
-    this.contents.toggleBlockquote();
-  }
+        return mergeRegister(
+          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, (styles) => $toggleSelectionStyles(editor, styles), COMMAND_PRIORITY_NORMAL),
+          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(editor, BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
+          editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
+          editor.registerNodeTransform(CodeHighlightNode, $syncHighlightWithCodeHighlightNode),
+          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers)),
+          editor.registerMutationListener(CodeNode, (mutations) => {
+            $applyPendingCodeHighlights(editor, mutations);
+          }, { skipInitialization: true })
+        )
+      }
+    });
 
-  dispatchInsertCodeBlock() {
-    if (this.selection.hasSelectedWordsInSingleLine) {
-      this.#toggleInlineCode();
-    } else {
-      this.contents.toggleCodeBlock();
-    }
+    return [ extension, this.editorConfig.get("highlight") ]
   }
+}
 
-  #toggleInlineCode() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
-
-    if (!selection.isCollapsed()) {
-      const textNodes = selection.getNodes().filter($isTextNode);
-      const applyingCode = !textNodes.every((node) => node.hasFormat("code"));
+function $applyHighlightStyle(textNode, element) {
+  const elementStyles = {
+    color: element.style?.color,
+    "background-color": element.style?.backgroundColor
+  };
 
-      if (applyingCode) {
-        this.#stripInlineFormattingFromSelection(selection, textNodes);
-      }
-    }
+  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
+  const highlightStyle = getCSSFromStyleObject(elementStyles);
 
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+  if (highlightStyle.length) {
+    return textNode.setStyle(textNode.getStyle() + highlightStyle)
   }
+}
 
-  // Strip all inline formatting (bold, italic, etc.) from the selected text
-  // nodes so that applying code produces a single merged <code> element instead
-  // of one per differently-formatted span.
-  #stripInlineFormattingFromSelection(selection, textNodes) {
-    const isBackward = selection.isBackward();
-    const startPoint = isBackward ? selection.focus : selection.anchor;
-    const endPoint = isBackward ? selection.anchor : selection.focus;
-
-    for (let i = 0; i < textNodes.length; i++) {
-      const node = textNodes[i];
-      if (node.getFormat() === 0) continue
+function $markConversion() {
+  return {
+    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+    priority: 1
+  }
+}
 
-      const isFirst = i === 0;
-      const isLast = i === textNodes.length - 1;
-      const startOffset = isFirst && startPoint.type === "text" ? startPoint.offset : 0;
-      const endOffset = isLast && endPoint.type === "text" ? endPoint.offset : node.getTextContentSize();
+// Register a custom <pre> converter directly in the editor's HTML conversion
+// cache. We can't use the extension-level html.import because Object.assign
+// merges all extensions' converters by tag, and a later extension (e.g.
+// TrixContentExtension) would overwrite ours.
+function $registerPreConversion(editor) {
+  if (!editor._htmlConversions) return
 
-      if (startOffset === 0 && endOffset === node.getTextContentSize()) {
-        node.setFormat(0);
-      } else {
-        const splits = node.splitText(startOffset, endOffset);
-        const target = startOffset === 0 ? splits[0] : splits[1];
-        target.setFormat(0);
+  let preEntries = editor._htmlConversions.get("pre");
+  if (!preEntries) {
+    preEntries = [];
+    editor._htmlConversions.set("pre", preEntries);
+  }
+  preEntries.push($preConversionWithHighlightsFactory(editor));
+}
 
-        if (isFirst && startPoint.type === "text") {
-          startPoint.set(target.getKey(), 0, "text");
-        }
-        if (isLast && endPoint.type === "text") {
-          endPoint.set(target.getKey(), endOffset - startOffset, "text");
-        }
-      }
+// Returns a <pre> converter factory scoped to a specific editor instance.
+// The factory extracts highlight ranges from <mark> elements before the code
+// retokenizer can destroy them. The ranges are stored in pendingCodeHighlights
+// and applied after retokenization via a mutation listener.
+function $preConversionWithHighlightsFactory(editor) {
+  return function $preConversionWithHighlights(domNode) {
+    const highlights = extractHighlightRanges(domNode);
+    if (highlights.length === 0) return null
+
+    return {
+      conversion: (domNode) => {
+        const language = domNode.getAttribute("data-language");
+        const codeNode = $createCodeNode(language);
+        $getPendingHighlights(editor).set(codeNode.getKey(), highlights);
+        return { node: codeNode }
+      },
+      priority: 2
     }
   }
+}
 
-  dispatchSetCodeLanguage(language) {
-    this.editor.update(() => {
-      if (!this.selection.isInsideCodeBlock) return
+// Walk the DOM tree inside a <pre> element and build a list of
+// { start, end, style } ranges for every <mark> element found.
+function extractHighlightRanges(preElement) {
+  const ranges = [];
+  const codeElement = preElement.querySelector("code") || preElement;
 
-      const codeNode = this.selection.nearestNodeOfType(CodeNode);
-      if (!codeNode) return
+  let offset = 0;
 
-      codeNode.setLanguage(language);
-    });
-  }
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      offset += node.textContent.length;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      // <br> maps to a LineBreakNode (1 character) in Lexical
+      if (node.tagName === "BR") {
+        offset += 1;
+        return
+      }
 
-  dispatchInsertHorizontalDivider() {
-    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    this.editor.focus();
-  }
+      const isMark = node.tagName === "MARK";
+      const start = offset;
 
-  dispatchSetFormatHeadingLarge() {
-    this.contents.applyHeadingFormat("h2");
-  }
+      for (const child of node.childNodes) {
+        walk(child);
+      }
 
-  dispatchSetFormatHeadingMedium() {
-    this.contents.applyHeadingFormat("h3");
+      if (isMark) {
+        const style = extractHighlightStyleFromElement(node);
+        if (style) {
+          ranges.push({ start, end: offset, style });
+        }
+      }
+    }
   }
 
-  dispatchSetFormatHeadingSmall() {
-    this.contents.applyHeadingFormat("h4");
+  for (const child of codeElement.childNodes) {
+    walk(child);
   }
 
-  dispatchSetFormatParagraph() {
-    this.contents.applyParagraphFormat();
-  }
+  return ranges
+}
 
-  dispatchClearFormatting() {
-    this.contents.clearFormatting();
+function $getPendingHighlights(editor) {
+  let map = pendingCodeHighlights.get(editor);
+  if (!map) {
+    map = new Map();
+    pendingCodeHighlights.set(editor, map);
   }
+  return map
+}
 
-  dispatchUploadImage() {
-    this.#dispatchUploadAttachment("image/*,video/*");
-  }
+function extractHighlightStyleFromElement(element) {
+  const styles = {};
+  if (element.style?.color) styles.color = element.style.color;
+  if (element.style?.backgroundColor) styles["background-color"] = element.style.backgroundColor;
+  const css = getCSSFromStyleObject(styles);
+  return css.length > 0 ? css : null
+}
 
-  dispatchUploadFile() {
-    this.#dispatchUploadAttachment();
-  }
+// Called from the CodeNode mutation listener after the retokenizer has
+// replaced TextNodes with fresh CodeHighlightNodes.
+function $applyPendingCodeHighlights(editor, mutations) {
+  const pending = $getPendingHighlights(editor);
+  const keysToProcess = [];
 
-  #dispatchUploadAttachment(accept = null) {
-    const attributes = {
-      type: "file",
-      multiple: true,
-      style: "display: none;",
-      onchange: ({ target: { files } }) => {
-        this.contents.uploadFiles(files, { selectLast: true });
-      }
-    };
+  for (const [ key, type ] of mutations) {
+    if (type !== "destroyed" && pending.has(key)) {
+      keysToProcess.push(key);
+    }
+  }
 
-    if (accept) attributes.accept = accept;
+  if (keysToProcess.length === 0) return
 
-    const input = createElement("input", attributes);
+  // Use a deferred update so the retokenizer has finished its
+  // skipTransforms update before we touch the nodes.
+  editor.update(() => {
+    for (const key of keysToProcess) {
+      const highlights = pending.get(key);
+      pending.delete(key);
+      if (!highlights) continue
 
-    // Append and remove to make testable
-    this.editorElement.appendChild(input);
-    input.click();
-    setTimeout(() => input.remove(), 1000);
-  }
+      const codeNode = $getNodeByKey(key);
+      if (!codeNode || !$isCodeNode(codeNode)) continue
 
-  dispatchInsertTable() {
-    this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
-  }
+      $applyHighlightRangesToCodeNode(codeNode, highlights);
+    }
+  }, { skipTransforms: true, discrete: true });
+}
 
-  dispatchUndo() {
-    this.editor.dispatchCommand(UNDO_COMMAND, undefined);
-  }
+// Apply saved highlight ranges to the CodeHighlightNode children
+// of a CodeNode, splitting nodes at range boundaries as needed.
+// We can't use TextNode.splitText() because it creates TextNode
+// instances (not CodeHighlightNodes) for the split parts. Instead,
+// we manually create CodeHighlightNode replacements.
+function $applyHighlightRangesToCodeNode(codeNode, highlights) {
+  if (highlights.length === 0) return
 
-  dispatchRedo() {
-    this.editor.dispatchCommand(REDO_COMMAND, undefined);
-  }
+  for (const { start: hlStart, end: hlEnd, style } of highlights) {
+    // Rebuild the child-to-offset mapping for each highlight range because
+    // earlier ranges may have split nodes, invalidating previous mappings.
+    const childRanges = $buildChildRanges(codeNode);
 
-  dispose() {
-    this.#listeners.dispose();
-  }
+    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
 
-  #registerCommands() {
-    for (const command of COMMANDS) {
-      const methodName = `dispatch${capitalize(command)}`;
-      this.#registerCommandHandler(command, 0, this[methodName].bind(this));
-    }
+      // Check if this child overlaps with the highlight range
+      const overlapStart = Math.max(hlStart, nodeStart);
+      const overlapEnd = Math.min(hlEnd, nodeEnd);
 
-    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
-  }
+      if (overlapStart >= overlapEnd) continue
 
-  #registerCommandHandler(command, priority, handler) {
-    this.#listeners.track(this.editor.registerCommand(command, handler, priority));
-  }
+      // Calculate offsets relative to this node
+      const relStart = overlapStart - nodeStart;
+      const relEnd = overlapEnd - nodeStart;
+      const nodeLength = nodeEnd - nodeStart;
 
-  #registerKeyboardCommands() {
-    this.#registerCommandHandler(KEY_ARROW_RIGHT_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleArrowRightKey.bind(this));
-    this.#registerCommandHandler(KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleTabKey.bind(this));
-  }
+      if (relStart === 0 && relEnd === nodeLength) {
+        // Entire node is highlighted - apply style directly
+        node.setStyle(style);
+        $setCodeHighlightFormat(node, true);
+      } else {
+        // Need to split: replace the node with 2 or 3 CodeHighlightNodes
+        const text = node.getTextContent();
+        const highlightType = node.getHighlightType();
+        const replacements = [];
 
-  #handleArrowRightKey(event) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
-    if (this.selection.isInsideCodeBlock || !selection.hasFormat("code")) return false
+        if (relStart > 0) {
+          replacements.push($createCodeHighlightNode(text.slice(0, relStart), highlightType));
+        }
 
-    const anchorNode = selection.anchor.getNode();
-    if (!$isTextNode(anchorNode) || selection.anchor.offset !== anchorNode.getTextContentSize()) return false
-    if (anchorNode.getNextSibling() !== null) return false
+        const styledNode = $createCodeHighlightNode(text.slice(relStart, relEnd), highlightType);
+        styledNode.setStyle(style);
+        $setCodeHighlightFormat(styledNode, true);
+        replacements.push(styledNode);
 
-    event.preventDefault();
-    selection.toggleFormat("code");
-    return true
-  }
+        if (relEnd < nodeLength) {
+          replacements.push($createCodeHighlightNode(text.slice(relEnd), highlightType));
+        }
 
-  #registerDragAndDropHandlers() {
-    if (this.editorElement.supportsAttachments) {
-      this.dragCounter = 0;
-      const root = this.editor.getRootElement();
-      this.#listeners.track(
-        registerEventListener(root, "dragover", this.#handleDragOver.bind(this)),
-        registerEventListener(root, "drop", this.#handleDrop.bind(this)),
-        registerEventListener(root, "dragenter", this.#handleDragEnter.bind(this)),
-        registerEventListener(root, "dragleave", this.#handleDragLeave.bind(this))
-      );
+        for (const replacement of replacements) {
+          node.insertBefore(replacement);
+        }
+        node.remove();
+      }
     }
   }
+}
 
-  #handleDragEnter(event) {
-    if (this.#isInternalDrag(event)) return
+function $buildChildRanges(codeNode) {
+  const childRanges = [];
+  let charOffset = 0;
 
-    this.dragCounter++;
-    if (this.dragCounter === 1) {
-      this.#saveSelectionBeforeDrag();
-      this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
+  for (const child of codeNode.getChildren()) {
+    if ($isCodeHighlightNode(child) || $isTextNode(child)) {
+      const text = child.getTextContent();
+      childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
+      charOffset += text.length;
+    } else {
+      // LineBreakNode, TabNode - count as 1 character each (\n, \t)
+      charOffset += 1;
     }
   }
 
-  #handleDragLeave(event) {
-    if (this.#isInternalDrag(event)) return
+  return childRanges
+}
 
-    this.dragCounter--;
-    if (this.dragCounter === 0) {
-      this.#selectionBeforeDrag = null;
-      this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+// 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 });
     }
   }
 
-  #handleDragOver(event) {
-    if (this.#isInternalDrag(event)) return
+  return ranges
+}
 
-    event.preventDefault();
-  }
+function buildCanonicalizers(config) {
+  return [
+    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
+  ]
+}
 
-  #handleDrop(event) {
-    if (this.#isInternalDrag(event)) return
+function $toggleSelectionStyles(editor, styles) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return
 
-    event.preventDefault();
+  const patch = {};
+  for (const property in styles) {
+    const oldValue = $getSelectionStyleValueForProperty(selection, property);
+    patch[property] = toggleOrReplace(oldValue, styles[property]);
+  }
 
-    this.dragCounter = 0;
-    this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+  if ($selectionIsInCodeBlock(selection)) {
+    $patchCodeHighlightStyles(editor, selection, patch);
+  } else {
+    $patchStyleText(selection, patch);
+  }
+}
 
-    const dataTransfer = event.dataTransfer;
-    if (!dataTransfer) return
+function $selectionIsInCodeBlock(selection) {
+  const nodes = selection.getNodes();
+  return nodes.some((node) => {
+    // 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)
+  })
+}
 
-    const files = Array.from(dataTransfer.files);
-    if (!files.length) return
+function $patchCodeHighlightStyles(editor, selection, patch) {
+  // 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) || $isTextNode(node)) && $isCodeNode(node.getParent()))
+    .map((node) => ({
+      key: node.getKey(),
+      startOffset: $getNodeSelectionOffsets(node, selection)[0],
+      endOffset: $getNodeSelectionOffsets(node, selection)[1],
+      textSize: node.getTextContentSize()
+    }));
 
-    this.#restoreSelectionBeforeDrag();
-    this.contents.uploadFiles(files, { selectLast: true });
+  // Use skipTransforms to prevent the code highlighting system from
+  // re-tokenizing and wiping out the style changes we apply.
+  // Use discrete to force a synchronous commit, ensuring the changes
+  // 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();
 
-    this.editor.focus();
-  }
+    for (const { key, startOffset, endOffset, textSize } of nodeKeys) {
+      const node = $getNodeByKey(key);
+      if (!node) continue
 
-  #saveSelectionBeforeDrag() {
-    this.editor.getEditorState().read(() => {
-      this.#selectionBeforeDrag = $getSelection()?.clone();
-    });
-  }
+      const parent = node.getParent();
+      if (!$isCodeNode(parent)) continue
+      if (startOffset === endOffset) continue
 
-  #restoreSelectionBeforeDrag() {
-    if (!this.#selectionBeforeDrag) return
+      affectedCodeNodes.add(parent);
 
-    this.editor.update(() => {
-      $setSelection(this.#selectionBeforeDrag);
-    });
+      if (startOffset === 0 && endOffset === textSize) {
+        $applyStylePatchToNode(node, patch);
+      } else {
+        const splitNodes = node.splitText(startOffset, endOffset);
+        const targetNode = splitNodes[startOffset === 0 ? 0 : 1];
+        $applyStylePatchToNode(targetNode, patch);
+      }
+    }
 
-    this.#selectionBeforeDrag = null;
-  }
+    // 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 });
+}
 
-  #isInternalDrag(event) {
-    return event.dataTransfer?.types.includes("application/x-lexxy-node-key")
-  }
+function $getNodeSelectionOffsets(node, selection) {
+  const nodeKey = node.getKey();
+  const anchorKey = selection.anchor.key;
+  const focusKey = selection.focus.key;
+  const textSize = node.getTextContentSize();
 
-  #handleTabKey(event) {
-    if (this.selection.isInsideList) {
-      return this.#handleTabForList(event)
-    } else if (this.selection.isInsideCodeBlock) {
-      return this.#handleTabForCode()
-    }
-    return false
-  }
+  const isAnchor = nodeKey === anchorKey;
+  const isFocus = nodeKey === focusKey;
 
-  #handleTabForList(event) {
-    if (event.shiftKey && !this.selection.isIndentedList) return false
+  // Determine if selection is forward or backward
+  const isForward = selection.isBackward() === false;
 
-    event.preventDefault();
-    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
-    return this.editor.dispatchCommand(command)
-  }
+  let start = 0;
+  let end = textSize;
 
-  #handleTabForCode() {
-    const selection = $getSelection();
-    return $isRangeSelection(selection) && selection.isCollapsed()
+  if (isForward) {
+    if (isAnchor) start = selection.anchor.offset;
+    if (isFocus) end = selection.focus.offset;
+  } else {
+    if (isFocus) start = selection.focus.offset;
+    if (isAnchor) end = selection.anchor.offset;
   }
 
+  return [ start, end ]
 }
 
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-function debounce(fn, wait) {
-  let timeout;
+function $applyStylePatchToNode(node, patch) {
+  const prevStyles = getStyleObjectFromCSS(node.getStyle());
+  const newStyles = { ...prevStyles };
 
-  return (...args) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => fn(...args), wait);
+  for (const [ key, value ] of Object.entries(patch)) {
+    if (value === null) {
+      delete newStyles[key];
+    } else {
+      newStyles[key] = value;
+    }
   }
-}
 
-function debounceAsync(fn, wait) {
-  let timeout;
+  const newCSSText = getCSSFromStyleObject(newStyles);
+  node.setStyle(newCSSText);
 
-  return (...args) => {
-    clearTimeout(timeout);
+  // Sync the highlight format using TextNode's setFormat to bypass
+  // CodeHighlightNode's no-op override
+  const shouldHaveHighlight = hasHighlightStyles(newCSSText);
+  const hasHighlight = node.hasFormat("highlight");
 
-    return new Promise((resolve, reject) => {
-      timeout = setTimeout(async () => {
-        try {
-          const result = await fn(...args);
-          resolve(result);
-        } catch (err) {
-          reject(err);
-        }
-      }, wait);
-    })
+  if (shouldHaveHighlight !== hasHighlight) {
+    $setCodeHighlightFormat(node, shouldHaveHighlight);
   }
 }
 
-function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
+function $setCodeHighlightFormat(node, shouldHaveHighlight) {
+  const writable = node.getWritable();
+  const IS_HIGHLIGHT = 1 << 7;
 
-function nextFrame() {
-  return new Promise(requestAnimationFrame)
+  if (shouldHaveHighlight) {
+    writable.__format |= IS_HIGHLIGHT;
+  } else {
+    writable.__format &= ~IS_HIGHLIGHT;
+  }
 }
 
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
+function toggleOrReplace(oldValue, newValue) {
+  return oldValue === newValue ? null : newValue
 }
 
-function isUrl(string) {
-  try {
-    new URL(string);
-    return true
-  } catch {
-    return false
+function $syncHighlightWithStyle(textNode) {
+  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
+    textNode.toggleFormat("highlight");
   }
 }
 
-function normalizeFilteredText(string) {
-  return string
-    .toLowerCase()
-    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
-}
-
-function filterMatchPosition(text, potentialMatch) {
-  const normalizedText = normalizeFilteredText(text);
-  const normalizedMatch = normalizeFilteredText(potentialMatch);
+function $syncHighlightWithCodeHighlightNode(node) {
+  const parent = node.getParent();
+  if (!$isCodeNode(parent)) return
 
-  if (!normalizedMatch) return 0
+  const shouldHaveHighlight = hasHighlightStyles(node.getStyle());
+  const hasHighlight = node.hasFormat("highlight");
 
-  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
-  return match ? match.index : -1
+  if (shouldHaveHighlight !== hasHighlight) {
+    $setCodeHighlightFormat(node, shouldHaveHighlight);
+  }
 }
 
-function upcaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+function $canonicalizePastedStyles(textNode, canonicalizers = []) {
+  if ($hasPastedStyles(textNode)) {
+    $setPastedStyles(textNode, false);
 
-function escapeForRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    const canonicalizedCSS = applyCanonicalizers(textNode.getStyle(), canonicalizers);
+    textNode.setStyle(canonicalizedCSS);
+
+    const selection = $getSelection();
+    if (textNode.isSelected(selection)) {
+      selection.setStyle(textNode.getStyle());
+      selection.setFormat(textNode.getFormat());
+    }
+  }
 }
 
-// Parses a value that may arrive as a boolean or as a string (e.g. from DOM
-// getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
-function parseBoolean(value) {
-  if (typeof value === "string") return value === "true"
-  return Boolean(value)
+function $setPastedStyles(textNode, value = true) {
+  $setState(textNode, hasPastedStylesState, value);
 }
 
-// Payload: Record<nodeKey, { patch?, replace? }>
-//   - patch: plain object, shallow-merged into the existing node's properties
-//   - replace: a LexicalNode instance that replaces the node
-const REWRITE_HISTORY_COMMAND = createCommand("REWRITE_HISTORY_COMMAND");
+function $hasPastedStyles(textNode) {
+  return $getState(textNode, hasPastedStylesState)
+}
 
-class RewritableHistoryExtension extends LexxyExtension {
-  #historyState = null
+const COMMANDS = [
+  "bold",
+  "italic",
+  "strikethrough",
+  "underline",
+  "link",
+  "unlink",
+  "toggleHighlight",
+  "removeHighlight",
+  "setFormatHeadingLarge",
+  "setFormatHeadingMedium",
+  "setFormatHeadingSmall",
+  "setFormatParagraph",
+  "clearFormatting",
+  "insertUnorderedList",
+  "insertOrderedList",
+  "insertQuoteBlock",
+  "insertCodeBlock",
+  "setCodeLanguage",
+  "insertHorizontalDivider",
+  "uploadImage",
+  "uploadFile",
 
-  get lexicalExtension() {
-    return defineExtension({
-      name: "lexxy/rewritable-history",
-      dependencies: [ HistoryExtension ],
-      register: (editor, _config, state) => {
-        const historyOutput = state.getDependency(HistoryExtension).output;
-        this.#historyState = historyOutput.historyState.value;
+  "insertTable",
 
-        return editor.registerCommand(
-          REWRITE_HISTORY_COMMAND,
-          (rewrites) => this.#rewriteHistory(rewrites),
-          COMMAND_PRIORITY_EDITOR
-        )
-      }
-    })
-  }
+  "undo",
+  "redo"
+];
 
-  get historyState() {
-    return this.#historyState
-  }
+class CommandDispatcher {
+  #selectionBeforeDrag = null
+  #listeners = new ListenerBin()
 
-  get #allHistoryEntries() {
-    const entries = Array.from(this.#historyState.undoStack);
-    if (this.#historyState.current) entries.push(this.#historyState.current);
-    return entries.concat(this.#historyState.redoStack)
+  static configureFor(editorElement) {
+    return new CommandDispatcher(editorElement)
   }
 
-  #rewriteHistory(rewrites) {
-    this.#applyRewritesImmediatelyToCurrentState(rewrites);
-    this.#applyRewritesToHistory(rewrites);
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editor = editorElement.editor;
+    this.selection = editorElement.selection;
+    this.contents = editorElement.contents;
+    this.clipboard = editorElement.clipboard;
 
-    return true
+    this.#registerCommands();
+    this.#registerKeyboardCommands();
+    this.#registerDragAndDropHandlers();
   }
 
-  #applyRewritesImmediatelyToCurrentState(rewrites) {
-    $getEditor().update(() => {
-      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
-        const node = $getNodeByKey(nodeKey);
-        if (!node) continue
-
-        if (patch) Object.assign(node.getWritable(), patch);
-        if (replace) node.replace(replace);
-      }
-    }, { discrete: true, tag: this.#getBackgroundUpdateTags() });
+  dispatchPaste(event) {
+    return this.clipboard.paste(event)
   }
 
-  #applyRewritesToHistory(rewrites) {
-    const nodeKeys = Object.keys(rewrites);
-
-    for (const entry of this.#allHistoryEntries) {
-      if (!this.#entryHasSomeKeys(entry, nodeKeys)) continue
-
-      const editorState = entry.editorState = safeCloneEditorState(entry.editorState);
-
-      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
-        const node = editorState._nodeMap.get(nodeKey);
-        if (!node) continue
-
-        if (patch) {
-          this.#patchNodeInEditorState(editorState, node, patch);
-        } else if (replace) {
-          this.#replaceNodeInEditorState(editorState, node, replace);
-        }
-      }
-    }
+  dispatchBold() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
   }
 
-  #entryHasSomeKeys(entry, nodeKeys) {
-    return nodeKeys.some(key => entry.editorState._nodeMap.has(key))
+  dispatchItalic() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
   }
 
-  #getBackgroundUpdateTags() {
-    const tags = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
-    if (!isEditorFocused(this.editorElement.editor)) { tags.push(SKIP_DOM_SELECTION_TAG); }
-    return tags
+  dispatchStrikethrough() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
   }
 
-  #patchNodeInEditorState(editorState, node, patch) {
-    editorState._nodeMap.set(node.__key, $cloneNodeWithPatch(node, patch));
+  dispatchUnderline() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
   }
 
-  #replaceNodeInEditorState(editorState, node, replaceWith) {
-    editorState._nodeMap.set(node.__key, $cloneNodeAdoptingKeys(replaceWith, node));
+  dispatchToggleHighlight(styles) {
+    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
   }
-}
 
-function $cloneNodeWithPatch(node, patch) {
-  const clone = $cloneWithProperties(node);
-  Object.assign(clone, patch);
-  return clone
-}
+  dispatchRemoveHighlight() {
+    this.editor.dispatchCommand(REMOVE_HIGHLIGHT_COMMAND);
+  }
 
-function $cloneNodeAdoptingKeys(node, previousNode) {
-  const clone = $cloneWithProperties(node);
-  clone.__key = previousNode.__key;
-  clone.__parent = previousNode.__parent;
-  clone.__prev = previousNode.__prev;
-  clone.__next = previousNode.__next;
-  return clone
-}
+  dispatchLink(url) {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
 
-// EditorState#clone() keeps the same map reference.
-// A new Map is needed to prevent editing Lexical's internal map
-// Warning: this bypasses DEV's safety map freezing
-function safeCloneEditorState(editorState) {
-  const clone = editorState.clone();
-  clone._nodeMap = new Map(editorState._nodeMap);
-  return clone
-}
+      const anchorNode = selection.anchor.getNode();
 
-class ActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "action_text_attachment"
+      if (selection.isCollapsed() && !$getNearestNodeOfType(anchorNode, LinkNode)) {
+        const autoLinkNode = $createAutoLinkNode(url);
+        const textNode = $createTextNode(url);
+        autoLinkNode.append(textNode);
+        selection.insertNodes([ autoLinkNode ]);
+      } else {
+        $toggleLink(url);
+      }
+    });
   }
 
-  static clone(node) {
-    return new ActionTextAttachmentNode({ ...node }, node.__key)
+  dispatchUnlink() {
+    this.editor.update(() => {
+      // Let adapters signal whether unlink should target a frozen link key.
+      if (this.editorElement.adapter.unlinkFrozenNode?.()) {
+        return
+      }
+
+      $toggleLink(null);
+    });
   }
 
-  static importJSON(serializedNode) {
-    return new ActionTextAttachmentNode({ ...serializedNode })
+  dispatchInsertUnorderedList() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    const anchorNode = selection.anchor.getNode();
+
+    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
+      this.contents.applyParagraphFormat();
+    } else {
+      this.contents.applyUnorderedListFormat();
+    }
   }
 
-  static importDOM() {
-    return {
-      [this.TAG_NAME]: () => {
-        return {
-          conversion: (attachment) => ({
-            node: new ActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              src: attachment.getAttribute("url"),
-              previewable: attachment.getAttribute("previewable"),
-              altText: attachment.getAttribute("alt"),
-              caption: attachment.getAttribute("caption"),
-              contentType: attachment.getAttribute("content-type"),
-              fileName: attachment.getAttribute("filename"),
-              fileSize: attachment.getAttribute("filesize"),
-              width: attachment.getAttribute("width"),
-              height: attachment.getAttribute("height")
-            })
-          }), priority: 1
-        }
-      },
-      "img": () => {
-        return {
-          conversion: (img) => {
-            const fileName = extractFileName(img.getAttribute("src") ?? "");
-            return {
-              node: new ActionTextAttachmentNode({
-                src: img.getAttribute("src"),
-                fileName: fileName,
-                caption: img.getAttribute("alt") || "",
-                contentType: "image/*",
-                width: img.getAttribute("width"),
-                height: img.getAttribute("height")
-              })
-            }
-          }, priority: 1
-        }
-      },
-      "video": () => {
-        return {
-          conversion: (video) => {
-            const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
-            const fileName = videoSource?.split("/")?.pop();
-            const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
+  dispatchInsertOrderedList() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
-            return {
-              node: new ActionTextAttachmentNode({
-                src: videoSource,
-                fileName: fileName,
-                contentType: contentType
-              })
-            }
-          }, priority: 1
-        }
-      }
+    const anchorNode = selection.anchor.getNode();
+
+    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
+      this.contents.applyParagraphFormat();
+    } else {
+      this.contents.applyOrderedListFormat();
     }
   }
 
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
+  dispatchInsertQuoteBlock() {
+    this.contents.toggleBlockquote();
   }
 
-  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 || "";
-    this.fileName = fileName || "";
-    this.fileSize = fileSize;
-    this.width = width;
-    this.height = height;
-    this.uploadError = uploadError;
-
-    this.editor = $getEditor();
+  dispatchInsertCodeBlock() {
+    if (this.selection.hasSelectedWordsInSingleLine) {
+      this.#toggleInlineCode();
+    } else {
+      this.contents.toggleCodeBlock();
+    }
   }
 
-  createDOM() {
-    if (this.uploadError) return this.createDOMForError()
-    if (this.pendingPreview) return this.#createDOMForPendingPreview()
+  #toggleInlineCode() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
-    const figure = this.createAttachmentFigure();
+    if (!selection.isCollapsed()) {
+      const textNodes = selection.getNodes().filter($isTextNode);
+      const applyingCode = !textNodes.every((node) => node.hasFormat("code"));
 
-    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());
+      if (applyingCode) {
+        this.#stripInlineFormattingFromSelection(selection, textNodes);
+      }
     }
 
-    return figure
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
   }
 
-  updateDOM(prevNode, dom) {
-    if (this.uploadError !== prevNode.uploadError) return true
+  // Strip all inline formatting (bold, italic, etc.) from the selected text
+  // nodes so that applying code produces a single merged <code> element instead
+  // of one per differently-formatted span.
+  #stripInlineFormattingFromSelection(selection, textNodes) {
+    const isBackward = selection.isBackward();
+    const startPoint = isBackward ? selection.focus : selection.anchor;
+    const endPoint = isBackward ? selection.anchor : selection.focus;
 
-    const caption = dom.querySelector("figcaption textarea");
-    if (caption && this.caption) {
-      caption.value = this.caption;
+    for (let i = 0; i < textNodes.length; i++) {
+      const node = textNodes[i];
+      if (node.getFormat() === 0) continue
+
+      const isFirst = i === 0;
+      const isLast = i === textNodes.length - 1;
+      const startOffset = isFirst && startPoint.type === "text" ? startPoint.offset : 0;
+      const endOffset = isLast && endPoint.type === "text" ? endPoint.offset : node.getTextContentSize();
+
+      if (startOffset === 0 && endOffset === node.getTextContentSize()) {
+        node.setFormat(0);
+      } else {
+        const splits = node.splitText(startOffset, endOffset);
+        const target = startOffset === 0 ? splits[0] : splits[1];
+        target.setFormat(0);
+
+        if (isFirst && startPoint.type === "text") {
+          startPoint.set(target.getKey(), 0, "text");
+        }
+        if (isLast && endPoint.type === "text") {
+          endPoint.set(target.getKey(), endOffset - startOffset, "text");
+        }
+      }
     }
+  }
 
-    return false
+  dispatchSetCodeLanguage(language) {
+    this.editor.update(() => {
+      if (!this.selection.isInsideCodeBlock) return
+
+      const codeNode = this.selection.nearestNodeOfType(CodeNode);
+      if (!codeNode) return
+
+      codeNode.setLanguage(language);
+    });
   }
 
-  getTextContent() {
-    return `[${this.caption || this.fileName}]\n\n`
+  dispatchInsertHorizontalDivider() {
+    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
+    this.editor.focus();
   }
 
-  isInline() {
-    return this.isAttached() && !this.getParent().is($getNearestRootOrShadowRoot(this))
+  dispatchSetFormatHeadingLarge() {
+    this.contents.applyHeadingFormat("h2");
   }
 
-  exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      previewable: this.previewable || null,
-      url: this.src,
-      alt: this.altText,
-      caption: this.caption,
-      "content-type": this.contentType,
-      filename: this.fileName,
-      filesize: this.fileSize,
-      width: this.width,
-      height: this.height,
-      presentation: "gallery"
-    });
+  dispatchSetFormatHeadingMedium() {
+    this.contents.applyHeadingFormat("h3");
+  }
 
-    return { element: attachment }
+  dispatchSetFormatHeadingSmall() {
+    this.contents.applyHeadingFormat("h4");
   }
 
-  exportJSON() {
-    return {
-      type: "action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      src: this.src,
-      previewable: this.previewable,
-      altText: this.altText,
-      caption: this.caption,
-      contentType: this.contentType,
-      fileName: this.fileName,
-      fileSize: this.fileSize,
-      width: this.width,
-      height: this.height
-    }
+  dispatchSetFormatParagraph() {
+    this.contents.applyParagraphFormat();
   }
 
-  decorate() {
-    return null
+  dispatchClearFormatting() {
+    this.contents.clearFormatting();
   }
 
-  createDOMForError() {
-    const figure = this.createAttachmentFigure();
-    figure.classList.add("attachment--error");
-    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.fileName || "file"}` }));
-    return figure
+  dispatchUploadImage() {
+    this.#dispatchUploadAttachment("image/*,video/*");
   }
 
-  createAttachmentFigure(previewable = this.isPreviewableAttachment) {
-    const figure = createAttachmentFigure(this.contentType, previewable, this.fileName);
-    figure.draggable = true;
-    figure.dataset.lexicalNodeKey = this.__key;
+  dispatchUploadFile() {
+    this.#dispatchUploadAttachment();
+  }
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+  #dispatchUploadAttachment(accept = null) {
+    const attributes = {
+      type: "file",
+      multiple: true,
+      style: "display: none;",
+      onchange: ({ target: { files } }) => {
+        this.contents.uploadFiles(files, { selectLast: true });
+      }
+    };
 
-    return figure
+    if (accept) attributes.accept = accept;
+
+    const input = createElement("input", attributes);
+
+    // Append and remove to make testable
+    this.editorElement.appendChild(input);
+    input.click();
+    setTimeout(() => input.remove(), 1000);
   }
 
-  get isPreviewableAttachment() {
-    return this.isPreviewableImage || this.previewable
+  dispatchInsertTable() {
+    this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
   }
 
-  get isPreviewableImage() {
-    return isPreviewableImage(this.contentType)
+  dispatchUndo() {
+    this.editor.dispatchCommand(UNDO_COMMAND, undefined);
   }
 
-  get isVideo() {
-    return this.contentType.startsWith("video/")
+  dispatchRedo() {
+    this.editor.dispatchCommand(REDO_COMMAND, undefined);
   }
 
-  #createDOMForPendingPreview() {
-    const figure = this.createAttachmentFigure(false);
-    figure.appendChild(this.#createDOMForFile());
-    figure.appendChild(this.#createDOMForNotImage());
-    this.#pollForPreview(figure);
-    return figure
+  dispose() {
+    this.#listeners.dispose();
   }
 
-  patchAndRewriteHistory(patch) {
-    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
-      [this.getKey()]: { patch }
-    });
+  #registerCommands() {
+    for (const command of COMMANDS) {
+      const methodName = `dispatch${capitalize(command)}`;
+      this.#registerCommandHandler(command, 0, this[methodName].bind(this));
+    }
+
+    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
   }
 
-  replaceAndRewriteHistory(node) {
-    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
-      [this.getKey()]: { replace: node }
-    });
+  #registerCommandHandler(command, priority, handler) {
+    this.#listeners.track(this.editor.registerCommand(command, handler, priority));
   }
 
-  #createDOMForImage(options = {}) {
-    const initialSrc = this.previewSrc || this.src;
-    const img = createElement("img", { src: initialSrc, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
+  #registerKeyboardCommands() {
+    this.#registerCommandHandler(KEY_ARROW_RIGHT_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleArrowRightKey.bind(this));
+    this.#registerCommandHandler(KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleTabKey.bind(this));
+  }
 
-    if (this.previewable && !this.isPreviewableImage) {
-      img.onerror = () => this.#swapPreviewToFileDOM(img);
-    }
+  #handleArrowRightKey(event) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+    if (this.selection.isInsideCodeBlock || !selection.hasFormat("code")) return false
 
-    if (this.previewSrc) {
-      this.#preloadAndSwapSrc(img);
+    const anchorNode = selection.anchor.getNode();
+    if (!$isTextNode(anchorNode) || selection.anchor.offset !== anchorNode.getTextContentSize()) return false
+    if (anchorNode.getNextSibling() !== null) return false
+
+    event.preventDefault();
+    selection.toggleFormat("code");
+    return true
+  }
+
+  #registerDragAndDropHandlers() {
+    if (this.editorElement.supportsAttachments) {
+      this.dragCounter = 0;
+      const root = this.editor.getRootElement();
+      this.#listeners.track(
+        registerEventListener(root, "dragover", this.#handleDragOver.bind(this)),
+        registerEventListener(root, "drop", this.#handleDrop.bind(this)),
+        registerEventListener(root, "dragenter", this.#handleDragEnter.bind(this)),
+        registerEventListener(root, "dragleave", this.#handleDragLeave.bind(this))
+      );
     }
-
-    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;
-  }
+  #handleDragEnter(event) {
+    if (this.#isInternalDrag(event)) return
 
-  #handleImageLoaded(img, previewSrc) {
-    img.src = this.src;
-    this.patchAndRewriteHistory({ previewSrc: null });
-    this.#revokePreviewSrc(previewSrc);
+    this.dragCounter++;
+    if (this.dragCounter === 1) {
+      this.#saveSelectionBeforeDrag();
+      this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
+    }
   }
 
-  #handleImageLoadError(previewSrc) {
-    this.patchAndRewriteHistory({
-      previewSrc: null,
-      uploadError: true
-    });
-    this.#revokePreviewSrc(previewSrc);
-  }
+  #handleDragLeave(event) {
+    if (this.#isInternalDrag(event)) return
 
-  #revokePreviewSrc(previewSrc) {
-    if (previewSrc?.startsWith("blob:")) URL.revokeObjectURL(previewSrc);
+    this.dragCounter--;
+    if (this.dragCounter === 0) {
+      this.#selectionBeforeDrag = null;
+      this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+    }
   }
 
-  #swapPreviewToFileDOM(img) {
-    const figure = img.closest("figure.attachment");
-    if (!figure) return
+  #handleDragOver(event) {
+    if (this.#isInternalDrag(event)) return
 
-    this.#swapFigureContent(figure, "attachment--preview", "attachment--file", () => {
-      figure.appendChild(this.#createDOMForFile());
-      figure.appendChild(this.#createDOMForNotImage());
-    });
+    event.preventDefault();
   }
 
-  #pollForPreview(figure) {
-    let attempt = 0;
-    const maxAttempts = 10;
+  #handleDrop(event) {
+    if (this.#isInternalDrag(event)) return
 
-    const tryLoad = () => {
-      if (!this.editor.read(() => this.isAttached())) return
+    event.preventDefault();
 
-      const img = new Image();
-      const cacheBustedSrc = `${this.src}${this.src.includes("?") ? "&" : "?"}_=${Date.now()}`;
+    this.dragCounter = 0;
+    this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
 
-      img.onload = () => {
-        if (!this.editor.read(() => this.isAttached())) return
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) 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 files = Array.from(dataTransfer.files);
+    if (!files.length) return
 
-    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);
-      }
-    };
+    this.#restoreSelectionBeforeDrag();
+    this.contents.uploadFiles(files, { selectLast: true });
 
-    // Give the server time to start processing before the first attempt
-    setTimeout(tryLoad, 3000);
+    this.editor.focus();
   }
 
-  #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());
+  #saveSelectionBeforeDrag() {
+    this.editor.getEditorState().read(() => {
+      this.#selectionBeforeDrag = $getSelection()?.clone();
     });
-
-    this.patchAndRewriteHistory({ pendingPreview: false });
   }
 
-  #swapFigureContent(figure, fromClass, toClass, renderContent) {
-    figure.className = figure.className.replace(fromClass, toClass);
+  #restoreSelectionBeforeDrag() {
+    if (!this.#selectionBeforeDrag) return
 
-    for (const child of [ ...figure.querySelectorAll(".attachment__container, .attachment__icon, figcaption") ]) {
-      child.remove();
-    }
+    this.editor.update(() => {
+      $setSelection(this.#selectionBeforeDrag);
+    });
 
-    renderContent();
+    this.#selectionBeforeDrag = null;
   }
 
-  get #imageDimensions() {
-    if (this.width && this.height) {
-      return { width: this.width, height: this.height }
-    } else {
-      return {}
-    }
+  #isInternalDrag(event) {
+    return event.dataTransfer?.types.includes("application/x-lexxy-node-key")
   }
 
-  #createDOMForFile() {
-    const extension = this.fileName ? this.fileName.split(".").pop().toLowerCase() : "unknown";
-    return createElement("span", { className: "attachment__icon", textContent: `${extension}` })
+  #handleTabKey(event) {
+    if (this.selection.isInsideList) {
+      return this.#handleTabForList(event)
+    } else if (this.selection.isInsideCodeBlock) {
+      return this.#handleTabForCode()
+    }
+    return false
   }
 
-  #createDOMForNotImage() {
-    const figcaption = createElement("figcaption", { className: "attachment__caption" });
-
-    const nameTag = createElement("strong", { className: "attachment__name", textContent: this.caption || this.fileName });
-
-    figcaption.appendChild(nameTag);
-
-    if (this.fileSize) {
-      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
-      figcaption.appendChild(sizeSpan);
-    }
+  #handleTabForList(event) {
+    if (event.shiftKey && !this.selection.isIndentedList) return false
 
-    return figcaption
+    event.preventDefault();
+    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
+    return this.editor.dispatchCommand(command)
   }
 
-  #createEditableCaption() {
-    const caption = createElement("figcaption", { className: "attachment__caption" });
-    const input = createElement("textarea", {
-      value: this.caption,
-      placeholder: this.fileName,
-      rows: "1"
-    });
-
-    input.addEventListener("focusin", () => input.placeholder = "Add caption...");
-    input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
-    input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
-    input.addEventListener("copy", (event) => event.stopPropagation());
-    input.addEventListener("cut", (event) => event.stopPropagation());
-    input.addEventListener("paste", (event) => event.stopPropagation());
+  #handleTabForCode() {
+    const selection = $getSelection();
+    return $isRangeSelection(selection) && selection.isCollapsed()
+  }
 
-    caption.appendChild(input);
+}
 
-    return caption
-  }
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
 
-  #handleCaptionInputBlurred(event) {
-    this.#updateCaptionValueFromInput(event.target);
-  }
+function debounce(fn, wait) {
+  let timeout;
 
-  #updateCaptionValueFromInput(input) {
-    input.placeholder = this.fileName;
-    this.editor.update(() => {
-      this.getWritable().caption = input.value;
-    });
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), wait);
   }
+}
 
-  #handleCaptionInputKeydown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.target.blur();
+function debounceAsync(fn, wait) {
+  let timeout;
 
-      this.editor.update(() => {
-        // Place the cursor after the current image
-        this.selectNext(0, 0);
-      }, {
-        tag: HISTORY_MERGE_TAG
-      });
-    }
+  return (...args) => {
+    clearTimeout(timeout);
 
-    // Stop all keydown events from bubbling to the Lexical root element.
-    // The caption textarea is outside Lexical's content model and should
-    // handle its own keyboard events natively (Ctrl+A, Ctrl+C, Ctrl+X, etc.).
-    event.stopPropagation();
+    return new Promise((resolve, reject) => {
+      timeout = setTimeout(async () => {
+        try {
+          const result = await fn(...args);
+          resolve(result);
+        } catch (err) {
+          reject(err);
+        }
+      }, wait);
+    })
   }
 }
 
-function $createActionTextAttachmentNode(...args) {
-  return new ActionTextAttachmentNode(...args)
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-function $isActionTextAttachmentNode(node) {
-  return node instanceof ActionTextAttachmentNode
+function nextFrame() {
+  return new Promise(requestAnimationFrame)
 }
 
 class Selection {
@@ -4782,7 +4806,7 @@ class Contents {
     this.editor.update(() => {
       if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
 
-      const nodes = $generateNodesFromDOM(this.editor, doc);
+      const nodes = $generateFilteredNodesFromDOM(this.editorElement, doc);
       if (!this.#insertUploadNodes(nodes)) {
         this.insertAtCursor(...nodes);
       }
@@ -5331,16 +5355,19 @@ class Contents {
 
   #createCustomAttachmentNodeWithHtml(html, options = {}) {
     const attachmentConfig = typeof options === "object" ? options : {};
-
+    const contentType = attachmentConfig.contentType || "text/html";
+    if (!this.editorElement.permitsAttachmentContentType(contentType)) {
+      return this.#createHtmlNodeWith(html)
+    }
     return new CustomActionTextAttachmentNode({
       sgid: attachmentConfig.sgid || null,
-      contentType: "text/html",
-      innerHtml: html
+      contentType,
+      innerHtml: html,
     })
   }
 
   #createHtmlNodeWith(html) {
-    const htmlNodes = $generateNodesFromDOM(this.editor, parseHtml(html));
+    const htmlNodes = $generateFilteredNodesFromDOM(this.editorElement, parseHtml(html));
     return htmlNodes[0] || $createParagraphNode()
   }
 
@@ -6920,6 +6947,25 @@ class LexicalEditorElement extends HTMLElement {
     return this.dataset.blobUrlTemplate
   }
 
+  get permittedAttachmentTypes() {
+    const raw = this.config.get("permittedAttachmentTypes");
+    if (raw == null) {
+      return null
+    } else {
+      const tokens = Array.isArray(raw) ? raw : String(raw).split(/\s+/);
+      return Object.freeze(tokens.filter(t => t && t !== "false"))
+    }
+  }
+
+  permitsAttachmentContentType(contentType) {
+    if (!this.supportsAttachments) {
+      return false
+    } else {
+      const list = this.permittedAttachmentTypes;
+      return list === null || list.includes(contentType)
+    }
+  }
+
   get isEmpty() {
     return [ "<p><br></p>", "<p></p>", "" ].includes(this.value.trim())
   }
@@ -7042,7 +7088,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #parseHtmlIntoLexicalNodes(html) {
     if (!html) html = "<p></p>";
-    const nodes = $generateNodesFromDOM(this.editor, parseHtml(`${html}`));
+    const nodes = $generateFilteredNodesFromDOM(this, parseHtml(`${html}`));
 
     return nodes
       .filter(this.#isNotWhitespaceOnlyNode)
@@ -7074,6 +7120,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#handleEnter();
     this.#registerFocusEvents();
     this.#registerHistoryEvents();
+    this.#registerFileAcceptFilter();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#configureSanitizer();
@@ -7081,6 +7128,16 @@ class LexicalEditorElement extends HTMLElement {
     this.#resetBeforeTurboCaches();
   }
 
+  #registerFileAcceptFilter() {
+    this.#listeners.track(
+      registerEventListener(this, "lexxy:file-accept", (event) => {
+        if (!this.permitsAttachmentContentType(event.detail.file.type)) {
+          event.preventDefault();
+        }
+      })
+    );
+  }
+
   #createEditor() {
     this.editorContentElement ||= this.#createEditorContentElement();
     this.appendChild(this.editorContentElement);
@@ -8024,6 +8081,8 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #addTriggerListener() {
+    if (!this.#promptContentTypePermitted) return
+
     this.#popoverListeners.track(this.#editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         if (this.#selection.isInsideCodeBlock) return
@@ -8057,6 +8116,19 @@ class LexicalPromptElement extends HTMLElement {
     }));
   }
 
+  get #promptContentTypePermitted() {
+    const el = this.#editorElement;
+    if (!el.supportsAttachments) {
+      return false
+    } else {
+      const templates = Array.from(this.querySelectorAll("template[type='editor']"));
+      const types = templates.length
+        ? templates.map(t => t.getAttribute("content-type") || this.#defaultPromptContentType)
+        : [ this.#defaultPromptContentType ];
+      return types.some(t => el.permitsAttachmentContentType(t))
+    }
+  }
+
   #addCursorPositionListener() {
     this.#popoverListeners.track(this.#editor.registerUpdateListener(({ editorState }) => {
       if (this.closed) return
@@ -8363,7 +8435,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #buildEditableTextNodes(template) {
-    return $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`))
+    return $generateFilteredNodesFromDOM(this.#editorElement, parseHtml(`${template.innerHTML}`))
   }
 
   #insertTemplatesAsAttachments(templates, stringToReplace, fallbackSgid = null) {
@@ -8375,8 +8447,10 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #buildAttachmentNodes(templates, fallbackSgid = null) {
-    return templates.map(
-      template => this.#buildAttachmentNode(
+    return templates
+      .filter(template => this.#editorElement.permitsAttachmentContentType(
+        template.getAttribute("content-type") || this.#defaultPromptContentType))
+      .map(template => this.#buildAttachmentNode(
         template.innerHTML,
         template.getAttribute("content-type") || this.#defaultPromptContentType,
         template.getAttribute("sgid") || fallbackSgid