@37signals/lexxy 0.9.19-alpha.1 → 0.9.19-alpha.2

package/dist/lexxy.esm.js

@@ -1,13 +1,13 @@
 export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, $normalizeSelection__EXPERIMENTAL, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
-import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
+import { ListNode, ListItemNode, $getListDepth, $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, $createListItemNode, registerList } from '@lexical/list';
 import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertNodeToNearestRoot, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
-import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { RichTextExtension, $isQuoteNode, QuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { HistoryExtension } from '@lexical/history';
 import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
@@ -1534,8 +1534,12 @@ function $isSafeForRoot(node) {
 function $makeSafeForRoot(node) {
   if ($isSafeForRoot(node)) {
     return node
-  } else {
+  } else if (node.getParent()) {
     return $wrapNodeInElement(node, () => node.createParentElementNode())
+  } else {
+    // Detached nodes (e.g. clipboard nodes being inserted) can't be `replace`d in place,
+    // so append them into a fresh required parent instead.
+    return node.createParentElementNode().append(node)
   }
 }
 
@@ -1723,7 +1727,7 @@ function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
   }
 }
 
-function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
+function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor = (node) => node.getTopLevelElement()) {
   $ensureForwardRangeSelection(selection);
 
   const focusCaret = $caretFromPoint(selection.focus, "next");
@@ -1743,8 +1747,8 @@ function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
   const focusOuter = focusBrCaret && $splitAroundLineBreak(focusBrCaret);
   const anchorOuter = anchorBrCaret && $splitAroundLineBreak(anchorBrCaret);
 
-  const innerStart = anchorOuter?.getNextSibling() ?? selection.anchor.getNode().getTopLevelElement();
-  const innerEnd = focusOuter?.getPreviousSibling() ?? selection.focus.getNode().getTopLevelElement();
+  const innerStart = anchorOuter?.getNextSibling() ?? fallbackAncestor(selection.anchor.getNode());
+  const innerEnd = focusOuter?.getPreviousSibling() ?? fallbackAncestor(selection.focus.getNode());
   if (!innerStart || !innerEnd) return
 
   $setSelectionFromCaretRange($getCaretRange(
@@ -1850,6 +1854,49 @@ function $splitAroundLineBreak(lineBreakCaret) {
   return outer
 }
 
+// Lexical's RangeSelection.insertNodes/insertLineBreak require every selection point to have a
+// block ancestor with inline children. An element point on a container of block nodes — e.g. a
+// quote holding paragraphs — has none, so Lexical throws invariant #211 or #212. This detects
+// such a point so callers can descend it to a leaf before inserting.
+function $isPointOnBlockContainer(point) {
+  if (point.type !== "element") return false
+
+  const firstChild = point.getNode().getFirstChild();
+  return ($isElementNode(firstChild) || $isDecoratorNode(firstChild)) && !firstChild.isInline()
+}
+
+function $hasPointOnBlockContainer(selection) {
+  return $isRangeSelection(selection) &&
+    [ selection.anchor, selection.focus ].some($isPointOnBlockContainer)
+}
+
+// Descend any block-container element point in the selection to a leaf position, so a subsequent
+// Lexical insert (insertNodes, insertLineBreak, INSERT_PARAGRAPH) doesn't throw invariant #211/#212.
+function $normalizeBlockContainerSelection(selection = $getSelection()) {
+  if (!$hasPointOnBlockContainer(selection)) return false
+
+  $normalizeSelection__EXPERIMENTAL(selection);
+  return true
+}
+
+function $consecutiveSiblingGroups(blocks) {
+  const ordered = [ ...blocks ].sort((a, b) => a.getIndexWithinParent() - b.getIndexWithinParent());
+  const groups = [];
+
+  for (const block of ordered) {
+    const lastGroup = groups.at(-1);
+    const previous = lastGroup?.at(-1);
+
+    if (previous && previous.getParent().is(block.getParent()) && previous.getNextSibling()?.is(block)) {
+      lastGroup.push(block);
+    } else {
+      groups.push([ block ]);
+    }
+  }
+
+  return groups
+}
+
 // Payload: Record<nodeKey, { patch?, replace? }>
 //   - patch: plain object, shallow-merged into the existing node's properties
 //   - replace: a LexicalNode instance that replaces the node
@@ -3741,6 +3788,16 @@ class CommandDispatcher {
   #registerKeyboardCommands() {
     this.#registerCommandHandler(KEY_ARROW_RIGHT_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleArrowRightKey.bind(this));
     this.#registerCommandHandler(KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleTabKey.bind(this));
+
+    // Run before Lexical's built-in insert handlers to descend an element point on a
+    // block container to a leaf, avoiding error #211 on Enter / Shift+Enter in a quote.
+    this.#registerCommandHandler(INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, this.#normalizeBlockContainerSelection.bind(this));
+    this.#registerCommandHandler(INSERT_PARAGRAPH_COMMAND, COMMAND_PRIORITY_HIGH, this.#normalizeBlockContainerSelection.bind(this));
+  }
+
+  #normalizeBlockContainerSelection() {
+    $normalizeBlockContainerSelection();
+    return false
   }
 
   #handleArrowRightKey(event) {
@@ -4013,6 +4070,10 @@ class Selection {
     return this.nearestNodeOfType(ListItemNode)
   }
 
+  get isInsideBlockQuote() {
+    return this.nearestNodeOfType(QuoteNode)
+  }
+
   get isIndentedList() {
     const closestListNode = this.nearestNodeOfType(ListNode);
     return closestListNode && ($getListDepth(closestListNode) > 1)
@@ -4440,6 +4501,9 @@ class Selection {
   // - First item (no previous sibling): convert to a paragraph above the
   //   list, matching the standard "unwrap list formatting" behavior that
   //   users expect from pressing backspace at the start of a list item.
+  //   Inside a blockquote we instead just remove the empty item and move
+  //   the cursor into the next one — stranding a paragraph there would
+  //   leave the blank line the user is trying to close.
   //
   // When the empty item is the last/only one in the list, we return false
   // and let Lexical's default (convert to paragraph) provide the standard
@@ -4458,19 +4522,22 @@ class Selection {
     if (!nextSibling) return false
 
     const previousSibling = listItem.getPreviousSibling();
+    const listNode = $getNearestNodeOfType(listItem, ListNode);
+    if (!listNode) return false
+
     if (previousSibling) {
       previousSibling.selectEnd();
       listItem.remove();
-      return true
+    } else if ($isQuoteNode(listNode.getParent())) {
+      nextSibling.selectStart();
+      listItem.remove();
+    } else {
+      const paragraph = $createParagraphNode();
+      listNode.insertBefore(paragraph);
+      listItem.remove();
+      paragraph.selectStart();
     }
 
-    const listNode = $getNearestNodeOfType(listItem, ListNode);
-    if (!listNode) return false
-
-    const paragraph = $createParagraphNode();
-    listNode.insertBefore(paragraph);
-    listItem.remove();
-    paragraph.selectStart();
     return true
   }
 
@@ -5346,24 +5413,13 @@ function $createActionTextAttachmentUploadNode(...args) {
   return new ActionTextAttachmentUploadNode(...args)
 }
 
-class NodeInserter {
-  static for(selection) {
-    const INSERTERS = [
-      CodeNodeInserter,
-      ShadowRootNodeInserter,
-      NodeSelectionNodeInserter,
-      BlockContainerNodeInserter
-    ];
-    const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
-    return Inserter ? new Inserter(selection) : selection
-  }
-
+class BaseNodeInserter {
   constructor(selection) {
     this.selection = selection;
   }
 }
 
-class CodeNodeInserter extends NodeInserter {
+class CodeNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return $getNearestNodeOfType(selection.anchor?.getNode(), CodeNode)
   }
@@ -5422,10 +5478,9 @@ class CodeNodeInserter extends NodeInserter {
       return $createTextNode(node.getTextContent())
     }
   }
-
 }
 
-class ShadowRootNodeInserter extends NodeInserter {
+class ShadowRootNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return $isShadowRoot(selection?.anchor?.getNode())
   }
@@ -5439,31 +5494,106 @@ class ShadowRootNodeInserter extends NodeInserter {
   }
 }
 
-class NodeSelectionNodeInserter extends NodeInserter {
+class NodeSelectionNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return $isNodeSelection(selection)
   }
 
   insertNodes(nodes) {
-    const selectedNodes = this.selection.getNodes();
-
     // Overrides Lexical's default behavior of _removing_ the currently selected nodes
     // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
-    let lastNode = selectedNodes.at(-1);
+    let lastNode = this.selection.getNodes().at(-1);
+
     for (const node of nodes) {
-      lastNode = lastNode.insertAfter(node);
+      // Inserting after a top-level node would make this one a root child. Inline nodes
+      // can't live there (Lexical error #99), so wrap them in their required parent first.
+      const nodeToInsert = this.#insertsIntoRoot(lastNode) ? $makeSafeForRoot(node) : node;
+      lastNode = lastNode.insertAfter(nodeToInsert);
     }
   }
+
+  #insertsIntoRoot(node) {
+    return node.is(node.getTopLevelElement())
+  }
+}
+
+// A list item can only hold inline content, so a block node (such as an image
+// attachment) dropped into one corrupts the list: Lexical lifts it into the
+// wrong list item and orphans an empty bullet. Block nodes belong at the top
+// level instead, splitting the list around the cursor. Inline content keeps
+// Lexical's default behavior and stays within the list item.
+class ListItemNodeInserter extends BaseNodeInserter {
+  static handles(selection) {
+    return $isRangeSelection(selection) &&
+      $getNearestNodeOfType(selection.anchor.getNode(), ListItemNode)
+  }
+
+  insertNodes(nodes) {
+    if (nodes.some(node => this.#isBlockDecorator(node))) {
+      this.#insertAroundList(nodes);
+    } else {
+      this.selection.insertNodes(nodes);
+    }
+  }
+
+  #insertAroundList(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
+
+    // Break out of any nesting to the outermost list. Splitting an inner list
+    // would leave the block stranded inside an ancestor list item, which is the
+    // very corruption we are avoiding. The block must land at the list's level.
+    const anchorNode = this.selection.anchor.getNode();
+    const outerList = this.#outermostList(anchorNode);
+    const topItem = this.#topLevelItemFor(anchorNode, outerList);
+
+    // A blank top-level bullet is just the insertion point (e.g. the user pressed
+    // Enter to leave the list); break out of it entirely. A bullet with content —
+    // including one wrapping a nested list — splits so its content stays in the list.
+    const splitAfterItem = $isBlankNode(topItem) ? topItem.getPreviousSibling() : topItem;
+    const splitIndex = splitAfterItem ? splitAfterItem.getIndexWithinParent() + 1 : 0;
+    const [ listBefore, listAfter ] = $splitNode(outerList, splitIndex);
+    if ($isBlankNode(topItem)) { topItem.remove(); }
+
+    let anchor = listBefore ?? listAfter;
+    for (const node of nodes) {
+      anchor.insertAfter(node);
+      anchor = node;
+    }
+
+    this.#removeEmptyList(listBefore);
+    this.#removeEmptyList(listAfter);
+    nodes.at(-1).selectNext();
+  }
+
+  #outermostList(node) {
+    return [ node, ...node.getParents() ].reverse().find($isListNode)
+  }
+
+  #topLevelItemFor(node, outerList) {
+    return [ node, ...node.getParents() ].find(ancestor =>
+      $isListItemNode(ancestor) && ancestor.getParent()?.is(outerList)
+    )
+  }
+
+  #removeEmptyList(list) {
+    if ($isListNode(list) && list.isEmpty()) list.remove();
+  }
+
+  // Only block decorator nodes (image/file attachments) are intercepted. A list
+  // item cannot hold them, so they must break out. Pasted element blocks
+  // (paragraphs, quotes) keep Lexical's own list-escape semantics.
+  #isBlockDecorator(node) {
+    return $isDecoratorNode(node) && !node.isInline()
+  }
 }
 
 // Lexical's RangeSelection.insertNodes requires every selection point to have a block
 // ancestor with inline children. An element point on a container of block nodes — e.g.
 // a quote holding paragraphs — has none, so Lexical throws invariant #211 or #212.
 // Descend such points to a leaf position before inserting.
