Enable drag and drop and pasting in text fields; Tidy up existing drag and drop code.

public/scripts/ui.js

@@ -172,31 +172,34 @@ class PeersUI {
     }
 
     _onDrop(e) {
-        e.preventDefault();
-
         if (this.shareMode.active || Dialog.anyDialogShown()) return;
 
-        if (!$$('x-peer') || !$$('x-peer').contains(e.target)) {
+        e.preventDefault();
-            if (e.dataTransfer.files.length > 0) {
+
-                Events.fire('activate-share-mode', {files: e.dataTransfer.files});
-            } else {
-                for (let i=0; i<e.dataTransfer.items.length; i++) {
-                    if (e.dataTransfer.items[i].type === "text/plain") {
-                        e.dataTransfer.items[i].getAsString(text => {
-                            Events.fire('activate-share-mode', {text: text});
-                        });
-                    }
-                }
-            }
-        }
         this._onDragEnd();
+
+        if ($$('x-peer') || !$$('x-peer').contains(e.target)) return; // dropped on peer
+
+        const files = e.dataTransfer.files;
+        const text = e.dataTransfer.getData("text");
+
+        if (files.length > 0) {
+            Events.fire('activate-share-mode', {
+                files: files
+            });
+        }
+        else if(text.length > 0) {
+            Events.fire('activate-share-mode', {
+                text: text
+            });
+        }
     }
 
     _onDragOver(e) {
-        e.preventDefault();
-
         if (this.shareMode.active || Dialog.anyDialogShown()) return;
 
+        e.preventDefault();
+
         this.$xInstructions.setAttribute('drop-bg', true);
         this.$xNoPeers.setAttribute('drop-bg', true);
     }
@@ -630,29 +633,28 @@ class PeerUI {
     }
 
     _onDrop(e) {
-        e.preventDefault();
-
         if (PeerUI._shareMode.active || Dialog.anyDialogShown()) return;
 
-        if (e.dataTransfer.files.length > 0) {
+        e.preventDefault();
-            Events.fire('files-selected', {
-                files: e.dataTransfer.files,
-                to: this._peer.id
-            });
-        } else {
-            for (let i=0; i<e.dataTransfer.items.length; i++) {
-                if (e.dataTransfer.items[i].type === "text/plain") {
-                    e.dataTransfer.items[i].getAsString(text => {
-                        Events.fire('send-text', {
-                            text: text,
-                            to: this._peer.id
-                        });
-                    });
-                }
-            }
-        }
 
         this._onDragEnd();
+
+        const peerId = this._peer.id;
+        const files = e.dataTransfer.files;
+        const text = e.dataTransfer.getData("text");
+
+        if (files.length > 0) {
+            Events.fire('files-selected', {
+                files: files,
+                to: peerId
+            });
+        }
+        else if (text.length > 0) {
+            Events.fire('send-text', {
+                text: text,
+                to: peerId
+            });
+        }
     }
 
     _onDragOver() {
@@ -1896,6 +1898,8 @@ class SendTextDialog extends Dialog {
         this.$submit = this.$el.querySelector('button[type="submit"]');
         this.$form.addEventListener('submit', e => this._onSubmit(e));
         this.$text.addEventListener('input', _ => this._onInput());
+        this.$text.addEventListener('paste', e => this._onPaste(e));
+        this.$text.addEventListener('drop', e => this._onDrop(e));
 
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
         Events.on('keydown', e => this._onKeyDown(e));
@@ -1914,6 +1918,40 @@ class SendTextDialog extends Dialog {
         }
     }
 
+    async _onDrop(e) {
+        e.preventDefault()
+
+        const text = e.dataTransfer.getData("text");
+        const selection = window.getSelection();
+
+        if (selection.rangeCount) {
+            selection.deleteFromDocument();
+            selection.getRangeAt(0).insertNode(document.createTextNode(text));
+        }
+
+        this._onInput();
+    }
+
+    async _onPaste(e) {
+        e.preventDefault()
+
+        const text = (e.clipboardData || window.clipboardData).getData('text');
+        const selection = window.getSelection();
+
+        if (selection.rangeCount) {
+            selection.deleteFromDocument();
+            const textNode = document.createTextNode(text);
+            const range = document.createRange();
+            range.setStart(textNode, textNode.length);
+            range.collapse(true);
+            selection.getRangeAt(0).insertNode(textNode);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        this._onInput();
+    }
+
     _textEmpty() {
         return !this.$text.innerText || this.$text.innerText === "\n";
     }