@37signals/lexxy 0.7.6-beta → 0.8.0-beta

package/dist/lexxy.esm.js

@@ -9,8 +9,8 @@ import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isTextNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, $createParagraphNode, $setSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $getNodeByKey, $createLineBreakNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $createNodeSelection, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $isTextNode, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, $setSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, ElementNode, $splitNode, $getNodeByKey, $createLineBreakNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, $createListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
@@ -20,10 +20,10 @@ import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
-import { createElement, createAttachmentFigure, isPreviewableImage, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
+import { createElement, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
-import { $getNearestNodeOfType, mergeRegister, $insertFirst, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
+import { $getNearestNodeOfType, $wrapNodeInElement, mergeRegister, $descendantsMatching, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator } from '@lexical/utils';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 
@@ -106,7 +106,7 @@ var Lexxy = {
   }
 };
 
-const ALLOWED_HTML_TAGS = [ "a", "b", "blockquote", "br", "code", "em",
+const ALLOWED_HTML_TAGS = [ "a", "b", "blockquote", "br", "code", "div", "em",
   "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul", "table", "tbody", "tr", "th", "td" ];
 
 const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
@@ -243,6 +243,94 @@ function isActiveAndVisible(element) {
   return element && !element.disabled && element.checkVisibility()
 }
 
+var ToolbarIcons = {
+  "bold":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <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">
+    <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">
+    <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>`,
+
+  "heading":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <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>`,
+
+  "highlight":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.4564 14.4272C17.1356 15.5592 16.3204 17.0002 15.0003 17.0004C13.68 17.0004 12.864 15.5593 13.5433 14.4272L15.0003 12.0004L16.4564 14.4272ZM5.1214 1.70746C5.51192 1.31693 6.14494 1.31693 6.53546 1.70746L9.7171 4.8891L13.2532 8.42426C14.2295 9.40056 14.2295 10.9841 13.2532 11.9604L9.7171 15.4955C8.74078 16.4718 7.15822 16.4718 6.18195 15.4955L2.64679 11.9604C1.67048 10.9841 1.67048 9.40057 2.64679 8.42426L6.18195 4.8891C6.30299 4.76805 6.43323 4.66177 6.57062 4.57074L5.1214 3.12152C4.73091 2.73104 4.73099 2.09799 5.1214 1.70746ZM8.30304 6.30316C8.10776 6.10815 7.79119 6.10799 7.59601 6.30316L4.06085 9.83929L3.9964 9.91742C3.88661 10.0838 3.88645 10.3019 3.9964 10.4682L4.02277 10.5004H11.8763C12.0312 10.3043 12.02 10.0205 11.8392 9.83929L8.30304 6.30316Z"/>
+  </svg>`,
+
+  "link":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <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">
+    <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">
+    <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">
+    <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">
+    <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"/>
+    <path d="M2.84155 6V3.01367H2.79053L1.85596 3.64478V2.79614L2.84155 2.12476H3.82715V6H2.84155Z"/>
+  </svg>`,
+
+  "attachment":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <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">
+    <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">
+    <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">
+    <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">
+    <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">
+    <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>`
+};
+
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
 
@@ -556,22 +644,24 @@ class LexicalToolbarElement extends HTMLElement {
   static get defaultTemplate() {
     return `
       <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 22V2h8.183c1.764 0 3.174.435 4.228 1.304 1.055.87 1.582 2.076 1.582 3.62 0 .8-.148 1.503-.445 2.109a3.94 3.94 0 01-1.194 1.465 4.866 4.866 0 01-1.726.806v.176c.786.078 1.51.312 2.172.703a4.293 4.293 0 011.596 1.627c.403.693.604 1.543.604 2.549 0 1.192-.292 2.207-.877 3.048-.585.84-1.39 1.484-2.416 1.934-1.026.44-2.206.659-3.538.659H5zM8.854 4.974v5.348h2.56c.873 0 1.582-.107 2.129-.322.556-.215.963-.523 1.222-.923.269-.41.403-.904.403-1.48 0-.82-.254-1.46-.762-1.92-.499-.468-1.204-.703-2.115-.703H8.854zm0 8.103v5.949h2.877c1.534 0 2.636-.245 3.307-.733.671-.498 1.007-1.221 1.007-2.168 0-.635-.134-1.178-.403-1.627-.268-.459-.666-.81-1.193-1.055-.518-.244-1.156-.366-1.913-.366H8.854z"/></svg>
+        ${ToolbarIcons.bold}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="italic" data-command="italic" title="Italic">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.1 4h-1.5l-3.2 16h1.5l-.4 2h-7l.4-2h1.5l3.2-16h-1.5l.4-2h7l-.4 2z"/></svg>
+      ${ToolbarIcons.italic}
+      </button>
+
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
+      ${ToolbarIcons.strikethrough}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70588 16.1591C4.81459 19.7901 7.48035 22 11.6668 22C15.9854 22 18.724 19.6296 18.724 15.8779C18.724 15.5007 18.6993 15.1427 18.6474 14.8066H14.3721C14.8637 15.2085 15.0799 15.7037 15.0799 16.3471C15.0799 17.7668 13.7532 18.7984 11.8113 18.7984C9.88053 18.7984 8.38582 17.7531 8.21659 16.1591H4.70588ZM5.23953 9.31962H9.88794C9.10723 8.88889 8.75888 8.33882 8.75888 7.57339C8.75888 6.13992 9.96576 5.18793 11.7631 5.18793C13.5852 5.18793 14.8761 6.1797 14.9959 7.81344H18.4102C18.3485 4.31824 15.8038 2 11.752 2C7.867 2 5.09129 4.35802 5.09129 7.92044C5.09129 8.41838 5.14071 8.88477 5.23953 9.31962ZM2.23529 10.6914C1.90767 10.6914 1.59347 10.8359 1.36181 11.0931C1.13015 11.3504 1 11.6993 1 12.0631C1 12.4269 1.13015 12.7758 1.36181 13.0331C1.59347 13.2903 1.90767 13.4348 2.23529 13.4348H20.7647C21.0923 13.4348 21.4065 13.2903 21.6382 13.0331C21.8699 12.7758 22 12.4269 22 12.0631C22 11.6993 21.8699 11.3504 21.6382 11.0931C21.4065 10.8359 21.0923 10.6914 20.7647 10.6914H2.23529Z"/>
-        </svg>
+      <button class="lexxy-editor__toolbar-button" type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
+        ${ToolbarIcons.heading}
       </button>
 
       <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
+          ${ToolbarIcons.highlight}
         </summary>
         <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-content">
           <div class="lexxy-highlight-colors"></div>
@@ -581,7 +671,7 @@ class LexicalToolbarElement extends HTMLElement {
 
       <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
+          ${ToolbarIcons.link}
         </summary>
         <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
           <form method="dialog">
@@ -595,49 +685,45 @@ class LexicalToolbarElement extends HTMLElement {
       </details>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 5C8.985 5 11 7.09 11 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.022.746a.563.563 0 01-.52-.36.602.602 0 01.067-.57l.055-.066.009-.009.041-.048a4.25 4.25 0 00.168-.21c.143-.188.336-.47.53-.84a6.743 6.743 0 00.75-2.605C3.705 13.994 2 12.038 2 9.667 2 7.089 4.015 5 6.5 5zM17.5 5C19.985 5 22 7.09 22 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.023.746a.563.563 0 01-.52-.36.602.602 0 01.068-.57l.055-.066.009-.009.041-.048c.039-.045.097-.115.168-.21a6.16 6.16 0 00.53-.84 6.745 6.745 0 00.75-2.605C14.705 13.994 13 12.038 13 9.667 13 7.089 15.015 5 17.5 5z"/></svg>
-      </button>
-
-      <button class="lexxy-editor__toolbar-button" type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.322 5.315H9.64V22H5.684V5.315H0v-3.31h15.322v3.31z"/><path d="M23.957 11.79H19.92V22h-3.402V11.79H12.48V9.137h11.477v2.653z"/></svg>
+        ${ToolbarIcons.quote}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="code" data-command="insertCodeBlock" title="Code">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.121 6l-6 6 6 6-2.12 2.121-7.061-7.06a1.5 1.5 0 010-2.121L8 3.879 10.121 6zM23.06 10.94a1.5 1.5 0 010 2.12L16 20.121 13.88 18l6-6-6-6L16 3.879l7.06 7.06z"/></svg>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="code" data-command="insertCodeBlock" title="Code">
+        ${ToolbarIcons.code}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 5a2 2 0 11-4 0 2 2 0 014 0zM5 12a2 2 0 11-4 0 2 2 0 014 0zM5 19a2 2 0 11-4 0 2 2 0 014 0zM7 5.25C7 4.56 7.56 4 8.25 4h13.5a1.25 1.25 0 110 2.5H8.25C7.56 6.5 7 5.94 7 5.25zM7 12.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM7 19.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25z"/></svg>
+        ${ToolbarIcons.ul}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 5.25C7 4.56 7.56 4 8.25 4h13.5a1.25 1.25 0 110 2.5H8.25C7.56 6.5 7 5.94 7 5.25zM7 12.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM7 19.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM4.438 8H3.39V3.684H3.34c-.133.093-.267.188-.402.285l-.407.289a129.5 129.5 0 00-.402.285v-.969l.633-.453c.21-.15.42-.302.629-.453h1.046V8zM2.672 11.258h-1v-.051c0-.206.036-.405.11-.598.075-.195.188-.37.34-.527.15-.156.339-.281.566-.375.229-.094.498-.14.808-.14.367 0 .688.065.961.195s.484.308.633.535c.15.224.226.478.226.762 0 .244-.046.463-.14.656-.091.19-.209.368-.352.535-.14.164-.289.332-.445.504L3.168 14.09v.05h2.238V15H1.723v-.656l1.949-2.102c.096-.101.19-.207.281-.316.091-.112.167-.232.227-.36a.953.953 0 00.09-.41.712.712 0 00-.387-.648.845.845 0 00-.41-.098.81.81 0 00-.43.11.75.75 0 00-.277.293.824.824 0 00-.094.386V11.258zM2.852 19.66v-.812h.562a.917.917 0 00.43-.098.742.742 0 00.293-.266.673.673 0 00.101-.379.654.654 0 00-.234-.523.87.87 0 00-.59-.2.987.987 0 00-.336.055.837.837 0 00-.258.149.712.712 0 00-.172.215.66.66 0 00-.066.25h-.98c.007-.209.053-.403.136-.582.084-.18.203-.336.36-.469.156-.135.346-.24.57-.316.227-.076.486-.115.777-.118a2.33 2.33 0 01.965.176c.271.12.48.285.63.496.15.209.227.448.23.719a1.11 1.11 0 01-.16.637 1.28 1.28 0 01-.825.586v.054c.162.016.33.07.504.164.177.094.328.232.453.415.125.18.189.411.192.695a1.37 1.37 0 01-.157.676c-.104.197-.25.365-.437.503-.188.136-.404.24-.649.313-.242.07-.5.105-.777.105-.401 0-.743-.067-1.027-.203a1.608 1.608 0 01-.649-.547 1.46 1.46 0 01-.238-.75h.969c.01.128.057.243.14.344a.885.885 0 00.332.238c.141.058.3.088.477.09.195 0 .366-.034.512-.101a.798.798 0 00.336-.29.744.744 0 00.117-.425.74.74 0 00-.446-.695 1.082 1.082 0 00-.496-.106h-.59z"/></svg>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
+        ${ToolbarIcons.ol}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" title="Upload file">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a2 2 0 110 4 2 2 0 010-4z""/><path d="M22 2a1 1 0 011 1v18a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1h20zM3 18.714L9 11l5.25 6.75L17 15l4 4V4H3v14.714z"/></svg>
+        ${ToolbarIcons.attachment}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.2041 2.01074C21.2128 2.113 22 2.96435 22 4V20L21.9893 20.2041C21.8938 21.1457 21.1457 21.8938 20.2041 21.9893L20 22H4C2.96435 22 2.113 21.2128 2.01074 20.2041L2 20V4C2 2.89543 2.89543 2 4 2H20L20.2041 2.01074ZM4 13V20H11V13H4ZM13 13V20H20V13H13ZM4 11H11V4H4V11ZM13 11H20V4H13V11Z"/></svg>
+        ${ToolbarIcons.table}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
-        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447716 13 0 12.5523 0 12Z"/><path d="M4 5C4 3.89543 4.89543 3 6 3H18C19.1046 3 20 3.89543 20 5C20 6.10457 19.1046 7 18 7H6C4.89543 7 4 6.10457 4 5Z"/><path d="M4 19C4 17.8954 4.89543 17 6 17H18C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19Z"/></svg>
+        ${ToolbarIcons.hr}
       </button>
  
       <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
  
       <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.64648 8.26531C7.93911 6.56386 10.7827 5.77629 13.624 6.05535C16.4655 6.33452 19.1018 7.66079 21.0195 9.77605C22.5839 11.5016 23.5799 13.6516 23.8936 15.9352C24.0115 16.7939 23.2974 17.4997 22.4307 17.4997C21.5641 17.4997 20.8766 16.7915 20.7148 15.9401C20.4295 14.4379 19.7348 13.0321 18.6943 11.8844C17.3 10.3464 15.3835 9.38139 13.3174 9.17839C11.2514 8.97546 9.18359 9.54856 7.5166 10.7858C6.38259 11.6275 5.48981 12.7361 4.90723 13.9997H8.5C9.3283 13.9997 9.99979 14.6714 10 15.4997C10 16.3281 9.32843 16.9997 8.5 16.9997H1.5C0.671573 16.9997 0 16.3281 0 15.4997V8.49968C0.000213656 7.67144 0.671705 6.99968 1.5 6.99968C2.3283 6.99968 2.99979 7.67144 3 8.49968V11.0212C3.7166 9.9704 4.60793 9.03613 5.64648 8.26531Z"/></svg>
+        ${ToolbarIcons.undo}
       </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.2599 8.26531C15.9672 6.56386 13.1237 5.77629 10.2823 6.05535C7.4408 6.33452 4.80455 7.66079 2.88681 9.77605C1.32245 11.5016 0.326407 13.6516 0.0127834 15.9352C-0.105117 16.7939 0.608975 17.4997 1.47567 17.4997C2.34228 17.4997 3.02969 16.7915 3.19149 15.9401C3.47682 14.4379 4.17156 13.0321 5.212 11.8844C6.60637 10.3464 8.52287 9.38139 10.589 9.17839C12.655 8.97546 14.7227 9.54856 16.3897 10.7858C17.5237 11.6275 18.4165 12.7361 18.9991 13.9997H15.4063C14.578 13.9997 13.9066 14.6714 13.9063 15.4997C13.9063 16.3281 14.5779 16.9997 15.4063 16.9997H22.4063C23.2348 16.9997 23.9063 16.3281 23.9063 15.4997V8.49968C23.9061 7.67144 23.2346 6.99968 22.4063 6.99968C21.578 6.99968 20.9066 7.67144 20.9063 8.49968V11.0212C20.1897 9.9704 19.2984 9.03613 18.2599 8.26531Z"/></svg>
+        ${ToolbarIcons.redo}
       </button>
 
       <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-overflow" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
+        <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">${ToolbarIcons.overflow}</summary>
         <div class="lexxy-editor__toolbar-dropdown-content lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
       </details>
     `
@@ -717,127 +803,54 @@ var theme = {
   }
 };
 
-function bytesToHumanSize(bytes) {
-  if (bytes === 0) return "0 B"
-  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${ value.toFixed(2) } ${ sizes[i] }`
-}
-
-class ActionTextAttachmentNode extends DecoratorNode {
+class HorizontalDividerNode extends DecoratorNode {
   static getType() {
-    return "action_text_attachment"
+    return "horizontal_divider"
   }
 
   static clone(node) {
-    return new ActionTextAttachmentNode({ ...node }, node.__key)
+    return new HorizontalDividerNode(node.__key)
   }
 
   static importJSON(serializedNode) {
-    return new ActionTextAttachmentNode({ ...serializedNode })
+    return new HorizontalDividerNode()
   }
 
   static importDOM() {
     return {
-      [this.TAG_NAME]: () => {
-        return {
-          conversion: (attachment) => ({
-            node: new ActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              src: attachment.getAttribute("url"),
-              previewable: attachment.getAttribute("previewable"),
-              altText: attachment.getAttribute("alt"),
-              caption: attachment.getAttribute("caption"),
-              contentType: attachment.getAttribute("content-type"),
-              fileName: attachment.getAttribute("filename"),
-              fileSize: attachment.getAttribute("filesize"),
-              width: attachment.getAttribute("width"),
-              height: attachment.getAttribute("height")
-            })
-          }), priority: 1
-        }
-      },
-      "img": () => {
-        return {
-          conversion: (img) => ({
-            node: new ActionTextAttachmentNode({
-              src: img.getAttribute("src"),
-              caption: img.getAttribute("alt") || "",
-              contentType: "image/*",
-              width: img.getAttribute("width"),
-              height: img.getAttribute("height")
-            })
-          }), priority: 1
-        }
-      },
-      "video": () => {
+      "hr": (hr) => {
         return {
-          conversion: (video) => {
-            const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
-            const fileName = videoSource?.split("/")?.pop();
-            const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
-
-            return {
-              node: new ActionTextAttachmentNode({
-                src: videoSource,
-                fileName: fileName,
-                contentType: contentType
-              })
-            }
-          }, priority: 1
+          conversion: () => ({
+            node: new HorizontalDividerNode()
+          }),
+          priority: 1
         }
       }
     }
   }
 
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
-  }
-
-  constructor({ tagName, sgid, src, previewable, altText, caption, contentType, fileName, fileSize, width, height }, key) {
+  constructor(key) {
     super(key);
-
-    this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
-    this.sgid = sgid;
-    this.src = src;
-    this.previewable = previewable;
-    this.altText = altText || "";
-    this.caption = caption || "";
-    this.contentType = contentType || "";
-    this.fileName = fileName || "";
-    this.fileSize = fileSize;
-    this.width = width;
-    this.height = height;
-
-    this.editor = $getEditor();
   }
 
   createDOM() {
-    const figure = this.createAttachmentFigure();
+    const figure = createElement("figure", { className: "horizontal-divider" });
+    const hr = createElement("hr");
 
-    if (this.isPreviewableAttachment) {
-      figure.appendChild(this.#createDOMForImage());
-      figure.appendChild(this.#createEditableCaption());
-    } else {
-      figure.appendChild(this.#createDOMForFile());
-      figure.appendChild(this.#createDOMForNotImage());
-    }
+    figure.appendChild(hr);
+
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
 
     return figure
   }
 
-  updateDOM(_prevNode, dom) {
-    const caption = dom.querySelector("figcaption textarea");
-    if (caption && this.caption) {
-      caption.value = this.caption;
-    }
-
-    return false
+  updateDOM() {
+    return true
   }
 
   getTextContent() {
-    return `[${this.caption || this.fileName}]\n\n`
+    return "┄\n\n"
   }
 
   isInline() {
@@ -845,135 +858,23 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      previewable: this.previewable || null,
-      url: this.src,
-      alt: this.altText,
-      caption: this.caption,
-      "content-type": this.contentType,
-      filename: this.fileName,
-      filesize: this.fileSize,
-      width: this.width,
-      height: this.height,
-      presentation: "gallery"
-    });
-
-    return { element: attachment }
+    const hr = createElement("hr");
+    return { element: hr }
   }
 
   exportJSON() {
     return {
-      type: "action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      src: this.src,
-      previewable: this.previewable,
-      altText: this.altText,
-      caption: this.caption,
-      contentType: this.contentType,
-      fileName: this.fileName,
-      fileSize: this.fileSize,
-      width: this.width,
-      height: this.height
+      type: "horizontal_divider",
+      version: 1
     }
   }
 
   decorate() {
     return null
   }
-
-  createAttachmentFigure() {
-    return createAttachmentFigure(this.contentType, this.isPreviewableAttachment, this.fileName)
-  }
-
-  get #isPreviewableImage() {
-    return isPreviewableImage(this.contentType)
-  }
-
-  get isPreviewableAttachment() {
-    return this.#isPreviewableImage || this.previewable
-  }
-
-  #createDOMForImage() {
-    return createElement("img", { src: this.src, alt: this.altText, ...this.#imageDimensions })
-  }
-
-  get #imageDimensions() {
-    if (this.width && this.height) {
-      return { width: this.width, height: this.height }
-    } else {
-      return {}
-    }
-  }
-
-  #createDOMForFile() {
-    const extension = this.fileName ? this.fileName.split(".").pop().toLowerCase() : "unknown";
-    return createElement("span", { className: "attachment__icon", textContent: `${extension}` })
-  }
-
-  #createDOMForNotImage() {
-    const figcaption = createElement("figcaption", { className: "attachment__caption" });
-
-    const nameTag = createElement("strong", { className: "attachment__name", textContent: this.caption || this.fileName });
-
-    figcaption.appendChild(nameTag);
-
-    if (this.fileSize) {
-      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
-      figcaption.appendChild(sizeSpan);
-    }
-
-    return figcaption
-  }
-
-  #createEditableCaption() {
-    const caption = createElement("figcaption", { className: "attachment__caption" });
-    const input = createElement("textarea", {
-      value: this.caption,
-      placeholder: this.fileName,
-      rows: "1"
-    });
-
-    input.addEventListener("focusin", () => input.placeholder = "Add caption...");
-    input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
-    input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
-
-    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.stopPropagation();
-      event.target.blur();
-
-      this.editor.update(() => {
-        // Place the cursor after the current image
-        this.selectNext(0, 0);
-      }, {
-        tag: HISTORY_MERGE_TAG
-      });
-    }
-
-  }
 }
 
-const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
 
 function $createNodeSelectionWith(...nodes) {
   const selection = $createNodeSelection();
@@ -981,11 +882,34 @@ function $createNodeSelectionWith(...nodes) {
   return selection
 }
 
+function $makeSafeForRoot(node) {
+  if ($isTextNode(node)) {
+    return $wrapNodeInElement(node, $createParagraphNode)
+  } else if (node.isParentRequired()) {
+    const parent = node.createRequiredParent();
+    return $wrapNodeInElement(node, parent)
+  } else {
+    return node
+  }
+}
+
 function getListType(node) {
   const list = $getNearestNodeOfType(node, ListNode);
   return list?.getListType() ?? null
 }
 
+function $isAtNodeEdge(point, atStart = null) {
+  if (atStart === null) {
+    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
+  } else {
+    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+  }
+}
+
+function $isAtNodeStart(point) {
+  return point.offset === 0
+}
+
 function extendTextNodeConversion(conversionName, ...callbacks) {
   return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
     ...conversionOutput,
@@ -1017,1928 +941,2452 @@ function extendConversion(nodeKlass, conversionName, callback = (output => outpu
   }
 }
 
-async function loadFileIntoImage(file, image) {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-
-    image.addEventListener("load", () => {
-      resolve(image);
-    });
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
 
-    reader.onload = (event) => {
-      image.src = event.target.result || null;
-    };
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
+  }
+}
 
-    reader.readAsDataURL(file);
-  })
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
 }
 
-class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
-  static getType() {
-    return "action_text_attachment_upload"
-  }
+function applyCanonicalizers(styles, canonicalizers = []) {
+  return canonicalizers.reduce((css, canonicalizer) => {
+    return canonicalizer.applyCanonicalization(css)
+  }, styles)
+}
 
-  static clone(node) {
-    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
+class StyleCanonicalizer {
+  constructor(property, allowedValues= []) {
+    this._property = property;
+    this._allowedValues = allowedValues;
+    this._canonicalValues = this.#allowedValuesIdentityObject;
   }
 
-  static importJSON(serializedNode) {
-    return new ActionTextAttachmentUploadNode({ ...serializedNode })
-  }
+  applyCanonicalization(css) {
+    const styles = { ...getStyleObjectFromCSS(css) };
 
-  // Should never run since this is a transient node. Defined to remove console warning.
-  static importDOM() {
-    return null
-  }
+    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
+    if (!styles[this._property]) {
+      delete styles[this._property];
+    }
 
-  constructor(node, key) {
-    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError } = node;
-    super({ ...node, contentType: file.type }, key);
-    this.file = file;
-    this.uploadUrl = uploadUrl;
-    this.blobUrlTemplate = blobUrlTemplate;
-    this.progress = progress ?? null;
-    this.width = width;
-    this.height = height;
-    this.uploadError = uploadError;
+    return getCSSFromStyleObject(styles)
   }
 
-  createDOM() {
-    if (this.uploadError) return this.#createDOMForError()
+  getCanonicalAllowedValue(value) {
+    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  }
 
-    // This side-effect is trigged on DOM load to fire only once and avoid multiple
-    // uploads through cloning. The upload is guarded from restarting in case the
-    // node is reloaded from saved state such as from history.
-    this.#startUploadIfNeeded();
+  // Private
 
-    const figure = this.createAttachmentFigure();
+  get #allowedValuesIdentityObject() {
+    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  }
 
-    if (this.isPreviewableAttachment) {
-      const img = figure.appendChild(this.#createDOMForImage());
+  #resolveCannonicalValue(value) {
+    let index = this.#computedAllowedValues.indexOf(value);
+    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
+    return index === -1 ? null : this._allowedValues[index]
+  }
 
-      // load file locally to set dimensions and prevent vertical shifting
-      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
-    } else {
-      figure.appendChild(this.#createDOMForFile());
-    }
+  get #computedAllowedValues() {
+    return this._computedAllowedValues ||= this._allowedValues.map(
+      value => getComputedStyleForProperty(this._property, value)
+    )
+  }
+}
 
-    figure.appendChild(this.#createCaption());
-    figure.appendChild(this.#createProgressBar());
+function getComputedStyleForProperty(property, value) {
+  const style = `${property}: ${value};`;
 
-    return figure
-  }
+  // the element has to be attached to the DOM have computed styles
+  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
+  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
+  element.remove();
 
-  updateDOM(prevNode, dom) {
-    if (this.uploadError !== prevNode.uploadError) return true
+  return computedStyle
+}
 
-    if (prevNode.progress !== this.progress) {
-      const progress = dom.querySelector("progress");
-      progress.value = this.progress ?? 0;
-    }
+class LexxyExtension {
+  #editorElement
 
-    return false
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
   }
 
-  exportDOM() {
-    return { element: null }
+  get editorElement() {
+    return this.#editorElement
   }
 
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "action_text_attachment_upload",
-      version: 1,
-      uploadUrl: this.uploadUrl,
-      blobUrlTemplate: this.blobUrlTemplate,
-      progress: this.progress,
-      width: this.width,
-      height: this.height,
-      uploadError: this.uploadError
-    }
+  get editorConfig() {
+    return this.#editorElement.config
   }
 
-  get #uploadStarted() {
-    return this.progress !== null
+  // optional: defaults to true
+  get enabled() {
+    return true
   }
 
-  #createDOMForError() {
-    const figure = this.createAttachmentFigure();
-    figure.classList.add("attachment--error");
-    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.file?.name ?? "file"}` }));
-    return figure
+  get lexicalExtension() {
+    return null
   }
 
-  #createDOMForImage() {
-    return createElement("img")
-  }
+  initializeToolbar(_lexxyToolbar) {
 
-  #createDOMForFile() {
-    const extension = this.#getFileExtension();
-    const span = createElement("span", { className: "attachment__icon", textContent: extension });
-    return span
   }
+}
 
-  #getFileExtension() {
-    return this.file.name.split(".").pop().toLowerCase()
+const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
+const REMOVE_HIGHLIGHT_COMMAND = createCommand();
+const BLANK_STYLES = { "color": null, "background-color": null };
+
+const hasPastedStylesState = createState("hasPastedStyles", {
+  parse: (value) => value || false
+});
+
+class HighlightExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
   }
 
-  #createCaption() {
-    const figcaption = createElement("figcaption", { className: "attachment__caption" });
+  get lexicalExtension() {
+    const extension = defineExtension({
+      dependencies: [ RichTextExtension ],
+      name: "lexxy/highlight",
+      config: {
+        color: { buttons: [], permit: [] },
+        "background-color": { buttons: [], permit: [] }
+      },
+      html: {
+        import: {
+          mark: $markConversion
+        }
+      },
+      register(editor, config) {
+        // keep the ref to the canonicalizers for optimized css conversion
+        const canonicalizers = buildCanonicalizers(config);
 
-    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.file.name || "" });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
-    figcaption.appendChild(nameSpan);
-    figcaption.appendChild(sizeSpan);
+        return mergeRegister(
+          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL),
+          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
+          editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
+          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers))
+        )
+      }
+    });
 
-    return figcaption
+    return [ extension, this.editorConfig.get("highlight") ]
   }
+}
 
-  #createProgressBar() {
-    return createElement("progress", { value: this.progress ?? 0, max: 100 })
-  }
+function $applyHighlightStyle(textNode, element) {
+  const elementStyles = {
+    color: element.style?.color,
+    "background-color": element.style?.backgroundColor
+  };
 
-  #setDimensionsFromImage({ width, height }) {
-    if (this.#hasDimensions) return
+  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
+  const highlightStyle = getCSSFromStyleObject(elementStyles);
 
-    this.editor.update(() => {
-      const writable = this.getWritable();
-      writable.width = width;
-      writable.height = height;
-    }, { tag: SILENT_UPDATE_TAGS });
+  if (highlightStyle.length) {
+    return textNode.setStyle(textNode.getStyle() + highlightStyle)
   }
+}
 
-  get #hasDimensions() {
-    return Boolean(this.width && this.height)
+function $markConversion() {
+  return {
+    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+    priority: 1
   }
+}
 
-  async #startUploadIfNeeded() {
-    if (this.#uploadStarted) return
-
-    this.#setUploadStarted();
+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"] ])
+  ]
+}
 
-    const { DirectUpload } = await import('@rails/activestorage');
+function $toggleSelectionStyles(styles) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return
 
-    const upload = new DirectUpload(this.file, this.uploadUrl, this);
-    upload.delegate = this.#createUploadDelegate();
-    upload.create((error, blob) => {
-      if (error) {
-        this.#handleUploadError(error);
-      } else {
-        this.#showUploadedAttachment(blob);
-      }
-    });
+  const patch = {};
+  for (const property in styles) {
+    const oldValue = $getSelectionStyleValueForProperty(selection, property);
+    patch[property] = toggleOrReplace(oldValue, styles[property]);
   }
 
-  #createUploadDelegate() {
-    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
+  $patchStyleText(selection, patch);
+}
 
-    return {
-      directUploadWillCreateBlobWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
-      },
-      directUploadWillStoreFileWithXHR: (request) => {
-        if (shouldAuthenticateUploads) request.withCredentials = true;
+function toggleOrReplace(oldValue, newValue) {
+  return oldValue === newValue ? null : newValue
+}
 
-        const uploadProgressHandler = (event) => this.#handleUploadProgress(event);
-        request.upload.addEventListener("progress", uploadProgressHandler);
-      }
-    }
-  }
-
-  #setUploadStarted() {
-    this.#setProgress(1);
+function $syncHighlightWithStyle(textNode) {
+  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
+    textNode.toggleFormat("highlight");
   }
+}
 
-  #handleUploadProgress(event) {
-    this.#setProgress(Math.round(event.loaded / event.total * 100));
-  }
+function $canonicalizePastedStyles(textNode, canonicalizers = []) {
+  if ($hasPastedStyles(textNode)) {
+    $setPastedStyles(textNode, false);
 
-  #setProgress(progress) {
-    this.editor.update(() => {
-      this.getWritable().progress = progress;
-    }, { tag: SILENT_UPDATE_TAGS });
-  }
+    const canonicalizedCSS = applyCanonicalizers(textNode.getStyle(), canonicalizers);
+    textNode.setStyle(canonicalizedCSS);
 
-  #handleUploadError(error) {
-    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
-    this.editor.update(() => {
-      this.getWritable().uploadError = true;
-    }, { tag: SILENT_UPDATE_TAGS });
+    const selection = $getSelection();
+    if (textNode.isSelected(selection)) {
+      selection.setStyle(textNode.getStyle());
+      selection.setFormat(textNode.getFormat());
+    }
   }
+}
 
-  async #showUploadedAttachment(blob) {
-    this.editor.update(() => {
-      this.replace(this.#toActionTextAttachmentNodeWith(blob));
-    }, { tag: SILENT_UPDATE_TAGS });
-  }
+function $setPastedStyles(textNode, value = true) {
+  $setState(textNode, hasPastedStylesState, value);
+}
 
-  #toActionTextAttachmentNodeWith(blob) {
-    const conversion = new AttachmentNodeConversion(this, blob);
-    return conversion.toAttachmentNode()
-  }
+function $hasPastedStyles(textNode) {
+  return $getState(textNode, hasPastedStylesState)
 }
 
-class AttachmentNodeConversion {
-  constructor(uploadNode, blob) {
-    this.uploadNode = uploadNode;
-    this.blob = blob;
+const COMMANDS = [
+  "bold",
+  "italic",
+  "strikethrough",
+  "link",
+  "unlink",
+  "toggleHighlight",
+  "removeHighlight",
+  "rotateHeadingFormat",
+  "insertUnorderedList",
+  "insertOrderedList",
+  "insertQuoteBlock",
+  "insertCodeBlock",
+  "insertHorizontalDivider",
+  "uploadAttachments",
+
+  "insertTable",
+
+  "undo",
+  "redo"
+];
+
+class CommandDispatcher {
+  static configureFor(editorElement) {
+    new CommandDispatcher(editorElement);
   }
 
-  toAttachmentNode() {
-    return new ActionTextAttachmentNode({
-      ...this.uploadNode,
-      ...this.#propertiesFromBlob,
-      src: this.#src
-    })
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editor = editorElement.editor;
+    this.selection = editorElement.selection;
+    this.contents = editorElement.contents;
+    this.clipboard = editorElement.clipboard;
+
+    this.#registerCommands();
+    this.#registerKeyboardCommands();
+    this.#registerDragAndDropHandlers();
   }
 
-  get #propertiesFromBlob() {
-    const { blob } = this;
-    return {
-      sgid: blob.attachable_sgid,
-      altText: blob.filename,
-      contentType: blob.content_type,
-      fileName: blob.filename,
-      fileSize: blob.byte_size,
-      previewable: blob.previewable,
-    }
+  dispatchPaste(event) {
+    return this.clipboard.paste(event)
   }
 
-  get #src() {
-    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  dispatchBold() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
   }
 
-  get #blobSrc() {
-    return this.uploadNode.blobUrlTemplate
-      .replace(":signed_id", this.blob.signed_id)
-      .replace(":filename", encodeURIComponent(this.blob.filename))
+  dispatchItalic() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
   }
-}
 
-class HorizontalDividerNode extends DecoratorNode {
-  static getType() {
-    return "horizontal_divider"
+  dispatchStrikethrough() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
   }
 
-  static clone(node) {
-    return new HorizontalDividerNode(node.__key)
+  dispatchToggleHighlight(styles) {
+    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
   }
 
-  static importJSON(serializedNode) {
-    return new HorizontalDividerNode()
+  dispatchRemoveHighlight() {
+    this.editor.dispatchCommand(REMOVE_HIGHLIGHT_COMMAND);
   }
 
-  static importDOM() {
-    return {
-      "hr": (hr) => {
-        return {
-          conversion: () => ({
-            node: new HorizontalDividerNode()
-          }),
-          priority: 1
-        }
+  dispatchLink(url) {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      if (selection.isCollapsed()) {
+        const autoLinkNode = $createAutoLinkNode(url);
+        const textNode = $createTextNode(url);
+        autoLinkNode.append(textNode);
+        selection.insertNodes([ autoLinkNode ]);
+      } else {
+        $toggleLink(url);
       }
-    }
+    });
   }
 
-  constructor(key) {
-    super(key);
+  dispatchUnlink() {
+    this.#toggleLink(null);
   }
 
-  createDOM() {
-    const figure = createElement("figure", { className: "horizontal-divider" });
-    const hr = createElement("hr");
+  dispatchInsertUnorderedList() {
+    const selection = $getSelection();
+    if (!selection) return
 
-    figure.appendChild(hr);
+    const anchorNode = selection.anchor.getNode();
 
-    return figure
+    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
+      this.contents.unwrapSelectedListItems();
+    } else {
+      this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    }
   }
 
-  updateDOM() {
-    return true
+  dispatchInsertOrderedList() {
+    const selection = $getSelection();
+    if (!selection) return
+
+    const anchorNode = selection.anchor.getNode();
+
+    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
+      this.contents.unwrapSelectedListItems();
+    } else {
+      this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
   }
 
-  getTextContent() {
-    return "┄\n\n"
+  dispatchInsertQuoteBlock() {
+    this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
   }
 
-  isInline() {
-    return false
+  dispatchInsertCodeBlock() {
+    this.editor.update(() => {
+      if (this.selection.hasSelectedWordsInSingleLine) {
+        this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+      } else {
+        this.contents.toggleNodeWrappingAllSelectedLines((node) => $isCodeNode(node), () => new CodeNode("plain"));
+      }
+    });
   }
 
-  exportDOM() {
-    const hr = createElement("hr");
-    return { element: hr }
+  dispatchInsertHorizontalDivider() {
+    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
+    this.editor.focus();
   }
 
-  exportJSON() {
-    return {
-      type: "horizontal_divider",
-      version: 1
+  dispatchRotateHeadingFormat() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    if ($isRootOrShadowRoot(selection.anchor.getNode())) {
+      selection.insertNodes([ $createHeadingNode("h2") ]);
+      return
+    }
+
+    const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
+    let nextTag = "h2";
+    if ($isHeadingNode(topLevelElement)) {
+      const currentTag = topLevelElement.getTag();
+      if (currentTag === "h2") {
+        nextTag = "h3";
+      } else if (currentTag === "h3") {
+        nextTag = "h4";
+      } else if (currentTag === "h4") {
+        nextTag = null;
+      } else {
+        nextTag = "h2";
+      }
+    }
+
+    if (nextTag) {
+      this.contents.insertNodeWrappingEachSelectedLine(() => $createHeadingNode(nextTag));
+    } else {
+      this.contents.removeFormattingFromSelectedLines();
     }
   }
 
-  decorate() {
-    return null
+  dispatchUploadAttachments() {
+    const input = createElement("input", {
+      type: "file",
+      multiple: true,
+      style: "display: none;",
+      onchange: ({ target: { files } }) => {
+        this.contents.uploadFiles(files, { selectLast: true });
+      }
+    });
+
+    // Append and remove to make testable
+    this.editorElement.appendChild(input);
+    input.click();
+    setTimeout(() => input.remove(), 1000);
   }
-}
 
-function isSelectionHighlighted(selection) {
-  if (!$isRangeSelection(selection)) return false
+  dispatchInsertTable() {
+    this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
+  }
 
-  if (selection.isCollapsed()) {
-    return hasHighlightStyles(selection.style)
-  } else {
-    return selection.hasFormat("highlight")
+  dispatchUndo() {
+    this.editor.dispatchCommand(UNDO_COMMAND, undefined);
   }
-}
 
-function hasHighlightStyles(cssOrStyles) {
-  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
-  return !!(styles.color || styles["background-color"])
-}
-
-function applyCanonicalizers(styles, canonicalizers = []) {
-  return canonicalizers.reduce((css, canonicalizer) => {
-    return canonicalizer.applyCanonicalization(css)
-  }, styles)
-}
-
-class StyleCanonicalizer {
-  constructor(property, allowedValues= []) {
-    this._property = property;
-    this._allowedValues = allowedValues;
-    this._canonicalValues = this.#allowedValuesIdentityObject;
+  dispatchRedo() {
+    this.editor.dispatchCommand(REDO_COMMAND, undefined);
   }
 
-  applyCanonicalization(css) {
-    const styles = { ...getStyleObjectFromCSS(css) };
-
-    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
-    if (!styles[this._property]) {
-      delete styles[this._property];
+  #registerCommands() {
+    for (const command of COMMANDS) {
+      const methodName = `dispatch${capitalize(command)}`;
+      this.#registerCommandHandler(command, 0, this[methodName].bind(this));
     }
 
-    return getCSSFromStyleObject(styles)
+    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
   }
 
-  getCanonicalAllowedValue(value) {
-    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  #registerCommandHandler(command, priority, handler) {
+    this.editor.registerCommand(command, handler, priority);
   }
 
-  // Private
-
-  get #allowedValuesIdentityObject() {
-    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  #registerKeyboardCommands() {
+    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
   }
 
-  #resolveCannonicalValue(value) {
-    let index = this.#computedAllowedValues.indexOf(value);
-    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
-    return index === -1 ? null : this._allowedValues[index]
+  #registerDragAndDropHandlers() {
+    if (this.editorElement.supportsAttachments) {
+      this.dragCounter = 0;
+      this.editor.getRootElement().addEventListener("dragover", this.#handleDragOver.bind(this));
+      this.editor.getRootElement().addEventListener("drop", this.#handleDrop.bind(this));
+      this.editor.getRootElement().addEventListener("dragenter", this.#handleDragEnter.bind(this));
+      this.editor.getRootElement().addEventListener("dragleave", this.#handleDragLeave.bind(this));
+    }
   }
 
-  get #computedAllowedValues() {
-    return this._computedAllowedValues ||= this._allowedValues.map(
-      value => getComputedStyleForProperty(this._property, value)
-    )
+  #handleDragEnter(event) {
+    this.dragCounter++;
+    if (this.dragCounter === 1) {
+      this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
+    }
   }
-}
 
-function getComputedStyleForProperty(property, value) {
-  const style = `${property}: ${value};`;
+  #handleDragLeave(event) {
+    this.dragCounter--;
+    if (this.dragCounter === 0) {
+      this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+    }
+  }
 
-  // the element has to be attached to the DOM have computed styles
-  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
-  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
-  element.remove();
+  #handleDragOver(event) {
+    event.preventDefault();
+  }
 
-  return computedStyle
-}
+  #handleDrop(event) {
+    event.preventDefault();
 
-class LexxyExtension {
-  #editorElement
+    this.dragCounter = 0;
+    this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-  }
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) return
 
-  get editorElement() {
-    return this.#editorElement
-  }
+    const files = Array.from(dataTransfer.files);
+    if (!files.length) return
 
-  get editorConfig() {
-    return this.#editorElement.config
-  }
+    this.contents.uploadFiles(files, { selectLast: true });
 
-  // optional: defaults to true
-  get enabled() {
-    return true
+    this.editor.focus();
   }
 
-  get lexicalExtension() {
-    return null
+  #handleTabKey(event) {
+    if (this.selection.isInsideList) {
+      return this.#handleTabForList(event)
+    } else if (this.selection.isInsideCodeBlock) {
+      return this.#handleTabForCode()
+    }
+    return false
   }
 
-  initializeToolbar(_lexxyToolbar) {
+  #handleTabForList(event) {
+    if (event.shiftKey && !this.selection.isIndentedList) return false
 
+    event.preventDefault();
+    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
+    return this.editor.dispatchCommand(command)
   }
-}
-
-const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
-const REMOVE_HIGHLIGHT_COMMAND = createCommand();
-const BLANK_STYLES = { "color": null, "background-color": null };
-
-const hasPastedStylesState = createState("hasPastedStyles", {
-  parse: (value) => value || false
-});
 
-class HighlightExtension extends LexxyExtension {
-  get enabled() {
-    return this.editorElement.supportsRichText
+  #handleTabForCode() {
+    const selection = $getSelection();
+    return $isRangeSelection(selection) && selection.isCollapsed()
   }
 
-  get lexicalExtension() {
-    const extension = defineExtension({
-      dependencies: [ RichTextExtension ],
-      name: "lexxy/highlight",
-      config: {
-        color: { buttons: [], permit: [] },
-        "background-color": { buttons: [], permit: [] }
-      },
-      html: {
-        import: {
-          mark: $markConversion
-        }
-      },
-      register(editor, config) {
-        // keep the ref to the canonicalizers for optimized css conversion
-        const canonicalizers = buildCanonicalizers(config);
-
-        return mergeRegister(
-          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL),
-          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
-          editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
-          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers))
-        )
+  // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
+  #toggleLink(url) {
+    this.editor.update(() => {
+      if (url === null) {
+        $toggleLink(null);
+      } else {
+        $toggleLink(url);
       }
     });
-
-    return [ extension, this.editorConfig.get("highlight") ]
   }
 }
 
-function $applyHighlightStyle(textNode, element) {
-  const elementStyles = {
-    color: element.style?.color,
-    "background-color": element.style?.backgroundColor
-  };
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
 
-  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
-  const highlightStyle = getCSSFromStyleObject(elementStyles);
+function debounceAsync(fn, wait) {
+  let timeout;
 
-  if (highlightStyle.length) {
-    return textNode.setStyle(textNode.getStyle() + highlightStyle)
-  }
-}
+  return (...args) => {
+    clearTimeout(timeout);
 
-function $markConversion() {
-  return {
-    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
-    priority: 1
+    return new Promise((resolve, reject) => {
+      timeout = setTimeout(async () => {
+        try {
+          const result = await fn(...args);
+          resolve(result);
+        } catch (err) {
+          reject(err);
+        }
+      }, wait);
+    })
   }
 }
 
-function buildCanonicalizers(config) {
-  return [
-    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
-    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
-  ]
+function nextFrame() {
+  return new Promise(requestAnimationFrame)
 }
 
-function $toggleSelectionStyles(styles) {
-  const selection = $getSelection();
-  if (!$isRangeSelection(selection)) return
-
-  const patch = {};
-  for (const property in styles) {
-    const oldValue = $getSelectionStyleValueForProperty(selection, property);
-    patch[property] = toggleOrReplace(oldValue, styles[property]);
-  }
-
-  $patchStyleText(selection, patch);
+function bytesToHumanSize(bytes) {
+  if (bytes === 0) return "0 B"
+  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  return `${ value.toFixed(2) } ${ sizes[i] }`
 }
 
-function toggleOrReplace(oldValue, newValue) {
-  return oldValue === newValue ? null : newValue
+function extractFileName(string) {
+  return string.split("/").pop()
 }
 
-function $syncHighlightWithStyle(textNode) {
-  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
-    textNode.toggleFormat("highlight");
+class ActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "action_text_attachment"
   }
-}
-
-function $canonicalizePastedStyles(textNode, canonicalizers = []) {
-  if ($hasPastedStyles(textNode)) {
-    $setPastedStyles(textNode, false);
-
-    const canonicalizedCSS = applyCanonicalizers(textNode.getStyle(), canonicalizers);
-    textNode.setStyle(canonicalizedCSS);
 
-    const selection = $getSelection();
-    if (textNode.isSelected(selection)) {
-      selection.setStyle(textNode.getStyle());
-      selection.setFormat(textNode.getFormat());
-    }
+  static clone(node) {
+    return new ActionTextAttachmentNode({ ...node }, node.__key)
   }
-}
-
-function $setPastedStyles(textNode, value = true) {
-  $setState(textNode, hasPastedStylesState, value);
-}
 
-function $hasPastedStyles(textNode) {
-  return $getState(textNode, hasPastedStylesState)
-}
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentNode({ ...serializedNode })
+  }
 
-const COMMANDS = [
-  "bold",
-  "italic",
-  "strikethrough",
-  "link",
-  "unlink",
-  "toggleHighlight",
-  "removeHighlight",
-  "rotateHeadingFormat",
-  "insertUnorderedList",
-  "insertOrderedList",
-  "insertQuoteBlock",
-  "insertCodeBlock",
-  "insertHorizontalDivider",
-  "uploadAttachments",
+  static importDOM() {
+    return {
+      [this.TAG_NAME]: () => {
+        return {
+          conversion: (attachment) => ({
+            node: new ActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              src: attachment.getAttribute("url"),
+              previewable: attachment.getAttribute("previewable"),
+              altText: attachment.getAttribute("alt"),
+              caption: attachment.getAttribute("caption"),
+              contentType: attachment.getAttribute("content-type"),
+              fileName: attachment.getAttribute("filename"),
+              fileSize: attachment.getAttribute("filesize"),
+              width: attachment.getAttribute("width"),
+              height: attachment.getAttribute("height")
+            })
+          }), priority: 1
+        }
+      },
+      "img": () => {
+        return {
+          conversion: (img) => {
+            const fileName = extractFileName(img.getAttribute("src") ?? "");
+            return {
+              node: new ActionTextAttachmentNode({
+                src: img.getAttribute("src"),
+                fileName: fileName,
+                caption: img.getAttribute("alt") || "",
+                contentType: "image/*",
+                width: img.getAttribute("width"),
+                height: img.getAttribute("height")
+              })
+            }
+          }, priority: 1
+        }
+      },
+      "video": () => {
+        return {
+          conversion: (video) => {
+            const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
+            const fileName = videoSource?.split("/")?.pop();
+            const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
+
+            return {
+              node: new ActionTextAttachmentNode({
+                src: videoSource,
+                fileName: fileName,
+                contentType: contentType
+              })
+            }
+          }, priority: 1
+        }
+      }
+    }
+  }
+
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, src, previewable, altText, caption, contentType, fileName, fileSize, width, height }, key) {
+    super(key);
+
+    this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.src = src;
+    this.previewable = previewable;
+    this.altText = altText || "";
+    this.caption = caption || "";
+    this.contentType = contentType || "";
+    this.fileName = fileName || "";
+    this.fileSize = fileSize;
+    this.width = width;
+    this.height = height;
+
+    this.editor = $getEditor();
+  }
+
+  createDOM() {
+    const figure = this.createAttachmentFigure();
+
+    if (this.isPreviewableAttachment) {
+      figure.appendChild(this.#createDOMForImage());
+      figure.appendChild(this.#createEditableCaption());
+    } else {
+      figure.appendChild(this.#createDOMForFile());
+      figure.appendChild(this.#createDOMForNotImage());
+    }
+
+    return figure
+  }
+
+  updateDOM(_prevNode, dom) {
+    const caption = dom.querySelector("figcaption textarea");
+    if (caption && this.caption) {
+      caption.value = this.caption;
+    }
+
+    return false
+  }
+
+  getTextContent() {
+    return `[${this.caption || this.fileName}]\n\n`
+  }
+
+  isInline() {
+    return this.isAttached() && !this.getParent().is($getNearestRootOrShadowRoot(this))
+  }
+
+  exportDOM() {
+    const attachment = createElement(this.tagName, {
+      sgid: this.sgid,
+      previewable: this.previewable || null,
+      url: this.src,
+      alt: this.altText,
+      caption: this.caption,
+      "content-type": this.contentType,
+      filename: this.fileName,
+      filesize: this.fileSize,
+      width: this.width,
+      height: this.height,
+      presentation: "gallery"
+    });
+
+    return { element: attachment }
+  }
+
+  exportJSON() {
+    return {
+      type: "action_text_attachment",
+      version: 1,
+      tagName: this.tagName,
+      sgid: this.sgid,
+      src: this.src,
+      previewable: this.previewable,
+      altText: this.altText,
+      caption: this.caption,
+      contentType: this.contentType,
+      fileName: this.fileName,
+      fileSize: this.fileSize,
+      width: this.width,
+      height: this.height
+    }
+  }
+
+  decorate() {
+    return null
+  }
+
+  createAttachmentFigure() {
+    const figure = createAttachmentFigure(this.contentType, this.isPreviewableAttachment, this.fileName);
+
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
+
+    return figure
+  }
+
+  get isPreviewableAttachment() {
+    return this.isPreviewableImage || this.previewable
+  }
+
+  get isPreviewableImage() {
+    return isPreviewableImage(this.contentType)
+  }
+
+  #createDOMForImage(options = {}) {
+    const img = createElement("img", { src: this.src, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
+    const container = createElement("div", { className: "attachment__container" });
+    container.appendChild(img);
+    return container
+  }
+
+  get #imageDimensions() {
+    if (this.width && this.height) {
+      return { width: this.width, height: this.height }
+    } else {
+      return {}
+    }
+  }
+
+  #createDOMForFile() {
+    const extension = this.fileName ? this.fileName.split(".").pop().toLowerCase() : "unknown";
+    return createElement("span", { className: "attachment__icon", textContent: `${extension}` })
+  }
+
+  #createDOMForNotImage() {
+    const figcaption = createElement("figcaption", { className: "attachment__caption" });
+
+    const nameTag = createElement("strong", { className: "attachment__name", textContent: this.caption || this.fileName });
+
+    figcaption.appendChild(nameTag);
+
+    if (this.fileSize) {
+      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
+      figcaption.appendChild(sizeSpan);
+    }
+
+    return figcaption
+  }
+
+  #createEditableCaption() {
+    const caption = createElement("figcaption", { className: "attachment__caption" });
+    const input = createElement("textarea", {
+      value: this.caption,
+      placeholder: this.fileName,
+      rows: "1"
+    });
+
+    input.addEventListener("focusin", () => input.placeholder = "Add caption...");
+    input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
+    input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
+
+    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.stopPropagation();
+      event.target.blur();
+
+      this.editor.update(() => {
+        // Place the cursor after the current image
+        this.selectNext(0, 0);
+      }, {
+        tag: HISTORY_MERGE_TAG
+      });
+    }
+
+  }
+}
+
+function $createActionTextAttachmentNode(...args) {
+  return new ActionTextAttachmentNode(...args)
+}
+
+function $isActionTextAttachmentNode(node) {
+  return node instanceof ActionTextAttachmentNode
+}
+
+class Selection {
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editorContentElement = editorElement.editorContentElement;
+    this.editor = this.editorElement.editor;
+    this.previouslySelectedKeys = new Set();
+
+    this.#listenForNodeSelections();
+    this.#processSelectionChangeCommands();
+    this.#containEditorFocus();
+  }
+
+  set current(selection) {
+    this.editor.update(() => {
+      this.#syncSelectedClasses();
+    });
+  }
+
+  get hasNodeSelection() {
+    return this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      return selection !== null && $isNodeSelection(selection)
+    })
+  }
+
+  get cursorPosition() {
+    let position = { x: 0, y: 0 };
+
+    this.editor.getEditorState().read(() => {
+      const range = this.#getValidSelectionRange();
+      if (!range) return
+
+      const rect = this.#getReliableRectFromRange(range);
+      if (!rect) return
+
+      position = this.#calculateCursorPosition(rect, range);
+    });
+
+    return position
+  }
+
+  placeCursorAtTheEnd() {
+    this.editor.update(() => {
+      const root = $getRoot();
+      const lastDescendant = root.getLastDescendant();
+
+      if (lastDescendant && $isTextNode(lastDescendant)) {
+        lastDescendant.selectEnd();
+      } else {
+        root.selectEnd();
+      }
+    });
+  }
+
+  selectedNodeWithOffset() {
+    const selection = $getSelection();
+    if (!selection) return { node: null, offset: 0 }
+
+    if ($isRangeSelection(selection)) {
+      return {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      }
+    } else if ($isNodeSelection(selection)) {
+      const [ node ] = selection.getNodes();
+      return {
+        node,
+        offset: 0
+      }
+    }
+
+    return { node: null, offset: 0 }
+  }
+
+  preservingSelection(fn) {
+    let selectionState = null;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (selection && $isRangeSelection(selection)) {
+        selectionState = {
+          anchor: { key: selection.anchor.key, offset: selection.anchor.offset },
+          focus: { key: selection.focus.key, offset: selection.focus.offset }
+        };
+      }
+    });
+
+    fn();
+
+    if (selectionState) {
+      this.editor.update(() => {
+        const selection = $getSelection();
+        if (selection && $isRangeSelection(selection)) {
+          selection.anchor.set(selectionState.anchor.key, selectionState.anchor.offset, "text");
+          selection.focus.set(selectionState.focus.key, selectionState.focus.offset, "text");
+        }
+      });
+    }
+  }
+
+  getFormat() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return {}
+
+    const anchorNode = selection.anchor.getNode();
+    if (!anchorNode.getParent()) return {}
+
+    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+    const listType = getListType(anchorNode);
 
-  "insertTable",
+    return {
+      isBold: selection.hasFormat("bold"),
+      isItalic: selection.hasFormat("italic"),
+      isStrikethrough: selection.hasFormat("strikethrough"),
+      isHighlight: isSelectionHighlighted(selection),
+      isInLink: $getNearestNodeOfType(anchorNode, LinkNode) !== null,
+      isInQuote: $isQuoteNode(topLevelElement),
+      isInHeading: $isHeadingNode(topLevelElement),
+      isInCode: selection.hasFormat("code") || $getNearestNodeOfType(anchorNode, CodeNode) !== null,
+      isInList: listType !== null,
+      listType,
+      isInTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null
+    }
+  }
 
-  "undo",
-  "redo"
-];
+  nearestNodeOfType(nodeType) {
+    const anchorNode = $getSelection()?.anchor?.getNode();
+    return $getNearestNodeOfType(anchorNode, nodeType)
+  }
 
-class CommandDispatcher {
-  static configureFor(editorElement) {
-    new CommandDispatcher(editorElement);
+  get hasSelectedWordsInSingleLine() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    if (selection.isCollapsed()) return false
+
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+
+    if (anchorNode.getTopLevelElement() !== focusNode.getTopLevelElement()) {
+      return false
+    }
+
+    const anchorElement = anchorNode.getTopLevelElement();
+    if (!anchorElement) return false
+
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      if ($isLineBreakNode(node)) {
+        return false
+      }
+    }
+
+    return true
   }
 
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editor = editorElement.editor;
-    this.selection = editorElement.selection;
-    this.contents = editorElement.contents;
-    this.clipboard = editorElement.clipboard;
+  get isInsideList() {
+    return this.nearestNodeOfType(ListItemNode)
+  }
 
-    this.#registerCommands();
-    this.#registerKeyboardCommands();
-    this.#registerDragAndDropHandlers();
+  get isIndentedList() {
+    const closestListNode = this.nearestNodeOfType(ListNode);
+    return closestListNode && ($getListDepth(closestListNode) > 1)
   }
 
-  dispatchPaste(event) {
-    return this.clipboard.paste(event)
+  get isInsideCodeBlock() {
+    return this.nearestNodeOfType(CodeNode) !== null
   }
 
-  dispatchBold() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  get isTableCellSelected() {
+    return this.nearestNodeOfType(TableCellNode) !== null
   }
 
-  dispatchItalic() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+  get isOnPreviewableImage() {
+    const selection = $getSelection();
+    const firstNode = selection?.getNodes().at(0);
+    return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage
   }
 
-  dispatchStrikethrough() {
-    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+  get nodeAfterCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if ($isTextNode(anchorNode)) {
+      return this.#getNodeAfterTextNode(anchorNode, offset)
+    }
+
+    if ($isElementNode(anchorNode)) {
+      return this.#getNodeAfterElementNode(anchorNode, offset)
+    }
+
+    return this.#findNextSiblingUp(anchorNode)
+  }
+
+  get topLevelNodeAfterCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if ($isTextNode(anchorNode)) {
+      return this.#getNextNodeFromTextEnd(anchorNode)
+    }
+
+    if ($isElementNode(anchorNode)) {
+      return this.#getNodeAfterElementNode(anchorNode, offset)
+    }
+
+    return this.#findNextSiblingUp(anchorNode)
+  }
+
+  get nodeBeforeCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if ($isTextNode(anchorNode)) {
+      return this.#getNodeBeforeTextNode(anchorNode, offset)
+    }
+
+    if ($isElementNode(anchorNode)) {
+      return this.#getNodeBeforeElementNode(anchorNode, offset)
+    }
+
+    return this.#findPreviousSiblingUp(anchorNode)
+  }
+
+  get topLevelNodeBeforeCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if ($isTextNode(anchorNode)) {
+      return this.#getPreviousNodeFromTextStart(anchorNode)
+    }
+
+    if ($isElementNode(anchorNode)) {
+      return this.#getNodeBeforeElementNode(anchorNode, offset)
+    }
+
+    return this.#findPreviousSiblingUp(anchorNode)
+  }
+
+  get #currentlySelectedKeys() {
+    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
+
+    this.currentlySelectedKeys = new Set();
+
+    const selection = $getSelection();
+    if (selection && $isNodeSelection(selection)) {
+      for (const node of selection.getNodes()) {
+        this.currentlySelectedKeys.add(node.getKey());
+      }
+    }
+
+    return this.currentlySelectedKeys
+  }
+
+  #processSelectionChangeCommands() {
+    this.editor.registerCommand(KEY_ARROW_LEFT_COMMAND, this.#selectPreviousNode.bind(this), COMMAND_PRIORITY_LOW);
+    this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#selectNextNode.bind(this), COMMAND_PRIORITY_LOW);
+    this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
+    this.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#selectNextTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
+
+    this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW);
+
+    this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      this.current = $getSelection();
+    }, COMMAND_PRIORITY_LOW);
+  }
+
+  #listenForNodeSelections() {
+    this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
+      if (!isDOMNode(target)) return false
+
+      const targetNode = $getNearestNodeFromDOMNode(target);
+      return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
+    }, COMMAND_PRIORITY_LOW);
+
+    this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
+      this.#selectOrAppendNextLine();
+    });
+  }
+
+  #containEditorFocus() {
+    // Workaround for a bizarre Chrome bug where the cursor abandons the editor to focus on not-focusable elements
+    // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
+    this.editorContentElement.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowUp") {
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+
+        if (lexicalCursor) {
+          let currentElement = lexicalCursor.previousElementSibling;
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+            currentElement = currentElement.previousElementSibling;
+          }
+
+          if (!currentElement) {
+            event.preventDefault();
+          }
+        }
+      }
+
+      if (event.key === "ArrowDown") {
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+
+        if (lexicalCursor) {
+          let currentElement = lexicalCursor.nextElementSibling;
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+            currentElement = currentElement.nextElementSibling;
+          }
+
+          if (!currentElement) {
+            event.preventDefault();
+          }
+        }
+      }
+    }, true);
+  }
+
+  #syncSelectedClasses() {
+    this.#clearPreviouslyHighlightedItems();
+    this.#highlightNewItems();
+
+    this.previouslySelectedKeys = this.#currentlySelectedKeys;
+    this.currentlySelectedKeys = null;
+  }
+
+  #clearPreviouslyHighlightedItems() {
+    for (const key of this.previouslySelectedKeys) {
+      if (!this.#currentlySelectedKeys.has(key)) {
+        const dom = this.editor.getElementByKey(key);
+        if (dom) dom.classList.remove("node--selected");
+      }
+    }
+  }
+
+  #highlightNewItems() {
+    for (const key of this.#currentlySelectedKeys) {
+      if (!this.previouslySelectedKeys.has(key)) {
+        const nodeElement = this.editor.getElementByKey(key);
+        if (nodeElement) nodeElement.classList.add("node--selected");
+      }
+    }
+  }
+
+  async #selectPreviousNode() {
+    if (this.hasNodeSelection) {
+      return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
+    } else {
+      return this.#selectInLexical(this.nodeBeforeCursor)
+    }
+  }
+
+  async #selectNextNode() {
+    if (this.hasNodeSelection) {
+      return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
+    } else {
+      return this.#selectInLexical(this.nodeAfterCursor)
+    }
+  }
+
+  async #selectPreviousTopLevelNode() {
+    if (this.hasNodeSelection) {
+      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
+    } else {
+      return this.#selectInLexical(this.topLevelNodeBeforeCursor)
+    }
   }
 
-  dispatchToggleHighlight(styles) {
-    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
+  async #selectNextTopLevelNode() {
+    if (this.hasNodeSelection) {
+      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
+    } else {
+      return this.#selectInLexical(this.topLevelNodeAfterCursor)
+    }
   }
 
-  dispatchRemoveHighlight() {
-    this.editor.dispatchCommand(REMOVE_HIGHLIGHT_COMMAND);
+  async #withCurrentNode(fn) {
+    await nextFrame();
+    if (this.hasNodeSelection) {
+      this.editor.update(() => {
+        fn($getSelection().getNodes()[0]);
+        this.editor.focus();
+      });
+    }
   }
 
-  dispatchLink(url) {
+  async #selectOrAppendNextLine() {
     this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
+      const topLevelElement = this.#getTopLevelElementFromSelection();
+      if (!topLevelElement) return
 
-      if (selection.isCollapsed()) {
-        const autoLinkNode = $createAutoLinkNode(url);
-        const textNode = $createTextNode(url);
-        autoLinkNode.append(textNode);
-        selection.insertNodes([ autoLinkNode ]);
-      } else {
-        $toggleLink(url);
-      }
+      this.#moveToOrCreateNextLine(topLevelElement);
     });
   }
 
-  dispatchUnlink() {
-    this.#toggleLink(null);
-  }
-
-  dispatchInsertUnorderedList() {
+  #getTopLevelElementFromSelection() {
     const selection = $getSelection();
-    if (!selection) return
-
-    const anchorNode = selection.anchor.getNode();
+    if (!selection) return null
 
-    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
-      this.contents.unwrapSelectedListItems();
-    } else {
-      this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    if ($isNodeSelection(selection)) {
+      return this.#getTopLevelFromNodeSelection(selection)
     }
-  }
 
-  dispatchInsertOrderedList() {
-    const selection = $getSelection();
-    if (!selection) return
-
-    const anchorNode = selection.anchor.getNode();
-
-    if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
-      this.contents.unwrapSelectedListItems();
-    } else {
-      this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    if ($isRangeSelection(selection)) {
+      return this.#getTopLevelFromRangeSelection(selection)
     }
-  }
 
-  dispatchInsertQuoteBlock() {
-    this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
+    return null
   }
 
-  dispatchInsertCodeBlock() {
-    this.editor.update(() => {
-      if (this.selection.hasSelectedWordsInSingleLine) {
-        this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-      } else {
-        this.contents.toggleNodeWrappingAllSelectedLines((node) => $isCodeNode(node), () => new CodeNode("plain"));
-      }
-    });
+  #getTopLevelFromNodeSelection(selection) {
+    const nodes = selection.getNodes();
+    return nodes.length > 0 ? nodes[0].getTopLevelElement() : null
   }
 
-  dispatchInsertHorizontalDivider() {
-    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    this.editor.focus();
+  #getTopLevelFromRangeSelection(selection) {
+    const anchorNode = selection.anchor.getNode();
+    return anchorNode.getTopLevelElement()
   }
 
-  dispatchRotateHeadingFormat() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
+  #moveToOrCreateNextLine(topLevelElement) {
+    const nextSibling = topLevelElement.getNextSibling();
 
-    if ($isRootOrShadowRoot(selection.anchor.getNode())) {
-      selection.insertNodes([ $createHeadingNode("h2") ]);
-      return
+    if (nextSibling) {
+      nextSibling.selectStart();
+    } else {
+      this.#createAndSelectNewParagraph();
     }
+  }
 
-    const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
-    let nextTag = "h2";
-    if ($isHeadingNode(topLevelElement)) {
-      const currentTag = topLevelElement.getTag();
-      if (currentTag === "h2") {
-        nextTag = "h3";
-      } else if (currentTag === "h3") {
-        nextTag = "h4";
-      } else if (currentTag === "h4") {
-        nextTag = null;
-      } else {
-        nextTag = "h2";
-      }
-    }
+  #createAndSelectNewParagraph() {
+    const root = $getRoot();
+    const newParagraph = $createParagraphNode();
+    root.append(newParagraph);
+    newParagraph.selectStart();
+  }
 
-    if (nextTag) {
-      this.contents.insertNodeWrappingEachSelectedLine(() => $createHeadingNode(nextTag));
+  #selectInLexical(node) {
+    if ($isDecoratorNode(node)) {
+      const selection = $createNodeSelectionWith(node);
+      $setSelection(selection);
+      return selection
     } else {
-      this.contents.removeFormattingFromSelectedLines();
+      return false
     }
   }
 
-  dispatchUploadAttachments() {
-    const input = createElement("input", {
-      type: "file",
-      multiple: true,
-      style: "display: none;",
-      onchange: ({ target }) => {
-        const files = Array.from(target.files);
-        if (!files.length) return
+  #selectDecoratorNodeBeforeDeletion(backwards) {
+    const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
+    if (!$isDecoratorNode(node)) return false
 
-        for (const file of files) {
-          this.contents.uploadFile(file);
-        }
-      }
-    });
+    this.#removeEmptyElementAnchorNode();
 
-    this.editorElement.appendChild(input); // Append and remove just for the sake of making it testable
-    input.click();
-    setTimeout(() => input.remove(), 1000);
+    const selection = this.#selectInLexical(node);
+    return Boolean(selection)
   }
 
-  dispatchInsertTable() {
-    this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
+  #removeEmptyElementAnchorNode(anchor = $getSelection()?.anchor) {
+    const anchorNode = anchor?.getNode();
+    if ($isElementNode(anchorNode) && anchorNode?.isEmpty()) anchorNode.remove();
   }
 
-  dispatchUndo() {
-    this.editor.dispatchCommand(UNDO_COMMAND, undefined);
-  }
+  #getValidSelectionRange() {
+    const lexicalSelection = $getSelection();
+    if (!lexicalSelection || !lexicalSelection.isCollapsed()) return null
 
-  dispatchRedo() {
-    this.editor.dispatchCommand(REDO_COMMAND, undefined);
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection || nativeSelection.rangeCount === 0) return null
+
+    return nativeSelection.getRangeAt(0)
   }
 
-  #registerCommands() {
-    for (const command of COMMANDS) {
-      const methodName = `dispatch${capitalize(command)}`;
-      this.#registerCommandHandler(command, 0, this[methodName].bind(this));
+  #getReliableRectFromRange(range) {
+    let rect = range.getBoundingClientRect();
+
+    if (this.#isRectUnreliable(rect)) {
+      const marker = this.#createAndInsertMarker(range);
+      rect = marker.getBoundingClientRect();
+      this.#restoreSelectionAfterMarker(marker);
+      marker.remove();
     }
 
-    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
+    return rect
   }
 
-  #registerCommandHandler(command, priority, handler) {
-    this.editor.registerCommand(command, handler, priority);
+  #isRectUnreliable(rect) {
+    return rect.width === 0 && rect.height === 0 || rect.top === 0 && rect.left === 0
   }
 
-  #registerKeyboardCommands() {
-    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
+  #createAndInsertMarker(range) {
+    const marker = this.#createMarker();
+    range.insertNode(marker);
+    return marker
   }
 
-  #registerDragAndDropHandlers() {
-    if (this.editorElement.supportsAttachments) {
-      this.dragCounter = 0;
-      this.editor.getRootElement().addEventListener("dragover", this.#handleDragOver.bind(this));
-      this.editor.getRootElement().addEventListener("drop", this.#handleDrop.bind(this));
-      this.editor.getRootElement().addEventListener("dragenter", this.#handleDragEnter.bind(this));
-      this.editor.getRootElement().addEventListener("dragleave", this.#handleDragLeave.bind(this));
-    }
+  #createMarker() {
+    const marker = document.createElement("span");
+    marker.textContent = "\u200b";
+    marker.style.display = "inline-block";
+    marker.style.width = "1px";
+    marker.style.height = "1em";
+    marker.style.lineHeight = "normal";
+    marker.setAttribute("nonce", getNonce());
+    return marker
   }
 
-  #handleDragEnter(event) {
-    this.dragCounter++;
-    if (this.dragCounter === 1) {
-      this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
-    }
+  #restoreSelectionAfterMarker(marker) {
+    const nativeSelection = window.getSelection();
+    nativeSelection.removeAllRanges();
+    const newRange = document.createRange();
+    newRange.setStartAfter(marker);
+    newRange.collapse(true);
+    nativeSelection.addRange(newRange);
   }
 
-  #handleDragLeave(event) {
-    this.dragCounter--;
-    if (this.dragCounter === 0) {
-      this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+  #calculateCursorPosition(rect, range) {
+    const rootRect = this.editor.getRootElement().getBoundingClientRect();
+    const x = rect.left - rootRect.left;
+    let y = rect.top - rootRect.top;
+
+    const fontSize = this.#getFontSizeForCursor(range);
+    if (!isNaN(fontSize)) {
+      y += fontSize;
     }
+
+    return { x, y, fontSize }
   }
 
-  #handleDragOver(event) {
-    event.preventDefault();
+  #getFontSizeForCursor(range) {
+    const nativeSelection = window.getSelection();
+    const anchorNode = nativeSelection.anchorNode;
+    const parentElement = this.#getElementFromNode(anchorNode);
+
+    if (parentElement instanceof HTMLElement) {
+      const computed = window.getComputedStyle(parentElement);
+      return parseFloat(computed.fontSize)
+    }
+
+    return 0
   }
 
-  #handleDrop(event) {
-    event.preventDefault();
+  #getElementFromNode(node) {
+    return node?.nodeType === Node.TEXT_NODE ? node.parentElement : node
+  }
 
-    this.dragCounter = 0;
-    this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
+  #getCollapsedSelectionData() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+      return { anchorNode: null, offset: 0 }
+    }
 
-    const dataTransfer = event.dataTransfer;
-    if (!dataTransfer) return
+    const { anchor } = selection;
+    return { anchorNode: anchor.getNode(), offset: anchor.offset }
+  }
 
-    const files = Array.from(dataTransfer.files);
-    if (!files.length) return
+  #getNodeAfterTextNode(anchorNode, offset) {
+    if (offset === anchorNode.getTextContentSize()) {
+      return this.#getNextNodeFromTextEnd(anchorNode)
+    }
+    return null
+  }
 
-    for (const file of files) {
-      this.contents.uploadFile(file);
+  #getNextNodeFromTextEnd(anchorNode) {
+    if (anchorNode.getNextSibling() instanceof DecoratorNode) {
+      return anchorNode.getNextSibling()
     }
+    const parent = anchorNode.getParent();
+    return parent ? parent.getNextSibling() : null
+  }
 
-    this.editor.focus();
+  #getNodeAfterElementNode(anchorNode, offset) {
+    if (offset < anchorNode.getChildrenSize()) {
+      return anchorNode.getChildAtIndex(offset)
+    }
+    return this.#findNextSiblingUp(anchorNode)
   }
 
-  #handleTabKey(event) {
-    if (this.selection.isInsideList) {
-      return this.#handleTabForList(event)
-    } else if (this.selection.isInsideCodeBlock) {
-      return this.#handleTabForCode()
+  #getNodeBeforeTextNode(anchorNode, offset) {
+    if (offset === 0) {
+      return this.#getPreviousNodeFromTextStart(anchorNode)
     }
-    return false
+    return null
   }
 
-  #handleTabForList(event) {
-    if (event.shiftKey && !this.selection.isIndentedList) return false
+  #getPreviousNodeFromTextStart(anchorNode) {
+    if (anchorNode.getPreviousSibling() instanceof DecoratorNode) {
+      return anchorNode.getPreviousSibling()
+    }
+    const parent = anchorNode.getParent();
+    return parent.getPreviousSibling()
+  }
 
-    event.preventDefault();
-    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
-    return this.editor.dispatchCommand(command)
+  #getNodeBeforeElementNode(anchorNode, offset) {
+    if (offset > 0) {
+      return anchorNode.getChildAtIndex(offset - 1)
+    }
+    return this.#findPreviousSiblingUp(anchorNode)
   }
 
-  #handleTabForCode() {
-    const selection = $getSelection();
-    return $isRangeSelection(selection) && selection.isCollapsed()
+  #findNextSiblingUp(node) {
+    let current = node;
+    while (current && current.getNextSibling() == null) {
+      current = current.getParent();
+    }
+    return current ? current.getNextSibling() : null
   }
 
-  // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
-  #toggleLink(url) {
-    this.editor.update(() => {
-      if (url === null) {
-        $toggleLink(null);
-      } else {
-        $toggleLink(url);
-      }
-    });
+  #findPreviousSiblingUp(node) {
+    let current = node;
+    while (current && current.getPreviousSibling() == null) {
+      current = current.getParent();
+    }
+    return current ? current.getPreviousSibling() : null
   }
 }
 
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
+function sanitize(html) {
+  return DOMPurify.sanitize(html, buildConfig())
 }
 
-function debounceAsync(fn, wait) {
-  let timeout;
-
-  return (...args) => {
-    clearTimeout(timeout);
+function dasherize(value) {
+  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
+}
 
-    return new Promise((resolve, reject) => {
-      timeout = setTimeout(async () => {
-        try {
-          const result = await fn(...args);
-          resolve(result);
-        } catch (err) {
-          reject(err);
-        }
-      }, wait);
-    })
+function isUrl(string) {
+  try {
+    new URL(string);
+    return true
+  } catch {
+    return false
   }
 }
 
-function nextFrame() {
-  return new Promise(requestAnimationFrame)
+function normalizeFilteredText(string) {
+  return string
+    .toLowerCase()
+    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
 }
 
-class Selection {
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editorContentElement = editorElement.editorContentElement;
-    this.editor = this.editorElement.editor;
-    this.previouslySelectedKeys = new Set();
+function filterMatches(text, potentialMatch) {
+  return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
+}
 
-    this.#listenForNodeSelections();
-    this.#processSelectionChangeCommands();
-    this.#containEditorFocus();
-  }
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
 
-  set current(selection) {
-    this.editor.update(() => {
-      this.#syncSelectedClasses();
-    });
-  }
+class EditorConfiguration {
+  #editorElement
+  #config
 
-  get hasNodeSelection() {
-    return this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      return selection !== null && $isNodeSelection(selection)
-    })
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+    this.#config = new Configuration(
+      Lexxy.presets.get("default"),
+      Lexxy.presets.get(editorElement.preset),
+      this.#overrides
+    );
   }
 
-  get cursorPosition() {
-    let position = { x: 0, y: 0 };
-
-    this.editor.getEditorState().read(() => {
-      const range = this.#getValidSelectionRange();
-      if (!range) return
-
-      const rect = this.#getReliableRectFromRange(range);
-      if (!rect) return
-
-      position = this.#calculateCursorPosition(rect, range);
-    });
-
-    return position
+  get(path) {
+    return this.#config.get(path)
   }
 
-  placeCursorAtTheEnd() {
-    this.editor.update(() => {
-      const root = $getRoot();
-      const lastDescendant = root.getLastDescendant();
-
-      if (lastDescendant && $isTextNode(lastDescendant)) {
-        lastDescendant.selectEnd();
-      } else {
-        root.selectEnd();
+  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
   }
 
-  selectedNodeWithOffset() {
-    const selection = $getSelection();
-    if (!selection) return { node: null, offset: 0 }
+  get #defaultOptions() {
+    return Object.keys(Lexxy.presets.get("default"))
+  }
 
-    if ($isRangeSelection(selection)) {
-      return {
-        node: selection.anchor.getNode(),
-        offset: selection.anchor.offset
-      }
-    } else if ($isNodeSelection(selection)) {
-      const [ node ] = selection.getNodes();
-      return {
-        node,
-        offset: 0
-      }
+  #parseAttribute(attribute) {
+    const value = this.#editorElement.getAttribute(attribute);
+    try {
+      return JSON.parse(value)
+    } catch {
+      return value
     }
+  }
+}
 
-    return { node: null, offset: 0 }
+class CustomActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "custom_action_text_attachment"
   }
 
-  preservingSelection(fn) {
-    let selectionState = null;
+  static clone(node) {
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  }
 
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (selection && $isRangeSelection(selection)) {
-        selectionState = {
-          anchor: { key: selection.anchor.key, offset: selection.anchor.offset },
-          focus: { key: selection.focus.key, offset: selection.focus.offset }
-        };
-      }
-    });
+  static importJSON(serializedNode) {
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  }
 
-    fn();
+  static importDOM() {
 
-    if (selectionState) {
-      this.editor.update(() => {
-        const selection = $getSelection();
-        if (selection && $isRangeSelection(selection)) {
-          selection.anchor.set(selectionState.anchor.key, selectionState.anchor.offset, "text");
-          selection.focus.set(selectionState.focus.key, selectionState.focus.offset, "text");
+    return {
+      [this.TAG_NAME]: (element) => {
+        if (!element.getAttribute("content")) {
+          return null
         }
-      });
-    }
-  }
-
-  getFormat() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return {}
 
-    const anchorNode = selection.anchor.getNode();
-    if (!anchorNode.getParent()) return {}
+        return {
+          conversion: (attachment) => {
+            // Preserve initial space if present since Lexical removes it
+            const nodes = [];
+            const previousSibling = attachment.previousSibling;
+            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
 
-    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
-    const listType = getListType(anchorNode);
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml: JSON.parse(attachment.getAttribute("content")),
+              contentType: attachment.getAttribute("content-type")
+            }));
 
-    return {
-      isBold: selection.hasFormat("bold"),
-      isItalic: selection.hasFormat("italic"),
-      isStrikethrough: selection.hasFormat("strikethrough"),
-      isHighlight: isSelectionHighlighted(selection),
-      isInLink: $getNearestNodeOfType(anchorNode, LinkNode) !== null,
-      isInQuote: $isQuoteNode(topLevelElement),
-      isInHeading: $isHeadingNode(topLevelElement),
-      isInCode: selection.hasFormat("code") || $getNearestNodeOfType(anchorNode, CodeNode) !== null,
-      isInList: listType !== null,
-      listType,
-      isInTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null
+            nodes.push($createTextNode(" "));
+
+            return { node: nodes }
+          },
+          priority: 2
+        }
+      }
     }
   }
 
-  nearestNodeOfType(nodeType) {
-    const anchorNode = $getSelection()?.anchor?.getNode();
-    return $getNearestNodeOfType(anchorNode, nodeType)
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
   }
 
-  get hasSelectedWordsInSingleLine() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    if (selection.isCollapsed()) return false
+  constructor({ tagName, sgid, contentType, innerHtml }, key) {
+    super(key);
 
-    const anchorNode = selection.anchor.getNode();
-    const focusNode = selection.focus.getNode();
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
 
-    if (anchorNode.getTopLevelElement() !== focusNode.getTopLevelElement()) {
-      return false
-    }
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
+    this.innerHtml = innerHtml;
+  }
 
-    const anchorElement = anchorNode.getTopLevelElement();
-    if (!anchorElement) return false
+  createDOM() {
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
-    const nodes = selection.getNodes();
-    for (const node of nodes) {
-      if ($isLineBreakNode(node)) {
-        return false
-      }
-    }
+    figure.insertAdjacentHTML("beforeend", this.innerHtml);
 
-    return true
-  }
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
 
-  get isInsideList() {
-    return this.nearestNodeOfType(ListItemNode)
+    return figure
   }
 
-  get isIndentedList() {
-    const closestListNode = this.nearestNodeOfType(ListNode);
-    return closestListNode && ($getListDepth(closestListNode) > 1)
+  updateDOM() {
+    return false
   }
 
-  get isInsideCodeBlock() {
-    return this.nearestNodeOfType(CodeNode) !== null
+  getTextContent() {
+    return this.createDOM().textContent.trim() || `[${this.contentType}]`
   }
 
-  get isTableCellSelected() {
-    return this.nearestNodeOfType(TableCellNode) !== null
+  isInline() {
+    return true
   }
 
-  get nodeAfterCursor() {
-    const { anchorNode, offset } = this.#getCollapsedSelectionData();
-    if (!anchorNode) return null
+  exportDOM() {
+    const attachment = createElement(this.tagName, {
+      sgid: this.sgid,
+      content: JSON.stringify(this.innerHtml),
+      "content-type": this.contentType
+    });
 
-    if ($isTextNode(anchorNode)) {
-      return this.#getNodeAfterTextNode(anchorNode, offset)
-    }
+    return { element: attachment }
+  }
 
-    if ($isElementNode(anchorNode)) {
-      return this.#getNodeAfterElementNode(anchorNode, offset)
+  exportJSON() {
+    return {
+      type: "custom_action_text_attachment",
+      version: 1,
+      tagName: this.tagName,
+      sgid: this.sgid,
+      contentType: this.contentType,
+      innerHtml: this.innerHtml
     }
-
-    return this.#findNextSiblingUp(anchorNode)
   }
 
-  get topLevelNodeAfterCursor() {
-    const { anchorNode, offset } = this.#getCollapsedSelectionData();
-    if (!anchorNode) return null
-
-    if ($isTextNode(anchorNode)) {
-      return this.#getNextNodeFromTextEnd(anchorNode)
-    }
+  decorate() {
+    return null
+  }
+}
 
-    if ($isElementNode(anchorNode)) {
-      return this.#getNodeAfterElementNode(anchorNode, offset)
-    }
+class FormatEscaper {
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editor = editorElement.editor;
+  }
 
-    return this.#findNextSiblingUp(anchorNode)
+  monitor() {
+    this.editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => this.#handleEnterKey(event),
+      COMMAND_PRIORITY_HIGH
+    );
   }
 
-  get nodeBeforeCursor() {
-    const { anchorNode, offset } = this.#getCollapsedSelectionData();
-    if (!anchorNode) return null
+  #handleEnterKey(event) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
 
-    if ($isTextNode(anchorNode)) {
-      return this.#getNodeBeforeTextNode(anchorNode, offset)
-    }
+    const anchorNode = selection.anchor.getNode();
 
-    if ($isElementNode(anchorNode)) {
-      return this.#getNodeBeforeElementNode(anchorNode, offset)
-    }
+    if (!this.#isInsideBlockquote(anchorNode)) return false
 
-    return this.#findPreviousSiblingUp(anchorNode)
+    return this.#handleLists(event, anchorNode)
+      || this.#handleBlockquotes(event, anchorNode)
   }
 
-  get topLevelNodeBeforeCursor() {
-    const { anchorNode, offset } = this.#getCollapsedSelectionData();
-    if (!anchorNode) return null
-
-    if ($isTextNode(anchorNode)) {
-      return this.#getPreviousNodeFromTextStart(anchorNode)
+  #handleLists(event, anchorNode) {
+    if (this.#shouldEscapeFromEmptyListItem(anchorNode) || this.#shouldEscapeFromEmptyParagraphInListItem(anchorNode)) {
+      event.preventDefault();
+      this.#escapeFromList(anchorNode);
+      return true
     }
 
-    if ($isElementNode(anchorNode)) {
-      return this.#getNodeBeforeElementNode(anchorNode, offset)
+    return false
+  }
+
+  #handleBlockquotes(event, anchorNode) {
+    if (this.#shouldEscapeFromEmptyParagraphInBlockquote(anchorNode)) {
+      event.preventDefault();
+      this.#escapeFromBlockquote(anchorNode);
+      return true
     }
 
-    return this.#findPreviousSiblingUp(anchorNode)
+    return false
   }
 
-  get #currentlySelectedKeys() {
-    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
-
-    this.currentlySelectedKeys = new Set();
+  #isInsideBlockquote(node) {
+    let currentNode = node;
 
-    const selection = $getSelection();
-    if (selection && $isNodeSelection(selection)) {
-      for (const node of selection.getNodes()) {
-        this.currentlySelectedKeys.add(node.getKey());
+    while (currentNode) {
+      if ($isQuoteNode(currentNode)) {
+        return true
       }
+      currentNode = currentNode.getParent();
     }
 
-    return this.currentlySelectedKeys
+    return false
   }
 
-  #processSelectionChangeCommands() {
-    this.editor.registerCommand(KEY_ARROW_LEFT_COMMAND, this.#selectPreviousNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#selectNextNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#selectNextTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
-
-    this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW);
+  #shouldEscapeFromEmptyListItem(node) {
+    const listItem = this.#getListItemNode(node);
+    if (!listItem) return false
 
-    this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-      this.current = $getSelection();
-    }, COMMAND_PRIORITY_LOW);
+    return this.#isNodeEmpty(listItem)
   }
 
-  #listenForNodeSelections() {
-    this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
-      if (!isDOMNode(target)) return false
+  #shouldEscapeFromEmptyParagraphInListItem(node) {
+    const paragraph = this.#getParagraphNode(node);
+    if (!paragraph) return false
 
-      const targetNode = $getNearestNodeFromDOMNode(target);
-      return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
-    }, COMMAND_PRIORITY_LOW);
+    if (!this.#isNodeEmpty(paragraph)) return false
 
-    this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
-      this.#selectOrAppendNextLine();
-    });
+    const parent = paragraph.getParent();
+    return parent && $isListItemNode(parent)
   }
 
-  #containEditorFocus() {
-    // Workaround for a bizarre Chrome bug where the cursor abandons the editor to focus on not-focusable elements
-    // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
-    this.editorContentElement.addEventListener("keydown", (event) => {
-      if (event.key === "ArrowUp") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
-
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.previousElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.previousElementSibling;
-          }
-
-          if (!currentElement) {
-            event.preventDefault();
-          }
-        }
-      }
-
-      if (event.key === "ArrowDown") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
-
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.nextElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.nextElementSibling;
-          }
-
-          if (!currentElement) {
-            event.preventDefault();
-          }
-        }
-      }
-    }, true);
-  }
+  #isNodeEmpty(node) {
+    if (node.getTextContent().trim() !== "") return false
 
-  #syncSelectedClasses() {
-    this.#clearPreviouslyHighlightedItems();
-    this.#highlightNewItems();
+    const children = node.getChildren();
+    if (children.length === 0) return true
 
-    this.previouslySelectedKeys = this.#currentlySelectedKeys;
-    this.currentlySelectedKeys = null;
+    return children.every(child => {
+      if ($isLineBreakNode(child)) return true
+      return this.#isNodeEmpty(child)
+    })
   }
 
-  #clearPreviouslyHighlightedItems() {
-    for (const key of this.previouslySelectedKeys) {
-      if (!this.#currentlySelectedKeys.has(key)) {
-        const dom = this.editor.getElementByKey(key);
-        if (dom) dom.classList.remove("node--selected");
-      }
-    }
-  }
+  #getListItemNode(node) {
+    let currentNode = node;
 
-  #highlightNewItems() {
-    for (const key of this.#currentlySelectedKeys) {
-      if (!this.previouslySelectedKeys.has(key)) {
-        const nodeElement = this.editor.getElementByKey(key);
-        if (nodeElement) nodeElement.classList.add("node--selected");
+    while (currentNode) {
+      if ($isListItemNode(currentNode)) {
+        return currentNode
       }
+      currentNode = currentNode.getParent();
     }
-  }
 
-  async #selectPreviousNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
-    } else {
-      return this.#selectInLexical(this.nodeBeforeCursor)
-    }
+    return null
   }
 
-  async #selectNextNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
-    } else {
-      return this.#selectInLexical(this.nodeAfterCursor)
-    }
-  }
+  #escapeFromList(anchorNode) {
+    const listItem = this.#getListItemNode(anchorNode);
+    if (!listItem) return
 
-  async #selectPreviousTopLevelNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
-    } else {
-      return this.#selectInLexical(this.topLevelNodeBeforeCursor)
-    }
-  }
+    const parentList = listItem.getParent();
+    if (!parentList || !$isListNode(parentList)) return
 
-  async #selectNextTopLevelNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
-    } else {
-      return this.#selectInLexical(this.topLevelNodeAfterCursor)
-    }
-  }
+    const blockquote = parentList.getParent();
+    const isInBlockquote = blockquote && $isQuoteNode(blockquote);
 
-  async #withCurrentNode(fn) {
-    await nextFrame();
-    if (this.hasNodeSelection) {
-      this.editor.update(() => {
-        fn($getSelection().getNodes()[0]);
-        this.editor.focus();
-      });
+    if (isInBlockquote) {
+      const listItemsAfter = this.#getListItemSiblingsAfter(listItem);
+      const nonEmptyListItems = listItemsAfter.filter(item => !this.#isNodeEmpty(item));
+
+      if (nonEmptyListItems.length > 0) {
+        this.#splitBlockquoteWithList(blockquote, parentList, listItem, nonEmptyListItems);
+        return
+      }
     }
-  }
 
-  async #selectOrAppendNextLine() {
-    this.editor.update(() => {
-      const topLevelElement = this.#getTopLevelElementFromSelection();
-      if (!topLevelElement) return
+    const paragraph = $createParagraphNode();
+    parentList.insertAfter(paragraph);
 
-      this.#moveToOrCreateNextLine(topLevelElement);
-    });
+    listItem.remove();
+    paragraph.selectStart();
   }
 
-  #getTopLevelElementFromSelection() {
-    const selection = $getSelection();
-    if (!selection) return null
+  #shouldEscapeFromEmptyParagraphInBlockquote(node) {
+    const paragraph = this.#getParagraphNode(node);
+    if (!paragraph) return false
 
-    if ($isNodeSelection(selection)) {
-      return this.#getTopLevelFromNodeSelection(selection)
-    }
+    if (!this.#isNodeEmpty(paragraph)) return false
 
-    if ($isRangeSelection(selection)) {
-      return this.#getTopLevelFromRangeSelection(selection)
+    const parent = paragraph.getParent();
+    return parent && $isQuoteNode(parent)
+  }
+
+  #getParagraphNode(node) {
+    let currentNode = node;
+
+    while (currentNode) {
+      if ($isParagraphNode(currentNode)) {
+        return currentNode
+      }
+      currentNode = currentNode.getParent();
     }
 
     return null
   }
 
-  #getTopLevelFromNodeSelection(selection) {
-    const nodes = selection.getNodes();
-    return nodes.length > 0 ? nodes[0].getTopLevelElement() : null
-  }
+  #escapeFromBlockquote(anchorNode) {
+    const paragraph = this.#getParagraphNode(anchorNode);
+    if (!paragraph) return
 
-  #getTopLevelFromRangeSelection(selection) {
-    const anchorNode = selection.anchor.getNode();
-    return anchorNode.getTopLevelElement()
-  }
+    const blockquote = paragraph.getParent();
+    if (!blockquote || !$isQuoteNode(blockquote)) return
 
-  #moveToOrCreateNextLine(topLevelElement) {
-    const nextSibling = topLevelElement.getNextSibling();
+    const siblingsAfter = this.#getSiblingsAfter(paragraph);
+    const nonEmptySiblings = siblingsAfter.filter(sibling => !this.#isNodeEmpty(sibling));
 
-    if (nextSibling) {
-      nextSibling.selectStart();
+    if (nonEmptySiblings.length > 0) {
+      this.#splitBlockquote(blockquote, paragraph, nonEmptySiblings);
     } else {
-      this.#createAndSelectNewParagraph();
+      const newParagraph = $createParagraphNode();
+      blockquote.insertAfter(newParagraph);
+      paragraph.remove();
+      newParagraph.selectStart();
     }
   }
 
-  #createAndSelectNewParagraph() {
-    const root = $getRoot();
-    const newParagraph = $createParagraphNode();
-    root.append(newParagraph);
-    newParagraph.selectStart();
-  }
+  #getSiblingsAfter(node) {
+    const siblings = [];
+    let sibling = node.getNextSibling();
 
-  #selectInLexical(node) {
-    if ($isDecoratorNode(node)) {
-      const selection = $createNodeSelectionWith(node);
-      $setSelection(selection);
-      return selection
-    } else {
-      return false
+    while (sibling) {
+      siblings.push(sibling);
+      sibling = sibling.getNextSibling();
     }
+
+    return siblings
   }
 
-  #selectDecoratorNodeBeforeDeletion(backwards) {
-    const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
-    if (node instanceof DecoratorNode) {
-      this.#selectInLexical(node);
+  #getListItemSiblingsAfter(listItem) {
+    const siblings = [];
+    let sibling = listItem.getNextSibling();
 
-      return true
-    } else {
-      return false
+    while (sibling) {
+      if ($isListItemNode(sibling)) {
+        siblings.push(sibling);
+      }
+      sibling = sibling.getNextSibling();
     }
+
+    return siblings
   }
 
-  #getValidSelectionRange() {
-    const lexicalSelection = $getSelection();
-    if (!lexicalSelection || !lexicalSelection.isCollapsed()) return null
+  #splitBlockquoteWithList(blockquote, parentList, emptyListItem, listItemsAfter) {
+    const blockquoteSiblingsAfterList = this.#getSiblingsAfter(parentList);
+    const nonEmptyBlockquoteSiblings = blockquoteSiblingsAfterList.filter(sibling => !this.#isNodeEmpty(sibling));
 
-    const nativeSelection = window.getSelection();
-    if (!nativeSelection || nativeSelection.rangeCount === 0) return null
+    const middleParagraph = $createParagraphNode();
+    blockquote.insertAfter(middleParagraph);
 
-    return nativeSelection.getRangeAt(0)
-  }
+    const newList = $createListNode(parentList.getListType());
 
-  #getReliableRectFromRange(range) {
-    let rect = range.getBoundingClientRect();
+    const newBlockquote = $createQuoteNode();
+    middleParagraph.insertAfter(newBlockquote);
+    newBlockquote.append(newList);
 
-    if (this.#isRectUnreliable(rect)) {
-      const marker = this.#createAndInsertMarker(range);
-      rect = marker.getBoundingClientRect();
-      this.#restoreSelectionAfterMarker(marker);
-      marker.remove();
-    }
+    listItemsAfter.forEach(item => {
+      newList.append(item);
+    });
 
-    return rect
-  }
+    nonEmptyBlockquoteSiblings.forEach(sibling => {
+      newBlockquote.append(sibling);
+    });
 
-  #isRectUnreliable(rect) {
-    return rect.width === 0 && rect.height === 0 || rect.top === 0 && rect.left === 0
-  }
+    emptyListItem.remove();
 
-  #createAndInsertMarker(range) {
-    const marker = this.#createMarker();
-    range.insertNode(marker);
-    return marker
+    this.#removeTrailingEmptyListItems(parentList);
+    this.#removeTrailingEmptyNodes(newBlockquote);
+
+    if (parentList.getChildrenSize() === 0) {
+      parentList.remove();
+
+      if (blockquote.getChildrenSize() === 0) {
+        blockquote.remove();
+      }
+    } else {
+      this.#removeTrailingEmptyNodes(blockquote);
+    }
+
+    middleParagraph.selectStart();
   }
 
-  #createMarker() {
-    const marker = document.createElement("span");
-    marker.textContent = "\u200b";
-    marker.style.display = "inline-block";
-    marker.style.width = "1px";
-    marker.style.height = "1em";
-    marker.style.lineHeight = "normal";
-    marker.setAttribute("nonce", getNonce());
-    return marker
+  #removeTrailingEmptyListItems(list) {
+    const items = list.getChildren();
+    for (let i = items.length - 1; i >= 0; i--) {
+      const item = items[i];
+      if ($isListItemNode(item) && this.#isNodeEmpty(item)) {
+        item.remove();
+      } else {
+        break
+      }
+    }
   }
 
-  #restoreSelectionAfterMarker(marker) {
-    const nativeSelection = window.getSelection();
-    nativeSelection.removeAllRanges();
-    const newRange = document.createRange();
-    newRange.setStartAfter(marker);
-    newRange.collapse(true);
-    nativeSelection.addRange(newRange);
+  #removeTrailingEmptyNodes(blockquote) {
+    const children = blockquote.getChildren();
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
+      if (this.#isNodeEmpty(child)) {
+        child.remove();
+      } else {
+        break
+      }
+    }
   }
 
-  #calculateCursorPosition(rect, range) {
-    const rootRect = this.editor.getRootElement().getBoundingClientRect();
-    const x = rect.left - rootRect.left;
-    let y = rect.top - rootRect.top;
+  #splitBlockquote(blockquote, emptyParagraph, siblingsAfter) {
+    const newParagraph = $createParagraphNode();
+    blockquote.insertAfter(newParagraph);
 
-    const fontSize = this.#getFontSizeForCursor(range);
-    if (!isNaN(fontSize)) {
-      y += fontSize;
-    }
+    const newBlockquote = $createQuoteNode();
+    newParagraph.insertAfter(newBlockquote);
 
-    return { x, y, fontSize }
-  }
+    siblingsAfter.forEach(sibling => {
+      newBlockquote.append(sibling);
+    });
 
-  #getFontSizeForCursor(range) {
-    const nativeSelection = window.getSelection();
-    const anchorNode = nativeSelection.anchorNode;
-    const parentElement = this.#getElementFromNode(anchorNode);
+    emptyParagraph.remove();
 
-    if (parentElement instanceof HTMLElement) {
-      const computed = window.getComputedStyle(parentElement);
-      return parseFloat(computed.fontSize)
-    }
+    this.#removeTrailingEmptyNodes(blockquote);
+    this.#removeTrailingEmptyNodes(newBlockquote);
 
-    return 0
+    newParagraph.selectStart();
   }
+}
 
-  #getElementFromNode(node) {
-    return node?.nodeType === Node.TEXT_NODE ? node.parentElement : node
-  }
+async function loadFileIntoImage(file, image) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
 
-  #getCollapsedSelectionData() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
-      return { anchorNode: null, offset: 0 }
-    }
+    image.addEventListener("load", () => {
+      resolve(image);
+    });
 
-    const { anchor } = selection;
-    return { anchorNode: anchor.getNode(), offset: anchor.offset }
-  }
+    reader.onload = (event) => {
+      image.src = event.target.result || null;
+    };
 
-  #getNodeAfterTextNode(anchorNode, offset) {
-    if (offset === anchorNode.getTextContentSize()) {
-      return this.#getNextNodeFromTextEnd(anchorNode)
-    }
-    return null
+    reader.readAsDataURL(file);
+  })
+}
+
+class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
+  static getType() {
+    return "action_text_attachment_upload"
   }
 
-  #getNextNodeFromTextEnd(anchorNode) {
-    if (anchorNode.getNextSibling() instanceof DecoratorNode) {
-      return anchorNode.getNextSibling()
-    }
-    const parent = anchorNode.getParent();
-    return parent ? parent.getNextSibling() : null
+  static clone(node) {
+    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
   }
 
-  #getNodeAfterElementNode(anchorNode, offset) {
-    if (offset < anchorNode.getChildrenSize()) {
-      return anchorNode.getChildAtIndex(offset)
-    }
-    return this.#findNextSiblingUp(anchorNode)
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentUploadNode({ ...serializedNode })
   }
 
-  #getNodeBeforeTextNode(anchorNode, offset) {
-    if (offset === 0) {
-      return this.#getPreviousNodeFromTextStart(anchorNode)
-    }
+  // Should never run since this is a transient node. Defined to remove console warning.
+  static importDOM() {
     return null
   }
 
-  #getPreviousNodeFromTextStart(anchorNode) {
-    if (anchorNode.getPreviousSibling() instanceof DecoratorNode) {
-      return anchorNode.getPreviousSibling()
-    }
-    const parent = anchorNode.getParent();
-    return parent.getPreviousSibling()
+  constructor(node, key) {
+    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError } = node;
+    super({ ...node, contentType: file.type }, key);
+    this.file = file;
+    this.uploadUrl = uploadUrl;
+    this.blobUrlTemplate = blobUrlTemplate;
+    this.progress = progress ?? null;
+    this.width = width;
+    this.height = height;
+    this.uploadError = uploadError;
   }
 
-  #getNodeBeforeElementNode(anchorNode, offset) {
-    if (offset > 0) {
-      return anchorNode.getChildAtIndex(offset - 1)
-    }
-    return this.#findPreviousSiblingUp(anchorNode)
-  }
+  createDOM() {
+    if (this.uploadError) return this.#createDOMForError()
 
-  #findNextSiblingUp(node) {
-    let current = node;
-    while (current && current.getNextSibling() == null) {
-      current = current.getParent();
-    }
-    return current ? current.getNextSibling() : null
-  }
+    // This side-effect is trigged on DOM load to fire only once and avoid multiple
+    // uploads through cloning. The upload is guarded from restarting in case the
+    // node is reloaded from saved state such as from history.
+    this.#startUploadIfNeeded();
 
-  #findPreviousSiblingUp(node) {
-    let current = node;
-    while (current && current.getPreviousSibling() == null) {
-      current = current.getParent();
+    const figure = this.createAttachmentFigure();
+
+    if (this.isPreviewableAttachment) {
+      const img = figure.appendChild(this.#createDOMForImage());
+
+      // load file locally to set dimensions and prevent vertical shifting
+      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
+    } else {
+      figure.appendChild(this.#createDOMForFile());
     }
-    return current ? current.getPreviousSibling() : null
+
+    figure.appendChild(this.#createCaption());
+    figure.appendChild(this.#createProgressBar());
+
+    return figure
   }
-}
 
-function sanitize(html) {
-  return DOMPurify.sanitize(html, buildConfig())
-}
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
 
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
-}
+    if (prevNode.progress !== this.progress) {
+      const progress = dom.querySelector("progress");
+      progress.value = this.progress ?? 0;
+    }
 
-function isUrl(string) {
-  try {
-    new URL(string);
-    return true
-  } catch {
     return false
   }
-}
-
-function normalizeFilteredText(string) {
-  return string
-    .toLowerCase()
-    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
-}
 
-function filterMatches(text, potentialMatch) {
-  return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
-}
+  exportDOM() {
+    return { element: null }
+  }
 
-function upcaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "action_text_attachment_upload",
+      version: 1,
+      uploadUrl: this.uploadUrl,
+      blobUrlTemplate: this.blobUrlTemplate,
+      progress: this.progress,
+      width: this.width,
+      height: this.height,
+      uploadError: this.uploadError
+    }
+  }
 
-class EditorConfiguration {
-  #editorElement
-  #config
+  get #uploadStarted() {
+    return this.progress !== null
+  }
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-    this.#config = new Configuration(
-      Lexxy.presets.get("default"),
-      Lexxy.presets.get(editorElement.preset),
-      this.#overrides
-    );
+  #createDOMForError() {
+    const figure = this.createAttachmentFigure();
+    figure.classList.add("attachment--error");
+    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.file?.name ?? "file"}` }));
+    return figure
   }
 
