@37signals/lexxy 0.9.32 → 0.9.33

package/dist/lexxy.esm.js

@@ -1,13 +1,13 @@
 export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
 import createDOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, defineExtension, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $addUpdateTag, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, KEY_SPACE_COMMAND, INPUT_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, $isTextNode, DecoratorNode, $createTextNode, defineExtension, $createNodeSelection, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $isDecoratorNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isNodeSelection, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, ElementNode, $splitNode, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $addUpdateTag, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, KEY_DOWN_COMMAND, flipDirection, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND } from 'lexical';
 import * as lexical from 'lexical';
 export { lexical as Lexical };
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, $createListItemNode, registerList } from '@lexical/list';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertNodeToNearestRoot, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, mergeRegister, $insertNodeToNearestRoot, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, QuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -74,10 +74,6 @@ class Configuration {
   }
 }
 
-function range(from, to) {
-  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
-}
-
 const global = new Configuration({
   attachmentTagName: "action-text-attachment",
   attachmentContentTypeNamespace: "actiontext",
@@ -98,8 +94,28 @@ const presets = new Configuration({
     headings: [ "h2", "h3", "h4" ],
     highlight: {
       buttons: {
-        color: range(1, 9).map(n => `var(--highlight-${n})`),
-        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+        color: [
+          { value: "var(--highlight-1)", label: "Yellow" },
+          { value: "var(--highlight-2)", label: "Orange" },
+          { value: "var(--highlight-3)", label: "Red" },
+          { value: "var(--highlight-4)", label: "Magenta" },
+          { value: "var(--highlight-5)", label: "Purple" },
+          { value: "var(--highlight-6)", label: "Blue" },
+          { value: "var(--highlight-7)", label: "Green" },
+          { value: "var(--highlight-8)", label: "Sand" },
+          { value: "var(--highlight-9)", label: "Gray" },
+        ],
+        "background-color": [
+          { value: "var(--highlight-bg-1)", label: "Yellow" },
+          { value: "var(--highlight-bg-2)", label: "Orange" },
+          { value: "var(--highlight-bg-3)", label: "Red" },
+          { value: "var(--highlight-bg-4)", label: "Magenta" },
+          { value: "var(--highlight-bg-5)", label: "Purple" },
+          { value: "var(--highlight-bg-6)", label: "Blue" },
+          { value: "var(--highlight-bg-7)", label: "Green" },
+          { value: "var(--highlight-bg-8)", label: "Sand" },
+          { value: "var(--highlight-bg-9)", label: "Gray" },
+        ],
       },
       permit: {
         color: [],
@@ -568,11 +584,16 @@ function checkVisibility(element, options) {
   }
 }
 
-function handleRollingTabIndex(elements, event) {
+// Keyboard and programmatic clicks carry a synthetic pointer.
+function isKeyboardActivation(event) {
+  return event instanceof PointerEvent && event.pointerId === -1
+}
+
+function handleRollingTabIndex(elements, event, { orientation = "horizontal", wrap = false } = {}) {
   const previousActiveElement = document.activeElement;
 
   if (elements.includes(previousActiveElement)) {
-    const finder = new NextElementFinder(elements, event.key);
+    const finder = new NextElementFinder(elements, event.key, { orientation, wrap });
 
     if (finder.selectNext(previousActiveElement)) {
       event.preventDefault();
@@ -581,9 +602,11 @@ function handleRollingTabIndex(elements, event) {
 }
 
 class NextElementFinder {
-  constructor(elements, key) {
+  constructor(elements, key, { orientation, wrap }) {
     this.elements = elements;
     this.key = key;
+    this.orientation = orientation;
+    this.wrap = wrap;
   }
 
   selectNext(fromElement) {
@@ -600,23 +623,36 @@ class NextElementFinder {
   }
 
   #findNextElement(fromElement) {
-    switch (this.key) {
-      case "ArrowRight":
-      case "ArrowDown":
+    switch (this.#directionFor(this.key)) {
+      case "next":
         return this.#findNextSibling(fromElement)
 
-      case "ArrowLeft":
-      case "ArrowUp":
+      case "previous":
         return this.#findPreviousSibling(fromElement)
 
-      case "Home":
+      case "first":
         return this.#findFirst()
 
-      case "End":
+      case "last":
         return this.#findLast()
     }
   }
 
+  #directionFor(key) {
+    if (key === "Home") return "first"
+    if (key === "End") return "last"
+    if (this.#nextKeys.includes(key)) return "next"
+    if (this.#previousKeys.includes(key)) return "previous"
+  }
+
+  get #nextKeys() {
+    return this.orientation === "both" ? [ "ArrowRight", "ArrowDown" ] : [ "ArrowRight" ]
+  }
+
+  get #previousKeys() {
+    return this.orientation === "both" ? [ "ArrowLeft", "ArrowUp" ] : [ "ArrowLeft" ]
+  }
+
   #findFirst(elements = this.elements) {
     return elements.find(isActiveAndVisible)
   }
@@ -627,12 +663,20 @@ class NextElementFinder {
 
   #findNextSibling(element) {
     const afterElements = this.elements.slice(this.#indexOf(element) + 1);
-    return this.#findFirst(afterElements)
+    return this.#findFirst(afterElements) ?? this.#wrapToFirst()
   }
 
   #findPreviousSibling(element) {
     const beforeElements = this.elements.slice(0, this.#indexOf(element));
-    return this.#findLast(beforeElements)
+    return this.#findLast(beforeElements) ?? this.#wrapToLast()
+  }
+
+  #wrapToFirst() {
+    return this.wrap ? this.#findFirst() : undefined
+  }
+
+  #wrapToLast() {
+    return this.wrap ? this.#findLast() : undefined
   }
 
   #indexOf(element) {
@@ -653,29 +697,29 @@ class NextElementFinder {
 
 var ToolbarIcons = {
   "bold":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05273 1.88232C10.6866 1.88237 12.0033 2.20353 12.9529 2.89673L13.1272 3.0293C13.974 3.70864 14.4008 4.63245 14.4009 5.76562C14.4008 6.49354 14.2316 7.15281 13.8845 7.73145C13.6683 8.09188 13.3997 8.40162 13.0818 8.66016C13.5902 8.92606 14.0196 9.28599 14.3635 9.74121C14.8586 10.3834 15.0945 11.1743 15.0945 12.0879C15.0944 13.3698 14.5922 14.3931 13.5879 15.1106L13.5857 15.1128C12.5967 15.805 11.196 16.125 9.43799 16.125H3.10547V1.88232L9.05273 1.88232ZM6.36108 13.4084H9.28418C10.224 13.4084 10.8634 13.2491 11.2581 12.9851C11.6259 12.7389 11.8198 12.3768 11.8198 11.8367C11.8197 11.2968 11.6259 10.9351 11.2581 10.689C10.8634 10.425 10.2241 10.2649 9.28418 10.2649H6.36108V13.4084ZM6.36108 7.56812H8.78247C9.5163 7.56809 10.0547 7.45371 10.429 7.25757L10.5791 7.16895C10.9438 6.92178 11.1255 6.57934 11.1255 6.09302C11.1254 5.59017 10.9414 5.25227 10.5835 5.02002L10.5784 5.01636L10.5732 5.01343C10.1994 4.75387 9.61878 4.59818 8.78247 4.59814H6.36108V7.56812Z"/>
   </svg>`,
 
   "italic":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.1379 3.91187L14.1086 4.06421H11.4668L9.49805 13.9431H12.0981L11.7473 15.7852L11.7188 15.9375H4.16675L4.51758 14.0955L4.54614 13.9431H7.18799L9.17505 4.06421H6.55664L6.90747 2.22217L6.93677 2.06982H14.4888L14.1379 3.91187Z"/>
   </svg>`,
 
   "strikethrough":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.3723 11.8015C14.3771 11.8858 14.3811 11.9756 14.3811 12.0681C14.3811 12.811 14.1777 13.4959 13.7725 14.1174L13.7717 14.1189C13.3624 14.7329 12.7463 15.2162 11.9377 15.5742L11.9348 15.5757C11.1214 15.9223 10.1306 16.092 8.96997 16.092C7.9356 16.092 6.93308 15.9348 5.96338 15.6204L5.96045 15.6189C5.00593 15.292 4.24112 14.8699 3.67676 14.3459L3.57568 14.2522L3.63501 14.1277L4.45605 12.397L4.64282 12.5654C5.13492 13.0083 5.76733 13.3759 6.54492 13.6648C7.33475 13.9406 8.14322 14.0786 8.96997 14.0786C10.0731 14.0786 10.8638 13.8932 11.3708 13.5513C11.8757 13.1982 12.1172 12.7464 12.1172 12.1838C12.1172 12.0662 12.1049 11.9556 12.0828 11.8513L12.0344 11.625H14.3621L14.3723 11.8015Z"/>
     <path d="M9.2981 1.91602C10.111 1.91604 10.9109 2.02122 11.6975 2.23096C12.4855 2.44111 13.1683 2.74431 13.7417 3.14429L13.8655 3.23071L13.8083 3.36987L13.1726 4.91235L13.0869 5.1189L12.8987 4.99878C12.3487 4.64881 11.761 4.38633 11.1365 4.21143L11.1328 4.20996C10.585 4.04564 10.0484 3.95419 9.52295 3.93384L9.2981 3.92944C8.22329 3.92944 7.44693 4.12611 6.94043 4.49121C6.44619 4.85665 6.20874 5.31616 6.20874 5.88135L6.21533 6.03296C6.24495 6.37662 6.37751 6.65526 6.61011 6.87964L6.72144 6.97632C6.98746 7.19529 7.30625 7.37584 7.68018 7.51538L8.05151 7.63184C8.45325 7.75061 8.94669 7.87679 9.53247 8.01123L9.53467 8.01196C10.1213 8.15305 10.6426 8.29569 11.0991 8.4375H15C15.5178 8.4375 15.9375 8.85723 15.9375 9.375C15.9375 9.89277 15.5178 10.3125 15 10.3125H3C2.48223 10.3125 2.0625 9.89277 2.0625 9.375C2.0625 8.85723 2.48223 8.4375 3 8.4375H4.93726C4.83783 8.34526 4.74036 8.24896 4.64795 8.146L4.64502 8.14233C4.1721 7.58596 3.94482 6.85113 3.94482 5.95825C3.94483 5.20441 4.14059 4.51965 4.53369 3.90967L4.53516 3.90747C4.94397 3.29427 5.55262 2.81114 6.34863 2.45288C7.15081 2.0919 8.13683 1.91602 9.2981 1.91602Z"/>
   </svg>`,
 
   "underline":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14 14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H14Z"/>
     <path d="M12.625 1.59375C13.25 1.59375 13.625 1.97656 13.625 2.64062V9.02344C13.625 11.4844 11.8516 13.1875 8.99219 13.1875C6.14062 13.1875 4.35938 11.4844 4.35938 9.02344V2.64062C4.35938 1.97656 4.74219 1.59375 5.36719 1.59375C6 1.59375 6.375 1.97656 6.375 2.64062V8.84375C6.375 10.3828 7.32031 11.4297 8.99219 11.4297C10.6641 11.4297 11.6172 10.3828 11.6172 8.84375V2.64062C11.6172 1.97656 11.9922 1.59375 12.625 1.59375Z"/>
   </svg>`,
 
   "heading":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M11.5 2C12.0523 2 12.5 2.44772 12.5 3V3.5C12.5 4.05228 12.0523 4.5 11.5 4.5H8V15C8 15.5523 7.55228 16 7 16H6.5C5.94772 16 5.5 15.5523 5.5 15V4.5H2C1.44772 4.5 1 4.05228 1 3.5V3C1 2.44772 1.44772 2 2 2H11.5ZM16 7C16.5523 7 17 7.44772 17 8V8.5C17 9.05228 16.5523 9.5 16 9.5H15V15C15 15.5523 14.5523 16 14 16H13.5C12.9477 16 12.5 15.5523 12.5 15V9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V8C10.5 7.44772 10.9477 7 11.5 7H16Z"/>
   </svg>`,
 
@@ -685,17 +729,17 @@ var ToolbarIcons = {
   </svg>`,
 
   "h2":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.6445 4.19824C15.5244 4.19824 16.8984 5.34668 16.8984 6.91211C16.8984 7.8759 16.4335 8.7237 15.292 9.84473L13.3438 11.8135V11.9092H16.1875C16.8232 11.9092 17.2197 12.251 17.2197 12.8115C17.2196 13.3651 16.83 13.7002 16.1875 13.7002H11.5117C10.8487 13.7002 10.4112 13.3241 10.4111 12.75C10.4111 12.3399 10.6368 11.9843 11.3203 11.3145L13.6855 8.88086C14.4169 8.13583 14.7245 7.64349 14.7246 7.12402C14.7246 6.4541 14.2393 6.00293 13.5215 6.00293C12.9404 6.00293 12.5166 6.29688 12.2158 6.90527C11.9151 7.37002 11.6552 7.54785 11.2588 7.54785C10.7188 7.54785 10.3429 7.17861 10.3428 6.65918C10.3428 5.3877 11.7783 4.19824 13.6445 4.19824Z"/>
   </svg>`,
 
   "h3":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M13.5967 4.19824C15.5928 4.19824 16.9873 5.23047 16.9873 6.7002C16.9872 7.705 16.2421 8.60059 15.2988 8.7168V8.86719C16.4199 8.94923 17.2607 9.89942 17.2607 11.0889C17.2606 12.7362 15.7362 13.9053 13.583 13.9053C11.6827 13.9053 10.1925 12.873 10.1924 11.7041C10.1924 11.1846 10.5547 10.8154 11.0537 10.8154C11.3818 10.8154 11.6553 10.9727 11.9629 11.3555C12.3799 11.9159 12.92 12.2031 13.583 12.2031C14.4853 12.2031 15.0731 11.7313 15.0732 11C15.0732 10.2754 14.4785 9.7832 13.5898 9.7832H13.0361C12.5645 9.7832 12.2159 9.4208 12.2158 8.92188C12.2158 8.44336 12.5576 8.07422 13.0361 8.07422H13.5693C14.3075 8.07422 14.8544 7.60928 14.8545 6.97363C14.8545 6.33789 14.3213 5.90039 13.5557 5.90039C12.9678 5.90039 12.5029 6.16016 12.0859 6.71387C11.8399 7.03508 11.5527 7.17871 11.1973 7.17871C10.671 7.17871 10.295 6.82314 10.2949 6.31738C10.2949 5.18945 11.751 4.19824 13.5967 4.19824ZM8.0332 4.30078C8.75781 4.30078 9.16797 4.74512 9.16797 5.51758V12.5518C9.1679 13.3241 8.75776 13.7686 8.0332 13.7686C7.30865 13.7686 6.90534 13.3309 6.90527 12.5518V9.87207H3.48047V12.5518C3.4804 13.3241 3.07026 13.7686 2.3457 13.7686C1.62115 13.7686 1.21784 13.3309 1.21777 12.5518V5.51758C1.21777 4.73828 1.62109 4.30078 2.3457 4.30078C3.07031 4.30078 3.48047 4.74512 3.48047 5.51758V8.07422H6.90527V5.51758C6.90527 4.73828 7.30859 4.30078 8.0332 4.30078Z"/>
   </svg>`,
 
   "h4":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14.6357 4.22559C15.7432 4.22559 16.4336 4.80664 16.4336 5.73633V10.3164H16.7275C17.2881 10.3164 17.6436 10.6787 17.6436 11.2256C17.6435 11.7655 17.3017 12.1006 16.7275 12.1006H16.4336V12.6611C16.4335 13.3515 16.0234 13.7891 15.374 13.7891C14.7247 13.7891 14.3282 13.3583 14.3281 12.6611V12.1006H11.04C10.2335 12.1006 9.76863 11.6766 9.76855 10.918C9.76855 10.5762 9.85064 10.3026 10.1104 9.74219C10.7666 8.42289 11.5733 7.0146 12.5713 5.54492C13.2549 4.56738 13.7812 4.22559 14.6357 4.22559ZM7.88965 4.30078C8.61426 4.30078 9.02441 4.74512 9.02441 5.51758V12.5518C9.02435 13.3241 8.6142 13.7686 7.88965 13.7686C7.1651 13.7686 6.76178 13.3309 6.76172 12.5518V9.87207H3.33691V12.5518C3.33685 13.3241 2.9267 13.7686 2.20215 13.7686C1.4776 13.7686 1.07428 13.3309 1.07422 12.5518V5.51758C1.07422 4.73828 1.47754 4.30078 2.20215 4.30078C2.92676 4.30078 3.33691 4.74512 3.33691 5.51758V8.07422H6.76172V5.51758C6.76172 4.73828 7.16504 4.30078 7.88965 4.30078ZM14.2188 6.07812C13.6035 7.02841 12.2158 9.48929 11.7988 10.2686V10.3164H14.3281V6.07812H14.2188Z"/>
   </svg>`,
 
@@ -710,44 +754,44 @@ var ToolbarIcons = {
   </svg>`,
 
   "paragraph":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13C2 12.4477 2.44772 12 3 12H9ZM15 8C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H3C2.44772 10 2 9.55228 2 9C2 8.44772 2.44772 8 3 8H15ZM15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H15Z"/>
   </svg>`,
 
   "clearFormatting":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M10.0607 2.07533C10.8417 1.29432 12.1078 1.2943 12.8888 2.07533L16.424 5.61049C17.205 6.39154 17.205 7.65854 16.424 8.43959L9.44937 15.4142C9.07435 15.7891 8.5656 16.0001 8.03531 16.0001H5.0148C4.55074 16.0001 4.10309 15.8385 3.74722 15.547L3.60074 15.4142L1.57534 13.3888C0.79431 12.6078 0.794336 11.3417 1.57534 10.5607L10.0607 2.07533ZM2.98941 11.9747L5.0148 14.0001H8.03531L9.71792 12.3165L6.18179 8.78139L2.98941 11.9747Z"/>
   </svg>`,
 
   "highlight":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M16.4564 14.4272C17.1356 15.5592 16.3204 17.0002 15.0003 17.0004C13.68 17.0004 12.864 15.5593 13.5433 14.4272L15.0003 12.0004L16.4564 14.4272ZM5.1214 1.70746C5.51192 1.31693 6.14494 1.31693 6.53546 1.70746L9.7171 4.8891L13.2532 8.42426C14.2295 9.40056 14.2295 10.9841 13.2532 11.9604L9.7171 15.4955C8.74078 16.4718 7.15822 16.4718 6.18195 15.4955L2.64679 11.9604C1.67048 10.9841 1.67048 9.40057 2.64679 8.42426L6.18195 4.8891C6.30299 4.76805 6.43323 4.66177 6.57062 4.57074L5.1214 3.12152C4.73091 2.73104 4.73099 2.09799 5.1214 1.70746ZM8.30304 6.30316C8.10776 6.10815 7.79119 6.10799 7.59601 6.30316L4.06085 9.83929L3.9964 9.91742C3.88661 10.0838 3.88645 10.3019 3.9964 10.4682L4.02277 10.5004H11.8763C12.0312 10.3043 12.02 10.0205 11.8392 9.83929L8.30304 6.30316Z"/>
   </svg>`,
 
   "link":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M12.8885 7.23091L13.9479 6.17155C14.5337 5.58576 14.5337 4.63602 13.9479 4.05023C13.3621 3.46444 12.4124 3.46444 11.8266 4.05023L8.29235 7.58446C7.9263 7.95051 7.90312 8.52994 8.2233 8.92271L8.36141 9.07463C8.68158 9.4674 8.65841 10.0468 8.29235 10.4129C7.90183 10.8034 7.26866 10.8034 6.87814 10.4129C5.70657 9.24131 5.70657 7.34182 6.87814 6.17025L10.4124 2.63602C11.7792 1.26918 13.9953 1.26918 15.3621 2.63602C16.729 4.00285 16.729 6.21893 15.3621 7.58576L14.3028 8.64512C13.9122 9.03564 13.2791 9.03564 12.8885 8.64512C12.498 8.2546 12.498 7.62143 12.8885 7.23091Z"/>
     <path d="M5.11038 10.7664L4.04843 11.8284C3.46264 12.4142 3.46264 13.3639 4.04842 13.9497C4.63421 14.5355 5.58396 14.5355 6.16975 13.9497L9.70657 10.4129C10.0726 10.0468 10.0958 9.46741 9.77563 9.07464L9.63752 8.92272C9.31734 8.52995 9.34052 7.95052 9.70657 7.58446C10.0971 7.19394 10.7303 7.19394 11.1208 7.58446C12.2924 8.75604 12.2924 10.6555 11.1208 11.8271L7.58396 15.3639C6.21712 16.7308 4.00105 16.7308 2.63421 15.3639C1.26738 13.9971 1.26738 11.781 2.63421 10.4142L3.69617 9.35223C4.08669 8.96171 4.71986 8.96171 5.11038 9.35223C5.5009 9.74275 5.5009 10.3759 5.11038 10.7664Z"/>
   </svg>`,
 
   "quote":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M4.96387 4.23438C6.8769 4.23438 8.42767 5.78522 8.42773 7.69824C8.42773 8.32925 8.25769 8.92015 7.96289 9.42969L7.96387 9.43066L5.11816 14.3584C4.77659 14.95 4.02038 15.153 3.42871 14.8115C2.83701 14.4699 2.63397 13.7128 2.97559 13.1211L4.16113 11.0674C2.63532 10.7052 1.5 9.33485 1.5 7.69824C1.50006 5.78524 3.05086 4.2344 4.96387 4.23438ZM13.0361 4.23438C14.9491 4.23449 16.4999 5.7853 16.5 7.69824C16.5 8.32921 16.3299 8.92017 16.0352 9.42969L16.0361 9.43066L13.1904 14.3584C12.8488 14.9501 12.0917 15.1531 11.5 14.8115C10.9085 14.4698 10.7063 13.7127 11.0479 13.1211L12.2324 11.0674C10.7069 10.7049 9.57227 9.33461 9.57227 7.69824C9.57233 5.78522 11.1231 4.23438 13.0361 4.23438Z"/>
   </svg>`,
 
   "code":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M6.29289 3.79295C6.68342 3.40243 7.31643 3.40243 7.70696 3.79295C8.09748 4.18348 8.09748 4.81649 7.70696 5.20702L3.91399 8.99999L7.70696 12.793C8.09748 13.1835 8.09748 13.8165 7.70696 14.207C7.31643 14.5975 6.68342 14.5975 6.29289 14.207L1.79289 9.70702C1.40237 9.31649 1.40237 8.68348 1.79289 8.29295L6.29289 3.79295Z"/>
     <path d="M11.707 3.79295C11.3164 3.40243 10.6834 3.40243 10.2929 3.79295C9.90237 4.18348 9.90237 4.81649 10.2929 5.20702L14.0859 8.99999L10.2929 12.793C9.90237 13.1835 9.90237 13.8165 10.2929 14.207C10.6834 14.5975 11.3164 14.5975 11.707 14.207L16.207 9.70702C16.5975 9.31649 16.5975 8.68348 16.207 8.29295L11.707 3.79295Z"/>
   </svg>`,
 
   "ul":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M3 12.5C3.82843 12.5 4.5 13.1716 4.5 14C4.5 14.8284 3.82843 15.5 3 15.5C2.17157 15.5 1.5 14.8284 1.5 14C1.5 13.1716 2.17157 12.5 3 12.5ZM15.5 13C16.0523 13 16.5 13.4477 16.5 14C16.5 14.5523 16.0523 15 15.5 15H7C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13H15.5ZM3 7.5C3.82843 7.5 4.5 8.17157 4.5 9C4.5 9.82843 3.82843 10.5 3 10.5C2.17157 10.5 1.5 9.82843 1.5 9C1.5 8.17157 2.17157 7.5 3 7.5ZM15.5 8C16.0523 8 16.5 8.44772 16.5 9C16.5 9.55228 16.0523 10 15.5 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H15.5ZM3 2.5C3.82843 2.5 4.5 3.17157 4.5 4C4.5 4.82843 3.82843 5.5 3 5.5C2.17157 5.5 1.5 4.82843 1.5 4C1.5 3.17157 2.17157 2.5 3 2.5ZM15.5 3C16.0523 3 16.5 3.44772 16.5 4C16.5 4.55228 16.0523 5 15.5 5H7C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3H15.5Z"/>
   </svg>`,
 
   "ol":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15.5 13C16.0523 13 16.5 13.4477 16.5 14C16.5 14.5523 16.0523 15 15.5 15H7C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13H15.5ZM15.5 8C16.0523 8 16.5 8.44772 16.5 9C16.5 9.55228 16.0523 10 15.5 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H15.5ZM15.5 3C16.0523 3 16.5 3.44772 16.5 4C16.5 4.55228 16.0523 5 15.5 5H7C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3H15.5Z"/>
     <path d="M2.98657 16.0967C2.68042 16.0967 2.41187 16.0465 2.18091 15.9463C1.95174 15.846 1.77002 15.7046 1.63574 15.522C1.50146 15.3376 1.42448 15.1227 1.40479 14.8774L1.4021 14.8452H2.34204L2.34741 14.8748C2.35815 14.9589 2.39038 15.035 2.44409 15.103C2.49959 15.1711 2.5721 15.2248 2.66162 15.2642C2.75293 15.3035 2.86035 15.3232 2.98389 15.3232C3.10563 15.3232 3.21037 15.3027 3.2981 15.2615C3.38761 15.2185 3.45654 15.1603 3.50488 15.0869C3.55322 15.0135 3.57739 14.9294 3.57739 14.8345V14.8291C3.57739 14.6715 3.51921 14.5516 3.40283 14.4692C3.28646 14.3869 3.12085 14.3457 2.90601 14.3457H2.48706V13.677H2.90063C3.02775 13.677 3.13607 13.6582 3.22559 13.6206C3.31689 13.583 3.38672 13.5302 3.43506 13.4622C3.48519 13.3941 3.51025 13.3153 3.51025 13.2258V13.2205C3.51025 13.1256 3.48877 13.0441 3.4458 12.9761C3.40462 12.9062 3.34375 12.8534 3.26318 12.8176C3.18441 12.78 3.08952 12.7612 2.97852 12.7612C2.86572 12.7612 2.76636 12.7809 2.68042 12.8203C2.59627 12.8579 2.52913 12.9125 2.479 12.9841C2.43066 13.054 2.40112 13.1363 2.39038 13.2312L2.3877 13.2581H1.49341L1.49609 13.2205C1.514 12.977 1.58561 12.7666 1.71094 12.5894C1.83805 12.4103 2.00903 12.2725 2.22388 12.1758C2.44051 12.0773 2.69206 12.0281 2.97852 12.0281C3.27393 12.0281 3.52995 12.0728 3.74658 12.1624C3.96322 12.2501 4.13062 12.3727 4.24878 12.5303C4.36694 12.6878 4.42603 12.8722 4.42603 13.0835V13.0889C4.42603 13.2518 4.38932 13.3941 4.31592 13.5159C4.2443 13.6358 4.14762 13.7343 4.02588 13.8113C3.90592 13.8883 3.77254 13.942 3.62573 13.9724V13.9912C3.91756 14.0199 4.14941 14.1121 4.32129 14.2678C4.49316 14.4236 4.5791 14.6295 4.5791 14.8855V14.8909C4.5791 15.1344 4.51375 15.3474 4.38306 15.53C4.25236 15.7109 4.06795 15.8505 3.82983 15.949C3.59172 16.0474 3.31063 16.0967 2.98657 16.0967Z"/>
     <path d="M1.54443 11V10.342L2.76099 9.20874C2.95076 9.03507 3.09757 8.89274 3.20142 8.78174C3.30705 8.66895 3.37956 8.57316 3.41895 8.49438C3.46012 8.41382 3.48071 8.33415 3.48071 8.25537V8.24463C3.48071 8.14795 3.46012 8.0638 3.41895 7.99219C3.37777 7.92057 3.31779 7.86507 3.23901 7.82568C3.16024 7.7863 3.06714 7.7666 2.95972 7.7666C2.84692 7.7666 2.74756 7.78988 2.66162 7.83643C2.57747 7.88298 2.51123 7.94743 2.46289 8.02979C2.41455 8.11035 2.39038 8.20345 2.39038 8.30908V8.33057L1.48804 8.32788V8.31177C1.48804 8.05396 1.5507 7.82837 1.67603 7.63501C1.80314 7.44165 1.97949 7.29126 2.20508 7.18384C2.43245 7.07463 2.69653 7.02002 2.99731 7.02002C3.28556 7.02002 3.53711 7.06836 3.75195 7.16504C3.96859 7.25993 4.13688 7.39331 4.25684 7.56519C4.37858 7.73706 4.43945 7.93758 4.43945 8.16675V8.18018C4.43945 8.3252 4.40902 8.46932 4.34814 8.61255C4.28727 8.75578 4.18701 8.90885 4.04736 9.07178C3.90771 9.23291 3.71883 9.41642 3.48071 9.62231L2.58374 10.4092L2.85498 9.98486V10.4092L2.58374 10.2319H4.49048V11H1.54443Z"/>
@@ -755,37 +799,37 @@ var ToolbarIcons = {
   </svg>`,
 
   "image":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M14 2C15.6569 2 17 3.34315 17 5V13C17 14.6569 15.6569 16 14 16H4C2.34315 16 1 14.6569 1 13V5C1 3.34315 2.34315 2 4 2H14ZM3.06348 13.3496C3.2053 13.7294 3.57078 14 4 14H13.5859L11 11.4141L9.70703 12.707C9.31651 13.0976 8.68349 13.0976 8.29297 12.707C7.90244 12.3165 7.90244 11.6835 8.29297 11.293L8.58594 11L7 9.41406L3.06348 13.3496ZM4 4C3.44772 4 3 4.44772 3 5V10.5859L6.29297 7.29297L6.36914 7.22461C6.76191 6.90427 7.34092 6.92686 7.70703 7.29297L10 9.58594L10.293 9.29297L10.3691 9.22461C10.7619 8.90427 11.3409 8.92686 11.707 9.29297L15 12.5859V5C15 4.44772 14.5523 4 14 4H4ZM12.5 5C13.3284 5 14 5.67157 14 6.5C14 7.32843 13.3284 8 12.5 8C11.6716 8 11 7.32843 11 6.5C11 5.67157 11.6716 5 12.5 5Z"/>
   </svg>`,
 
   "attachment":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M13 13.5V6C13 4.067 11.433 2.5 9.5 2.5C7.567 2.5 6 4.067 6 6V13.5C6 14.6046 6.89543 15.5 8 15.5H8.23047C9.20759 15.5 10 14.7076 10 13.7305V7C10 6.72386 9.77614 6.5 9.5 6.5C9.22386 6.5 9 6.72386 9 7V12.5C9 13.0523 8.55228 13.5 8 13.5C7.44772 13.5 7 13.0523 7 12.5V7C7 5.61929 8.11929 4.5 9.5 4.5C10.8807 4.5 12 5.61929 12 7V13.7305C12 15.8122 10.3122 17.5 8.23047 17.5H8C5.79086 17.5 4 15.7091 4 13.5V6C4 2.96243 6.46243 0.5 9.5 0.5C12.5376 0.5 15 2.96243 15 6V13.5C15 14.0523 14.5523 14.5 14 14.5C13.4477 14.5 13 14.0523 13 13.5Z"/>
   </svg>`,
 
   "table":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15 1C16.1046 1 17 1.89543 17 3V15C17 16.1046 16.1046 17 15 17H3C1.89543 17 1 16.1046 1 15V3C1 1.89543 1.89543 1 3 1H15ZM3 15H8V10H3V15ZM10 10V15H15V10H10ZM10 8H15V3H10V8ZM3 8H8V3H3V8Z"/>
   </svg>`,
 
   "hr":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M12.75 12C13.1642 12 13.5 12.3358 13.5 12.75V14.25C13.5 14.6642 13.1642 15 12.75 15H5.25C4.83579 15 4.5 14.6642 4.5 14.25V12.75C4.5 12.3358 4.83579 12 5.25 12H12.75ZM15.4863 8C16.0461 8 16.5 8.44771 16.5 9C16.5 9.55229 16.0461 10 15.4863 10H2.51367C1.95392 10 1.5 9.55229 1.5 9C1.5 8.44771 1.95392 8 2.51367 8H15.4863ZM12.75 3C13.1642 3 13.5 3.33579 13.5 3.75V5.25C13.5 5.66421 13.1642 6 12.75 6H5.25C4.83579 6 4.5 5.66421 4.5 5.25V3.75C4.5 3.33579 4.83579 3 5.25 3H12.75Z"/>
   </svg>`,
 
   "undo":
-  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M8.36612 5.36612C8.85427 4.87796 9.64554 4.87796 10.1337 5.36612C10.6218 5.85428 10.6218 6.64557 10.1337 7.13369L7.26748 9.9999H15.2499C18.1494 9.99996 20.4999 12.3504 20.4999 15.2499V19.2499C20.4999 19.9402 19.9402 20.4999 19.2499 20.4999C18.5596 20.4999 18 19.9402 17.9999 19.2499V15.2499C17.9999 13.7312 16.7686 12.5 15.2499 12.4999H7.26748L10.1337 15.3661C10.6218 15.8543 10.6218 16.6456 10.1337 17.1337C9.64557 17.6218 8.85428 17.6218 8.36612 17.1337L3.36612 12.1337C2.87796 11.6455 2.87796 10.8543 3.36612 10.3661L8.36612 5.36612Z"/>
   </svg>`,
 
   "redo":
-  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15.6338 5.1163C15.1456 4.62814 14.3543 4.62814 13.8662 5.1163C13.3781 5.60446 13.3781 6.39575 13.8662 6.88388L16.7324 9.75009H8.74997C5.85052 9.75014 3.49997 12.1006 3.49997 15.0001V19.0001C3.50002 19.6904 4.05969 20.25 4.74997 20.2501C5.4403 20.2501 5.99992 19.6904 5.99997 19.0001V15.0001C5.99997 13.4813 7.23123 12.2501 8.74997 12.2501H16.7324L13.8662 15.1163C13.3781 15.6045 13.3781 16.3958 13.8662 16.8839C14.3543 17.372 15.1456 17.3719 15.6338 16.8839L20.6338 11.8839C21.1219 11.3957 21.1219 10.6045 20.6338 10.1163L15.6338 5.1163Z" />
   </svg>`,
 
   "overflow":
-  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M3 6.75C4.24264 6.75 5.25 7.75736 5.25 9C5.25 10.2426 4.24264 11.25 3 11.25C1.75736 11.25 0.75 10.2426 0.75 9C0.75 7.75736 1.75736 6.75 3 6.75ZM9 6.75C10.2426 6.75 11.25 7.75736 11.25 9C11.25 10.2426 10.2426 11.25 9 11.25C7.75736 11.25 6.75 10.2426 6.75 9C6.75 7.75736 7.75736 6.75 9 6.75ZM15 6.75C16.2426 6.75 17.25 7.75736 17.25 9C17.25 10.2426 16.2426 11.25 15 11.25C13.7574 11.25 12.75 10.2426 12.75 9C12.75 7.75736 13.7574 6.75 15 6.75Z"/>
   </svg>`
 };
@@ -912,14 +956,21 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #dispatchButtonCommand(event, { dataset: { command, payload } }) {
-    const isKeyboard = event instanceof PointerEvent && event.pointerId === -1;
+  #dispatchButtonCommand(event, button) {
+    if (button.ariaDisabled === "true") return
+
+    const { command, payload } = button.dataset;
+    const shouldKeepToolbarFocus = isKeyboardActivation(event) && !this.#belongsToDropdown(button);
 
     this.editor.update(() => {
       this.editor.dispatchCommand(command, payload);
-    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined });
+    }, { tag: shouldKeepToolbarFocus ? SKIP_DOM_SELECTION_TAG : undefined });
 
-    if (!isKeyboard) this.editor.focus();
+    if (!shouldKeepToolbarFocus) this.editor.focus();
+  }
+
+  #belongsToDropdown(button) {
+    return button.closest("[data-dropdown-panel]") != null
   }
 
   #bindHotkeys() {
@@ -959,8 +1010,8 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleEditorFocus = () => {
-    const firstVisible = this.#buttons.find(isActiveAndVisible);
-    if (firstVisible) firstVisible.tabIndex = 0;
+    const firstVisibleButton = this.#toolbarButtons.find(isActiveAndVisible);
+    if (firstVisibleButton) firstVisibleButton.tabIndex = 0;
   }
 
   #handleEditorBlur = () => {
@@ -968,11 +1019,11 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleKeydown = (event) => {
-    handleRollingTabIndex(this.#buttons, event);
+    handleRollingTabIndex(this.#toolbarButtons, event);
   }
 
   #resetTabIndexValues() {
-    this.#buttons.forEach((button) => {
+    this.#toolbarButtons.forEach((button) => {
       button.tabIndex = -1;
     });
   }
@@ -1009,7 +1060,7 @@ class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("underline", isUnderline);
 
     this.#setButtonPressed("format", isInHeading);
-    this.#setButtonPressed("paragraph", !isInHeading);
+    this.#setButtonChecked("paragraph", !isInHeading);
 
     this.querySelector("lexxy-heading-dropdown")
       ?.updateActiveHeading(headingTag);
@@ -1028,25 +1079,17 @@ class LexicalToolbarElement extends HTMLElement {
 
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`);
-    if (button) {
-      const next = isPressed.toString();
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next);
-      }
-    }
+    if (button) button.ariaPressed = isPressed;
+  }
+
+  #setButtonChecked(name, isChecked) {
+    const button = this.querySelector(`[name="${name}"]`);
+    if (button) button.ariaChecked = isChecked;
   }
 
   #setButtonDisabled(name, isDisabled) {
     const button = this.querySelector(`[name="${name}"]`);
-    if (button) {
-      if (button.disabled !== isDisabled) {
-        button.disabled = isDisabled;
-      }
-      const next = isDisabled.toString();
-      if (button.getAttribute("aria-disabled") !== next) {
-        button.setAttribute("aria-disabled", next);
-      }
-    }
+    if (button) button.ariaDisabled = isDisabled;
   }
 
   #refreshOverflow() {
@@ -1147,8 +1190,10 @@ class LexicalToolbarElement extends HTMLElement {
     return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow])"))
   }
 
-  get #buttons() {
-    return Array.from(this.querySelectorAll(":scope button"))
+  get #toolbarButtons() {
+    return Array.from(this.querySelectorAll(":scope button")).filter((button) => {
+      return !button.closest("[data-dropdown-panel]")
+    })
   }
 
   get #toolbarItems() {
@@ -1187,8 +1232,8 @@ class LexicalToolbarElement extends HTMLElement {
         <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="format" title="Text formatting" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.heading}
         </button>
-        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-dropdown-list" hidden>
-          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitem">
+        <div data-dropdown-panel role="menu" aria-label="Text formatting" class="lexxy-editor__toolbar-dropdown-list" hidden>
+          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitemradio">
             ${ToolbarIcons.paragraph} <span>Normal</span>
           </button>
           <lexxy-heading-dropdown>
@@ -1205,7 +1250,7 @@ class LexicalToolbarElement extends HTMLElement {
         <button data-dropdown-trigger class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--chevron" type="button" name="highlight" title="Color highlight" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.highlight}
         </button>
-        <div data-dropdown-panel role="menu" hidden>
+        <div data-dropdown-panel role="menu" aria-label="Color highlight" hidden>
           <div class="lexxy-highlight-colors"></div>
           <button data-command="removeHighlight" type="button" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset" role="menuitem">Remove all coloring</button>
         </div>
@@ -1247,19 +1292,19 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.hr}
       </button>
 
-      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--push-right" type="button" name="undo" data-command="undo" title="Undo" disabled aria-disabled="true">
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-button--push-right" type="button" name="undo" data-command="undo" title="Undo" aria-disabled="true">
         ${ToolbarIcons.undo}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" disabled aria-disabled="true">
+      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" aria-disabled="true">
         ${ToolbarIcons.redo}
       </button>
 
       <lexxy-toolbar-dropdown class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-button--push-right lexxy-editor__toolbar-overflow">
-        <button data-dropdown-trigger class="lexxy-editor__toolbar-button" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Show more toolbar buttons">
+        <button data-dropdown-trigger class="lexxy-editor__toolbar-button" type="button" title="More options" aria-haspopup="menu" aria-expanded="false">
           ${ToolbarIcons.overflow}
         </button>
-        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons" hidden></div>
+        <div data-dropdown-panel role="menu" class="lexxy-editor__toolbar-overflow-menu" aria-label="More options" hidden></div>
       </lexxy-toolbar-dropdown>
     `
   }
@@ -1303,9 +1348,10 @@ function nextFrame() {
 
 class ToolbarDropdown extends HTMLElement {
   #listeners = new ListenerBin()
+  #shouldReturnFocusToTrigger = false
 
   connectedCallback() {
-    this.#onToolbarEditor(() => {
+    this.#onHostEditor(() => {
       this.#registerListeners();
       this.editorReady();
     });
@@ -1327,16 +1373,16 @@ class ToolbarDropdown extends HTMLElement {
     return this.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  get toolbar() {
-    return this.closest("lexxy-toolbar")
+  get host() {
+    return this.closest("lexxy-toolbar, lexxy-table-tools")
   }
 
   get editorElement() {
-    return this.toolbar?.editorElement
+    return this.host?.editorElement
   }
 
   get editor() {
-    return this.toolbar?.editor
+    return this.host?.editor
   }
 
   get isOpen() {
@@ -1353,7 +1399,7 @@ class ToolbarDropdown extends HTMLElement {
 
   open() {
     if (this.isOpen) return
-    this.trigger.setAttribute("aria-expanded", "true");
+    this.trigger.ariaExpanded = true;
     this.panel.hidden = false;
     this.onOpen();
     this.#focusFirstInteractive();
@@ -1363,7 +1409,7 @@ class ToolbarDropdown extends HTMLElement {
     if (focusEditor) this.editor?.focus();
 
     if (this.isClosed) return
-    this.trigger.setAttribute("aria-expanded", "false");
+    this.trigger.ariaExpanded = false;
     this.panel.hidden = true;
     this.onClose();
   }
@@ -1375,31 +1421,46 @@ class ToolbarDropdown extends HTMLElement {
     );
   }
 
-  #handleTriggerClick = () => {
+  #handleTriggerClick = (event) => {
     if (this.isOpen) {
       this.close({ focusEditor: false });
     } else {
-      this.toolbar?.closeDropdowns({ except: this });
+      this.#shouldReturnFocusToTrigger = this.#isOpenedFromHost(event);
+      this.host?.closeDropdowns({ except: this });
       this.open();
     }
   }
 
-  async #onToolbarEditor(callback) {
-    if (!this.toolbar) return
+  #isOpenedFromHost(event) {
+    return isKeyboardActivation(event) && this.host?.contains(document.activeElement)
+  }
 
-    await this.toolbar.getEditorElement();
-    if (this.isConnected && this.toolbar) callback();
+  async #onHostEditor(callback) {
+    if (!this.host) return
+
+    await this.host.getEditorElement();
+    if (this.isConnected && this.host) callback();
   }
 
   #handleKeyDown = (event) => {
     if (event.key === "Escape") {
       event.stopPropagation();
-      this.close();
+      this.close({ focusEditor: !this.#shouldReturnFocusToTrigger });
+      if (this.#shouldReturnFocusToTrigger) this.trigger?.focus();
+    } else if (this.#isNavigatingMenu(event)) {
+      event.stopPropagation();
+      handleRollingTabIndex(this.#buttons, event, { orientation: "both", wrap: true });
     }
   }
 
+  #isNavigatingMenu(event) {
+    return this.panel.role === "menu" && this.panel.contains(event.target)
+  }
+
   async #focusFirstInteractive() {
-    this.#interactiveElements[0]?.focus();
+    // Ask for the ring explicitly: opening the menu with the mouse otherwise leaves the
+    // first item focused without a focus ring, since focus() inherits the mouse modality.
+    this.#interactiveElements[0]?.focus({ focusVisible: true });
     await this.#resetTabIndexValues();
   }
 
@@ -1482,8 +1543,8 @@ class HeadingDropdown extends HTMLElement {
   updateActiveHeading(tag) {
     this.#headingButtons.forEach(button => {
       const next = (button.dataset.heading === tag).toString();
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next);
+      if (button.getAttribute("aria-checked") !== next) {
+        button.setAttribute("aria-checked", next);
       }
     });
   }
@@ -1528,7 +1589,7 @@ class HeadingDropdown extends HTMLElement {
     button.classList.add("lexxy-heading-button");
     button.name = name;
     button.title = label;
-    button.setAttribute("role", "menuitem");
+    button.setAttribute("role", "menuitemradio");
     button.innerHTML = `${icon} <span>${label}</span>`;
     return button
   }
@@ -1563,6 +1624,143 @@ class HeadingDropdown extends HTMLElement {
   }
 }
 
+// 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;
+
+function styleResolverRoot() {
+  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
+
+  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
+}
+
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
+
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
+  }
+}
+
+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());
+    }
+  }
+
+  const color = styles.color || null;
+  const backgroundColor = styles["background-color"] || null;
+  if (!color && !backgroundColor) return null
+
+  return { color, backgroundColor }
+}
+
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
+}
+
+function normalizeColorButtons(buttons) {
+  return buttons.map((button) => (typeof button === "string" ? { value: button, label: button } : button))
+}
+
+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;
+  }
+
+  applyCanonicalization(css) {
+    const styles = { ...getStyleObjectFromCSS(css) };
+
+    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
+    if (!styles[this._property]) {
+      delete styles[this._property];
+    }
+
+    return getCSSFromStyleObject(styles)
+  }
+
+  getCanonicalAllowedValue(value) {
+    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  }
+
+  // Private
+
+  get #allowedValuesIdentityObject() {
+    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  }
+
+  #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]
+  }
+
+  get #computedAllowedValues() {
+    return this._computedAllowedValues ||= computeStyleValues(this._property, this._allowedValues)
+  }
+}
+
+// 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();
+
+  const elements = values.map(value => {
+    const element = createElement("span", { style: `display: none; ${property}: ${value};` });
+    fragment.appendChild(element);
+    return element
+  });
+
+  styleResolverRoot().appendChild(fragment);
+
+  const computed = elements.map(element =>
+    window.getComputedStyle(element).getPropertyValue(property)
+  );
+
+  elements.forEach(element => element.remove());
+  return computed
+}
+
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
@@ -1594,27 +1792,36 @@ class HighlightDropdown extends ToolbarDropdown {
 
     const colorGroups = this.editorElement.config.get("highlight.buttons");
 
-    this.#populateButtonGroup("color", colorGroups.color);
-    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
+    this.#appendColorGroup("Text color", "color", colorGroups.color);
+    this.#appendColorGroup("Background color", "background-color", colorGroups["background-color"]);
 
     const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
     this.panel.style.setProperty("--max-colors", maxNumberOfColors);
   }
 
-  #populateButtonGroup(attribute, values) {
-    values.forEach((value, index) => {
-      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
+  #appendColorGroup(label, attribute, buttons) {
+    const group = createElement("div", {
+      role: "group",
+      class: "lexxy-highlight-colors__group",
+      "aria-label": label
+    });
+
+    normalizeColorButtons(buttons).forEach((button, index) => {
+      group.appendChild(this.#createButton(attribute, button, index));
     });
+
+    this.#buttonContainer.append(group);
   }
 
-  #createButton(attribute, value, index) {
+  #createButton(attribute, button, index) {
     return createElement("button", {
       type: "button",
-      dataset: { value, style: attribute },
-      style: `${attribute}: ${value}`,
+      dataset: { value: button.value, style: attribute },
+      style: `${attribute}: ${button.value}`,
       class: "lexxy-editor__toolbar-button lexxy-highlight-button",
       name: `${attribute}-${index}`,
-      role: "menuitem"
+      role: "menuitemcheckbox",
+      "aria-label": button.label
     })
   }
 
@@ -1638,11 +1845,7 @@ class HighlightDropdown extends ToolbarDropdown {
     const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
 
     this.#colorButtons.forEach(button => {
-      const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
-      const next = matchesSelection.toString();
-      if (button.getAttribute("aria-pressed") !== next) {
-        button.setAttribute("aria-pressed", next);
-      }
+      button.ariaChecked = button.dataset.value === textColor || button.dataset.value === backgroundColor;
     });
 
     const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
@@ -1939,13 +2142,35 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     // is cosmetic: it is a nested attachment's rendering inside this one, not the
     // attribute anything re-imports from.
     figure.insertAdjacentHTML("beforeend", EditorSanitizer.for(editor).sanitize(this.innerHtml, { safeForXml: true }));
-
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+    this.#markImagesAsDecorative(figure);
+    this.#tagLabelImage(figure);
+    this.#tagLabelMirrors(figure);
 
     return figure
   }
 
+  exposeLabel(figure) {
+    const labelImage = figure.querySelector("[data-lexxy-label-image]");
+    if (labelImage) labelImage.alt = this.label;
+
+    for (const span of figure.querySelectorAll("[data-lexxy-label-mirror]")) {
+      span.setAttribute("aria-hidden", "true");
+    }
+  }
+
+  get label() {
+    return this.getReadableTextContent()
+  }
+
+  restoreLabel(figure) {
+    const labelImage = figure.querySelector("[data-lexxy-label-image]");
+    if (labelImage) labelImage.alt = labelImage.dataset.lexxyOriginalAlt;
+
+    for (const span of figure.querySelectorAll("[data-lexxy-label-mirror]")) {
+      span.removeAttribute("aria-hidden");
+    }
+  }
+
   updateDOM() {
     return false
   }
@@ -1986,6 +2211,34 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   decorate() {
     return null
   }
+
+  #markImagesAsDecorative(figure) {
+    for (const img of figure.querySelectorAll("img:not([alt])")) {
+      img.alt = "";
+    }
+  }
+
+  // Images injected later by other modules must not become the announcement image.
+  #tagLabelImage(figure) {
+    const image = figure.querySelector("img");
+    if (image) {
+      image.setAttribute("data-lexxy-label-image", "");
+      image.dataset.lexxyOriginalAlt = image.alt;
+    }
+  }
+
+  // Duplicate labels would be spoken twice. Only authored spans should be silenced,
+  // since the fake selection injects its own label later.
+  #tagLabelMirrors(figure) {
+    const trimmedLabel = this.label.trim();
+    const matches = [ ...figure.querySelectorAll("span") ].filter((span) => span.textContent.trim() === trimmedLabel);
+    const deepest = matches.filter((span) => !matches.some((other) => other !== span && span.contains(other)));
+    for (const span of deepest) {
+      if (span.getAttribute("aria-hidden") !== "true") {
+        span.setAttribute("data-lexxy-label-mirror", "");
+      }
+    }
+  }
 }
 
 function $isCustomActionTextAttachmentNode(node) {
@@ -2089,6 +2342,35 @@ function $createNodeSelectionWith(...nodes) {
   return selection
 }
 
+function $singleSelectedNode() {
+  const selection = $getSelection();
+  if ($isNodeSelection(selection)) {
+    const nodes = selection.getNodes();
+    if (nodes.length === 1) {
+      return nodes[0]
+    } else {
+      return null
+    }
+  } else {
+    return null
+  }
+}
+
+function $selectedLabelledDecoratorNode() {
+  const node = $singleSelectedNode();
+  if (typeof node?.label === "string") {
+    return { key: node.getKey(), label: node.label }
+  } else {
+    return null
+  }
+}
+
+function registerLabelledDecoratorSelection(editor, onChange) {
+  return editor.registerUpdateListener(({ editorState }) => {
+    onChange(editorState.read($selectedLabelledDecoratorNode));
+  })
+}
+
 function $isShadowRoot(node) {
   return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
 }
@@ -2114,6 +2396,10 @@ function getListType(node) {
   return list?.getListType() ?? null
 }
 
+function announceFromEditor(editor, message) {
+  editor.getRootElement()?.closest("lexxy-editor")?.announce(message);
+}
+
 function isEditorFocused(editor) {
   const rootElement = editor.getRootElement();
   return rootElement !== null && rootElement.contains(document.activeElement)
@@ -2766,14 +3052,27 @@ class ActionTextAttachmentNode extends DecoratorNode {
   updateDOM(prevNode, dom) {
     if (this.uploadError !== prevNode.uploadError) return true
 
-    const caption = dom.querySelector("figcaption textarea");
-    if (caption && this.caption) {
-      caption.value = this.caption;
+    const image = dom.querySelector("img");
+    if (image && prevNode.altText !== this.altText) {
+      image.alt = this.altText;
+    }
+
+    if (prevNode.caption !== this.caption) {
+      dom.querySelector("figcaption")?.toggleAttribute("data-placeholder", !this.caption);
+    }
+
+    const captionText = dom.querySelector("figcaption .attachment__caption-text");
+    if (captionText && prevNode.captionLabel !== this.captionLabel) {
+      captionText.textContent = this.captionLabel;
     }
 
     return false
   }
 
+  get captionLabel() {
+    return this.caption || this.fileName || ""
+  }
+
   getTextContent() {
     return `[${this.caption || this.fileName}]\n\n`
   }
@@ -2835,9 +3134,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
     figure.draggable = true;
     figure.dataset.lexicalNodeKey = this.__key;
 
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
-
     return figure
   }
 
@@ -2853,6 +3149,18 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return this.contentType.startsWith("video/")
   }
 
+  get label() {
+    if (this.caption && this.altText && this.altText !== this.caption && this.altText !== this.fileName) {
+      return `${this.caption}. ${this.altText}`
+    } else {
+      return this.caption || this.altText || this.fileName || ""
+    }
+  }
+
+  focusCaption() {
+    return this.editor.getRootElement()?.closest("lexxy-editor")?.captionEditor.open(this.getKey()) ?? false
+  }
+
   #createDOMForPendingPreview() {
     const figure = this.createAttachmentFigure(false);
     figure.appendChild(this.#createDOMForFile());
@@ -3043,55 +3351,18 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   #createEditableCaption() {
-    const caption = createElement("figcaption", { className: "attachment__caption" });
-    const input = createElement("textarea", {
-      value: this.caption,
-      placeholder: this.fileName,
-      rows: "1"
+    const caption = createElement("figcaption", { className: "attachment__caption attachment__caption--editable" });
+    const text = createElement("span", { className: "attachment__caption-text", textContent: this.captionLabel });
+    caption.appendChild(text);
+    caption.toggleAttribute("data-placeholder", !this.caption);
+    caption.addEventListener("mousedown", event => event.preventDefault());
+    caption.addEventListener("click", event => {
+      event.stopPropagation();
+      this.focusCaption();
     });
-
-    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());
-
-    caption.appendChild(input);
-
     return caption
   }
-
-  #handleCaptionInputBlurred(event) {
-    this.#updateCaptionValueFromInput(event.target);
-  }
-
-  #updateCaptionValueFromInput(input) {
-    input.placeholder = this.fileName;
-    this.editor.update(() => {
-      this.getWritable().caption = input.value;
-    });
-  }
-
-  #handleCaptionInputKeydown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.target.blur();
-
-      this.editor.update(() => {
-        // Place the cursor after the current image
-        this.selectNext(0, 0);
-      }, {
-        tag: HISTORY_MERGE_TAG
-      });
-    }
-
-    // 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();
-  }
-}
+}
 
 function $createActionTextAttachmentNode(...args) {
   return new ActionTextAttachmentNode(...args)
@@ -3210,14 +3481,11 @@ class HorizontalDividerNode extends DecoratorNode {
     super(key);
   }
 
+  // The hr already provides separator semantics; a figure boundary would be redundant.
   createDOM() {
-    const figure = createElement("figure", { className: "horizontal-divider" });
-    const hr = createElement("hr");
-
-    figure.appendChild(hr);
-
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
+    const figure = createElement("figure", { className: "horizontal-divider", role: "presentation" });
+    figure.appendChild(createElement("hr"));
+    figure.dataset.lexicalNodeKey = this.__key;
 
     return figure
   }
@@ -3234,6 +3502,10 @@ class HorizontalDividerNode extends DecoratorNode {
     return false
   }
 
+  get label() {
+    return "Horizontal divider"
+  }
+
   exportDOM() {
     const hr = createElement("hr");
     return { element: hr }
@@ -3499,189 +3771,366 @@ var theme = {
   }
 };
 
-class UploadRequests {
-  #requestsByKey = new Map()
-
-  track(key, request) {
-    this.#requestsByKey.set(key, request);
+class ImageGalleryNode extends ElementNode {
+  $config() {
+    return this.config("image_gallery", {
+      extends: ElementNode,
+    })
   }
 
-  forget(key) {
-    this.#requestsByKey.delete(key);
+  static transform() {
+    return (gallery) => {
+      gallery.unwrapEmptyNode()
+        || gallery.replaceWithSingularChild()
+        || gallery.splitAroundInvalidChild();
+    }
   }
 
-  abort(key) {
-    const request = this.#requestsByKey.get(key);
-    if (request) {
-      this.#requestsByKey.delete(key);
-      request.abort();
+  static importDOM() {
+    return {
+      div: (element) => {
+        if (!this.#isGalleryElement(element)) return null
+
+        return {
+          conversion: () => {
+            return {
+              node: $createImageGalleryNode()
+            }
+          },
+          priority: 2
+        }
+      }
     }
   }
 
-  clear() {
-    this.#requestsByKey.clear();
+  static canCollapseWith(node) {
+    return $isImageGalleryNode(node) || this.isValidChild(node)
   }
-}
 
-// Partition a stretch of text into consecutive { start, end, range } segments,
-// where offsets are relative to the text and range is the covering source
-// range — expressed in outer coordinates as { start, end, ... } — or null for
-// the stretches no range covers. Ranges must be sorted and non-overlapping.
-function segmentTextByRanges(text, textStart, ranges) {
-  const segments = [];
-  let cursor = 0;
+  static isValidChild(node) {
+    return $isActionTextAttachmentNode(node) && node.isPreviewableImage
+  }
 
-  for (const range of ranges) {
-    const from = Math.max(range.start - textStart, cursor);
-    const to = Math.min(range.end - textStart, text.length);
+  static #isGalleryElement(element) {
+    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
+    return element.textContent.trim() === ""
+      && attachmentChildren.length > 0
+      && element.children.length === attachmentChildren.length
+  }
 
-    if (from < to) {
-      if (from > cursor) {
-        segments.push({ start: cursor, end: from, range: null });
-      }
-      segments.push({ start: from, end: to, range });
-      cursor = to;
+  static get #attachmentTags() {
+    return Object.keys(ActionTextAttachmentNode.importDOM())
+  }
+
+  createDOM() {
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return div
+  }
+
+  updateDOM(_prevNode, dom) {
+    dom.className = this.#galleryClassNames;
+    return false
+  }
+
+  canBeEmpty() {
+    // Return `true` to conform to `$isBlock(node)`
+    // We clean-up empty galleries with a transform
+    return true
+  }
+
+  collapseAtStart(_selection) {
+    return true
+  }
+
+  insertNewAfter(selection, restoreSelection) {
+    const selectionBeforeLastChild = selection.anchor.getNode().is(this) && selection.anchor.offset == this.getChildrenSize() - 1;
+    if (selectionBeforeLastChild) {
+      const paragraph = $createParagraphNode();
+      this.insertAfter(paragraph, false);
+      paragraph.insertAfter(this.getLastChild(), false);
+      paragraph.selectEnd();
+
+      // return null as selection has been managed
+      return null
     }
+
+    const newNode = $createImageGalleryNode();
+    this.insertAfter(newNode, restoreSelection);
+    return newNode
   }
 
-  if (cursor < text.length) {
-    segments.push({ start: cursor, end: text.length, range: null });
+  getImageAttachments() {
+    const children = this.getChildren();
+    return children.filter($isActionTextAttachmentNode)
   }
 
-  return segments
-}
+  exportDOM() {
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return { element: div }
+  }
 
-// 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.
+  collapseWith(node, backwards) {
+    if (!ImageGalleryNode.canCollapseWith(node)) return false
 
-let resolverRoot = null;
+    if (backwards) {
+      $insertFirst(this, node);
+    } else {
+      this.append(node);
+    }
 
-function styleResolverRoot() {
-  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
+    $unwrapAndFilterDescendants(this, ImageGalleryNode.isValidChild);
 
-  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
-}
+    return true
+  }
 
-function isSelectionHighlighted(selection) {
-  if (!$isRangeSelection(selection)) return false
+  unwrapEmptyNode() {
+    if (this.isEmpty()) {
+      const paragraph = $createParagraphNode();
+      return this.replace(paragraph)
+    }
+  }
 
-  if (selection.isCollapsed()) {
-    return hasHighlightStyles(selection.style)
-  } else {
-    return selection.hasFormat("highlight")
+  replaceWithSingularChild() {
+    if (this.#hasSingularChild) {
+      const child = this.getFirstChild();
+      return this.replace($makeSafeForRoot(child))
+    }
   }
-}
 
-function getHighlightStyles(selection) {
-  if (!$isRangeSelection(selection)) return null
+  splitAroundInvalidChild() {
+    for (const child of $firstToLastIterator(this)) {
+      if (ImageGalleryNode.isValidChild(child)) continue
 
-  let styles = getStyleObjectFromCSS(selection.style);
-  if (!styles.color && !styles["background-color"]) {
-    const anchorNode = selection.anchor.getNode();
-    if ($isTextNode(anchorNode)) {
-      styles = getStyleObjectFromCSS(anchorNode.getStyle());
+      const poppedNode = $makeSafeForRoot(child);
+      const [ topGallery, secondGallery ] = this.splitAtIndex(poppedNode.getIndexWithinParent());
+      topGallery.insertAfter(poppedNode);
+      poppedNode.selectEnd();
+
+      // remove an empty gallery rather than let it unwrap to a paragraph
+      if (secondGallery.isEmpty()) secondGallery.remove();
+
+      break
     }
   }
 
-  const color = styles.color || null;
-  const backgroundColor = styles["background-color"] || null;
-  if (!color && !backgroundColor) return null
+  splitAtIndex(index) {
+    return $splitNode(this, index)
+  }
 
-  return { color, backgroundColor }
+  get #hasSingularChild() {
+    return this.getChildrenSize() === 1
+  }
+
+  get #galleryClassNames() {
+    return `attachment-gallery attachment-gallery--${this.getChildrenSize()}`
+  }
 }
 
-function hasHighlightStyles(cssOrStyles) {
-  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
-  return !!(styles.color || styles["background-color"])
+function $createImageGalleryNode() {
+  return new ImageGalleryNode()
 }
 
-function applyCanonicalizers(styles, canonicalizers = []) {
-  return canonicalizers.reduce((css, canonicalizer) => {
-    return canonicalizer.applyCanonicalization(css)
-  }, styles)
+function $isImageGalleryNode(node) {
+  return node instanceof ImageGalleryNode
 }
 
-class StyleCanonicalizer {
-  constructor(property, allowedValues= []) {
-    this._property = property;
-    this._allowedValues = allowedValues;
-    this._canonicalValues = this.#allowedValuesIdentityObject;
+function $findOrCreateGalleryForImage(node) {
+  if (!ImageGalleryNode.canCollapseWith(node)) return null
+
+  const existingGallery = $getNearestNodeOfType(node, ImageGalleryNode);
+  return existingGallery ?? $wrapNodeInElement(node, $createImageGalleryNode)
+}
+
+class CaptionEditor {
+  #editorElement
+  #editor
+  #input = createElement("textarea", { className: "lexxy-caption-editor", hidden: true, tabIndex: -1, rows: 1, placeholder: "Add caption..." })
+  #nodeKey
+  #caption
+  #listeners = new ListenerBin()
+  #resizeObserver = new ResizeObserver(() => this.#updatePosition())
+
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+    this.#editor = editorElement.editor;
+    editorElement.append(this.#input);
+    this.#listeners.track(
+      registerEventListener(this.#input, "blur", () => this.#save()),
+      registerEventListener(this.#input, "keydown", event => this.#handleKeydown(event)),
+      registerEventListener(this.#input, "input", () => this.#updatePosition()),
+      registerEventListener(editorElement, "scroll", () => this.#updatePosition(), { capture: true, passive: true }),
+      this.#editor.registerUpdateListener(() => this.#checkAttachment())
+    );
+  }
+
+  dispose() {
+    this.#listeners.dispose();
+    this.#close();
+    this.#input.remove();
+  }
+
+  open(nodeKey) {
+    const caption = this.#editor.getElementByKey(nodeKey)?.querySelector("figcaption.attachment__caption--editable");
+    if (caption) {
+      if (this.#nodeKey !== nodeKey) {
+        this.#edit(nodeKey, caption);
+      }
+      return true
+    } else {
+      return false
+    }
+  }
+
+  #save() {
+    if (this.#nodeKey) {
+      const key = this.#nodeKey;
+      const value = this.#input.value;
+      this.#close();
+      this.#editor.update(() => {
+        const node = $getNodeByKey(key);
+        if (node && node.caption !== value) node.getWritable().caption = value;
+      }, { tag: SKIP_DOM_SELECTION_TAG, discrete: true });
+    }
+  }
+
+  #close() {
+    this.#nodeKey = null;
+    this.#resizeObserver.disconnect();
+    if (this.#caption) {
+      this.#caption.classList.remove("attachment__caption--editing");
+      this.#caption.style.removeProperty("min-height");
+      this.#caption = null;
+    }
+    this.#input.hidden = true;
+  }
+
+  #handleKeydown(event) {
+    if (!event.isComposing && [ "Enter", "Escape" ].includes(event.key)) {
+      event.preventDefault();
+      const key = this.#nodeKey;
+      this.#input.blur();
+      this.#editor.getRootElement()?.focus({ preventScroll: true });
+      this.#editor.update(() => {
+        const node = $getNodeByKey(key);
+        if (node) {
+          if (event.key === "Enter") {
+            if ($isImageGalleryNode(node.getParent()) && !node.getNextSibling()) {
+              node.getParent().selectNext(0, 0);
+            } else {
+              node.selectNext(0, 0);
+            }
+          } else {
+            $setSelection($createNodeSelectionWith(node));
+          }
+        }
+      }, { tag: HISTORY_MERGE_TAG });
+    }
+    event.stopPropagation();
   }
 
-  applyCanonicalization(css) {
-    const styles = { ...getStyleObjectFromCSS(css) };
-
-    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
-    if (!styles[this._property]) {
-      delete styles[this._property];
+  #updatePosition() {
+    if (this.#caption?.isConnected) {
+      const rect = this.#caption.getBoundingClientRect();
+      const editorRect = this.#editorElement.getBoundingClientRect();
+      this.#input.style.left = `${rect.left - editorRect.left - this.#editorElement.clientLeft + this.#editorElement.scrollLeft}px`;
+      this.#input.style.top = `${rect.top - editorRect.top - this.#editorElement.clientTop + this.#editorElement.scrollTop}px`;
+      this.#input.style.width = `${rect.width}px`;
+      this.#input.style.height = "0px";
+      const height = this.#input.scrollHeight;
+      this.#input.style.height = `${height}px`;
+      this.#caption.style.minHeight = `${height}px`;
     }
+  }
 
-    return getCSSFromStyleObject(styles)
+  #checkAttachment() {
+    if (this.#nodeKey && this.#editor.getElementByKey(this.#nodeKey)?.querySelector("figcaption") !== this.#caption) {
+      this.#close();
+    } else {
+      this.#updatePosition();
+    }
   }
 
