feat(swagger-ui-react): add HTML preview functionality to response

src/core/components/response-body.jsx

@@ -117,12 +117,12 @@ export default class ResponseBody extends React.PureComponent {
       })
       bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} canCopy>{body}</HighlightCode>
 
-      // HTML or Plain Text
-    } else if (toLower(contentType) === "text/html" || /text\/plain/.test(contentType)) {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} canCopy>{content}</HighlightCode>
+      // HTML
+    } else if (/text\/html/.test(contentType)) {
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} canCopy previewable>{content}</HighlightCode>
 
       // CSV
-    } else if (toLower(contentType) === "text/csv" || /text\/csv/.test(contentType)) {
+    } else if (/text\/csv/.test(contentType)) {
       bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} canCopy>{content}</HighlightCode>
 
       // Image
@@ -136,6 +136,7 @@ export default class ResponseBody extends React.PureComponent {
       // Audio
     } else if (/^audio\//i.test(contentType)) {
       bodyEl = <pre className="microlight"><audio controls key={ url }><source src={ url } type={ contentType } /></audio></pre>
+      // As Plain Text
     } else if (typeof content === "string") {
       bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{content}</HighlightCode>
     } else if ( content.size > 0 ) {

src/core/plugins/syntax-highlighting/components/HighlightCode.jsx

@@ -1,7 +1,7 @@
 /**
  * @prettier
  */
-import React, { useRef, useEffect } from "react"
+import React, { useRef, useEffect, useState } from "react"
 import PropTypes from "prop-types"
 import classNames from "classnames"
 import saveAs from "js-file-download"
@@ -11,12 +11,14 @@ const HighlightCode = ({
   fileName = "response.txt",
   className,
   downloadable,
+  previewable,
   getComponent,
   canCopy,
   language,
   children,
 }) => {
   const rootRef = useRef(null)
+  const [previewVisible, setPreviewVisible] = useState(false)
   const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
 
   const handleDownload = () => {
@@ -40,6 +42,10 @@ const HighlightCode = ({
     }
   }
 
+  const handlePreviewToggle = () => {
+    previewable && setPreviewVisible(!previewVisible)
+  }
+
   useEffect(() => {
     const childNodes = Array.from(rootRef.current.childNodes).filter(
       (node) => !!node.nodeType && node.classList.contains("microlight")
@@ -67,6 +73,12 @@ const HighlightCode = ({
 
   return (
     <div className="highlight-code" ref={rootRef}>
+      {previewable && (
+        <button className="toggle-html-preview" onClick={handlePreviewToggle}>
+          {previewVisible ? "Hide" : "Show"} Preview
+        </button>
+      )}
+
       {canCopy && (
         <div className="copy-to-clipboard">
           <CopyToClipboard text={children}>
@@ -81,22 +93,30 @@ const HighlightCode = ({
         </button>
       )}
 
-      <SyntaxHighlighter
-        language={language}
-        className={classNames(className, "microlight")}
-        renderPlainText={({ children, PlainTextViewer }) => (
-          <PlainTextViewer className={className}>{children}</PlainTextViewer>
-        )}
-      >
-        {children}
-      </SyntaxHighlighter>
+      {previewVisible ? (
+        <iframe
+          srcDoc={children}
+          sandbox="allow-scripts"
+        />
+      ) : (
+        <SyntaxHighlighter
+          language={language}
+          className={classNames(className, "microlight")}
+          renderPlainText={({ children, PlainTextViewer }) => (
+            <PlainTextViewer className={className}>{children}</PlainTextViewer>
+          )}
+        >
+          {children}
+        </SyntaxHighlighter>
+      )}
     </div>
   )
 }
 
 HighlightCode.propTypes = {
   getComponent: PropTypes.func.isRequired,
   className: PropTypes.string,
+  previewable: PropTypes.bool,
   downloadable: PropTypes.bool,
   fileName: PropTypes.string,
   language: PropTypes.string,

src/style/_layout.scss

@@ -755,6 +755,20 @@
         word-break: break-all;
     }
   }
+
+  > iframe {
+    display: block;
+    width: 100%;
+    max-height: 400px;
+    min-height: 6em;
+    height: 400px;
+    overflow-x: auto;
+    overflow-y: auto;
+    background: #fff;
+    border: none;
+    border-radius: 4px;
+  }
+
 }
 .curl-command {
   position: relative;
@@ -779,6 +793,25 @@
   display: flex;
 }
 
+.toggle-html-preview {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: #7d8293;
+  text-align: center;
+  padding: 5px;
+  border: none;
+  border-radius: 4px;
+  font-family: sans-serif;
+  font-weight: 600;
+  color: white;
+  font-size: 14px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
 .scheme-container
 {
     margin: 0 0 20px 0;