-  get(path) {
-    return this.#config.get(path)
+  #createDOMForImage() {
+    return createElement("img")
   }
 
-  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
+  #createDOMForFile() {
+    const extension = this.#getFileExtension();
+    const span = createElement("span", { className: "attachment__icon", textContent: extension });
+    return span
   }
 
-  get #defaultOptions() {
-    return Object.keys(Lexxy.presets.get("default"))
+  #getFileExtension() {
+    return this.file.name.split(".").pop().toLowerCase()
   }
 
-  #parseAttribute(attribute) {
-    const value = this.#editorElement.getAttribute(attribute);
-    try {
-      return JSON.parse(value)
-    } catch {
-      return value
-    }
+  #createCaption() {
+    const figcaption = createElement("figcaption", { className: "attachment__caption" });
+
+    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.file.name || "" });
+    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
+    figcaption.appendChild(nameSpan);
+    figcaption.appendChild(sizeSpan);
+
+    return figcaption
   }
-}
 
-class CustomActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "custom_action_text_attachment"
+  #createProgressBar() {
+    return createElement("progress", { value: this.progress ?? 0, max: 100 })
   }
 
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  #setDimensionsFromImage({ width, height }) {
+    if (this.#hasDimensions) return
+
+    this.editor.update(() => {
+      const writable = this.getWritable();
+      writable.width = width;
+      writable.height = height;
+    }, { tag: SILENT_UPDATE_TAGS });
   }
 
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  get #hasDimensions() {
+    return Boolean(this.width && this.height)
   }
 
