@37signals/lexxy 0.9.12-beta → 0.9.13-beta

package/dist/lexxy.esm.js

@@ -1,7 +1,7 @@
 export { highlightCode } 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, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isTextNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, $createParagraphNode, $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, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $getChildCaretAtIndex, $createLineBreakNode, PASTE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_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, $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, $getRoot, 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, PASTE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, $onUpdate, 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';
@@ -484,6 +484,14 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
+  closeDropdowns({ except } = {}) {
+    this.#dropdowns.forEach((dropdown) => {
+      if (dropdown !== except) {
+        dropdown.close({ focusEditor: false });
+      }
+    });
+  }
+
   #reconnect() {
     this.disconnectedCallback();
     this.connectedCallback();
@@ -656,64 +664,38 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #refreshOverflow() {
+    this.#hideOverflowMenuButton();
     this.#resetToolbarOverflow();
     this.#reindexToolbarItems();
     this.#compactMenu();
 
-    const isOverflowing = this.#overflowMenu.children.length > 0;
+    const isOverflowing = this.#overflowMenuDropdown.children.length > 0;
 
     this.toggleAttribute("overflowing", isOverflowing);
-
-    this.#overflow.style.display = isOverflowing ? "block" : "none";
-    this.#overflow.setAttribute("nonce", getNonce());
-
-    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
-  }
-
-  // Separates layout reads from DOM writes to avoid forced reflows during init.
-  // Measures every button's right edge in a single read pass, figures out which
-  // buttons overflow using math, and then moves them in a single write pass.
-  #compactMenu() {
-    const buttons = this.#overflowButtons;
-    if (buttons.length === 0) return
-
-    const availableWidth = this.clientWidth;
-    const buttonRightEdges = buttons.map(button => {
-      const style = window.getComputedStyle(button);
-      return button.offsetLeft + button.offsetWidth + parseFloat(style.marginRight)
-    });
-
-    let firstOverflowing = -1;
-    for (let i = 0; i < buttons.length; i++) {
-      if (buttonRightEdges[i] > availableWidth) {
-        firstOverflowing = i;
-        break
-      }
-    }
-
-    if (firstOverflowing === -1) return
-
-    // Move one extra button to reserve space for the overflow control, which is
-    // `display: none` until we show it
-    const overflowIndex = Math.max(0, firstOverflowing - 1);
-    const overflowButtons = buttons.slice(overflowIndex).reverse();
-    for (const button of overflowButtons) {
-      this.#overflowMenu.prepend(button);
-      button.role = "menuitem";
-    }
+    this.#setOverflowMenuNonce();
+    this.#showOverflowMenuButton(isOverflowing);
   }
 
   #resetToolbarOverflow() {
-    const items = Array.from(this.#overflowMenu.children);
+    const items = Array.from(this.#overflowMenuDropdown.children);
     items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
 
     for (const item of items) {
-      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflow;
+      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflowMenuButton;
       item.removeAttribute("role");
       this.insertBefore(item, nextItem);
     }
   }
 
+  #showOverflowMenuButton(show = true) {
+    this.#overflowMenuDropdown.toggleAttribute("disabled", !show);
+    this.#overflowMenuButton.style.display = show ? "block" : "none";
+  }
+
+  #hideOverflowMenuButton() {
+    this.#showOverflowMenuButton(false);
+  }
+
   #itemPosition(item) {
     return parseInt(item.dataset.position ?? "999")
   }
