From 949e02af2f0260fde4bc690e150ccdba791b8b53 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Fri, 12 Jan 2024 22:30:55 -0500
Subject: [PATCH] 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 | 10 ++++++++++
 src/Editor.tsx |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Editor.css b/src/Editor.css
index 3716e3a..5c6da32 100644
--- a/src/Editor.css
+++ b/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;
+}
diff --git a/src/Editor.tsx b/src/Editor.tsx
index bdc63dc..2828cc7 100644
--- a/src/Editor.tsx
+++ b/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>