Problem/Motivation
I attempted to add the language drop down to the CK editor 5 UI. I got a message telling me that it didn't work and what I needed to do the fix the issue. The fix attempt that I tried did not work. It turns out that adding Language to CKEditor does not correctly handle adding the span tag and required attributes.
Steps to reproduce
Steps:
1. Go to https://simplytest.me/
2. In the field Evaluate Drupal Projects, type Drupal
3. Choose Drupal core
4. Accept 10.1.4 (or whatever the latest version offered is) as the default
5. Click Launch sandbox
6. Wait to be redirected to the test instance
7. Enter the admin user name and password
8. Click Configuration, then Text formats and editors
9. On the row for basic HTML, click Configure
10. Scroll down to the bottom and examine Limit allowed HTML tags and correct faulty HTML field.
Actual and expected results: Field contains:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <strong> <em> <code> <li> <img src alt data-entity-uuid data-entity-type height width data-caption data-align>
11. Drag the Language button into the active toolbar
Expected result: No warning message.
Actual result: Warning message
The Language plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span lang dir>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.
12. Under CKEditor5 plugin settings, click Language
13. (Workaround results are different if I skip this step) In the drop-down, choose All 107 languages (or however many there are)
14. Click Save Configuration
Expected result: No error message.
Actual result: Error message
The Language plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span lang dir>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.
15. Scroll down to the bottom and examine Limit allowed HTML tags and correct faulty HTML field.
Expected result: Field contains:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <span lang dir>
Actual result: Field contains:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <span dir>
Attempted workaround:
16. Under CKEditor5 plugin settings, click Source editing
17. Change
<cite> <dl> <dt> <dd> <a hreflang> <blockquote cite> <ul type> <ol start type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
to read
<cite> <dl> <dt> <dd> <a hreflang> <blockquote cite> <ul type> <ol start type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <span lang dir>
27. Click Save Configuration
Workaround results if I did step 13, that is I chose 107 languages:
Expected results:
- Error message disappears.
- Source editing setting continues to read:
<cite> <dl> <dt> <dd> <a hreflang> <blockquote cite> <ul type> <ol start type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <span lang dir>
- HTML filter reads:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <span lang dir>
Actual results:
- Error message remains.
- Source editing setting reads:
<cite> <dl> <dt> <dd> <a hreflang> <blockquote cite> <ul type> <ol start type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
- HTML filter reads:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <span dir>
And no further workaround appears to be available to me, so I stop.
Workaround results if I skipped step 13, that is, I defaulted to UN languages only:
Result: Drupal returns to /admin/config/content/formats and shows a message that Basic was updated.
Continuing with the skipped step 13 behavior only:
27. On the row for basic HTML, click Configure
28. Scroll down to the WYSIWYG
Actual and expected results: the WYSIWYG toolbar contains a language drop down.
28a. (added after issue close) Now do the skipped step 13 by choosing 107 languages.
29. Click on the source editing tab
Actual and expected results: the manual edit field contains:
<cite> <dl> <dt> <dd> <a hreflang> <blockquote cite> <ul type> <ol start type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <span lang dir>
28. Scroll down to the bottom and examine Limit allowed HTML tags and correct faulty HTML field.
Expected result: HTML filter contains:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <span lang dir> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align>
Actual result: HTML filter contains:
<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol start type> <span dir> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align>
29. In the admin toolbar, click Content then Add Content then Basic Page.
30. In the title field, type Test Page.
31. In the body field, type:
Hello in Burmese is "แแแบแนแแแฌ."
32. Select the word แแแบแนแแแฌ.
33. Choose Burmese from the language drop-down in the WYSIWYG toolbar.
34. Click the Save button.
35. Right click the word "แแแบแนแแแฌ"
36. Choose Inspect element
Actual and expected results: <span lang="my" dir="ltr" xml:lang="my">แแแบแนแแแฌ</span>
Proposed resolution
When the user drags the Language drop-down into the WYSIWYG toolbar, the program automatically adds <span lang dir> to the HTML filter.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
