Update OpenAPI code examples to support multiple content-type (#2843)

Author: nolannbiron

.changeset/big-lemons-wait.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Update OpenAPI code examples to support multiple content-type

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -57,11 +57,7 @@ export function OpenAPICodeSample(props: {
             data.path +
             (searchParams.size ? `?${searchParams.toString()}` : ''),
         method: data.method,
-        body: requestBodyContent
-            ? generateMediaTypeExample(requestBodyContent[1], {
-                  omitEmptyAndOptionalProperties: true,
-              })
-            : undefined,
+        body: requestBodyContent ? generateMediaTypeExample(requestBodyContent[1]) : undefined,
         headers: {
             ...getSecurityHeaders(data.securities),
             ...headersObject,

packages/react-openapi/src/OpenAPISchema.tsx

@@ -260,12 +260,7 @@ export function OpenAPISchemaPresentation(props: OpenAPISchemaPropertyEntry) {
             ) : null}
             {shouldDisplayExample(schema) ? (
                 <div className="openapi-schema-example">
-                    Example:{' '}
-                    <code>
-                        {typeof schema.example === 'string'
-                            ? schema.example
-                            : stringifyOpenAPI(schema.example)}
-                    </code>
+                    Example: <code>{formatExample(schema.example)}</code>
                 </div>
             ) : null}
             {schema.pattern ? (
@@ -434,3 +429,16 @@ function getDisclosureLabel(schema: OpenAPIV3.SchemaObject): string | undefined
 
     return schema.title;
 }
+
+function formatExample(example: any): string {
+    if (typeof example === 'string') {
+        return example
+            .replace(/\n/g, ' ') // Replace newlines with spaces
+            .replace(/\s+/g, ' ') // Collapse multiple spaces/newlines into a single space
+            .replace(/([\{\}:,])\s+/g, '$1 ') // Ensure a space after {, }, :, and ,
+            .replace(/\s+([\{\}:,])/g, ' $1') // Ensure a space before {, }, :, and ,
+            .trim();
+    }
+
+    return stringifyOpenAPI(example);
+}

packages/react-openapi/src/OpenAPITabs.tsx

@@ -74,11 +74,17 @@ export function OpenAPITabs(
             const tabFromState = syncedTabs.get(stateKey);
 
             if (!items.some((item) => item.key === tabFromState?.key)) {
-                return;
+                return setSelectedTab(defaultTab);
             }
 
             if (tabFromState && tabFromState?.key !== selectedTab?.key) {
-                setSelectedTab(tabFromState);
+                const tabFromItems = items.find((item) => item.key === tabFromState.key);
+
+                if (!tabFromItems) {
+                    return;
+                }
+
+                setSelectedTab(tabFromItems);
             }
         }
     }, [isVisible, stateKey, syncedTabs, selectedTabKey]);