-  static importDOM() {
+  async #startUploadIfNeeded() {
+    if (this.#uploadStarted) return
 
-    return {
-      [this.TAG_NAME]: (element) => {
-        if (!element.getAttribute("content")) {
-          return null
-        }
+    this.#setUploadStarted();
 
-        return {
-          conversion: (attachment) => {
-            // Preserve initial space if present since Lexical removes it
-            const nodes = [];
-            const previousSibling = attachment.previousSibling;
-            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
+    const { DirectUpload } = await import('@rails/activestorage');
 
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml: JSON.parse(attachment.getAttribute("content")),
-              contentType: attachment.getAttribute("content-type")
-            }));
+    const upload = new DirectUpload(this.file, this.uploadUrl, this);
+    upload.delegate = this.#createUploadDelegate();
 
-            nodes.push($createTextNode(" "));
+    this.#dispatchEvent("lexxy:upload-start", { file: this.file });
 
-            return { node: nodes }
-          },
-          priority: 2
-        }
+    upload.create((error, blob) => {
+      if (error) {
+        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error });
+        this.#handleUploadError(error);
+      } else {
+        this.#dispatchEvent("lexxy:upload-end", { file: this.file, error: null });
+        this.#showUploadedAttachment(blob);
       }
-    }
-  }
-
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
+    });
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml }, key) {
-    super(key);
+  #createUploadDelegate() {
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
 
-    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+    return {
+      directUploadWillCreateBlobWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+      },
+      directUploadWillStoreFileWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
 
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
-    this.sgid = sgid;
-    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
-    this.innerHtml = innerHtml;
+        const uploadProgressHandler = (event) => this.#handleUploadProgress(event);
+        request.upload.addEventListener("progress", uploadProgressHandler);
+      }
+    }
   }
 
