Add edit, save, and cancel buttons to node modal

src/features/editor/views/GraphView/CustomNode/index.tsx

@@ -56,4 +56,4 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData>) => {
   );
 };
 
-export const CustomNode = React.memo(CustomNodeWrapper);
+export const CustomNode = React.memo(CustomNodeWrapper);

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, TextInput, Group } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import type { NodeData } from "../../../types/graph";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
@@ -16,6 +16,7 @@ const normalizeNodeData = (nodeRows: NodeData["text"]) => {
       if (row.key) obj[row.key] = row.value;
     }
   });
+
   return JSON.stringify(obj, null, 2);
 };
 
@@ -28,6 +29,46 @@ const jsonPathToString = (path?: NodeData["path"]) => {
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
   const nodeData = useGraph(state => state.selectedNode);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedData, setEditedData] = useState<Record<string, string>>({});
+
+  // Initialize edited data when entering edit mode
+  const handleEdit = () => {
+    const obj: Record<string, string> = {};
+    nodeData?.text?.forEach(row => {
+      if (row.type !== "array" && row.type !== "object" && row.key) {
+        obj[row.key] = row.value || "";
+      }
+    });
+    setEditedData(obj);
+    setIsEditing(true);
+  };
+
+  const handleSave = () => {
+    // Update the node data with edited values
+    if (nodeData?.text) {
+      nodeData.text.forEach(row => {
+        if (row.key && editedData[row.key] !== undefined) {
+          row.value = editedData[row.key];
+        }
+      });
+    }
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditedData({});
+    setIsEditing(false);
+  };
+
+  const handleInputChange = (key: string, value: string) => {
+    setEditedData(prev => ({ ...prev, [key]: value }));
+  };
+
+  // Get editable fields (primitive values only)
+  const editableFields = nodeData?.text?.filter(
+    row => row.type !== "array" && row.type !== "object" && row.key
+  ) || [];
 
   return (
     <Modal size="auto" opened={opened} onClose={onClose} centered withCloseButton={false}>
@@ -39,16 +80,44 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
             </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 ? (
+            <Stack gap="sm">
+              {editableFields.map((row, index) => (
+                <TextInput
+                  key={index}
+                  label={row.key}
+                  value={editedData[row.key] || ""}
+                  onChange={(e) => handleInputChange(row.key, e.target.value)}
+                />
+              ))}
+              <Group gap="sm">
+                <Button color="green" onClick={handleSave}>
+                  Save
+                </Button>
+                <Button color="red" onClick={handleCancel}>
+                  Cancel
+                </Button>
+              </Group>
+            </Stack>
+          ) : (
+            <>
+              <ScrollArea.Autosize mah={250} maw={600}>
+                <CodeHighlight
+                  code={normalizeNodeData(nodeData?.text ?? [])}
+                  miw={350}
+                  maw={600}
+                  language="json"
+                  withCopyButton
+                />
+              </ScrollArea.Autosize>
+              <Button onClick={handleEdit} fullWidth>
+                Edit
+              </Button>
+            </>
+          )}
         </Stack>
+
         <Text fz="xs" fw={500}>
           JSON Path
         </Text>
@@ -66,4 +135,4 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
       </Stack>
     </Modal>
   );
-};
+};