components

16.1 KB

1. // code-editor.hl — THE CODE EDITOR, all Hybriel (port of custom-ide's CodeJar editor): the code is highlighted while you type, line
2. // numbers follow, Tab / Shift+Tab indent and outdent, Enter keeps the indent, brackets and quotes close themselves, Ctrl+Z / Ctrl+Shift+Z
3. // undo and redo. `CodeEditor { name = "source" value = "let x = 1" language = "hybriel" }` — the value is the plain text.
4. // Like CodeJar: ONE contenteditable="plaintext-only" element holds the code as text nodes and <span class="tok-…"> tokens; after every
5. // edit the text is read back, painted again and the caret put back by its text offset. The framework never re-renders the surface
6. // (nothing bound to it changes after the first render). Hybriel has no mount event, so a 100 ms CSS animation on the surface fires
7. // `animationiteration` once the page is live; that hands the editor its first content. The value is written to the hidden field
8. // `<input name>` (posts in a form) and announced with a bubbling DOM `input` event on it (`e.target.value` = the text).
9. // Languages: hybriel, js (javascript), plain. The undo history is the editor's own (snapshots of the text and the caret), as in CodeJar.
11. String name = 'code'
12. String value = ''
13. String language = 'hybriel'
14. Number spaces = 0
16. static NL = "
17. "
18. static TAB = " "
19. static BS = 'x\y'.slice(1, 2)
20. static hybrielWords = ' import from static on server emit View Style parent if else for while return let new true false null class extends this in of self mode try catch throw break continue String Number Boolean Hybrid Text '
21. static jsWords = ' import export from default const let var function return if else for while do switch case break continue new this class extends super typeof instanceof in of try catch finally throw async await yield true false null undefined void delete static get set '
23. // ---- small text helpers ---------------------------------------------------------------------------------------------
24. isDigit(c) { k = c.charCodeAt(0) return k >= 48 && k <= 57 }
25. isUpper(c) { k = c.charCodeAt(0) return k >= 65 && k <= 90 }
26. isWordStart(c) { k = c.charCodeAt(0) return (k >= 65 && k <= 90) || (k >= 97 && k <= 122) || k == 95 || k == 36 || k > 127 }
27. isWordChar(c) { return isWordStart(c) || isDigit(c) }
28. wordsOf(lang) {
29. if (lang == 'hybriel') { return hybrielWords }
30. if (lang == 'js' || lang == 'javascript') { return jsWords }
31. return ''
32. }
33. lineEnd(s, i) {
34. j = s.indexOf(NL, i)
35. return j < 0 ? s.length : j
36. }
37. // the end (exclusive) of the string that opens at i with the quote q: a backslash masks the next character; only a template
38. // string (`) runs over lines
39. stringEnd(s, i, q) {
40. let j = i + 1
41. n = s.length
42. while (j < n) {
43. let c = s.slice(j, j + 1)
44. if (c == BS) { j = j + 2 }
45. else if (c == q) { return j + 1 }
46. else if (c == NL && q != '`') { return j }
47. else { j = j + 1 }
48. }
49. return n
50. }
51. // the leading blanks of a line
52. leadingBlanks(line) {
53. let k = 0
54. while (k < line.length && (line.slice(k, k + 1) == ' ' || line.slice(k, k + 1) == TAB)) { k = k + 1 }
55. return line.slice(0, k)
56. }
57. repeat(c, n) { let s = '' let i = 0 while (i < n) { s = s + c i = i + 1 } return s }
59. // ---- highlighting: the text → text nodes and <span class="tok-…"> in a host ---------------------------------------------
60. span(host, cls, text) {
61. e = document.createElement('span')
62. e.className = 'tok-' + cls
63. e.textContent = text
64. host.appendChild(e)
65. }
66. paint(host, s, lang) {
67. words = wordsOf(lang)
68. let buf = ''
69. let i = 0
70. n = s.length
71. while (i < n) {
72. let c = s.slice(i, i + 1)
73. let two = s.slice(i, i + 2)
74. let end = -1
75. let cls = ''
76. if (lang != 'plain') {
77. if (two == '//') { end = lineEnd(s, i) cls = 'comment' }
78. else if (two == '/*') { let j = s.indexOf('*/', i + 2) end = j < 0 ? n : j + 2 cls = 'comment' }
79. else if (c == "'" || c == '"' || c == '`') { end = stringEnd(s, i, c) cls = 'string' }
80. else if (isDigit(c) && (i == 0 || !isWordChar(s.slice(i - 1, i)))) {
81. let j = i + 1
82. while (j < n && (isWordChar(s.slice(j, j + 1)) || (s.slice(j, j + 1) == '.' && isDigit(s.slice(j + 1, j + 2))))) { j = j + 1 }
83. end = j
84. cls = 'number'
85. }
86. else if (isWordStart(c)) {
87. let j = i + 1
88. while (j < n && isWordChar(s.slice(j, j + 1))) { j = j + 1 }
89. let w = s.slice(i, j)
90. let prev = i > 0 ? s.slice(i - 1, i) : ''
91. if (words.indexOf(' ' + w + ' ') >= 0 && prev != '.') { end = j cls = 'keyword' }
92. else if (s.slice(j, j + 1) == '(') { end = j cls = 'function' }
93. else if (isUpper(c) && w.length > 1) { end = j cls = 'type' }
94. else { buf = buf + w i = j end = -2 }
95. }
96. }
97. if (end > i) {
98. if (buf != '') { host.appendChild(document.createTextNode(buf)) buf = '' }
99. span(host, cls, s.slice(i, end))
100. i = end
101. } else if (end == -1) { buf = buf + c i = i + 1 }
102. }
103. // one more line feed at the very end: the browser shows the caret of a last empty line only when a line feed follows it
104. host.appendChild(document.createTextNode(buf + NL))
105. }
106. // the code in the surface, without that last line feed
107. textOf(s) {
108. t = s.textContent
109. return t.endsWith(NL) ? t.slice(0, t.length - 1) : t
110. }
112. // ---- the caret as text offsets (the DOM is rebuilt by paint, so the caret is saved as numbers) -----------------------------
113. rootOf(node) { return node.closest('code-editor') }
114. surfaceOf(root) { return root.querySelector('article') }
115. gutterOf(root) { return root.querySelector('code-gutter') }
116. fieldOf(root) { return root.querySelector('input.value') }
117. langOf(root) { return root.querySelector('input.language').value }
118. unitOf(root) {
119. n = toNumber(root.querySelector('input.spaces').value)
120. return n > 0 ? repeat(' ', n) : TAB
121. }
123. // null when the caret is not in the surface
124. caretOf(s) {
125. sel = document.getSelection()
126. if (sel.rangeCount == 0 || sel.anchorNode == null || !s.contains(sel.anchorNode) || !s.contains(sel.focusNode)) { return null }
127. r = sel.getRangeAt(0)
128. a = document.createRange()
129. a.selectNodeContents(s)
130. a.setEnd(r.startContainer, r.startOffset)
131. b = document.createRange()
132. b.selectNodeContents(s)
133. b.setEnd(r.endContainer, r.endOffset)
134. return { start = a.toString().length end = b.toString().length }
135. }
136. placeCaret(s, start, end) {
137. w = document.createTreeWalker(s, 4)
138. let pos = 0
139. let sn = null
140. let so = 0
141. let en = null
142. let eo = 0
143. let node = w.nextNode()
144. while (node != null) {
145. let len = node.data.length
146. if (sn == null && start <= pos + len) { sn = node so = start - pos }
147. if (en == null && end <= pos + len) { en = node eo = end - pos }
148. pos = pos + len
149. node = w.nextNode()
150. }
151. if (sn == null) { sn = s so = s.childNodes.length }
152. if (en == null) { en = s eo = s.childNodes.length }
153. document.getSelection().setBaseAndExtent(sn, so, en, eo)
154. }
156. // ---- the editor ---------------------------------------------------------------------------------------------------------
157. // line numbers: rewritten only when the number of lines changed
158. gutter(root, text) {
159. n = text.split(NL).length
160. if (root.codeLines == n) { return null }
161. root.codeLines = n
162. let out = ''
163. let i = 1
164. while (i <= n) { out = out + (i > 1 ? NL : '') + i i = i + 1 }
165. gutterOf(root).textContent = out
166. }
167. // the text is the value: written to the field and announced when it changed
168. sync(root, text) {
169. f = fieldOf(root)
170. if (text != f.value) {
171. f.value = text
172. f.dispatchEvent(new Event('input', { bubbles = true }))
173. }
174. }
175. // shows `text` painted with the caret at a..b
176. setText(root, text, a, b) {
177. s = surfaceOf(root)
178. s.textContent = ''
179. paint(s, text, langOf(root))
180. placeCaret(s, a, b)
181. gutter(root, text)
182. sync(root, text)
183. }
184. // the undo history: snapshots of the text and the caret; typing within 300 ms of the last change joins its snapshot
185. record(root, text, a, b, force) {
186. now = Date.now()
187. // root.codeHist is used in place: a `let` copy of a list would be a COPY (Hybriel copies plain lists on assignment)
188. if (root.codeHist[root.codeAt].t == text) { root.codeHist[root.codeAt] = { t = text p = a q = b } return null }
189. if (!force && root.codeAt > 0 && now - root.codeTime < 300) {
190. root.codeHist[root.codeAt] = { t = text p = a q = b }
191. } else {
192. while (root.codeHist.length > root.codeAt + 1) { root.codeHist.pop() }
193. root.codeHist.push({ t = text p = a q = b })
194. root.codeAt = root.codeAt + 1
195. while (root.codeHist.length > 300) { root.codeHist.shift() root.codeAt = root.codeAt - 1 }
196. }
197. root.codeTime = force ? 0 : now
198. }
199. // a change made by a key: replace from..to by `ins`, the caret at a..b afterwards; its own undo step
200. edit(root, lo, hi, ins, a, b) {
201. text = textOf(surfaceOf(root))
202. next = text.slice(0, lo) + ins + text.slice(hi)
203. setText(root, next, a, b)
204. record(root, next, a, b, true)
205. }
206. step(root, dir) {
207. at = root.codeAt + dir
208. if (at < 0 || at >= root.codeHist.length) { return null }
209. root.codeAt = at
210. root.codeTime = 0
211. h = root.codeHist[at]
212. setText(root, h.t, h.p, h.q)
213. }
215. on codeMount(e) {
216. s = e.target
217. s.style.animationName = 'none'
218. root = rootOf(s)
219. text = fieldOf(root).value
220. s.setAttribute('aria-label', 'Code')
221. s.setAttribute('aria-multiline', 'true')
222. gutterOf(root).setAttribute('aria-hidden', 'true')
223. paint(s, text, langOf(root))
224. gutter(root, text)
225. root.codeHist = [{ t = text p = text.length q = text.length }]
226. root.codeAt = 0
227. root.codeTime = 0
228. }
230. // typing, paste, cut, drop: the browser changed the text; paint it again and give the caret back
231. on codeInput(e) {
232. e.stopPropagation()
233. if (e.isComposing) { return null }
234. root = rootOf(e.target)
235. s = surfaceOf(root)
236. let c = caretOf(s)
237. text = textOf(s)
238. if (c == null) { c = { start = text.length end = text.length } }
239. setText(root, text, c.start, c.end)
240. record(root, text, c.start, c.end, false)
241. }
243. // Tab / Shift+Tab: one line's caret gets a tab (or spaces) / the touched lines are indented / outdented
244. tabKey(root, text, c, back) {
245. unit = unitOf(root)
246. ls = text.slice(0, c.start).lastIndexOf(NL) + 1
247. multi = text.slice(c.start, c.end).indexOf(NL) >= 0
248. if (!back && !multi) { edit(root, c.start, c.end, unit, c.start + unit.length, c.start + unit.length) return null }
249. // the lines from the one holding the start to the one holding the end
250. let le = text.indexOf(NL, c.end)
251. if (le < 0) { le = text.length }
252. if (c.end > c.start && text.slice(c.end - 1, c.end) == NL) { le = c.end - 1 }
253. lines = text.slice(ls, le).split(NL)
254. out = []
255. let first = 0
256. let total = 0
257. let i = 0
258. while (i < lines.length) {
259. let line = lines[i]
260. let cut = 0
261. if (back) {
262. if (line.startsWith(TAB)) { cut = 1 }
263. else {
264. let k = 0
265. while (k < unit.length && line.slice(k, k + 1) == ' ') { k = k + 1 }
266. cut = k
267. }
268. out.push(line.slice(cut))
269. } else {
270. cut = 0 - unit.length
271. out.push(line == '' ? line : unit + line)
272. if (line == '') { cut = 0 }
273. }
274. if (i == 0) { first = cut }
275. total = total + cut
276. i = i + 1
277. }
278. let a = c.start - first
279. if (a < ls) { a = ls }
280. edit(root, ls, le, out.join(NL), a, c.end - total)
281. }
283. // pasted text goes in as plain text with its line feeds (the browser would make one <div> per line)
284. on codePaste(e) {
285. e.preventDefault()
286. root = rootOf(e.target)
287. s = surfaceOf(root)
288. c = caretOf(s)
289. t = e.clipboardData.getData('text/plain')
290. if (c == null) { return null }
291. at = c.start + t.length
292. edit(root, c.start, c.end, t, at, at)
293. }
295. on codeKey(e) {
296. if (e.isComposing) { return null }
297. root = rootOf(e.target)
298. s = surfaceOf(root)
299. mod = e.ctrlKey || e.metaKey
300. k = e.key
301. if (mod && !e.altKey && (k == 'z' || k == 'Z')) { e.preventDefault() step(root, e.shiftKey ? 1 : 0 - 1) return null }
302. if (mod && !e.altKey && (k == 'y' || k == 'Y')) { e.preventDefault() step(root, 1) return null }
303. if (mod || e.altKey) { return null }
304. c = caretOf(s)
305. if (c == null) { return null }
306. text = textOf(s)
307. before = text.slice(0, c.start)
308. after = text.slice(c.end)
309. if (k == 'Tab') { e.preventDefault() tabKey(root, text, c, e.shiftKey) return null }
310. if (k == 'Enter') {
311. // the new line keeps the indent; after ( [ { it is indented once more, and a closing bracket right after goes to its own line
312. e.preventDefault()
313. pad = leadingBlanks(before.slice(before.lastIndexOf(NL) + 1))
314. opens = before.length > 0 && '([{'.indexOf(before.slice(before.length - 1)) >= 0
315. extra = opens ? pad + unitOf(root) : pad
316. closes = after.length > 0 && ')]}'.indexOf(after.slice(0, 1)) >= 0
317. if (opens && closes) {
318. let at = c.start + 1 + extra.length
319. edit(root, c.start, c.end, NL + extra + NL + pad, at, at)
320. } else {
321. let at = c.start + 1 + extra.length
322. edit(root, c.start, c.end, NL + extra, at, at)
323. }
324. return null
325. }
326. if (k.length == 1) {
327. open = '([{' + "'" + '"'
328. close = ')]}' + "'" + '"'
329. ix = open.indexOf(k)
330. next = after.slice(0, 1)
331. // a closer typed right before the same closer just steps over it
332. if (c.start == c.end && close.indexOf(k) >= 0 && next == k) { e.preventDefault() placeCaret(s, c.start + 1, c.start + 1) return null }
333. // a bracket typed on the empty indented line between an auto-inserted pair (Enter inside { }) closes it: the empty line goes
334. if (c.start == c.end && ')]}'.indexOf(k) >= 0) {
335. ls = before.lastIndexOf(NL) + 1
336. if (ls > 0 && leadingBlanks(before.slice(ls)).length == before.length - ls) {
337. rest = leadingBlanks(after.slice(1))
338. if (after.slice(0, 1) == NL && after.slice(1 + rest.length, 2 + rest.length) == k) {
339. e.preventDefault()
340. let at = ls + rest.length + 1
341. edit(root, ls, c.start + 2 + rest.length, rest + k, at, at)
342. return null
343. }
344. }
345. }
346. if (ix >= 0) {
347. prev = before.slice(before.length - 1)
348. // an apostrophe inside a word (don't) is not an opening quote
349. if (c.start == c.end && ix >= 3 && before.length > 0 && isWordChar(prev)) { return null }
350. e.preventDefault()
351. inner = text.slice(c.start, c.end)
352. edit(root, c.start, c.end, k + inner + close.slice(ix, ix + 1), c.start + 1, c.start + 1 + inner.length)
353. }
354. }
355. }
357. // ---- 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). Syntax colours: greys only (plain code black)
358. Style {
359. '@keyframes code-editor-mount' { 'from' { opacity = '.999' } to { opacity = '1' } }
360. 'code-editor' { display = 'block' border = '0' borderRadius = '.5rem' background = 'var(--color-background-sunken, #f2f2f2)' color = 'var(--color-text, #000)' overflow = 'hidden' }
361. 'code-editor:focus-within' { outline = '2px solid var(--color-accent, #555)' outlineOffset = '-1px' }
362. 'code-editor code-scroll' { display = 'flex' alignItems = 'stretch' overflow = 'auto' minHeight = 'var(--code-editor-min-height, 8rem)' font = '.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' tabSize = '4' }
363. 'code-editor code-gutter' { position = 'sticky' left = '0' flex = 'none' boxSizing = 'border-box' minWidth = '3rem' padding = '.6rem .6rem .6rem .4rem' textAlign = 'right' whiteSpace = 'pre' userSelect = 'none' color = 'var(--color-text-muted, #555)' background = 'var(--color-surface, #ddd)' borderRight = '0' }
364. 'code-editor article' { flex = '1 0 auto' boxSizing = 'border-box' minWidth = 'calc(100% - 3rem)' padding = '.6rem .8rem' outline = 'none' whiteSpace = 'pre' caretColor = 'var(--color-accent, #000)' animation = 'code-editor-mount 100ms infinite' }
365. 'code-editor .tok-comment' { color = 'var(--color-text-muted, #555)' fontStyle = 'italic' }
366. 'code-editor .tok-string' { color = 'var(--orange, #555)' }
367. 'code-editor .tok-number' { color = 'var(--green-light, #555)' }
368. 'code-editor .tok-keyword' { color = 'var(--color-special, #555)' }
369. 'code-editor .tok-function' { color = 'var(--yellow, #000)' }
370. 'code-editor .tok-type' { color = 'var(--green-dark, #555)' }
371. }
373. // code-gutter = the line numbers; article = the surface; the hidden fields carry the value (posts under `name`) and the settings the handlers read.
374. View {
375. codeEditor {
376. codeScroll {
377. codeGutter { }
378. article { contenteditable = "plaintext-only" spellcheck = "false" role = "textbox" tabindex = "0" on animationiteration(e) { emit codeMount(e) } on input(e) { emit codeInput(e) } on keydown(e) { emit codeKey(e) } on paste(e) { emit codePaste(e) } }
379. }
380. input { class = "value" type = "hidden" name = name value = value }
381. input { class = "language" type = "hidden" value = language }
382. input { class = "spaces" type = "hidden" value = spaces }
383. }
384. }