@particle-academy/react-fancy 5.67.0 → 5.69.0

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

@@ -109,6 +109,19 @@ function markdownToRawHtml(markdown) {
 function renderMarkdown(markdown, sanitize) {
   return sanitizeHtml(markdownToRawHtml(markdown), sanitize);
 }
+
+// src/utils/visually-hidden.ts
+var visuallyHidden = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 var proseClasses = [
   "[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2",
   "[&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-2",
@@ -876,7 +889,7 @@ function maskInlineCode(line) {
 function scan(src, names, trackFences) {
   const tokens = [];
   let openFenceStart = -1;
-  if (names.length === 0 && !trackFences) return { tokens, openFenceStart };
+  if (names.length === 0 && !trackFences) return { tokens, openFenceStart, openFence: null };
   const tagRe = names.length ? new RegExp(`<(\\/?)(${names.map(escapeRegExp).join("|")})(?=[\\s>/])([^>]*)>`, "gi") : null;
   let fence = null;
   let pos = 0;
@@ -927,7 +940,39 @@ function scan(src, names, trackFences) {
     if (nl < 0) break;
     pos = lineEnd + 1;
   }
-  return { tokens, openFenceStart };
+  return { tokens, openFenceStart, openFence: fence };
+}
+function partialTagAt(lastLine, names, markdown) {
+  if (!names.length) return -1;
+  const masked = markdown ? maskInlineCode(lastLine) : lastLine;
+  const lt = masked.lastIndexOf("<");
+  if (lt < 0) return -1;
+  const m = /^<(\/?)([A-Za-z][\w-]*)?([^>]*)$/.exec(masked.slice(lt));
+  if (!m) return -1;
+  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));
+  return partial ? lt : -1;
+}
+function openTagsBefore(tokens, cut) {
+  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;
+      }
+    }
+  }
+  return stack;
 }
 function splitMarkdownBlocks(src, tags) {
   const names = tags.map((t) => t.toLowerCase());
@@ -971,43 +1016,45 @@ function streamingCut(src, tags, markdown) {
   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;
-      }
-    }
-  }
+  const stack = openTagsBefore(tokens, cut);
   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);
-      }
+  const lt = partialTagAt(lastLine, names, markdown);
+  if (lt >= 0) cut = Math.min(cut, lastLineStart + lt);
+  return cut;
+}
+function streamingProgressive(src, tags, markdown) {
+  const names = tags.map((t) => t.toLowerCase());
+  const { tokens, openFenceStart, openFence } = scan(src, names, markdown);
+  let cut = src.length;
+  let fence = openFenceStart >= 0 ? openFence : null;
+  const lastLineStart = src.lastIndexOf("\n", cut - 1) + 1;
+  const lastLine = src.slice(lastLineStart);
+  if (fence) {
+    if (openFenceStart === lastLineStart) {
+      cut = openFenceStart;
+      fence = null;
+    } else {
+      const m = /^ {0,3}(`+|~+)$/.exec(lastLine);
+      if (m && m[1][0] === fence.char && m[1].length < fence.len) cut = lastLineStart;
     }
+  } else if (markdown && /^ {0,3}(`{1,2}|~{1,2})$/.test(lastLine)) {
+    cut = lastLineStart;
+  } else {
+    const lt = partialTagAt(lastLine, names, markdown);
+    if (lt >= 0) cut = lastLineStart + lt;
   }
-  return cut;
+  let out = src.slice(0, cut);
+  if (fence) {
+    out += (out.endsWith("\n") ? "" : "\n") + fence.char.repeat(fence.len) + "\n";
+  }
+  const stack = openTagsBefore(tokens, fence ? openFenceStart : cut);
+  for (let k = stack.length - 1; k >= 0; k--) out += `</${stack[k].name}>`;
+  return { source: out, openFence: fence !== null };
 }
 var FEEDBACK_MS = 2e3;
 var WRITE_TIMEOUT_MS = 5e3;
@@ -1065,12 +1112,17 @@ function cellText(cell) {
   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 }) {
+function HtmlChunk({
+  html,
+  fromMarkdown,
+  tail = false
+}) {
   const ref = useRef(null);
   const ctx = useContext(CopyContext);
   const [targets, setTargets] = useState([]);
   const code = ctx?.code ?? false;
   const table = ctx?.table ?? false;
+  const holdLastCode = tail && (ctx?.holdTailCode ?? false);
   const inner = useMemo(() => ({ __html: html }), [html]);
   useLayoutEffect(() => {
     const root = ref.current;
@@ -1080,11 +1132,14 @@ function HtmlChunk({ html, fromMarkdown }) {
     }
     const found = [];
     const selector = [code && "pre", table && "table"].filter(Boolean).join(",");
+    const inProgress = holdLastCode ? Array.from(root.querySelectorAll("pre")).pop() : void 0;
     for (const el of Array.from(root.querySelectorAll(selector))) {
+      if (el === inProgress) continue;
       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";
+      wrapper.style.position = "relative";
       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";
@@ -1100,7 +1155,7 @@ function HtmlChunk({ html, fromMarkdown }) {
         if (wrapper?.parentNode) wrapper.replaceWith(t.el);
       }
     };
-  }, [html, code, table]);
+  }, [html, code, table, holdLastCode]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref, dangerouslySetInnerHTML: inner }),
     targets.map(
@@ -1170,7 +1225,11 @@ function useCopyPipeline({
   );
 }
 var MAX_DEPTH = 8;
-function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
+function lastIndexWith(items, renders) {
+  for (let i = items.length - 1; i >= 0; i--) if (renders(items[i])) return i;
+  return -1;
+}
+function ContentBody({ source, format, extensions, unsafe, depth = 0, tail = false }) {
   const active = depth >= MAX_DEPTH ? [] : extensions;
   const blocks = useMemo(() => {
     if (format !== "markdown") return null;
@@ -1179,8 +1238,19 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
   }, [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(
+      RenderedContent,
+      {
+        html,
+        extensions: active,
+        unsafe,
+        fromMarkdown: false,
+        depth,
+        tail
+      }
+    );
   }
+  const last = tail ? lastIndexWith(blocks, (b) => b.type === "tag" || b.source.trim() !== "") : -1;
   return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block, i) => {
     if (block.type === "markdown") {
       const raw = markdownToRawHtml(block.source);
@@ -1192,7 +1262,8 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
           extensions: active,
           unsafe,
           fromMarkdown: true,
-          depth
+          depth,
+          tail: i === last
         },
         i
       );
@@ -1208,21 +1279,38 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
         format: "markdown",
         extensions: active,
         unsafe,
-        depth: depth + 1
+        depth: depth + 1,
+        tail: i === last
       }
     ) }) }, i);
   }) });
 }
