@37signals/lexxy 0.9.26 → 0.9.28

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, CONTROLLED_TEXT_INSERTION_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
@@ -5914,6 +5938,149 @@ BaseNodeInserter.for = (selection) => {
   return inserterClass ? new inserterClass(selection) : selection
 };
 
+// Word and Outlook never emit <ul>/<ol>/<li>. They simulate lists with flat
+// paragraphs that declare their depth in an inline `mso-list:l0 level2 lfo1`
+// and carry the bullet or number glyph in a <span style="mso-list:Ignore">.
+// Nothing downstream understands either, so the items land as plain paragraphs
+// with the marker baked into the text. Rebuild real lists from the level each
+// paragraph declares.
+//
+// Everything this reads lives in inline attributes, so it stays correct after
+// the pasted content formatter has dropped Office's style sheet.
+class OfficeFormatter {
+  constructor(doc) {
+    this.doc = doc;
+  }
+
+  format() {
+    for (const run of this.#listRuns()) {
+      this.#replaceWithLists(run);
+    }
+  }
+
+  // A run is a stretch of Office list paragraphs that are siblings with nothing
+  // but whitespace and Word's conditional comments between them. Anything else
+  // in between (a heading, a plain paragraph) ends one list and starts another.
+  #listRuns() {
+    const runs = [];
+    const claimed = new Set();
+
+    for (const paragraph of this.doc.querySelectorAll("p[style*='mso-list']")) {
+      if (claimed.has(paragraph) || this.#listLevel(paragraph) === null) continue
+
+      const run = [];
+      let node = paragraph;
+      while (node) {
+        run.push(node);
+        claimed.add(node);
+        node = this.#nextListParagraph(node);
+      }
+      runs.push(run);
+    }
+
+    return runs
+  }
+
+  #nextListParagraph(paragraph) {
+    let sibling = paragraph.nextSibling;
+    while (sibling && this.#isIgnorableBetweenListParagraphs(sibling)) {
+      sibling = sibling.nextSibling;
+    }
+
+    if (sibling && sibling.nodeType === Node.ELEMENT_NODE && this.#listLevel(sibling) !== null) {
+      return sibling
+    }
+
+    return null
+  }
+
+  #isIgnorableBetweenListParagraphs(node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      return true
+    }
+    return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ""
+  }
+
+  // Word numbers levels from 1, but a copied selection often starts partway down
+  // a list, so every paragraph declares level3 with no level1 above it. Anchoring
+  // the run at its own shallowest level is what keeps the result from arriving
+  // needlessly deep.
+  #replaceWithLists(paragraphs) {
+    const levels = paragraphs.map((paragraph) => this.#listLevel(paragraph));
+    const baseLevel = Math.min(...levels);
+    const roots = [];
+    const stack = [];
+
+    paragraphs.forEach((paragraph, index) => {
+      const depth = levels[index] - baseLevel + 1;
+      const tagName = this.#listTagName(paragraph);
+
+      while (stack.length > depth) {
+        stack.pop();
+      }
+      if (stack.length === depth && stack[depth - 1].tagName !== tagName.toUpperCase()) {
+        stack.pop();
+      }
+
+      while (stack.length < depth) {
+        const list = this.doc.createElement(tagName);
+        if (stack.length === 0) {
+          roots.push(list);
+        } else {
+          this.#lastItemOf(stack[stack.length - 1]).appendChild(list);
+        }
+        stack.push(list);
+      }
+
+      stack[stack.length - 1].appendChild(this.#createListItem(paragraph));
+    });
+
+    paragraphs[0].replaceWith(...roots);
+    for (const paragraph of paragraphs.slice(1)) {
+      paragraph.remove();
+    }
+  }
+
+  #lastItemOf(list) {
+    if (!list.lastElementChild) {
+      list.appendChild(this.doc.createElement("li"));
+    }
+    return list.lastElementChild
+  }
+
+  // Word writes bullets as the raw glyph of the marker font (Symbol's "·",
+  // Wingdings' "§", Courier New's "o") and numbers as the rendered counter
+  // ("1.", "a)", "iv)"). A bare letter with no delimiter after it is Courier
+  // New's bullet, not a counter, so the delimiter is what tells them apart.
+  #listTagName(paragraph) {
+    const marker = paragraph.querySelector("[style*='mso-list:Ignore']");
+    const text = marker?.textContent || "";
+
+    if (/\d/.test(text) || /^\(?[A-Za-z]+[.)]/.test(text)) {
+      return "ol"
+    }
+    return "ul"
+  }
+
+  #createListItem(paragraph) {
+    for (const marker of paragraph.querySelectorAll("[style*='mso-list:Ignore']")) {
+      marker.remove();
+    }
+
+    const item = this.doc.createElement("li");
+    item.append(...paragraph.childNodes);
+    return item
+  }
+
+  #listLevel(element) {
+    const match = /mso-list:[^;"']*\blevel(\d+)/.exec(element.getAttribute("style") || "");
+    if (match) {
+      return parseInt(match[1], 10)
+    }
+    return null
+  }
+}
+
 class PastedContentFormatter {
   constructor(doc) {
     this.doc = doc;
@@ -5923,6 +6090,7 @@ class PastedContentFormatter {
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    new OfficeFormatter(this.doc).format();
     this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
@@ -6081,6 +6249,20 @@ class Contents {
     }, { tag });
   }
 
+  // A literal "\n" stays visible in the editor, which Lexical renders with white-space: pre-wrap,
+  // but collapses to a space once serialized to HTML, so it has to become line break nodes.
+  insertTextWithLineBreaks(text) {
+    const normalizedText = text?.replace(/\r\n?/g, "\n");
+    const selection = $getSelection();
+
+    if (normalizedText?.includes("\n") && $isRangeSelection(selection)) {
+      selection.insertRawText(normalizedText);
+      return true
+    } else {
+      return false
+    }
+  }
+
   insertAtCursor(...nodes) {
     const selection = this.#insertableSelection();
     const inserter = BaseNodeInserter.for(selection);
@@ -9072,6 +9254,7 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#registerComponents();
     this.#handleEnter();
+    this.#handleReplacementText();
     this.#registerFocusEvents();
     this.#registerHistoryEvents();
     this.#registerFileAcceptFilter();
@@ -9335,6 +9518,14 @@ class LexicalEditorElement extends HTMLElement {
     ));
   }
 
+  #handleReplacementText() {
+    this.#listeners.track(this.editor.registerCommand(
+      CONTROLLED_TEXT_INSERTION_COMMAND,
+      (event) => event instanceof InputEvent && this.contents.insertTextWithLineBreaks(event.data),
+      COMMAND_PRIORITY_NORMAL
+    ));
+  }
+
   #registerFocusEvents() {
     this.#listeners.track(
       registerEventListener(this, "focusin", this.#handleFocusIn),

package/package.json

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