@37signals/lexxy 0.9.28 → 0.9.30

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, 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 { 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';
@@ -15,7 +15,7 @@ import { HistoryExtension } from '@lexical/history';
 import { $isCodeNode, CodeHighlightNode, PrismTokenizer, $isCodeHighlightNode, $createCodeNode, $createCodeHighlightNode, CodeNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
-import { marked } from 'marked';
+import { Marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 import 'prismjs';
 import 'prismjs/components/prism-clike';
@@ -67,6 +67,22 @@ function styleFilterHook(_currentNode, hookEvent) {
 
 DOMPurify.addHook("uponSanitizeAttribute", styleFilterHook);
 
+const FORBIDDEN_STIMULUS_ATTRIBUTES = [ "data-controller", "data-action" ];
+
+// Stimulus behavior attributes must never survive sanitization, whatever an
+// extension's allowedElements declares. FORBID_ATTR alone isn't enough: in
+// DOMPurify 3.x the functional ADD_ATTR — which Lexxy builds from the public
+// allowedElements API — is evaluated ahead of FORBID_ATTR, so an extension that
+// listed one of these on a tag would otherwise reinstate it. This hook drops
+// them unconditionally, keeping the class-level prohibition config-independent.
+function stimulusAttributeFilterHook(_currentNode, hookEvent) {
+  if (FORBIDDEN_STIMULUS_ATTRIBUTES.includes(hookEvent.attrName)) {
+    hookEvent.keepAttr = false;
+  }
+}
+
+DOMPurify.addHook("uponSanitizeAttribute", stimulusAttributeFilterHook);
+
 DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   if (data.tagName === "strong" || data.tagName === "em") {
     node.removeAttribute("class");
@@ -90,7 +106,12 @@ function buildConfig(allowedElements ) {
     ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
     ADD_ATTR: (attribute, tag) => tagAttributes[tag]?.includes(attribute),
     ADD_URI_SAFE_ATTR: [ "caption", "filename" ],
-    SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
+    SAFE_FOR_XML: false, // So that it does not strip attributes that contains serialized HTML (like content)
+    // Stimulus behavior attributes must never survive sanitization: they let stored content
+    // wire up arbitrary controllers/actions in the viewer's session. FORBID_ATTR wins over
+    // ALLOWED_ATTR/ADD_ATTR/ALLOW_DATA_ATTR in DOMPurify, so this holds even though other
+    // data-* attributes (data-language, data-trix-*, etc.) are otherwise allowed through.
+    FORBID_ATTR: [ "data-controller", "data-action" ]
   }
 }
 
@@ -1527,7 +1548,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+  constructor({ tagName, sgid, contentType, innerHtml, plainText } = {}, key) {
     super(key);
 
     const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
@@ -2328,7 +2349,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
     super(key);
 
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
@@ -5472,7 +5493,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return null
   }
 
-  constructor(node, key) {
+  constructor(node = {}, key) {
     const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError, fileName, contentType } = node;
     super({ ...node, contentType: file?.type ?? contentType }, key);
     this.file = file ?? null;
@@ -5493,9 +5514,10 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     // node is reloaded from saved state such as from history.
     this.#startUploadIfNeeded();
 
-    // Bridge-managed uploads (uploadUrl is null) don't have file data to show
-    // an image preview, so always show the file icon during upload.
-    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null;
+    // Bridge-managed uploads (uploadUrl is null) and restored or remote
+    // instances (no local File) don't have file data to show an image
+    // preview, so always show the file icon during upload.
+    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null && this.file != null;
     const figure = this.createAttachmentFigure(canPreviewFile);
 
     if (canPreviewFile) {
@@ -5566,9 +5588,12 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
     const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.fileName || "" });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file?.size) });
     figcaption.appendChild(nameSpan);
-    figcaption.appendChild(sizeSpan);
+
+    if (this.file) {
+      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
+      figcaption.appendChild(sizeSpan);
+    }
 
     return figcaption
   }
@@ -5590,6 +5615,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   async #startUploadIfNeeded() {
     if (this.#uploadStarted) return
     if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
+    if (!this.file) return // Restored or remote instance — no local File to upload
 
     this.#setUploadStarted();
 
@@ -6081,12 +6107,24 @@ class OfficeFormatter {
   }
 }
 
