@37signals/lexxy 0.9.23 → 0.9.24

package/README.md

@@ -2,7 +2,7 @@
 
 A modern rich text editor for Rails.
 
-[Documentation](https://basecamp.github.io/lexxy/docs/) | <mark>[Try it out!](https://basecamp.github.io/lexxy/sandbox/)</mark>
+[Documentation](https://lexxy.dev/docs/) | <mark>[Try it out!](https://lexxy.dev/sandbox/)</mark>
 
 ## Features
 

package/dist/lexxy.esm.js

@@ -12,7 +12,7 @@ import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, QuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { HistoryExtension } from '@lexical/history';
-import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, PrismTokenizer, $isCodeHighlightNode, $createCodeNode, $createCodeHighlightNode, CodeNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { marked } from 'marked';
@@ -318,6 +318,11 @@ var ToolbarIcons = {
     <path d="M11.5 2C12.0523 2 12.5 2.44772 12.5 3V3.5C12.5 4.05228 12.0523 4.5 11.5 4.5H8V15C8 15.5523 7.55228 16 7 16H6.5C5.94772 16 5.5 15.5523 5.5 15V4.5H2C1.44772 4.5 1 4.05228 1 3.5V3C1 2.44772 1.44772 2 2 2H11.5ZM16 7C16.5523 7 17 7.44772 17 8V8.5C17 9.05228 16.5523 9.5 16 9.5H15V15C15 15.5523 14.5523 16 14 16H13.5C12.9477 16 12.5 15.5523 12.5 15V9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V8C10.5 7.44772 10.9477 7 11.5 7H16Z"/>
   </svg>`,
 
+  "h1":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.8418 4.125H14.8271C15.543 4.125 16.0449 4.56934 16.0449 5.23828V12.7207C16.0449 13.4111 15.6348 13.8486 14.9854 13.8486C14.336 13.8486 13.9395 13.418 13.9395 12.7207V6.11133H13.8887L12.9541 6.74219C12.7354 6.88574 12.5303 6.95312 12.3047 6.95312C11.7646 6.95312 11.3955 6.58398 11.3955 6.06445C11.3955 5.69531 11.5801 5.42578 11.9766 5.15625L13.4023 4.32031C13.5459 4.23633 13.6826 4.17578 13.8418 4.125Z"/>
+  </svg>`,
+
   "h2":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.6445 4.19824C15.5244 4.19824 16.8984 5.34668 16.8984 6.91211C16.8984 7.8759 16.4335 8.7237 15.292 9.84473L13.3438 11.8135V11.9092H16.1875C16.8232 11.9092 17.2197 12.251 17.2197 12.8115C17.2196 13.3651 16.83 13.7002 16.1875 13.7002H11.5117C10.8487 13.7002 10.4112 13.3241 10.4111 12.75C10.4111 12.3399 10.6368 11.9843 11.3203 11.3145L13.6855 8.88086C14.4169 8.13583 14.7245 7.64349 14.7246 7.12402C14.7246 6.4541 14.2393 6.00293 13.5215 6.00293C12.9404 6.00293 12.5166 6.29688 12.2158 6.90527C11.9151 7.37002 11.6552 7.54785 11.2588 7.54785C10.7188 7.54785 10.3429 7.17861 10.3428 6.65918C10.3428 5.3877 11.7783 4.19824 13.6445 4.19824Z"/>
@@ -333,6 +338,16 @@ var ToolbarIcons = {
     <path d="M14.6357 4.22559C15.7432 4.22559 16.4336 4.80664 16.4336 5.73633V10.3164H16.7275C17.2881 10.3164 17.6436 10.6787 17.6436 11.2256C17.6435 11.7655 17.3017 12.1006 16.7275 12.1006H16.4336V12.6611C16.4335 13.3515 16.0234 13.7891 15.374 13.7891C14.7247 13.7891 14.3282 13.3583 14.3281 12.6611V12.1006H11.04C10.2335 12.1006 9.76863 11.6766 9.76855 10.918C9.76855 10.5762 9.85064 10.3026 10.1104 9.74219C10.7666 8.42289 11.5733 7.0146 12.5713 5.54492C13.2549 4.56738 13.7812 4.22559 14.6357 4.22559ZM7.88965 4.30078C8.61426 4.30078 9.02441 4.74512 9.02441 5.51758V12.5518C9.02435 13.3241 8.6142 13.7686 7.88965 13.7686C7.1651 13.7686 6.76178 13.3309 6.76172 12.5518V9.87207H3.33691V12.5518C3.33685 13.3241 2.9267 13.7686 2.20215 13.7686C1.4776 13.7686 1.07428 13.3309 1.07422 12.5518V5.51758C1.07422 4.73828 1.47754 4.30078 2.20215 4.30078C2.92676 4.30078 3.33691 4.74512 3.33691 5.51758V8.07422H6.76172V5.51758C6.76172 4.73828 7.16504 4.30078 7.88965 4.30078ZM14.2188 6.07812C13.6035 7.02841 12.2158 9.48929 11.7988 10.2686V10.3164H14.3281V6.07812H14.2188Z"/>
   </svg>`,
 
+  "h5":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM16.1191 4.30078C16.6934 4.30078 17.0762 4.63672 17.0762 5.16602C17.0762 5.69531 16.6934 6.03125 16.1191 6.03125H13.3457L12.9219 8.25586H13.0176C13.248 8.03711 13.6855 7.84375 14.2871 7.84375C15.9277 7.84375 17.1445 9.07422 17.1445 10.7832C17.1445 12.5605 15.8184 13.9053 13.7695 13.9053C11.9512 13.9053 10.6934 12.9277 10.5566 11.7178C10.5566 11.2021 10.9121 10.8193 11.4277 10.8193C11.8379 10.8193 12.1328 11.0244 12.3516 11.4893C12.625 12.0361 13.1133 12.2549 13.7285 12.2549C14.5488 12.2549 15.1367 11.6533 15.1367 10.7695C15.1367 9.92188 14.5625 9.31348 13.7559 9.31348C13.1953 9.31348 12.7578 9.56055 12.4629 10.0254C12.2168 10.3887 11.9355 10.5527 11.5527 10.5527C10.9648 10.5527 10.5684 10.1699 10.5684 9.55469C10.5684 9.42773 10.582 9.30762 10.6094 9.17383L11.2383 5.55273C11.3516 4.88379 11.7207 4.30078 12.6797 4.30078H16.1191Z"/>
+  </svg>`,
+
+  "h6":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.12207 4.30078C8.84668 4.30078 9.25684 4.74512 9.25684 5.51758V12.5518C9.25677 13.3241 8.84662 13.7686 8.12207 13.7686C7.39752 13.7686 6.9942 13.3309 6.99414 12.5518V9.87207H3.56934V12.5518C3.56927 13.3241 3.15912 13.7686 2.43457 13.7686C1.71002 13.7686 1.3067 13.3309 1.30664 12.5518V5.51758C1.30664 4.73828 1.70996 4.30078 2.43457 4.30078C3.15918 4.30078 3.56934 4.74512 3.56934 5.51758V8.07422H6.99414V5.51758C6.99414 4.73828 7.39746 4.30078 8.12207 4.30078ZM13.6719 13.9258C15.5518 13.9258 17.1445 12.37306 17.1445 10.35451V10.05763C17.1445 8.10744 16.6016 6.59574 15.5928 5.58694C14.8613 4.85544 13.8975 4.42384 12.7285 4.25294C12.4199 4.21194 12.1592 4.19824 11.8643 4.19824C11.2627 4.19824 10.8389 4.59474 10.8389 5.14164C10.8389 5.65724 11.2354 6.02054 11.7783 6.04784C12.1758 6.06834 12.4844 6.10944 12.7656 6.19144C13.5176 6.42384 14.0742 6.95314 14.3965 7.75974L14.4922 8.00584H14.3828C14.0605 7.56834 13.4863 7.25974 12.6523 7.25974C11.1406 7.25974 10.0674 8.42384 10.0674 10.02345V10.27736C10.0674 12.2549 11.4668 13.9258 13.6719 13.9258ZM13.5215 12.24123C12.6797 12.24123 12.0918 11.48244 12.0918 10.4131V10.1592C12.0918 9.26174 12.6523 8.71291 13.5352 8.71291C14.3965 8.71291 14.9844 9.27638 14.9844 10.1592V10.4131C14.9844 11.48244 14.3828 12.24123 13.5215 12.24123Z"/>
+  </svg>`,
+
   "paragraph":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <path d="M9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13C2 12.4477 2.44772 12 3 12H9ZM15 8C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H3C2.44772 10 2 9.55228 2 9C2 8.44772 2.44772 8 3 8H15ZM15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H15Z"/>
@@ -634,9 +649,9 @@ class LexicalToolbarElement extends HTMLElement {
 
     this.#setButtonPressed("format", isInHeading);
     this.#setButtonPressed("paragraph", !isInHeading);
-    this.#setButtonPressed("heading-large", headingTag === "h2");
-    this.#setButtonPressed("heading-medium", headingTag === "h3");
-    this.#setButtonPressed("heading-small", headingTag === "h4");
+
+    this.querySelector("lexxy-heading-dropdown")
+      ?.updateActiveHeading(headingTag);
 
     this.#setButtonPressed("lists", isInList);
     this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
@@ -815,15 +830,9 @@ class LexicalToolbarElement extends HTMLElement {
           <button type="button" name="paragraph" data-command="setFormatParagraph" title="Paragraph" role="menuitem">
             ${ToolbarIcons.paragraph} <span>Normal</span>
           </button>
-          <button type="button" name="heading-large" data-command="setFormatHeadingLarge" title="Large heading" role="menuitem">
-            ${ToolbarIcons.h2} <span>Large Heading</span>
-          </button>
-          <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading" role="menuitem">
-            ${ToolbarIcons.h3} <span>Medium Heading</span>
-          </button>
-          <button class="lexxy-editor__toolbar-group-end" type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading" role="menuitem">
-            ${ToolbarIcons.h4} <span>Small Heading</span>
-          </button>
+          <lexxy-heading-dropdown>
+            <div class="lexxy-heading-options"></div>
+          </lexxy-heading-dropdown>
           <div class="lexxy-editor__toolbar-separator" role="separator"></div>
           <button type="button" name="clear-formatting" data-command="clearFormatting" title="Clear formatting" role="menuitem">
             ${ToolbarIcons.clearFormatting} <span>Clear formatting</span>
@@ -1049,6 +1058,141 @@ class ToolbarDropdown extends HTMLElement {
   }
 }
 
+const HEADING_BUTTON_SELECTOR = "button.lexxy-heading-button";
+
+const HEADING_PRESETS = [
+  { label: "Large Heading", name: "heading-large" },
+  { label: "Medium Heading", name: "heading-medium" },
+  { label: "Small Heading", name: "heading-small" }
+];
+
+class HeadingDropdown extends HTMLElement {
+  static labelFor(tag, index) {
+    if (index < HEADING_PRESETS.length) {
+      return HEADING_PRESETS[index].label
+    } else {
+      const level = tag.match(/^h(\d+)$/)?.[1];
+      if (level) {
+        return `Heading ${level}`
+      } else {
+        return tag.toUpperCase()
+      }
+    }
+  }
+
+  static nameFor(tag, index) {
+    if (index < HEADING_PRESETS.length) {
+      return HEADING_PRESETS[index].name
+    } else {
+      const level = tag.match(/^h(\d+)$/)?.[1];
+      if (level) {
+        return `heading-${level}`
+      } else {
+        return `heading-${tag}`
+      }
+    }
+  }
+
+  #listeners = new ListenerBin()
+
+  connectedCallback() {
+    this.style.display = "contents";
+
+    this.#onToolbarEditor(() => {
+      this.#buttonContainer.style.display = "contents";
+      this.#setUpButtons();
+      this.#registerButtonHandlers();
+      this.#syncActiveHeading();
+    });
+  }
+
+  disconnectedCallback() {
+    this.#listeners.dispose();
+  }
+
+  updateActiveHeading(tag) {
+    this.#headingButtons.forEach(button => {
+      const next = (button.dataset.heading === tag).toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
+    });
+  }
+
+  get #toolbar() {
+    return this.closest("lexxy-toolbar")
+  }
+
+  get #editorElement() {
+    return this.#toolbar?.editorElement
+  }
+
+  get #editor() {
+    return this.#toolbar?.editor
+  }
+
+  async #onToolbarEditor(callback) {
+    const toolbar = this.#toolbar;
+    if (!toolbar) return
+
+    await toolbar.getEditorElement();
+    if (this.isConnected && this.#toolbar) callback();
+  }
+
+  #setUpButtons() {
+    this.#buttonContainer.innerHTML = "";
+
+    this.#configuredHeadings.forEach((tag, index) => {
+      this.#buttonContainer.appendChild(this.#createButton(tag, index));
+    });
+  }
+
+  #createButton(tag, index) {
+    const label = HeadingDropdown.labelFor(tag, index);
+    const name = HeadingDropdown.nameFor(tag, index);
+    const icon = ToolbarIcons[tag] || "";
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.dataset.heading = tag;
+    button.classList.add("lexxy-heading-button");
+    button.name = name;
+    button.title = label;
+    button.setAttribute("role", "menuitem");
+    button.innerHTML = `${icon} <span>${label}</span>`;
+    return button
+  }
+
+  #registerButtonHandlers() {
+    this.#headingButtons.forEach(button => {
+      this.#listeners.track(registerEventListener(button, "click", (event) => {
+        if (!this.#editor) return
+
+        event.preventDefault();
+        this.#editor.dispatchCommand("applyHeadingFormat", button.dataset.heading);
+        this.#editor.focus();
+      }));
+    });
+  }
+
+  #syncActiveHeading() {
+    const { headingTag } = this.#editor.read(() => this.#editorElement.selection.getFormat());
+    this.updateActiveHeading(headingTag ?? null);
+  }
+
+  get #configuredHeadings() {
+    return this.#editorElement.config.get("headings")
+  }
+
+  get #buttonContainer() {
+    return this.querySelector(".lexxy-heading-options")
+  }
+
+  get #headingButtons() {
+    return Array.from(this.querySelectorAll(HEADING_BUTTON_SELECTOR))
+  }
+}
+
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
@@ -1256,6 +1400,7 @@ const presets = new Configuration({
     toolbar: {
       upload: "both"
     },
+    headings: [ "h2", "h3", "h4" ],
     highlight: {
       buttons: {
         color: range(1, 9).map(n => `var(--highlight-${n})`),
@@ -3104,9 +3249,9 @@ const hasPastedStylesState = createState("hasPastedStyles", {
 });
 
 // Stores pending highlight ranges extracted during HTML import, keyed by CodeNode key.
-// After the code retokenizer creates fresh CodeHighlightNodes, a mutation listener
-// reads this map and re-applies the highlight styles. Scoped per editor instance
-// so entries don't leak across editors or outlive a torn-down editor.
+// The highlight-preserving tokenizer consumes this map when the code retokenizer
+// first tokenizes the block. Scoped per editor instance so entries don't leak
+// across editors or outlive a torn-down editor.
 const pendingCodeHighlights = new WeakMap();
 
 class HighlightExtension extends LexxyExtension {
@@ -3141,10 +3286,7 @@ class HighlightExtension extends LexxyExtension {
           editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(editor, BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
           editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
           editor.registerNodeTransform(CodeHighlightNode, $syncHighlightWithCodeHighlightNode),
-          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers)),
-          editor.registerMutationListener(CodeNode, (mutations) => {
-            $applyPendingCodeHighlights(editor, mutations);
-          }, { skipInitialization: true })
+          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers))
         )
       }
     });
@@ -3192,7 +3334,7 @@ function $registerPreConversion(editor) {
 // Returns a <pre> converter factory scoped to a specific editor instance.
 // The factory extracts highlight ranges from <mark> elements before the code
 // retokenizer can destroy them. The ranges are stored in pendingCodeHighlights
-// and applied after retokenization via a mutation listener.
+// and restored by the highlight-preserving tokenizer during retokenization.
 function $preConversionWithHighlightsFactory(editor) {
   return function $preConversionWithHighlights(domNode) {
     const highlights = extractHighlightRanges(domNode);
@@ -3268,98 +3410,116 @@ function extractHighlightStyleFromElement(element) {
   return css.length > 0 ? css : null
 }
 
-// Called from the CodeNode mutation listener after the retokenizer has
-// replaced TextNodes with fresh CodeHighlightNodes.
-function $applyPendingCodeHighlights(editor, mutations) {
-  const pending = $getPendingHighlights(editor);
-  const keysToProcess = [];
-
-  for (const [ key, type ] of mutations) {
-    if (type !== "destroyed" && pending.has(key)) {
-      keysToProcess.push(key);
+// The code retokenizer replaces a code block's children with freshly created
+// tokens that carry no styles, which would drop color highlights on every
+// edit. This tokenizer wraps the stock Prism tokenizer to restore them: it
+// recovers the block's highlight ranges — staged during HTML import, or read
+// from the children the fresh tokens are about to replace — and reapplies
+// them to the fresh tokens before the retokenizer splices them in.
+function buildHighlightPreservingTokenizer(editor) {
+  return {
+    defaultLanguage: PrismTokenizer.defaultLanguage,
+    tokenize(code, language) {
+      return PrismTokenizer.tokenize(code, language)
+    },
+    $tokenize(codeNode, language) {
+      const tokens = PrismTokenizer.$tokenize(codeNode, language);
+      const highlights = $takeHighlightRanges(editor, codeNode);
+      return $applyHighlightRangesToTokens(tokens, highlights)
     }
   }
+}
 
-  if (keysToProcess.length === 0) return
+function $takeHighlightRanges(editor, codeNode) {
+  const pending = $getPendingHighlights(editor);
+  const key = codeNode.getKey();
+
+  if (pending.has(key)) {
+    const highlights = pending.get(key);
+    pending.delete(key);
+    return highlights
+  } else if (codeNode.getChildren().some($isCodeHighlightNode)) {
+    return $extractHighlightRangesFromCodeNode(codeNode)
+  } else {
+    // A block that was never tokenized has only plain text children. Styles
+    // on those come from import paths that didn't stage ranges (e.g. colored
+    // spans in Trix HTML), and the first tokenization discards them.
+    return []
+  }
+}
 
-  // Use a deferred update so the retokenizer has finished its
-  // skipTransforms update before we touch the nodes.
-  editor.update(() => {
-    for (const key of keysToProcess) {
-      const highlights = pending.get(key);
-      pending.delete(key);
-      if (!highlights) continue
+function $applyHighlightRangesToTokens(tokens, highlights) {
+  if (highlights.length === 0) return tokens
 
-      const codeNode = $getNodeByKey(key);
-      if (!codeNode || !$isCodeNode(codeNode)) continue
+  const styledTokens = [];
+  let offset = 0;
 
-      $applyHighlightRangesToCodeNode(codeNode, highlights);
+  for (const token of tokens) {
+    if ($isCodeHighlightNode(token)) {
+      styledTokens.push(...$splitTokenAtHighlightBoundaries(token, offset, highlights));
+    } else {
+      styledTokens.push(token);
     }
-  }, { skipTransforms: true, discrete: true });
+    offset += token.getTextContentSize();
+  }
+
+  return styledTokens
 }
 
-// Apply saved highlight ranges to the CodeHighlightNode children
-// of a CodeNode, splitting nodes at range boundaries as needed.
-// We can't use TextNode.splitText() because it creates TextNode
-// instances (not CodeHighlightNodes) for the split parts. Instead,
-// we manually create CodeHighlightNode replacements.
-function $applyHighlightRangesToCodeNode(codeNode, highlights) {
-  if (highlights.length === 0) return
-
-  for (const { start: hlStart, end: hlEnd, style } of highlights) {
-    // Rebuild the child-to-offset mapping for each highlight range because
-    // earlier ranges may have split nodes, invalidating previous mappings.
-    const childRanges = $buildChildRanges(codeNode);
-
-    for (const { node, start: nodeStart, end: nodeEnd } of childRanges) {
-      // Skip plain TextNodes: only CodeHighlightNodes can be split into
-      // styled replacements here. The retokenizer normally converts any
-      // TextNode children back to CodeHighlightNodes before this runs,
-      // but the iteration over $buildChildRanges has to keep counting
-      // them so character offsets stay aligned with the saved ranges.
-      if (!$isCodeHighlightNode(node)) continue
-
-      // Check if this child overlaps with the highlight range
-      const overlapStart = Math.max(hlStart, nodeStart);
-      const overlapEnd = Math.min(hlEnd, nodeEnd);
-
-      if (overlapStart >= overlapEnd) continue
-
-      // Calculate offsets relative to this node
-      const relStart = overlapStart - nodeStart;
-      const relEnd = overlapEnd - nodeStart;
-      const nodeLength = nodeEnd - nodeStart;
-
-      if (relStart === 0 && relEnd === nodeLength) {
-        // Entire node is highlighted - apply style directly
-        node.setStyle(style);
-        $setCodeHighlightFormat(node, true);
-      } else {
-        // Need to split: replace the node with 2 or 3 CodeHighlightNodes
-        const text = node.getTextContent();
-        const highlightType = node.getHighlightType();
-        const replacements = [];
+// Split a token into segments at highlight boundaries, styling the covered
+// segments. We can't use TextNode.splitText() because the fresh tokens aren't
+// attached to the tree yet, so we create CodeHighlightNode replacements.
+function $splitTokenAtHighlightBoundaries(token, tokenStart, highlights) {
+  const text = token.getTextContent();
+  const segments = segmentTextByHighlights(text, tokenStart, highlights);
 
-        if (relStart > 0) {
-          replacements.push($createCodeHighlightNode(text.slice(0, relStart), highlightType));
-        }
+  if (segments.length === 1) {
+    const [ segment ] = segments;
+    if (segment.style) {
+      $applyHighlightStyleToToken(token, segment.style);
+    }
+    return [ token ]
+  } else {
+    return segments.map((segment) => {
+      const segmentToken = $createCodeHighlightNode(text.slice(segment.start, segment.end), token.getHighlightType());
+      if (segment.style) {
+        $applyHighlightStyleToToken(segmentToken, segment.style);
+      }
+      return segmentToken
+    })
+  }
+}
 
-        const styledNode = $createCodeHighlightNode(text.slice(relStart, relEnd), highlightType);
-        styledNode.setStyle(style);
-        $setCodeHighlightFormat(styledNode, true);
-        replacements.push(styledNode);
+// Partition a token's text into consecutive { start, end, style } segments,
+// where offsets are relative to the token and style is null for the stretches
+// no highlight covers.
+function segmentTextByHighlights(text, tokenStart, highlights) {
+  const segments = [];
+  let cursor = 0;
 
-        if (relEnd < nodeLength) {
-          replacements.push($createCodeHighlightNode(text.slice(relEnd), highlightType));
-        }
+  for (const { start, end, style } of highlights) {
+    const from = Math.max(start - tokenStart, cursor);
+    const to = Math.min(end - tokenStart, text.length);
 
-        for (const replacement of replacements) {
-          node.insertBefore(replacement);
-        }
-        node.remove();
+    if (from < to) {
+      if (from > cursor) {
+        segments.push({ start: cursor, end: from, style: null });
       }
+      segments.push({ start: from, end: to, style });
+      cursor = to;
     }
   }
+
+  if (cursor < text.length) {
+    segments.push({ start: cursor, end: text.length, style: null });
+  }
+
+  return segments
+}
+
+function $applyHighlightStyleToToken(token, style) {
+  token.setStyle(style);
+  $setCodeHighlightFormat(token, true);
 }
 
 function $buildChildRanges(codeNode) {
@@ -3448,14 +3608,10 @@ function $patchCodeHighlightStyles(editor, selection, patch) {
       textSize: node.getTextContentSize()
     }));
 
-  // Use skipTransforms to prevent the code highlighting system from
-  // re-tokenizing and wiping out the style changes we apply.
-  // Use discrete to force a synchronous commit, ensuring the changes
-  // are committed before editor.focus() triggers a second update cycle
-  // that would re-run transforms and wipe out the styles.
+  // Use skipTransforms so the retokenizer doesn't rebuild the block in the
+  // middle of the toggle, and discrete to force a synchronous commit so the
+  // styles are in place before editor.focus() triggers a second update cycle.
   editor.update(() => {
-    const affectedCodeNodes = new Set();
-
     for (const { key, startOffset, endOffset, textSize } of nodeKeys) {
       const node = $getNodeByKey(key);
       if (!node) continue
@@ -3464,8 +3620,6 @@ function $patchCodeHighlightStyles(editor, selection, patch) {
       if (!$isCodeNode(parent)) continue
       if (startOffset === endOffset) continue
 
-      affectedCodeNodes.add(parent);
-
       if (startOffset === 0 && endOffset === textSize) {
         $applyStylePatchToNode(node, patch);
       } else {
@@ -3474,17 +3628,6 @@ function $patchCodeHighlightStyles(editor, selection, patch) {
         $applyStylePatchToNode(targetNode, patch);
       }
     }
-
-    // After applying styles, save highlight ranges for each affected CodeNode.
-    // The code retokenizer will replace the styled nodes with fresh unstyled
-    // tokens when transforms run. The pending highlights are picked up by the
-    // CodeNode mutation listener and reapplied after retokenization.
-    for (const codeNode of affectedCodeNodes) {
-      const ranges = $extractHighlightRangesFromCodeNode(codeNode);
-      if (ranges.length > 0) {
-        $getPendingHighlights(editor).set(codeNode.getKey(), ranges);
-      }
-    }
   }, { skipTransforms: true, discrete: true });
 }
 
@@ -3604,10 +3747,8 @@ const COMMANDS = [
   "unlink",
   "toggleHighlight",
   "removeHighlight",
-  "setFormatHeadingLarge",
-  "setFormatHeadingMedium",
-  "setFormatHeadingSmall",
   "setFormatParagraph",
+  "applyHeadingFormat",
   "clearFormatting",
   "insertUnorderedList",
   "insertOrderedList",
@@ -3799,22 +3940,14 @@ class CommandDispatcher {
     $insertNodeToNearestRoot(new HorizontalDividerNode);
   }
 
-  dispatchSetFormatHeadingLarge() {
-    this.contents.applyHeadingFormat("h2");
-  }
-
-  dispatchSetFormatHeadingMedium() {
-    this.contents.applyHeadingFormat("h3");
-  }
-
-  dispatchSetFormatHeadingSmall() {
-    this.contents.applyHeadingFormat("h4");
-  }
-
   dispatchSetFormatParagraph() {
     this.contents.applyParagraphFormat();
   }
 
+  dispatchApplyHeadingFormat(tag) {
+    this.contents.applyHeadingFormat(tag);
+  }
+
   dispatchClearFormatting() {
     this.contents.clearFormatting();
   }
@@ -6379,17 +6512,15 @@ class Contents {
     return { anchorNode, offset: anchor.offset }
   }
 
-  // The replaced span can straddle the cursor (e.g. "@Jack" when "@" was just
-  // inserted before "Jack"), so we anchor on the trigger before the cursor and
-  // verify the whole string matches there rather than searching text up to it.
+  // The replaced span must start before the cursor but can extend past it
+  // (e.g. "@Jack" when "@" was just inserted before "Jack"), so we bound the
+  // match's start with lastIndexOf's fromIndex rather than slicing the text.
   #findReplacementStart(anchorNode, offset, stringToReplace) {
-    const fullText = anchorNode.getTextContent();
-    const triggerIndex = fullText.slice(0, offset).lastIndexOf(stringToReplace[0]);
-
-    if (triggerIndex !== -1 && fullText.startsWith(stringToReplace, triggerIndex)) {
-      return triggerIndex
-    } else {
+    if (offset === 0) {
+      // A negative fromIndex clamps to 0 and could match at the cursor
       return -1
+    } else {
+      return anchorNode.getTextContent().lastIndexOf(stringToReplace, offset - 1)
     }
   }
 
@@ -7108,7 +7239,7 @@ class CodeHighlightingExtension extends LexxyExtension {
     return defineExtension({
       name: "lexxy/code-highlighting",
       register(editor) {
-        return registerCodeHighlighting(editor)
+        return registerCodeHighlighting(editor, buildHighlightPreservingTokenizer(editor))
       }
     })
   }
@@ -9276,11 +9407,14 @@ class LexicalEditorElement extends HTMLElement {
   get #supportedHeadingFormats() {
     if (!this.supportsRichText) return []
 
+    const headings = this.config.get("headings");
     return [
       { label: "Normal", command: "setFormatParagraph", tag: null },
-      { label: "Large heading", command: "setFormatHeadingLarge", tag: "h2" },
-      { label: "Medium heading", command: "setFormatHeadingMedium", tag: "h3" },
-      { label: "Small heading", command: "setFormatHeadingSmall", tag: "h4" },
+      ...headings.map((tag, index) => ({
+        label: HeadingDropdown.labelFor(tag, index),
+        command: "applyHeadingFormat",
+        tag
+      }))
     ]
   }
 
@@ -10830,13 +10964,15 @@ class TableTools extends HTMLElement {
   }
 
   #registerKeyboardShortcuts() {
-    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnShortcut, COMMAND_PRIORITY_HIGH));
+    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnAltF10, COMMAND_PRIORITY_HIGH));
   }
 
-  #focusToolbarOnShortcut = (event) => {
-    if (this.#hasSelectedTable && this.#isFocusToolbarShortcut(event)) {
+  #focusToolbarOnAltF10 = (event) => {
+    if (this.#hasSelectedTable && event.altKey && event.key === "F10") {
       event.preventDefault();
-      this.#tableToolsButtons[0]?.focus();
+      // Ask for the ring explicitly: a programmatic focus coming from a mouse-focused
+      // editor otherwise inherits the mouse modality and paints no focus ring.
+      this.#tableToolsButtons[0]?.focus({ focusVisible: true });
       return true
     } else {
       return false
@@ -10847,11 +10983,6 @@ class TableTools extends HTMLElement {
     return this.tableController?.currentTableNodeKey != null
   }
 
-  #isFocusToolbarShortcut(event) {
-    if (event.key !== "F10") return false
-    return event.altKey || ((event.ctrlKey || event.metaKey) && event.shiftKey)
-  }
-
   #handleToolsKeydown = (event) => {
     if (event.key === "Escape") {
       this.#handleEscapeKey();
@@ -11020,6 +11151,7 @@ function defineElements() {
     // Toolbar must be registered BEFORE Editor
     "lexxy-toolbar": LexicalToolbarElement,
     "lexxy-toolbar-dropdown": ToolbarDropdown,
+    "lexxy-heading-dropdown": HeadingDropdown,
     "lexxy-highlight-dropdown": HighlightDropdown,
     "lexxy-link-dropdown": LinkDropdown,
 

package/package.json

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