Margin is not preserved when pasting from Word

[Zonciu]

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

When I paste text from word, the paragraph margin is missing.

An example file could be reproduced with THIS file.

1. Open Paragraph_indentation.docx in Word.
2. Copy whole document.
3. Paste to CKEditor.

Expected result

"One level indent paragraph" and "Two level indent paragraph" should be indented.

Actual result

"One level indent paragraph" and "Two level indent paragraph" have no indentation.

Other details

• Browser: Any
• OS: Any
• CKEditor version: 4.7.1
• Installed CKEditor plugins: clipboard, pastefromword

[beatadelura]

@Zonciu Could you please provide more information about this issue, e.g. MS Word version, word file example with the text you're trying to paste and exact steps to reproduce?

[Zonciu]

@beatadelura
Office pro plus 2016
I'd tried doc and docx both.

Word file:
IndentTest.docx

Here is the raw paste text I got

<div style="border: 1px solid;" contenteditable="true">

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">No indent</span></p>

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">&nbsp;</span></p>

<p style="margin: 0px; text-indent: 24pt;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">Right click – paragraph
– indent first line – 2 char</span></p>

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">&nbsp;</span></p>

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;"><span style="margin: 0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>Indent with tab key</span></p>

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">&nbsp;</span></p>

<p style="margin: 0px 0px 0px 28px; text-indent: 24pt;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">Right click
– paragraph – indent first line – 2 char, and then indent with tab key</span></p>

<p style="margin: 0px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">&nbsp;</span></p>

<p style="margin: 0px 0px 0px 28px;"><span lang="EN-US" style="margin: 0px; font-size: 12pt;">Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph. Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph. Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph. Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph. Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph. Indent the whole paragraph.
Indent the whole paragraph. Indent the whole paragraph.</span></p>

</div>

In pastfromword plugin's filter, normalizedStyles function removes 'text-indent' style from the raw text
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/pastefromword/filter/default.js#L501

If I set the indent by righ click - paragraph - indent, the indent will be remove,
If I set the indent by tab key, the indent will not be remove —— because the indent was transform to space, not a text-indent style anymore.

If I make it to ignore the pastfromword filter, the raw text will be pasted and it shows very good, but I'm not sure will it cause bugs when I edit it in ckeditor.

[beatadelura]

@Zonciu Thank you for details. In CKEditor, we support margins for text indentation, so text-indent is treated as a redundant. Anyway, It's a good idea to extend support for pastefromword plugin, so I'll treat this issue as a feature request.

[celsowm]

Hi @beatadelura any news about this feature? thanks in advance !

[fikoborquez]

@beatadelura please let us know if there is any news

[mlewand]

@celsowm @fikoborquez please add 👍 reaction to the first comment in this issue. This is the best way to show us your support for this feature request.

[engineering-this]

For paragraphs, this feature is simple to implement. Word outputs paragraph margin as margin, and first line indentation as text-indent which is relative to the margin. As we don't support text-indent style in our editor (#2198), filtering this attribute doesn't spoil anything, and everything looks pretty ok.

However, for lists, there are some difficulties. In HTML compared to Word, margin and text-indent work differently. Please take a look at the following example:

Top slider outputs text-indent - in this case it is -0.25 inch.

Bottom slider outputs margin-left - in this case it is 0.5 inch.

This is what a typical list in Word would look like. Currently we ignore both styles for lists in our editor, but if we try to create a list item with such styles, it would look broken. For lists:

text-indent

• In Word: changes a position of a bullet, positive value moves first line only to prevent from overlapping.
• In HTML: changes first line indentation without moving the bullet, any negative value results in the bullet overlapping on a text.

margin

• In Word: moves the text, doesn’t affect the bullet.
• In HTML: moves a whole block including the bullet.

To workaround this we could calculate proper margins and use padding to protect bullets from overlapping text. In contrast to lists in our editor, lists in Word, by default, have margins and indents. If a default list pasted from Word varied from a default list created in the editor, I would consider this buggy. On the other hand, normalizing them would be quite complex.

As we don’t support margins in lists pasted from Word (some browsers doesn’t share all needed information for lists hierarchy) we could consider a bigger feature in future for adding a Word-like ruler with sliders for managing margins and text-indent.

[Comandeer]

This feature was merged into major, will be available in CKEditor 4.11.0.

[mlewand]

Initial report touched two separate topics. Margins and text indentation. Though both looks like "text spacing thingy", the two are different as explained by @engineering-this. Thus purpose of this ticket was clarified to cover paragraphs margins.

Text indentation has been extracted to #2198 feature request.

I have updated the original report to reflect that.

And for all of you watching this issue you can simply try it out in our major release (4.11.0) preview.