refactor(syntax-highlighting): use component wrapping

char0n · char0n · commit fa62ce4aac3e · 2024-04-05T23:38:31.000+02:00
diff --git a/src/core/components/curl.jsx b/src/core/components/curl.jsx
@@ -1,39 +1,35 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { CopyToClipboard } from "react-copy-to-clipboard"
-import get from "lodash/get"
 import { requestSnippetGenerator_curl_bash } from "../plugins/request-snippets/fn"
 
 export default class Curl extends React.Component {
   static propTypes = {
-    getConfigs: PropTypes.func.isRequired,
     getComponent: PropTypes.func.isRequired,
     request: PropTypes.object.isRequired
   }
 
   render() {
-    let { request, getConfigs, getComponent } = this.props
-    let curl = requestSnippetGenerator_curl_bash(request)
-
-    const config = getConfigs()
+    const { request,  getComponent } = this.props
+    const curl = requestSnippetGenerator_curl_bash(request)
     const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
 
-    const curlBlock = get(config, "syntaxHighlight.activated") ? (
-      <SyntaxHighlighter language="bash" className="curl microlight">
-        {curl}
-      </SyntaxHighlighter>
-    ) : (
-      <textarea readOnly={true} className="curl" value={curl}></textarea>
-    )
-
     return (
       <div className="curl-command">
         <h4>Curl</h4>
         <div className="copy-to-clipboard">
             <CopyToClipboard text={curl}><button/></CopyToClipboard>
         </div>
         <div>
-          {curlBlock}
+          <SyntaxHighlighter
+            language="bash"
+            className="curl microlight"
+            renderPlainText={({ children, PlainTextViewer }) => (
+              <PlainTextViewer className="curl">{children}</PlainTextViewer>
+            )}
+          >
+            {curl}
+          </SyntaxHighlighter>
         </div>
       </div>
     )
diff --git a/src/core/components/example.jsx b/src/core/components/example.jsx
@@ -28,9 +28,7 @@ export default function Example(props) {
       {showValue && example.has("value") ? (
         <section className="example__section">
           <div className="example__section-header">Example Value</div>
-          <HighlightCode
-            getConfigs={getConfigs}
-            value={stringify(example.get("value"))}
+          <HighlightCode>{stringify(example.get("value"))}</HighlightCode>
           />
         </section>
       ) : null}
diff --git a/src/core/components/model-example.jsx b/src/core/components/model-example.jsx
@@ -113,10 +113,7 @@ const ModelExample = ({
           {example ? (
             example
           ) : (
-            <HighlightCode
-              value="(no example available)"
-              getConfigs={getConfigs}
-            />
+            <HighlightCode>(no example available</HighlightCode>
           )}
         </div>
       )}
diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
@@ -127,10 +127,7 @@ export default class ParamBody extends PureComponent {
         {
           isEditBox && isExecute
             ? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>
-            : (value && <HighlightCode className="body-param__example"
-                          language={ language }
-                          getConfigs={ getConfigs }
-                          value={ value }/>)
+            : (value && <HighlightCode className="body-param__example" language={ language }>{value}</HighlightCode>)
         }
         <div className="body-param-options">
           {
diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
@@ -108,23 +108,23 @@ export default class ResponseBody extends React.PureComponent {
         body = "can't parse JSON.  Raw result:\n\n" + content
       }
 
-      bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} value={ body } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} canCopy>{body}</HighlightCode>
 
       // XML
     } else if (/xml/i.test(contentType)) {
       body = formatXml(content, {
         textNodesOnSameLine: true,
         indentor: "  "
       })
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } getConfigs={ getConfigs } canCopy />
+      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`} value={ content } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} canCopy>{content}</HighlightCode>
 
       // CSV
     } else if (toLower(contentType) === "text/csv" || /text\/csv/.test(contentType)) {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} value={ content } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} canCopy>{content}</HighlightCode>
 
       // Image
     } else if (/^image\//i.test(contentType)) {
@@ -138,7 +138,7 @@ export default class ResponseBody extends React.PureComponent {
     } else if (/^audio\//i.test(contentType)) {
       bodyEl = <pre className="microlight"><audio controls key={ url }><source src={ url } type={ contentType } /></audio></pre>
     } else if (typeof content === "string") {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } getConfigs={ getConfigs } canCopy />
+      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{content}</HighlightCode>
     } else if ( content.size > 0 ) {
       // We don't know the contentType, but there was some content returned
       if(parsedContent) {
@@ -148,7 +148,7 @@ export default class ResponseBody extends React.PureComponent {
           <p className="i">
             Unrecognized response type; displaying content as text.
           </p>
-          <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ parsedContent } getConfigs={ getConfigs } canCopy />
+          <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{parsedContent}</HighlightCode>
         </div>
 
       } else {
diff --git a/src/core/components/response.jsx b/src/core/components/response.jsx
@@ -15,7 +15,7 @@ const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {
 
   return (
     <div>
-      <HighlightCode className="example" getConfigs={ getConfigs } language={ language } value={ stringify(sampleResponse) } />
+      <HighlightCode className="example" language={language}>{stringify(sampleResponse)}</HighlightCode>
     </div>
   )
 }
diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
@@ -293,8 +293,9 @@ const RequestBody = ({
               className="body-param__example"
               getConfigs={getConfigs}
               language={language}
-              value={stringify(requestBodyValue) || sampleRequestBody}
-            />
+            >
+              {stringify(requestBodyValue) || sampleRequestBody}
+            </HighlightCode>
           }
           includeWriteOnly={true}
         />
diff --git a/src/core/plugins/request-snippets/request-snippets.jsx b/src/core/plugins/request-snippets/request-snippets.jsx
@@ -1,7 +1,5 @@
 import React, { useRef, useEffect, useState } from "react"
 import PropTypes from "prop-types"
-import get from "lodash/get"
-import isFunction from "lodash/isFunction"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 
 const style = {
@@ -34,9 +32,7 @@ const activeStyle = {
   borderBottom: "none"
 }
 
-const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getComponent }) => {
-  const config = isFunction(getConfigs) ? getConfigs() : null
-  const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true)
+const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) => {
   const rootRef = useRef(null)
 
   const ArrowIcon = getComponent("ArrowUpIcon")
@@ -45,24 +41,6 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
 
   const [activeLanguage, setActiveLanguage] = useState(requestSnippetsSelectors.getSnippetGenerators()?.keySeq().first())
   const [isExpanded, setIsExpanded] = useState(requestSnippetsSelectors?.getDefaultExpanded())
-  useEffect(() => {
-    const doIt = () => {
-
-    }
-    doIt()
-  }, [])
-  useEffect(() => {
-    const childNodes = Array
-      .from(rootRef.current.childNodes)
-      .filter(node => !!node.nodeType && node.classList?.contains("curl-command"))
-    // eslint-disable-next-line no-use-before-define
-    childNodes.forEach(node => node.addEventListener("mousewheel", handlePreventYScrollingBeyondElement, { passive: false }))
-
-    return () => {
-      // eslint-disable-next-line no-use-before-define
-      childNodes.forEach(node => node.removeEventListener("mousewheel", handlePreventYScrollingBeyondElement))
-    }
-  }, [request])
 
   const snippetGenerators = requestSnippetsSelectors.getSnippetGenerators()
   const activeGenerator = snippetGenerators.get(activeLanguage)
@@ -99,6 +77,26 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
     }
   }
 
+  useEffect(() => {
+    const doIt = () => {
+
+    }
+    doIt()
+  }, [])
+
+  useEffect(() => {
+    const childNodes = Array
+      .from(rootRef.current.childNodes)
+      .filter(node => !!node.nodeType && node.classList?.contains("curl-command"))
+    // eslint-disable-next-line no-use-before-define
+    childNodes.forEach(node => node.addEventListener("mousewheel", handlePreventYScrollingBeyondElement, { passive: false }))
+
+    return () => {
+      // eslint-disable-next-line no-use-before-define
+      childNodes.forEach(node => node.removeEventListener("mousewheel", handlePreventYScrollingBeyondElement))
+    }
+  }, [request])
+
   const SnippetComponent = canSyntaxHighlight ? (
     <SyntaxHighlighter
       language={activeGenerator.get("syntax")}
@@ -142,7 +140,15 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
             </CopyToClipboard>
           </div>
           <div>
-            {SnippetComponent}
+            <SyntaxHighlighter
+              language={activeGenerator.get("syntax")}
+              className="curl microlight"
+              renderPlainText={({ children, PlainTextViewer }) => (
+                <PlainTextViewer className="curl"></PlainTextViewer>
+              )}
+            >
+              {snippet}
+            </SyntaxHighlighter>
           </div>
         </div>
       }
@@ -153,7 +159,6 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getCom
 RequestSnippets.propTypes = {
   request: PropTypes.object.isRequired,
   requestSnippetsSelectors: PropTypes.object.isRequired,
-  getConfigs: PropTypes.object.isRequired,
   getComponent: PropTypes.func.isRequired,
   requestSnippetsActions: PropTypes.object,
 }
diff --git a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
@@ -9,25 +9,19 @@ import saveAs from "js-file-download"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 
 const HighlightCode = ({
-  value,
   fileName = "response.txt",
   className,
   downloadable,
-  getConfigs,
   getComponent,
   canCopy,
   language,
+  children,
 }) => {
-  const config = getConfigs()
-  const canSyntaxHighlight =
-    get(config, "syntaxHighlight") !== false &&
-    get(config, "syntaxHighlight.activated", true)
   const rootRef = useRef(null)
-
   const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
 
   const handleDownload = () => {
-    saveAs(value, fileName)
+    saveAs(children, fileName)
   }
 
   const handlePreventYScrollingBeyondElement = (e) => {
@@ -70,13 +64,13 @@ const HighlightCode = ({
         )
       )
     }
-  }, [value, className, language])
+  }, [children, className, language])
 
   return (
     <div className="highlight-code" ref={rootRef}>
       {canCopy && (
         <div className="copy-to-clipboard">
-          <CopyToClipboard text={value}>
+          <CopyToClipboard text={children}>
             <button />
           </CopyToClipboard>
         </div>
@@ -88,29 +82,27 @@ const HighlightCode = ({
         </button>
       )}
 
-      {canSyntaxHighlight ? (
-        <SyntaxHighlighter
-          language={language}
-          className={classNames(className, "microlight")}
-        >
-          {value}
-        </SyntaxHighlighter>
-      ) : (
-        <pre className={classNames(className, "microlight")}>{value}</pre>
-      )}
+      <SyntaxHighlighter
+        language={language}
+        className={classNames(className, "microlight")}
+        renderPlainText={({ children, PlainTextViewer }) => (
+          <PlainTextViewer className={className}>{children}</PlainTextViewer>
+        )}
+      >
+        {children}
+      </SyntaxHighlighter>
     </div>
   )
 }
 
 HighlightCode.propTypes = {
-  value: PropTypes.string.isRequired,
-  getConfigs: PropTypes.func.isRequired,
   getComponent: PropTypes.func.isRequired,
   className: PropTypes.string,
   downloadable: PropTypes.bool,
   fileName: PropTypes.string,
   language: PropTypes.string,
   canCopy: PropTypes.bool,
+  children: PropTypes.string.isRequired,
 }
 
 export default HighlightCode
diff --git a/src/core/plugins/syntax-highlighting/components/PlainTextViewer.jsx b/src/core/plugins/syntax-highlighting/components/PlainTextViewer.jsx
@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+const PlainTextViewer = ({ className = "", children }) => (
+  <pre className={classNames("microlight", className)}>{children}</pre>
+)
+
+PlainTextViewer.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.string.isRequired,
+}
+
+export default PlainTextViewer
diff --git a/src/core/plugins/syntax-highlighting/components/SyntaxHighlighter.jsx b/src/core/plugins/syntax-highlighting/components/SyntaxHighlighter.jsx
@@ -11,7 +11,7 @@ const SyntaxHighlighter = ({
   className = "",
   getConfigs,
   syntaxHighlighting = {},
-  children = null,
+  children = "",
 }) => {
   const configs = getConfigs()
   const theme = get(configs, "syntaxHighlight.theme")
@@ -37,7 +37,8 @@ SyntaxHighlighter.propTypes = {
     styles: PropTypes.object,
     defaultStyle: PropTypes.object,
   }),
-  children: PropTypes.node,
+  renderPLainText: PropTypes.func,
+  children: PropTypes.string,
 }
 
 export default SyntaxHighlighter
diff --git a/src/core/plugins/syntax-highlighting/index.js b/src/core/plugins/syntax-highlighting/index.js
diff --git a/src/core/plugins/syntax-highlighting/wrap-components/SyntaxHighlighter.jsx b/src/core/plugins/syntax-highlighting/wrap-components/SyntaxHighlighter.jsx
diff --git a/src/style/_layout.scss b/src/style/_layout.scss

Original file line number	Diff line number	Diff line change
`@@ -127,10 +127,7 @@ export default class ParamBody extends PureComponent {`
`127`	`127`	`{`
`128`	`128`	`isEditBox && isExecute`
`129`	`129`	`? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>`
`130`		`- : (value && <HighlightCode className="body-param__example"`
`131`		`- language={ language }`
`132`		`- getConfigs={ getConfigs }`
`133`		`- value={ value }/>)`
	`130`	`+ : (value && <HighlightCode className="body-param__example" language={ language }>{value}</HighlightCode>)`
`134`	`131`	`}`
`135`	`132`	`<div className="body-param-options">`
`136`	`133`	`{`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const getExampleComponent = ( sampleResponse, HighlightCode, getConfigs ) => {`
`15`	`15`
`16`	`16`	`return (`
`17`	`17`	`<div>`
`18`		`- <HighlightCode className="example" getConfigs={ getConfigs } language={ language } value={ stringify(sampleResponse) } />`
	`18`	`+ <HighlightCode className="example" language={language}>{stringify(sampleResponse)}</HighlightCode>`
`19`	`19`	`</div>`
`20`	`20`	`)`
`21`	`21`	`}`