@37signals/lexxy 0.9.19 → 0.9.20

package/dist/lexxy.esm.js

@@ -172,8 +172,8 @@ function dispatch(element, eventName, detail = null, cancelable = false) {
 }
 
 function addBlockSpacing(doc) {
-  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
-  for (const block of blocks) {
+  const selector = "body > :not(h1, h2, h3, h4, h5, h6) + *, blockquote > :not(h1, h2, h3, h4, h5, h6) + *";
+  for (const block of doc.querySelectorAll(selector)) {
     const spacer = doc.createElement("p");
     spacer.appendChild(doc.createElement("br"));
     block.before(spacer);
@@ -1742,6 +1742,7 @@ function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
 
 function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor = (node) => node.getTopLevelElement()) {
   $ensureForwardRangeSelection(selection);
+  $shrinkSelectionPastBlockEdges(selection);
 
   const focusCaret = $caretFromPoint(selection.focus, "next");
   const anchorCaret = $caretFromPoint(selection.anchor, "previous");
@@ -1773,6 +1774,52 @@ function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor
   ));
 }
 
+// A selection whose anchor sits at the very end of one block while its focus
+// lives in a later block (e.g. selecting a pasted paragraph when the browser
+// anchors at the end of the line above) contributes nothing from the anchor's
+// block. Pull each endpoint that is flush against a block edge into the block
+// that actually holds the selected content, so we don't wrap the empty edge
+// block too.
+function $shrinkSelectionPastBlockEdges(selection) {
+  if (selection.isCollapsed()) return
+
+  const anchorBlock = selection.anchor.getNode().getTopLevelElement();
+  const focusBlock = selection.focus.getNode().getTopLevelElement();
+  if (!anchorBlock || !focusBlock || anchorBlock.is(focusBlock)) return
+
+  if ($isAtBlockEnd(selection.anchor, anchorBlock)) {
+    const nextBlock = anchorBlock.getNextSibling();
+    if (nextBlock) selection.anchor.set(nextBlock.getKey(), 0, "element");
+  }
+
+  if ($isAtBlockStart(selection.focus, focusBlock)) {
+    const previousBlock = focusBlock.getPreviousSibling();
+    if (previousBlock) selection.focus.set(previousBlock.getKey(), previousBlock.getChildrenSize(), "element");
+  }
+}
+
+function $isAtBlockEnd(point, block) {
+  return $isAtBlockBoundary($caretFromPoint(point, "next"), block)
+}
+
+function $isAtBlockStart(point, block) {
+  return $isAtBlockBoundary($caretFromPoint(point, "previous"), block)
+}
+
+// A text point sitting mid-node still has content ahead of it in the caret's
+// direction, even though that content is not a sibling node. $getNodeAtCaret
+// only sees siblings, so check the text edge before walking the block.
+function $isAtBlockBoundary(caret, block) {
+  if ($isTextPointCaret(caret) && $isExtendableTextPointCaret(caret)) return false
+
+  let cursor = $normalizeCaret(caret);
+  while (cursor && block.isParentOf(cursor.origin)) {
+    if (cursor.getNodeAtCaret()) return false
+    cursor = cursor.getParentCaret();
+  }
+  return true
+}
+
 function $getCaretAtLineBreakBoundary(caret, skipInwardEdge = false) {
   const paragraph = caret.origin.getTopLevelElement();
   if (!paragraph || !$isParagraphNode(paragraph)) return null
@@ -5693,6 +5740,7 @@ class PastedContentFormatter {
   format() {
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
   }
@@ -5721,6 +5769,22 @@ class PastedContentFormatter {
     }
   }
 
+  // Some sources (e.g. Gmail) nest a sublist as a direct child of the parent
+  // <ol>/<ul> instead of inside a <li>. Move each nested list into its
+  // preceding <li> so the import preserves the nesting instead of dropping it.
+  #nestStrayListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      for (const child of Array.from(list.children)) {
+        if (child.tagName !== "OL" && child.tagName !== "UL") continue
+
+        const previousItem = child.previousElementSibling;
+        if (previousItem && previousItem.tagName === "LI") {
+          previousItem.appendChild(child);
+        }
+      }
+    }
+  }
+
   // Only <li> is a valid child of a list; drop stray <br>/whitespace so the
   // import doesn't wrap them into an empty leading item.
   #stripStrayListChildren() {
