@godxjp/markdown 33.21.0 → 33.22.1

package/README.md

@@ -82,6 +82,34 @@ focusable only while it overflows, so a wide table scrolls instead of widening t
 | `highlight={false}`                    | Leave fenced code as plain text — a host `pre` that runs its own highlighter. A host `pre` otherwise receives the tokenised `<code>`.                                                 |
 | `allowedElements` / `unwrapDisallowed` | Narrow a body (an activity feed: `strong`, `em`, `del`, `code`). Only removes.                                                                                                        |
 | `shortCellLength`                      | A table cell holding one short token (no whitespace, ≤ 24 characters by default) gets `data-short`; `Prose` keeps it on one line. `false` turns it off.                               |
+| `directives`                           | Host renderers for container directives the kit does not model, by name — see "Directive blocks".                                                                                     |
+
+### Directive blocks
+
+A container directive the kit does not model — `:::poll[…]{…}`, a `::::form` holding polls — renders
+its content in a `div.ui-prose-directive` (the label as a paragraph). A host gives it meaning by
+registering a renderer for its name:
+
+```tsx
+<Markdown
+  directives={{
+    // { name, label, attributes, source, body, children }: label / source / body as written
+    // (free of a containing callout's `> `), children = the rendered body without the label.
+    poll: (block) => {
+      const poll = parsePoll(block.source); // the host's own grammar and validation
+      return poll ? <PollCard poll={poll} /> : undefined; // undefined: render it as before
+    },
+    form: (block) => <SurveyForm title={block.label}>{block.children}</SurveyForm>,
+  }}
+>
+  {page.body}
+</Markdown>
+```
+
+The kit validates nothing inside a directive; `toggle`, `columns` and `column` are its own and
+cannot be registered. The block's parts come from the same reader as the codec's
+(`readDirective(source)` in `@godxjp/markdown/codec` returns `{ name, label, attributes, source,
+body }`), so the editor and the page agree on what a block says.
 
 Images: wrap the body in `<Prose imagePreview>` and every body image opens the kit preview, paging
 through the others — no `img` override needed. Images in table cells keep min(natural width, 20rem),
@@ -131,8 +159,13 @@ set of parsers, so a body means the same thing in the editor, on a server and on
   special, a literal `$x$` in text is written `\$x$`; a lone `$` (a price) is never escaped.
 - **`asset:` images** — `![alt](asset:id)` round-trips as written (the renderer resolves it through
   `resolveUrl`).
