@37signals/lexxy 0.8.0-beta → 0.8.2-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, 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() {
@@ -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;
@@ -1377,6 +1677,7 @@ class CommandDispatcher {
   #handleDragEnter(event) {
     this.dragCounter++;
     if (this.dragCounter === 1) {
+      this.#saveSelectionBeforeDrag();
       this.editor.getRootElement().classList.add("lexxy-editor--drag-over");
     }
   }
@@ -1384,6 +1685,7 @@ class CommandDispatcher {
   #handleDragLeave(event) {
     this.dragCounter--;
     if (this.dragCounter === 0) {
+      this.#selectionBeforeDrag = null;
       this.editor.getRootElement().classList.remove("lexxy-editor--drag-over");
     }
   }
@@ -1404,11 +1706,28 @@ 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;
+  }
+
   #handleTabKey(event) {
     if (this.selection.isInsideList) {
       return this.#handleTabForList(event)
@@ -1482,6 +1801,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"
@@ -1664,9 +1993,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #createDOMForImage(options = {}) {
     const img = createElement("img", { src: this.src, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
-    const container = createElement("div", { className: "attachment__container" });
-    container.appendChild(img);
-    return container
+    return img
   }
 
   get #imageDimensions() {
@@ -1708,6 +2035,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 +2058,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
   #handleCaptionInputKeydown(event) {
     if (event.key === "Enter") {
       event.preventDefault();
-      event.stopPropagation();
       event.target.blur();
 
       this.editor.update(() => {
@@ -1739,6 +2068,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 +2253,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,6 +2286,7 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
+      if (offset < anchorNode.getTextContentSize()) return null
       return this.#getNextNodeFromTextEnd(anchorNode)
     }
 
@@ -1979,6 +2317,7 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
+      if (offset > 0) return null
       return this.#getPreviousNodeFromTextStart(anchorNode)
     }
 
@@ -2092,7 +2431,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 +2441,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 +2542,42 @@ class Selection {
     const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
     if (!$isDecoratorNode(node)) return false
 
+    if (this.#collapseListItemToParagraph()) 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.
+  #collapseListItemToParagraph() {
+    const anchorNode = $getSelection()?.anchor?.getNode();
+    const listItem = anchorNode && $getNearestNodeOfType(anchorNode, ListItemNode);
+    if (!listItem) 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 +2684,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 +2710,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) {
@@ -2469,11 +2850,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 +2895,10 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   getTextContent() {
+    return "\ufeff"
+  }
+
+  getReadableTextContent() {
     return this.createDOM().textContent.trim() || `[${this.contentType}]`
   }
 
@@ -2545,6 +2930,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   decorate() {
     return null
   }
+
 }
 
 class FormatEscaper {
@@ -2559,12 +2945,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 +3219,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 +3354,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 +3445,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 +3464,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 +3523,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) {
@@ -3126,7 +3643,7 @@ class ImageGalleryNode extends ElementNode {
           conversion: () => {
             return {
               node: $createImageGalleryNode(),
-              after: children => $descendantsMatching(children, this.isValidChild)
+              after: children => children
             }
           },
           priority: 2
@@ -3403,6 +3920,8 @@ class Contents {
   }
 
   insertDOM(doc, { tag } = {}) {
+    this.#unwrapPlaceholderAnchors(doc);
+
     this.editor.update(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
@@ -3415,10 +3934,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 +3951,7 @@ class Contents {
       const lastNode = selectedNodes.at(-1);
       lastNode.insertAfter(node);
     }
-}
+  }
 
   insertAtCursorEnsuringLineBelow(node) {
     this.insertAtCursor(node);
@@ -3507,6 +4032,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 +4160,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 +4208,7 @@ class Contents {
       if (selectLast && uploader.nodes?.length) {
         const lastNode = uploader.nodes.at(-1);
         lastNode.selectEnd();
+        this.#normalizeSelectionInShadowRoot();
       }
     });
   }
@@ -3731,6 +4291,19 @@ class Contents {
     node.remove();
   }
 
+  // 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();
@@ -3896,6 +4469,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 +4678,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 +4697,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 +4754,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 +4865,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 +4888,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 +4975,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 +5227,14 @@ class WrappedTableNode extends TableNode {
     return super.importDOM()
   }
 
+  canInsertTextBefore() {
+    return false
+  }
+
+  canInsertTextAfter() {
+    return false
+  }
+
   exportDOM(editor) {
     const superExport = super.exportDOM(editor);
 
@@ -4713,7 +5504,7 @@ class LexicalEditorElement extends HTMLElement {
   toString() {
     if (!this.cachedStringValue) {
       this.editor?.getEditorState().read(() => {
-        this.cachedStringValue = $getRoot().getTextContent();
+        this.cachedStringValue = $getReadableTextContent($getRoot());
       });
     }
 
@@ -4830,10 +5621,20 @@ 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.
   // We wrap those in <p>
   #wrapTextNode(node) {
@@ -4874,7 +5675,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 +5802,7 @@ class LexicalEditorElement extends HTMLElement {
       this.#registerCodeHiglightingComponents();
       if (this.supportsMarkdown) {
         registerMarkdownShortcuts(this.editor, TRANSFORMERS);
+        registerMarkdownLeadingTagHandler(this.editor, TRANSFORMERS);
       }
     } else {
       registerPlainText(this.editor);
@@ -5160,6 +5965,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 +6424,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 +6456,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 +6587,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 +6685,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
   }
@@ -6781,8 +7635,11 @@ class TableTools extends HTMLElement {
   }
 
   #show() {
+    this.#updateButtonsPosition();
     this.style.display = "flex";
-    this.#update();
+    this.#updateRowColumnCount();
+    this.#closeMoreMenu();
+    this.#handleCommandButtonHover();
   }
 
   #hide() {