Compare commits

..

No commits in common. "acaf757ce3da75304827c4494101ae4a509291b4" and "3b3ef70d3bb22688e68adcce2b0362f687a8354e" have entirely different histories.

9 changed files with 97 additions and 136 deletions

View File

@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import Explorer from "./Explorer"; import Editor from "./Editor";
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}>
<Explorer /> <Editor />
</div> </div>
); );
} }

View File

@ -1,4 +1,13 @@
.EditorTextWrapper { .Editor {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
.Editor-textwrapper {
flex: 1;
flex-basis: 0;
position: relative; position: relative;
background: white; background: white;
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
@ -8,8 +17,8 @@
text-align: initial; text-align: initial;
} }
.EditorTextArea, .Editor-textarea,
.EditorUnderlay { .Editor-underlay {
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
font-size: inherit; font-size: inherit;
@ -19,7 +28,7 @@
line-height: normal; line-height: normal;
} }
.EditorTextArea { .Editor-textarea {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -34,7 +43,7 @@
outline: none; outline: none;
} }
.EditorUnderlay { .Editor-underlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
@ -43,7 +52,7 @@
word-wrap: break-word; word-wrap: break-word;
overflow-y: scroll; overflow-y: scroll;
.EditorHighlighted { .highlighted {
background: #ffff00; background: #ffff00;
} }
} }

View File

@ -1,4 +0,0 @@
export const EditorTextWrapper: string;
export const EditorTextArea: string;
export const EditorUnderlay: string;
export const EditorHighlighted: string;

View File

@ -1,25 +1,68 @@
import React, { useEffect, useRef } from "react"; import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
import "./Editor.css";
import { Highlight } from "./highlight"; import { Highlight } from "./highlight";
import { buildShadow } from "./shadow"; import { buildShadow } from "./shadow";
import styles from "./Editor.module.css"; import OrgAst, { OrgNodeReference } from "./OrgAst";
import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
interface EditorProps { const default_org_source: string = `* Welcome to the Organic Ast Explorer!
value: string;
setValue: Function; Type your Org [fn:1] source in this text box, and it will be parsed by Organic [fn:2] that has been compiled into wasm and embedded in this page. The resulting AST will be rendered to the right.
highlights: Highlight[];
clearHighlights: Function; In the AST on the right, you can:
}
function Editor({ 1. Click on an AST node to highlight the corresponding portion of the Org source on the left.
value, 2. Expand/Collapse the children, properties, and standard properties.
setValue,
highlights, * Footnotes
clearHighlights,
}: EditorProps): React.ReactNode { [fn:1] https://orgmode.org/
[fn:2] https://code.fizz.buzz/talexander/organic
`;
function Editor({ 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();
} }
const [value, setValue] = useState(defaultValue);
const [highlights, setHighlights] = useState<Array<Highlight>>([]);
const astTree = useMemo(() => {
const astTree = parse_org(value);
console.log(JSON.stringify(astTree));
return astTree;
}, [value]);
function setHighlight(nodes: OrgNodeReference[]) {
let new_highlights = nodes.map((node: OrgNodeReference) => {
return new Highlight(node.start - 1, node.end - 1);
});
new_highlights.sort(function (a, b) {
if (a.start < b.start) return -1;
if (a.start > b.start) return 1;
return 0;
});
setHighlights(new_highlights);
}
function addHighlight(start: number, end: number) {
let new_highlights = [...highlights, new Highlight(start, end)];
new_highlights.sort(function (a, b) {
if (a.start < b.start) return -1;
if (a.start > b.start) return 1;
return 0;
});
setHighlights(new_highlights);
}
function clearHighlights() {
setHighlights([]);
}
const textAreaRef = useRef<HTMLTextAreaElement>(null); const textAreaRef = useRef<HTMLTextAreaElement>(null);
const shadowRef = useRef<HTMLDivElement>(null); const shadowRef = useRef<HTMLDivElement>(null);
function onTextAreaScroll() { function onTextAreaScroll() {
@ -35,19 +78,27 @@ function Editor({
}, []); }, []);
return ( return (
<div className={styles.EditorTextWrapper}> <div className="Editor">
<div className="Editor-textwrapper">
<textarea <textarea
ref={textAreaRef} ref={textAreaRef}
onChange={handleChange} onChange={handleChange}
className={styles.EditorTextArea} className="Editor-textarea"
value={value} value={value}
onScroll={onTextAreaScroll} onScroll={onTextAreaScroll}
/> />
<div ref={shadowRef} className={styles.EditorUnderlay}> <div ref={shadowRef} className="Editor-underlay">
{buildShadow(highlights, value)} {buildShadow(highlights, value)}
<br /> <br />
</div> </div>
</div> </div>
<OrgAst
setHighlight={setHighlight}
clearHighlights={clearHighlights}
value={value}
astTree={astTree}
/>
</div>
); );
} }