-class BlockContainerNodeInserter extends NodeInserter {
+class BlockContainerNodeInserter extends BaseNodeInserter {
   static handles(selection) {
-    return $isRangeSelection(selection) &&
-      [ selection.anchor, selection.focus ].some($isPointOnBlockContainer)
+    return $hasPointOnBlockContainer(selection)
   }
 
   insertNodes(nodes) {
@@ -5472,12 +5602,66 @@ class BlockContainerNodeInserter extends NodeInserter {
   }
 }
 
-function $isPointOnBlockContainer(point) {
-  if (point.type === "element") {
-    const firstChild = point.getNode().getFirstChild();
-    return ($isElementNode(firstChild) || $isDecoratorNode(firstChild)) && !firstChild.isInline()
-  } else {
-    return false
+const INSERTERS = [
+  CodeNodeInserter,
+  ShadowRootNodeInserter,
+  NodeSelectionNodeInserter,
+  ListItemNodeInserter,
+  BlockContainerNodeInserter
+];
+
+// Defined here rather than on the base class so the base can stay free of any
+// dependency on its subclasses (they import the base), avoiding an import cycle.
+BaseNodeInserter.for = (selection) => {
+  const inserterClass = INSERTERS.find(inserter => inserter.handles(selection));
+  return inserterClass ? new inserterClass(selection) : selection
+};
+
+class PastedContentFormatter {
+  constructor(doc) {
+    this.doc = doc;
+  }
+
+  format() {
+    this.#unwrapPlaceholderAnchors();
+    this.#stripTableCellColorStyles();
+    this.#stripStrayListChildren();
+    return this.doc
+  }
+
+  // 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() {
+    for (const anchor of this.doc.querySelectorAll("a")) {
+      const href = anchor.getAttribute("href") || "";
+      if (href === "" || href === "#") {
+        anchor.replaceWith(...anchor.childNodes);
+      }
+    }
+  }
+
+  // Table cells copied from a page inherit the source theme's inline color
+  // styles (e.g. dark-mode backgrounds). Strip them so pasted tables adopt
+  // the current theme instead of carrying stale colors.
+  #stripTableCellColorStyles() {
+    for (const cell of this.doc.querySelectorAll("td, th")) {
+      cell.style.removeProperty("background-color");
+      cell.style.removeProperty("background");
+      cell.style.removeProperty("color");
+    }
+  }
+
+  // Only <li> is a valid child of a list; drop stray <br>/whitespace so the
+  // import doesn't wrap them into an empty leading item.
+  #stripStrayListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      for (const child of Array.from(list.childNodes)) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "LI") continue
+        list.removeChild(child);
+      }
+    }
   }
 }
 