-  createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
-
-    figure.insertAdjacentHTML("beforeend", this.innerHtml);
-
-    return figure
+  #setUploadStarted() {
+    this.#setProgress(1);
   }
 
-  updateDOM() {
-    return false
+  #handleUploadProgress(event) {
+    const progress = Math.round(event.loaded / event.total * 100);
+    this.#setProgress(progress);
+    this.#dispatchEvent("lexxy:upload-progress", { file: this.file, progress });
   }
 
-  getTextContent() {
-    return this.createDOM().textContent.trim() || `[${this.contentType}]`
+  #setProgress(progress) {
+    this.editor.update(() => {
+      this.getWritable().progress = progress;
+    }, { tag: SILENT_UPDATE_TAGS });
   }
 
-  isInline() {
-    return true
+  #handleUploadError(error) {
+    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
+    this.editor.update(() => {
+      this.getWritable().uploadError = true;
+    }, { tag: SILENT_UPDATE_TAGS });
   }
 
-  exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      content: JSON.stringify(this.innerHtml),
-      "content-type": this.contentType
-    });
-
-    return { element: attachment }
+  #showUploadedAttachment(blob) {
+    this.editor.update(() => {
+      this.replace(this.#toActionTextAttachmentNodeWith(blob));
+    }, { tag: SILENT_UPDATE_TAGS });
   }
 
