@ootc/markdown 0.1.0 → 0.2.0

package/README.md

@@ -8,6 +8,18 @@ React components for markdown rendering and editing.
 pnpm add @ootc/markdown
 ```
 
+The heavy features are opt-in and ship as **optional peer dependencies** — install only
+what you use:
+
+```bash
+pnpm add mermaid                          # diagrams
+pnpm add @wooorm/starry-night             # syntax highlighting
+pnpm add katex remark-math rehype-katex   # math
+```
+
+Nothing above is required. Without them the preview still renders GFM markdown; code
+fences render unhighlighted and ```mermaid fences render as ordinary code blocks.
+
 ## Usage
 
 ```tsx
@@ -16,12 +28,20 @@ import {MarkdownPreview} from '@ootc/markdown/preview';
 import {MarkdownEditor} from '@ootc/markdown/editor';
 import '@ootc/markdown/style.css';
 
+// opt in to only what you need
+import {mermaidPlugin} from '@ootc/markdown/plugin-mermaid';
+import {highlightPlugin} from '@ootc/markdown/plugin-highlight';
+import {katexPlugin} from '@ootc/markdown/plugin-katex';
+import '@ootc/markdown/plugin-mermaid.css';
+
+const plugins = [mermaidPlugin, highlightPlugin, katexPlugin];
+
 export default function Demo() {
   return (
     <div style={{display: 'grid', gap: 16}}>
-      <MarkdownPreview content={'# Hello\n\n```ts\nconst x = 1;\n```'} />
-      <CodeBlock code={'console.log("hi")'} language="ts" />
-      <MarkdownEditor value={'# Edit me'} onChange={() => {}} />
+      <MarkdownPreview content={'# Hello\n\n```ts\nconst x = 1;\n```'} plugins={plugins} />
+      <CodeBlock code={'console.log("hi")'} language="ts" plugins={[highlightPlugin]} />
+      <MarkdownEditor value={'# Edit me'} onChange={() => {}} plugins={plugins} />
     </div>
   );
 }
@@ -33,6 +53,9 @@ export default function Demo() {
 - `@ootc/markdown/code`: `CodeBlock`
 - `@ootc/markdown/preview`: `MarkdownPreview`
 - `@ootc/markdown/editor`: `MarkdownEditor`
+- `@ootc/markdown/plugin-mermaid`: `mermaidPlugin` — renders ```mermaid fences as diagrams
+- `@ootc/markdown/plugin-highlight`: `highlightPlugin` — syntax highlighting via starry-night
+- `@ootc/markdown/plugin-katex`: `katexPlugin` — `$inline$` and `$$display$$` math
 
 Each entrypoint has both a named and a default export, so it works with `React.lazy` directly:
 