-function RenderedContent({ html, extensions, unsafe, fromMarkdown, depth }) {
+function RenderedContent({
+  html,
+  extensions,
+  unsafe,
+  fromMarkdown,
+  depth,
+  tail = false
+}) {
   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(HtmlChunk, { html: renderHtml(segments[0].content), fromMarkdown });
+    return /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segments[0].content), fromMarkdown, tail });
   }
+  const last = tail ? lastIndexWith(segments, (s) => s.type === "extension" || s.content.trim() !== "") : -1;
   return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
     if (segment.type === "html") {
-      return segment.content ? /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segment.content), fromMarkdown }, i) : null;
+      return segment.content ? /* @__PURE__ */ jsx(
+        HtmlChunk,
+        {
+          html: renderHtml(segment.content),
+          fromMarkdown,
+          tail: i === last
+        },
+        i
+      ) : null;
     }
     const ext = extensions.find((e) => e.tag.toLowerCase() === segment.tag);
     if (!ext) return null;
@@ -1235,7 +1323,8 @@ function RenderedContent({ html, extensions, unsafe, fromMarkdown, depth }) {
         format: "html",
         extensions,
         unsafe,
-        depth: depth + 1
+        depth: depth + 1,
+        tail: i === last
       }
     ) : void 0;
     return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes, children }) }, i);
@@ -1261,15 +1350,14 @@ function ContentRenderer({
   );
   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 progressive = streaming === "progressive";
+  const { source, openFence } = useMemo(() => {
+    if (!streaming) return { source: safe, openFence: false };
+    const tags = extensions.map((e) => e.tag);
+    const markdown = resolvedFormat === "markdown";
+    if (progressive) return streamingProgressive(safe, tags, markdown);
+    return { source: safe.slice(0, streamingCut(safe, tags, markdown)), openFence: false };
+  }, [safe, streaming, progressive, 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;
@@ -1281,16 +1369,18 @@ function ContentRenderer({
   }, []);
   const copy = useCopyPipeline({ writer: clipboardWriter, onCopy, rootRef, announce });
   const copyContext = useMemo(
-    () => ({ code: codeOn, table: tableOn, copy }),
-    [codeOn, tableOn, copy]
+    () => ({ code: codeOn, table: tableOn, copy, holdTailCode: openFence }),
+    [codeOn, tableOn, copy, openFence]
   );
+  const contain = copyOn && cn("relative", className).split(" ").includes("relative");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       "data-react-fancy-content-renderer": "",
       "data-streaming": streaming ? "true" : void 0,
-      style: { lineHeight: lineSpacing },
+      "data-streaming-mode": progressive ? "progressive" : void 0,
+      style: contain ? { lineHeight: lineSpacing, position: "relative" } : { lineHeight: lineSpacing },
       className: cn("text-sm", proseClasses, className),
       children: [
         /* @__PURE__ */ jsx(CopyContext.Provider, { value: copyContext, children: /* @__PURE__ */ jsx(
@@ -1299,7 +1389,8 @@ function ContentRenderer({
             source,
             format: resolvedFormat,
             extensions,
-            unsafe
+            unsafe,
+            tail: true
           }
         ) }),
         copyOn && /* @__PURE__ */ jsx(
@@ -1310,6 +1401,7 @@ function ContentRenderer({
             "aria-atomic": "true",
             "data-react-fancy-content-renderer-live": "",
             className: "sr-only",
+            style: visuallyHidden,
             children: announcement
           }
         )
@@ -1320,5 +1412,5 @@ function ContentRenderer({
 ContentRenderer.displayName = "ContentRenderer";
 
 export { ContentRenderer, detectFormat, extensionEditorClasses, htmlToMarkdown, markdownToEditorHtml, mergeExtensions, proseClasses, registerExtension, registerExtensions, renderMarkdown };
-//# sourceMappingURL=chunk-FXOT4P4P.js.map
-//# sourceMappingURL=chunk-FXOT4P4P.js.map
+//# sourceMappingURL=chunk-Z6RA37IC.js.map
+//# sourceMappingURL=chunk-Z6RA37IC.js.map