- Issue created by @justmeplease
- Status changed to Postponed
about 1 year ago 6:11pm 13 October 2023 - πΊπΈUnited States smustgrave
May be worth seeing if this is an upstream issue.
- Status changed to Needs work
6 months ago 12:37am 6 July 2024 - Assigned to Esha_Kundu
- Issue was unassigned.
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- Merge request !15Issue #3388438: Lists not right aligning in CKeditor 5 β (Merged) created by smustgrave
-
smustgrave β
committed 6f96c176 on 5.0.x
Issue #3388438: Lists not right aligning in CKeditor 5
-
smustgrave β
committed 6f96c176 on 5.0.x
- πΊπΈUnited States smustgrave
Cleaned up to not be so node specific and un-needed hook.
- Status changed to Fixed
3 months ago 4:17pm 5 September 2024 Automatically closed - issue fixed for 2 weeks with no activity.