@37signals/lexxy 0.8.2-beta → 0.8.6-beta

package/dist/lexxy.esm.js

@@ -9,21 +9,21 @@ import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createNodeSelection, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $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_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, ElementNode, $splitNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
-import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, $createListNode, registerList } from '@lexical/list';
+import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
 import { registerPlainText } from '@lexical/plain-text';
-import { RichTextExtension, $createQuoteNode, $isQuoteNode, $createHeadingNode, $isHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
-import { $isCodeNode, CodeHighlightNode, $isCodeHighlightNode, CodeNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, 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, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
+import { createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
-import { $getNearestNodeOfType, $wrapNodeInElement, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 
@@ -81,7 +81,9 @@ const presets = new Configuration({
     markdown: true,
     multiLine: true,
     richText: true,
-    toolbar: true,
+    toolbar: {
+      upload: "both"
+    },
     highlight: {
       buttons: {
         color: range(1, 9).map(n => `var(--highlight-${n})`),
@@ -260,11 +262,37 @@ var ToolbarIcons = {
     <path d="M9.2981 1.91602C10.111 1.91604 10.9109 2.02122 11.6975 2.23096C12.4855 2.44111 13.1683 2.74431 13.7417 3.14429L13.8655 3.23071L13.8083 3.36987L13.1726 4.91235L13.0869 5.1189L12.8987 4.99878C12.3487 4.64881 11.761 4.38633 11.1365 4.21143L11.1328 4.20996C10.585 4.04564 10.0484 3.95419 9.52295 3.93384L9.2981 3.92944C8.22329 3.92944 7.44693 4.12611 6.94043 4.49121C6.44619 4.85665 6.20874 5.31616 6.20874 5.88135L6.21533 6.03296C6.24495 6.37662 6.37751 6.65526 6.61011 6.87964L6.72144 6.97632C6.98746 7.19529 7.30625 7.37584 7.68018 7.51538L8.05151 7.63184C8.45325 7.75061 8.94669 7.87679 9.53247 8.01123L9.53467 8.01196C10.1213 8.15305 10.6426 8.29569 11.0991 8.4375H15C15.5178 8.4375 15.9375 8.85723 15.9375 9.375C15.9375 9.89277 15.5178 10.3125 15 10.3125H3C2.48223 10.3125 2.0625 9.89277 2.0625 9.375C2.0625 8.85723 2.48223 8.4375 3 8.4375H4.93726C4.83783 8.34526 4.74036 8.24896 4.64795 8.146L4.64502 8.14233C4.1721 7.58596 3.94482 6.85113 3.94482 5.95825C3.94483 5.20441 4.14059 4.51965 4.53369 3.90967L4.53516 3.90747C4.94397 3.29427 5.55262 2.81114 6.34863 2.45288C7.15081 2.0919 8.13683 1.91602 9.2981 1.91602Z"/>
   </svg>`,
 
+  "underline":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 14C14.5523 14 15 14.4477 15 15C15 15.5523 14.5523 16 14 16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H14Z"/>
+    <path d="M12.625 1.59375C13.25 1.59375 13.625 1.97656 13.625 2.64062V9.02344C13.625 11.4844 11.8516 13.1875 8.99219 13.1875C6.14062 13.1875 4.35938 11.4844 4.35938 9.02344V2.64062C4.35938 1.97656 4.74219 1.59375 5.36719 1.59375C6 1.59375 6.375 1.97656 6.375 2.64062V8.84375C6.375 10.3828 7.32031 11.4297 8.99219 11.4297C10.6641 11.4297 11.6172 10.3828 11.6172 8.84375V2.64062C11.6172 1.97656 11.9922 1.59375 12.625 1.59375Z"/>
+  </svg>`,
+
   "heading":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <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>`,
 
+  "h2":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.6445 4.19824C15.5244 4.19824 16.8984 5.34668 16.8984 6.91211C16.8984 7.8759 16.4335 8.7237 15.292 9.84473L13.3438 11.8135V11.9092H16.1875C16.8232 11.9092 17.2197 12.251 17.2197 12.8115C17.2196 13.3651 16.83 13.7002 16.1875 13.7002H11.5117C10.8487 13.7002 10.4112 13.3241 10.4111 12.75C10.4111 12.3399 10.6368 11.9843 11.3203 11.3145L13.6855 8.88086C14.4169 8.13583 14.7245 7.64349 14.7246 7.12402C14.7246 6.4541 14.2393 6.00293 13.5215 6.00293C12.9404 6.00293 12.5166 6.29688 12.2158 6.90527C11.9151 7.37002 11.6552 7.54785 11.2588 7.54785C10.7188 7.54785 10.3429 7.17861 10.3428 6.65918C10.3428 5.3877 11.7783 4.19824 13.6445 4.19824Z"/>
+  </svg>`,
+
+  "h3":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.5967 4.19824C15.5928 4.19824 16.9873 5.23047 16.9873 6.7002C16.9872 7.705 16.2421 8.60059 15.2988 8.7168V8.86719C16.4199 8.94923 17.2607 9.89942 17.2607 11.0889C17.2606 12.7362 15.7362 13.9053 13.583 13.9053C11.6827 13.9053 10.1925 12.873 10.1924 11.7041C10.1924 11.1846 10.5547 10.8154 11.0537 10.8154C11.3818 10.8154 11.6553 10.9727 11.9629 11.3555C12.3799 11.9159 12.92 12.2031 13.583 12.2031C14.4853 12.2031 15.0731 11.7313 15.0732 11C15.0732 10.2754 14.4785 9.7832 13.5898 9.7832H13.0361C12.5645 9.7832 12.2159 9.4208 12.2158 8.92188C12.2158 8.44336 12.5576 8.07422 13.0361 8.07422H13.5693C14.3075 8.07422 14.8544 7.60928 14.8545 6.97363C14.8545 6.33789 14.3213 5.90039 13.5557 5.90039C12.9678 5.90039 12.5029 6.16016 12.0859 6.71387C11.8399 7.03508 11.5527 7.17871 11.1973 7.17871C10.671 7.17871 10.295 6.82314 10.2949 6.31738C10.2949 5.18945 11.751 4.19824 13.5967 4.19824ZM8.0332 4.30078C8.75781 4.30078 9.16797 4.74512 9.16797 5.51758V12.5518C9.1679 13.3241 8.75776 13.7686 8.0332 13.7686C7.30865 13.7686 6.90534 13.3309 6.90527 12.5518V9.87207H3.48047V12.5518C3.4804 13.3241 3.07026 13.7686 2.3457 13.7686C1.62115 13.7686 1.21784 13.3309 1.21777 12.5518V5.51758C1.21777 4.73828 1.62109 4.30078 2.3457 4.30078C3.07031 4.30078 3.48047 4.74512 3.48047 5.51758V8.07422H6.90527V5.51758C6.90527 4.73828 7.30859 4.30078 8.0332 4.30078Z"/>
+  </svg>`,
+
+  "h4":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.6357 4.22559C15.7432 4.22559 16.4336 4.80664 16.4336 5.73633V10.3164H16.7275C17.2881 10.3164 17.6436 10.6787 17.6436 11.2256C17.6435 11.7655 17.3017 12.1006 16.7275 12.1006H16.4336V12.6611C16.4335 13.3515 16.0234 13.7891 15.374 13.7891C14.7247 13.7891 14.3282 13.3583 14.3281 12.6611V12.1006H11.04C10.2335 12.1006 9.76863 11.6766 9.76855 10.918C9.76855 10.5762 9.85064 10.3026 10.1104 9.74219C10.7666 8.42289 11.5733 7.0146 12.5713 5.54492C13.2549 4.56738 13.7812 4.22559 14.6357 4.22559ZM7.88965 4.30078C8.61426 4.30078 9.02441 4.74512 9.02441 5.51758V12.5518C9.02435 13.3241 8.6142 13.7686 7.88965 13.7686C7.1651 13.7686 6.76178 13.3309 6.76172 12.5518V9.87207H3.33691V12.5518C3.33685 13.3241 2.9267 13.7686 2.20215 13.7686C1.4776 13.7686 1.07428 13.3309 1.07422 12.5518V5.51758C1.07422 4.73828 1.47754 4.30078 2.20215 4.30078C2.92676 4.30078 3.33691 4.74512 3.33691 5.51758V8.07422H6.76172V5.51758C6.76172 4.73828 7.16504 4.30078 7.88965 4.30078ZM14.2188 6.07812C13.6035 7.02841 12.2158 9.48929 11.7988 10.2686V10.3164H14.3281V6.07812H14.2188Z"/>
+  </svg>`,
+
+  "paragraph":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13C2 12.4477 2.44772 12 3 12H9ZM15 8C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H3C2.44772 10 2 9.55228 2 9C2 8.44772 2.44772 8 3 8H15ZM15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H15Z"/>
+  </svg>`,
+
   "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"/>
@@ -300,6 +328,11 @@ var ToolbarIcons = {
     <path d="M2.84155 6V3.01367H2.79053L1.85596 3.64478V2.79614L2.84155 2.12476H3.82715V6H2.84155Z"/>
   </svg>`,
 
+  "image":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 2C15.6569 2 17 3.34315 17 5V13C17 14.6569 15.6569 16 14 16H4C2.34315 16 1 14.6569 1 13V5C1 3.34315 2.34315 2 4 2H14ZM3.06348 13.3496C3.2053 13.7294 3.57078 14 4 14H13.5859L11 11.4141L9.70703 12.707C9.31651 13.0976 8.68349 13.0976 8.29297 12.707C7.90244 12.3165 7.90244 11.6835 8.29297 11.293L8.58594 11L7 9.41406L3.06348 13.3496ZM4 4C3.44772 4 3 4.44772 3 5V10.5859L6.29297 7.29297L6.36914 7.22461C6.76191 6.90427 7.34092 6.92686 7.70703 7.29297L10 9.58594L10.293 9.29297L10.3691 9.22461C10.7619 8.90427 11.3409 8.92686 11.707 9.29297L15 12.5859V5C15 4.44772 14.5523 4 14 4H4ZM12.5 5C13.3284 5 14 5.67157 14 6.5C14 7.32843 13.3284 8 12.5 8C11.6716 8 11 7.32843 11 6.5C11 5.67157 11.6716 5 12.5 5Z"/>
+  </svg>`,
+
   "attachment":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <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"/>
@@ -360,6 +393,14 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
+  configure(config) {
+    if (typeof config === "object" && config !== null) {
+      for (const [ button, value ] of Object.entries(config)) {
+        this.setAttribute(`data-${button}`, value);
+      }
+    }
+  }
+
   setEditor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
@@ -525,19 +566,29 @@ class LexicalToolbarElement extends HTMLElement {
     const anchorNode = selection.anchor.getNode();
     if (!anchorNode.getParent()) { return }
 
-    const { isBold, isItalic, isStrikethrough, isHighlight, isInLink, isInQuote, isInHeading,
-      isInCode, isInList, listType, isInTable } = this.selection.getFormat();
+    const { isBold, isItalic, isStrikethrough, isUnderline, isHighlight, isInLink, isInQuote, isInHeading,
+      headingTag, isInCode, isInList, listType, isInTable } = this.selection.getFormat();
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
+
+    this.#setButtonPressed("format", isInHeading || isStrikethrough || isUnderline);
+    this.#setButtonPressed("paragraph", !isInHeading);
+    this.#setButtonPressed("heading-large", headingTag === "h2");
+    this.#setButtonPressed("heading-medium", headingTag === "h3");
+    this.#setButtonPressed("heading-small", headingTag === "h4");
     this.#setButtonPressed("strikethrough", isStrikethrough);
+    this.#setButtonPressed("underline", isUnderline);
+
+    this.#setButtonPressed("lists", isInList);
+    this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
+    this.#setButtonPressed("ordered-list", isInList && listType === "number");
+
     this.#setButtonPressed("highlight", isHighlight);
     this.#setButtonPressed("link", isInLink);
     this.#setButtonPressed("quote", isInQuote);
-    this.#setButtonPressed("heading", isInHeading);
     this.#setButtonPressed("code", isInCode);
-    this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
-    this.#setButtonPressed("ordered-list", isInList && listType === "number");
+
     this.#setButtonPressed("table", isInTable);
 
     this.#updateUndoRedoButtonStates();
@@ -632,7 +683,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   get #buttons() {
-    return Array.from(this.querySelectorAll(":scope > button"))
+    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow='true'])"))
   }
 
   get #focusableItems() {
@@ -645,6 +696,14 @@ class LexicalToolbarElement extends HTMLElement {
 
   static get defaultTemplate() {
     return `
+    <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadAttachments" data-prevent-overflow="true" title="Add images">
+      ${ToolbarIcons.image}
+    </button>
+
+    <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="file" data-command="uploadAttachments" title="Upload files">
+      ${ToolbarIcons.attachment}
+    </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">
         ${ToolbarIcons.bold}
       </button>
@@ -653,15 +712,49 @@ class LexicalToolbarElement extends HTMLElement {
       ${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>
+      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
+        <summary class="lexxy-editor__toolbar-button" name="format" title="Text formatting">
+          ${ToolbarIcons.heading}
+        </summary>
+        <div class="lexxy-editor__toolbar-dropdown-list">
+          <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph">
+            ${ToolbarIcons.paragraph} <span>Normal</span>
+          </button>
+          <button type="button" name="heading-large" data-command="setFormatHeadingLarge" title="Large heading">
+            ${ToolbarIcons.h2} <span>Large Heading</span>
+          </button>
+          <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading">
+            ${ToolbarIcons.h3} <span>Medium Heading</span>
+          </button>
+          <button type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
+            ${ToolbarIcons.h4} <span>Small Heading</span>
+          </button>
+          <div class="separator" role="separator"></div>
+          <button type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
+            ${ToolbarIcons.strikethrough} <span>Strikethrough</span>
+          </button>
+          <button type="button" name="underline" data-command="underline" title="Underline">
+            ${ToolbarIcons.underline} <span>Underline</span>
+          </button>
+        </div>
+      </details>
 
-      <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">
+      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
+        <summary class="lexxy-editor__toolbar-button" name="lists" title="Lists">
+          ${ToolbarIcons.ul}
+        </summary>
+        <div class="lexxy-editor__toolbar-dropdown-list">
+          <button type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
+            ${ToolbarIcons.ul} <span>Bullets</span>
+          </button>
+          <button type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
+            ${ToolbarIcons.ol} <span>Numbers</span>
+          </button>
+        </div>
+      </details>
+
+      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
           ${ToolbarIcons.highlight}
         </summary>
@@ -694,18 +787,6 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.code}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
-        ${ToolbarIcons.ul}
-      </button>
-
-      <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">
-        ${ToolbarIcons.attachment}
-      </button>
-
       <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
         ${ToolbarIcons.table}
       </button>
@@ -713,9 +794,9 @@ class LexicalToolbarElement extends HTMLElement {
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
         ${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">
         ${ToolbarIcons.undo}
       </button>
@@ -1032,6 +1113,149 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 }
 
+function bytesToHumanSize(bytes) {
+  if (bytes === 0) return "0 B"
+  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  return `${ value.toFixed(2) } ${ sizes[i] }`
+}
+
+function extractFileName(string) {
+  return string.split("/").pop()
+}
+
+// The content attribute is raw HTML (matching Trix/ActionText). Older Lexxy
+// versions JSON-encoded it, so try JSON.parse first for backward compatibility.
+function parseAttachmentContent(content) {
+  try {
+    return JSON.parse(content)
+  } catch {
+    return content
+  }
+}
+
+class CustomActionTextAttachmentNode extends DecoratorNode {
+  static getType() {
+    return "custom_action_text_attachment"
+  }
+
+  static clone(node) {
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  }
+
+  static importDOM() {
+    return {
+      [this.TAG_NAME]: (element) => {
+        if (!element.getAttribute("content")) {
+          return null
+        }
+
+        return {
+          conversion: (attachment) => {
+            // Preserve initial space if present since Lexical removes it
+            const nodes = [];
+            const previousSibling = attachment.previousSibling;
+            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
+
+            const innerHtml = parseAttachmentContent(attachment.getAttribute("content"));
+
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml,
+              plainText: attachment.textContent.trim() || extractPlainTextFromHtml(innerHtml),
+              contentType: attachment.getAttribute("content-type")
+            }));
+
+            const nextSibling = attachment.nextSibling;
+            if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && /^\s/.test(nextSibling.textContent)) {
+              nodes.push($createTextNode(" "));
+            }
+
+            return { node: nodes }
+          },
+          priority: 2
+        }
+      }
+    }
+  }
+
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+    super(key);
+
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
+    this.sgid = sgid;
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
+    this.innerHtml = innerHtml;
+    this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
+  }
+
+  createDOM() {
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+
+    figure.insertAdjacentHTML("beforeend", this.innerHtml);
+
+    const deleteButton = createElement("lexxy-node-delete-button");
+    figure.appendChild(deleteButton);
+
+    return figure
+  }
+
+  updateDOM() {
+    return false
+  }
+
+  getTextContent() {
+    return "\ufeff"
+  }
+
+  getReadableTextContent() {
+    return this.plainText || `[${this.contentType}]`
+  }
+
+  isInline() {
+    return true
+  }
+
+  exportDOM() {
+    const attachment = createElement(this.tagName, {
+      sgid: this.sgid,
+      content: this.innerHtml,
+      "content-type": this.contentType
+    });
+
+    return { element: attachment }
+  }
+
+  exportJSON() {
+    return {
+      type: "custom_action_text_attachment",
+      version: 1,
+      tagName: this.tagName,
+      sgid: this.sgid,
+      contentType: this.contentType,
+      innerHtml: this.innerHtml,
+      plainText: this.plainText
+    }
+  }
+
+  decorate() {
+    return null
+  }
+}
+
 const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
 
 function $createNodeSelectionWith(...nodes) {
@@ -1099,6 +1323,71 @@ function extendConversion(nodeKlass, conversionName, callback = (output => outpu
   }
 }
 
+function $isCursorOnLastLine(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+  const children = elementNode.getChildren();
+  if (children.length === 0) return true
+
+  const lastChild = children[children.length - 1];
+
+  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
+  if (anchorNode === lastChild) return true
+
+  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
+  if (lastLineBreakIndex === -1) return true
+
+  const anchorIndex = children.indexOf(anchorNode);
+  return anchorIndex > lastLineBreakIndex
+}
+
+function $isBlankNode(node) {
+  if (node.getTextContent().trim() !== "") return false
+
+  const children = node.getChildren?.();
+  if (!children || children.length === 0) return true
+
+  return children.every(child => {
+    if ($isLineBreakNode(child)) return true
+    return $isBlankNode(child)
+  })
+}
+
+function $trimTrailingBlankNodes(parent) {
+  for (const child of $lastToFirstIterator(parent)) {
+    if ($isBlankNode(child)) {
+      child.remove();
+    } else {
+      break
+    }
+  }
+}
+
+// A list item is structurally empty if it contains no meaningful content.
+// Unlike getTextContent().trim() === "", this walks descendants to ensure
+// decorator nodes (mentions, attachments whose getTextContent() may return
+// invisible characters like \ufeff) are treated as non-empty content.
+function $isListItemStructurallyEmpty(listItem) {
+  const children = listItem.getChildren();
+  for (const child of children) {
+    if ($isDecoratorNode(child)) return false
+    if ($isLineBreakNode(child)) continue
+    if ($isTextNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    } else if ($isElementNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    }
+  }
+  return true
+}
+
+function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
+  return $isTextNode(node)
+    && node.getTextContent() === " "
+    && index === childCount - 1
+    && previousNode instanceof CustomActionTextAttachmentNode
+}
+
 function isSelectionHighlighted(selection) {
   if (!$isRangeSelection(selection)) return false
 
@@ -1209,6 +1498,12 @@ const hasPastedStylesState = createState("hasPastedStyles", {
   parse: (value) => value || false
 });
 
+// Stores pending highlight ranges extracted during HTML import, keyed by CodeNode key.
+// After the code retokenizer creates fresh CodeHighlightNodes, a mutation listener
+// reads this map and re-applies the highlight styles. Scoped per editor instance
+// so entries don't leak across editors or outlive a torn-down editor.
+const pendingCodeHighlights = new WeakMap();
+
 class HighlightExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsRichText
@@ -1231,12 +1526,20 @@ class HighlightExtension extends LexxyExtension {
         // keep the ref to the canonicalizers for optimized css conversion
         const canonicalizers = buildCanonicalizers(config);
 
+        // Register the <pre> converter directly in the conversion cache so it
+        // coexists with other extensions' "pre" converters (the extension-level
+        // html.import uses Object.assign, which means only one "pre" per key).
+        $registerPreConversion(editor);
+
         return mergeRegister(
           editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, (styles) => $toggleSelectionStyles(editor, styles), COMMAND_PRIORITY_NORMAL),
           editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(editor, BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
           editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
           editor.registerNodeTransform(CodeHighlightNode, $syncHighlightWithCodeHighlightNode),
-          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers))
+          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers)),
+          editor.registerMutationListener(CodeNode, (mutations) => {
+            $applyPendingCodeHighlights(editor, mutations);
+          }, { skipInitialization: true })
         )
       }
     });
@@ -1266,48 +1569,247 @@ function $markConversion() {
   }
 }
 
