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

Switch from an overlay to an underlay so the highlight colors do not impact the text.

Browse Source
This commit is contained in:
Tom Alexander 2024-01-12 22:39:00 -05:00
parent 949e02af2f
commit b52ee91745
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Editor.css
View File

@ -9,11 +9,19 @@
flex: 1; flex: 1;
flex-basis: 0; flex-basis: 0;
position: relative; position: relative;
background: white;
} }
.Editor-textarea { .Editor-textarea {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
background-color: transparent;
} }
.Editor-ast { .Editor-ast {
@ -21,11 +29,9 @@
background: green; background: green;
} }
.Editor-overlay { .Editor-underlay {
position: absolute; width: 100%;
top: 0; height: 100%;
bottom: 0;
left: 0;
right: 0;
pointer-events: none; pointer-events: none;
/* background: orange; */
} }

2
src/Editor.tsx
View File

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