SQLRooms

Appearance

@sqlrooms/monaco-editor ​

This package is part of the SQLRooms framework.

Monaco Editor ​

Monaco Editor components for SQLRooms, including specialized editors for JSON.

Installation ​

bash
npm install @sqlrooms/monaco-editor

Components ​

MonacoEditor ​

A base Monaco Editor component with common functionality.

tsx
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.

tsx
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)}
    />
  );
}

Props ​

MonacoEditor Props ​

PropTypeDefaultDescription
classNamestring''CSS class name for the editor container
languagestring'javascript'The language of the editor
theme'vs-dark' | 'light''vs-dark'The theme of the editor
valuestring''The value of the editor
readOnlybooleanfalseWhether the editor is read-only
optionsobject{}Additional options for the editor
onMountfunction-Callback when the editor is mounted
onChangefunction-Callback when the editor content changes

JsonMonacoEditor Props ​

Extends MonacoEditorProps with:

PropTypeDefaultDescription
schemaobject-The JSON schema to validate against
valuestring | object''The JSON value to edit

License ​

MIT

Interfaces ​

Functions ​