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

package/dist/lexxy.esm.js

@@ -10,20 +10,20 @@ 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, DecoratorNode, $createNodeSelection, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $isTextNode, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, $setSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, ElementNode, $splitNode, $getNodeByKey, $createLineBreakNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { 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, DRAGSTART_COMMAND, DROP_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, $createListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
 import { registerPlainText } from '@lexical/plain-text';
-import { RichTextExtension, $isQuoteNode, $createQuoteNode, $createHeadingNode, $isHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { RichTextExtension, $createQuoteNode, $isQuoteNode, $createHeadingNode, $isHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
-import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, $isCodeHighlightNode, CodeNode, 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';
 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, $descendantsMatching, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 
@@ -107,7 +107,7 @@ var Lexxy = {
 };
 
 const ALLOWED_HTML_TAGS = [ "a", "b", "blockquote", "br", "code", "div", "em",
-  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul", "table", "tbody", "tr", "th", "td" ];
+  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "u", "ul", "table", "tbody", "tr", "th", "td" ];
 
 const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
   "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
@@ -426,6 +426,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor.update(() => {
       this.editor.dispatchCommand(command, payload);
     }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined });
+
+    if (!isKeyboard) this.editor.focus();
   }
 
   #bindHotkeys() {
@@ -630,7 +632,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() {
@@ -700,7 +702,7 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.ol}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" title="Upload file">
+      <button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" data-prevent-overflow="true" title="Upload file">
         ${ToolbarIcons.attachment}
       </button>
 
@@ -711,9 +713,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>
@@ -730,6 +732,162 @@ class LexicalToolbarElement extends HTMLElement {
   }
 }
 
+const PUNCTUATION_OR_SPACE = /[^\w]/;
+
+// Supplements Lexical's built-in registerMarkdownShortcuts to handle the case
+// where a user types a leading tag before text that already ends with a
+// trailing tag (e.g. typing ` before `hello`` or ** before **hello**).
+//
+// Lexical's markdown shortcut handler only triggers format transformations when
+// the closing tag is the character just typed. When the opening tag is typed
+// instead (e.g. typing ` before `hello`` to form ``hello``), the built-in
+// handler doesn't match because it looks backward from the cursor for an
+// opening tag, but the cursor is right after it.
+//
+// This listener detects that scenario for ALL text format transformers
+// (backtick, bold, italic, strikethrough, etc.) and applies the appropriate
+// format.
+function registerMarkdownLeadingTagHandler(editor, transformers) {
+  const textFormatTransformers = transformers
+    .filter(t => t.type === "text-format")
+    .sort((a, b) => b.tag.length - a.tag.length); // Longer tags first
+
+  return editor.registerUpdateListener(({ tags, dirtyLeaves, editorState, prevEditorState }) => {
+    if (tags.has("historic") || tags.has("collaboration")) return
+    if (editor.isComposing()) return
+
+    const selection = editorState.read($getSelection);
+    const prevSelection = prevEditorState.read($getSelection);
+
+    if (!$isRangeSelection(prevSelection) || !$isRangeSelection(selection) || !selection.isCollapsed()) return
+
+    const anchorKey = selection.anchor.key;
+    const anchorOffset = selection.anchor.offset;
+
+    if (!dirtyLeaves.has(anchorKey)) return
+
+    const anchorNode = editorState.read(() => $getNodeByKey(anchorKey));
+    if (!$isTextNode(anchorNode)) return
+
+    // Only trigger when cursor moved forward (typing)
+    const prevOffset = prevSelection.anchor.key === anchorKey ? prevSelection.anchor.offset : 0;
+    if (anchorOffset <= prevOffset) return
+
+    const textContent = editorState.read(() => anchorNode.getTextContent());
+
+    // Try each transformer, longest tags first
+    for (const transformer of textFormatTransformers) {
+      const tag = transformer.tag;
+      const tagLen = tag.length;
+
+      // The typed characters must end at the cursor position and form the opening tag
+      const openTagStart = anchorOffset - tagLen;
+      if (openTagStart < 0) continue
+
+      const candidateOpenTag = textContent.slice(openTagStart, anchorOffset);
+      if (candidateOpenTag !== tag) continue
+
+      // Disambiguate from longer tags: if the character before the opening tag
+      // is the same as the tag character, this might be part of a longer tag
+      // (e.g. seeing `*` when the user is actually typing `**`)
+      const tagChar = tag[0];
+      if (openTagStart > 0 && textContent[openTagStart - 1] === tagChar) continue
+
+      // Check intraword constraint: if intraword is false, the character before
+      // the opening tag must be a space, punctuation, or the start of the text
+      if (transformer.intraword === false && openTagStart > 0) {
+        const beforeChar = textContent[openTagStart - 1];
+        if (beforeChar && !PUNCTUATION_OR_SPACE.test(beforeChar)) continue
+      }
+
+      // Search forward for a closing tag in the same text node
+      const searchStart = anchorOffset;
+      const closeTagIndex = textContent.indexOf(tag, searchStart);
+      if (closeTagIndex < 0) continue
+
+      // Disambiguate closing tag from longer tags: if the character right after
+      // the closing tag is the same as the tag character, skip
+      // (e.g. `*hello**` — the first `*` at index 6 is part of `**`)
+      if (textContent[closeTagIndex + tagLen] === tagChar) continue
+
+      // Also check if the character before the closing tag start is the same
+      // tag character (e.g. the closing tag might be a suffix of a longer sequence)
+      if (closeTagIndex > 0 && textContent[closeTagIndex - 1] === tagChar) continue
+
+      // There must be content between the tags (not just empty or whitespace-adjacent)
+      const innerStart = anchorOffset;
+      const innerEnd = closeTagIndex;
+      if (innerEnd <= innerStart) continue
+
+      // No space immediately after opening tag
+      if (textContent[innerStart] === " ") continue
+
+      // No space immediately before closing tag
+      if (textContent[innerEnd - 1] === " ") continue
+
+      // Check intraword constraint for closing tag
+      if (transformer.intraword === false) {
+        const afterCloseChar = textContent[closeTagIndex + tagLen];
+        if (afterCloseChar && !PUNCTUATION_OR_SPACE.test(afterCloseChar)) continue
+      }
+
+      editor.update(() => {
+        const node = $getNodeByKey(anchorKey);
+        if (!node || !$isTextNode(node)) return
+
+        const parent = node.getParent();
+        if (parent === null || $isCodeNode(parent)) return
+
+        $applyFormatFromLeadingTag(node, openTagStart, transformer);
+      });
+
+      break // Only apply the first (longest) matching transformer
+    }
+  })
+}
+
+function $applyFormatFromLeadingTag(anchorNode, openTagStart, transformer) {
+  const tag = transformer.tag;
+  const tagLen = tag.length;
+  const textContent = anchorNode.getTextContent();
+
+  const innerStart = openTagStart + tagLen;
+  const closeTagIndex = textContent.indexOf(tag, innerStart);
+  if (closeTagIndex < 0) return
+
+  const inner = textContent.slice(innerStart, closeTagIndex);
+  if (inner.length === 0) return
+
+  // Remove both tags and apply format
+  const before = textContent.slice(0, openTagStart);
+  const after = textContent.slice(closeTagIndex + tagLen);
+
+  anchorNode.setTextContent(before + inner + after);
+
+  const nextSelection = $createRangeSelection();
+  $setSelection(nextSelection);
+
+  // Select the inner text to apply formatting
+  nextSelection.anchor.set(anchorNode.getKey(), openTagStart, "text");
+  nextSelection.focus.set(anchorNode.getKey(), openTagStart + inner.length, "text");
+
+  for (const format of transformer.format) {
+    if (!nextSelection.hasFormat(format)) {
+      nextSelection.formatText(format);
+    }
+  }
+
+  // Collapse selection to end of formatted text and clear the format
+  // so subsequent typing is plain text
+  nextSelection.anchor.set(nextSelection.focus.key, nextSelection.focus.offset, nextSelection.focus.type);
+
+  for (const format of transformer.format) {
+    if (nextSelection.hasFormat(format)) {
+      nextSelection.toggleFormat(format);
+    }
+  }
+}
+
 var theme = {
   text: {
     bold: "lexxy-content__bold",
@@ -1074,9 +1232,10 @@ class HighlightExtension extends LexxyExtension {
         const canonicalizers = buildCanonicalizers(config);
 
         return mergeRegister(
-          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL),
-          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
+          editor.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))
         )
       }
