- ๐บ๐ธUnited States smustgrave
Cleaned up to not be so node specific and un-needed hook.
-
smustgrave โ
committed 6f96c176 on 5.0.x
Issue #3388438: Lists not right aligning in CKeditor 5
-
smustgrave โ
committed 6f96c176 on 5.0.x
- @smustgrave opened merge request.
- ๐บ๐ธUnited States davedg629
Thanks for checking this.
So turns out there is an issue where if you have a large inline image in one of the nested text editors, it causes issues. To fix, I added this CSS which limits the width of the inline images to 800px wide.
.ck.ck-editor__editable .image-inline { max-width: 800px; }
- ๐ฎ๐ณIndia amitrawat056
.ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
flex-wrap: wrap !important;
}This CSS code still work for me, i m on Drupal 10.3.3
@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