-  getCanonicalAllowedValue(value) {
-    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  #edit(nodeKey, caption) {
+    this.#save();
+    this.#nodeKey = nodeKey;
+    this.#caption = caption;
+    this.#editor.getEditorState().read(() => {
+      const node = $getNodeByKey(nodeKey);
+      this.#input.value = node.caption;
+      if (node.isVideo) {
+        this.#input.ariaLabel = "Video caption";
+      } else {
+        this.#input.ariaLabel = "Image caption";
+      }
+    });
+
+    caption.scrollIntoView({ block: "nearest", inline: "nearest" });
+    const style = getComputedStyle(caption);
+    this.#input.style.font = style.font;
+    this.#input.style.padding = style.padding;
+    this.#input.style.color = style.color;
+    this.#input.style.textAlign = getComputedStyle(caption.firstElementChild).textAlign;
+    this.#input.hidden = false;
+    caption.classList.add("attachment__caption--editing");
+    this.#resizeObserver.observe(caption);
+    this.#resizeObserver.observe(this.#editorElement);
+    this.#updatePosition();
+    this.#input.focus({ preventScroll: true });
   }
+}
 
-  // Private
+class UploadRequests {
+  #requestsByKey = new Map()
 
-  get #allowedValuesIdentityObject() {
-    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  track(key, request) {
+    this.#requestsByKey.set(key, request);
   }
 
-  #resolveCannonicalValue(value) {
-    let index = this.#computedAllowedValues.indexOf(value);
-    if (index === -1) {
-      index = this.#computedAllowedValues.indexOf(computeStyleValues(this._property, [ value ])[0]);
+  forget(key) {
+    this.#requestsByKey.delete(key);
+  }
+
+  abort(key) {
+    const request = this.#requestsByKey.get(key);
+    if (request) {
+      this.#requestsByKey.delete(key);
+      request.abort();
     }
-    return index === -1 ? null : this._allowedValues[index]
   }
 
-  get #computedAllowedValues() {
-    return this._computedAllowedValues ||= computeStyleValues(this._property, this._allowedValues)
+  clear() {
+    this.#requestsByKey.clear();
   }
 }
 
-// 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();
+// Partition a stretch of text into consecutive { start, end, range } segments,
+// where offsets are relative to the text and range is the covering source
+// range — expressed in outer coordinates as { start, end, ... } — or null for
+// the stretches no range covers. Ranges must be sorted and non-overlapping.
+function segmentTextByRanges(text, textStart, ranges) {
+  const segments = [];
+  let cursor = 0;
 
-  const elements = values.map(value => {
-    const element = createElement("span", { style: `display: none; ${property}: ${value};` });
-    fragment.appendChild(element);
-    return element
-  });
+  for (const range of ranges) {
+    const from = Math.max(range.start - textStart, cursor);
+    const to = Math.min(range.end - textStart, text.length);
 
-  styleResolverRoot().appendChild(fragment);
+    if (from < to) {
+      if (from > cursor) {
+        segments.push({ start: cursor, end: from, range: null });
+      }
+      segments.push({ start: from, end: to, range });
+      cursor = to;
+    }
+  }
 
-  const computed = elements.map(element =>
-    window.getComputedStyle(element).getPropertyValue(property)
-  );
+  if (cursor < text.length) {
+    segments.push({ start: cursor, end: text.length, range: null });
+  }
 
-  elements.forEach(element => element.remove());
-  return computed
+  return segments
 }
 
 const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
@@ -3966,11 +4415,15 @@ function $extractHighlightRangesFromCodeNode(codeNode) {
 
 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"] ])
+    new StyleCanonicalizer("color", [ ...colorValues(config.buttons.color), ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...colorValues(config.buttons["background-color"]), ...config.permit["background-color"] ])
   ]
 }
 