-  exportJSON() {
-    return {
-      type: "custom_action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      contentType: this.contentType,
-      innerHtml: this.innerHtml
-    }
+  #toActionTextAttachmentNodeWith(blob) {
+    const conversion = new AttachmentNodeConversion(this, blob);
+    return conversion.toAttachmentNode()
   }
 
-  decorate() {
-    return null
+  #dispatchEvent(name, detail) {
+    const figure = this.editor.getElementByKey(this.getKey());
+    if (figure) dispatch(figure, name, detail);
   }
 }
 
-class FormatEscaper {
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editor = editorElement.editor;
+class AttachmentNodeConversion {
+  constructor(uploadNode, blob) {
+    this.uploadNode = uploadNode;
+    this.blob = blob;
   }
 
-  monitor() {
-    this.editor.registerCommand(
-      KEY_ENTER_COMMAND,
-      (event) => this.#handleEnterKey(event),
-      COMMAND_PRIORITY_HIGH
-    );
+  toAttachmentNode() {
+    return new ActionTextAttachmentNode({
+      ...this.uploadNode,
+      ...this.#propertiesFromBlob,
+      src: this.#src
+    })
   }
 
-  #handleEnterKey(event) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    const anchorNode = selection.anchor.getNode();
+  get #propertiesFromBlob() {
+    const { blob } = this;
+    return {
+      sgid: blob.attachable_sgid,
+      altText: blob.filename,
+      contentType: blob.content_type,
+      fileName: blob.filename,
+      fileSize: blob.byte_size,
+      previewable: blob.previewable,
+    }
+  }
 
-    if (!this.#isInsideBlockquote(anchorNode)) return false
+  get #src() {
+    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  }
 
-    return this.#handleLists(event, anchorNode)
-      || this.#handleBlockquotes(event, anchorNode)
+  get #blobSrc() {
+    return this.uploadNode.blobUrlTemplate
+      .replace(":signed_id", this.blob.signed_id)
+      .replace(":filename", encodeURIComponent(this.blob.filename))
   }
+}
 