-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"] ])
-  ]
+// Register a custom <pre> converter directly in the editor's HTML conversion
+// cache. We can't use the extension-level html.import because Object.assign
+// merges all extensions' converters by tag, and a later extension (e.g.
+// TrixContentExtension) would overwrite ours.
+function $registerPreConversion(editor) {
+  if (!editor._htmlConversions) return
+
+  let preEntries = editor._htmlConversions.get("pre");
+  if (!preEntries) {
+    preEntries = [];
+    editor._htmlConversions.set("pre", preEntries);
+  }
+  preEntries.push($preConversionWithHighlightsFactory(editor));
 }
 
-function $toggleSelectionStyles(editor, styles) {
-  const selection = $getSelection();
-  if (!$isRangeSelection(selection)) return
+// Returns a <pre> converter factory scoped to a specific editor instance.
+// The factory extracts highlight ranges from <mark> elements before the code
+// retokenizer can destroy them. The ranges are stored in pendingCodeHighlights
+// and applied after retokenization via a mutation listener.
+function $preConversionWithHighlightsFactory(editor) {
+  return function $preConversionWithHighlights(domNode) {
+    const highlights = extractHighlightRanges(domNode);
+    if (highlights.length === 0) return null
 
-  const patch = {};
-  for (const property in styles) {
-    const oldValue = $getSelectionStyleValueForProperty(selection, property);
-    patch[property] = toggleOrReplace(oldValue, styles[property]);
+    return {
+      conversion: (domNode) => {
+        const language = domNode.getAttribute("data-language");
+        const codeNode = $createCodeNode(language);
+        $getPendingHighlights(editor).set(codeNode.getKey(), highlights);
+        return { node: codeNode }
+      },
+      priority: 2
+    }
   }
+}
 
-  if ($selectionIsInCodeBlock(selection)) {
-    $patchCodeHighlightStyles(editor, selection, patch);
-  } else {
-    $patchStyleText(selection, patch);
+// Walk the DOM tree inside a <pre> element and build a list of
+// { start, end, style } ranges for every <mark> element found.
+function extractHighlightRanges(preElement) {
+  const ranges = [];
+  const codeElement = preElement.querySelector("code") || preElement;
+
+  let offset = 0;
+
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      offset += node.textContent.length;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      // <br> maps to a LineBreakNode (1 character) in Lexical
+      if (node.tagName === "BR") {
+        offset += 1;
+        return
+      }
+
+      const isMark = node.tagName === "MARK";
+      const start = offset;
+
+      for (const child of node.childNodes) {
+        walk(child);
+      }
+
+      if (isMark) {
+        const style = extractHighlightStyleFromElement(node);
+        if (style) {
+          ranges.push({ start, end: offset, style });
+        }
+      }
+    }
   }
+
+  for (const child of codeElement.childNodes) {
+    walk(child);
+  }
+
+  return ranges
 }
 
-function $selectionIsInCodeBlock(selection) {
-  const nodes = selection.getNodes();
-  return nodes.some((node) => {
-    const parent = $isCodeHighlightNode(node) ? node.getParent() : node;
-    return $isCodeNode(parent)
-  })
+function $getPendingHighlights(editor) {
+  let map = pendingCodeHighlights.get(editor);
+  if (!map) {
+    map = new Map();
+    pendingCodeHighlights.set(editor, map);
+  }
+  return map
 }
 
-function $patchCodeHighlightStyles(editor, selection, patch) {
-  // Capture selection state and node keys before the nested update
-  const nodeKeys = selection.getNodes()
-    .filter((node) => $isCodeHighlightNode(node))
-    .map((node) => ({
-      key: node.getKey(),
-      startOffset: $getNodeSelectionOffsets(node, selection)[0],
-      endOffset: $getNodeSelectionOffsets(node, selection)[1],
-      textSize: node.getTextContentSize()
-    }));
+function extractHighlightStyleFromElement(element) {
+  const styles = {};
+  if (element.style?.color) styles.color = element.style.color;
+  if (element.style?.backgroundColor) styles["background-color"] = element.style.backgroundColor;
+  const css = getCSSFromStyleObject(styles);
+  return css.length > 0 ? css : null
+}
+
+// Called from the CodeNode mutation listener after the retokenizer has
+// replaced TextNodes with fresh CodeHighlightNodes.
+function $applyPendingCodeHighlights(editor, mutations) {
+  const pending = $getPendingHighlights(editor);
+  const keysToProcess = [];
+
+  for (const [ key, type ] of mutations) {
+    if (type !== "destroyed" && pending.has(key)) {
+      keysToProcess.push(key);
+    }
+  }
+
+  if (keysToProcess.length === 0) return
+
+  // Use a deferred update so the retokenizer has finished its
+  // skipTransforms update before we touch the nodes.
+  editor.update(() => {
+    for (const key of keysToProcess) {
+      const highlights = pending.get(key);
+      pending.delete(key);
+      if (!highlights) continue
+
+      const codeNode = $getNodeByKey(key);
+      if (!codeNode || !$isCodeNode(codeNode)) continue
+
+      $applyHighlightRangesToCodeNode(codeNode, highlights);
+    }
+  }, { skipTransforms: true, discrete: true });
+}
+
+// Apply saved highlight ranges to the CodeHighlightNode children
+// of a CodeNode, splitting nodes at range boundaries as needed.
+// We can't use TextNode.splitText() because it creates TextNode
+// instances (not CodeHighlightNodes) for the split parts. Instead,
+// we manually create CodeHighlightNode replacements.
+function $applyHighlightRangesToCodeNode(codeNode, highlights) {
+  if (highlights.length === 0) return
+
+  for (const { start: hlStart, end: hlEnd, style } of highlights) {
+    // Rebuild the child-to-offset mapping for each highlight range because
+    // earlier ranges may have split nodes, invalidating previous mappings.
+    const childRanges = $buildChildRanges(codeNode);
+
+    for (const { node, start: nodeStart, end: nodeEnd } of childRanges) {
+      // Check if this child overlaps with the highlight range
+      const overlapStart = Math.max(hlStart, nodeStart);
+      const overlapEnd = Math.min(hlEnd, nodeEnd);
+
+      if (overlapStart >= overlapEnd) continue
+
+      // Calculate offsets relative to this node
+      const relStart = overlapStart - nodeStart;
+      const relEnd = overlapEnd - nodeStart;
+      const nodeLength = nodeEnd - nodeStart;
+
+      if (relStart === 0 && relEnd === nodeLength) {
+        // Entire node is highlighted - apply style directly
+        node.setStyle(style);
+        $setCodeHighlightFormat(node, true);
+      } else {
+        // Need to split: replace the node with 2 or 3 CodeHighlightNodes
+        const text = node.getTextContent();
+        const highlightType = node.getHighlightType();
+        const replacements = [];
+
+        if (relStart > 0) {
+          replacements.push($createCodeHighlightNode(text.slice(0, relStart), highlightType));
+        }
+
+        const styledNode = $createCodeHighlightNode(text.slice(relStart, relEnd), highlightType);
+        styledNode.setStyle(style);
+        $setCodeHighlightFormat(styledNode, true);
+        replacements.push(styledNode);
+
+        if (relEnd < nodeLength) {
+          replacements.push($createCodeHighlightNode(text.slice(relEnd), highlightType));
+        }
+
+        for (const replacement of replacements) {
+          node.insertBefore(replacement);
+        }
+        node.remove();
+      }
+    }
+  }
+}
+
+function $buildChildRanges(codeNode) {
+  const childRanges = [];
+  let charOffset = 0;
+
+  for (const child of codeNode.getChildren()) {
+    if ($isCodeHighlightNode(child)) {
+      const text = child.getTextContent();
+      childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
+      charOffset += text.length;
+    } else {
+      // LineBreakNode, TabNode - count as 1 character each (\n, \t)
+      charOffset += 1;
+    }
+  }
+
+  return childRanges
+}
+
+function buildCanonicalizers(config) {
+  return [
+    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
+  ]
+}
+
+function $toggleSelectionStyles(editor, styles) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return
+
+  const patch = {};
+  for (const property in styles) {
+    const oldValue = $getSelectionStyleValueForProperty(selection, property);
+    patch[property] = toggleOrReplace(oldValue, styles[property]);
+  }
+
+  if ($selectionIsInCodeBlock(selection)) {
+    $patchCodeHighlightStyles(editor, selection, patch);
+  } else {
+    $patchStyleText(selection, patch);
+  }
+}
+
+function $selectionIsInCodeBlock(selection) {
+  const nodes = selection.getNodes();
+  return nodes.some((node) => {
+    const parent = $isCodeHighlightNode(node) ? node.getParent() : node;
+    return $isCodeNode(parent)
+  })
+}
+
+function $patchCodeHighlightStyles(editor, selection, patch) {
+  // Capture selection state and node keys before the nested update
+  const nodeKeys = selection.getNodes()
+    .filter((node) => $isCodeHighlightNode(node))
+    .map((node) => ({
+      key: node.getKey(),
+      startOffset: $getNodeSelectionOffsets(node, selection)[0],
+      endOffset: $getNodeSelectionOffsets(node, selection)[1],
+      textSize: node.getTextContentSize()
+    }));
 
   // Use skipTransforms to prevent the code highlighting system from
   // re-tokenizing and wiping out the style changes we apply.
@@ -1445,11 +1947,15 @@ const COMMANDS = [
   "bold",
   "italic",
   "strikethrough",
+  "underline",
   "link",
   "unlink",
   "toggleHighlight",
   "removeHighlight",
-  "rotateHeadingFormat",
+  "setFormatHeadingLarge",
+  "setFormatHeadingMedium",
+  "setFormatHeadingSmall",
+  "setFormatParagraph",
   "insertUnorderedList",
   "insertOrderedList",
   "insertQuoteBlock",
@@ -1498,6 +2004,10 @@ class CommandDispatcher {
     this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
   }
 
+  dispatchUnderline() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+  }
+
   dispatchToggleHighlight(styles) {
     this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
   }
@@ -1533,7 +2043,7 @@ class CommandDispatcher {
     const anchorNode = selection.anchor.getNode();
 
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
-      this.contents.unwrapSelectedListItems();
+      this.contents.applyParagraphFormat();
     } else {
       this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
     }
@@ -1546,26 +2056,72 @@ class CommandDispatcher {
     const anchorNode = selection.anchor.getNode();
 
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
-      this.contents.unwrapSelectedListItems();
+      this.contents.applyParagraphFormat();
     } else {
       this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
     }
   }
 
   dispatchInsertQuoteBlock() {
-    if (!this.contents.wrapSelectedSoftBreakLines(() => $createQuoteNode())) {
-      this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
-    }
+    this.contents.toggleBlockquote();
   }
 
   dispatchInsertCodeBlock() {
-    this.editor.update(() => {
-      if (this.selection.hasSelectedWordsInSingleLine) {
-        this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+    if (this.selection.hasSelectedWordsInSingleLine) {
+      this.#toggleInlineCode();
+    } else {
+      this.contents.toggleCodeBlock();
+    }
+  }
+
+  #toggleInlineCode() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    if (!selection.isCollapsed()) {
+      const textNodes = selection.getNodes().filter($isTextNode);
+      const applyingCode = !textNodes.every((node) => node.hasFormat("code"));
+
+      if (applyingCode) {
+        this.#stripInlineFormattingFromSelection(selection, textNodes);
+      }
+    }
+
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+  }
+
+  // Strip all inline formatting (bold, italic, etc.) from the selected text
+  // nodes so that applying code produces a single merged <code> element instead
+  // of one per differently-formatted span.
+  #stripInlineFormattingFromSelection(selection, textNodes) {
+    const isBackward = selection.isBackward();
+    const startPoint = isBackward ? selection.focus : selection.anchor;
+    const endPoint = isBackward ? selection.anchor : selection.focus;
+
+    for (let i = 0; i < textNodes.length; i++) {
+      const node = textNodes[i];
+      if (node.getFormat() === 0) continue
+
+      const isFirst = i === 0;
+      const isLast = i === textNodes.length - 1;
+      const startOffset = isFirst && startPoint.type === "text" ? startPoint.offset : 0;
+      const endOffset = isLast && endPoint.type === "text" ? endPoint.offset : node.getTextContentSize();
+
+      if (startOffset === 0 && endOffset === node.getTextContentSize()) {
+        node.setFormat(0);
       } else {
-        this.contents.toggleNodeWrappingAllSelectedLines((node) => $isCodeNode(node), () => new CodeNode("plain"));
+        const splits = node.splitText(startOffset, endOffset);
+        const target = startOffset === 0 ? splits[0] : splits[1];
+        target.setFormat(0);
+
+        if (isFirst && startPoint.type === "text") {
+          startPoint.set(target.getKey(), 0, "text");
+        }
+        if (isLast && endPoint.type === "text") {
+          endPoint.set(target.getKey(), endOffset - startOffset, "text");
+        }
       }
-    });
+    }
   }
 
   dispatchInsertHorizontalDivider() {
@@ -1573,35 +2129,20 @@ class CommandDispatcher {
     this.editor.focus();
   }
 
-  dispatchRotateHeadingFormat() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
+  dispatchSetFormatHeadingLarge() {
+    this.contents.applyHeadingFormat("h2");
+  }
 
-    if ($isRootOrShadowRoot(selection.anchor.getNode())) {
-      selection.insertNodes([ $createHeadingNode("h2") ]);
-      return
-    }
+  dispatchSetFormatHeadingMedium() {
+    this.contents.applyHeadingFormat("h3");
+  }
 
-    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";
-      }
-    }
+  dispatchSetFormatHeadingSmall() {
+    this.contents.applyHeadingFormat("h4");
+  }
 
