@37signals/lexxy 0.9.30 → 0.9.31-beta

package/dist/lexxy.esm.js

@@ -1,5 +1,5 @@
 export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
-import DOMPurify from 'dompurify';
+import createDOMPurify 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, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import * as lexical from 'lexical';
@@ -42,7 +42,250 @@ import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-kotlin';
 
-const ALLOWED_HTML_ATTRIBUTES = [ "class", "contenteditable", "href", "src", "style", "title" ];
+function deepMerge(target, source) {
+  const result = { ...target, ...source };
+  for (const [ key, value ] of Object.entries(source)) {
+    if (arePlainHashes(target[key], value)) {
+      result[key] = deepMerge(target[key], value);
+    }
+  }
+
+  return result
+}
+
+function arePlainHashes(...values) {
+  return values.every(value => value && value.constructor == Object)
+}
+
+class Configuration {
+  #tree = {}
+
+  constructor(...configs) {
+    this.merge(...configs);
+  }
+
+  merge(...configs) {
+    return this.#tree = configs.reduce(deepMerge, this.#tree)
+  }
+
+  get(path) {
+    const keys = path.split(".");
+    return keys.reduce((node, key) => node[key], this.#tree)
+  }
+}
+
+function range(from, to) {
+  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
+}
+
+const global = new Configuration({
+  attachmentTagName: "action-text-attachment",
+  attachmentContentTypeNamespace: "actiontext",
+  authenticatedUploads: false,
+  extensions: []
+});
+
+const presets = new Configuration({
+  default: {
+    attachments: true,
+    markdown: true,
+    multiLine: true,
+    permittedAttachmentTypes: null,
+    richText: true,
+    toolbar: {
+      upload: "both"
+    },
+    headings: [ "h2", "h3", "h4" ],
+    highlight: {
+      buttons: {
+        color: range(1, 9).map(n => `var(--highlight-${n})`),
+        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+      },
+      permit: {
+        color: [],
+        "background-color": []
+      }
+    }
+  }
+});
+
+var Lexxy = {
+  global,
+  presets,
+  configure({ global: newGlobal, ...newPresets }) {
+    if (newGlobal) {
+      global.merge(newGlobal);
+    }
+    presets.merge(newPresets);
+  }
+};
+
+// An attachment's `url` ends up as an <img src> (action_text_attachment_node
+// reads it into `this.src`, which is assigned to img.src). DOMPurify already
+// permits a data: URI on img[src] — img is in its DATA_URI_TAGS — but it has no
+// way to know that a custom element's `url` feeds the same sink, so it applies
+// the plain URI check and drops it.
+//
+// Until 3.3.2 that never came up: attributes admitted by a *functional* ADD_ATTR
+// skipped URI validation entirely (GHSA-cjmm-f4jc-qw8r), which is how data:
+// URLs worked here — and, less happily, how `url="javascript:…"` survived too.
+// The fix restored validation for both.
+//
+// So `url` is marked URI-safe, which hands the decision to this hook. The hook
+// only ever removes an attribute — it never force-keeps one — so scoping stays
+// with the ADD_ATTR predicate, and a `url` on a tag that never declared it is
+// dropped as it always was.
+//
+// The data: exception is scoped to the attachment element, not to the attribute
+// name. ADD_URI_SAFE_ATTR is attribute-name-wide: it takes `url` out of
+// DOMPurify's URI checking on every tag, not just ours. Extensions may declare
+// arbitrary attributes on arbitrary tags — home/docs/extensions.md's own worked
+// example is an <iframe> — so an extension declaring `url` would otherwise
+// inherit an exception granted because *an attachment's* url becomes an img src.
+// Nothing about a third party's element supports that, and `data:text/html` in a
+// navigational sink is script execution. Everything else gets the standard
+// policy, which is what it would have had if we had never touched `url`.
+//
+// That argument is about an attribute feeding a URL sink, not about
+// ADD_URI_SAFE_ATTR as such. The inert text attributes beside `url` in that list
+// — `caption`, `filename` — keep the attribute-name-wide exemption, and need it:
+// ordinary prose like "Q4: results" is not a URI any regex here would accept.
+const URI_BEARING_ATTACHMENT_ATTRIBUTES = [ "url" ];
+
+// DOMPurify's own IS_ALLOWED_URI, reproduced rather than narrowed, so `url` on a
+// non-attachment tag is treated exactly as DOMPurify would have treated it.
+const ALLOWED_URI = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.:-]|$))/i;
+
+// eslint-disable-next-line no-control-regex -- mirrors DOMPurify's own ATTR_WHITESPACE
+const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+
+// Tested against the value as given, never the whitespace-stripped copy, so a
+// scheme smuggled at a nonzero offset is refused. DOMPurify draws the same line:
+// its data: allowance is a prefix test on the un-stripped value, which is why
+// this is a second step rather than one more scheme in ALLOWED_URI.
+//
+// One deliberate difference from DOMPurify's img[src] handling remains, stated
+// because the earlier claim of matching it "exactly" was not true: DOMPurify
+// tests for a literal lowercase `data:` and this is case-insensitive, so `DATA:`
+// passes here too. That matches how browsers resolve schemes, which is what
+// actually decides whether the URL loads.
+const ATTACHMENT_DATA_URI = /^data:/i;
+
+function isAttachmentTag(tag) {
+  return tag === Lexxy.global.get("attachmentTagName")
+}
+
+function attachmentUriFilterHook(currentNode, hookEvent) {
+  if (!URI_BEARING_ATTACHMENT_ATTRIBUTES.includes(hookEvent.attrName)) return
+
+  // DOMPurify keeps an empty value — its chain ends `else if (value) { return
+  // false } else ;` — while every alternation here needs at least one character.
+  if (!hookEvent.attrValue) return
+
+  const value = String(hookEvent.attrValue);
+
+  if (ALLOWED_URI.test(value.replace(ATTR_WHITESPACE, ""))) return
+  if (isAttachmentTag(currentNode?.nodeName?.toLowerCase()) && ATTACHMENT_DATA_URI.test(value)) return
+
+  hookEvent.keepAttr = false;
+}
+
+// Lexxy's own DOMPurify instance, deliberately not the shared default export.
+//
+// dompurify's default export is a singleton, and both its config and its hooks
+// are global to every consumer in the bundle. That makes configuring it from an
+// editor's connectedCallback actively dangerous for the host app: DOMPurify
+// treats a persistent config as final, so once setConfig() has run, every
+// later `sanitize(html, config)` anywhere in the app silently ignores its own
+// config argument. An app sanitizing untrusted HTML with, say,
+// `{ ALLOW_DATA_ATTR: false }` would keep passing that option and stop getting
+// it the moment a Lexxy editor connected — with no error and no visible change
+// at the call site.
+//
+// Calling the default export with a window returns a fresh, independent
+// instance. This one carries the hooks and config below; nothing we do here can
+// reach the app's instance, and nothing it does can reach ours.
+//
+// Under Trusted Types, every DOMPurify instance tries to create a policy named
+// `dompurify` on its first sanitize, and TT rejects a duplicate name — so the
+// second instance on the page gets none. That matters, and not because it throws:
+// DOMPurify hands its input to DOMParser.parseFromString, which is itself a TT
+// sink, but `_initDocument` swallows that throw and the innerHTML throw from its
+// createDocument fallback, and `sanitize` then returns "" for the body it never
+// got. An unsigned instance silently drops all content, with nothing in the host's
+// error tracker to say why — and which sanitizer goes silent depends on which one
+// ran first.
+//
+// So we create our own, under our own name, and hand it to DOMPurify rather than
+// letting it try. Lazily, because resolving it at import would fire a CSP
+// violation report on every page load of an app that imports Lexxy and never
+// renders an editor, and at most once, because TT throws on a duplicate name.
+// Guarded too, because creating a policy the CSP hasn't allowlisted throws: if
+// that happens we're back to no policy, which is exactly where this stood before.
+// An app enforcing `require-trusted-types-for 'script'` should add `lexxy` to its
+// `trusted-types` directive.
+//
+// What this does NOT do is make Lexxy work under enforced Trusted Types. It
+// stops *our* sanitizer from taking the host's policy name and breaking the
+// host's; it does nothing about Lexxy's own unwrapped sinks, and there are
+// several. `parseHtml` in helpers/html_helper.js hands a plain string to
+// DOMParser.parseFromString on the initial-value path, so the editor throws
+// before it finishes connecting — verified in Chromium under
+// `require-trusted-types-for 'script'`, with `lexxy` allowlisted and without.
+// `createElement` in the same file is a second sink in it, writing its `content`
+// argument through innerHTML for the two callers that pass one — the wrapped-table
+// figure and the table tools' count. `highlightElement` in
+// helpers/code_highlighting_helper.js writes Prism's output the same way, and both
+// it and highlightCode are exported from src/index.js — so that one throws for a
+// host app calling Lexxy's highlighting API directly, outside any editor. The
+// `insertAdjacentHTML` in nodes/custom_action_text_attachment_node.js and the
+// `innerHTML` writes across elements/ — the toolbar, the dropdowns, the node
+// delete button — are in the same position. Making the editor usable under TT is a
+// separate piece of work; this is a prerequisite for it, not the whole of it.
+let trustedTypesPolicyResolved = false;
+let resolvedTrustedTypesPolicy = null;
+
+function trustedTypesPolicy() {
+  if (!trustedTypesPolicyResolved) {
+    resolvedTrustedTypesPolicy = createTrustedTypesPolicy();
+    trustedTypesPolicyResolved = true;
+  }
+
+  return resolvedTrustedTypesPolicy
+}
+
+function createTrustedTypesPolicy() {
+  // Feature-detected below, so browsers without Trusted Types simply get no
+  // policy — the same path as a CSP that doesn't allowlist ours.
+  // eslint-disable-next-line compat/compat
+  const trustedTypes = window.trustedTypes;
+
+  if (typeof trustedTypes?.createPolicy !== "function") return null
+
+  try {
+    return trustedTypes.createPolicy("lexxy", { createHTML: (html) => html, createScriptURL: (url) => url })
+  } catch {
+    // Warned rather than swallowed, matching what DOMPurify does when its own
+    // policy is refused. The fallback is a silent loss of Trusted Types coverage
+    // otherwise, and the CSP violation report alone doesn't name us.
+    console.warn("TrustedTypes policy lexxy could not be created.");
+    return null
+  }
+}
+
+const DOMPurify = createDOMPurify(window);
+
+// alt is inert on every element it can appear on, so it sits in the blanket
+// list. srcset is deliberately absent — it carries URLs, so it belongs to a
+// consumer that declares it.
+const ALLOWED_HTML_ATTRIBUTES = [ "alt", "class", "contenteditable", "href", "src", "style", "title" ];
+
+// width/height are scoped to img rather than allowlisted globally, because
+// ALLOWED_ATTR is not per-tag: putting them there would also permit
+// `<table width="100000">` and `<td height="500">` in attachment content, which
+// is layout the editor previously stripped. An image needs them to hold its
+// place while it loads; nothing else here does.
+const DEFAULT_TAG_ATTRIBUTES = { img: [ "width", "height" ] };
 
 const ALLOWED_STYLE_PROPERTIES = [ "color", "background-color" ];
 
