Add support for optional pairs.

src/OrgAst.module.css

@@ -54,7 +54,8 @@
 }
 
 .OrgAstProperties,
-.OrgAstObjectTree {
+.OrgAstObjectTree,
+.OrgAstOptionalPair {
   border: 1px solid #000000;
   margin: 5px;
 

src/OrgAst.module.css.d.ts

@@ -6,3 +6,4 @@ export const selected: string;
 export const hovered: string;
 export const OrgAstProperties: string;
 export const OrgAstObjectTree: string;
+export const OrgAstOptionalPair: string;

src/OrgAst.tsx

@@ -258,6 +258,21 @@ const OrgPropertyValue = (props: {
         />
       </div>
     );
+  } else if (is_optional_pair(props.value)) {
+    return (
+      <table className={styles.OrgAstOptionalPair}>
+        <tbody>
+          <tr>
+            <th scope="row">Optional value:</th>
+            <td>{JSON.stringify(props.value.optval)}</td>
+          </tr>
+          <tr>
+            <th scope="row">Value:</th>
+            <td>{JSON.stringify(props.value.val)}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
   } else if (is_object_tree(props.value)) {
     return (
       <OrgObjectTree
@@ -350,6 +365,10 @@ function is_list_of_ast_nodes(val: any): boolean {
   });
 }
 
+function is_optional_pair(val: any): boolean {
+  return is_object(val) && val.hasOwnProperty("optval") && val.hasOwnProperty("val");
+}
+
 function is_object_tree(val: any): boolean {
   return is_object(val) && val.hasOwnProperty("object-tree");
 }