added edit feature

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

@@ -101,6 +101,46 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
   },
   toggleFullscreen: fullscreen => set({ fullscreen }),
   setViewPort: viewPort => set({ viewPort }),
+
+  updateNodeValue: (id, newValue) =>
+    set(state => {
+      const updatedNodes = state.nodes.map(node => {
+        if (node.id !== id) return node;
+
+        // Update only the text value
+        const newText = [...node.text];
+        if (newText[0]) newText[0].value = newValue;
+
+        return { ...node, text: newText };
+      });
+
+      return {
+        ...state,
+        nodes: updatedNodes,
+        selectedNode: updatedNodes.find(n => n.id === state.selectedNode?.id),
+      };
+    }),
+    updateNodeFields: (id, newFields) =>
+      set(state => {
+        const updatedNodes = state.nodes.map(node => {
+          if (node.id !== id) return node;
+
+          const newText = node.text.map(row => {
+            if (row.key && newFields[row.key] !== undefined) {
+              return { ...row, value: newFields[row.key] };
+            }
+            return row;
+          });
+
+          return { ...node, text: newText };
+        });
+
+        return {
+          ...state,
+          nodes: updatedNodes,
+          selectedNode: updatedNodes.find(n => n.id === state.selectedNode?.id),
+        };
+      }),
 }));
 
 export default useGraph;

src/features/modals/NodeModal/index.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Text, ScrollArea, Flex, CloseButton } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, Flex, CloseButton, Button, Textarea } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import type { NodeData } from "../../../types/graph";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
@@ -28,38 +28,86 @@ const jsonPathToString = (path?: NodeData["path"]) => {
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
   const nodeData = useGraph(state => state.selectedNode);
+  const updateNodeFields = useGraph(state => state.updateNodeFields);
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+
+  // load initial content when entering edit mode
+  const startEdit = () => {
+    setDraft(normalizeNodeData(nodeData?.text ?? []));
+    setIsEditing(true);
+  };
+
+  const handleSave = () => {
+    try {
+      const parsed = JSON.parse(draft);
+      updateNodeFields(nodeData!.id, parsed);
+      setIsEditing(false);
+    } catch (err) {
+      alert("Invalid JSON");
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
 
   return (
     <Modal size="auto" opened={opened} onClose={onClose} centered withCloseButton={false}>
       <Stack pb="sm" gap="sm">
         <Stack gap="xs">
           <Flex justify="space-between" align="center">
-            <Text fz="xs" fw={500}>
-              Content
-            </Text>
+            <Text fz="xs" fw={500}>Content</Text>
             <CloseButton onClick={onClose} />
           </Flex>
-          <ScrollArea.Autosize mah={250} maw={600}>
-            <CodeHighlight
-              code={normalizeNodeData(nodeData?.text ?? [])}
-              miw={350}
-              maw={600}
-              language="json"
-              withCopyButton
-            />
-          </ScrollArea.Autosize>
+
+          {!isEditing && (
+            <>
+              <ScrollArea.Autosize mah={250} maw={600}>
+                <CodeHighlight
+                  code={normalizeNodeData(nodeData?.text ?? [])}
+                  miw={350}
+                  maw={600}
+                  language="json"
+                  withCopyButton
+                />
+              </ScrollArea.Autosize>
+              <Button size="xs" variant="light" onClick={startEdit}>
+                Edit
+              </Button>
+            </>
+          )}
+
+          {isEditing && (
+            <>
+              <Textarea
+                value={draft}
+                onChange={e => setDraft(e.target.value)}
+                minRows={8}
+                miw={350}
+                maw={600}
+                autosize
+              />
+              <Flex gap="sm">
+                <Button size="xs" onClick={handleSave}>
+                  Save
+                </Button>
+                <Button size="xs" variant="default" onClick={handleCancel}>
+                  Cancel
+                </Button>
+              </Flex>
+            </>
+          )}
         </Stack>
-        <Text fz="xs" fw={500}>
-          JSON Path
-        </Text>
+
+        <Text fz="xs" fw={500}>JSON Path</Text>
         <ScrollArea.Autosize maw={600}>
           <CodeHighlight
             code={jsonPathToString(nodeData?.path)}
             miw={350}
             mah={250}
             language="json"
-            copyLabel="Copy to clipboard"
-            copiedLabel="Copied to clipboard"
             withCopyButton
           />
         </ScrollArea.Autosize>