0.2.0 • Published 7 months ago
solid-monaco v0.2.0
solid-monaco
Monaco Editor for SolidJS
Quick start
Install it:
npm i solid-monaco
# or
yarn add solid-monaco
# or
pnpm add solid-monaco
MonacoEditor
Basic usage:
You can import and use the MonacoEditor
component in your Solid application:
import { MonacoEditor } from 'solid-monaco';
function MyEditor() {
return <MonacoEditor language="javascript" value="console.log('Hello World');" />;
}
Props
The MonacoEditor
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
language | string | - | The programming language for the editor. E.g., "javascript" , "typescript" . |
value | string | - | Content of the editor. |
loadingState | JSX.Element | "Loading…" | JSX element to be displayed during the loading state. |
class | string | - | CSS class for the editor container. |
theme | BuiltinTheme or string | "vs" | The theme to be applied to the editor. |
path | string | "" | Path used for Monaco model management for multiple files. |
overrideServices | object | - | Services to override the default ones provided by Monaco. |
width | string | "100%" | Width of the editor container. |
height | string | "100%" | Height of the editor container. |
options | object | - | Additional options for the Monaco editor. |
saveViewState | string | true | Whether to save the model view state for a given path of the editor. |
onChange | (value: string, event: editor.IModelContentChangedEvent) => void | - | Callback triggered when the content of the editor changes. |
onMount | (monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void | - | Callback triggered when the editor mounts. |
onBeforeUnmount | (monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void | - | Callback triggered before the editor unmounts. |
Getting Monaco and Editor Instances
You can get instances of both monaco
and the editor
by using the onMount
callback:
import { MonacoEditor } from 'solid-monaco';
function MyEditor() {
const handleMount = (monaco, editor) => {
// Use monaco and editor instances here
};
return (
<MonacoEditor
language="javascript"
value="console.log('Hello World');"
onMount={handleMount}
/>
);
}
MonacoDiffEditor
For a side-by-side comparison view of code, the package provides a MonacoDiffEditor
component.
Basic Usage
You can incorporate the MonacoDiffEditor
component into your Solid application:
import { MonacoDiffEditor } from 'solid-monaco';
function MyDiffEditor() {
return (
<MonacoDiffEditor
original="const foo = 1;"
modified="const foo = 2;"
originalLanguage="javascript"
modifiedLanguage="javascript"
/>
);
}
Props
The MonacoDiffEditor
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
original | string | - | Original content to be displayed on the left side of the diff editor. |
modified | string | - | Modified content to be displayed on the right side of the diff editor. |
originalLanguage | string | - | Language for the original content. |
modifiedLanguage | string | - | Language for the modified content. |
originalPath | string | - | Path for the original content used in Monaco model management. |
modifiedPath | string | - | Path for the modified content used in Monaco model management. |
loadingState | JSX.Element | "Loading…" | JSX element displayed during the loading state. |
class | string | - | CSS class for the diff editor container. |
theme | BuiltinTheme or string | "vs" | Theme applied to the diff editor. |
overrideServices | object | - | Services to override the default ones provided by Monaco. |
width | string | "100%" | Width of the diff editor container. |
height | string | "100%" | Height of the diff editor container. |
options | object | - | Additional options for the Monaco diff editor. |
saveViewState | boolean | true | Whether to save the model view state. |
onChange | (value: string) => void | - | Callback triggered when the content of the modified editor changes. |
onMount | (monaco: Monaco, editor: editor.IStandaloneDiffEditor) => void | - | Callback triggered when the diff editor mounts. |
onBeforeUnmount | (monaco: Monaco, editor: editor.IStandaloneDiffEditor) => void | - | Callback triggered before the diff editor unmounts. |
Contributing
Contributions to solid-monaco
are welcomed!
Acknowledgments
- monaco-editor: The core editor that this package wraps for Solid.js.
- monaco-react by Suren Atoyan: A package referred to during the development of the solid-monaco wrapper.
License
MIT