@particle-academy/fancy-code 0.9.1 → 0.11.0

package/dist/index.cjs

@@ -1635,105 +1635,6 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
-
-// src/engine/markdown-render.ts
-function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function escapeAttr(s) {
-  return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-function inline(text) {
-  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>`).replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`).replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>").replace(/(\*|_)(?=\S)([\s\S]*?\S)\1/g, "<em>$2</em>");
-}
-function renderMarkdown(markdown) {
-  const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
-  const out = [];
-  let i = 0;
-  let para = [];
-  let listType = null;
-  const flushPara = () => {
-    if (para.length) {
-      out.push(`<p>${inline(para.join(" "))}</p>`);
-      para = [];
-    }
-  };
-  const closeList = () => {
-    if (listType) {
-      out.push(`</${listType}>`);
-      listType = null;
-    }
-  };
-  while (i < lines.length) {
-    const line = lines[i];
-    const fence = line.match(/^\s*(```|~~~)(.*)$/);
-    if (fence) {
-      flushPara();
-      closeList();
-      const lang = fence[2].trim();
-      const body = [];
-      i++;
-      while (i < lines.length && !/^\s*(```|~~~)/.test(lines[i])) {
-        body.push(lines[i]);
-        i++;
-      }
-      i++;
-      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml(lang))}"` : ""}>${escapeHtml(body.join("\n"))}</code></pre>`);
-      continue;
-    }
-    const esc = escapeHtml(line);
-    if (/^\s*$/.test(line)) {
-      flushPara();
-      closeList();
-      i++;
-      continue;
-    }
-    const heading = esc.match(/^(#{1,6})\s+(.*)$/);
-    if (heading) {
-      flushPara();
-      closeList();
-      const level = heading[1].length;
-      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
-      i++;
-      continue;
-    }
-    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
-      flushPara();
-      closeList();
-      out.push("<hr>");
-      i++;
-      continue;
-    }
-    const quote = esc.match(/^\s*&gt;\s?(.*)$/);
-    if (quote) {
-      flushPara();
-      closeList();
-      out.push(`<blockquote>${inline(quote[1])}</blockquote>`);
-      i++;
-      continue;
-    }
-    const ol = esc.match(/^\s*\d+\.\s+(.*)$/);
-    const ul = esc.match(/^\s*[-*+]\s+(.*)$/);
-    if (ol || ul) {
-      flushPara();
-      const type = ol ? "ol" : "ul";
-      if (listType !== type) {
-        closeList();
-        out.push(`<${type}>`);
-        listType = type;
-      }
-      out.push(`<li>${inline((ol ?? ul)[1])}</li>`);
-      i++;
-      continue;
-    }
-    closeList();
-    para.push(esc);
-    i++;
-  }
-  flushPara();
-  closeList();
-  return out.join("\n");
-}
 function MarkdownEditor({
   value,
   defaultValue = "",
@@ -1747,7 +1648,7 @@ function MarkdownEditor({
   minHeight,
   maxHeight,
   className,
-  renderPreview = renderMarkdown
+  renderPreview
 }) {
   const [content, setContent] = reactFancy.useControllableState(value, defaultValue, onValueChange);
   const showEditor = mode !== "preview";
@@ -1780,7 +1681,19 @@ function MarkdownEditor({
           {
             "data-fancy-markdown-preview": "",
             className: "fancy-md-preview",
-            dangerouslySetInnerHTML: { __html: renderPreview(content) }
+            style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+            children: renderPreview ? (
+              // The host imposed its own pipeline; its HTML is injected as-is and
+              // is its own responsibility to sanitise.
+              /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: renderPreview(content) } })
+            ) : (
+              // The kit's own renderer — a full CommonMark + GFM parse that
+              // sanitises by default. `marked` already sits in this tree as a
+              // react-fancy runtime dependency, so the built-in renderer this
+              // replaced was a second, weaker markdown implementation next to a
+              // complete one.
+              /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContentRenderer, { value: content, format: "markdown" })
+            )
           }
         )
       ]
@@ -1862,6 +1775,105 @@ function FileViewer({
   );
 }
 FileViewer.displayName = "FileViewer";
+
+// src/engine/markdown-render.ts
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s) {
+  return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function inline(text) {
+  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>`).replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`).replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>").replace(/(\*|_)(?=\S)([\s\S]*?\S)\1/g, "<em>$2</em>");
+}
+function renderMarkdown(markdown) {
+  const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  let i = 0;
+  let para = [];
+  let listType = null;
+  const flushPara = () => {
+    if (para.length) {
+      out.push(`<p>${inline(para.join(" "))}</p>`);
+      para = [];
+    }
+  };
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = line.match(/^\s*(```|~~~)(.*)$/);
+    if (fence) {
+      flushPara();
+      closeList();
+      const lang = fence[2].trim();
+      const body = [];
+      i++;
+      while (i < lines.length && !/^\s*(```|~~~)/.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      i++;
+      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml(lang))}"` : ""}>${escapeHtml(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    const esc = escapeHtml(line);
+    if (/^\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      i++;
+      continue;
+    }
+    const heading = esc.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      flushPara();
+      closeList();
+      const level = heading[1].length;
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    const quote = esc.match(/^\s*&gt;\s?(.*)$/);
+    if (quote) {
+      flushPara();
+      closeList();
+      out.push(`<blockquote>${inline(quote[1])}</blockquote>`);
+      i++;
+      continue;
+    }
+    const ol = esc.match(/^\s*\d+\.\s+(.*)$/);
+    const ul = esc.match(/^\s*[-*+]\s+(.*)$/);
+    if (ol || ul) {
+      flushPara();
+      const type = ol ? "ol" : "ul";
+      if (listType !== type) {
+        closeList();
+        out.push(`<${type}>`);
+        listType = type;
+      }
+      out.push(`<li>${inline((ol ?? ul)[1])}</li>`);
+      i++;
+      continue;
+    }
+    closeList();
+    para.push(esc);
+    i++;
+  }
+  flushPara();
+  closeList();
+  return out.join("\n");
+}
 function useCodeEditorInputTagAdapter() {
   const ctx = useCodeEditor();
   return react.useMemo(() => reactFancy.textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);