From 8008c48620439e8a6de0132bbd7407b87fbb2d22 Mon Sep 17 00:00:00 2001
From: Vladimir Gorej <vladimir.gorej@gmail.com>
Date: Tue, 12 Oct 2021 19:24:30 +0300
Subject: [PATCH] fix(highlight-code): handle mousewheel events properly

Refs #7497
---
 src/core/components/highlight-code.jsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 465a0cd6ee8..646554b1b5f 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -16,17 +16,20 @@ export default class HighlightCode extends Component {
     canCopy: PropTypes.bool
   }
 
-  #syntaxHighlighter;
-  #pre;
+  #root
 
   downloadText = () => {
     saveAs(this.props.value, this.props.fileName || "response.txt")
   }
 
+  handleRootRef = (node) => {
+    this.#root = node;
+  }
+
   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 +46,17 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    [this.#syntaxHighlighter, this.#pre]
-    .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
+    Array
+      .from(this.#root.childNodes)
+      .filter(node => node.classList.contains('microlight'))
+      .map(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
   }
 
   componentWillUnmount() {
-    [this.#syntaxHighlighter, this.#pre]
-    .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
+    Array
+      .from(this.#root.childNodes)
+      .filter(node => node.classList.contains('microlight'))
+      .map(node => node.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