+function colorValues(buttons) {
+  return normalizeColorButtons(buttons).map((button) => button.value)
+}
+
 function $toggleSelectionStyles(editor, styles) {
   const selection = $getSelection();
   if (!$isRangeSelection(selection)) return
@@ -4909,29 +5362,25 @@ class Selection {
       }, COMMAND_PRIORITY_LOW),
 
       this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-        this.#preserveFocusOfOtherFields();
+        this.#preserveFocusOutsideEditor();
         return false
       }, COMMAND_PRIORITY_CRITICAL)
     );
   }
 
-  // Firefox (152+) keeps window.getSelection() anchored inside the editor after focus
-  // moves to another field, and fires document selectionchange for every keystroke
-  // typed there. Lexical reads that stale selection, reconciles, and pulls focus back
-  // into the editor — stealing it mid-typing. When another text-entry field owns focus,
-  // tag the update so Lexical leaves the DOM selection (and with it, focus) alone.
-  #preserveFocusOfOtherFields() {
-    if (this.#anotherFieldIsFocused) {
+  // Selection changes can arrive after Tab moves focus to a toolbar or another field.
+  // Reconciling that stale selection would pull focus back into the editor.
+  #preserveFocusOutsideEditor() {
+    if (this.#isAnotherElementFocused) {
       $addUpdateTag(SKIP_DOM_SELECTION_TAG);
     }
   }
 