@@ -724,28 +706,59 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
-  closeDropdowns({ except } = {}) {
-    this.#dropdowns.forEach((dropdown) => {
-      if (dropdown !== except) {
-        dropdown.close({ focusEditor: false });
-      }
-    });
+  #compactMenu() {
+    const overflowWidth = this.#getOverflowWidth();
+
+    if (overflowWidth > 0) {
+      this.#showOverflowMenuButton();
+      const gap = this.#getToolbarGap();
+      const spaceForOverflow = gap + this.#overflowMenuButton.offsetWidth;
+      this.#reclaimWidth(overflowWidth + spaceForOverflow, { gap });
+    }
+  }
+
+  #getOverflowWidth() {
+    return this.scrollWidth - this.clientWidth
+  }
+
+  #reclaimWidth(overflowWidth, { gap }) {
+    const buttons = this.#overflowableButtons;
+    const overflowButtons = [];
+    let recoveredWidth = 0;
+
+    while (recoveredWidth < overflowWidth && buttons.length) {
+      const button = buttons.pop();
+
+      overflowButtons.push(button);
+      button.role = "menuitem";
+      recoveredWidth += button.offsetWidth + gap;
+    }
+
+    this.#overflowMenuDropdown.append(...overflowButtons.reverse());
+  }
+
+  #setOverflowMenuNonce() {
+    this.#overflowMenuButton.setAttribute("nonce", getNonce());
+  }
+
+  #getToolbarGap() {
+    return parseFloat(window.getComputedStyle(this).columnGap) || 0
   }
 
   get #dropdowns() {
     return this.querySelectorAll(":scope .lexxy-editor__toolbar-dropdown")
   }
 
-  get #overflow() {
+  get #overflowMenuButton() {
     return this.querySelector(".lexxy-editor__toolbar-overflow")
   }
 
-  get #overflowMenu() {
-    return this.#overflow?.querySelector(":scope > [data-dropdown-panel]")
+  get #overflowMenuDropdown() {
+    return this.#overflowMenuButton?.querySelector(":scope > [data-dropdown-panel]")
   }
 
-  get #overflowButtons() {
-    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow='true'])"))
+  get #overflowableButtons() {
+    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow])"))
   }
 
   get #buttons() {
@@ -1486,6 +1499,10 @@ class LexxyExtension {
 
   }
 
+  setEditorValidity(flags, message) {
+    this.editorElement.setElementValidity(this, flags, message);
+  }
+
   dispose() {
   }
 }
@@ -1638,40 +1655,166 @@ function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
     && previousNode instanceof CustomActionTextAttachmentNode
 }
 
-function $splitParagraphsAtLineBreakBoundaries(selection) {
+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);
 
-  // Split focus first so the anchor split position stays valid.
-  $splitAtNearestLineBreak(selection.focus, "next");
-  $splitAtNearestLineBreak(selection.anchor, "previous");
+  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 $splitAtNearestLineBreak(point, direction) {
-  const paragraph = point.getNode().getTopLevelElement();
-  if (!paragraph || !$isParagraphNode(paragraph)) return
+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);
 
-  const pointNode = point.getNode();
-  const selectionChild = pointNode.getParent().is(paragraph) ? pointNode : pointNode.getParentOrThrow();
-  const lineBreakCaret = $caretAtNearestNodeOfType(selectionChild, LineBreakNode, direction);
-  if (!lineBreakCaret) return
+  return lineBreak ? $getSiblingCaret(lineBreak, caret.direction) : null
+}
 
-  const lineBreak = lineBreakCaret.origin;
-  const isEdge = lineBreakCaret.getNodeAtCaret() === 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 (!isEdge) {
-    $splitNode(paragraph, lineBreak.getIndexWithinParent());
+  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
   }
+}
 
-  lineBreak.remove();
+function $candidateUnlessShadowed(candidateCaret) {
+  const outward = candidateCaret.getNodeAtCaret();
+  return $isLineBreakNode(outward) ? null : candidateCaret.origin
 }
 