-    if (nextTag) {
-      this.contents.insertNodeWrappingEachSelectedLine(() => $createHeadingNode(nextTag));
-    } else {
-      this.contents.removeFormattingFromSelectedLines();
-    }
+  dispatchSetFormatParagraph() {
+    this.contents.applyParagraphFormat();
   }
 
   dispatchUploadAttachments() {
@@ -1675,6 +2216,8 @@ class CommandDispatcher {
   }
 
   #handleDragEnter(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter++;
     if (this.dragCounter === 1) {
       this.#saveSelectionBeforeDrag();
@@ -1683,6 +2226,8 @@ class CommandDispatcher {
   }
 
   #handleDragLeave(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter--;
     if (this.dragCounter === 0) {
       this.#selectionBeforeDrag = null;
@@ -1691,10 +2236,14 @@ class CommandDispatcher {
   }
 
   #handleDragOver(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
   }
 
   #handleDrop(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
 
     this.dragCounter = 0;
@@ -1728,6 +2277,10 @@ class CommandDispatcher {
     this.#selectionBeforeDrag = null;
   }
 
+  #isInternalDrag(event) {
+    return event.dataTransfer?.types.includes("application/x-lexxy-node-key")
+  }
+
   #handleTabKey(event) {
     if (this.selection.isInsideList) {
       return this.#handleTabForList(event)
@@ -1789,28 +2342,40 @@ function nextFrame() {
   return new Promise(requestAnimationFrame)
 }
 
-function bytesToHumanSize(bytes) {
-  if (bytes === 0) return "0 B"
-  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${ value.toFixed(2) } ${ sizes[i] }`
-}
-
-function extractFileName(string) {
-  return string.split("/").pop()
+function dasherize(value) {
+  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
 }
 
-// Lexxy exports the content attribute as a JSON string (via JSON.stringify),
-// but Trix/ActionText stores it as raw HTML. Try JSON first, fall back to raw.
-function parseAttachmentContent(content) {
+function isUrl(string) {
   try {
-    return JSON.parse(content)
+    new URL(string);
+    return true
   } catch {
-    return content
+    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))
+}
+
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+// Parses a value that may arrive as a boolean or as a string (e.g. from DOM
+// getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
+function parseBoolean(value) {
+  if (typeof value === "string") return value === "true"
+  return Boolean(value)
+}
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
@@ -1891,7 +2456,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
     this.src = src;
-    this.previewable = previewable;
+    this.previewable = parseBoolean(previewable);
     this.altText = altText || "";
     this.caption = caption || "";
     this.contentType = contentType || "";
@@ -1976,6 +2541,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   createAttachmentFigure() {
     const figure = createAttachmentFigure(this.contentType, this.isPreviewableAttachment, this.fileName);
+    figure.draggable = true;
+    figure.dataset.lexicalNodeKey = this.__key;
 
     const deleteButton = createElement("lexxy-node-delete-button");
     figure.appendChild(deleteButton);
@@ -1993,7 +2560,30 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #createDOMForImage(options = {}) {
     const img = createElement("img", { src: this.src, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
-    return img
+
+    if (this.previewable && !this.isPreviewableImage) {
+      img.onerror = () => this.#swapPreviewToFileDOM(img);
+    }
+
+    const container = createElement("div", { className: "attachment__container" });
+    container.appendChild(img);
+    return container
+  }
+
+  #swapPreviewToFileDOM(img) {
+    const figure = img.closest("figure.attachment");
+    if (!figure) return
+
+    figure.className = figure.className.replace("attachment--preview", "attachment--file");
+
+    const container = figure.querySelector(".attachment__container");
+    if (container) container.remove();
+
+    const caption = figure.querySelector("figcaption");
+    if (caption) caption.remove();
+
+    figure.appendChild(this.#createDOMForFile());
+    figure.appendChild(this.#createDOMForNotImage());
   }
 
   get #imageDimensions() {
@@ -2093,6 +2683,7 @@ class Selection {
     this.#listenForNodeSelections();
     this.#processSelectionChangeCommands();
     this.#containEditorFocus();
+    this.#clearStaleInlineCodeFormat();
   }
 
   set current(selection) {
@@ -2192,16 +2783,19 @@ class Selection {
 
     const topLevelElement = anchorNode.getTopLevelElementOrThrow();
     const listType = getListType(anchorNode);
+    const headingNode = this.#getNearestHeadingNode(anchorNode);
 
     return {
       isBold: selection.hasFormat("bold"),
       isItalic: selection.hasFormat("italic"),
       isStrikethrough: selection.hasFormat("strikethrough"),
+      isUnderline: selection.hasFormat("underline"),
       isHighlight: isSelectionHighlighted(selection),
       isInLink: $getNearestNodeOfType(anchorNode, LinkNode) !== null,
       isInQuote: $isQuoteNode(topLevelElement),
-      isInHeading: $isHeadingNode(topLevelElement),
-      isInCode: selection.hasFormat("code") || $getNearestNodeOfType(anchorNode, CodeNode) !== null,
+      isInHeading: headingNode !== null,
+      isInCode: this.#isInCode(selection, anchorNode),
+      headingTag: headingNode?.getTag() ?? null,
       isInList: listType !== null,
       listType,
       isInTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null
@@ -2286,8 +2880,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      if (offset < anchorNode.getTextContentSize()) return null
-      return this.#getNextNodeFromTextEnd(anchorNode)
+      if (offset === anchorNode.getTextContentSize()) return this.#getNextNodeFromTextEnd(anchorNode)
+      if (this.#isCursorOnLastVisualLineOfBlock(anchorNode)) {
+        const topLevelElement = anchorNode.getTopLevelElement();
+        return topLevelElement ? topLevelElement.getNextSibling() : null
+      }
+      return null
     }
 
     if ($isElementNode(anchorNode)) {
@@ -2317,8 +2915,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      if (offset > 0) return null
-      return this.#getPreviousNodeFromTextStart(anchorNode)
+      if (offset === 0) return this.#getPreviousNodeFromTextStart(anchorNode)
+      if (this.#isCursorOnFirstVisualLineOfBlock(anchorNode)) {
+        const topLevelElement = anchorNode.getTopLevelElement();
+        return topLevelElement ? topLevelElement.getPreviousSibling() : null
+      }
+      return null
     }
 
     if ($isElementNode(anchorNode)) {
@@ -2328,6 +2930,53 @@ class Selection {
     return this.#findPreviousSiblingUp(anchorNode)
   }
 
+  // When all inline code text is deleted, Lexical's selection retains the stale
+  // code format flag. Verify the flag is backed by actual code-formatted content:
+  // a code block ancestor or a text node that carries the code format.
+  #isInCode(selection, anchorNode) {
+    if ($getNearestNodeOfType(anchorNode, CodeNode) !== null) return true
+    if (!selection.hasFormat("code")) return false
+
+    return $isTextNode(anchorNode) && anchorNode.hasFormat("code")
+  }
+
+  // After deleting all inline code text, Lexical preserves the code format on
+  // the selection even though no code-formatted content remains. This listener
+  // detects that stale state and clears it so newly typed text won't be
+  // code-formatted.
+  #clearStaleInlineCodeFormat() {
+    this.editor.registerUpdateListener(({ editorState, tags }) => {
+      if (tags.has("history-merge") || tags.has("skip-dom-selection")) return
+
+      let isStale = false;
+
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) return
+        if (!selection.hasFormat("code")) return
+
+        const anchorNode = selection.anchor.getNode();
+        if (this.#isInCode(selection, anchorNode)) return
+
+        isStale = true;
+      });
+
+      if (isStale) {
+        setTimeout(() => {
+          this.editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection) || !selection.hasFormat("code")) return
+
+            const anchorNode = selection.anchor.getNode();
+            if (this.#isInCode(selection, anchorNode)) return
+
+            selection.toggleFormat("code");
+          });
+        }, 0);
+      }
+    });
+  }
+
   get #currentlySelectedKeys() {
     if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
@@ -2511,6 +3160,24 @@ class Selection {
     return anchorNode.getTopLevelElement()
   }
 
+  #getNearestHeadingNode(anchorNode) {
+    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+
+    let headingNode = $isHeadingNode(topLevelElement) ? topLevelElement : null;
+    if (!headingNode) {
+      let current = anchorNode.getParent();
+      while (current) {
+        if ($isHeadingNode(current)) {
+          headingNode = current;
+          break
+        }
+        current = current.getParent();
+      }
+    }
+
+    return headingNode
+  }
+
   #moveToOrCreateNextLine(topLevelElement) {
     const nextSibling = topLevelElement.getNextSibling();
 
@@ -2539,10 +3206,12 @@ class Selection {
   }
 
   #selectDecoratorNodeBeforeDeletion(backwards) {
+    if (backwards && this.#removeEmptyListItem()) return true
+
     const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
     if (!$isDecoratorNode(node)) return false
 
-    if (this.#collapseListItemToParagraph()) return true
+    if (this.#collapseListItemToParagraph(node)) return true
 
     this.#removeEmptyElementAnchorNode();
 
@@ -2550,15 +3219,51 @@ class Selection {
     return Boolean(selection)
   }
 
+  // When backspace is pressed on an empty list item that has siblings,
+  // remove the empty item and place the cursor appropriately. Without this,
+  // Lexical's default collapseAtStart converts the empty item into a paragraph
+  // above the list, causing the cursor to jump away from the list content.
+  //
+  // This only applies when there IS a next sibling — if the empty item is the
+  // last one in the list, Lexical's default (convert to paragraph) provides
+  // the standard "exit list" behavior.
+  #removeEmptyListItem() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+
+    const anchorNode = selection.anchor.getNode();
+    const listItem = $getNearestNodeOfType(anchorNode, ListItemNode);
+    if (!listItem) return false
+
+    if (!$isListItemStructurallyEmpty(listItem)) return false
+
+    const nextSibling = listItem.getNextSibling();
+    if (!nextSibling) return false
+
+    const previousSibling = listItem.getPreviousSibling();
+    if (previousSibling) {
+      previousSibling.selectEnd();
+    } else {
+      nextSibling.selectStart();
+    }
+
+    listItem.remove();
+    return true
+  }
+
   // When the cursor is inside a list item, collapse the list item into a
   // paragraph instead of selecting the decorator. This lets the user
   // delete a list that immediately follows an attachment without the
-  // attachment becoming selected.
-  #collapseListItemToParagraph() {
+  // attachment becoming selected. Only applies when the decorator is
+  // outside the list item (e.g. a block attachment before the list),
+  // not when it's an inline mention inside the list item.
+  #collapseListItemToParagraph(decoratorNode) {
     const anchorNode = $getSelection()?.anchor?.getNode();
     const listItem = anchorNode && $getNearestNodeOfType(anchorNode, ListItemNode);
     if (!listItem) return false
 
+    if (listItem.isParentOf(decoratorNode)) return false
+
     const listNode = $getNearestNodeOfType(listItem, ListNode);
     if (!listNode) return false
 
@@ -2743,53 +3448,83 @@ class Selection {
     }
     return current ? current.getPreviousSibling() : null
   }
-}
-
-function sanitize(html) {
-  return DOMPurify.sanitize(html, buildConfig())
-}
 
-function dasherize(value) {
-  return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
-}
+  #isCursorOnFirstVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "first")
+  }
 
-function isUrl(string) {
-  try {
-    new URL(string);
-    return true
-  } catch {
-    return false
+  #isCursorOnLastVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "last")
   }
-}
 
-function normalizeFilteredText(string) {
-  return string
-    .toLowerCase()
-    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
-}
+  // Check whether the cursor sits on the first or last visual line of its
+  // top-level block by comparing the Y position of the cursor with the Y
+  // position of the block's start (first line) or end (last line).
+  #isCursorOnEdgeLineOfBlock(anchorNode, edge) {
+    const topLevelElement = anchorNode.getTopLevelElement();
+    if (!topLevelElement) return false
 
-function filterMatches(text, potentialMatch) {
-  return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
-}
+    const domElement = this.editor.getElementByKey(topLevelElement.getKey());
+    if (!domElement) return false
 
-function upcaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection?.rangeCount) return false
 
-class EditorConfiguration {
-  #editorElement
-  #config
+    const cursorRect = this.#getReliableRectFromRange(nativeSelection.getRangeAt(0));
+    if (!cursorRect || this.#isRectUnreliable(cursorRect)) return false
 
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-    this.#config = new Configuration(
-      Lexxy.presets.get("default"),
-      Lexxy.presets.get(editorElement.preset),
-      this.#overrides
-    );
+    const edgeRect = this.#getEdgeCharRect(domElement, edge);
+    if (!edgeRect || this.#isRectUnreliable(edgeRect)) return false
+
+    const tolerance = edgeRect.height > 0 ? edgeRect.height * 0.5 : 5;
+    return Math.abs(cursorRect.top - edgeRect.top) < tolerance
   }
 
-  get(path) {
+  // Get a reliable bounding rect for the first or last character in a DOM
+  // element by creating a non-collapsed range around it.
+  #getEdgeCharRect(element, edge) {
+    const walker = document.createTreeWalker(element, 4 /* NodeFilter.SHOW_TEXT */);
+    let textNode;
+
+    if (edge === "first") {
+      textNode = walker.nextNode();
+    } else {
+      while (walker.nextNode()) textNode = walker.currentNode;
+    }
+
+    if (!textNode || textNode.length === 0) return null
+
+    const range = document.createRange();
+    if (edge === "first") {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, 1);
+    } else {
+      range.setStart(textNode, textNode.length - 1);
+      range.setEnd(textNode, textNode.length);
+    }
+
+    return range.getBoundingClientRect()
+  }
+}
+
+function sanitize(html) {
+  return DOMPurify.sanitize(html, buildConfig())
+}
+
+class EditorConfiguration {
+  #editorElement
+  #config
+
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+    this.#config = new Configuration(
+      Lexxy.presets.get("default"),
+      Lexxy.presets.get(editorElement.preset),
+      this.#overrides
+    );
+  }
+
+  get(path) {
     return this.#config.get(path)
   }
 
@@ -2818,504 +3553,6 @@ class EditorConfiguration {
   }
 }
 
-class CustomActionTextAttachmentNode extends DecoratorNode {
-  static getType() {
-    return "custom_action_text_attachment"
-  }
-
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
-  }
-
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
-  }
-
-  static importDOM() {
-
-    return {
-      [this.TAG_NAME]: (element) => {
-        if (!element.getAttribute("content")) {
-          return null
-        }
-
-        return {
-          conversion: (attachment) => {
-            // Preserve initial space if present since Lexical removes it
-            const nodes = [];
-            const previousSibling = attachment.previousSibling;
-            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
-              nodes.push($createTextNode(" "));
-            }
-
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml: parseAttachmentContent(attachment.getAttribute("content")),
-              contentType: attachment.getAttribute("content-type")
-            }));
-
-            nodes.push($createTextNode("\u2060"));
-
-            return { node: nodes }
-          },
-          priority: 2
-        }
-      }
-    }
-  }
-
-  static get TAG_NAME() {
-    return Lexxy.global.get("attachmentTagName")
-  }
-
-  constructor({ tagName, sgid, contentType, innerHtml }, key) {
-    super(key);
-
-    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
-
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
-    this.sgid = sgid;
-    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
-    this.innerHtml = innerHtml;
-  }
-
-  createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
-
-    figure.insertAdjacentHTML("beforeend", this.innerHtml);
-
-    const deleteButton = createElement("lexxy-node-delete-button");
-    figure.appendChild(deleteButton);
-
-    return figure
-  }
-
-  updateDOM() {
-    return false
-  }
-
-  getTextContent() {
-    return "\ufeff"
-  }
-
-  getReadableTextContent() {
-    return this.createDOM().textContent.trim() || `[${this.contentType}]`
-  }
-
-  isInline() {
-    return true
-  }
-
-  exportDOM() {
-    const attachment = createElement(this.tagName, {
-      sgid: this.sgid,
-      content: JSON.stringify(this.innerHtml),
-      "content-type": this.contentType
-    });
-
-    return { element: attachment }
-  }
-
-  exportJSON() {
-    return {
-      type: "custom_action_text_attachment",
-      version: 1,
-      tagName: this.tagName,
-      sgid: this.sgid,
-      contentType: this.contentType,
-      innerHtml: this.innerHtml
-    }
-  }
-
-  decorate() {
-    return null
-  }
-
-}
-
-class FormatEscaper {
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editor = editorElement.editor;
-  }
-
-  monitor() {
-    this.editor.registerCommand(
-      KEY_ENTER_COMMAND,
-      (event) => this.#handleEnterKey(event),
-      COMMAND_PRIORITY_HIGH
-    );
-
-    this.editor.registerCommand(
-      KEY_ARROW_DOWN_COMMAND,
-      (event) => this.#handleArrowDownInCodeBlock(event),
-      COMMAND_PRIORITY_NORMAL
-    );
-  }
-
-  #handleEnterKey(event) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    if (this.#handleCodeBlocks(event, selection)) return true
-
-    const anchorNode = selection.anchor.getNode();
-
-    if (!this.#isInsideBlockquote(anchorNode)) return false
-
-    return this.#handleLists(event, anchorNode)
-      || this.#handleBlockquotes(event, anchorNode)
-  }
-
-  #handleLists(event, anchorNode) {
-    if (this.#shouldEscapeFromEmptyListItem(anchorNode) || this.#shouldEscapeFromEmptyParagraphInListItem(anchorNode)) {
-      event.preventDefault();
-      this.#escapeFromList(anchorNode);
-      return true
-    }
-
-    return false
-  }
-
-  #handleBlockquotes(event, anchorNode) {
-    if (this.#shouldEscapeFromEmptyParagraphInBlockquote(anchorNode)) {
-      event.preventDefault();
-      this.#escapeFromBlockquote(anchorNode);
-      return true
-    }
-
-    return false
-  }
-
-  #isInsideBlockquote(node) {
-    let currentNode = node;
-
-    while (currentNode) {
-      if ($isQuoteNode(currentNode)) {
-        return true
-      }
-      currentNode = currentNode.getParent();
-    }
-
-    return false
-  }
-
-  #shouldEscapeFromEmptyListItem(node) {
-    const listItem = this.#getListItemNode(node);
-    if (!listItem) return false
-
-    return this.#isNodeEmpty(listItem)
-  }
-
-  #shouldEscapeFromEmptyParagraphInListItem(node) {
-    const paragraph = this.#getParagraphNode(node);
-    if (!paragraph) return false
-
-    if (!this.#isNodeEmpty(paragraph)) return false
-
-    const parent = paragraph.getParent();
-    return parent && $isListItemNode(parent)
-  }
-
-  #isNodeEmpty(node) {
-    if (node.getTextContent().trim() !== "") return false
-
-    const children = node.getChildren();
-    if (children.length === 0) return true
-
-    return children.every(child => {
-      if ($isLineBreakNode(child)) return true
-      return this.#isNodeEmpty(child)
-    })
-  }
-
-  #getListItemNode(node) {
-    let currentNode = node;
-
-    while (currentNode) {
-      if ($isListItemNode(currentNode)) {
-        return currentNode
-      }
-      currentNode = currentNode.getParent();
-    }
-
-    return null
-  }
-
-  #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);
-
-    listItem.remove();
-    paragraph.selectStart();
-  }
-
-  #shouldEscapeFromEmptyParagraphInBlockquote(node) {
-    const paragraph = this.#getParagraphNode(node);
-    if (!paragraph) return false
-
-    if (!this.#isNodeEmpty(paragraph)) return false
-
-    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
-  }
-
-  #escapeFromBlockquote(anchorNode) {
-    const paragraph = this.#getParagraphNode(anchorNode);
-    if (!paragraph) return
-
-    const blockquote = paragraph.getParent();
-    if (!blockquote || !$isQuoteNode(blockquote)) return
-
-    const siblingsAfter = this.#getSiblingsAfter(paragraph);
-    const nonEmptySiblings = siblingsAfter.filter(sibling => !this.#isNodeEmpty(sibling));
-
-    if (nonEmptySiblings.length > 0) {
-      this.#splitBlockquote(blockquote, paragraph, nonEmptySiblings);
-    } else {
-      const newParagraph = $createParagraphNode();
-      blockquote.insertAfter(newParagraph);
-      paragraph.remove();
-      newParagraph.selectStart();
-    }
-  }
-
-  #getSiblingsAfter(node) {
-    const siblings = [];
-    let sibling = node.getNextSibling();
-
-    while (sibling) {
-      siblings.push(sibling);
-      sibling = sibling.getNextSibling();
-    }
-
-    return siblings
-  }
-
-  #getListItemSiblingsAfter(listItem) {
-    const siblings = [];
-    let sibling = listItem.getNextSibling();
-
-    while (sibling) {
-      if ($isListItemNode(sibling)) {
-        siblings.push(sibling);
-      }
-      sibling = sibling.getNextSibling();
-    }
-
-    return siblings
-  }
-
-  #splitBlockquoteWithList(blockquote, parentList, emptyListItem, listItemsAfter) {
-    const blockquoteSiblingsAfterList = this.#getSiblingsAfter(parentList);
-    const nonEmptyBlockquoteSiblings = blockquoteSiblingsAfterList.filter(sibling => !this.#isNodeEmpty(sibling));
-
-    const middleParagraph = $createParagraphNode();
-    blockquote.insertAfter(middleParagraph);
-
-    const newList = $createListNode(parentList.getListType());
-
-    const newBlockquote = $createQuoteNode();
-    middleParagraph.insertAfter(newBlockquote);
-    newBlockquote.append(newList);
-
-    listItemsAfter.forEach(item => {
-      newList.append(item);
-    });
-
-    nonEmptyBlockquoteSiblings.forEach(sibling => {
-      newBlockquote.append(sibling);
-    });
-
-    emptyListItem.remove();
-
-    this.#removeTrailingEmptyListItems(parentList);
-    this.#removeTrailingEmptyNodes(newBlockquote);
-
-    if (parentList.getChildrenSize() === 0) {
-      parentList.remove();
-
-      if (blockquote.getChildrenSize() === 0) {
-        blockquote.remove();
-      }
-    } else {
-      this.#removeTrailingEmptyNodes(blockquote);
-    }
-
-    middleParagraph.selectStart();
-  }
-
-  #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
-      }
-    }
-  }
-
-  #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
-      }
-    }
-  }
-
-  #splitBlockquote(blockquote, emptyParagraph, siblingsAfter) {
-    const newParagraph = $createParagraphNode();
-    blockquote.insertAfter(newParagraph);
-
-    const newBlockquote = $createQuoteNode();
-    newParagraph.insertAfter(newBlockquote);
-
-    siblingsAfter.forEach(sibling => {
-      newBlockquote.append(sibling);
-    });
-
-    emptyParagraph.remove();
-
-    this.#removeTrailingEmptyNodes(blockquote);
-    this.#removeTrailingEmptyNodes(newBlockquote);
-
-    newParagraph.selectStart();
-  }
-
-  // Code blocks
-
-  #handleCodeBlocks(event, selection) {
-    if (!selection.isCollapsed()) return false
-
-    const codeNode = this.#getCodeNodeFromSelection(selection);
-    if (!codeNode) return false
-
-    if (this.#isCursorOnEmptyLastLineOfCodeBlock(selection, codeNode)) {
-      event?.preventDefault();
-      this.#exitCodeBlock(codeNode);
-      return true
-    }
-
-    return false
-  }
-
-  #handleArrowDownInCodeBlock(event) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
-
-    const codeNode = this.#getCodeNodeFromSelection(selection);
-    if (!codeNode) return false
-
-    if (this.#isCursorOnLastLineOfCodeBlock(selection, codeNode) && !codeNode.getNextSibling()) {
-      event?.preventDefault();
-      const paragraph = $createParagraphNode();
-      codeNode.insertAfter(paragraph);
-      paragraph.selectStart();
-      return true
-    }
-
-    return false
-  }
-
-  #getCodeNodeFromSelection(selection) {
-    const anchorNode = selection.anchor.getNode();
-    return $getNearestNodeOfType(anchorNode, CodeNode) || ($isCodeNode(anchorNode) ? anchorNode : null)
-  }
-
-  #isCursorOnEmptyLastLineOfCodeBlock(selection, codeNode) {
-    const children = codeNode.getChildren();
-    if (children.length === 0) return true
-
-    const anchorNode = selection.anchor.getNode();
-    const anchorOffset = selection.anchor.offset;
-
-    // Chromium: cursor on the CodeNode element after the last child (a line break)
-    if ($isCodeNode(anchorNode) && anchorOffset === children.length) {
-      return $isLineBreakNode(children[children.length - 1])
-    }
-
-    // Firefox: cursor on an empty text node that follows a line break at the end
-    if ($isTextNode(anchorNode) && anchorNode.getTextContentSize() === 0 && anchorOffset === 0) {
-      const previousSibling = anchorNode.getPreviousSibling();
-      return $isLineBreakNode(previousSibling) && anchorNode.getNextSibling() === null
-    }
-
-    return false
-  }
-
-  #isCursorOnLastLineOfCodeBlock(selection, codeNode) {
-    const anchorNode = selection.anchor.getNode();
-    const children = codeNode.getChildren();
-    if (children.length === 0) return true
-
-    const lastChild = children[children.length - 1];
-
-    if ($isCodeNode(anchorNode) && selection.anchor.offset === children.length) return true
-    if (anchorNode === lastChild) return true
-
-    const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
-    if (lastLineBreakIndex === -1) return true
-
-    const anchorIndex = children.indexOf(anchorNode);
-    return anchorIndex > lastLineBreakIndex
-  }
-
-  #exitCodeBlock(codeNode) {
-    const children = codeNode.getChildren();
-    const lastChild = children[children.length - 1];
-
-    if ($isTextNode(lastChild) && lastChild.getTextContentSize() === 0) {
-      const previousSibling = lastChild.getPreviousSibling();
-      lastChild.remove();
-      if ($isLineBreakNode(previousSibling)) previousSibling.remove();
-    } else if ($isLineBreakNode(lastChild)) {
-      lastChild.remove();
-    }
-
-    const paragraph = $createParagraphNode();
-    codeNode.insertAfter(paragraph);
-    paragraph.selectStart();
-  }
-}
-
 async function loadFileIntoImage(file, image) {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -3537,14 +3774,11 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     const editorHasFocus = this.#editorHasFocus;
 
     this.editor.update(() => {
-      const shouldTransferNodeSelection = editorHasFocus && this.isSelected();
-
       const replacementNode = this.#toActionTextAttachmentNodeWith(blob);
       this.replace(replacementNode);
 
-      if (shouldTransferNodeSelection) {
-        const nodeSelection = $createNodeSelectionWith(replacementNode);
-        $setSelection(nodeSelection);
+      if (editorHasFocus && $isRootOrShadowRoot(replacementNode.getParent())) {
+        replacementNode.selectNext();
       }
     }, { tag: this.#backgroundUpdateTags });
   }
@@ -3636,14 +3870,12 @@ class ImageGalleryNode extends ElementNode {
   static importDOM() {
     return {
       div: (element) => {
-        const containsAttachment = element.querySelector(`:scope > :is(${this.#attachmentTags.join()})`);
-        if (!containsAttachment) return null
+        if (!this.#isGalleryElement(element)) return null
 
         return {
           conversion: () => {
             return {
-              node: $createImageGalleryNode(),
-              after: children => children
+              node: $createImageGalleryNode()
             }
           },
           priority: 2
@@ -3660,6 +3892,13 @@ class ImageGalleryNode extends ElementNode {
     return $isActionTextAttachmentNode(node) && node.isPreviewableImage
   }
 
+  static #isGalleryElement(element) {
+    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
+    return element.textContent.trim() === ""
+      && attachmentChildren.length > 0
+      && element.children.length === attachmentChildren.length
+  }
+
   static get #attachmentTags() {
     return Object.keys(ActionTextAttachmentNode.importDOM())
   }
@@ -3912,7 +4151,6 @@ class Contents {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
 
-    new FormatEscaper(editorElement).monitor();
   }
 
   insertHtml(html, { tag } = {}) {
@@ -3921,6 +4159,7 @@ class Contents {
 
   insertDOM(doc, { tag } = {}) {
     this.#unwrapPlaceholderAnchors(doc);
+    if (tag === PASTE_TAG) this.#stripTableCellColorStyles(doc);
 
     this.editor.update(() => {
       const selection = $getSelection();
@@ -3958,127 +4197,77 @@ class Contents {
     this.#insertLineBelowIfLastNode(node);
   }
 
-  insertNodeWrappingEachSelectedLine(newNodeFn) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const selectedNodes = selection.extract();
-
-      selectedNodes.forEach((node) => {
-        const parent = node.getParent();
-        if (!parent) { return }
-
-        const topLevelElement = node.getTopLevelElementOrThrow();
-        const wrappingNode = newNodeFn();
-        wrappingNode.append(...topLevelElement.getChildren());
-        topLevelElement.replace(wrappingNode);
-      });
-    });
-  }
-
-  toggleNodeWrappingAllSelectedLines(isFormatAppliedFn, newNodeFn) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
-
-      // Check if format is already applied
-      if (isFormatAppliedFn(topLevelElement)) {
-        this.removeFormattingFromSelectedLines();
-      } else {
-        this.#insertNodeWrappingAllSelectedLines(newNodeFn);
-      }
-    });
-  }
-
-  toggleNodeWrappingAllSelectedNodes(isFormatAppliedFn, newNodeFn) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const topLevelElement = selection.anchor.getNode().getTopLevelElement();
-
-      // Check if format is already applied
-      if (topLevelElement && isFormatAppliedFn(topLevelElement)) {
-        this.#unwrap(topLevelElement);
-      } else {
-        this.#insertNodeWrappingAllSelectedNodes(newNodeFn);
-      }
-    });
-  }
-
-  removeFormattingFromSelectedLines() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
-      const paragraph = $createParagraphNode();
-      paragraph.append(...topLevelElement.getChildren());
-      topLevelElement.replace(paragraph);
-    });
+  applyParagraphFormat() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    $setBlocksType(selection, () => $createParagraphNode());
   }
 