@@ -1114,7 +1273,7 @@ function buildCanonicalizers(config) {
   ]
 }
 
-function $toggleSelectionStyles(styles) {
+function $toggleSelectionStyles(editor, styles) {
   const selection = $getSelection();
   if (!$isRangeSelection(selection)) return
 
@@ -1124,7 +1283,117 @@ function $toggleSelectionStyles(styles) {
     patch[property] = toggleOrReplace(oldValue, styles[property]);
   }
 
-  $patchStyleText(selection, patch);
+  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.
+  // Use discrete to force a synchronous commit, ensuring the changes
+  // are committed before editor.focus() triggers a second update cycle
+  // that would re-run transforms and wipe out the styles.
+  editor.update(() => {
+    for (const { key, startOffset, endOffset, textSize } of nodeKeys) {
+      const node = $getNodeByKey(key);
+      if (!node || !$isCodeHighlightNode(node)) continue
+
+      const parent = node.getParent();
+      if (!$isCodeNode(parent)) continue
+      if (startOffset === endOffset) continue
+
+      if (startOffset === 0 && endOffset === textSize) {
+        $applyStylePatchToNode(node, patch);
+      } else {
+        const splitNodes = node.splitText(startOffset, endOffset);
+        const targetNode = splitNodes[startOffset === 0 ? 0 : 1];
+        $applyStylePatchToNode(targetNode, patch);
+      }
+    }
+  }, { skipTransforms: true, discrete: true });
+}
+
+function $getNodeSelectionOffsets(node, selection) {
+  const nodeKey = node.getKey();
+  const anchorKey = selection.anchor.key;
+  const focusKey = selection.focus.key;
+  const textSize = node.getTextContentSize();
+
+  const isAnchor = nodeKey === anchorKey;
+  const isFocus = nodeKey === focusKey;
+
+  // Determine if selection is forward or backward
+  const isForward = selection.isBackward() === false;
+
+  let start = 0;
+  let end = textSize;
+
+  if (isForward) {
+    if (isAnchor) start = selection.anchor.offset;
+    if (isFocus) end = selection.focus.offset;
+  } else {
+    if (isFocus) start = selection.focus.offset;
+    if (isAnchor) end = selection.anchor.offset;
+  }
+
+  return [ start, end ]
+}
+
+function $applyStylePatchToNode(node, patch) {
+  const prevStyles = getStyleObjectFromCSS(node.getStyle());
+  const newStyles = { ...prevStyles };
+
+  for (const [ key, value ] of Object.entries(patch)) {
+    if (value === null) {
+      delete newStyles[key];
+    } else {
+      newStyles[key] = value;
+    }
+  }
+
+  const newCSSText = getCSSFromStyleObject(newStyles);
+  node.setStyle(newCSSText);
+
+  // Sync the highlight format using TextNode's setFormat to bypass
+  // CodeHighlightNode's no-op override
+  const shouldHaveHighlight = hasHighlightStyles(newCSSText);
+  const hasHighlight = node.hasFormat("highlight");
+
+  if (shouldHaveHighlight !== hasHighlight) {
+    $setCodeHighlightFormat(node, shouldHaveHighlight);
+  }
+}
+
+function $setCodeHighlightFormat(node, shouldHaveHighlight) {
+  const writable = node.getWritable();
+  const IS_HIGHLIGHT = 1 << 7;
+
+  if (shouldHaveHighlight) {
+    writable.__format |= IS_HIGHLIGHT;
+  } else {
+    writable.__format &= ~IS_HIGHLIGHT;
+  }
 }
 
 function toggleOrReplace(oldValue, newValue) {
@@ -1137,6 +1406,18 @@ function $syncHighlightWithStyle(textNode) {
   }
 }
 
+function $syncHighlightWithCodeHighlightNode(node) {
+  const parent = node.getParent();
+  if (!$isCodeNode(parent)) return
+
+  const shouldHaveHighlight = hasHighlightStyles(node.getStyle());
+  const hasHighlight = node.hasFormat("highlight");
+
+  if (shouldHaveHighlight !== hasHighlight) {
+    $setCodeHighlightFormat(node, shouldHaveHighlight);
+  }
+}
+
 function $canonicalizePastedStyles(textNode, canonicalizers = []) {
   if ($hasPastedStyles(textNode)) {
     $setPastedStyles(textNode, false);
@@ -1183,6 +1464,8 @@ const COMMANDS = [
 ];
 
 class CommandDispatcher {
+  #selectionBeforeDrag = null
+
   static configureFor(editorElement) {
     new CommandDispatcher(editorElement);
   }
@@ -1270,7 +1553,9 @@ class CommandDispatcher {
   }
 
   dispatchInsertQuoteBlock() {
-    this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
+    if (!this.contents.wrapSelectedSoftBreakLines(() => $createQuoteNode())) {
+      this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
+    }
   }
 
   dispatchInsertCodeBlock() {
@@ -1361,9 +1646,24 @@ class CommandDispatcher {
   }
 
   #registerKeyboardCommands() {
+    this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#handleArrowRightKey.bind(this), COMMAND_PRIORITY_NORMAL);
     this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
   }
 
+  #handleArrowRightKey(event) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+    if (this.selection.isInsideCodeBlock || !selection.hasFormat("code")) return false
+
+    const anchorNode = selection.anchor.getNode();
+    if (!$isTextNode(anchorNode) || selection.anchor.offset !== anchorNode.getTextContentSize()) return false
+    if (anchorNode.getNextSibling() !== null) return false
+
+    event.preventDefault();
+    selection.toggleFormat("code");
+    return true
+  }
+
   #registerDragAndDropHandlers() {
     if (this.editorElement.supportsAttachments) {
       this.dragCounter = 0;
@@ -1375,24 +1675,34 @@ class CommandDispatcher {
   }
 
   #handleDragEnter(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter++;
     if (this.dragCounter === 1) {
+      this.#saveSelectionBeforeDrag();
       this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
     }
   }
 
   #handleDragLeave(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter--;
     if (this.dragCounter === 0) {
+      this.#selectionBeforeDrag = null;
       this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
     }
   }
 
   #handleDragOver(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
   }
 
   #handleDrop(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
 
     this.dragCounter = 0;
@@ -1404,11 +1714,32 @@ class CommandDispatcher {
     const files = Array.from(dataTransfer.files);
     if (!files.length) return
 
+    this.#restoreSelectionBeforeDrag();
     this.contents.uploadFiles(files, { selectLast: true });
 
     this.editor.focus();
   }
 
+  #saveSelectionBeforeDrag() {
+    this.editor.getEditorState().read(() => {
+      this.#selectionBeforeDrag = $getSelection()?.clone();
+    });
+  }
+
+  #restoreSelectionBeforeDrag() {
+    if (!this.#selectionBeforeDrag) return
+
+    this.editor.update(() => {
+      $setSelection(this.#selectionBeforeDrag);
+    });
+
+    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)
@@ -1482,6 +1813,16 @@ function extractFileName(string) {
   return string.split("/").pop()
 }
 
+// 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) {
+  try {
+    return JSON.parse(content)
+  } catch {
+    return content
+  }
+}
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
@@ -1647,6 +1988,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);
@@ -1708,6 +2051,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
     input.addEventListener("focusin", () => input.placeholder = "Add caption...");
     input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
     input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
