@particle-academy/fancy-code 0.1.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -4
- package/dist/index.cjs +886 -404
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +63 -26
- package/dist/index.d.ts +63 -26
- package/dist/index.js +885 -403
- package/dist/index.js.map +1 -1
- package/dist/styles.css +18 -18
- package/dist/styles.css.map +1 -1
- package/package.json +3 -13
package/README.md
CHANGED
|
@@ -37,7 +37,12 @@ function App() {
|
|
|
37
37
|
const [code, setCode] = useState('console.log("Hello");');
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
|
-
<CodeEditor
|
|
40
|
+
<CodeEditor
|
|
41
|
+
value={code}
|
|
42
|
+
onChange={setCode}
|
|
43
|
+
language="javascript"
|
|
44
|
+
className="rounded-xl border border-zinc-200 dark:border-zinc-700"
|
|
45
|
+
>
|
|
41
46
|
<CodeEditor.Toolbar />
|
|
42
47
|
<CodeEditor.Panel />
|
|
43
48
|
<CodeEditor.StatusBar />
|
|
@@ -46,6 +51,8 @@ function App() {
|
|
|
46
51
|
}
|
|
47
52
|
```
|
|
48
53
|
|
|
54
|
+
The component has no default border or rounding — add your own via `className` for standalone use, or embed directly into IDE layouts without visual conflicts.
|
|
55
|
+
|
|
49
56
|
## Commands
|
|
50
57
|
|
|
51
58
|
```bash
|
|
@@ -86,7 +93,6 @@ interface CodeEditorProps {
|
|
|
86
93
|
placeholder?: string;
|
|
87
94
|
minHeight?: number; // Minimum height in px
|
|
88
95
|
maxHeight?: number; // Max height before scrolling
|
|
89
|
-
extensions?: Extension[]; // Additional editor extensions
|
|
90
96
|
}
|
|
91
97
|
```
|
|
92
98
|
|
|
@@ -374,8 +380,8 @@ Guidelines for AI agents (Claude Code, Copilot, etc.) working on this package.
|
|
|
374
380
|
|
|
375
381
|
### Editor Engine
|
|
376
382
|
|
|
377
|
-
- The `useCodemirror` hook manages the editor lifecycle
|
|
378
|
-
- Uses
|
|
383
|
+
- The `useCodemirror` hook manages the editor lifecycle.
|
|
384
|
+
- Uses compartments for hot-swapping language, theme, line numbers, word wrap, tab size, read-only, placeholder, and height constraints.
|
|
379
385
|
- External value changes are synced via `isExternalUpdate` ref to prevent onChange loops.
|
|
380
386
|
- SSR-safe: the editor is only created inside `useEffect`.
|
|
381
387
|
|