ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Published 20 hours ago • verified publisher icon ckeditor

Table styles compatibility with CKEditor 4 and office suites (Word, Excel, Google Docs)

Open jodator opened this issue 4 years ago • 3 comments

📝 Provide a description of the new feature

Follow-up for the #3287: This issue gathers content compatibility issues from the CKEditor 5's default conversion of various table properties.

The following applications should be covered:

  • CKEditor 4
  • Word
  • Excel
  • Google Docs

Most likely, work on each of those platforms will happen separately, but there's some overlap, so we need to make sure to make correct decisions when adding code to either ckeditor5-paste-from-office (normalizators) or ckeditor5-tables (converters).

If you'd like to see better support for pasting tables from one of the above mentioned apps add 👍 to this ticket and explain in a comment which apps are crucial to you.

jodator avatar Oct 23 '19 14:10 jodator

what CKEditor 5 CKEditor 4 Word GDocs
row height height style on each td in a row height style on individual td :information_source: height style on tr element and the same style on each td as well (pt units) :warning: height style on tr element (pt units), sets 0pt if row has no height defined
column width height style on each td in a column height style on individual td and on each td when using column resizing :information_source: width style on td as pt units and width attribute on td without unit :warning: width style on col inside colgroup (no units)
table height height style on table height TODO TODO
table width width style on table width TODO TODO
background color (table & cell) background-color style :ok: :information_source: background style :ok:
borders - style shorthands border-top, border-right, border-bottom, border-left shorthands :information_source: boder-style, border-color, border-width if same TRBL values, changes to border-top, border-right, border-bottom, border-left shorthands if values are differen border-top, border-right, border-bottom, border-left border-top, border-right, border-bottom, border-left
borders - behavior on table border-top, border-right, border-bottom, border-left shorthands :warning: border attribute on table for border width... border: none and uses border-collapse. border: none and uses border-collapse
borders - behavior on table cell ... ... :warning: border-right & border-bottom for "current", border-right for cell on left and border-bottom for cell above. :warning: border-top, border-right, border-bottom, border-left and border-right for cell on left and border-bottom for cell above
vertical alignment vertical-align style :ok: :warning: valign attribute on td... :ok:
horizontal text alignment ... text-align on td TODO TODO
padding padding sh on td :warning: cellpadding attirbute on table :ok: :ok:
table alignment align attribute on table :warning: wrapping <div> with align=right attribute

Legend:

  • :warning: - requires action in PFO plugin / incompatible setting
  • :information_source: - gets properly normalized to model values or sets different values but one is same as in CKE5
  • :ok: the same as expected

Side note: I don't know how to handle CKEditor 4 compatibility - we probably should support those mismatches as a generic conversion in TableProperties plugins just because others can paste similar styles - but OTOH maybe we could make them optional as CKEditor4Compatibility plugin (could use PFO logic also). I don't have strong opinions on this actually - just writing this down to not forget ;)

jodator avatar Oct 23 '19 14:10 jodator

Thanks for the details. I think it gives us a very good reference point to start working on better compatibility with Word, Excel or GDocs.

I don't see us working on this in the current iteration, though, so I'm removing the milestone.

Reinmar avatar Jan 29 '20 12:01 Reinmar

For anyone looking at this issue in the future, here's what GDocs puts in text/html clipboard mime type with such table copied:

HTML:

<html>

	<body>
		<!--StartFragment-->
		<meta charset="utf-8"><b style="font-weight:normal;"
			id="docs-internal-guid-aadc8e80-7fff-7116-1a20-860e04a1ca02">

			<div dir="ltr" style="margin-left:0pt;" align="left">
				<table style="border:none;border-collapse:collapse;">
					<colgroup>
						<col width="83" />
						<col width="125" />
						<col width="299" />
						<col width="17" />
					</colgroup>
					<tbody>
						<tr style="height:21pt">
							<td colspan="2"
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
							<td colspan="2"
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
						</tr>
						<tr style="height:21pt">
							<td
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
							<td colspan="2"
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
							<td
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
						</tr>
						<tr style="height:21pt">
							<td colspan="2"
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
							<td colspan="2"
								style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
								<br /></td>
						</tr>
					</tbody>
				</table>
			</div>
		</b>
		<!--EndFragment-->
	</body>

</html>

mlewand avatar Aug 10 '22 12:08 mlewand