Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alxnddr/solid-monaco
Monaco Editor component for SolidJS
https://github.com/alxnddr/solid-monaco
monaco monaco-editor solidjs
Last synced: 6 days ago
JSON representation
Monaco Editor component for SolidJS
- Host: GitHub
- URL: https://github.com/alxnddr/solid-monaco
- Owner: alxnddr
- License: mit
- Created: 2023-09-17T16:47:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-01T20:44:35.000Z (4 months ago)
- Last Synced: 2024-12-16T15:47:21.817Z (13 days ago)
- Topics: monaco, monaco-editor, solidjs
- Language: TypeScript
- Homepage:
- Size: 162 KB
- Stars: 51
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-monaco
[](https://pnpm.io/)
Monaco Editor for SolidJS
## Quick start
Install it:
```bash
npm i solid-monaco
```
*or*
```bash
yarn add solid-monaco
```
*or*
```bash
pnpm add solid-monaco
```
## MonacoEditor
Basic usage:
You can import and use the `MonacoEditor` component in your Solid application:
```jsx
import { MonacoEditor } from 'solid-monaco';
function MyEditor() {
return ;
}
```
### 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:
```jsx
import { MonacoEditor } from 'solid-monaco';
function MyEditor() {
const handleMount = (monaco, editor) => {
// Use monaco and editor instances here
};
return (
);
}
```
## 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:
```jsx
import { MonacoDiffEditor } from 'solid-monaco';
function MyDiffEditor() {
return (
);
}
```
### 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](https://github.com/microsoft/monaco-editor): The core editor that this package wraps for Solid.js.
- [monaco-react](https://github.com/suren-atoyan/monaco-react) by [Suren Atoyan](https://github.com/suren-atoyan): A
package referred to during the development of the solid-monaco wrapper.
## License
MIT