@particle-academy/fancy-code 0.3.0 → 0.3.1
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 +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -354,6 +354,30 @@ export { registerTheme, getTheme, getRegisteredThemes };
|
|
|
354
354
|
export type { ThemeDefinition };
|
|
355
355
|
```
|
|
356
356
|
|
|
357
|
+
## Related: TreeNav from react-fancy
|
|
358
|
+
|
|
359
|
+
For IDE-style layouts, pair `CodeEditor` with the `TreeNav` component from `@particle-academy/react-fancy`. TreeNav provides hierarchical file/folder navigation with expand/collapse, selection, and extension-based file icons.
|
|
360
|
+
|
|
361
|
+
```tsx
|
|
362
|
+
import { TreeNav } from "@particle-academy/react-fancy";
|
|
363
|
+
import { CodeEditor } from "@particle-academy/fancy-code";
|
|
364
|
+
|
|
365
|
+
<div className="flex" style={{ height: 600 }}>
|
|
366
|
+
<TreeNav
|
|
367
|
+
nodes={fileTree}
|
|
368
|
+
selectedId={activeFile}
|
|
369
|
+
onSelect={(id, node) => openFile(id, node)}
|
|
370
|
+
/>
|
|
371
|
+
<CodeEditor value={code} onChange={setCode} language={lang}>
|
|
372
|
+
<CodeEditor.Toolbar />
|
|
373
|
+
<CodeEditor.Panel />
|
|
374
|
+
<CodeEditor.StatusBar />
|
|
375
|
+
</CodeEditor>
|
|
376
|
+
</div>
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
See the full IDE demo at `/react-demos/ide` in the monorepo.
|
|
380
|
+
|
|
357
381
|
## Demo Pages
|
|
358
382
|
|
|
359
383
|
The demo page lives in the monorepo at `resources/js/react-demos/pages/CodeEditorDemo.tsx` and is accessible at `/react-demos/code-editor`. It demonstrates:
|
package/package.json
CHANGED