Correct Firefox text and image paste

credativUK · Dec 16, 2016 · 0fc299b · 0fc299b
1 parent 838ad4c
commit 0fc299b
Showing 1 changed file with 47 additions and 42 deletions.
diff --git a/assets/javascripts/image_paste.js b/assets/javascripts/image_paste.js
@@ -121,7 +121,12 @@ function uploadImage(type, blob, editElement) {
     var name = 'screenshot_'+addFile.nextAttachmentId+'_'+timestamp+ext;
 
     /* Upload pasted image */
-    blob.name = name; /* Not very elegent, but we pretent the Blob is actually a File */
+    if (Object.defineProperty) {
+        Object.defineProperty(blob, 'name', { value: name });
+    } else {
+        blob.name = name;
+    }
+    blob = $.extend(blob, {name: name});
     uploadAndAttachFiles([blob], fileinput);
 
     /* Inset text into input */
@@ -152,7 +157,12 @@ $( document ).ready(function() {
                     var timestamp = Math.round(+new Date()/1000);
                     var name = 'screenshot_'+addFile.nextAttachmentId+'_'+timestamp+'_'+e.dataTransfer.files[file].name.replace(/[ !"#%&\'()*:<=>?\[\\\]|]/g, '_');
                     var blob = e.dataTransfer.files[file].slice();
-                    blob.name = name;
+                    if (Object.defineProperty) {
+                        Object.defineProperty(blob, 'name', { value: name });
+                    } else {
+                        blob.name = name;
+                    }
+
                     uploadAndAttachFiles([blob], $('input:file.file_selector'));
                     pasteImageName(this, name);
 
@@ -298,50 +308,35 @@ $( document ).ready(function() {
 
             // if the image is inserted into the textarea, then return focus
             self.returnFocusForTextArea();
+            var items = $.makeArray(e.clipboardData.items).concat($.makeArray(e.clipboardData.files));
 
-            // read data from the clipborad and upload the first file
-
-            if ( e.clipboardData.items ) {
-                var items = e.clipboardData.items;
-                for (var i = 0; i < items.length; ++i) {
-                    if (items[i].kind === 'file' && items[i].type.indexOf('image/') !== -1) {
+            // read data from the clipboard and upload the first file
+            for (var i = 0; i < items.length; ++i) {
+                if ((!items[i].kind || items[i].kind === 'file') && items[i].type.indexOf('image/') !== -1) {
 
-                        if ( options.before ) options.before();
+                    if ( options.before ) options.before();
 
-                        // only paste 1 image at a time
-                        e.preventDefault();
+                    // only paste 1 image at a time
+                    e.preventDefault();
 
-                        // uploads image on a server
-                        this.uploadImage({
-                            image: items[i].getAsFile(),
-                            type: items[i].type,
-                            ref: 'clipboard'
-                        }, options);
+                    // uploads image on a server
+                    this.uploadImage({
+                        image: items[i].getAsFile ? items[i].getAsFile() : items[i],
+                        type: items[i].type,
+                        ref: 'clipboard'
+                    }, options);
 
-                        return;
-                    }
+                    return;
                 }
             }
+            var items = e.clipboardData.items;
+            for (var i = 0; i < items.length; i++) {
+                if (items[i].kind === 'string' && items[i].type === 'text/plain') {
+                    items[i].getAsString($.proxy(this.insertHtmlForTextarea, this));
 
-            if ( e.clipboardData.files ) {
-                var items = e.clipboardData.files;
-                for (var i = 0; i < items.length; ++i) {
-                    if (items[i].type.indexOf('image/') !== -1) {
-
-                        if ( options.before ) options.before();
-
-                        // only paste 1 image at a time
-                        e.preventDefault();
-
-                        // uploads image on a server
-                        this.uploadImage({
-                            image: items[i],
-                            type: items[i].type,
-                            ref: 'clipboard'
-                        }, options);
+                    e.preventDefault();
 
-                        return;
-                    }
+                    return;
                 }
             }
         },
@@ -371,7 +366,7 @@ $( document ).ready(function() {
         },
 
 
-    /**
+        /**
          * Uploads image by using the capture.
          */
         uploadFromCapture: function(options) {
@@ -481,10 +476,20 @@ $( document ).ready(function() {
                 + html
                 + this.selection.editor.value.slice(this.selection.end);
 
-            $(this.selection.editor).focus();
-            this.selection.editor.selectionStart =  this.selection.end + html.length;
-            this.selection.editor.selectionEnd = this.selection.editor.selectionStart;
-
+            // $(this.selection.editor).focus();
+
+            var elem = this.selection.editor;
+            var caretPos = this.selection.end;
+            if (elem.createTextRange) {
+                var range = elem.createTextRange();
+                range.move('character', caretPos);
+                range.select();
+            } else if(elem.selectionStart) {
+                elem.focus();
+                elem.setSelectionRange(caretPos, caretPos);
+            } else {
+                elem.focus();
+            }
             this.selection = null;
         },