# Plugin Editor





Code editor component powered by Monaco Editor (VS Code's editor).

## Installation [#installation]

```bash
npm install @object-ui/plugin-editor
```

<PluginLoader plugins="['editor']">
  ## Interactive Examples [#interactive-examples]

  <SchemaExample id="plugin-editor/javascript-editor" />

  <SchemaExample id="plugin-editor/python-editor" />

  <SchemaExample id="plugin-editor/read-only-json-viewer" />

  ## Usage [#usage]

  ### Basic Usage [#basic-usage]

  ```tsx
  // Import once in your app entry point
  import '@object-ui/plugin-editor'

  // Use in schemas
  const schema = {
    type: 'code-editor',
    value: 'console.log("Hello, World!");',
    language: 'javascript',
    theme: 'vs-dark',
    height: '400px'
  }
  ```

  ## Features [#features]

  * **Syntax highlighting** for 100+ languages
  * **IntelliSense and code completion**
  * **Find and replace**
  * **Multiple themes**
  * **Lazy-loaded** (\~20 KB initial, Monaco loads on-demand)

  ## Schema API [#schema-api]

  ```plaintext
  {
    type: 'code-editor',
    value?: string,              // Code content
    language?: string,           // Programming language
    theme?: 'vs-dark' | 'light', // Editor theme
    height?: string,             // Height (e.g., '400px')
    readOnly?: boolean,          // Read-only mode
    className?: string           // Tailwind classes
  }
  ```

  ### CodeEditorSchema [#codeeditorschema]

  Declared by `@object-ui/plugin-editor` (`packages/plugin-editor/src/types.ts`).
  It extends `BaseSchema`, so the shared component properties are available on a
  `code-editor` node as well as the ones below.

  | Property    | Type                     | Default        | Description                                  |
  | ----------- | ------------------------ | -------------- | -------------------------------------------- |
  | `value`     | string                   | `''`           | The code content to display                  |
  | `language`  | string                   | `'javascript'` | Programming language for syntax highlighting |
  | `theme`     | `'vs-dark'` \| `'light'` | `'vs-dark'`    | Editor theme                                 |
  | `height`    | string                   | `'400px'`      | Height of the editor                         |
  | `readOnly`  | boolean                  | `false`        | Whether the editor is read-only              |
  | `className` | string                   | `''`           | Additional Tailwind CSS classes              |

  ## Supported Languages [#supported-languages]

  The Monaco Editor supports 100+ programming languages including:

  * JavaScript / TypeScript
  * Python
  * Java / C# / C++
  * HTML / CSS / SCSS
  * JSON / YAML / XML
  * Markdown
  * SQL
  * Shell / Bash
  * And many more...

  ## Examples [#examples]

  ### JavaScript Editor [#javascript-editor]

  ```tsx
  const schema = {
    type: 'code-editor',
    value: 'function hello() {\n  console.log("Hello!");\n}',
    language: 'javascript',
    theme: 'vs-dark',
    height: '300px'
  }
  ```

  ### Read-only Code Display [#read-only-code-display]

  ```tsx
  const schema = {
    type: 'code-editor',
    value: 'const API_KEY = "secret";\n// Do not modify',
    language: 'typescript',
    readOnly: true,
    theme: 'light'
  }
  ```

  ### Python Editor [#python-editor]

  ```tsx
  const schema = {
    type: 'code-editor',
    value: 'def hello():\n    print("Hello, World!")',
    language: 'python',
    height: '400px'
  }
  ```

  ## Bundle Size [#bundle-size]

  The plugin uses lazy loading to optimize bundle size:

  * **Initial load**: \~0.2 KB (entry point)
  * **Lazy chunk**: \~20 KB (loaded when editor is rendered)
  * **Monaco Editor**: Loaded on-demand from CDN

  This keeps your main application bundle small while providing full IDE-like editing capabilities.

  ## TypeScript Support [#typescript-support]

  ```ts
  import type { CodeEditorSchema } from '@object-ui/plugin-editor'

  const editorSchema: CodeEditorSchema = {
    type: 'code-editor',
    value: 'console.log("TypeScript!");',
    language: 'typescript',
    theme: 'vs-dark'
  }
  ```

  ## Related Documentation [#related-documentation]

  * [Plugin System Overview](/docs/guide/plugins)
  * [Lazy-Loaded Plugins Architecture](/docs/guide/plugins#lazy-loading-architecture)
  * [Package README](https://github.com/objectstack-ai/objectui/tree/main/packages/plugin-editor)
</PluginLoader>