@37signals/lexxy 0.9.31 → 0.9.32

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, PrismTokenizer, $isCodeHighlightNode, $createCodeNode, $createCodeHighlightNode, CodeNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, $isCodeHighlightNode, $createCodeNode, $createCodeHighlightNode, CodeNode, registerCodeHighlighting, PrismTokenizer, 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';
@@ -1908,12 +1908,11 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText } = {}, key) {
+  constructor({ sgid, contentType, innerHtml, plainText } = {}, key) {
     super(key);
 
     const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
 
-    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
     this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
     this.innerHtml = innerHtml;
@@ -1921,7 +1920,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   createDOM(_config, editor) {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true, draggable: true });
+    const figure = createElement(CustomActionTextAttachmentNode.TAG_NAME, { "content-type": this.contentType, "data-lexxy-decorator": true, draggable: true });
     figure.dataset.lexicalNodeKey = this.__key;
 
     // Resolved from the editor so this content is sanitized with its own
@@ -1964,7 +1963,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const attachment = createElement(this.tagName, {
+    const attachment = createElement(CustomActionTextAttachmentNode.TAG_NAME, {
       sgid: this.sgid,
       content: this.innerHtml,
       "content-type": this.contentType
@@ -1977,7 +1976,6 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return {
       type: "custom_action_text_attachment",
       version: 1,
-      tagName: this.tagName,
       sgid: this.sgid,
       contentType: this.contentType,
       innerHtml: this.innerHtml,
@@ -2724,10 +2722,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
+  constructor({ sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
     super(key);
 
-    this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
     this.src = src;
     this.previewSrc = previewSrc;
@@ -2786,7 +2783,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const attachment = createElement(this.tagName, {
+    const attachment = createElement(ActionTextAttachmentNode.TAG_NAME, {
       sgid: this.sgid,
       previewable: this.previewable || null,
       url: this.src,
@@ -2807,7 +2804,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return {
       type: "action_text_attachment",
       version: 1,
-      tagName: this.tagName,
       sgid: this.sgid,
       src: this.src,
       previewable: this.previewable,
@@ -3527,6 +3523,34 @@ class UploadRequests {
   }
 }
 
+// Partition a stretch of text into consecutive { start, end, range } segments,
+// where offsets are relative to the text and range is the covering source
+// range — expressed in outer coordinates as { start, end, ... } — or null for
+// the stretches no range covers. Ranges must be sorted and non-overlapping.
+function segmentTextByRanges(text, textStart, ranges) {
+  const segments = [];
+  let cursor = 0;
+
+  for (const range of ranges) {
+    const from = Math.max(range.start - textStart, cursor);
+    const to = Math.min(range.end - textStart, text.length);
+
+    if (from < to) {
+      if (from > cursor) {
+        segments.push({ start: cursor, end: from, range: null });
+      }
+      segments.push({ start: from, end: to, range });
+      cursor = to;
+    }
+  }
+
+  if (cursor < text.length) {
+    segments.push({ start: cursor, end: text.length, range: null });
+  }
+
+  return segments
+}
+
 // 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
@@ -3830,26 +3854,9 @@ function extractHighlightStyleFromElement(element) {
   return css.length > 0 ? css : null
 }
 
-// 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)
-    }
-  }
-}
-
+// Recover the highlight ranges to reapply after a retokenization: the ranges
+// staged during HTML import, or the ones read from the children the fresh
+// tokens are about to replace.
 function $takeHighlightRanges(editor, codeNode) {
   const pending = $getPendingHighlights(editor);
   const key = codeNode.getKey();
@@ -3891,52 +3898,25 @@ function $applyHighlightRangesToTokens(tokens, highlights) {
 // 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);
+  const segments = segmentTextByRanges(text, tokenStart, highlights);
 
   if (segments.length === 1) {
     const [ segment ] = segments;
-    if (segment.style) {
-      $applyHighlightStyleToToken(token, segment.style);
+    if (segment.range) {
+      $applyHighlightStyleToToken(token, segment.range.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);
+      if (segment.range) {
+        $applyHighlightStyleToToken(segmentToken, segment.range.style);
       }
       return segmentToken
     })
   }
 }
 
-// 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;
-
-  for (const { start, end, style } of highlights) {
-    const from = Math.max(start - tokenStart, cursor);
-    const to = Math.min(end - tokenStart, text.length);
-
-    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);
@@ -3946,17 +3926,24 @@ function $buildChildRanges(codeNode) {
   const childRanges = [];
   let charOffset = 0;
 
-  for (const child of codeNode.getChildren()) {
-    if ($isCodeHighlightNode(child) || $isTextNode(child)) {
-      const text = child.getTextContent();
-      childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
-      charOffset += text.length;
-    } else {
-      // LineBreakNode, TabNode - count as 1 character each (\n, \t)
-      charOffset += 1;
+  function walk(node) {
+    for (const child of node.getChildren()) {
+      if ($isElementNode(child)) {
+        // e.g. a LinkNode awaiting its first retokenization
+        walk(child);
+      } else if ($isCodeHighlightNode(child) || $isTextNode(child)) {
+        const text = child.getTextContent();
+        childRanges.push({ node: child, start: charOffset, end: charOffset + text.length });
+        charOffset += text.length;
+      } else {
+        // LineBreakNode - counts as 1 character (\n)
+        charOffset += 1;
+      }
     }
   }
 
+  walk(codeNode);
+
   return childRanges
 }
 
@@ -5076,10 +5063,17 @@ class Selection {
       || this.#selectInLexical(this.topLevelNodeAfterCursor)
   }
 
+  // hasNodeSelection reads the committed state, while $getSelection() resolves
+  // against the pending one — so the selection here can be missing, no longer a
+  // NodeSelection, or reference a node that no longer exists (empty editor,
+  // just-deleted node, decorator boundary). Only invoke the callback when a
+  // node actually resolves; returning false lets the callers fall back —
+  // #selectInLexical for plain arrows, native pass-through for shift-arrows.
   #withCurrentNodeSelectionNode(fn) {
-    if (this.hasNodeSelection) {
-      return fn($getSelection().getNodes()[0])
-    }
+    const selection = this.hasNodeSelection ? $getSelection() : null;
+    const currentNode = $isNodeSelection(selection) ? selection.getNodes()[0] : undefined;
+
+    return currentNode ? fn(currentNode) : false
   }
 
   #rangeSelectDecorator(node, direction = "forward") {
@@ -6266,15 +6260,18 @@ class ListItemNodeInserter extends BaseNodeInserter {
     // very corruption we are avoiding. The block must land at the list's level.
     const anchorNode = this.selection.anchor.getNode();
     const outerList = this.#outermostList(anchorNode);
-    const topItem = this.#topLevelItemFor(anchorNode, outerList);
 
-    // A blank top-level bullet is just the insertion point (e.g. the user pressed
-    // Enter to leave the list); break out of it entirely. A bullet with content —
-    // including one wrapping a nested list — splits so its content stays in the list.
-    const splitAfterItem = $isBlankNode(topItem) ? topItem.getPreviousSibling() : topItem;
-    const splitIndex = splitAfterItem ? splitAfterItem.getIndexWithinParent() + 1 : 0;
-    const [ listBefore, listAfter ] = $splitNode(outerList, splitIndex);
-    if ($isBlankNode(topItem)) { topItem.remove(); }
+    // removeText() can relocate the anchor before we read it back — clean out
+    // of the list when the removed range spanned it. With no list left to
+    // split, default insertion applies.
+    if (!outerList) {
+      this.selection.insertNodes(nodes);
+      return
+    }
+
+    const topItem = this.#topLevelItemFor(anchorNode, outerList);
+    const [ listBefore, listAfter ] = $splitNode(outerList, this.#splitIndexFor(topItem));
+    if (topItem && $isBlankNode(topItem)) { topItem.remove(); }
 
     let anchor = listBefore ?? listAfter;
     for (const node of nodes) {
@@ -6287,6 +6284,18 @@ class ListItemNodeInserter extends BaseNodeInserter {
     nodes.at(-1).selectNext();
   }
 
+  // A blank top-level bullet is just the insertion point (e.g. the user pressed
+  // Enter to leave the list); break out of it entirely. A bullet with content —
+  // including one wrapping a nested list — splits so its content stays in the
+  // list. With no top-level bullet at all — removeText() relocated the anchor
+  // onto the list node itself — the anchor offset is the boundary between items.
+  #splitIndexFor(topItem) {
+    if (!topItem) return this.selection.anchor.offset
+
+    const splitAfterItem = $isBlankNode(topItem) ? topItem.getPreviousSibling() : topItem;
+    return splitAfterItem ? splitAfterItem.getIndexWithinParent() + 1 : 0
+  }
+
   #outermostList(node) {
     return [ node, ...node.getParents() ].reverse().find($isListNode)
   }
@@ -7386,11 +7395,93 @@ class Contents {
   }
 }
 
+function parsePastedMarkdown(text) {
+  return pasteMarked.parse(text)
+}
+
+// A marked instance scoped to the paste flow. A fresh Marked starts from
+// marked's stock defaults — gfm stays on and tables still parse — and is
+// isolated from the global `marked` singleton, so a host bundle sharing the
+// deduped module can't leak `marked.use(...)` customizations into pasting.
+// The additions are breaks: true, matching the render pass Clipboard always
+// used, the `html` renderer, and the dropped `code` tokenizer.
+//
 // Markdown reads any line indented by a tab or four spaces as a code block. Pasted
 // plain text is full of incidental indentation — outlines, notes, logs — and nobody
 // indents a note meaning "this is code"; they fence it. Keep fences, drop the
 // indentation rule.
-const pastedMarkdown = new Marked({ breaks: true }).use({ tokenizer: { code: () => undefined } });
+//
+// Following CommonMark, marked tokenizes a bare "<tag>" in prose as raw inline
+// (or block) HTML. That is intentional for recognized tags — pasted plain text
+// carrying <span style>, <mark>, <b>… is styled on import — but for an
+// *unrecognized* element the Lexical importer has no converter and silently
+// unwraps it, dropping the tag. WEBVTT speaker cues such as
+// "<v Nabila Abdel Nabi>", where the name lives in what the HTML parser reads
+// as attributes, thus vanish entirely.
+//
+// Classifying at marked's html renderer rides its public token grammar instead
+// of shadowing it: marked routes code (`code`/`codespan`), autolinks and
+// [text](<dest>) links to *other* token types that never reach this renderer,
+// so their literal "<...>" content is preserved for free — no pre-escaping,
+// code-region collection, or lexer-option syncing required. This renderer fires
+// only for genuine raw-HTML tokens, and marked inserts its return value verbatim
+// (it does not re-encode), so we escape unsupported tags to literal text here.
+const pasteMarked = new Marked({
+  breaks: true,
+  renderer: { html: renderPastedHtmlToken }
+}).use({ tokenizer: { code: () => undefined } });
+
+// Matches a single HTML tag lexeme: an optional "/", a tag name, then attribute
+// characters up to the closing ">". Quoted attribute values may contain ">" —
+// the HTML tokenizer consumes them as part of the value, and marked's tag
+// grammar matches them into the same raw token — so the attribute run matches
+// quoted strings whole. Otherwise a lexeme like <v title="a > b"> would end at
+// the inner ">", escaping only the prefix and leaving the tail for DOMParser
+// to decode.
+const HTML_TAG_LEXEME = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)((?:"[^"]*"|'[^']*'|[^'">])*)>/g;
+
+// Escape unknown tags *within* the raw-HTML token, keeping known tags intact.
+// Lexeme-level (not whole-token) escaping matters because marked can emit a
+// single coarse block-HTML token whose first tag is known but which nests an
+// unknown one — e.g. "<div><v Name> Hello</div>" arrives as one token. We keep
+// the <div> so it still renders, and escape the nested <v Name> so it survives
+// as literal text rather than being unwrapped and dropped by the importer.
+function renderPastedHtmlToken(token) {
+  return token.text.replace(HTML_TAG_LEXEME, (lexeme, _slash, name) => {
+    return isSupportedHtmlElement(name) ? lexeme : escapeHtml(lexeme)
+  })
+}
+
+// The renderer's output is final, so escape the full lexeme — "&", "<" and ">" —
+// for an exact round-trip (e.g. "<v A&nbsp;B>" → "&lt;v A&amp;nbsp;B&gt;").
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+// "Supported" — safe to pass through for the importer to handle — is decided from
+// the element taxonomy, not the importer's converter registry. The importer both
+// converts tags it has a converter for (span→mark, b→bold, tr/td→table cells) and
+// transparently traverses standard structural wrappers it has *no* converter for
+// (thead, tbody, tfoot, colgroup, caption), keeping their children. A converter
+// registry (editor._htmlConversions) lists only the former, so classifying by it
+// escaped those wrappers to literal text and corrupted pasted tables — foster
+// parenting hoisted "&lt;thead&gt;…" out as a stray paragraph. The taxonomy covers
+// both: a standard HTML element is either converted or losslessly unwrapped.
+//
+// Two exclusions escape the tag to literal text instead:
+//   - Invented tags (WEBVTT's "<v Nabila Abdel Nabi>", "<foo>"): document
+//     .createElement returns HTMLUnknownElement. The importer would unwrap them,
+//     dropping the tag — and for <v Name> the name lives in what parses as
+//     attributes, so it vanishes entirely.
+//   - Custom elements (turbo-frame, bc-attachment, action-text-attachment): a
+//     hyphenated name is a custom element (HTML spec; no standard element has a
+//     hyphen). They're excluded even when the importer registers a converter, so
+//     a plain-text paste can never materialize an attachment/widget. Legitimate
+//     attachments arrive through the rich-HTML paste path, not here.
+function isSupportedHtmlElement(name) {
+  const tag = name.toLowerCase();
+  return !(document.createElement(tag) instanceof HTMLUnknownElement) && !tag.includes("-")
+}
 
 class Clipboard {
   #listeners = new ListenerBin()
@@ -7578,7 +7669,7 @@ class Clipboard {
   }
 
   #pasteMarkdown(text) {
-    const html = pastedMarkdown.parse(text);
+    const html = parsePastedMarkdown(text);
     const doc = parseHtml(html);
 
     if (this.#isPlainTextWithoutMarkdown(doc)) {
@@ -7777,6 +7868,134 @@ class BrowserAdapter {
   }
 }
 
+// The code retokenizer only knows CodeHighlightNode, LineBreakNode and
+// TabNode, so a LinkNode inside a code block — Trix-authored documents allow
+// links in code — is destroyed on the first retokenization. Links survive as
+// state on the tokens instead: this state records the link attributes on each
+// CodeHighlightNode the link covers, the extraction below reads it (or a
+// still-untokenized LinkNode) back into ranges before every retokenization,
+// and the tokenizer reapplies it to the fresh tokens.
+const codeLinkState = createState("codeLink", {
+  parse: (value) => (value && typeof value.url === "string" ? value : null)
+});
+
+function $getCodeLink(node) {
+  return $getState(node, codeLinkState)
+}
+
+function $setCodeLink(node, link) {
+  $setState(node, codeLinkState, link);
+}
+
+// Build the list of { start, end, link } ranges covering every link in a code
+// block, with offsets into the block's text content. Links appear either as
+// LinkNode descendants (imported or just created, before their first
+// retokenization) or as link state on tokens (after it). The walk recurses
+// through nested elements because `<pre><code>` imports of multi-line content
+// briefly produce a CodeNode nested inside another before the outer one's
+// retokenization flattens them.
+function $extractLinkRangesFromCodeNode(codeNode) {
+  const ranges = [];
+  let offset = 0;
+
+  function walk(node) {
+    for (const child of node.getChildren()) {
+      if ($isLinkNode(child)) {
+        const size = child.getTextContent().length;
+        appendRange(ranges, { start: offset, end: offset + size, link: linkAttributesFrom(child) });
+        offset += size;
+      } else if ($isElementNode(child)) {
+        walk(child);
+      } else {
+        const size = child.getTextContent().length;
+        if ($isTextNode(child)) {
+          const link = $getCodeLink(child);
+          if (link) {
+            appendRange(ranges, { start: offset, end: offset + size, link });
+          }
+        }
+        offset += size;
+      }
+    }
+  }
+
+  walk(codeNode);
+
+  return ranges
+}
+
+function $applyLinkRangesToTokens(tokens, ranges) {
+  if (ranges.length === 0) return tokens
+
+  const linkedTokens = [];
+  let offset = 0;
+
+  for (const token of tokens) {
+    if ($isCodeHighlightNode(token)) {
+      linkedTokens.push(...$splitTokenAtLinkBoundaries(token, offset, ranges));
+    } else {
+      linkedTokens.push(token);
+    }
+    offset += token.getTextContentSize();
+  }
+
+  return linkedTokens
+}
+
+function $splitTokenAtLinkBoundaries(token, tokenStart, ranges) {
+  const text = token.getTextContent();
+  const segments = segmentTextByRanges(text, tokenStart, ranges);
+
+  if (segments.length === 1) {
+    const [ segment ] = segments;
+    if (segment.range) {
+      $setCodeLink(token, segment.range.link);
+    }
+    return [ token ]
+  } else {
+    return segments.map((segment) => {
+      const segmentToken = $cloneTokenSlice(token, text.slice(segment.start, segment.end));
+      if (segment.range) {
+        $setCodeLink(segmentToken, segment.range.link);
+      }
+      return segmentToken
+    })
+  }
+}
+
+function $cloneTokenSlice(token, text) {
+  const segmentToken = $createCodeHighlightNode(text, token.getHighlightType());
+  segmentToken.setStyle(token.getStyle());
+  // CodeHighlightNode.setFormat is a no-op, so carry the format over directly
+  segmentToken.getWritable().__format = token.getFormat();
+  return segmentToken
+}
+
+// Consecutive children carrying the same link merge into a single range, so a
+// link split across tokens by an earlier retokenization keeps covering fresh
+// tokens as one contiguous stretch however they retokenize.
+function appendRange(ranges, range) {
+  const previous = ranges[ranges.length - 1];
+
+  if (previous && previous.end === range.start && sameLink(previous.link, range.link)) {
+    previous.end = range.end;
+  } else {
+    ranges.push(range);
+  }
+}
+
+function sameLink(a, b) {
+  return a.url === b.url && a.target === b.target && a.rel === b.rel && a.title === b.title
+}
+
+function linkAttributesFrom(linkNode) {
+  const link = { url: linkNode.getURL() };
+  if (linkNode.getTarget()) link.target = linkNode.getTarget();
+  if (linkNode.getRel()) link.rel = linkNode.getRel();
+  if (linkNode.getTitle()) link.title = linkNode.getTitle();
+  return link
+}
+
 // Custom TextNode exportDOM that avoids redundant wrapping.
 //
 // Lexical's built-in TextNode.exportDOM() calls createDOM() which produces semantic tags
@@ -7791,6 +8010,30 @@ class BrowserAdapter {
 // Any <span> elements produced by createDOM() are unwrapped, since they only carry
 // editor classes that aren't meaningful in exported HTML.
 
+// A CodeHighlightNode exports like any other text node, plus an <a> wrapper
+// when it carries link state — that's how a link survives inside a code
+// block, whose retokenizer would destroy an actual LinkNode child.
+function exportCodeHighlightNodeDOM(editor, codeHighlightNode) {
+  const output = exportTextNodeDOM(editor, codeHighlightNode);
+  const link = $getCodeLink(codeHighlightNode);
+
+  if (link) {
+    return { element: wrapWithAnchor(output.element, link) }
+  } else {
+    return output
+  }
+}
+
+function wrapWithAnchor(element, link) {
+  const anchor = document.createElement("a");
+  anchor.setAttribute("href", link.url);
+  if (link.target) anchor.setAttribute("target", link.target);
+  if (link.rel) anchor.setAttribute("rel", link.rel);
+  if (link.title) anchor.setAttribute("title", link.title);
+  anchor.appendChild(element);
+  return anchor
+}
+
 function exportTextNodeDOM(editor, textNode) {
   const element = textNode.createDOM(editor._config, editor);
   element.style.whiteSpace = "pre-wrap";
@@ -8022,12 +8265,34 @@ class CodeHighlightingExtension extends LexxyExtension {
     return defineExtension({
       name: "lexxy/code-highlighting",
       register(editor) {
-        return registerCodeHighlighting(editor, buildHighlightPreservingTokenizer(editor))
+        return registerCodeHighlighting(editor, buildMarkupPreservingTokenizer(editor))
       }
     })
   }
 }
 
+// The code retokenizer replaces a code block's children with freshly created
+// tokens that carry no styles or links, which would drop color highlights and
+// hyperlinks on every edit. This tokenizer wraps the stock Prism tokenizer to
+// restore both: it recovers the block's highlight and link 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 buildMarkupPreservingTokenizer(editor) {
+  return {
+    defaultLanguage: PrismTokenizer.defaultLanguage,
+    tokenize(code, language) {
+      return PrismTokenizer.tokenize(code, language)
+    },
+    $tokenize(codeNode, language) {
+      const linkRanges = $extractLinkRangesFromCodeNode(codeNode);
+      const highlightRanges = $takeHighlightRanges(editor, codeNode);
+      const tokens = PrismTokenizer.$tokenize(codeNode, language);
+      return $applyLinkRangesToTokens($applyHighlightRangesToTokens(tokens, highlightRanges), linkRanges)
+    }
+  }
+}
+
 const TRIX_LANGUAGE_ATTR = "language";
 
 class TrixContentExtension extends LexxyExtension {
@@ -9814,7 +10079,7 @@ class LexicalEditorElement extends HTMLElement {
       theme: theme,
       nodes: this.#lexicalNodes,
       html: {
-        export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportTextNodeDOM ] ])
+        export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportCodeHighlightNodeDOM ] ])
       },
       $initialEditorState: (editor) => {
         this.#configureSanitizer(editor);

package/dist/lexxy_helpers.esm.js

@@ -44,12 +44,13 @@ function highlightElement(preElement) {
   const grammar = Prism.languages?.[language];
   if (!grammar) return
 
-  // Read the source text and <mark> ranges in a single walk, before Prism
-  // rewrites the element. Sharing one traversal keeps the highlight offsets
-  // aligned with the code string and preserves leading whitespace — deriving
-  // either of them separately (e.g. textContent through DOMParser) collapses
-  // leading whitespace and shifts every range, re-indenting the rendered block.
-  const { code, highlights } = extractCodeAndHighlights(preElement);
+  // Read the source text and the <mark> and <a> ranges in a single walk,
+  // before Prism rewrites the element. Sharing one traversal keeps the range
+  // offsets aligned with the code string and preserves leading whitespace —
+  // deriving either of them separately (e.g. textContent through DOMParser)
+  // collapses leading whitespace and shifts every range, re-indenting the
+  // rendered block.
+  const { code, highlights, links } = extractCodeAndMarkup(preElement);
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
   preElement.innerHTML = highlightedHtml;
@@ -58,18 +59,24 @@ function highlightElement(preElement) {
     applyHighlightRanges(preElement, highlights);
   }
 
+  if (links.length > 0) {
+    applyLinkRanges(preElement, links);
+  }
+
   preElement.dataset.highlighted = "true";
 }
 
-// Walk the <pre> once, building Prism's source text and the <mark> ranges
-// together: a text node contributes its text verbatim, a <br> contributes a
-// newline, and a <mark> records the slice of code it covers. Because both
-// outputs come from the same walk, every range offset is just a position in
-// `code` — so the highlights can't drift out of sync with the source, and the
-// block's leading whitespace survives (HTML parsing would collapse it).
-function extractCodeAndHighlights(preElement) {
+// Walk the <pre> once, building Prism's source text and the <mark> and <a>
+// ranges together: a text node contributes its text verbatim, a <br>
+// contributes a newline, and a <mark> or <a> records the slice of code it
+// covers. Because all outputs come from the same walk, every range offset is
+// just a position in `code` — so the markup can't drift out of sync with the
+// source, and the block's leading whitespace survives (HTML parsing would
+// collapse it).
+function extractCodeAndMarkup(preElement) {
   const root = preElement.querySelector("code") || preElement;
   const highlights = [];
+  const links = [];
   let code = "";
 
   function walk(node) {
@@ -87,6 +94,12 @@ function extractCodeAndHighlights(preElement) {
         if (style) {
           highlights.push({ start, end: code.length, style });
         }
+      } else if (node.tagName === "A" && node.getAttribute("href")) {
+        const start = code.length;
+        for (const child of node.childNodes) {
+          walk(child);
+        }
+        links.push({ start, end: code.length, attributes: linkAttributes(node) });
       } else {
         for (const child of node.childNodes) {
           walk(child);
@@ -99,7 +112,17 @@ function extractCodeAndHighlights(preElement) {
     walk(child);
   }
 
-  return { code, highlights }
+  return { code, highlights, links }
+}
+
+function linkAttributes(element) {
+  const attributes = { href: element.getAttribute("href") };
+  for (const name of [ "target", "rel", "title" ]) {
+    if (element.getAttribute(name)) {
+      attributes[name] = element.getAttribute(name);
+    }
+  }
+  return attributes
 }
 
 function extractStyle(element) {
@@ -109,16 +132,32 @@ function extractStyle(element) {
   return parts.length > 0 ? parts.join(" ") : null
 }
 
-// Wrap character ranges in <mark> elements within a Prism-highlighted DOM tree.
-// Each range is applied independently, re-collecting text nodes each time to
-// account for splits from previous ranges.
+// Wrap character ranges in <mark> or <a> elements within a Prism-highlighted
+// DOM tree. Each range is applied independently, re-collecting text nodes
+// each time to account for splits from previous ranges.
 function applyHighlightRanges(element, highlights) {
   for (const { start, end, style } of highlights) {
-    wrapRange(element, start, end, style);
+    wrapRange(element, start, end, () => {
+      const mark = document.createElement("mark");
+      mark.setAttribute("style", style);
+      return mark
+    });
+  }
+}
+
+function applyLinkRanges(element, links) {
+  for (const { start, end, attributes } of links) {
+    wrapRange(element, start, end, () => {
+      const anchor = document.createElement("a");
+      for (const [ name, value ] of Object.entries(attributes)) {
+        anchor.setAttribute(name, value);
+      }
+      return anchor
+    });
   }
 }
 
-function wrapRange(container, rangeStart, rangeEnd, style) {
+function wrapRange(container, rangeStart, rangeEnd, createWrapper) {
   const textNodes = collectTextNodes(container);
 
   // Process in reverse so DOM mutations don't shift earlier text node offsets
@@ -133,14 +172,13 @@ function wrapRange(container, rangeStart, rangeEnd, style) {
     const text = node.textContent;
     const parent = node.parentNode;
 
-    const mark = document.createElement("mark");
-    mark.setAttribute("style", style);
-    mark.textContent = text.slice(relStart, relEnd);
+    const wrapper = createWrapper();
+    wrapper.textContent = text.slice(relStart, relEnd);
 
     if (relEnd < text.length) {
       parent.insertBefore(document.createTextNode(text.slice(relEnd)), node.nextSibling);
     }
-    parent.insertBefore(mark, node.nextSibling);
+    parent.insertBefore(wrapper, node.nextSibling);
 
     if (relStart > 0) {
       node.textContent = text.slice(0, relStart);

package/package.json

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