@reblu/site-blocks 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @reblu/site-blocks
 
+## 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/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",
@@ -13245,10 +13255,49 @@ function authorAttributes(el) {
 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 +13356,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
@@ -13350,10 +13400,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;