@@ -51,13 +74,36 @@ export function Doc({content}: {content: string}) {
 }
 ```
 
-### Lazy loading
+### Opt-in dependencies
+
+The three heavy dependencies are **not bundled** into this package. Each lives behind
+its own entrypoint and is an optional peer dependency, so a bundler can prove it
+unreachable when you don't pass the plugin:
 
-The heaviest dependencies are behind dynamic imports and are fetched only when they are actually needed:
+| Plugin | Peer dependency | Cost when opted in |
+| --- | --- | --- |
+| `plugin-mermaid` | `mermaid` | ~2.8 MB, loaded lazily on the first diagram |
+| `plugin-highlight` | `@wooorm/starry-night` | ~1.7 MB of grammars, loaded lazily on the first code block |
+| `plugin-katex` | `katex`, `remark-math`, `rehype-katex` | eager; KaTeX fonts load as needed |
 
-- **Syntax highlighting grammars** (`@wooorm/starry-night`, ~1.7 MB) load when the first code block renders. They are shared process-wide, so subsequent code blocks reuse them.
-- **Mermaid** loads when a rendered document contains a `mermaid` code fence.
-- **KaTeX fonts** ship as separate font files under `dist/fonts/` rather than base64 data URIs, so the browser downloads only the faces a page actually uses.
+Mermaid and the highlighting grammars stay behind dynamic imports even when enabled,
+so they never enter your initial bundle. KaTeX loads eagerly with the plugin because
+it participates in the markdown pipeline itself.
+
+Plugins are consulted in array order; the first to claim a fence wins.
+
+### Migrating from 0.1.x
+
+`0.2.0` makes diagrams, highlighting and math opt-in. Previously they were always on.
+To restore the old behavior, install the peers and pass all three plugins:
+
+```tsx
+import {mermaidPlugin} from '@ootc/markdown/plugin-mermaid';
+import {highlightPlugin} from '@ootc/markdown/plugin-highlight';
+import {katexPlugin} from '@ootc/markdown/plugin-katex';
+
+<MarkdownPreview content={md} plugins={[mermaidPlugin, highlightPlugin, katexPlugin]} />
+```
 
 ### MarkdownPreview
 
@@ -65,6 +111,7 @@ Props:
 - `content: string`
 - `compact?: boolean`
 - `theme?: "system" | "light" | "dark"` (default: `"system"`)
+- `plugins?: MarkdownPlugin[]`
 
 `compact` removes default spacing and reduces vertical rhythm for tighter layouts.
 
@@ -86,6 +133,7 @@ Props:
 - `disabled?: boolean`
 - `rows?: number`
 - `className?: string`
+- `plugins?: MarkdownPlugin[]` (forwarded to the preview pane)
 
 ### CodeBlock
 
@@ -94,6 +142,7 @@ Props:
 - `language: string`
 - `className?: string`
 - `theme?: "system" | "light" | "dark"` (default: `"system"`)
+- `plugins?: MarkdownPlugin[]` (only `highlight` hooks are used)
 
 ## Styles
 
@@ -107,12 +156,17 @@ Styles are split per entrypoint, so you can import only what the page uses:
 | `@ootc/markdown/code.css` | `CodeBlock` |
 | `@ootc/markdown/preview.css` | `MarkdownPreview` (includes `CodeBlock` and KaTeX) |
 | `@ootc/markdown/editor.css` | `MarkdownEditor` (includes both of the above) |
+| `@ootc/markdown/plugin-mermaid.css` | diagram container, pan/zoom (needed with `mermaidPlugin`) |
 
 ```ts
 import '@ootc/markdown/preview.css';
 ```
 
-Each of these is a thin file that `@import`s the underlying stylesheets in `dist/css/`, which in turn reference the font files in `dist/fonts/`. Bundlers resolve and copy both automatically.
+Each of these is a thin file that `@import`s the underlying stylesheets in `dist/css/`.
+Bundlers resolve and copy them automatically.
+
+`plugin-katex` has no stylesheet of its own — it imports `katex/dist/katex.min.css`
+from your own KaTeX install, so the fonts come from there rather than from this package.
 
 ## Dark Mode
 

package/dist/CodeBlock-BquZ4WRk.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("./jsx-runtime-nZSsnGb7.cjs"),a=require("react"),k="_container_8h8ah_1",S="_loadingCodeBlock_8h8ah_5",E="_copyButton_8h8ah_17",L="_copyButtonSingleLine_8h8ah_31",R="_codeBlock_8h8ah_41",i={container:k,loadingCodeBlock:S,copyButton:E,copyButtonSingleLine:L,codeBlock:R};function $({code:t,language:s,className:r="",theme:c="system",plugins:h}){const[y,l]=a.useState(""),[m,u]=a.useState(!0),[f,p]=a.useState(!1),B=!t.trimEnd().includes(`
+`);a.useEffect(()=>{let n=!1;const g=(h??[]).map(e=>e.highlight).filter(e=>!!e);if(g.length===0){l(d(t)),u(!1);return}u(!0);async function C(){try{for(const e of g){const x=await e(t,s);if(n)return;if(x!==null){l(x);return}}l(d(t))}catch(e){console.error("Syntax highlighting error:",e),n||l(d(t))}finally{n||u(!1)}}return C(),()=>{n=!0}},[t,s,h]);const _=async()=>{try{await navigator.clipboard.writeText(t),p(!0),setTimeout(()=>p(!1),2e3)}catch(n){console.error("Failed to copy:",n)}},j=()=>o.jsxRuntimeExports.jsx("code",{dangerouslySetInnerHTML:{__html:y}});return m?o.jsxRuntimeExports.jsx("div",{className:i.container,"data-theme":c==="system"?void 0:c,children:o.jsxRuntimeExports.jsx("pre",{className:`${i.loadingCodeBlock} ${r}`,children:o.jsxRuntimeExports.jsx("code",{children:t})})}):o.jsxRuntimeExports.jsxs("div",{className:i.container,"data-theme":c==="system"?void 0:c,children:[o.jsxRuntimeExports.jsx("button",{onClick:_,className:`${i.copyButton} ${B?i.copyButtonSingleLine:""}`,title:"Copy code",children:f?"Copied!":"Copy"}),o.jsxRuntimeExports.jsx("pre",{className:`${i.codeBlock} ${r}`,children:j()})]})}function d(t){const s={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return t.replace(/[&<>"']/g,r=>s[r])}exports.CodeBlock=$;

package/dist/CodeBlock-DSwq2gw5.js

@@ -0,0 +1,74 @@
+import { j as o } from "./jsx-runtime-DXgJBoQh.js";
+import { useState as h, useEffect as j } from "react";
+const L = "_container_8h8ah_1", S = "_loadingCodeBlock_8h8ah_5", $ = "_copyButton_8h8ah_17", v = "_copyButtonSingleLine_8h8ah_31", N = "_codeBlock_8h8ah_41", i = {
+  container: L,
+  loadingCodeBlock: S,
+  copyButton: $,
+  copyButtonSingleLine: v,
+  codeBlock: N
+};
+function H({ code: t, language: c, className: r = "", theme: s = "system", plugins: u }) {
+  const [f, l] = h(""), [m, a] = h(!0), [B, g] = h(!1), _ = !t.trimEnd().includes(`
+`);
+  j(() => {
+    let n = !1;
+    const p = (u ?? []).map((e) => e.highlight).filter((e) => !!e);
+    if (p.length === 0) {
+      l(d(t)), a(!1);
+      return;
+    }
+    a(!0);
+    async function k() {
+      try {
+        for (const e of p) {
+          const y = await e(t, c);
+          if (n) return;
+          if (y !== null) {
+            l(y);
+            return;
+          }
+        }
+        l(d(t));
+      } catch (e) {
+        console.error("Syntax highlighting error:", e), n || l(d(t));
+      } finally {
+        n || a(!1);
+      }
+    }
+    return k(), () => {
+      n = !0;
+    };
+  }, [t, c, u]);
+  const C = async () => {
+    try {
+      await navigator.clipboard.writeText(t), g(!0), setTimeout(() => g(!1), 2e3);
+    } catch (n) {
+      console.error("Failed to copy:", n);
+    }
+  }, x = () => /* @__PURE__ */ o.jsx("code", { dangerouslySetInnerHTML: { __html: f } });
+  return m ? /* @__PURE__ */ o.jsx("div", { className: i.container, "data-theme": s === "system" ? void 0 : s, children: /* @__PURE__ */ o.jsx("pre", { className: `${i.loadingCodeBlock} ${r}`, children: /* @__PURE__ */ o.jsx("code", { children: t }) }) }) : /* @__PURE__ */ o.jsxs("div", { className: i.container, "data-theme": s === "system" ? void 0 : s, children: [
+    /* @__PURE__ */ o.jsx(
+      "button",
+      {
+        onClick: C,
+        className: `${i.copyButton} ${_ ? i.copyButtonSingleLine : ""}`,
+        title: "Copy code",
+        children: B ? "Copied!" : "Copy"
+      }
+    ),
+    /* @__PURE__ */ o.jsx("pre", { className: `${i.codeBlock} ${r}`, children: x() })
+  ] });
+}
+function d(t) {
+  const c = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;"
+  };
+  return t.replace(/[&<>"']/g, (r) => c[r]);
+}
+export {
+  H as C
+};