-- **Raw blocks** — anything the document does not model (raw HTML, footnote definitions, link
-  reference definitions, an unknown or malformed directive, a fence with a meta string) is kept as
+- **Directive blocks** — any other container directive (`:::poll[label]{id=x anonymous}` … `:::`,
+  nesting by fence length) is one `directive{name, source}` node holding its canonical source, so
+  `normalize` is idempotent on it and the editor keeps it as one block. Attribute values with a
+  character outside `[\w.-]` are written quoted (`closes="2026-11-10T09:00"`); `{#x}` / `{.x}` are
+  written `id=x` / `class=x`.
+- **Raw blocks** — anything else the document does not model (raw HTML, footnote definitions, link
+  reference definitions, a malformed toggle or column row, a fence with a meta string) is kept as
   Markdown that parses back to the same thing. Mermaid is an ordinary ` ```mermaid ` fence.
 
 ### Codec
@@ -154,6 +187,29 @@ Pure: no React, no DOM, no editor — it runs on a server and in a Cloudflare Wo
 `- [ ]` / `- [x]` todos; GFM tables with padded cells and an alignment row; a callout's body after a
 `>` blank line; one blank line between blocks; LF; a trailing newline; an empty document is `""`.
 
+## Loading KaTeX and highlight.js on demand (`@godxjp/markdown/lazy`)
+
+KaTeX with its stylesheet and fonts, and highlight.js, are most of this package's weight. The
+default entry bundles them so the first render is final everywhere. A client-rendered app imports
+the same component from `/lazy` instead:
+
+```tsx
+import { Markdown } from "@godxjp/markdown/lazy"; // and drop the global katex.css import
+```
+
+Each engine is then a separate chunk, fetched the first time a rendered body needs it (math, or a
+fence with a language) — KaTeX's chunk brings `katex.css` with it — and the body re-renders once it
+arrives. Until then math shows its TeX source as code and fences are plain, the same as
+`highlight={false}`. Measured with Vite on a host that imports only `Markdown`: the entry goes
+from 560 KB JS (173 KB gzip) + 23.5 KB CSS to 220 KB JS (70 KB gzip) and no CSS; KaTeX is a
+262 KB (78 KB gzip) chunk + the CSS, highlight.js an 81 KB (26 KB gzip) chunk.
+
+**Why the default stays eager.** A server render or a Worker is synchronous and cannot wait for an
+`import()`, and the output must not depend on what happened to be loaded. With `/lazy`, a server
+(or a client hydrating server HTML) awaits `preloadMarkdownRuntime(body)` before rendering, so its
+HTML matches the eager entry's byte for byte; `RENDERER_VERSION` describes that finished output
+from both entries.
+
 ## Stored versions
 
 Record `MARKDOWN_FORMAT` (`"md"`) and `RENDERER_VERSION` on every saved version.

package/dist/chunk-AKKOCR2Y.js

@@ -0,0 +1,79 @@
+"use client";
+
+// src/katex-schema.ts
+var KATEX_OPTIONS = {
+  trust: false,
+  strict: "error",
+  maxSize: 10,
+  output: "htmlAndMathml"
+};
+var KATEX_CLASSES = `accent accent-body accent-full amsrm angl anglpad arraycolsep base boldsymbol
+boxpad brace-center brace-left brace-right cancel-lap cancel-pad cd-arrow-pad cd-label-left
+cd-label-right cd-vert-arrow cjk_fallback clap col-align-c col-align-l col-align-r colorbox com
+delim-size1 delim-size4 delimcenter delimsizing eqn-num fbox fcolorbox fix fleqn fontsize-ensurer
+frac-line halfarrow-left halfarrow-right hbox hdashline hide-tail hline inner katex katex-display
+katex-error katex-html katex-mathml large-op leqno llap mainrm mathbb mathbf mathboldfrak mathboldsf
+mathcal mathfrak mathit mathitsf mathnormal mathrm mathscr mathsf mathsfit mathtt mbin mclose mfrac
+minner mml-eqn-num mop mopen mord mover mpunct mrel mspace msupsub mtable mtight mtr-glue mult
+munder newline nobreak nulldelimiter op-limits op-symbol overlay overline overline-line pstrut
+reset-size1 reset-size10 reset-size11 reset-size2 reset-size3 reset-size4 reset-size5 reset-size6
+reset-size7 reset-size8 reset-size9 rlap root rule size1 size10 size11 size2 size3 size4 size5
+size6 size7 size8 size9 sizing small-op smash sout sqrt stretchy strut svg-align tag text textbb
+textbf textboldfrak textboldsf textfrak textit textitsf textrm textscr textsf texttt thinbox
+underline underline-line vbox vertical-separator vlist vlist-r vlist-s vlist-t vlist-t2 x-arrow
+x-arrow-pad`.split(/\s+/);
+var KATEX_STYLE = /^(?:\s*(?:background-color|border(?:-(?:top|right|bottom|left))?(?:-(?:width|style|color))?|bottom|color|height|left|margin(?:-(?:top|right|bottom|left))?|max-width|min-width|padding(?:-(?:top|right|bottom|left))?|position|right|top|vertical-align|width)\s*:\s*[-#.%\w ]+;?)*\s*$/i;
+var MATHML_TAGS = `math semantics annotation mrow mi mn mo ms mtext mspace mpadded mphantom mstyle
+menclose mfrac msqrt mroot msub msup msubsup munder mover munderover mtable mtr mtd mlabeledtr`.split(
+  /\s+/
+);
+var katexSchema = {
+  tagNames: [...MATHML_TAGS, "svg", "path", "line"],
+  attributes: {
+    span: [
+      ["className", ...KATEX_CLASSES],
+      ["style", KATEX_STYLE],
+      ["ariaHidden", "true"]
+    ],
+    math: [
+      ["xmlns", "http://www.w3.org/1998/Math/MathML"],
+      ["display", "block", "inline"]
+    ],
+    annotation: [["encoding", "application/x-tex"]],
+    mi: ["mathvariant"],
+    mo: ["stretchy", "fence", "separator", "minsize", "maxsize", "lspace", "rspace", "accent"],
+    mfrac: ["linethickness"],
+    mtable: ["rowspacing", "rowlines", "columnalign", "columnspacing", "columnlines", "width"],
+    mtd: ["columnalign"],
+    mstyle: ["scriptlevel", "displaystyle", "mathcolor", "mathsize", "mathbackground"],
+    mover: ["accent"],
+    munder: ["accentunder"],
+    munderover: ["accent", "accentunder"],
+    mpadded: [
+      "width",
+      "height",
+      "depth",
+      "lspace",
+      "voffset",
+      "mathbackground",
+      ["style", KATEX_STYLE]
+    ],
+    mspace: ["width", "height", "depth", "mathbackground"],
+    menclose: ["notation", "mathbackground"],
+    svg: [
+      ["xmlns", "http://www.w3.org/2000/svg"],
+      "width",
+      "height",
+      "viewBox",
+      "preserveAspectRatio",
+      ["style", KATEX_STYLE]
+    ],
+    path: ["d"],
+    line: ["x1", "y1", "x2", "y2", "strokeWidth"]
+  }
+};
+
+export {
+  KATEX_OPTIONS,
+  katexSchema
+};

package/dist/chunk-ANYWBQJT.js

@@ -0,0 +1,21 @@
+"use client";
+
+// src/code-tokens.ts
+var CODE_TOKENS = [
+  "comment",
+  "keyword",
+  "string",
+  "string-expression",
+  "function",
+  "constant",
+  "parameter",
+  "punctuation",
+  "link",
+  "inserted",
+  "deleted",
+  "changed"
+];
+
+export {
+  CODE_TOKENS
+};

package/dist/chunk-JJ2A3D7U.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  KATEX_OPTIONS
+} from "./chunk-AKKOCR2Y.js";
+
+// src/math.ts
+import rehypeKatex from "rehype-katex";
+function rehypeMath() {
+  return rehypeKatex(KATEX_OPTIONS);
+}
+
+export {
+  rehypeMath
+};