@37signals/lexxy 0.9.18 → 0.9.19-alpha.autocapitalize

package/dist/lexical.esm.js

@@ -0,0 +1,344 @@
+import { $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $getSelection, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $isRangeSelection, $getCommonAncestor, $findMatchingParent, TextNode } from 'lexical';
+export * from 'lexical';
+import { ListNode } from '@lexical/list';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator } from '@lexical/utils';
+import { $ensureForwardRangeSelection, $isAtNodeEnd } from '@lexical/selection';
+
+/*** Only import from lexical packages in this file to prevent breaking npm package export chunking ***/
+
+function $containsRangeSelection(node, selection = $getSelection()) {
+  if ($isRangeSelection(selection)) {
+    const { commonAncestor } = $getCommonAncestor(selection.focus.getNode(), selection.anchor.getNode());
+    return $findMatchingParent(commonAncestor, parent => parent.is(node))
+  } else {
+    return false
+  }
+}
+
+function $createNodeSelectionWith(...nodes) {
+  const selection = $createNodeSelection();
+  nodes.forEach(node => selection.add(node.getKey()));
+  return selection
+}
+
+function $isShadowRoot(node) {
+  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
+}
+
+function $isSafeForRoot(node) {
+  return ($isElementNode(node) || $isDecoratorNode(node)) && !node.isParentRequired()
+}
+
+function $makeSafeForRoot(node) {
+  if ($isSafeForRoot(node)) {
+    return node
+  } else {
+    return $wrapNodeInElement(node, () => node.createParentElementNode())
+  }
+}
+
+function getListType(node) {
+  const list = $getNearestNodeOfType(node, ListNode);
+  return list?.getListType() ?? null
+}
+
+function isEditorFocused(editor) {
+  const rootElement = editor.getRootElement();
+  return rootElement !== null && rootElement.contains(document.activeElement)
+}
+
+function $isAtNodeEdge(point, atStart = null) {
+  if (atStart === null) {
+    return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
+  } else {
+    return atStart ? $isAtNodeStart(point) : $isAtNodeEnd(point)
+  }
+}
+
+function $isAtNodeStart(point) {
+  return point.offset === 0
+}
+
+function extendTextNodeConversion(conversionName, ...callbacks) {
+  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
+    ...conversionOutput,
+    forChild: (lexicalNode, parentNode) => {
+      const originalForChild = conversionOutput?.forChild ?? (x => x);
+      let childNode = originalForChild(lexicalNode, parentNode);
+
+
+      if ($isTextNode(childNode)) {
+        childNode = callbacks.reduce(
+          (childNode, callback) => callback(childNode, element) ?? childNode,
+          childNode
+        );
+        return childNode
+      }
+    }
+  }))
+}
+
+function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
+  return (element) => {
+    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
+    if (!converter) return null
+
+    const conversionOutput = converter.conversion(element);
+    if (!conversionOutput) return conversionOutput
+
+    return callback(conversionOutput, element) ?? conversionOutput
+  }
+}
+
+function $isCursorOnLastLine(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+  const children = elementNode.getChildren();
+  if (children.length === 0) return true
+
+  const lastChild = children[children.length - 1];
+
+  if (anchorNode === elementNode.getLatest() && selection.anchor.offset === children.length) return true
+  if (anchorNode === lastChild) return true
+
+  const lastLineBreakIndex = children.findLastIndex(child => $isLineBreakNode(child));
+  if (lastLineBreakIndex === -1) return true
+
+  const anchorIndex = children.indexOf(anchorNode);
+  return anchorIndex > lastLineBreakIndex
+}
+
+function $isBlankNode(node) {
+  if (node.getTextContent().trim() !== "") return false
+
+  const children = node.getChildren?.();
+  if (!children || children.length === 0) return true
+
+  return children.every(child => {
+    if ($isLineBreakNode(child)) return true
+    return $isBlankNode(child)
+  })
+}
+
+function $trimTrailingBlankNodes(parent) {
+  for (const child of $lastToFirstIterator(parent)) {
+    if ($isBlankNode(child)) {
+      child.remove();
+    } else {
+      break
+    }
+  }
+}
+
+// A list item is structurally empty if it contains no meaningful content.
+// Unlike getTextContent().trim() === "", this walks descendants to ensure
+// decorator nodes (mentions, attachments whose getTextContent() may return
+// invisible characters like \ufeff) are treated as non-empty content.
+function $isListItemStructurallyEmpty(listItem) {
+  const children = listItem.getChildren();
+  for (const child of children) {
+    if ($isDecoratorNode(child)) return false
+    if ($isLineBreakNode(child)) continue
+    if ($isTextNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    } else if ($isElementNode(child)) {
+      if (child.getTextContent().trim() !== "") return false
+    }
+  }
+  return true
+}
+
+// Returns the document text up to `offset` inside `targetNode`. Non-inline
+// element siblings are joined with `\n\n`, matching Lexical's own
+// ElementNode.getTextContent behavior.
+function $textBeforeOffset(targetNode, offset) {
+  const parts = [];
+  let done = false;
+
+  function visit(node) {
+    if (done) return
+    if (node === targetNode) {
+      parts.push(node.getTextContent().slice(0, offset));
+      done = true;
+      return
+    }
+    if ($isElementNode(node)) {
+      const children = node.getChildren();
+      for (let i = 0; i < children.length; i++) {
+        visit(children[i]);
+        if (done) return
+        const child = children[i];
+        if ($isElementNode(child) && !child.isInline() && i < children.length - 1) {
+          parts.push("\n\n");
+        }
+      }
+    } else {
+      parts.push(node.getTextContent());
+    }
+  }
+
+  visit($getRoot());
+  return parts.join("")
+}
+
+function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
+  const topLevelElements = new Set();
+  for (const node of selection.getNodes()) {
+    const topLevel = node.getTopLevelElement();
+    if (topLevel) topLevelElements.add(topLevel);
+  }
+
+  for (const element of topLevelElements) {
+    if (!$isParagraphNode(element)) continue
+
+    const children = element.getChildren();
+    if (!children.some($isLineBreakNode)) continue
+
+    const groups = [ [] ];
+    for (const child of children) {
+      if ($isLineBreakNode(child)) {
+        groups.push([]);
+        child.remove();
+      } else {
+        groups[groups.length - 1].push(child);
+      }
+    }
+
+    for (const group of groups) {
+      if (group.length === 0) continue
+      const paragraph = $createParagraphNode();
+      group.forEach(child => paragraph.append(child));
+      element.insertBefore(paragraph);
+    }
+    if (groups.some(group => group.length > 0)) element.remove();
+  }
+}
+
+function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
+  $ensureForwardRangeSelection(selection);
+
+  const focusCaret = $caretFromPoint(selection.focus, "next");
+  const anchorCaret = $caretFromPoint(selection.anchor, "previous");
+
+  // A collapsed cursor adjacent to a <br> would claim it from both sides via
+  // inward-edge; force outward-only walks so each side finds its own boundary.
+  const skipInwardEdge = selection.isCollapsed();
+  const focusBrCaret = $getCaretAtLineBreakBoundary(focusCaret, skipInwardEdge);
+  let anchorBrCaret = $getCaretAtLineBreakBoundary(anchorCaret, skipInwardEdge);
+
+  if (focusBrCaret?.origin.is(anchorBrCaret?.origin)) {
+    anchorBrCaret = null;
+  }
+
+  // Splitting focus first keeps the anchor <br>'s position stable.
+  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();
+  if (!innerStart || !innerEnd) return
+
+  $setSelectionFromCaretRange($getCaretRange(
+    $normalizeCaret($getChildCaret(innerStart, "next")),
+    $getCaretInDirection(
+      $normalizeCaret($getChildCaret(innerEnd, "previous")),
+      "next",
+    ),
+  ));
+}
+
+function $getCaretAtLineBreakBoundary(caret, skipInwardEdge = false) {
+  const paragraph = caret.origin.getTopLevelElement();
+  if (!paragraph || !$isParagraphNode(paragraph)) return null
+
+  const lineBreak = (skipInwardEdge ? null : $inwardEdgeLineBreak(caret, paragraph))
+    ?? $outwardLineBreak(caret, paragraph);
+
+  return lineBreak ? $getSiblingCaret(lineBreak, caret.direction) : null
+}
+
+// Prefer a <br> the cursor is sitting flush against, except when a further <br>
+// also exists outward — that one is the real paragraph break for this side.
+function $inwardEdgeLineBreak(caret, paragraph) {
+  let candidateCaret;
+
+  if (
+    ($isChildCaret(caret) && caret.origin.is(paragraph)) ||
+    ($isTextPointCaret(caret) && $isExtendableTextPointCaret(caret.getFlipped()))
+  ) {
+    candidateCaret = null;
+  } else if ($isSiblingCaret(caret) && caret.getParentAtCaret().is(paragraph)) {
+    candidateCaret = caret;
+  } else {
+    const childCaret = $paragraphChildCaretAtInwardEdge(caret, paragraph);
+    candidateCaret = childCaret ? $rewindSiblingCaret(childCaret) : null;
+  }
+
+  if (candidateCaret && $isLineBreakNode(candidateCaret.origin)) {
+    return $candidateUnlessShadowed(candidateCaret)
+  } else {
+    return null
+  }
+}
+
+function $candidateUnlessShadowed(candidateCaret) {
+  const outward = candidateCaret.getNodeAtCaret();
+  return $isLineBreakNode(outward) ? null : candidateCaret.origin
+}
+
+function $outwardLineBreak(caret, paragraph) {
+  const startCaret = $outwardWalkStartCaret(caret, paragraph);
+  if (!startCaret) return null
+
+  for (const { origin } of startCaret) {
+    if (!origin.getParent().is(paragraph)) break
+    if ($isLineBreakNode(origin)) return origin
+  }
+  return null
+}
+
+function $outwardWalkStartCaret(caret, paragraph) {
+  if (caret.getParentAtCaret().is(paragraph)) {
+    return caret
+  } else {
+    return $paragraphChildCaretContaining(caret, paragraph)
+  }
+}
+
+function $paragraphChildCaretContaining(caret, paragraph) {
+  let cursor = caret.getSiblingCaret();
+  while (cursor && !cursor.origin.getParent()?.is(paragraph)) {
+    cursor = cursor.getParentCaret();
+  }
+  return cursor?.origin.getParent()?.is(paragraph) ? cursor : null
+}
+
+// Only succeeds when the cursor is flush against the inward edge of every
+// ancestor between itself and the paragraph child.
+function $paragraphChildCaretAtInwardEdge(caret, paragraph) {
+  let cursor = caret.getSiblingCaret();
+  while (cursor && !cursor.origin.getParent()?.is(paragraph)) {
+    if (cursor.getNodeAtCaret()) return null
+    cursor = cursor.getParentCaret();
+  }
+  return cursor?.origin.getParent()?.is(paragraph) ? cursor : null
+}
+
+function $splitAroundLineBreak(lineBreakCaret) {
+  let outer = null;
+
+  if (lineBreakCaret.getNodeAtCaret() === null) {
+    lineBreakCaret.origin.remove();
+  } else {
+    const lineBreak = lineBreakCaret.origin;
+    const splitCaret = $getCaretInDirection($rewindSiblingCaret(lineBreakCaret), "next");
+
+    $splitAtPointCaretNext(splitCaret);
+    outer = lineBreak.getTopLevelElement();
+    lineBreak.remove();
+  }
+
+  return outer
+}
+
+export { $containsRangeSelection, $createNodeSelectionWith, $expandSelectionToLineBreaksAndSplitAtEdges, $isAtNodeEdge, $isAtNodeStart, $isBlankNode, $isCursorOnLastLine, $isListItemStructurallyEmpty, $isSafeForRoot, $isShadowRoot, $makeSafeForRoot, $splitSelectedParagraphsAtInnerLineBreaks, $textBeforeOffset, $trimTrailingBlankNodes, extendConversion, extendTextNodeConversion, getListType, isEditorFocused };