-  #handleLists(event, anchorNode) {
-    if (this.#shouldEscapeFromEmptyListItem(anchorNode) || this.#shouldEscapeFromEmptyParagraphInListItem(anchorNode)) {
-      event.preventDefault();
-      this.#escapeFromList(anchorNode);
-      return true
-    }
+function $createActionTextAttachmentUploadNode(...args) {
+  return new ActionTextAttachmentUploadNode(...args)
+}
 
-    return false
+class ImageGalleryNode extends ElementNode {
+  $config() {
+    return this.config("image_gallery", {
+      extends: ElementNode,
+    })
   }
 
-  #handleBlockquotes(event, anchorNode) {
-    if (this.#shouldEscapeFromEmptyParagraphInBlockquote(anchorNode)) {
-      event.preventDefault();
-      this.#escapeFromBlockquote(anchorNode);
-      return true
+  static transform() {
+    return (gallery) => {
+      gallery.unwrapEmptyNode()
+        || gallery.replaceWithSingularChild()
+        || gallery.splitAroundInvalidChild();
     }
-
-    return false
   }
 
-  #isInsideBlockquote(node) {
-    let currentNode = node;
+  static importDOM() {
+    return {
+      div: (element) => {
+        const containsAttachment = element.querySelector(`:scope > :is(${this.#attachmentTags.join()})`);
+        if (!containsAttachment) return null
 
-    while (currentNode) {
-      if ($isQuoteNode(currentNode)) {
-        return true
+        return {
+          conversion: () => {
+            return {
+              node: $createImageGalleryNode(),
+              after: children => $descendantsMatching(children, this.isValidChild)
+            }
+          },
+          priority: 2
+        }
       }
-      currentNode = currentNode.getParent();
     }
-
-    return false
   }
 
-  #shouldEscapeFromEmptyListItem(node) {
-    const listItem = this.#getListItemNode(node);
-    if (!listItem) return false
-
-    return this.#isNodeEmpty(listItem)
+  static canCollapseWith(node) {
+    return $isImageGalleryNode(node) || this.isValidChild(node)
   }
 
-  #shouldEscapeFromEmptyParagraphInListItem(node) {
-    const paragraph = this.#getParagraphNode(node);
-    if (!paragraph) return false
+  static isValidChild(node) {
+    return $isActionTextAttachmentNode(node) && node.isPreviewableImage
+  }
 
-    if (!this.#isNodeEmpty(paragraph)) return false
+  static get #attachmentTags() {
+    return Object.keys(ActionTextAttachmentNode.importDOM())
+  }
 
-    const parent = paragraph.getParent();
-    return parent && $isListItemNode(parent)
+  createDOM() {
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return div
   }
 
-  #isNodeEmpty(node) {
-    if (node.getTextContent().trim() !== "") return false
+  updateDOM(_prevNode, dom) {
+    dom.className = this.#galleryClassNames;
+    return false
+  }
 
-    const children = node.getChildren();
-    if (children.length === 0) return true
+  canBeEmpty() {
+    // Return `true` to conform to `$isBlock(node)`
+    // We clean-up empty galleries with a transform
+    return true
+  }
 
-    return children.every(child => {
-      if ($isLineBreakNode(child)) return true
-      return this.#isNodeEmpty(child)
-    })
+  collapseAtStart(_selection) {
+    return true
   }
 
-  #getListItemNode(node) {
-    let currentNode = node;
+  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();
 
-    while (currentNode) {
-      if ($isListItemNode(currentNode)) {
-        return currentNode
-      }
-      currentNode = currentNode.getParent();
+      // return null as selection has been managed
+      return null
     }
 
-    return null
+    const newNode = $createImageGalleryNode();
+    this.insertAfter(newNode, restoreSelection);
+    return newNode
   }
 
-  #escapeFromList(anchorNode) {
-    const listItem = this.#getListItemNode(anchorNode);
-    if (!listItem) return
-
-    const parentList = listItem.getParent();
-    if (!parentList || !$isListNode(parentList)) return
-
-    const blockquote = parentList.getParent();
-    const isInBlockquote = blockquote && $isQuoteNode(blockquote);
-
-    if (isInBlockquote) {
-      const listItemsAfter = this.#getListItemSiblingsAfter(listItem);
-      const nonEmptyListItems = listItemsAfter.filter(item => !this.#isNodeEmpty(item));
-
-      if (nonEmptyListItems.length > 0) {
-        this.#splitBlockquoteWithList(blockquote, parentList, listItem, nonEmptyListItems);
-        return
-      }
-    }
-
-    const paragraph = $createParagraphNode();
-    parentList.insertAfter(paragraph);
+  getImageAttachments() {
+    const children = this.getChildren();
+    return children.filter($isActionTextAttachmentNode)
+  }
 
-    listItem.remove();
-    paragraph.selectStart();
+  exportDOM() {
+    const div = document.createElement("div");
+    div.className = this.#galleryClassNames;
+    return { element: div }
   }
 
-  #shouldEscapeFromEmptyParagraphInBlockquote(node) {
-    const paragraph = this.#getParagraphNode(node);
-    if (!paragraph) return false
+  collapseWith(node, backwards) {
+    if (!ImageGalleryNode.canCollapseWith(node)) return false
 
-    if (!this.#isNodeEmpty(paragraph)) return false
+    if (backwards) {
+      $insertFirst(this, node);
+    } else {
+      this.append(node);
+    }
 
-    const parent = paragraph.getParent();
-    return parent && $isQuoteNode(parent)
-  }
+    $unwrapAndFilterDescendants(this, ImageGalleryNode.isValidChild);
 
-  #getParagraphNode(node) {
-    let currentNode = node;
+    return true
+  }
 
-    while (currentNode) {
-      if ($isParagraphNode(currentNode)) {
-        return currentNode
-      }
-      currentNode = currentNode.getParent();
+  unwrapEmptyNode() {
+    if (this.isEmpty()) {
+      const paragraph = $createParagraphNode();
+      return this.replace(paragraph)
     }
+  }
 
-    return null
+  replaceWithSingularChild() {
+    if (this.#hasSingularChild) {
+      const child = this.getFirstChild();
+      return this.replace(child)
+    }
   }
 
-  #escapeFromBlockquote(anchorNode) {
-    const paragraph = this.#getParagraphNode(anchorNode);
-    if (!paragraph) return
+  splitAroundInvalidChild() {
+    for (const child of $firstToLastIterator(this)) {
+      if (ImageGalleryNode.isValidChild(child)) continue
 
-    const blockquote = paragraph.getParent();
-    if (!blockquote || !$isQuoteNode(blockquote)) return
+      const poppedNode = $makeSafeForRoot(child);
+      const [ topGallery, secondGallery ] = this.splitAtIndex(poppedNode.getIndexWithinParent());
+      topGallery.insertAfter(poppedNode);
+      poppedNode.selectEnd();
 
-    const siblingsAfter = this.#getSiblingsAfter(paragraph);
-    const nonEmptySiblings = siblingsAfter.filter(sibling => !this.#isNodeEmpty(sibling));
+      // remove an empty gallery rather than let it unwrap to a paragraph
+      if (secondGallery.isEmpty()) secondGallery.remove();
 
-    if (nonEmptySiblings.length > 0) {
-      this.#splitBlockquote(blockquote, paragraph, nonEmptySiblings);
-    } else {
-      const newParagraph = $createParagraphNode();
-      blockquote.insertAfter(newParagraph);
-      paragraph.remove();
-      newParagraph.selectStart();
+      break
     }
   }
 
-  #getSiblingsAfter(node) {
-    const siblings = [];
-    let sibling = node.getNextSibling();
+  splitAtIndex(index) {
+    return $splitNode(this, index)
+  }
 
-    while (sibling) {
-      siblings.push(sibling);
-      sibling = sibling.getNextSibling();
-    }
+  get #hasSingularChild() {
+    return this.getChildrenSize() === 1
+  }
 
-    return siblings
+  get #galleryClassNames() {
+    return `attachment-gallery attachment-gallery--${this.getChildrenSize()}`
   }
+}
 
-  #getListItemSiblingsAfter(listItem) {
-    const siblings = [];
-    let sibling = listItem.getNextSibling();
+function $createImageGalleryNode() {
+  return new ImageGalleryNode()
+}
 
-    while (sibling) {
-      if ($isListItemNode(sibling)) {
-        siblings.push(sibling);
-      }
-      sibling = sibling.getNextSibling();
-    }
+function $isImageGalleryNode(node) {
+  return node instanceof ImageGalleryNode
+}
 
-    return siblings
-  }
+function $findOrCreateGalleryForImage(node) {
+  if (!ImageGalleryNode.canCollapseWith(node)) return null
 
-  #splitBlockquoteWithList(blockquote, parentList, emptyListItem, listItemsAfter) {
-    const blockquoteSiblingsAfterList = this.#getSiblingsAfter(parentList);
-    const nonEmptyBlockquoteSiblings = blockquoteSiblingsAfterList.filter(sibling => !this.#isNodeEmpty(sibling));
+  const existingGallery = $getNearestNodeOfType(node, ImageGalleryNode);
+  return existingGallery ?? $wrapNodeInElement(node, $createImageGalleryNode)
+}
 
-    const middleParagraph = $createParagraphNode();
-    blockquote.insertAfter(middleParagraph);
+class Uploader {
+  #files
 
-    const newList = $createListNode(parentList.getListType());
+  static for(editorElement, files) {
+    const UploaderKlass = GalleryUploader.handle(editorElement, files) ? GalleryUploader : Uploader;
+    return new UploaderKlass(editorElement, files)
+  }
 
-    const newBlockquote = $createQuoteNode();
-    middleParagraph.insertAfter(newBlockquote);
-    newBlockquote.append(newList);
+  constructor(editorElement, files) {
+    this.#files = files;
 
-    listItemsAfter.forEach(item => {
-      newList.append(item);
-    });
+    this.editorElement = editorElement;
+    this.contents = editorElement.contents;
+    this.selection = editorElement.selection;
+  }
 
-    nonEmptyBlockquoteSiblings.forEach(sibling => {
-      newBlockquote.append(sibling);
-    });
+  get files() {
+    return Array.from(this.#files)
+  }
 
-    emptyListItem.remove();
+  $uploadFiles() {
+    this.$createUploadNodes();
+    this.$insertUploadNodes();
+  }
 
-    this.#removeTrailingEmptyListItems(parentList);
-    this.#removeTrailingEmptyNodes(newBlockquote);
+  $createUploadNodes() {
+    this.nodes = this.files.map(file =>
+      $createActionTextAttachmentUploadNode({
+        ...this.#nodeUrlProperties,
+        file: file,
+        contentType: file.type
+      })
+    );
+  }
 
-    if (parentList.getChildrenSize() === 0) {
-      parentList.remove();
+  $insertUploadNodes() {
+    this.nodes.forEach(this.contents.insertAtCursor);
+  }
 
-      if (blockquote.getChildrenSize() === 0) {
-        blockquote.remove();
-      }
-    } else {
-      this.#removeTrailingEmptyNodes(blockquote);
+  get #nodeUrlProperties() {
+    return {
+      uploadUrl: this.editorElement.directUploadUrl,
+      blobUrlTemplate: this.editorElement.blobUrlTemplate
     }
+  }
+}
 
-    middleParagraph.selectStart();
+class GalleryUploader extends Uploader {
+  #gallery
+
+  static handle(editorElement, files) {
+    return this.#isMultipleImageUpload(files) || this.#gallerySelection(editorElement.selection)
   }
 
-  #removeTrailingEmptyListItems(list) {
-    const items = list.getChildren();
-    for (let i = items.length - 1; i >= 0; i--) {
-      const item = items[i];
-      if ($isListItemNode(item) && this.#isNodeEmpty(item)) {
-        item.remove();
-      } else {
-        break
-      }
+  static #isMultipleImageUpload(files) {
+    let imageFileCount = 0;
+    for (const file of files) {
+      if (isPreviewableImage(file.type)) imageFileCount++;
+      if (imageFileCount > 1) return true
     }
+    return false
   }
 
-  #removeTrailingEmptyNodes(blockquote) {
-    const children = blockquote.getChildren();
-    for (let i = children.length - 1; i >= 0; i--) {
-      const child = children[i];
-      if (this.#isNodeEmpty(child)) {
-        child.remove();
-      } else {
-        break
-      }
+  static #gallerySelection(selection) {
+    if (selection.isOnPreviewableImage) return true
+
+    const { node: selectedNode } = selection.selectedNodeWithOffset();
+    return $getNearestNodeOfType(selectedNode, ImageGalleryNode) !== null
+  }
+
+  $insertUploadNodes() {
+    this.#findOrCreateGallery();
+    this.#insertImagesInGallery();
+    this.#insertNonImagesAfterGallery();
+  }
+
+  #findOrCreateGallery() {
+    if (this.selection.isOnPreviewableImage) {
+      this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
+    } else {
+      this.#gallery = $createImageGalleryNode();
+      this.contents.insertAtCursor(this.#gallery);
     }
   }
 
-  #splitBlockquote(blockquote, emptyParagraph, siblingsAfter) {
-    const newParagraph = $createParagraphNode();
-    blockquote.insertAfter(newParagraph);
+  get #selectedNode() {
+    const { node } = this.selection.selectedNodeWithOffset();
+    return node
+  }
 
-    const newBlockquote = $createQuoteNode();
-    newParagraph.insertAfter(newBlockquote);
+  get #galleryInsertPosition() {
+    const anchor = $getSelection()?.anchor;
+    const galleryHasElementSelection = anchor?.getNode().is(this.#gallery);
+    if (galleryHasElementSelection) return anchor.offset
 
-    siblingsAfter.forEach(sibling => {
-      newBlockquote.append(sibling);
-    });
+    const selectedNode = this.#selectedNode;
+    const childIndex = this.#gallery.isParentOf(selectedNode) && selectedNode.getIndexWithinParent();
+    return childIndex !== false ? (childIndex + 1) : 0
+  }
 
-    emptyParagraph.remove();
+  get #imageNodes() {
+    return this.nodes.filter(node => ImageGalleryNode.isValidChild(node))
+  }
 
-    this.#removeTrailingEmptyNodes(blockquote);
-    this.#removeTrailingEmptyNodes(newBlockquote);
+  get #nonImageNodes() {
+    return this.nodes.filter(node => !ImageGalleryNode.isValidChild(node))
+  }
 
-    newParagraph.selectStart();
+  #insertImagesInGallery() {
+    this.#gallery.splice(this.#galleryInsertPosition, 0, this.#imageNodes);
+  }
+
+  #insertNonImagesAfterGallery() {
+    let beforeNode = this.#gallery;
+
+    for (const node of this.#nonImageNodes) {
+      beforeNode.insertAfter(node);
+      beforeNode = node;
+    }
   }
 }
 
