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

package/dist/lexxy.esm.js

@@ -1,12 +1,12 @@
-import { createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
+import { isActiveAndVisible, createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode, $ensureForwardRangeSelection } from '@lexical/selection';
 import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, ParagraphNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, $getChildCaretAtIndex, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
-import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching } from '@lexical/utils';
+import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -209,10 +209,6 @@ class NextElementFinder {
   }
 }
 
-function isActiveAndVisible(element) {
-  return element && !element.disabled && element.checkVisibility()
-}
-
 var ToolbarIcons = {
   "bold":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
@@ -486,7 +482,8 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #handleEditorFocus = () => {
-    this.#focusableItems[0].tabIndex = 0;
+    const firstVisible = this.#focusableItems.find(isActiveAndVisible);
+    if (firstVisible) firstVisible.tabIndex = 0;
   }
 
   #handleEditorBlur = () => {
@@ -579,12 +576,6 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #toolbarIsOverflowing() {
-    // Safari can report inconsistent clientWidth values on more than 100% window zoom level,
-    // that was affecting the toolbar overflow calculation. We're adding +1 to get around this issue.
-    return (this.scrollWidth - this.#overflow.clientWidth) > this.clientWidth + 1
-  }
-
   #refreshToolbarOverflow = () => {
     this.#resetToolbarOverflow();
     this.#compactMenu();
@@ -597,29 +588,46 @@ class LexicalToolbarElement extends HTMLElement {
     this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
   }
 
+  // Separates layout reads from DOM writes to avoid forced reflows during init.
+  // Measures every button's right edge in a single read pass, figures out which
+  // buttons overflow using math, and then moves them in a single write pass.
+  // The previous implementation interleaved `scrollWidth`/`clientWidth` reads with
+  // `prepend()` writes inside a loop, forcing one full browser reflow per button.
   #compactMenu() {
-    const buttons = this.#buttons.reverse();
-    let movedToOverflow = false;
+    const buttons = this.#buttons;
+    if (buttons.length === 0) return
 
-    for (const button of buttons) {
-      if (this.#toolbarIsOverflowing()) {
-        this.#overflowMenu.prepend(button);
-        movedToOverflow = true;
-      } else {
-        if (movedToOverflow) this.#overflowMenu.prepend(button);
+    const availableWidth = this.clientWidth + 1; // +1 for Safari zoom rounding
+    const buttonRightEdges = buttons.map(button => button.offsetLeft + button.offsetWidth);
+
+    let firstOverflowing = -1;
+    for (let i = 0; i < buttons.length; i++) {
+      if (buttonRightEdges[i] > availableWidth) {
+        firstOverflowing = i;
         break
       }
     }
+
+    if (firstOverflowing === -1) return
+
+    // Move one extra button to reserve space for the overflow control, which is
+    // `display: none` until we show it — matching the previous implementation's
+    // "move one more after it stops overflowing" behaviour.
+    const overflowIndex = Math.max(0, firstOverflowing - 1);
+    const overflowButtons = buttons.slice(overflowIndex).reverse();
+    for (const button of overflowButtons) {
+      this.#overflowMenu.prepend(button);
+    }
   }
 
   #resetToolbarOverflow() {
     const items = Array.from(this.#overflowMenu.children);
     items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
 
-    items.forEach((item) => {
+    for (const item of items) {
       const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflow;
       this.insertBefore(item, nextItem);
-    });
+    }
   }
 
   #itemPosition(item) {
@@ -1456,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
 
@@ -1525,26 +1562,39 @@ class StyleCanonicalizer {
 
   #resolveCannonicalValue(value) {
     let index = this.#computedAllowedValues.indexOf(value);
-    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
+    if (index === -1) {
+      index = this.#computedAllowedValues.indexOf(computeStyleValues(this._property, [ value ])[0]);
+    }
     return index === -1 ? null : this._allowedValues[index]
   }
 
   get #computedAllowedValues() {
-    return this._computedAllowedValues ||= this._allowedValues.map(
-      value => getComputedStyleForProperty(this._property, value)
-    )
+    return this._computedAllowedValues ||= computeStyleValues(this._property, this._allowedValues)
   }
 }
 
