Format

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -367,4 +367,4 @@
 
 .openapi-server-button {
     @apply disabled:opacity-5;
-}
+}

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -48,7 +48,11 @@ export async function OpenAPIOperation(props: {
                             {method.toUpperCase()}
                         </span>
                         <span className="openapi-url">
-                            <OpenAPIServerURL servers={servers} context={clientContext} path={path} />
+                            <OpenAPIServerURL
+                                servers={servers}
+                                context={clientContext}
+                                path={path}
+                            />
                         </span>
                     </div>
                 </div>

packages/react-openapi/src/OpenAPIServerURL.tsx

@@ -21,7 +21,7 @@ export function OpenAPIServerURL(props: {
     return (
         <ServerURLForm context={context} servers={servers} serverIndex={serverIndex}>
             {parts.map((part, i) => {
-                if (part.kind === 'text') { 
+                if (part.kind === 'text') {
                     return <span key={i}>{part.text}</span>;
                 } else {
                     if (!server.variables?.[part.name]) {
@@ -37,7 +37,8 @@ export function OpenAPIServerURL(props: {
                         />
                     );
                 }
-            })}{path}
+            })}
+            {path}
         </ServerURLForm>
     );
 }

packages/react-openapi/src/OpenAPIServerURLForm.tsx

@@ -15,14 +15,16 @@ export function ServerURLForm(props: {
     const { children, context, servers, serverIndex } = props;
     const router = useRouter();
     const [isPending, startTransition] = React.useTransition();
-    
+
     const server = servers[serverIndex];
     const formRef = React.useRef<HTMLFormElement>(null);
 
     function switchServer(index: number) {
         startTransition(() => {
             if (index !== serverIndex) {
-                let params = new URLSearchParams(`block=${context.blockKey}&server=${index ?? '0'}`);
+                let params = new URLSearchParams(
+                    `block=${context.blockKey}&server=${index ?? '0'}`,
+                );
                 router.push(`?${params}`, { scroll: false });
             }
         });
@@ -30,7 +32,9 @@ export function ServerURLForm(props: {
 
     function updateServerVariables(formData: FormData) {
         startTransition(() => {
-            let params = new URLSearchParams(`block=${context.blockKey}&server=${formData.get('server') ?? '0'}`);
+            let params = new URLSearchParams(
+                `block=${context.blockKey}&server=${formData.get('server') ?? '0'}`,
+            );
             const variableKeys = Object.keys(server.variables ?? {});
             for (const pair of formData.entries()) {
                 if (variableKeys.includes(pair[0]) && !isNaN(Number(pair[1]))) {
@@ -46,7 +50,13 @@ export function ServerURLForm(props: {
             <fieldset disabled={isPending} className="contents">
                 <input type="hidden" name="block" value={context.blockKey} />
                 {children}
-                { servers.length > 1 ? <ServerSelector servers={servers} currentIndex={serverIndex} onChange={switchServer} /> : null }
+                {servers.length > 1 ? (
+                    <ServerSelector
+                        servers={servers}
+                        currentIndex={serverIndex}
+                        onChange={switchServer}
+                    />
+                ) : null}
             </fieldset>
         </form>
     );

packages/react-openapi/src/ServerSelector.tsx

@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 
-export function ServerSelector(props: { currentIndex: number; onChange: (value:number) => void; servers: any[] }) {
+export function ServerSelector(props: {
+    currentIndex: number;
+    onChange: (value: number) => void;
+    servers: any[];
+}) {
     const { currentIndex, onChange, servers } = props;
     const [index, setIndex] = React.useState(currentIndex);
 
@@ -10,17 +14,35 @@ export function ServerSelector(props: { currentIndex: number; onChange: (value:n
         onChange(index);
     }, [index]);
 
-    return <span className="inline-flex pl-4 gap-2">
-        <input type="hidden" value={`${index}`} name="server" />
-        <button className="openapi-server-button" disabled={index === 0} onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIndex((index) => index - 1);
-        }} type="button" aria-label="Previous">◀</button>
-        <button className="openapi-server-button" disabled={index >= servers.length - 1} onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIndex((index) => index + 1);
-        }} type="button" aria-label="Next">▶</button>
-    </span>;
-}
+    return (
+        <span className="inline-flex pl-4 gap-2">
+            <input type="hidden" value={`${index}`} name="server" />
+            <button
+                className="openapi-server-button"
+                disabled={index === 0}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIndex((index) => index - 1);
+                }}
+                type="button"
+                aria-label="Previous"
+            >
+                ◀
+            </button>
+            <button
+                className="openapi-server-button"
+                disabled={index >= servers.length - 1}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIndex((index) => index + 1);
+                }}
+                type="button"
+                aria-label="Next"
+            >
+                ▶
+            </button>
+        </span>
+    );
+}

packages/react-openapi/src/types.ts

@@ -15,13 +15,13 @@ export interface OpenAPIClientContext {
      * @default false
      */
     defaultInteractiveOpened?: boolean;
-    
+
     /**
      * The key of the block
      */
     blockKey?: string;
 
-    /** 
+    /**
      * Optional id attached to the OpenAPI Operation heading and used as an anchor
      */
     id?: string;