@@ -5764,7 +5828,11 @@ class Contents {
 
   insertText(text, { tag } = {}) {
     this.editor.update(() => {
-      const paragraph = $createParagraphNode().append($createTextNode(text));
+      const paragraph = $createParagraphNode();
+      text.split("\n").forEach((line, index) => {
+        if (index > 0) paragraph.append($createLineBreakNode());
+        paragraph.append($createTextNode(line));
+      });
       this.insertAtCursor(paragraph);
     }, { tag });
   }
@@ -6560,14 +6628,16 @@ class Clipboard {
 
   // Markdown conversion collapses runs of whitespace and unescapes backslashes,
   // silently corrupting plain text such as Windows/UNC file paths. When the text
-  // carries no Markdown structure, paste it verbatim instead.
+  // carries no Markdown structure, paste it verbatim instead. A path that wrapped
+  // across lines renders as a single paragraph with <br> line breaks (marked runs
+  // with breaks: true), which is still plain text we should preserve untouched.
   #isPlainTextWithoutMarkdown(doc) {
     const elements = Array.from(doc.body.children);
     if (elements.length !== 1) return false
 
     const paragraph = elements[0];
     return paragraph.nodeName === "P"
-      && Array.from(paragraph.childNodes).every((node) => node.nodeType === Node.TEXT_NODE)
+      && Array.from(paragraph.childNodes).every((node) => node.nodeType === Node.TEXT_NODE || node.nodeName === "BR")
   }
 
   #pasteRichText(clipboardData) {
@@ -7855,24 +7925,46 @@ class FormatEscapeExtension extends LexxyExtension {
 }
 
 function $escapeFromBlockquote() {
+  return $escapeBeforeBlockquoteStart() || $escapeFromBlankBlockquoteParagraph()
+}
+
+function $escapeBeforeBlockquoteStart() {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) return false
+
+  const paragraph = $getNearestNodeOfType(selection.anchor.getNode(), ParagraphNode);
+  if (paragraph && !$isBlankNode(paragraph) && !paragraph.getPreviousSibling()) {
+    const blockquote = paragraph.getParent();
+    if ($isQuoteNode(blockquote)) {
+      blockquote.insertBefore($createParagraphNode());
+      return true
+    }
+  }
+
+  return false
+}
+
+function $escapeFromBlankBlockquoteParagraph() {
   const anchorNode = $getSelection().anchor.getNode();
 
   const paragraph = $getNearestNodeOfType(anchorNode, ParagraphNode);
   if (!paragraph || !$isBlankNode(paragraph)) return false
 
   const blockquote = paragraph.getParent();
-  if (!blockquote || !$isQuoteNode(blockquote)) return false
+  if ($isQuoteNode(blockquote)) {
+    const nonEmptySiblings = paragraph.getNextSiblings().filter(sibling => !$isBlankNode(sibling));
 
-  const nonEmptySiblings = paragraph.getNextSiblings().filter(sibling => !$isBlankNode(sibling));
+    if (nonEmptySiblings.length > 0) {
+      $splitQuoteNode(blockquote, paragraph);
+    } else {
+      blockquote.insertAfter(paragraph);
+      paragraph.selectStart();
+    }
 
-  if (nonEmptySiblings.length > 0) {
-    $splitQuoteNode(blockquote, paragraph);
-  } else {
-    blockquote.insertAfter(paragraph);
-    paragraph.selectStart();
+    return true
   }
 
-  return true
+  return false
 }
 
 function $splitQuoteNode(node, paragraph) {
@@ -8130,6 +8222,15 @@ class CustomAttachmentDragAndDrop {
     // they only drop onto an existing line, so snap to the nearest one.
     if (caret.node === rootElement) {
       return this.#nearestLineCaret(rootElement, event.clientY)
+    }
+
+    // When mentions sit next to each other with no text between them, the caret
+    // lands inside the neighbouring decorator's DOM. Lexical can't resolve a point
+    // inside a decorator to an editable position, and the cursor has no business
+    // showing there anyway, so snap to just before or after that mention.
+    const decorator = this.#decoratorElementContaining(caret.node);
+    if (decorator) {
+      return this.#dropPointBesideDecorator(decorator, event.clientX)
     } else {
       return caret
     }
@@ -8158,24 +8259,55 @@ class CustomAttachmentDragAndDrop {
     }
   }
 
+  #decoratorElementContaining(node) {
+    const element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return element?.closest("[data-lexxy-decorator][data-lexical-node-key]")
+  }
+
+  #dropPointBesideDecorator(decorator, clientX) {
+    const rect = decorator.getBoundingClientRect();
+    const placement = clientX > rect.left + rect.width / 2 ? "after" : "before";
+    return { decoratorKey: decorator.dataset.lexicalNodeKey, placement }
+  }
+
   #moveAttachment(draggedKey, dropPoint) {
     this.#editor.update(() => {
       const draggedNode = $getNodeByKey(draggedKey);
       if (!$isCustomActionTextAttachmentNode(draggedNode)) return
 
-      const selection = $createRangeSelectionFromDom({
-        anchorNode: dropPoint.node,
-        anchorOffset: dropPoint.offset,
-        focusNode: dropPoint.node,
-        focusOffset: dropPoint.offset
-      }, this.#editor);
-      if (!selection) return
+      if (dropPoint.decoratorKey) {
+        this.#moveBesideNode(draggedNode, dropPoint);
+      } else {
+        this.#moveToCaret(draggedNode, dropPoint);
+      }
+    });
+  }
 
-      $setSelection(selection);
+  #moveBesideNode(draggedNode, { decoratorKey, placement }) {
+    const targetNode = $getNodeByKey(decoratorKey);
+    if (!targetNode || targetNode === draggedNode) return
 
