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

@@ -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>
   );
 }

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;

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;