@37signals/lexxy 0.9.15-beta.next-0 → 0.9.16

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,11 +1,11 @@
-export { highlightCode } from './lexxy_helpers.esm.js';
+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, $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 { 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 { 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 { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
+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 { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -1449,7 +1449,7 @@ function filterMatchPosition(text, potentialMatch) {
 
   if (!normalizedMatch) return 0
 
-  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
+  const match = normalizedText.match(new RegExp(`(?<![\\p{L}\\p{N}])${escapeForRegExp(normalizedMatch)}`, "u"));
   return match ? match.index : -1
 }
 
@@ -1650,6 +1650,39 @@ function $isListItemStructurallyEmpty(listItem) {
   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 isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
   return $isTextNode(node)
     && node.getTextContent() === " "
@@ -1935,6 +1968,11 @@ function safeCloneEditorState(editorState) {
   return clone
 }
 
+const INITIAL_PREVIEW_POLL_DELAY_MS = 3000;
+const MAX_PREVIEW_POLL_DELAY_MS = 120000;
+const MAX_PREVIEW_POLL_ATTEMPTS = 20;
+
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
@@ -2009,7 +2047,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewSrc, previewable, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
     super(key);
 
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
@@ -2017,6 +2055,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.src = src;
     this.previewSrc = previewSrc;
     this.previewable = parseBoolean(previewable);
+    this.previewStatusUrl = previewStatusUrl;
     this.pendingPreview = pendingPreview;
     this.altText = altText || "";
     this.caption = caption || "";
@@ -2095,6 +2134,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
       sgid: this.sgid,
       src: this.src,
       previewable: this.previewable,
+      previewStatusUrl: this.previewStatusUrl,
+      pendingPreview: this.pendingPreview,
       altText: this.altText,
       caption: this.caption,
       contentType: this.contentType,
@@ -2213,41 +2254,68 @@ class ActionTextAttachmentNode extends DecoratorNode {
     });
   }
 
+  // While the file-icon is shown, watch for the preview to become ready.
+  // With a status URL, poll it (2xx = processing, anything else = ready).
+  // Without one, preload the preview URL once and swap on load.
   #pollForPreview(figure) {
+    if (this.previewStatusUrl) {
+      this.#waitForPreviewByPollingStatus(figure);
+    } else {
+      this.#waitForPreviewByPreloadingImage(figure);
+    }
+  }
+
+  #waitForPreviewByPollingStatus(figure) {
     let attempt = 0;
-    const maxAttempts = 10;
 
-    const tryLoad = () => {
+    const tryStatus = async () => {
       if (!this.editor.read(() => this.isAttached())) return
 
-      const img = new Image();
-      const cacheBustedSrc = `${this.src}${this.src.includes("?") ? "&" : "?"}_=${Date.now()}`;
+      try {
+        // redirect: "manual" prevents fetch from transparently following a
+        // 3xx response — without it, a status endpoint that redirected to,
+        // say, the preview URL would resolve to a 200 and look like
+        // "still processing." The contract is "any non-2xx means done."
+        const response = await fetch(this.previewStatusUrl, { credentials: "include", redirect: "manual" });
 
-      img.onload = () => {
         if (!this.editor.read(() => this.isAttached())) return
 
-        // The placeholder is a file-type icon SVG (86×100). A real thumbnail
-        // generated from PDF/video content is significantly larger.
-        if (img.naturalWidth > 150 && img.naturalHeight > 150) {
-          this.#swapToPreviewDOM(figure, cacheBustedSrc);
-        } else {
+        if (response.ok) {
           retry();
+        } else {
+          this.#swapToPreviewDOM(figure, this.src);
         }
-      };
-      img.onerror = () => retry();
-      img.src = cacheBustedSrc;
+      } catch {
+        retry();
+      }
     };
 
     const retry = () => {
       attempt++;
-      if (attempt < maxAttempts && this.editor.read(() => this.isAttached())) {
-        const delay = Math.min(2000 * Math.pow(1.5, attempt), 15000);
-        setTimeout(tryLoad, delay);
+      if (attempt < MAX_PREVIEW_POLL_ATTEMPTS && this.editor.read(() => this.isAttached())) {
+        const delay = Math.min(2000 * Math.pow(1.5, attempt), MAX_PREVIEW_POLL_DELAY_MS);
+        setTimeout(tryStatus, delay);
       }
     };
 
     // Give the server time to start processing before the first attempt
-    setTimeout(tryLoad, 3000);
+    setTimeout(tryStatus, INITIAL_PREVIEW_POLL_DELAY_MS);
+  }
+
+  #waitForPreviewByPreloadingImage(figure) {
+    const img = new Image();
+    img.onload = () => {
+      if (!this.editor.read(() => this.isAttached())) return
+      this.#swapToPreviewDOM(figure, this.src);
+    };
+    img.onerror = () => {
+      // Clear pendingPreview so undo/redo or any JSON round-trip doesn't
+      // re-enter the pending flow and issue another fetch. The file icon
+      // stays as the stable fallback.
+      if (!this.editor.read(() => this.isAttached())) return
+      this.patchAndRewriteHistory({ pendingPreview: false });
+    };
+    img.src = this.src;
   }
 
   #swapToPreviewDOM(figure, previewSrc) {
@@ -3592,8 +3660,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertHorizontalDivider() {
-    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    this.editor.focus();
+    $insertNodeToNearestRoot(new HorizontalDividerNode);
   }
 
   dispatchSetFormatHeadingLarge() {
@@ -4826,7 +4893,7 @@ class ImageGalleryNode extends ElementNode {
   replaceWithSingularChild() {
     if (this.#hasSingularChild) {
       const child = this.getFirstChild();
-      return this.replace(child)
+      return this.replace($makeSafeForRoot(child))
     }
   }
 
@@ -5254,6 +5321,7 @@ class AttachmentNodeConversion {
       fileName: blob.filename,
       fileSize: blob.byte_size,
       previewable: blob.previewable,
+      previewStatusUrl: blob.preview_status_url
     }
   }
 
@@ -5373,14 +5441,13 @@ class Contents {
   }
 
   insertDOM(doc, { tag } = {}) {
-    this.#unwrapPlaceholderAnchors(doc);
-
     this.editor.update(() => {
-      if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
+      if ($hasUpdateTag(PASTE_TAG)) this.#formatPastedDOM(doc);
 
       const nodes = this.editorElement.$generateNodesFromDOM(doc);
-      if (!this.#insertUploadNodes(nodes)) {
-        this.insertAtCursor(...nodes);
+
+      if (!$hasUpdateTag(PASTE_TAG) || !this.#dispatchPastedNodesCommand(nodes)) {
+        this.#insertUploadNodes(nodes) || this.insertAtCursor(...nodes);
       }
     }, { tag });
   }
@@ -5700,6 +5767,17 @@ class Contents {
     });
   }
 
+  #formatPastedDOM(doc) {
+    this.#unwrapPlaceholderAnchors(doc);
+    this.#stripTableCellColorStyles(doc);
+  }
+
+  #dispatchPastedNodesCommand(nodes) {
+    return this.editor.dispatchCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, {
+      nodes, selection: $getSelection()
+    })
+  }
+
   #insertNodeIfRoot(node) {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return false