@@ -2951,29 +3399,34 @@ class Contents {
   }
 
   insertHtml(html, { tag } = {}) {
+    this.insertDOM(parseHtml(html), { tag });
+  }
+
+  insertDOM(doc, { tag } = {}) {
     this.editor.update(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
 
-      const nodes = $generateNodesFromDOM(this.editor, parseHtml(html));
-      selection.insertNodes(nodes);
+      const nodes = $generateNodesFromDOM(this.editor, doc);
+      if (!this.#insertUploadNodes(nodes)) {
+        selection.insertNodes(nodes);
+      }
     }, { tag });
   }
 
   insertAtCursor(node) {
-    const selection = $getSelection();
+    const selection = $getSelection() ?? $getRoot().selectEnd();
     const selectedNodes = selection?.getNodes();
 
     if ($isRangeSelection(selection)) {
-      $insertNodes([ node ]);
-    } else if ($isNodeSelection(selection) && selectedNodes && selectedNodes.length > 0) {
+      selection.insertNodes([ node ]);
+    } else if ($isNodeSelection(selection) && selectedNodes.length > 0) {
+      // Overrides Lexical's default behavior of _removing_ the currently selected nodes
+      // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
       const lastNode = selectedNodes.at(-1);
       lastNode.insertAfter(node);
-    } else {
-      const root = $getRoot();
-      root.append(node);
     }
-  }
+}
 
   insertAtCursorEnsuringLineBelow(node) {
     this.insertAtCursor(node);
@@ -3090,6 +3543,7 @@ class Contents {
     if (!this.hasSelectedText()) return
 
     this.editor.update(() => {
+      $toggleLink(null);
       $toggleLink(url);
     });
   }
@@ -3181,23 +3635,22 @@ class Contents {
     }
   }
 