-  get #anotherFieldIsFocused() {
+  get #isAnotherElementFocused() {
     const rootElement = this.editor.getRootElement();
     const activeElement = rootElement?.ownerDocument.activeElement;
 
-    return activeElement && !rootElement.contains(activeElement) &&
-      (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)
+    return activeElement && activeElement !== rootElement.ownerDocument.body && !rootElement.contains(activeElement)
   }
 
   #listenForNodeSelections() {
@@ -5464,240 +5913,68 @@ class Selection {
   #getEdgeCharRect(element, edge) {
     const walker = document.createTreeWalker(element, 4 /* NodeFilter.SHOW_TEXT */);
     let textNode;
-
-    if (edge === "first") {
-      textNode = walker.nextNode();
-    } else {
-      while (walker.nextNode()) textNode = walker.currentNode;
-    }
-
-    if (!textNode || textNode.length === 0) return null
-
-    const range = document.createRange();
-    if (edge === "first") {
-      range.setStart(textNode, 0);
-      range.setEnd(textNode, 1);
-    } else {
-      range.setStart(textNode, textNode.length - 1);
-      range.setEnd(textNode, textNode.length);
-    }
-
-    return range.getBoundingClientRect()
-  }
-}
-
-class EditorConfiguration {
-  #editorElement
-  #config
-
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-    this.#config = new Configuration(
-      Lexxy.presets.get("default"),
-      Lexxy.presets.get(editorElement.preset),
-      this.#overrides
-    );
-  }
-
-  get(path) {
-    return this.#config.get(path)
-  }
-
-  get #overrides() {
-    const overrides = {};
-    for (const option of this.#defaultOptions) {
-      const attribute = dasherize(option);
-      if (this.#editorElement.hasAttribute(attribute)) {
-        overrides[option] = this.#parseAttribute(attribute);
-      }
-    }
-    return overrides
-  }
-
-  get #defaultOptions() {
-    return Object.keys(Lexxy.presets.get("default"))
-  }
-
-  #parseAttribute(attribute) {
-    const value = this.#editorElement.getAttribute(attribute);
-    try {
-      return JSON.parse(value)
-    } catch {
-      return value
-    }
-  }
-}
-
-class ImageGalleryNode extends ElementNode {
-  $config() {
-    return this.config("image_gallery", {
-      extends: ElementNode,
-    })
-  }
-
-  static transform() {
-    return (gallery) => {
-      gallery.unwrapEmptyNode()
-        || gallery.replaceWithSingularChild()
-        || gallery.splitAroundInvalidChild();
-    }
-  }
-
-  static importDOM() {
-    return {
-      div: (element) => {
-        if (!this.#isGalleryElement(element)) return null
-
-        return {
-          conversion: () => {
-            return {
-              node: $createImageGalleryNode()
-            }
-          },
-          priority: 2
-        }
-      }
-    }
-  }
-
-  static canCollapseWith(node) {
-    return $isImageGalleryNode(node) || this.isValidChild(node)
-  }
-
-  static isValidChild(node) {
-    return $isActionTextAttachmentNode(node) && node.isPreviewableImage
-  }
-
-  static #isGalleryElement(element) {
-    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
-    return element.textContent.trim() === ""
-      && attachmentChildren.length > 0
-      && element.children.length === attachmentChildren.length
-  }
-
-  static get #attachmentTags() {
-    return Object.keys(ActionTextAttachmentNode.importDOM())
-  }
-
-  createDOM() {
-    const div = document.createElement("div");
-    div.className = this.#galleryClassNames;
-    return div
-  }
-
-  updateDOM(_prevNode, dom) {
-    dom.className = this.#galleryClassNames;
-    return false
-  }
-
-  canBeEmpty() {
-    // Return `true` to conform to `$isBlock(node)`
-    // We clean-up empty galleries with a transform
-    return true
-  }
-
-  collapseAtStart(_selection) {
-    return true
-  }
-
-  insertNewAfter(selection, restoreSelection) {
-    const selectionBeforeLastChild = selection.anchor.getNode().is(this) && selection.anchor.offset == this.getChildrenSize() - 1;
-    if (selectionBeforeLastChild) {
-      const paragraph = $createParagraphNode();
-      this.insertAfter(paragraph, false);
-      paragraph.insertAfter(this.getLastChild(), false);
-      paragraph.selectEnd();
-
-      // return null as selection has been managed
-      return null
-    }
-
-    const newNode = $createImageGalleryNode();
-    this.insertAfter(newNode, restoreSelection);
-    return newNode
-  }
-
-  getImageAttachments() {
-    const children = this.getChildren();
-    return children.filter($isActionTextAttachmentNode)
-  }
-
-  exportDOM() {
-    const div = document.createElement("div");
-    div.className = this.#galleryClassNames;
-    return { element: div }
-  }
-
-  collapseWith(node, backwards) {
-    if (!ImageGalleryNode.canCollapseWith(node)) return false
-
-    if (backwards) {
-      $insertFirst(this, node);
+
+    if (edge === "first") {
+      textNode = walker.nextNode();
     } else {
-      this.append(node);
+      while (walker.nextNode()) textNode = walker.currentNode;
     }
 
-    $unwrapAndFilterDescendants(this, ImageGalleryNode.isValidChild);
-
-    return true
-  }
+    if (!textNode || textNode.length === 0) return null
 
-  unwrapEmptyNode() {
-    if (this.isEmpty()) {
-      const paragraph = $createParagraphNode();
-      return this.replace(paragraph)
+    const range = document.createRange();
+    if (edge === "first") {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, 1);
+    } else {
+      range.setStart(textNode, textNode.length - 1);
+      range.setEnd(textNode, textNode.length);
     }
-  }
 
-  replaceWithSingularChild() {
-    if (this.#hasSingularChild) {
-      const child = this.getFirstChild();
-      return this.replace($makeSafeForRoot(child))
-    }
+    return range.getBoundingClientRect()
   }
+}
 
