@prokodo/ui 0.0.52 → 0.0.54

package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js

@@ -0,0 +1,244 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostWidgetCarousel.module.scss.js";
+import { Carousel } from "../carousel/Carousel.js";
+import { Card } from "../card/Card.js";
+import { Headline } from "../headline/Headline.js";
+import { Link } from "../link/Link.js";
+import { Image } from "../image/Image.js";
+const bem = create(styles, "PostWidgetCarousel");
+function PostWidgetCarouselView(props) {
+  var _a, _b;
+  const {
+    autoplay = 5e3,
+    className,
+    title,
+    items = [],
+    classes,
+    componentsProps,
+    structuredData = true,
+    ...rest
+  } = props;
+  const cardMerged = {
+    animated: true,
+    enableShadow: true,
+    ...componentsProps == null ? void 0 : componentsProps.card,
+    ...rest,
+    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? "white"
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      itemScope: true,
+      itemType: "https://schema.org/ItemList",
+      className: bem(
+        void 0,
+        void 0,
+        [className, classes == null ? void 0 : classes.root].filter(Boolean).join(" ")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Card,
+          {
+            ...cardMerged,
+            className: bem("card__container", void 0, classes == null ? void 0 : classes.cardContainer),
+            contentClassName: bem("card", void 0, classes == null ? void 0 : classes.card),
+            children: [
+              title && /* @__PURE__ */ jsx(
+                Headline,
+                {
+                  highlight: true,
+                  size: "md",
+                  type: "h2",
+                  ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.title) ?? {} },
+                  itemProp: "headline",
+                  className: bem(
+                    "title",
+                    void 0,
+                    [title == null ? void 0 : title.className, classes == null ? void 0 : classes.title].filter(Boolean).join(" ")
+                  ),
+                  variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.variant) ?? "secondary",
+                  children: title == null ? void 0 : title.content
+                }
+              ),
+              items.length > 0 && /* @__PURE__ */ jsx(
+                Carousel,
+                {
+                  enableControl: true,
+                  autoplay,
+                  className: bem("carousel", void 0, classes == null ? void 0 : classes.carousel),
+                  enableDots: false,
+                  itemsToShow: 1,
+                  classNameButtons: bem(
+                    "carousel__button",
+                    void 0,
+                    classes == null ? void 0 : classes.carouselButton
+                  ),
+                  classNameControls: bem(
+                    "carousel__buttons",
+                    void 0,
+                    classes == null ? void 0 : classes.carouselButtons
+                  ),
+                  classNameDots: bem(
+                    "carousel__dots",
+                    void 0,
+                    classes == null ? void 0 : classes.carouselDots
+                  ),
+                  classNameItem: bem(
+                    "carousel__item",
+                    void 0,
+                    classes == null ? void 0 : classes.carouselItem
+                  ),
+                  classNameWrapper: bem(
+                    "carousel__wrapper",
+                    void 0,
+                    classes == null ? void 0 : classes.carouselWrapper
+                  ),
+                  nextButton: {
+                    variant: "contained",
+                    color: "primary",
+                    iconProps: {
+                      size: "sm"
+                    }
+                  },
+                  prevButton: {
+                    variant: "contained",
+                    color: "primary",
+                    iconProps: {
+                      size: "sm"
+                    }
+                  },
+                  children: items.map((item, idx) => {
+                    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+                    const key = `carousel-item-${((_a2 = item.title) == null ? void 0 : _a2.content) ?? idx}`;
+                    const imgBase = item.image;
+                    const imgMerged = imgBase ? {
+                      ...imgBase,
+                      ...(componentsProps == null ? void 0 : componentsProps.image) ?? {},
+                      ...((_b2 = item.componentsProps) == null ? void 0 : _b2.image) ?? {},
+                      className: bem(
+                        "carousel__item__image",
+                        void 0,
+                        [
+                          imgBase.className,
+                          classes == null ? void 0 : classes.carouselItemImage,
+                          (_c = item.classes) == null ? void 0 : _c.image
+                        ].filter(Boolean).join(" ")
+                      ),
+                      containerClassName: bem("carousel__item__image__container"),
+                      decoding: ((_e = (_d = item.componentsProps) == null ? void 0 : _d.image) == null ? void 0 : _e.decoding) ?? ((_f = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _f.decoding) ?? imgBase.decoding ?? "async",
+                      loading: ((_h = (_g = item.componentsProps) == null ? void 0 : _g.image) == null ? void 0 : _h.loading) ?? ((_i = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _i.loading) ?? imgBase.loading ?? "lazy",
+                      sizes: ((_k = (_j = item.componentsProps) == null ? void 0 : _j.image) == null ? void 0 : _k.sizes) ?? ((_l = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _l.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 100vw",
+                      ...isValidElement(imgBase == null ? void 0 : imgBase.imageComponent) ? { imageComponent: imgBase.imageComponent } : {}
+                    } : void 0;
+                    const linkMerged = {
+                      ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},
+                      ...((_m = item.componentsProps) == null ? void 0 : _m.link) ?? {},
+                      ...item.redirect,
+                      className: bem(
+                        "carousel__item__image__link",
+                        void 0,
+                        [
+                          (_n = item.redirect) == null ? void 0 : _n.className,
+                          classes == null ? void 0 : classes.carouselItemImageLink,
+                          (_o = item.classes) == null ? void 0 : _o.imageLink
+                        ].filter(Boolean).join(" ")
+                      ),
+                      "aria-label": `Read more about ${item.title.content}`
+                    };
+                    return /* @__PURE__ */ jsxs("div", { children: [
+                      imgMerged && /* @__PURE__ */ jsx(Link, { ...linkMerged, children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          ...imgMerged,
+                          className: bem(
+                            "carousel__item__image",
+                            void 0,
+                            classes == null ? void 0 : classes.carouselItemImage
+                          ),
+                          containerClassName: bem(
+                            "carousel__item__image__container"
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Link,
+                        {
+                          ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},
+                          ...((_p = item.componentsProps) == null ? void 0 : _p.link) ?? {},
+                          ...item.redirect,
+                          "aria-label": `Read more about ${item.title.content}`,
+                          className: bem(
+                            "carousel__item__link",
+                            void 0,
+                            [classes == null ? void 0 : classes.carouselItemLink, (_q = item.classes) == null ? void 0 : _q.link].filter(Boolean).join(" ")
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            Headline,
+                            {
+                              size: "md",
+                              type: "h3",
+                              ...item.title,
+                              ...(componentsProps == null ? void 0 : componentsProps.title) ?? {},
+                              ...((_r = item.componentsProps) == null ? void 0 : _r.headline) ?? {},
+                              itemProp: "headline",
+                              className: bem(
+                                "headline",
+                                void 0,
+                                [
+                                  (_s = item.title) == null ? void 0 : _s.className,
+                                  classes == null ? void 0 : classes.carouselItem,
+                                  (_t = item.classes) == null ? void 0 : _t.headline
+                                ].filter(Boolean).join(" ")
+                              ),
+                              variant: ((_u = item.title) == null ? void 0 : _u.variant) ?? ((_v = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _v.variant) ?? "inherit",
+                              children: (_w = item.title) == null ? void 0 : _w.content
+                            }
+                          )
+                        }
+                      )
+                    ] }, key);
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        structuredData && items.length > 0 && /* @__PURE__ */ jsx(
+          "script",
+          {
+            type: "application/ld+json",
+            dangerouslySetInnerHTML: {
+              __html: JSON.stringify({
+                "@context": "https://schema.org",
+                "@type": "ItemList",
+                itemListElement: items.map((item, index) => {
+                  var _a2, _b2;
+                  return {
+                    "@type": "ListItem",
+                    position: index + 1,
+                    item: {
+                      "@type": "BlogPosting",
+                      headline: (_a2 = item.title) == null ? void 0 : _a2.content,
+                      image: isString(
+                        (_b2 = item.image) == null ? void 0 : _b2.src
+                      ) ? [item.image.src] : void 0
+                    }
+                  };
+                })
+              })
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PostWidgetCarouselView, "PostWidgetCarouselView");
+export {
+  PostWidgetCarouselView
+};

package/dist/components/rich-text/RichText.client.js

@@ -2,18 +2,79 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-import { marked } from "../../node_modules/.pnpm/marked@15.0.12/node_modules/marked/lib/marked.esm.js";
-import { useMemo, Fragment, Children, isValidElement, createElement } from "react";
+import { Marked } from "../../node_modules/.pnpm/marked@15.0.12/node_modules/marked/lib/marked.esm.js";
+import { useRef, useMemo, useState, useEffect, Fragment, Children, isValidElement, createElement } from "react";
 import { l as libExports } from "../../_virtual/index.js";
 import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
 import styles from "./RichText.module.scss.js";
 import { Icon } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
 import { Headline } from "../headline/Headline.js";
 import { AnimatedText } from "../animatedText/AnimatedText.js";
 const bem = create(styles, "RichText");
+const xssOptions = (() => {
+  const wl = typeof libExports.getDefaultWhiteList === "function" ? libExports.getDefaultWhiteList() : {};
+  const add = /* @__PURE__ */ __name((tag) => {
+    wl[tag] = Array.from(/* @__PURE__ */ new Set([...wl[tag] ?? [], "class"]));
+  }, "add");
+  add("pre");
+  add("code");
+  add("span");
+  return {
+    whiteList: wl,
+    allowList: wl
+  };
+})();
 const normalize = /* @__PURE__ */ __name((nodes) => Children.toArray(nodes), "normalize");
 const withKey = /* @__PURE__ */ __name((el, key) => isValidElement(el) ? el.key == null ? { ...el, key } : el : el, "withKey");
+const hasCodeBlocks = /* @__PURE__ */ __name((src) => /(^|\n)```/.test(src) || /<pre|<code/i.test(src), "hasCodeBlocks");
+const extractFenceLangs = /* @__PURE__ */ __name((src) => {
+  const langs = /* @__PURE__ */ new Set();
+  const re = /(^|\n)```([\w+-]+)/g;
+  let m;
+  while (m = re.exec(src)) {
+    const lang = (m[2] ?? "").toLowerCase().trim();
+    if (lang) langs.add(lang);
+  }
+  return langs;
+}, "extractFenceLangs");
+async function prepareHljs(_langs, theme) {
+  const hljs = (await import("../../node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/es/common.js")).default;
+  const version = (hljs == null ? void 0 : hljs.versionString) || "11.11.1";
+  ensureHljsThemeLoaded(version, theme);
+  return hljs;
+}
+__name(prepareHljs, "prepareHljs");
+function ensureHljsThemeLoaded(version, theme) {
+  const id = "hljs-theme";
+  const existing = document.getElementById(id);
+  const {
+    href: customHref,
+    name: themeName,
+    version: themeVersion
+  } = theme ?? {};
+  let href;
+  if (typeof customHref === "string" && customHref.trim().length > 0) {
+    href = customHref;
+  } else {
+    const name = (themeName ?? "github-dark-dimmed").replace(/\.css$/i, "");
+    const ver = themeVersion === "auto" || !isString(themeVersion) ? version : themeVersion;
+    href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${encodeURIComponent(
+      ver
+    )}/styles/${name}.min.css`;
+  }
+  if (existing) {
+    if (existing.href !== href) existing.href = href;
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = href;
+  document.head.appendChild(link);
+}
+__name(ensureHljsThemeLoaded, "ensureHljsThemeLoaded");
 function RichTextClient({
   children,
   animated,
@@ -24,8 +85,10 @@ function RichTextClient({
   linkComponent,
   className,
   overrideParagraph,
+  codeTheme,
   ...props
 }) {
+  const containerRef = useRef(null);
   const baseProps = {
     animated,
     className: className ?? void 0,
@@ -36,10 +99,78 @@ function RichTextClient({
     if (!Boolean(animated)) return content;
     return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }) : content;
   }, "renderAnimation");
-  const safeHtml = useMemo(() => {
-    marked.setOptions({ gfm: true, breaks: true });
-    return libExports.filterXSS(marked.parse(children ?? ""));
-  }, [children]);
+  const src = String(children ?? "");
+  const fastHtml = useMemo(() => {
+    const parser2 = new Marked({ gfm: true, breaks: true });
+    return libExports.filterXSS(parser2.parse(src), xssOptions);
+  }, [src]);
+  const [html, setHtml] = useState("");
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      if (!hasCodeBlocks(src)) {
+        if (!cancelled) setHtml(fastHtml);
+        return;
+      }
+      const [mhMod, hljs] = await Promise.all([
+        import("../../node_modules/.pnpm/marked-highlight@2.2.2_marked@15.0.12/node_modules/marked-highlight/src/index.js"),
+        prepareHljs(extractFenceLangs(src), codeTheme)
+      ]);
+      const markedHighlight = (
+        // support both module shapes
+        mhMod.markedHighlight ?? mhMod.default
+      );
+      if (typeof markedHighlight !== "function") {
+        console.error(
+          "[RichText] marked-highlight not resolved; no code styling will be applied."
+        );
+      }
+      const parser2 = new Marked(
+        markedHighlight({
+          emptyLangClass: "hljs",
+          langPrefix: "hljs language-",
+          highlight(code, lang) {
+            try {
+              if (isString(lang) && hljs.getLanguage(lang)) {
+                return hljs.highlight(code, { language: lang }).value;
+              }
+              return hljs.highlightAuto(code).value;
+            } catch {
+              return code;
+            }
+          }
+        }),
+        { gfm: true, breaks: true }
+      );
+      const step1 = libExports.filterXSS(parser2.parse(src), xssOptions);
+      const hasRawBlocks = /<pre[^>]*>\s*<code[^>]*>/.test(step1) && !/<span[^>]+class="[^"]*hljs-/.test(step1);
+      if (!hasRawBlocks) {
+        if (!cancelled) setHtml(step1);
+        return;
+      }
+      const doc2 = new DOMParser().parseFromString(step1, "text/html");
+      doc2.querySelectorAll("pre code").forEach((codeEl) => {
+        var _a;
+        try {
+          const cls = codeEl.getAttribute("class") ?? "";
+          const m = cls.match(/language-([\w+-]+)/);
+          const lang = m == null ? void 0 : m[1];
+          const text = codeEl.textContent ?? "";
+          const html2 = isString(lang) && hljs.getLanguage(lang) ? hljs.highlight(text, { language: lang }).value : hljs.highlightAuto(text).value;
+          codeEl.innerHTML = html2;
+          codeEl.classList.add("hljs");
+          (_a = codeEl.closest("pre")) == null ? void 0 : _a.classList.add("hljs");
+        } catch {
+        }
+      });
+      const step2 = doc2.body.innerHTML;
+      if (!cancelled) setHtml(step2);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [src, fastHtml, codeTheme]);
+  const safeHtml = html || fastHtml;
   const VOID_TAGS = /* @__PURE__ */ new Set([
     "area",
     "base",
@@ -69,7 +200,9 @@ function RichTextClient({
       (child, i) => domNodeToReact(child, `${path}.${i}`)
     );
     const keyedChildren = normalize(
-      childReactNodes.map((c, i) => isValidElement(c) ? withKey(c, `${path}.c${i}`) : c)
+      childReactNodes.map(
+        (c, i) => isValidElement(c) ? withKey(c, `${path}.c${i}`) : c
+      )
     );
     switch (tagName) {
       case "h1":
@@ -132,8 +265,22 @@ function RichTextClient({
         );
       }
       case "pre": {
-        const cls = bem("pre");
-        return /* @__PURE__ */ jsx("pre", { className: cls, children: keyedChildren });
+        const existing = elem.getAttribute("class");
+        return /* @__PURE__ */ jsx("pre", { className: [bem("pre"), existing].filter(Boolean).join(" "), children: keyedChildren });
+      }
+      case "code": {
+        const existing = elem.getAttribute("class");
+        return /* @__PURE__ */ jsx("code", { className: [bem("code"), existing].filter(Boolean).join(" "), children: keyedChildren });
+      }
+      case "blockquote": {
+        const existing = elem.getAttribute("class");
+        return /* @__PURE__ */ jsx(
+          "blockquote",
+          {
+            className: [bem("blockquote"), existing].filter(Boolean).join(" "),
+            children: keyedChildren
+          }
+        );
       }
       case "ul": {
         const cls = bem("ul");
@@ -141,7 +288,23 @@ function RichTextClient({
       }
       case "ol": {
         const cls = bem("ol");
-        return /* @__PURE__ */ jsx("ol", { className: cls, children: keyedChildren });
+        const startAttr = elem.getAttribute("start");
+        const start = isString(startAttr) ? parseInt(startAttr, 10) || 1 : 1;
+        const liElems = Array.from(elem.children).filter(
+          (e) => e.tagName.toLowerCase() === "li"
+        );
+        return /* @__PURE__ */ jsx("ol", { className: cls, children: liElems.map((liEl, index) => {
+          const contentNodes = Array.from(liEl.childNodes).map(
+            (child, i) => domNodeToReact(child, `${path}.li${index}.${i}`)
+          );
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsxs("li", { className: bem("li"), children: [
+              /* @__PURE__ */ jsx("i", { className: bem("ol__decimal"), children: start + index }),
+              /* @__PURE__ */ jsx("span", { className: bem("li__content"), children: normalize(contentNodes.map(renderAnimation)) })
+            ] }, `ol-li-${index}`)
+          );
+        }) });
       }
       case "li": {
         const cls = bem("li");
@@ -160,7 +323,10 @@ function RichTextClient({
         ] });
       }
       default: {
-        const props2 = { className: bem(tagName) };
+        const existing = elem.getAttribute("class");
+        const props2 = {
+          className: [bem(tagName), existing].filter(Boolean).join(" ")
+        };
         if (tagName === "img") {
           props2.src = elem.getAttribute("src") ?? "";
           props2.alt = elem.getAttribute("alt") ?? "";
@@ -195,10 +361,14 @@ function RichTextClient({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: containerRef,
       className: bem(void 0, void 0, className),
       ...schema,
       ...props,
-      children: topLevelChildren.map((n, i) => /* @__PURE__ */ jsx(Fragment, { children: domNodeToReact(n) }, `top-level-${i}`))
+      children: topLevelChildren.map((n, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsx(Fragment, { children: domNodeToReact(n) }, `top-level-${i}`)
+      ))
     }
   );
 }

package/dist/components/rich-text/RichText.module.scss.js

@@ -1,8 +1,8 @@
 const styles = {
   "prokodo-RichText__a": "prokodo-RichText__a",
-  "prokodo-RichText": "prokodo-RichText",
   "prokodo-RichText__p": "prokodo-RichText__p",
   "prokodo-RichText__pre": "prokodo-RichText__pre",
+  "prokodo-RichText__blockquote": "prokodo-RichText__blockquote",
   "prokodo-RichText__ul": "prokodo-RichText__ul",
   "prokodo-RichText__ol": "prokodo-RichText__ol",
   "prokodo-RichText__li": "prokodo-RichText__li",