components

1.8 KB

1. // demo.hl — `/md-editor`: two editors on one page (the second starts empty and shows its placeholder), and the Markdown each holds
2. // shown below. The editor announces a change with a bubbling DOM `input` event on its hidden field: `e.target.value` is the Markdown.
3. parent '../main.hl'
4. import MdEditor from './md-editor.hl'
5. import { storeMdFiles } from '../../lib/uploads.hl'
7. __title = 'Markdown editor · Hybriel components'
8. static NL = "
9. "
10. String note = '# Hello' + NL + NL + 'Some **bold** and *italic* text with `code` and a [link](https://example.com).' + NL + NL + '- first' + NL + '- second'
11. String summary = ''
12. View {
13. mdEditorDemo {
14. h1 { "Markdown editor" }
15. p { class = "muted" "Edit it visually: headings look like headings, bold is bold, lists are lists. The value below each editor is plain Markdown; paste Markdown in and it shows formatted." }
16. form { id = "md-form" method = "get" action = "/md-editor" on input(e) { emit demoValue(e) }
17. MdEditor { name = "note" value = note }
18. h2 { "Value of “note”" }
19. pre { id = "md-value" note }
20. MdEditor { name = "summary" value = summary placeholder = "A second editor, empty: type here…" }
21. h2 { "Value of “summary”" }
22. pre { id = "md-value-summary" summary }
23. p { button { type = "submit" "Send (posts both as Markdown)" } }
24. }
25. p { a { id = "readme" href = "/md-editor/README.md" "README (how to use it)" } }
26. }
27. }
28. on demoValue(e) {
29. if (e.target.name == 'note') { note = e.target.value }
30. if (e.target.name == 'summary') { summary = e.target.value }
31. }
33. // WHERE THE FILES GO IS THE APP'S DECISION: the editor sends dropped / pasted / chosen files here (`emit server mdUpload`), this site
34. // keeps them for one day and answers the address of each file, in order (lib/uploads.hl storeMdFiles).
35. on server mdUpload(files) { return storeMdFiles(files) }