From c76cc33ebfc4e501e0322c3d70ca88770c70bbc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 22 Feb 2021 13:23:39 +0100 Subject: [PATCH 1/9] Don't show copy button if there is no 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 | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 6b201f1b8e..632e2e4afe 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -161,6 +161,9 @@ export default class TextualBody extends React.Component { } _addCodeCopyButton(div) { + const copyCode = div.getElementsByTagName("code")[0]; + // If there isn't any code element don't show the copy button + if (!copyCode) return; const button = document.createElement("span"); button.className = "mx_EventTile_button mx_EventTile_copyButton "; @@ -170,7 +173,6 @@ export default class TextualBody extends React.Component { if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom"; button.onclick = async () => { - const copyCode = button.parentNode.getElementsByTagName("code")[0]; const successful = await copyPlaintext(copyCode.textContent); const buttonRect = button.getBoundingClientRect(); From 87a2454556dedd332fbd44c2fd8894a6dc5379b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 22 Feb 2021 13:41:20 +0100 Subject: [PATCH 2/9] Revert "Don't show copy button if there is no " This reverts commit c76cc33ebfc4e501e0322c3d70ca88770c70bbc4. --- src/components/views/messages/TextualBody.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 632e2e4afe..6b201f1b8e 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -161,9 +161,6 @@ export default class TextualBody extends React.Component { } _addCodeCopyButton(div) { - const copyCode = div.getElementsByTagName("code")[0]; - // If there isn't any code element don't show the copy button - if (!copyCode) return; const button = document.createElement("span"); button.className = "mx_EventTile_button mx_EventTile_copyButton "; @@ -173,6 +170,7 @@ export default class TextualBody extends React.Component { if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom"; button.onclick = async () => { + const copyCode = button.parentNode.getElementsByTagName("code")[0]; const successful = await copyPlaintext(copyCode.textContent); const buttonRect = button.getBoundingClientRect(); From 6149567c62e219ec733a1de7cdcdfc3ed791bd9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 22 Feb 2021 13:43:57 +0100 Subject: [PATCH 3/9] Add if it's missing 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 | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 6b201f1b8e..4223b9cbb8 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -96,6 +96,14 @@ 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++) { + let code = pres[i].getElementsByTagName("code")[0]; + // Add code element if it's missing + if (!code) { + code = document.createElement("code"); + code.innerHTML = pres[i].innerHTML; + pres[i].innerHTML = ""; + pres[i].appendChild(code); + } // 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; From c965119410ffeb4be0a5d73d22bf593a51dcdecf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 23 Feb 2021 07:40:53 +0100 Subject: [PATCH 4/9] Add _addCodeElement method 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 | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 4223b9cbb8..c6352e0e67 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -96,14 +96,8 @@ 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++) { - let code = pres[i].getElementsByTagName("code")[0]; // Add code element if it's missing - if (!code) { - code = document.createElement("code"); - code.innerHTML = pres[i].innerHTML; - pres[i].innerHTML = ""; - pres[i].appendChild(code); - } + if (!pres[i].getElementsByTagName("code")[0]) this._addCodeElement(pres[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; @@ -136,6 +130,13 @@ export default class TextualBody extends React.Component { } } + _addCodeElement(pre) { + const code = document.createElement("code"); + code.innerHTML = pre.innerHTML; + pre.innerHTML = ""; + pre.appendChild(code); + } + _addCodeExpansionButton(div, pre) { // Calculate how many percent does the pre element take up. // If it's less than 30% we don't add the expansion button. From c9baff1e101afb216fe75d56e1fa523cc8b1bfa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 23 Feb 2021 07:46:03 +0100 Subject: [PATCH 5/9] Move the _addCodeElement() call down a bit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We can skip this if the first if statement is true Signed-off-by: Šimon Brandner --- src/components/views/messages/TextualBody.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index c6352e0e67..5be4a6bbb4 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -96,11 +96,13 @@ 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++) { - // Add code element if it's missing - if (!pres[i].getElementsByTagName("code")[0]) this._addCodeElement(pres[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; + // Add code element if it's missing + if (!pres[i].getElementsByTagName("code")[0]) { + this._addCodeElement(pres[i]); + } // 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 ce1be7a4cdcace08bac8cd18a1569a59f58f4b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 23 Feb 2021 07:49:26 +0100
Subject: [PATCH 6/9] Use length instead of the first element
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 5be4a6bbb4..63d287870e 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -100,7 +100,7 @@ export default class TextualBody extends React.Component {
                     // This happens after the codeblock was edited.
                     if (pres[i].parentNode.className == "mx_EventTile_pre_container") continue;
                     // Add code element if it's missing
-                    if (!pres[i].getElementsByTagName("code")[0]) {
+                    if (pres[i].getElementsByTagName("code").length == 0) {
                         this._addCodeElement(pres[i]);
                     }
                     // Wrap a div around 
 so that the copy button can be correctly positioned

From 61cd026d7aad7f51fce7f15d640943292279b119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 24 Feb 2021 13:07:25 +0100
Subject: [PATCH 7/9] Improve comment

Co-authored-by: J. Ryan Stinnett 
---
 src/components/views/messages/TextualBody.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 63d287870e..b4535287dd 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -99,7 +99,7 @@ export default class TextualBody extends React.Component {
                     // 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;
-                    // Add code element if it's missing
+                    // Add code element if it's missing since we depend on it
                     if (pres[i].getElementsByTagName("code").length == 0) {
                         this._addCodeElement(pres[i]);
                     }

From 363b753306d10d6949165fdef27e4eedaf4b1193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 24 Feb 2021 13:40:37 +0100
Subject: [PATCH 8/9] Avoid innerHTML
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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 63d287870e..e60ab5b535 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -134,7 +134,7 @@ export default class TextualBody extends React.Component {
 
     _addCodeElement(pre) {
         const code = document.createElement("code");
-        code.innerHTML = pre.innerHTML;
+        code.append(...pre.childNodes);
         pre.innerHTML = "";
         pre.appendChild(code);
     }

From 986950697b964b3575dc81f1db8f7bfbb6965ef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 24 Feb 2021 14:10:09 +0100
Subject: [PATCH 9/9] Rmove unnecessary code
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 deletion(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 7c18b8c142..04db7bd725 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -135,7 +135,6 @@ export default class TextualBody extends React.Component {
     _addCodeElement(pre) {
         const code = document.createElement("code");
         code.append(...pre.childNodes);
-        pre.innerHTML = "";
         pre.appendChild(code);
     }