components

43.1 KB

1. // md-editor.hl — THE MARKDOWN WYSIWYG EDITOR, all Hybriel (port of worldapi-components/md-editor.js): headings look like
2. // headings, **bold** is bold, lists are lists — while you type; the value stays plain Markdown. `MdEditor { name = "note" value = "**hi**" }`.
3. // The formatted surface is a contenteditable element whose children are built in the browser (createElement / text nodes, never
4. // innerHTML of user text) — the framework never re-renders it: nothing bound to it changes after the first render. Hybriel has no
5. // mount event, so a 100 ms CSS animation on the surface fires `animationiteration` once the page is live, and that hands the
6. // editor its first content (the mount hook turns the animation off again). The value is written to the hidden field
7. // `<input name>` (posts in a form) and announced with a bubbling DOM `input` event on it (`e.target.value` = the Markdown).
8. // Subset (what the tickets' markdown.hl renders): headings 1-6, paragraphs (single line breaks kept), - / 1. lists (one level),
9. // fenced code blocks, `code`, links (http(s), mailto, /path, #anchor), *em*, **strong**.
11. String name = 'markdown'
12. String value = ''
13. String placeholder = 'Write…'
14. Number rows = 6
15. Hybrid linkOk = ['http://', 'https://', 'mailto:', '/', '#']
17. static NL = "
18. "
19. static BS = 'x\y'.slice(1, 2)
20. static ZW = "​"
21. static NB = " "
23. // ---- small text helpers ---------------------------------------------------------------------------------------------
24. isDigit(c) { k = c.charCodeAt(0) return k >= 48 && k <= 57 }
25. isAlnum(c) { k = c.charCodeAt(0) return (k >= 48 && k <= 57) || (k >= 65 && k <= 90) || (k >= 97 && k <= 122) || k > 127 }
26. isSpace(c) { return c == ' ' || c == NB || c == NL || c == ZW }
27. repeat(c, n) { let s = '' let i = 0 while (i < n) { s = s + c i = i + 1 } return s }
28. // trim spaces (also the non-breaking space the browser types) and the zero-width space
29. clean(s) { return s.replaceAll(NB, ' ').replaceAll(ZW, '') }
30. trimSp(s) {
31. let a = 0
32. let b = s.length
33. while (a < b && (s.slice(a, a + 1) == ' ' || s.slice(a, a + 1) == NB || s.slice(a, a + 1) == ZW)) { a = a + 1 }
34. while (b > a && (s.slice(b - 1, b) == ' ' || s.slice(b - 1, b) == NB || s.slice(b - 1, b) == ZW)) { b = b - 1 }
35. return s.slice(a, b)
36. }
37. safeHref(u) {
38. t = trimSp(u)
39. if (t == '' ) { return '' }
40. for (p of linkOk) { if (t.startsWith(p)) { return t } }
41. return ''
42. }
43. // an image address: http(s) or a path on this site; nothing else (no data:, no javascript:)
44. safeSrc(u) {
45. t = trimSp(u)
46. if (t.startsWith('https://') || t.startsWith('http://') || (t.startsWith('/') && !t.startsWith('//'))) { return t }
47. return ''
48. }
49. // the end of a bare URL that starts at i: up to a space, minus trailing punctuation
50. urlEnd(s, i) {
51. let j = i
52. while (j < s.length && !isSpace(s.slice(j, j + 1)) && s.slice(j, j + 1) != '<') { j = j + 1 }
53. while (j > i && ('.,;:!?)]}' + "'" + '"').indexOf(s.slice(j - 1, j)) >= 0) { j = j - 1 }
54. return j
55. }
57. // ---- Markdown → DOM ---------------------------------------------------------------------------------------------------
58. el(tag, text) {
59. e = document.createElement(tag)
60. if (text != null) { e.textContent = text }
61. return e
62. }
64. // the closing run of c (n times) after position i, whose content is not empty and does not end in a space; -1 when none
65. closer(s, i, c, n) {
66. mark = repeat(c, n)
67. let j = s.indexOf(mark, i)
68. while (j >= 0) {
69. let after = s.slice(j + n, j + n + 1)
70. let before = s.slice(j - 1, j)
71. let ok = j > i && !isSpace(before) && before != BS && (after != c)
72. if (ok && c == '_' && after != '' && isAlnum(after)) { ok = false }
73. if (ok) { return j }
74. j = s.indexOf(mark, j + 1)
75. }
76. return -1
77. }
79. // appends the inline Markdown `s` to `host`
80. inline(host, s) {
81. let buf = ''
82. let i = 0
83. n = s.length
84. while (i < n) {
85. let c = s.slice(i, i + 1)
86. let done = false
87. if (c == BS && i + 1 < n && '\*_`[]<>#-.!()+~|'.indexOf(s.slice(i + 1, i + 2)) >= 0) {
88. buf = buf + s.slice(i + 1, i + 2)
89. i = i + 2
90. done = true
91. }
92. if (!done && c == '`') {
93. let run = 1
94. while (s.slice(i + run, i + run + 1) == '`') { run = run + 1 }
95. let mark = repeat('`', run)
96. let j = s.indexOf(mark, i + run)
97. if (j > i + run) {
98. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
99. let inner = s.slice(i + run, j)
100. if (inner.length > 2 && inner.startsWith(' ') && inner.endsWith(' ')) { inner = inner.slice(1, inner.length - 1) }
101. host.appendChild(el('code', inner))
102. i = j + run
103. done = true
104. }
105. }
106. if (!done && c == '!' && s.slice(i + 1, i + 2) == '[') {
107. let j = s.indexOf('](', i + 2)
108. let k = j >= 0 ? s.indexOf(')', j + 2) : -1
109. if (j > i + 1 && k > j + 2) {
110. let src = safeSrc(s.slice(j + 2, k))
111. if (src != '') {
112. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
113. let img = el('img', null)
114. img.setAttribute('src', src)
115. img.setAttribute('alt', s.slice(i + 2, j))
116. host.appendChild(img)
117. i = k + 1
118. done = true
119. }
120. }
121. }
122. if (!done && c == '[') {
123. let j = s.indexOf('](', i + 1)
124. let k = j >= 0 ? s.indexOf(')', j + 2) : -1
125. if (j > i + 1 && k > j + 2) {
126. let href = safeHref(s.slice(j + 2, k))
127. if (href != '') {
128. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
129. let a = el('a', null)
130. a.setAttribute('href', href)
131. inline(a, s.slice(i + 1, j))
132. host.appendChild(a)
133. i = k + 1
134. done = true
135. }
136. }
137. }
138. if (!done && c == '<' && (s.slice(i + 1, i + 8) == 'http://' || s.slice(i + 1, i + 9) == 'https://')) {
139. let j = s.indexOf('>', i)
140. if (j > 0 && s.slice(i, j).indexOf(' ') < 0) {
141. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
142. let a = el('a', s.slice(i + 1, j))
143. a.setAttribute('href', s.slice(i + 1, j))
144. host.appendChild(a)
145. i = j + 1
146. done = true
147. }
148. }
149. if (!done && c == 'h' && (s.slice(i, i + 7) == 'http://' || s.slice(i, i + 8) == 'https://') && (i == 0 || !isAlnum(s.slice(i - 1, i)))) {
150. let j = urlEnd(s, i)
151. if (j > i + 8) {
152. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
153. let a = el('a', s.slice(i, j))
154. a.setAttribute('href', s.slice(i, j))
155. host.appendChild(a)
156. i = j
157. done = true
158. }
159. }
160. if (!done && (c == '*' || c == '_') && !(c == '_' && i > 0 && isAlnum(s.slice(i - 1, i)))) {
161. let run = 1
162. while (run < 3 && s.slice(i + run, i + run + 1) == c) { run = run + 1 }
163. let first = s.slice(i + run, i + run + 1)
164. if (first != '' && !isSpace(first) && first != c) {
165. let j = closer(s, i + run, c, run)
166. if (j > 0) {
167. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
168. let node = null
169. let innerNode = null
170. if (run == 1) { node = el('em', null) innerNode = node }
171. if (run == 2) { node = el('strong', null) innerNode = node }
172. if (run == 3) { node = el('strong', null) innerNode = el('em', null) node.appendChild(innerNode) }
173. inline(innerNode, s.slice(i + run, j))
174. host.appendChild(node)
175. i = j + run
176. done = true
177. }
178. }
179. }
180. if (!done) { buf = buf + c i = i + 1 }
181. }
182. if (buf != '') { host.appendChild(document.createTextNode(buf)) }
183. }
185. // a line like `## title`: its level (0 = not a heading)
186. headingLevel(line) {
187. let k = 0
188. while (k < line.length && k < 7 && line.slice(k, k + 1) == '#') { k = k + 1 }
189. if (k >= 1 && k <= 6 && (line.length == k || line.slice(k, k + 1) == ' ')) { return k }
190. return 0
191. }
192. // a list line: 0 = none, 1 = bullet, 2 = numbered; the item text is cut off by itemText
193. listKind(line) {
194. t = line.trim()
195. if ((t.startsWith('- ') || t.startsWith('* ') || t.startsWith('+ '))) { return 1 }
196. let k = 0
197. while (k < t.length && isDigit(t.slice(k, k + 1))) { k = k + 1 }
198. if (k > 0 && k < 10 && (t.slice(k, k + 2) == '. ' || t.slice(k, k + 2) == ') ')) { return 2 }
199. return 0
200. }
201. itemText(line) {
202. t = line.trim()
203. let k = 0
204. while (k < t.length && isDigit(t.slice(k, k + 1))) { k = k + 1 }
205. return t.slice(k + 2).trim()
206. }
207. fenceOf(line) {
208. t = line.trim()
209. if (t.startsWith('```')) { return '`' }
210. if (t.startsWith('~~~')) { return '~' }
211. return ''
212. }
213. startsBlock(line) { return headingLevel(line) > 0 || listKind(line) > 0 || fenceOf(line) != '' }
215. // Markdown → the block elements in a container
216. parseInto(box, md) {
217. let lines = md.replaceAll(BS + 'r', '').split(NL)
218. let i = 0
219. while (i < lines.length) {
220. let line = lines[i]
221. let fence = fenceOf(line)
222. if (fence != '') {
223. let run = 0
224. let t = line.trim()
225. while (t.slice(run, run + 1) == fence) { run = run + 1 }
226. let body = []
227. i = i + 1
228. while (i < lines.length && !(lines[i].trim().startsWith(repeat(fence, run)) && lines[i].trim().replaceAll(fence, '') == '')) { body.push(lines[i]) i = i + 1 }
229. i = i + 1
230. box.appendChild(el('pre', body.join(NL)))
231. } else if (line.trim() == '') {
232. i = i + 1
233. } else if (headingLevel(line) > 0) {
234. let lv = headingLevel(line)
235. let text = line.trim().slice(lv).trim()
236. while (text.endsWith('#') && text.length > 0) { text = text.slice(0, text.length - 1) }
237. let h = el('h' + lv, null)
238. inline(h, text.trim())
239. box.appendChild(h)
240. i = i + 1
241. } else if (listKind(line) > 0) {
242. let kind = listKind(line)
243. let list = el(kind == 1 ? 'ul' : 'ol', null)
244. let last = null
245. while (i < lines.length && lines[i].trim() != '' && (listKind(lines[i]) == kind || (listKind(lines[i]) == 0 && !startsBlock(lines[i]) && last != null))) {
246. if (listKind(lines[i]) == kind) {
247. last = el('li', null)
248. inline(last, itemText(lines[i]))
249. list.appendChild(last)
250. } else {
251. last.appendChild(el('br', null))
252. inline(last, lines[i].trim())
253. }
254. i = i + 1
255. }
256. box.appendChild(list)
257. } else {
258. let p = el('p', null)
259. let first = true
260. while (i < lines.length && lines[i].trim() != '' && (first || !startsBlock(lines[i]))) {
261. if (!first) { p.appendChild(el('br', null)) }
262. inline(p, lines[i].trim())
263. first = false
264. i = i + 1
265. }
266. box.appendChild(p)
267. }
268. }
269. if (box.childNodes.length == 0) { let p = el('p', null) p.appendChild(el('br', null)) box.appendChild(p) }
270. }
272. // ---- DOM → Markdown ---------------------------------------------------------------------------------------------------
273. // a text node's characters, with the ones Markdown would read as formatting written as an escape
274. escapeText(s, first) {
275. let out = ''
276. let i = 0
277. while (i < s.length) {
278. let c = s.slice(i, i + 1)
279. let prev = i > 0 ? s.slice(i - 1, i) : ' '
280. let next = i + 1 < s.length ? s.slice(i + 1, i + 2) : ' '
281. if (c == BS || c == '*' || c == '`' || c == '[' || c == ']' || c == '<') { out = out + BS + c }
282. else if (c == '_' && (!isAlnum(prev) || !isAlnum(next))) { out = out + BS + c }
283. else { out = out + c }
284. i = i + 1
285. }
286. return out
287. }
289. // the inline Markdown of an element's children
290. inlineMd(node) {
291. let out = ''
292. kids = node.childNodes
293. let i = 0
294. while (i < kids.length) {
295. let k = kids[i]
296. if (k.nodeType == 3) {
297. out = out + escapeText(clean(k.data), false)
298. } else if (k.nodeType == 1) {
299. let tag = k.nodeName.toLowerCase()
300. if (tag == 'br') { out = out + NL }
301. else if (tag == 'code') {
302. let t = clean(k.textContent)
303. if (t != '') {
304. let run = 1
305. while (t.indexOf(repeat('`', run)) >= 0) { run = run + 1 }
306. let pad = t.startsWith('`') || t.endsWith('`') ? ' ' : ''
307. out = out + repeat('`', run) + pad + t + pad + repeat('`', run)
308. }
309. }
310. else if (tag == 'strong' || tag == 'b' || tag == 'em' || tag == 'i') {
311. let mark = (tag == 'strong' || tag == 'b') ? '**' : '*'
312. let t = inlineMd(k)
313. let core = trimSp(t)
314. if (core != '') {
315. let lead = t.slice(0, t.indexOf(core))
316. let tail = t.slice(t.indexOf(core) + core.length)
317. out = out + lead + mark + core + mark + tail
318. } else { out = out + t }
319. }
320. else if (tag == 'img') {
321. let src = safeSrc(k.getAttribute('src') != null ? k.getAttribute('src') : '')
322. if (src != '') { out = out + '![' + (k.getAttribute('alt') != null ? k.getAttribute('alt') : '').replaceAll('[', '').replaceAll(']', '') + '](' + src.replaceAll(')', '%29').replaceAll(' ', '%20') + ')' }
323. }
324. else if (tag == 'a') {
325. let t = inlineMd(k)
326. let href = safeHref(k.getAttribute('href') != null ? k.getAttribute('href') : '')
327. if (href == '' || trimSp(t) == '') { out = out + t }
328. else if (trimSp(k.textContent) == href && (href.startsWith('http://') || href.startsWith('https://'))) { out = out + href }
329. else { out = out + '[' + t + '](' + href.replaceAll(')', '%29').replaceAll(' ', '%20') + ')' }
330. }
331. else if (tag == 'div' || tag == 'p') { out = out + inlineMd(k) }
332. else { out = out + inlineMd(k) }
333. }
334. i = i + 1
335. }
336. return out
337. }
339. // the text of a paragraph's or item's lines: trailing / leading breaks dropped, each line trimmed
340. lines(md) {
341. parts = md.split(NL)
342. out = []
343. for (p of parts) { out.push(trimSp(p)) }
344. while (out.length > 0 && out[out.length - 1] == '') { out.pop() }
345. while (out.length > 0 && out[0] == '') { out.shift() }
346. return out
347. }
349. // same for a line starting with digits + "." (the backslash goes before the dot)
350. guardNumber(line) {
351. let k = 0
352. while (k < line.length && isDigit(line.slice(k, k + 1))) { k = k + 1 }
353. if (k > 0 && (line.slice(k, k + 2) == '. ' || line.slice(k, k + 2) == ') ')) { return line.slice(0, k) + BS + line.slice(k) }
354. return line
355. }
356. paragraphMd(node) {
357. ls = lines(inlineMd(node))
358. if (ls.length == 0) { return '' }
359. out = []
360. for (l of ls) {
361. if (headingLevel(l) > 0 || fenceOf(l) != '' || l.startsWith('>') || listKind(l) == 1) { out.push(BS + l) } else { out.push(guardNumber(l)) }
362. }
363. return out.join(NL)
364. }
366. // the Markdown blocks of a container's children
367. blocksMd(box) {
368. out = []
369. kids = box.childNodes
370. let i = 0
371. while (i < kids.length) {
372. let k = kids[i]
373. if (k.nodeType == 3) {
374. let t = paragraphMd(k.parentNode == box ? wrapText(k) : k)
375. if (t != '') { out.push(t) }
376. } else if (k.nodeType == 1) {
377. let tag = k.nodeName.toLowerCase()
378. if (tag.length == 2 && tag.startsWith('h') && isDigit(tag.slice(1, 2)) && tag != 'hr') {
379. let t = lines(inlineMd(k)).join(' ')
380. if (t != '') { out.push(repeat('#', toNumber(tag.slice(1, 2))) + ' ' + t) }
381. } else if (tag == 'ul' || tag == 'ol') {
382. let items = []
383. let n = 1
384. let li = k.childNodes
385. let j = 0
386. while (j < li.length) {
387. if (li[j].nodeType == 1) {
388. let ls = lines(inlineMd(li[j]))
389. if (ls.length > 0) {
390. items.push((tag == 'ul' ? '- ' : n + '. ') + ls.join(NL + ' '))
391. n = n + 1
392. }
393. }
394. j = j + 1
395. }
396. if (items.length > 0) { out.push(items.join(NL)) }
397. } else if (tag == 'pre') {
398. let body = preText(k)
399. let run = 3
400. while (body.indexOf(repeat('`', run)) >= 0) { run = run + 1 }
401. if (body != '') { out.push(repeat('`', run) + NL + body + NL + repeat('`', run)) }
402. } else if ((tag == 'div' || tag == 'p') && hasBlockChild(k)) {
403. for (x of blocksMd(k)) { out.push(x) }
404. } else if (tag == 'br') {
405. } else {
406. let t = paragraphMd(k)
407. if (t != '') { out.push(t) }
408. }
409. }
410. i = i + 1
411. }
412. return out
413. }
414. wrapText(t) { p = el('p', null) p.appendChild(document.createTextNode(t.data)) return p }
415. hasBlockChild(node) {
416. kids = node.childNodes
417. let i = 0
418. while (i < kids.length) {
419. if (kids[i].nodeType == 1 && 'p,div,ul,ol,pre,h1,h2,h3,h4,h5,h6'.split(',').indexOf(kids[i].nodeName.toLowerCase()) >= 0) { return true }
420. i = i + 1
421. }
422. return false
423. }
424. // the text of a code block (a <br> is a line break)
425. preText(node) {
426. let out = ''
427. kids = node.childNodes
428. let i = 0
429. while (i < kids.length) {
430. let k = kids[i]
431. if (k.nodeType == 3) { out = out + k.data.replaceAll(ZW, '').replaceAll(NB, ' ') }
432. else if (k.nodeName.toLowerCase() == 'br') { out = out + NL }
433. else { out = out + preText(k) }
434. i = i + 1
435. }
436. // a trailing line feed is the browser's, not the writer's
437. while (out.endsWith(NL)) { out = out.slice(0, out.length - 1) }
438. return out
439. }
440. toMarkdown(box) {
441. return blocksMd(box).join(NL + NL)
442. }
444. // ---- the editor ---------------------------------------------------------------------------------------------------------
445. rootOf(node) { return node.closest('md-editor') }
446. surfaceOf(root) { return root.querySelector('article') }
447. fieldOf(root) { return root.querySelector('input.value') }
448. sourceOf(root) { return root.querySelector('textarea') }
450. // the block (a direct child of the surface) that holds a node
451. blockOf(root, node) {
452. s = surfaceOf(root)
453. let n = node
454. while (n != null && n.parentNode != s) { n = n.parentNode }
455. return n
456. }
457. inSurface(root) {
458. sel = document.getSelection()
459. return sel.rangeCount > 0 && sel.anchorNode != null && surfaceOf(root).contains(sel.anchorNode)
460. }
461. inTag(root, tags) {
462. sel = document.getSelection()
463. let n = sel.anchorNode
464. s = surfaceOf(root)
465. while (n != null && n != s) {
466. if (n.nodeType == 1 && tags.indexOf(n.nodeName.toLowerCase()) >= 0) { return true }
467. n = n.parentNode
468. }
469. return false
470. }
472. // the Markdown of the surface is the value: written to the field and announced when it changed. `orig` keeps an untouched value byte for byte.
473. sync(root) {
474. s = surfaceOf(root)
475. f = fieldOf(root)
476. let md = toMarkdown(s)
477. if (root.mdOrig != null && md == root.mdCanon) { md = root.mdOrig }
478. root.classList.toggle('empty', md == '' && s.querySelector('pre') == null)
479. if (md != f.value) {
480. f.value = md
481. f.dispatchEvent(new Event('input', { bubbles = true }))
482. }
483. }
484. // a new value (from outside, the source view or a paste-all): shown formatted
485. load(root, md) {
486. s = surfaceOf(root)
487. s.textContent = ''
488. parseInto(s, md)
489. root.mdOrig = md
490. root.mdCanon = toMarkdown(s)
491. root.classList.toggle('empty', root.mdCanon == '')
492. }
494. // the toolbar shows what the caret is in
495. updateBar(root) {
496. if (!root.isConnected || !inSurface(root)) { return null }
497. mark = (tool, active) => { b = root.querySelector('button.' + tool) if (b != null) { b.classList.toggle('on', active) } }
498. mark('bold', document.queryCommandState('bold'))
499. mark('italic', document.queryCommandState('italic'))
500. mark('code', inTag(root, ['code']))
501. mark('ul', inTag(root, ['ul']))
502. mark('ol', inTag(root, ['ol']))
503. mark('pre', inTag(root, ['pre']))
504. mark('link', inTag(root, ['a']))
505. h = root.querySelector('button.heading')
506. let level = ''
507. tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
508. for (t of tags) { if (inTag(root, [t])) { level = t.toUpperCase() } }
509. if (h != null) { h.textContent = level != '' ? level : 'H' h.classList.toggle('on', level != '') }
510. }
512. // bold / italic / heading / lists / code block: the browser's own editing commands, so undo works
513. codeToggle(root) {
514. sel = document.getSelection()
515. r = sel.getRangeAt(0)
516. let n = sel.anchorNode
517. let inCode = null
518. while (n != null && n != surfaceOf(root)) { if (n.nodeType == 1 && n.nodeName.toLowerCase() == 'code') { inCode = n } n = n.parentNode }
519. if (inCode != null) {
520. document.execCommand('insertHTML', false, escHtml(inCode.textContent, ''))
521. return null
522. }
523. if (r.collapsed) { return null }
524. document.execCommand('insertHTML', false, escHtml(r.toString(), 'code') + ZW)
525. }
526. // text as escaped html (built by the browser from a text node), optionally inside a tag
527. escHtml(text, tag) {
528. box = document.createElement('div')
529. e = tag != '' ? el(tag, text) : document.createTextNode(text)
530. box.appendChild(e)
531. return box.innerHTML
532. }
533. headingCycle(root) {
534. let cur = 0
535. tags = ['h1', 'h2', 'h3']
536. let i = 0
537. while (i < 3) { if (inTag(root, [tags[i]])) { cur = i + 1 } i = i + 1 }
538. document.execCommand('formatBlock', false, cur == 3 ? 'p' : tags[cur])
539. }
540. blockToggle(root, tag, cmd) {
541. if (inTag(root, [tag])) {
542. if (tag == 'pre') { document.execCommand('formatBlock', false, 'p') } else { document.execCommand(cmd) }
543. } else if (tag == 'pre') { document.execCommand('formatBlock', false, 'pre') } else { document.execCommand(cmd) }
544. }
546. linkOpen(root) {
547. sel = document.getSelection()
548. if (!inSurface(root)) { surfaceOf(root).focus() }
549. root.mdRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null
550. f = root.querySelector('link-form input')
551. let n = sel.anchorNode
552. let href = ''
553. while (n != null && n != surfaceOf(root)) { if (n.nodeType == 1 && n.nodeName.toLowerCase() == 'a') { href = n.getAttribute('href') } n = n.parentNode }
554. f.value = href
555. root.classList.add('linking')
556. f.focus()
557. }
558. linkClose(root) {
559. root.classList.remove('linking')
560. surfaceOf(root).focus()
561. sel = document.getSelection()
562. if (root.mdRange != null) { sel.removeAllRanges() sel.addRange(root.mdRange) }
563. }
564. linkApply(root, remove) {
565. f = root.querySelector('link-form input')
566. href = remove ? '' : safeHref(f.value)
567. linkClose(root)
568. if (remove || f.value.trim() == '') { document.execCommand('unlink') }
569. else if (href != '') {
570. sel = document.getSelection()
571. if (sel.isCollapsed) { document.execCommand('insertHTML', false, escLink(href)) } else { document.execCommand('createLink', false, href) }
572. }
573. sync(root)
574. }
575. escLink(href) {
576. box = document.createElement('div')
577. a = el('a', href)
578. a.setAttribute('href', href)
579. box.appendChild(a)
580. return box.innerHTML
581. }
583. // the parsed Markdown as html the browser can insert (built from elements, so every text is escaped)
584. mdHtml(md) {
585. box = document.createElement('div')
586. parseInto(box, md)
587. // a single paragraph is inserted inline: no extra block
588. if (box.childNodes.length == 1 && box.firstChild.nodeName.toLowerCase() == 'p') { return box.firstChild.innerHTML }
589. return box.innerHTML
590. }
592. // typing rules at the caret: "# " "- " "1. " make a block; the typed marker is consumed (only the formatting stays). They work in a
593. // paragraph, in a heading (an emptied heading keeps its level) and in a list item (a marker of the other list kind switches the list)
594. blockRule(root, e) {
595. sel = document.getSelection()
596. if (!sel.isCollapsed || !inSurface(root)) { return false }
597. let b = blockOf(root, sel.anchorNode)
598. if (b == null) { return false }
599. let tag = b.nodeName.toLowerCase()
600. let inner = sel.anchorNode
601. while (inner != null && inner != surfaceOf(root) && !(inner.nodeType == 1 && ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'].indexOf(inner.nodeName.toLowerCase()) >= 0)) { inner = inner.parentNode }
602. if (inner != null && inner != surfaceOf(root) && inner.nodeName.toLowerCase() != 'li') { b = inner tag = inner.nodeName.toLowerCase() }
603. let item = sel.anchorNode
604. while (item != null && item != surfaceOf(root) && item.nodeName.toLowerCase() != 'li') { item = item.parentNode }
605. if (item == surfaceOf(root)) { item = null }
606. let box = b
607. if (item != null) {
608. box = item
609. tag = item.parentNode.nodeName.toLowerCase()
610. } else if (tag != 'p' && tag != 'div' && !(tag.length == 2 && tag.startsWith('h'))) { return false }
611. r = sel.getRangeAt(0)
612. pre = document.createRange()
613. pre.selectNodeContents(box)
614. pre.setEnd(r.endContainer, r.endOffset)
615. before = clean(pre.toString())
616. if (before != clean(box.textContent)) { return false }
617. let cmd = ''
618. let arg = ''
619. if (item == null && before.length >= 1 && before.length <= 6 && before.replaceAll('#', '') == '') { cmd = 'formatBlock' arg = 'h' + before.length }
620. if (before == '-' || before == '*' || before == '+') { cmd = 'insertUnorderedList' }
621. if (before.length >= 2 && before.endsWith('.') && before.slice(0, before.length - 1).length < 9) {
622. let digits = true
623. let k = 0
624. while (k < before.length - 1) { if (!isDigit(before.slice(k, k + 1))) { digits = false } k = k + 1 }
625. if (digits) { cmd = 'insertOrderedList' }
626. }
627. if (cmd == '') { return false }
628. e.preventDefault()
629. sel.selectAllChildren(box)
630. document.execCommand('delete')
631. // a list marker typed in a list of that kind is only consumed
632. if (item != null && ((cmd == 'insertUnorderedList' && tag == 'ul') || (cmd == 'insertOrderedList' && tag == 'ol'))) { return true }
633. if (item == null && tag != 'p' && tag != 'div' && cmd != 'formatBlock') { document.execCommand('formatBlock', false, 'p') }
634. if (arg != '') { document.execCommand(cmd, false, arg) } else { document.execCommand(cmd) }
635. return true
636. }
637. // a closing * _ ` typed: find the opener before the caret in the same text node
638. inlineRule(root, e) {
639. sel = document.getSelection()
640. node = sel.anchorNode
641. if (!sel.isCollapsed || node == null || node.nodeType != 3 || !surfaceOf(root).contains(node)) { return null }
642. if (inTag(root, ['code', 'pre'])) { return null }
643. off = sel.anchorOffset
644. t = node.data.slice(0, off)
645. c = e.data
646. let tag = ''
647. let start = -1
648. let ends = ''
649. if (c == '`') {
650. let j = t.slice(0, off - 1).lastIndexOf('`')
651. if (j >= 0 && off - 1 - j - 1 >= 1) { start = j tag = 'code' ends = t.slice(j + 1, off - 1) }
652. }
653. if (c == '*' && t.length >= 5 && t.endsWith('**')) {
654. let j = t.slice(0, off - 2).lastIndexOf('**')
655. let inner = j >= 0 ? t.slice(j + 2, off - 2) : ''
656. if (j >= 0 && inner != '' && !isSpace(inner.slice(0, 1)) && !isSpace(inner.slice(inner.length - 1))) { start = j tag = 'strong' ends = inner }
657. }
658. if ((c == '*' || c == '_') && tag == '' && t.length >= 3 && !t.endsWith(c + c)) {
659. let j = t.slice(0, off - 1).lastIndexOf(c)
660. let inner = j >= 0 ? t.slice(j + 1, off - 1) : ''
661. okStart = j >= 0 && (j == 0 || !isAlnum(t.slice(j - 1, j)) || c == '*') && t.slice(j - 1, j) != c && t.slice(j + 1, j + 2) != c
662. if (okStart && inner != '' && !isSpace(inner.slice(0, 1)) && !isSpace(inner.slice(inner.length - 1))) { start = j tag = 'em' ends = inner }
663. }
664. if (tag == '') { return null }
665. r = document.createRange()
666. r.setStart(node, start)
667. r.setEnd(node, off)
668. sel.removeAllRanges()
669. sel.addRange(r)
670. document.execCommand('insertHTML', false, escHtml(ends, tag) + ZW)
671. // Chrome pins the colour on the new element (`<strong style="color: …">`) when it equals the text around it (the black/white base
672. // look, #15); the surface never carries styles of its own
673. for (k of surfaceOf(root).querySelectorAll('[style]')) { k.removeAttribute('style') }
674. }
676. // ---- look: the component's own Style; the base look is black, white and the greys #555 #999 #ddd #f2f2f2 (shared/base.hl names them; README "Look"); every colour is a semantic token with its base value as fallback, `var(--color-…, #000)`, so an app that declares the tokens (layouts.worldapi.org's theme) restyles it. No frames: a border only where it means something (focus ring, drop zone)
677. Style {
678. '@keyframes md-editor-mount' { 'from' { opacity = '.999' } to { opacity = '1' } }
679. 'md-editor' { position = 'relative' display = 'block' border = '0' borderRadius = '.5rem' background = 'var(--color-background-sunken, #f2f2f2)' color = 'var(--color-text, #000)' }
680. 'md-editor:focus-within' { outline = '2px solid var(--color-accent, #555)' outlineOffset = '-1px' }
681. 'md-editor nav' { display = 'flex' flexWrap = 'wrap' gap = '.25rem' padding = '.35rem' borderBottom = '0' background = 'var(--color-surface, #ddd)' borderRadius = '.5rem .5rem 0 0' }
682. 'md-editor nav button' { font = 'inherit' fontSize = '.9rem' fontWeight = '600' minWidth = '2rem' padding = '.25rem .5rem' color = 'var(--color-text, #000)' background = 'transparent' border = '1px solid transparent' borderRadius = '.35rem' cursor = 'pointer' }
683. 'md-editor nav button:hover' { background = 'var(--color-background, #fff)' }
684. 'md-editor nav button.on' { color = 'var(--color-accent-text, #fff)' background = 'var(--color-accent, #000)' }
685. 'md-editor nav button.italic' { fontStyle = 'italic' }
686. 'md-editor nav button.code' { fontFamily = 'ui-monospace, monospace' }
687. 'md-editor nav button:disabled' { opacity = '.4' cursor = 'default' }
688. 'md-editor.source nav button' { opacity = '.4' pointerEvents = 'none' }
689. 'md-editor nav input.pick' { display = 'none' }
690. 'md-editor ul.files' { display = 'none' margin = '0' padding = '.35rem .8rem' listStyle = 'none' borderBottom = '0' fontSize = '.85rem' }
691. 'md-editor ul.files:not(:empty)' { display = 'block' }
692. 'md-editor ul.files li' { display = 'flex' alignItems = 'center' gap = '.6rem' }
693. 'md-editor ul.files li span' { flex = '0 1 12rem' overflow = 'hidden' textOverflow = 'ellipsis' whiteSpace = 'nowrap' }
694. 'md-editor ul.files progress' { flex = '1' accentColor = 'var(--color-accent, #000)' }
695. 'md-editor ul.files li.error' { color = 'var(--color-danger, #000)' }
696. 'md-editor link-form' { display = 'none' gap = '.35rem' padding = '.35rem' borderBottom = '0' background = 'var(--color-surface, #ddd)' }
697. 'md-editor.linking link-form' { display = 'flex' }
698. 'md-editor link-form input' { flex = '1' minWidth = '0' font = 'inherit' padding = '.3rem .5rem' color = 'var(--color-text, #000)' background = 'var(--color-background, #fff)' border = '0' borderRadius = '.35rem' }
699. 'md-editor link-form button' { font = 'inherit' padding = '.3rem .7rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.35rem' cursor = 'pointer' }
700. 'md-editor article' { display = 'block' minHeight = '8rem' padding = '.6rem .8rem' outline = 'none' overflowWrap = 'anywhere' animation = 'md-editor-mount 100ms infinite' }
701. 'md-editor.source article' { display = 'none' }
702. 'md-editor .placeholder' { display = 'none' position = 'absolute' left = '.8rem' marginTop = '.6rem' pointerEvents = 'none' color = 'var(--color-text-muted, #555)' }
703. 'md-editor.empty:not(.source) .placeholder' { display = 'block' }
704. 'md-editor article > :first-child' { marginTop = '0' }
705. 'md-editor article > :last-child' { marginBottom = '0' }
706. 'md-editor article h1, md-editor article h2, md-editor article h3, md-editor article h4, md-editor article h5, md-editor article h6' { margin = '1rem 0 .5rem' lineHeight = '1.25' color = 'var(--color-text-strong, #000)' }
707. 'md-editor article h1' { fontSize = '1.6rem' }
708. 'md-editor article h2' { fontSize = '1.35rem' }
709. 'md-editor article h3' { fontSize = '1.15rem' }
710. 'md-editor article h4, md-editor article h5, md-editor article h6' { fontSize = '1rem' }
711. 'md-editor article p' { margin = '0 0 .7rem' }
712. 'md-editor article ul, md-editor article ol' { margin = '0 0 .7rem' paddingLeft = '1.5rem' }
713. 'md-editor article img' { display = 'block' maxWidth = '100%' height = 'auto' margin = '.3rem 0' borderRadius = '.3rem' }
714. 'md-editor article strong' { color = 'var(--color-text-strong, #000)' }
715. 'md-editor article a' { color = 'var(--color-accent, #000)' textDecoration = 'underline' }
716. 'md-editor article code' { padding = '0 .25rem' fontFamily = 'ui-monospace, monospace' fontSize = '.9em' background = 'var(--color-surface, #ddd)' borderRadius = '.25rem' }
717. 'md-editor article pre' { margin = '0 0 .7rem' padding = '.5rem .7rem' fontFamily = 'ui-monospace, monospace' fontSize = '.9rem' whiteSpace = 'pre-wrap' background = 'var(--color-surface, #ddd)' border = '0' borderRadius = '.4rem' }
718. 'md-editor footer' { display = 'flex' justifyContent = 'flex-end' padding = '.3rem .5rem' borderTop = '0' }
719. 'md-editor footer button' { font = 'inherit' fontSize = '.85rem' padding = '.2rem .6rem' color = 'var(--color-text-muted, #555)' background = 'transparent' border = '0' borderRadius = '.35rem' cursor = 'pointer' }
720. 'md-editor footer button:hover' { color = 'var(--color-text, #000)' }
721. 'md-editor textarea' { display = 'none' boxSizing = 'border-box' width = '100%' minHeight = '8rem' padding = '.6rem .8rem' font = '.9rem/1.5 ui-monospace, monospace' color = 'var(--color-text, #000)' background = 'transparent' border = '0' outline = 'none' resize = 'vertical' }
722. 'md-editor.source textarea' { display = 'block' }
723. }
725. // The hidden input `name` carries the value in a form; the article is the surface; the textarea is the source view (a value shown
726. // only while it is on). The rendered parts never change after the first render, so the framework leaves the hand-built content alone.
727. View {
728. mdEditor {
729. nav {
730. button { type = "button" class = "bold" title = "Bold (Ctrl+B)" "B" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'bold') } }
731. button { type = "button" class = "italic" title = "Italic (Ctrl+I)" "I" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'italic') } }
732. button { type = "button" class = "code" title = "Code (Ctrl+E)" "<>" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'code') } }
733. button { type = "button" class = "link" title = "Link (Ctrl+K)" "Link" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'link') } }
734. button { type = "button" class = "heading" title = "Heading: paragraph, H1, H2, H3" "H" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'heading') } }
735. button { type = "button" class = "ul" title = "Bulleted list" "• List" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'ul') } }
736. button { type = "button" class = "ol" title = "Numbered list" "1. List" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'ol') } }
737. button { type = "button" class = "pre" title = "Code block" "Block" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'pre') } }
738. button { type = "button" class = "file" title = "Add files or images (or drop / paste them)" "File" on mousedown(e) { e.preventDefault() } on click(e) { emit mdPick(e) } }
739. input { type = "file" class = "pick" multiple = "multiple" on change(e) { emit mdPicked(e) } }
740. button { type = "button" class = "undo" title = "Undo" "↶" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'undo') } }
741. button { type = "button" class = "redo" title = "Redo" "↷" on mousedown(e) { e.preventDefault() } on click(e) { emit mdTool(e, 'redo') } }
742. }
743. linkForm {
744. input { type = "text" placeholder = "https://…" autocomplete = "off" on keydown(e) { emit mdLinkKey(e) } }
745. button { type = "button" "Apply" on click(e) { emit mdLinkSubmit(e) } }
746. button { type = "button" title = "Remove the link" "Remove" on click(e) { emit mdLinkRemove(e) } }
747. }
748. ul { class = "files" 'aria-live' = "polite" }
749. span { class = "placeholder" placeholder }
750. article { contenteditable = "true" role = "textbox" tabindex = "0" on animationiteration(e) { emit mdMount(e) } on input(e) { emit mdInput(e) } on beforeinput(e) { emit mdBefore(e) } on keydown(e) { emit mdKey(e) } on paste(e) { emit mdPaste(e) } on drop(e) { emit mdDrop(e) } on click(e) { emit mdClick(e) } on blur(e) { emit mdBlur(e) } }
751. textarea { rows = rows spellcheck = "false" on input(e) { emit mdSourceInput(e) } }
752. input { class = "value" type = "hidden" name = name value = value }
753. footer { button { type = "button" class = "source-switch" on click(e) { emit mdSource(e) } "Markdown source" } }
754. }
755. }
757. on mdMount(e) {
758. s = e.target
759. s.style.animationName = 'none'
760. root = rootOf(s)
761. document.execCommand('defaultParagraphSeparator', false, 'p')
762. document.execCommand('styleWithCSS', false, false)
763. load(root, fieldOf(root).value)
764. sourceOf(root).value = fieldOf(root).value
765. document.addEventListener('selectionchange', () => { updateBar(root) })
766. }
768. on mdInput(e) {
769. e.stopPropagation()
770. root = rootOf(e.target)
771. s = surfaceOf(root)
772. // an emptied surface gets its paragraph back
773. if (s.childNodes.length == 0) {
774. np = document.createElement('p')
775. np.appendChild(document.createElement('br'))
776. s.appendChild(np)
777. document.getSelection().collapse(np, 0)
778. }
779. if (e.inputType == 'insertText' && (e.data == '*' || e.data == '_' || e.data == '`')) { inlineRule(root, e) }
780. sync(root)
781. updateBar(root)
782. }
784. on mdBefore(e) {
785. if (e.inputType == 'insertText' && e.data == ' ') {
786. root = rootOf(e.target)
787. blockRule(root, e)
788. }
789. }
791. on mdKey(e) {
792. root = rootOf(e.target)
793. mod = e.ctrlKey || e.metaKey
794. if (mod && !e.shiftKey && !e.altKey && (e.key == 'k' || e.key == 'K')) { e.preventDefault() linkOpen(root) return null }
795. if (mod && !e.shiftKey && !e.altKey && (e.key == 'e' || e.key == 'E')) { e.preventDefault() codeToggle(root) sync(root) return null }
796. if (mod && e.shiftKey && (e.key == '8' || e.key == '*')) { e.preventDefault() blockToggle(root, 'ul', 'insertUnorderedList') sync(root) return null }
797. if (mod && e.shiftKey && (e.key == '7' || e.key == '&')) { e.preventDefault() blockToggle(root, 'ol', 'insertOrderedList') sync(root) return null }
798. if (mod && e.altKey && e.code == 'KeyC') { e.preventDefault() blockToggle(root, 'pre', '') sync(root) return null }
799. if (mod && e.altKey && e.code == 'Digit0') { e.preventDefault() document.execCommand('formatBlock', false, 'p') sync(root) return null }
800. if (mod && e.altKey && (e.code == 'Digit1' || e.code == 'Digit2' || e.code == 'Digit3')) { e.preventDefault() document.execCommand('formatBlock', false, 'h' + e.code.slice(5, 6)) sync(root) return null }
801. // Ctrl+Enter sends the form the editor sits in
802. if (mod && e.key == 'Enter') {
803. e.preventDefault()
804. form = root.closest('form')
805. if (form != null) { form.requestSubmit() }
806. return null
807. }
808. // Backspace at the very start of a heading / list item / code block turns it into a paragraph
809. if (e.key == 'Backspace' && document.getSelection().isCollapsed && inSurface(root)) {
810. let sel = document.getSelection()
811. let b = blockOf(root, sel.anchorNode)
812. if (b != null && 'h1,h2,h3,h4,h5,h6,ul,ol,pre'.split(',').indexOf(b.nodeName.toLowerCase()) >= 0) {
813. r = sel.getRangeAt(0)
814. pre = document.createRange()
815. pre.selectNodeContents(b)
816. pre.setEnd(r.endContainer, r.endOffset)
817. if (pre.toString() == '') {
818. e.preventDefault()
819. tag = b.nodeName.toLowerCase()
820. if (tag == 'ul') { document.execCommand('insertUnorderedList') }
821. else if (tag == 'ol') { document.execCommand('insertOrderedList') }
822. else { document.execCommand('formatBlock', false, 'p') }
823. sync(root)
824. return null
825. }
826. }
827. }
828. // ``` at the start of a line + Enter opens a code block
829. if (e.key == 'Enter' && !mod && !e.shiftKey && !inTag(root, ['pre'])) {
830. let sel = document.getSelection()
831. let b = sel.anchorNode != null ? blockOf(root, sel.anchorNode) : null
832. if (b != null && b.nodeName.toLowerCase() == 'p' && sel.isCollapsed && (clean(b.textContent).startsWith('```') || clean(b.textContent).startsWith('~~~')) && clean(b.textContent).replaceAll('`', '').replaceAll('~', '') == '') {
833. e.preventDefault()
834. sel.selectAllChildren(b)
835. document.execCommand('delete')
836. document.execCommand('formatBlock', false, 'pre')
837. sync(root)
838. }
839. }
840. }
842. on mdTool(e, tool) {
843. root = rootOf(e.target)
844. s = surfaceOf(root)
845. if (!inSurface(root)) { s.focus() }
846. if (tool == 'bold') { document.execCommand('bold') }
847. if (tool == 'italic') { document.execCommand('italic') }
848. if (tool == 'code') { codeToggle(root) }
849. if (tool == 'link') { linkOpen(root) return null }
850. if (tool == 'heading') { headingCycle(root) }
851. if (tool == 'ul') { blockToggle(root, 'ul', 'insertUnorderedList') }
852. if (tool == 'ol') { blockToggle(root, 'ol', 'insertOrderedList') }
853. if (tool == 'pre') { blockToggle(root, 'pre', '') }
854. if (tool == 'undo') { document.execCommand('undo') }
855. if (tool == 'redo') { document.execCommand('redo') }
856. sync(root)
857. updateBar(root)
858. }
860. on mdLinkSubmit(e) { linkApply(rootOf(e.target), false) }
861. on mdLinkRemove(e) { linkApply(rootOf(e.target), true) }
862. on mdLinkKey(e) {
863. if (e.key == 'Escape') { e.preventDefault() linkClose(rootOf(e.target)) }
864. if (e.key == 'Enter') { e.preventDefault() linkApply(rootOf(e.target), false) }
865. }
867. // pasted / dropped text is read as Markdown (rich HTML is not taken: only its plain text)
868. insertMarkdown(root, text) {
869. if (inTag(root, ['pre'])) { document.execCommand('insertText', false, text) return null }
870. document.execCommand('insertHTML', false, mdHtml(text))
871. }
872. on mdPaste(e) {
873. e.preventDefault()
874. root = rootOf(e.target)
875. if (e.clipboardData.files.length > 0) { attach(root, e.clipboardData.files, null) return null }
876. insertMarkdown(root, e.clipboardData.getData('text/plain'))
877. sync(root)
878. }
879. on mdDrop(e) {
880. e.preventDefault()
881. root = rootOf(e.target)
882. if (e.dataTransfer.files.length > 0) {
883. at = document.caretRangeFromPoint(e.clientX, e.clientY)
884. attach(root, e.dataTransfer.files, at)
885. return null
886. }
887. text = e.dataTransfer.getData('text/plain')
888. if (text != '') { insertMarkdown(root, text) sync(root) }
889. }
890. // ---- files and images: dropped, pasted or chosen files go to the app through `emit server mdUpload(files)` (the framework sends them
891. // over HTTP with progress); the app stores them and answers the addresses; each lands in the text as ![name](address) (an image) or
892. // [name](address). Progress comes back as `uploadProgress` and is shown under the toolbar.
893. fileRow(root, p) {
894. list = root.querySelector('ul.files')
895. let li = list.children[p.index]
896. if (li == null) {
897. li = document.createElement('li')
898. li.appendChild(el('span', p.name))
899. li.appendChild(document.createElement('progress'))
900. list.appendChild(li)
901. }
902. bar = li.querySelector('progress')
903. bar.max = p.size
904. bar.value = p.sent
905. }
906. on client uploadProgress(p) {
907. for (root of document.querySelectorAll('md-editor.uploading')) { fileRow(root, p) }
908. }
909. attachMd(names, kinds, urls) {
910. out = []
911. let i = 0
912. while (i < urls.length) {
913. let label = names[i].replaceAll('[', '').replaceAll(']', '')
914. let u = urls[i].replaceAll(')', '%29').replaceAll(' ', '%20')
915. if (urls[i] != '') { out.push((kinds[i] ? '!' : '') + '[' + label + '](' + u + ')') }
916. i = i + 1
917. }
918. return out.join(NL + NL)
919. }
920. attach(root, files, at) {
921. s = surfaceOf(root)
922. sel = document.getSelection()
923. let range = at
924. if (range == null && inSurface(root)) { range = sel.getRangeAt(0).cloneRange() }
925. list = []
926. names = []
927. kinds = []
928. let k = 0
929. while (k < files.length) { list.push(files[k]) names.push(files[k].name) kinds.push(files[k].type.startsWith('image/')) k = k + 1 }
930. box = root.querySelector('ul.files')
931. box.textContent = ''
932. root.classList.add('uploading')
933. root.classList.remove('failed')
934. urls = emit server mdUpload(list)
935. root.classList.remove('uploading')
936. if (urls == null || urls.length != list.length) {
937. root.classList.add('failed')
938. box.textContent = ''
939. li = el('li', 'The upload failed.')
940. li.className = 'error'
941. box.appendChild(li)
942. return null
943. }
944. box.textContent = ''
945. s.focus()
946. if (range != null && s.contains(range.startContainer)) { sel.removeAllRanges() sel.addRange(range) }
947. else { sel.selectAllChildren(s) sel.collapseToEnd() }
948. md = attachMd(names, kinds, urls)
949. if (md == '') { return null }
950. // inside a list item (or at the end of the surface, where the caret sits in the last item) the block would be glued to the
951. // item's text: it is put on its own after the list, as elements (an editing command would join it to the item)
952. let top = null
953. if (sel.anchorNode == s) { top = s.childNodes[sel.anchorOffset - 1 >= 0 ? sel.anchorOffset - 1 : 0] }
954. else if (sel.anchorNode != null && s.contains(sel.anchorNode)) { top = blockOf(root, sel.anchorNode) }
955. if (top != null && (top.nodeName == 'UL' || top.nodeName == 'OL')) {
956. tmp = document.createElement('div')
957. parseInto(tmp, md)
958. ref = top.nextSibling
959. while (tmp.firstChild != null) { s.insertBefore(tmp.firstChild, ref) }
960. sel.selectAllChildren(s)
961. sel.collapseToEnd()
962. sync(root)
963. return null
964. }
965. insertMarkdown(root, md)
966. sync(root)
967. }
968. on mdPick(e) {
969. root = rootOf(e.target)
970. root.querySelector('input.pick').click()
971. }
972. on mdPicked(e) {
973. root = rootOf(e.target)
974. input = e.target
975. if (input.files.length > 0) { attach(root, input.files, null) }
976. input.value = ''
977. }
978. // Ctrl / Cmd + click follows a link
979. on mdClick(e) {
980. a = e.target.closest('a')
981. if ((e.ctrlKey || e.metaKey) && a != null && safeHref(a.getAttribute('href')) != '') { window.open(a.getAttribute('href'), '_blank', 'noopener') }
982. }
983. on mdBlur(e) { sync(rootOf(e.target)) }
985. // the Markdown source view: the whole field as a plain textarea, and back
986. on mdSource(e) {
987. root = rootOf(e.target)
988. ta = sourceOf(root)
989. b = root.querySelector('button.source-switch')
990. if (root.classList.contains('source')) {
991. md = ta.value
992. load(root, md)
993. root.classList.remove('source')
994. b.textContent = 'Markdown source'
995. sync(root)
996. surfaceOf(root).focus()
997. } else {
998. sync(root)
999. ta.value = fieldOf(root).value
1000. root.classList.add('source')
1001. b.textContent = 'Visual editor'
1002. ta.focus()
1003. }
1004. }
1005. on mdSourceInput(e) {
1006. root = rootOf(e.target)
1007. f = fieldOf(root)
1008. f.value = e.target.value
1009. f.dispatchEvent(new Event('input', { bubbles = true }))
1010. }