add node positions to element

src/containers/LiveEditor/CustomNode/ObjectNode.tsx

@@ -6,6 +6,8 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
   width,
   height,
   value,
+  x,
+  y
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
@@ -15,7 +17,14 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
             (val, idx) =>
               val[1] && (
                 <Styled.StyledRow key={idx} width={width}>
-                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
+                  <Styled.StyledKey
+                    data-x={x}
+                    data-y={y}
+                    data-key={val[1]}
+                    objectKey
+                  >
+                    {val[0]}:{" "}
+                  </Styled.StyledKey>
                   {val[1]}
                 </Styled.StyledRow>
               )

src/containers/LiveEditor/CustomNode/TextNode.tsx

@@ -7,12 +7,14 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   height,
   value,
   isParent = false,
+  x,
+  y
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <Styled.StyledTextWrapper>
         <Styled.StyledText width={width} height={height}>
-          <Styled.StyledKey parent={isParent}>{value}</Styled.StyledKey>
+          <Styled.StyledKey data-x={x} data-y={y} data-key={value} parent={isParent}>{value}</Styled.StyledKey>
         </Styled.StyledText>
       </Styled.StyledTextWrapper>
     </Styled.StyledForeignObject>

src/containers/LiveEditor/CustomNode/index.tsx

@@ -8,6 +8,8 @@ export interface CustomNodeProps<T> {
   height: number;
   value: T;
   isParent?: boolean;
+  x: number;
+  y: number;
 }
 
 const baseLabelStyle = {
@@ -34,7 +36,15 @@ export const CustomNode = (nodeProps: NodeProps) => {
 
         if (data.text instanceof Object) {
           const entries = Object.entries(data.text);
-          return <ObjectNode width={width} height={height} value={entries} />;
+          return (
+            <ObjectNode
+              x={nodeProps.x}
+              y={nodeProps.y}
+              width={width}
+              height={height}
+              value={entries}
+            />
+          );
         }
 
         return (
@@ -43,6 +53,8 @@ export const CustomNode = (nodeProps: NodeProps) => {
             width={width}
             height={height}
             value={data.text}
+            x={nodeProps.x}
+            y={nodeProps.y}
           />
         );
       }}