Integrate the editor from the old attempt into the new build.

src/Editor.css

@@ -0,0 +1,51 @@
+.Editor {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+}
+
+.Editor-textwrapper {
+  flex: 1;
+  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 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+}
+
+.Editor-ast {
+  flex: 1;
+  background: green;
+}
+
+.Editor-underlay {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  color: transparent;
+}

src/Editor.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import './Editor.css';
+import {Highlight} from './highlight';
+
+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);
+
+  const [highlights, setHighlights] = useState<Array<Highlight>>([]);
+
+  function addHighlight(start: number, end: number) {
+    setHighlights([...highlights, new Highlight(start, end)]);
+  }
+
+  function clearHighlights() {
+    setHighlights([]);
+  }
+
+  function buildShadow() {
+    // foo
+  }
+
+  if (highlights.length === 0) {
+    addHighlight(1,5);
+  }
+
+  return (
+    <div className="Editor">
+      <div className="Editor-textwrapper">
+        <textarea onChange={handleChange} className="Editor-textarea" value={value} />
+        <div className="Editor-underlay">{value}</div>
+      </div>
+      <div className="Editor-ast"></div>
+    </div>
+  );
+}
+
+export default Editor;

src/highlight.ts

@@ -0,0 +1,11 @@
+class Highlight {
+        start: number;
+        end: number;
+
+        constructor(start: number, end: number) {
+                this.start = start;
+                this.end = end;
+        }
+}
+
+export { Highlight };

src/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import init, { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
+import Editor from './Editor';
 
 init().then(() => {
   console.log(parse_org("foo"));
-  ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
+  ReactDOM.render(<><h1>Hello, world!</h1><Editor /></>, document.getElementById("root"));
 });