docusaurus-theme-openapi-docs 1.1.6 → 1.1.9

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _xmlFormatter = _interopRequireDefault(require("xml-formatter"));
+
 var _ContentType = _interopRequireDefault(require("../ContentType"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
@@ -170,7 +172,15 @@ function Body({
 
   if (contentType === "application/xml") {
     if (jsonRequestBodyExample) {
-      exampleBodyString = (0, _json2xml.default)(jsonRequestBodyExample);
+      try {
+        exampleBodyString = (0, _xmlFormatter.default)((0, _json2xml.default)(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true
+        });
+      } catch {
+        exampleBodyString = (0, _json2xml.default)(jsonRequestBodyExample);
+      }
     }
 
     language = "xml";

package/lib/theme/ApiItem/Layout/styles.module.css

@@ -73,6 +73,8 @@
 
 :global(.theme-api-markdown code) {
   max-width: 600px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 @media (min-width: 997px) {

package/lib/theme/ParamsItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -33,7 +34,21 @@ function ParamsItem({
 
   const renderDescription = guard(description, (description) => (
     <div>
-      <ReactMarkdown children={createDescription(description)} />
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));
 

package/lib/theme/ResponseSamples/index.js

@@ -11,11 +11,11 @@ import CodeBlock from "@theme/CodeBlock";
 
 import styles from "./styles.module.css";
 
-function ResponseSamples({ responseExample }) {
+function ResponseSamples({ responseExample, language }) {
   return (
     <div className={styles.responseSamplesContainer}>
       <CodeBlock
-        language="javascript"
+        language={language ? language : "json"}
         className={styles.responseSamplesCodeBlock}
       >
         {responseExample}

package/lib/theme/SchemaItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -29,8 +30,22 @@ function SchemaItem({
   );
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
-    <div className={styles.schemaDescription}>
-      <ReactMarkdown children={createDescription(description)} />
+    <div>
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));
 

package/lib-next/theme/ApiDemoPanel/Body/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import format from "xml-formatter";
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
@@ -188,7 +189,15 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
 
   if (contentType === "application/xml") {
     if (jsonRequestBodyExample) {
-      exampleBodyString = json2xml(jsonRequestBodyExample);
+      try {
+        exampleBodyString = format(json2xml(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true,
+        });
+      } catch {
+        exampleBodyString = json2xml(jsonRequestBodyExample);
+      }
     }
 
     language = "xml";

package/lib-next/theme/ApiItem/Layout/styles.module.css

@@ -73,6 +73,8 @@
 
 :global(.theme-api-markdown code) {
   max-width: 600px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 @media (min-width: 997px) {

package/lib-next/theme/ParamsItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -33,7 +34,21 @@ function ParamsItem({
 
   const renderDescription = guard(description, (description) => (
     <div>
-      <ReactMarkdown children={createDescription(description)} />
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));
 

package/lib-next/theme/ResponseSamples/index.js

@@ -11,11 +11,11 @@ import CodeBlock from "@theme/CodeBlock";
 
 import styles from "./styles.module.css";
 
-function ResponseSamples({ responseExample }) {
+function ResponseSamples({ responseExample, language }) {
   return (
     <div className={styles.responseSamplesContainer}>
       <CodeBlock
-        language="javascript"
+        language={language ? language : "json"}
         className={styles.responseSamplesCodeBlock}
       >
         {responseExample}

package/lib-next/theme/SchemaItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -29,8 +30,22 @@ function SchemaItem({
   );
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
-    <div className={styles.schemaDescription}>
-      <ReactMarkdown children={createDescription(description)} />
+    <div>
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -50,7 +50,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.1.6",
+    "docusaurus-plugin-openapi-docs": "^1.1.9",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -59,7 +59,8 @@
     "react-markdown": "^8.0.1",
     "react-redux": "^7.2.0",
     "redux-devtools-extension": "^2.13.8",
-    "webpack": "^5.61.0"
+    "webpack": "^5.61.0",
+    "xml-formatter": "^2.6.1"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
@@ -68,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "fbac87dcd52678751a3fe73ab416e4778e77bbb1"
+  "gitHead": "c9153730f9f180dbd199fbc9cb66f8470339c877"
 }

package/src/theme/ApiDemoPanel/Body/index.tsx

@@ -8,6 +8,7 @@
 import React from "react";
 
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import format from "xml-formatter";
 
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
@@ -197,7 +198,15 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (contentType === "application/xml") {
     if (jsonRequestBodyExample) {
-      exampleBodyString = json2xml(jsonRequestBodyExample);
+      try {
+        exampleBodyString = format(json2xml(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true,
+        });
+      } catch {
+        exampleBodyString = json2xml(jsonRequestBodyExample);
+      }
     }
     language = "xml";
   }

package/src/theme/ApiItem/Layout/styles.module.css

@@ -73,6 +73,8 @@
 
 :global(.theme-api-markdown code) {
   max-width: 600px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 @media (min-width: 997px) {

package/src/theme/ParamsItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -33,7 +34,21 @@ function ParamsItem({
 
   const renderDescription = guard(description, (description) => (
     <div>
-      <ReactMarkdown children={createDescription(description)} />
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));
 

package/src/theme/ResponseSamples/index.js

@@ -11,11 +11,11 @@ import CodeBlock from "@theme/CodeBlock";
 
 import styles from "./styles.module.css";
 
-function ResponseSamples({ responseExample }) {
+function ResponseSamples({ responseExample, language }) {
   return (
     <div className={styles.responseSamplesContainer}>
       <CodeBlock
-        language="javascript"
+        language={language ? language : "json"}
         className={styles.responseSamplesCodeBlock}
       >
         {responseExample}

package/src/theme/SchemaItem/index.js

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import CodeBlock from "@theme/CodeBlock";
 import ReactMarkdown from "react-markdown";
 
 import { createDescription } from "../../markdown/createDescription";
@@ -29,8 +30,22 @@ function SchemaItem({
   );
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
-    <div className={styles.schemaDescription}>
-      <ReactMarkdown children={createDescription(description)} />
+    <div>
+      <ReactMarkdown
+        children={createDescription(description)}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
     </div>
   ));