-  splitAroundInvalidChild() {
-    for (const child of $firstToLastIterator(this)) {
-      if (ImageGalleryNode.isValidChild(child)) continue
-
-      const poppedNode = $makeSafeForRoot(child);
-      const [ topGallery, secondGallery ] = this.splitAtIndex(poppedNode.getIndexWithinParent());
-      topGallery.insertAfter(poppedNode);
-      poppedNode.selectEnd();
-
-      // remove an empty gallery rather than let it unwrap to a paragraph
-      if (secondGallery.isEmpty()) secondGallery.remove();
+class EditorConfiguration {
+  #editorElement
+  #config
 
-      break
-    }
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+    this.#config = new Configuration(
+      Lexxy.presets.get("default"),
+      Lexxy.presets.get(editorElement.preset),
+      this.#overrides
+    );
   }
 
-  splitAtIndex(index) {
-    return $splitNode(this, index)
+  get(path) {
+    return this.#config.get(path)
   }
 
-  get #hasSingularChild() {
-    return this.getChildrenSize() === 1
+  get #overrides() {
+    const overrides = {};
+    for (const option of this.#defaultOptions) {
+      const attribute = dasherize(option);
+      if (this.#editorElement.hasAttribute(attribute)) {
+        overrides[option] = this.#parseAttribute(attribute);
+      }
+    }
+    return overrides
   }
 
