CodesparkEditor
A flexible code editor component supporting Monaco Editor and CodeMirror.
CodesparkEditor is a standalone code editor component that supports both Monaco Editor and CodeMirror as the underlying editor engine. It integrates with the Workspace for file management and automatic compilation.
import { CodesparkEditor } from '@codespark/react';Basic Usage
<CodesparkEditor value="some code..." />Props
value
Initial code content for the editor.
| Type | Default | Since |
|---|---|---|
string | - | v1.0.0 |
< ="export default () => <div>Hello</div>" />theme
Theme mode for the editor.
| Type | Default | Since |
|---|---|---|
'light' | 'dark' | Inherited from context | v1.0.0 |
< ="dark" />editor
Editor engine component to use.
| Type | Default | Since |
|---|---|---|
typeof Monaco | typeof CodeMirror | CodeMirror | v1.0.0 |
import { } from '@codespark/react';
import { } from '@codespark/react/Monaco';
< ={} />height
Height of the editor. For CodeMirror, pass a CSS string. For Monaco, pass a number (pixels).
| Type | Default | Since |
|---|---|---|
string | number | 200 / '100%' | v1.0.0 |
// CodeMirror (default)
< ="300px" />
// Monaco
< ={Monaco} ={300} />width
Width of the editor.
| Type | Default | Since |
|---|---|---|
string | number | - | v1.0.0 |
< ="100%" />toolbox
Toolbar configuration. Set to false to hide, true to show default tools, or pass a custom array.
| Type | Default | Since |
|---|---|---|
boolean | (ToolboxItemId | ToolboxItemConfig | ReactElement)[] | ['reset', 'format', 'copy'] | v1.0.0 |
Built-in tool IDs:
'reset'- Reset code to initial state'format'- Format the code'copy'- Copy code to clipboard
import { } from '@codespark/react';
// Hide toolbar
< ={false} />
// Custom toolbar
< ={['copy', 'format']} />
// Custom tool item
<
={[
'copy',
{
: 'My Custom Action',
: <MyIcon />,
: => .(?.)
}
]}
/>workspace
Workspace instance to use for file management.
| Type | Default | Since |
|---|---|---|
Workspace | Inherited from context | v1.0.0 |
import { , } from '@codespark/react';
const = new ({
: './App.tsx',
: { './App.tsx': 'export default () => <div>Hello</div>' }
});
< ={} />className
CSS class name for the editor element.
| Type | Default | Since |
|---|---|---|
string | - | v1.0.0 |
< ="my-editor" />containerProps
Props to pass to the container div element.
| Type | Default | Since |
|---|---|---|
ComponentProps<'div'> | - | v1.0.0 |
<CodesparkEditor containerProps={{ className: 'h-full' }} />debounceWait
Debounce wait time in milliseconds for triggering workspace updates on code changes.
| Type | Default | Since |
|---|---|---|
number | 500 | v1.0.0 |
< ={300} />id
Unique identifier for the editor instance.
| Type | Default | Since |
|---|---|---|
string | Auto-generated | v1.0.0 |
< ="main-editor" />CodeMirror-specific Props
These props only apply when using the default CodeMirror editor:
readOnly
Whether the editor is read-only.
| Type | Default | Since |
|---|---|---|
boolean | false | v1.0.0 |
< />fontFamily
Font family for the editor.
| Type | Default | Since |
|---|---|---|
string | 'Fira Code' | v1.0.0 |
< ="JetBrains Mono" />extensions
Additional CodeMirror extensions.
| Type | Default | Since |
|---|---|---|
Extension[] | - | v1.0.0 |
import { javascript } from '@codemirror/lang-javascript';
<CodesparkEditor extensions={[javascript()]} />basicSetup
CodeMirror basic setup configuration.
| Type | Default | Since |
|---|---|---|
BasicSetupOptions | - | v1.0.0 |
< ={{ : false }} />onChange
Callback fired when the editor content changes.
| Type | Default | Since |
|---|---|---|
(value: string, viewUpdate: ViewUpdate) => void | - | v1.0.0 |
< ={ => .()} />onMount
Callback fired when the editor is mounted.
| Type | Default | Since |
|---|---|---|
(editor: EditorView) => void | - | v1.0.0 |
< ={ => .focus()} />Monaco-specific Props
These props only apply when using Monaco Editor:
options
Monaco editor options.
| Type | Default | Since |
|---|---|---|
IStandaloneEditorConstructionOptions | - | v1.0.0 |
import { } from '@codespark/react';
import { } from '@codespark/react/Monaco';
<
={}
={{
: true,
: { : true },
: true,
: 'off'
}}
/>wrapperProps
Props for the Monaco editor wrapper element.
| Type | Default | Since |
|---|---|---|
HTMLAttributes<HTMLDivElement> | - | v1.0.0 |
< ={} ={{ : '...' }} />onChange
Callback fired when the editor content changes.
| Type | Default | Since |
|---|---|---|
(value: string, event: IModelContentChangedEvent) => void | - | v1.0.0 |
< ={} ={(, ) => ...} />onMount
Callback fired when the editor is mounted.
| Type | Default | Since |
|---|---|---|
(editor: IStandaloneCodeEditor, monaco: Monaco) => void | - | v1.0.0 |
< ={} ={(, ) => ...} />Last updated on