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

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) {
@@ -1525,26 +1533,38 @@ 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. 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.
+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
+  });
+
+  document.body.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 +2182,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 +6500,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 +6577,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
@@ -6655,7 +6740,8 @@ class LexicalEditorElement extends HTMLElement {
       TrixContentExtension,
       TablesExtension,
       AttachmentsExtension,
-      FormatEscapeExtension
+      FormatEscapeExtension,
+      LinkOpenerExtension
     ]
   }
 
@@ -6905,7 +6991,9 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #handleTurboBeforeCache = (event) => {
-    this.#reset();
+    if (!this.closest("[data-turbo-permanent]")) {
+      this.#reset();
+    }
   }
 
   #synchronizeWithChanges() {
@@ -7178,19 +7266,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();
+    this.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/package.json

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