Inline styles from clipboard data transfer when pasting from Word

[Marek Lewandowski]

While serializing to HTML, Word inlines styles to some elements, while leaving classes in others.

A style element that contains all the styles for a given selector is put in html > head element of text/html clipboard which is currently not pasted into CKEditor.

What we need to do here is to make sure that we check text/html dataTransfer to check for these style elements, and inline them into matched elements.

One thing to keep in mind that we don't want to inline mso- specific styles. At the end it's fine for us to inline even unknown css, as it will get stripped by ACF after processing.

[Tomasz Jakut]

The feature is working, however some tests are still failing:

• ​http://tests.ckeditor.dev:1030/tests/plugins/pastefromword/generated/tickets5
• ​http://tests.ckeditor.dev:1030/tests/plugins/pastefromword/generated/inline_styles

The first test seems to fail due to changes in HTML markup that are made by using native DOMParser. The second test needs more investigation.

The main changes made in this ticket are:

• introduction of second parameter to CKEDITOR.plugins.clipboard.dataTransfer.getData that allows to fetch the original pasted HTML (full HTML, not stripped to body only)
• adding CKEDITOR.plugins.pastefromord.inlineStyles that parses pasted HTML using native DOMParser, fetches all style tags and rewrite them to [style] attributes for appropriate elements.

Current WIP is on ​branch:t/16847.

[Marek Lewandowski]

Some early review feedback:

• ​This condition could be merged into one.
• ​CKEDITOR.plugins.pastefromword.inlineStyles is missing API docs.
• Actually word365 (provided in fixtures) is not an accurate version, AFAIR for our PC currently it's word2013. You'll find this information in about option.

• text/html datatransfer content in fixtures looks good, but we need to reorganize it.

As you see the datatransfer is exact same for every browser and it makes sense, because it's Word which is setting the clipboard, and browser has only to provide API to access it.

• Change tests/plugins/pastefromword/manual/inlinestyles.md manual test explicitly be based on provided docx fixture and reference it's path in the manual test description. Also provide precise repro steps, use this missing Verdana font paragraph which is a subject of issue discussion.

• There's some garbage leaked to the end of pasted content, when pasting in Chrome from InlineStyles.docx:

Surprisingly I can't repro it on Firefox.

From what I have seen, this garbage is added by the Chrome itself, even though clipboard held by OS is fine - so it's clearly a Chrome fault. You can see it in tests/plugins/pastefromword/generated/_fixtures/InlineStyles/word2013/chrome.html.

It's even weirder because it occurs... randomly :D I saw that it happens if I had a lot of plain text in clipboard, and copied content from Word after this? Can't tell exactly.

I've also did minor docs updates, changes were pushed to the branch.

• docs updates,
• added docx fixtures generated on Windows,
• added liststyle, htmlwriter plugins to the manual test
  • without liststyle Roman numbering were not preserved,
  • htmlwriter plugin for source button output readability.

[Tomasz Jakut]

The inliner is implemented and enabled in browsers that support custom data types via dataTransfer. Also tests are updated. Pushed to ​branch:t/16847-nbsp.

[Marek Lewandowski]

Good job! We're almost there!

• This function is not necessary: ​https://github.com/cksource/ckeditor-dev/blob/6699748/plugins/pastefromword/filter/default.js#L737-L739 it should be inlined.
• You have moved functions into CKEDITOR.plugins.pastefromword.styles while it was originally requested to put it in into dedicated ns: CKEDITOR.plugins.pastefromword.styles.inliner. All 3 of these methods are tightly dependent on each other, so it make sense to put them together, while not generic enough let it sit directly in style namespace. Also remember that function names should be simplified.
• ​Test's ignore check reuse same condition ​as the actual code.

Pushed a minor change to the branch.

[Marek Lewandowski]

LGTM merged to major with ​git:e8afc33cd.