ckeditor
Table alignment causes tables to end up next to the text, not above it
We use CKEditor5 as an email editor. So most of the time, when a client has an option to reply to an email, we have a historyMessage div with the message they're replying too, and then they can write the response above. Pretty standard stuff. But tables are not working as we intend with this setup.
📝 Reproduction steps
- Have an instance of the Classic Editor
- Have some text written in the editor, left aligned for example
- Above that text, create a table, which will by default be center align
- Align that table left
✔️ Expected result
I expect the table to remain at the same height, above the text, just to the left. Also given Outlook/Word as an example, you can't write next to the tables in those editors like you can in CKEditor5. At least not by default without changing it by default, so most of our users would expect that, so having a way to disable text wrap would also be great. I'm not aware of a way to do so currently.
❌ Actual result
The table ends up lower than the original position, sharing horizontal space with the text, when it should always be above it. When it's centered, the position is set with margins, but when it's aligned, just a float CSS is used.
❓ Possible solution
It appears yesterday you already opened #19317 Add conversion for left/right no-wrap table alignment, which would fix the problem given my tests with CSS.
But I'd like to understand why it isn't working now, or if the text wrapping will always happen. It may be something I can easily fix now or something I'll need to wait for the feature.
-
Browser: Google Chrome
-
OS: Windows 11
-
First affected CKEditor version: 45.0.1
-
Installed CKEditor plugins:
- ClassicEditor
- Command
- ButtonView
- Undo
- Autoformat
- Bold
- Italic
- Underline
- BlockQuote
- Base64UploadAdapter
- Essentials
- Heading
- Image
- ImageInsert
- PictureEditing
- Indent
- IndentBlock
- Link
- List
- Mention
- MediaEmbed
- Paragraph
- PasteFromOffice
- Table
- TableColumnResize
- TableToolbar
- TableProperties
- TableCellProperties
- TextTransformation
- Font
- RemoveFormat
- Strikethrough
- CodeBlock
- Alignment
- HtmlEmbed
- GeneralHtmlSupport
- EmptyBlock
- Plugin
I miss a few plugins on your side, like, PlainTableOutput which is a must-have for tables and emails, as most email clients have a problem with the figure element. We have a page on emails set up that mentions this and a few other things; maybe this will be helpful.
The table ends up lower than the original position, sharing horizontal space with the text, when it should always be above it.
This is precisely what we plan to add in #19317, as the editor lacks those styles right now, and the editor always wraps the text.
I see you have implemented the feature I requested and I have updated to the latest version. But I am still having trouble understanding how to use PlainTableOutput and how to set up the new alignment.
As far as I see, and understandably, I couldn't find examples on how to apply those to my ClassicEditor on the documentation in the website.
I see you have implemented the feature I requested
No, it's not added nor released. Possibly you saw a subtask closed.
PlainTableOutput is a sub-feature that could help with email formatting (not alignment). You add it as any other plugin. Exact code snippets could be observed when checking Builder's email preset.
Just a quick update regarding this request.
Starting from CKEditor 5 v47.3.0, new experimental table block-alignment options are available. These options introduce left and right table alignment without text wrapping, effectively covering the main needs described in this issue.
To try them out:
- Enable:
config.experimentalFlags.useExtendedTableBlockAlignment - Load the experimental UI plugins:
TablePropertiesUIExperimentalandTableCellPropertiesUIExperimental
Details: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-47.html#new-experimental-options
These improvements resolve the table-style limitations mentioned here (and other issues). The new behavior is planned to become the default in version 48.0.0 (~April).