test
ughhhh
+133
+69
editor.css
+69
editor.css
···
1
+
editor-container {
2
+
display: block;
3
+
overflow-y: scroll;
4
+
max-width: -webkit-fill-available;
5
+
max-width: -moz-available;
6
+
max-width: stretch;
7
+
width: 700px;
8
+
max-height: 100px;
9
+
border: 3px solid white;
10
+
background: white;
11
+
color: black;
12
+
caret-color: black;
13
+
}
14
+
editor-container:focus-within {
15
+
outline-style: auto;
16
+
}
17
+
editor-container > div {
18
+
display: block;
19
+
position: relative;
20
+
background: inherit;
21
+
color: inherit;
22
+
contain: content;
23
+
caret-color: inherit;
24
+
}
25
+
editor-container > div > * {
26
+
all: initial;
27
+
28
+
display: block;
29
+
overflow: hidden; overflow: clip;
30
+
width: 100%;
31
+
32
+
white-space: pre-wrap;
33
+
word-break: break-word;
34
+
line-break: anywhere;
35
+
36
+
font-family: Cascadia Mono, Cascadia Code, Fira Code, consolas, monospace, monospace;
37
+
font-size: 1rem;
38
+
line-height: 1.25rem;
39
+
font-kerning: none;
40
+
font-variant-ligatures: none;
41
+
tab-size: 3; -moz-tab-size: 3;
42
+
}
43
+
editor-container > div > textarea {
44
+
position: absolute;
45
+
top: 0;
46
+
z-index: 1;
47
+
resize: none;
48
+
height: 100%;
49
+
overflow: hidden;
50
+
51
+
background: transparent;
52
+
color: transparent;
53
+
caret-color: inherit;
54
+
contain: strict;
55
+
/* prevent internal elements from scrolling */
56
+
padding: 100px;
57
+
margin: -100px;
58
+
}
59
+
editor-container > div > :first-child {
60
+
pointer-events: none;
61
+
background: inherit;
62
+
color: inherit;
63
+
will-change: contents;
64
+
contain: content;
65
+
}
66
+
/* necessary to avoid hiding last linebreak */
67
+
editor-container > div > :first-child::after {
68
+
content: "\A";
69
+
}
+41
editor.js
+41
editor.js
···
1
+
export class Editor {
2
+
constructor() {
3
+
let root = document.createElement('editor-container')
4
+
let elem1 = document.createElement('div')
5
+
let elem2 = document.createElement('div')
6
+
let elem3 = document.createElement('textarea')
7
+
8
+
root.append(elem1)
9
+
elem1.append(elem2, elem3)
10
+
root.tabIndex=-1
11
+
elem1.tabIndex=-1
12
+
this.root = root
13
+
this.overlay = elem2
14
+
this.textarea = elem3
15
+
16
+
let lock = false
17
+
let missed = true
18
+
this.textarea.addEventListener('input', e=>{
19
+
if (lock) {
20
+
missed = true
21
+
return
22
+
}
23
+
lock = true
24
+
this.update()
25
+
setTimeout(()=>{
26
+
lock = false
27
+
if (missed)
28
+
this.update()
29
+
})
30
+
}, {passive: true})
31
+
}
32
+
update() {
33
+
let text = this.textarea.value
34
+
this.overlay.textContent = text
35
+
}
36
+
reset_textarea(text="") {
37
+
this.textarea.value = text
38
+
this.update()
39
+
}
40
+
}
41
+
/*ugh i'm so tired.. no work today..*/
+10
final.txt
+10
final.txt
···
1
+
ok so, the components:
2
+
3
+
- post rendering (trivial)
4
+
- composer 1:
5
+
- plaintext -> facets
6
+
- highlight parsed segments in editor
7
+
8
+
so, our parser needs to output 2 things:
9
+
- {text,facets} (though, while typing, we only need to fully compute the grapheme length of the text)
10
+
- list of spans to highlight in the input