Ckeditor5 table properties center alignment do not work

Created on 15 December 2023, over 1 year ago

Problem/Motivation

Steps to reproduce

1. Add a table in ckeditor5 editor of node.
2. Choose center alignment in table properties.
3. View the node.

The table is shown left aligned due to lack of appropriate style properties.

Proposed resolution

To implement below suggestions from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table instead of using CSS float property in ckeditor5 library (Issue https://github.com/ckeditor/ckeditor5/issues/15535 raised in ckeditor5 issue queue)

Set margin-left and margin-right to achieve an effect that is similar to the align attribute:

left: margin-right: auto; margin-left: 0;
center: margin-right: auto; margin-left: auto;
right: margin-right: 0; margin-left: auto;

🐛 Bug report
Status

Active

Version

10.2

Component
CKEditor 5 

Last updated about 15 hours ago

Created by

🇮🇳India sumit_saini

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sumit_saini
  • 🇮🇳India SandeepSingh199

    This is the issue of ckeditor5 alignment tool. This bug CF in drupal11 too. for quick fix you can write inline style in edit mode(html) of table <table style="margin:0 auto;">.
    I have checked with Claro & Gin, table took by default 100% width. Olivero theme is working fine but the issue with table alignment.
    I am looking into it. I will add a patch if found anything.

  • Status changed to Postponed: needs info over 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Thanks for linking the related issue! And especially thanks for creating an upstream issue! 👏

    Can you also reproduce this at https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-edito...?

  • 🇩🇪Germany carp-enter

    I have the same problem with Drupal 10.2.2 and PHP 8.2.15.

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Please see #3. We need that to be tested first.

    For now, demoting to , until I've got a response to #3.

  • 🇮🇳India sumit_saini

    On this link https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-edito..., table properties plugin and source edit pluign is not available. So let me try to explain/reproduce this on https://ckeditor.com/docs/ckeditor5/41.1.0/examples/builds-custom/full-f....
    There, I created 3 one cell tables with left(L), center(C) and right(R) alignment respectively as shown below

    The html will render as below when viewed(generated html and its view can be checked here - https://jsfiddle.net/Lsepjmut ).
    See that L and R tables are rendered as expected but the table C is left aligned instead of center aligned.

    Because ckeditor5 only handled its look inside editor and did not account for the browser behaviour, this is a problem for
    - pages rendered with drupal theme(easy fix is to attach extra css fix to handle it with theme)
    - API responses for headless implementation (not possible to add a css fix for this case by drupal)
    One solution to fix for both above cases, is to implement a text processor(filter) to add the necessary style properties but this sounds like a overhead already.

    In the meantime, we can use the workaround suggested in #3 but this is not good UX for a non-technical contributor. So, it is better if this is fixed upstream by ckeditor5 (which unfortunately has been disagreed here https://github.com/ckeditor/ckeditor5/issues/15535#issuecomment-1864029206 ).

  • 🇮🇳India nitesh624 Ranchi, India

    I see upstream issue is closed. So is that something missing from Drupal side or we need to see any workaround plugin

  • 🇺🇸United States smustgrave

    Should this be closed?

  • 🇨🇦Canada francismak

    We have a user reporting this as well.
    So when editing in CKEditor, the site included a script from:
    web/core/assets/vendor/ckeditor5/table/table.js

    This JS will create inline style on the page with
    .ck-content .table{display:table;margin:.9em auto}

    So by default, table is centered in CKEditor. User expected to see the same thing in frontend page, but theme is missing CSS rule for this.

    No issue for align left/right since CKEditor will add inline CSS float left/right.

    IMO, I don't think this is a bug, but a classic example of unexpected result between admin editing vs frontend viewing.

Production build 0.71.5 2024