diff --git a/src/Editor.tsx b/src/Editor.tsx index b8f4409..3cb65c3 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -84,7 +84,7 @@ function Editor({ defaultValue = default_org_source }) { />
{buildShadow(highlights, value)} -
+
span:first-child { + display: inline-block; + font-size: 1.3rem; + font-weight: 700; + flex: 0 0 1; + } + > span:nth-child(2) { + margin-left: 1rem; + display: inline-block; + text-overflow: ellipsis; + flex: 1 0 0; + overflow: hidden; + white-space: nowrap; + } } .OrgAstChildren { diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx index e07190a..5b18c8b 100644 --- a/src/OrgAst.tsx +++ b/src/OrgAst.tsx @@ -45,6 +45,7 @@ const OrgAst = (props: { endHoverNode={endHoverNode} node={props.astTree.content} selectedNode={selectedNode} + fullSource={props.value} /> ); @@ -64,6 +65,7 @@ const OrgAstNode = (props: { node: any; uid: string; selectedNode: OrgNodeReference | null; + fullSource: string; }) => { const [isHovered, setIsHovered] = useState(false); @@ -89,6 +91,22 @@ const OrgAstNode = (props: { setIsHovered(false); } + function unicodeAwareSlice(text: string, start: number, end: number) { + // Boooo javascript + let i = 0; + let output = ""; + for (const chr of text) { + if (i >= end) { + break; + } + if (i >= start) { + output += chr; + } + ++i; + } + return output; + } + let nodeClassName = styles.OrgAstNode; if (props.selectedNode?.uid === props.uid) { nodeClassName = nodeClassName + " " + styles.selected; @@ -97,6 +115,14 @@ const OrgAstNode = (props: { nodeClassName = nodeClassName + " " + styles.hovered; } + const selfSource = JSON.stringify( + unicodeAwareSlice( + props.fullSource, + props.node["standard-properties"].begin - 1, + props.node["standard-properties"].end - 1, + ), + ); + return (
- {props.node["ast-node"]} + {props.node["ast-node"]} + {selfSource}
Standard Properties @@ -116,6 +144,7 @@ const OrgAstNode = (props: { parentUniqueId={props.uid} selectedNode={props.selectedNode} properties={props.node["standard-properties"]} + fullSource={props.fullSource} />
{!!Object.keys(props.node.properties).length ? ( @@ -129,6 +158,7 @@ const OrgAstNode = (props: { parentUniqueId={props.uid} selectedNode={props.selectedNode} properties={props.node.properties} + fullSource={props.fullSource} /> @@ -144,6 +174,7 @@ const OrgAstNode = (props: { parentUniqueId={props.uid} selectedNode={props.selectedNode} node_list={props.node.children} + fullSource={props.fullSource} />
@@ -159,6 +190,7 @@ const OrgAstNodeList = (props: { parentUniqueId: string; selectedNode: OrgNodeReference | null; node_list: any[]; + fullSource: string; }): React.JSX.Element[] => { return props.node_list.map((node) => { const uid = @@ -179,6 +211,7 @@ const OrgAstNodeList = (props: { endHoverNode={props.endHoverNode} selectedNode={props.selectedNode} node={node} + fullSource={props.fullSource} /> ); }); @@ -191,6 +224,7 @@ const OrgPropertiesList = (props: { parentUniqueId: string; selectedNode: OrgNodeReference | null; properties: Object; + fullSource: string; }): React.JSX.Element => { const entries = Object.entries(props.properties) .sort((a, b) => { @@ -218,6 +252,7 @@ const OrgPropertiesList = (props: { parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} value={value} + fullSource={props.fullSource} /> @@ -238,6 +273,7 @@ const OrgPropertyValue = (props: { parentUniqueId: string; selectedNode: OrgNodeReference | null; value: any; + fullSource: string; }): React.ReactNode => { if ( props.value === null || @@ -255,6 +291,7 @@ const OrgPropertyValue = (props: { parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node_list={props.value} + fullSource={props.fullSource} /> ); @@ -282,6 +319,7 @@ const OrgPropertyValue = (props: { parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} value={props.value} + fullSource={props.fullSource} /> ); } else { @@ -296,6 +334,7 @@ interface OrgObjectTreeProps { parentUniqueId: string; selectedNode: OrgNodeReference | null; value: any; + fullSource: string; } function OrgObjectTree({ @@ -305,6 +344,7 @@ function OrgObjectTree({ parentUniqueId, selectedNode, value, + fullSource, }: OrgObjectTreeProps): React.ReactNode { const entries = value["object-tree"].map((entry: any) => { return ( @@ -319,6 +359,7 @@ function OrgObjectTree({ parentUniqueId={parentUniqueId} selectedNode={selectedNode} node_list={entry[0]} + fullSource={fullSource} /> @@ -332,6 +373,7 @@ function OrgObjectTree({ parentUniqueId={parentUniqueId} selectedNode={selectedNode} node_list={entry[1]} + fullSource={fullSource} /> @@ -366,7 +408,9 @@ 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"); + return ( + is_object(val) && val.hasOwnProperty("optval") && val.hasOwnProperty("val") + ); } function is_object_tree(val: any): boolean {