-  hasSelectedText() {
-    let result = false;
+  applyHeadingFormat(tag) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
-    this.editor.read(() => {
-      const selection = $getSelection();
-      result = $isRangeSelection(selection) && !selection.isCollapsed();
-    });
+    $setBlocksType(selection, () => $createHeadingNode(tag));
+  }
 
-    return result
+  #applyCodeBlockFormat() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    $setBlocksType(selection, () => $createCodeNode("plain"));
   }
 
-  wrapSelectedSoftBreakLines(newNodeFn) {
-    let paragraphKey = null;
-    let selectedLineRange = null;
+  toggleCodeBlock() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    if (this.#insertNodeIfRoot($createCodeNode("plain"))) return
 
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection) || selection.isCollapsed()) return
+    const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
 
-      const paragraph = this.#getSelectedParagraphWithSoftLineBreaks(selection);
-      if (!paragraph) return
+    if (topLevelElement && !$isCodeNode(topLevelElement)) {
+      this.#applyCodeBlockFormat();
+    } else {
+      this.applyParagraphFormat();
+    }
+  }
 
-      const lines = this.#splitParagraphIntoLines(paragraph);
-      selectedLineRange = this.#getSelectedLineRange(lines, selection);
+  toggleBlockquote() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
-      if (!selectedLineRange) return
+    if (this.#insertNodeIfRoot($createQuoteNode())) return
 
-      const { start, end } = selectedLineRange;
-      if (start === 0 && end === lines.length - 1) return
+    const topLevelElements = this.#topLevelElementsInSelection(selection);
 
-      paragraphKey = paragraph.getKey();
-    });
+    const allQuoted = topLevelElements.length > 0 && topLevelElements.every($isQuoteNode);
 
