feat: Double-Click to Edit Flex Nodes in-place

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

@@ -5,7 +5,7 @@ import {
   type ResizeDragEvent,
   type ResizeParams,
 } from "@xyflow/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { BlockStack } from "@/components/ui/layout";
 import { Paragraph } from "@/components/ui/typography";
@@ -15,6 +15,7 @@ import { useContextPanel } from "@/providers/ContextPanelProvider";
 import { updateSubgraphSpec } from "@/utils/subgraphUtils";
 
 import { FlexNodeEditor } from "./FlexNodeEditor";
+import { InlineTextEditor } from "./InlineTextEditor";
 import { updateFlexNodeInComponentSpec } from "./interface";
 import type { FlexNodeData } from "./types";
 
@@ -26,6 +27,8 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
   const { properties, readOnly } = data;
   const { title, content, color } = properties;
 
+  const [isInlineEditing, setIsInlineEditing] = useState(false);
+
   const {
     setContent,
     clearContent,
@@ -61,6 +64,28 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
     setComponentSpec(newRootSpec);
   };
 
+  const handleSaveContent = (newContent: string) => {
+    const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
+      currentSubgraphSpec,
+      {
+        ...data,
+        properties: {
+          ...properties,
+          content: newContent,
+        },
+      },
+    );
+
+    const newRootSpec = updateSubgraphSpec(
+      componentSpec,
+      currentSubgraphPath,
+      updatedSubgraphSpec,
+    );
+
+    setComponentSpec(newRootSpec);
+    setIsInlineEditing(false);
+  };
+
   useEffect(() => {
     if (selected) {
       setContent(<FlexNodeEditor flexNode={data} readOnly={readOnly} />);
@@ -98,6 +123,7 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
             "border-2 border-dashed border-warning",
         )}
         style={{ backgroundColor: color }}
+        onDoubleClick={() => setIsInlineEditing(true)}
       >
         <div
           className={cn(
@@ -109,9 +135,18 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
             <Paragraph size="sm" weight="semibold">
               {title}
             </Paragraph>
-            <Paragraph size="xs" className="whitespace-pre-wrap">
-              {content}
-            </Paragraph>
+            {isInlineEditing ? (
+              <InlineTextEditor
+                value={content}
+                placeholder="Enter text..."
+                onSave={handleSaveContent}
+                onCancel={() => setIsInlineEditing(false)}
+              />
+            ) : (
+              <Paragraph size="xs" className="whitespace-pre-wrap">
+                {content}
+              </Paragraph>
+            )}
           </BlockStack>
         </div>
       </div>

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

@@ -0,0 +1,72 @@
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { Textarea } from "@/components/ui/textarea";
+
+interface InlineTextEditorProps {
+  value: string;
+  placeholder?: string;
+  onSave: (value: string) => void;
+  onCancel: () => void;
+}
+
+export const InlineTextEditor = ({
+  value,
+  placeholder = "Enter text...",
+  onSave,
+  onCancel,
+}: InlineTextEditorProps) => {
+  const [text, setText] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, []);
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+  };
+
+  const handleBlur = () => {
+    if (text !== value) {
+      onSave(text);
+    } else {
+      onCancel();
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setText(value);
+      onCancel();
+    } else if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      onSave(text);
+    }
+  };
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      value={text}
+      placeholder={placeholder}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      className="min-h-10 resize-none nodrag nopan focus-visible:ring-0 focus-visible:border-0 focus-visible:text-xs text-xs shadow-none p-0 rounded-none"
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    />
+  );
+};