package/dist/lexxy.esm.js

@@ -1,7 +1,7 @@
 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, 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, $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 { 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';
@@ -4031,9 +4031,12 @@ class Selection {
   }
 
   get isOnPreviewableImage() {
-    const selection = $getSelection();
-    const firstNode = selection?.getNodes().at(0);
-    return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage
+    return this.previewableImageNode != null
+  }
+
+  get previewableImageNode() {
+    const firstNode = $getSelection()?.getNodes().at(0);
+    return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage ? firstNode : null
   }
 
   get isAtNodeStart() {
@@ -5008,7 +5011,10 @@ class GalleryUploader extends Uploader {
 
   #findOrCreateGallery() {
     if (this.selection.isOnPreviewableImage) {
-      this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
+      // Resolve from the previewable image itself (the selection's first node), not from
+      // #selectedNode (the anchor) — those differ when the selection runs from an image
+      // into following text, and the anchor text node can't join a gallery (returns null).
+      this.#gallery = $findOrCreateGalleryForImage(this.selection.previewableImageNode);
     } else if (this.#selectionIsAfterGalleryEdge) {
       this.#gallery = $findOrCreateGalleryForImage(this.selection.nodeBeforeCursor);
     } else {
@@ -5345,7 +5351,8 @@ class NodeInserter {
     const INSERTERS = [
       CodeNodeInserter,
       ShadowRootNodeInserter,
-      NodeSelectionNodeInserter
+      NodeSelectionNodeInserter,
+      BlockContainerNodeInserter
     ];
     const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
     return Inserter ? new Inserter(selection) : selection
@@ -5371,14 +5378,40 @@ class CodeNodeInserter extends NodeInserter {
 
     const caret = $getChildCaretAtIndex(codeNode, insertionIndex + 1, "previous");
 
+    // Nodes that are already in the document come from the format-toggle path (existing
+    // content converted into this code block). Brand-new nodes (dropped/pasted content)
+    // were never attached.
+    const existingNodes = new Set(nodes.filter(node => node.isAttached()));
+    const trailingNodes = [];
+
     for (const node of nodes) {
-      if (!node.isAttached()) continue
-      if (caret.getNodeAtCaret() && $isElementNode(node)) { caret.insert($createLineBreakNode()); }
+      if (existingNodes.has(node)) {
+        if (!node.isAttached()) continue // already pulled in when a converted ancestor was removed
+      } else if (!this.#canJoinCodeBlock(node)) {
+        trailingNodes.push(node); // e.g. a dropped attachment, which a code block can't hold
+        continue
+      }
 
+      if (caret.getNodeAtCaret() && $isElementNode(node)) { caret.insert($createLineBreakNode()); }
       caret.insert(this.#convertNodeToCodeChild(node));
     }
 
-    caret.getNodeAtCaret().selectEnd();
+    const lastTrailingNode = this.#insertAfterCodeBlock(codeNode, trailingNodes);
+    const nodeToSelect = lastTrailingNode ?? caret.getNodeAtCaret();
+    nodeToSelect?.selectEnd();
+  }
+
+  #canJoinCodeBlock(node) {
+    return $isTextNode(node) || $isLineBreakNode(node)
+  }
+
+  #insertAfterCodeBlock(codeNode, nodes) {
+    let previousNode = codeNode;
+    for (const node of nodes) {
+      previousNode.insertAfter(node);
+      previousNode = node;
+    }
+    return nodes.at(-1)
   }
 
   #convertNodeToCodeChild(node) {
@@ -5394,7 +5427,7 @@ class CodeNodeInserter extends NodeInserter {
 
 class ShadowRootNodeInserter extends NodeInserter {
   static handles(selection) {
-    return $isShadowRoot(selection?.anchor.getNode())
+    return $isShadowRoot(selection?.anchor?.getNode())
   }
 
   insertNodes(nodes) {
@@ -5423,6 +5456,31 @@ class NodeSelectionNodeInserter extends NodeInserter {
   }
 }
 
+// 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 {
+  static handles(selection) {
+    return $isRangeSelection(selection) &&
+      [ selection.anchor, selection.focus ].some($isPointOnBlockContainer)
+  }
+
+  insertNodes(nodes) {
+    $normalizeSelection__EXPERIMENTAL(this.selection);
+    this.selection.insertNodes(nodes);
+  }
+}
+
+function $isPointOnBlockContainer(point) {
+  if (point.type === "element") {
+    const firstChild = point.getNode().getFirstChild();
+    return ($isElementNode(firstChild) || $isDecoratorNode(firstChild)) && !firstChild.isInline()
+  } else {
+    return false
+  }
+}
+
 class Contents {
   constructor(editorElement) {
     this.editorElement = editorElement;
@@ -5519,7 +5577,7 @@ class Contents {
       blockElements.forEach(node => this.#unwrapCodeBlock(node));
     } else {
       $expandSelectionToLineBreaksAndSplitAtEdges(selection);
-      const elements = this.#blockLevelElementsInSelection(selection);
+      const elements = this.#outermostElements(this.#blockLevelElementsInSelection(selection));
       if (elements.length === 0) return
 
       const codeNode = $createCodeNode("plain");
@@ -5655,6 +5713,8 @@ class Contents {
   }
 
   uploadFiles(files, { selectLast } = {}) {
+    if (!this.editorElement) return // Disposed (e.g. on turbo:before-cache); a late drop can still land here
+
     if (!this.editorElement.supportsAttachments) {
       console.warn("This editor does not supports attachments (it's configured with [attachments=false])");
       return
@@ -5845,6 +5905,18 @@ class Contents {
     return Array.from(elements)
   }
 
+  // Selections spanning nested structures (a quote and its inner paragraphs,
+  // nested list items) yield both an element and its ancestor. Converting the
+  // ancestor detaches its whole subtree — including a node freshly inserted
+  // inside it — which can leave the selection on removed nodes (Lexical
+  // invariant #19). The outermost elements already cover their descendants'
+  // text content, so keep only those.
+  #outermostElements(elements) {
+    return elements.filter((element) => {
+      return elements.every((other) => other === element || !element.getParents().includes(other))
+    })
+  }
+
   #insertUploadNodes(nodes) {
     if (nodes.every($isActionTextAttachmentNode)) {
       const uploader = Uploader.for(this.editorElement, []);
@@ -7425,7 +7497,7 @@ class FormatEscapeExtension extends LexxyExtension {
   }
 
   get allowedElements() {
-    return [ { tag: "li", attributes: [ "value" ] } ]
+    return [ { tag: "ol", attributes: [ "start" ] }, { tag: "li", attributes: [ "value" ] } ]
   }
 
   get lexicalExtension() {
@@ -7609,7 +7681,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
@@ -7676,8 +7748,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) {
@@ -8009,25 +8088,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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.18",
+  "version": "0.9.19-alpha.autocapitalize",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",