-function getComputedStyleForProperty(property, value) {
-  const style = `${property}: ${value};`;
+// 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();
+
+  const elements = values.map(value => {
+    const element = createElement("span", { style: `display: none; ${property}: ${value};` });
+    fragment.appendChild(element);
+    return element
+  });
+
+  styleResolverRoot().appendChild(fragment);
 
-  // the element has to be attached to the DOM have computed styles
-  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
-  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
-  element.remove();
+  const computed = elements.map(element =>
+    window.getComputedStyle(element).getPropertyValue(property)
+  );
 
-  return computedStyle
+  elements.forEach(element => element.remove());
+  return computed
 }
 
 class LexxyExtension {
@@ -2162,7 +2212,9 @@ class CommandDispatcher {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
 
-      if (selection.isCollapsed()) {
+      const anchorNode = selection.anchor.getNode();
+
+      if (selection.isCollapsed() && !$getNearestNodeOfType(anchorNode, LinkNode)) {
         const autoLinkNode = $createAutoLinkNode(url);
         const textNode = $createTextNode(url);
         autoLinkNode.append(textNode);
@@ -6478,6 +6530,10 @@ class FormatEscapeExtension extends LexxyExtension {
     return this.editorElement.supportsRichText
   }
 
+  get allowedElements() {
+    return [ { tag: "li", attributes: [ "value" ] } ]
+  }
+
   get lexicalExtension() {
     return defineExtension({
       name: "lexxy/format-escape",
@@ -6551,6 +6607,65 @@ function $handleArrowDownInCodeBlock(event) {
   return false
 }
 
+class LinkOpenerExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/link-opener",
+      register: () => {
+        return mergeRegister(
+          registerEventListener(window, "keydown", this.#update.bind(this)),
+          registerEventListener(window, "keyup", this.#update.bind(this)),
+          registerEventListener(window, "blur", this.#disable.bind(this)),
+          registerEventListener(window, "focus", this.#refresh.bind(this))
+        )
+      }
+    })
+  }
+
+  #update(event) {
+    if (this.#isModified(event)) {
+      this.#enable();
+    } else {
+      this.#disable();
+    }
+  }
+
+  #refresh() {
+    // Chrome dispatches events without modifier keys *for a while* after changing tabs
+    setTimeout(() => {
+      window.addEventListener("mousemove", this.#update.bind(this), { once: true });
+    }, 200);
+  }
+
+  #isModified(event) {
+    return IS_APPLE ? event.metaKey : event.ctrlKey
+  }
+
+  #enable() {
+    for (const anchor of this.#anchors) {
+      anchor.setAttribute("contenteditable", "false");
+      anchor.setAttribute("target", "_blank");
+      anchor.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+
+  #disable() {
+    for (const anchor of this.#anchors) {
+      anchor.removeAttribute("contenteditable");
+      anchor.removeAttribute("target");
+      anchor.removeAttribute("rel");
+    }
+  }
+
+  get #anchors() {
+    return this.editorElement.editorContentElement?.querySelectorAll("a") ?? []
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -6559,6 +6674,7 @@ class LexicalEditorElement extends HTMLElement {
   static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
+  #initialValueLoaded = false
   #validationTextArea = document.createElement("textarea")
   #editorInitializedRafId = null
   #listeners = new ListenerBin()
@@ -6655,7 +6771,8 @@ class LexicalEditorElement extends HTMLElement {
       TrixContentExtension,
       TablesExtension,
       AttachmentsExtension,
-      FormatEscapeExtension
+      FormatEscapeExtension,
+      LinkOpenerExtension
     ]
   }
 
@@ -6735,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(() => {
@@ -6749,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();
@@ -6758,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) {
@@ -6905,7 +7040,9 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #handleTurboBeforeCache = (event) => {
-    this.#reset();
+    if (!this.closest("[data-turbo-permanent]")) {
+      this.#reset();
+    }
   }
 
   #synchronizeWithChanges() {
@@ -7178,19 +7315,30 @@ class LexicalEditorElement extends HTMLElement {
     ]
   }
 
+  // Builds one resolver element per CSS value inside a hidden container, attaches
+  // the container in a single DOM write, then reads all computed values in one pass
+  // — triggering at most one forced reflow. The previous implementation interleaved
+  // setProperty/getComputedStyle/removeProperty on the same element, forcing a style
+  // recalc on every iteration during editor initialization.
   #resolveColors(property, cssValues) {
-    const resolver = document.createElement("span");
-    resolver.style.display = "none";
-    this.appendChild(resolver);
-
-    const resolved = cssValues.map(cssValue => {
-      resolver.style.setProperty(property, cssValue);
-      const value = window.getComputedStyle(resolver).getPropertyValue(property);
-      resolver.style.removeProperty(property);
-      return { name: cssValue, value }
+    const container = document.createElement("span");
+    container.style.display = "none";
+
+    const resolvers = cssValues.map(cssValue => {
+      const element = document.createElement("span");
+      element.style.setProperty(property, cssValue);
+      container.appendChild(element);
+      return { element, name: cssValue }
     });
 
-    resolver.remove();
+    styleResolverRoot().appendChild(container);
+
+    const resolved = resolvers.map(({ element, name }) => ({
+      name,
+      value: window.getComputedStyle(element).getPropertyValue(property)
+    }));
+
+    container.remove();
     return resolved
   }
 

package/dist/lexxy_helpers.esm.js

@@ -82,6 +82,10 @@ function extractPlainTextFromHtml(innerHtml = "") {
   return parseHtml(innerHtml).body.textContent.trim()
 }
 
+function isActiveAndVisible(element) {
+  return element && !element.disabled && element.checkVisibility()
+}
+
 function highlightCode() {
   const elements = document.querySelectorAll("pre[data-language]");
 
@@ -216,4 +220,4 @@ function collectTextNodes(root) {
   return nodes
 }
 
-export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, extractPlainTextFromHtml, generateDomId, highlightCode, isPreviewableImage, parseHtml };
+export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, extractPlainTextFromHtml, generateDomId, highlightCode, isActiveAndVisible, isPreviewableImage, parseHtml };

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.8-beta",
+  "version": "0.9.9-beta-preview1",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",