Support for table alignment when copying from Word

LangQian commented 3 years ago

📝 Provide detailed reproduction steps (if any)

In a Word document, create a table and left-align it
Copy the table and paste it into CK Editor

✔️ Expected result

The table should stay left-aligned in CK Editor.

❌ Actual result

The table was centre-aligned.

📃 Other details

The issue can be reproduced here: https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

LukaszGudel commented 3 years ago

Hello. Thank you for the report. I can confirm that table alignment is not kept when copying from Word. It is not supported yet by PasteFromOffice plugin. I'm converting this issue to feature request.

In the meantime you can change table alignment manually using Table properties button after selecting the table. This feature is available after installing TableProperties plugin.

mlewand commented 1 year ago

MS Word pastes following markup:

<div align=right>

<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
 style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
 mso-yfti-tbllook:1184;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
  <td width=138 valign=top style='width:103.25pt;border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p>&nbsp;</o:p></p>
  </td>
  <td width=150 valign=top style='width:112.5pt;border:solid windowtext 1.0pt;
  border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p>&nbsp;</o:p></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:1;mso-yfti-lastrow:yes'>
  <td width=138 valign=top style='width:103.25pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0in 5.4pt 0in 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p>&nbsp;</o:p></p>
  </td>
  <td width=150 valign=top style='width:112.5pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p>&nbsp;</o:p></p>
  </td>
 </tr>
</table>

</div>

oleq commented 1 year ago

I'm posting a Word document for easier reproduction.

Table_alignment.docx

oleq commented 1 year ago

Also, please check out the configuration we're supporting for table properties https://ckeditor.com/docs/ckeditor5/latest/api/module_table_tableconfig-TablePropertiesConfig.html#member-defaultProperties (https://ckeditor.com/docs/ckeditor5/latest/api/module_table_tableconfig-TablePropertiesOptions.html). This must be taken into account.

illia-stv commented 1 year ago

Okay, so it's look like MS Word treat left alignment as default. So in case with center and right alignment we have helpful div with alignment attribute here:

In case with left alignment we do not have this div unfortunately

It's make sense because when you insert table in word, by default it has left alignment.

I suggest to handle this case in this way: if table has not defined any alignment it means it's left and add this by ourself, what do you think? @mlewand @oleq @Dumluregn @pszczesniak

pszczesniak commented 1 year ago

As i can see is exactly like you wrote @illia-stv . When table has no parent div it means that it's left aligned.

Language direction doesn't matter. Attribute dir=RTL is set on all paragraphs, hX and so on but not on tables (only on tags inside cells like <p>). Tags <body> and <html> are also without dir attribute.

Example (a part) clipboard HTML from Word document with set RTL text direction and table is aligned to left (in Word no alignment means left alignment regardless of which text direction is set):


<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p>&nbsp;</o:p></span></p>

<table class=MsoNormalTable border=1 cellspacing=0 cellpadding=0
style='margin-left:.9pt;border-collapse:collapse;border:none;mso-border-alt:
solid windowtext .5pt;mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-border-insideh:
.5pt solid windowtext;mso-border-insidev:.5pt solid windowtext'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;height:47.8pt'>
<td width=104 valign=top style='width:77.7pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.8pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p>&nbsp;</o:p></span></p>
</td>
<td width=119 valign=top style='width:89.1pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.8pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p>&nbsp;</o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:1;mso-yfti-lastrow:yes;height:47.75pt'>
<td width=104 valign=top style='width:77.7pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:47.75pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p>&nbsp;</o:p></span></p>
</td>
<td width=119 valign=top style='width:89.1pt;border-top:none;border-left:
none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.75pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p>&nbsp;</o:p></span></p>
</td>
</tr>
</table>

illia-stv commented 1 year ago

Fortunately in case with RTL, MS Word wrap table in div with alignment attribute each alignment option(left, center, right)

HTML in Clipboard Screenshot 2023-07-10 at 14 22 58 Screenshot 2023-07-10 at 14 23 20 Screenshot 2023-07-10 at14 23 37

In MS Word

In CKE5

Unfortunately we found another problem which is on the master at the moment. As you see when you copy table from MS Word and paste it to RTL in CKE5 there is no right board in the table.

mlewand commented 1 year ago

That's great news that MS Word adds explicitly alignment in case of RTL langs!

So to sum it up, we need handlings for pasting from MS Word listed below.

When there's a table pasted from Word:

that has no parent div[align] element, it should be aligned to the left.
that has a parent div[align=center] element, then the model's table element should get tableAlignment attribute set to none per this line.
that has a parent element div[align=left] or div[align=right] then the model's table element should get tableAlignment set to left or right.

arkflpc commented 1 year ago

Reopening, because it had to be reverted by #14919.

vinodgubbala commented 2 months ago

There are multiple ways table would be aligned in editors. One is by adding align attribute to the parent div. Other by using display: flex and justify-content: flex-end; or center. For example, One Drive Word generates this.

ckeditor / ckeditor5