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

src/Editor.css

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

src/Editor.tsx

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