@particle-academy/react-fancy 4.14.1 → 4.15.0

package/README.md

@@ -163,6 +163,7 @@ npx vite build                      # Build demo app (verifies imports work)
 | Composer | Chat-style message input composing textarea + actions | [docs](docs/Composer.md) |
 | Chart | SVG-based Bar, Line, Area, Pie, Donut, and Sparkline charts | [docs](docs/Chart.md) |
 | Editor | Toolbar chrome wrapper for contentEditable, with a Source toggle to edit raw HTML/Markdown | [docs](docs/Editor.md) |
+| CodeView | Lightweight syntax-highlighted source view (HTML highlighted; fills height) | [docs](docs/CodeView.md) |
 | Kanban | Drag-and-drop board with columns and cards | [docs](docs/Kanban.md) |
 | Canvas | Interactive node canvas with pan, zoom, and connections | [docs](docs/Canvas.md) |
 | Diagram | Entity-relationship diagram with draggable nodes and relation lines | [docs](docs/Diagram.md) |

package/dist/index.cjs

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var lucideReact = require('lucide-react');
 var marked = require('marked');
+var fancyFileCommons = require('@particle-academy/fancy-file-commons');
 
 // src/components/Button/Button.tsx
 function cn(...inputs) {
@@ -11388,7 +11389,7 @@ function EditorToolbar({
     {
       "data-react-fancy-editor-toolbar": "",
       className: cn(
-        "flex items-center gap-0.5 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        "flex shrink-0 items-center gap-0.5 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
         className
       ),
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -11430,6 +11431,98 @@ function EditorToolbarSeparator() {
   );
 }
 EditorToolbarSeparator.displayName = "EditorToolbarSeparator";
+function subscribeDark(callback) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  const observer = new MutationObserver(callback);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  return () => {
+    mq.removeEventListener("change", callback);
+    observer.disconnect();
+  };
+}
+function darkSnapshot() {
+  return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDark() {
+  return react.useSyncExternalStore(subscribeDark, darkSnapshot, () => false);
+}
+var TEXT_METRICS = "m-0 p-3 font-mono text-xs leading-relaxed";
+function CodeView({
+  value,
+  onChange,
+  language = "plaintext",
+  readOnly = false,
+  placeholder,
+  minHeight = 120,
+  maxHeight,
+  className
+}) {
+  const textareaRef = react.useRef(null);
+  const isDark = useIsDark();
+  const colors = isDark ? fancyFileCommons.DARK_COLORS : fancyFileCommons.LIGHT_COLORS;
+  const highlighted = react.useMemo(() => {
+    const tokens = language === "html" ? fancyFileCommons.tokenizeHtml(value) : [];
+    return fancyFileCommons.highlightCode(value, tokens, colors);
+  }, [value, language, colors]);
+  react.useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+  const editable = !readOnly && !!onChange;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-code-view": "",
+      className: cn("relative overflow-auto", className),
+      style: { backgroundColor: colors.background, color: colors.foreground, minHeight, maxHeight },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            "aria-hidden": "true",
+            className: cn("pointer-events-none absolute inset-0 overflow-hidden border-none", TEXT_METRICS),
+            style: { whiteSpace: "pre-wrap", overflowWrap: "break-word" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("code", { dangerouslySetInnerHTML: { __html: highlighted + "\n" } })
+          }
+        ),
+        placeholder && value.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-none absolute left-0 top-0 opacity-40", TEXT_METRICS), children: placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            "data-react-fancy-code-view-input": "",
+            value,
+            onChange: editable ? (e) => onChange(e.target.value) : void 0,
+            readOnly: !editable,
+            spellCheck: false,
+            autoComplete: "off",
+            autoCorrect: "off",
+            autoCapitalize: "off",
+            "aria-label": placeholder,
+            className: cn(
+              "relative block w-full resize-none border-none bg-transparent text-transparent outline-none",
+              TEXT_METRICS
+            ),
+            style: {
+              caretColor: colors.cursorColor,
+              overflow: "hidden",
+              whiteSpace: "pre-wrap",
+              overflowWrap: "break-word",
+              minHeight
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+CodeView.displayName = "CodeView";
 
 // src/components/Editor/editor.utils.ts
 var proseClasses = [
@@ -11652,24 +11745,14 @@ function EditorContent({ className, maxHeight, sourceClassName }) {
   );
   if (showSource) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      CodeView,
       {
-        "data-react-fancy-editor-source": "",
         value: _sourceValue,
-        onChange: (e) => _onSourceInput(e.target.value),
-        spellCheck: false,
+        onChange: _onSourceInput,
+        language: outputFormat === "html" ? "html" : "plaintext",
         placeholder,
-        "aria-label": `${outputFormat === "markdown" ? "Markdown" : "HTML"} source`,
-        style: {
-          maxHeight: maxHeight ? `${maxHeight}px` : void 0
-        },
-        className: cn(
-          "block min-h-[120px] w-full resize-y px-4 py-3 font-mono text-xs leading-relaxed outline-none",
-          "bg-zinc-50 text-zinc-800 focus:outline-none dark:bg-zinc-900 dark:text-zinc-200",
-          "placeholder:text-zinc-400",
-          maxHeight && "overflow-y-auto",
-          sourceClassName
-        )
+        maxHeight,
+        className: cn("min-h-0 flex-auto", sourceClassName)
       }
     );
   }
@@ -11687,9 +11770,8 @@ function EditorContent({ className, maxHeight, sourceClassName }) {
         maxHeight: maxHeight ? `${maxHeight}px` : void 0
       },
       className: cn(
-        "min-h-[120px] px-4 py-3 text-sm outline-none",
+        "min-h-[120px] flex-auto overflow-y-auto px-4 py-3 text-sm outline-none",
         "focus:outline-none",
-        maxHeight && "overflow-y-auto",
         proseClasses,
         extClasses,
         "empty:before:content-[attr(data-placeholder)] empty:before:text-zinc-400 empty:before:pointer-events-none",
@@ -11989,7 +12071,7 @@ function EditorRoot({
       "data-react-fancy-editor": "",
       "data-mode": "edit",
       className: cn(
-        "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+        "flex flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
         className
       ),
       children
@@ -15995,6 +16077,7 @@ exports.Chart = Chart;
 exports.ChatDrawer = ChatDrawer;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.CodeView = CodeView;
 exports.ColorPicker = ColorPicker;
 exports.Command = Command;
 exports.Composer = Composer;