improve array text detection

src/components/Button/index.tsx

@@ -5,7 +5,7 @@ enum ButtonType {
   PRIMARY = "SILVER_DARK",
   SECONDARY = "BLURPLE",
   DANGER = "DANGER",
-  SUCCESS = "SEAGREEN",
+  SUCCESS = "LIGHTGREEN",
   WARNING = "ORANGE",
 }
 

src/containers/LiveEditor/CustomNode/ObjectNode.tsx

@@ -15,7 +15,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
             (val, idx) =>
               val[1] && (
                 <Styled.StyledRow key={idx} width={width}>
-                  <Styled.StyledKey>{val[0]}: </Styled.StyledKey>
+                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
                   {val[1]}
                 </Styled.StyledRow>
               )

src/containers/LiveEditor/CustomNode/TextNode.tsx

@@ -2,12 +2,17 @@ import React from "react";
 import { CustomNodeProps } from ".";
 import * as Styled from "./styles";
 
-const BondNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
+const BondNode: React.FC<CustomNodeProps<string>> = ({
+  width,
+  height,
+  value,
+  isParent = false,
+}) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       <Styled.StyledTextWrapper>
         <Styled.StyledText width={width} height={height}>
-          <Styled.StyledKey bond>{value}</Styled.StyledKey>
+          <Styled.StyledKey parent={isParent}>{value}</Styled.StyledKey>
         </Styled.StyledText>
       </Styled.StyledTextWrapper>
     </Styled.StyledForeignObject>

src/containers/LiveEditor/CustomNode/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Label, Node, Port, NodeProps } from "reaflow";
-import ArrayNode from "./ArrayNode";
-import BondNode from "./BondNode";
 import ObjectNode from "./ObjectNode";
+import TextNode from "./TextNode";
 
 export interface CustomNodeProps<T> {
   width: number;
   height: number;
   value: T;
+  isParent?: boolean;
 }
 
 const baseLabelStyle = {
@@ -33,16 +33,18 @@ export const CustomNode = (nodeProps: NodeProps) => {
         const { width, height } = nodeProps;
 
         if (data.text instanceof Object) {
-          if (Object.keys(data.text).every((val) => !isNaN(+val))) {
-            const text = Object.values(data.text).join("");
-            return <ArrayNode width={width} height={height} value={text} />;
-          }
-
           const entries = Object.entries(data.text);
           return <ObjectNode width={width} height={height} value={entries} />;
         }
 
-        return <BondNode width={width} height={height} value={data.text} />;
+        return (
+          <TextNode
+            isParent={data.data.isParent}
+            width={width}
+            height={height}
+            value={data.text}
+          />
+        );
       }}
     </Node>
   );

src/containers/LiveEditor/helpers.ts

@@ -22,6 +22,9 @@ export function getEdgeNodes(graph: any, isExpanded: boolean = true): any {
       nodes.push({
         id: el.id,
         text: el.text,
+        data: {
+          isParent: el.parent,
+        },
         width: isExpanded ? 35 + longestLine * 8 : 180,
         height: isExpanded ? 30 + lines.length * 10 : 50,
       });

src/typings/styled.d.ts

@@ -19,7 +19,7 @@ declare module "styled-components" {
     CRIMSON: string;
     DARK_SALMON: string;
     DANGER: string;
-    SEAGREEN: string;
+    LIGHTGREEN: string;
     ORANGE: string;
     SILVER: string;
     SILVER_DARK: string;

src/utils/json-editor-parser.ts

@@ -14,23 +14,31 @@ export const parser = (input: string | string[]) => {
     ) => {
       if (!os) return [];
 
-      return [os].flat().map((o) => ({
+      return [os].flat().map((o) => {
-        id: nextId(),
+        const isObject = o instanceof Object;
-        text: Object.fromEntries(
+
-          Object.entries(o).filter(
+        return {
-            ([k, v]) => !Array.isArray(v) && !(v instanceof Object)
+          id: nextId(),
-          )
+          text: !isObject
-        ),
+            ? o.toString()
-        children: Object.entries(o)
+            : Object.fromEntries(
-          .filter(([k, v]) => Array.isArray(v) || typeof v === "object")
+                Object.entries(o).filter(
-          .flatMap(([k, v]) => [
+                  ([k, v]) => !Array.isArray(v) && !(v instanceof Object)
-            {
+                )
-              id: nextId(),
+              ),
-              text: k,
+          parent: false,
-              children: extract(v, nextId),
+          children: Object.entries(o)
-            },
+            .filter(([k, v]) => Array.isArray(v) || typeof v === "object")
-          ]),
+            .flatMap(([k, v]) => [
-      }));
+              {
+                id: nextId(),
+                text: k,
+                parent: true,
+                children: extract(v, nextId),
+              },
+            ]),
+        };
+      });
     };
 
     const relationships = (xs: { id: string; children: never[] }[]) => {