@particle-academy/react-fancy 4.14.1 → 4.15.0

package/docs/CodeView.md

@@ -0,0 +1,64 @@
+# CodeView
+
+A lightweight, syntax-highlighted source view — a highlight overlay with a
+transparent, auto-growing `<textarea>` on top. Built on the pure highlight
+primitives in [`@particle-academy/fancy-file-commons`](https://www.npmjs.com/package/@particle-academy/fancy-file-commons)
+(no CodeMirror, no heavy dependency). Powers the [`Editor`](./Editor.md)'s Source
+view, and is usable standalone.
+
+Only **HTML** is highlighted (the one grammar commons ships — it's what the
+Editor's source view needs). Everything else — including Markdown — renders as
+plain text. For a full multi-language IDE (JS/TS/PHP/Python/Go/Markdown, line
+numbers, diff gutter), use [`@particle-academy/fancy-code`](https://www.npmjs.com/package/@particle-academy/fancy-code)'s
+`CodeEditor`.
+
+## Import
+
+```tsx
+import { CodeView } from "@particle-academy/react-fancy";
+```
+
+## Usage
+
+```tsx
+const [src, setSrc] = useState("<p>Edit me</p>");
+
+// In a sized box, `h-full` makes it fill the height.
+<div className="h-80">
+  <CodeView value={src} onChange={setSrc} language="html" className="h-full" />
+</div>
+```
+
+Read-only (omit `onChange` or pass `readOnly`):
+
+```tsx
+<CodeView value={htmlString} language="html" readOnly />
+```
+
+## Filling height
+
+`CodeView` has no baked-in height — pick the fill mechanism for your layout:
+
+- **`h-full`** when the parent has a definite height (e.g. a sized box).
+- **`flex-auto` + `min-h-0`** when it's a child of a flex column — it fills the
+  free space when constrained and grows with content otherwise. (This is how the
+  Editor's source view is wired.)
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `string` | — | Source text (controlled). |
+| onChange | `(value: string) => void` | — | Called on edit. Omit for a read-only view. |
+| language | `"html" \| "markdown" \| "plaintext" \| string` | `"plaintext"` | Only `"html"` is highlighted; everything else renders plain. |
+| readOnly | `boolean` | `false` | Read-only even if `onChange` is passed. |
+| placeholder | `string` | — | Shown when empty. |
+| minHeight | `number` | `120` | Min height (px) before growing with content. |
+| maxHeight | `number` | — | Max height (px) before scrolling internally. |
+| className | `string` | — | Classes on the scroll container (e.g. `h-full`, `flex-auto`). |
+
+## Theme
+
+The view resolves light/dark itself (the highlight colors are inlined). It
+follows both the `.dark` class and the `prefers-color-scheme` media query, so it
+matches whatever drives your Tailwind `dark:` variants.

package/docs/Editor.md

@@ -90,11 +90,13 @@ A toolbar button that reveals the raw HTML/Markdown behind the editor. It is app
 ## Source View
 
 The default toolbar includes a **Source** toggle (`</>`) on the right. Clicking it
-swaps the rich-text surface for a `<textarea>` showing the raw markup — HTML when
-`outputFormat="html"`, Markdown when `outputFormat="markdown"`. Edits made in the
-textarea flow straight to `value`; toggling back re-renders the rich-text surface
-from the edited source. Formatting buttons in the default toolbar are disabled
-while source view is open.
+swaps the rich-text surface for a syntax-highlighted [`CodeView`](./CodeView.md)
+showing the raw markup — HTML (highlighted) when `outputFormat="html"`, Markdown
+(plain) when `outputFormat="markdown"`. The source view **fills the editor's
+height** (give the `Editor` a height, e.g. `className="h-full"` inside a sized
+box), and grows with content otherwise. Edits flow straight to `value`; toggling
+back re-renders the rich-text surface from the edited source. Formatting buttons
+in the default toolbar are disabled while source view is open.
 
 ```tsx
 // Source toggle is on by default — nothing to wire up.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",
@@ -60,6 +60,7 @@
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
+    "@particle-academy/fancy-file-commons": "^0.2.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.511.0",
     "marked": "^15.0.0",