Firefox 50 makes image pasting hack superfluous

claas · July 31, 2016, 2:25am

There is still some time until Firefox 50 becomes stable in November 2016, but as a noteworthy number of developers could use it already from September when it will promoted to Firefox Developer Edition (in fact, I’m using it already with Firefox Nightly), I suppose it is not too early to point out that the following firefoxPastingHack for pasting images will not be necessary (and even counterproductive) any more due to clipboardData.items being implemented in Firefox 50 (see Mozilla Bug 906420):

github.com

discourse/discourse/blob/3200d836f70a4233c3d7b8ed7605ba1d2720d314/app/assets/javascripts/discourse/components/composer-editor.js.es6#L296-L377


      
          // Believe it or not pasting an image in Firefox doesn't work without this code
          _firefoxPastingHack() {
            const uaMatch = navigator.userAgent.match(/Firefox\/(\d+)\.\d/);
            if (uaMatch && parseInt(uaMatch[1]) >= 24) {
              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 => {
                // Catch Ctrl+v / Cmd+v and hijack focus to a contenteditable div. We can't
                // use the onpaste event because for some reason the paste isn't resumed
                // after we switch focus, probably because it is being executed too late.
                if ((event.ctrlKey || event.metaKey) && (event.keyCode === 86)) {
                  // Save the current textarea selection.
                  const textarea = this.$("textarea")[0];
                  const selectionStart = textarea.selectionStart;
                  const selectionEnd = textarea.selectionEnd;
          
                  // Focus the contenteditable div.
                  const contentEditableDiv = this.$('#contenteditable');
                  contentEditableDiv.focus();

This file has been truncated. show original

This said, pasting an image into Discourse using Firefox 50 currently yields two to four (mostly three) instances of the same image being inserted:

This is due to the fact that the paste event contains both a png and a jpeg version of the image. Whether this is intended or not, is expected to be cleared very soon (in Mozilla Bug 1290688) and so we can anticipate a fix or (if it’s a feature) a hint on how to solve this conceptually.

sam · July 31, 2016, 4:13am

Nice, perhaps we can switch to feature detection as opposed to user agent ?

claas · July 31, 2016, 12:17pm

That would be ideal. If not possible, it would suffice to add a version constraint here:

github.com

discourse/discourse/blob/3200d836f70a4233c3d7b8ed7605ba1d2720d314/app/assets/javascripts/discourse/components/composer-editor.js.es6#L299


      
            if (left + popupWidth > replyWidth) {
              left = replyWidth - popupWidth - 40;
            }
          
            return { position: "absolute", left, top };
          },
          
          // Believe it or not pasting an image in Firefox doesn't work without this code
          _firefoxPastingHack() {
            const uaMatch = navigator.userAgent.match(/Firefox\/(\d+)\.\d/);
            if (uaMatch && parseInt(uaMatch[1]) >= 24) {
              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 => {
                // Catch Ctrl+v / Cmd+v and hijack focus to a contenteditable div. We can't
                // use the onpaste event because for some reason the paste isn't resumed
                // after we switch focus, probably because it is being executed too late.
                if ((event.ctrlKey || event.metaKey) && (event.keyCode === 86)) {
                  // Save the current textarea selection.
                  const textarea = this.$("textarea")[0];
                  const selectionStart = textarea.selectionStart;

claas · August 17, 2016, 7:47pm

The issue is now fixed in Discourse and in Firefox, so this topic can be closed.

Topic		Replies	Views
Add IE11 Support for pasting images in the composer Feature	17	1826	January 4, 2019
Firefox has quirky copy/paste image behavior Feature	15	7850	August 13, 2024
Improved Image Handling Blog	5	674	March 28, 2022
MacOS Firefox image upload error Support	18	1427	January 22, 2022
Cannot upload images with Safari Bug	32	2379	May 24, 2023

Firefox 50 makes image pasting hack superfluous

Related topics