diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css index 117aef1..1804590 100644 --- a/src/OrgAst.module.css +++ b/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; } } diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx index b50254c..8ee5dca 100644 --- a/src/OrgAst.tsx +++ b/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(""); @@ -58,31 +58,26 @@ const OrgAstNode = (props: {
Standard Properties -
-
begin
-
{props.node["standard-properties"]["begin"]}
-
contents-begin
-
{props.node["standard-properties"]["contents-begin"]}
-
contents-end
-
{props.node["standard-properties"]["contents-end"]}
-
end
-
{props.node["standard-properties"]["end"]}
-
post-blank
-
{props.node["standard-properties"]["post-blank"]}
-
+
{!!Object.keys(props.node.properties).length ? ( <>
Properties -
- ) : null } + ) : null} {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
Children @@ -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 ( { - const entries = Object.entries(props.properties).map(([key, value]) => { - return ( - - - {key}: - {JSON.stringify(value)} - - - ); - }); + 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 ( + + + {key}: + {JSON.stringify(value)} + + + ); + }); return ( - - {entries} - + {entries}
); };