replace contentEditable with an input sized

components/editor/main/endpoint.tsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import { Method } from "@/components/method";
 import { splitStringBracket } from "@/utils";
 import { ApiRoute } from "@/utils/type";
+import { Parameter } from "./parameter";
 
 export const Endpoint = ({
   endpoint,
@@ -32,22 +33,15 @@ export const Endpoint = ({
           <Method method={endpoint.method} />
           <div className="flex items-center justify-start gap-1">
             {path_formatted.map((p, i) => {
-              const isCustomizable = p.includes("{") && p.includes("}");
-              return (
-                <p
+              const isCustomizable = p.startsWith("{") && p.endsWith("}");
+              return isCustomizable ? (
+                <Parameter
                   key={i}
-                  className={classNames("", {
-                    "bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80":
-                      isCustomizable,
-                    "text-slate-300": !isCustomizable,
-                  })}
-                  contentEditable={isCustomizable}
-                  onBlur={(e) => {
-                    handleChange(e.currentTarget.textContent as string, i);
-                  }}
-                >
-                  {p}
-                </p>
+                  value={p}
+                  onChange={(value) => handleChange(value, i)}
+                />
+              ) : (
+                <p className="text-slate-300">{p}</p>
               );
             })}
           </div>

components/editor/main/parameter.tsx

@@ -0,0 +1,21 @@
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import { on } from "events";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+}
+export const Parameter: React.FC<Props> = ({ value, onChange }) => {
+  const [state, setState] = useState(value);
+
+  return (
+    <input
+      type="text"
+      className="bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
+      onBlur={() => onChange(state)}
+      value={state}
+      onChange={(e) => setState(e.target.value)}
+    />
+  );
+};

components/editor/main/request.tsx

@@ -16,8 +16,6 @@ export const Request = ({
     Authorization: "hf_api_key",
   });
 
-  console.log(headers);
-
   return (
     <div className="h-full bg-slate-900 px-4 xl:px-6 py-5">
       {children}