+    input.addEventListener("copy", (event) => event.stopPropagation());
+    input.addEventListener("cut", (event) => event.stopPropagation());
+    input.addEventListener("paste", (event) => event.stopPropagation());
 
     caption.appendChild(input);
 
@@ -1728,7 +2074,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
   #handleCaptionInputKeydown(event) {
     if (event.key === "Enter") {
       event.preventDefault();
-      event.stopPropagation();
       event.target.blur();
 
       this.editor.update(() => {
@@ -1739,6 +2084,10 @@ class ActionTextAttachmentNode extends DecoratorNode {
       });
     }
 
+    // Stop all keydown events from bubbling to the Lexical root element.
+    // The caption textarea is outside Lexical's content model and should
+    // handle its own keyboard events natively (Ctrl+A, Ctrl+C, Ctrl+X, etc.).
+    event.stopPropagation();
   }
 }
 
@@ -1920,6 +2269,10 @@ class Selection {
   }
 
   get isTableCellSelected() {
+    const selection = $getSelection();
+    const { anchor, focus } = selection;
+    if (!$isRangeSelection(selection) || anchor.key !== focus.key) return false
+
     return this.nearestNodeOfType(TableCellNode) !== null
   }
 
@@ -1949,7 +2302,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      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)) {
@@ -1979,7 +2337,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      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)) {
@@ -2092,7 +2455,9 @@ class Selection {
     }
   }
 