+// Properties worth rescuing from a foreign style sheet before #stripStyleElements
+// drops it, keyed by the elements that carry them. Word and Outlook declare
+// paragraph spacing in the sheet (p.MsoNormal { margin: 0cm }) and never inline,
+// so once the sheet goes there is nothing left to say how tightly the author's
+// paragraphs sat, and hosts that turn pasted paragraph margins into explicit
+// blank lines read tight Office paragraphs as spaced ones and multiply every
+// line break.
+const PRESERVABLE_STYLES = {
+  p: [ "margin-top", "margin-bottom" ]
+};
+
 class PastedContentFormatter {
   constructor(doc) {
     this.doc = doc;
   }
 
   format() {
+    this.#inlinePreservableStyles();
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
@@ -6094,9 +6132,23 @@ class PastedContentFormatter {
     this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
+    this.#replaceGmailEmojiImgTags();
     return this.doc
   }
 
+  // Runs before #stripStyleElements, to inline anything we still need
+  // from an external style before we remove it
+  #inlinePreservableStyles() {
+    const rules = this.#styleRules();
+    if (rules.length === 0) return
+
+    for (const [ selector, properties ] of Object.entries(PRESERVABLE_STYLES)) {
+      for (const element of this.doc.querySelectorAll(selector)) {
+        this.#inlineDeclaredStyles(element, properties, rules);
+      }
+    }
+  }
+
   // 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
@@ -6191,6 +6243,72 @@ class PastedContentFormatter {
     }
   }
 
