lexxy 0.9.9.beta → 0.9.9.beta.preview1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14f60aa212296a9c387271eca7386c9cb5527beadf1641cf8cf5bd9bc5896da9
-  data.tar.gz: e4274b1696e483831690857f86d80ff3495d4be2d88c383fbf87b28fb286c190
+  metadata.gz: be0c22bb945fd56429ced73c583c28bcd0e6caf5ae885d666587ff329e1785cc
+  data.tar.gz: ab43a2841e18c6a0b44b788197f6f22f7653584f43214216ba10f875fda46e87
 SHA512:
-  metadata.gz: eed04f532148665127494199324a8fb005b3602f4695a583f62730dc0dc546a860b1f647a8abb03810f268f085c8257629ec2278ff149923c8f6c8ba8a44d687
-  data.tar.gz: 405ebe5f4dfe0e0c62f2daf4370cc2154f90bf4d4fdf08df8d913debc741e87029c2192b3169dc1b380c27745120e9366be7ce505107f6a0c8d67eaa4b0c1156
+  metadata.gz: e719a3e55ed0758b455c9ec191aa669b7f467eb7a55479f34d5462cd743d3391e62d93e74f2177074671a1bee82201db96737bd282b9bb675cb29bf99badb8b8
+  data.tar.gz: '04495b4335b01e4992b475977566dd7b3065991e3e8584b717306dcd0701754a1242faf0a92261fb6ee2735f18f6e1058e92cb5947feec44ef7675f6d842508a'

data/app/assets/javascript/lexxy.js

@@ -7847,6 +7847,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 (!wr(selection)) return false
 
@@ -7927,10 +7956,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();
 
@@ -7940,7 +7970,7 @@ function computeStyleValues(property, values) {
     return element
   });
 
-  document.body.appendChild(fragment);
+  styleResolverRoot().appendChild(fragment);
 
   const computed = elements.map(element =>
     window.getComputedStyle(element).getPropertyValue(property)
@@ -13099,6 +13129,7 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
+  #initialValueLoaded = false
   #validationTextArea = document.createElement("textarea")
   #editorInitializedRafId = null
   #listeners = new ListenerBin()
@@ -13276,9 +13307,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(() => {
@@ -13290,6 +13331,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   set value(html) {
+    const wasEmpty = !this.#initialValueLoaded;
+
     this.editor.update(() => {
       gs(Vn);
       const root = zo();
@@ -13299,11 +13342,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) {
@@ -13737,7 +13786,7 @@ class LexicalEditorElement extends HTMLElement {
       return { element, name: cssValue }
     });
 
-    this.appendChild(container);
+    styleResolverRoot().appendChild(container);
 
     const resolved = resolvers.map(({ element, name }) => ({
       name,