-  async #selectPreviousNode() {
+  async #selectPreviousNode(event) {
+    if (event?.shiftKey) return false
+
     if (this.hasNodeSelection) {
       return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
     } else {
@@ -2100,7 +2465,9 @@ class Selection {
     }
   }
 
-  async #selectNextNode() {
+  async #selectNextNode(event) {
+    if (event?.shiftKey) return false
+
     if (this.hasNodeSelection) {
       return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
     } else {
@@ -2199,12 +2566,46 @@ class Selection {
     const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
     if (!$isDecoratorNode(node)) return false
 
+    if (this.#collapseListItemToParagraph(node)) return true
+
     this.#removeEmptyElementAnchorNode();
 
     const selection = this.#selectInLexical(node);
     return Boolean(selection)
   }
 
+  // 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. 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
+
+    const paragraph = $createParagraphNode();
+    const children = listItem.getChildren();
+    children.forEach(child => paragraph.append(child));
+
+    if (listNode.getChildrenSize() === 1) {
+      listNode.insertBefore(paragraph);
+      listNode.remove();
+    } else {
+      listNode.insertBefore(paragraph);
+      listItem.remove();
+    }
+
+    paragraph.selectStart();
+    return true
+  }
+
   #removeEmptyElementAnchorNode(anchor = $getSelection()?.anchor) {
     const anchorNode = anchor?.getNode();
     if ($isElementNode(anchorNode) && anchorNode?.isEmpty()) anchorNode.remove();
@@ -2311,8 +2712,12 @@ class Selection {
   }
 
   #getNextNodeFromTextEnd(anchorNode) {
-    if (anchorNode.getNextSibling() instanceof DecoratorNode) {
-      return anchorNode.getNextSibling()
+    const nextSibling = anchorNode.getNextSibling();
+    if ($isDecoratorNode(nextSibling)) {
+      return nextSibling
+    }
+    if (nextSibling != null) {
+      return null
     }
     const parent = anchorNode.getParent();
     return parent ? parent.getNextSibling() : null
@@ -2333,11 +2738,15 @@ class Selection {
   }
 
   #getPreviousNodeFromTextStart(anchorNode) {
-    if (anchorNode.getPreviousSibling() instanceof DecoratorNode) {
-      return anchorNode.getPreviousSibling()
+    const previousSibling = anchorNode.getPreviousSibling();
+    if ($isDecoratorNode(previousSibling)) {
+      return previousSibling
+    }
+    if (previousSibling != null) {
+      return null
     }
     const parent = anchorNode.getParent();
-    return parent.getPreviousSibling()
+    return parent ? parent.getPreviousSibling() : null
   }
 
   #getNodeBeforeElementNode(anchorNode, offset) {
@@ -2362,6 +2771,63 @@ class Selection {
     }
     return current ? current.getPreviousSibling() : null
   }
+
+  #isCursorOnFirstVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "first")
+  }
+
+  #isCursorOnLastVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "last")
+  }
+
+  // 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
+
+    const domElement = this.editor.getElementByKey(topLevelElement.getKey());
+    if (!domElement) return false
+
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection?.rangeCount) return false
+
+    const cursorRect = this.#getReliableRectFromRange(nativeSelection.getRangeAt(0));
+    if (!cursorRect || this.#isRectUnreliable(cursorRect)) return false
+
+    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 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) {
@@ -2469,11 +2935,11 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
 
             nodes.push(new CustomActionTextAttachmentNode({
               sgid: attachment.getAttribute("sgid"),
-              innerHtml: JSON.parse(attachment.getAttribute("content")),
+              innerHtml: parseAttachmentContent(attachment.getAttribute("content")),
               contentType: attachment.getAttribute("content-type")
             }));
 
-            nodes.push($createTextNode(" "));
+            nodes.push($createTextNode("\u2060"));
 
             return { node: nodes }
           },
