@reblu/site-blocks 0.17.0 → 0.18.0

package/dist/index.d.cts

@@ -227,6 +227,14 @@ interface MarkdownRendererProps {
      * the page keeps a single h1.
      */
     headingOffset?: number;
+    /**
+     * Land the body's SHALLOWEST heading at `1 + headingOffset` instead of shifting every
+     * heading by a fixed amount, so standard Markdown (`##` sections) renders `<h2>` under
+     * the page `<h1>` just like the convention (`#` sections) does. Relative depth is kept
+     * and levels clamp at h6. Use it where the body sits directly under the page `<h1>`;
+     * leave it off where the body sits under its own section heading. Default `false`.
+     */
+    normalizeHeadings?: boolean;
     /**
      * Restrict and render images (REB-1075). Absent: every image the sanitiser keeps is
      * rendered as a lazy `<img>` inside its paragraph (the historical behaviour).
@@ -247,7 +255,7 @@ interface MarkdownImageOptions {
         alt: string;
     }) => React$1.ReactNode;
 }
-declare function MarkdownRenderer({ content, className, headingOffset, images, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
+declare function MarkdownRenderer({ content, className, headingOffset, normalizeHeadings, images, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
 /**
  * Render an **already-sanitised** HTML string through the same token-driven
  * component map as {@link MarkdownRenderer}. Consumers pass HTML that has been run
@@ -258,8 +266,10 @@ interface SafeHtmlProps {
     html: string | null | undefined;
     className?: string;
     headingOffset?: number;
+    /** See {@link MarkdownRendererProps.normalizeHeadings}. Default `false`. */
+    normalizeHeadings?: boolean;
 }
-declare function SafeHtml({ html, className, headingOffset }: SafeHtmlProps): react_jsx_runtime.JSX.Element | null;
+declare function SafeHtml({ html, className, headingOffset, normalizeHeadings, }: SafeHtmlProps): react_jsx_runtime.JSX.Element | null;
 
 /** A heading level a caller can configure — `h1`…`h6`. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/index.d.ts

@@ -227,6 +227,14 @@ interface MarkdownRendererProps {
      * the page keeps a single h1.
      */
     headingOffset?: number;
+    /**
+     * Land the body's SHALLOWEST heading at `1 + headingOffset` instead of shifting every
+     * heading by a fixed amount, so standard Markdown (`##` sections) renders `<h2>` under
+     * the page `<h1>` just like the convention (`#` sections) does. Relative depth is kept
+     * and levels clamp at h6. Use it where the body sits directly under the page `<h1>`;
+     * leave it off where the body sits under its own section heading. Default `false`.
+     */
+    normalizeHeadings?: boolean;
     /**
      * Restrict and render images (REB-1075). Absent: every image the sanitiser keeps is
      * rendered as a lazy `<img>` inside its paragraph (the historical behaviour).
@@ -247,7 +255,7 @@ interface MarkdownImageOptions {
         alt: string;
     }) => React$1.ReactNode;
 }
-declare function MarkdownRenderer({ content, className, headingOffset, images, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
+declare function MarkdownRenderer({ content, className, headingOffset, normalizeHeadings, images, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
 /**
  * Render an **already-sanitised** HTML string through the same token-driven
  * component map as {@link MarkdownRenderer}. Consumers pass HTML that has been run
@@ -258,8 +266,10 @@ interface SafeHtmlProps {
     html: string | null | undefined;
     className?: string;
     headingOffset?: number;
+    /** See {@link MarkdownRendererProps.normalizeHeadings}. Default `false`. */
+    normalizeHeadings?: boolean;
 }
