components

2.8 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-…, <palette value>)`
19. (the syntax colours use the palette tokens `--orange`, `--green-light`, `--yellow`, `--green-dark`), so an app that
20. declares the WorldAPI tokens (and its `--color-accent`) wins and an app without them still looks right.
22. ## Attributes
23. | Attribute | Meaning |
24. |---|---|
25. | `name` | the field name the text posts under (default `code`) |
26. | `value` | the start text |
27. | `language` | `hybriel` (default), `js` (or `javascript`), `plain` (no colours) |
28. | `spaces` | 0 (default): Tab writes a tab character; N: Tab writes N spaces |
30. ## What it does
31. - **Highlighting** while typing: comments (`//`, `/* */`), strings (`'` `"` `` ` ``), numbers, keywords, function names (a name
32. before `(`), Capitalised names (types). The caret stays where it was.
33. - **Line numbers** in a gutter that follows the number of lines (it scrolls sideways with the code).
34. - **Tab / Shift+Tab**: at the caret a tab (or `spaces` spaces) is inserted / removed; with several lines selected every line is
35. indented / outdented.
36. - **Enter** keeps the indent of the line; after `(` `[` `{` it indents once more, and a closing bracket right behind the caret
37. moves to its own line.
38. - **Brackets and quotes** close themselves (a selection is wrapped); typing the closing character right before the same one
39. steps over it; an apostrophe inside a word (`don't`) stays alone.
40. - **Undo / redo**: Ctrl+Z, Ctrl+Shift+Z (or Ctrl+Y). The editor keeps its own history (snapshots of text and caret, 300 at
41. most); typing within 300 ms is one step, Enter / Tab / a bracket / a paste are their own steps.
42. - **Paste** is taken as plain text; the text is never treated as HTML.
44. ## Reading the value
45. 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
46. field (`e.target.name`, `e.target.value`); the demo shows it below each editor:
48. ```
49. form { on input(e) { emit gotCode(e) } … }
50. on gotCode(e) { if (e.target.name == 'source') { source = e.target.value } }
51. ```
53. ## Not in it (custom-ide has more)
54. Search, minimap, breadcrumbs, change bars, per-language grammars beyond the three above, read-only mode. Not tested: Firefox,
55. Safari, touch, IME input (composition is left alone until it ends), very large files. Editing needs the page to be live
56. (Hybriel has no mount event; the code appears when the page has loaded).