-  get #galleryClassNames() {
-    return `attachment-gallery attachment-gallery--${this.getChildrenSize()}`
+  get #defaultOptions() {
+    return Object.keys(Lexxy.presets.get("default"))
   }
-}
-
-function $createImageGalleryNode() {
-  return new ImageGalleryNode()
-}
-
-function $isImageGalleryNode(node) {
-  return node instanceof ImageGalleryNode
-}
 
-function $findOrCreateGalleryForImage(node) {
-  if (!ImageGalleryNode.canCollapseWith(node)) return null
-
-  const existingGallery = $getNearestNodeOfType(node, ImageGalleryNode);
-  return existingGallery ?? $wrapNodeInElement(node, $createImageGalleryNode)
+  #parseAttribute(attribute) {
+    const value = this.#editorElement.getAttribute(attribute);
+    try {
+      return JSON.parse(value)
+    } catch {
+      return value
+    }
+  }
 }
 
 class Uploader {
@@ -8788,75 +9065,387 @@ class AttachmentDragAndDrop {
     if (position === "before") {
       targetNode.insertBefore(draggedNode);
     } else {
-      targetNode.insertAfter(draggedNode);
+      targetNode.insertAfter(draggedNode);
+    }
+  }
+
+  #dropIntoList(draggedNode, target) {
+    const listItemNode = $getNearestNodeFromDOMNode(target.element);
+    if (!listItemNode || !$isListItemNode(listItemNode)) return
+
+    const listNode = listItemNode.getParent();
+    if (!listNode || !$isListNode(listNode)) return
+
+    const children = listNode.getChildren();
+    const index = children.indexOf(listItemNode);
+    if (index === -1) return
+
+    const splitIndex = target.position === "before" ? index : index + 1;
+
+    draggedNode.remove();
+
+    if (splitIndex === 0) {
+      listNode.insertBefore(draggedNode);
+    } else if (splitIndex >= children.length) {
+      listNode.insertAfter(draggedNode);
+    } else {
+      const [ , listAfter ] = $splitNode(listNode, splitIndex);
+      listAfter.insertBefore(draggedNode);
+    }
+  }
+
+  #dropBetweenBlocks(draggedNode, target) {
+    const targetNode = $getNearestNodeFromDOMNode(target.element);
+    if (!targetNode) return
+
+    const topLevelTarget = targetNode.getTopLevelElement?.() || targetNode;
+    if (draggedNode.is(topLevelTarget)) return
+
+    draggedNode.remove();
+
+    if (target.position === "before") {
+      topLevelTarget.insertBefore(draggedNode);
+    } else {
+      topLevelTarget.insertAfter(draggedNode);
+    }
+  }
+
+  // -- Lifecycle helpers -----------------------------------------------------
+
+  #cleanup() {
+    this.#clearDropIndicators();
+
+    if (this.#draggedNodeKey) {
+      const rootElement = this.#editor.getRootElement();
+      if (rootElement) {
+        const figure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+        figure?.classList.remove("lexxy-dragging");
+      }
+    }
+
+    this.#draggedNodeKey = null;
+
+    if (this.#rafId) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+
+    if (this.#draggingRafId) {
+      cancelAnimationFrame(this.#draggingRafId);
+      this.#draggingRafId = null;
+    }
+  }
+}
+
+// Lexical clears the DOM range on NodeSelection, leaving screen readers in focus
+// mode to read stray adjacent characters unless we provide a labelled range.
+class AttachmentFakeSelection {
+  #editor
+  #listeners = new ListenerBin()
+  #container = createElement("span", { className: "lexxy-fake-selection" })
+
+  constructor(editor) {
+    this.#editor = editor;
+    this.#listeners.track(
+      registerLabelledDecoratorSelection(editor, (target) => this.#update(target))
+    );
+  }
+
+  destroy() {
+    this.#listeners.dispose();
+    this.#container.remove();
+    this.#container = null;
+  }
+
+  #update(target) {
+    if (this.#container) {
+      const figure = target && this.#editor.getElementByKey(target.key);
+      if (figure) {
+        const label = target.label || "Attachment";
+        if (this.#container.textContent !== label) this.#container.textContent = label;
+        if (this.#container.parentNode !== figure) figure.append(this.#container);
+        this.#parkSelection();
+      } else {
+        this.#container.remove();
+      }
+    }
+  }
+
+  #parkSelection() {
+    const textNode = this.#container.firstChild;
+    if (textNode && this.#isEditorFocused && !this.#isAlreadyParkedHere) {
+      const range = document.createRange();
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, textNode.length);
+
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+
+  // Parking the range while a nested control is focused steals its screen reader cursor.
+  get #isEditorFocused() {
+    const root = this.#editor.getRootElement();
+    return root != null && document.activeElement === root
+  }
+
+  get #isAlreadyParkedHere() {
+    const selection = window.getSelection();
+    if (selection?.rangeCount === 1) {
+      const textNode = this.#container.firstChild;
+      return selection.anchorNode === textNode
+        && selection.focusNode === textNode
+        && selection.anchorOffset === 0
+        && selection.focusOffset === textNode.length
+    } else {
+      return false
+    }
+  }
+}
+
+class AttachmentKeyboardMove {
+  #editor
+  #listeners = new ListenerBin()
+  #scrollFrame
+
+  constructor(editor) {
+    this.#editor = editor;
+
+    this.#listeners.track(
+      editor.registerCommand(KEY_DOWN_COMMAND, this.#tryReorder, COMMAND_PRIORITY_HIGH)
+    );
+  }
+
+  destroy() {
+    this.#listeners.dispose();
+    cancelAnimationFrame(this.#scrollFrame);
+  }
+
+  #tryReorder = (event) => {
+    const node = $singleSelectedNode();
+    if (event.altKey && event.shiftKey && event.key.startsWith("Arrow") && $isActionTextAttachmentNode(node)) {
+      event.preventDefault();
+      const message = this.#executeMove(event.key, node);
+      $setSelection($createNodeSelectionWith(node));
+      announceFromEditor(this.#editor, message);
+      this.#keepInView(node);
+      return true
+    } else {
+      return false
+    }
+  }
+
+  #executeMove(key, node) {
+    switch (key) {
+      case "ArrowUp": return new AttachmentReorder(node, "previous").moveVertically()
+      case "ArrowDown": return new AttachmentReorder(node, "next").moveVertically()
+      case "ArrowLeft": return new AttachmentReorder(node, "previous").reorderInGallery()
+      case "ArrowRight": return new AttachmentReorder(node, "next").reorderInGallery()
+      default: return null
+    }
+  }
+
+  // Node selections don't scroll into view automatically like a caret does.
+  #keepInView(node) {
+    const key = node.getKey();
+    cancelAnimationFrame(this.#scrollFrame);
+    this.#scrollFrame = requestAnimationFrame(() => {
+      this.#editor.getElementByKey(key)?.scrollIntoView({ block: "nearest" });
+    });
+  }
+}
+
+class AttachmentReorder {
+  constructor(node, direction) {
+    this.node = node;
+    this.direction = direction;
+  }
+
+  moveVertically() {
+    if ($isImageGalleryNode(this.node.getParent())) {
+      return this.#extractFromGallery()
+    } else {
+      return this.#moveBlock() || this.#blockedMessage
+    }
+  }
+
+  reorderInGallery() {
+    const sibling = $getSiblingCaret(this.node, this.direction).getNodeAtCaret();
+    if ($isImageGalleryNode(this.node.getParent()) && sibling) {
+      $getSiblingCaret(sibling, this.direction).insert(this.node);
+      return "Image reordered in gallery"
+    } else {
+      return this.#blockedMessage
+    }
+  }
+
+  #extractFromGallery() {
+    const gallery = this.node.getParent();
+    $getSiblingCaret(gallery, this.direction).insert(this.node);
+    return "Image removed from gallery"
+  }
+
+  #moveBlock() {
+    const target = this.#skipProvisional($getSiblingCaret(this.node, this.direction).getNodeAtCaret());
+    if (this.#canJoinGallery(target)) {
+      return this.#joinGallery(target)
+    } else if (this.#canFormGalleryWith(target)) {
+      return this.#formGalleryWith(target)
+    } else if (target) {
+      return this.#swapWith(target)
+    } else {
+      return null
+    }
+  }
+
+  #skipProvisional(node) {
+    let current = node;
+    while (current && $isProvisionalParagraphNode(current)) {
+      current = $getSiblingCaret(current, this.direction).getNodeAtCaret();
+    }
+    return current
+  }
+
+  #canJoinGallery(target) {
+    return $isImageGalleryNode(target) && ImageGalleryNode.isValidChild(this.node)
+  }
+
+  #joinGallery(gallery) {
+    $getChildCaret(gallery, this.direction).insert(this.node);
+    return "Image added to gallery"
+  }
+
+  #canFormGalleryWith(target) {
+    return $isActionTextAttachmentNode(target)
+      && target.isPreviewableImage
+      && this.node.isPreviewableImage
+  }
+
+  #formGalleryWith(target) {
+    if ($findOrCreateGalleryForImage(target)) {
+      $getSiblingCaret(target, flipDirection(this.direction)).insert(this.node);
+      return "Gallery created"
+    } else {
+      return null
+    }
+  }
+
+  #swapWith(target) {
+    $getSiblingCaret(target, this.direction).insert(this.node);
+    if (this.direction === "next") {
+      return "Attachment moved down"
+    } else {
+      return "Attachment moved up"
     }
   }
 