@@ -66,15 +309,17 @@ function styleFilterHook(_currentNode, hookEvent) {
 }
 
 DOMPurify.addHook("uponSanitizeAttribute", styleFilterHook);
+DOMPurify.addHook("uponSanitizeAttribute", attachmentUriFilterHook);
 
 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.
+// extension's allowedElements declares. On dompurify 3.4.13 FORBID_ATTR already
+// carries that on its own: _isValidAttribute opens with it, ahead of the
+// functional ADD_ATTR Lexxy builds from the public allowedElements API. So this
+// hook is defence in depth rather than the barrier, and it is kept because it
+// holds without reference to the config — the prohibition is a class-level one,
+// and a FORBID_ATTR entry lives or dies with whatever rebuilds the config.
 function stimulusAttributeFilterHook(_currentNode, hookEvent) {
   if (FORBIDDEN_STIMULUS_ATTRIBUTES.includes(hookEvent.attrName)) {
     hookEvent.keepAttr = false;
@@ -89,29 +334,70 @@ DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   }
 });
 
-function buildConfig(allowedElements ) {
-  const tagAttributes = {};
+// Called with no allowedElements for a sanitizer that has no allowlist to apply,
+// which is not the same thing as an empty one — see EditorSanitizer's fallback.
+function buildConfig(allowedElements = null) {
+  const config = {
+    ADD_URI_SAFE_ATTR: [ "caption", "filename", ...URI_BEARING_ATTACHMENT_ATTRIBUTES ],
+    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" ]
+  };
+
+  // Left out rather than emptied when there is no allowlist, so DOMPurify's own
+  // default tag and attribute policy stands. `ALLOWED_TAGS: []` would not be a
+  // default, it would be a refusal: it strips every tag. An editor that declares
+  // an empty allowlist still gets that refusal, because it asked for it.
+  if (allowedElements) Object.assign(config, allowlistFor(allowedElements));
 
+  // Always assigned, including when we have no policy — `null` is what
+  // trustedTypesPolicy() returns then, and `TRUSTED_TYPES_POLICY: null` is
+  // DOMPurify's documented per-call opt-out: sign nothing, create nothing.
+  //
+  // Leaving the key out is a different thing entirely, and the wrong one. With no
+  // key DOMPurify falls through to _getDefaultTrustedTypesPolicy() and asks the
+  // browser for `dompurify` — the very name this exists to stop competing for — so
+  // an omitted key would disarm the sanitizer of a host shipping
+  // `trusted-types dompurify` on the one path where we couldn't get our own.
+  // Present-and-`undefined` lands in that same fallthrough, so it is not a
+  // substitute for `null` either.
+  config.TRUSTED_TYPES_POLICY = trustedTypesPolicy();
+
+  return config
+}
+
+function allowlistFor(allowedElements) {
+  // Null prototype, so a declared tag can never read through to an
+  // Object.prototype key: `tagAttributes["constructor"]` would answer with a
+  // function, and ADD_ATTR would call .includes on it.
+  const tagAttributes = Object.create(null);
+
+  // Lowercased, because DOMPurify lowercases ALLOWED_TAGS and calls ADD_ATTR
+  // with the lowercased tag and attribute names. Keeping the caller's casing
+  // makes allowedElements silently partial: `[ "IMG" ]` allows the element but
+  // drops the width/height below, and `[ { tag: "img", attributes: [ "GID" ] } ]`
+  // drops the attribute it declares.
   for (const element of allowedElements) {
-    if (typeof element === "string") {
-      tagAttributes[element] ||= [];
-    } else {
-      tagAttributes[element.tag] ||= [];
-      tagAttributes[element.tag].push(...element.attributes);
-    }
+    const tag = String(element.tag ?? element).toLowerCase();
+    const attributes = (element.attributes ?? []).map(attribute => attribute.toLowerCase());
+
+    tagAttributes[tag] ||= [];
+    tagAttributes[tag].push(...attributes);
+  }
+
+  // Only for tags the caller already permits — this widens what an allowed
+  // element may carry, never which elements are allowed.
+  for (const [ tag, attributes ] of Object.entries(DEFAULT_TAG_ATTRIBUTES)) {
+    if (tagAttributes[tag]) tagAttributes[tag].push(...attributes);
   }
 
   return {
     ALLOWED_TAGS: Object.keys(tagAttributes),
     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)
-    // 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" ]
+    ADD_ATTR: (attribute, tag) => tagAttributes[tag]?.includes(attribute)
   }
 }
 