-    if (!paragraphKey || !selectedLineRange) return false
+    if (allQuoted) {
+      topLevelElements.forEach(node => this.#unwrap(node));
+    } else {
+      topLevelElements.filter($isQuoteNode).forEach(node => this.#unwrap(node));
 
-    this.editor.update(() => {
-      const paragraph = $getNodeByKey(paragraphKey);
-      if (!paragraph || !$isParagraphNode(paragraph)) return
+      this.#splitParagraphsAtLineBreaks(selection);
 
-      const lines = this.#splitParagraphIntoLines(paragraph);
-      this.#replaceParagraphWithWrappedSelectedLines(paragraph, lines, selectedLineRange, newNodeFn);
-    });
+      const elements = this.#topLevelElementsInSelection(selection);
+      if (elements.length === 0) return
 
-    return true
+      const blockquote = $createQuoteNode();
+      elements[0].insertBefore(blockquote);
+      elements.forEach((element) => blockquote.append(element));
+    }
   }
 
-  unwrapSelectedListItems() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
+  hasSelectedText() {
+    let result = false;
 
-      const { listItems, parentLists } = this.#collectSelectedListItems(selection);
-      if (listItems.size > 0) {
-        const newParagraphs = this.#convertListItemsToParagraphs(listItems);
-        this.#removeEmptyParentLists(parentLists);
-        this.#selectNewParagraphs(newParagraphs);
-      }
+    this.editor.read(() => {
+      const selection = $getSelection();
+      result = $isRangeSelection(selection) && !selection.isCollapsed();
     });
+
+    return result
   }
 
   createLink(url) {
@@ -4170,30 +4359,6 @@ class Contents {
     this.#performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes);
   }
 
-  createParagraphAfterNode(node, text) {
-    const newParagraph = $createParagraphNode();
-    node.insertAfter(newParagraph);
-    newParagraph.selectStart();
-
-    // Insert the typed text
-    if (text) {
-      newParagraph.append($createTextNode(text));
-      newParagraph.select(1, 1); // Place cursor after the text
-    }
-  }
-
-  createParagraphBeforeNode(node, text) {
-    const newParagraph = $createParagraphNode();
-    node.insertBefore(newParagraph);
-    newParagraph.selectStart();
-
-    // Insert the typed text
-    if (text) {
-      newParagraph.append($createTextNode(text));
-      newParagraph.select(1, 1); // Place cursor after the text
-    }
-  }
-
   uploadFiles(files, { selectLast } = {}) {
     if (!this.editorElement.supportsAttachments) {
       console.warn("This editor does not supports attachments (it's configured with [attachments=false])");
@@ -4251,6 +4416,62 @@ class Contents {
     });
   }
 
+  #insertNodeIfRoot(node) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    if ($isRootOrShadowRoot(anchorNode)) {
+      anchorNode.append(node);
+      node.selectEnd();
+
+      return true
+    }
+
+    return false
+  }
+
+  #splitParagraphsAtLineBreaks(selection) {
+    const selectedNodeKeys = new Set(selection.getNodes().map(n => n.getKey()));
+    const topLevelElements = this.#topLevelElementsInSelection(selection);
+
+    for (const element of topLevelElements) {
+      if (!$isParagraphNode(element)) continue
+
+      const children = element.getChildren();
+      if (!children.some($isLineBreakNode)) continue
+
+      const groups = [ [] ];
+      for (const child of children) {
+        if ($isLineBreakNode(child)) {
+          groups.push([]);
+          child.remove();
+        } else {
+          groups[groups.length - 1].push(child);
+        }
+      }
+
+      if (groups.every(group => group.some(child => selectedNodeKeys.has(child.getKey())))) continue
+
+      for (const group of groups) {
+        if (group.length === 0) continue
+        const paragraph = $createParagraphNode();
+        group.forEach(child => paragraph.append(child));
+        element.insertBefore(paragraph);
+      }
+      if (groups.some(group => group.length > 0)) element.remove();
+    }
+  }
+
+  #topLevelElementsInSelection(selection) {
+    const elements = new Set();
+    for (const node of selection.getNodes()) {
+      const topLevel = node.getTopLevelElement();
+      if (topLevel) elements.add(topLevel);
+    }
+    return Array.from(elements)
+  }
+
   #insertUploadNodes(nodes) {
     if (nodes.every($isActionTextAttachmentNode)) {
       const uploader = Uploader.for(this.editorElement, []);
@@ -4304,359 +4525,14 @@ class Contents {
     }
   }
 
