Tables, Images, and Figures

[KirkMunroSagent]

📝 Ask a question

I'm having a problem with tables in CKEditor (latest version: 43.1.0).

In my environment, I'm working with a lot of pre-existing HTML, loading that into CKEditor as needed to allow users to modify that content.

Some of that content includes tables that were never intended to be figures.

For example, using a simple table to list a bunch of related values in a nicely formatted manner.

CKEditor5 takes those tables, and wraps them in figures. I've looked through the docs and the GitHub repo and found a lot of discussion from the past about how the team interpreted the HTML5 standard as indicating that tables should always be represented as figures, even if they do not have an associated caption. I disagree completely with this approach. Figures can contain tables, but tables are not implicitly figures. Not in HTML, and not in formal documentation either.

At any rate, my challenge is figuring out how to undo this, because figures are centered by default, but tables outside of figures are not, so this auto-wrapping of the tables in figures changes the rendering of the content, and since much of the content passed into the editor is controlled/managed by customers, the rendered view of the content that is being passed into the editor must not change just because the editor team interpreted the HTML5 standard as requiring tables to be in figures (the customer owns the content, not the editor).

Images seem to function in a similar manner in CKEditor, but with much more flexibility. I can have an img tag in a document, and it renders properly. If I use CKEditor add a caption to the image, then the image is wrapped in a figure. If I remove the caption, it is unwrapped and becomes a plain image again. This is what I want to happen with tables, allowing vanilla tables to render using default table formatting/rendering, but if I add a caption, then and only then wrap them inside of a figure to group the table and the caption together, at which point figure formatting/rendering is used.

Does anyone have any idea how to make this happen? Does this require duplicating the CKEditor5-table plugin and modifying it to undo the hard/forced wrapping in figures that plugin seems to apply with no option to have it do otherwise? Or are there some simple settings that can be applied to change this behavior to preserve/respect what the user is doing, keeping tables as tables with an option to promote them to figures when necessary (such as when you add a caption)?

[Witoso]

Hi, thanks for the detail explanation of the problem. CKEditor 5 took the opinionated approach, and while it's troublesome for some use cases, it helped us a lot during the development of more complex features. I'm sure @Reinmar or @scofalik can share more details here.

The HTML for us is "just" a rendering format. The editor operates on a custom data layer, so output is always standardized. But the conversion mechanism can be adjusted, and you can decide how certain elements will be downcasted to HTML.

Usually, it's easy, but with more complex structures, like tables, it may require more work. We have an example plugin for table that you can use, that may be helpful: PlainTableOutput. It strips the figure and uses just table.

[KirkMunroSagent]

We have an example plugin for table that you can use, that may be helpful: PlainTableOutput. It strips the figure and uses just table.

Thank you very much for this. I will look into this very soon to see if I can make it work.

As a suggestion, you may want to reference that plugin in your Table documentation so that it is more well known/discoverable. Despite my many search attempts for solutions, including reviewing the docs, source code, and searching in these discussions I never came across this plugin.

[KirkMunroSagent]

@Witoso: I just gave this a try (meaning I simply added the PlainTableOutput plugin to my CKEditor). The result has me confused. If I view the HTML source in CKEditor, I see the table preserved as a table. But in the rendered view in the editor, the table is still showing wrapped in a figure, which I can also confirm via the Inspector. I suppose that's why it's called PlainTableOutput instead of simply PlainTable.

What else can be done to take this further such that tables don't render as figures by default? Or is the thinking that by using the PlainTableOutput, we can preserve the HTML that gets saved, even if when rendered in CKEditor it is rendered using figures. That doesn't work well though, because the rendered format is still off. If I create a new table with PlainTableOutput loaded, the table gets created taking up 100% of the view, which isn't what I want. Then I resized it, and it showed that it's still centered as the size was shrunk down. The resizing is awkward as well, because it uses percentages instead of pixels. That might be the right approach for HTML rendered in a browser as part of a web page, but it isn't the right approach for HTML email message content. If I open an email message full screen, and that content contains a table to show me structured information, it is more than likely that I don't want the size of that table to scale up with the size of my screen...that would just look awkward. So now I'm wondering how to make tables in CKEditor use absolute (px) instead of relative (%) sizing when tables or columns or rows are resized.

I'm still trying to figure out how to make this work (it's quickly become quite a lot of time put into this), but it's still a problem.