@bendyline/squisq-react 2.2.0 → 2.3.0

package/dist/chunk-D7KN4CRG.js

@@ -0,0 +1,396 @@
+import {
+  MermaidDiagram
+} from "./chunk-WLUZTUNZ.js";
+import {
+  useMediaUrl
+} from "./chunk-LR3AIGDD.js";
+
+// src/InlineVideoPlayer.tsx
+import { jsx } from "react/jsx-runtime";
+function InlineVideoPlayer({
+  src,
+  basePath = "",
+  width,
+  height,
+  poster,
+  controls = true,
+  preload = "metadata",
+  className
+}) {
+  const resolvedSrc = useMediaUrl(src, basePath);
+  const resolvedPoster = useMediaUrl(poster ?? "", basePath);
+  const posterUrl = poster ? resolvedPoster : void 0;
+  if (!resolvedSrc) return null;
+  return /* @__PURE__ */ jsx("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx(
+    "video",
+    {
+      src: resolvedSrc,
+      poster: posterUrl,
+      controls,
+      preload,
+      width,
+      height,
+      playsInline: true
+    }
+  ) });
+}
+
+// src/InlineAudioPlayer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function InlineAudioPlayer({
+  src,
+  basePath = "",
+  controls = true,
+  preload = "metadata",
+  className
+}) {
+  const resolvedSrc = useMediaUrl(src, basePath);
+  if (!resolvedSrc) return null;
+  return /* @__PURE__ */ jsx2("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx2("audio", { src: resolvedSrc, controls, preload }) });
+}
+
+// src/MarkdownRenderer.tsx
+import { Fragment } from "react";
+import {
+  sanitizeHtmlNodes,
+  sanitizeUrl
+} from "@bendyline/squisq/markdown";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DEFAULT_CTX = { htmlPolicy: "sanitize" };
+function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
+  return nodes.map((node, i) => {
+    const key = `${keyPrefix}i${i}`;
+    switch (node.type) {
+      case "text": {
+        if (!node.value.includes("\n")) {
+          return /* @__PURE__ */ jsx3(Fragment, { children: node.value }, key);
+        }
+        const parts = node.value.split("\n");
+        return /* @__PURE__ */ jsx3(Fragment, { children: parts.map((part, j) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          j > 0 && /* @__PURE__ */ jsx3("br", {}),
+          part
+        ] }, j)) }, key);
+      }
+      case "emphasis":
+        return /* @__PURE__ */ jsx3("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
+      case "strong":
+        return /* @__PURE__ */ jsx3("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
+      case "delete":
+        return /* @__PURE__ */ jsx3("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
+      case "inlineCode":
+        return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-code", children: node.value }, key);
+      case "link": {
+        const href = sanitizeUrl(node.url, "link", { extraLinkSchemes: ctx.linkSchemes });
+        if (!href) {
+          return /* @__PURE__ */ jsx3("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
+        }
+        return /* @__PURE__ */ jsx3(
+          "a",
+          {
+            className: "squisq-md-link",
+            href,
+            title: node.title ?? void 0,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: renderInline(node.children, key, ctx)
+          },
+          key
+        );
+      }
+      case "image":
+        return /* @__PURE__ */ jsx3(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+      case "break":
+        return /* @__PURE__ */ jsx3("br", {}, key);
+      case "inlineMath":
+        return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-math", children: node.value }, key);
+      case "htmlInline":
+        if (ctx.htmlPolicy === "strip") return null;
+        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+      case "footnoteReference":
+        return /* @__PURE__ */ jsx3("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs("a", { href: `#fn-${node.identifier}`, children: [
+          "[",
+          node.label ?? node.identifier,
+          "]"
+        ] }) }, key);
+      case "linkReference":
+        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
+      case "imageReference":
+        return /* @__PURE__ */ jsxs("span", { className: "squisq-md-image-ref", children: [
+          "[",
+          node.alt ?? node.identifier,
+          "]"
+        ] }, key);
+      case "textDirective":
+        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
+      case "mention":
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "squisq-md-mention mention",
+            "data-mention": "true",
+            "data-kind": node.targetKind,
+            "data-id": node.targetId,
+            "data-label": node.displayName,
+            children: [
+              "@",
+              node.displayName
+            ]
+          },
+          key
+        );
+      default:
+        return null;
+    }
+  });
+}
+function renderBlock(node, key, ctx = DEFAULT_CTX) {
+  switch (node.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx3("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
+    case "heading": {
+      const Tag = `h${node.depth}`;
+      return /* @__PURE__ */ jsx3(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx3("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
+    case "list":
+      if (node.ordered) {
+        return /* @__PURE__ */ jsx3("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+      }
+      return /* @__PURE__ */ jsx3("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+    case "code":
+      if (node.lang?.trim().toLowerCase() === "mermaid") {
+        return /* @__PURE__ */ jsx3(
+          MermaidDiagram,
+          {
+            source: node.value,
+            className: "squisq-md-mermaid",
+            ariaLabel: "Mermaid diagram",
+            theme: ctx.theme
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsx3("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx3("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+    case "thematicBreak":
+      return /* @__PURE__ */ jsx3("hr", { className: "squisq-md-hr" }, key);
+    case "table":
+      return renderTable(node.children, node.align, key, ctx);
+    case "htmlBlock":
+      if (ctx.htmlPolicy === "strip") return null;
+      return /* @__PURE__ */ jsx3("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+    case "math":
+      return /* @__PURE__ */ jsx3("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx3("code", { children: node.value }) }, key);
+    case "definition":
+      return null;
+    case "footnoteDefinition":
+      return /* @__PURE__ */ jsxs("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx3("sup", { children: node.label ?? node.identifier }),
+        renderBlocks(node.children, key, ctx)
+      ] }, key);
+    case "containerDirective":
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: [
+            node.label && /* @__PURE__ */ jsx3("div", { className: "squisq-md-directive-label", children: node.label }),
+            renderBlocks(node.children, key, ctx)
+          ]
+        },
+        key
+      );
+    case "leafDirective":
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: renderInline(node.children, key, ctx)
+        },
+        key
+      );
+    case "definitionList":
+      return /* @__PURE__ */ jsx3("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+        if (child.type === "definitionTerm") {
+          return /* @__PURE__ */ jsx3("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
+        }
+        return /* @__PURE__ */ jsx3("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
+      }) }, key);
+    default:
+      return null;
+  }
+}
+function renderListItem(item, key, ctx = DEFAULT_CTX) {
+  const isTask = item.checked !== null && item.checked !== void 0;
+  return /* @__PURE__ */ jsxs("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
+    isTask && /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+    renderBlocks(item.children, key, ctx)
+  ] }, key);
+}
+function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
+  const [headerRow, ...bodyRows] = rows;
+  return /* @__PURE__ */ jsxs("table", { className: "squisq-md-table", children: [
+    headerRow && /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx3(
+      "th",
+      {
+        className: "squisq-md-th",
+        style: align?.[ci] ? { textAlign: align[ci] } : void 0,
+        children: renderInline(cell.children, `${key}th${ci}`, ctx)
+      },
+      `${key}th${ci}`
+    )) }) }),
+    bodyRows.length > 0 && /* @__PURE__ */ jsx3("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx3("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx3(
+      "td",
+      {
+        className: "squisq-md-td",
+        style: align?.[ci] ? { textAlign: align[ci] } : void 0,
+        children: renderInline(cell.children, `${key}td${ri}-${ci}`, ctx)
+      },
+      `${key}td${ri}-${ci}`
+    )) }, `${key}tr${ri}`)) })
+  ] }, key);
+}
+function renderBlocks(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`, ctx));
+}
+function MdImage({ src, alt, title }) {
+  const safeSrc = sanitizeUrl(src, "media");
+  const resolved = useMediaUrl(safeSrc ?? "", ".");
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx3("img", { className: "squisq-md-image", src: resolved, alt, title });
+}
+function resolveHtmlNodes(nodes, htmlPolicy) {
+  if (htmlPolicy === "strip") return [];
+  if (htmlPolicy === "trusted") return nodes;
+  return sanitizeHtmlNodes(nodes);
+}
+var DANGEROUS_HTML_TAGS = /* @__PURE__ */ new Set([
+  "base",
+  "embed",
+  "iframe",
+  "link",
+  "meta",
+  "object",
+  "script",
+  "style",
+  "title"
+]);
+var PASSTHROUGH_ATTRS = {
+  // common
+  class: "className",
+  id: "id",
+  title: "title",
+  style: "style",
+  // media-adjacent (used when video/audio appear inside other wrappers)
+  width: "width",
+  height: "height",
+  src: "src",
+  alt: "alt",
+  loading: "loading",
+  decoding: "decoding",
+  // anchor
+  href: "href",
+  target: "target",
+  rel: "rel"
+};
+var RE_USED_TARGETS = /* @__PURE__ */ new Set(["", "_self", "_parent", "_top"]);
+function reactPropsFromAttrs(attrs, ctx) {
+  const out = {};
+  for (const [name, value] of Object.entries(attrs)) {
+    const propName = PASSTHROUGH_ATTRS[name];
+    if (!propName) continue;
+    if (propName === "style") {
+      out["data-style"] = value;
+      continue;
+    }
+    if (propName === "href") {
+      const href = sanitizeUrl(value, "link", { extraLinkSchemes: ctx.linkSchemes });
+      if (href) out.href = href;
+      continue;
+    }
+    if (propName === "src") {
+      const src = sanitizeUrl(value, "media");
+      if (src) out.src = src;
+      continue;
+    }
+    out[propName] = value;
+  }
+  if (typeof out.target === "string" && !RE_USED_TARGETS.has(out.target.toLowerCase())) {
+    const rel = typeof out.rel === "string" ? out.rel : "";
+    const tokens = rel.split(/\s+/).filter((t) => t && t.toLowerCase() !== "opener");
+    if (!tokens.some((t) => t.toLowerCase() === "noopener")) tokens.push("noopener");
+    out.rel = tokens.join(" ");
+  }
+  return out;
+}
+function renderHtmlElement(el, key, ctx) {
+  const tagName = el.tagName.toLowerCase();
+  if (DANGEROUS_HTML_TAGS.has(tagName)) return null;
+  if (tagName === "video") {
+    const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
+    const poster = sanitizeUrl(el.attributes.poster ?? "", "media") ?? void 0;
+    return /* @__PURE__ */ jsx3(
+      InlineVideoPlayer,
+      {
+        src,
+        width: el.attributes.width,
+        height: el.attributes.height,
+        poster,
+        controls: "controls" in el.attributes,
+        preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
+      },
+      key
+    );
+  }
+  if (tagName === "audio") {
+    const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
+    return /* @__PURE__ */ jsx3(
+      InlineAudioPlayer,
+      {
+        src,
+        controls: "controls" in el.attributes,
+        preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
+      },
+      key
+    );
+  }
+  const Tag = tagName;
+  const props = reactPropsFromAttrs(el.attributes, ctx);
+  if (el.selfClosing) {
+    return /* @__PURE__ */ jsx3(Tag, { ...props }, key);
+  }
+  return /* @__PURE__ */ jsx3(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
+}
+function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
+  return nodes.map((node, i) => {
+    const key = `${keyPrefix}${i}`;
+    switch (node.type) {
+      case "htmlElement":
+        return renderHtmlElement(node, key, ctx);
+      case "htmlText":
+        return /* @__PURE__ */ jsx3(Fragment, { children: node.value }, key);
+      case "htmlComment":
+        return null;
+      default:
+        return null;
+    }
+  });
+}
+function MarkdownRenderer({
+  nodes,
+  className,
+  htmlPolicy = "sanitize",
+  linkSchemes,
+  theme
+}) {
+  if (!nodes || nodes.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes, theme }) });
+}
+
+export {
+  InlineVideoPlayer,
+  InlineAudioPlayer,
+  MarkdownRenderer
+};

package/dist/chunk-LR3AIGDD.js

@@ -0,0 +1,58 @@
+// src/hooks/MediaContext.tsx
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
+import {
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+  isResourceUrlAllowed
+} from "@bendyline/squisq/markdown";
+var MediaContext = createContext(null);
+var ResourcePolicyContext = createContext(
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY
+);
+function useResourcePolicy() {
+  return useContext(ResourcePolicyContext);
+}
+function useMediaProvider() {
+  return useContext(MediaContext);
+}
+function useMediaUrl(relativePath, basePath) {
+  const provider = useMediaProvider();
+  const resourcePolicy = useResourcePolicy();
+  const safePath = typeof relativePath === "string" ? relativePath : "";
+  const isAbsolute = !safePath || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(safePath);
+  const fallback = useMemo(() => {
+    const candidate = isAbsolute ? safePath : `${basePath.replace(/\/$/, "")}/${safePath}`;
+    return isResourceUrlAllowed(candidate, resourcePolicy) ? candidate : "";
+  }, [isAbsolute, safePath, basePath, resourcePolicy]);
+  const needsProvider = !isAbsolute && !!provider;
+  const [url, setUrl] = useState(fallback);
+  useEffect(() => {
+    if (!needsProvider) {
+      setUrl(fallback);
+      return;
+    }
+    let cancelled = false;
+    setUrl(fallback);
+    provider.resolveUrl(safePath).then(
+      (resolved) => {
+        if (!cancelled) {
+          setUrl(isResourceUrlAllowed(resolved, resourcePolicy) ? resolved : "");
+        }
+      },
+      () => {
+        if (!cancelled) setUrl(fallback);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [needsProvider, provider, safePath, fallback, resourcePolicy]);
+  return needsProvider ? url : fallback;
+}
+
+export {
+  MediaContext,
+  ResourcePolicyContext,
+  useResourcePolicy,
+  useMediaProvider,
+  useMediaUrl
+};