Skip to content

Handle image data paste early#4298

Merged
ellatrix merged 2 commits intomasterfrom
fix/data-paste-chrome
Jan 10, 2018
Merged

Handle image data paste early#4298
ellatrix merged 2 commits intomasterfrom
fix/data-paste-chrome

Conversation

@ellatrix
Copy link
Copy Markdown
Member

@ellatrix ellatrix commented Jan 4, 2018

Description

Fixes #3537. In Chrome, image data paste fails because the onPastePreProcess event does not happen. TinyMCE has different paste logic and image data handling, so it would be better if we handle data paste early instead of letting it pass unnecessarily through TinyMCE.

How Has This Been Tested?

Copy an image in Chrome and paste it in Gutenberg.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows has proper inline documentation.

@mcsf
Copy link
Copy Markdown
Contributor

mcsf commented Jan 5, 2018

Preliminary testing reveals this TypeError in tinymce:

gutenberg-paste-image

screen shot 2018-01-05 at 14 23 59

@ellatrix
Copy link
Copy Markdown
Member Author

ellatrix commented Jan 5, 2018

@mcsf I cannot reproduce this. Is this Chrome?

this.props.onReplace( content );
} else {
// Necessary to get the right range.
// Alse done in the TinyMCE paste plugin.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

little typo "alse".

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, thanks!

@ellatrix ellatrix force-pushed the fix/data-paste-chrome branch from 4ed15cb to fc4bffa Compare January 8, 2018 09:37
@mcsf
Copy link
Copy Markdown
Contributor

mcsf commented Jan 8, 2018

@iseulde: yes, Chrome. See:

gutenberg-chrome-paste-image

@ellatrix
Copy link
Copy Markdown
Member Author

@mcsf Cool, seeing the error now. :)

@mtias mtias added this to the 2.0.0 milestone Jan 10, 2018
@ellatrix
Copy link
Copy Markdown
Member Author

It's finny that this error happens at code where there is the following comment:

// WebKit/Blink might clone the div so
// lets make sure we remove all clones
// TODO: Man o man is this ugly. WebKit is the new IE! Remove this if they ever fix it!

@ellatrix
Copy link
Copy Markdown
Member Author

We're doing event.preventDefault() and then down the line this is causing the error:

if (e.isDefaultPrevented() || isBrokenAndroidClipboardEvent(e)) {
    pasteBin.remove();
    return;
}

So at first sight it seems like a bug in TinyMCE.

@ellatrix
Copy link
Copy Markdown
Member Author

See https://wordpress.slack.com/archives/C0UCMQP0F/p1515587384000026.

I added a timeout (like the one for splitting content) to allow the pastern to be removed before we replace the block (and the editor).

@ellatrix
Copy link
Copy Markdown
Member Author

@mcsf How is it looking now?

@ellatrix ellatrix force-pushed the fix/data-paste-chrome branch from fc4bffa to 3ed190c Compare January 10, 2018 12:39
@mcsf
Copy link
Copy Markdown
Contributor

mcsf commented Jan 10, 2018

@mcsf How is it looking now?

Yay, it works now, thanks!

@ellatrix
Copy link
Copy Markdown
Member Author

Thanks!

@ellatrix ellatrix merged commit e1b85f6 into master Jan 10, 2018
@ellatrix ellatrix deleted the fix/data-paste-chrome branch January 10, 2018 15:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants