Override Draft.js copy-paste to preserve full editor content

[thibaudcolas]

Initially based on springload/draftail#148. This addresses springload/draftail#147, facebookarchive/draft-js#787.

Originally, the code from that first PR only made it work for editors within the same page. I think I found a way to make it work for all editors within the same site (origin), and potentially for all editors everywhere always.

• The initial approach (4366190) from WIP: On paste, read content from internal clipboard via paste registry springload/draftail#148 relies on an in-memory registry of all editors, so they can access each other's internal clipboard on paste.
• The "within the same site" approach hasn't been implemented. The idea would be to put the contents of the editor's internal clipboard in localStorage on copy, then on paste other editors can check what is stored there based on the data-editor attr they receive in HTML. This would work between pages and between page reloads of a given site, in a given browser.
• The most promising approach (WIP, 1058d5a) works somewhat similarly, except the copied content is serialised into the editor's clipboardData. The catch is that the content isn't stored with its own mime type – it's injected in the HTML content instead, so other tools where the paste could go can still process HTML as usual. For Draft.js editors, they check the HTML for the serialised content and then use this. This means it will work across sites, browsers, in all circumstances.

All of those approaches rely on the internals of Draft.js to some extent, and generally can be considered hacks. Lucky for us, in all those scenarios there would still be the normal "process paste from HTML" behavior as a fallback, so the risk for breakage is minimal.

[Pomax]

small note: JSON.parse can throw so even if it's not expected to, a try/catch with an error reporter is a good idea.

[thibaudcolas]

Here are the Draft.js issues this should fix (to be confirmed after testing):

• Copy/paste between editors – facebook/draft-js#787
• Copy/paste between editors strips soft returns – facebook/draft-js#1154
• Sequential unstyled blocks are merged into the same block on paste – facebook/draft-js#738 (at least between Draft.js editors)

And non-Draft.js:

• feature request: idempotent copy/paste behaviour springload/draftail#147
• copy paste from rich text editor X to rich text editor Y loses links/hr wagtail/wagtail#4432
• (part of Known issues with the Draftail rich text WYSIWYG editor and its dependencies wagtail/wagtail#4274)
• (part of Known issues with Draftail, Draft.js, contenteditable, and other dependencies springload/draftail#138)

[thibaudcolas]

After some early testing I can confirm this does fix those three issues.

Something else came up while testing: if the selection contains only one line of text, with the current implementation, the serialised content won't be put in the clipboard by the browser and make its way to the other editors. I'll have to check if there is a better way.

[thibaudcolas]

I've fixed the "doesn't work for one-liners" problem, this is now good to go.

Tested in:

• Windows 10, IE11 (no support, default "plain text" behavior)
• Windows 10, Edge 17
• Windows 10, Firefox latest
• macOS 10.13, Firefox latest
• macOS 10.13, Chrome latest
• macOS 10.13, Safari latest
• iOS 11.3 Safari

It could technically work in IE11 (and we could get IE11 to have rich text copy-paste between editors) by combining the current approach with that of springload/draftail#148. It's not something I'll do myself though.