Paste from Word is not fired automatically

[Wiktor Walc]

1. Clear browser cache in IE11.
2. Open the replacebycode sample.
3. Open in MS Word the attached document, select all (CTRL+A) and copy it (CTRL+C).
4. Paste the clipboard into the editing area using CTRL+V.
5. See that the font color has not been cleaned up, although it should be by the pastefromword filter. This is because the pastefromword filter did not run at all.

[Piotr Jasiun]

When I paste data from Word to Chrome I get:

<p class="MsoNormal"><s><u><span lang="EN-US" style="font-size:14.0pt;line-height:
115%;color:red">Test font<o:p></o:p></span></u></s></p>

What is properly recognized thanks to specific class.

But when I paste the same data to IE11 I get:

<font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 10pt;"><s><u><span lang="EN-US" style="color: red; line-height: 115%; font-size: 14pt;"><font face="Calibri">Test font</font></span></u></s></p><font color="#000000" face="Times New Roman" size="3">

</font>

Also dataTransfer is empty (no Text nor URL data), so there is no easy way to recognize this data as from Word.

What we could to is enabling pasteFromWord transformation, or part of it (for example #12750), as a default transformation for every paste and add option to disable it.

[Piotrek Koszuliński]

Hmm... content.match( /<font / )? :D

This is at the same time great that pasted content is clean, but also a real problem. Only CKEditor 4.6 will be able to come with rescue, because the transformations will be implemented by the ACF, not by the separate filter. For now... we can extend the heuristic to enable the filter when HTML contains a span or font tags or the style attribute.

[Piotr Jasiun]

Bad news is that the pasted contents depends on the contents.css file and may have no <font> tag. For example if I paste 2 simple paragraphs:

Foo
Bar

With standard contents.css I get:

<font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><span style='font-family: "Times New Roman",serif;'><font color="#000000" size="3">Foo</font></span></p><font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><span style='font-family: "Times New Roman",serif;'><font color="#000000" size="3">Bar</font></span></p><font color="#000000" face="Times New Roman" size="3">

</font>

Without contents.css I get:

<p style="margin: 0cm 0cm 8pt;"><span style='font-family: "Times New Roman",serif;'>Foo</span></p>

<p style="margin: 0cm 0cm 8pt;"><span style='font-family: "Times New Roman",serif;'>Bar</span></p>

Good news is that any slightly more complex document will be recognized properly thanks to mso-* style, so:

Header:

<font color="#000000" face="Times New Roman" size="3">

</font><h1 align="center" style="margin: 12pt 0cm 0pt; text-align: center;"><span lang="EN-US" style="mso-ansi-language: EN-US;"><font color="#2e74b5" face="Calibri Light" size="5">Header</font></span></h1><font color="#000000" face="Times New Roman" size="3">
...

Table:

<table style="border-collapse: collapse; mso-table-layout-alt: fixed; mso-yfti-tbllook: 1184; mso-padding-alt: 0cm 0cm 0cm 0cm;" border="0" cellspacing="0" cellpadding="0" summary="Event Info">

List:

<font color="#000000" face="Times New Roman" size="3">

</font><ul style="list-style-type: disc; direction: ltr;"><li style="font-style: normal; font-weight: normal;"><p style="font-style: normal; font-weight: normal; margin-top: 0cm; margin-bottom: 0pt; mso-list: l0 level1 lfo1;">A</p></li><li style='color: rgb(0, 0, 0); font-family: "Calibri",sans-serif; font-size: 11pt; font-style: normal; font-weight: normal;'><p style='color: rgb(0, 0, 0); font-family: "Calibri",sans-serif; font-size: 11pt; font-style: normal; font-weight: normal; margin-top: 0cm; margin-bottom: 8pt; mso-list: l0 level1 lfo1;'>B</p></li></ul><font color="#000000" face="Times New Roman" size="3">

</font>

Text effect:

<font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><b style="mso-bidi-font-weight: normal;"><span style='color: rgb(68, 114, 196); mso-themecolor: accent5; mso-style-textoutline-type: solid; mso-style-textoutline-fill-color: white; mso-style-textoutline-fill-themecolor: background1; mso-style-textoutline-fill-alpha: 100.0%; mso-style-textoutline-outlinestyle-dpiwidth: .75pt; mso-style-textoutline-outlinestyle-linecap: flat; mso-style-textoutline-outlinestyle-join: round; mso-style-textoutline-outlinestyle-pctmiterlimit: 0%; mso-style-textoutline-outlinestyle-dash: solid; mso-style-textoutline-outlinestyle-align: center; mso-style-textoutline-outlinestyle-compound: simple; mso-effects-shadow-color: #8FAADC; mso-effects-shadow-themecolor: accent5; mso-effects-shadow-alpha: 100.0%; mso-effects-shadow-colortransforms: "lumm=60000 lumo=40000"; mso-effects-shadow-dpiradius: 1.0pt; mso-effects-shadow-dpidistance: 3.0pt; mso-effects-shadow-angledirection: 2700000; mso-effec

Event text formatting (bold or italic):

<font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><b style="mso-bidi-font-weight: normal;"><font color="#000000" face="Calibri" size="3">foo</font></b></p><font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><i style="mso-bidi-font-style: normal;"><s><u><sup><span style="background: yellow; color: red; mso-highlight: yellow;"><font face="Calibri" size="2">foo</font></span></sup></u></s></i></p><font color="#000000" face="Times New Roman" size="3">

</font>

So case attached to this ticket is very specific. It does not contains any listed formatting, and for underline, strike and color mso-* style is not added. I think that we can threat this example as an exception: sample too simple it has no mso-* style, but enough complex that filtering was needed.

[Piotr Jasiun]

If we paste just a red paragraph:

With content.css:

<font color="#000000" face="Times New Roman" size="3">

</font><p style="margin: 0cm 0cm 8pt;"><span style="color: red;"><font face="Calibri" size="3">foo</font></span></p><font color="#000000" face="Times New Roman" size="3">

</font>

Without content.css:

<p style="margin: 0cm 0cm 8pt;"><span style="color: red;"><font face="Calibri">foo</font></span></p>

[Piotr Jasiun]

We decided that this is edge case. In most cases we are able to recognize content from word and in the rest we usually do not need special processing. This case is very specific, because it contains only underline, strike and color, so 3 formats which do not have special style. Also we are not able to recognize easily colorful paragraph from Word: color can be style of <span> or <font>, font can be defined with face attribute or font-family style, margin can use cm, pt or in, etc.