@godxjp/markdown 31.22.1 → 31.23.0

package/README.md

@@ -22,6 +22,9 @@ GFM — tables, task lists (read-only), fenced code with `language-*` classes, a
 strikethrough — and an `id` on every heading (GitHub slugs, de-duplicated). The output is the same
 as `react-markdown` + `remark-gfm` + `rehype-sanitize`, which is what the apps rendered before.
 
+Every table renders inside a scroll box (`.ui-prose-table-scroll`, styled by `Prose`), keyboard-
+focusable only while it overflows, so a wide table scrolls instead of widening the page.
+
 ## Safety
 
 - **No raw HTML.** HTML in the source is dropped, never parsed into elements.

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 = 1;
+declare const RENDERER_VERSION = 2;
 type MarkdownProps = {
     /** The Markdown source. */
     children: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/markdown.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
@@ -156,6 +156,34 @@ function MermaidDiagram({ source, label }) {
   ] });
 }
 
+// src/table-scroll.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TableScroll({ children }) {
+  const ref = React2.useRef(null);
+  const [scrolls, setScrolls] = React2.useState(false);
+  React2.useLayoutEffect(() => {
+    const box = ref.current;
+    if (!box || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => setScrolls(box.scrollWidth > box.clientWidth + 1);
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    if (box.firstElementChild) observer.observe(box.firstElementChild);
+    measure();
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: "ui-prose-table-scroll",
+      "data-slot": "prose-table-scroll",
+      tabIndex: scrolls ? 0 : void 0,
+      children
+    }
+  );
+}
+
 // src/schema.ts
 import { defaultSchema } from "rehype-sanitize";
 var markdownSchema = {
@@ -214,9 +242,9 @@ function safeUrl(url, key) {
 }
 
 // src/markdown.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var MARKDOWN_FORMAT = "md";
-var RENDERER_VERSION = 1;
+var RENDERER_VERSION = 2;
 var URL_ATTRIBUTES = {
   a: "href",
   img: "src",
@@ -235,6 +263,10 @@ function rehypeResolveUrls(options) {
     });
   };
 }
+function omitNode(props) {
+  const { node: _node, ...rest } = props;
+  return rest;
+}
 function fenceOf(node) {
   const code = node?.children?.[0];
   if (!code || code.type !== "element" || code.tagName !== "code") return void 0;
@@ -257,21 +289,23 @@ function Markdown({
   allowElement,
   unwrapDisallowed
 }) {
-  const sanitizeSchema = React2.useMemo(() => extendSchema(schema), [schema]);
-  const merged = React2.useMemo(() => {
-    if (!mermaid) return { ...components };
+  const sanitizeSchema = React3.useMemo(() => extendSchema(schema), [schema]);
+  const merged = React3.useMemo(() => {
+    const HostTable = components?.table;
+    const table = (props) => /* @__PURE__ */ jsx3(TableScroll, { children: HostTable ? typeof HostTable === "string" ? React3.createElement(HostTable, props) : /* @__PURE__ */ jsx3(HostTable, { ...props }) : /* @__PURE__ */ jsx3("table", { ...omitNode(props) }) });
+    if (!mermaid) return { ...components, table };
     const HostPre = components?.pre;
     const pre = (props) => {
       const fence = fenceOf(props.node);
-      if (fence?.language === "mermaid") return /* @__PURE__ */ jsx2(MermaidDiagram, { source: fence.text });
+      if (fence?.language === "mermaid") return /* @__PURE__ */ jsx3(MermaidDiagram, { source: fence.text });
       if (HostPre)
-        return typeof HostPre === "string" ? React2.createElement(HostPre, props) : /* @__PURE__ */ jsx2(HostPre, { ...props });
+        return typeof HostPre === "string" ? React3.createElement(HostPre, props) : /* @__PURE__ */ jsx3(HostPre, { ...props });
       const { node: _node, children: inner, ...rest } = props;
-      return /* @__PURE__ */ jsx2("pre", { ...rest, children: inner });
+      return /* @__PURE__ */ jsx3("pre", { ...rest, children: inner });
     };
-    return { ...components, pre };
+    return { ...components, table, pre };
   }, [components, mermaid]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm, ...remarkPlugins],
@@ -305,9 +339,10 @@ var MARKDOWN_FIXTURES = [
     html: "<p><em>em</em> <strong>strong</strong> <del>gone</del> <code>code</code></p>"
   },
   {
-    name: "GFM table with alignment",
+    name: "GFM table with alignment, in its scroll box",
     markdown: "| a | b |\n|:--|--:|\n| 1 | 2 |",
-    html: '<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>'
+    // 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>'
   },
   {
     name: "task list stays read-only",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/markdown",
-  "version": "31.22.1",
+  "version": "31.23.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",