From a11201363ede53fba1b7b8a25f074a29936a7caa Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sun, 28 Jan 2024 17:28:43 -0500
Subject: [PATCH 1/5] Rename Editor to Explorer.

This component was both the editor and the AST view so it doesn't make sense to call it Editor. Instead the highlightable textarea is going to be moved into a new Editor component.
---
 src/App.tsx                      |  4 ++--
 src/{Editor.css => Explorer.css} | 12 ++++++------
 src/{Editor.tsx => Explorer.tsx} | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)
 rename src/{Editor.css => Explorer.css} (88%)
 rename src/{Editor.tsx => Explorer.tsx} (91%)

diff --git a/src/App.tsx b/src/App.tsx
index ff8a0bd..eb3cc95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import Editor from "./Editor";
+import Explorer from "./Explorer";
 import styles from "./App.module.css";
 import "./reset.css";
 
 function App({}) {
   return (
     <div className={styles.App}>
-      <Editor />
+      <Explorer />
     </div>
   );
 }
diff --git a/src/Editor.css b/src/Explorer.css
similarity index 88%
rename from src/Editor.css
rename to src/Explorer.css
index bdb9465..17d77f0 100644
--- a/src/Editor.css
+++ b/src/Explorer.css
@@ -1,11 +1,11 @@
-.Editor {
+.Explorer {
   display: flex;
   flex-direction: row;
   height: 100%;
   width: 100%;
 }
 
-.Editor-textwrapper {
+.Explorer-textwrapper {
   flex: 1;
   flex-basis: 0;
   position: relative;
@@ -17,8 +17,8 @@
   text-align: initial;
 }
 
-.Editor-textarea,
-.Editor-underlay {
+.Explorer-textarea,
+.Explorer-underlay {
   font-family: inherit;
   font-weight: inherit;
   font-size: inherit;
@@ -28,7 +28,7 @@
   line-height: normal;
 }
 
-.Editor-textarea {
+.Explorer-textarea {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -43,7 +43,7 @@
   outline: none;
 }
 
-.Editor-underlay {
+.Explorer-underlay {
   width: 100%;
   height: 100%;
   pointer-events: none;
diff --git a/src/Editor.tsx b/src/Explorer.tsx
similarity index 91%
rename from src/Editor.tsx
rename to src/Explorer.tsx
index dff073b..2c7fb80 100644
--- a/src/Editor.tsx
+++ b/src/Explorer.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import "./Editor.css";
+import "./Explorer.css";
 import { Highlight } from "./highlight";
 import { buildShadow } from "./shadow";
 import OrgAst, { OrgNodeReference } from "./OrgAst";
@@ -21,7 +21,7 @@ In the AST on the right, you can:
 [fn:2] https://code.fizz.buzz/talexander/organic
 `;
 
-function Editor({ defaultValue = default_org_source }) {
+function Explorer({ defaultValue = default_org_source }) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     setValue(event.target.value);
     clearHighlights();
@@ -78,16 +78,16 @@ function Editor({ defaultValue = default_org_source }) {
   }, []);
 
   return (
-    <div className="Editor">
-      <div className="Editor-textwrapper">
+    <div className="Explorer">
+      <div className="Explorer-textwrapper">
         <textarea
           ref={textAreaRef}
           onChange={handleChange}
-          className="Editor-textarea"
+          className="Explorer-textarea"
           value={value}
           onScroll={onTextAreaScroll}
         />
-        <div ref={shadowRef} className="Editor-underlay">
+        <div ref={shadowRef} className="Explorer-underlay">
           {buildShadow(highlights, value)}
           <br />
         </div>
@@ -102,4 +102,4 @@ function Editor({ defaultValue = default_org_source }) {
   );
 }
 
-export default Editor;
+export default Explorer;

From 33ed9c4f566dfb46fb892cc4df3eace2bd0a3770 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sun, 28 Jan 2024 17:32:27 -0500
Subject: [PATCH 2/5] Add types to Explorer props.

---
 src/Editor.tsx   | 0
 src/Explorer.tsx | 5 ++++-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 src/Editor.tsx

diff --git a/src/Editor.tsx b/src/Editor.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Explorer.tsx b/src/Explorer.tsx
index 2c7fb80..9d093a0 100644
--- a/src/Explorer.tsx
+++ b/src/Explorer.tsx
@@ -21,7 +21,10 @@ In the AST on the right, you can:
 [fn:2] https://code.fizz.buzz/talexander/organic
 `;
 
-function Explorer({ defaultValue = default_org_source }) {
+interface ExplorerProps {
+  defaultValue?: string;
+}
+function Explorer({ defaultValue = default_org_source }: ExplorerProps) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     setValue(event.target.value);
     clearHighlights();

From d158fafd774a458e397bf8c84df447daab40734a Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sun, 28 Jan 2024 17:34:38 -0500
Subject: [PATCH 3/5] Move the highlightable textarea into its own component.

---
 src/Editor.module.css      | 52 ++++++++++++++++++++++++++++++++++++
 src/Editor.module.css.d.ts |  4 +++
 src/Editor.tsx             | 54 ++++++++++++++++++++++++++++++++++++++
 src/Explorer.css           | 52 ------------------------------------
 src/Explorer.tsx           | 41 ++++++-----------------------
 src/shadow.tsx             |  7 ++---
 6 files changed, 122 insertions(+), 88 deletions(-)
 create mode 100644 src/Editor.module.css
 create mode 100644 src/Editor.module.css.d.ts

diff --git a/src/Editor.module.css b/src/Editor.module.css
new file mode 100644
index 0000000..d3075af
--- /dev/null
+++ b/src/Editor.module.css
@@ -0,0 +1,52 @@
+.EditorTextWrapper {
+  /* TODO: This flex should be in the parent */
+  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: 1.3rem;
+  text-align: initial;
+}
+
+.EditorTextArea,
+.EditorUnderlay {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  padding: 5px;
+  box-sizing: border-box;
+  margin: 0;
+  line-height: normal;
+}
+
+.EditorTextArea {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  resize: none;
+  outline: none;
+}
+
+.EditorUnderlay {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  color: transparent;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: scroll;
+
+  .EditorHighlighted {
+    background: #ffff00;
+  }
+}
diff --git a/src/Editor.module.css.d.ts b/src/Editor.module.css.d.ts
new file mode 100644
index 0000000..930d01a
--- /dev/null
+++ b/src/Editor.module.css.d.ts
@@ -0,0 +1,4 @@
+export const EditorTextWrapper: string;
+export const EditorTextArea: string;
+export const EditorUnderlay: string;
+export const EditorHighlighted: string;
diff --git a/src/Editor.tsx b/src/Editor.tsx
index e69de29..27d3816 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from "react";
+import { Highlight } from "./highlight";
+import { buildShadow } from "./shadow";
+import styles from "./Editor.module.css";
+
+interface EditorProps {
+  value: string;
+  setValue: Function;
+  highlights: Highlight[];
+  clearHighlights: Function;
+}
+function Editor({
+  value,
+  setValue,
+  highlights,
+  clearHighlights,
+}: EditorProps): React.ReactNode {
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    setValue(event.target.value);
+    clearHighlights();
+  }
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const shadowRef = useRef<HTMLDivElement>(null);
+  function onTextAreaScroll() {
+    if (shadowRef.current !== null && textAreaRef.current !== null) {
+      const textAreaScrollTop = textAreaRef.current.scrollTop;
+      shadowRef.current.scrollTop = textAreaScrollTop;
+    }
+  }
+
+  useEffect(() => {
+    // Make sure the text area and shadow div start out in sync.
+    onTextAreaScroll();
+  }, []);
+
+  return (
+    <div className={styles.EditorTextWrapper}>
+      <textarea
+        ref={textAreaRef}
+        onChange={handleChange}
+        className={styles.EditorTextArea}
+        value={value}
+        onScroll={onTextAreaScroll}
+      />
+      <div ref={shadowRef} className={styles.EditorUnderlay}>
+        {buildShadow(highlights, value)}
+        <br />
+      </div>
+    </div>
+  );
+}
+
+export default Editor;
diff --git a/src/Explorer.css b/src/Explorer.css
index 17d77f0..e63972f 100644
--- a/src/Explorer.css
+++ b/src/Explorer.css
@@ -4,55 +4,3 @@
   height: 100%;
   width: 100%;
 }
-
-.Explorer-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: 1.3rem;
-  text-align: initial;
-}
-
-.Explorer-textarea,
-.Explorer-underlay {
-  font-family: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  padding: 5px;
-  box-sizing: border-box;
-  margin: 0;
-  line-height: normal;
-}
-
-.Explorer-textarea {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border: none;
-  background-color: transparent;
-  resize: none;
-  outline: none;
-}
-
-.Explorer-underlay {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  color: transparent;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-y: scroll;
-
-  .highlighted {
-    background: #ffff00;
-  }
-}
diff --git a/src/Explorer.tsx b/src/Explorer.tsx
index 9d093a0..5518dbf 100644
--- a/src/Explorer.tsx
+++ b/src/Explorer.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import "./Explorer.css";
 import { Highlight } from "./highlight";
-import { buildShadow } from "./shadow";
 import OrgAst, { OrgNodeReference } from "./OrgAst";
 import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
+import Editor from "./Editor";
 
 const default_org_source: string = `* Welcome to the Organic Ast Explorer!
 
@@ -25,11 +25,6 @@ interface ExplorerProps {
   defaultValue?: string;
 }
 function Explorer({ defaultValue = default_org_source }: ExplorerProps) {
-  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    setValue(event.target.value);
-    clearHighlights();
-  }
-
   const [value, setValue] = useState(defaultValue);
 
   const [highlights, setHighlights] = useState<Array<Highlight>>([]);
@@ -66,35 +61,15 @@ function Explorer({ defaultValue = default_org_source }: ExplorerProps) {
     setHighlights([]);
   }
 
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const shadowRef = useRef<HTMLDivElement>(null);
-  function onTextAreaScroll() {
-    if (shadowRef.current !== null && textAreaRef.current !== null) {
-      const textAreaScrollTop = textAreaRef.current.scrollTop;
-      shadowRef.current.scrollTop = textAreaScrollTop;
-    }
-  }
-
-  useEffect(() => {
-    // Make sure the text area and shadow div start out in sync.
-    onTextAreaScroll();
-  }, []);
 
   return (
     <div className="Explorer">
-      <div className="Explorer-textwrapper">
-        <textarea
-          ref={textAreaRef}
-          onChange={handleChange}
-          className="Explorer-textarea"
-          value={value}
-          onScroll={onTextAreaScroll}
-        />
-        <div ref={shadowRef} className="Explorer-underlay">
-          {buildShadow(highlights, value)}
-          <br />
-        </div>
-      </div>
+      <Editor
+        value={value}
+        setValue={setValue}
+        highlights={highlights}
+        clearHighlights={clearHighlights}
+      />
       <OrgAst
         setHighlight={setHighlight}
         clearHighlights={clearHighlights}
diff --git a/src/shadow.tsx b/src/shadow.tsx
index a24cf5f..763d7c8 100644
--- a/src/shadow.tsx
+++ b/src/shadow.tsx
@@ -1,5 +1,6 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode } from "react";
 import { Highlight } from "./highlight";
+import styles from "./Editor.module.css";
 
 function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
   let output: ReactNode[] = [];
@@ -22,7 +23,7 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
     } else if (state == ShadowState.Highlight && !thisCharHighlighted) {
       // End the span
       output.push(
-        <span key={i} className="highlighted">
+        <span key={i} className={styles.EditorHighlighted}>
           {buffer}
         </span>,
       );
@@ -37,7 +38,7 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
       output.push(buffer);
     } else if (state == ShadowState.Highlight) {
       output.push(
-        <span key={i} className="highlighted">
+        <span key={i} className={styles.EditorHighlighted}>
           {buffer}
         </span>,
       );

From 083b0aa3762f722432f68e1bb92e654abdf1f6d8 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sun, 28 Jan 2024 18:20:22 -0500
Subject: [PATCH 4/5] Move explorer styles into local styles.

---
 src/{Explorer.css => Explorer.module.css} | 0
 src/Explorer.module.css.d.ts              | 1 +
 src/Explorer.tsx                          | 4 ++--
 3 files changed, 3 insertions(+), 2 deletions(-)
 rename src/{Explorer.css => Explorer.module.css} (100%)
 create mode 100644 src/Explorer.module.css.d.ts

diff --git a/src/Explorer.css b/src/Explorer.module.css
similarity index 100%
rename from src/Explorer.css
rename to src/Explorer.module.css
diff --git a/src/Explorer.module.css.d.ts b/src/Explorer.module.css.d.ts
new file mode 100644
index 0000000..88c9463
--- /dev/null
+++ b/src/Explorer.module.css.d.ts
@@ -0,0 +1 @@
+export const Explorer: string;
diff --git a/src/Explorer.tsx b/src/Explorer.tsx
index 5518dbf..996e557 100644
--- a/src/Explorer.tsx
+++ b/src/Explorer.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import "./Explorer.css";
+import styles from "./Explorer.module.css";
 import { Highlight } from "./highlight";
 import OrgAst, { OrgNodeReference } from "./OrgAst";
 import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
@@ -63,7 +63,7 @@ function Explorer({ defaultValue = default_org_source }: ExplorerProps) {
 
 
   return (
-    <div className="Explorer">
+    <div className={styles.Explorer}>
       <Editor
         value={value}
         setValue={setValue}

From 1cc5dd79118fe4a1fbe4d1033d0c544ea028e4f6 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sun, 28 Jan 2024 18:21:38 -0500
Subject: [PATCH 5/5] Move flexbox handling up to the explorer component.

---
 src/Editor.module.css   | 3 ---
 src/Explorer.module.css | 5 +++++
 src/OrgAst.module.css   | 1 -
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Editor.module.css b/src/Editor.module.css
index d3075af..b5aa502 100644
--- a/src/Editor.module.css
+++ b/src/Editor.module.css
@@ -1,7 +1,4 @@
 .EditorTextWrapper {
-  /* TODO: This flex should be in the parent */
-  flex: 1;
-  flex-basis: 0;
   position: relative;
   background: white;
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
diff --git a/src/Explorer.module.css b/src/Explorer.module.css
index e63972f..a858ccd 100644
--- a/src/Explorer.module.css
+++ b/src/Explorer.module.css
@@ -3,4 +3,9 @@
   flex-direction: row;
   height: 100%;
   width: 100%;
+
+  > * {
+    flex: 1;
+    flex-basis: 0;
+  }
 }
diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css
index c4c5eb9..7dc10e6 100644
--- a/src/OrgAst.module.css
+++ b/src/OrgAst.module.css
@@ -1,5 +1,4 @@
 .OrgAst {
-  flex: 1;
   background: #eeeeee;
   padding: 5px;
   overflow: auto;