@sqlrooms/monaco-editor
This package is part of the SQLRooms framework.
Monaco Editor
Monaco Editor components for SQLRooms, including specialized editors for JSON.
Installation
npm install @sqlrooms/monaco-editorComponents
MonacoEditor
A base Monaco Editor component with common functionality.
import {MonacoEditor} from '@sqlrooms/monaco-editor';
function MyComponent() {
return (
<MonacoEditor
className="h-[400px]"
language="javascript"
value="// Your code here"
onChange={(value) => console.log(value)}
/>
);
}JsonMonacoEditor
A specialized Monaco Editor for editing JSON with schema validation.
import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';
function MyJsonEditor() {
const schema = {
type: 'object',
properties: {
name: {type: 'string'},
age: {type: 'number'},
},
required: ['name'],
};
return (
<JsonMonacoEditor
className="h-[400px]"
value={{name: 'John', age: 30}}
schema={schema}
onChange={(value) => console.log(value)}
/>
);
}Configuring the loader for offline use
By default, the editor loads its sources from a CDN. To use the editor in an offline environment, you need to bundle monaco-editor with your application. You can do this with the configureMonacoLoader utility. This function is a thin wrapper around the loader.config function and sets up self.MonacoEnvironment automatically when web workers are passed.
Here's an example of how to configure the loader to use bundled workers with Vite (note the ?worker suffix):
import {configureMonacoLoader} from '@sqlrooms/monaco-editor';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
// Use the monaco-editor package instead of a CDN
configureMonacoLoader({
monaco,
workers: {
default: editorWorker,
json: jsonWorker,
typescript: tsWorker,
javascript: tsWorker,
},
});You can also use configureMonacoLoader to specify a custom path to the editor's sources, for example, if you are hosting them on a different CDN:
// configureMonacoLoader({paths: {vs: 'https://unpkg.com/monaco-editor/min/vs'}});Props
MonacoEditor Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | '' | CSS class name for the editor container |
| language | string | 'javascript' | The language of the editor |
| theme | 'vs-dark' | 'light' | 'vs-dark' | The theme of the editor |
| value | string | '' | The value of the editor |
| readOnly | boolean | false | Whether the editor is read-only |
| options | object | {} | Additional options for the editor |
| onMount | function | - | Callback when the editor is mounted |
| onChange | function | - | Callback when the editor content changes |
JsonMonacoEditor Props
Extends MonacoEditorProps with:
| Prop | Type | Default | Description |
|---|---|---|---|
| schema | object | - | The JSON schema to validate against |
| value | string | object | '' | The JSON value to edit |
License
MIT