@@ -5512,7 +5696,7 @@ class Contents {
 
   insertAtCursor(...nodes) {
     const selection = $getSelection() ?? $getRoot().selectEnd();
-    const inserter = NodeInserter.for(selection);
+    const inserter = BaseNodeInserter.for(selection);
 
     inserter.insertNodes(nodes);
   }
@@ -5526,7 +5710,7 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
-    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection, (node) => $getNearestBlockElementAncestorOrThrow(node));
     $setBlocksType(selection, () => $createParagraphNode());
   }
 
@@ -5539,13 +5723,11 @@ class Contents {
   }
 
   applyUnorderedListFormat() {
-    this.#splitParagraphsAtLineBreaksUnlessInsideList();
-    this.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    this.#applyListFormat("bullet", INSERT_UNORDERED_LIST_COMMAND);
   }
 
   applyOrderedListFormat() {
-    this.#splitParagraphsAtLineBreaksUnlessInsideList();
-    this.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    this.#applyListFormat("number", INSERT_ORDERED_LIST_COMMAND);
   }
 
   clearFormatting() {
@@ -5633,7 +5815,7 @@ class Contents {
 
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
-        selection.insertNodes([ linkNode ]);
+        BaseNodeInserter.for(selection).insertNodes([ linkNode ]);
         linkNodeKey = linkNode.getKey();
       }
     });
