@particle-academy/fancy-code 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -14,6 +14,55 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.13.0] - 2026-10-19
+
+### Added
+
+- **Documents render as a reader sees them.** `FileViewer` shows Markdown, HTML
+  and plain text through react-fancy's `ContentRenderer`, sanitised (a file is
+  untrusted), in the `FauxClient` frame every file viewer now carries: zoom and
+  full screen, revealed on hover. Plain text keeps its paragraphs and line
+  breaks and is escaped, so `*x*` stays asterisks. `view="source"` shows the
+  source in the code editor instead, as do editing (`readOnly={false}`) and
+  landing on a `line`. `frameProps` reaches the frame.
+- **Office files are recognised.** `.docx`, `.xlsx` and `.pptx` (by extension
+  or MIME type) resolve to `{ kind: "office", officeKind }`. They show
+  MediaViewer's no-preview card with a download until their viewers are wired
+  in. They used to be handed to the code editor as text.
+
+### Changed
+
+- **BREAKING:** a `.md`, `.html` or `.txt` file in `FileViewer` is rendered,
+  not shown as source. **What to do:** to keep the source, pass
+  `view="source"`. A viewer that lands on a `line` (a link into a file) already
+  shows the source, so file links need nothing.
+- **BREAKING (types):** `FileKind` gains `{ kind: "document"; format; language }`
+  and `{ kind: "office"; officeKind }`. **What to do:** only if you `switch` on
+  `resolveFileKind(...).kind` exhaustively: add the two cases, or a `default`.
+  `notes.txt` now resolves to `document`, not `text`.
+- The extension decides over a generic MIME type: a host that serves `app.ts`
+  as `text/plain` still gets the code editor.
+- **Requires react-fancy 5.48.1 or later** (peer `>=5.48.1 <6.0.0`, was
+  `>=4.9.0`), for the frame and for the sanitiser that strips `<title>`.
+
+## [0.12.1] - 2026-10-18
+
+### Security
+
+- **`<MarkdownEditor>`'s preview no longer renders a link or image whose URL
+  can run script.** The preview is built as an HTML string and inserted with
+  `innerHTML`, where React's `javascript:` guard does not apply. URLs were kept
+  inside their attribute but their scheme was never checked, so
+  `[x](javascript:...)` became a live script link in the preview, in the page's
+  own origin. A link now needs a relative URL or `http`, `https`, `mailto` or
+  `tel`; an image needs a relative URL, `http(s)`, or a raster
+  `data:image/...`. Anything else renders as its text (a link) or its alt text
+  (an image). The scheme is read the way a browser reads it: case-insensitive,
+  with leading control characters and embedded tabs and newlines ignored.
+  **Upgrade if any markdown you preview was written by someone else**, an agent
+  included. Nothing else changes. Found while auditing the viewers fancy-labs
+  uses to show agent-written documents.
+
 ## [0.12.0] - 2026-10-17
 
 ### Added

package/dist/index.cjs

@@ -1721,10 +1721,45 @@ function MarkdownEditor({
   );
 }
 MarkdownEditor.displayName = "MarkdownEditor";
+var OFFICE_EXT = { docx: "docx", xlsx: "xlsx", xlsm: "xlsx", pptx: "pptx" };
+var OFFICE_MIME = {
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx"
+};
+var DOCUMENT_EXT = {
+  md: "markdown",
+  markdown: "markdown",
+  html: "html",
+  htm: "html",
+  txt: "text",
+  text: "text"
+};
+var DOCUMENT_MIME = {
+  "text/markdown": "markdown",
+  "text/x-markdown": "markdown",
+  "text/html": "html",
+  "text/plain": "text"
+};
+function extensionOf(filename) {
+  const name = (filename ?? "").split(/[?#]/)[0].split("/").pop() ?? "";
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+}
 function resolveFileKind({ filename, mime }) {
   const media = reactFancy.resolveMediaType({ mime, src: filename });
   if (media !== "unknown") return { kind: "media", mediaKind: media };
-  return { kind: "text", language: fancyFileCommons.languageFromFilename(filename) };
+  const type = (mime ?? "").split(";")[0].trim().toLowerCase();
+  const ext = extensionOf(filename);
+  const office = OFFICE_MIME[type] ?? OFFICE_EXT[ext];
+  if (office) return { kind: "office", officeKind: office };
+  const language = fancyFileCommons.languageFromFilename(filename);
+  const format = DOCUMENT_EXT[ext] ?? (language === "plaintext" ? DOCUMENT_MIME[type] : void 0);
+  if (format) {
+    const lang = language !== "plaintext" ? language : format === "markdown" ? "markdown" : format === "html" ? "html" : "plaintext";
+    return { kind: "document", format, language: lang };
+  }
+  return { kind: "text", language };
 }
 function FileViewer({
   filename,
@@ -1743,10 +1778,44 @@ function FileViewer({
   minHeight,
   maxHeight,
   mediaProps,
+  view = "rendered",
+  frameProps,
   className,
   style
 }) {
   const resolved = fileKind ?? resolveFileKind({ filename, mime });
+  if (resolved.kind === "document" && view === "rendered" && readOnly && line == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "document",
+        "data-format": resolved.format,
+        className,
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.FauxClient, { variant: "device", controls: true, fill: true, bodyClassName: "overflow-auto", ...frameProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.ContentRenderer,
+          {
+            value: resolved.format === "text" ? textToHtml(value) : value,
+            format: resolved.format === "markdown" ? "markdown" : "html"
+          }
+        ) }) })
+      }
+    );
+  }
+  if (resolved.kind === "office") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "office",
+        "data-office-kind": resolved.officeKind,
+        className: reactFancy.cn("overflow-hidden", className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.MediaViewer, { src: src ?? "", mime, alt: filename, className: "h-full w-full" })
+      }
+    );
+  }
   if (resolved.kind === "media") {
     const { className: mediaClassName, ...restMediaProps } = mediaProps ?? {};
     const fill = resolved.mediaKind !== "audio";
@@ -1801,6 +1870,10 @@ function FileViewer({
   );
 }
 FileViewer.displayName = "FileViewer";
+var ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+function textToHtml(text) {
+  return text.replace(/\r\n?/g, "\n").split(/\n{2,}/).filter((block) => block.trim() !== "").map((block) => `<p>${block.replace(/[&<>"']/g, (c) => ESCAPES[c]).replace(/\n/g, "<br>")}</p>`).join("");
+}
 
 // src/engine/markdown-render.ts
 function escapeHtml(s) {
@@ -1809,8 +1882,27 @@ function escapeHtml(s) {
 function escapeAttr(s) {
   return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+var LINK_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+function schemeOf(url) {
+  let s = "";
+  for (const ch of url) {
+    const code = ch.codePointAt(0) ?? 0;
+    if (code === 9 || code === 10 || code === 13) continue;
+    if (s === "" && code <= 32) continue;
+    s += ch;
+  }
+  const m = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(s);
+  return m ? m[1].toLowerCase() : null;
+}
+function safeUrl(url, kind) {
+  const scheme = schemeOf(url);
+  if (scheme === null) return true;
+  if (scheme === "http" || scheme === "https") return true;
+  if (kind === "link") return LINK_SCHEMES.has(scheme);
+  return scheme === "data" && /^data:image\/(png|jpe?g|gif|webp|avif|bmp);/i.test(url.trim());
+}
 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>");
+  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => safeUrl(src, "image") ? `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>` : alt).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => safeUrl(href, "link") ? `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>` : t).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");