@@ -5994,10 +6072,10 @@ class Clipboard {
 
   #handleParsedClipboardNodes({ nodes, selection }) {
     const url = $bareUrlFromSingleLink(nodes);
-    if (!url) return false
-
-    this.#insertSingleLinkAt(selection, url);
-    return true
+    if (url && $isRangeSelection(selection)) {
+      this.#insertSingleLinkAt(selection, url);
+      return true
+    }
   }
 
   #isPlainTextOrURLPasted(clipboardData) {
@@ -6078,10 +6156,7 @@ class Clipboard {
     const linkNode = $createLinkNode(url).append($createTextNode(url));
     selection.insertNodes([ linkNode ]);
 
-    // Defer the lexxy:insert-link event until after the active update commits;
-    // listeners may run editor mutations of their own.
-    const nodeKey = linkNode.getKey();
-    Promise.resolve().then(() => this.#dispatchLinkInsertEvent(nodeKey, { url }));
+    $onUpdate(() => this.#dispatchLinkInsertEvent(linkNode.getKey(), { url }));
   }
 
   #dispatchLinkInsertEvent(nodeKey, payload) {
@@ -7537,9 +7612,10 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
+  #previousInternalFormValue = null
+
   #initializeEventDispatched = false
   #editorInitializedDispatched = false
-  #valueLoaded = false
   #listeners = new ListenerBin()
   #disposables = []
   #historyState = { undo: false, redo: false }
@@ -7591,12 +7667,11 @@ class LexicalEditorElement extends HTMLElement {
   disconnectedCallback() {
     this.#initializeEventDispatched = false;
     this.#editorInitializedDispatched = false;
-    if (this.#valueLoaded) {
-      this.valueBeforeDisconnect = this.value;
-    } else {
-      this.valueBeforeDisconnect = null;
-    }
-    this.#valueLoaded = false;
+
+    this.#previousInternalFormValue = null;
+    this.valueBeforeDisconnect = this.value;
+
+    this.#clearCachedValues();
     this.#reset(); // Prevent hangs with Safari when morphing
   }
 
@@ -7621,13 +7696,9 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   toString() {
-    if (this.cachedStringValue == null) {
-      this.editor?.getEditorState().read(() => {
-        this.cachedStringValue = $getReadableTextContent($getRoot());
-      });
-    }
-
-    return this.cachedStringValue
+    return this.cachedStringValue ??= this.editor?.read(() => {
+      return $getReadableTextContent($getRoot())
+    })
   }
 
   get form() {
@@ -7711,8 +7782,8 @@ class LexicalEditorElement extends HTMLElement {
     return dispatch(this, "lexxy:file-accept", { file }, true)
   }
 
-  $generateNodesFromDOM(doc) {
-    let nodes = $generateNodesFromDOM(this.editor, doc);
+  $generateNodesFromDOM(doc, { editor = this.editor } = {}) {
+    let nodes = $generateNodesFromDOM(editor, doc);
     if ($hasUpdateTag(PASTE_TAG)) nodes = $convertInlineImageDataURIs(nodes, this);
     return filterDisallowedAttachmentNodes(nodes, this)
   }
@@ -7754,7 +7825,6 @@ class LexicalEditorElement extends HTMLElement {
 
     if (!this.editor) return
 
-    this.#editorInitializedDispatched = true;
     this.#dispatchEditorInitialized();
     this.#dispatchAttributesChange();
   }
@@ -7799,17 +7869,12 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   get value() {
-    if (!this.cachedValue) {
-      this.editor?.getEditorState().read(() => {
-        this.cachedValue = sanitize($generateHtmlFromNodes(this.editor, null));
-      });
-    }
-
-    return this.cachedValue
+    return this.cachedValue ??= this.editor?.read(() => {
+      return sanitize($generateHtmlFromNodes(this.editor, null))
+    }) ?? null
   }
 
   set value(html) {
-    this.#valueLoaded = true;
     const editorHasFocus = this.#isContentFocused;
 
     this.editor.update(() => {
@@ -7821,11 +7886,8 @@ class LexicalEditorElement extends HTMLElement {
         $addUpdateTag(SKIP_DOM_SELECTION_TAG);
       }
 
-      $getRoot()
-        .clear()
-        .selectEnd()
-        .insertNodes(this.#parseHtmlIntoLexicalNodes(html));
 
+      this.#setEditorHtml(html);
       this.#toggleEmptyStatus();
     }, { discrete: true });
   }
@@ -7838,9 +7900,9 @@ class LexicalEditorElement extends HTMLElement {
     return this.#historyState.redo
   }
 
-  #parseHtmlIntoLexicalNodes(html) {
+  #parseHtmlIntoLexicalNodes(html, { editor = this.editor } = {}) {
     if (!html) html = "<p></p>";
-    const nodes = this.$generateNodesFromDOM(parseHtml(`${html}`));
+    const nodes = this.$generateNodesFromDOM(parseHtml(`${html}`), { editor });
 
     return nodes
       .filter(this.#isNotWhitespaceOnlyNode)
@@ -7876,7 +7938,6 @@ class LexicalEditorElement extends HTMLElement {
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#configureSanitizer();
-    this.#loadInitialValue();
     this.#resetBeforeTurboCaches();
   }
 
@@ -7901,7 +7962,8 @@ class LexicalEditorElement extends HTMLElement {
       nodes: this.#lexicalNodes,
       html: {
         export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportTextNodeDOM ] ])
-      }
+      },
+      $initialEditorState: (editor) => this.#loadInitialValue(editor)
     },
       ...this.extensions.lexicalExtensions
     );
@@ -7968,28 +8030,30 @@ class LexicalEditorElement extends HTMLElement {
     return Array.from(this.attributes).filter(attribute => attribute.name.startsWith("aria-"))
   }
 
-  set #internalFormValue(html) {
-    const changed = this.#internalFormValue !== undefined && this.#internalFormValue !== this.value;
+  #setInternalFormValue(html) {
+    const changed = this.#previousInternalFormValue !== null && html !== this.#previousInternalFormValue;
 
     this.internals.setFormValue(html);
-    this._internalFormValue = html;
+    this.#previousInternalFormValue = html;
 
     if (changed) {
       dispatch(this, "lexxy:change");
     }
   }
 
-  get #internalFormValue() {
-    return this._internalFormValue
+  #loadInitialValue(editor) {
+    const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
+
+    this.#initialValue = initialHtml;
+    this.#setInternalFormValue(initialHtml);
+    this.#setEditorHtml(initialHtml, { editor });
   }
 
