diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index ccc7c1a630..2b0fd686c0 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -393,7 +393,6 @@ export function bodyToHtml(content, highlights, opts) {
}
safeBody = sanitizeHtml(body, sanitizeHtmlParams);
safeBody = unicodeToImage(safeBody);
- if (isHtml) safeBody = addCodeCopyButton(safeBody);
}
finally {
delete sanitizeHtmlParams.textFilter;
@@ -412,23 +411,6 @@ export function bodyToHtml(content, highlights, opts) {
return ;
}
-function addCodeCopyButton(safeBody) {
- // Adds 'copy' buttons to pre blocks
- // Note that this only manipulates the markup to add the buttons:
- // we need to add the event handlers once the nodes are in the DOM
- // since we can't save functions in the markup.
- // This is done in TextualBody
- const el = document.createElement("div");
- el.innerHTML = safeBody;
- const codeBlocks = Array.from(el.getElementsByTagName("pre"));
- codeBlocks.forEach(p => {
- const button = document.createElement("span");
- button.className = "mx_EventTile_copyButton";
- p.appendChild(button);
- });
- return el.innerHTML;
-}
-
export function emojifyText(text) {
return {
__html: unicodeToImage(escape(text)),
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 58273bee67..a58422e840 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -113,14 +113,8 @@ module.exports = React.createClass({
}
}, 10);
}
- // add event handlers to the 'copy code' buttons
- const buttons = ReactDOM.findDOMNode(this).getElementsByClassName("mx_EventTile_copyButton");
- for (let i = 0; i < buttons.length; i++) {
- buttons[i].onclick = (e) => {
- const copyCode = buttons[i].parentNode.getElementsByTagName("code")[0];
- this.copyToClipboard(copyCode.textContent);
- };
- }
+
+ this._addCodeCopyButton();
}
},
@@ -257,6 +251,19 @@ module.exports = React.createClass({
}
},
+ _addCodeCopyButton() {
+ // Add 'copy' buttons to pre blocks
+ ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre').forEach((p) => {
+ const button = document.createElement("span");
+ button.className = "mx_EventTile_copyButton";
+ button.onclick = (e) => {
+ const copyCode = button.parentNode.getElementsByTagName("code")[0];
+ this.copyToClipboard(copyCode.textContent);
+ };
+ p.appendChild(button);
+ });
+ },
+
onCancelClick: function(event) {
this.setState({ widgetHidden: true });
// FIXME: persist this somewhere smarter than local storage