@particle-academy/fancy-code 0.12.1 → 0.14.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,12 +1777,48 @@ 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 ?? {};
+    restMediaProps.imageProps = { frame: true, frameProps, ...restMediaProps.imageProps };
+    restMediaProps.pdfProps = { frame: true, frameProps, ...restMediaProps.pdfProps };
     const fill = resolved.mediaKind !== "audio";
     return /* @__PURE__ */ jsx(
       "div",
@@ -1800,6 +1871,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) {