-  #loadInitialValue() {
-    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 });
-    }
+  #setEditorHtml(html, { editor = this.editor } = { }) {
+    $getRoot()
+      .clear()
+      .selectEnd()
+      .insertNodes(this.#parseHtmlIntoLexicalNodes(html, { editor }));
   }
 
   #resetBeforeTurboCaches() {
@@ -8007,7 +8071,7 @@ class LexicalEditorElement extends HTMLElement {
   #synchronizeWithChanges() {
     this.#listeners.track(this.editor.registerUpdateListener(({ editorState }) => {
       this.#clearCachedValues();
-      this.#internalFormValue = this.value;
+      this.#setInternalFormValue(this.value);
       this.#toggleEmptyStatus();
       this.#requestValidityRefresh();
       this.#dispatchAttributesChange();
@@ -8265,6 +8329,8 @@ class LexicalEditorElement extends HTMLElement {
   #dispatchEditorInitialized() {
     if (!this.adapter) return
 
+    this.#editorInitializedDispatched = true;
+
     this.adapter.dispatchEditorInitialized({
       highlightColors: this.#resolvedHighlightColors,
       headingFormats: this.#supportedHeadingFormats
@@ -8279,7 +8345,6 @@ class LexicalEditorElement extends HTMLElement {
       }
 
       if (!this.#editorInitializedDispatched) {
-        this.#editorInitializedDispatched = true;
         this.#dispatchEditorInitialized();
       }
     }
@@ -8553,6 +8618,9 @@ class RemoteFilterSource extends BaseSource {
 const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
 const FILTER_DEBOUNCE_INTERVAL = 50;
 
+// Start of line, or after a space or newline.
+const DEFAULT_ONLY_AT_PATTERN = "^|[ \\n]";
+
 class LexicalPromptElement extends HTMLElement {
   #globalListeners = new ListenerBin()
   #popoverListeners = new ListenerBin()
@@ -8598,6 +8666,14 @@ class LexicalPromptElement extends HTMLElement {
     return this.hasAttribute("supports-space-in-searches")
   }
 
+  get onlyAt() {
+    return this.getAttribute("only-at")
+  }
+
+  get verticalDirection() {
+    return this.getAttribute("vertical-direction")
+  }
+
   get open() {
     return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
   }
@@ -8641,14 +8717,10 @@ class LexicalPromptElement extends HTMLElement {
           if (offset >= triggerLength) {
             const textBeforeCursor = fullText.slice(offset - triggerLength, offset);
 
-            // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
             if (textBeforeCursor === this.trigger) {
-              const isAtStart = offset === triggerLength;
-
-              const charBeforeTrigger = offset > triggerLength ? fullText[offset - triggerLength - 1] : null;
-              const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+              const textBeforeTrigger = $textBeforeOffset(node, offset - triggerLength);
 
-              if (isAtStart || isPrecededBySpaceOrNewline) {
+              if (this.#onlyAtRegExp.test(textBeforeTrigger)) {
                 this.#popoverListeners.dispose();
                 this.#showPopover();
               }
@@ -8659,7 +8731,15 @@ class LexicalPromptElement extends HTMLElement {
     }));
   }
 
+  get #onlyAtRegExp() {
+    return new RegExp(`(?:${this.onlyAt ?? DEFAULT_ONLY_AT_PATTERN})$`)
+  }
+
   get #promptContentTypePermitted() {
+    // `insert-editable-text` prompts never create attachments, so the
+    // editor's attachment support and content-type allowlist don't apply.
+    if (this.hasAttribute("insert-editable-text")) return true
+
     const el = this.#editorElement;
     if (!el.supportsAttachments) {
       return false
@@ -8822,11 +8902,15 @@ class LexicalPromptElement extends HTMLElement {
 
     const popoverRect = this.popoverElement.getBoundingClientRect();
 
-    if (popoverRect.right > window.innerWidth) {
+    if (popoverRect.right > editorRect.right) {
       this.popoverElement.toggleAttribute("data-clipped-at-right", true);
     }
 
-    if (popoverRect.bottom > window.innerHeight) {
+    const forceTop = this.verticalDirection === "top";
+    const forceBottom = this.verticalDirection === "bottom";
+    const overflowsWindow = popoverRect.bottom > window.innerHeight;
+
+    if (!forceBottom && (forceTop || overflowsWindow)) {
       this.#setPopoverOffsetY(contentRect.height - y + fontSize);
       this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }

package/dist/lexxy_helpers.esm.js

@@ -28,8 +28,8 @@ import 'prismjs/components/prism-kotlin';
 window.Prism ||= {};
 window.Prism.manual = true;
 
-function highlightCode() {
-  const elements = document.querySelectorAll("pre[data-language]");
+function highlightCode(root = document) {
+  const elements = root.querySelectorAll("pre[data-language]:not([data-highlighted])");
 
   elements.forEach(preElement => {
     highlightElement(preElement);
@@ -37,6 +37,8 @@ function highlightCode() {
 }
 
 function highlightElement(preElement) {
+  if (preElement.dataset.highlighted === "true") return
+
   const language = preElement.getAttribute("data-language");
   let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
 
@@ -55,6 +57,8 @@ function highlightElement(preElement) {
   if (highlights.length > 0) {
     applyHighlightRanges(preElement, highlights);
   }
+
+  preElement.dataset.highlighted = "true";
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of
@@ -160,4 +164,4 @@ function collectTextNodes(root) {
   return nodes
 }
 
-export { highlightCode };
+export { highlightCode, highlightElement };

package/package.json

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