diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 27514d0e23..882e331675 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -34,6 +34,7 @@ import {pillifyLinks, unmountPills} from '../../../utils/pillify';
import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext} from "../../../utils/strings";
export default createReactClass({
displayName: 'TextualBody',
@@ -69,23 +70,6 @@ export default createReactClass({
};
},
- copyToClipboard: function(text) {
- const textArea = document.createElement("textarea");
- textArea.value = text;
- document.body.appendChild(textArea);
- textArea.select();
-
- let successful = false;
- try {
- successful = document.execCommand('copy');
- } catch (err) {
- console.log('Unable to copy');
- }
-
- document.body.removeChild(textArea);
- return successful;
- },
-
// TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
UNSAFE_componentWillMount: function() {
this._content = createRef();
@@ -277,17 +261,17 @@ export default createReactClass({
Array.from(ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre')).forEach((p) => {
const button = document.createElement("span");
button.className = "mx_EventTile_copyButton";
- button.onclick = (e) => {
+ button.onclick = async () => {
const copyCode = button.parentNode.getElementsByTagName("pre")[0];
- const successful = this.copyToClipboard(copyCode.textContent);
+ const successful = await copyPlaintext(copyCode.textContent);
- const buttonRect = e.target.getBoundingClientRect();
+ const buttonRect = button.getBoundingClientRect();
const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
...toRightOf(buttonRect, 2),
message: successful ? _t('Copied!') : _t('Failed to copy'),
});
- e.target.onmouseleave = close;
+ button.onmouseleave = close;
};
// Wrap a div around so that the copy button can be correctly positioned
diff --git a/src/utils/strings.ts b/src/utils/strings.ts
new file mode 100644
index 0000000000..7d1fa0049d
--- /dev/null
+++ b/src/utils/strings.ts
@@ -0,0 +1,75 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * Copy plaintext to user's clipboard
+ * It will overwrite user's selection range
+ * In certain browsers it may only work if triggered by a user action or may ask user for permissions
+ * Tries to use new async clipboard API if available
+ * @param text the plaintext to put in the user's clipboard
+ */
+export async function copyPlaintext(text: string): Promise {
+ try {
+ if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } else {
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+
+ // Avoid scrolling to bottom
+ textArea.style.top = "0";
+ textArea.style.left = "0";
+ textArea.style.position = "fixed";
+
+ document.body.appendChild(textArea);
+ const selection = document.getSelection();
+ const range = document.createRange();
+ // range.selectNodeContents(textArea);
+ range.selectNode(textArea);
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ const successful = document.execCommand("copy");
+ selection.removeAllRanges();
+ document.body.removeChild(textArea);
+ return successful;
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ return false;
+}
+
+export function selectText(target: Element) {
+ const range = document.createRange();
+ range.selectNodeContents(target);
+
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+}
+
+/**
+ * Copy rich text to user's clipboard
+ * It will overwrite user's selection range
+ * In certain browsers it may only work if triggered by a user action or may ask user for permissions
+ * @param ref pointer to the node to copy
+ */
+export function copyNode(ref: Element): boolean {
+ selectText(ref);
+ return document.execCommand('copy');
+}