-function $caretAtNearestNodeOfType(node, klass, direction) {
-  for (const caret of $getSiblingCaret(node, direction)) {
-    if (caret.origin instanceof klass) return caret
+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
+}
+
 // Payload: Record<nodeKey, { patch?, replace? }>
 //   - patch: plain object, shallow-merged into the existing node's properties
 //   - replace: a LexicalNode instance that replaces the node
@@ -3548,12 +3691,18 @@ class CommandDispatcher {
   #registerDragAndDropHandlers() {
     if (this.editorElement.supportsAttachments) {
       this.dragCounter = 0;
-      const root = this.editor.getRootElement();
       this.#listeners.track(
-        registerEventListener(root, "dragover", this.#handleDragOver.bind(this)),
-        registerEventListener(root, "drop", this.#handleDrop.bind(this)),
-        registerEventListener(root, "dragenter", this.#handleDragEnter.bind(this)),
-        registerEventListener(root, "dragleave", this.#handleDragLeave.bind(this))
+        this.editor.registerRootListener((rootElement) => {
+          if (rootElement) {
+            const teardowns = [
+              registerEventListener(rootElement, "dragover", this.#handleDragOver.bind(this)),
+              registerEventListener(rootElement, "drop", this.#handleDrop.bind(this)),
+              registerEventListener(rootElement, "dragenter", this.#handleDragEnter.bind(this)),
+              registerEventListener(rootElement, "dragleave", this.#handleDragLeave.bind(this))
+            ];
+            return () => teardowns.forEach((teardown) => teardown())
+          }
+        })
       );
     }
   }
@@ -3723,32 +3872,6 @@ class Selection {
     return { node: null, offset: 0 }
   }
 
-  preservingSelection(fn) {
-    let selectionState = null;
-
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (selection && $isRangeSelection(selection)) {
-        selectionState = {
-          anchor: { key: selection.anchor.key, offset: selection.anchor.offset },
-          focus: { key: selection.focus.key, offset: selection.focus.offset }
-        };
-      }
-    });
-
-    fn();
-
-    if (selectionState) {
-      this.editor.update(() => {
-        const selection = $getSelection();
-        if (selection && $isRangeSelection(selection)) {
-          selection.anchor.set(selectionState.anchor.key, selectionState.anchor.offset, "text");
-          selection.focus.set(selectionState.focus.key, selectionState.focus.offset, "text");
-        }
-      });
-    }
-  }
-
   getFormat() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return {}
@@ -4013,46 +4136,59 @@ class Selection {
       return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
     }, COMMAND_PRIORITY_LOW));
 
-    const rootElement = this.editor.getRootElement();
     this.#listeners.track(
-      registerEventListener(rootElement, "lexxy:internal:move-to-next-line", () => this.#selectOrAppendNextLine())
+      this.editor.registerRootListener((rootElement) => {
+        if (rootElement) {
+          return registerEventListener(rootElement, "lexxy:internal:move-to-next-line", () => this.#selectOrAppendNextLine())
+        }
+      })
     );
   }
 
   #containEditorFocus() {
     // Workaround for a bizarre Chrome bug where the cursor abandons the editor to focus on not-focusable elements
     // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
-    this.editorContentElement.addEventListener("keydown", (event) => {
-      if (event.key === "ArrowUp") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
-
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.previousElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.previousElementSibling;
-          }
+    this.#listeners.track(
+      this.editor.registerRootListener((rootElement) => {
+        if (rootElement) {
+          const handler = (event) => this.#handleArrowKeyOnLexicalCursor(event);
+          rootElement.addEventListener("keydown", handler, true);
+          return () => rootElement.removeEventListener("keydown", handler, true)
+        }
+      })
+    );
+  }
 
-          if (!currentElement) {
-            event.preventDefault();
-          }
+  #handleArrowKeyOnLexicalCursor(event) {
+    if (event.key === "ArrowUp") {
+      const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+
+      if (lexicalCursor) {
+        let currentElement = lexicalCursor.previousElementSibling;
+        while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+          currentElement = currentElement.previousElementSibling;
+        }
+
+        if (!currentElement) {
+          event.preventDefault();
         }
       }
+    }
 
-      if (event.key === "ArrowDown") {
-        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
+    if (event.key === "ArrowDown") {
+      const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
 
-        if (lexicalCursor) {
-          let currentElement = lexicalCursor.nextElementSibling;
-          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
-            currentElement = currentElement.nextElementSibling;
-          }
+      if (lexicalCursor) {
+        let currentElement = lexicalCursor.nextElementSibling;
+        while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
+          currentElement = currentElement.nextElementSibling;
+        }
 
-          if (!currentElement) {
-            event.preventDefault();
-          }
+        if (!currentElement) {
+          event.preventDefault();
         }
       }
-    }, true);
+    }
   }
 
   #syncSelectedClasses() {
