Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jodator opened this issue Oct 23, 2019 · 3 comments
Labels
domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. package:engine package:paste-from-office package:table squad:core Issue to be handled by the Core team. support:2 An issue reported by a commercially licensed client. type:feature This issue reports a feature request (an idea for a new functionality or a missing option).

Comments

@jodator
Copy link
Contributor

jodator commented Oct 23, 2019

📝 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 jodator added type:feature This issue reports a feature request (an idea for a new functionality or a missing option). package:engine package:table package:paste-from-office labels Oct 23, 2019
@jodator
Copy link
Contributor Author

jodator commented Oct 23, 2019

what CKEditor 5 CKEditor 4 Word GDocs
row height height style on each td in a row height style on individual td ℹ️ height style on tr element and the same style on each td as well (pt units) ⚠️ 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 ℹ️ width style on td as pt units and width attribute on td without unit ⚠️ 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 🆗 ℹ️ background style 🆗
borders - style shorthands border-top, border-right, border-bottom, border-left shorthands ℹ️ 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 ⚠️ border attribute on table for border width... border: none and uses border-collapse. border: none and uses border-collapse
borders - behavior on table cell ... ... ⚠️ border-right & border-bottom for "current", border-right for cell on left and border-bottom for cell above. ⚠️ 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 🆗 ⚠️ valign attribute on td... 🆗
horizontal text alignment ... text-align on td TODO TODO
padding padding sh on td ⚠️ cellpadding attirbute on table 🆗 🆗
table alignment align attribute on table ⚠️ wrapping <div> with align=right attribute

Legend:

  • ⚠️ - requires action in PFO plugin / incompatible setting
  • ℹ️ - gets properly normalized to model values or sets different values but one is same as in CKE5
  • 🆗 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 ;)

@Mgsy Mgsy added this to the iteration 28 milestone Nov 4, 2019
@Reinmar Reinmar modified the milestones: iteration 28, iteration 29 Nov 25, 2019
@Reinmar
Copy link
Member

Reinmar commented Jan 29, 2020

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 Reinmar modified the milestones: iteration 29, nice-to-have Jan 29, 2020
@Reinmar Reinmar changed the title Table styles compatibility with CKEditor 4 and office suites Table styles compatibility with CKEditor 4 and office suites (Word, Excel, Google Docs) Jan 29, 2020
@Reinmar Reinmar added domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. and removed domain:v4-compatibilty labels Mar 9, 2021
@Reinmar Reinmar added squad:core Issue to be handled by the Core team. and removed squad:compat labels Sep 27, 2021
@pomek pomek removed this from the nice-to-have milestone Feb 21, 2022
@lslowikowska lslowikowska added the support:2 An issue reported by a commercially licensed client. label May 24, 2022
@mlewand
Copy link
Contributor

mlewand commented Aug 10, 2022

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:v4-compatibility This issue reports a CKEditor 4 feature/option that's missing in CKEditor 5. package:engine package:paste-from-office package:table squad:core Issue to be handled by the Core team. support:2 An issue reported by a commercially licensed client. type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Projects
None yet
Development

No branches or pull requests

6 participants