Render object trees.

src/OrgAst.module.css

@@ -47,7 +47,8 @@
   background: #eeeeee;
 }
 
-.OrgAstProperties {
+.OrgAstProperties,
+.OrgAstObjectTree {
   border: 1px solid #000000;
   margin: 5px;
 
@@ -77,3 +78,19 @@
     }
   }
 }
+
+.OrgAstObjectTree {
+  > tbody {
+    border-style: dashed;
+    border-color: #000000;
+  }
+  > tbody:not(:first-child, :last-child) {
+    border-width: 3px 0;
+  }
+  > tbody:first-child:not(:only-child) {
+    border-width: 0 0 3px 0;
+  }
+  > tbody:last-child:not(:only-child) {
+    border-width: 3px 0 0 0;
+  }
+}

src/OrgAst.module.css.d.ts

@@ -4,3 +4,4 @@ export const OrgAstNodeType: string;
 export const OrgAstChildren: string;
 export const selected: string;
 export const OrgAstProperties: string;
+export const OrgAstObjectTree: string;

src/OrgAst.tsx

@@ -172,11 +172,107 @@ const OrgPropertyValue = (props: {
   selectedNode: string;
   value: any;
 }): React.ReactNode => {
-  return JSON.stringify(props.value);
+  if (
+    props.value === null ||
+    is_primitive(props.value) ||
+    (is_array(props.value) && props.value.length === 0)
+  ) {
+    return JSON.stringify(props.value);
+  } else if (is_list_of_ast_nodes(props.value)) {
+    return (
+      <div className={styles.OrgAstChildren}>
+        <OrgAstNodeList
+          selectNode={props.selectNode}
+          parentUniqueId={props.parentUniqueId}
+          selectedNode={props.selectedNode}
+          node_list={props.value}
+        />
+      </div>
+    );
+  } else if (is_object_tree(props.value)) {
+    return (
+      <OrgObjectTree
+        selectNode={props.selectNode}
+        parentUniqueId={props.parentUniqueId}
+        selectedNode={props.selectedNode}
+        value={props.value}
+      />
+    );
+  } else {
+    alert("Unhandled property value! " + JSON.stringify(props.value));
+  }
 };
 
+interface OrgObjectTreeProps {
+  selectNode: Function;
+  parentUniqueId: string;
+  selectedNode: string;
+  value: any;
+}
+
+function OrgObjectTree({
+  selectNode,
+  parentUniqueId,
+  selectedNode,
+  value,
+}: OrgObjectTreeProps): React.ReactNode {
+  const entries = value["object-tree"].map((entry: any) => {
+    return (
+      <tbody>
+        <tr>
+          <th scope="row">Optional value:</th>
+          <td>
+            <OrgAstNodeList
+              selectNode={selectNode}
+              parentUniqueId={parentUniqueId}
+              selectedNode={selectedNode}
+              node_list={entry[0]}
+            />
+          </td>
+        </tr>
+        <tr>
+          <th scope="row">Value:</th>
+          <td>
+            <OrgAstNodeList
+              selectNode={selectNode}
+              parentUniqueId={parentUniqueId}
+              selectedNode={selectedNode}
+              node_list={entry[1]}
+            />
+          </td>
+        </tr>
+      </tbody>
+    );
+  });
+  return <table className={styles.OrgAstObjectTree}>{entries}</table>;
+}
+
 function is_object(val: any): boolean {
   return val instanceof Object && !(val instanceof Array);
 }
 
+function is_array(val: any): boolean {
+  return val instanceof Array;
+}
+
+function is_primitive(val: any): boolean | null {
+  if (val === null) {
+    return null;
+  }
+  return !(val instanceof Object || val instanceof Array);
+}
+
+function is_list_of_ast_nodes(val: any): boolean {
+  if (!is_array(val)) {
+    return false;
+  }
+  return val.every((entry: any) => {
+    return is_object(entry) && entry.hasOwnProperty("ast-node");
+  });
+}
+
+function is_object_tree(val: any): boolean {
+  return is_object(val) && val.hasOwnProperty("object-tree");
+}
+
 export default OrgAst;