From e6f16c854cfc3d81129eb4209e86fbbfb244118b Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Fri, 12 Jan 2024 23:15:06 -0500
Subject: [PATCH] Duplicate the input text in the underlay div.

---
 src/Editor.css | 15 +++++++++++++++
 src/Editor.tsx | 12 +++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/Editor.css b/src/Editor.css
index bb8f307..2c155b2 100644
--- a/src/Editor.css
+++ b/src/Editor.css
@@ -10,6 +10,19 @@
   flex-basis: 0;
   position: relative;
   background: white;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+    "DejaVu Sans Mono", monospace;
+  font-weight: normal;
+  font-size: 3rem;
+  text-align: initial;
+}
+
+.Editor-textarea,
+.Editor-underlay {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  padding: 5px;
 }
 
 .Editor-textarea {
@@ -21,6 +34,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  border: none;
   background-color: transparent;
 }
 
@@ -34,4 +48,5 @@
   height: 100%;
   pointer-events: none;
   /* background: orange; */
+  /* color: purple; */
 }
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 5fdadd9..c37fcb9 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -1,15 +1,21 @@
+import React, { useState } from 'react';
 import './Editor.css';
 
-function Editor() {
+function Editor({
+  defaultValue = "I have a text value."
+}) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     console.log(event.target.value);
+    setValue(event.target.value);
   }
 
+  const [value, setValue] = useState(defaultValue);
+
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">
-        <textarea onChange={handleChange} className="Editor-textarea">I have text</textarea>
-        <div className="Editor-underlay"></div>
+        <textarea onChange={handleChange} className="Editor-textarea" value={value} />
+        <div className="Editor-underlay">{value}</div>
       </div>
       <div className="Editor-ast"></div>
     </div>