@37signals/lexxy 0.9.19 → 0.9.21

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 });
   }
@@ -6418,7 +6486,7 @@ class Clipboard {
     }
 
     if (this.#isPlainTextOrURLPasted(clipboardData)) {
-      this.#pastePlainText(clipboardData);
+      this.#pastePlainTextOrURL(clipboardData);
       event.preventDefault();
       return true
     }
@@ -6456,14 +6524,34 @@ class Clipboard {
     return types.length === 1 && types[0] === "text/plain"
   }
 
+  // Browsers expose a copied URL in several shapes:
+  //   Safari          [ text/plain, text/uri-list ]
+  //   App ShareSheet  [ text/uri-list ]
+  //   Chromium macOS  [ text/plain, text/html, (?:text/link-preview) ]
   #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
+    if (this.#isLexicalClipboardData(clipboardData)) return false
+
     const types = Array.from(clipboardData.types);
-    return types.length
-      && types.length <= 2
-      && types.includes("text/uri-list")
-      && (types.length < 2 || types.includes("text/plain"))
+    if (types.includes("text/uri-list")) {
+      return types.every(type => type === "text/plain" || type === "text/uri-list")
+    }
+
+    if (clipboardData.files.length) return false
+
+    const text = clipboardData.getData("text/plain").trim();
+    if (!isAutolinkableURL(text)) return false
+
+    const html = clipboardData.getData("text/html");
+    return !html || this.#htmlIsBareLinkToURL(html, text)
+  }
+
+  #htmlIsBareLinkToURL(html, url) {
+    const doc = parseHtml(html);
+    if (doc.body.textContent.trim() !== url) return false
+
+    const links = doc.body.querySelectorAll("a");
+    if (links.length === 0) return true
+    return links.length === 1 && links[0].getAttribute("href") === url
   }
 
   #isPastingIntoCodeBlock() {
@@ -6497,14 +6585,12 @@ class Clipboard {
     }, { tag: PASTE_TAG });
   }
 
-  #pastePlainText(clipboardData) {
-    const item = clipboardData.items[0];
+  #pastePlainTextOrURL(clipboardData) {
+    const item = this.#plainTextOrURLItem(clipboardData);
     item.getAsString((text) => {
-      if (isAutolinkableURL(text) && this.contents.hasSelectedText()) {
-        this.contents.createLinkWithSelectedText(text);
-      } else if (isAutolinkableURL(text)) {
-        const nodeKey = this.contents.createLink(text);
-        this.#dispatchLinkInsertEvent(nodeKey, { url: text });
+      const url = text.trim();
+      if (isAutolinkableURL(url)) {
+        this.#pasteURL(url);
       } else if (this.editorElement.supportsMarkdown) {
         this.#pasteMarkdown(text);
       } else {
@@ -6513,6 +6599,20 @@ class Clipboard {
     });
   }
 
+  #plainTextOrURLItem(clipboardData) {
+    const items = Array.from(clipboardData.items);
+    return items.find((item) => item.type === "text/plain") || items.find((item) => item.type === "text/uri-list")
+  }
+
+  #pasteURL(url) {
+    if (this.contents.hasSelectedText()) {
+      this.contents.createLinkWithSelectedText(url);
+    } else {
+      const nodeKey = this.contents.createLink(url);
+      this.#dispatchLinkInsertEvent(nodeKey, { url });
+    }
+  }
+
   #insertSingleLinkAt(selection, url) {
     if (!$isRangeSelection(selection)) return
 
@@ -6560,14 +6660,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 +7957,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 +8254,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 +8291,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 +8349,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 +8366,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 +11080,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.21",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",