-  #dropIntoList(draggedNode, target) {
-    const listItemNode = $getNearestNodeFromDOMNode(target.element);
-    if (!listItemNode || !$isListItemNode(listItemNode)) return
+  get #blockedMessage() {
+    if (this.direction === "next") {
+      return "Already at the end"
+    } else {
+      return "Already at the start"
+    }
+  }
+}
 
-    const listNode = listItemNode.getParent();
-    if (!listNode || !$isListNode(listNode)) return
+// Using a mention's label as avatar alt text can interrupt line-by-line reading,
+// but character navigation needs it near the caret to announce the mention.
+class CustomAttachmentLabels {
+  #editor
+  #listeners = new ListenerBin()
+  #active = null
 
-    const children = listNode.getChildren();
-    const index = children.indexOf(listItemNode);
-    if (index === -1) return
+  constructor(editor) {
+    this.#editor = editor;
+    this.#listeners.track(
+      editor.registerUpdateListener(this.#updateLabel),
+      // A blur command opens a Lexical update that can pull focus back into the editor.
+      editor.registerRootListener(rootElement => {
+        if (rootElement) {
+          return registerEventListener(rootElement, "blur", () => this.#restoreLabel())
+        }
+      })
+    );
+  }
 
-    const splitIndex = target.position === "before" ? index : index + 1;
+  destroy() {
+    this.#listeners.dispose();
+    this.#restoreLabel();
+  }
 
-    draggedNode.remove();
+  #updateLabel = ({ editorState }) => {
+    if (document.activeElement === this.#editor.getRootElement()) {
+      editorState.read(() => {
+        const selection = $getSelection();
+        const attachment = customAttachmentSelectedBy(selection) || customAttachmentBesideAnchor(selection);
 
-    if (splitIndex === 0) {
-      listNode.insertBefore(draggedNode);
-    } else if (splitIndex >= children.length) {
-      listNode.insertAfter(draggedNode);
+        if (attachment) {
+          this.#exposeLabelOn(attachment);
+        } else {
+          this.#restoreLabel();
+        }
+      });
     } else {
-      const [ , listAfter ] = $splitNode(listNode, splitIndex);
-      listAfter.insertBefore(draggedNode);
+      this.#restoreLabel();
     }
   }
 
-  #dropBetweenBlocks(draggedNode, target) {
-    const targetNode = $getNearestNodeFromDOMNode(target.element);
-    if (!targetNode) return
-
-    const topLevelTarget = targetNode.getTopLevelElement?.() || targetNode;
-    if (draggedNode.is(topLevelTarget)) return
+  #exposeLabelOn(attachment) {
+    const figure = this.#editor.getElementByKey(attachment.getKey());
+    if (figure && figure !== this.#active?.figure) {
+      this.#restoreLabel();
+      attachment.exposeLabel(figure);
+      this.#active = { figure, attachment };
+    }
+  }
 
-    draggedNode.remove();
+  #restoreLabel() {
+    if (this.#active) {
+      const { attachment, figure } = this.#active;
+      attachment.restoreLabel(figure);
+      this.#active = null;
+    }
+  }
+}
 
-    if (target.position === "before") {
-      topLevelTarget.insertBefore(draggedNode);
+function customAttachmentSelectedBy(selection) {
+  if ($isNodeSelection(selection)) {
+    const nodes = selection.getNodes();
+    if (nodes.length === 1 && $isCustomActionTextAttachmentNode(nodes[0])) {
+      return nodes[0]
     } else {
-      topLevelTarget.insertAfter(draggedNode);
+      return null
     }
+  } else {
+    return null
   }
+}
 
-  // -- Lifecycle helpers -----------------------------------------------------
-
-  #cleanup() {
-    this.#clearDropIndicators();
+// Screen readers need the label one character early to announce it as the caret
+// crosses the figure.
+function customAttachmentBesideAnchor(selection) {
+  if ($isRangeSelection(selection) && selection.isCollapsed()) {
+    const anchor = selection.anchor;
+    const parent = anchor.getNode();
+    const candidates = [];
 
-    if (this.#draggedNodeKey) {
-      const rootElement = this.#editor.getRootElement();
-      if (rootElement) {
-        const figure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
-        figure?.classList.remove("lexxy-dragging");
-      }
+    if (anchor.type === "text") {
+      const toEnd = parent.getTextContentSize() - anchor.offset;
+      if (toEnd <= 1) candidates.push({ node: parent.getNextSibling(), distance: toEnd });
+      if (anchor.offset <= 1) candidates.push({ node: parent.getPreviousSibling(), distance: anchor.offset });
+    } else {
+      candidates.push({ node: parent.getChildAtIndex(anchor.offset), distance: 0 });
+      candidates.push({ node: parent.getChildAtIndex(anchor.offset - 1), distance: 0 });
     }
 
-    this.#draggedNodeKey = null;
-
-    if (this.#rafId) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = null;
-    }
+    const nearest = candidates
+      .filter(({ node }) => $isCustomActionTextAttachmentNode(node))
+      .sort((a, b) => a.distance - b.distance)[0];
 
-    if (this.#draggingRafId) {
-      cancelAnimationFrame(this.#draggingRafId);
-      this.#draggingRafId = null;
-    }
+    return nearest?.node ?? null
+  } else {
+    return null
   }
 }
 
@@ -8886,12 +9475,19 @@ class AttachmentsExtension extends LexxyExtension {
       ],
       register: (editor) => {
         const dragAndDrop = new AttachmentDragAndDrop(editor);
+        const keyboardMove = new AttachmentKeyboardMove(editor);
+        const fakeSelection = new AttachmentFakeSelection(editor);
+        const customAttachmentLabels = new CustomAttachmentLabels(editor);
 
         return mergeRegister(
           editor.registerNodeTransform(ActionTextAttachmentNode, $extractAttachmentFromParagraph),
           editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL),
+          editor.registerCommand(KEY_TAB_COMMAND, $focusCaptionFromSelectedAttachment, COMMAND_PRIORITY_HIGH),
           editor.registerMutationListener(ActionTextAttachmentUploadNode, this.#handleUploadMutations.bind(this)),
-          () => dragAndDrop.destroy()
+          () => dragAndDrop.destroy(),
+          () => keyboardMove.destroy(),
+          () => fakeSelection.destroy(),
+          () => customAttachmentLabels.destroy()
         )
       }
     })
@@ -8989,6 +9585,16 @@ function $collapseAtGalleryEdge(anchor, backwards) {
   }
 }
 
