@latentic/live-markdown 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# Changelog
+
+## [0.1.0] - 2026-08-24
+
+First release from the editor's own repository, and the first with CI on more
+than one platform.
+
+### Fixed
+
+- **A `[…]` keeps its brackets until it resolves to a link.** Lezer emits a
+  `Link` node for every bracketed span; CommonMark only makes `[label]` a link
+  when the document also carries a `[label]: url` definition. Reading the node
+  as the answer hid the brackets out of ordinary prose — `arr[0]` rendered as
+  `arr0`, `see [3]` as `see 3` — and stripped every optional argument from a
+  pasted LaTeX block (`\begin{tikzpicture}[scale=0.42]`). Unresolved, the
+  brackets are content: visible, unstyled, and no longer atomic to the caret.
+  This also matches what a CommonMark exporter produces for the same input.
+
+- **A table cell renders what the paragraph above it renders.** Cells walk the
+  Lezer tree, and four constructs have no node in it — wikilinks,
+  `==highlight==`, footnote references and `$math$` are found by scanning text.
+  Cells showed `$x^2$` as source, and mangled two of the others outright
+  (`[[Some Note]]` → `[Some Note]`). Features now contribute a pattern and its
+  markup through `inlineScanRulesFacet`, and the cell renderer carves those
+  spans out before walking the tree.
+
+- **A parse budget that holds on more than the fastest machine.** `treeAt` spent
+  at most 50ms driving the parse to a queried position, against a worst case
+  measured at 43ms — seven milliseconds of headroom. On a slower machine
+  `ensureSyntaxTree` returned null, the lookup fell back to the viewport-limited
+  tree, and a delete crossed a fence boundary the guard should have walled.
+  Now 150ms.
+
+### Added
+
+- `inlineScanRulesFacet` and `scanInline` — the seam for a construct Lezer does
+  not parse, so any renderer can see it, not just the decoration plugins.
+- `linkResolves` / `linkHasVisibleLabel` (`core/linkResolution`).
+
+### Documentation
+
+- `styles.css` still called the package `ai-editor`, and both it and the README
+  promised that mathematics needs no CSS import. It does — KaTeX renders
+  through its own stylesheet, which no CodeMirror theme can supply.
+
+## [0.0.1] - 2026-08-23
+
+Initial publish, extracted from the Compose monorepo.

package/README.md

@@ -1,8 +1,14 @@
 # @latentic/live-markdown
 
