From 4a7bc74e9991c457f4bfac099cca382650ac7880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 9 Feb 2021 19:46:30 +0100 Subject: [PATCH 1/5] Fix duplication of codeblock elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/TextualBody.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 71f7572a25..e3cd9d8f51 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -96,6 +96,9 @@ export default class TextualBody extends React.Component { const pres = ReactDOM.findDOMNode(this).getElementsByTagName("pre"); if (pres.length > 0) { for (let i = 0; i < pres.length; i++) { + // If there already is a div wrapping the codeblock we want to skip this. + // This happens after the codeblock was edited. + if (pres[i].parentNode.className == "mx_EventTile_pre_container") continue; // Wrap a div around 
 so that the copy button can be correctly positioned
                     // when the 
 overflows and is scrolled horizontally.
                     const div = this._wrapInDiv(pres[i]);

From b97d8979c72e5397267e9b77bfb873c551dc176c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Feb 2021 13:18:23 +0100
Subject: [PATCH 2/5] Remove nested for loop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/TextualBody.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index e3cd9d8f51..ea7aebdb69 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -113,16 +113,12 @@ export default class TextualBody extends React.Component {
             // Highlight code
             const codes = ReactDOM.findDOMNode(this).getElementsByTagName("code");
             if (codes.length > 0) {
-                for (let i = 0; i < codes.length; i++) {
-                    // Do this asynchronously: parsing code takes time and we don't
-                    // need to block the DOM update on it.
-                    setTimeout(() => {
-                        if (this._unmounted) return;
-                        for (let i = 0; i < pres.length; i++) {
-                            this._highlightCode(codes[i]);
-                        }
-                    }, 10);
-                }
+                setTimeout(() => {
+                    if (this._unmounted) return;
+                    for (let i = 0; i < codes.length; i++) {
+                        this._highlightCode(codes[i]);
+                    }
+                }, 10);
             }
         }
     }

From 5cf126dea3dd73476ed2027ea8bf7f2fa0e8092d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Feb 2021 13:41:24 +0100
Subject: [PATCH 3/5] Added comment back
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/TextualBody.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index ea7aebdb69..6bc81fa5f5 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -113,6 +113,7 @@ export default class TextualBody extends React.Component {
             // Highlight code
             const codes = ReactDOM.findDOMNode(this).getElementsByTagName("code");
             if (codes.length > 0) {
+                // Do this asynchronously: parsing code takes time and we don't
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < codes.length; i++) {

From 895be6e7a61d78aa7c1e05a6efef86988278053e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Feb 2021 14:02:45 +0100
Subject: [PATCH 4/5] Added second comment back
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/TextualBody.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 6bc81fa5f5..e32f8b11e0 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -114,6 +114,7 @@ export default class TextualBody extends React.Component {
             const codes = ReactDOM.findDOMNode(this).getElementsByTagName("code");
             if (codes.length > 0) {
                 // Do this asynchronously: parsing code takes time and we don't
+                // need to block the DOM update on it.
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < codes.length; i++) {

From 6b0b46b917350553771946628f8e102d040d62b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Feb 2021 14:20:19 +0100
Subject: [PATCH 5/5] Fix duplication caused by highlighting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/TextualBody.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index e32f8b11e0..6b201f1b8e 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -118,6 +118,9 @@ export default class TextualBody extends React.Component {
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < codes.length; i++) {
+                        // If the code already has the hljs class we want to skip this.
+                        // This happens after the codeblock was edited.
+                        if (codes[i].className.includes("hljs")) continue;
                         this._highlightCode(codes[i]);
                     }
                 }, 10);