@@ -5828,8 +6010,7 @@ class Contents {
   }
 
   #formatPastedDOM(doc) {
-    this.#unwrapPlaceholderAnchors(doc);
-    this.#stripTableCellColorStyles(doc);
+    new PastedContentFormatter(doc).format();
   }
 
   #dispatchPastedNodesCommand(nodes) {
@@ -5877,6 +6058,45 @@ class Contents {
     codeNode.remove();
   }
 
+  #applyListFormat(listType, command) {
+    if (this.selection.isInsideBlockQuote) {
+      this.#insertListInsideQuote(listType);
+    } else {
+      this.#splitParagraphsAtLineBreaksUnlessInsideList();
+      this.editor.dispatchCommand(command);
+    }
+  }
+
+  #insertListInsideQuote(listType) {
+    for (const group of $consecutiveSiblingGroups(this.#quotedBlocksInSelection())) {
+      this.#wrapBlocksInList(group, listType);
+    }
+  }
+
+  #quotedBlocksInSelection() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return []
+
+    const blocks = this.#outermostElements(this.#blockLevelElementsInSelection(selection));
+    return blocks.filter((block) => $isQuoteNode(block.getParent()))
+  }
+
+  #wrapBlocksInList(blocks, listType) {
+    const list = $createListNode(listType);
+    blocks[0].insertBefore(list);
+
+    for (const block of blocks) {
+      const listItem = $createListItemNode();
+      if ($isListNode(block)) {
+        listItem.append(...block.getChildren().flatMap((item) => item.getChildren()));
+      } else {
+        listItem.append(...block.getChildren());
+      }
+      list.append(listItem);
+      block.remove();
+    }
+  }
+
   #splitParagraphsAtLineBreaksUnlessInsideList() {
     if (this.selection.isInsideList) return
 
