@godxjp/markdown 31.25.3 → 31.26.0

package/README.md

@@ -47,6 +47,11 @@ focusable only while it overflows, so a wide table scrolls instead of widening t
 | `rehypePlugins`                        | Run after the sanitiser — presentation only.                                                                                                                                          |
 | `mermaid={false}`                      | Keep ```mermaid fences as code (or hand them to the host `pre`).                                                                                                                      |
 | `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.                               |
+
+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),
+so a narrow table scrolls instead of squashing them.
 
 ## Stored versions
 

package/dist/index.d.ts

@@ -73,7 +73,7 @@ type PluggableList = NonNullable<Options$1["remarkPlugins"]>;
  * differently — a schema change, a new default plugin — not on every release.
  */
 declare const MARKDOWN_FORMAT = "md";
-declare const RENDERER_VERSION = 2;
+declare const RENDERER_VERSION = 3;
 type MarkdownProps = {
     /** The Markdown source. */
     children: string;
@@ -117,6 +117,13 @@ type MarkdownProps = {
     allowElement?: Options$1["allowElement"];
     /** With an element filter: keep a removed element's children (its text) instead of dropping it. */
     unwrapDisallowed?: boolean;
+    /**
+     * A table cell whose trimmed text has no whitespace and at most this many characters — a code,
+     * an id, a date, 優先度 — is stamped `data-short`, and `Prose` keeps it on one line: CJK otherwise
+     * breaks between any two ideographs in a narrow column (gh#1150). A sentence still wraps.
+     * Characters are user-perceived (grapheme clusters). Default 24; `false` stamps nothing.
+     */
+    shortCellLength?: number | false;
 };
 /**
  * THE ONE RENDERER (gh#1108). GFM — tables, task lists, fenced code, autolinks, footnotes,
@@ -128,7 +135,7 @@ type MarkdownProps = {
  * Renders bare elements; the host wraps it (`<Prose>` from `@godxjp/ui/data-display`), so this
  * package carries no UI-kit dependency.
  */
-declare function Markdown({ children, remarkPlugins, rehypePlugins, schema, components, resolveUrl, headingId, mermaid, allowedElements, disallowedElements, allowElement, unwrapDisallowed, }: MarkdownProps): React.JSX.Element;
+declare function Markdown({ children, remarkPlugins, rehypePlugins, schema, components, resolveUrl, headingId, mermaid, allowedElements, disallowedElements, allowElement, unwrapDisallowed, shortCellLength, }: MarkdownProps): React.JSX.Element;
 
 type MermaidSvgCheck = {
     ok: true;

package/dist/index.js

@@ -244,7 +244,7 @@ function safeUrl(url, key) {
 // src/markdown.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var MARKDOWN_FORMAT = "md";
-var RENDERER_VERSION = 2;
+var RENDERER_VERSION = 3;
 var URL_ATTRIBUTES = {
   a: "href",
   img: "src",
@@ -263,6 +263,30 @@ function rehypeResolveUrls(options) {
     });
   };
 }
+var graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : void 0;
+function textOf2(node) {
+  let text = "";
+  let hasImage = false;
+  visit2(node, (child) => {
+    if (child.type === "text") text += child.value;
+    else if (child.type === "element" && child.tagName === "img") hasImage = true;
+  });
+  return { text, hasImage };
+}
+function rehypeShortCells(options) {
+  return (tree) => {
+    const { max } = options;
+    if (max === false || max <= 0) return;
+    visit2(tree, "element", (node) => {
+      if (node.tagName !== "td" && node.tagName !== "th") return;
+      const { text, hasImage } = textOf2(node);
+      const token = text.trim();
+      if (hasImage || token === "" || /\s/.test(token)) return;
+      const length = graphemes ? [...graphemes.segment(token)].length : [...token].length;
+      if (length <= max) node.properties = { ...node.properties, dataShort: "" };
+    });
+  };
+}
 function omitNode(props) {
   const { node: _node, ...rest } = props;
   return rest;
@@ -287,7 +311,8 @@ function Markdown({
   allowedElements,
   disallowedElements,
   allowElement,
-  unwrapDisallowed
+  unwrapDisallowed,
+  shortCellLength = 24
 }) {
   const sanitizeSchema = React3.useMemo(() => extendSchema(schema), [schema]);
   const merged = React3.useMemo(() => {
@@ -313,6 +338,7 @@ function Markdown({
         [rehypeResolveUrls, { resolve: resolveUrl }],
         [rehypeHeadingIds, { resolve: headingId }],
         [rehypeSanitize, sanitizeSchema],
+        [rehypeShortCells, { max: shortCellLength }],
         ...rehypePlugins
       ],
       urlTransform: safeUrl,
@@ -341,8 +367,9 @@ var MARKDOWN_FIXTURES = [
   {
     name: "GFM table with alignment, in its scroll box",
     markdown: "| a | b |\n|:--|--:|\n| 1 | 2 |",
-    // Every table sits in its own scroll box (gh#1131, renderer v2).
-    html: '<div class="ui-prose-table-scroll" data-slot="prose-table-scroll"><table><thead><tr><th style="text-align:left">a</th><th style="text-align:right">b</th></tr></thead><tbody><tr><td style="text-align:left">1</td><td style="text-align:right">2</td></tr></tbody></table></div>'
+    // Every table sits in its own scroll box (gh#1131, renderer v2); a single short token per
+    // cell carries `data-short` (gh#1150, renderer v3).
+    html: '<div class="ui-prose-table-scroll" data-slot="prose-table-scroll"><table><thead><tr><th data-short="" style="text-align:left">a</th><th data-short="" style="text-align:right">b</th></tr></thead><tbody><tr><td data-short="" style="text-align:left">1</td><td data-short="" style="text-align:right">2</td></tr></tbody></table></div>'
   },
   {
     name: "task list stays read-only",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/markdown",
-  "version": "31.25.3",
+  "version": "31.26.0",
   "description": "The one Markdown renderer for GoDX apps: GFM + heading anchors, one sanitiser schema, a shared fixture corpus, and Mermaid drawn only after its SVG passes a fail-closed gate.",
   "type": "module",
   "main": "./dist/index.js",