2024-01-23 02:59:59 +00:00
|
|
|
import React, { ReactNode, useState } from "react";
|
2024-01-22 02:11:38 +00:00
|
|
|
import "./Editor.css";
|
|
|
|
import { Highlight } from "./highlight";
|
2024-01-23 02:59:59 +00:00
|
|
|
import { buildShadow } from "./shadow";
|
2024-01-24 02:27:12 +00:00
|
|
|
import OrgAst from "./OrgAst";
|
2024-01-27 19:56:12 +00:00
|
|
|
import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
|
2024-01-13 03:07:59 +00:00
|
|
|
|
2024-01-27 18:06:05 +00:00
|
|
|
const default_org_source: string = `Welcome to the Organic Wasm Demo!
|
|
|
|
|
|
|
|
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
|
|
|
|
`;
|
|
|
|
|
|
|
|
function Editor({ defaultValue = default_org_source }) {
|
2024-01-13 02:42:12 +00:00
|
|
|
function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
2024-01-13 04:15:06 +00:00
|
|
|
setValue(event.target.value);
|
2024-01-27 20:29:37 +00:00
|
|
|
clearHighlights();
|
2024-01-13 02:42:12 +00:00
|
|
|
}
|
|
|
|
|
2024-01-13 04:15:06 +00:00
|
|
|
const [value, setValue] = useState(defaultValue);
|
|
|
|
|
2024-01-21 20:51:40 +00:00
|
|
|
const [highlights, setHighlights] = useState<Array<Highlight>>([]);
|
|
|
|
|
2024-01-27 19:04:44 +00:00
|
|
|
function setHighlight(start: number, end: number) {
|
|
|
|
let new_highlights = [new Highlight(start, end)];
|
|
|
|
setHighlights(new_highlights);
|
|
|
|
}
|
|
|
|
|
2024-01-21 20:51:40 +00:00
|
|
|
function addHighlight(start: number, end: number) {
|
2024-01-23 02:59:59 +00:00
|
|
|
let new_highlights = [...highlights, new Highlight(start, end)];
|
2024-01-24 03:06:47 +00:00
|
|
|
new_highlights.sort(function (a, b) {
|
2024-01-23 02:59:59 +00:00
|
|
|
if (a.start < b.start) return -1;
|
|
|
|
if (a.start > b.start) return 1;
|
|
|
|
return 0;
|
|
|
|
});
|
|
|
|
setHighlights(new_highlights);
|
2024-01-21 20:51:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function clearHighlights() {
|
|
|
|
setHighlights([]);
|
|
|
|
}
|
|
|
|
|
2024-01-27 19:56:12 +00:00
|
|
|
const astTree = parse_org(value);
|
|
|
|
console.log(JSON.stringify(astTree));
|
|
|
|
|
2024-01-13 02:42:12 +00:00
|
|
|
return (
|
2024-01-13 03:07:59 +00:00
|
|
|
<div className="Editor">
|
2024-01-13 03:16:31 +00:00
|
|
|
<div className="Editor-textwrapper">
|
2024-01-22 02:11:38 +00:00
|
|
|
<textarea
|
|
|
|
onChange={handleChange}
|
|
|
|
className="Editor-textarea"
|
|
|
|
value={value}
|
|
|
|
/>
|
2024-01-23 02:59:59 +00:00
|
|
|
<div className="Editor-underlay">{buildShadow(highlights, value)}</div>
|
2024-01-13 03:16:31 +00:00
|
|
|
</div>
|
2024-01-27 19:30:15 +00:00
|
|
|
<OrgAst
|
|
|
|
setHighlight={setHighlight}
|
|
|
|
clearHighlights={clearHighlights}
|
|
|
|
value={value}
|
2024-01-27 19:56:12 +00:00
|
|
|
astTree={astTree}
|
2024-01-27 19:30:15 +00:00
|
|
|
/>
|
2024-01-13 03:07:59 +00:00
|
|
|
</div>
|
2024-01-13 02:42:12 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Editor;
|