@@ -5957,30 +6177,6 @@ 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);
-      }
-    }
-  }
-
-  // Table cells copied from a page inherit the source theme's inline color
-  // styles (e.g. dark-mode backgrounds). Strip them so pasted tables adopt
-  // the current theme instead of carrying stale colors.
-  #stripTableCellColorStyles(doc) {
-    for (const cell of doc.querySelectorAll("td, th")) {
-      cell.style.removeProperty("background-color");
-      cell.style.removeProperty("background");
-      cell.style.removeProperty("color");
-    }
-  }
-
   #getTextAnchorData() {
     const selection = $getSelection();
     if (!selection || !selection.isCollapsed()) return { anchorNode: null, offset: 0 }
@@ -6226,7 +6422,7 @@ class Clipboard {
     }
 
     const linkNode = $createLinkNode(url).append($createTextNode(url));
-    selection.insertNodes([ linkNode ]);
+    BaseNodeInserter.for(selection).insertNodes([ linkNode ]);
 
     $onUpdate(() => this.#dispatchLinkInsertEvent(linkNode.getKey(), { url }));
   }
@@ -7692,7 +7888,7 @@ class LexicalEditorElement extends HTMLElement {
   static debug = false
   static commands = [ "bold", "italic", "strikethrough" ]
 
-  static observedAttributes = [ "connected", "required" ]
+  static observedAttributes = [ "autocapitalize", "connected", "required" ]
 
   #initialValue = ""
   #previousInternalFormValue = null
@@ -7759,8 +7955,15 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected") this.connectedChangedCallback(oldValue, newValue);
-    if (name === "required") this.requiredChangedCallback(oldValue, newValue);
+    if (typeof this[`${name}ChangedCallback`] === "function") {
+      this[`${name}ChangedCallback`](oldValue, newValue);
+    }
+  }
+
+  autocapitalizeChangedCallback() {
+    if (this.editorContentElement) {
+      this.#transferAttributeToContentEditable(this.editorContentElement, "autocapitalize");
+    }
   }
 
   connectedChangedCallback(oldValue, newValue) {
@@ -8092,25 +8295,33 @@ class LexicalEditorElement extends HTMLElement {
 
   #createEditorContentElement() {
     const editorContentElement = createElement("div", {
+      id: `${this.id}-content`,
       classList: "lexxy-editor__content",
       contenteditable: true,
-      autocapitalize: "none",
       role: "textbox",
       "aria-multiline": true,
       "aria-label": this.#labelText,
       placeholder: this.getAttribute("placeholder")
     });
-    editorContentElement.id = `${this.id}-content`;
+
     this.#ariaAttributes.forEach(attribute => editorContentElement.setAttribute(attribute.name, attribute.value));
 
-    if (this.getAttribute("tabindex")) {
-      editorContentElement.setAttribute("tabindex", this.getAttribute("tabindex"));
-      this.removeAttribute("tabindex");
+    this.#transferAttributeToContentEditable(editorContentElement, "autocapitalize");
+    this.#transferAttributeToContentEditable(editorContentElement, "tabindex", { defaultValue: 0, removeSource: true });
+
+    return editorContentElement
+  }
+
+  #transferAttributeToContentEditable(element, qualifiedName, { defaultValue = null, removeSource = false } = {}) {
+    if (this.hasAttribute(qualifiedName)) {
+      element.setAttribute(qualifiedName, this.getAttribute(qualifiedName));
+    } else if (defaultValue !== null) {
+      element.setAttribute(qualifiedName, defaultValue);
     } else {
-      editorContentElement.setAttribute("tabindex", 0);
+      element.removeAttribute(qualifiedName);
     }
 
-    return editorContentElement
+    if (removeSource) this.removeAttribute(qualifiedName);
   }
 
   get #labelText() {
@@ -8727,6 +8938,7 @@ class LexicalPromptElement extends HTMLElement {
     this.source = this.#createSource();
 
     this.#addTriggerListener();
+    this.#removePopoverBeforeTurboCaches();
     this.toggleAttribute("connected", true);
   }
 
@@ -8734,7 +8946,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#popoverListeners.dispose();
     this.#globalListeners.dispose();
     this.source = null;
-    this.popoverElement = null;
+    this.#removePopover();
   }
 
 
