docusaurus-theme-openapi-docs 4.5.1 → 4.7.0

package/lib/theme/ApiExplorer/Body/index.js

@@ -5,29 +5,86 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
 var __importDefault =
   (this && this.__importDefault) ||
   function (mod) {
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const Translate_1 = require("@docusaurus/Translate");
 const json2xml_1 = __importDefault(require("@theme/ApiExplorer/Body/json2xml"));
 const FormFileUpload_1 = __importDefault(
   require("@theme/ApiExplorer/FormFileUpload")
 );
 const FormItem_1 = __importDefault(require("@theme/ApiExplorer/FormItem"));
-const FormSelect_1 = __importDefault(require("@theme/ApiExplorer/FormSelect"));
-const FormTextInput_1 = __importDefault(
-  require("@theme/ApiExplorer/FormTextInput")
-);
 const LiveEditor_1 = __importDefault(require("@theme/ApiExplorer/LiveEditor"));
 const hooks_1 = require("@theme/ApiItem/hooks");
 const Markdown_1 = __importDefault(require("@theme/Markdown"));
 const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
+const translationIds_1 = require("@theme/translationIds");
+const createSchemaExample_1 = require("docusaurus-plugin-openapi-docs/src/openapi/createSchemaExample");
 const xml_formatter_1 = __importDefault(require("xml-formatter"));
 const slice_1 = require("./slice");
+const FormBodyItem_1 = __importDefault(require("./FormBodyItem"));
+const resolveSchemaWithSelections_1 = require("./resolveSchemaWithSelections");
 function BodyWrap({
   requestBodyMetadata,
   jsonRequestBodyExample,
@@ -58,6 +115,9 @@ function Body({
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
   );
+  const schemaSelections = (0, hooks_1.useTypedSelector)(
+    (state) => state.schemaSelection?.selections ?? {}
+  );
   const dispatch = (0, hooks_1.useTypedDispatch)();
   // Lot's of possible content-types:
   // - application/json
@@ -77,15 +137,211 @@ function Body({
   // Show form:
   // - multipart/form-data
   // - application/x-www-form-urlencoded
-  const schema = requestBodyMetadata?.content?.[contentType]?.schema;
+  const rawSchema = requestBodyMetadata?.content?.[contentType]?.schema;
   const example = requestBodyMetadata?.content?.[contentType]?.example;
   const examples = requestBodyMetadata?.content?.[contentType]?.examples;
+  // Resolve the schema based on user's anyOf/oneOf tab selections
+  const schema = (0, react_1.useMemo)(() => {
+    if (!rawSchema) return rawSchema;
+    return (0, resolveSchemaWithSelections_1.resolveSchemaWithSelections)(
+      rawSchema,
+      schemaSelections,
+      "requestBody"
+    );
+  }, [rawSchema, schemaSelections]);
+  // OpenAPI 3.1 / JSON Schema: schema.examples is an array of example values
+  const schemaExamples = schema?.examples;
+  // Compute the default body based on content type and schema
+  // This needs to be computed before early returns so the useEffect can use it
+  const { defaultBody, exampleBody, examplesBodies, language } = (0,
+  react_1.useMemo)(() => {
+    let lang = "plaintext";
+    let defBody = "";
+    let exBody;
+    let exBodies = [];
+    // Skip body generation for binary and form content types
+    if (schema?.format === "binary") {
+      return {
+        defaultBody: defBody,
+        exampleBody: exBody,
+        examplesBodies: exBodies,
+        language: lang,
+      };
+    }
+    if (
+      (contentType === "multipart/form-data" ||
+        contentType === "application/x-www-form-urlencoded") &&
+      schema?.type === "object"
+    ) {
+      return {
+        defaultBody: defBody,
+        exampleBody: exBody,
+        examplesBodies: exBodies,
+        language: lang,
+      };
+    }
+    // Generate example from the schema for the current content type
+    let contentTypeExample;
+    if (schema) {
+      contentTypeExample = (0, createSchemaExample_1.sampleFromSchema)(schema, {
+        type: "request",
+      });
+    } else if (jsonRequestBodyExample) {
+      // Fallback to the build-time generated example if no schema is available
+      contentTypeExample = jsonRequestBodyExample;
+    }
+    if (
+      contentType?.includes("application/json") ||
+      contentType?.endsWith("+json")
+    ) {
+      if (contentTypeExample) {
+        defBody = JSON.stringify(contentTypeExample, null, 2);
+      }
+      if (example) {
+        exBody = JSON.stringify(example, null, 2);
+      }
+      if (examples) {
+        for (const [key, ex] of Object.entries(examples)) {
+          let body = ex.value;
+          try {
+            // If the value is already valid JSON we shouldn't double encode the value
+            JSON.parse(ex.value);
+          } catch (e) {
+            body = JSON.stringify(ex.value, null, 2);
+          }
+          exBodies.push({
+            label: key,
+            body,
+            summary: ex.summary,
+          });
+        }
+      }
+      // OpenAPI 3.1: schema.examples is an array of example values
+      if (schemaExamples && Array.isArray(schemaExamples)) {
+        schemaExamples.forEach((schemaExample, index) => {
+          const body = JSON.stringify(schemaExample, null, 2);
+          exBodies.push({
+            label: `Example ${index + 1}`,
+            body,
+            summary: undefined,
+          });
+        });
+      }
+      lang = "json";
+    }
+    if (contentType === "application/xml" || contentType?.endsWith("+xml")) {
+      if (contentTypeExample) {
+        try {
+          defBody = (0, xml_formatter_1.default)(
+            (0, json2xml_1.default)(contentTypeExample, ""),
+            {
+              indentation: "  ",
+              lineSeparator: "\n",
+              collapseContent: true,
+            }
+          );
+        } catch {
+          defBody = (0, json2xml_1.default)(contentTypeExample);
+        }
+      }
+      if (example) {
+        try {
+          exBody = (0, xml_formatter_1.default)(
+            (0, json2xml_1.default)(example, ""),
+            {
+              indentation: "  ",
+              lineSeparator: "\n",
+              collapseContent: true,
+            }
+          );
+        } catch {
+          exBody = (0, json2xml_1.default)(example);
+        }
+      }
+      if (examples) {
+        for (const [key, ex] of Object.entries(examples)) {
+          let formattedXmlBody;
+          try {
+            formattedXmlBody = (0, xml_formatter_1.default)(ex.value, {
+              indentation: "  ",
+              lineSeparator: "\n",
+              collapseContent: true,
+            });
+          } catch {
+            formattedXmlBody = ex.value;
+          }
+          exBodies.push({
+            label: key,
+            body: formattedXmlBody,
+            summary: ex.summary,
+          });
+        }
+      }
+      // OpenAPI 3.1: schema.examples is an array of example values
+      if (schemaExamples && Array.isArray(schemaExamples)) {
+        schemaExamples.forEach((schemaExample, index) => {
+          let formattedXmlBody;
+          try {
+            formattedXmlBody = (0, xml_formatter_1.default)(
+              (0, json2xml_1.default)(schemaExample, ""),
+              {
+                indentation: "  ",
+                lineSeparator: "\n",
+                collapseContent: true,
+              }
+            );
+          } catch {
+            formattedXmlBody = (0, json2xml_1.default)(schemaExample);
+          }
+          exBodies.push({
+            label: `Example ${index + 1}`,
+            body: formattedXmlBody,
+            summary: undefined,
+          });
+        });
+      }
+      lang = "xml";
+    }
+    return {
+      defaultBody: defBody,
+      exampleBody: exBody,
+      examplesBodies: exBodies,
+      language: lang,
+    };
+  }, [
+    schema,
+    contentType,
+    example,
+    examples,
+    schemaExamples,
+    jsonRequestBodyExample,
+  ]);
+  // Create a stable key for the LiveApp component that changes when schema selection changes
+  // This forces the editor to remount and pick up the new defaultBody
+  const schemaSelectionKey = (0, react_1.useMemo)(
+    () => JSON.stringify(schemaSelections),
+    [schemaSelections]
+  );
+  // Update body in Redux when content type or schema selection changes
+  (0, react_1.useEffect)(() => {
+    if (defaultBody) {
+      dispatch((0, slice_1.setStringRawBody)(defaultBody));
+    }
+    // Re-run when contentType, schemaSelections, or defaultBody change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentType, schemaSelections, defaultBody]);
+  // Now handle early returns after all hooks have been called
   if (schema?.format === "binary") {
     return react_1.default.createElement(
       FormItem_1.default,
       null,
       react_1.default.createElement(FormFileUpload_1.default, {
-        placeholder: schema.description || "Body",
+        placeholder:
+          schema.description ||
+          (0, Translate_1.translate)({
+            id: translationIds_1.OPENAPI_REQUEST.BODY_TITLE,
+            message: "Body",
+          }),
         onChange: (file) => {
           if (file === undefined) {
             dispatch((0, slice_1.clearRawBody)());
@@ -109,177 +365,23 @@ function Body({
     return react_1.default.createElement(
       FormItem_1.default,
       { className: "openapi-explorer__form-item-body-container" },
-      react_1.default.createElement(
-        "div",
-        null,
-        Object.entries(schema.properties ?? {}).map(([key, val]) => {
-          if (val.format === "binary") {
-            return react_1.default.createElement(
-              FormItem_1.default,
-              {
-                key: key,
-                label: key,
-                required:
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key),
-              },
-              react_1.default.createElement(FormFileUpload_1.default, {
-                placeholder: val.description || key,
-                onChange: (file) => {
-                  if (file === undefined) {
-                    dispatch((0, slice_1.clearFormBodyKey)(key));
-                    return;
-                  }
-                  dispatch(
-                    (0, slice_1.setFileFormBody)({
-                      key: key,
-                      value: {
-                        src: `/path/to/${file.name}`,
-                        content: file,
-                      },
-                    })
-                  );
-                },
-              })
-            );
-          }
-          if (val.enum) {
-            return react_1.default.createElement(
-              FormItem_1.default,
-              {
-                key: key,
-                label: key,
-                required:
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key),
-              },
-              react_1.default.createElement(FormSelect_1.default, {
-                options: ["---", ...val.enum],
-                onChange: (e) => {
-                  const val = e.target.value;
-                  if (val === "---") {
-                    dispatch((0, slice_1.clearFormBodyKey)(key));
-                  } else {
-                    dispatch(
-                      (0, slice_1.setStringFormBody)({
-                        key: key,
-                        value: val,
-                      })
-                    );
-                  }
-                },
-              })
-            );
-          }
-          // TODO: support all the other types.
-          return react_1.default.createElement(
-            FormItem_1.default,
-            {
-              key: key,
-              label: key,
-              required:
-                Array.isArray(schema.required) && schema.required.includes(key),
-            },
-            react_1.default.createElement(FormTextInput_1.default, {
-              paramName: key,
-              isRequired:
-                Array.isArray(schema.required) && schema.required.includes(key),
-              placeholder: val.description || key,
-              onChange: (e) => {
-                dispatch(
-                  (0, slice_1.setStringFormBody)({
-                    key: key,
-                    value: e.target.value,
-                  })
-                );
-              },
-            })
-          );
-        })
-      )
-    );
-  }
-  let language = "plaintext";
-  let defaultBody = ""; //"body content";
-  let exampleBody;
-  let examplesBodies = [];
-  if (
-    contentType.includes("application/json") ||
-    contentType.endsWith("+json")
-  ) {
-    if (jsonRequestBodyExample) {
-      defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
-    }
-    if (example) {
-      exampleBody = JSON.stringify(example, null, 2);
-    }
-    if (examples) {
-      for (const [key, example] of Object.entries(examples)) {
-        let body = example.value;
-        try {
-          // If the value is already valid JSON we shouldn't double encode the value
-          JSON.parse(example.value);
-        } catch (e) {
-          body = JSON.stringify(example.value, null, 2);
-        }
-        examplesBodies.push({
-          label: key,
-          body,
-          summary: example.summary,
-        });
-      }
-    }
-    language = "json";
-  }
-  if (contentType === "application/xml" || contentType.endsWith("+xml")) {
-    if (jsonRequestBodyExample) {
-      try {
-        defaultBody = (0, xml_formatter_1.default)(
-          (0, json2xml_1.default)(jsonRequestBodyExample, ""),
+      Object.entries(schema.properties ?? {}).map(([key, val]) => {
+        return react_1.default.createElement(
+          FormItem_1.default,
           {
-            indentation: "  ",
-            lineSeparator: "\n",
-            collapseContent: true,
-          }
-        );
-      } catch {
-        defaultBody = (0, json2xml_1.default)(jsonRequestBodyExample);
-      }
-    }
-    if (example) {
-      try {
-        exampleBody = (0, xml_formatter_1.default)(
-          (0, json2xml_1.default)(example, ""),
-          {
-            indentation: "  ",
-            lineSeparator: "\n",
-            collapseContent: true,
-          }
+            key: key,
+            label: key,
+            required:
+              Array.isArray(schema.required) && schema.required.includes(key),
+          },
+          react_1.default.createElement(FormBodyItem_1.default, {
+            schemaObject: val,
+            id: key,
+            schema: schema,
+          })
         );
-      } catch {
-        exampleBody = (0, json2xml_1.default)(example);
-      }
-    }
-    if (examples) {
-      for (const [key, example] of Object.entries(examples)) {
-        let formattedXmlBody;
-        try {
-          formattedXmlBody = (0, xml_formatter_1.default)(example.value, {
-            indentation: "  ",
-            lineSeparator: "\n",
-            collapseContent: true,
-          });
-        } catch {
-          formattedXmlBody = example.value;
-        }
-        examplesBodies.push({
-          label: key,
-          body: formattedXmlBody,
-          summary: example.summary,
-        });
-      }
-    }
-    language = "xml";
+      })
+    );
   }
   if (exampleBody) {
     return react_1.default.createElement(
@@ -291,13 +393,21 @@ function Body({
         react_1.default.createElement(
           TabItem_1.default,
           {
-            label: "Example (from schema)",
+            label: (0, Translate_1.translate)({
+              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              message: "Example (from schema)",
+            }),
             value: "Example (from schema)",
             default: true,
           },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language, required: required },
+            {
+              key: `${contentType}-${schemaSelectionKey}`,
+              action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
+              language: language,
+              required: required,
+            },
             defaultBody
           )
         ),
@@ -313,7 +423,12 @@ function Body({
           exampleBody &&
             react_1.default.createElement(
               LiveEditor_1.default,
-              { action: dispatch, language: language, required: required },
+              {
+                key: `${contentType}-example`,
+                action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
+                language: language,
+                required: required,
+              },
               exampleBody
             )
         )
@@ -330,37 +445,46 @@ function Body({
         react_1.default.createElement(
           TabItem_1.default,
           {
-            label: "Example (from schema)",
+            label: (0, Translate_1.translate)({
+              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              message: "Example (from schema)",
+            }),
             value: "Example (from schema)",
             default: true,
           },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language, required: required },
+            {
+              key: `${contentType}-${schemaSelectionKey}`,
+              action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
+              language: language,
+              required: required,
+            },
             defaultBody
           )
         ),
-        examplesBodies.map((example) => {
+        examplesBodies.map((ex) => {
           return (
             // @ts-ignore
             react_1.default.createElement(
               TabItem_1.default,
-              {
-                label: example.label,
-                value: example.label,
-                key: example.label,
-              },
-              example.summary &&
+              { label: ex.label, value: ex.label, key: ex.label },
+              ex.summary &&
                 react_1.default.createElement(
                   Markdown_1.default,
                   null,
-                  example.summary
+                  ex.summary
                 ),
-              example.body &&
+              ex.body &&
                 react_1.default.createElement(
                   LiveEditor_1.default,
-                  { action: dispatch, language: language },
-                  example.body
+                  {
+                    key: `${contentType}-${ex.label}`,
+                    action: (code) =>
+                      dispatch((0, slice_1.setStringRawBody)(code)),
+                    language: language,
+                  },
+                  ex.body
                 )
             )
           );
@@ -373,7 +497,12 @@ function Body({
     null,
     react_1.default.createElement(
       LiveEditor_1.default,
-      { action: dispatch, language: language, required: required },
+      {
+        key: `${contentType}-${schemaSelectionKey}`,
+        action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
+        language: language,
+        required: required,
+      },
       defaultBody
     )
   );

package/lib/theme/ApiExplorer/Body/resolveSchemaWithSelections.d.ts

@@ -0,0 +1,13 @@
+import { SchemaObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+export interface SchemaSelections {
+    [schemaPath: string]: number;
+}
+/**
+ * Resolves a schema by replacing anyOf/oneOf with the selected option based on user selections.
+ *
+ * @param schema - The original schema object
+ * @param selections - Map of schema paths to selected indices
+ * @param basePath - The base path for this schema (used for looking up selections)
+ * @returns A new schema with anyOf/oneOf resolved to selected options
+ */
+export declare function resolveSchemaWithSelections(schema: SchemaObject | undefined, selections: SchemaSelections, basePath?: string): SchemaObject | undefined;