Fix line breaks in property list keys.

src/OrgAst.module.css

@@ -48,7 +48,8 @@
 }
 
 .OrgAstProperties {
-  width: 100%;
+  border: 1px solid #000000;
+  margin: 5px;
 
   > tbody {
     > tr {
@@ -65,7 +66,6 @@
         font-weight: 700;
         text-align: right;
         padding-right: 5px;
-        width: 0;
       }
     }
 

src/OrgAst.tsx

@@ -1,11 +1,11 @@
 import React, { ReactNode, useState } from "react";
 import styles from "./OrgAst.module.css";
-import { Fragment } from 'react';
+import { Fragment } from "react";
 
 const OrgAst = (props: {
   setHighlight: Function;
   clearHighlights: Function;
-  astTree: any,
+  astTree: any;
   value: string;
 }) => {
   const [selectedNode, setSelectedNode] = useState<string>("");
@@ -58,31 +58,26 @@ const OrgAstNode = (props: {
       </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>
+        <OrgPropertiesList
+          selectNode={props.selectNode}
+          parentUniqueId={props.uid}
+          selectedNode={props.selectedNode}
+          properties={props.node["standard-properties"]}
+        />
       </details>
       {!!Object.keys(props.node.properties).length ? (
         <>
           <details>
             <summary>Properties</summary>
-            <OrgPropertiesList selectNode={props.selectNode}
+            <OrgPropertiesList
+              selectNode={props.selectNode}
               parentUniqueId={props.uid}
               selectedNode={props.selectedNode}
               properties={props.node.properties}
             />
           </details>
         </>
-      ) : null }
+      ) : null}
       {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
         <details open={true}>
           <summary>Children</summary>
@@ -107,15 +102,15 @@ const OrgAstNodeList = (props: {
   node_list: any[];
 }): React.JSX.Element[] => {
   return props.node_list.map((node) => {
-  const uid =
-    props.parentUniqueId +
-    "_" +
-    node["ast-node"] +
-    "/" +
-    node["standard-properties"]["begin"] +
-    "/" +
-    node["standard-properties"]["end"] +
-    "#";
+    const uid =
+      props.parentUniqueId +
+      "_" +
+      node["ast-node"] +
+      "/" +
+      node["standard-properties"]["begin"] +
+      "/" +
+      node["standard-properties"]["end"] +
+      "#";
     return (
       <OrgAstNode
         key={uid}
@@ -134,21 +129,29 @@ const OrgPropertiesList = (props: {
   selectedNode: string;
   properties: Object;
 }): React.JSX.Element => {
-  const entries = Object.entries(props.properties).map(([key, value]) => {
-    return (
-      <Fragment key={key}>
-        <tr>
-          <th scope="row">{key}:</th>
-          <td>{JSON.stringify(value)}</td>
-        </tr>
-      </Fragment>
-    );
-  });
+  const entries = Object.entries(props.properties)
+    .sort((a, b) => {
+      if (a[0] < b[0]) {
+        return -1;
+      } else if (a[0] > b[0]) {
+        return 1;
+      } else {
+        return 0;
+      }
+    })
+    .map(([key, value]) => {
+      return (
+        <Fragment key={key}>
+          <tr>
+            <th scope="row">{key}:</th>
+            <td>{JSON.stringify(value)}</td>
+          </tr>
+        </Fragment>
+      );
+    });
   return (
     <table className={styles.OrgAstProperties}>
-      <tbody>
-        {entries}
-      </tbody>
+      <tbody>{entries}</tbody>
     </table>
   );
 };