@@ -5263,6 +5399,7 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
     $setBlocksType(selection, () => $createParagraphNode());
   }
 
@@ -5270,6 +5407,7 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
     $setBlocksType(selection, () => $createHeadingNode(tag));
   }
 
@@ -5311,10 +5449,14 @@ class Contents {
     if (allCode) {
       blockElements.forEach(node => this.#unwrapCodeBlock(node));
     } else {
+      $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+      const elements = this.#blockLevelElementsInSelection(selection);
+      if (elements.length === 0) return
+
       const codeNode = $createCodeNode("plain");
-      blockElements.at(-1).insertAfter(codeNode);
+      elements.at(-1).insertAfter(codeNode);
       codeNode.selectEnd();
-      this.insertAtCursor(...blockElements);
+      this.insertAtCursor(...elements);
     }
   }
 
@@ -5333,8 +5475,7 @@ class Contents {
     } else {
       topLevelElements.filter($isQuoteNode).forEach(node => this.#unwrap(node));
 
-      $splitParagraphsAtLineBreakBoundaries(selection);
-
+       $expandSelectionToLineBreaksAndSplitAtEdges(selection);
       const elements = this.#topLevelElementsInSelection(selection);
       if (elements.length === 0) return
 
@@ -5602,45 +5743,8 @@ class Contents {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
 
-    this.#splitParagraphsAtLineBreaks(selection);
-  }
-
-  #splitParagraphsAtLineBreaks(selection) {
-    const anchorTopLevel = selection.anchor.getNode().getTopLevelElement();
-    const focusTopLevel = selection.focus.getNode().getTopLevelElement();
-    const topLevelElements = this.#topLevelElementsInSelection(selection);
-
-    for (const element of topLevelElements) {
-      if (!$isParagraphNode(element)) continue
-
-      const children = element.getChildren();
-      if (!children.some($isLineBreakNode)) continue
-
-      // Check whether this paragraph needs splitting: skip only if neither
-      // selection endpoint is inside it (meaning it's a middle paragraph
-      // fully between anchor and focus with no partial lines to split off).
-      // Compare top-level elements so endpoints inside nested inline nodes
-      // (e.g. text inside a LinkNode) are still recognized.
-      if (element !== anchorTopLevel && element !== focusTopLevel) 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();
-    }
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+    $splitSelectedParagraphsAtInnerLineBreaks(selection);
   }
 
   #blockLevelElementsInSelection(selection) {
@@ -5905,8 +6009,12 @@ class Clipboard {
 
   #isOnlyURLPasted(clipboardData) {
     // Safari URLs are copied as a text/plain + text/uri-list object
+    // App ShareSheet URLs are copied as solo text/uri-list object
     const types = Array.from(clipboardData.types);
-    return types.length === 2 && types.includes("text/uri-list") && types.includes("text/plain")
+    return types.length
+      && types.length <= 2
+      && types.includes("text/uri-list")
+      && (types.length < 2 || types.includes("text/plain"))
   }
 
   #isPastingIntoCodeBlock() {
@@ -6964,7 +7072,11 @@ class AttachmentDragAndDrop {
 const ATTACHMENT_ATTRIBUTES = [ "alt", "caption", "content", "content-type", "data-direct-upload-id",
   "data-sgid", "filename", "filesize", "height", "presentation", "previewable", "sgid", "url", "width" ];
 
+const UPLOADS_BUSY_MESSAGE = "Please wait for all files to upload";
+
 class AttachmentsExtension extends LexxyExtension {
+  #uploadsCount = 0
+
   get enabled() {
     return this.editorElement.supportsAttachments
   }
@@ -6981,17 +7093,41 @@ class AttachmentsExtension extends LexxyExtension {
         ActionTextAttachmentUploadNode,
         ImageGalleryNode
       ],
-      register(editor) {
+      register: (editor) => {
         const dragAndDrop = new AttachmentDragAndDrop(editor);
 
         return mergeRegister(
           editor.registerNodeTransform(ActionTextAttachmentNode, $extractAttachmentFromParagraph),
           editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL),
+          editor.registerMutationListener(ActionTextAttachmentUploadNode, this.#handleUploadMutations.bind(this)),
           () => dragAndDrop.destroy()
         )
       }
     })
   }
+
+  #handleUploadMutations(mutations) {
+    const previousUploadsCount = this.#uploadsCount;
+    for (const [ , mutation ] of mutations) {
+      if (mutation === "created") {
+        this.#uploadsCount++;
+      } else if (mutation === "destroyed") {
+        this.#uploadsCount--;
+      }
+    }
+
+    if (this.#uploadsCount !== previousUploadsCount) {
+      this.#setUploadsValidity();
+    }
+  }
+
+  #setUploadsValidity() {
+    if (this.#uploadsCount) {
+      this.setEditorValidity({ customError: true }, UPLOADS_BUSY_MESSAGE);
+    } else {
+      this.setEditorValidity({});
+    }
+  }
 }
 
 // Decorator nodes can be wrapped in a Paragraph Node by Lexical when contained in a <div>
