Table borders discrepancies when copy-pasting from Excel

kubaklatt commented 3 weeks ago

📝 Provide detailed reproduction steps (if any)

Open for example https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office-enhanced.html
Paste the table from Excel, e.g. from this file: CKEditor copy-paste sample.xlsx

Clipboard from Excel:

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file:////Users/jakubklatt/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip.htm">
<link rel=File-List
href="file:////Users/jakubklatt/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip_filelist.xml">
<style>
<!--table
    {mso-displayed-decimal-separator:"\,";
    mso-displayed-thousand-separator:" ";}
@page
    {margin:.75in .7in .75in .7in;
    mso-header-margin:.3in;
    mso-footer-margin:.3in;}
tr
    {mso-height-source:auto;}
col
    {mso-width-source:auto;}
br
    {mso-data-placement:same-cell;}
td
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:11.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Calibri, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:general;
    vertical-align:bottom;
    border:none;
    mso-background-source:auto;
    mso-pattern:auto;
    mso-protection:locked visible;
    white-space:nowrap;
    mso-rotate:0;}
.xl65
    {border-top:none;
    border-right:.5pt solid windowtext;
    border-bottom:none;
    border-left:none;}
.xl66
    {border-top:none;
    border-right:none;
    border-bottom:.5pt solid windowtext;
    border-left:none;}
.xl67
    {border-top:none;
    border-right:.5pt solid windowtext;
    border-bottom:.5pt solid windowtext;
    border-left:none;}
.xl68
    {text-align:left;}
.xl69
    {text-align:left;
    border-top:none;
    border-right:.5pt solid windowtext;
    border-bottom:none;
    border-left:none;}
-->
</style>
</head>

<body link="#0563C1" vlink="#954F72">

<table border=0 cellpadding=0 cellspacing=0 width=324 style='border-collapse:
 collapse;width:243pt'>
<!--StartFragment-->
 <col width=108 span=3 style='mso-width-source:userset;mso-width-alt:3456;
 width:81pt'>
 <tr height=20 style='height:15.0pt'>
  <td height=20 width=108 style='height:15.0pt;width:81pt'>twas</td>
  <td width=108 style='width:81pt'>brillig</td>
  <td class=xl65 width=108 style='width:81pt'>and</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 style='height:15.0pt'>the</td>
  <td>slithy</td>
  <td class=xl65>toves</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 class=xl66 style='height:15.0pt'>did gyre</td>
  <td class=xl66>and gimble</td>
  <td class=xl67>in the wabe</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td colspan=3 height=20 class=xl68 style='border-right:.5pt solid black;
  height:15.0pt'>all mimsy were the borogroves</td>
 </tr>
<!--EndFragment-->
</table>

</body>

</html>

✔️ Expected result

All borders are copied correctly and the table looks like in Excel.

❌ Actual result

The table is not copied correctly.

In this case, for A1:B2 the cells have a border, where in Excel there is no border.

Additionally, the right border of the table is not copied correctly and does not look like in Excel

❓ Possible solution

I will link in the comment a specific PR that makes the tables copy better along with an example

📃 Other details

Browser: Any
OS: Any

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

kubaklatt commented 3 weeks ago

https://github.com/ckeditor/ckeditor5/pull/16880 - This PR improves the correctness of copied borders from Excel

For example, this is what the table from the sample file looks like:

A1:B2 no longer has borders, but only the border on the right side is missing.

Witoso commented 3 weeks ago

Please paste the clipboard content, it always makes it easier to analyze.

but only the border on the right side is missing.

Most likely due to the fact that we don't support setting borders on individual side but this needs to be confirmed with the clipboard output.

kubaklatt commented 3 weeks ago

@Witoso I edited the issue and added the clipboard from Excel 👌🏼

ckeditor / ckeditor5