organic_ast_explorer/src/OrgAst.tsx

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 ast_tree = parse_org(props.value);
  console.log(JSON.stringify(ast_tree));

  const [selectedNode, setSelectedNode] = useState<string>("");

  function selectNode(uid: string, start: number, end: number) {
    props.setHighlight(start, end);
    setSelectedNode(uid);
  }

  if (ast_tree.status !== "success") {
    return <div className={styles.OrgAst}>Error! {ast_tree.content}</div>;
  } else {
    return (
      <div className={styles.OrgAst}>
        <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"] +
    "#";

  function selectNode() {
    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;

  return (
    <div className={nodeClassName}>
      <div className={styles.OrgAstNodeType} onClick={selectNode}>
        {props.node["ast-node"]}
      </div>
      <details>
        <summary>Standard Properties</summary>
        <dl>
          <dt>begin</dt>
          <dd>{props.node["standard-properties"]["begin"]}</dd>
          <dt>contents-begin</dt>
          <dd>{props.node["standard-properties"]["contents-begin"]}</dd>
          <dt>contents-end</dt>
          <dd>{props.node["standard-properties"]["contents-end"]}</dd>
          <dt>end</dt>
          <dd>{props.node["standard-properties"]["end"]}</dd>
          <dt>post-blank</dt>
          <dd>{props.node["standard-properties"]["post-blank"]}</dd>
        </dl>
      </details>
      {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
        <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}
            />
          </div>
        </details>
      ) : null}
    </div>
  );
};

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

export default OrgAst;