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.
This commit is contained in:
Tom Alexander 2024-01-28 17:28:43 -05:00
parent 3b3ef70d3b
commit a11201363e
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
3 changed files with 15 additions and 15 deletions

View File

@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import Editor from "./Editor"; import Explorer from "./Explorer";
import styles from "./App.module.css"; import styles from "./App.module.css";
import "./reset.css"; import "./reset.css";
function App({}) { function App({}) {
return ( return (
<div className={styles.App}> <div className={styles.App}>
<Editor /> <Explorer />
</div> </div>
); );
} }

View File

@ -1,11 +1,11 @@
.Editor { .Explorer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.Editor-textwrapper { .Explorer-textwrapper {
flex: 1; flex: 1;
flex-basis: 0; flex-basis: 0;
position: relative; position: relative;
@ -17,8 +17,8 @@
text-align: initial; text-align: initial;
} }
.Editor-textarea, .Explorer-textarea,
.Editor-underlay { .Explorer-underlay {
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
font-size: inherit; font-size: inherit;
@ -28,7 +28,7 @@
line-height: normal; line-height: normal;
} }
.Editor-textarea { .Explorer-textarea {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -43,7 +43,7 @@
outline: none; outline: none;
} }
.Editor-underlay { .Explorer-underlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;

View File

@ -1,5 +1,5 @@
import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react"; import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
import "./Editor.css"; import "./Explorer.css";
import { Highlight } from "./highlight"; import { Highlight } from "./highlight";
import { buildShadow } from "./shadow"; import { buildShadow } from "./shadow";
import OrgAst, { OrgNodeReference } from "./OrgAst"; 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 [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>) { function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
setValue(event.target.value); setValue(event.target.value);
clearHighlights(); clearHighlights();
@ -78,16 +78,16 @@ function Editor({ defaultValue = default_org_source }) {
}, []); }, []);
return ( return (
<div className="Editor"> <div className="Explorer">
<div className="Editor-textwrapper"> <div className="Explorer-textwrapper">
<textarea <textarea
ref={textAreaRef} ref={textAreaRef}
onChange={handleChange} onChange={handleChange}
className="Editor-textarea" className="Explorer-textarea"
value={value} value={value}
onScroll={onTextAreaScroll} onScroll={onTextAreaScroll}
/> />
<div ref={shadowRef} className="Editor-underlay"> <div ref={shadowRef} className="Explorer-underlay">
{buildShadow(highlights, value)} {buildShadow(highlights, value)}
<br /> <br />
</div> </div>
@ -102,4 +102,4 @@ function Editor({ defaultValue = default_org_source }) {
); );
} }
export default Editor; export default Explorer;