Pasting images into the composer is still not working in IE11


(나인경) #1

I want to serivce it all browsers such as IE, Chrome, firefox.
Pasting images into the composer is cleary working well in Chrome and firefox.
but IE11 is still not working.
so I develop function for Pasting images into the composer in IE11.
It is based on _firefoxPastingHack() function because looks like IE11 behave like Firefox.
May I add this code for new pull request?

_iePastingHack(){
 const uaMatch = navigator.userAgent.match(/Trident\/(\d+)\.\d/);
 if (uaMatch){

   const pasteFile = function(){
     var type = "image";
     var content = "";
   }

   var pasteList = [];

   this.$().append( Ember.$("<div id='contenteditable' contenteditable='true' style='height: 0; width: 0; overflow: hidden'></div>") );
   this.$("textarea").off('keydown.contenteditable');
   this.$("textarea").on('keydown.contenteditable', event => {
       if ((event.ctrlKey || event.metaKey) && (event.keyCode === 86)) {

         const textarea = this.$("textarea")[0];
         const selectionStart = textarea.selectionStart;
         const selectionEnd = textarea.selectionEnd;

         // Focus the contenteditable div.
         const contentEditableDiv = this.$('#contenteditable');
         contentEditableDiv.focus();

         // The paste doesn't finish immediately and we don't have any onpaste
         // event, so wait for 100ms which _should_ be enough time.
         setTimeout(() => {

           var file = new pasteFile();

           const dataURLtoBlob = function(dataURL) {
             // Decode the dataURL    
             var binary = atob(dataURL.split(',')[1]);
             // Create 8-bit unsigned array
             var array = [];
             for(var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
             }
             // Return our Blob object
             return new Blob([new Uint8Array(array)], {type: 'image/png'});
           };

           const pastedImg  = contentEditableDiv.find('img');
           if (pastedImg.length === 1) {                                       
              file.type = "image";                                                                                                                                                                                330,3-6       51%
              file.content = dataURLtoBlob(pastedImg.attr('src'));           
              pasteList.push(file);                                          
              pastedImg.remove();                                            
            }else{                                                           
              if(contentEditableDiv.text() != ""){                           
                contentEditableDiv.find("br").replaceWith("\n");             
                                                                             
                file.type = "text";                                          
                file.content = contentEditableDiv.text();                    
                pasteList.push(file);                                        
                contentEditableDiv.text("");                                 
              }else{                                                         
                file = pastedList[pastedList.length-1];                      
              }                                                              
            }                                                                
                                                                             
            // For restoring the selection.                                  
            const textareaContent = $(textarea).val()                        
                 ,startContent = textareaContent.substring(0, selectionStart)
                 ,endContent = textareaContent.substring(selectionEnd);      
                                                                             
            const restoreSelection = function(pastedText) {                  
              textarea.focus();                                              
              $(textarea).val( startContent + pastedText + endContent );     
              textarea.selectionStart = selectionStart + pastedText.length;  
              textarea.selectionEnd = textarea.selectionStart;               
            };                                                               
                                                                             
            if (file.type == "text") {                                       
              restoreSelection(file.content);                                
            } else {                                                         
              restoreSelection("");                                          
              this.$().fileupload('add', {files: file.content});             
            }                                                                
                                                                             
          }, 100);                                                           
        }                                                                    
    });                                                                      
  }                                                                          
} 


(Jeff Atwood) #2

No – IE11 is barely supported. If you can get it working in MS Edge that is more interesting.


(Jeff Atwood) #3

This is something that could be in the encouragement fund @erlend_sh. Along with Safari.


(Erlend Sogge Heggen) #5

When does Safari not work? If I right-click and Copy "some-image" and then paste that into this composer, it is successfully entered and uploaded:

Screen Shot 2017-08-16 at 14.56.42

The addition of the screenshot name & timestamp is out of the ordinary, but it works. Is there a different Safari use case that’s broken?


(Jeff Atwood) #6

Interesting, I don’t think Safari used to work.


(Erlend Sogge Heggen) #7

We are looking to sponsor someone to do this work. Need someone with access to a Windows computer!

PM me if interested.


(Jeff Atwood) #8

Only for ms edge though to be clear. Ignore ie11.


(Rob Nicholson) #9

Looks like one of the later versions has also broken pasting into the composer with Edge running on the Fall Creators Edition of Windows 10. If I could remember how to find the version number of Discourse, I’d post the version number. Works fine with Chrome.

Later… ahh yes, of course, it’s in the meta tags - very user friendly :slight_smile: The CAMRA site is running “Discourse 1.9.0.beta15” which is the same as Meta. And pasting doesn’t here either. Definitely used to work on Edge but I’ve not posted for a while.

NOTE: realised that my PC is not running the Fall Creators edition - I’m still on Creators edition. But it doesn’t work either in Fall Creators.

Should I start a new topic?


(Vinoth Kannan) #10

Hi Rob,

Thanks for reporting. Currently I am checking the issue.


Unable to paste into composer window when using Edge
(Vinoth Kannan) #11

@Rob_Nicholson It is fixed now. Can you please confirm it by rechecking in your browser?


(Rob Nicholson) #12

image


(Rob Nicholson) #13

Wow - yes, that worked. Fast work!! Was this a code or configuration change, i.e. can we make the same change over on our own Discourse system?


(Sam Saffron) #14

sure, just deploy tests-passed


(Sam Saffron) #17

This topic was automatically closed after 21 hours. New replies are no longer allowed.