Setting highlight based on clicks.

src/Editor.tsx

@@ -29,6 +29,11 @@ function Editor({ defaultValue = default_org_source }) {
 
   const [highlights, setHighlights] = useState<Array<Highlight>>([]);
 
+  function setHighlight(start: number, end: number) {
+    let new_highlights = [new Highlight(start, end)];
+    setHighlights(new_highlights);
+  }
+
   function addHighlight(start: number, end: number) {
     let new_highlights = [...highlights, new Highlight(start, end)];
     new_highlights.sort(function (a, b) {
@@ -43,10 +48,6 @@ function Editor({ defaultValue = default_org_source }) {
     setHighlights([]);
   }
 
-  if (highlights.length === 0) {
-    addHighlight(1, 5);
-  }
-
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">
@@ -57,7 +58,7 @@ function Editor({ defaultValue = default_org_source }) {
         />
         <div className="Editor-underlay">{buildShadow(highlights, value)}</div>
       </div>
-      <OrgAst addHighlight={addHighlight} value={value} />
+      <OrgAst setHighlight={setHighlight} clearHighlights={clearHighlights} value={value} />
     </div>
   );
 }

src/OrgAst.module.css

@@ -29,6 +29,12 @@
   }
 }
 
+.OrgAstNode.selected {
+  > .OrgAstNodeType {
+    background: #9cfc97;
+  }
+}
+
 .OrgAstNodeType {
   font-size: 1.3rem;
   font-weight: 700;

src/OrgAst.module.css.d.ts

@@ -2,3 +2,4 @@ export const OrgAst: string;
 export const OrgAstNode: string;
 export const OrgAstNodeType: string;
 export const OrgAstChildren: string;
+export const selected: string;

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} />;
   });
 };