-      draggedNode.remove();
-      selection.insertNodes([ draggedNode ]);
-    });
+    draggedNode.remove();
+    if (placement === "after") {
+      targetNode.insertAfter(draggedNode);
+    } else {
+      targetNode.insertBefore(draggedNode);
+    }
+  }
+
+  #moveToCaret(draggedNode, dropPoint) {
+    const selection = $createRangeSelectionFromDom({
+      anchorNode: dropPoint.node,
+      anchorOffset: dropPoint.offset,
+      focusNode: dropPoint.node,
+      focusOffset: dropPoint.offset
+    }, this.#editor);
+    if (!selection) return
+
+    $setSelection(selection);
+
+    draggedNode.remove();
+    selection.insertNodes([ draggedNode ]);
   }
 
   #updateDropIndicator(event) {
@@ -8185,7 +8317,12 @@ class CustomAttachmentDragAndDrop {
     if (dropPoint) this.#showCaret(this.#caretRectFor(dropPoint));
   }
 
-  #caretRectFor({ node, offset }) {
+  #caretRectFor(dropPoint) {
+    if (dropPoint.decoratorKey) {
+      return this.#decoratorEdgeRect(dropPoint)
+    }
+
+    const { node, offset } = dropPoint;
     const rect = caretRect(node, offset);
     if (rect) return rect
 
@@ -8197,6 +8334,15 @@ class CustomAttachmentDragAndDrop {
     return { left: lineRect.left, top: lineRect.top, height: lineRect.height }
   }
 
+  #decoratorEdgeRect({ decoratorKey, placement }) {
+    const decorator = this.#editor.getRootElement()?.querySelector(`[data-lexical-node-key="${decoratorKey}"]`);
+    if (!decorator) return null
+
+    const rect = decorator.getBoundingClientRect();
+    const left = placement === "after" ? rect.right : rect.left;
+    return { left, top: rect.top, height: rect.height }
+  }
+
   #showCaret(rect) {
     if (!rect) return
 
@@ -10902,4 +11048,4 @@ const configure = Lexxy.configure;
 // Pushing elements definition to after the current call stack to allow global configuration to take place first
 setTimeout(defineElements, 0);
 
-export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, configure };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, REWRITE_HISTORY_COMMAND, configure };

package/dist/lexxy_helpers.esm.js

@@ -40,16 +40,16 @@ function highlightElement(preElement) {
   if (preElement.dataset.highlighted === "true") return
 
   const language = preElement.getAttribute("data-language");
-  let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
 
   const grammar = Prism.languages?.[language];
   if (!grammar) return
 
-  // Extract highlight ranges before Prism destroys <mark> elements
-  const highlights = extractHighlightRanges(preElement);
-
-  // unescape HTML entities in the code block
-  code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
+  // Read the source text and <mark> ranges in a single walk, before Prism
+  // rewrites the element. Sharing one traversal keeps the highlight offsets
+  // aligned with the code string and preserves leading whitespace — deriving
+  // either of them separately (e.g. textContent through DOMParser) collapses
+  // leading whitespace and shifts every range, re-indenting the rendered block.
+  const { code, highlights } = extractCodeAndHighlights(preElement);
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
   preElement.innerHTML = highlightedHtml;
@@ -61,34 +61,35 @@ function highlightElement(preElement) {
   preElement.dataset.highlighted = "true";
 }
 
-// Walk the DOM tree inside a <pre> element and build a list of
-// { start, end, style } ranges for every <mark> element found.
-function extractHighlightRanges(preElement) {
-  const ranges = [];
+// Walk the <pre> once, building Prism's source text and the <mark> ranges
+// together: a text node contributes its text verbatim, a <br> contributes a
+// newline, and a <mark> records the slice of code it covers. Because both
+// outputs come from the same walk, every range offset is just a position in
+// `code` — so the highlights can't drift out of sync with the source, and the
+// block's leading whitespace survives (HTML parsing would collapse it).
+function extractCodeAndHighlights(preElement) {
   const root = preElement.querySelector("code") || preElement;
-
-  let offset = 0;
+  const highlights = [];
+  let code = "";
 
   function walk(node) {
     if (node.nodeType === Node.TEXT_NODE) {
-      offset += node.textContent.length;
+      code += node.textContent;
     } else if (node.nodeType === Node.ELEMENT_NODE) {
       if (node.tagName === "BR") {
-        offset += 1;
-        return
-      }
-
-      const isMark = node.tagName === "MARK";
-      const start = offset;
-
-      for (const child of node.childNodes) {
-        walk(child);
-      }
-
-      if (isMark) {
+        code += "\n";
+      } else if (node.tagName === "MARK") {
+        const start = code.length;
+        for (const child of node.childNodes) {
+          walk(child);
+        }
         const style = extractStyle(node);
         if (style) {
-          ranges.push({ start, end: offset, style });
+          highlights.push({ start, end: code.length, style });
+        }
+      } else {
+        for (const child of node.childNodes) {
+          walk(child);
         }
       }
     }
@@ -98,7 +99,7 @@ function extractHighlightRanges(preElement) {
     walk(child);
   }
 
-  return ranges
+  return { code, highlights }
 }
 
 function extractStyle(element) {

package/package.json

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