+  // Read the rules from a sheet we build rather than from this.doc.styleSheets: the
+  // document came from DOMParser, so it has no browsing context, and WebKit leaves
+  // its styleSheets empty. Parsing the text ourselves still expands the shorthands
+  // Word writes (margin: 0cm) into the longhands we ask for.
+  #styleRules() {
+    const css = Array.from(this.doc.querySelectorAll("style"), (style) => style.textContent).join("\n");
+    if (css.trim() === "") return []
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+
+    const rules = [];
+    for (const rule of sheet.cssRules) {
+      if (rule instanceof CSSStyleRule) {
+        rules.push(rule);
+      }
+    }
+    return rules
+  }
+
+  // A declaration the element already carries inline is the author's own and wins.
+  #inlineDeclaredStyles(element, properties, rules) {
+    for (const property of properties) {
+      if (element.style.getPropertyValue(property) === "") {
+        const value = this.#declaredValue(rules, element, property);
+        if (value) {
+          this.#appendStyleProperty(element, property, value);
+        }
+      }
+    }
+  }
+
+  // Source order alone doesn't decide the cascade, so when the matching rules
+  // disagree we can't say which value wins without resolving specificity. Skip
+  // the property rather than guess: guessing is permanent, since the sheet is
+  // about to go, and skipping only leaves the host on its own default.
+  #declaredValue(rules, element, property) {
+    const declared = new Set();
+    for (const rule of rules) {
+      const value = rule.style.getPropertyValue(property);
+      if (value !== "" && element.matches(rule.selectorText)) {
+        declared.add(value);
+      }
+    }
+
+    if (declared.size === 1) {
+      return declared.values().next().value
+    } else {
+      return null
+    }
+  }
+
+  // Assigning through element.style would reserialize the style attribute and
+  // drop the mso-* declarations Word leaves inline (they aren't valid CSS),
+  // and OfficeFormatter still needs to read mso-list from them. Append to the
+  // attribute instead so the original declarations survive untouched.
+  #appendStyleProperty(element, property, value) {
+    const style = element.getAttribute("style");
+    const declaration = `${property}:${value}`;
+    if (style === null || style.trim() === "") {
+      element.setAttribute("style", declaration);
+    } else {
+      element.setAttribute("style", `${style.replace(/;\s*$/, "")};${declaration}`);
+    }
+  }
+
   #firstStrayListChild(list) {
     for (const child of list.childNodes) {
       if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "LI") {
@@ -6207,6 +6325,16 @@ class PastedContentFormatter {
   #containsListItems(node) {
     return node.nodeType === Node.ELEMENT_NODE && node.querySelector("li") !== null
   }
+
+  // Emoji in gmail: <img data-emoji="😂" class="an1" alt="😂" aria-label="😂" draggable="false" src="https://fonts.gstatic.com/s/e/notoemoji/17.0/1f602/32.png" loading="lazy" style="height: 1.2em; width: 1.2em; vertical-align: middle;">
+  #replaceGmailEmojiImgTags() {
+    for (const emojiImg of this.doc.querySelectorAll("img[data-emoji]")) {
+      const emoji = emojiImg.dataset.emoji;
+      if (emoji === emojiImg.alt) {
+        emojiImg.replaceWith(emoji);
+      }
+    }
+  }
 }
 
 class Contents {
@@ -6241,7 +6369,7 @@ class Contents {
   insertText(text, { tag } = {}) {
     this.editor.update(() => {
       const paragraph = $createParagraphNode();
-      text.split("\n").forEach((line, index) => {
+      text.split(/\r\n|\r|\n/).forEach((line, index) => {
         if (index > 0) paragraph.append($createLineBreakNode());
         paragraph.append($createTextNode(line));
       });
@@ -6249,20 +6377,6 @@ 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);
@@ -6897,6 +7011,12 @@ class Contents {
   }
 }
 
+// Markdown reads any line indented by a tab or four spaces as a code block. Pasted
+// plain text is full of incidental indentation — outlines, notes, logs — and nobody
+// indents a note meaning "this is code"; they fence it. Keep fences, drop the
+// indentation rule.
+const pastedMarkdown = new Marked({ breaks: true }).use({ tokenizer: { code: () => undefined } });
+
 class Clipboard {
   #listeners = new ListenerBin()
 
@@ -7083,7 +7203,7 @@ class Clipboard {
   }
 
   #pasteMarkdown(text) {
-    const html = marked(text, { breaks: true });
+    const html = pastedMarkdown.parse(text);
     const doc = parseHtml(html);
 
     if (this.#isPlainTextWithoutMarkdown(doc)) {
@@ -8908,6 +9028,39 @@ class CustomAttachmentDragAndDropExtension extends LexxyExtension {
   }
 }
 
+const LINE_SEPARATORS = /\r\n|[\n\r\u2028\u2029]/;
+
+// A literal line separator inside a text node renders as a break in the editor, or not at all,
+// but never survives serialization to HTML. macOS text replacements deliver U+2028 LINE SEPARATOR,
+// and other insertions can carry "\n", so however the text arrives, a transform converts whatever
+// lands in a text node into line break nodes.
+class LineSeparatorsExtension extends LexxyExtension {
+  get lexicalExtension() {
+    return this.defineExtension({
+      name: "lexxy/line-separators",
+      register(editor) {
+        return editor.registerNodeTransform(TextNode, $replaceLineSeparatorWithLineBreak)
+      }
+    })
+  }
+}
+
+// Replaces the first separator only: the split leaves dirty text nodes behind, so Lexical re-runs
+// the transform until none remain.
+function $replaceLineSeparatorWithLineBreak(textNode) {
+  const match = textNode.getTextContent().match(LINE_SEPARATORS);
+
+  if (match) {
+    let separatorNode;
+    if (match.index === 0) {
+      [ separatorNode ] = textNode.splitText(match[0].length);
+    } else {
+      [ , separatorNode ] = textNode.splitText(match.index, match.index + match[0].length);
+    }
+    separatorNode.replace($createLineBreakNode());
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -9066,7 +9219,8 @@ class LexicalEditorElement extends HTMLElement {
       FormatEscapeExtension,
       LinkOpenerExtension,
       PreventLexicalTripleClickExtension,
-      CustomAttachmentDragAndDropExtension
+      CustomAttachmentDragAndDropExtension,
+      LineSeparatorsExtension
     ]
   }
 
@@ -9254,7 +9408,6 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#registerComponents();
     this.#handleEnter();
-    this.#handleReplacementText();
     this.#registerFocusEvents();
     this.#registerHistoryEvents();
     this.#registerFileAcceptFilter();
@@ -9518,14 +9671,6 @@ 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.28",
+  "version": "0.9.30",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",