@@ -1377,91 +1663,111 @@ class LinkDropdown extends ToolbarDropdown {
   }
 }
 
-function deepMerge(target, source) {
-  const result = { ...target, ...source };
-  for (const [ key, value ] of Object.entries(source)) {
-    if (arePlainHashes(target[key], value)) {
-      result[key] = deepMerge(target[key], value);
-    }
-  }
-
-  return result
-}
+// An editor's sanitizer: the allowlist it was registered with, applied to a
+// string.
+//
+// The allowlist is per editor, and passed to each sanitize() call. Neither of
+// those is incidental. This used to be a module-level config installed with
+// DOMPurify.setConfig() on the shared singleton, which had two distinct
+// consequences:
+//
+// 1. A persistent config is final — DOMPurify ignores the per-call config once
+//    one is set — so it silently disarmed the sanitizing of any host app that
+//    also imports dompurify. See config/dom_purify for why we now own our
+//    instance; keeping the config per-call means there is no global sanitizer
+//    state left even on that instance.
+//
+// 2. One config for the whole module meant the last editor to connect decided
+//    how every other editor on the page sanitized. That is not cosmetic: an
+//    editor's `value` is sanitized on read, so a rich editor sharing a page with
+//    a plain one would silently drop its own headings, lists and links from the
+//    value it submits.
+//
+// Sanitizers are keyed by the Lexical editor, which is the identity both call
+// sites have: the element registers with it and keeps the result as
+// `this.sanitizer`, while nodes only receive it as createDOM()'s second argument
+// and resolve their sanitizer with for().
+class EditorSanitizer {
+  static #instances = new WeakMap()
+
+  // Only reached for an editor that never registered, which is a supported case:
+  // CustomActionTextAttachmentNode is exported from src/index.js, so it can be
+  // registered in a Lexical editor Lexxy did not build.
+  //
+  // Fixed, and never reassigned. Pointing it at whichever sanitizer registered
+  // most recently would make an unregistered consumer's allowlist depend on
+  // which Lexxy editor happened to initialise last — the last-editor-wins bug
+  // this class exists to remove, reintroduced on the one path that has no editor
+  // to key on, and unobservable from the consumer's own code.
+  //
+  // It declares no allowlist, so DOMPurify's own default policy applies. An
+  // empty allowlist would be deterministic too and strips every tag, which
+  // silently drops markup a standalone consumer used to keep. It holds no
+  // editor either, so nothing here pins a disconnected editor's DOM.
+  //
+  // A consumer wanting its own allowlist registers for it: register() needs only
+  // the Lexical editor and is reachable as EditorSanitizer from src/index.js.
+  //
+  // Built on first use rather than as a static field initializer, which would run
+  // buildConfig at import: src/index.js exports this class, so that would create
+  // the Trusted Types policy — and, unallowlisted, report a CSP violation — on
+  // every page load of an app that never renders an editor.
+  static #fallback
 
-function arePlainHashes(...values) {
-  return values.every(value => value && value.constructor == Object)
-}
+  static #fallbackSanitizer() {
+    return this.#fallback ||= new EditorSanitizer()
+  }
 
