refactor: fix updating issue in json editor

Author: bchapuis

apps/web/src/components/workflow/fields/geojson-field.tsx

@@ -93,9 +93,15 @@ export function GeoJSONField({
 
   const formattedValue = hasValue ? formatGeoJSON(value) : "";
 
-  // Create CodeMirror editor once on mount
+  // Determine if we should show the editor (not disabled state)
+  const shouldShowEditor = !disabled;
+
+  // Create CodeMirror editor when needed
   useEffect(() => {
-    if (!editorRef.current) return;
+    if (!editorRef.current || !shouldShowEditor) return;
+
+    // Don't recreate if editor already exists
+    if (viewRef.current) return;
 
     const view = new EditorView({
       state: EditorState.create({
@@ -197,7 +203,7 @@ export function GeoJSONField({
       view.destroy();
       viewRef.current = null;
     };
-  }, []); // Only run on mount
+  }, [shouldShowEditor, formattedValue, readonly]); // Recreate when transitioning to showing editor
 
   // Update editor content when external value changes
   useEffect(() => {

apps/web/src/components/workflow/fields/json-field.tsx

@@ -55,9 +55,15 @@ export function JsonField({
     // If not valid JSON, show as-is
   }
 
-  // Create CodeMirror editor once on mount
+  // Determine if we should show the editor (not showing placeholder)
+  const shouldShowEditor = !(disabled && !hasValue);
+
+  // Create CodeMirror editor when needed
   useEffect(() => {
-    if (!editorRef.current) return;
+    if (!editorRef.current || !shouldShowEditor) return;
+
+    // Don't recreate if editor already exists
+    if (viewRef.current) return;
 
     const view = new EditorView({
       state: EditorState.create({
@@ -158,7 +164,7 @@ export function JsonField({
       view.destroy();
       viewRef.current = null;
     };
-  }, []); // Only run on mount
+  }, [shouldShowEditor, formattedValue, readonly]); // Recreate when transitioning to showing editor
 
   // Update editor content when external value changes
   useEffect(() => {

apps/web/src/components/workflow/workflow-node-inspector.tsx

@@ -63,7 +63,7 @@ export function WorkflowNodeInspector({
     setLocalName(node.data.name);
     setLocalInputs(node.data.inputs);
     setLocalOutputs(node.data.outputs);
-  }, [node, node?.data.name, node?.data.inputs, node?.data.outputs]);
+  }, [node]);
 
   if (!node) return null;