@37signals/lexxy 0.9.9-beta → 0.9.9-beta-preview1

package/dist/lexxy.esm.js

@@ -1464,6 +1464,35 @@ function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
     && previousNode instanceof CustomActionTextAttachmentNode
 }
 
+// Shared, strictly-contained element used to attach ephemeral nodes when we
+// need to read computed styles (e.g. canonicalizing style values, resolving
+// CSS custom properties). The container is created once and attached to
+// `document.body` once; subsequent child mutations happen *inside* the
+// contained subtree so they do not invalidate style on the rest of the page.
+//
+// Without this, `document.body.appendChild(...)` / `element.remove()` calls
+// forced the browser to re-evaluate every ancestor-dependent selector (`:has()`,
+// descendant combinators, universal sibling rules) across the document on each
+// invocation — a 13,000+ element style recalc per call on a typical Basecamp
+// page.
+
+let resolverRoot = null;
+
+function styleResolverRoot() {
+  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
+
+  resolverRoot = document.createElement("div");
+  resolverRoot.setAttribute("aria-hidden", "true");
+  resolverRoot.setAttribute("data-lexxy-style-resolver", "");
+  // `contain: strict` (size, layout, paint, style) isolates everything.
+  // The root itself paints nothing (visibility hidden), has zero
+  // geometric impact (position fixed, intrinsic size via contain), and
+  // never leaks style invalidation to its ancestors.
+  resolverRoot.style.cssText = "contain: strict; position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none; width: 0; height: 0;";
+  document.body.appendChild(resolverRoot);
+  return resolverRoot
+}
+
 function isSelectionHighlighted(selection) {
   if (!$isRangeSelection(selection)) return false
 
@@ -1544,10 +1573,11 @@ class StyleCanonicalizer {
   }
 }
 
-// Separates DOM writes from layout reads to avoid forced reflows. All resolver
-// elements are built inside a fragment, attached once, then read in a single pass.
-// Reading `getComputedStyle` after a write forces the browser to recompute layout,
-// so interleaving writes and reads inside a loop turns one reflow into N.
+// Separates DOM writes from layout reads to avoid forced reflows, and attaches
+// resolver elements to a strictly-contained root (outside the normal document
+// flow) so neither the attach nor the detach invalidate styles on the rest of
+// the page. Without containment, appending to `document.body` triggered a
+// page-wide style recalc on every canonicalization pass.
 function computeStyleValues(property, values) {
   const fragment = document.createDocumentFragment();
 
@@ -1557,7 +1587,7 @@ function computeStyleValues(property, values) {
     return element
   });
 
-  document.body.appendChild(fragment);
+  styleResolverRoot().appendChild(fragment);
 
   const computed = elements.map(element =>
     window.getComputedStyle(element).getPropertyValue(property)
@@ -6644,6 +6674,7 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
+  #initialValueLoaded = false
   #validationTextArea = document.createElement("textarea")
   #editorInitializedRafId = null
   #listeners = new ListenerBin()
@@ -6821,9 +6852,19 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   focus() {
+    // `editor.focus()` commits a reconciler update to position the cursor.
+    // Skip if the contenteditable already owns focus — the update would be a
+    // no-op but still triggers a full style/layout pass on pages with large
+    // DOMs.
+    if (this.#isContentFocused) return
+
     this.editor.focus(() => this.#onFocus());
   }
 
+  get #isContentFocused() {
+    return !!this.editorContentElement && this.editorContentElement.contains(document.activeElement)
+  }
+
   get value() {
     if (!this.cachedValue) {
       this.editor?.getEditorState().read(() => {
@@ -6835,6 +6876,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   set value(html) {
+    const wasEmpty = !this.#initialValueLoaded;
+
     this.editor.update(() => {
       $addUpdateTag(SKIP_DOM_SELECTION_TAG);
       const root = $getRoot();
@@ -6844,11 +6887,17 @@ class LexicalEditorElement extends HTMLElement {
 
       this.#toggleEmptyStatus();
 
-      // The first time you set the value, when the editor is empty, it seems to leave Lexical
-      // in an inconsistent state until, at least, you focus. You can type but adding attachments
-      // fails because no root node detected. This is a workaround to deal with the issue.
-      requestAnimationFrame(() => this.editor?.update(() => { }));
+      // The first time you set the value on an empty editor, Lexical can be
+      // left in an inconsistent state until the next update (adding attachments
+      // fails because no root node is detected). A no-op update works around
+      // it. Only fire on the first load — subsequent set value calls don't hit
+      // the inconsistent state and the extra reconciler cycle is pure overhead.
+      if (wasEmpty) {
+        requestAnimationFrame(() => this.editor?.update(() => { }));
+      }
     });
+
+    this.#initialValueLoaded = true;
   }
 
   #parseHtmlIntoLexicalNodes(html) {
@@ -7282,7 +7331,7 @@ class LexicalEditorElement extends HTMLElement {
       return { element, name: cssValue }
     });
 
-    this.appendChild(container);
+    styleResolverRoot().appendChild(container);
 
     const resolved = resolvers.map(({ element, name }) => ({
       name,

package/dist/stylesheets/lexxy-editor.css

@@ -399,6 +399,13 @@
   min-block-size: var(--lexxy-editor-rows);
   outline: 0;
   padding: var(--lexxy-editor-padding);
+
+  /* Isolate the contenteditable root's layout and style. Lexical's reconciler
+     commits mutations inside this element (nodes appended, text inserted,
+     class flipped) on every update; containment keeps those mutations from
+     invalidating ancestor-dependent selectors and sibling layout elsewhere
+     in the editor. */
+  contain: layout style;
 }
 
 :where(.lexxy-editor--drag-over) {

package/package.json

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