Real-time edit function

src/features/editor/views/GraphView/stores/useGraph.ts

@@ -62,6 +62,7 @@ interface GraphActions {
   centerView: () => void;
   clearGraph: () => void;
   setZoomFactor: (zoomFactor: number) => void;
+  updateNode: (id: string, newData: any) => void;
 }
 
 const useGraph = create<Graph & GraphActions>((set, get) => ({
@@ -233,6 +234,22 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
   },
   toggleFullscreen: fullscreen => set({ fullscreen }),
   setViewPort: viewPort => set({ viewPort }),
+
+  // Function to update a node's data
+  updateNode: (id: string, newData: any) => {
+  const nodes = get().nodes.map(node =>
+    node.id === id
+      ? { ...node, text: newData }
+      : node
+  );
+  const currentSelectedNode = get().selectedNode;
+  const selectedNode =
+    currentSelectedNode && currentSelectedNode.id === id
+      ? { ...currentSelectedNode, text: newData }
+      : currentSelectedNode;
+
+  set({ nodes, selectedNode });
+},
 }));
 
 export default useGraph;

src/features/modals/NodeModal/index.tsx

@@ -1,22 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Text, ScrollArea } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, Button, Textarea } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import { Group } from "@mantine/core";
 
 const dataToString = (data: any) => {
-  const text = Array.isArray(data) ? Object.fromEntries(data) : data;
-  const replacer = (_: string, v: string) => {
-    if (typeof v === "string") return v.replaceAll('"', "");
-    return v;
-  };
-
-  return JSON.stringify(text, replacer, 2);
+  return JSON.stringify(data, null, 2);
 };
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
-  const nodeData = useGraph(state => dataToString(state.selectedNode?.text));
-  const path = useGraph(state => state.selectedNode?.path || "");
+  const selectedNode = useGraph(state => state.selectedNode);
+  const nodeData = dataToString(selectedNode?.text);
+  const path = selectedNode?.path || "";
+
+  const [editMode, setEditMode] = useState(false);
+  const [editedData, setEditedData] = useState(nodeData);
+
+  // Optional: update editedData when nodeData changes
+  React.useEffect(() => {
+    setEditedData(nodeData);
+  }, [nodeData]);
+
+  // You may want to implement a save function that updates the node in your store
+  const saveEdit = () => {
+  if (!selectedNode) return;
+  try {
+    const parsed = JSON.parse(editedData);
+    useGraph.getState().updateNode(selectedNode.id, parsed);
+    setEditMode(false);
+  } catch (err) {
+    alert("Invalid JSON format.");
+  }
+};
 
   return (
     <Modal title="Node Content" size="auto" opened={opened} onClose={onClose} centered>
@@ -25,9 +41,36 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
           <Text fz="xs" fw={500}>
             Content
           </Text>
-          <ScrollArea.Autosize mah={250} maw={600}>
-            <CodeHighlight code={nodeData} miw={350} maw={600} language="json" withCopyButton />
-          </ScrollArea.Autosize>
+          {editMode ? (
+            <>
+              <Textarea
+                value={editedData}
+                onChange={e => setEditedData(e.currentTarget.value)}
+                minRows={8}
+                autosize
+                maw={600}
+                miw={350}
+                styles={{ input: { fontFamily: "monospace" } }}
+              />
+              <Group gap="xs">
+  <Button size="xs" onClick={saveEdit} color="green">
+    Save
+  </Button>
+  <Button size="xs" variant="light" onClick={() => setEditMode(false)}>
+    Cancel
+  </Button>
+</Group>
+            </>
+          ) : (
+            <>
+              <ScrollArea.Autosize mah={250} maw={600}>
+                <CodeHighlight code={nodeData} miw={350} maw={600} language="json" withCopyButton />
+              </ScrollArea.Autosize>
+              <Button size="xs" mt="xs" onClick={() => setEditMode(true)}>
+                Edit
+              </Button>
+            </>
+          )}
         </Stack>
         <Text fz="xs" fw={500}>
           JSON Path
@@ -46,4 +89,4 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
       </Stack>
     </Modal>
   );
-};
+};