Problem/Motivation
Update the theme to use CKEditor 5
https://www.drupal.org/node/3259165 →
Steps to reproduce
1. Enable ckeditor5 and go to admin/config/content/formats and change all Text editors from CKEditor to CKEditor 5
2. Go to any field where CKEditor 5 is used (preferably the one that use Full HTML text format)
TOC (for better orientation):
3. Fonts
4. Bulleted list
5. Image caption
6. Table
7. Heading styles
8. Formatted style
9. Styles
10. Strong
11. Horizontal line
12. url_embed
3. Fonts
3a. Insert some text
3b. CKEditor 4 does not have correct font applied comparing to font-end styles.
3c. With this improvement applied, correct font is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, with this improvement):
Front-end (content view, also expected result):
4. Bulleted list
4a. Insert Bulleted list
4b. You will see that bulleted list style "bullet" is wrong
4c. With this improvement applied, correct font is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
5. Image caption
5a. Insert Image with caption
5b. You will see that Image caption style is wrong for CKEditor 5
5c. With this improvement applied, correct Image caption style is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
6. Table
6a. Insert Table with caption
6b. CKEditor 4 and 5 do not have correct Table and table caption styles
6c. With this improvement applied, correct Table and table caption styles are applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
7. Heading styles
7a. Insert headings from H1 to H6
7b. CKEditor 4 does not have correct heading styles comparing to font-end styles.
7c. With this improvement applied, correct heading styles are applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, with this improvement):
Front-end (content view, also expected result):
8. Formatted style
8a. Insert Formatted style
8b. CKEditor 4 does not have correct Formatted styles comparing to font-end styles.
8c. With this improvement applied, correct Formatted styles are applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
9. Styles
9a. Insert primary, secondary and pill badge style
9b. CKEditor 4 and 5 do not have correct styles comparing to font-end styles.
9c. With this improvement applied, correct styles are applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, with this improvement):
Front-end (content view, also expected result):
10. Strong
10a. Insert strong text
10b. CKEditor 4 and 5 do not have correct styles comparing to font-end styles.
10c. With this improvement applied, correct strong style is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
11. Horizontal line
11a. Insert Horizontal line
11b. You will see that Horizontal line style is wrong for CKEditor 5
11c. With this improvement applied, correct strong style is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
12. url_embed
12a. enable social_embed
12b. Try to set this one in composer.json files if you have issues with enabling url_embed in CKEditor 5
"patches-ignore": {
"goalgorilla/open_social": {
"drupal/url_embed": {
"Translate dialog title": "https://www.drupal.org/files/issues/2018-03-16/url_embed_translate_dialog_title-2953591-2.patch",
"Issue #2761187/#3386579 Improve how the module deals with non-embeddable URLs & WSODs (See: https://www.drupal.org/project/social/issues/3386579#comment-15225972) 2.x": "https://www.drupal.org/files/issues/2023-09-11/urlembed-non-embeddable-urls-2761187-opensocial-combined-21_2.x_1.patch",
"Issue #3386590: preg_split in _filter_url breaks for long html tags": "https://www.drupal.org/files/issues/2023-09-11/3382821-url_embed-preg-split_2.x_1.patch"
}
}
},
"patches": {
"drupal/like_dislike": {
"Add support for webprofiler": "patches/like-dislike-fix-webprofiler.patch"
},
"squizlabs/html_codesniffer": {
"Translatings does not work": "patches/DS-5443-accessibility.patch"
},
"drupal/embed": {
"test": "https://www.drupal.org/files/issues/2023-07-26/3309747-45.patch"
},
"drupal/url_embed": {
"Translate dialog title": "https://www.drupal.org/files/issues/2018-03-16/url_embed_translate_dialog_title-2953591-2.patch",
"haai": "https://www.drupal.org/files/issues/2023-05-18/url_embed_ckeditor5_support.patch",
"Issue #2761187/#3386579 Improve how the module deals with non-embeddable URLs & WSODs (See: https://www.drupal.org/project/social/issues/3386579#comment-15225972) 2.x": "https://www.drupal.org/files/issues/2023-09-22/urlembed-non-embeddable-urls-2761187-opensocial-combined-21_2.x_1_ckeditor5.patch",
"Issue #3386590: preg_split in _filter_url breaks for long html tags": "https://www.drupal.org/files/issues/2023-09-11/3382821-url_embed-preg-split_2.x_1.patch"
}
}
12c. Do not forget to set functionality in CKEditor text format settings
12d. Insert embed video
12e. You will see that Embed video width is wrong for CKEditor 5
12f. With this improvement applied, correct Embed video width is applied for CKEditor 5
CKEditor4 (edit mode):
CKEditor5 (edit mode, without this improvement):
Front-end (content view, also expected result):
Proposed resolution
Improve styling for html elements like strong, ul, hr, blockquote, figcaption (image and table), pre and url_embed (figure.drupal-url) in CKEditor 5 edit mode.
Remaining tasks
N/A
User interface changes
N/A
API changes
N/A
Data model changes
N/A