+function $focusCaptionFromSelectedAttachment(event) {
+  const node = $singleSelectedNode();
+  if (!event.shiftKey && $isActionTextAttachmentNode(node) && node.focusCaption()) {
+    event.preventDefault();
+    return true
+  } else {
+    return false
+  }
+}
+
 // Manual selection handling to prevent Lexical merging the gallery with a <p> and unwrapping it
 function $moveSelectionBeforeGallery(anchor) {
   const previousNode = anchor.getNode().getPreviousSibling();
@@ -9720,6 +10326,7 @@ class LexicalEditorElement extends HTMLElement {
   #validity = new Map()
   #validationTextArea = document.createElement("textarea")
   #uploadRequests
+  #liveRegion
 
   constructor() {
     super();
@@ -9750,6 +10357,10 @@ class LexicalEditorElement extends HTMLElement {
     this.clipboard = new Clipboard(this);
     this.#disposables.push(this.clipboard);
 
+    this.#liveRegion = this.querySelector("lexxy-live-region") ?? createElement("lexxy-live-region");
+    this.append(this.#liveRegion);
+    this.#disposables.push(this.#liveRegion);
+
     this.adapter = new BrowserAdapter();
     this.#uploadRequests = new UploadRequests();
 
@@ -9895,6 +10506,16 @@ class LexicalEditorElement extends HTMLElement {
     return dispatch(this, "lexxy:file-accept", { file }, true)
   }
 
+  announce(message) {
+    if (message) {
+      if (typeof document.ariaNotify === "function") {
+        document.ariaNotify(message, { priority: "high" });
+      } else {
+        this.#liveRegion?.announce(message);
+      }
+    }
+  }
+
   $generateNodesFromDOM(doc, { editor = this.editor } = {}) {
     let nodes = $generateNodesFromDOM(editor, doc);
     if ($hasUpdateTag(PASTE_TAG)) nodes = $convertInlineImageDataURIs(nodes, this);
@@ -10260,6 +10881,9 @@ class LexicalEditorElement extends HTMLElement {
       );
       this.#registerTableComponents();
       this.#registerCodeLanguagePicker();
+      if (this.supportsAttachments) {
+        this.#registerAttachmentToolbar();
+      }
       if (this.supportsMarkdown) {
         const transformers = [ ...TRANSFORMERS, HORIZONTAL_DIVIDER ];
         registered.push(
@@ -10288,6 +10912,15 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(codeLanguagePicker);
   }
 
+  #registerAttachmentToolbar() {
+    let attachmentToolbar = this.querySelector("lexxy-attachment-toolbar");
+    attachmentToolbar ??= createElement("lexxy-attachment-toolbar");
+    this.append(attachmentToolbar);
+    this.#disposables.push(attachmentToolbar);
+    this.captionEditor = new CaptionEditor(this);
+    this.#disposables.push(this.captionEditor);
+  }
+
   #handleEnter() {
     // We can't prevent these externally using regular keydown because Lexical handles it first.
     this.#listeners.track(this.editor.registerCommand(
@@ -10496,21 +11129,22 @@ class LexicalEditorElement extends HTMLElement {
   // — triggering at most one forced reflow. The previous implementation interleaved
   // setProperty/getComputedStyle/removeProperty on the same element, forcing a style
   // recalc on every iteration during editor initialization.
-  #resolveColors(property, cssValues) {
+  #resolveColors(property, buttons) {
     const container = document.createElement("span");
     container.style.display = "none";
 
-    const resolvers = cssValues.map(cssValue => {
+    const resolvers = normalizeColorButtons(buttons).map(({ value, label }) => {
       const element = document.createElement("span");
-      element.style.setProperty(property, cssValue);
+      element.style.setProperty(property, value);
       container.appendChild(element);
-      return { element, name: cssValue }
+      return { element, name: value, label }
     });
 
     styleResolverRoot().appendChild(container);
 
-    const resolved = resolvers.map(({ element, name }) => ({
+    const resolved = resolvers.map(({ element, name, label }) => ({
       name,
+      label,
       value: window.getComputedStyle(element).getPropertyValue(property)
     }));
 
@@ -10574,6 +11208,39 @@ function $getReadableTextContent(node) {
   return node.getTextContent()
 }
 
+const REMOVAL_DELAY = 1000;
+
+class LiveRegion extends HTMLElement {
+  #additions = createElement("span", { ariaLive: "assertive", ariaRelevant: "additions" })
+  #removalTimeouts = new Set()
+
+  connectedCallback() {
+    this.replaceChildren(this.#additions);
+  }
+
+  disconnectedCallback() {
+    this.dispose();
+  }
+
+  dispose() {
+    for (const timeout of this.#removalTimeouts) clearTimeout(timeout);
+    this.#removalTimeouts.clear();
+    this.#additions.replaceChildren();
+    this.replaceChildren();
+  }
+
+  announce(message) {
+    const announcement = createElement("div", { textContent: message });
+    this.#additions.appendChild(announcement);
+
+    const timeout = setTimeout(() => {
+      announcement.remove();
+      this.#removalTimeouts.delete(timeout);
+    }, REMOVAL_DELAY);
+    this.#removalTimeouts.add(timeout);
+  }
+}
+
 class BaseSource {
   // Template method to override
   async buildListItems(filter = "") {
@@ -11460,46 +12127,233 @@ const DELETE_ICON = `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"
   <path d="M11.2041 1.01074C12.2128 1.113 13 1.96435 13 3V4H15L15.1025 4.00488C15.6067 4.05621 16 4.48232 16 5C16 5.55228 15.5523 6 15 6H14.8457L14.1416 15.1533C14.0614 16.1953 13.1925 17 12.1475 17H5.85254L5.6582 16.9902C4.76514 16.9041 4.03607 16.2296 3.88184 15.3457L3.8584 15.1533L3.1543 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H5V3C5 1.89543 5.89543 1 7 1H11L11.2041 1.01074ZM5.85254 15H12.1475L12.8398 6H5.16016L5.85254 15ZM7 4H11V3H7V4Z"/>
 </svg>`;
 
-class NodeDeleteButton extends HTMLElement {
+class AttachmentToolbar extends HTMLElement {
+  #listeners = new ListenerBin()
+  #buttons = []
+  #currentNodeKey = null
+  #reflowObserver = new ResizeObserver(() => this.#updatePosition())
+  #presentationObserver = new MutationObserver(() => this.#refresh())
+  #observedElement = null
+
   connectedCallback() {
-    this.editorElement = this.closest("lexxy-editor");
-    this.editor = this.editorElement.editor;
     this.classList.add("lexxy-floating-controls");
+    this.role = "toolbar";
+    this.hidden = true;
 
-    if (!this.querySelector(".lexxy-node-delete")) {
-      this.#attachDeleteButton();
+    if (this.#editor) {
+      this.#setUpButtons();
+      this.#monitorSelection();
+      this.#followScrolling();
+      this.#registerKeyboardShortcut();
     }
   }
 
   disconnectedCallback() {
-    this.editor = null;
-    this.editorElement = null;
+    this.dispose();
+  }
+
+  dispose() {
+    this.#listeners.dispose();
+    this.#reflowObserver.disconnect();
+    this.#presentationObserver.disconnect();
+  }
+
+  get #editor() {
+    return this.#editorElement?.editor
+  }
+
+  get #editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  #attachDeleteButton() {
+  #setUpButtons() {
+    this.innerHTML = "";
+
     const container = createElement("div", { className: "lexxy-floating-controls__group" });
+    container.appendChild(this.#createRemoveButton());
+    this.appendChild(container);
+
+    this.#buttons = Array.from(this.querySelectorAll("button"));
+    this.#listeners.track(
+      registerEventListener(this, "keydown", this.#navigateOrExit),
+      registerEventListener(this, "focusout", this.#resetTabIndexOnExit)
+    );
+  }
 
-    this.deleteButton = createElement("button", {
-      className: "lexxy-node-delete",
+  #createRemoveButton() {
+    const button = createElement("button", {
       type: "button",
-      "aria-label": "Remove"
+      className: "lexxy-attachment-toolbar__remove",
+      ariaLabel: "Remove",
+      tabIndex: -1
     });
-    this.deleteButton.tabIndex = -1;
-    this.deleteButton.innerHTML = DELETE_ICON;
+    button.innerHTML = DELETE_ICON;
+    this.#listeners.track(registerEventListener(button, "click", () => this.#removeSelectedNode()));
+    return button
+  }
 
-    this.handleDeleteClick = () => this.#deleteNode();
-    this.deleteButton.addEventListener("click", this.handleDeleteClick);
-    container.appendChild(this.deleteButton);
+  #removeSelectedNode() {
+    if (this.#hasSelectedNode) {
+      this.#editor.update(() => $getNodeByKey(this.#currentNodeKey)?.remove());
+      this.#editor.focus();
+    }
+  }
 
-    this.appendChild(container);
+  get #hasSelectedNode() {
+    return this.#currentNodeKey !== null
   }
 
-  #deleteNode() {
-    this.editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(this);
-      node?.remove();
+  #navigateOrExit = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#returnFocusToEditor();
+    } else {
+      handleRollingTabIndex(this.#buttons, event);
+    }
+  }
+
+  #returnFocusToEditor() {
+    this.#editor.getRootElement()?.focus({ preventScroll: true });
+    if (this.#currentNodeKey) {
+      const nodeKey = this.#currentNodeKey;
+      this.#editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node) $setSelection($createNodeSelectionWith(node));
+      });
+    }
+  }
+
+  #resetTabIndexOnExit = (event) => {
+    if (!this.contains(event.relatedTarget)) {
+      this.#buttons.forEach(button => button.tabIndex = -1);
+    }
+  }
+
+  #monitorSelection() {
+    this.#listeners.track(
+      registerLabelledDecoratorSelection(this.#editor, (target) => this.#updateForSelection(target))
+    );
+  }
+
+  #updateForSelection(target) {
+    if (target) {
+      this.#show(target.key);
+    } else {
+      this.#hide();
+    }
+  }
+
+  #show(nodeKey) {
+    this.#currentNodeKey = nodeKey;
+    this.#refresh();
+    this.hidden = false;
+    this.#reflowObserver.observe(this.#editorElement);
+  }
+
+  #refresh() {
+    if (this.#hasSelectedNode) {
+      this.#watchPresentation(this.#currentNodeKey);
+      this.#describeNode(this.#currentNodeKey);
+      this.#updatePosition();
+    }
+  }
+
+  // Failed previews change presentation without a Lexical update, and a node
+  // can replace its figure without changing its key.
+  #watchPresentation(nodeKey) {
+    const element = this.#editor.getElementByKey(nodeKey);
+    if (element !== this.#observedElement) {
+      this.#presentationObserver.disconnect();
+      this.#observedElement = element;
+      if (element) this.#presentationObserver.observe(element, { attributes: true, attributeFilter: [ "class" ] });
+    }
+  }
+
+  #describeNode(nodeKey) {
+    const element = this.#editor.getElementByKey(nodeKey);
+
+    this.#editor.getEditorState().read(() => {
+      const node = $getNodeByKey(nodeKey);
+      this.dataset.nodeType = node.getType();
+      this.dataset.presentation = this.#presentationOf(node, element);
+
+      if (node.contentType) {
+        this.dataset.contentType = node.contentType;
+      } else {
+        delete this.dataset.contentType;
+      }
     });
   }
+
+  #presentationOf(node, element) {
+    if ($isImageGalleryNode(node.getParent())) {
+      return "gallery"
+    } else if (node.isInline() && this.#rendersInline(element)) {
+      return "inline"
+    } else if (element?.classList.contains("attachment--preview")) {
+      return "preview"
+    } else {
+      return "block"
+    }
+  }
+
+  #rendersInline(element) {
+    return element != null && getComputedStyle(element).display.startsWith("inline")
+  }
+
+  #updatePosition() {
+    const figureElement = this.#editor.getElementByKey(this.#currentNodeKey);
+    if (figureElement) {
+      const rect = figureElement.getBoundingClientRect();
+      const editorRect = this.#editorElement.getBoundingClientRect();
+      this.style.setProperty("--lexxy-anchor-top", `${rect.top - editorRect.top}px`);
+      this.style.setProperty("--lexxy-anchor-left", `${rect.left - editorRect.left}px`);
+      this.style.setProperty("--lexxy-anchor-width", `${rect.width}px`);
+      this.style.setProperty("--lexxy-anchor-height", `${rect.height}px`);
+      this.#flipWhenOverflowing(editorRect);
+    }
+  }
+
+  #flipWhenOverflowing(editorRect) {
+    this.removeAttribute("data-overflow");
+    if (this.getBoundingClientRect().right > editorRect.right) {
+      this.setAttribute("data-overflow", "");
+    }
+  }
+
+  #hide() {
+    if (this.#hasSelectedNode) {
+      this.#currentNodeKey = null;
+      this.hidden = true;
+      this.#reflowObserver.disconnect();
+      this.#presentationObserver.disconnect();
+      this.#observedElement = null;
+    }
+  }
+
+  // Scrolling inside the editor moves the figure without resizing anything.
+  #followScrolling() {
+    this.#listeners.track(registerEventListener(this.#editorElement, "scroll", () => this.#updatePosition(), { capture: true, passive: true }));
+  }
+
+  #registerKeyboardShortcut() {
+    this.#listeners.track(this.#editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      this.#focusToolbarOnAltF10,
+      COMMAND_PRIORITY_HIGH
+    ));
+  }
+
+  #focusToolbarOnAltF10 = (event) => {
+    if (this.#hasSelectedNode && event.altKey && event.key === "F10") {
+      event.preventDefault();
+      this.#buttons[0]?.focus();
+      return true
+    } else {
+      return false
+    }
+  }
 }
 
 class TableController {
@@ -11904,7 +12758,7 @@ class TableTools extends HTMLElement {
   #listeners = new ListenerBin()
 
   connectedCallback() {
-    this.tableController = new TableController(this.#editorElement);
+    this.tableController = new TableController(this.editorElement);
     this.classList.add("lexxy-floating-controls");
     this.role = "toolbar";
 
@@ -11925,16 +12779,34 @@ class TableTools extends HTMLElement {
     this.tableController = null;
   }
 
-  get #editor() {
-    return this.#editorElement.editor
+  get editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  get editor() {
+    return this.editorElement.editor
+  }
+
+  getEditorElement() {
+    return this.editorElement
+  }
+
+  closeDropdowns({ except } = {}) {
+    this.#moreMenus.forEach(menu => {
+      if (menu !== except) menu.close({ focusEditor: false });
+    });
+  }
+
+  get #moreMenus() {
+    return this.querySelectorAll("lexxy-toolbar-dropdown")
+  }
+
+  get #hasOpenMoreMenu() {
+    return Array.from(this.#moreMenus).some(menu => menu.isOpen)
   }
 
   get #tableToolsButtons() {
-    return Array.from(this.querySelectorAll("button, details > summary"))
+    return Array.from(this.querySelectorAll("button")).filter(button => !button.closest("[data-dropdown-panel]"))
   }
 
   #setUpButtons() {
@@ -11953,23 +12825,37 @@ class TableTools extends HTMLElement {
     const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
     const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
 
-    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" });
-    dropdown.setAttribute("name", "lexxy-dropdown");
-    dropdown.tabIndex = -1;
-
-    const count = createElement("summary", {}, `_ ${childType}s`);
-    setCountProperty(count);
-    dropdown.appendChild(count);
-
-    dropdown.appendChild(moreMenu);
-
     container.appendChild(minusButton);
-    container.appendChild(dropdown);
+    container.appendChild(this.#createMoreMenu(childType, setCountProperty, moreMenu));
     container.appendChild(plusButton);
 
     return container
   }
 
+  #createMoreMenu(childType, setCountProperty, menu) {
+    const dropdown = createElement("lexxy-toolbar-dropdown", { className: "lexxy-table-control__more-menu" });
+
+    const trigger = createElement("button", {
+      type: "button",
+      className: "lexxy-table-control__more-menu-trigger",
+      dataset: { dropdownTrigger: "" },
+      "aria-haspopup": "menu",
+      "aria-expanded": "false"
+    }, `_ ${childType}s`);
+    trigger.tabIndex = -1;
+    setCountProperty(trigger);
+
+    menu.dataset.dropdownPanel = "";
+    menu.role = "menu";
+    menu.setAttribute("aria-label", `${childType} options`);
+    menu.hidden = true;
+
+    dropdown.appendChild(trigger);
+    dropdown.appendChild(menu);
+
+    return dropdown
+  }
+
   #createRowButtonsContainer() {
     return this.#createButtonsContainer(
       "row",
@@ -11988,15 +12874,18 @@ class TableTools extends HTMLElement {
 
   #createMoreMenuSection(childType) {
     const section = createElement("div", { className: "lexxy-floating-controls__group lexxy-table-control__more-menu-details" });
-    const addBeforeButton = this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" });
-    const addAfterButton = this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" });
-    const toggleStyleButton = this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType });
-    const deleteButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType });
 
-    section.appendChild(addBeforeButton);
-    section.appendChild(addAfterButton);
-    section.appendChild(toggleStyleButton);
-    section.appendChild(deleteButton);
+    const items = [
+      this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" }),
+      this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" }),
+      this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType }),
+      this.#createButton(`Remove ${childType}`, { action: "delete", childType })
+    ];
+
+    items.forEach(item => {
+      item.role = "menuitem";
+      section.appendChild(item);
+    });
 
     return section
   }
@@ -12037,7 +12926,7 @@ class TableTools extends HTMLElement {
   }
 
   #registerKeyboardShortcuts() {
-    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnAltF10, COMMAND_PRIORITY_HIGH));
+    this.#listeners.track(this.editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnAltF10, COMMAND_PRIORITY_HIGH));
   }
 
   #focusToolbarOnAltF10 = (event) => {
@@ -12068,9 +12957,9 @@ class TableTools extends HTMLElement {
     const cell = this.tableController.currentCell;
     if (!cell) return
 
-    this.#editor.update(() => {
+    this.editor.update(() => {
       cell.select();
-      this.#editor.focus();
+      this.editor.focus();
     });
 
     this.#update();
@@ -12107,7 +12996,7 @@ class TableTools extends HTMLElement {
     if (!cellsToHighlight) return
 
     cellsToHighlight.forEach(cell => {
-      const cellElement = this.#editor.getElementByKey(cell.getKey());
+      const cellElement = this.editor.getElementByKey(cell.getKey());
       if (!cellElement) return
 
       cellElement.classList.toggle(theme.tableCellHighlight, true);
@@ -12116,8 +13005,8 @@ class TableTools extends HTMLElement {
   }
 
   #monitorForTableSelection() {
-    this.#listeners.track(this.#editor.registerUpdateListener(() => {
-      const tableNode = this.#editor.getRootElement() && this.tableController.updateSelectedTable();
+    this.#listeners.track(this.editor.registerUpdateListener(() => {
+      const tableNode = this.editor.getRootElement() && this.tableController.updateSelectedTable();
 
       if (tableNode) {
         this.#show();
@@ -12128,8 +13017,12 @@ class TableTools extends HTMLElement {
   }
 
   #executeTableCommand(command) {
+    const fromMoreMenu = this.#hasOpenMoreMenu;
+
     this.tableController.executeTableCommand(command);
     this.#update();
+
+    if (fromMoreMenu) this.editor.focus();
   }
 
   #show() {
@@ -12153,18 +13046,18 @@ class TableTools extends HTMLElement {
   }
 
   #closeMoreMenu() {
-    this.querySelector("details[open]")?.removeAttribute("open");
+    this.closeDropdowns();
   }
 
   #updateButtonsPosition() {
     const tableNode = this.tableController.currentTableNode;
     if (!tableNode) return
 
-    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
+    const tableElement = this.editor.getElementByKey(tableNode.getKey());
     if (!tableElement) return
 
     const tableRect = tableElement.getBoundingClientRect();
-    const editorRect = this.#editorElement.getBoundingClientRect();
+    const editorRect = this.editorElement.getBoundingClientRect();
 
     const relativeTop = tableRect.top - editorRect.top;
     const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
@@ -12176,7 +13069,7 @@ class TableTools extends HTMLElement {
     const tableNode = this.tableController.currentTableNode;
     if (!tableNode) return
 
-    const tableElement = $getElementForTableNode(this.#editor, tableNode);
+    const tableElement = $getElementForTableNode(this.editor, tableNode);
     if (!tableElement) return
 
     const rowCount = tableElement.rows;
@@ -12190,18 +13083,18 @@ class TableTools extends HTMLElement {
     const cell = this.tableController.currentCell;
     if (!cell) return
 
-    const cellElement = this.#editor.getElementByKey(cell.getKey());
-    if (!cellElement) return
+    const cellElement = this.editor.getElementByKey(cell.getKey());
+    if (!cellElement?.contains(document.getSelection()?.anchorNode)) return
 
     cellElement.classList.add(theme.tableCellFocus);
   }
 
   #clearCellStyles() {
-    this.#editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
+    this.editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
       cell.classList.remove(theme.tableCellFocus);
     });
 
-    this.#editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
+    this.editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
       cell.classList.remove(theme.tableCellHighlight);
       cell.removeAttribute("data-action");
       cell.removeAttribute("data-child-type");
@@ -12233,7 +13126,8 @@ function defineElements() {
     // Prompt must be registered AFTER Editor
     "lexxy-prompt": LexicalPromptElement,
     "lexxy-code-language-picker": CodeLanguagePicker,
-    "lexxy-node-delete-button": NodeDeleteButton,
+    "lexxy-live-region": LiveRegion,
+    "lexxy-attachment-toolbar": AttachmentToolbar,
     "lexxy-table-tools": TableTools
   };