fix(syntax-highlight): fix of fix that caused highlight code scrolling errors

src/core/components/curl.jsx

@@ -1,28 +1,30 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { CopyToClipboard } from "react-copy-to-clipboard"
-import {SyntaxHighlighter, getStyle} from "core/syntax-highlighting"
 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,
+    fn: PropTypes.object.isRequired,
     request: PropTypes.object.isRequired
   }
 
   render() {
-    let { request, getConfigs } = this.props
+    let { request, getConfigs, fn, getComponent } = this.props
     let curl = requestSnippetGenerator_curl_bash(request)
 
     const config = getConfigs()
+    const SyntaxHighlighter = getComponent("SyntaxHighlighter")
 
     const curlBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
           language="bash"
           className="curl microlight"
           onWheel={this.preventYScrollingBeyondElement}
-          style={getStyle(get(config, "syntaxHighlight.theme"))}
+          style={fn.getStyle(get(config, "syntaxHighlight.theme"))}
           >
           {curl}
         </SyntaxHighlighter>

src/core/components/example.jsx

@@ -11,7 +11,7 @@ export default function Example(props) {
   const { example, showValue, getComponent, getConfigs } = props
 
   const Markdown = getComponent("Markdown", true)
-  const HighlightCode = getComponent("highlightCode")
+  const HighlightCode = getComponent("highlightCode", true)
 
   if(!example) return null
 

src/core/components/highlight-code.jsx

@@ -1,14 +1,16 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import {SyntaxHighlighter, getStyle} from "core/syntax-highlighting"
 import get from "lodash/get"
 import saveAs from "js-file-download"
 import { CopyToClipboard } from "react-copy-to-clipboard"
+import ReactDOM from "react-dom"
 
 export default class HighlightCode extends Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
+    fn: PropTypes.object.isRequired,
     getConfigs: PropTypes.func.isRequired,
+    getComponent: PropTypes.func.isRequired,
     className: PropTypes.string,
     downloadable: PropTypes.bool,
     fileName: PropTypes.string,
@@ -26,10 +28,10 @@ export default class HighlightCode extends Component {
   preventYScrollingBeyondElement = (e) => {
     const target = e.target
 
-    var deltaY = e.nativeEvent.deltaY
-    var contentHeight = target.scrollHeight
-    var visibleHeight = target.offsetHeight
-    var scrollTop = target.scrollTop
+    const deltaY = e.deltaY
+    const contentHeight = target.scrollHeight
+    const visibleHeight = target.offsetHeight
+    const scrollTop = target.scrollTop
 
     const scrollOffset = visibleHeight + scrollTop
 
@@ -42,29 +44,32 @@ export default class HighlightCode extends Component {
     }
   }
 
+
   componentDidMount() {
+    const extractAddEventListener = (el) => (el?.addEventListener || ReactDOM.findDOMNode(el)?.addEventListener || (() => {}))
     [this.#syntaxHighlighter, this.#pre]
-    .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
+      .map((el) => extractAddEventListener(el)("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
   }
 
   componentWillUnmount() {
+    const extractRemoveEventListener = (el) => (el?.removeEventListener || ReactDOM.findDOMNode(el)?.removeEventListener || (() => {}))
     [this.#syntaxHighlighter, this.#pre]
-    .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
+      .map((el) => extractRemoveEventListener(el)("mousewheel", this.preventYScrollingBeyondElement))
   }
 
   render () {
-    let { value, className, downloadable, getConfigs, canCopy, language } = this.props
+    let { value, className, downloadable, getConfigs, canCopy, language, fn, getComponent } = this.props
 
     const config = getConfigs ? getConfigs() : {syntaxHighlight: {activated: true, theme: "agate"}}
 
     className = className || ""
-
+    const SyntaxHighlighter = getComponent("SyntaxHighlighter")
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
           ref={elem => this.#syntaxHighlighter = elem}
           language={language}
           className={className + " microlight"}
-          style={getStyle(get(config, "syntaxHighlight.theme"))}
+          style={fn.getStyle(get(config, "syntaxHighlight.theme"))}
           >
           {value}
         </SyntaxHighlighter>

src/core/components/live-response.jsx

@@ -70,7 +70,7 @@ export default class LiveResponse extends React.Component {
     const hasHeaders = returnObject.length !== 0
     const Markdown = getComponent("Markdown", true)
     const RequestSnippets = getComponent("RequestSnippets", true)
-    const Curl = getComponent("curl")
+    const Curl = getComponent("curl", true)
 
     return (
       <div>

src/core/components/model-example.jsx

@@ -59,7 +59,7 @@ export default class ModelExample extends React.Component {
     let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath, includeReadOnly, includeWriteOnly } = this.props
     let { defaultModelExpandDepth } = getConfigs()
     const ModelWrapper = getComponent("ModelWrapper")
-    const HighlightCode = getComponent("highlightCode")
+    const HighlightCode = getComponent("highlightCode", true)
     const exampleTabId = randomBytes(5).toString("base64")
     const examplePanelId = randomBytes(5).toString("base64")
     const modelTabId = randomBytes(5).toString("base64")

src/core/components/param-body.jsx

@@ -104,7 +104,7 @@ export default class ParamBody extends PureComponent {
 
     const Button = getComponent("Button")
     const TextArea = getComponent("TextArea")
-    const HighlightCode = getComponent("highlightCode")
+    const HighlightCode = getComponent("highlightCode", true)
     const ContentType = getComponent("contentType")
     // for domains where specSelectors not passed
     let parameter = specSelectors ? specSelectors.parameterWithMetaByIdentity(pathMethod, param) : param
@@ -140,11 +140,11 @@ export default class ParamBody extends PureComponent {
           }
           <label htmlFor="">
             <span>Parameter content type</span>
-            <ContentType 
-              value={ consumesValue } 
-              contentTypes={ consumes } 
-              onChange={onChangeConsumes} 
-              className="body-param-content-type" 
+            <ContentType
+              value={ consumesValue }
+              contentTypes={ consumes }
+              onChange={onChangeConsumes}
+              className="body-param-content-type"
               ariaLabel="Parameter content type" />
           </label>
         </div>

src/core/components/response-body.jsx

@@ -53,7 +53,7 @@ export default class ResponseBody extends React.PureComponent {
   render() {
     let { content, contentType, url, headers={}, getConfigs, getComponent } = this.props
     const { parsedContent } = this.state
-    const HighlightCode = getComponent("highlightCode")
+    const HighlightCode = getComponent("highlightCode", true)
     const downloadName = "response_" + new Date().getTime()
     let body, bodyEl
     url = url || ""

src/core/components/response.jsx

@@ -102,7 +102,7 @@ export default class Response extends React.Component {
     let links = response.get("links")
     const ResponseExtension = getComponent("ResponseExtension")
     const Headers = getComponent("headers")
-    const HighlightCode = getComponent("highlightCode")
+    const HighlightCode = getComponent("highlightCode", true)
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent("Markdown", true)
     const OperationLink = getComponent("operationLink")

src/core/plugins/request-snippets/request-snippets.jsx

@@ -2,7 +2,6 @@ import React from "react"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 import PropTypes from "prop-types"
 import get from "lodash/get"
-import {SyntaxHighlighter, getStyle} from "core/syntax-highlighting"
 
 export class RequestSnippets extends React.Component {
   constructor() {
@@ -17,69 +16,72 @@ export class RequestSnippets extends React.Component {
     request: PropTypes.object.isRequired,
     requestSnippetsSelectors: PropTypes.object.isRequired,
     getConfigs: PropTypes.object.isRequired,
+    getComponent: PropTypes.object.isRequired,
     requestSnippetsActions: PropTypes.object.isRequired,
+    fn: PropTypes.object.isRequired,
   }
   render() {
-      const {request, getConfigs, requestSnippetsSelectors } = this.props
-      const snippetGenerators = requestSnippetsSelectors.getSnippetGenerators()
-      const activeLanguage = this.state.activeLanguage || snippetGenerators.keySeq().first()
-      const activeGenerator = snippetGenerators.get(activeLanguage)
-      const snippet = activeGenerator.get("fn")(request)
-      const onGenChange = (key) => {
-        const needsChange = activeLanguage !== key
-        if(needsChange) {
-          this.setState({
-            activeLanguage: key
-          })
-        }
+    const {request, getConfigs, requestSnippetsSelectors, fn, getComponent } = this.props
+    const snippetGenerators = requestSnippetsSelectors.getSnippetGenerators()
+    const activeLanguage = this.state.activeLanguage || snippetGenerators.keySeq().first()
+    const activeGenerator = snippetGenerators.get(activeLanguage)
+    const snippet = activeGenerator.get("fn")(request)
+    const onGenChange = (key) => {
+      const needsChange = activeLanguage !== key
+      if(needsChange) {
+        this.setState({
+          activeLanguage: key
+        })
       }
-      const style = {
-        cursor: "pointer",
-        lineHeight: 1,
-        display: "inline-flex",
-        backgroundColor: "rgb(250, 250, 250)",
-        paddingBottom: "0",
-        paddingTop: "0",
-        border: "1px solid rgb(51, 51, 51)",
-        borderRadius: "4px 4px 0 0",
-        boxShadow: "none",
-        borderBottom: "none"
-      }
-      const activeStyle = {
-        cursor: "pointer",
-        lineHeight: 1,
-        display: "inline-flex",
-        backgroundColor: "rgb(51, 51, 51)",
-        boxShadow: "none",
-        border: "1px solid rgb(51, 51, 51)",
-        paddingBottom: "0",
-        paddingTop: "0",
-        borderRadius: "4px 4px 0 0",
-        marginTop: "-5px",
-        marginRight: "-5px",
-        marginLeft: "-5px",
-        zIndex: "9999",
-        borderBottom: "none"
-      }
-      const getBtnStyle = (key) => {
-        if (key === activeLanguage) {
-          return activeStyle
-        }
-        return style
+    }
+    const style = {
+      cursor: "pointer",
+      lineHeight: 1,
+      display: "inline-flex",
+      backgroundColor: "rgb(250, 250, 250)",
+      paddingBottom: "0",
+      paddingTop: "0",
+      border: "1px solid rgb(51, 51, 51)",
+      borderRadius: "4px 4px 0 0",
+      boxShadow: "none",
+      borderBottom: "none"
+    }
+    const activeStyle = {
+      cursor: "pointer",
+      lineHeight: 1,
+      display: "inline-flex",
+      backgroundColor: "rgb(51, 51, 51)",
+      boxShadow: "none",
+      border: "1px solid rgb(51, 51, 51)",
+      paddingBottom: "0",
+      paddingTop: "0",
+      borderRadius: "4px 4px 0 0",
+      marginTop: "-5px",
+      marginRight: "-5px",
+      marginLeft: "-5px",
+      zIndex: "9999",
+      borderBottom: "none"
+    }
+    const getBtnStyle = (key) => {
+      if (key === activeLanguage) {
+        return activeStyle
       }
-      const config = getConfigs()
+      return style
+    }
+    const config = getConfigs()
+    const SyntaxHighlighter = getComponent("SyntaxHighlighter")
 
-      const SnippetComponent = config?.syntaxHighlight?.activated
-        ? <SyntaxHighlighter
-          language={activeGenerator.get("syntax")}
-          className="curl microlight"
-          onWheel={function(e) {return this.preventYScrollingBeyondElement(e)}}
-          style={getStyle(get(config, "syntaxHighlight.theme"))}
-        >
-          {snippet}
-        </SyntaxHighlighter>
-        :
-        <textarea readOnly={true} className="curl" value={snippet}></textarea>
+    const SnippetComponent = config?.syntaxHighlight?.activated
+      ? <SyntaxHighlighter
+        language={activeGenerator.get("syntax")}
+        className="curl microlight"
+        onWheel={function(e) {return this.preventYScrollingBeyondElement(e)}}
+        style={fn.getStyle(get(config, "syntaxHighlight.theme"))}
+      >
+        {snippet}
+      </SyntaxHighlighter>
+      :
+      <textarea readOnly={true} className="curl" value={snippet}></textarea>
 
     const expanded = this.state.expanded === undefined ? this.props?.requestSnippetsSelectors?.getDefaultExpanded() : this.state.expanded
     return (

src/core/plugins/syntax-highlight/fn.js

@@ -0,0 +1,20 @@
+import agate from "react-syntax-highlighter/dist/cjs/styles/hljs/agate"
+import arta from "react-syntax-highlighter/dist/cjs/styles/hljs/arta"
+import monokai from "react-syntax-highlighter/dist/cjs/styles/hljs/monokai"
+import nord from "react-syntax-highlighter/dist/cjs/styles/hljs/nord"
+import obsidian from "react-syntax-highlighter/dist/cjs/styles/hljs/obsidian"
+import tomorrowNight from "react-syntax-highlighter/dist/cjs/styles/hljs/tomorrow-night"
+
+const internalStylePreset = {agate, arta, monokai, nord, obsidian, "tomorrow-night": tomorrowNight}
+
+export default system => ({
+  getAvailableStyles: () => internalStylePreset,
+  getStyle: name => {
+    const styles = system.getSystem().fn.getAvailableStyles()
+    if (!Object.keys(styles).includes(name)) {
+      console.warn(`Request style '${name}' is not available, returning default instead`)
+      return agate
+    }
+    return styles[name]
+  }
+})

src/core/plugins/syntax-highlight/index.js

@@ -0,0 +1,9 @@
+import buildFn from "./fn"
+import { SyntaxHighlighter } from "./syntax-highlight"
+
+export default (system) => ({
+  components: {
+    SyntaxHighlighter
+  },
+  fn: buildFn(system),
+})

src/core/syntax-highlighting.js → src/core/plugins/syntax-highlight/syntax-highlight.js

@@ -9,13 +9,6 @@ import http from "react-syntax-highlighter/dist/esm/languages/hljs/http"
 import powershell from "react-syntax-highlighter/dist/esm/languages/hljs/powershell"
 import javascript from "react-syntax-highlighter/dist/esm/languages/hljs/javascript"
 
-import agate from "react-syntax-highlighter/dist/esm/styles/hljs/agate"
-import arta from "react-syntax-highlighter/dist/esm/styles/hljs/arta"
-import monokai from "react-syntax-highlighter/dist/esm/styles/hljs/monokai"
-import nord from "react-syntax-highlighter/dist/esm/styles/hljs/nord"
-import obsidian from "react-syntax-highlighter/dist/esm/styles/hljs/obsidian"
-import tomorrowNight from "react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night"
-
 SyntaxHighlighter.registerLanguage("json", json)
 SyntaxHighlighter.registerLanguage("js", js)
 SyntaxHighlighter.registerLanguage("xml", xml)
@@ -25,15 +18,6 @@ SyntaxHighlighter.registerLanguage("bash", bash)
 SyntaxHighlighter.registerLanguage("powershell", powershell)
 SyntaxHighlighter.registerLanguage("javascript", javascript)
 
-const styles = {agate, arta, monokai, nord, obsidian, "tomorrow-night": tomorrowNight}
-export const availableStyles = Object.keys(styles)
-
-export const getStyle = name => {
-    if (!availableStyles.includes(name)) {
-        console.warn(`Request style '${name}' is not available, returning default instead`)
-        return agate
-    }
-    return styles[name]
+export {
+  SyntaxHighlighter
 }
-
-export {SyntaxHighlighter, styles}

src/core/presets/base.js

@@ -4,6 +4,7 @@ import spec from "core/plugins/spec"
 import view from "core/plugins/view"
 import samples from "core/plugins/samples"
 import requestSnippets from "core/plugins/request-snippets"
+import syntaxHighlight from "core/plugins/syntax-highlight"
 import logs from "core/plugins/logs"
 import swaggerJs from "core/plugins/swagger-js"
 import auth from "core/plugins/auth"
@@ -193,6 +194,7 @@ export default function() {
     deepLinkingPlugin,
     filter,
     onComplete,
-    requestSnippets
+    requestSnippets,
+    syntaxHighlight
   ]
 }