# Code Editor

Links: [Home](../index.md)

A full-featured syntax-highlighted code editor powered by [CodeMirror 3.15](https://codemirror.net/). Supports 100+ languages, multiple themes, code folding, bracket matching, auto-completion, and linting.

## Loading the Module

```js
Application.require("gadgets/code-editor").then(function (CodeEditor) {
    // CodeEditor is a constructor function
});
```

**Dependencies:** `gadgets/wrapper`, `uri-load`, `async`, `extensions/prototype`

## API

### `CodeEditor([config])`

Create a new code editor instance. Returns an `ApplicationPrototype` instance.

```js
var editor = CodeEditor({
    mode: 'javascript',
    theme: 'monokai',
    lineNumbers: true
});
```

### Instance Methods

| Method | Returns | Description |
|---|---|---|
| `node()` | `HTMLElement` | Get the DOM element of the editor |
| `editor()` | `CodeMirror` | Get the underlying CodeMirror instance |
| `value([code])` | `string` | Get or set editor content |
| `theme(name, callback)` | -- | Set the editor theme dynamically |
| `syntax(mode [, cb, force])` | -- | Set the syntax highlighting language |
| `height(value)` | -- | Set editor height (`'auto'` or pixel value) |
| `tabSize([n])` | `number` | Get or set tab indentation size |
| `focus()` | -- | Focus the editor |
| `fontSize(value)` | -- | Set font size (number or CSS string like `'14px'`) |
| `fontFamily(value)` | -- | Set font family |
| `whenLoaded()` | `Promise` | Resolves when the editor is fully initialized |

### Events

| Event | Data | Description |
|---|---|---|
| `event:change` | `(cm, change)` | Content was modified |
| `event:cursor-activity` | `(cm)` | Cursor position changed |
| `event:focus` | `(cm)` | Editor received focus |
| `event:gutter-click` | `(cm, line, gutter, e)` | Gutter was clicked (breakpoints) |
| `event:keyup` | `(cm, event)` | Key released |
| `event:keydown` | `(cm, event)` | Key pressed |

## Use Cases

### Embed a JavaScript editor

```js
Application.require("gadgets/code-editor").then(function (CodeEditor) {
    var editor = CodeEditor({
        mode: 'javascript',
        theme: 'monokai',
        lineNumbers: true,
        matchBrackets: true,
        tabSize: 2
    });

    document.getElementById('editor-container').appendChild(editor.node());

    editor.whenLoaded().then(function () {
        editor.value('function hello() {\n    console.log("Hello World!");\n}');
    });
});
```

### Get editor content on button click

```js
Application.require("gadgets/code-editor").then(function (CodeEditor) {
    var editor = CodeEditor({ mode: 'html' });
    document.getElementById('container').appendChild(editor.node());

    editor.whenLoaded().then(function () {
        editor.value('<h1>Hello</h1>');
    });

    document.getElementById('saveBtn').addEventListener('click', function () {
        var code = editor.value();
        console.log('Current code:', code);
        // send to server, save to localStorage, etc.
    });
});
```

### Dynamic language switching

```js
Application.require("gadgets/code-editor").then(function (CodeEditor) {
    var editor = CodeEditor();
    document.body.appendChild(editor.node());

    var langSelect = document.getElementById('language');
    langSelect.addEventListener('change', function () {
        editor.syntax(langSelect.value, function () {
            console.log('Switched to:', langSelect.value);
        });
    });
});
```

### Listen for content changes

```js
Application.require("gadgets/code-editor").then(function (CodeEditor) {
    var editor = CodeEditor({ mode: 'css' });
    document.body.appendChild(editor.node());

    editor.whenLoaded().then(function () {
        editor.editor().on('change', function (cm) {
            document.getElementById('preview').style.cssText = cm.getValue();
        });
    });
});
```

## Supported Languages

The editor supports 100+ CodeMirror modes including: `javascript`, `htmlmixed`, `css`, `python`, `ruby`, `go`, `rust`, `java`, `clike`, `php`, `sql`, `xml`, `markdown`, `yaml`, `shell`, `dockerfile`, `lua`, `swift`, `r`, `perl`, `haskell`, and many more. Pass the mode name to `syntax()` to load it dynamically.

## Notes

- The editor auto-refreshes on resize and visibility changes.
- Themes are loaded dynamically from the CodeMirror theme directory.
- The `whenLoaded()` promise resolves after CodeMirror is fully initialized and ready for interaction.