components

2.9 KB

1. # Code editor
3. A code field: the code is **coloured while you type**, line numbers follow, **Tab** indents and **Shift+Tab** outdents,
4. **Ctrl+Z / Ctrl+Shift+Z** undo and redo. A port of custom-ide's CodeJar editor as a pure Hybriel component: no JavaScript
5. of its own. Demo: `/code-editor`.
7. Use it in a page:
9. ```
10. import CodeEditor from './code-editor.hl'
12. form { method = "post" action = "/save"
13. CodeEditor { name = "source" value = "let x = 1" language = "js" }
14. }
15. ```
17. ## Files
18. Copy `code-editor.hl` (one file; it has its own `Style`). Nothing else. Every colour is `var(--color-…, <base value>)`
19. (the syntax colours use the palette tokens `--orange`, `--green-light`, `--yellow`, `--green-dark`): without them the code is
20. black and the syntax greys (the base look: black, white, greys, no frames — root README "Look"); an app that declares the
21. WorldAPI tokens (and its `--color-accent`) restyles it.
23. ## Attributes
24. | Attribute | Meaning |
25. |---|---|
26. | `name` | the field name the text posts under (default `code`) |
27. | `value` | the start text |
28. | `language` | `hybriel` (default), `js` (or `javascript`), `plain` (no colours) |
29. | `spaces` | 0 (default): Tab writes a tab character; N: Tab writes N spaces |
31. ## What it does
32. - **Highlighting** while typing: comments (`//`, `/* */`), strings (`'` `"` `` ` ``), numbers, keywords, function names (a name
33. before `(`), Capitalised names (types). The caret stays where it was.
34. - **Line numbers** in a gutter that follows the number of lines (it scrolls sideways with the code).
35. - **Tab / Shift+Tab**: at the caret a tab (or `spaces` spaces) is inserted / removed; with several lines selected every line is
36. indented / outdented.
37. - **Enter** keeps the indent of the line; after `(` `[` `{` it indents once more, and a closing bracket right behind the caret
38. moves to its own line.
39. - **Brackets and quotes** close themselves (a selection is wrapped); typing the closing character right before the same one
40. steps over it; an apostrophe inside a word (`don't`) stays alone.
41. - **Undo / redo**: Ctrl+Z, Ctrl+Shift+Z (or Ctrl+Y). The editor keeps its own history (snapshots of text and caret, 300 at
42. most); typing within 300 ms is one step, Enter / Tab / a bracket / a paste are their own steps.
43. - **Paste** is taken as plain text; the text is never treated as HTML.
45. ## Reading the value
46. 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
47. field (`e.target.name`, `e.target.value`); the demo shows it below each editor:
49. ```
50. form { on input(e) { emit gotCode(e) } … }
51. on gotCode(e) { if (e.target.name == 'source') { source = e.target.value } }
52. ```
54. ## Not in it (custom-ide has more)
55. Search, minimap, breadcrumbs, change bars, per-language grammars beyond the three above, read-only mode. Not tested: Firefox,
56. Safari, touch, IME input (composition is left alone until it ends), very large files. Editing needs the page to be live
57. (Hybriel has no mount event; the code appears when the page has loaded).