Add an overlay that is invisible.

We will put a second copy of the input text in here invisibly, so we can create overlay spans.

src/Editor.css

@@ -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;
+}

src/Editor.tsx

@@ -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>