@reblu/site-blocks 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

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;
@@ -13311,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() });
       }
@@ -13442,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