@@ -7399,12 +7535,16 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
-  #validationTextArea = document.createElement("textarea")
-  #editorInitializedRafId = null
+  #initializeEventDispatched = false
+  #editorInitializedDispatched = false
+  #valueLoaded = false
   #listeners = new ListenerBin()
   #disposables = []
   #historyState = { undo: false, redo: false }
 
+  #validity = new Map()
+  #validationTextArea = document.createElement("textarea")
+
   constructor() {
     super();
     this.internals = this.attachInternals();
@@ -7437,29 +7577,40 @@ class LexicalEditorElement extends HTMLElement {
 
     this.#initialize();
 
-    this.#scheduleEditorInitializedDispatch();
     this.toggleAttribute("connected", true);
 
-    this.#handleAutofocus();
-
-    this.valueBeforeDisconnect = null;
+    requestAnimationFrame(() => {
+      this.#mountRoot();
+      this.#handleAutofocus();
+      this.#dispatchInitialize();
+    });
   }
 
   disconnectedCallback() {
-    this.#cancelEditorInitializedDispatch();
-    this.valueBeforeDisconnect = this.value;
+    this.#initializeEventDispatched = false;
+    this.#editorInitializedDispatched = false;
+    if (this.#valueLoaded) {
+      this.valueBeforeDisconnect = this.value;
+    } else {
+      this.valueBeforeDisconnect = null;
+    }
+    this.#valueLoaded = false;
     this.#reset(); // Prevent hangs with Safari when morphing
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+    if (name === "connected") this.connectedChangedCallback(oldValue, newValue);
+    if (name === "required") this.requiredChangedCallback(oldValue, newValue);
+  }
+
+  connectedChangedCallback(oldValue, newValue) {
+    if (this.isConnected && oldValue != null && oldValue !== newValue) {
       requestAnimationFrame(() => this.#reconnect());
     }
+  }
 
-    if (name === "required" && this.isConnected) {
-      this.#validationTextArea.required = this.hasAttribute("required");
-      this.#setValidity();
-    }
+  requiredChangedCallback() {
+    if (this.isConnected) this.#requestValidityRefresh();
   }
 
   formResetCallback() {
@@ -7485,6 +7636,27 @@ class LexicalEditorElement extends HTMLElement {
     return this.getAttribute("name")
   }
 
+  get required() {
+    return this.hasAttribute("required")
+  }
+
+  get validity() {
+    return this.internals.validity
+  }
+
+  checkValidity() {
+    return this.internals.checkValidity()
+  }
+
+  reportValidity() {
+    return this.internals.reportValidity()
+  }
+
+  setElementValidity(key, flags, message) {
+    this.#validity.set(key, { flags, message });
+    this.#requestValidityRefresh();
+  }
+
   get toolbarElement() {
     if (!this.#hasToolbar) return null
 
@@ -7580,7 +7752,7 @@ class LexicalEditorElement extends HTMLElement {
 
     if (!this.editor) return
 
-    this.#cancelEditorInitializedDispatch();
+    this.#editorInitializedDispatched = true;
     this.#dispatchEditorInitialized();
     this.#dispatchAttributesChange();
   }
@@ -7635,6 +7807,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   set value(html) {
+    this.#valueLoaded = true;
     const editorHasFocus = this.#isContentFocused;
 
     this.editor.update(() => {
@@ -7731,11 +7904,17 @@ class LexicalEditorElement extends HTMLElement {
       ...this.extensions.lexicalExtensions
     );
 
-    editor.setRootElement(this.editorContentElement);
-
     return editor
   }
 
+  // Toggling editable around setRootElement skips Lexical's DOM-selection sync,
+  // which would otherwise steal focus from elsewhere on the page.
+  #mountRoot() {
+    this.editor.setEditable(false);
+    this.editor.setRootElement(this.editorContentElement);
+    this.editor.setEditable(true);
+  }
+
   get #lexicalNodes() {
     const nodes = [ CustomActionTextAttachmentNode ];
 
@@ -7792,7 +7971,6 @@ class LexicalEditorElement extends HTMLElement {
 
     this.internals.setFormValue(html);
     this._internalFormValue = html;
-    this.#validationTextArea.value = this.isEmpty ? "" : html;
 
     if (changed) {
       dispatch(this, "lexxy:change");
@@ -7804,10 +7982,12 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #loadInitialValue() {
-    const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
-    this.editor.update(() => {
-      this.value = this.#initialValue = initialHtml;
-    }, { tag: HISTORY_MERGE_TAG });
+    if (!this.#valueLoaded) {
+      const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
+      this.editor.update(() => {
+        this.value = this.#initialValue = initialHtml;
+      }, { tag: HISTORY_MERGE_TAG });
+    }
   }
 
   #resetBeforeTurboCaches() {
@@ -7827,11 +8007,50 @@ class LexicalEditorElement extends HTMLElement {
       this.#clearCachedValues();
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
-      this.#setValidity();
+      this.#requestValidityRefresh();
       this.#dispatchAttributesChange();
     }));
   }
 
+  async #requestValidityRefresh() {
+    await nextFrame();
+
+    if (this.isConnected) this.#refreshValidity();
+  }
+
+  #refreshValidity() {
+    this.#refreshInternalValidity();
+    const { validity, message } = this.#calculateValidity();
+    this.internals.setValidity(validity, message, this.editorContentElement);
+  }
+
+  #refreshInternalValidity() {
+    this.#validationTextArea.required = this.required && this.isBlank;
+    const flags = this.#validationTextArea.validity;
+    const message = this.#validationTextArea.validationMessage;
+
+    this.#validity.set(this, { flags, message });
+  }
+
+  #calculateValidity() {
+    const validity = {};
+    const messages = [];
+
+    for (const { flags, message } of this.#validity.values()) {
+      // internal TextArea's ValidityState can contain `valid: true`
+      if (flags.valid === true) continue
+
+      for (const flag in flags) {
+        if (flags[flag]) {
+          validity[flag] = true;
+          messages.push(message);
+        }
+      }
+    }
+
+    return { validity, message: messages.join("\n") }
+  }
+
   #clearCachedValues() {
     this.cachedValue = null;
     this.cachedStringValue = null;
