Show the standard properties.

src/OrgAst.module.css

@@ -9,6 +9,17 @@
   border: 1px solid #000000;
   background: #ffffff;
   padding: 5px;
+  box-shadow: 3px 3px 4px #000000;
+
+  > details {
+    margin-top: 5px;
+
+    > summary {
+      cursor: pointer;
+      border: 1px solid #000000;
+      padding: 5px 2px;
+    }
+  }
 }
 
 .OrgAstNodeType {

src/OrgAst.tsx

@@ -19,11 +19,30 @@ const OrgAst = (props: { addHighlight: Function; value: string }) => {
 };
 
 const OrgAstNode = (props: { node: any }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
   return (
     <div className={styles.OrgAstNode}>
       <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
+      <details open={isOpen} >
+        <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 ? (
-        <>Has children</>
+        <details open={isOpen} >
+          <summary>Children</summary>
+        </details>
       ) : null}
     </div>
   );