-  #insertNodeWrappingAllSelectedNodes(newNodeFn) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const selectedNodes = selection.extract();
-      if (selectedNodes.length === 0) {
-        return
-      }
-
-      const topLevelElements = new Set();
-      selectedNodes.forEach((node) => {
-        const topLevel = node.getTopLevelElementOrThrow();
-        topLevelElements.add(topLevel);
-      });
-
-      const elements = this.#withoutTrailingEmptyParagraphs(Array.from(topLevelElements));
-      if (elements.length === 0) {
-        this.#removeStandaloneEmptyParagraph();
-        this.insertAtCursor(newNodeFn());
-        return
-      }
-
-      const wrappingNode = newNodeFn();
-      elements[0].insertBefore(wrappingNode);
-      elements.forEach((element) => {
-        wrappingNode.append(element);
-      });
-    });
-  }
-
-  #withoutTrailingEmptyParagraphs(elements) {
-    let lastNonEmptyIndex = elements.length - 1;
-
-    // Find the last non-empty paragraph
-    while (lastNonEmptyIndex >= 0) {
-      const element = elements[lastNonEmptyIndex];
-      if (!$isParagraphNode(element) || !this.#isElementEmpty(element)) {
-        break
-      }
-      lastNonEmptyIndex--;
-    }
-
-    return elements.slice(0, lastNonEmptyIndex + 1)
-  }
-
-  #isElementEmpty(element) {
-    // Check text content first
-    if (element.getTextContent().trim() !== "") return false
-
-    // Check if it only contains line breaks
-    const children = element.getChildren();
-    return children.length === 0 || children.every(child => $isLineBreakNode(child))
-  }
-
-  #removeStandaloneEmptyParagraph() {
-    const root = $getRoot();
-    if (root.getChildrenSize() === 1) {
-      const firstChild = root.getFirstChild();
-      if (firstChild && $isParagraphNode(firstChild) && this.#isElementEmpty(firstChild)) {
-        firstChild.remove();
-      }
-    }
-  }
-
-  #insertNodeWrappingAllSelectedLines(newNodeFn) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      if (selection.isCollapsed()) {
-        this.#wrapCurrentLine(selection, newNodeFn);
-      } else {
-        this.#wrapMultipleSelectedLines(selection, newNodeFn);
-      }
-    });
-  }
-
-  #wrapCurrentLine(selection, newNodeFn) {
-    const anchorNode = selection.anchor.getNode();
-
-    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
-
-    if (topLevelElement.getTextContent()) {
-      const wrappingNode = newNodeFn();
-      wrappingNode.append(...topLevelElement.getChildren());
-      topLevelElement.replace(wrappingNode);
-    } else {
-      selection.insertNodes([ newNodeFn() ]);
-    }
-  }
-
-  #wrapMultipleSelectedLines(selection, newNodeFn) {
-    const selectedParagraphs = this.#extractSelectedParagraphs(selection);
-    if (selectedParagraphs.length === 0) return
-
-    const { lineSet, nodesToDelete } = this.#extractUniqueLines(selectedParagraphs);
-    if (lineSet.size === 0) return
-
-    const wrappingNode = this.#createWrappingNodeWithLines(newNodeFn, lineSet);
-    this.#replaceWithWrappingNode(selection, wrappingNode);
-    this.#removeNodes(nodesToDelete);
-  }
-
-  #extractSelectedParagraphs(selection) {
-    const selectedNodes = selection.extract();
-    const selectedParagraphs = selectedNodes
-      .map((node) => this.#getParagraphFromNode(node))
-      .filter(Boolean);
-
-    $setSelection(null);
-    return selectedParagraphs
-  }
-
-  #getParagraphFromNode(node) {
-    if ($isParagraphNode(node)) return node
-    if ($isTextNode(node) && node.getParent() && $isParagraphNode(node.getParent())) {
-      return node.getParent()
-    }
-    return null
-  }
-
-  #extractUniqueLines(selectedParagraphs) {
-    const lineSet = new Set();
-    const nodesToDelete = new Set();
-
-    selectedParagraphs.forEach((paragraphNode) => {
-      const textContent = paragraphNode.getTextContent();
-      if (textContent) {
-        textContent.split("\n").forEach((line) => {
-          if (line.trim()) lineSet.add(line);
-        });
-      }
-      nodesToDelete.add(paragraphNode);
-    });
-
-    return { lineSet, nodesToDelete }
-  }
-
-  #createWrappingNodeWithLines(newNodeFn, lineSet) {
-    const wrappingNode = newNodeFn();
-    const lines = Array.from(lineSet);
-
-    lines.forEach((lineText, index) => {
-      wrappingNode.append($createTextNode(lineText));
-      if (index < lines.length - 1) {
-        wrappingNode.append($createLineBreakNode());
-      }
-    });
-
-    return wrappingNode
-  }
-
-  #replaceWithWrappingNode(selection, wrappingNode) {
-    const anchorNode = selection.anchor.getNode();
-    const parent = anchorNode.getParent();
-    if (parent) {
-      parent.replace(wrappingNode);
-    }
-  }
-
-  #removeNodes(nodesToDelete) {
-    nodesToDelete.forEach((node) => node.remove());
-  }
-
-  #getSelectedParagraphWithSoftLineBreaks(selection) {
-    const anchorParagraph = this.#getParagraphFromNode(selection.anchor.getNode());
-    const focusParagraph = this.#getParagraphFromNode(selection.focus.getNode());
-
-    if (!anchorParagraph || anchorParagraph !== focusParagraph) return null
-    if ($isQuoteNode(anchorParagraph.getParent())) return null
-
-    return this.#paragraphHasSoftLineBreaks(anchorParagraph) ? anchorParagraph : null
-  }
-
-  #paragraphHasSoftLineBreaks(paragraph) {
-    return paragraph.getChildren().some((child) => $isLineBreakNode(child))
-  }
-
-  #splitParagraphIntoLines(paragraph) {
-    const lines = [ [] ];
-
-    paragraph.getChildren().forEach((child) => {
-      if ($isLineBreakNode(child)) {
-        lines.push([]);
-      } else {
-        lines[lines.length - 1].push(child);
-      }
-    });
-
-    return lines
-  }
-
-  #getSelectedLineRange(lines, selection) {
-    const selectedNodeKeys = new Set(
-      selection.getNodes().map((node) => node.getKey())
-    );
-
-    selectedNodeKeys.add(selection.anchor.getNode().getKey());
-    selectedNodeKeys.add(selection.focus.getNode().getKey());
-
-    const selectedLineIndexes = lines
-      .map((lineNodes, index) => {
-        return lineNodes.some((node) => selectedNodeKeys.has(node.getKey())) ? index : null
-      })
-      .filter((index) => index !== null);
-
-    if (selectedLineIndexes.length === 0) return null
-
-    return {
-      start: selectedLineIndexes[0],
-      end: selectedLineIndexes[selectedLineIndexes.length - 1]
-    }
-  }
-
-  #replaceParagraphWithWrappedSelectedLines(paragraph, lines, { start, end }, newNodeFn) {
-    const insertedNodes = [];
-
-    this.#appendParagraphsForLines(insertedNodes, lines.slice(0, start));
-
-    const wrappingNode = newNodeFn();
-    lines.slice(start, end + 1).forEach((lineNodes) => {
-      wrappingNode.append(this.#createParagraphFromLine(lineNodes));
-    });
-    insertedNodes.push(wrappingNode);
-
-    this.#appendParagraphsForLines(insertedNodes, lines.slice(end + 1));
-
-    let previousNode = null;
-    insertedNodes.forEach((node) => {
-      if (previousNode) {
-        previousNode.insertAfter(node);
-      } else {
-        paragraph.insertBefore(node);
-      }
-
-      previousNode = node;
-    });
-
-    paragraph.remove();
-  }
-
-  #appendParagraphsForLines(insertedNodes, lines) {
-    lines.forEach((lineNodes) => {
-      insertedNodes.push(this.#createParagraphFromLine(lineNodes));
-    });
-  }
-
-  #createParagraphFromLine(lineNodes) {
-    const paragraph = $createParagraphNode();
-
-    if (lineNodes.length === 0) {
-      paragraph.append($createLineBreakNode());
-    } else {
-      paragraph.append(...lineNodes);
-    }
-
-    return paragraph
-  }
-
-  #collectSelectedListItems(selection) {
-    const nodes = selection.getNodes();
-    const listItems = new Set();
-    const parentLists = new Set();
-
-    for (const node of nodes) {
-      const listItem = $getNearestNodeOfType(node, ListItemNode);
-      if (listItem) {
-        listItems.add(listItem);
-        const parentList = listItem.getParent();
-        if (parentList && $isListNode(parentList)) {
-          parentLists.add(parentList);
-        }
-      }
-    }
-
-    return { listItems, parentLists }
-  }
-
-  #convertListItemsToParagraphs(listItems) {
-    const newParagraphs = [];
-
-    for (const listItem of listItems) {
-      const paragraph = this.#convertListItemToParagraph(listItem);
-      if (paragraph) {
-        newParagraphs.push(paragraph);
-      }
-    }
-
-    return newParagraphs
-  }
-
-  #convertListItemToParagraph(listItem) {
-    const parentList = listItem.getParent();
-    if (!parentList || !$isListNode(parentList)) return null
-
-    const paragraph = $createParagraphNode();
-    const sublists = this.#extractSublistsAndContent(listItem, paragraph);
-
-    listItem.insertAfter(paragraph);
-    this.#insertSublists(paragraph, sublists);
-    listItem.remove();
-
-    return paragraph
-  }
-
-  #extractSublistsAndContent(listItem, paragraph) {
-    const sublists = [];
-
-    listItem.getChildren().forEach((child) => {
-      if ($isListNode(child)) {
-        sublists.push(child);
-      } else {
-        paragraph.append(child);
-      }
-    });
-
-    return sublists
-  }
-
-  #insertSublists(paragraph, sublists) {
-    sublists.forEach((sublist) => {
-      paragraph.insertAfter(sublist);
-    });
-  }
-
-  #removeEmptyParentLists(parentLists) {
-    for (const parentList of parentLists) {
-      if ($isListNode(parentList) && parentList.getChildrenSize() === 0) {
-        parentList.remove();
-      }
-    }
-  }
-
-  #selectNewParagraphs(newParagraphs) {
-    if (newParagraphs.length === 0) return
-
-    const firstParagraph = newParagraphs[0];
-    const lastParagraph = newParagraphs[newParagraphs.length - 1];
-
-    if (newParagraphs.length === 1) {
-      firstParagraph.selectEnd();
-    } else {
-      this.#selectParagraphRange(firstParagraph, lastParagraph);
-    }
-  }
-
-  #selectParagraphRange(firstParagraph, lastParagraph) {
-    firstParagraph.selectStart();
-    const currentSelection = $getSelection();
-    if (currentSelection && $isRangeSelection(currentSelection)) {
-      currentSelection.anchor.set(firstParagraph.getKey(), 0, "element");
-      currentSelection.focus.set(lastParagraph.getKey(), lastParagraph.getChildrenSize(), "element");
+  // Table cells copied from a page inherit the source theme's inline color
+  // styles (e.g. dark-mode backgrounds). Strip them so pasted tables adopt
+  // the current theme instead of carrying stale colors.
+  #stripTableCellColorStyles(doc) {
+    for (const cell of doc.querySelectorAll("td, th")) {
+      cell.style.removeProperty("background-color");
+      cell.style.removeProperty("background");
+      cell.style.removeProperty("color");
     }
   }
 