@@ -2514,6 +2980,10 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   getTextContent() {
+    return "\ufeff"
+  }
+
+  getReadableTextContent() {
     return this.createDOM().textContent.trim() || `[${this.contentType}]`
   }
 
@@ -2545,6 +3015,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   decorate() {
     return null
   }
+
 }
 
 class FormatEscaper {
@@ -2559,12 +3030,20 @@ class FormatEscaper {
       (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
@@ -2825,6 +3304,101 @@ class FormatEscaper {
 
     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) {
@@ -2865,6 +3439,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError } = node;
     super({ ...node, contentType: file.type }, key);
     this.file = file;
+    this.fileName = file.name;
     this.uploadUrl = uploadUrl;
     this.blobUrlTemplate = blobUrlTemplate;
     this.progress = progress ?? null;
@@ -2955,7 +3530,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   #createCaption() {
     const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
-    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.file.name || "" });
+    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.file.name || "" });
     const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
     figcaption.appendChild(nameSpan);
     figcaption.appendChild(sizeSpan);
@@ -2974,7 +3549,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       const writable = this.getWritable();
       writable.width = width;
       writable.height = height;
-    }, { tag: SILENT_UPDATE_TAGS });
+    }, { tag: this.#backgroundUpdateTags });
   }
 
   get #hasDimensions() {
@@ -3033,20 +3608,47 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   #setProgress(progress) {
     this.editor.update(() => {
       this.getWritable().progress = progress;
-    }, { tag: SILENT_UPDATE_TAGS });
+    }, { tag: this.#backgroundUpdateTags });
   }
 
   #handleUploadError(error) {
     console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
     this.editor.update(() => {
       this.getWritable().uploadError = true;
-    }, { tag: SILENT_UPDATE_TAGS });
+    }, { tag: this.#backgroundUpdateTags });
   }
 
   #showUploadedAttachment(blob) {
+    const editorHasFocus = this.#editorHasFocus;
+
     this.editor.update(() => {
-      this.replace(this.#toActionTextAttachmentNodeWith(blob));
-    }, { tag: SILENT_UPDATE_TAGS });
+      const shouldTransferNodeSelection = editorHasFocus && this.isSelected();
+
+      const replacementNode = this.#toActionTextAttachmentNodeWith(blob);
+      this.replace(replacementNode);
+
+      if (shouldTransferNodeSelection) {
+        const nodeSelection = $createNodeSelectionWith(replacementNode);
+        $setSelection(nodeSelection);
+      }
+    }, { tag: this.#backgroundUpdateTags });
+  }
+
+  // Upload lifecycle methods (progress, completion, errors) run asynchronously and may
+  // fire while the user is focused on another element (e.g., a title field). Without
+  // SKIP_DOM_SELECTION_TAG, Lexical's reconciler would move the DOM selection back into
+  // the editor, stealing focus from wherever the user is currently typing.
+  get #backgroundUpdateTags() {
+    if (this.#editorHasFocus) {
+      return SILENT_UPDATE_TAGS
+    } else {
+      return [ ...SILENT_UPDATE_TAGS, SKIP_DOM_SELECTION_TAG ]
+    }
+  }
+
+  get #editorHasFocus() {
+    const rootElement = this.editor.getRootElement();
+    return rootElement !== null && rootElement.contains(document.activeElement)
   }
 
   #toActionTextAttachmentNodeWith(blob) {
@@ -3119,14 +3721,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 => $descendantsMatching(children, this.isValidChild)
+              node: $createImageGalleryNode()
             }
           },
           priority: 2
@@ -3143,6 +3743,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())
   }
