Feature Edit JSON in Diagram View

src/components/Graph/index.tsx

@@ -15,7 +15,7 @@ import { ErrorView } from "./ErrorView";
 interface LayoutProps {
   isWidget?: boolean;
   openModal: () => void;
-  setSelectedNode: (node: [string, string][]) => void;
+  setSelectedNode: (node: NodeData) => void;
 }
 
 const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
@@ -61,7 +61,7 @@ const GraphComponent = ({
 
   const handleNodeClick = React.useCallback(
     (e: React.MouseEvent<SVGElement>, data: NodeData) => {
-      if (setSelectedNode) setSelectedNode(data.text);
+      if (setSelectedNode) setSelectedNode(data);
       if (openModal) openModal();
     },
     [openModal, setSelectedNode]

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -5,7 +5,7 @@ import useGraph from "src/hooks/store/useGraph";
 
 export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
   const [isModalVisible, setModalVisible] = React.useState(false);
-  const [selectedNode, setSelectedNode] = React.useState<[string, string][]>([]);
+  const [selectedNode, setSelectedNode] = React.useState<NodeData>({} as NodeData);
 
   const openModal = React.useCallback(() => setModalVisible(true), []);
 

src/containers/Modals/NodeModal/index.tsx

@@ -3,10 +3,16 @@ import toast from "react-hot-toast";
 import { FiCopy } from "react-icons/fi";
 import { Button } from "src/components/Button";
 import { Modal } from "src/components/Modal";
+import useGraph from "src/hooks/store/useGraph";
 import styled from "styled-components";
+import { parser } from "src/utils/jsonParser";
+import { isValidJson } from "src/utils/isValidJson";
+import { ErrorContainer } from "src/components/ErrorContainer";
+import useConfig from "src/hooks/store/useConfig";
+import { graphParser } from "src/utils/graphParser";
 
 interface NodeModalProps {
-  selectedNode: object;
+  selectedNode: NodeData;
   visible: boolean;
   closeModal: () => void;
 }
@@ -26,20 +32,46 @@ const StyledTextarea = styled.textarea`
 `;
 
 export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps) => {
-  const nodeData = Array.isArray(selectedNode)
-    ? Object.fromEntries(selectedNode)
-    : selectedNode;
+  const setGraphValue = useGraph(state => state.setGraphValue);
+  const nodes = useGraph(state => state.nodes);
+  const edges = useGraph(state => state.edges);
+  const setJson = useConfig(state => state.setJson);
+  const nodeData = Array.isArray(selectedNode.text)
+    ? Object.fromEntries(selectedNode.text)
+    : selectedNode.text;
+  const [text, setText] = React.useState(nodeData);
+  const [error, hasError] = React.useState(false);
 
   const handleClipboard = () => {
     toast.success("Content copied to clipboard!");
-    navigator.clipboard.writeText(JSON.stringify(nodeData));
+    navigator.clipboard.writeText(JSON.stringify(text));
     closeModal();
   };
+
+  const update = (newText:string) => {
+    if(isValidJson(newText)){
+      const parsedNode = parser(newText);
+      const parsedText = parsedNode?.nodes[0]?.text;
+      Array.isArray(parsedText)
+        ? setText(Object.fromEntries(parsedText))
+        : setText(parsedText);
+      const updatedNode = {...selectedNode, text: parsedText};
+      const newNodes = nodes.map((node)=> node.id===selectedNode.id ? updatedNode : node); 
+
+      setGraphValue("nodes", newNodes);  
+      hasError(false);  
+      setJson(JSON.stringify(graphParser(newNodes, edges)));
+    }
+    else {
+      hasError(true);
+    };
+  };
 
   return (
     <Modal visible={visible} setVisible={closeModal}>
       <Modal.Header>Node Content</Modal.Header>
       <Modal.Content>
+      <ErrorContainer hasError={error} />
         <StyledTextarea
           defaultValue={JSON.stringify(
             nodeData,
@@ -49,7 +81,7 @@ export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps)
             },
             2
           )}
-          readOnly
+          onChange={(e)=> update(e.target.value)}
         />
       </Modal.Content>
       <Modal.Controls setVisible={closeModal}>

src/utils/graphParser.ts

@@ -0,0 +1,44 @@
+
+const nodeToValue = (node:NodeData) => Array.isArray(node.text) ? Object.fromEntries(node.text) : node.text;
+
+const hasEdgeLeaving = (node:NodeData, edges:EdgeData[]) => edges.some((edge)=> node.id === edge.from);
+const hasChild = (node:NodeData) => !!node.data.isParent;
+
+const getChildNode = (edge: EdgeData, nodes: NodeData[]) => nodes.find((node)=> node.id === edge.to) as NodeData;
+const moveNodeToFront = (node: NodeData, nodes: NodeData[]) => [node, ...removeNode(node, nodes)];
+
+const removeNode = (node: NodeData, nodes: NodeData[]) => nodes.filter((n)=> n.id !== node.id);
+const removeEdge = (edge: EdgeData, edges: EdgeData[]) => edges.filter((e)=> e.id !== edge.id);
+
+const getEdge = (node:NodeData, edges:EdgeData[]) => edges.find((edge)=> node.id === edge.from) as EdgeData;
+
+export const graphParser = (nodes:NodeData[], edges:EdgeData[]) =>{
+  const currentNode = nodes[0];
+  if((!hasChild(currentNode) && !hasEdgeLeaving(currentNode, edges))){
+    return nodeToValue(currentNode);
+  }
+
+  const remainingNodes = removeNode(currentNode, nodes);
+
+  if(hasChild(currentNode)) {
+    const childEdges = edges.filter((edge)=> edge.from === currentNode.id);
+    const remainingEdges = edges.filter((edge)=> edge.from !== currentNode.id);
+    const key = nodeToValue(currentNode);
+    const obj = {};
+    obj[key] = childEdges.map((edge)=>{
+      const childNode = getChildNode(edge, remainingNodes);       
+      const nextNodes = moveNodeToFront(childNode, remainingNodes);  
+      return typeof nodeToValue(childNode) === 'string' 
+        ? nodeToValue(childNode)
+        : Object.assign({}, nodeToValue(childNode), graphParser(nextNodes, remainingEdges));
+    });
+    return obj;
+  }
+  const nextEdge = getEdge(currentNode, edges);
+  const remainingEdges = removeEdge(nextEdge, edges);
+  const childNode = getChildNode(nextEdge, remainingNodes);       
+  const nextNodes = moveNodeToFront(childNode, remainingNodes);  
+
+  return Object.assign({}, nodeToValue(currentNode), graphParser(nextNodes, remainingEdges));
+}
+