@reblu/site-blocks 0.16.0 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @reblu/site-blocks
 
+## 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
+
+- a42846c: `MarkdownRenderer` gains an optional `images` prop (`MarkdownImageOptions`): `allowedUrlPrefixes` keeps only images whose normalised URL starts with one of the given prefixes (any other image is dropped), a paragraph holding only an image renders as `<figure>` with the image title as `<figcaption>`, and `render` lets a Next.js consumer render allowed images with `next/image`. Without the prop, images render exactly as before.
+
+### Patch Changes
+
+- Updated dependencies [7a6f8c1]
+  - @reblu/site-contracts@1.18.0
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

@@ -127,6 +127,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

@@ -13196,6 +13196,16 @@ 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 isAllowedImage(src, prefixes) {
+  if (!src) return false;
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return false;
+  }
+  return prefixes.some((prefix) => url.href.startsWith(prefix));
+}
 var HEADING_CLASSES = {
   1: "text-3xl font-bold mt-8 mb-4 first:mt-0",
   2: "text-2xl font-bold mt-7 mb-3 first:mt-0",
@@ -13242,13 +13252,60 @@ 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);
 }
-function buildOptions(headingOffset) {
+function soleImage(p2) {
+  let image = null;
+  for (const child of p2.children) {
+    if (child instanceof import_html_react_parser.Element) {
+      if (child.name !== "img" || image) return null;
+      image = child;
+    } else if (child.type !== "text" || child.data?.trim()) {
+      return null;
+    }
+  }
+  return image;
+}
+function buildOptions(headingOffset, images) {
+  const renderImage = (img) => {
+    if (!images || !isAllowedImage(img.attribs.src, images.allowedUrlPrefixes)) return null;
+    const image = { src: img.attribs.src, alt: img.attribs.alt ?? "" };
+    if (images.render) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: images.render(image) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt,
+        loading: "lazy",
+        decoding: "async",
+        className: "rounded-lg w-full h-auto"
+      }
+    );
+  };
   const options = {
     replace: (node) => {
       if (!(node instanceof import_html_react_parser.Element)) return void 0;
+      if (images && node.name === "p") {
+        const img = soleImage(node);
+        if (img) {
+          const rendered = renderImage(img);
+          if (rendered === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+          const caption = img.attribs.title?.trim();
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "my-8", children: [
+            rendered,
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { className: "mt-2 text-center text-sm text-muted-foreground", children: caption }) : null
+          ] });
+        }
+      }
       const children2 = () => (0, import_html_react_parser.domToReact)(node.children, options);
       const { name, attribs } = node;
       const author = authorAttributes(node);
@@ -13307,6 +13364,7 @@ function buildOptions(headingOffset) {
           );
         }
         case "img":
+          if (images) return renderImage(node) ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
           if (!attribs.src) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
           return (
             // Plain <img> keeps the block portable — a distributable can't assume a
@@ -13335,6 +13393,36 @@ function buildOptions(headingOffset) {
               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":
@@ -13350,10 +13438,15 @@ function buildOptions(headingOffset) {
   };
   return options;
 }
-function MarkdownRenderer({ content, className, headingOffset = 0 }) {
+function MarkdownRenderer({
+  content,
+  className,
+  headingOffset = 0,
+  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)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slotClassName("max-w-none", "", className), "data-slot": "markdown", children: parse3(html5, buildOptions(headingOffset, images)) });
 }
 function SafeHtml({ html: html5, className, headingOffset = 0 }) {
   if (!html5) return null;