@@ -9030,6 +9242,21 @@ class LexicalPromptElement extends HTMLElement {
     this.#addTriggerListener();
   }
 
+  // The popover is appended to the <lexxy-editor> subtree, so Turbo serializes it
+  // into the page cache. Removing it before caching prevents an orphaned, unmanaged
+  // popover from being restored on history back/forward.
+  #removePopoverBeforeTurboCaches() {
+    this.#globalListeners.track(
+      registerEventListener(document, "turbo:before-cache", () => this.#removePopover())
+    );
+  }
+
+  #removePopover() {
+    this.#popoverListeners.dispose();
+    this.popoverElement?.remove();
+    this.popoverElement = null;
+  }
+
   #filterOptions = async () => {
     if (this.initialPrompt) {
       this.initialPrompt = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.19-alpha.1",
+  "version": "0.9.19-alpha.2",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -28,8 +28,8 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "eslint": "^10.3.0",
-    "globals": "^17.6.0",
     "eslint-plugin-compat": "^7.0.2",
+    "globals": "^17.6.0",
     "jsdom": "^27.3.0",
     "rollup": "^4.44.1",
     "rollup-plugin-copy": "^3.5.0",
@@ -52,7 +52,8 @@
     "test:browser:headed": "npx playwright test --config test/browser/playwright.config.js --headed",
     "test:browser:debug": "npx playwright test --config test/browser/playwright.config.js --debug",
     "prerelease": "yarn build:npm",
-    "release": "yarn build:npm && yarn publish"
+    "release": "yarn build:npm && yarn publish",
+    "release:alpha": "yarn build:npm && yarn publish --tag alpha"
   },
   "dependencies": {
     "@lexical/clipboard": "^0.44.0",