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

Update to using createRoot.

Browse Source
This commit is contained in:
Tom Alexander 2024-01-27 14:30:15 -05:00
parent 8be7f3c290
commit 3fa5ba1546
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
3 changed files with 66 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Editor.tsx
View File

@ -58,7 +58,11 @@ function Editor({ defaultValue = default_org_source }) {
/>
<div className="Editor-underlay">{buildShadow(highlights, value)}</div>
</div>
<OrgAst setHighlight={setHighlight} clearHighlights={clearHighlights} value={value} />
<OrgAst
setHighlight={setHighlight}
clearHighlights={clearHighlights}
value={value}
/>
</div>
);
}

69
src/OrgAst.tsx
View File

@ -2,7 +2,11 @@ import React, { ReactNode, useState } from "react";
import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
import styles from "./OrgAst.module.css";
const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; value: string }) => {
const OrgAst = (props: {
setHighlight: Function;
clearHighlights: Function;
value: string;
}) => {
const ast_tree = parse_org(props.value);
console.log(JSON.stringify(ast_tree));
@ -18,25 +22,51 @@ const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; valu
} else {
return (
<div className={styles.OrgAst}>
<OrgAstNode selectNode={selectNode} node={ast_tree.content} parentUniqueId="^" selectedNode={selectedNode} />
<OrgAstNode
selectNode={selectNode}
node={ast_tree.content}
parentUniqueId="^"
selectedNode={selectedNode}
/>
</div>
);
}
};
const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: string, selectedNode: string }) => {
const uid = props.parentUniqueId + "_" + props.node["ast-node"] + "/" + props.node["standard-properties"]["begin"] + "/" + props.node["standard-properties"]["end"] + "#";
const OrgAstNode = (props: {
selectNode: Function;
node: any;
parentUniqueId: string;
selectedNode: string;
}) => {
const uid =
props.parentUniqueId +
"_" +
props.node["ast-node"] +
"/" +
props.node["standard-properties"]["begin"] +
"/" +
props.node["standard-properties"]["end"] +
"#";
function selectNode() {
props.selectNode(uid, props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1);
props.selectNode(
uid,
props.node["standard-properties"]["begin"] - 1,
props.node["standard-properties"]["end"] - 1,
);
}
const nodeClassName = props.selectedNode === uid ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode;
const nodeClassName =
props.selectedNode === uid
? styles.OrgAstNode + " " + styles.selected
: styles.OrgAstNode;
return (
<div className={nodeClassName}>
<div className={styles.OrgAstNodeType} onClick={selectNode}>{props.node["ast-node"]}</div>
<div className={styles.OrgAstNodeType} onClick={selectNode}>
{props.node["ast-node"]}
</div>
<details>
<summary>Standard Properties</summary>
<dl>
@ -56,7 +86,12 @@ const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: st
<details open={true}>
<summary>Children</summary>
<div className={styles.OrgAstChildren}>
<OrgAstNodeList selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node_list={props.node.children} />
<OrgAstNodeList
selectNode={props.selectNode}
parentUniqueId={props.parentUniqueId}
selectedNode={props.selectedNode}
node_list={props.node.children}
/>
</div>
</details>
) : null}
@ -64,9 +99,21 @@ const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: st
);
};
const OrgAstNodeList = (props: { selectNode: Function; parentUniqueId: string; selectedNode: string; node_list: any[] }): React.JSX.Element[] => {
const OrgAstNodeList = (props: {
selectNode: Function;
parentUniqueId: string;
selectedNode: string;
node_list: any[];
}): React.JSX.Element[] => {
return props.node_list.map((node) => {
return <OrgAstNode selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node={node} />;
return (
<OrgAstNode
selectNode={props.selectNode}
parentUniqueId={props.parentUniqueId}
selectedNode={props.selectedNode}
node={node}
/>
);
});
};

6
src/index.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createRoot } from "react-dom/client";
ReactDOM.render(
const root = createRoot(document.getElementById("root")!);
root.render(
<>
<App />
</>,
document.getElementById("root"),
);