Setting highlight based on clicks.

src/OrgAst.tsx

@@ -2,25 +2,39 @@ 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: { addHighlight: 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));
 
+  function deselectAll() {
+    props.clearHighlights();
+  }
+
   if (ast_tree.status !== "success") {
     return <div className={styles.OrgAst}>Error! {ast_tree.content}</div>;
   } else {
     return (
       <div className={styles.OrgAst}>
-        <OrgAstNode node={ast_tree.content} />
+        <OrgAstNode setHighlight={props.setHighlight} deselectAll={deselectAll} node={ast_tree.content} />
       </div>
     );
   }
 };
 
-const OrgAstNode = (props: { node: any }) => {
+const OrgAstNode = (props: { setHighlight: Function; deselectAll: Function; node: any }) => {
+
+  const [selected, setSelected] = useState<boolean>(false);
+
+  function selectNode() {
+    props.setHighlight(props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1);
+    setSelected(true);
+  }
+
+  const nodeClassName = selected ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode;
+
   return (
-    <div className={styles.OrgAstNode}>
-      <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
+    <div className={nodeClassName}>
+      <div className={styles.OrgAstNodeType} onClick={selectNode}>{props.node["ast-node"]}</div>
       <details>
         <summary>Standard Properties</summary>
         <dl>
@@ -40,7 +54,7 @@ const OrgAstNode = (props: { node: any }) => {
         <details open={true}>
           <summary>Children</summary>
           <div className={styles.OrgAstChildren}>
-            <OrgAstNodeList node_list={props.node.children} />
+            <OrgAstNodeList setHighlight={props.setHighlight} deselectAll={props.deselectAll} node_list={props.node.children} />
           </div>
         </details>
       ) : null}
@@ -48,9 +62,9 @@ const OrgAstNode = (props: { node: any }) => {
   );
 };
 
-const OrgAstNodeList = (props: { node_list: any[] }): React.JSX.Element[] => {
+const OrgAstNodeList = (props: { setHighlight: Function; deselectAll: Function; node_list: any[] }): React.JSX.Element[] => {
   return props.node_list.map((node) => {
-    return <OrgAstNode node={node} />;
+    return <OrgAstNode setHighlight={props.setHighlight} deselectAll={props.deselectAll} node={node} />;
   });
 };