Fix clipboard copy on iOS

On iOS the element must be an `input` (or `textarea`)  and with attribute `'contenteditable'`

Closes #858

src/sidebar/util/copy-to-clipboard.js

@@ -10,10 +10,13 @@
  * @param {string} text
  */
 export function copyText(text) {
-  const temp = document.createElement('pre');
-  temp.className = 'copy-text';
-  temp.textContent = text;
+  const temp = document.createElement('input');
+  temp.value = text;
+  temp.setAttribute('data-testid', 'copy-text');
+  // Recipe from https://stackoverflow.com/a/34046084/14463679
+  temp.contentEditable = 'true';
   document.body.appendChild(temp);
+  temp.focus();
 
   try {
     const range = document.createRange();
@@ -22,6 +25,7 @@ export function copyText(text) {
     selection.removeAllRanges();
     range.selectNodeContents(temp);
     selection.addRange(range);
+    temp.setSelectionRange(0, temp.value.length);
     document.execCommand('copy');
   } finally {
     temp.remove();

src/sidebar/util/test/copy-to-clipboard-test.js

@@ -14,7 +14,7 @@ describe('copy-to-clipboard', () => {
      * Returns the temporary element used to hold text being copied.
      */
     function tempSpan() {
-      return document.querySelector('.copy-text');
+      return document.querySelector('[data-testid=copy-text]');
     }
 
     beforeEach(() => {