Add support for highlighting when hovering over a node.

src/OrgAst.tsx

@@ -8,11 +8,28 @@ const OrgAst = (props: {
   astTree: any;
   value: string;
 }) => {
-  const [selectedNode, setSelectedNode] = useState<string>("");
+  const [selectedNode, setSelectedNode] = useState<OrgNodeReference | null>(
+    null,
+  );
+  const [hoveredNode, setHoveredNode] = useState<OrgNodeReference | null>(null);
 
   function selectNode(uid: string, start: number, end: number) {
-    props.setHighlight(start, end);
-    setSelectedNode(uid);
+    const new_node: OrgNodeReference = { uid: uid, start: start, end: end };
+    props.setHighlight([new_node, hoveredNode].filter((node) => node !== null));
+    setSelectedNode({ uid: uid, start: start, end: end });
+  }
+
+  function startHoverNode(uid: string, start: number, end: number) {
+    const new_node: OrgNodeReference = { uid: uid, start: start, end: end };
+    props.setHighlight(
+      [selectedNode, new_node].filter((node) => node !== null),
+    );
+    setHoveredNode({ uid: uid, start: start, end: end });
+  }
+
+  function endHoverNode(uid: string) {
+    props.setHighlight([selectedNode].filter((node) => node !== null));
+    setHoveredNode(null);
   }
 
   if (props.astTree.status !== "success") {
@@ -24,6 +41,8 @@ const OrgAst = (props: {
           key="^"
           uid="^"
           selectNode={selectNode}
+          startHoverNode={startHoverNode}
+          endHoverNode={endHoverNode}
           node={props.astTree.content}
           selectedNode={selectedNode}
         />
@@ -32,34 +51,68 @@ const OrgAst = (props: {
   }
 };
 
+interface OrgNodeReference {
+  uid: string;
+  start: number;
+  end: number;
+}
+
 const OrgAstNode = (props: {
   selectNode: Function;
+  startHoverNode: Function;
+  endHoverNode: Function;
   node: any;
   uid: string;
-  selectedNode: string;
+  selectedNode: OrgNodeReference | null;
 }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   function selectNode() {
     props.selectNode(
       props.uid,
-      props.node["standard-properties"]["begin"] - 1,
-      props.node["standard-properties"]["end"] - 1,
+      props.node["standard-properties"]["begin"],
+      props.node["standard-properties"]["end"],
     );
   }
 
-  const nodeClassName =
-    props.selectedNode === props.uid
-      ? styles.OrgAstNode + " " + styles.selected
-      : styles.OrgAstNode;
+  function hoverNode() {
+    props.startHoverNode(
+      props.uid,
+      props.node["standard-properties"]["begin"],
+      props.node["standard-properties"]["end"],
+    );
+    setIsHovered(true);
+  }
+
+  function endHoverNode() {
+    props.endHoverNode(props.uid);
+    setIsHovered(false);
+  }
+
+  let nodeClassName = styles.OrgAstNode;
+  if (props.selectedNode?.uid === props.uid) {
+    nodeClassName = nodeClassName + " " + styles.selected;
+  }
+  if (isHovered) {
+    nodeClassName = nodeClassName + " " + styles.hovered;
+  }
 
   return (
     <div className={nodeClassName}>
-      <div className={styles.OrgAstNodeType} onClick={selectNode}>
+      <div
+        className={styles.OrgAstNodeType}
+        onClick={selectNode}
+        onMouseEnter={hoverNode}
+        onMouseLeave={endHoverNode}
+      >
         {props.node["ast-node"]}
       </div>
       <details>
         <summary>Standard Properties</summary>
         <OrgPropertiesList
           selectNode={props.selectNode}
+          startHoverNode={props.startHoverNode}
+          endHoverNode={props.endHoverNode}
           parentUniqueId={props.uid}
           selectedNode={props.selectedNode}
           properties={props.node["standard-properties"]}
@@ -71,6 +124,8 @@ const OrgAstNode = (props: {
             <summary>Properties</summary>
             <OrgPropertiesList
               selectNode={props.selectNode}
+              startHoverNode={props.startHoverNode}
+              endHoverNode={props.endHoverNode}
               parentUniqueId={props.uid}
               selectedNode={props.selectedNode}
               properties={props.node.properties}
@@ -84,6 +139,8 @@ const OrgAstNode = (props: {
           <div className={styles.OrgAstChildren}>
             <OrgAstNodeList
               selectNode={props.selectNode}
+              startHoverNode={props.startHoverNode}
+              endHoverNode={props.endHoverNode}
               parentUniqueId={props.uid}
               selectedNode={props.selectedNode}
               node_list={props.node.children}
@@ -97,8 +154,10 @@ const OrgAstNode = (props: {
 
 const OrgAstNodeList = (props: {
   selectNode: Function;
+  startHoverNode: Function;
+  endHoverNode: Function;
   parentUniqueId: string;
-  selectedNode: string;
+  selectedNode: OrgNodeReference | null;
   node_list: any[];
 }): React.JSX.Element[] => {
   return props.node_list.map((node) => {
@@ -116,6 +175,8 @@ const OrgAstNodeList = (props: {
         key={uid}
         uid={uid}
         selectNode={props.selectNode}
+        startHoverNode={props.startHoverNode}
+        endHoverNode={props.endHoverNode}
         selectedNode={props.selectedNode}
         node={node}
       />
@@ -125,8 +186,10 @@ const OrgAstNodeList = (props: {
 
 const OrgPropertiesList = (props: {
   selectNode: Function;
+  startHoverNode: Function;
+  endHoverNode: Function;
   parentUniqueId: string;
-  selectedNode: string;
+  selectedNode: OrgNodeReference | null;
   properties: Object;
 }): React.JSX.Element => {
   const entries = Object.entries(props.properties)
@@ -150,6 +213,8 @@ const OrgPropertiesList = (props: {
             <td>
               <OrgPropertyValue
                 selectNode={props.selectNode}
+                startHoverNode={props.startHoverNode}
+                endHoverNode={props.endHoverNode}
                 parentUniqueId={props.parentUniqueId}
                 selectedNode={props.selectedNode}
                 value={value}
@@ -168,8 +233,10 @@ const OrgPropertiesList = (props: {
 
 const OrgPropertyValue = (props: {
   selectNode: Function;
+  startHoverNode: Function;
+  endHoverNode: Function;
   parentUniqueId: string;
-  selectedNode: string;
+  selectedNode: OrgNodeReference | null;
   value: any;
 }): React.ReactNode => {
   if (
@@ -183,6 +250,8 @@ const OrgPropertyValue = (props: {
       <div className={styles.OrgAstChildren}>
         <OrgAstNodeList
           selectNode={props.selectNode}
+          startHoverNode={props.startHoverNode}
+          endHoverNode={props.endHoverNode}
           parentUniqueId={props.parentUniqueId}
           selectedNode={props.selectedNode}
           node_list={props.value}
@@ -193,6 +262,8 @@ const OrgPropertyValue = (props: {
     return (
       <OrgObjectTree
         selectNode={props.selectNode}
+        startHoverNode={props.startHoverNode}
+        endHoverNode={props.endHoverNode}
         parentUniqueId={props.parentUniqueId}
         selectedNode={props.selectedNode}
         value={props.value}
@@ -205,13 +276,17 @@ const OrgPropertyValue = (props: {
 
 interface OrgObjectTreeProps {
   selectNode: Function;
+  startHoverNode: Function;
+  endHoverNode: Function;
   parentUniqueId: string;
-  selectedNode: string;
+  selectedNode: OrgNodeReference | null;
   value: any;
 }
 
 function OrgObjectTree({
   selectNode,
+  startHoverNode,
+  endHoverNode,
   parentUniqueId,
   selectedNode,
   value,
@@ -224,6 +299,8 @@ function OrgObjectTree({
           <td>
             <OrgAstNodeList
               selectNode={selectNode}
+              startHoverNode={startHoverNode}
+              endHoverNode={endHoverNode}
               parentUniqueId={parentUniqueId}
               selectedNode={selectedNode}
               node_list={entry[0]}
@@ -235,6 +312,8 @@ function OrgObjectTree({
           <td>
             <OrgAstNodeList
               selectNode={selectNode}
+              startHoverNode={startHoverNode}
+              endHoverNode={endHoverNode}
               parentUniqueId={parentUniqueId}
               selectedNode={selectedNode}
               node_list={entry[1]}
@@ -275,4 +354,4 @@ function is_object_tree(val: any): boolean {
   return is_object(val) && val.hasOwnProperty("object-tree");
 }
 
-export default OrgAst;
+export { OrgAst as default, OrgNodeReference };