@@ -4683,9 +4559,8 @@ class Contents {
     const textBeforeString = fullText.slice(0, lastIndex);
     const textAfterCursor = fullText.slice(offset);
 
-    const trailingSpacer = this.#hasInlineDecoratorNode(replacementNodes) ? "\u2060" : " ";
     const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, selection, textBeforeString);
-    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterCursor || trailingSpacer);
+    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterCursor || " ");
 
     anchorNode.replace(textNodeBefore);
 
@@ -4697,10 +4572,6 @@ class Contents {
     textNodeAfter.select(cursorOffset, cursorOffset);
   }
 
-  #hasInlineDecoratorNode(nodes) {
-    return nodes.some(node => node instanceof CustomActionTextAttachmentNode && node.isInline())
-  }
-
   #cloneTextNodeFormatting(anchorNode, selection, text) {
     const parent = anchorNode.getParent();
     const fallbackFormat = parent?.getTextFormat?.() || 0;
@@ -5074,7 +4945,27 @@ class ProvisionalParagraphNode extends ParagraphNode {
   // https://github.com/facebook/lexical/blob/f1e4f66014377b1f2595aec2b0ee17f5b7ef4dfc/packages/lexical/src/LexicalNode.ts#L646
   isSelected(selection = null) {
     const targetSelection = selection || $getSelection();
-    return targetSelection?.getNodes().some(node => node.is(this) || this.isParentOf(node))
+    if (!targetSelection) return false
+
+    if (targetSelection.getNodes().some(node => node.is(this) || this.isParentOf(node))) return true
+
+    // A collapsed range selection on the parent element at an offset adjacent to
+    // this node means the caret is visually at this paragraph's position. Treat it
+    // as selected so the paragraph is visible and the caret renders correctly.
+    //
+    // Both the offset matching our index (cursor just before us) and index + 1
+    // (cursor just after us) count, because the provisional paragraph is an
+    // invisible spacer: the browser resolves both offsets to the same visual spot.
+    if ($isRangeSelection(targetSelection) && targetSelection.isCollapsed()) {
+      const { anchor } = targetSelection;
+      const parent = this.getParent();
+      if (parent && anchor.getNode().is(parent) && anchor.type === "element") {
+        const index = this.getIndexWithinParent();
+        return anchor.offset === index || anchor.offset === index + 1
+      }
+    }
+
+    return false
   }
 
   removeUnlessRequired(self = this.getLatest()) {
@@ -5355,6 +5246,365 @@ class TablesExtension extends LexxyExtension {
   }
 }
 
+const MIME_TYPE = "application/x-lexxy-node-key";
+
+class AttachmentDragAndDrop {
+  #editor
+  #draggedNodeKey = null
+  #rafId = null
+  #draggingRafId = null
+  #cleanupFns = []
+
+  constructor(editor) {
+    this.#editor = editor;
+
+    // Register Lexical commands at HIGH priority to intercept before the
+    // base @lexical/rich-text handlers (which return true and consume the events).
+    this.#cleanupFns.push(
+      editor.registerCommand(DRAGSTART_COMMAND, (event) => this.#handleDragStart(event), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(DROP_COMMAND, (event) => this.#handleDrop(event), COMMAND_PRIORITY_HIGH),
+    );
+
+    // Use a root listener to register DOM-level dragover/dragend handlers
+    // (these events need throttled rAF handling that works better as DOM listeners).
+    const unregister = editor.registerRootListener((root, prevRoot) => {
+      if (prevRoot) {
+        prevRoot.removeEventListener("dragover", this.#onDragOver);
+        prevRoot.removeEventListener("dragend", this.#onDragEnd);
+      }
+      if (root) {
+        root.addEventListener("dragover", this.#onDragOver);
+        root.addEventListener("dragend", this.#onDragEnd);
+      }
+    });
+    this.#cleanupFns.push(unregister);
+  }
+
+  destroy() {
+    this.#cleanup();
+    for (const fn of this.#cleanupFns) fn();
+    this.#cleanupFns = [];
+  }
+
+  // -- Event handlers --------------------------------------------------------
+
+  #handleDragStart(event) {
+    if (event.target.closest("textarea")) return false
+
+    const figure = event.target.closest("figure.attachment[data-lexical-node-key]");
+    if (!figure) return false
+
+    this.#draggedNodeKey = figure.dataset.lexicalNodeKey;
+    event.dataTransfer.setData(MIME_TYPE, this.#draggedNodeKey);
+    event.dataTransfer.effectAllowed = "move";
+
+    // Add dragging class after a tick so it doesn't affect the drag image
+    this.#draggingRafId = requestAnimationFrame(() => {
+      this.#draggingRafId = null;
+      figure.classList.add("lexxy-dragging");
+    });
+
+    return true
+  }
+
+  #onDragOver = (event) => {
+    if (!this.#draggedNodeKey) return
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+
+    if (!this.#rafId) {
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
+        this.#updateDropTarget(event);
+      });
+    }
+  }
+
+  #handleDrop(event) {
+    if (!this.#draggedNodeKey) return false
+
+    event.preventDefault();
+
+    const target = this.#resolveDropTarget(event);
+    const draggedKey = this.#draggedNodeKey;
+    this.#cleanup();
+
+    if (target) {
+      this.#performDrop(draggedKey, target);
+    }
+    return true
+  }
+
+  #onDragEnd = () => {
+    this.#cleanup();
+  }
+
+  // -- Drop target resolution -----------------------------------------------
+
+  #updateDropTarget(event) {
+    this.#clearDropIndicators();
+
+    const target = this.#resolveDropTarget(event);
+    if (!target) return
+
+    if (target.type === "gallery" || target.type === "gallery-reorder") {
+      target.element.classList.add(`lexxy-drop-target--gallery-${target.position}`);
+    } else if (target.type === "list-item") {
+      target.element.classList.add(`lexxy-drop-target--list-${target.position}`);
+    } else {
+      target.element.classList.add(`lexxy-drop-target--block-${target.position}`);
+    }
+  }
+
+  #resolveDropTarget(event) {
+    const element = document.elementFromPoint(event.clientX, event.clientY);
+    if (!element) return null
+
+    const rootElement = this.#editor.getRootElement();
+    if (!rootElement || !rootElement.contains(element)) return null
+
+    // Check if hovering over a previewable image (for gallery merge or reorder)
+    const targetFigure = element.closest("figure.attachment--preview[data-lexical-node-key]");
+    if (targetFigure && targetFigure.dataset.lexicalNodeKey !== this.#draggedNodeKey) {
+      const targetGallery = targetFigure.closest(".attachment-gallery");
+      if (targetGallery) {
+        // If the dragged image is in the same gallery, this is a reorder
+        const draggedFigure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+        if (draggedFigure && targetGallery.contains(draggedFigure)) {
+          const position = this.#computeHorizontalPosition(targetFigure, event.clientX);
+          return { type: "gallery-reorder", element: targetFigure, nodeKey: targetFigure.dataset.lexicalNodeKey, position }
+        }
+      }
+      const position = this.#computeHorizontalPosition(targetFigure, event.clientX);
+      return { type: "gallery", element: targetFigure, nodeKey: targetFigure.dataset.lexicalNodeKey, position }
+    }
+
+    // Hovering over the dragged image itself inside a gallery — treat as no-op
+    // to prevent fallthrough to the block handler, which would eject it from the gallery.
+    if (targetFigure && targetFigure.closest(".attachment-gallery")) return null
+
+    // Check if hovering over a gallery's empty space (for reorder within gallery)
+    const targetGallery = element.closest(".attachment-gallery");
+    if (targetGallery) {
+      let galleryFigure = element.closest("figure.attachment[data-lexical-node-key]");
+      if (!galleryFigure) {
+        galleryFigure = this.#findNearestFigureInGallery(targetGallery, event.clientX);
+      }
+      if (galleryFigure && galleryFigure.dataset.lexicalNodeKey !== this.#draggedNodeKey) {
+        const position = this.#computeHorizontalPosition(galleryFigure, event.clientX);
+        return { type: "gallery-reorder", element: galleryFigure, nodeKey: galleryFigure.dataset.lexicalNodeKey, position }
+      }
+      // Nearest figure is the dragged image — no-op to avoid block handler fallthrough
+      if (galleryFigure) return null
+    }
+
+    // Check if hovering over a list item (for list splitting)
+    const listItem = element.closest("li");
+    if (listItem && rootElement.contains(listItem)) {
+      const position = this.#computeVerticalPosition(listItem, event.clientY);
+      return { type: "list-item", element: listItem, position }
+    }
+
+    // Otherwise, find nearest block-level element for between-block insertion.
+    // Normalize so each gap has exactly one indicator: prefer "after" on the
+    // previous sibling, falling back to "before" only for the first block.
+    const block = this.#findNearestBlock(element, rootElement, event.clientY);
+    if (!block) return null
+
+    const position = this.#computeVerticalPosition(block, event.clientY);
+    if (position === "before" && block.previousElementSibling) {
+      return { type: "block", element: block.previousElementSibling, position: "after" }
+    }
+    return { type: "block", element: block, position }
+  }
+
+  #findNearestBlock(element, rootElement, clientY) {
+    let current = element;
+    while (current && current !== rootElement) {
+      if (current.parentElement === rootElement) return current
+      current = current.parentElement;
+    }
+
+    // elementFromPoint landed on the root itself (e.g. a margin gap between
+    // blocks). Fall back to the nearest child by vertical distance.
+    let nearest = null;
+    let minDistance = Infinity;
+    for (const child of rootElement.children) {
+      const rect = child.getBoundingClientRect();
+      const distance = Math.min(Math.abs(clientY - rect.top), Math.abs(clientY - rect.bottom));
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearest = child;
+      }
+    }
+    return nearest
+  }
+
+  #computeVerticalPosition(element, clientY) {
+    const rect = element.getBoundingClientRect();
+    return clientY < rect.top + rect.height / 2 ? "before" : "after"
+  }
+
+  #computeHorizontalPosition(element, clientX) {
+    const rect = element.getBoundingClientRect();
+    return clientX < rect.left + rect.width / 2 ? "before" : "after"
+  }
+
+  #findNearestFigureInGallery(gallery, clientX) {
+    const figures = gallery.querySelectorAll("figure.attachment[data-lexical-node-key]");
+    let nearest = null;
+    let minDistance = Infinity;
+    for (const figure of figures) {
+      const rect = figure.getBoundingClientRect();
+      const center = rect.left + rect.width / 2;
+      const distance = Math.abs(clientX - center);
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearest = figure;
+      }
+    }
+    return nearest
+  }
+
+  // -- Drop indicator --------------------------------------------------------
+
+  static #DROP_CLASSES = [
+    "lexxy-drop-target--gallery-before", "lexxy-drop-target--gallery-after",
+    "lexxy-drop-target--list-before", "lexxy-drop-target--list-after",
+    "lexxy-drop-target--block-before", "lexxy-drop-target--block-after",
+  ]
+
+  #clearDropIndicators() {
+    const rootElement = this.#editor.getRootElement();
+    if (!rootElement) return
+
+    for (const el of rootElement.querySelectorAll("[class*='lexxy-drop-target--']")) {
+      el.classList.remove(...AttachmentDragAndDrop.#DROP_CLASSES);
+    }
+  }
+
+  // -- Node operations -------------------------------------------------------
+
+  #performDrop(draggedKey, target) {
+    const draggedNode = $getNodeByKey(draggedKey);
+    if (!draggedNode || !$isActionTextAttachmentNode(draggedNode)) return
+
+    if (target.type === "gallery") {
+      this.#dropOntoImage(draggedNode, target.nodeKey, target.position);
+    } else if (target.type === "gallery-reorder") {
+      this.#reorderInGallery(draggedNode, target.nodeKey, target.position);
+    } else if (target.type === "list-item") {
+      this.#dropIntoList(draggedNode, target);
+    } else {
+      this.#dropBetweenBlocks(draggedNode, target);
+    }
+
+    // Clear selection to prevent a second history entry. Lexical dispatches
+    // SELECTION_CHANGE_COMMAND during commit for non-range selections, which
+    // creates a separate update. Null selection avoids that dispatch entirely
+    // and also prevents Firefox's follow-up selectionchange from dirtying nodes.
+    $setSelection(null);
+  }
+
+  #dropOntoImage(draggedNode, targetKey, position) {
+    const targetNode = $getNodeByKey(targetKey);
+    if (!targetNode || !$isActionTextAttachmentNode(targetNode)) return
+    if (draggedNode.is(targetNode)) return
+
+    draggedNode.remove();
+
+    const gallery = $findOrCreateGalleryForImage(targetNode);
+    if (gallery) {
+      if (position === "before") {
+        targetNode.insertBefore(draggedNode);
+      } else {
+        targetNode.insertAfter(draggedNode);
+      }
+    }
+  }
+
+  #reorderInGallery(draggedNode, targetKey, position) {
+    const targetNode = $getNodeByKey(targetKey);
+    if (!targetNode || draggedNode.is(targetNode)) return
+
+    draggedNode.remove();
+
+    if (position === "before") {
+      targetNode.insertBefore(draggedNode);
+    } else {
+      targetNode.insertAfter(draggedNode);
+    }
+  }
+
+  #dropIntoList(draggedNode, target) {
+    const listItemNode = $getNearestNodeFromDOMNode(target.element);
+    if (!listItemNode || !$isListItemNode(listItemNode)) return
+
+    const listNode = listItemNode.getParent();
+    if (!listNode || !$isListNode(listNode)) return
+
+    const children = listNode.getChildren();
+    const index = children.indexOf(listItemNode);
+    if (index === -1) return
+
+    const splitIndex = target.position === "before" ? index : index + 1;
+
+    draggedNode.remove();
+
+    if (splitIndex === 0) {
+      listNode.insertBefore(draggedNode);
+    } else if (splitIndex >= children.length) {
+      listNode.insertAfter(draggedNode);
+    } else {
+      const [ , listAfter ] = $splitNode(listNode, splitIndex);
+      listAfter.insertBefore(draggedNode);
+    }
+  }
+
+  #dropBetweenBlocks(draggedNode, target) {
+    const targetNode = $getNearestNodeFromDOMNode(target.element);
+    if (!targetNode) return
+
+    const topLevelTarget = targetNode.getTopLevelElement?.() || targetNode;
+    if (draggedNode.is(topLevelTarget)) return
+
+    draggedNode.remove();
+
+    if (target.position === "before") {
+      topLevelTarget.insertBefore(draggedNode);
+    } else {
+      topLevelTarget.insertAfter(draggedNode);
+    }
+  }
+
+  // -- Lifecycle helpers -----------------------------------------------------
+
+  #cleanup() {
+    this.#clearDropIndicators();
+
+    if (this.#draggedNodeKey) {
+      const rootElement = this.#editor.getRootElement();
+      if (rootElement) {
+        const figure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+        figure?.classList.remove("lexxy-dragging");
+      }
+    }
+
+    this.#draggedNodeKey = null;
+
+    if (this.#rafId) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+
+    if (this.#draggingRafId) {
+      cancelAnimationFrame(this.#draggingRafId);
+      this.#draggingRafId = null;
+    }
+  }
+}
+
 class AttachmentsExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsAttachments
@@ -5369,14 +5619,37 @@ class AttachmentsExtension extends LexxyExtension {
         ImageGalleryNode
       ],
       register(editor) {
+        const dragAndDrop = new AttachmentDragAndDrop(editor);
+
         return mergeRegister(
-          editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL)
+          editor.registerNodeTransform(ActionTextAttachmentNode, $extractAttachmentFromParagraph),
+          editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL),
+          () => dragAndDrop.destroy()
         )
       }
     })
   }
 }
 
+// Decorator nodes can be wrapped in a Paragraph Node by Lexical when contained in a <div>
+// We remove them, splitting the node as needed
+function $extractAttachmentFromParagraph(attachmentNode) {
+  const parentNode = attachmentNode.getParent();
+  if (!$isParagraphNode(parentNode)) return
+
+  if (parentNode.getChildrenSize() === 1) {
+    parentNode.replace(attachmentNode);
+  } else {
+    const index = attachmentNode.getIndexWithinParent();
+    const [ topParagraph, bottomParagraph ] = $splitNode(parentNode, index);
+    topParagraph.insertAfter(attachmentNode);
+
+    for (const p of [ topParagraph, bottomParagraph ]) {
+      if (p.isEmpty()) p.remove();
+    }
+  }
+}
+
 function $collapseIntoGallery(backwards) {
   const anchor = $getSelection()?.anchor;
   if (!anchor) return false
@@ -5442,6 +5715,178 @@ function $moveSelectionBeforeGallery(anchor) {
   return true
 }
 
+class EarlyEscapeCodeNode extends CodeNode {
+  $config() {
+    return this.config("early_escape_code", { extends: CodeNode })
+  }
+
+  static $fromSelection(selection) {
+    const anchorNode = selection.anchor.getNode();
+    return $getNearestNodeOfType(anchorNode, EarlyEscapeCodeNode)
+      || (anchorNode instanceof EarlyEscapeCodeNode ? anchorNode : null)
+  }
+
+  insertNewAfter(selection, restoreSelection) {
+    if (!selection.isCollapsed()) return super.insertNewAfter(selection, restoreSelection)
+
+    if (this.#isCursorOnEmptyLastLine(selection)) {
+      $trimTrailingBlankNodes(this);
+
+      const paragraph = $createParagraphNode();
+      this.insertAfter(paragraph);
+      return paragraph
+    }
+
+    return super.insertNewAfter(selection, restoreSelection)
+  }
+
+  #isCursorOnEmptyLastLine(selection) {
+    if (!$isCursorOnLastLine(selection)) return false
+
+    const textContent = this.getTextContent();
+    return textContent === "" || textContent.endsWith("\n")
+  }
+
+}
+
+class EarlyEscapeListItemNode extends ListItemNode {
+  $config() {
+    return this.config("early_escape_listitem", { extends: ListItemNode })
+  }
+
+  insertNewAfter(selection, restoreSelection) {
+    if (this.#shouldEscape(selection)) {
+      return this.#escapeFromList()
+    }
+
+    return super.insertNewAfter(selection, restoreSelection)
+  }
+
+  #shouldEscape(selection) {
+    if (!$getNearestNodeOfType(this, QuoteNode)) return false
+    if ($isBlankNode(this)) return true
+
+    const paragraph = $getNearestNodeOfType(selection.anchor.getNode(), ParagraphNode);
+    return paragraph && $isBlankNode(paragraph) && $isListItemNode(paragraph.getParent())
+  }
+
+  #escapeFromList() {
+    const parentList = this.getParent();
+    if (!parentList || !$isListNode(parentList)) return
+
+    const blockquote = parentList.getParent();
+    const isInBlockquote = blockquote && $isQuoteNode(blockquote);
+
+    if (isInBlockquote) {
+      const hasNonEmptyListItems = this.getNextSiblings().some(
+        sibling => $isListItemNode(sibling) && !$isBlankNode(sibling)
+      );
+
+      if (hasNonEmptyListItems) {
+        return this.#splitBlockquoteWithList()
+      }
+    }
+
+    const paragraph = $createParagraphNode();
+    parentList.insertAfter(paragraph);
+
+    this.remove();
+    return paragraph
+  }
+
+  #splitBlockquoteWithList() {
+    const splitQuotes = $splitNode(this.getParent(), this.getIndexWithinParent());
+    this.remove();
+
+    const middleParagraph = $createParagraphNode();
+    splitQuotes[0].insertAfter(middleParagraph);
+
+    splitQuotes.forEach($trimTrailingBlankNodes);
+
+    return middleParagraph
+  }
+
+}
+
+class FormatEscapeExtension extends LexxyExtension {
+
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/format-escape",
+      nodes: [
+        EarlyEscapeCodeNode,
+        { replace: CodeNode, with: (node) => new EarlyEscapeCodeNode(node.getLanguage()), withKlass: EarlyEscapeCodeNode },
+        EarlyEscapeListItemNode,
+        { replace: ListItemNode, with: () => new EarlyEscapeListItemNode(), withKlass: EarlyEscapeListItemNode },
+      ],
+      register(editor) {
+        return mergeRegister(
+          editor.registerCommand(
+            INSERT_PARAGRAPH_COMMAND,
+            () => $escapeFromBlockquote(),
+            COMMAND_PRIORITY_HIGH
+          ),
+          editor.registerCommand(
+            KEY_ARROW_DOWN_COMMAND,
+            (event) => $handleArrowDownInCodeBlock(event),
+            COMMAND_PRIORITY_NORMAL
+          )
+        )
+      }
+    })
+  }
+}
+
+function $escapeFromBlockquote() {
+  const anchorNode = $getSelection().anchor.getNode();
+
+  const paragraph = $getNearestNodeOfType(anchorNode, ParagraphNode);
+  if (!paragraph || !$isBlankNode(paragraph)) return false
+
+  const blockquote = paragraph.getParent();
+  if (!blockquote || !$isQuoteNode(blockquote)) return false
+
+  const nonEmptySiblings = paragraph.getNextSiblings().filter(sibling => !$isBlankNode(sibling));
+
+  if (nonEmptySiblings.length > 0) {
+    $splitQuoteNode(blockquote, paragraph);
+  } else {
+    blockquote.insertAfter(paragraph);
+    paragraph.selectStart();
+  }
+
+  return true
+}
+
+function $splitQuoteNode(node, paragraph) {
+  const splitQuotes = $splitNode(node, paragraph.getIndexWithinParent());
+  splitQuotes[0].insertAfter(paragraph);
+  splitQuotes.forEach($trimTrailingBlankNodes);
+  paragraph.selectEnd();
+}
+
+function $handleArrowDownInCodeBlock(event) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+
+  const codeNode = EarlyEscapeCodeNode.$fromSelection(selection);
+  if (!codeNode) return false
+
+  if ($isCursorOnLastLine(selection) && !codeNode.getNextSibling()) {
+    event?.preventDefault();
+    const paragraph = $createParagraphNode();
+    codeNode.insertAfter(paragraph);
+    paragraph.selectEnd();
+    return true
+  }
+
+  return false
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -5502,7 +5947,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   toString() {
-    if (!this.cachedStringValue) {
+    if (this.cachedStringValue == null) {
       this.editor?.getEditorState().read(() => {
         this.cachedStringValue = $getReadableTextContent($getRoot());
       });
@@ -5532,7 +5977,8 @@ class LexicalEditorElement extends HTMLElement {
       HighlightExtension,
       TrixContentExtension,
       TablesExtension,
-      AttachmentsExtension
+      AttachmentsExtension,
+      FormatEscapeExtension
     ]
   }
 
@@ -5623,7 +6069,6 @@ class LexicalEditorElement extends HTMLElement {
     return nodes
       .filter(this.#isNotWhitespaceOnlyNode)
       .map(this.#wrapTextNode)
-      .map(this.#unwrapDecoratorNode)
   }
 
   // Whitespace-only text nodes (e.g. "\n" between block elements like <div>) and stray line break
@@ -5645,18 +6090,6 @@ class LexicalEditorElement extends HTMLElement {
     return paragraph
   }
 
-  // Custom decorator block elements such as action-text-attachments get wrapped into <p> automatically by Lexical.
-  // We unwrap those.
-  #unwrapDecoratorNode(node) {
-    if ($isParagraphNode(node) && node.getChildrenSize() === 1) {
-      const child = node.getFirstChild();
-      if ($isDecoratorNode(child) && !child.isInline()) {
-        return child
-      }
-    }
-    return node
-  }
-
   #initialize() {
     this.#synchronizeWithChanges();
     this.#registerComponents();
@@ -5895,22 +6328,23 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #findOrCreateDefaultToolbar() {
-    const toolbarId = this.config.get("toolbar");
-    if (toolbarId && toolbarId !== true) {
-      return document.getElementById(toolbarId)
+    const toolbarConfig = this.config.get("toolbar");
+    if (typeof toolbarConfig === "string") {
+      return document.getElementById(toolbarConfig)
     } else {
       return this.#createDefaultToolbar()
     }
   }
 
   get #hasToolbar() {
-    return this.supportsRichText && this.config.get("toolbar")
+    return this.supportsRichText && !!this.config.get("toolbar")
   }
 
   #createDefaultToolbar() {
     const toolbar = createElement("lexxy-toolbar");
     toolbar.innerHTML = LexicalToolbarElement.defaultTemplate;
     toolbar.setAttribute("data-attachments", this.supportsAttachments); // Drives toolbar CSS styles
+    toolbar.configure(this.config.get("toolbar"));
     this.prepend(toolbar);
     return toolbar
   }
@@ -5977,6 +6411,10 @@ function $getReadableTextContent(node) {
     const children = node.getChildren();
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
+      const previousChild = children[i - 1];
+
+      if (isAttachmentSpacerTextNode(child, previousChild, i, children.length)) continue
+
       text += $getReadableTextContent(child);
       if ($isElementNode(child) && i !== children.length - 1 && !child.isInline()) {
         text += "\n\n";
@@ -6361,6 +6799,7 @@ class LexicalPromptElement extends HTMLElement {
   constructor() {
     super();
     this.keyListeners = [];
+    this.showPopoverId = 0;
   }
 
   static observedAttributes = [ "connected" ]
@@ -6506,9 +6945,14 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   async #showPopover() {
+    const showId = ++this.showPopoverId;
     this.popoverElement ??= await this.#buildPopover();
+    if (this.showPopoverId !== showId) return
+
     this.#resetPopoverPosition();
     await this.#filterOptions();
+    if (this.showPopoverId !== showId) return
+
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
     this.#selectFirstOption();
 
@@ -6619,6 +7063,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   async #hidePopover() {
+    this.showPopoverId++;
     this.#clearSelection();
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", false);
     this.#editorElement.removeEventListener("lexxy:change", this.#filterOptions);
@@ -6644,6 +7089,14 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#editorContents.containsTextBackUntil(this.trigger)) {
       await this.#showFilteredOptions();
+
+      // Re-check after async operation — the trigger may have been consumed
+      // (e.g. markdown heading shortcut converted "# " to h1 during the fetch)
+      if (!this.#editorContents.containsTextBackUntil(this.trigger)) {
+        this.#hidePopover();
+        return
+      }
+
       await nextFrame();
       this.#positionPopover();
     } else {
@@ -6652,8 +7105,12 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   async #showFilteredOptions() {
+    const showId = this.showPopoverId;
     const filter = this.#editorContents.textBackUntil(this.trigger);
     const filteredListItems = await this.source.buildListItems(filter);
+    if (this.showPopoverId !== showId) return
+    if (!this.#editorContents.containsTextBackUntil(this.trigger)) return
+
     this.popoverElement.innerHTML = "";
 
     if (filteredListItems.length > 0) {
@@ -6968,21 +7425,16 @@ class NodeDeleteButton extends HTMLElement {
     this.editor = this.editorElement.editor;
     this.classList.add("lexxy-floating-controls");
 
-    if (!this.deleteButton) {
+    if (!this.querySelector(".lexxy-node-delete")) {
       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" });