@particle-academy/react-fancy 5.65.0 → 5.67.0

package/dist/{chunk-L24LUSEE.js → chunk-FXOT4P4P.js}

@@ -1,10 +1,31 @@
-import { sanitizeHtml } from './chunk-6TBRBN7H.js';
+import { sanitizeHtml, sanitizeHref, Button } from './chunk-OXERDFFF.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { marked } from 'marked';
-import { useMemo } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useMemo, useRef, useState, useCallback, useContext, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/ContentRenderer/extensions.ts
+var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "xlink:href"]);
+function safeAttributes(attrs) {
+  const out = {};
+  for (const [name, value] of Object.entries(attrs)) {
+    const lower = name.toLowerCase();
+    if (lower.startsWith("on") || lower === "srcdoc") continue;
+    if (URL_ATTRS.has(lower)) {
+      const safe = sanitizeHref(value);
+      if (safe === void 0) continue;
+      out[name] = safe;
+      continue;
+    }
+    out[name] = value;
+  }
+  return out;
+}
+function tagAttributes(raw, unsafe) {
+  const attrs = raw ? parseAttributes(raw) : {};
+  return unsafe ? attrs : safeAttributes(attrs);
+}
 var globalRegistry = [];
 function registerExtension(extension) {
   const idx = globalRegistry.findIndex(
@@ -811,72 +832,493 @@ function extensionEditorClasses(extensions) {
     ].join(" ");
   }).join(" ");
 }
