@k2b/editor 0.0.0-stage → 0.1.0

package/src/markdown/pretty-table.ts

@@ -0,0 +1,220 @@
+import { dates } from "@k2b/stdlib";
+import { markdownLinkReference, renderMarkdownLink } from "@k2b/ui";
+import {
+  type EvalError,
+  type EvalResult,
+  type EvalValue,
+  evaluateFormula,
+  evaluateTableCell,
+  formatValue,
+  isFormula,
+  isTotalRow,
+  type ProgressValue,
+  parseProgressValue,
+} from "../formula";
+import { parseNoteLink } from "./lib/heading-anchors";
+import { prettyTableMessages } from "./pretty-table-messages";
+
+export type PrettyTableAlign = "left" | "right" | "center" | null;
+
+export type PrettyTableData = {
+  caption?: string;
+  headers: string[];
+  rows: string[][];
+  align?: PrettyTableAlign[];
+};
+
+/** The table and its charts consume the same values, including formula failures. */
+export const evaluatePrettyTable = (data: PrettyTableData) =>
+  data.rows.map((row, currentRow) => ({
+    isTotalRow: isTotalRow(row),
+    cells: data.headers.map((_, currentCol) => {
+      const raw = row[currentCol] ?? "";
+      const ctx = { headers: data.headers, rows: data.rows, currentRow, currentCol };
+      return { raw, result: isFormula(raw) ? evaluateFormula(raw, ctx) : evaluateTableCell(currentRow, currentCol, ctx) };
+    }),
+  }));
+
+const TAG_RE = /(^|\s)#([a-zA-Z][\w-]*(?:\/[\w-]+)*)/g;
+const NOTE_LINK_RE = /\[([^\]]+)\]\((note:\/\/[0-9a-zA-Z]{6}(?:#[^)\s]*)?)\)/g;
+// Web and mail links, and relative links to Cloud, which are references as in Book.
+const MARKDOWN_LINK_RE = /\[([^\]\n]+)\]\((https?:\/\/[^)\s]+|mailto:[^)\s]+|tel:[^)\s]+|(?![a-zA-Z][a-zA-Z\d+.-]*:|\/\/)[^)\s]+)\)/g;
+const INLINE_CODE_RE = /`([^`\n]+)`/g;
+const ISO_DATE_TIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,9})?(?:Z|[+-]\d{2}:\d{2})$/;
+export const escapeHtml = (s: string): string =>
+  s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+const alignClass = (align: PrettyTableAlign): string => {
+  if (align === "right") return " md-align-right";
+  if (align === "center") return " md-align-center";
+  return "";
+};
+
+const renderIsoDateTime = (raw: string, locale?: string): string | null => {
+  const value = raw.trim();
+  if (!ISO_DATE_TIME_RE.test(value)) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return `<time datetime="${escapeHtml(value)}" title="${escapeHtml(value)}">${escapeHtml(dates.formatDateTime(date, { locale }))}</time>`;
+};
+
+const stashHtml = (html: string, placeholders: string[]): string => {
+  placeholders.push(html);
+  return `\u0000${placeholders.length - 1}\u0000`;
+};
+
+const restoreHtml = (html: string, placeholders: string[]): string =>
+  html.replace(/\u0000(\d+)\u0000/g, (_match, index: string) => placeholders[Number(index)] ?? "");
+
+const renderInlineFormatting = (html: string): string =>
+  html
+    .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/__([^_\n]+)__/g, "<strong>$1</strong>")
+    .replace(/~~([^~\n]+)~~/g, "<s>$1</s>")
+    .replace(/(^|[\s(])\*([^*\n]+)\*/g, "$1<em>$2</em>")
+    .replace(/(^|[\s(])_([^_\n]+)_/g, "$1<em>$2</em>");
+
+const renderInlineMarkdown = (raw: string, options: PrettyTableOptions, locale?: string): string => {
+  const formattedDateTime = renderIsoDateTime(raw, locale);
+  if (formattedDateTime) return formattedDateTime;
+
+  const placeholders: string[] = [];
+  const withProtectedLinks = raw
+    .replace(NOTE_LINK_RE, (match, label: string, link: string) => {
+      const note = parseNoteLink(link);
+      if (!note) return match;
+      const href = options.resolveUrl?.("note", link) ?? link;
+      const reference = { kind: note.anchor ? ("heading" as const) : ("note" as const) };
+      return stashHtml(renderMarkdownLink({ href, html: escapeHtml(label), text: label, reference, locale }), placeholders);
+    })
+    .replace(MARKDOWN_LINK_RE, (_match, label: string, href: string) => {
+      const reference = markdownLinkReference(href);
+      const target = reference ? undefined : "_blank";
+      return stashHtml(renderMarkdownLink({ href, html: escapeHtml(label), text: label, target, reference, locale }), placeholders);
+    })
+    .replace(INLINE_CODE_RE, (_match, code: string) => stashHtml(`<code>${escapeHtml(code)}</code>`, placeholders));
+
+  const escaped = escapeHtml(withProtectedLinks);
+  const formatted = renderInlineFormatting(escaped);
+  const withTags = formatted.replace(TAG_RE, (_match, prefix: string, tag: string) => {
+    const href = options.resolveUrl?.("tag", tag.toLowerCase()) ?? "#";
+    const title = prettyTableMessages.resolve(locale ? [locale] : []).t.showNotesWithTag({ tag: tag.toLowerCase() });
+    return `${prefix}<a href="${escapeHtml(href)}" class="cm-tag-pill inline-flex items-center px-1.5 py-0.5 rounded bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900/50 no-underline align-baseline font-medium" title="${escapeHtml(title)}">#${escapeHtml(tag)}</a>`;
+  });
+
+  return restoreHtml(withTags, placeholders);
+};
+
+const localizeProgressLabel = (label: string, locale: string): string => {
+  const values = label.match(/^(-?\d+(?:\.\d+)?)\/(-?\d+(?:\.\d+)?)$/);
+  if (!values) return label;
+  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 6, useGrouping: false }).format(Number(values[1]))}/${new Intl.NumberFormat(locale, { maximumFractionDigits: 6, useGrouping: false }).format(Number(values[2]))}`;
+};
+
+const renderProgressCell = (progress: ProgressValue, alignCls: string, title: string, locale: string): string => {
+  const pct = Math.round(progress.ratio * 100);
+  return `<span class="md-table-cell md-table-progress${alignCls}" title="${escapeHtml(title)}"><span class="md-table-progress-track" aria-hidden="true"><span class="md-table-progress-fill" style="width:${pct}%"></span></span><span>${escapeHtml(localizeProgressLabel(progress.label, locale))}</span></span>`;
+};
+
+export const formatFormulaValue = (value: EvalValue, locale?: string): string => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return formatValue(value);
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 6, useGrouping: false }).format(value);
+};
+
+const errorSubject = (error: EvalError): string | undefined => {
+  const quoted = error.message.match(/["“]([^"”]+)["”]/)?.[1];
+  if (quoted) return quoted;
+  return error.message.match(/^([A-Z][A-Z0-9_]*)\s*:/)?.[1];
+};
+
+export const formatFormulaError = (error: EvalError, locale?: string): string => {
+  const t = prettyTableMessages.resolve(locale ? [locale] : []).t;
+  const name = errorSubject(error) ?? t.formulaName;
+  const message = (() => {
+    switch (error.code) {
+      case "UNKNOWN_FUNCTION":
+        return t.unknownFunction({ name });
+      case "UNKNOWN_COLUMN":
+        return t.unknownColumn({ name });
+      case "WRONG_ARG_COUNT":
+        return t.wrongArgumentCount({ name });
+      case "NON_NUMERIC":
+        return t.nonNumeric({ name });
+      case "DIV_BY_ZERO":
+        return t.divisionByZero({ name });
+      case "TYPE_ERROR":
+        return t.typeError({ name });
+      case "CIRCULAR_REF":
+        return t.circularReference({ name });
+      case "PARSE_ERROR":
+        return t.parseError;
+    }
+  })();
+  return error.suggestion ? `${message}\n→ ${t.suggestion({ value: error.suggestion })}` : message;
+};
+
+const renderBodyCellContent = (
+  cell: string,
+  alignCls: string,
+  result: EvalResult,
+  options: PrettyTableOptions,
+  locale?: string,
+  renderInline?: (raw: string) => string,
+): string => {
+  if (!isFormula(cell) || (renderInline && /^==[^=\n]+==$/.test(cell))) {
+    const content = renderInline ? (renderIsoDateTime(cell, locale) ?? renderInline(cell)) : renderInlineMarkdown(cell, options, locale);
+    return `<span class="md-table-cell${alignCls}">${content}</span>`;
+  }
+  if (result.kind === "ok") {
+    const progress = parseProgressValue(result.value);
+    if (progress) return renderProgressCell(progress, alignCls, cell, locale ?? "en");
+    return `<span class="md-table-cell md-formula-ok${alignCls}" title="${escapeHtml(cell)}"><i class="ti ti-math-function"></i>${escapeHtml(formatFormulaValue(result.value, locale))}</span>`;
+  }
+  const tooltip = formatFormulaError(result, locale);
+  return `<span class="md-table-cell md-formula-error${alignCls}" title="${escapeHtml(tooltip)}">⚠ ${escapeHtml(cell)}</span>`;
+};
+
+export type PrettyTableOptions = {
+  locale?: string;
+  renderInline?: (raw: string) => string;
+  /** Note references and lower-case tags belong to the host's routing. */
+  resolveUrl?: (kind: "note" | "tag", ref: string) => string;
+};
+
+/** One evaluated snapshot shared by full-table and editable-grid presentation.
+ * Row indexes refer to body rows; all returned HTML is view-only. */
+export const createPrettyTablePresentation = (data: PrettyTableData, options: PrettyTableOptions = {}) => {
+  const locale = options.locale ?? (typeof document === "undefined" ? "en" : document.documentElement.lang || "en");
+  const align = data.align ?? [];
+  const rows = evaluatePrettyTable(data);
+  return {
+    rows,
+    headerHtml: (column: number): string => {
+      const raw = data.headers[column] ?? "";
+      return `<span class="md-table-cell${alignClass(align[column] ?? null)}">${options.renderInline?.(raw) ?? escapeHtml(raw)}</span>`;
+    },
+    cellHtml: (row: number, column: number): string => {
+      const cell = rows[row]?.cells[column];
+      return cell
+        ? renderBodyCellContent(cell.raw, alignClass(align[column] ?? null), cell.result, options, locale, options.renderInline)
+        : "";
+    },
+  };
+};
+
+export const renderPrettyTableHtml = (data: PrettyTableData, options: PrettyTableOptions = {}): string => {
+  const presentation = createPrettyTablePresentation(data, options);
+  const caption = data.caption
+    ? `<div class="md-block-handle" data-block-name="${escapeHtml(data.caption)}">@${escapeHtml(data.caption)}</div>`
+    : "";
+  const headerHtml = data.headers.map((_, i) => `<th scope="col">${presentation.headerHtml(i)}</th>`).join("");
+  // An all-empty GFM header is the approved header-off representation.
+  const head = data.headers.some((cell) => cell.trim()) ? `<thead><tr>${headerHtml}</tr></thead>` : "";
+  const bodyHtml = presentation.rows
+    .map((row, rowIndex) => {
+      const cells = data.headers.map((_, colIdx) => `<td>${presentation.cellHtml(rowIndex, colIdx)}</td>`).join("");
+      return row.isTotalRow ? `<tr class="md-table-total-row">${cells}</tr>` : `<tr>${cells}</tr>`;
+    })
+    .join("");
+  return `${caption}<div class="md-table-wrap"><table class="md-table">${head}<tbody>${bodyHtml}</tbody></table></div>`;
+};

package/src/markdown/search-theme.ts

@@ -0,0 +1,98 @@
+import { EditorView } from "@codemirror/view";
+
+export const searchTheme = () =>
+  EditorView.theme({
+    ".cm-panels": {
+      backgroundColor: "transparent !important",
+    },
+    ".cm-panel.cm-search": {
+      margin: "0 4px",
+      padding: "0",
+      "& > *": {
+        margin: "0 4px 4px 0  !important",
+      },
+    },
+    ".cm-panels-bottom": {
+      borderTop: "none !important",
+    },
+    ".dark & .cm-textfield": {
+      background: "var(--color-gray-800)",
+    },
+    ".cm-textfield": {
+      borderRadius: "var(--radius-sm)",
+      padding: "2px 4px",
+      fontSize: "var(--text-xs)",
+      color: "var(--color-gray-500)",
+      boxShadow: "var(--shadow-sm)",
+      border: 0,
+      transition: "all 0.2s ease",
+      "&:hover": {
+        boxShadow: "var(--shadow-md)",
+      },
+      "&:focus": {
+        outline: "none",
+        boxShadow: "var(--shadow-md)",
+      },
+    },
+    ".dark & .cm-button": {
+      background: "var(--color-gray-800)",
+    },
+    ".cm-button": {
+      backgroundImage: "none",
+      borderRadius: "var(--radius-sm)",
+      boxShadow: "var(--shadow-sm)",
+      transition: "all 0.2s ease",
+      border: "none",
+      padding: "2px 4px",
+      fontSize: "var(--text-xs)",
+      color: "var(--color-gray-500)",
+      cursor: "pointer",
+      "&:hover": {
+        transform: "translateY(-1px)",
+        boxShadow: "var(--shadow-md)",
+      },
+      "&:focus": {
+        outline: "none",
+        boxShadow: "0 0 0 2px rgb(59 130 246 / 0.35)",
+      },
+    },
+    ".dark & .cm-search button[name='close']": {
+      "&:hover": {
+        backgroundColor: "var(--color-gray-800)",
+        color: "var(--color-gray-500)",
+      },
+    },
+    ".cm-search button[name='close']": {
+      backgroundColor: "transparent",
+      border: "none",
+      borderRadius: "var(--radius-sm)",
+      width: "18px",
+      height: "18px",
+      fontSize: "var(--text-xs)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "var(--color-gray-500)",
+      fontWeight: "bold",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      fontFamily: "var(--font-mono)",
+      "&:hover": {
+        backgroundColor: "var(--color-gray-100)",
+        color: "var(--color-gray-700)",
+      },
+    },
+    ".cm-search label": {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      fontSize: "13px",
+      color: "var(--color-gray-500)",
+      cursor: "pointer",
+      userSelect: "none",
+      marginRight: "12px",
+      "&:hover": {
+        color: "var(--color-gray-700)",
+      },
+    },
+  });

package/src/markdown/shared-tables.ts

@@ -0,0 +1,286 @@
+/** Notebook presentation only. The public grid owns editing, focus, history and source writes. */
+import { type EditorState, type Extension, type Range, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, ViewPlugin } from "@codemirror/view";
+import { i18n } from "@k2b/stdlib";
+import { clipboard } from "@k2b/stdlib/browser";
+import type { TableHost } from "@k2b/ui/text-editor";
+import { displayCell, findTables, type Table } from "@k2b/ui/text-editor/model";
+import { isFormula } from "../formula";
+import { refreshMarkdownDecorationsEffect } from "./_lib/cursor-zone-field";
+import { extractNamedBlocks } from "./lib/named-blocks";
+import { applyLigatures } from "./ligatures";
+import { createPrettyTablePresentation, formatFormulaValue, type PrettyTableData, type PrettyTableOptions } from "./pretty-table";
+import { formulaPreviewWidget } from "./tables";
+
+export type TablePresentationOptions = Omit<PrettyTableOptions, "locale"> & {
+  /** Pass the inherited UI locale accessor, not a separate locale signal. */
+  locale?: () => string;
+};
+
+const copyMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: { copy: "Copy result", copied: "Copied", failed: "Could not copy. Try again." },
+    de: { copy: "Ergebnis kopieren", copied: "Kopiert", failed: "Kopieren fehlgeschlagen. Erneut versuchen." },
+  },
+});
+
+/** Padding belongs exclusively to the evaluated view. Original header indexes and source stay intact. */
+const presentationData = (table: Table): PrettyTableData => {
+  const width = table.lines.reduce((width, line) => Math.max(width, line.cells.length), table.columns);
+  const values = (line: Table["lines"][number] | undefined) =>
+    Array.from({ length: width }, (_, column) => displayCell(line?.cells[column]?.text ?? ""));
+  return { headers: values(table.lines[0]), rows: table.lines.slice(2).map(values), align: table.align };
+};
+
+const captionDecorations = (state: EditorState): DecorationSet => {
+  const source = state.doc.toString();
+  const starts = new Set(findTables(source).map((table) => table.from));
+  return Decoration.set(
+    extractNamedBlocks(source)
+      .filter((block) => block.type === "table" && starts.has(block.blockStart))
+      .map((block) =>
+        // Keep the actual handle editable. namedBlocksExtension skips table handles;
+        // tableGrid starts on the header, so neither extension renders a second caption.
+        Decoration.mark({ class: "md-block-handle cm-notebook-table-caption", attributes: { "data-block-name": block.name } }).range(
+          block.handleStart,
+          block.handleEnd,
+        ),
+      ),
+    true,
+  );
+};
+
+const tableCaptions = StateField.define<DecorationSet>({
+  create: captionDecorations,
+  update: (value, tr) => (tr.docChanged ? captionDecorations(tr.state) : value),
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+const presentationTheme = EditorView.theme({
+  ".k2b-ste-table .cm-notebook-formula-editor": {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    minWidth: "100%",
+    maxWidth: "100%",
+    minHeight: "100%",
+    zIndex: "5",
+    background: "var(--k2b-surface)",
+  },
+  ".cm-notebook-active-result": {
+    position: "absolute",
+    bottom: "100%",
+    right: "0",
+    zIndex: "6",
+    padding: "2px 6px",
+    maxWidth: "18rem",
+    background: "var(--k2b-surface)",
+    border: "1px solid var(--k2b-border)",
+    borderRadius: "var(--k2b-radius-control)",
+    boxShadow: "var(--k2b-shadow-float)",
+    fontSize: "12px",
+  },
+
+  ".k2b-ste-table .k2b-ste-cell > .md-table-cell": { padding: "0", minHeight: "0" },
+  ".k2b-ste-table tr:has([data-notebook-total]) > td": { borderTop: "1px solid var(--ui-border-strong)", fontWeight: "600" },
+  ".cm-notebook-table-caption": { margin: "0" },
+  ".cm-notebook-formula-copy": {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "0 0.25rem",
+    border: "0",
+    borderRadius: "var(--k2b-radius-control)",
+    background: "transparent",
+    color: "var(--k2b-text-muted)",
+    font: "inherit",
+    cursor: "pointer",
+  },
+  ".cm-notebook-formula-copy:hover": { background: "var(--ui-data-row-hover)" },
+  ".cm-notebook-formula-copy:focus-visible": { outline: "2px solid var(--k2b-action)", outlineOffset: "2px" },
+  ".cm-notebook-formula-copy[data-failed]": { color: "var(--k2b-danger-text)" },
+});
+
+const copyButton = (element: HTMLElement, value: string, locale: string): HTMLButtonElement => {
+  const t = copyMessages.resolve([locale]).t;
+  const button = element.ownerDocument.createElement("button");
+  button.type = "button";
+  button.contentEditable = "false";
+  button.className = "cm-notebook-formula-copy";
+  button.setAttribute("aria-label", t.copy);
+  button.setAttribute("aria-live", "polite");
+  button.title = t.copy;
+  button.innerHTML = '<i class="ti ti-copy" aria-hidden="true"></i>';
+  // A copy press must not focus the surrounding editable cell (which would reveal source).
+  button.onmousedown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  button.onkeydown = (event) => event.stopPropagation();
+  button.onclick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    button.disabled = true;
+    void clipboard
+      .copy(value)
+      .then(
+        () => {
+          button.textContent = t.copied;
+          button.setAttribute("aria-label", t.copied);
+          delete button.dataset.failed;
+        },
+        () => {
+          button.textContent = t.failed;
+          button.setAttribute("aria-label", t.failed);
+          button.dataset.failed = "";
+        },
+      )
+      .finally(() => {
+        button.disabled = false;
+      });
+  };
+  return button;
+};
+
+/** The active formula stays over its reserved cell, with the evaluated result
+ * beside it. Reuse the same presentation as the inactive grid and exports. */
+const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
+  ViewPlugin.define((view) => {
+    let cell: HTMLElement | null = null;
+    let result: HTMLElement | null = null;
+    let alive = true;
+    const clear = () => {
+      cell?.classList.remove("cm-notebook-formula-editor");
+      if (cell?.parentElement) cell.parentElement.style.removeProperty("height");
+      result?.remove();
+      result = null;
+      cell = null;
+    };
+    const paint = () =>
+      queueMicrotask(() => {
+        if (!alive) return;
+        const focused = view.dom.ownerDocument.activeElement;
+        const target = focused instanceof HTMLElement && focused.matches(".k2b-ste-cell") && view.dom.contains(focused) ? focused : null;
+        if (target !== cell) clear();
+        if (!target || !isFormula(target.textContent ?? "")) {
+          clear();
+          return;
+        }
+        const wrap = target.closest<HTMLElement>(".k2b-ste-table");
+        const table = wrap && findTables(view.state.doc.toString()).find((table) => table.from === view.posAtDOM(wrap));
+        const row = Number(target.dataset.r),
+          column = Number(target.dataset.c);
+        if (!table || row === 0) {
+          clear();
+          return;
+        }
+        if (!result) {
+          const parent = target.parentElement;
+          if (!parent) return;
+          parent.style.height = `${parent.getBoundingClientRect().height}px`;
+          result = parent.ownerDocument.createElement("div");
+          result.className = "cm-notebook-active-result";
+          result.setAttribute("role", "status");
+          result.contentEditable = "false";
+          parent.append(result);
+          target.classList.add("cm-notebook-formula-editor");
+          cell = target;
+        }
+        const locale = options.locale?.() ?? (target.ownerDocument.documentElement.lang || "en");
+        const presentation = createPrettyTablePresentation(presentationData(table), { ...options, locale });
+        result.innerHTML = presentation.cellHtml(row - 1, column);
+      });
+    view.contentDOM.addEventListener("focusin", paint);
+    view.contentDOM.addEventListener("focusout", paint);
+    return {
+      update(update) {
+        if (update.docChanged) paint();
+      },
+      destroy() {
+        alive = false;
+        view.contentDOM.removeEventListener("focusin", paint);
+        view.contentDOM.removeEventListener("focusout", paint);
+        clear();
+      },
+    };
+  });
+
+/** Spread renderCell into the parent's existing TableHost; add extension only in grid mode.
+ * This factory does not install tableGrid, the old tablesExtension, or any key handlers. */
+export const createNotebookTablePresentation = (
+  options: TablePresentationOptions,
+): {
+  renderCell: NonNullable<TableHost["renderCell"]>;
+  extension: Extension;
+} => {
+  const snapshots = new WeakMap<Table, { locale: string; presentation: ReturnType<typeof createPrettyTablePresentation> }>();
+  return {
+    extension: [tableCaptions, presentationTheme, activeFormulaPreview(options)],
+    renderCell(element, _raw, table, row, column) {
+      const locale = options.locale?.() ?? (element.ownerDocument.documentElement.lang || "en");
+      let snapshot = snapshots.get(table);
+      if (!snapshot || snapshot.locale !== locale) {
+        snapshot = {
+          locale,
+          presentation: createPrettyTablePresentation(presentationData(table), { ...options, locale }),
+        };
+        snapshots.set(table, snapshot);
+      }
+      const presentation = snapshot.presentation;
+      element.innerHTML = row === 0 ? presentation.headerHtml(column) : presentation.cellHtml(row - 1, column);
+      // renderCell is also called before initial attachment; use a cell attribute
+      // rather than relying on a parent row being present.
+      const total = row > 0 && presentation.rows[row - 1]?.isTotalRow === true;
+      element.toggleAttribute("data-notebook-total", total);
+      const cell = row > 0 ? presentation.rows[row - 1]?.cells[column] : undefined;
+      if (cell && isFormula(cell.raw) && cell.result.kind === "ok") {
+        element.querySelector(".md-table-cell")?.append(copyButton(element, formatFormulaValue(cell.result.value, locale), locale));
+      }
+      // Links remain usable without focusing the cell and replacing the anchor
+      // with raw source before the browser can complete its click.
+      for (const link of element.querySelectorAll<HTMLAnchorElement>("a")) {
+        link.contentEditable = "false";
+        link.onmousedown = (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        };
+        link.onclick = (event) => event.stopPropagation();
+        link.onkeydown = (event) => event.stopPropagation();
+      }
+      applyLigatures(element);
+    },
+  };
+};
+
+/** Source result chips only: no block replacement, atomic ranges or arrow navigation.
+ * Install in Markdown mode. A host with mixed source/grid areas can restrict the
+ * source-visible tables with sourceVisible; never decorate a replaced grid range. */
+export const notebookSourceFormulasExtension = (
+  options: { locale?: () => string; sourceVisible?: (state: EditorState, table: Table) => boolean } = {},
+): Extension => {
+  const decorate = (state: EditorState): DecorationSet => {
+    const ranges: Range<Decoration>[] = [];
+    const locale = options.locale?.() ?? (typeof document === "undefined" ? "en" : document.documentElement.lang || "en");
+    for (const table of findTables(state.doc.toString())) {
+      if (options.sourceVisible && !options.sourceVisible(state, table)) continue;
+      const presentation = createPrettyTablePresentation(presentationData(table), { locale });
+      table.lines.slice(2).forEach((line, row) => {
+        line.cells.forEach((cell, column) => {
+          const value = presentation.rows[row]?.cells[column];
+          if (!value || !isFormula(value.raw)) return;
+          ranges.push(Decoration.widget({ widget: formulaPreviewWidget(value.result, locale), side: 1 }).range(cell.to));
+        });
+      });
+    }
+    return Decoration.set(ranges, true);
+  };
+  return StateField.define<DecorationSet>({
+    create: decorate,
+    update: (value, tr) =>
+      tr.docChanged || (options.sourceVisible && tr.selection) || tr.effects.some((effect) => effect.is(refreshMarkdownDecorationsEffect))
+        ? decorate(tr.state)
+        : value,
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};