-  uploadFile(file) {
+  uploadFiles(files, { selectLast } = {}) {
     if (!this.editorElement.supportsAttachments) {
       console.warn("This editor does not supports attachments (it's configured with [attachments=false])");
       return
     }
-
-    if (!this.#shouldUploadFile(file)) {
-      return
-    }
-
-    const uploadUrl = this.editorElement.directUploadUrl;
-    const blobUrlTemplate = this.editorElement.blobUrlTemplate;
+    const validFiles = Array.from(files).filter(this.#shouldUploadFile.bind(this));
 
     this.editor.update(() => {
-      const uploadedImageNode = new ActionTextAttachmentUploadNode({ file: file, uploadUrl: uploadUrl, blobUrlTemplate: blobUrlTemplate });
-      this.insertAtCursor(uploadedImageNode);
-    }, { tag: HISTORY_MERGE_TAG });
+      const uploader = Uploader.for(this.editorElement, validFiles);
+      uploader.$uploadFiles();
+
+      if (selectLast && uploader.nodes?.length) {
+        const lastNode = uploader.nodes.at(-1);
+        lastNode.selectEnd();
+      }
+    });
   }
 
   replaceNodeWithHTML(nodeKey, html, options = {}) {
@@ -3238,6 +3691,15 @@ class Contents {
     });
   }
 
+  #insertUploadNodes(nodes) {
+    if (nodes.every($isActionTextAttachmentNode)) {
+      const uploader = Uploader.for(this.editorElement, []);
+      uploader.nodes = nodes;
+      uploader.$insertUploadNodes();
+      return true
+    }
+  }
+
   #insertLineBelowIfLastNode(node) {
     this.editor.update(() => {
       const nextSibling = node.getNextSibling();
@@ -3357,7 +3819,7 @@ class Contents {
       wrappingNode.append(...topLevelElement.getChildren());
       topLevelElement.replace(wrappingNode);
     } else {
-      $insertNodes([ newNodeFn() ]);
+      selection.insertNodes([ newNodeFn() ]);
     }
   }
 
@@ -3617,15 +4079,15 @@ class Clipboard {
   paste(event) {
     const clipboardData = event.clipboardData;
 
-    if (!clipboardData) return false
+    if (!clipboardData || this.#isPastingIntoCodeBlock()) return false
 
-    if (this.#isPlainTextOrURLPasted(clipboardData) && !this.#isPastingIntoCodeBlock()) {
+    if (this.#isPlainTextOrURLPasted(clipboardData)) {
       this.#pastePlainText(clipboardData);
       event.preventDefault();
       return true
     }
 
-    this.#handlePastedFiles(clipboardData);
+    return this.#handlePastedFiles(clipboardData)
   }
 
   #isPlainTextOrURLPasted(clipboardData) {
@@ -3694,7 +4156,15 @@ class Clipboard {
 
   #pasteMarkdown(text) {
     const html = marked(text);
-    this.contents.insertHtml(html, { tag: [ PASTE_TAG ] });
+    const doc = parseHtml(html);
+    const detail = Object.freeze({
+      markdown: text,
+      document: doc,
+      addBlockSpacing: () => addBlockSpacing(doc)
+    });
+
+    dispatch(this.editorElement, "lexxy:insert-markdown", detail);
+    this.contents.insertDOM(doc, { tag: PASTE_TAG });
   }
 
   #pasteRichText(clipboardData) {
@@ -3705,19 +4175,22 @@ class Clipboard {
   }
 
   #handlePastedFiles(clipboardData) {
-    if (!this.editorElement.supportsAttachments) return
+    if (!this.editorElement.supportsAttachments) return false
 
     const html = clipboardData.getData("text/html");
-    if (html) return // Ignore if image copied from browser since we will load it as a remote image
+    if (html) {
+      this.contents.insertHtml(html, { tag: PASTE_TAG });
+      return true
+    }
 
     this.#preservingScrollPosition(() => {
-      for (const item of clipboardData.items) {
-        const file = item.getAsFile();
-        if (!file) continue
-
-        this.contents.uploadFile(file);
+      const files = clipboardData.files;
+      if (files.length) {
+        this.contents.uploadFiles(files, { selectLast: true });
       }
     });
+
+    return true
   }
 
   // Deals with an issue in Safari where it scrolls to the tops after pasting attachments
@@ -4091,6 +4564,93 @@ class TablesExtension extends LexxyExtension {
   }
 }
 
+class AttachmentsExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsAttachments
+  }
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/action-text-attachments",
+      nodes: [
+        ActionTextAttachmentNode,
+        ActionTextAttachmentUploadNode,
+        ImageGalleryNode
+      ],
+      register(editor) {
+        return mergeRegister(
+          editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL)
+        )
+      }
+    })
+  }
+}
+
+function $collapseIntoGallery(backwards) {
+  const anchor = $getSelection()?.anchor;
+  if (!anchor) return false
+
+  if ($collapseAtGalleryEdge(anchor, backwards)) {
+    return true
+  } else if (backwards) {
+    return $collapseAroundEmptyParagraph(anchor)
+      || $moveSelectionBeforeGallery(anchor)
+  }
+
+  return false
+}
+
+function $collapseAroundEmptyParagraph(anchor) {
+  const anchorNode = anchor.getNode();
+  if (!anchorNode) return false
+
+  const isWithinEmptyParagraph = $isParagraphNode(anchorNode) && anchorNode.isEmpty();
+  const previousSibling = anchorNode.getPreviousSibling();
+  const topGallery = $findOrCreateGalleryForImage(previousSibling);
+  const selectionIndex = topGallery?.getChildrenSize();
+
+  if (isWithinEmptyParagraph && topGallery?.collapseWith(anchorNode.getNextSibling())) {
+    topGallery.select(selectionIndex, selectionIndex);
+    anchorNode.remove();
+    return true
+  } else {
+    return false
+  }
+}
+
+function $collapseAtGalleryEdge(anchor, backwards) {
+  const anchorNode = anchor.getNode();
+  if (!$isImageGalleryNode(anchorNode)) return false
+
+  const isAtGalleryEdge = $isAtNodeEdge(anchor, backwards);
+  const sibling = backwards ? anchorNode.getPreviousSibling() : anchorNode.getNextSibling();
+
+  if (isAtGalleryEdge && anchorNode.collapseWith(sibling, backwards)) {
+    const selectionOffset = backwards ? 1 : anchorNode.getChildrenSize() - 1;
+    anchorNode.select(selectionOffset, selectionOffset);
+    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();
+  if (!$isImageGalleryNode(anchor.getNode()) || !$isAtNodeEdge(anchor, true) || !previousNode) return false
+
+  if ($isDecoratorNode(previousNode)) {
+    // Handled by Lexxy decorator selection behavior
+    return false
+  } else if (previousNode.isEmpty()) {
+    previousNode.remove();
+  } else {
+    previousNode.selectEnd();
+  }
+
+  return true
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -4180,7 +4740,8 @@ class LexicalEditorElement extends HTMLElement {
       ProvisionalParagraphExtension,
       HighlightExtension,
       TrixContentExtension,
-      TablesExtension
+      TablesExtension,
+      AttachmentsExtension
     ]
   }
 
@@ -4340,10 +4901,6 @@ class LexicalEditorElement extends HTMLElement {
       );
     }
 
-    if (this.supportsAttachments) {
-      nodes.push(ActionTextAttachmentNode, ActionTextAttachmentUploadNode);
-    }
-
     return nodes
   }
 
@@ -5129,16 +5686,16 @@ class LexicalPromptElement extends HTMLElement {
 
   #registerKeyListeners() {
     // We can't use a regular keydown for Enter as Lexical handles it first
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
 
     if (this.#doesSpaceSelect) {
-      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
     }
 
-    // Register arrow keys with HIGH priority to prevent Lexical's selection handlers from running
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_HIGH));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_HIGH));
+    // Register arrow keys with CRITICAL priority to prevent Lexical's selection handlers from running
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_CRITICAL));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_CRITICAL));
   }
 
   #handleArrowUp(event) {
@@ -5412,11 +5969,18 @@ class CodeLanguagePicker extends HTMLElement {
   connectedCallback() {
     this.editorElement = this.closest("lexxy-editor");
     this.editor = this.editorElement.editor;
+    this.classList.add("lexxy-floating-controls");
 
     this.#attachLanguagePicker();
+    this.#hide();
     this.#monitorForCodeBlockSelection();
   }
 
+  disconnectedCallback() {
+    this.unregisterUpdateListener?.();
+    this.unregisterUpdateListener = null;
+  }
+
   #attachLanguagePicker() {
     this.languagePickerElement = this.#createLanguagePicker();
 
@@ -5471,14 +6035,14 @@ class CodeLanguagePicker extends HTMLElement {
   }
 
   #monitorForCodeBlockSelection() {
-    this.editor.registerUpdateListener(() => {
+    this.unregisterUpdateListener = this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         const codeNode = this.#getCurrentCodeNode();
 
         if (codeNode) {
           this.#codeNodeWasSelected(codeNode);
         } else {
-          this.#hideLanguagePicker();
+          this.#hide();
         }
       });
     });
@@ -5507,7 +6071,7 @@ class CodeLanguagePicker extends HTMLElement {
     const language = codeNode.getLanguage();
 
     this.#updateLanguagePickerWith(language);
-    this.#showLanguagePicker();
+    this.#show();
     this.#positionLanguagePicker(codeNode);
   }
 
@@ -5531,15 +6095,66 @@ class CodeLanguagePicker extends HTMLElement {
     this.style.right = `${relativeRight}px`;
   }
 
-  #showLanguagePicker() {
+  #show() {
     this.hidden = false;
   }
 
-  #hideLanguagePicker() {
+  #hide() {
     this.hidden = true;
   }
 }
 
+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 {
+  connectedCallback() {
+    this.editorElement = this.closest("lexxy-editor");
+    this.editor = this.editorElement.editor;
+    this.classList.add("lexxy-floating-controls");
+
+    if (!this.deleteButton) {
+      this.#attachDeleteButton();
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.deleteButton && this.handleDeleteClick) {
+      this.deleteButton.removeEventListener("click", this.handleDeleteClick);
+    }
+
+    this.handleDeleteClick = null;
+    this.deleteButton = null;
+    this.editor = null;
+    this.editorElement = null;
+  }
+  #attachDeleteButton() {
+    const container = createElement("div", { className: "lexxy-floating-controls__group" });
+
+    this.deleteButton = createElement("button", {
+      className: "lexxy-node-delete",
+      type: "button",
+      "aria-label": "Remove"
+    });
+    this.deleteButton.tabIndex = -1;
+    this.deleteButton.innerHTML = DELETE_ICON;
+
+    this.handleDeleteClick = () => this.#deleteNode();
+    this.deleteButton.addEventListener("click", this.handleDeleteClick);
+    container.appendChild(this.deleteButton);
+
+    this.appendChild(container);
+  }
+
+  #deleteNode() {
+    this.editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(this);
+      node?.remove();
+    });
+  }
+}
+
 class TableController {
   constructor(editorElement) {
     this.editor = editorElement.editor;
@@ -5931,20 +6546,22 @@ var TableIcons = {
 
   "toggle-column":
     `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6533 17.9922C14.4097 17.9154 15 17.2767 15 16.5L15 3L14.9922 2.84668C14.9205 2.14069 14.3593 1.57949 13.6533 1.50781L13.5 1.5L4.5 1.5L4.34668 1.50781C3.59028 1.58461 3 2.22334 3 3L3 16.5C3 17.2767 3.59028 17.9154 4.34668 17.9922L4.5 18L13.5 18L13.6533 17.9922ZM9 3L13.5 3L13.5 16.5L9 16.5L9 3Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6533 17.9922C14.4097 17.9154 15 17.2767 15 16.5L15 3L14.9922 2.84668C14.9205 2.14069 14.3593 1.57949 13.6533 1.50781L13.5 1.5L4.5 1.5L4.34668 1.50781C3.59028 1.58461 3 2.22334 3 3L3 16.5C3 17.2767 3.59028 17.9154 4.34668 17.9922L4.5 18L13.5 18L13.6533 17.9922ZM9 3L13.5 3L13.5 16.5L9 16.5L9 3Z"/>
     </svg>`,
 
   "delete-table":
-    `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
+    `<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 TableTools extends HTMLElement {
   connectedCallback() {
     this.tableController = new TableController(this.#editorElement);
+    this.classList.add("lexxy-floating-controls");
 
     this.#setUpButtons();
+    this.#hide();
     this.#monitorForTableSelection();
     this.#registerKeyboardShortcuts();
   }
@@ -5982,7 +6599,7 @@ class TableTools extends HTMLElement {
   }
 
   #createButtonsContainer(childType, setCountProperty, moreMenu) {
-    const container = createElement("div", { className: `lexxy-table-control lexxy-table-control--${childType}` });
+    const container = createElement("div", { className: `lexxy-floating-controls__group lexxy-table-control lexxy-table-control--${childType}` });
 
     const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
     const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
@@ -6021,7 +6638,7 @@ class TableTools extends HTMLElement {
   }
 
   #createMoreMenuSection(childType) {
-    const section = createElement("div", { className: "lexxy-table-control__more-menu-details" });
+    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 });
@@ -6036,7 +6653,7 @@ class TableTools extends HTMLElement {
   }
 
   #createDeleteTableButton() {
-    const container = createElement("div", { className: "lexxy-table-control" });
+    const container = createElement("div", { className: "lexxy-table-control lexxy-floating-controls__group" });
 
     const deleteTableButton = this.#createButton("Delete this table?", { action: "delete", childType: "table" });
     deleteTableButton.classList.add("lexxy-table-control__button--delete-table");
@@ -6255,6 +6872,7 @@ function defineElements() {
     "lexxy-highlight-dropdown": HighlightDropdown,
     "lexxy-prompt": LexicalPromptElement,
     "lexxy-code-language-picker": CodeLanguagePicker,
+    "lexxy-node-delete-button": NodeDeleteButton,
     "lexxy-table-tools": TableTools,
   };
 
@@ -6268,4 +6886,4 @@ const configure = Lexxy.configure;
 // Pushing elements definition to after the current call stack to allow global configuration to take place first
 setTimeout(defineElements, 0);
 
-export { ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, configure };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, configure };