@37signals/lexxy 0.9.9-beta.preview4 → 0.9.9-beta.preview5

package/dist/lexxy.esm.js

@@ -1,14 +1,14 @@
 import { isActiveAndVisible, createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $ensureForwardRangeSelection, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_EDITOR, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $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, $isParagraphNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $ensureForwardRangeSelection, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_EDITOR, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $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, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
-import { RichTextExtension, $isQuoteNode, $isHeadingNode, QuoteNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
@@ -1460,6 +1460,40 @@ function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
     && previousNode instanceof CustomActionTextAttachmentNode
 }
 
+function $splitParagraphsAtLineBreakBoundaries(selection) {
+  $ensureForwardRangeSelection(selection);
+
+  // Split focus first so the anchor split position stays valid.
+  $splitAtNearestLineBreak(selection.focus, "next");
+  $splitAtNearestLineBreak(selection.anchor, "previous");
+}
+
+function $splitAtNearestLineBreak(point, direction) {
+  const paragraph = point.getNode().getTopLevelElement();
+  if (!paragraph || !$isParagraphNode(paragraph)) return
+
+  const pointNode = point.getNode();
+  const selectionChild = pointNode.getParent().is(paragraph) ? pointNode : pointNode.getParentOrThrow();
+  const lineBreakCaret = $caretAtNearestNodeOfType(selectionChild, LineBreakNode, direction);
+  if (!lineBreakCaret) return
+
+  const lineBreak = lineBreakCaret.origin;
+  const isEdge = lineBreakCaret.getNodeAtCaret() === null;
+
+  if (!isEdge) {
+    $splitNode(paragraph, lineBreak.getIndexWithinParent());
+  }
+
+  lineBreak.remove();
+}
+
+function $caretAtNearestNodeOfType(node, klass, direction) {
+  for (const caret of $getSiblingCaret(node, direction)) {
+    if (caret.origin instanceof klass) return caret
+  }
+  return null
+}
+
 // Shared, strictly-contained element used to attach ephemeral nodes when we
 // need to read computed styles (e.g. canonicalizing style values, resolving
 // CSS custom properties). The container is created once and attached to
@@ -4646,7 +4680,6 @@ class NodeInserter {
   static for(selection) {
     const INSERTERS = [
       CodeNodeInserter,
-      QuoteNodeInserter,
       ShadowRootNodeInserter,
       NodeSelectionNodeInserter
     ];
@@ -4695,25 +4728,6 @@ class CodeNodeInserter extends NodeInserter {
 
 }
 
-// Lexical will split a QuoteNode when inserting other Elements - we want them simply inserted as-is
-class QuoteNodeInserter extends NodeInserter {
-  static handles(selection) {
-    return $getNearestNodeOfType(selection.anchor?.getNode(), QuoteNode)
-  }
-
-  insertNodes(nodes) {
-    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
-
-    $ensureForwardRangeSelection(this.selection);
-    let lastNode = this.selection.focus.getNode();
-    for (const node of nodes) {
-      lastNode = lastNode.insertAfter(node);
-    }
-
-    lastNode.selectEnd();
-  }
-}
-
 class ShadowRootNodeInserter extends NodeInserter {
   static handles(selection) {
     return $isShadowRoot(selection?.anchor.getNode())
@@ -4861,7 +4875,7 @@ class Contents {
     } else {
       topLevelElements.filter($isQuoteNode).forEach(node => this.#unwrap(node));
 
-      this.#splitParagraphsAtLineBreaks(selection);
+      $splitParagraphsAtLineBreakBoundaries(selection);
 
       const elements = this.#topLevelElementsInSelection(selection);
       if (elements.length === 0) return
@@ -5364,7 +5378,13 @@ class Clipboard {
   paste(event) {
     const clipboardData = event.clipboardData;
 
-    if (!clipboardData || this.#isPastingIntoCodeBlock()) return false
+    if (!clipboardData) return false
+
+    if (this.#isPastingIntoCodeBlock()) {
+      this.#pastePlainTextIntoCodeBlock(clipboardData);
+      event.preventDefault();
+      return true
+    }
 
     if (this.#isPlainTextOrURLPasted(clipboardData)) {
       this.#pastePlainText(clipboardData);
@@ -5413,6 +5433,16 @@ class Clipboard {
     return result
   }
 
+  #pastePlainTextIntoCodeBlock(clipboardData) {
+    const text = clipboardData.getData("text/plain");
+    if (!text) return
+
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) selection.insertRawText(text);
+    }, { tag: PASTE_TAG });
+  }
+
   #pastePlainText(clipboardData) {
     const item = clipboardData.items[0];
     item.getAsString((text) => {
@@ -6510,39 +6540,16 @@ class EarlyEscapeCodeNode extends CodeNode {
   }
 
   insertNewAfter(selection, restoreSelection) {
-    if (!selection.isCollapsed()) return super.insertNewAfter(selection, restoreSelection)
-
-    // Clamp element-type selection offsets that may have been invalidated
-    // by the code retokenizer. The retokenizer's $updateAndRetainSelection
-    // restores the element offset verbatim after re-tokenizing, but when
-    // highlight splits changed the child count before retokenization, the
-    // restored offset can exceed the current child count. Without clamping,
-    // CodeNode.insertNewAfter passes the stale offset to splice(), which
-    // throws "start + deleteCount > oldSize".
-    this.#clampSelectionOffset(selection);
-
-    if (this.#isCursorAtStart(selection)) {
-      this.insertBefore($createParagraphNode());
-      return null
-    }
-
-    if (this.#isCursorOnEmptyLastLine(selection)) {
-      $trimTrailingBlankNodes(this);
-
-      const paragraph = $createParagraphNode();
-      this.insertAfter(paragraph);
-      return paragraph
-    }
-
-    return super.insertNewAfter(selection, restoreSelection)
-  }
-
-  #clampSelectionOffset(selection) {
-    const childrenSize = this.getChildrenSize();
-    for (const point of [ selection.anchor, selection.focus ]) {
-      if (point.type === "element" && point.key === this.__key && point.offset > childrenSize) {
-        point.set(this.__key, childrenSize, "element");
-      }
+    if ($hasUpdateTag(PASTE_TAG) || !selection.isCollapsed()) {
+      return super.insertNewAfter(selection, restoreSelection)
+    } else if (this.#isCursorAtStart(selection)) {
+      return this.#insertParagraphBefore()
+    } else if (this.#isCursorOnWhitespaceOnlyLastLine(selection)) {
+      return this.#insertBlankLineBelow(selection, restoreSelection)
+    } else if (this.#isCursorOnEmptyLastLine(selection)) {
+      return this.#escapeToNewParagraphAfter()
+    } else {
+      return super.insertNewAfter(selection, restoreSelection)
     }
   }
 
@@ -6561,6 +6568,32 @@ class EarlyEscapeCodeNode extends CodeNode {
     return textContent === "" || textContent.endsWith("\n")
   }
 
+  #isCursorOnWhitespaceOnlyLastLine(selection) {
+    if (!$isCursorOnLastLine(selection)) return false
+
+    const textContent = this.getTextContent();
+    const lastNewlineIndex = textContent.lastIndexOf("\n");
+    const lastLine = lastNewlineIndex === -1 ? textContent : textContent.slice(lastNewlineIndex + 1);
+    return lastLine.length > 0 && lastLine.trim() === ""
+  }
+
+  #insertParagraphBefore() {
+    this.insertBefore($createParagraphNode());
+    return null
+  }
+
+  #insertBlankLineBelow(selection, restoreSelection) {
+    super.insertNewAfter(selection, restoreSelection);
+    this.getLastChild().remove();
+    return null
+  }
+
+  #escapeToNewParagraphAfter() {
+    $trimTrailingBlankNodes(this);
+    const paragraph = $createParagraphNode();
+    this.insertAfter(paragraph);
+    return paragraph
+  }
 }
 
 class EarlyEscapeListItemNode extends ListItemNode {
@@ -6965,7 +6998,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   get #isContentFocused() {
-    return !!this.editorContentElement && this.editorContentElement.contains(document.activeElement)
+    return !!this.editor && isEditorFocused(this.editor)
   }
 
   get value() {
@@ -6979,14 +7012,24 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   set value(html) {
+    const editorHasFocus = this.#isContentFocused;
+
     this.editor.update(() => {
+      if (editorHasFocus) {
+        // Address Safari inconsistently placing the cursor in the contenteditable by forcing focus back onto the editor
+        // Use direct `editor.focus` to bypass the pre-existing focus optimization and skip the callback
+        $onUpdate(() => this.editor.focus());
+      } else {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
+
       $getRoot()
         .clear()
         .selectEnd()
         .insertNodes(this.#parseHtmlIntoLexicalNodes(html));
 
       this.#toggleEmptyStatus();
-    }, { discrete: true, tag: SKIP_DOM_SELECTION_TAG });
+    }, { discrete: true });
   }
 
   get canUndo() {

package/dist/lexxy_helpers.esm.js

@@ -114,7 +114,7 @@ function highlightElement(preElement) {
     applyHighlightRanges(codeElement, highlights);
   }
 
-  preElement.replaceWith(codeElement);
+  preElement.replaceChildren(codeElement);
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of

package/package.json

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