-class Configuration {
-  #tree = {}
+  static register(editor, allowedElements = []) {
+    const sanitizer = new EditorSanitizer(this.#allowedElementsFor(editor, allowedElements));
+    this.#instances.set(editor, sanitizer);
 
-  constructor(...configs) {
-    this.merge(...configs);
+    return sanitizer
   }
 
-  merge(...configs) {
-    return this.#tree = configs.reduce(deepMerge, this.#tree)
+  static for(editor) {
+    return this.#instances.get(editor) ?? this.#fallbackSanitizer()
   }
 
-  get(path) {
-    const keys = path.split(".");
-    return keys.reduce((node, key) => node[key], this.#tree)
+  // An editor can import every tag it can convert from HTML, plus whatever its
+  // extensions declare. Lexical registers the conversions while building the
+  // editor, so they are already in place when $initialEditorState registers us.
+  static #allowedElementsFor(editor, allowedElements) {
+    return this.#importableTags(editor).concat(allowedElements)
   }
-}
 
-function range(from, to) {
-  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
-}
+  static #importableTags(editor) {
+    const tags = Array.from(editor._htmlConversions.keys());
+    return tags.filter(tag => !tag.startsWith("#"))
+  }
 
-const global = new Configuration({
-  attachmentTagName: "action-text-attachment",
-  attachmentContentTypeNamespace: "actiontext",
-  authenticatedUploads: false,
-  extensions: []
-});
+  #config
 
-const presets = new Configuration({
-  default: {
-    attachments: true,
-    markdown: true,
-    multiLine: true,
-    permittedAttachmentTypes: null,
-    richText: true,
-    toolbar: {
-      upload: "both"
-    },
-    headings: [ "h2", "h3", "h4" ],
-    highlight: {
-      buttons: {
-        color: range(1, 9).map(n => `var(--highlight-${n})`),
-        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
-      },
-      permit: {
-        color: [],
-        "background-color": []
-      }
-    }
+  constructor(allowedElements = null) {
+    this.#config = buildConfig(allowedElements);
   }
-});
 
-var Lexxy = {
-  global,
-  presets,
-  configure({ global: newGlobal, ...newPresets }) {
-    if (newGlobal) {
-      global.merge(newGlobal);
+  // safeForXml opts into DOMPurify's mXSS-safe mode, for a caller re-inflating
+  // stored content. It is off by default, and the reason is not that the default
+  // hop is trustworthy — the value an editor reads back carries the attacker's
+  // stored `content` verbatim. The reason is that strictness there is destructive:
+  // SAFE_FOR_XML drops any attribute whose value could close a comment, a
+  // serialized `content` full of Rails view annotations is exactly that, and
+  // CustomActionTextAttachmentNode.importDOM returns null for an attachment with no
+  // `content` — so the attachment vanishes on the next edit. Verified: strict on the
+  // value hop leaves `<action-text-attachment sgid content-type>` and re-editing that
+  // renders nothing.
+  //
+  // The strict config is this instance's own, spread rather than rebuilt, so the
+  // per-editor allowlist and everything else buildConfig put there — the Trusted
+  // Types policy, ADD_URI_SAFE_ATTR — survive the flip.
+  sanitize(html, { safeForXml = false } = {}) {
+    if (safeForXml) {
+      return DOMPurify.sanitize(html, { ...this.#config, SAFE_FOR_XML: true })
     }
-    presets.merge(newPresets);
-  }
-};
-
-function setSanitizerConfig(allowedTags) {
-  DOMPurify.clearConfig();
-  DOMPurify.setConfig(buildConfig(allowedTags));
-}
 
-function sanitize(html) {
-  return DOMPurify.sanitize(html)
+    return DOMPurify.sanitize(html, this.#config)
+  }
 }
 
 function bytesToHumanSize(bytes) {
@@ -1560,11 +1866,26 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     this.plainText = plainText ?? extractPlainTextFromHtml(innerHtml);
   }
 
-  createDOM() {
+  createDOM(_config, editor) {
     const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true, draggable: true });
     figure.dataset.lexicalNodeKey = this.__key;
 
-    figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
+    // Resolved from the editor so this content is sanitized with its own
+    // allowlist rather than whichever editor connected most recently.
+    //
+    // this.innerHtml is untrusted stored content being re-inflated into the editor,
+    // so it goes through DOMPurify's mXSS-safe mode. Strictness is free here because
+    // of where the `content` attribute that has to survive is sanitized, which is not
+    // this hop: it is produced by exportDOM and by the server-side pass in
+    // lib/lexxy/rich_text_area_tag.rb, and it is only ever sanitized on the lax hop
+    // where an editor reads its own value back.
+    //
+    // The decoded inner markup can carry a `content` attribute of its own — nested
+    // attachment markup does, and the attribute is allowlisted on the attachment tag
+    // in extensions/attachments_extension.js — and mXSS-safe mode drops it. That loss
+    // is cosmetic: it is a nested attachment's rendering inside this one, not the
+    // attribute anything re-imports from.
+    figure.insertAdjacentHTML("beforeend", EditorSanitizer.for(editor).sanitize(this.innerHtml, { safeForXml: true }));
 
     const deleteButton = createElement("lexxy-node-delete-button");
     figure.appendChild(deleteButton);
@@ -9373,7 +9694,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #readSanitizedEditorValue() {
     return this.editor?.read(() => {
-      return sanitize($generateHtmlFromNodes(this.editor, null))
+      return this.sanitizer.sanitize($generateHtmlFromNodes(this.editor, null))
     }) ?? null
   }
 
@@ -9760,16 +10081,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #configureSanitizer(editor) {
-    setSanitizerConfig(this.#getAllowedElements(editor));
-  }
-
-  #getAllowedElements(editor) {
-    return this.#getImportableTags(editor).concat(this.extensions.allowedElements)
-  }
-
-  #getImportableTags(editor) {
-    const tags = Array.from(editor._htmlConversions.keys());
-    return tags.filter(tag => !tag.startsWith("#"))
+    this.sanitizer = EditorSanitizer.register(editor, this.extensions.allowedElements);
   }
 
   #dispatchAttributesChange() {
@@ -11714,4 +12026,4 @@ const configure = Lexxy.configure;
 // Pushing elements definition to after the current call stack to allow global configuration to take place first
 setTimeout(defineElements, 0);
 
-export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, REWRITE_HISTORY_COMMAND, configure };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, EditorSanitizer, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, REWRITE_HISTORY_COMMAND, configure };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.30",
+  "version": "0.9.31-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -51,6 +51,7 @@
     "test:browser:webkit": "npx playwright test --config test/browser/playwright.config.js --project=webkit",
     "test:browser:headed": "npx playwright test --config test/browser/playwright.config.js --headed",
     "test:browser:debug": "npx playwright test --config test/browser/playwright.config.js --debug",
+    "prepare": "rollup -c rollup.config.npm.mjs",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish",
     "release:alpha": "yarn build:npm && yarn publish --tag alpha"
@@ -69,7 +70,7 @@
     "@lexical/selection": "^0.44.0",
     "@lexical/table": "^0.44.0",
     "@lexical/utils": "^0.44.0",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.4.13",
     "lexical": "^0.44.0",
     "marked": "^16.4.1",
     "prismjs": "^1.30.0"