talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add an overlay that is invisible.

Browse Source 
We will put a second copy of the input text in here invisibly, so we can create overlay spans.
This commit is contained in:
Tom Alexander 2024-01-12 22:30:55 -05:00
parent 636f2dabb8
commit 949e02af2f
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Editor.css
View File

@ -8,6 +8,7 @@
.Editor-textwrapper {
flex: 1;
flex-basis: 0;
position: relative;
}
.Editor-textarea {
@ -19,3 +20,12 @@
flex: 1;
background: green;
}
.Editor-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}

3
src/Editor.tsx
View File

@ -8,7 +8,8 @@ function Editor() {
return (
<div className="Editor">
<div className="Editor-textwrapper">
<textarea onChange={handleChange} className="Editor-textarea"></textarea>
<div className="Editor-overlay"></div>
<textarea onChange={handleChange} className="Editor-textarea">I have text</textarea>
</div>
<div className="Editor-ast"></div>
</div>