Show the portion of the original source for the AST node in the AST tree.

src/Editor.tsx

@@ -84,7 +84,7 @@ function Editor({ defaultValue = default_org_source }) {
         />
         <div ref={shadowRef} className="Editor-underlay">
           {buildShadow(highlights, value)}
-          <br/>
+          <br />
         </div>
       </div>
       <OrgAst

src/OrgAst.module.css

@@ -42,10 +42,25 @@
 }
 
 .OrgAstNodeType {
-  font-size: 1.3rem;
-  font-weight: 700;
+  display: flex;
+  align-items: flex-end;
   background: #6ccff6;
   padding: 3px;
+
+  > 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 {

src/OrgAst.tsx

@@ -45,6 +45,7 @@ const OrgAst = (props: {
           endHoverNode={endHoverNode}
           node={props.astTree.content}
           selectedNode={selectedNode}
+          fullSource={props.value}
         />
       </div>
     );
@@ -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 (
     <div className={nodeClassName}>
       <div
@@ -104,8 +130,10 @@ const OrgAstNode = (props: {
         onClick={selectNode}
         onMouseEnter={hoverNode}
         onMouseLeave={endHoverNode}
+        title={selfSource}
       >
-        {props.node["ast-node"]}
+        <span>{props.node["ast-node"]}</span>
+        <span>{selfSource}</span>
       </div>
       <details>
         <summary>Standard Properties</summary>
@@ -116,6 +144,7 @@ const OrgAstNode = (props: {
           parentUniqueId={props.uid}
           selectedNode={props.selectedNode}
           properties={props.node["standard-properties"]}
+          fullSource={props.fullSource}
         />
       </details>
       {!!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}
             />
           </details>
         </>
@@ -144,6 +174,7 @@ const OrgAstNode = (props: {
               parentUniqueId={props.uid}
               selectedNode={props.selectedNode}
               node_list={props.node.children}
+              fullSource={props.fullSource}
             />
           </div>
         </details>
@@ -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}
               />
             </td>
           </tr>
@@ -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}
         />
       </div>
     );
@@ -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}
             />
           </td>
         </tr>
@@ -332,6 +373,7 @@ function OrgObjectTree({
               parentUniqueId={parentUniqueId}
               selectedNode={selectedNode}
               node_list={entry[1]}
+              fullSource={fullSource}
             />
           </td>
         </tr>
@@ -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 {