@37signals/lexxy 0.9.25 → 0.9.26

package/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
 

package/dist/lexxy.esm.js

@@ -5923,6 +5923,7 @@ class PastedContentFormatter {
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
@@ -5964,6 +5965,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.
@@ -5980,15 +6004,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
   }
 }
 

package/dist/stylesheets/lexxy-editor.css

@@ -9,6 +9,9 @@
   }
   --lexxy-toolbar-gap: 2px;
   --lexxy-toolbar-spacing: 0.5ch;
+  --lexxy-toolbar-padding: 2px;
+  --lexxy-toolbar-border-size: 1px;
+  --lexxy-toolbar-height: calc(var(--lexxy-toolbar-button-size) + 2 * var(--lexxy-toolbar-padding) + var(--lexxy-toolbar-border-size));
 
   border: 1px solid var(--lexxy-color-ink-lighter);
   border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
@@ -408,6 +411,11 @@
   }
 }
 
+/* Reserve the mounted height before upgrade so it doesn't shift layout on mount. */
+:where(lexxy-editor:not(:defined)) {
+  min-block-size: calc(var(--lexxy-toolbar-height) + var(--lexxy-editor-rows) + 2 * var(--lexxy-editor-padding));
+}
+
 /* Placeholder */
 :where(.lexxy-editor--empty) {
   .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
@@ -461,13 +469,13 @@
 :where(lexxy-toolbar) {
   --lexxy-toolbar-icon-size: 1.125em;
 
-  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
+  border-block-end: var(--lexxy-toolbar-border-size) solid var(--lexxy-color-ink-lighter);
   color: currentColor;
   display: flex;
   font-size: inherit;
   gap: var(--lexxy-toolbar-gap);
   max-inline-size: 100%;
-  padding: 2px;
+  padding: var(--lexxy-toolbar-padding);
   position: relative;
 
   @container (width < 300px) {

package/package.json

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