Good copy/pasting support

[thibaudcolas]

Expected behavior

• Flattens lists that are too nested.
• Strip all blocks which aren't allowed in the current field – One needs to be careful when removing default blocks from the block map, and/or aliasing elements. If an element is missing, the editor will crash.
• IMAGE entities are created, but come with an unstyled block instead of atomic. This should be normalised.
• There is no built-in way to configure whether IMAGE and LINK are available in the first place. They should be removed if necessary (both from the block, and the entity map).
• There is no way to customise which styles are available. Styles should be removed if necessary.

Unexpected behavior

• Drops the style of the first block in the clipboard
• Concatenates multiple paragraphs into one block (whitespace is missing)
• Drops whitespace in front of text node right after inline entity
• [ ] Be smart about pasting of uppercase text? IS SHOUTING ALLOWED? WHAT IF YOU COPY/PASTE AN H2?

Example big content to copy paste:

• http://kiwibank.co.nz/personal-banking/investments/term-deposits/

• http://kiwibank.co.nz/personal-banking/investments/notice-saver/

• http://kiwibank.co.nz/personal-banking/kiwisaver/what-is-kiwisaver/

• https://www.kiwibank.co.nz/about-us/legal-docs/#kiwibanks-quarterly-disclosure-statements-and-the-annual-reports-of-kiwibank-and-its-related-entities - The content inside an accordion block will be a rich text area so need to be able to probably build this content in a rich text field…i.e.. heading, doc link, heading, doc link, terms and conditions etc.

• https://www.kiwibank.co.nz/personal-banking/credit-cards/low-interest-cards/low-rate-mastercard/ - this page has an example of the inline rates that get loaded from the current api

• https://www.kiwibank.co.nz/about-us/security/common-banking-frauds-and-scams/card-fraud/

• https://www.kiwibank.co.nz/personal-banking/home-loans/getting-a-home-loan/first-home-buyers/should-you-buy/ - ignore custom things like the grid with two columns of text. look at the big blocks of text that will most likely be able to be build with one rich text area :)

• https://www.kiwibank.co.nz/personal-banking/home-loans/getting-a-home-loan/first-home-buyers/finding-a-house/

• The first home buyers guide inside the getting a home loan section has some pages that have a lot of content if you need to copy paste big blocks for testing.

• Try copy/pasting from Word.

• Try copy/pasting from Pages.

[loicteixeira]

I also think copy/paste should strip all blocks which aren't allowed in the current field.

At the moment, if you paste some text with a list or a link in a field which doesn't allow them (no buttons), they will remain and appear in the output.

[thibaudcolas]

When implementing, see:

• https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Custom-Block-Render.md#configuring-block-render-map
• copy and paste from word doc? facebookarchive/draft-js#728
• Pasted paragraphs are not divided into blocks facebookarchive/draft-js#465
• https://github.com/facebook/draft-js/blob/master/src/model/encoding/convertFromHTMLToContentBlocks.js#L173
• Pasting Rich Text Into Chrome & Firefox on Windows Adds A Space On Either Side facebookarchive/draft-js#416 (comment)
• Can't limit maxDepth of list when pasting. facebookarchive/draft-js#474
• https://github.com/facebook/draft-js/search?utf8=%E2%9C%93&q=paste+handlePastedText&type=Code

[thibaudcolas]

After struggling with this and arriving where I'm at in 58866cd, obvious difficulties I can think of:

• IMAGE entities are created, but come with an unstyled block instead of atomic. This should be normalised.
• One needs to be careful when removing default blocks from the block map, and/or aliasing elements. If an element is missing, the editor will crash.
• There is no built-in way to configure whether IMAGE and LINK are available in the first place. They should be removed if necessary (both from the block, and the entity map).
• There is no way to customise which styles are available. Styles should be removed if necessary.

For now I've started normalising content after insertion, via onChange. Another approach could be to use https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#convertfromhtml in handlePastedText, then normalise, then insert the new blocks where the selection is.

[thibaudcolas]

This is under way at #50. I've made good progress, but I'm sure there are a lot of edge cases this is not handling.

[thibaudcolas]

Fixed by #50. I have more testing to do but this looks fairly solid so far. The PR is only/mostly about removing styles that are not allowed, and isn't much concerned with ensuring that retained styles actually are what they are meant to be. I'll open separate issue(s) for that, and document gotchas next.