Lists not right aligning in CKeditor 5

Created on 20 September 2023, about 1 year ago
Updated 19 September 2024, 3 months ago

Problem/Motivation

I am unable to right align lists elements.

When attempting to create a right aligned list using ckeditor 5, the text within the list is properly aligning to the right, however, the list element (ol,ul) themselves are not. This behaviour is different than the ckeditor 4 implementation of this module which does right align lists.

Steps to reproduce

  1. Create a ckeditor 5 text area.
  2. Create an ordered list and add a few items.
  3. Create an unordered list and add a few items.
  4. Apply 'right to left' styling for both lists.
  5. Observe that the text in the list is right aligned, but the lists themselves are not.

Proposed resolution

The ckeditor 4 implementation makes use of a list of guard elements. Each parent of the selected element is compared to the items in the guard list. The first element which matches an item in this list receives the dir attribute.

The ckeditor 5 implementation of this module should implement the same guard check.

πŸ› Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

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

Merge Requests

Comments & Activities

  • Issue created by @justmeplease
  • Status changed to Postponed about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    May be worth seeing if this is an upstream issue.

  • Status changed to Needs work 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave
  • Assigned to Esha_Kundu
  • Issue was unassigned.
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    appears to have been no movement.

  • Hello @smustgrave,
    I'm sorry for not making any updates for such a long time. I faced a blocker in targeting the parent list element (ul/ol) while resolving this issue. In the current scenario the p tag containing the list text which is present within the li element where the direction 'rtl' is getting added whenever the BiDi button is clicked, whereas the list element (ul/ol) still has the direction 'ltr'. I have tried implementing the react js functions for targeting the parent element. Also I have gone through the ckeditor plugins and functionalities. When I came across the ckeditor list reversed plugins that targets the parent element (ul/ol) and adds reversed data attribute which is similar to what I had to achieve in this case but unfortunately the parent target is being identified as paragraph instead of listitem, as a result the 'rtl' direction attribute is not being set in the parent. There is also this open issue in github regarding the incorrect padding for list: https://github.com/abedio/ckeditor5-direction/issues/1.
    Sorry for the inconvenience.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    I don't love the idea but is there any aftermarket hack we can add?

  • @smustgrave, as per my findings if we could implement the direction in list element(ul/ol) then while viewing the node, the direction would have been implemented similar to ckeditor 4, however targeting the parent resulted in a blocker and it seems like you didn't like the idea also. I came up with the idea of handling the direction using css, please have a look at the below code

    .ck-editor__editable ul:has([dir='rtl']),
    .ck-editor__editable ol:has([dir='rtl']) {
      direction: rtl;
    }
    

    I've made use of the has selector for checking the direction 'rtl', depending on this condition the direction of the parent list element (ul/ol) is changed. To have a similar affect when viewing the node after changing the direction, I've include the below code in a separate css file after that I made an library for the same and attach it using preprocessor node cause including the css in the existing bidi_direction.css file, the library doesn't get attach for anonymous node view, logically the node page can be opened in anonymous view also.

    .node__content ul:has([dir='rtl']),
    .node__content ol:has([dir='rtl']) {
      direction: rtl;
    }
    

    I've not included the check for dir='ltr' as when it is 'ltr' the p tag isn't set to dir='ltr' it only consists of the class="ck-list-bogus-paragraph" which will result in unnecessary extra css code.
    Please have a look at the below ss,

    1. The node view of lists after changing the direction to 'rtl' in ckeditor 4.

    2. The node view of lists after changing the direction to 'rtl' in ckeditor 5.

    3. After including the css
    1. ckeditor

    2. node view

    I've added the patch file, please let me know your opinion.
    Thanks

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Cleaned up to not be so node specific and un-needed hook.

  • Status changed to Fixed 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024