@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/src/editor/editorStyles.ts

@@ -15,18 +15,53 @@ export interface EditorCSSOptions {
   bodyFontFamily?: string;
   /** CSS font-family string for headings */
   headingFontFamily?: string;
+  /** Fullscreen mode: fill the container instead of min/max pixel heights */
+  fullscreen?: boolean;
+  /** Bubble/popup fade duration in ms; 0 = animation none (motion silenced) */
+  motionMs?: number;
+  /** Per-instance scope class so bubble motion rules do not cross editors */
+  scopeClass?: string;
 }
 
 export function getEditorCSS(options: EditorCSSOptions = {}): string {
-  const { minHeight = 150, maxHeight, bodyFontFamily, headingFontFamily } = options;
+  const {
+    minHeight = 150,
+    maxHeight,
+    bodyFontFamily,
+    headingFontFamily,
+    fullscreen,
+    motionMs = 120,
+    scopeClass,
+  } = options;
   const bodyFont = bodyFontFamily || "inherit";
   const headingFont = headingFontFamily || bodyFont;
+  const bubbleScope = scopeClass ? `.${scopeClass} .rt-bubble-menu` : ".rt-bubble-menu";
 
   return `
+    /*
+      LC-24 A-ENTEREXIT: the bubble-menu plugin persists its element and
+      flips inline visibility/opacity on show/hide. A transition on the same
+      element pairs enter AND exit: the destination-state selector (inline
+      style attribute) picks instant visibility on show and delayed
+      visibility on hide so the exit fade stays visible. motionMs 0
+      (animation none) silences both.
+    */
+    ${bubbleScope} {
+      transition: opacity ${motionMs}ms ease, transform ${motionMs}ms ease,
+        visibility 0s linear ${motionMs}ms;
+    }
+    ${bubbleScope}[style*="visibility: visible"] {
+      transition: opacity ${motionMs}ms ease, transform ${motionMs}ms ease, visibility 0s;
+    }
+
     .ProseMirror {
       padding: 12px 12px 12px 16px;
-      min-height: ${minHeight}px;
-      ${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ""}
+      ${
+        fullscreen
+          ? "min-height: 100%;"
+          : `min-height: ${minHeight}px;
+      ${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ""}`
+      }
       outline: none;
       font-family: ${bodyFont};
       color: var(--color12);
@@ -34,7 +69,35 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
     .ProseMirror:focus {
       outline: none;
     }
+    /* Axiom 12 LEGIBLE FLOOR: non-removable >=2px focus ring on the
+       keyboard-focused editing surface */
+    .ProseMirror:focus-visible {
+      outline: 2px solid var(--color8);
+      outline-offset: -2px;
+    }
+    /* Mention chips (@ mention nodes) */
+    .ProseMirror .rt-mention {
+      background-color: var(--color4);
+      border-radius: 4px;
+      padding: 0.1em 0.3em;
+      color: var(--color12);
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    /* Attachment chips (non-image file uploads) */
+    .ProseMirror a.rt-attachment {
+      display: inline-flex;
+      align-items: center;
+      background-color: var(--color3);
+      border: 1px solid var(--color6);
+      border-radius: 999px;
+      padding: 0.05em 0.6em;
+      text-decoration: none;
+      color: var(--color12);
+    }
     .ProseMirror p {
+      /* @tamagui/core reset.css does p { all: unset } (display -> inline); restore block flow */
+      display: block;
       margin: 0 0 0.5em 0;
     }
     .ProseMirror p:last-child {
@@ -80,7 +143,10 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
     }
     .ProseMirror ul,
     .ProseMirror ol {
-      padding-left: 1em;
+      /* reset.css also unsets ul/ol display; restore block flow.
+         Logical padding so list indent mirrors in RTL content. */
+      display: block;
+      padding-inline-start: 1em;
       margin: 0.5em 0;
     }
     .ProseMirror ul {
@@ -104,8 +170,8 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
     }
     .ProseMirror ul[data-type="taskList"] {
       list-style: none;
-      padding-left: 0;
-      margin-left: 0;
+      padding-inline-start: 0;
+      margin-inline-start: 0;
     }
     .ProseMirror ul[data-type="taskList"] li {
       display: flex;
@@ -130,16 +196,17 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
       border-radius: 4px;
     }
     .ProseMirror img.ProseMirror-selectednode {
-      outline: 2px solid var(--blue10, #0066cc);
+      outline: 2px solid var(--blue10);
     }
     .ProseMirror blockquote {
-      border-left: 3px solid var(--color6, #ccc);
-      padding-left: 1em;
+      /* Logical start rail so the quote accent mirrors in RTL. */
+      border-inline-start: 3px solid var(--color6);
+      padding-inline-start: 1em;
       margin: 0.5em 0;
-      color: var(--color10, #666);
+      color: var(--color10);
     }
     .ProseMirror code {
-      background-color: var(--color4, rgba(0,0,0,0.05));
+      background-color: var(--color4);
       padding: 0.15em 0.35em;
       border-radius: 4px;
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -147,8 +214,8 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
       word-break: break-word;
     }
     .ProseMirror pre {
-      background-color: var(--color3, rgba(0,0,0,0.04));
-      border: 1px solid var(--color5, rgba(0,0,0,0.08));
+      background-color: var(--color3);
+      border: 1px solid var(--color5);
       padding: 0.75em 1em;
       border-radius: 4px;
       overflow-x: auto;
@@ -168,25 +235,34 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
       white-space: pre;
     }
     .ProseMirror a {
-      color: var(--blue10, #0066cc);
+      color: var(--blue10);
       text-decoration: underline;
     }
+    /* Highlight marks: the swatch palette rides scheme-aware theme ramps
+       (radix step-5 washes — pastel in light, deep-dim in dark), so the
+       inherited scheme ink stays legible on them; no forced ink needed. */
     .ProseMirror hr {
       border: none;
-      border-top: 2px solid var(--color6, #ccc);
+      border-top: 2px solid var(--color6);
       margin: 1em 0;
     }
     .ProseMirror p.is-editor-empty:first-child::before {
       content: attr(data-placeholder);
-      color: var(--color8, #aaa);
+      /* Axiom 12: placeholder is an owned text role — color11 is the muted
+         step that still clears 4.5:1 on the color2 editor surface in both
+         schemes (color10 measured 3.76:1 light / 3.87:1 dark) */
+      color: var(--color11);
       pointer-events: none;
-      float: left;
+      float: inline-start;
       height: 0;
     }
 
-    /* Block drag handle */
+    /* Block drag handle (decorative fade stops at animation none) */
+    .block-drag-handle {
+      transition: opacity ${motionMs}ms ease;
+    }
     .block-drag-handle:hover {
-      background-color: var(--color4, rgba(0,0,0,0.05));
+      background-color: var(--color4);
       opacity: 1 !important;
     }
     .block-drag-handle:active {
@@ -202,18 +278,18 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
     }
     .ProseMirror td,
     .ProseMirror th {
-      border: 1px solid var(--color6, #ddd);
+      border: 1px solid var(--color6);
       padding: 0.4em 0.6em;
       vertical-align: top;
       position: relative;
       min-width: 80px;
     }
     .ProseMirror th {
-      background-color: var(--color3, #f5f5f5);
+      background-color: var(--color3);
       font-weight: 600;
     }
     .ProseMirror .selectedCell {
-      background-color: var(--blue3, rgba(0, 102, 204, 0.08));
+      background-color: var(--blue3);
     }
     .ProseMirror .column-resize-handle {
       position: absolute;
@@ -221,39 +297,147 @@ export function getEditorCSS(options: EditorCSSOptions = {}): string {
       top: 0;
       bottom: 0;
       width: 4px;
-      background-color: var(--blue10, #0066cc);
+      background-color: var(--blue10);
       pointer-events: none;
     }
     .ProseMirror.resize-cursor {
       cursor: col-resize;
     }
 
+    /* Inline math (KaTeX-rendered atom; raw TeX while loading) */
+    .ProseMirror .rt-math-inline {
+      display: inline-block;
+      padding: 0 0.15em;
+      border-radius: 4px;
+      cursor: pointer;
+      max-width: 100%;
+    }
+    .ProseMirror .rt-math-inline.ProseMirror-selectednode {
+      outline: 2px solid var(--blue10);
+    }
+    .ProseMirror .rt-math-inline.rt-math-error {
+      color: var(--red10);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.875em;
+      text-decoration: underline dashed var(--red10);
+      text-underline-offset: 3px;
+    }
+    .ProseMirror .rt-math-inline.rt-math-empty {
+      color: var(--color10);
+      font-style: italic;
+      border: 1px dashed var(--color8);
+      padding: 0 0.4em;
+    }
+    .ProseMirror .katex { font-size: 1.06em; }
+
+    /* Code block wrapper with live preview pane (mermaid / math) */
+    .ProseMirror .rt-codeblock { margin: 0.5em 0; }
+    .ProseMirror .rt-codeblock pre { margin: 0; }
+    .ProseMirror .rt-block-preview[data-state="hidden"] { display: none; }
+    .ProseMirror .rt-codeblock:has(.rt-block-preview:not([data-state="hidden"])) pre {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .ProseMirror .rt-block-preview {
+      border: 1px solid var(--color5);
+      border-top: 1px dashed var(--color6);
+      border-radius: 0 0 4px 4px;
+      padding: 0.75em 1em;
+      background-color: var(--color2);
+      overflow-x: auto;
+    }
+    .ProseMirror .rt-preview-diagram { display: flex; justify-content: center; }
+    .ProseMirror .rt-preview-diagram svg { max-width: 100%; height: auto; }
+    .ProseMirror .rt-preview-math .katex-display { margin: 0.25em 0; }
+    .ProseMirror .rt-preview-error {
+      color: var(--red10);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.8125em;
+      white-space: pre-wrap;
+    }
+    .ProseMirror .rt-preview-hint {
+      color: var(--color10);
+      font-size: 0.8125em;
+      font-style: italic;
+    }
+
+    /* Collapsible details sections (GitLab <details> parity) */
+    .ProseMirror [data-type="details"] {
+      display: flex;
+      gap: 0.4em;
+      border: 1px solid var(--color5);
+      border-radius: 4px;
+      padding: 0.5em 0.75em;
+      margin: 0.5em 0;
+    }
+    .ProseMirror [data-type="details"] > button {
+      flex: 0 0 auto;
+      width: 1.5em;
+      height: 1.5em;
+      margin-top: 0.1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--color11);
+      font-size: 1em;
+      padding: 0;
+    }
+    .ProseMirror [data-type="details"] > button:hover {
+      background-color: var(--color4);
+    }
+    .ProseMirror [data-type="details"] > button::before {
+      content: "\\25B8";
+      display: block;
+      transition: transform ${motionMs}ms ease;
+    }
+    .ProseMirror [data-type="details"].is-open > button::before {
+      transform: rotate(90deg);
+    }
+    .ProseMirror [data-type="details"] > div {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .ProseMirror [data-type="details"] summary {
+      display: block;
+      font-weight: 600;
+      list-style: none;
+    }
+    .ProseMirror [data-type="details"] summary::-webkit-details-marker { display: none; }
+    .ProseMirror [data-type="detailsContent"] { margin-top: 0.25em; }
+    /* The tamagui reset defeats the UA's [hidden] display:none — restore
+       it so the details toggle actually collapses the content */
+    .ProseMirror [data-type="detailsContent"][hidden] { display: none; }
+
     /* Syntax highlighting (lowlight / highlight.js compatible) */
     .ProseMirror pre .hljs-comment,
-    .ProseMirror pre .hljs-quote { color: var(--color9, #6a737d); font-style: italic; }
+    .ProseMirror pre .hljs-quote { color: var(--color9); font-style: italic; }
     .ProseMirror pre .hljs-keyword,
     .ProseMirror pre .hljs-selector-tag,
-    .ProseMirror pre .hljs-meta { color: var(--purple10, #d73a49); }
+    .ProseMirror pre .hljs-meta { color: var(--purple10); }
     .ProseMirror pre .hljs-string,
     .ProseMirror pre .hljs-attr,
     .ProseMirror pre .hljs-template-tag,
-    .ProseMirror pre .hljs-template-variable { color: var(--green10, #22863a); }
+    .ProseMirror pre .hljs-template-variable { color: var(--green10); }
     .ProseMirror pre .hljs-number,
     .ProseMirror pre .hljs-literal,
     .ProseMirror pre .hljs-type,
-    .ProseMirror pre .hljs-params { color: var(--blue10, #005cc5); }
+    .ProseMirror pre .hljs-params { color: var(--blue10); }
     .ProseMirror pre .hljs-built_in,
-    .ProseMirror pre .hljs-builtin-name { color: var(--orange10, #e36209); }
+    .ProseMirror pre .hljs-builtin-name { color: var(--orange10); }
     .ProseMirror pre .hljs-title,
-    .ProseMirror pre .hljs-section { color: var(--blue10, #005cc5); font-weight: 600; }
+    .ProseMirror pre .hljs-section { color: var(--blue10); font-weight: 600; }
     .ProseMirror pre .hljs-name,
-    .ProseMirror pre .hljs-tag { color: var(--green10, #22863a); }
-    .ProseMirror pre .hljs-attribute { color: var(--purple10, #6f42c1); }
+    .ProseMirror pre .hljs-tag { color: var(--green10); }
+    .ProseMirror pre .hljs-attribute { color: var(--purple10); }
     .ProseMirror pre .hljs-variable,
     .ProseMirror pre .hljs-symbol,
-    .ProseMirror pre .hljs-bullet { color: var(--orange10, #e36209); }
-    .ProseMirror pre .hljs-addition { color: var(--green10, #22863a); background-color: rgba(34,134,58,0.1); }
-    .ProseMirror pre .hljs-deletion { color: var(--red10, #b31d28); background-color: rgba(179,29,40,0.1); }
+    .ProseMirror pre .hljs-bullet { color: var(--orange10); }
+    .ProseMirror pre .hljs-addition { color: var(--green10); background-color: color-mix(in srgb, var(--green10) 12%, transparent); }
+    .ProseMirror pre .hljs-deletion { color: var(--red10); background-color: color-mix(in srgb, var(--red10) 12%, transparent); }
     .ProseMirror pre .hljs-emphasis { font-style: italic; }
     .ProseMirror pre .hljs-strong { font-weight: bold; }
   `;

package/src/editor/emoji.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import {
+  EmojiSuggestion,
+  insertEmoji,
+  loadEmojiIndex,
+  searchEmoji,
+  type EmojiEntry,
+} from "./emoji";
+
+const ENTRIES: EmojiEntry[] = [
+  { name: "smile", char: "😄", keywords: ["face", "happy"] },
+  { name: "smiley", char: "😃", keywords: ["face", "happy"] },
+  { name: "sweat_smile", char: "😅", keywords: ["face", "hot"] },
+  { name: "cat", char: "🐱", keywords: ["animal", "meow"] },
+  { name: "tada", char: "🎉", keywords: ["party", "celebration", "smashing"] },
+];
+
+describe("searchEmoji", () => {
+  it("returns the head of the dataset for an empty query", () => {
+    expect(searchEmoji(ENTRIES, "", 3).map((e) => e.name)).toEqual([
+      "smile",
+      "smiley",
+      "sweat_smile",
+    ]);
+  });
+
+  it("ranks exact name over prefix over substring over keyword", () => {
+    const names = searchEmoji(ENTRIES, "smile").map((e) => e.name);
+    // exact: smile; prefix: smiley; substring: sweat_smile; keyword: none
+    expect(names).toEqual(["smile", "smiley", "sweat_smile"]);
+  });
+
+  it("falls back to keyword matches", () => {
+    const names = searchEmoji(ENTRIES, "party").map((e) => e.name);
+    expect(names).toEqual(["tada"]);
+  });
+
+  it("is case-insensitive and respects the limit", () => {
+    expect(searchEmoji(ENTRIES, "SMI", 2).map((e) => e.name)).toEqual(["smile", "smiley"]);
+  });
+
+  it("returns empty for a no-match query", () => {
+    expect(searchEmoji(ENTRIES, "zzzz")).toEqual([]);
+  });
+});
+
+describe("loadEmojiIndex", () => {
+  it("lazy-loads the real dataset with usable shortnames", async () => {
+    const entries = await loadEmojiIndex();
+    expect(entries.length).toBeGreaterThan(1000);
+    const thumbsup = entries.find((e) => e.name === "+1");
+    expect(thumbsup?.char).toBe("👍");
+    // every entry is insertable
+    expect(entries.every((e) => e.name.length > 0 && e.char!.length > 0)).toBe(true);
+  });
+
+  it("caches the dataset promise (single fetch per session)", () => {
+    expect(loadEmojiIndex()).toBe(loadEmojiIndex());
+  });
+});
+
+describe("EmojiSuggestion extension", () => {
+  it("configures the : trigger on its own plugin key", () => {
+    expect(EmojiSuggestion.name).toBe("emojiSuggestion");
+    expect(EmojiSuggestion.options.suggestion.char).toBe(":");
+    // must not collide with the slash menu's default Suggestion key
+    expect(EmojiSuggestion.options.suggestion.pluginKey).toBeDefined();
+  });
+
+  it("resolves items through the lazy dataset", async () => {
+    const items = await EmojiSuggestion.options.suggestion.items({ query: "tada" });
+    expect(items[0]?.char).toBe("🎉");
+  });
+
+  it("insertEmoji replaces the trigger range with the unicode character", () => {
+    const editor = new Editor({
+      element: document.createElement("div"),
+      extensions: [StarterKit],
+      content: "<p>hello :sm</p>",
+    });
+    // ":sm" occupies positions 7-10 in <p>hello :sm</p>
+    insertEmoji(editor, { from: 7, to: 10 }, "😄");
+    expect(editor.getText()).toBe("hello 😄");
+    editor.destroy();
+  });
+});

package/src/editor/emoji.ts

@@ -0,0 +1,147 @@
+/**
+ * `:emoji:` autocomplete for the rich text editor (web) — GitLab parity.
+ *
+ * Third suggestion source on the shared LC-16 popup (same rows, chrome,
+ * keyboard handling, and ARIA roles as slash commands and @ mentions).
+ * Typing `:` opens a searchable shortname list; selecting inserts the plain
+ * unicode character (like GitLab's editor), so the markdown round-trip is
+ * lossless by construction — an emoji is just text.
+ *
+ * Bundle discipline: the emoji dataset (emojilib, ~32 KB gz) is NOT in the
+ * editor chunk. It is dynamically imported on the first `:` trigger and
+ * cached for the session.
+ */
+
+import { Extension } from "@tiptap/core";
+import type { Editor, Range } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+import { t } from "../shared/t";
+import { createSuggestionRenderer, getSuggestionChrome } from "./suggestionPopup";
+
+// ===========================================================================
+// Dataset (lazy)
+// ===========================================================================
+
+export interface EmojiEntry {
+  /** Shortname, e.g. "thumbsup" (typed between colons) */
+  name: string;
+  /** The unicode character inserted into the document */
+  char: string;
+  /** Search keywords from the dataset */
+  keywords: string[];
+}
+
+interface EmojilibRecord {
+  char?: string;
+  keywords?: string[];
+}
+
+let emojiIndexPromise: Promise<EmojiEntry[]> | null = null;
+
+/**
+ * Loads and flattens the emojilib dataset on first use. The dynamic import
+ * keeps the JSON out of the editor chunk (zero eager bytes); the promise is
+ * cached so the fetch happens at most once per session.
+ */
+export function loadEmojiIndex(): Promise<EmojiEntry[]> {
+  if (!emojiIndexPromise) {
+    emojiIndexPromise = import("emojilib/emojis.json").then((mod: any) => {
+      const lib = (mod?.default ?? mod) as Record<string, EmojilibRecord>;
+      const entries: EmojiEntry[] = [];
+      for (const [name, value] of Object.entries(lib)) {
+        if (!value?.char) continue;
+        entries.push({ name, char: value.char, keywords: value.keywords ?? [] });
+      }
+      return entries;
+    });
+  }
+  return emojiIndexPromise;
+}
+
+/** Test seam: reset the cached dataset promise */
+export function resetEmojiIndexForTesting(): void {
+  emojiIndexPromise = null;
+}
+
+// ===========================================================================
+// Search
+// ===========================================================================
+
+/**
+ * Ranked shortname search: exact name, name prefix, name substring, then
+ * keyword prefix/substring. Ties keep dataset order (faces first), matching
+ * the GitLab popup's feel. An empty query lists the head of the dataset.
+ */
+export function searchEmoji(entries: EmojiEntry[], query: string, limit = 20): EmojiEntry[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return entries.slice(0, limit);
+
+  const tiers: EmojiEntry[][] = [[], [], [], []];
+  for (const entry of entries) {
+    const name = entry.name.toLowerCase();
+    if (name === q) {
+      tiers[0]!.push(entry);
+    } else if (name.startsWith(q)) {
+      tiers[1]!.push(entry);
+    } else if (name.includes(q)) {
+      tiers[2]!.push(entry);
+    } else if (entry.keywords.some((keyword) => keyword.toLowerCase().startsWith(q))) {
+      tiers[3]!.push(entry);
+    }
+    if (tiers[0]!.length + tiers[1]!.length >= limit) break;
+  }
+  return tiers.flat().slice(0, limit);
+}
+
+// ===========================================================================
+// Extension
+// ===========================================================================
+
+/** Inserts the unicode character, replacing the `:query` trigger text */
+export function insertEmoji(editor: Editor, range: Range, char: string): void {
+  editor.chain().focus().insertContentAt(range, char).run();
+}
+
+const EmojiSuggestionPluginKey = new PluginKey("emojiSuggestion");
+
+/**
+ * `:` trigger suggestion menu. Own plugin key — the slash menu owns the
+ * default Suggestion key and the two must coexist.
+ */
+export const EmojiSuggestion = Extension.create({
+  name: "emojiSuggestion",
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: ":",
+        pluginKey: EmojiSuggestionPluginKey,
+        startOfLine: false,
+        items: async ({ query }: { query: string }): Promise<EmojiEntry[]> =>
+          searchEmoji(await loadEmojiIndex(), query),
+        render: createSuggestionRenderer<EmojiEntry>({
+          toRow: (item) => ({
+            key: item.name,
+            title: `:${item.name}:`,
+            description: item.keywords.slice(0, 3).join(", ") || undefined,
+            icon: item.char,
+          }),
+          getChrome: getSuggestionChrome,
+          getEmptyLabel: () => t("No results"),
+        }),
+        command: ({ editor, range, props }: { editor: Editor; range: Range; props: EmojiEntry }) =>
+          insertEmoji(editor, range, props.char),
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});

package/src/editor/emojilib.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Ambient declaration for the emojilib v2 dataset JSON, imported directly
+ * (subpath) so the lazy emoji chunk skips index.js and ordered.json.
+ */
+declare module "emojilib/emojis.json" {
+  const lib: Record<
+    string,
+    {
+      keywords?: string[];
+      char?: string;
+      fitzpatrick_scale?: boolean;
+      category?: string;
+    }
+  >;
+  export default lib;
+}

package/src/editor/lazyKatex.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { mountKatexHtml, renderKatexHtml } from "./lazyKatex";
+
+describe("renderKatexHtml", () => {
+  it("renders valid TeX to KaTeX markup", async () => {
+    const result = await renderKatexHtml("x^2");
+    expect(result.ok).toBe(true);
+    if (result.ok) expect(result.html).toContain("katex");
+  });
+
+  it("renders display mode for block math", async () => {
+    const result = await renderKatexHtml("\\sum_{i=0}^n i", { displayMode: true });
+    expect(result.ok).toBe(true);
+    if (result.ok) expect(result.html).toContain("katex-display");
+  });
+
+  it("returns the parse error for invalid TeX (Axiom 6: never blank)", async () => {
+    const result = await renderKatexHtml("\\undefinedmacro{");
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toMatch(/parse error/i);
+  });
+});
+
+describe("mountKatexHtml", () => {
+  it("mounts markup as real nodes", async () => {
+    const result = await renderKatexHtml("x^2");
+    const container = document.createElement("span");
+    if (result.ok) mountKatexHtml(container, result.html);
+    expect(container.querySelector(".katex")).not.toBeNull();
+  });
+
+  it("strips executable elements (defense in depth)", () => {
+    const container = document.createElement("span");
+    mountKatexHtml(container, '<span class="katex">ok</span><script>alert(1)</script>');
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.querySelector(".katex")?.textContent).toBe("ok");
+  });
+});