View File

@ -1,11 +0,0 @@
.Explorer {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
> * {
flex: 1;
flex-basis: 0;
}
}

View File

@ -1 +0,0 @@
export const Explorer: string;

View File

@ -1,83 +0,0 @@
import React, { useMemo, useState } from "react";
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";
import Editor from "./Editor";
const default_org_source: string = `* Welcome to the Organic Ast Explorer!
Type your Org [fn:1] source in this text box, and it will be parsed by Organic [fn:2] that has been compiled into wasm and embedded in this page. The resulting AST will be rendered to the right.
In the AST on the right, you can:
1. Click on an AST node to highlight the corresponding portion of the Org source on the left.
2. Expand/Collapse the children, properties, and standard properties.
* Footnotes
[fn:1] https://orgmode.org/
[fn:2] https://code.fizz.buzz/talexander/organic
`;
interface ExplorerProps {
defaultValue?: string;
}
function Explorer({ defaultValue = default_org_source }: ExplorerProps) {
const [value, setValue] = useState(defaultValue);
const [highlights, setHighlights] = useState<Array<Highlight>>([]);
const astTree = useMemo(() => {
const astTree = parse_org(value);
console.log(JSON.stringify(astTree));
return astTree;
}, [value]);
function setHighlight(nodes: OrgNodeReference[]) {
let new_highlights = nodes.map((node: OrgNodeReference) => {
return new Highlight(node.start - 1, node.end - 1);
});
new_highlights.sort(function (a, b) {
if (a.start < b.start) return -1;
if (a.start > b.start) return 1;
return 0;
});
setHighlights(new_highlights);
}
function addHighlight(start: number, end: number) {
let new_highlights = [...highlights, new Highlight(start, end)];
new_highlights.sort(function (a, b) {
if (a.start < b.start) return -1;
if (a.start > b.start) return 1;
return 0;
});
setHighlights(new_highlights);
}
function clearHighlights() {
setHighlights([]);
}
return (
<div className={styles.Explorer}>
<Editor
value={value}
setValue={setValue}
highlights={highlights}
clearHighlights={clearHighlights}
/>
<OrgAst
setHighlight={setHighlight}
clearHighlights={clearHighlights}
value={value}
astTree={astTree}
/>
</div>
);
}
export default Explorer;

View File

@ -1,4 +1,5 @@
.OrgAst { .OrgAst {
flex: 1;
background: #eeeeee; background: #eeeeee;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;

View File

@ -1,6 +1,5 @@
import React, { ReactNode } from "react"; import React, { ReactNode, useState } from "react";
import { Highlight } from "./highlight"; import { Highlight } from "./highlight";
import styles from "./Editor.module.css";
function buildShadow(highlights: Highlight[], text: string): ReactNode[] { function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
let output: ReactNode[] = []; let output: ReactNode[] = [];
@ -23,7 +22,7 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
} else if (state == ShadowState.Highlight && !thisCharHighlighted) { } else if (state == ShadowState.Highlight && !thisCharHighlighted) {
// End the span // End the span
output.push( output.push(
<span key={i} className={styles.EditorHighlighted}> <span key={i} className="highlighted">
{buffer} {buffer}
</span>, </span>,
); );
@ -38,7 +37,7 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
output.push(buffer); output.push(buffer);
} else if (state == ShadowState.Highlight) { } else if (state == ShadowState.Highlight) {
output.push( output.push(
<span key={i} className={styles.EditorHighlighted}> <span key={i} className="highlighted">
{buffer} {buffer}
</span>, </span>,
); );