-A rich markdown editor for React — write like Notion, store as plain `.md`.
+[![npm](https://img.shields.io/npm/v/@latentic/live-markdown)](https://www.npmjs.com/package/@latentic/live-markdown)
+[![CI](https://github.com/getlatentic/live-markdown/actions/workflows/ci.yml/badge.svg)](https://github.com/getlatentic/live-markdown/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/@latentic/live-markdown)](LICENSE)
 
-Built on [CodeMirror 6](https://codemirror.net/). Headings, bold, italic, lists, tables, images, math, footnotes, and code blocks render inline as you type. The file on disk is always standard markdown — no proprietary format, no AST translation layer, no lock-in.
+**WYSIWYG markdown editing for React — where the markdown is still the document.**
+
+A markdown editor built on [CodeMirror 6](https://codemirror.net/). Headings, tables, LaTeX math, Mermaid diagrams, images, footnotes and code blocks render inline as you type — there is no split-screen preview pane to sync, and no syntax left on screen to read past.
+
+And unlike rich-text editors built on ProseMirror, Tiptap, Slate or Lexical, there is no intermediate document model to translate through. `value` in and `onChange` out are the same markdown string, byte for byte, YAML frontmatter included.
 
 ```tsx
 import { CodeMirrorMarkdownEditor } from "@latentic/live-markdown";
@@ -25,7 +31,7 @@ Most markdown editors fall into two camps:
 | **Raw editors** | CodeMirror, Monaco, Ace | Fast, plain text — but users see `## Heading`, not a heading |
 | **Rich editors** | Tiptap, ProseMirror, Slate, Lexical | WYSIWYG — but the internal model is a custom AST, not markdown. Round-tripping to `.md` is lossy or fragile |
 
-**@latentic/live-markdown sits in between.** The source of truth is the raw markdown string. CodeMirror parses it with Lezer, and a decoration engine replaces syntax tokens with rendered widgets in real time — `## Heading` becomes a styled heading, `- item` becomes a bullet, `![alt](src)` becomes an inline image. You get the editing experience of Notion or Google Docs, but `value` in and `onChange` out is always a plain markdown string. No AST translation, no serialization bugs, no format lock-in.
+**@latentic/live-markdown sits in between.** The source of truth is the raw markdown string. CodeMirror parses it with Lezer, and a decoration engine replaces syntax tokens with rendered widgets in real time — `## Heading` becomes a styled heading, `- item` becomes a bullet, `![alt](src)` becomes an inline image. You edit the rendered form directly — no syntax on screen, no preview pane to keep in sync — while `value` in and `onChange` out stays a plain markdown string. No AST translation, no serialization bugs, no format lock-in.
 
 The boundary semantics this demands — what every keystroke does at every construct edge — are specified in [docs/interaction-spec.md](docs/interaction-spec.md) and enforced by its conformance matrix (`interactionMatrix.test.ts`); block-level behaviors are specified executably in `src/codemirror/features/*.feature`.
 
@@ -38,11 +44,14 @@ The boundary semantics this demands — what every keystroke does at every const
 | Round-trip fidelity | Byte-for-byte | Lossy (serializer) | Byte-for-byte | MDX subset | Lossy |
 | YAML frontmatter | Preserved, never stripped | Plugin (varies) | No | Plugin | No |
 | LaTeX math | Inline KaTeX | Plugin | No | Plugin | No |
+| Mermaid diagrams | Rendered inline | Plugin | No | Plugin | No |
 | Large files (1 MB+) | Fast (CodeMirror) | Slow (DOM-per-node) | Fast | Slow | Slow |
 | Tables | GFM, cell navigation | Plugin | Basic | Plugin | Slash command |
 | Image paste/drop | Built-in | Plugin | No | Plugin | Plugin |
 | Framework | React | React / Vue / vanilla | Vanilla / adapters | React | React |
-| Bundle size | ~80 KB (gzip, editor core) | ~120 KB+ | ~40 KB | ~150 KB+ | ~200 KB+ |
+| Bundle size | 57 KB gzipped* | ~120 KB+ | ~40 KB | ~150 KB+ | ~200 KB+ |
+
+\* Measured on the published bundle. CodeMirror, KaTeX and Mermaid are external, so you pay for a renderer only where your documents use one — the other figures are the projects' own published numbers and are not all drawn on the same basis.
 
 ### Key differentiators
 
@@ -72,6 +81,7 @@ The boundary semantics this demands — what every keystroke does at every const
 - **Horizontal rules**
 - **Footnotes** — inline marker with hover preview
 - **LaTeX math** — inline `$...$` and display `$$...$$` via KaTeX
+- **Mermaid diagrams** — a ```` ```mermaid ```` fence renders as a live diagram; click to select, double-click for the source
 - **Wikilinks** — `[[Page]]` and `[[Page|alias]]` with Cmd/Ctrl-click navigation
 - **Links** — Cmd/Ctrl-click to open, auto-detection
 
@@ -102,7 +112,7 @@ pnpm add @latentic/live-markdown
 
 Peer dependencies: `react` and `react-dom` (18+).
 
-All *in-editor* styling (headings, code, lists, tables, image widgets, math, links) ships with the editor as a CodeMirror theme and applies automatically — no CSS import needed. For the outer container layout (so the editor fills its parent and scrolls), import the small stylesheet once:
+All *in-editor* styling (headings, code, lists, tables, image widgets, links) ships with the editor as a CodeMirror theme and applies automatically — no CSS import needed. For the outer container layout (so the editor fills its parent and scrolls), import the small stylesheet once:
 
 ```ts
 import "@latentic/live-markdown/styles.css";
@@ -110,6 +120,12 @@ import "@latentic/live-markdown/styles.css";
 
 Skip it if your app already lays the editor out as a flex child.
 
+Mathematics is the exception. KaTeX renders through its own stylesheet, which no CodeMirror theme can supply — without it `$x$` still typesets, just unstyled (a fraction stops stacking). If your documents use math:
+
+```ts
+import "katex/dist/katex.min.css";
+```
+
 ---
 
 ## Usage
@@ -254,12 +270,62 @@ The decoration engine walks the Lezer syntax tree on every document change, asks
 - [x] Host-environment seams (image storage/resolution, link opening) with browser defaults
 - [x] Self-themed editor surface (CodeMirror theme ships with the package)
 - [x] Public extension API for contributing node rules (`MarkdownExtension.rules` → `nodeRulesFacet`)
+- [ ] [Ship the engine without React](https://github.com/getlatentic/live-markdown/issues/1) — the editor is React only at its edge: of 195 source files, one component and one `type ReactNode` import name it. Splitting `/react` into a subpath entry frees the engine for any framework, or none
 - [ ] Frontmatter as a toggleable extension (default on, disable via prop)
 - [ ] Collaborative editing (CM6 collab extension)
 - [ ] Slash commands (`/` menu for inserting blocks)
 
 ---
 
+## Development
+
+```sh
+pnpm install
+pnpm exec playwright install webkit   # once — for the browser tier below
+pnpm check                            # typecheck + build + both test tiers
+```
+
+Tests run in two tiers, and the split is deliberate:
+
+| tier | command | what it is for |
+|---|---|---|
+| default | `pnpm test` | everything that does not need layout — jsdom and node |
+| browser | `pnpm test:browser` | real WebKit, for what jsdom cannot judge |
+
+jsdom has no layout engine, so caret geometry, click placement, drawn selection
+and KaTeX metrics all pass in it whatever they do on screen. Anything that
+depends on where a box actually lands belongs in a `*.browser.test.ts`.
+
+`pnpm build` is part of the gate rather than a release step: `tsc --noEmit`
+never emits, so the errors that appear only when rolling up declarations — an
+exported anonymous class, an inferred type naming a transitive dependency by
+its package-manager path — stay invisible until a publish fails.
+
+### Releasing
+
+Publishing is caused by green CI, not preceded by it. `cargo`-style local
+publishing is not wired up on purpose: a published version cannot be taken
+back.
+
+```sh
+# 1. bump the version in package.json, land it on main
+# 2. tag the merged commit
+git tag v0.1.0 && git push origin v0.1.0
+```
+
+The tag triggers `publish.yml`, which refuses to build at all if the tag is not
+an ancestor of `main` or disagrees with `package.json`, runs the full CI
+workflow against the tagged commit as a job it `needs`, and only then publishes.
+
+There is no npm token anywhere — not in the repository, not on a laptop.
+Publishing uses [trusted publishing](https://docs.npmjs.com/trusted-publishers):
+npm accepts a short-lived OIDC token minted for this workflow in this
+repository, so the credential cannot be leaked, reused, or forgotten about, and
+[provenance](https://docs.npmjs.com/generating-provenance-statements) is
+generated automatically from it.
+
+---
+
 ## License
 
 [MIT](LICENSE)

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _codemirror_view from '@codemirror/view';
 import { Decoration, ViewPlugin, DecorationSet, ViewUpdate, EditorView, Command, KeyBinding } from '@codemirror/view';
 import * as _codemirror_state from '@codemirror/state';
@@ -406,7 +405,7 @@ interface CodeMirrorMarkdownEditorProps {
      */
     onFlushReady?: (flush: (() => void) | null) => void;
 }
-declare function CodeMirrorMarkdownEditorInner({ mode, onChange, value, workspaceRoot, filePath, linkTargets, onNavigateToLink, toolbar, selectionActions, resolveImageSrc, saveImageBytes, onOpenExternalUrl, onCommentOnExcerpt, renderClipboardHtml, onAfterContentSwap, onFlushReady, }: CodeMirrorMarkdownEditorProps): react_jsx_runtime.JSX.Element;
+declare function CodeMirrorMarkdownEditorInner({ mode, onChange, value, workspaceRoot, filePath, linkTargets, onNavigateToLink, toolbar, selectionActions, resolveImageSrc, saveImageBytes, onOpenExternalUrl, onCommentOnExcerpt, renderClipboardHtml, onAfterContentSwap, onFlushReady, }: CodeMirrorMarkdownEditorProps): react.JSX.Element;
 /**
  * Memoised export — same reason as the Tiptap editor. AppShell
  * re-renders on every chat-thread token; without memoisation each

package/dist/index.js

@@ -356,7 +356,7 @@ var verbatimPasteKeymap = keymap.of([
   }
 ]);
 var markdownPaste = [pasteHandler, verbatimPasteKeymap];
-var PARSE_BUDGET_MS = 50;
+var PARSE_BUDGET_MS = 150;
 function treeAt(state, pos) {
   return ensureSyntaxTree(state, pos + 1, PARSE_BUDGET_MS) ?? syntaxTree(state);
 }
@@ -1514,6 +1514,38 @@ var nodeRulesFacet = Facet.define({
     return Object.assign({}, ...values);
   }
 });
+var inlineScanRulesFacet = Facet.define({
+  combine: (values) => values
+});
+function scanInline(rules, text, at = 0) {
+  const found = [];
+  for (const rule of rules) {
+    rule.pattern.lastIndex = 0;
+    let match;
+    while ((match = rule.pattern.exec(text)) !== null) {
+      found.push({
+        from: at + match.index,
+        to: at + match.index + match[0].length,
+        html: rule.render(match)
+      });
+    }
+  }
+  found.sort((a, b) => a.from - b.from || b.to - a.to);
+  const kept = [];
+  for (const span of found) {
+    const last = kept[kept.length - 1];
+    if (!last || span.from >= last.to) kept.push(span);
+  }
+  return kept;
+}
+
+// src/codemirror/core/htmlEscape.ts
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(value) {
+  return escapeText(value).replace(/"/g, "&quot;");
+}
 var SLICE_MS = 10;
 var GAP_MS = 25;
 var parseToEnd = ViewPlugin.fromClass(
@@ -1955,6 +1987,73 @@ var imageRule = (ctx) => {
     })
   };
 };
+var CODE_NODES = /* @__PURE__ */ new Set(["FencedCode", "CodeBlock", "InlineCode"]);
+function viewportTree(view) {
+  return ensureSyntaxTree(view.state, view.viewport.to, 100) ?? syntaxTree(view.state);
+}
+function docTree(state) {
+  return ensureSyntaxTree(state, state.doc.length, 20) ?? syntaxTree(state);
+}
+function inCode(tree, pos) {
+  let node = tree.resolveInner(pos, 1);
+  for (; node; node = node.parent) {
+    if (CODE_NODES.has(node.name)) return true;
+  }
+  return false;
+}
+
+// src/codemirror/core/linkResolution.ts
+var DEFINITION_CONTAINERS = /* @__PURE__ */ new Set([
+  "Document",
+  "Blockquote",
+  "BulletList",
+  "OrderedList",
+  "ListItem"
+]);
+function normalizeLabel(label) {
+  return label.trim().replace(/\s+/g, " ").toLowerCase();
+}
+function labelInner(state, label) {
+  return state.sliceDoc(label.from + 1, label.to - 1);
+}
+var definedLabels = /* @__PURE__ */ new WeakMap();
+function definitions(state) {
+  const cached = definedLabels.get(state);
+  if (cached) return cached;
+  const labels = /* @__PURE__ */ new Set();
+  docTree(state).iterate({
+    enter: (node) => {
+      if (node.name !== "LinkReference") return DEFINITION_CONTAINERS.has(node.name);
+      const label = node.node.getChild("LinkLabel");
+      if (label) labels.add(normalizeLabel(labelInner(state, label)));
+      return false;
+    }
+  });
+  definedLabels.set(state, labels);
+  return labels;
+}
+function ownLabel(state, link) {
+  let open = null;
+  let close = null;
+  for (let child = link.firstChild; child; child = child.nextSibling) {
+    if (child.name !== "LinkMark") continue;
+    const mark2 = state.sliceDoc(child.from, child.to);
+    if (mark2 === "[" && !open) open = child;
+    else if (mark2 === "]" && !close) close = child;
+  }
+  if (!open || !close || close.from <= open.to) return null;
+  return state.sliceDoc(open.to, close.from);
+}
+function linkResolves(link, state) {
+  if (link.getChild("URL")) return true;
+  const reference = link.getChild("LinkLabel");
+  const explicit = reference ? labelInner(state, reference) : "";
+  const key = explicit.trim() === "" ? ownLabel(state, link) ?? "" : explicit;
+  return key.trim() !== "" && definitions(state).has(normalizeLabel(key));
+}
+function linkHasVisibleLabel(link, state) {
+  return (ownLabel(state, link) ?? "").trim() !== "";
+}
 var BulletWidget = class extends WidgetType {
   /**
    * Eq returns true if two widgets are interchangeable — when CM6
@@ -2068,19 +2167,8 @@ var taskMarkerRule = (ctx) => {
 };
 
 // src/codemirror/core/registry.ts
-function linkHasVisibleLabel(ctx) {
-  const link = ctx.node.parent;
-  if (!link) return false;
-  let bracketOpen = null;
-  let bracketClose = null;
-  for (let child = link.firstChild; child; child = child.nextSibling) {
-    if (child.name !== "LinkMark") continue;
-    const mark2 = ctx.state.sliceDoc(child.from, child.to);
-    if (mark2 === "[" && !bracketOpen) bracketOpen = child;
-    else if (mark2 === "]" && !bracketClose) bracketClose = child;
-  }
-  if (!bracketOpen || !bracketClose || bracketClose.from <= bracketOpen.to) return false;
-  return ctx.state.sliceDoc(bracketOpen.to, bracketClose.from).trim() !== "";
+function parentLink(ctx) {
+  return ctx.parentName === "Link" ? ctx.node.parent : null;
 }
 var NODE_RULES = {
   // ----- Structural wrappers (never directly styled) -----
@@ -2111,7 +2199,11 @@ var NODE_RULES = {
   Emphasis: mark("cm-emphasis"),
   StrongEmphasis: mark("cm-strong"),
   InlineCode: mark("cm-inline-code"),
-  Link: mark("cm-link"),
+  // A `Link` node is not yet a link: Lezer emits one for every `[…]`, and the
+  // reference lookup CommonMark requires is left to us. Unresolved, it is the
+  // literal brackets the author typed — most `[…]` in prose, and every optional
+  // argument in a LaTeX block.
+  Link: (ctx) => linkResolves(ctx.node, ctx.state) ? { paint: "mark", className: "cm-link" } : none,
   Image: imageRule,
   // `![alt](src)` → inline `<img>` widget
   // ----- Inline literal sub-nodes (rendered inside their parent) -----
@@ -2121,8 +2213,9 @@ var NODE_RULES = {
   // Bare GFM autolinks and <angle> autolinks emit the SAME node name, and
   // there the URL IS the content — same class of bug when hidden.
   URL: (ctx) => {
-    if (ctx.parentName !== "Link") return { paint: "mark", className: "cm-link" };
-    return linkHasVisibleLabel(ctx) ? { paint: "hide" } : { paint: "mark", className: "cm-link" };
+    const link = parentLink(ctx);
+    if (!link) return { paint: "mark", className: "cm-link" };
+    return linkHasVisibleLabel(link, ctx.state) ? { paint: "hide" } : { paint: "mark", className: "cm-link" };
   },
   LinkLabel: raw("visible inside Link; parent mark styles it"),
   LinkTitle: hideAlways(),
@@ -2153,8 +2246,12 @@ var NODE_RULES = {
   // `*` / `_`
   CodeMark: hideAlways(),
   // backticks for inline / fence pairs for blocks
-  LinkMark: hideAlways(),
-  // `[`/`]`/`(`/`)`
+  // `[`/`]`/`(`/`)` — chrome only where they really are chrome. An unresolved
+  // link's brackets are content, and hiding them rewrote the document on screen.
+  LinkMark: (ctx) => {
+    const link = parentLink(ctx);
+    return link && !linkResolves(link, ctx.state) ? none : { paint: "hide" };
+  },
   QuoteMark: hideAlways(),
   // `>`
   ListMark: listMarkRule,
@@ -2902,20 +2999,6 @@ function slugKey(value) {
   }
   return raw2.split("-").filter(Boolean).join("-");
 }
-var CODE_NODES = /* @__PURE__ */ new Set(["FencedCode", "CodeBlock", "InlineCode"]);
-function viewportTree(view) {
-  return ensureSyntaxTree(view.state, view.viewport.to, 100) ?? syntaxTree(view.state);
-}
-function docTree(state) {
-  return ensureSyntaxTree(state, state.doc.length, 20) ?? syntaxTree(state);
-}
-function inCode(tree, pos) {
-  let node = tree.resolveInner(pos, 1);
-  for (; node; node = node.parent) {
-    if (CODE_NODES.has(node.name)) return true;
-  }
-  return false;
-}
 var WIKILINK_RE = /\[\[([^\]\n]+?)\]\]/g;
 var HIDE = Decoration.replace({});
 var linkMark = Decoration.mark({ class: "cm-wikilink" });
@@ -3073,12 +3156,6 @@ var clickModel = EditorView.domEventHandlers({
 });
 
 // src/codemirror/table/tableInline.ts
-function escapeText(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function escapeAttr(value) {
-  return escapeText(value).replace(/"/g, "&quot;");
-}
 function codeText(state, node) {
   let innerFrom = node.from;
   let innerTo = node.to;
@@ -3154,8 +3231,26 @@ function renderRange(state, parent, from, to) {
   if (pos < to) html += state.sliceDoc(pos, to);
   return html;
 }
+function straddlesChild(cell, from, to) {
+  for (let child = cell.firstChild; child; child = child.nextSibling) {
+    if (child.from < from && child.to > from) return true;
+    if (child.from < to && child.to > to) return true;
+  }
+  return false;
+}
 function renderInlineCell(state, cell) {
-  return renderRange(state, cell, cell.from, cell.to).trim();
+  const rules = state.facet(inlineScanRulesFacet);
+  const tree = docTree(state);
+  let html = "";
+  let pos = cell.from;
+  for (const span of scanInline(rules, state.sliceDoc(cell.from, cell.to), cell.from)) {
+    if (span.from < pos) continue;
+    if (inCode(tree, span.from) || inCode(tree, span.to - 1)) continue;
+    if (straddlesChild(cell, span.from, span.to)) continue;
+    html += renderRange(state, cell, pos, span.from) + span.html;
+    pos = span.to;
+  }
+  return (html + renderRange(state, cell, pos, cell.to)).trim();
 }
 
 // src/codemirror/table/tableModel.ts
@@ -3256,8 +3351,9 @@ var CELL_SANITIZE_CONFIG = {
   ALLOWED_ATTR: ["href", "class"],
   RETURN_TRUSTED_TYPE: false
 };
-function renderCellInto(el, source) {
+function renderCellInto(el, source, rules) {
   el.innerHTML = DOMPurify.sanitize(source, CELL_SANITIZE_CONFIG);
+  for (const rule of rules) rule.hydrate?.(el);
 }
 function tableV2Sync(surface) {
   return EditorView.updateListener.of((update) => {
@@ -3268,8 +3364,8 @@ function tableV2Sync(surface) {
 }
 
 // src/codemirror/tablev2/tableWidgetV2.ts
-function fillCell(el, cell, row, col) {
-  renderCellInto(el, cell.html);
+function fillCell(el, cell, row, col, rules) {
+  renderCellInto(el, cell.html, rules);
   el.dataset.row = String(row);
   el.dataset.col = String(col);
   el.dataset.cellFrom = String(cell.from);
@@ -3297,7 +3393,8 @@ var TableWidgetV2 = class extends WidgetType {
   eq(other) {
     return other.sourceFrom === this.sourceFrom && other.sourceTo === this.sourceTo && JSON.stringify(other.data) === JSON.stringify(this.data);
   }
-  toDOM() {
+  toDOM(view) {
+    const rules = view.state.facet(inlineScanRulesFacet);
     const wrap = document.createElement("div");
     wrap.className = "cm-tablev2-wrap cm-table-wrap";
     wrap.dataset.tablev2From = String(this.sourceFrom);
@@ -3308,7 +3405,7 @@ var TableWidgetV2 = class extends WidgetType {
     const headRow = document.createElement("tr");
     this.data.header.forEach((cell, col) => {
       const th = document.createElement("th");
-      fillCell(th, cell, 0, col);
+      fillCell(th, cell, 0, col, rules);
       const align = this.data.alignments[col];
       if (align) th.style.textAlign = align;
       headRow.appendChild(th);
@@ -3320,7 +3417,7 @@ var TableWidgetV2 = class extends WidgetType {
       const tr = document.createElement("tr");
       cells2.forEach((cell, col) => {
         const td = document.createElement("td");
-        fillCell(td, cell, r + 1, col);
+        fillCell(td, cell, r + 1, col, rules);
         const align = this.data.alignments[col];
         if (align) td.style.textAlign = align;
         tr.appendChild(td);
@@ -3331,7 +3428,8 @@ var TableWidgetV2 = class extends WidgetType {
     wrap.appendChild(table);
     return wrap;
   }
-  updateDOM(dom) {
+  updateDOM(dom, view) {
+    const rules = view.state.facet(inlineScanRulesFacet);
     if (dom.dataset.tablev2From === void 0) return false;
     const rows = dom.querySelectorAll("tr");
     if (rows.length !== 1 + this.data.rows.length) return false;
@@ -3345,7 +3443,7 @@ var TableWidgetV2 = class extends WidgetType {
     for (let r = 0; r < grid.length; r++) {
       const cells2 = rows[r].children;
       grid[r].forEach((cell, col) => {
-        fillCell(cells2[col], cell, r, col);
+        fillCell(cells2[col], cell, r, col, rules);
       });
     }
     return true;
@@ -4293,12 +4391,19 @@ var highlightPlugin = ViewPlugin.fromClass(
   }
 );
 
+// src/codemirror/highlight/highlightScanRule.ts
+var highlightScanRule = {
+  name: "highlight",
+  pattern: HIGHLIGHT_RE,
+  render: (match) => `<span class="cm-highlight">${escapeText(match[1] ?? "")}</span>`
+};
+
 // src/codemirror/extensions/highlightExtension.ts
 var highlightExtension = {
   name: "@compose/highlight",
   version: "0.1.0",
   description: "Renders `==text==` with a yellow highlight background.",
-  extensions: [highlightPlugin]
+  extensions: [highlightPlugin, inlineScanRulesFacet.of(highlightScanRule)]
 };
 var FOOTNOTE_REF_RE = /(?<!\])\[\^([^\]\s]+)\](?!:)/g;
 var FOOTNOTE_DEF_LINE_RE = /^\[\^([^\]\s]+)\]:\s/;
@@ -4365,13 +4470,27 @@ var footnotePlugin = ViewPlugin.fromClass(
   }
 );
 
+// src/codemirror/footnote/footnoteScanRule.ts
+var footnoteScanRule = {
+  name: "footnote",
+  pattern: FOOTNOTE_REF_RE,
+  render: (match) => `<span class="cm-footnote-ref">${escapeText(match[1] ?? "")}</span>`
+};
+
 // src/codemirror/extensions/footnoteExtension.ts
 var footnoteExtension = {
   name: "@compose/footnote",
   version: "0.1.0",
   description: "Renders `[^id]` references and `[^id]:` definitions with tooltip jump.",
-  extensions: [footnotePlugin]
+  extensions: [footnotePlugin, inlineScanRulesFacet.of(footnoteScanRule)]
 };
+function renderMathInto(el, tex, displayMode) {
+  try {
+    katex.render(tex, el, { displayMode, throwOnError: false, output: "html" });
+  } catch {
+    el.textContent = tex;
+  }
+}
 var MathWidget = class extends WidgetType {
   constructor(tex, displayMode) {
     super();
@@ -4384,15 +4503,7 @@ var MathWidget = class extends WidgetType {
   toDOM(_view) {
     const span = document.createElement(this.displayMode ? "div" : "span");
     span.className = this.displayMode ? "cm-math-block" : "cm-math-inline";
-    try {
-      katex.render(this.tex, span, {
-        displayMode: this.displayMode,
-        throwOnError: false,
-        output: "html"
-      });
-    } catch {
-      span.textContent = this.tex;
-    }
+    renderMathInto(span, this.tex, this.displayMode);
     return span;
   }
   ignoreEvent() {
@@ -4465,12 +4576,24 @@ var mathPlugin = StateField.define({
   ]
 });
 
+// src/codemirror/math/mathScanRule.ts
+var mathScanRule = {
+  name: "math",
+  pattern: INLINE_MATH_RE,
+  render: (match) => `<span class="cm-math-inline">${escapeText(match[1] ?? "")}</span>`,
+  hydrate: (root) => {
+    for (const el of root.querySelectorAll(".cm-math-inline")) {
+      renderMathInto(el, el.textContent ?? "", false);
+    }
+  }
+};
+
 // src/codemirror/extensions/mathExtension.ts
 var mathExtension = {
   name: "@compose/math",
   version: "0.1.0",
   description: "Renders `$x$` inline and `$$x$$` block math via KaTeX.",
-  extensions: [mathPlugin]
+  extensions: [mathPlugin, inlineScanRulesFacet.of(mathScanRule)]
 };
 
 // src/codemirror/extensions/mermaidExtension.ts
@@ -4778,7 +4901,7 @@ var InlineCellSurface = class {
     }
     const model = modelAt(view.state, s.tableFrom);
     const cell = model ? cellAt(model, s.ref.row, s.ref.col) : null;
-    if (cell) renderCellInto(s.el, cell.html);
+    if (cell) renderCellInto(s.el, cell.html, view.state.facet(inlineScanRulesFacet));
   }
   cancel() {
     const s = this.edit;
@@ -5385,12 +5508,19 @@ function tableExtension() {
   };
 }
 
+// src/codemirror/wikilink/wikilinkScanRule.ts
+var wikilinkScanRule = {
+  name: "wikilink",
+  pattern: WIKILINK_RE,
+  render: (match) => `<span class="cm-wikilink">${escapeText(parseWikilinkBody(match[1] ?? "").label)}</span>`
+};
+
 // src/codemirror/extensions/wikilinkExtension.ts
 var wikilinkExtension = {
   name: "@compose/wikilink",
   version: "0.1.0",
   description: "Renders `[[target]]` / `[[target|alias]]` as clickable links.",
-  extensions: [wikilinkPlugin]
+  extensions: [wikilinkPlugin, inlineScanRulesFacet.of(wikilinkScanRule)]
 };
 var programmaticSwap = Annotation.define();
 var AUTOSAVE_DEBOUNCE_MS = 500;