From b52ee917450393be020415d29e9771f2ae64067d Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Fri, 12 Jan 2024 22:39:00 -0500
Subject: [PATCH] Switch from an overlay to an underlay so the highlight colors
 do not impact the text.

---
 src/Editor.css | 18 ++++++++++++------
 src/Editor.tsx |  2 +-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/Editor.css b/src/Editor.css
index 5c6da32..bb8f307 100644
--- a/src/Editor.css
+++ b/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 {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.Editor-underlay {
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  /* background: orange; */
 }
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 2828cc7..5fdadd9 100644
--- a/src/Editor.tsx
+++ b/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>