-function RenderedContent({
-  html,
-  extensions: instanceExtensions,
-  unsafe = false
+
+// src/components/ContentRenderer/markdown-blocks.ts
+var FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function maskInlineCode(line) {
+  let out = "";
+  let i = 0;
+  while (i < line.length) {
+    if (line[i] !== "`") {
+      out += line[i];
+      i++;
+      continue;
+    }
+    let n = 0;
+    while (line[i + n] === "`") n++;
+    const fence = "`".repeat(n);
+    let search = i + n;
+    let close = -1;
+    while (search < line.length) {
+      const at = line.indexOf(fence, search);
+      if (at < 0) break;
+      let len = 0;
+      while (line[at + len] === "`") len++;
+      if (len === n) {
+        close = at;
+        break;
+      }
+      search = at + len;
+    }
+    if (close < 0) {
+      out += fence;
+      i += n;
+      continue;
+    }
+    out += " ".repeat(close + n - i);
+    i = close + n;
+  }
+  return out;
+}
+function scan(src, names, trackFences) {
+  const tokens = [];
+  let openFenceStart = -1;
+  if (names.length === 0 && !trackFences) return { tokens, openFenceStart };
+  const tagRe = names.length ? new RegExp(`<(\\/?)(${names.map(escapeRegExp).join("|")})(?=[\\s>/])([^>]*)>`, "gi") : null;
+  let fence = null;
+  let pos = 0;
+  while (pos <= src.length) {
+    const nl = src.indexOf("\n", pos);
+    const lineEnd = nl < 0 ? src.length : nl;
+    const line = src.slice(pos, lineEnd);
+    if (trackFences) {
+      if (fence) {
+        const close = new RegExp(`^ {0,3}${fence.char === "`" ? "`" : "~"}{${fence.len},}\\s*$`);
+        if (close.test(line)) {
+          fence = null;
+          openFenceStart = -1;
+        }
+        pos = lineEnd + 1;
+        if (nl < 0) break;
+        continue;
+      }
+      const m = FENCE_OPEN.exec(line);
+      if (m && !(m[1][0] === "`" && m[2].includes("`"))) {
+        fence = { char: m[1][0], len: m[1].length };
+        openFenceStart = pos;
+        pos = lineEnd + 1;
+        if (nl < 0) break;
+        continue;
+      }
+    }
+    if (tagRe) {
+      const masked = trackFences ? maskInlineCode(line) : line;
+      const indent2 = /^ {0,3}/.exec(masked)[0].length;
+      tagRe.lastIndex = 0;
+      let t;
+      while ((t = tagRe.exec(masked)) !== null) {
+        const isClose = t[1] === "/";
+        const attrs = t[3];
+        if (isClose && attrs.trim() !== "") continue;
+        if (!isClose && attrs.trimEnd().endsWith("/")) continue;
+        tokens.push({
+          kind: isClose ? "close" : "open",
+          name: t[2].toLowerCase(),
+          start: pos + t.index,
+          end: pos + t.index + t[0].length,
+          attrs: isClose ? "" : attrs.trim(),
+          lineStart: t.index === indent2
+        });
+      }
+    }
+    if (nl < 0) break;
+    pos = lineEnd + 1;
+  }
+  return { tokens, openFenceStart };
+}
+function splitMarkdownBlocks(src, tags) {
+  const names = tags.map((t) => t.toLowerCase());
+  if (names.length === 0) return src ? [{ type: "markdown", source: src }] : [];
+  const { tokens } = scan(src, names, true);
+  const blocks = [];
+  let cursor = 0;
+  let i = 0;
+  while (i < tokens.length) {
+    const open = tokens[i];
+    if (open.kind !== "open" || !open.lineStart || open.start < cursor) {
+      i++;
+      continue;
+    }
+    let depth = 0;
+    let closeIdx = -1;
+    for (let j = i; j < tokens.length; j++) {
+      const t = tokens[j];
+      if (t.name !== open.name) continue;
+      depth += t.kind === "open" ? 1 : -1;
+      if (depth === 0) {
+        closeIdx = j;
+        break;
+      }
+    }
+    if (closeIdx < 0) {
+      i++;
+      continue;
+    }
+    const close = tokens[closeIdx];
+    if (open.start > cursor) blocks.push({ type: "markdown", source: src.slice(cursor, open.start) });
+    blocks.push({ type: "tag", tag: open.name, attrs: open.attrs, body: src.slice(open.end, close.start) });
+    cursor = close.end;
+    i = closeIdx + 1;
+  }
+  if (cursor < src.length) blocks.push({ type: "markdown", source: src.slice(cursor) });
+  return blocks;
+}
+function streamingCut(src, tags, markdown) {
+  const names = tags.map((t) => t.toLowerCase());
+  const { tokens, openFenceStart } = scan(src, names, markdown);
+  let cut = src.length;
+  if (openFenceStart >= 0) cut = Math.min(cut, openFenceStart);
+  const stack = [];
+  for (const t of tokens) {
+    if (t.start >= cut) break;
+    if (t.kind === "open") {
+      stack.push(t);
+      continue;
+    }
+    for (let k = stack.length - 1; k >= 0; k--) {
+      if (stack[k].name === t.name) {
+        stack.length = k;
+        break;
+      }
+    }
+  }
+  if (stack.length) cut = Math.min(cut, stack[0].start);
+  const lastLineStart = src.lastIndexOf("\n", cut - 1) + 1;
+  const lastLine = src.slice(lastLineStart, cut);
+  if (markdown && /^ {0,3}(`{1,2}|~{1,2})$/.test(lastLine)) {
+    return Math.min(cut, lastLineStart);
+  }
+  if (names.length) {
+    const masked = markdown ? maskInlineCode(lastLine) : lastLine;
+    const lt = masked.lastIndexOf("<");
+    if (lt >= 0) {
+      const m = /^<(\/?)([A-Za-z][\w-]*)?([^>]*)$/.exec(masked.slice(lt));
+      if (m) {
+        const name = (m[2] ?? "").toLowerCase();
+        const rest = m[3];
+        let partial = false;
+        if (!name) partial = rest === "";
+        else if (names.includes(name)) partial = rest === "" || /^\s/.test(rest);
+        else partial = rest === "" && names.some((n) => n.startsWith(name));
+        if (partial) cut = Math.min(cut, lastLineStart + lt);
+      }
+    }
+  }
+  return cut;
+}
+var FEEDBACK_MS = 2e3;
+var WRITE_TIMEOUT_MS = 5e3;
+var CopyContext = createContext(null);
+async function defaultClipboardWriter(payload) {
+  const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+  if (!clip) throw new Error("Clipboard API unavailable");
+  const Item = globalThis.ClipboardItem;
+  if (payload.html && Item && typeof clip.write === "function") {
+    try {
+      await clip.write([
+        new Item({
+          "text/html": new Blob([payload.html], { type: "text/html" }),
+          "text/plain": new Blob([payload.text], { type: "text/plain" })
+        })
+      ]);
+      return;
+    } catch {
+    }
+  }
+  if (typeof clip.writeText !== "function") throw new Error("Clipboard writeText unavailable");
+  await clip.writeText(payload.text);
+}
+async function runWriter(writer, payload) {
+  let timer;
+  try {
+    const result = await Promise.race([
+      Promise.resolve().then(() => writer(payload)),
+      new Promise((resolve) => {
+        timer = setTimeout(() => resolve(false), WRITE_TIMEOUT_MS);
+      })
+    ]);
+    return result !== false;
+  } catch {
+    return false;
+  } finally {
+    if (timer) clearTimeout(timer);
+  }
+}
+function codeText(pre, fromMarkdown) {
+  const text = (pre.querySelector("code") ?? pre).textContent ?? "";
+  return fromMarkdown && text.endsWith("\n") ? text.slice(0, -1) : text;
+}
+function tableTsv(table) {
+  const rows = [];
+  for (const tr of Array.from(table.querySelectorAll("tr"))) {
+    if (tr.closest("table") !== table) continue;
+    const cells = Array.from(tr.children).filter((c) => c.tagName === "TD" || c.tagName === "TH");
+    rows.push(cells.map((c) => cellText(c)).join("	"));
+  }
+  return rows.join("\n");
+}
+function cellText(cell) {
+  const clone = cell.cloneNode(true);
+  for (const br of Array.from(clone.querySelectorAll("br"))) br.replaceWith(" ");
+  return (clone.textContent ?? "").replace(/[\t\r\n]+/g, " ").replace(/ {2,}/g, " ").trim();
+}
+function HtmlChunk({ html, fromMarkdown }) {
+  const ref = useRef(null);
+  const ctx = useContext(CopyContext);
+  const [targets, setTargets] = useState([]);
+  const code = ctx?.code ?? false;
+  const table = ctx?.table ?? false;
+  const inner = useMemo(() => ({ __html: html }), [html]);
+  useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root || !code && !table) {
+      setTargets([]);
+      return;
+    }
+    const found = [];
+    const selector = [code && "pre", table && "table"].filter(Boolean).join(",");
+    for (const el of Array.from(root.querySelectorAll(selector))) {
+      const kind = el.tagName === "PRE" ? "code" : "table";
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("data-react-fancy-content-copy-block", kind);
+      wrapper.className = kind === "code" ? "group relative" : "group relative flex flex-col";
+      const host = document.createElement("div");
+      host.setAttribute("data-react-fancy-content-copy-host", "");
+      host.className = kind === "code" ? "absolute right-2 top-2 z-10" : "flex justify-end";
+      el.replaceWith(wrapper);
+      if (kind === "table") wrapper.append(host, el);
+      else wrapper.append(el, host);
+      found.push({ kind, el, host });
+    }
+    setTargets(found);
+    return () => {
+      for (const t of found) {
+        const wrapper = t.host.parentElement;
+        if (wrapper?.parentNode) wrapper.replaceWith(t.el);
+      }
+    };
+  }, [html, code, table]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref, dangerouslySetInnerHTML: inner }),
+    targets.map(
+      (t, i) => createPortal(
+        /* @__PURE__ */ jsx(CopyButton, { kind: t.kind, target: t.el, fromMarkdown }),
+        t.host,
+        `${i}`
+      )
+    )
+  ] });
+}
+function CopyButton({
+  kind,
+  target,
+  fromMarkdown
 }) {
-  const extensions = useMemo(
-    () => mergeExtensions(instanceExtensions),
-    [instanceExtensions]
+  const ctx = useContext(CopyContext);
+  const [state, setState] = useState("idle");
+  const timer = useRef(void 0);
+  const btn = useRef(null);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const onClick = useCallback(async () => {
+    if (!ctx || !btn.current) return;
+    const text = kind === "code" ? codeText(target, fromMarkdown) : tableTsv(target);
+    const ok = await ctx.copy({ kind, text, html: target.outerHTML }, btn.current);
+    setState(ok ? "copied" : "failed");
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setState("idle"), FEEDBACK_MS);
+  }, [ctx, kind, target, fromMarkdown]);
+  const idleLabel = kind === "code" ? "Copy code" : "Copy table";
+  const label = state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : idleLabel;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref: btn,
+      type: "button",
+      size: "xs",
+      variant: "ghost",
+      icon: state === "copied" ? "check" : state === "failed" ? "x" : "copy",
+      "aria-label": label,
+      title: label,
+      "data-react-fancy-content-copy": kind,
+      "data-copy-state": state,
+      onClick,
+      className: kind === "code" ? "text-zinc-300 hover:bg-zinc-800 hover:text-white opacity-70 group-hover:opacity-100 focus-visible:opacity-100" : "opacity-70 group-hover:opacity-100 focus-visible:opacity-100"
+    }
   );
-  const segments = useMemo(
-    () => parseSegments(html, extensions),
-    [html, extensions]
+}
+function useCopyPipeline({
+  writer,
+  onCopy,
+  rootRef,
+  announce
+}) {
+  const latest = useRef({ writer, onCopy, announce });
+  latest.current = { writer, onCopy, announce };
+  return useCallback(
+    async (payload, button) => {
+      const { writer: w, onCopy: report, announce: say } = latest.current;
+      const ok = await runWriter(w ?? defaultClipboardWriter, payload);
+      say(ok ? "Copied" : "Copy failed");
+      const all = rootRef.current ? Array.from(rootRef.current.querySelectorAll("[data-react-fancy-content-copy]")) : [];
+      report?.({ ...payload, index: all.indexOf(button), ok });
+      return ok;
+    },
+    [rootRef]
   );
+}
+var MAX_DEPTH = 8;
+function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
+  const active = depth >= MAX_DEPTH ? [] : extensions;
+  const blocks = useMemo(() => {
+    if (format !== "markdown") return null;
+    const mdTags = active.filter((e) => e.markdown).map((e) => e.tag);
+    return splitMarkdownBlocks(source, mdTags);
+  }, [source, format, active]);
+  if (!blocks) {
+    const html = unsafe ? source : sanitizeHtml(source);
+    return /* @__PURE__ */ jsx(RenderedContent, { html, extensions: active, unsafe, fromMarkdown: false, depth });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block, i) => {
+    if (block.type === "markdown") {
+      const raw = markdownToRawHtml(block.source);
+      const html = unsafe ? raw : sanitizeHtml(raw);
+      return /* @__PURE__ */ jsx(
+        RenderedContent,
+        {
+          html,
+          extensions: active,
+          unsafe,
+          fromMarkdown: true,
+          depth
+        },
+        i
+      );
+    }
+    const ext = active.find((e) => e.tag.toLowerCase() === block.tag);
+    if (!ext) return null;
+    const Component = ext.component;
+    const Wrapper = ext.block !== false ? "div" : "span";
+    return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": block.tag, children: /* @__PURE__ */ jsx(Component, { content: block.body, attributes: tagAttributes(block.attrs, unsafe), children: /* @__PURE__ */ jsx(
+      ContentBody,
+      {
+        source: block.body,
+        format: "markdown",
+        extensions: active,
+        unsafe,
+        depth: depth + 1
+      }
+    ) }) }, i);
+  }) });
+}
+function RenderedContent({ html, extensions, unsafe, fromMarkdown, depth }) {
+  const segments = useMemo(() => parseSegments(html, extensions), [html, extensions]);
   const renderHtml = (content) => unsafe ? content : sanitizeHtml(content);
+  if (segments.length === 0) return null;
   if (segments.length === 1 && segments[0].type === "html") {
-    return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segments[0].content) } });
-  }
-  if (segments.length === 0) {
-    return null;
+    return /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segments[0].content), fromMarkdown });
   }
   return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
     if (segment.type === "html") {
-      return segment.content ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segment.content) } }, i) : null;
+      return segment.content ? /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segment.content), fromMarkdown }, i) : null;
     }
-    const ext = extensions.find(
-      (e) => e.tag.toLowerCase() === segment.tag
-    );
+    const ext = extensions.find((e) => e.tag.toLowerCase() === segment.tag);
     if (!ext) return null;
     const Component = ext.component;
-    const isBlock = ext.block !== false;
-    const Wrapper = isBlock ? "div" : "span";
-    return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes }) }, i);
+    const Wrapper = ext.block !== false ? "div" : "span";
+    const children = ext.markdown ? /* @__PURE__ */ jsx(
+      ContentBody,
+      {
+        source: segment.content,
+        format: "html",
+        extensions,
+        unsafe,
+        depth: depth + 1
+      }
+    ) : void 0;
+    return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes, children }) }, i);
   }) });
 }
 RenderedContent.displayName = "RenderedContent";
+ContentBody.displayName = "ContentBody";
 function ContentRenderer({
   value,
   format = "auto",
   lineSpacing = 1.6,
   className,
   extensions: instanceExtensions,
-  unsafe = false
+  unsafe = false,
+  copyButtons = true,
+  onCopy,
+  clipboardWriter,
+  streaming = false
 }) {
   const extensions = useMemo(
     () => mergeExtensions(instanceExtensions),
     [instanceExtensions]
   );
-  const html = useMemo(() => {
-    const safe = value ?? "";
-    const resolvedFormat = format === "auto" ? detectFormat(safe) : format;
-    const raw = resolvedFormat === "markdown" ? markdownToRawHtml(safe) : safe;
-    return unsafe ? raw : sanitizeHtml(raw);
-  }, [value, format, unsafe]);
-  const hasExtensions = extensions.length > 0;
-  return /* @__PURE__ */ jsx(
+  const safe = value ?? "";
+  const resolvedFormat = format === "auto" ? detectFormat(safe) : format;
+  const source = useMemo(() => {
+    if (!streaming) return safe;
+    const cut = streamingCut(
+      safe,
+      extensions.map((e) => e.tag),
+      resolvedFormat === "markdown"
+    );
+    return safe.slice(0, cut);
+  }, [safe, streaming, extensions, resolvedFormat]);
+  const codeOn = copyButtons === true || typeof copyButtons === "object" && copyButtons.code !== false;
+  const tableOn = copyButtons === true || typeof copyButtons === "object" && copyButtons.table !== false;
+  const copyOn = codeOn || tableOn;
+  const rootRef = useRef(null);
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((message) => {
+    setAnnouncement("");
+    queueMicrotask(() => setAnnouncement(message));
+  }, []);
+  const copy = useCopyPipeline({ writer: clipboardWriter, onCopy, rootRef, announce });
+  const copyContext = useMemo(
+    () => ({ code: codeOn, table: tableOn, copy }),
+    [codeOn, tableOn, copy]
+  );
+  return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       "data-react-fancy-content-renderer": "",
+      "data-streaming": streaming ? "true" : void 0,
       style: { lineHeight: lineSpacing },
       className: cn("text-sm", proseClasses, className),
-      children: hasExtensions ? /* @__PURE__ */ jsx(RenderedContent, { html, extensions, unsafe }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } })
+      children: [
+        /* @__PURE__ */ jsx(CopyContext.Provider, { value: copyContext, children: /* @__PURE__ */ jsx(
+          ContentBody,
+          {
+            source,
+            format: resolvedFormat,
+            extensions,
+            unsafe
+          }
+        ) }),
+        copyOn && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-react-fancy-content-renderer-live": "",
+            className: "sr-only",
+            children: announcement
+          }
+        )
+      ]
     }
   );
 }
 ContentRenderer.displayName = "ContentRenderer";
 
 export { ContentRenderer, detectFormat, extensionEditorClasses, htmlToMarkdown, markdownToEditorHtml, mergeExtensions, proseClasses, registerExtension, registerExtensions, renderMarkdown };
-//# sourceMappingURL=chunk-L24LUSEE.js.map
-//# sourceMappingURL=chunk-L24LUSEE.js.map
+//# sourceMappingURL=chunk-FXOT4P4P.js.map
+//# sourceMappingURL=chunk-FXOT4P4P.js.map