feat: Edit Sticky Note Content

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx

@@ -1,3 +1,5 @@
+import { type ChangeEvent, useEffect, useState } from "react";
+
 import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
 import { KeyValueList } from "@/components/shared/ContextPanel/Blocks/KeyValueList";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
@@ -6,7 +8,10 @@ import { Label } from "@/components/ui/label";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Textarea } from "@/components/ui/textarea";
 import { Paragraph, Text } from "@/components/ui/typography";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { updateSubgraphSpec } from "@/utils/subgraphUtils";
 
+import { updateFlexNodeInComponentSpec } from "./interface";
 import type { FlexNodeData } from "./types";
 
 interface FlexNodeEditorProps {
@@ -26,7 +31,7 @@ export const FlexNodeEditor = ({
         Sticky Note
       </Text>
 
-      <ContentEditor properties={properties} readOnly={readOnly} />
+      <ContentEditor flexNode={flexNode} readOnly={readOnly} />
 
       <ColorEditor properties={properties} readOnly={readOnly} />
 
@@ -55,12 +60,59 @@ export const FlexNodeEditor = ({
 };
 
 const ContentEditor = ({
-  properties,
+  flexNode,
   readOnly,
 }: {
-  properties: FlexNodeData["properties"];
+  flexNode: FlexNodeData;
   readOnly: boolean;
 }) => {
+  const {
+    componentSpec,
+    currentSubgraphSpec,
+    currentSubgraphPath,
+    setComponentSpec,
+  } = useComponentSpec();
+
+  const { properties } = flexNode;
+
+  const [title, setTitle] = useState(properties.title);
+  const [content, setContent] = useState(properties.content);
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const saveChanges = () => {
+    const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
+      currentSubgraphSpec,
+      {
+        ...flexNode,
+        properties: {
+          ...properties,
+          title,
+          content,
+        },
+      },
+    );
+
+    const newRootSpec = updateSubgraphSpec(
+      componentSpec,
+      currentSubgraphPath,
+      updatedSubgraphSpec,
+    );
+
+    setComponentSpec(newRootSpec);
+  };
+
+  useEffect(() => {
+    setTitle(properties.title);
+    setContent(properties.content);
+  }, [properties]);
+
   if (readOnly) {
     return (
       <KeyValueList
@@ -72,6 +124,7 @@ const ContentEditor = ({
             copyable: true,
           },
           {
+            label: "Note",
             value: properties.content,
             copyable: true,
           },
@@ -92,9 +145,10 @@ const ContentEditor = ({
           </Label>
           <Input
             id="flex-node-title"
-            value={properties.title}
+            value={title}
+            onChange={handleTitleChange}
+            onBlur={saveChanges}
             className="text-sm"
-            readOnly
           />
         </BlockStack>
         <BlockStack>
@@ -106,9 +160,10 @@ const ContentEditor = ({
           </Label>
           <Textarea
             id="flex-node-content"
-            value={properties.content}
+            value={content}
+            onChange={handleContentChange}
+            onBlur={saveChanges}
             className="text-xs"
-            readOnly
           />
         </BlockStack>
       </BlockStack>