@@ -3403,6 +4010,8 @@ class Contents {
   }
 
   insertDOM(doc, { tag } = {}) {
+    this.#unwrapPlaceholderAnchors(doc);
+
     this.editor.update(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
@@ -3415,10 +4024,16 @@ class Contents {
   }
 
   insertAtCursor(node) {
-    const selection = $getSelection() ?? $getRoot().selectEnd();
+    let selection = $getSelection() ?? $getRoot().selectEnd();
     const selectedNodes = selection?.getNodes();
 
     if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      if ($isShadowRoot(anchorNode)) {
+        const paragraph = $createParagraphNode();
+        anchorNode.append(paragraph);
+        selection = paragraph.selectStart();
+      }
       selection.insertNodes([ node ]);
     } else if ($isNodeSelection(selection) && selectedNodes.length > 0) {
       // Overrides Lexical's default behavior of _removing_ the currently selected nodes
@@ -3426,7 +4041,7 @@ class Contents {
       const lastNode = selectedNodes.at(-1);
       lastNode.insertAfter(node);
     }
-}
+  }
 
   insertAtCursorEnsuringLineBelow(node) {
     this.insertAtCursor(node);
@@ -3507,6 +4122,41 @@ class Contents {
     return result
   }
 
+  wrapSelectedSoftBreakLines(newNodeFn) {
+    let paragraphKey = null;
+    let selectedLineRange = null;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || selection.isCollapsed()) return
+
+      const paragraph = this.#getSelectedParagraphWithSoftLineBreaks(selection);
+      if (!paragraph) return
+
+      const lines = this.#splitParagraphIntoLines(paragraph);
+      selectedLineRange = this.#getSelectedLineRange(lines, selection);
+
+      if (!selectedLineRange) return
+
+      const { start, end } = selectedLineRange;
+      if (start === 0 && end === lines.length - 1) return
+
+      paragraphKey = paragraph.getKey();
+    });
+
+    if (!paragraphKey || !selectedLineRange) return false
+
+    this.editor.update(() => {
+      const paragraph = $getNodeByKey(paragraphKey);
+      if (!paragraph || !$isParagraphNode(paragraph)) return
+
+      const lines = this.#splitParagraphIntoLines(paragraph);
+      this.#replaceParagraphWithWrappedSelectedLines(paragraph, lines, selectedLineRange, newNodeFn);
+    });
+
+    return true
+  }
+
   unwrapSelectedListItems() {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -3600,15 +4250,14 @@ class Contents {
   replaceTextBackUntil(stringToReplace, replacementNodes) {
     replacementNodes = Array.isArray(replacementNodes) ? replacementNodes : [ replacementNodes ];
 
-    this.editor.update(() => {
-      const { anchorNode, offset } = this.#getTextAnchorData();
-      if (!anchorNode) return
+    const selection = $getSelection();
+    const { anchorNode, offset } = this.#getTextAnchorData();
+    if (!anchorNode) return
 
-      const lastIndex = this.#findLastIndexBeforeCursor(anchorNode, offset, stringToReplace);
-      if (lastIndex === -1) return
+    const lastIndex = this.#findLastIndexBeforeCursor(anchorNode, offset, stringToReplace);
+    if (lastIndex === -1) return
 
-      this.#performTextReplacement(anchorNode, offset, lastIndex, replacementNodes);
-    });
+    this.#performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes);
   }
 
   createParagraphAfterNode(node, text) {
@@ -3649,6 +4298,7 @@ class Contents {
       if (selectLast && uploader.nodes?.length) {
         const lastNode = uploader.nodes.at(-1);
         lastNode.selectEnd();
+        this.#normalizeSelectionInShadowRoot();
       }
     });
   }
@@ -3731,7 +4381,20 @@ class Contents {
     node.remove();
   }
 
-  #insertNodeWrappingAllSelectedNodes(newNodeFn) {
+  // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
+  // from rendered views where mentions and interactive elements are wrapped in
+  // <a href="#"> tags. Unwrap them so their text content pastes as plain text
+  // and real links are preserved.
+  #unwrapPlaceholderAnchors(doc) {
+    for (const anchor of doc.querySelectorAll("a")) {
+      const href = anchor.getAttribute("href") || "";
+      if (href === "" || href === "#") {
+        anchor.replaceWith(...anchor.childNodes);
+      }
+    }
+  }
+
+  #insertNodeWrappingAllSelectedNodes(newNodeFn) {
     this.editor.update(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
@@ -3896,6 +4559,101 @@ class Contents {
     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();
@@ -4010,13 +4768,14 @@ class Contents {
     return textBeforeCursor.lastIndexOf(stringToReplace)
   }
 
-  #performTextReplacement(anchorNode, offset, lastIndex, replacementNodes) {
+  #performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes) {
     const fullText = anchorNode.getTextContent();
     const textBeforeString = fullText.slice(0, lastIndex);
     const textAfterCursor = fullText.slice(offset);
 
-    const textNodeBefore = $createTextNode(textBeforeString);
-    const textNodeAfter = $createTextNode(textAfterCursor || " ");
+    const trailingSpacer = this.#hasInlineDecoratorNode(replacementNodes) ? "\u2060" : " ";
+    const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, selection, textBeforeString);
+    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterCursor || trailingSpacer);
 
     anchorNode.replace(textNodeBefore);
 
