fix(highlight-code): handle mousewheel events properly (#7554)

SyntaxHighlighter component doesn't support ref. We had
to use different approach to finds it's DOM Node using
ref of the root Node of the render tree for HighlightCode
component.

Refs #7497

src/core/components/highlight-code.jsx

@@ -16,17 +16,26 @@ export default class HighlightCode extends Component {
     canCopy: PropTypes.bool
   }
 
-  #syntaxHighlighter;
+  #childNodes
-  #pre;
 
   downloadText = () => {
     saveAs(this.props.value, this.props.fileName || "response.txt")
   }
 
+  handleRootRef = (node) => {
+    if (node === null) {
+      this.#childNodes = node
+    } else {
+      this.#childNodes = Array
+        .from(node.childNodes)
+        .filter(node => !!node.nodeType && node.classList.contains("microlight"))
+    }
+  }
+
   preventYScrollingBeyondElement = (e) => {
     const target = e.target
 
-    var deltaY = e.nativeEvent.deltaY
+    var deltaY = e.deltaY
     var contentHeight = target.scrollHeight
     var visibleHeight = target.offsetHeight
     var scrollTop = target.scrollTop
@@ -43,13 +52,11 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    [this.#syntaxHighlighter, this.#pre]
+    this.#childNodes?.forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
-    .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
   }
 
   componentWillUnmount() {
-    [this.#syntaxHighlighter, this.#pre]
+    this.#childNodes?.forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
-    .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
   }
 
   render () {
@@ -61,17 +68,16 @@ export default class HighlightCode extends Component {
 
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
-          ref={elem => this.#syntaxHighlighter = elem}
           language={language}
           className={className + " microlight"}
           style={getStyle(get(config, "syntaxHighlight.theme"))}
           >
           {value}
         </SyntaxHighlighter>
-      : <pre ref={elem => this.#pre = elem} className={className + " microlight"}>{value}</pre>
+      : <pre className={className + " microlight"}>{value}</pre>
 
     return (
-      <div className="highlight-code">
+      <div className="highlight-code" ref={this.handleRootRef}>
         { !downloadable ? null :
           <div className="download-contents" onClick={this.downloadText}>
             Download