@reblu/site-blocks 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @reblu/site-blocks
 
+## 0.18.0
+
+### Minor Changes
+
+- 801983f: New opt-in `normalizeHeadings` prop on `MarkdownRenderer` and `SafeHtml`: the body's shallowest heading lands at `1 + headingOffset`, every other heading keeps its depth relative to it, and levels clamp at h6. Standard Markdown (`##` sections) then renders `<h2>` under the page `<h1>` just like the Reblu convention (`#` sections), which renders byte-identically. Use it where the body sits directly under the page `<h1>` (a blog post, a legal document); leave it off where the body sits under its own section heading (a product or course description). Default `false`: nothing changes until a SITE opts in.
+
+## 0.17.1
+
+### Patch Changes
+
+- 1a3c593: `MarkdownRenderer` and `SafeHtml` now style GFM tables. Tables used to render unstyled (no borders, no padding, no header emphasis); they now get theme-token borders, cell padding, a muted header row with semibold header text and `text-sm` body text, and keep the column alignment from the delimiter row. Each table scrolls horizontally inside its own `overflow-x-auto` wrapper, so a wide table no longer pushes the page sideways on mobile. No props changed.
+
 ## 0.17.0
 
 ### Minor Changes

package/README.md

@@ -105,6 +105,34 @@ To force a visible break, use any of:
 | A hard break inside one paragraph | Two spaces at the end of the first line     |
 | A hard break, visibly             | A trailing `\` at the end of the first line |
 
+### Heading levels: `headingOffset` and `normalizeHeadings`
+
+`headingOffset` shifts every heading by a fixed amount: with `headingOffset={1}`
+under the page's own `<h1>`, `#` renders `<h2>` and `##` renders `<h3>`. That
+assumes the Reblu convention — `#` is a section — and standard Markdown pasted
+or imported from elsewhere (`##` sections) then renders `<h3>` with no `<h2>`.
+
+`normalizeHeadings` lands the body's **shallowest** heading at
+`1 + headingOffset` instead, keeps every other heading's depth relative to it,
+and clamps at h6:
+
+| Body                        | `headingOffset={1}` | `+ normalizeHeadings` |
+| --------------------------- | ------------------- | --------------------- |
+| `#` / `##` (convention)     | h2 / h3             | h2 / h3 (identical)   |
+| `##` / `###` (standard)     | h3 / h4             | h2 / h3               |
+| no headings                 | —                   | — (identical)         |
+
+```tsx
+// A blog post or legal document directly under the page <h1>:
+<MarkdownRenderer content={post.content} headingOffset={1} normalizeHeadings />
+```
+
+It is **opt-in**, because the renderer cannot see what sits above the body.
+Leave it off where the body sits under its own section heading — e.g. a product
+description under «Sobre este producto» (`h2`), whose `##` subsections must stay
+one level below that heading. `SafeHtml` takes the same prop; `CourseDescription`
+does not use it (its `##` sits below its own heading by contract).
+
 ### `hidden` hides a block — it does not withhold it
 
 An element marked `hidden` is not rendered and is not announced to a screen
@@ -127,6 +155,22 @@ of the page.** Draft it somewhere that is not the document body.
 4" still points at a `4`. The marker style (`type`) and an item's explicit number
 (`value`) survive too.
 
+### Tables scroll inside their own box
+
+GFM tables (`| Cookie | Purpose | Duration |` plus a `| --- | --- | --- |`
+delimiter row) render with theme-token borders (`border-border`), cell padding,
+a `bg-muted` header row with semibold header text, and `text-sm` body text. The
+alignment written in the delimiter row (`:--`, `:-:`, `--:`) is kept.
+
+Each table sits in its own `overflow-x-auto` wrapper, so a table wider than the
+reading column scrolls sideways on a phone while the page itself does not.
+
+### Links
+
+Internal links (`/privacidad`, `#clause-4`) and `mailto:` links open in the same
+tab. External links (`https://…`, `//…`) open in a new tab and always carry
+`rel="noopener noreferrer"`.
+
 ### Which authored attributes survive
 
 The renderer rebuilds each element to apply the tenant's design tokens and to

package/dist/index.cjs

@@ -13193,8 +13193,25 @@ function slotClassName(structural, defaults, consumer) {
 // src/components/markdown-renderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var HTML_TO_DOM_OPTIONS = { lowerCaseAttributeNames: false };
-function parse3(html5, options) {
-  return (0, import_html_react_parser.domToReact)((0, import_html_react_parser.htmlToDOM)(html5, HTML_TO_DOM_OPTIONS), options);
+function shallowestHeadingLevel(nodes) {
+  let shallowest = null;
+  for (const node of nodes) {
+    if (!(node instanceof import_html_react_parser.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 = (0, import_html_react_parser.htmlToDOM)(html5, HTML_TO_DOM_OPTIONS);
+  const shift = headingShift(nodes, headingOffset, normalizeHeadings);
+  return (0, import_html_react_parser.domToReact)(nodes, buildOptions(shift, images));
 }
 function isAllowedImage(src, prefixes) {
   if (!src) return false;
@@ -13252,6 +13269,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);
 }
@@ -13303,7 +13328,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__ */ (0, import_jsx_runtime.jsx)(Tag, { ...author, className: HEADING_CLASSES[rendered], children: children2() });
       }
@@ -13385,6 +13410,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__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-6 w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...author, className: "w-full border-collapse text-sm", children: children2() }) });
+        case "thead":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { ...author, className: "bg-muted", children: children2() });
+        case "tbody":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { ...author, children: children2() });
+        case "tr":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { ...author, children: children2() });
+        case "th":
+          return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+            "td",
+            {
+              ...author,
+              className: `border border-border px-3 py-2 align-top text-foreground/90${align ? ` ${align}` : ""}`,
+              children: children2()
+            }
+          );
+        }
         case "hr":
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { ...author, className: "my-8 border-muted-foreground/30" });
         case "strong":
@@ -13404,15 +13459,21 @@ function MarkdownRenderer({
   content,
   className,
   headingOffset = 0,
+  normalizeHeadings = false,
   images
 }) {
   const html5 = markdownToSafeHtml(content);
   if (!html5) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slotClassName("max-w-none", "", className), "data-slot": "markdown", children: parse3(html5, buildOptions(headingOffset, images)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: slotClassName("max-w-none", "", className), "data-slot": "safe-html", children: parse3(html5, buildOptions(headingOffset)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slotClassName("max-w-none", "", className), "data-slot": "safe-html", children: parse3(html5, headingOffset, normalizeHeadings) });
 }
 
 // src/components/course-description.tsx