@@ -4028,6 +4787,24 @@ 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;
+    const fallbackStyle = parent?.getTextStyle?.() || "";
+    const format = $isRangeSelection(selection) && selection.format ? selection.format : (anchorNode.getFormat() || fallbackFormat);
+    const style = $isRangeSelection(selection) && selection.style ? selection.style : (anchorNode.getStyle() || fallbackStyle);
+
+    return $createTextNode(text)
+      .setFormat(format)
+      .setDetail(anchorNode.getDetail())
+      .setMode(anchorNode.getMode())
+      .setStyle(style)
+  }
+
   #insertReplacementNodes(startNode, replacementNodes) {
     let previousNode = startNode;
     for (const node of replacementNodes) {
@@ -4067,6 +4844,29 @@ class Contents {
   #shouldUploadFile(file) {
     return dispatch(this.editorElement, "lexxy:file-accept", { file }, true)
   }
+
+  // When the selection anchor is on a shadow root (e.g. a table cell), Lexical's
+  // insertNodes can't find a block parent and fails silently. Normalize the
+  // selection to point inside the shadow root's content instead.
+  #normalizeSelectionInShadowRoot() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
+
+    const anchorNode = selection.anchor.getNode();
+    if (!$isShadowRoot(anchorNode)) return
+
+    // Append a paragraph inside the shadow root so there's a valid text-level
+    // target for subsequent insertions. This is necessary because decorator
+    // nodes (e.g. attachments) at the end of a table cell leave the selection
+    // on the cell itself with no block-level descendant to anchor to.
+    const paragraph = $createParagraphNode();
+    anchorNode.append(paragraph);
+    paragraph.selectStart();
+  }
+}
+
+function $isShadowRoot(node) {
+  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
 }
 
 class Clipboard {
@@ -4155,7 +4955,7 @@ class Clipboard {
   }
 
   #pasteMarkdown(text) {
-    const html = marked(text);
+    const html = marked(text, { breaks: true });
     const doc = parseHtml(html);
     const detail = Object.freeze({
       markdown: text,
@@ -4178,19 +4978,38 @@ class Clipboard {
     if (!this.editorElement.supportsAttachments) return false
 
     const html = clipboardData.getData("text/html");
+    const files = clipboardData.files;
+
+    if (files.length && this.#isCopiedImageHTML(html)) {
+      this.#uploadFilesPreservingScroll(files);
+      return true
+    }
+
     if (html) {
       this.contents.insertHtml(html, { tag: PASTE_TAG });
       return true
     }
 
+    this.#uploadFilesPreservingScroll(files);
+
+    return true
+  }
+
+  #isCopiedImageHTML(html) {
+    if (!html) return false
+
+    const doc = parseHtml(html);
+    const elementChildren = Array.from(doc.body.children);
+
+    return elementChildren.length === 1 && elementChildren[0].tagName === "IMG"
+  }
+
+  #uploadFilesPreservingScroll(files) {
     this.#preservingScrollPosition(() => {
-      const files = clipboardData.files;
       if (files.length) {
         this.contents.uploadFiles(files, { selectLast: true });
       }
     });
-
-    return true
   }
 
   // Deals with an issue in Safari where it scrolls to the tops after pasting attachments
@@ -4246,6 +5065,60 @@ class Extensions {
   }
 }
 
