@particle-academy/fancy-code 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { RefObject, ReactNode, CSSProperties } from 'react';
 import { ThemeColors, DiffAnnotations, LineChangeType, Token, Tokenizer } from '@particle-academy/fancy-file-commons';
 export { ThemeColors, Token, TokenType, Tokenizer, languageFromFilename } from '@particle-academy/fancy-file-commons';
-import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
+import { MediaKind, MediaViewerProps, FauxClientProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeDefinition {
     /** Unique theme name */
@@ -281,7 +281,20 @@ type FileKind = {
 } | {
     kind: "media";
     mediaKind: MediaKind;
+}
+/** Read as a reader sees it (rendered), not as source. `language` is for the source view. */
+ | {
+    kind: "document";
+    format: DocumentFormat;
+    language: string;
+}
+/** An Office file: binary, so never text. */
+ | {
+    kind: "office";
+    officeKind: OfficeKind;
 };
+type DocumentFormat = "markdown" | "html" | "text";
+type OfficeKind = "docx" | "xlsx" | "pptx";
 interface ResolveFileKindInput {
     /** File name or path — sniffed for an extension (and used for the media check). */
     filename?: string;
@@ -354,6 +367,18 @@ interface FileViewerProps {
     maxHeight?: number;
     /** Extra props forwarded to `<MediaViewer>` for media files. */
     mediaProps?: Partial<Omit<MediaViewerProps, "src" | "mime" | "alt">>;
+    /**
+     * How a **document** (Markdown, HTML, plain text) is shown. `"rendered"`
+     * (default): as a reader sees it, through react-fancy's `ContentRenderer`
+     * (sanitised; a file is untrusted). `"source"`: in the code editor. Editing
+     * (`readOnly={false}`) and landing on a `line` always show the source.
+     */
+    view?: "rendered" | "source";
+    /**
+     * Passed to the react-fancy `FauxClient` frame a rendered file sits in (zoom
+     * and full screen, revealed on hover): `variant`, a controlled `zoom`, …
+     */
+    frameProps?: Partial<FauxClientProps>;
     className?: string;
     style?: CSSProperties;
 }
@@ -374,7 +399,7 @@ interface FileViewerProps {
  * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
  * ```
  */
-declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, view, frameProps, className, style, }: FileViewerProps): react.JSX.Element;
 declare namespace FileViewer {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { RefObject, ReactNode, CSSProperties } from 'react';
 import { ThemeColors, DiffAnnotations, LineChangeType, Token, Tokenizer } from '@particle-academy/fancy-file-commons';
 export { ThemeColors, Token, TokenType, Tokenizer, languageFromFilename } from '@particle-academy/fancy-file-commons';
-import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
+import { MediaKind, MediaViewerProps, FauxClientProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeDefinition {
     /** Unique theme name */
@@ -281,7 +281,20 @@ type FileKind = {
 } | {
     kind: "media";
     mediaKind: MediaKind;
+}
+/** Read as a reader sees it (rendered), not as source. `language` is for the source view. */
+ | {
+    kind: "document";
+    format: DocumentFormat;
+    language: string;
+}
+/** An Office file: binary, so never text. */
+ | {
+    kind: "office";
+    officeKind: OfficeKind;
 };
+type DocumentFormat = "markdown" | "html" | "text";
+type OfficeKind = "docx" | "xlsx" | "pptx";
 interface ResolveFileKindInput {
     /** File name or path — sniffed for an extension (and used for the media check). */
     filename?: string;
@@ -354,6 +367,18 @@ interface FileViewerProps {
     maxHeight?: number;
     /** Extra props forwarded to `<MediaViewer>` for media files. */
     mediaProps?: Partial<Omit<MediaViewerProps, "src" | "mime" | "alt">>;
+    /**
+     * How a **document** (Markdown, HTML, plain text) is shown. `"rendered"`
+     * (default): as a reader sees it, through react-fancy's `ContentRenderer`
+     * (sanitised; a file is untrusted). `"source"`: in the code editor. Editing
+     * (`readOnly={false}`) and landing on a `line` always show the source.
+     */
+    view?: "rendered" | "source";
+    /**
+     * Passed to the react-fancy `FauxClient` frame a rendered file sits in (zoom
+     * and full screen, revealed on hover): `variant`, a controlled `zoom`, …
+     */
+    frameProps?: Partial<FauxClientProps>;
     className?: string;
     style?: CSSProperties;
 }
@@ -374,7 +399,7 @@ interface FileViewerProps {
  * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
  * ```
  */
-declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, view, frameProps, className, style, }: FileViewerProps): react.JSX.Element;
 declare namespace FileViewer {
     var displayName: string;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useMemo, useState, useCallback, useRef, useEffect, useSyncExternalStore, useContext } from 'react';
-import { cn, useControllableState, ContentRenderer, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
+import { cn, useControllableState, ContentRenderer, resolveMediaType, FauxClient, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { annotateLines, highlightCode, tok, tokenizeHtml, LIGHT_COLORS, DARK_COLORS, languageFromFilename } from '@particle-academy/fancy-file-commons';
 export { languageFromFilename } from '@particle-academy/fancy-file-commons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1720,10 +1720,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 = resolveMediaType({ mime, src: filename });
   if (media !== "unknown") return { kind: "media", mediaKind: media };
-  return { kind: "text", language: 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 = 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,
@@ -1742,10 +1777,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__ */ jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "document",
+        "data-format": resolved.format,
+        className,
+        style,
+        children: /* @__PURE__ */ jsx(FauxClient, { variant: "device", controls: true, fill: true, bodyClassName: "overflow-auto", ...frameProps, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-5", children: /* @__PURE__ */ jsx(
+          ContentRenderer,
+          {
+            value: resolved.format === "text" ? textToHtml(value) : value,
+            format: resolved.format === "markdown" ? "markdown" : "html"
+          }
+        ) }) })
+      }
+    );
+  }
+  if (resolved.kind === "office") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "office",
+        "data-office-kind": resolved.officeKind,
+        className: cn("overflow-hidden", className),
+        style,
+        children: /* @__PURE__ */ jsx(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";
@@ -1800,6 +1869,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) {
@@ -1808,8 +1881,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");