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

old/src/Editor.css

@@ -1,51 +0,0 @@
-.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;
-}

old/src/Editor.tsx

@@ -1,44 +0,0 @@
-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;

old/src/highlight.ts

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