talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Rename Editor to Explorer.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
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>
); );
} }

12
src/Editor.css → src/Explorer.css
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;

14
src/Editor.tsx → src/Explorer.tsx
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;