lexxy 0.9.24 → 0.9.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08d5395bf49ba2c13a16064a9bae40bb6dd6e7d17a00235732374b66967d5532'
-  data.tar.gz: 0446fe6c91c279e2b198ee2d42191e4a3d3ec80882945b20f85fc3f9522fe180
+  metadata.gz: f5c63b2cb8499843f516d8404a2a7573f93452f753b54672b53d80a60242d0ef
+  data.tar.gz: 13d59b10d606353cbc379ea5e940b40647fbe17a497f11a565c633ca1ae51519
 SHA512:
-  metadata.gz: 6ce53b76db8039e8658761a8083ce5e6713cb7afb17c64838fb0561d15b25f2901ed22ed3bb715874659accbebbee78ac1797a5613659bdaeeabe40f034994f5
-  data.tar.gz: ee2bb48df2a24e532d9f69b16cc205cf5a19fb22d3d2add102d8ec2f26406ca59bcd7dbcae4ea577ce423ca09eaaceb9d4939b19a673a4efabf5734e68775fd8
+  metadata.gz: 0e0b6c3b8763c773fbc0ebe6a4d17cc5c8ee00813c48e66151975640daf3866b9a9558128584812aba21de840982ff0273200158b529343fd98b0992641622b8
+  data.tar.gz: 72db851395aea2ad408a62dd78afd2e0cea0843b1484f39a19755f58d6a8a65c482c029bb876d5f109018820bee4b8141365976b35508bfd83adc0c9754dd543

data/README.md

