From 8008c48620439e8a6de0132bbd7407b87fbb2d22 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 12 Oct 2021 19:24:30 +0300 Subject: [PATCH 1/5] 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") ? this.#syntaxHighlighter = elem} language={language} className={className + " microlight"} style={getStyle(get(config, "syntaxHighlight.theme"))} > {value} - : 
 this.#pre = elem} className={className + " microlight"}>{value}
+ : 
{value}
return ( -
+
{ !downloadable ? null :
Download From a570eeb8132b750829e1f7684a5beda23d4c1ee4 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 12 Oct 2021 19:29:52 +0300 Subject: [PATCH 2/5] fix: style --- src/core/components/highlight-code.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx index 646554b1b5f..c469cf5028e 100644 --- a/src/core/components/highlight-code.jsx +++ b/src/core/components/highlight-code.jsx @@ -23,7 +23,7 @@ export default class HighlightCode extends Component { } handleRootRef = (node) => { - this.#root = node; + this.#root = node } preventYScrollingBeyondElement = (e) => { @@ -48,15 +48,15 @@ export default class HighlightCode extends Component { componentDidMount() { Array .from(this.#root.childNodes) - .filter(node => node.classList.contains('microlight')) - .map(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) + .filter(node => node.classList.contains("microlight")) + .forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) } componentWillUnmount() { Array .from(this.#root.childNodes) - .filter(node => node.classList.contains('microlight')) - .map(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) + .filter(node => node.classList.contains("microlight")) + .forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) } render () { From 53d302820cacb97184d102d1ce2e5184a58124e3 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 12 Oct 2021 19:56:06 +0300 Subject: [PATCH 3/5] fix: handle corner cases --- src/core/components/highlight-code.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx index c469cf5028e..83853fee59f 100644 --- a/src/core/components/highlight-code.jsx +++ b/src/core/components/highlight-code.jsx @@ -16,14 +16,20 @@ export default class HighlightCode extends Component { canCopy: PropTypes.bool } - #root + #childNodes downloadText = () => { saveAs(this.props.value, this.props.fileName || "response.txt") } handleRootRef = (node) => { - this.#root = node + if (node === null) { + this.#childNodes = node; + } else { + this.#childNodes = Array + .from(node.childNodes) + .filter(node => !!node.nodeType && node.classList.contains("microlight")) + } } preventYScrollingBeyondElement = (e) => { @@ -46,17 +52,11 @@ export default class HighlightCode extends Component { } componentDidMount() { - Array - .from(this.#root.childNodes) - .filter(node => node.classList.contains("microlight")) - .forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) + this.#childNodes.forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) } componentWillUnmount() { - Array - .from(this.#root.childNodes) - .filter(node => node.classList.contains("microlight")) - .forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) + this.#childNodes.forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) } render () { From 560147bed0ad7e937d30000c8ed24ca61bf8c4ca Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 12 Oct 2021 20:02:07 +0300 Subject: [PATCH 4/5] fix: style --- src/core/components/highlight-code.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx index 83853fee59f..c6fddb28569 100644 --- a/src/core/components/highlight-code.jsx +++ b/src/core/components/highlight-code.jsx @@ -24,7 +24,7 @@ export default class HighlightCode extends Component { handleRootRef = (node) => { if (node === null) { - this.#childNodes = node; + this.#childNodes = node } else { this.#childNodes = Array .from(node.childNodes) From ea295d3a78fd95ee45ac50e6f0039253492b3384 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Tue, 12 Oct 2021 20:10:36 +0300 Subject: [PATCH 5/5] refactor: add some defensivness --- src/core/components/highlight-code.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx index c6fddb28569..982179944e7 100644 --- a/src/core/components/highlight-code.jsx +++ b/src/core/components/highlight-code.jsx @@ -52,11 +52,11 @@ export default class HighlightCode extends Component { } componentDidMount() { - this.#childNodes.forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) + this.#childNodes?.forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false })) } componentWillUnmount() { - this.#childNodes.forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) + this.#childNodes?.forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement)) } render () {