Import from Curl

src-web/components/RequestPane.tsx

@@ -38,6 +38,8 @@ import { GraphQLEditor } from './GraphQLEditor';
 import { HeadersEditor } from './HeadersEditor';
 import { UrlBar } from './UrlBar';
 import { UrlParametersEditor } from './UrlParameterEditor';
+import { useCurlToRequest } from '../hooks/useCurlToRequest';
+import { useConfirm } from '../hooks/useConfirm';
 
 interface Props {
   style: CSSProperties;
@@ -227,6 +229,9 @@ export const RequestPane = memo(function RequestPane({
     [updateRequest],
   );
 
+  const importCurl = useCurlToRequest();
+  const confirm = useConfirm();
+
   const isLoading = useIsResponseLoading(activeRequestId ?? null);
   const { updateKey } = useRequestUpdateKey(activeRequestId ?? null);
 
@@ -241,6 +246,22 @@ export const RequestPane = memo(function RequestPane({
             url={activeRequest.url}
             method={activeRequest.method}
             placeholder="https://example.com"
+            onPaste={async (command) => {
+              if (!command.startsWith('curl ')) {
+                return;
+              }
+              if (
+                await confirm({
+                  id: 'paste-curl',
+                  title: 'Import from Curl?',
+                  description:
+                    'Do you want to overwrite the current request with the Curl command?',
+                  confirmText: 'Overwrite',
+                })
+              ) {
+                importCurl.mutate({ requestId: activeRequestId, command });
+              }
+            }}
             onSend={handleSend}
             onCancel={handleCancel}
             onMethodChange={handleMethodChange}

src-web/components/UrlBar.tsx

@@ -14,6 +14,7 @@ type Props = Pick<HttpRequest, 'url'> & {
   placeholder: string;
   onSend: () => void;
   onUrlChange: (url: string) => void;
+  onPaste?: (v: string) => void;
   onCancel: () => void;
   submitIcon?: IconProps['icon'] | null;
   onMethodChange?: (method: string) => void;
@@ -31,6 +32,7 @@ export const UrlBar = memo(function UrlBar({
   onSend,
   onCancel,
   onMethodChange,
+  onPaste,
   submitIcon = 'sendHorizontal',
   isLoading,
 }: Props) {
@@ -66,6 +68,7 @@ export const UrlBar = memo(function UrlBar({
         forceUpdateKey={forceUpdateKey}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
+        onPaste={onPaste}
         containerClassName="shadow shadow-gray-100 dark:shadow-gray-50"
         onChange={onUrlChange}
         defaultValue={url}

src-web/components/core/Editor/Editor.tsx

@@ -44,6 +44,7 @@ export interface EditorProps {
   tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
+  onPaste?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
@@ -69,6 +70,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     defaultValue,
     forceUpdateKey,
     onChange,
+    onPaste,
     onFocus,
     onBlur,
     onKeyDown,
@@ -91,25 +93,31 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   useImperativeHandle(ref, () => cm.current?.view);
 
-  // Use ref so we can update the onChange handler without re-initializing the editor
+  // Use ref so we can update the handler without re-initializing the editor
   const handleChange = useRef<EditorProps['onChange']>(onChange);
   useEffect(() => {
     handleChange.current = onChange;
   }, [onChange]);
 
-  // Use ref so we can update the onChange handler without re-initializing the editor
+  // Use ref so we can update the handler without re-initializing the editor
+  const handlePaste = useRef<EditorProps['onPaste']>(onPaste);
+  useEffect(() => {
+    handlePaste.current = onPaste;
+  }, [onPaste]);
+
+  // Use ref so we can update the handler without re-initializing the editor
   const handleFocus = useRef<EditorProps['onFocus']>(onFocus);
   useEffect(() => {
     handleFocus.current = onFocus;
   }, [onFocus]);
 
-  // Use ref so we can update the onChange handler without re-initializing the editor
+  // Use ref so we can update the handler without re-initializing the editor
   const handleBlur = useRef<EditorProps['onBlur']>(onBlur);
   useEffect(() => {
     handleBlur.current = onBlur;
   }, [onBlur]);
 
-  // Use ref so we can update the onChange handler without re-initializing the editor
+  // Use ref so we can update the handler without re-initializing the editor
   const handleKeyDown = useRef<EditorProps['onKeyDown']>(onKeyDown);
   useEffect(() => {
     handleKeyDown.current = onKeyDown;
@@ -187,6 +195,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
               readOnly,
               singleLine,
               onChange: handleChange,
+              onPaste: handlePaste,
               onFocus: handleFocus,
               onBlur: handleBlur,
               onKeyDown: handleKeyDown,
@@ -299,12 +308,14 @@ function getExtensions({
   readOnly,
   singleLine,
   onChange,
+  onPaste,
   onFocus,
   onBlur,
   onKeyDown,
 }: Pick<EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
   onChange: MutableRefObject<EditorProps['onChange']>;
+  onPaste: MutableRefObject<EditorProps['onPaste']>;
   onFocus: MutableRefObject<EditorProps['onFocus']>;
   onBlur: MutableRefObject<EditorProps['onBlur']>;
   onKeyDown: MutableRefObject<EditorProps['onKeyDown']>;
@@ -321,6 +332,7 @@ function getExtensions({
       focus: () => onFocus.current?.(),
       blur: () => onBlur.current?.(),
       keydown: (e) => onKeyDown.current?.(e),
+      paste: (e) => onPaste.current?.(e.clipboardData?.getData('text/plain') ?? ''),
     }),
     tooltips({ parent }),
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),

src-web/components/core/Input.tsx

@@ -10,7 +10,7 @@ import { HStack } from './Stacks';
 
 export type InputProps = Omit<
   HTMLAttributes<HTMLInputElement>,
-  'onChange' | 'onFocus' | 'onKeyDown'
+  'onChange' | 'onFocus' | 'onKeyDown' | 'onPaste'
 > &
   Pick<
     EditorProps,
@@ -33,6 +33,7 @@ export type InputProps = Omit<
     onChange?: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    onPaste?: (value: string) => void;
     defaultValue?: string;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
@@ -59,6 +60,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
     onBlur,
     onChange,
     onFocus,
+    onPaste,
     placeholder,
     require,
     rightSlot,
@@ -172,6 +174,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
             forceUpdateKey={forceUpdateKey}
             placeholder={placeholder}
             onChange={handleChange}
+            onPaste={onPaste}
             className={editorClassName}
             onFocus={handleFocus}
             onBlur={handleBlur}