lexxy 0.9.19 → 0.9.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6868388203b7cfd6a7026208872b75268aafab61e5e29abc57ed35825dfdb8d
-  data.tar.gz: cdbb2c3702b5d204c2820a8a0fdf5c2c851c4d8272b1aa32e9dd8680adae409d
+  metadata.gz: 9a161b79f6c66266f236c0bae71c3ea540237a2a403fb2e047d43828e395bfda
+  data.tar.gz: '030840a6e183bc84837825ff7b8f646ebfb74fdd2d582c93c3475b38b88e633e'
 SHA512:
-  metadata.gz: 6a0ced04355235c795d5329b620f75e39ead9abfb64e4111939c2ce40c0a099b6d8aeed6222105d9e17aa909be1cc1e7a83037b2b9ff2fc8c49849f61f21a346
-  data.tar.gz: 26d5669519354092c672bc86bfe37f0939c16bc24336f3242e87ef4d9a5e7416bd856b275238c1bca32b5dd20a98f2c20784aee6c064a86033cc6edb34ced695
+  metadata.gz: 1c03106f2eed700e7521b00a937ace2b854459633b99ee93f6ef99eb323fd017d95fd9d348d174decc8a5e9e3b028fe9b470f5943066563b3ba6a55d03871c2b
+  data.tar.gz: b1d3121c8bc34f2b560192523f0e9a5ec885d869df2b9bdf56da88bd16829b8a5b9c0b0e99fa95507c06b65a1ca381665678df5f74dca94501b81937c658189a

data/app/assets/javascript/lexxy.js

@@ -6348,8 +6348,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);
@@ -8018,6 +8018,7 @@ function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
 
 function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor = (node) => node.getTopLevelElement()) {
   j$6(selection);
+  $shrinkSelectionPastBlockEdges(selection);
 
   const focusCaret = ql(selection.focus, "next");
   const anchorCaret = ql(selection.anchor, "previous");
@@ -8049,6 +8050,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(ql(point, "next"), block)
+}
+
+function $isAtBlockStart(point, block) {
+  return $isAtBlockBoundary(ql(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 (vl(caret) && ic(caret)) return false
+
+  let cursor = rc(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 || !no(paragraph)) return null
@@ -9469,7 +9516,7 @@ function $registerPreConversion(editor) {
 // and applied after retokenization via a mutation listener.
 function $preConversionWithHighlightsFactory(editor) {
   return function $preConversionWithHighlights(domNode) {
-    const highlights = extractHighlightRanges$1(domNode);
+    const highlights = extractHighlightRanges(domNode);
     if (highlights.length === 0) return null
 
     return {
@@ -9486,7 +9533,7 @@ function $preConversionWithHighlightsFactory(editor) {
 
 // Walk the DOM tree inside a <pre> element and build a list of
 // { start, end, style } ranges for every <mark> element found.
-function extractHighlightRanges$1(preElement) {
+function extractHighlightRanges(preElement) {
   const ranges = [];
   const codeElement = preElement.querySelector("code") || preElement;
 
@@ -12019,6 +12066,7 @@ class PastedContentFormatter {
   format() {
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
   }
@@ -12047,6 +12095,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() {
@@ -12090,7 +12154,11 @@ class Contents {
 
   insertText(text, { tag } = {}) {
     this.editor.update(() => {
-      const paragraph = eo().append(kr(text));
+      const paragraph = eo();
+      text.split("\n").forEach((line, index) => {
+        if (index > 0) paragraph.append(or());
+        paragraph.append(kr(line));
+      });
       this.insertAtCursor(paragraph);
     }, { tag });
   }
@@ -12816,7 +12884,7 @@ class Clipboard {
     }
 
     if (this.#isPlainTextOrURLPasted(clipboardData)) {
-      this.#pastePlainText(clipboardData);
+      this.#pastePlainTextOrURL(clipboardData);
       event.preventDefault();
       return true
     }
@@ -12854,14 +12922,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() {
@@ -12895,14 +12983,12 @@ class Clipboard {
     }, { tag: jn });
   }
 
-  #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 {
@@ -12911,6 +12997,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 (!Fr(selection)) return
 
@@ -12958,14 +13058,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) {
@@ -14253,24 +14355,46 @@ class FormatEscapeExtension extends LexxyExtension {
 }
 
 function $escapeFromBlockquote() {
+  return $escapeBeforeBlockquoteStart() || $escapeFromBlankBlockquoteParagraph()
+}
+
+function $escapeBeforeBlockquoteStart() {
+  const selection = Qr();
+  if (!Fr(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) return false
+
+  const paragraph = At$2(selection.anchor.getNode(), Zi);
+  if (paragraph && !$isBlankNode(paragraph) && !paragraph.getPreviousSibling()) {
+    const blockquote = paragraph.getParent();
+    if (Mt$2(blockquote)) {
+      blockquote.insertBefore(eo());
+      return true
+    }
+  }
+
+  return false
+}
+
+function $escapeFromBlankBlockquoteParagraph() {
   const anchorNode = Qr().anchor.getNode();
 
   const paragraph = At$2(anchorNode, Zi);
   if (!paragraph || !$isBlankNode(paragraph)) return false
 
   const blockquote = paragraph.getParent();
-  if (!blockquote || !Mt$2(blockquote)) return false
+  if (Mt$2(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) {
@@ -14528,6 +14652,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
     }
@@ -14556,24 +14689,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 = Yo(draggedKey);
       if (!$isCustomActionTextAttachmentNode(draggedNode)) return
 
-      const selection = Gr({
-        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);
+      }
+    });
+  }
 
-      es(selection);
+  #moveBesideNode(draggedNode, { decoratorKey, placement }) {
+    const targetNode = Yo(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 = Gr({
+      anchorNode: dropPoint.node,
+      anchorOffset: dropPoint.offset,
+      focusNode: dropPoint.node,
+      focusOffset: dropPoint.offset
+    }, this.#editor);
+    if (!selection) return
+
+    es(selection);
+
+    draggedNode.remove();
+    selection.insertNodes([ draggedNode ]);
   }
 
   #updateDropIndicator(event) {
@@ -14583,7 +14747,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
 
@@ -14595,6 +14764,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
 
@@ -17209,16 +17387,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$1.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$1.highlight(code, grammar, language);
   preElement.innerHTML = highlightedHtml;
@@ -17230,34 +17408,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);
         }
       }
     }
@@ -17267,7 +17446,7 @@ function extractHighlightRanges(preElement) {
     walk(child);
   }
 
-  return ranges
+  return { code, highlights }
 }
 
 function extractStyle(element) {
@@ -17436,5 +17615,5 @@ 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, highlightCode, highlightElement };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, REWRITE_HISTORY_COMMAND, configure, highlightCode, highlightElement };
 //# sourceMappingURL=lexxy.js.map