[Enhancement] Allow whitespace in key/token/password input (#354)

* Allow whitespace in key/token/password input

* Url-encode whitespace when setting param value

* Url-encode spaces for authorization input

* Refrain from always url-encoding spaces in security schemes

* Conditionally url-encode spaces for path and query params only

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Authorization/index.tsx

@@ -50,7 +50,7 @@ function Authorization() {
                 placeholder="Bearer Token"
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  const value = e.target.value.trim();
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,
@@ -71,7 +71,7 @@ function Authorization() {
                 placeholder="Bearer Token"
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  const value = e.target.value.trim();
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,
@@ -93,7 +93,7 @@ function Authorization() {
                   placeholder="Username"
                   value={data[a.key].username ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    const value = e.target.value.trim();
+                    const value = e.target.value;
                     dispatch(
                       setAuthData({
                         scheme: a.key,
@@ -110,7 +110,7 @@ function Authorization() {
                   password
                   value={data[a.key].password ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    const value = e.target.value.trim();
+                    const value = e.target.value;
                     dispatch(
                       setAuthData({
                         scheme: a.key,
@@ -132,7 +132,7 @@ function Authorization() {
                 placeholder={`${a.key}`}
                 value={data[a.key].apiKey ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  const value = e.target.value.trim();
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ParamOptions/index.tsx

@@ -309,7 +309,15 @@ function ParamTextFormItem({ param }: ParamProps) {
     <FormTextInput
       placeholder={param.description || param.name}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-        dispatch(setParam({ ...param, value: e.target.value }))
+        dispatch(
+          setParam({
+            ...param,
+            value:
+              param.in === "path" || param.in === "query"
+                ? e.target.value.replace(/\s/g, "%20")
+                : e.target.value,
+          })
+        )
       }
     />
   );