-declare function SafeHtml({ html, className, headingOffset }: SafeHtmlProps): react_jsx_runtime.JSX.Element | null;
+declare function SafeHtml({ html, className, headingOffset, normalizeHeadings, }: SafeHtmlProps): react_jsx_runtime.JSX.Element | null;
 
 /** A heading level a caller can configure — `h1`…`h6`. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/index.js

@@ -13131,8 +13131,25 @@ function slotClassName(structural, defaults, consumer) {
 // src/components/markdown-renderer.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var HTML_TO_DOM_OPTIONS = { lowerCaseAttributeNames: false };
-function parse3(html5, options) {
-  return domToReact(htmlToDOM(html5, HTML_TO_DOM_OPTIONS), options);
+function shallowestHeadingLevel(nodes) {
+  let shallowest = null;
+  for (const node of nodes) {
+    if (!(node instanceof Element)) continue;
+    const match = /^h([1-6])$/.exec(node.name);
+    const level = match ? Number(match[1]) : shallowestHeadingLevel(node.children);
+    if (level !== null && (shallowest === null || level < shallowest)) shallowest = level;
+  }
+  return shallowest;
+}
+function headingShift(nodes, headingOffset, normalize2) {
+  if (!normalize2) return headingOffset;
+  const shallowest = shallowestHeadingLevel(nodes);
+  return shallowest === null ? headingOffset : 1 + headingOffset - shallowest;
+}
+function parse3(html5, headingOffset, normalizeHeadings, images) {
+  const nodes = htmlToDOM(html5, HTML_TO_DOM_OPTIONS);
+  const shift = headingShift(nodes, headingOffset, normalizeHeadings);
+  return domToReact(nodes, buildOptions(shift, images));
 }
 function isAllowedImage(src, prefixes) {
   if (!src) return false;
@@ -13190,6 +13207,14 @@ function authorAttributes(el) {
   }
   return preserved;
 }
+var CELL_ALIGN_CLASSES = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function cellAlignClass(align) {
+  return align ? CELL_ALIGN_CLASSES[align.toLowerCase()] : void 0;
+}
 function isExternalHref(href) {
   return !!href && /^(https?:)?\/\//.test(href);
 }
@@ -13241,7 +13266,7 @@ function buildOptions(headingOffset, images) {
       const author = authorAttributes(node);
       const headingMatch = /^h([1-6])$/.exec(name);
       if (headingMatch) {
-        const rendered = Math.min(6, Number(headingMatch[1]) + headingOffset);
+        const rendered = Math.max(1, Math.min(6, Number(headingMatch[1]) + headingOffset));
         const Tag = `h${rendered}`;
         return /* @__PURE__ */ jsx(Tag, { ...author, className: HEADING_CLASSES[rendered], children: children2() });
       }
@@ -13323,6 +13348,36 @@ function buildOptions(headingOffset, images) {
               className: "absolute inset-0 h-full w-full border-0"
             }
           ) });
+        // GFM tables (a cookie policy's cookie list, a price table). The table scrolls
+        // inside its own wrapper so a wide one never pushes the page sideways on a phone.
+        case "table":
+          return /* @__PURE__ */ jsx("div", { className: "my-6 w-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { ...author, className: "w-full border-collapse text-sm", children: children2() }) });
+        case "thead":
+          return /* @__PURE__ */ jsx("thead", { ...author, className: "bg-muted", children: children2() });
+        case "tbody":
+          return /* @__PURE__ */ jsx("tbody", { ...author, children: children2() });
+        case "tr":
+          return /* @__PURE__ */ jsx("tr", { ...author, children: children2() });
+        case "th":
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              ...author,
+              className: `border border-border px-3 py-2 font-semibold text-foreground ${cellAlignClass(attribs.align) ?? "text-left"}`,
+              children: children2()
+            }
+          );
+        case "td": {
+          const align = cellAlignClass(attribs.align);
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              ...author,
+              className: `border border-border px-3 py-2 align-top text-foreground/90${align ? ` ${align}` : ""}`,
+              children: children2()
+            }
+          );
+        }
         case "hr":
           return /* @__PURE__ */ jsx("hr", { ...author, className: "my-8 border-muted-foreground/30" });
         case "strong":
@@ -13342,15 +13397,21 @@ function MarkdownRenderer({
   content,
   className,
   headingOffset = 0,
+  normalizeHeadings = false,
   images
 }) {
   const html5 = markdownToSafeHtml(content);
   if (!html5) return null;
-  return /* @__PURE__ */ jsx("div", { className: slotClassName("max-w-none", "", className), "data-slot": "markdown", children: parse3(html5, buildOptions(headingOffset, images)) });
+  return /* @__PURE__ */ jsx("div", { className: slotClassName("max-w-none", "", className), "data-slot": "markdown", children: parse3(html5, headingOffset, normalizeHeadings, images) });
 }
-function SafeHtml({ html: html5, className, headingOffset = 0 }) {
+function SafeHtml({
+  html: html5,
+  className,
+  headingOffset = 0,
+  normalizeHeadings = false
+}) {
   if (!html5) return null;
-  return /* @__PURE__ */ jsx("div", { className: slotClassName("max-w-none", "", className), "data-slot": "safe-html", children: parse3(html5, buildOptions(headingOffset)) });
+  return /* @__PURE__ */ jsx("div", { className: slotClassName("max-w-none", "", className), "data-slot": "safe-html", children: parse3(html5, headingOffset, normalizeHeadings) });
 }
 
 // src/components/course-description.tsx