@@ -7987,14 +8206,6 @@ class LexicalEditorElement extends HTMLElement {
     this.classList.toggle("lexxy-editor--empty", this.isEmpty);
   }
 
-  #setValidity() {
-    if (this.#validationTextArea.validity.valid) {
-      this.internals.setValidity({});
-    } else {
-      this.internals.setValidity(this.#validationTextArea.validity, this.#validationTextArea.validationMessage, this.editorContentElement);
-    }
-  }
-
   #configureSanitizer() {
     setSanitizerConfig(this.#allowedElements);
   }
@@ -8058,22 +8269,18 @@ class LexicalEditorElement extends HTMLElement {
     });
   }
 
-  #scheduleEditorInitializedDispatch() {
-    this.#cancelEditorInitializedDispatch();
-    this.#editorInitializedRafId = requestAnimationFrame(() => {
-      this.#editorInitializedRafId = null;
-      if (!this.isConnected || !this.adapter) return
-
-      dispatch(this, "lexxy:initialize");
-      this.#dispatchEditorInitialized();
-    });
-  }
-
-  #cancelEditorInitializedDispatch() {
-    if (this.#editorInitializedRafId == null) return
+  #dispatchInitialize() {
+    if (this.isConnected && this.adapter) {
+      if (!this.#initializeEventDispatched) {
+        this.#initializeEventDispatched = true;
+        dispatch(this, "lexxy:initialize");
+      }
 
-    cancelAnimationFrame(this.#editorInitializedRafId);
-    this.#editorInitializedRafId = null;
+      if (!this.#editorInitializedDispatched) {
+        this.#editorInitializedDispatched = true;
+        this.#dispatchEditorInitialized();
+      }
+    }
   }
 
   get #resolvedHighlightColors() {
@@ -8124,8 +8331,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #reset() {
-    this.#cancelEditorInitializedDispatch();
     this.#dispose();
+    this.#resetValidity();
     this.editorContentElement?.remove();
     this.editorContentElement = null;
 
@@ -8145,6 +8352,10 @@ class LexicalEditorElement extends HTMLElement {
     this.valueBeforeDisconnect = null;
     this.connectedCallback();
   }
+
+  #resetValidity() {
+    this.#validity = new Map();
+  }
 }
 
 // Like $getRoot().getTextContent() but uses readable text for custom attachment nodes
