Function YamlParamsEditor

yaml-flow-editor/src/components/NodeConfigPanel.tsx:53–110

({
  value,
  onChange,
  placeholder,
  label = 'Parameters (YAML)',
}: {
  value: Record<string, unknown> | undefined;
  onChange: (params: Record<string, unknown>) => void;
  placeholder?: string;
  label?: string;
})

// YAML Parameters Editor with local state for smooth editing
function YamlParamsEditor({
  value,
  onChange,
  placeholder,
  label = 'Parameters (YAML)',
}: {
  value: Record<string, unknown> | undefined;
  onChange: (params: Record<string, unknown>) => void;
  placeholder?: string;
  label?: string;
}) {
  const [localValue, setLocalValue] = useState(() => toYamlString(value));
  const [isValid, setIsValid] = useState(true);

  // Sync local state when external value changes (e.g., node selection change)
  useEffect(() => {
    setLocalValue(toYamlString(value));
    setIsValid(true);
  }, [value]);

  const handleChange = useCallback((text: string) => {
    setLocalValue(text);
    // Validate but don't save yet
    const parsed = parseYamlParams(text);
    setIsValid(parsed !== null);
  }, []);

  const handleBlur = useCallback(() => {
    // Only save when valid
    const parsed = parseYamlParams(localValue);
    if (parsed !== null) {
      onChange(parsed);
    }
  }, [localValue, onChange]);

  return (
    <div className="mb-4">
      <label className="block text-xs font-medium text-gray-600 mb-1">
        {label}
      </label>
      <textarea
        value={localValue}
        onChange={(e) => handleChange(e.target.value)}
        onBlur={handleBlur}
        placeholder={placeholder}
        className={`w-full px-3 py-2 border rounded-md text-sm font-mono resize-y min-h-[100px] focus:outline-none focus:ring-2 focus:border-transparent ${
          isValid 
            ? 'border-gray-200 focus:ring-blue-500' 
            : 'border-red-300 focus:ring-red-500 bg-red-50'
        }`}
      />
      <div className="text-xs mt-1 flex justify-between">
        <span className="text-gray-400">Enter parameters in YAML format</span>
        {!isValid && <span className="text-red-500">Invalid YAML</span>}
      </div>
    </div>
  );
}