diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css index 1804590..8a406d9 100644 --- a/src/OrgAst.module.css +++ b/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; + } +} diff --git a/src/OrgAst.module.css.d.ts b/src/OrgAst.module.css.d.ts index e0a2eaa..f0a7a83 100644 --- a/src/OrgAst.module.css.d.ts +++ b/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; diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx index a6b4f2e..91d67a5 100644 --- a/src/OrgAst.tsx +++ b/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 ( +