@@ -8532,6 +8743,7 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#doesSpaceSelect) {
       this.#popoverListeners.track(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_CRITICAL));
+      this.#popoverListeners.track(this.#editor.registerCommand(INPUT_COMMAND, this.#handleInputCommand.bind(this), COMMAND_PRIORITY_CRITICAL));
     }
 
     // Register arrow keys with CRITICAL priority to prevent Lexical's selection handlers from running
@@ -8565,16 +8777,12 @@ class LexicalPromptElement extends HTMLElement {
     return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
   }
 
-  #selectOption(listItem) {
+  #selectOption(listItem, { scrollIntoView = false } = {}) {
     this.#clearListItemSelection();
     listItem.toggleAttribute("aria-selected", true);
-    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    listItem.focus();
-
-    // Preserve selection to prevent cursor jump
-    this.#selection.preservingSelection(() => {
-      this.#editorElement.focus();
-    });
+    if (scrollIntoView) {
+      listItem.scrollIntoView({ block: "nearest", container: "nearest", behavior: "smooth" });
+    }
 
     this.#setEditorAssociationAttribute("aria-controls", this.popoverElement.id);
     this.#setEditorAssociationAttribute("aria-activedescendant", listItem.id);
@@ -8718,17 +8926,22 @@ class LexicalPromptElement extends HTMLElement {
         }
       });
     }
