changes 4 class

src/features/modals/NodeModal/index.tsx

@@ -1,69 +1,147 @@
-import React from "react";
+import React, { useEffect, 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,
+  Textarea,
+  Button,
+  Group,
+} from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import type { NodeData } from "../../../types/graph";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import useFile from "../../../store/useFile";
 
-// return object from json removing array and object fields
 const normalizeNodeData = (nodeRows: NodeData["text"]) => {
   if (!nodeRows || nodeRows.length === 0) return "{}";
   if (nodeRows.length === 1 && !nodeRows[0].key) return `${nodeRows[0].value}`;
 
-  const obj = {};
-  nodeRows?.forEach(row => {
-    if (row.type !== "array" && row.type !== "object") {
-      if (row.key) obj[row.key] = row.value;
+  const obj: Record<string, unknown> = {};
+  nodeRows.forEach(row => {
+    if (row.type !== "array" && row.type !== "object" && row.key) {
+      obj[row.key] = row.value;
     }
   });
+
   return JSON.stringify(obj, null, 2);
 };
 
-// return json path in the format $["customer"]
 const jsonPathToString = (path?: NodeData["path"]) => {
   if (!path || path.length === 0) return "$";
-  const segments = path.map(seg => (typeof seg === "number" ? seg : `"${seg}"`));
-  return `$[${segments.join("][")}]`;
+  const segs = path.map(seg => (typeof seg === "number" ? seg : `"${seg}"`));
+  return `$[${segs.join("][")}]`;
+};
+
+const getNodeAtPath = (root: any, path: NodeData["path"]) => {
+  if (!path || path.length === 0) return root;
+  let cursor = root;
+  for (let i = 0; i < path.length; i++) {
+    cursor = cursor[path[i]];
+  }
+  return cursor;
 };
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
   const nodeData = useGraph(state => state.selectedNode);
 
+  const contents = useFile(state => state.contents);
+  const setContents = useFile(state => state.setContents);
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState("{}");
+
+  useEffect(() => {
+    if (nodeData?.text) {
+      setDraft(normalizeNodeData(nodeData.text));
+    } else {
+      setDraft("{}");
+    }
+    setIsEditing(false);
+  }, [opened, nodeData]);
+
+  const handleEdit = () => setIsEditing(true);
+
+  const handleCancel = () => {
+    if (nodeData?.text) setDraft(normalizeNodeData(nodeData.text));
+    setIsEditing(false);
+  };
+
+  const handleSave = () => {
+    if (!nodeData) return;
+
+    const fullJson = JSON.parse(contents);
+    const editedObject = JSON.parse(draft);
+
+    const target = getNodeAtPath(fullJson, nodeData.path);
+
+    Object.assign(target, editedObject);
+
+    const updated = JSON.stringify(fullJson, null, 2);
+    setContents({ contents: updated });
+
+    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}>
+                <Textarea
+                  value={draft}
+                  onChange={e => setDraft(e.currentTarget.value)}
+                  autosize
+                  minRows={4}
+                  styles={{ input: { fontFamily: "monospace" } }}
+                />
+              </ScrollArea.Autosize>
+
+              <Group justify="flex-end" mt="xs">
+                <Button size="xs" variant="default" onClick={handleCancel}>Cancel</Button>
+                <Button size="xs" onClick={handleSave}>Save</Button>
+              </Group>
+            </>
+          ) : (
+            <>
+              <ScrollArea.Autosize mah={250} maw={600}>
+                <CodeHighlight
+                  code={draft}
+                  miw={350}
+                  maw={600}
+                  language="json"
+                  withCopyButton
+                />
+              </ScrollArea.Autosize>
+
+              <Group justify="flex-end" mt="xs">
+                <Button size="xs" variant="default" onClick={handleEdit}>Edit</Button>
+              </Group>
+            </>
+          )}
         </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>
       </Stack>
     </Modal>
   );
-};
+};