@37signals/lexxy 0.9.25 → 0.9.27

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

@@ -1,7 +1,7 @@
 export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, defineExtension, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, defineExtension, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $addUpdateTag, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import * as lexical from 'lexical';
 export { lexical as Lexical };
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
@@ -4523,10 +4523,34 @@ class Selection {
 
       this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
         this.#syncSelectedClasses();
-      }, COMMAND_PRIORITY_LOW)
+      }, COMMAND_PRIORITY_LOW),
+
+      this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+        this.#preserveFocusOfOtherFields();
+        return false
+      }, COMMAND_PRIORITY_CRITICAL)
     );
   }
 
+  // Firefox (152+) keeps window.getSelection() anchored inside the editor after focus
+  // moves to another field, and fires document selectionchange for every keystroke
+  // typed there. Lexical reads that stale selection, reconciles, and pulls focus back
+  // into the editor — stealing it mid-typing. When another text-entry field owns focus,
+  // tag the update so Lexical leaves the DOM selection (and with it, focus) alone.
+  #preserveFocusOfOtherFields() {
+    if (this.#anotherFieldIsFocused) {
+      $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+    }
+  }
+
+  get #anotherFieldIsFocused() {
+    const rootElement = this.editor.getRootElement();
+    const activeElement = rootElement?.ownerDocument.activeElement;
+
+    return activeElement && !rootElement.contains(activeElement) &&
+      (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)
+  }
+
   #listenForNodeSelections() {
     this.#listeners.track(this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
       if (!isDOMNode(target)) return false
@@ -5923,6 +5947,7 @@ class PastedContentFormatter {
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
@@ -5964,6 +5989,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,16 +6028,41 @@ 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
+  }
 }
 
 class Contents {

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.27",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",