# Code editor

A code field: the code is **coloured while you type**, line numbers follow, **Tab** indents and **Shift+Tab** outdents,
**Ctrl+Z / Ctrl+Shift+Z** undo and redo. A port of custom-ide's CodeJar editor as a pure Hybriel component: no JavaScript
of its own. Demo: `/code-editor`.

Use it in a page:

```
import CodeEditor from './code-editor.hl'

form { method = "post"  action = "/save"
	CodeEditor { name = "source"  value = "let x = 1"  language = "js" }
}
```

## Files
Copy `code-editor.hl` (one file; it has its own `Style`). Nothing else. Every colour is `var(--color-…, <base value>)`
(the syntax colours use the palette tokens `--orange`, `--green-light`, `--yellow`, `--green-dark`): without them the code is
black and the syntax greys (the base look: black, white, greys, no frames — root README "Look"); an app that declares the
WorldAPI tokens (and its `--color-accent`) restyles it.

## Attributes
| Attribute | Meaning |
|---|---|
| `name` | the field name the text posts under (default `code`) |
| `value` | the start text |
| `language` | `hybriel` (default), `js` (or `javascript`), `plain` (no colours) |
| `spaces` | 0 (default): Tab writes a tab character; N: Tab writes N spaces |

## What it does
- **Highlighting** while typing: comments (`//`, `/* */`), strings (`'` `"` `` ` ``), numbers, keywords, function names (a name
  before `(`), Capitalised names (types). The caret stays where it was.
- **Line numbers** in a gutter that follows the number of lines (it scrolls sideways with the code).
- **Tab / Shift+Tab**: at the caret a tab (or `spaces` spaces) is inserted / removed; with several lines selected every line is
  indented / outdented.
- **Enter** keeps the indent of the line; after `(` `[` `{` it indents once more, and a closing bracket right behind the caret
  moves to its own line.
- **Brackets and quotes** close themselves (a selection is wrapped); typing the closing character right before the same one
  steps over it; an apostrophe inside a word (`don't`) stays alone.
- **Undo / redo**: Ctrl+Z, Ctrl+Shift+Z (or Ctrl+Y). The editor keeps its own history (snapshots of text and caret, 300 at
  most); typing within 300 ms is one step, Enter / Tab / a bracket / a paste are their own steps.
- **Paste** is taken as plain text; the text is never treated as HTML.

## Reading the value
The text is in a hidden `<input name>`, so it posts in a form. A change is announced with a bubbling DOM `input` event on that
field (`e.target.name`, `e.target.value`); the demo shows it below each editor:

```
form { on input(e) { emit gotCode(e) } … }
on gotCode(e) { if (e.target.name == 'source') { source = e.target.value } }
```

## Not in it (custom-ide has more)
Search, minimap, breadcrumbs, change bars, per-language grammars beyond the three above, read-only mode. Not tested: Firefox,
Safari, touch, IME input (composition is left alone until it ends), very large files. Editing needs the page to be live
(Hybriel has no mount event; the code appears when the page has loaded).