+// Custom TextNode exportDOM that avoids redundant bold/italic wrapping.
+//
+// Lexical's built-in TextNode.exportDOM() calls createDOM() which produces semantic tags
+// like <strong> for bold and <em> for italic, then unconditionally wraps the result
+// with presentational tags (<b>, <i>) for the same formats. This produces redundant markup
+// like <b><strong>text</strong></b>.
+//
+// This custom export skips <b> when <strong> is already present and <i> when <em> is
+// already present, while preserving <s> and <u> wrappers which have no semantic equivalents
+// in createDOM's output.
+
+function exportTextNodeDOM(editor, textNode) {
+  const element = textNode.createDOM(editor._config, editor);
+  element.style.whiteSpace = "pre-wrap";
+
+  if (textNode.hasFormat("lowercase")) {
+    element.style.textTransform = "lowercase";
+  } else if (textNode.hasFormat("uppercase")) {
+    element.style.textTransform = "uppercase";
+  } else if (textNode.hasFormat("capitalize")) {
+    element.style.textTransform = "capitalize";
+  }
+
+  let result = element;
+
+  if (textNode.hasFormat("bold") && !containsTag(element, "strong")) {
+    result = wrapWith(result, "b");
+  }
+  if (textNode.hasFormat("italic") && !containsTag(element, "em")) {
+    result = wrapWith(result, "i");
+  }
+  if (textNode.hasFormat("strikethrough")) {
+    result = wrapWith(result, "s");
+  }
+  if (textNode.hasFormat("underline")) {
+    result = wrapWith(result, "u");
+  }
+
+  return { element: result }
+}
+
+function containsTag(element, tagName) {
+  const upperTag = tagName.toUpperCase();
+  if (element.tagName === upperTag) return true
+
+  return element.querySelector(tagName) !== null
+}
+
+function wrapWith(element, tag) {
+  const wrapper = document.createElement(tag);
+  wrapper.appendChild(element);
+  return wrapper
+}
+
 class ProvisionalParagraphNode extends ParagraphNode {
   $config() {
     return this.config("provisonal_paragraph", {
@@ -4444,6 +5317,14 @@ class WrappedTableNode extends TableNode {
     return super.importDOM()
   }
 
+  canInsertTextBefore() {
+    return false
+  }
+
+  canInsertTextAfter() {
+    return false
+  }
+
   exportDOM(editor) {
     const superExport = super.exportDOM(editor);
 
@@ -4564,6 +5445,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
@@ -4578,14 +5818,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
@@ -4713,7 +5976,7 @@ class LexicalEditorElement extends HTMLElement {
   toString() {
     if (!this.cachedStringValue) {
       this.editor?.getEditorState().read(() => {
-        this.cachedStringValue = $getRoot().getTextContent();
+        this.cachedStringValue = $getReadableTextContent($getRoot());
       });
     }
 
@@ -4830,8 +6093,17 @@ class LexicalEditorElement extends HTMLElement {
     const nodes = $generateNodesFromDOM(this.editor, parseHtml(`${html}`));
 
     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
+  // nodes are formatting artifacts from the HTML source. They can't be appended to the root node
+  // and have no semantic meaning, so we strip them during import.
+  #isNotWhitespaceOnlyNode(node) {
+    if ($isLineBreakNode(node)) return false
+    if ($isTextNode(node) && node.getTextContent().trim() === "") return false
+    return true
   }
 
   // Raw string values produce TextNodes which cannot be appended directly to the RootNode.
@@ -4844,18 +6116,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();
@@ -4874,7 +6134,10 @@ class LexicalEditorElement extends HTMLElement {
       name: "lexxy/core",
       namespace: "Lexxy",
       theme: theme,
-      nodes: this.#lexicalNodes
+      nodes: this.#lexicalNodes,
+      html: {
+        export: new Map([ [ TextNode, exportTextNodeDOM ] ])
+      }
     },
       ...this.extensions.lexicalExtensions
     );
@@ -4998,6 +6261,7 @@ class LexicalEditorElement extends HTMLElement {
       this.#registerCodeHiglightingComponents();
       if (this.supportsMarkdown) {
         registerMarkdownShortcuts(this.editor, TRANSFORMERS);
+        registerMarkdownLeadingTagHandler(this.editor, TRANSFORMERS);
       }
     } else {
       registerPlainText(this.editor);
@@ -5160,6 +6424,29 @@ class LexicalEditorElement extends HTMLElement {
   }
 }
 
+// Like $getRoot().getTextContent() but uses readable text for custom attachment nodes
+// (e.g., mentions) instead of their single-character cursor placeholder.
+function $getReadableTextContent(node) {
+  if (node instanceof CustomActionTextAttachmentNode) {
+    return node.getReadableTextContent()
+  }
+
+  if ($isElementNode(node)) {
+    let text = "";
+    const children = node.getChildren();
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      text += $getReadableTextContent(child);
+      if ($isElementNode(child) && i !== children.length - 1 && !child.isInline()) {
+        text += "\n\n";
+      }
+    }
+    return text
+  }
+
+  return node.getTextContent()
+}
+
 class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
     this.container = this.closest("details");
@@ -5596,6 +6883,8 @@ class LexicalPromptElement extends HTMLElement {
   #addTriggerListener() {
     const unregister = this.#editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
+        if (this.#selection.isInsideCodeBlock) return
+
         const { node, offset } = this.#selection.selectedNodeWithOffset();
         if (!node) return
 
@@ -5626,10 +6915,15 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #addCursorPositionListener() {
-    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
+    this.cursorPositionListener = this.#editor.registerUpdateListener(({ editorState }) => {
       if (this.closed) return
 
-      this.#editor.read(() => {
+      editorState.read(() => {
+        if (this.#selection.isInsideCodeBlock) {
+          this.#hidePopover();
+          return
+        }
+
         const { node, offset } = this.#selection.selectedNodeWithOffset();
         if (!node) return
 
@@ -5752,25 +7046,34 @@ class LexicalPromptElement extends HTMLElement {
     const verticalOffset = contentRect.top - editorRect.top;
 
     if (!this.popoverElement.hasAttribute("data-anchored")) {
-      this.popoverElement.style.left = `${x}px`;
+      this.#setPopoverOffsetX(x);
+      this.#setPopoverOffsetY(y + verticalOffset);
       this.popoverElement.toggleAttribute("data-anchored", true);
     }
 
-    this.popoverElement.style.top = `${y + verticalOffset}px`;
-    this.popoverElement.style.bottom = "auto";
-
     const popoverRect = this.popoverElement.getBoundingClientRect();
-    const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
 
-    if (isClippedAtBottom || this.popoverElement.hasAttribute("data-clipped-at-bottom")) {
-      this.popoverElement.style.top = `${y + verticalOffset - popoverRect.height - fontSize}px`;
-      this.popoverElement.style.bottom = "auto";
+    if (popoverRect.right > window.innerWidth) {
+      this.popoverElement.toggleAttribute("data-clipped-at-right", true);
+    }
+
+    if (popoverRect.bottom > window.innerHeight) {
+      this.#setPopoverOffsetY(contentRect.height - y + fontSize);
       this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }
   }
 
+  #setPopoverOffsetX(value) {
+    this.popoverElement.style.setProperty("--lexxy-prompt-offset-x", `${value}px`);
+  }
+
+  #setPopoverOffsetY(value) {
+    this.popoverElement.style.setProperty("--lexxy-prompt-offset-y", `${value}px`);
+  }
+
   #resetPopoverPosition() {
     this.popoverElement.removeAttribute("data-clipped-at-bottom");
+    this.popoverElement.removeAttribute("data-clipped-at-right");
     this.popoverElement.removeAttribute("data-anchored");
   }
 
@@ -5841,6 +7144,16 @@ class LexicalPromptElement extends HTMLElement {
       this.#hidePopover();
       this.#editorElement.focus();
       event.stopPropagation();
+    } else if (event.key === ",") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#optionWasSelected();
+      this.#editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertText(",");
+        }
+      });
     }
     // Arrow keys are now handled via Lexical commands with HIGH priority
   }
@@ -6114,21 +7427,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" });
 
@@ -6781,8 +8089,11 @@ class TableTools extends HTMLElement {
   }
 
   #show() {
+    this.#updateButtonsPosition();
     this.style.display = "flex";
-    this.#update();
+    this.#updateRowColumnCount();
+    this.#closeMoreMenu();
+    this.#handleCommandButtonHover();
   }
 
   #hide() {