-    // Arrow keys are now handled via Lexical commands with HIGH priority
+    // Arrow keys are handled via Lexical commands
+  }
+
+  // Android Mobile keyboard doesn't trigger KEY_SPACE_COMMAND
+  #handleInputCommand(event) {
+    if (event.inputType === "insertText" && event.data === " ") return this.#handleSelectedOption(event)
   }
 
   #moveSelectionDown() {
     const nextIndex = this.#selectedIndex + 1;
-    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
+    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex], { scrollIntoView: true });
   }
 
   #moveSelectionUp() {
     const previousIndex = this.#selectedIndex - 1;
-    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
+    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex], { scrollIntoView: true });
   }
 
   get #selectedIndex() {

package/dist/stylesheets/lexxy-content.css

@@ -12,7 +12,10 @@
     hyphens: auto;
     margin-block: 0 var(--lexxy-content-margin);
     overflow-wrap: break-word;
-    text-wrap: balance;
+
+    @supports (text-wrap: balance) {
+      text-wrap: balance;
+    }
   }
 
   h1 { font-size: 2rem; }
@@ -35,7 +38,10 @@
 
     &:not(lexxy-editor &) {
       overflow-wrap: break-word;
-      text-wrap: pretty;
+
+      @supports (text-wrap: pretty) {
+        text-wrap: pretty;
+      }
     }
   }
 
@@ -114,11 +120,14 @@
       hyphens: none;
       margin-block: 0 var(--lexxy-content-margin);
       overflow-x: auto;
+      overflow-wrap: break-word;
       padding: 1ch;
       tab-size: 2;
-      text-wrap: nowrap;
       white-space: pre;
-      word-break: break-word;
+
+      @supports (text-wrap: nowrap) {
+        text-wrap: nowrap;
+      }
     }
   }
 
@@ -275,8 +284,11 @@
 
       *:is(code, pre) {
         hyphens: auto;
-        text-wrap: wrap;
         white-space: pre-wrap;
+
+        @supports (text-wrap: wrap) {
+          text-wrap: wrap;
+        }
       }
     }
   }
@@ -338,7 +350,11 @@
       display: block;
       margin-inline: auto;
       max-inline-size: 100%;
-      user-select: none;
+      -webkit-user-select: none;
+
+      @supports (user-select: none) {
+        user-select: none;
+      }
     }
 
     > a {

package/dist/stylesheets/lexxy-editor.css

@@ -166,6 +166,7 @@
     }
 
     &.lexxy-content__table--selection {
+      /* eslint-disable-next-line css/use-baseline */
       ::selection {
         background: transparent;
       }
@@ -366,9 +367,12 @@
       inline-size: 100%;
       max-inline-size: 100%;
       padding: 0;
-      resize: none;
       text-align: center;
 
+      @supports (resize: none) {
+        resize: none;
+      }
+
       &:focus {
         background: var(--lexxy-color-canvas);
         outline: 0;
@@ -497,7 +501,11 @@
       fill: currentColor;
       grid-area: 1/1;
       inline-size: var(--lexxy-toolbar-icon-size);
-      user-select: none;
+      -webkit-user-select: none;
+
+      @supports (user-select: none) {
+        user-select: none;
+      }
     }
 
     &.lexxy-editor__toolbar-group-end {
@@ -528,9 +536,12 @@
 /* Dropdowns */
 
 :where(.lexxy-editor__toolbar-dropdown) {
-  user-select: none;
   -webkit-user-select: none;
 
+  @supports (user-select: none) {
+    user-select: none;
+  }
+
   .lexxy-editor__toolbar-button {
     color: currentColor;
 
@@ -806,9 +817,12 @@
     line-height: inherit;
     min-block-size: var(--button-size);
     min-inline-size: var(--button-size);
-    user-select: none;
     -webkit-user-select: none;
 
+    @supports (user-select: none) {
+      user-select: none;
+    }
+
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]),
       [open] &:is(summary) {

package/package.json

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