@particle-academy/fancy-code 0.5.1 → 0.6.0

package/README.md

@@ -12,7 +12,7 @@ npm install @particle-academy/fancy-code
 # or: yarn add @particle-academy/fancy-code
 ```
 
-**Peer dependencies:** `react >= 18`, `react-dom >= 18`, `@particle-academy/react-fancy >= 1.5`
+**Peer dependencies:** `react >= 18`, `react-dom >= 18`, `@particle-academy/react-fancy >= 4.9` (the `FileViewer` delegates media to react-fancy's `<MediaViewer>`, added in 4.9)
 
 ## Setup
 
@@ -44,11 +44,38 @@ function App() {
 
 The component ships with no default border or rounding — add your own via `className` for standalone use, or embed directly into IDE layouts without visual conflicts.
 
+## Unified file viewer
+
+Showing arbitrary files from a tree? `FileViewer` renders text in the
+`CodeEditor` and delegates **media** (image / video / audio / PDF) to
+react-fancy's `<MediaViewer>` — so an image no longer renders as binary text.
+
+```tsx
+import { FileViewer } from "@particle-academy/fancy-code";
+
+// text → CodeEditor (read-only, language picked from the filename)
+<FileViewer filename="app.tsx" value={source} />
+
+// media → <MediaViewer> (pass the file URL as `src`)
+<FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
+```
+
+Need to branch your own chrome (tabs, save buttons)? Call `resolveFileKind`
+yourself — it's the same text-vs-media decision `FileViewer` makes internally:
+
+```tsx
+import { resolveFileKind } from "@particle-academy/fancy-code";
+
+resolveFileKind({ filename: "logo.png" }); // { kind: "media", mediaKind: "image" }
+resolveFileKind({ filename: "app.tsx" });   // { kind: "text", language: "typescript" }
+```
+
 ## Documentation
 
 | Topic | Doc |
 |-------|-----|
 | Full component API (props, sub-components, `useCodeEditor` hook) | [docs/CodeEditor.md](./docs/CodeEditor.md) |
+| Unified file viewer (text + media), `resolveFileKind` | [docs/FileViewer.md](./docs/FileViewer.md) |
 | Built-in languages + registering custom ones | [docs/languages.md](./docs/languages.md) |
 | Built-in themes + custom theme registration | [docs/themes.md](./docs/themes.md) |
 

package/dist/index.cjs

@@ -1833,6 +1833,118 @@ function MarkdownEditor({
   );
 }
 MarkdownEditor.displayName = "MarkdownEditor";
+var EXT_LANGUAGE = {
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  jsx: "javascript",
+  json: "javascript",
+  // the JS tokenizer highlights JSON acceptably
+  jsonc: "javascript",
+  ts: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  tsx: "typescript",
+  html: "html",
+  htm: "html",
+  xml: "html",
+  xhtml: "html",
+  vue: "html",
+  php: "php",
+  phtml: "php",
+  py: "python",
+  pyw: "python",
+  go: "go",
+  md: "markdown",
+  markdown: "markdown",
+  mkd: "markdown",
+  mdx: "markdown"
+};
+function basename(filename) {
+  return filename.split(/[?#]/, 1)[0].split(/[\\/]/).pop() ?? "";
+}
+function languageFromFilename(filename) {
+  if (!filename) return "plaintext";
+  const seg = basename(filename);
+  const dot = seg.lastIndexOf(".");
+  if (dot <= 0) return "plaintext";
+  const ext = seg.slice(dot + 1).toLowerCase();
+  return EXT_LANGUAGE[ext] ?? "plaintext";
+}
+function resolveFileKind({ filename, mime }) {
+  const media = reactFancy.resolveMediaType({ mime, src: filename });
+  if (media !== "unknown") return { kind: "media", mediaKind: media };
+  return { kind: "text", language: languageFromFilename(filename) };
+}
+function FileViewer({
+  filename,
+  mime,
+  src,
+  value = "",
+  onChange,
+  readOnly = true,
+  theme = "auto",
+  fileKind,
+  lineNumbers = true,
+  wordWrap = false,
+  minHeight,
+  maxHeight,
+  mediaProps,
+  className,
+  style
+}) {
+  const resolved = fileKind ?? resolveFileKind({ filename, mime });
+  if (resolved.kind === "media") {
+    const { className: mediaClassName, ...restMediaProps } = mediaProps ?? {};
+    const fill = resolved.mediaKind !== "audio";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "media",
+        "data-media-kind": resolved.mediaKind,
+        className: reactFancy.cn("overflow-hidden", className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.MediaViewer,
+          {
+            src: src ?? "",
+            mime,
+            alt: filename,
+            kind: resolved.mediaKind,
+            className: reactFancy.cn(fill && "h-full w-full", mediaClassName),
+            ...restMediaProps
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-fancy-file-viewer": "",
+      "data-kind": "text",
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CodeEditor,
+        {
+          value,
+          onChange: readOnly ? void 0 : onChange,
+          language: resolved.language,
+          theme,
+          readOnly,
+          lineNumbers,
+          wordWrap,
+          minHeight,
+          maxHeight,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {})
+        }
+      )
+    }
+  );
+}
+FileViewer.displayName = "FileViewer";
 function useCodeEditorInputTagAdapter() {
   const ctx = useCodeEditor();
   return react.useMemo(() => reactFancy.textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
@@ -1844,14 +1956,17 @@ function CodeEditorInputTag(props) {
 
 exports.CodeEditor = CodeEditor;
 exports.CodeEditorInputTag = CodeEditorInputTag;
+exports.FileViewer = FileViewer;
 exports.MarkdownEditor = MarkdownEditor;
 exports.getLanguage = getLanguage;
 exports.getRegisteredLanguages = getRegisteredLanguages;
 exports.getRegisteredThemes = getRegisteredThemes;
 exports.getTheme = getTheme;
+exports.languageFromFilename = languageFromFilename;
 exports.registerLanguage = registerLanguage;
 exports.registerTheme = registerTheme;
 exports.renderMarkdown = renderMarkdown;
+exports.resolveFileKind = resolveFileKind;
 exports.tokenizeMarkdown = tokenizeMarkdown;
 exports.useCodeEditor = useCodeEditor;
 exports.useCodeEditorInputTagAdapter = useCodeEditorInputTagAdapter;