From 837d86b77f40b0643ca96361d3a229fadf17fd03 Mon Sep 17 00:00:00 2001
From: luka <leandr1999@gmail.com>
Date: Fri, 21 Jun 2024 00:14:04 -0400
Subject: [PATCH 1/3] feat(swagger-ui-react): add HTML preview functionality to
 response body component

---
 src/core/components/response-body.jsx         |  9 ++--
 .../components/HighlightCode.jsx              | 48 +++++++++++++++----
 src/style/_layout.scss                        | 32 +++++++++++++
 3 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 4b99f41f8bb..53a7fd4026d 100644
--- a/src/core/components/response-body.jsx
+++ b/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 ) {
diff --git a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
index f389f0b95ef..b368a9a1b79 100644
--- a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
+++ b/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,15 @@ const HighlightCode = ({
   fileName = "response.txt",
   className,
   downloadable,
+  previewable,
   getComponent,
   canCopy,
   language,
   children,
 }) => {
   const rootRef = useRef(null)
+  const [previewVisible, setPreviewVisible] = useState(false)
+  const [previewHeight, setPreviewHeight] = useState(screen.height);
   const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
 
   const handleDownload = () => {
@@ -40,6 +43,14 @@ const HighlightCode = ({
     }
   }
 
+  const handlePreviewToggle = () => {
+    previewable && setPreviewVisible(!previewVisible)
+  }
+
+  const handlePreviewAutoHeight = (event) => {
+    setPreviewHeight(event.target?.contentWindow.document?.body?.scrollHeight ?? previewHeight)
+  }
+
   useEffect(() => {
     const childNodes = Array.from(rootRef.current.childNodes).filter(
       (node) => !!node.nodeType && node.classList.contains("microlight")
@@ -65,8 +76,15 @@ const HighlightCode = ({
     }
   }, [children, className, language])
 
+  // console.log(previewable, fileName, className, downloadable, language, canCopy, children)
   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,15 +99,24 @@ 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-same-origin allow-scripts allow-popups allow-forms allow-modals"
+          style={{height: previewHeight + 'px'}}
+          onLoad={handlePreviewAutoHeight}
+        />
+      ) : (
+        <SyntaxHighlighter
+          language={language}
+          className={classNames(className, "microlight")}
+          renderPlainText={({ children, PlainTextViewer }) => (
+            <PlainTextViewer className={className}>{children}</PlainTextViewer>
+          )}
+        >
+          {children}
+        </SyntaxHighlighter>
+      )}
     </div>
   )
 }
@@ -97,6 +124,7 @@ const HighlightCode = ({
 HighlightCode.propTypes = {
   getComponent: PropTypes.func.isRequired,
   className: PropTypes.string,
+  previewable: PropTypes.bool,
   downloadable: PropTypes.bool,
   fileName: PropTypes.string,
   language: PropTypes.string,
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index b97083a2605..f38734d5e0a 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -755,6 +755,19 @@
         word-break: break-all;
     }
   }
+
+  > iframe {
+    display: block;
+    width: 100%;
+    max-height: 400px;
+    min-height: 6em;
+    overflow-x: auto;
+    overflow-y: auto;
+    background: #fff;
+    border: none;
+    border-radius: 4px;
+  }
+
 }
 .curl-command {
   position: relative;
@@ -779,6 +792,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;

From b92070b7217246ca3148feffcce058a3d5fbb6ee Mon Sep 17 00:00:00 2001
From: luka <leandr1999@gmail.com>
Date: Fri, 21 Jun 2024 01:29:11 -0400
Subject: [PATCH 2/3] feat: removed allow-same-origin policy for safety, auto
 height hardcoded to 400px

---
 .../syntax-highlighting/components/HighlightCode.jsx   | 10 +---------
 src/style/_layout.scss                                 |  1 +
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
index b368a9a1b79..e0bce7114e2 100644
--- a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
+++ b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
@@ -19,7 +19,6 @@ const HighlightCode = ({
 }) => {
   const rootRef = useRef(null)
   const [previewVisible, setPreviewVisible] = useState(false)
-  const [previewHeight, setPreviewHeight] = useState(screen.height);
   const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
 
   const handleDownload = () => {
@@ -47,10 +46,6 @@ const HighlightCode = ({
     previewable && setPreviewVisible(!previewVisible)
   }
 
-  const handlePreviewAutoHeight = (event) => {
-    setPreviewHeight(event.target?.contentWindow.document?.body?.scrollHeight ?? previewHeight)
-  }
-
   useEffect(() => {
     const childNodes = Array.from(rootRef.current.childNodes).filter(
       (node) => !!node.nodeType && node.classList.contains("microlight")
@@ -76,7 +71,6 @@ const HighlightCode = ({
     }
   }, [children, className, language])
 
-  // console.log(previewable, fileName, className, downloadable, language, canCopy, children)
   return (
     <div className="highlight-code" ref={rootRef}>
       {previewable && (
@@ -102,9 +96,7 @@ const HighlightCode = ({
       {previewVisible ? (
         <iframe
           srcDoc={children}
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
-          style={{height: previewHeight + 'px'}}
-          onLoad={handlePreviewAutoHeight}
+          sandbox="allow-scripts"
         />
       ) : (
         <SyntaxHighlighter
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index f38734d5e0a..45c73459a34 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -761,6 +761,7 @@
     width: 100%;
     max-height: 400px;
     min-height: 6em;
+    height: 400px;
     overflow-x: auto;
     overflow-y: auto;
     background: #fff;

From 8633dd8085a7c7ec1ced636b5c4054862aa227fa Mon Sep 17 00:00:00 2001
From: LuKa <leandr1999@gmail.com>
Date: Tue, 14 Jan 2025 23:12:06 -0500
Subject: [PATCH 3/3] refactor(components): remove unused import from
 response-body.jsx

Eliminated the unused `toLower` import from `lodash` in `response-body.jsx`
to clean up the code and improve readability. This change does not affect
the functionality of the component.
---
 src/core/components/response-body.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 53a7fd4026d..04310346b36 100644
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import formatXml from "xml-but-prettier"
-import toLower from "lodash/toLower"
 import { extractFileNameFromContentDispositionHeader } from "core/utils"
 import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
 import win from "core/window"