components

2.6 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 { writeFile, mkDir, listDir, remove } from 'hl:fs'
6. import { randomBytes } from 'hl:crypto'
7. import { now } from 'hl:time'
9. __title = 'Markdown editor · Hybriel components'
10. static NL = "
11. "
12. String note = '# Hello' + NL + NL + 'Some **bold** and *italic* text with `code` and a [link](https://example.com).' + NL + NL + '- first' + NL + '- second'
13. String summary = ''
14. View {
15. mdEditorDemo {
16. h1 { "Markdown editor" }
17. 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." }
18. form { id = "md-form" method = "get" action = "/md-editor" on input(e) { emit demoValue(e) }
19. MdEditor { name = "note" value = note }
20. h2 { "Value of “note”" }
21. pre { id = "md-value" note }
22. MdEditor { name = "summary" value = summary placeholder = "A second editor, empty: type here…" }
23. h2 { "Value of “summary”" }
24. pre { id = "md-value-summary" summary }
25. p { button { type = "submit" "Send (posts both as Markdown)" } }
26. }
27. p { a { id = "readme" href = "/md-editor/README.md" "README (how to use it)" } }
28. }
29. }
30. on demoValue(e) {
31. if (e.target.name == 'note') { note = e.target.value }
32. if (e.target.name == 'summary') { summary = e.target.value }
33. }
35. // WHERE THE FILES GO IS THE APP'S DECISION: the editor sends dropped / pasted / chosen files here (`emit server mdUpload`), this demo
36. // keeps them in storage/md-files (served at /md-editor/files/…, see project.hl) under a random name, only with a known kind of
37. // extension (nothing a browser would run), for one day. It answers the address of each file, in order.
38. static kinds = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'pdf', 'txt', 'md', 'zip']
39. on server mdUpload(files) {
40. mkDir('storage/md-files')
41. let urls = []
42. for (f of files) {
43. let dot = f.name.lastIndexOf('.')
44. let ext = dot >= 0 ? f.name.slice(dot + 1).toLowerCase() : ''
45. let known = false
46. for (k of kinds) { if (k == ext) { known = true } }
47. let stored = now() + '-' + randomBytes(6) + '.' + (known ? ext : 'bin')
48. writeFile('storage/md-files/' + stored, f.bytes)
49. urls.push('/md-editor/files/' + stored)
50. }
51. for (e of listDir('storage/md-files')) {
52. let stamp = toNumber(e.name.slice(0, e.name.indexOf('-')))
53. if (stamp != null && stamp < now() - 86400000) { remove(e.path) }
54. }
55. return urls
56. }