Monaco Editor for SolidJS.

Quick start

Install it:

npm i monaco-editor-solidjs
# or
yarn add monaco-editor-solidjs
# or
pnpm add monaco-editor-solidjs
# or
bun add monaco-editor-solidjs

MonacoEditor

Basic Usage:

You can import and use the MonacoEditor component in your Solid Application:

import { MonacoEditor } from 'monaco-editor-solidjs';

function Editor() {
    return <MonacoEditor language="javascript" defaultValue="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". | | defaultValue | string | - | Default value for the content of the editor. | | 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. | | onBeforeMount | () => void | - | Callback triggered before the editor mounts. | 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 'monaco-editor-solidjs';

function Editor() {
  const handleMount = (monaco, editor) => {
    // Use monaco and editor instances here
  };

  return (
    <MonacoEditor
      language="javascript"
      defaultValue="console.log('Hello World!);"
      onMount={handleMount}
    />
  );
}

License

MIT