@particle-academy/fancy-code 0.5.1 → 0.7.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

@@ -1346,6 +1346,19 @@ function highlightCode(source, tokens, colors) {
   return parts.join("");
 }
 
+// src/engine/position.ts
+function lineColumnToOffset(text, line, column = 1) {
+  const lines = text.split("\n");
+  const targetLine = Math.max(1, Math.min(Math.trunc(line) || 1, lines.length));
+  let offset = 0;
+  for (let i = 0; i < targetLine - 1; i++) {
+    offset += lines[i].length + 1;
+  }
+  const lineText = lines[targetLine - 1] ?? "";
+  const col = Math.max(1, Math.min(Math.trunc(column) || 1, lineText.length + 1));
+  return offset + (col - 1);
+}
+
 // src/hooks/use-editor-engine.ts
 var DEFAULT_COLORS = {
   background: "#18181b",
@@ -1460,6 +1473,28 @@ function useEditorEngine({
     setScrollTop(ta.scrollTop);
     setScrollLeft(ta.scrollLeft);
   }, []);
+  const revealLine = react.useCallback(
+    (line, column = 1, opts) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const offset = lineColumnToOffset(ta.value, line, column);
+      if (opts?.focus) ta.focus();
+      ta.selectionStart = ta.selectionEnd = offset;
+      updateCursorInfo();
+      const panel = ta.closest("[data-fancy-code-panel]");
+      if (!panel) return;
+      const cs = getComputedStyle(ta);
+      const lineHeight = parseFloat(cs.lineHeight) || 19.5;
+      const paddingTop = parseFloat(cs.paddingTop) || 0;
+      const lineIndex = (ta.value.slice(0, offset).match(/\n/g) || []).length;
+      const textareaTopInPanel = ta.getBoundingClientRect().top - panel.getBoundingClientRect().top + panel.scrollTop;
+      const lineTop = textareaTopInPanel + paddingTop + lineIndex * lineHeight;
+      const target = lineTop - panel.clientHeight / 2 + lineHeight / 2;
+      const maxScroll = panel.scrollHeight - panel.clientHeight;
+      panel.scrollTop = Math.max(0, Math.min(target, maxScroll));
+    },
+    [updateCursorInfo]
+  );
   const handleKeyDown = react.useCallback(
     (e) => {
       if (readOnly) {
@@ -1546,6 +1581,7 @@ function useEditorEngine({
     handleInput,
     handleScroll,
     handleSelect,
+    revealLine,
     scrollTop,
     scrollLeft
   };
@@ -1579,7 +1615,9 @@ function CodeEditorRoot({
   tabSize: tabSizeProp = 2,
   placeholder,
   minHeight,
-  maxHeight
+  maxHeight,
+  cursorLine,
+  cursorColumn
 }) {
   const [currentValue, setCurrentValue] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
   const isDark = useDarkMode();
@@ -1615,6 +1653,11 @@ function CodeEditorRoot({
       setSelectionLength(sel);
     }
   });
+  const { revealLine: revealLineImpl } = engineReturn;
+  react.useEffect(() => {
+    if (cursorLine == null) return;
+    revealLineImpl(cursorLine, cursorColumn ?? 1, { focus: false });
+  }, [cursorLine, cursorColumn, revealLineImpl]);
   const contextValue = react.useMemo(
     () => ({
       getValue: () => engineReturn.textareaRef.current?.value ?? currentValue,
@@ -1636,6 +1679,8 @@ function CodeEditorRoot({
         setCurrentValue(ta.value);
       },
       focus: () => engineReturn.textareaRef.current?.focus(),
+      revealLine: (line, column) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
+      setCursor: ({ line, column }) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
       language: currentLanguage,
       setLanguage,
       theme: resolvedTheme,
@@ -1833,6 +1878,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 +2001,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;