@@ -21,6 +21,7 @@ A modern rich text editor for Rails.
 
 - Bug reports and pull requests are welcome on [GitHub Issues](https://github.com/basecamp/lexxy/issues). Help is especially welcome with [those tagged as "Help Wanted"](https://github.com/basecamp/lexxy/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22).
 - For questions and general Lexxy discussion, please use the [Discussions section](https://github.com/basecamp/lexxy/discussions)
+- To build with a development version of Lexical, use `bin/link-to-local-lexical`.
 
 ## License
 

data/app/assets/javascript/lexxy.js

@@ -7473,9 +7473,9 @@ class ToolbarDropdown extends HTMLElement {
 const HEADING_BUTTON_SELECTOR = "button.lexxy-heading-button";
 
 const HEADING_PRESETS = [
-  { label: "Large Heading", name: "heading-large" },
-  { label: "Medium Heading", name: "heading-medium" },
-  { label: "Small Heading", name: "heading-small" }
+  { label: "Large Heading", name: "heading-large", command: "setFormatHeadingLarge" },
+  { label: "Medium Heading", name: "heading-medium", command: "setFormatHeadingMedium" },
+  { label: "Small Heading", name: "heading-small", command: "setFormatHeadingSmall" }
 ];
 
 class HeadingDropdown extends HTMLElement {
@@ -7505,6 +7505,14 @@ class HeadingDropdown extends HTMLElement {
     }
   }
 
+  static commandFor(index) {
+    if (index < HEADING_PRESETS.length) {
+      return HEADING_PRESETS[index].command
+    } else {
+      return "applyHeadingFormat"
+    }
+  }
+
   #listeners = new ListenerBin()
 
   connectedCallback() {
@@ -7567,6 +7575,7 @@ class HeadingDropdown extends HTMLElement {
     const button = document.createElement("button");
     button.type = "button";
     button.dataset.heading = tag;
+    button.dataset.command = HeadingDropdown.commandFor(index);
     button.classList.add("lexxy-heading-button");
     button.name = name;
     button.title = label;
@@ -7581,7 +7590,7 @@ class HeadingDropdown extends HTMLElement {
         if (!this.#editor) return
 
         event.preventDefault();
-        this.#editor.dispatchCommand("applyHeadingFormat", button.dataset.heading);
+        this.#editor.dispatchCommand(button.dataset.command, button.dataset.heading);
         this.#editor.focus();
       }));
     });
@@ -8450,14 +8459,29 @@ function $shrinkSelectionPastBlockEdges(selection) {
   if (!anchorBlock || !focusBlock || anchorBlock.is(focusBlock)) return
 
   if ($isAtBlockEnd(selection.anchor, anchorBlock)) {
-    const nextBlock = anchorBlock.getNextSibling();
+    const nextBlock = $nearestElementSibling(anchorBlock, "next");
     if (nextBlock) selection.anchor.set(nextBlock.getKey(), 0, "element");
   }
 
   if ($isAtBlockStart(selection.focus, focusBlock)) {
-    const previousBlock = focusBlock.getPreviousSibling();
+    const previousBlock = $nearestElementSibling(focusBlock, "previous");
     if (previousBlock) selection.focus.set(previousBlock.getKey(), previousBlock.getChildrenSize(), "element");
   }
+
+  // Shrinking moves the endpoints toward each other, so they can cross when
+  // both were flush against block edges; callers assume a forward selection.
+  j$6(selection);
+}
+
+// Top-level decorator blocks (attachments, horizontal dividers) can't hold a
+// selection point, so walk past them to the nearest element sibling. Returns
+// null when no element sibling exists in that direction.
+function $nearestElementSibling(block, direction) {
+  let sibling = block;
+  do {
+    sibling = direction === "next" ? sibling.getNextSibling() : sibling.getPreviousSibling();
+  } while (sibling && !Wi(sibling))
+  return sibling
 }
 
 function $isAtBlockEnd(point, block) {
@@ -10309,6 +10333,9 @@ const COMMANDS = [
   "unlink",
   "toggleHighlight",
   "removeHighlight",
+  "setFormatHeadingLarge",
+  "setFormatHeadingMedium",
+  "setFormatHeadingSmall",
   "setFormatParagraph",
   "applyHeadingFormat",
   "clearFormatting",
@@ -10502,6 +10529,18 @@ class CommandDispatcher {
     Pt$3(new HorizontalDividerNode);
   }
 
+  dispatchSetFormatHeadingLarge() {
+    this.#applyConfiguredHeadingFormat(0);
+  }
+
+  dispatchSetFormatHeadingMedium() {
+    this.#applyConfiguredHeadingFormat(1);
+  }
+
+  dispatchSetFormatHeadingSmall() {
+    this.#applyConfiguredHeadingFormat(2);
+  }
+
   dispatchSetFormatParagraph() {
     this.contents.applyParagraphFormat();
   }
@@ -10558,6 +10597,11 @@ class CommandDispatcher {
     this.#listeners.dispose();
   }
 
+  #applyConfiguredHeadingFormat(index) {
+    const tag = this.editorElement.config.get("headings")[index];
+    if (tag) this.contents.applyHeadingFormat(tag);
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`;
@@ -12128,11 +12172,11 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   #forgetUploadRequest() {
-    this.#editorElement.uploadRequests.forget(this.getKey());
+    this.#editorElement?.uploadRequests.forget(this.getKey());
   }
 
   #rememberUploadRequest(request) {
-    this.#editorElement.uploadRequests.track(this.getKey(), request);
+    this.#editorElement?.uploadRequests.track(this.getKey(), request);
   }
 
   get #editorElement() {
@@ -12438,13 +12482,27 @@ class PastedContentFormatter {
   }
 
   format() {
+    this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
   }
 
+  // Spreadsheets (e.g. Excel) copy a <style> block whose rules (td { color:
+  // black }, .xlNN { ... }) cascade onto the imported text. That color rides
+  // in through the cascade rather than an inline style, so it slips past both
+  // the cell-level stripping below and the paste style canonicalizer, leaving
+  // pasted tables with foreign text colors that don't adapt to the theme. Drop
+  // foreign style sheets so nothing cascades into imported content.
+  #stripStyleElements() {
+    for (const style of this.doc.querySelectorAll("style")) {
+      style.remove();
+    }
+  }
+
   // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
   // from rendered views where mentions and interactive elements are wrapped in
   // <a href="#"> tags. Unwrap them so their text content pastes as plain text
@@ -12469,6 +12527,29 @@ class PastedContentFormatter {
     }
   }
 
+  // Some sources wrap runs of <li>s in a stray element (e.g. a <div> directly
+  // inside the list). Dissolve such wrappers so their items become direct
+  // list children and any nested list they hide becomes visible to
+  // #nestStrayListChildren below.
+  #unwrapWrappedListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      let wrapper = this.#wrappedListChild(list);
+      while (wrapper) {
+        wrapper.replaceWith(...wrapper.childNodes);
+        wrapper = this.#wrappedListChild(list);
+      }
+    }
+  }
+
+  #wrappedListChild(list) {
+    for (const child of list.children) {
+      if (child.tagName !== "LI" && !this.#isNestedList(child) && this.#containsListItems(child)) {
+        return child
+      }
+    }
+    return null
+  }
+
   // 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.
@@ -12485,15 +12566,40 @@ class PastedContentFormatter {
     }
   }
 
-  // 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.
+  // Only <li> is a valid child of a list. Unwrap remaining stray children
+  // that still hold list items (a nested list with no preceding <li> to nest
+  // under) so the items survive, and drop stray <br>/whitespace so the import
+  // doesn't wrap them into an empty leading item.
   #stripStrayListChildren() {
     for (const list of this.doc.querySelectorAll("ol, ul")) {
-      for (const child of Array.from(list.childNodes)) {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "LI") continue
-        list.removeChild(child);
+      let stray = this.#firstStrayListChild(list);
+      while (stray) {
+        if (this.#containsListItems(stray)) {
+          stray.replaceWith(...stray.childNodes);
+        } else {
+          stray.remove();
+        }
+
+        stray = this.#firstStrayListChild(list);
+      }
+    }
+  }
+
+  #firstStrayListChild(list) {
+    for (const child of list.childNodes) {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "LI") {
+        return child
       }
     }
+    return null
+  }
+
+  #isNestedList(node) {
+    return node.nodeType === Node.ELEMENT_NODE && (node.tagName === "OL" || node.tagName === "UL")
+  }
+
+  #containsListItems(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.querySelector("li") !== null
   }
 }
 
@@ -16046,7 +16152,7 @@ class LexicalEditorElement extends HTMLElement {
       { label: "Normal", command: "setFormatParagraph", tag: null },
       ...headings.map((tag, index) => ({
         label: HeadingDropdown.labelFor(tag, index),
-        command: "applyHeadingFormat",
+        command: HeadingDropdown.commandFor(index),
         tag
       }))
     ]