- Issue created by @camilo.escobar
- Merge request !8667Issue #3459149 Update editor.css to fix background color on selected text in modal dialog → (Open) created by camilo.escobar
When selecting a portion of text in a WYSIWYG field using CKEditor 5 inside a modal dialog, the selected text does not have the usual background color, causing confusion for editors who think nothing has been selected.
This is my current setup:
The problem occurs only when using CKEditor in Layout Builder through a modal dialog. In other scenarios, like a regular WYSIWYG field on a node form, it works correctly.
It is unclear if a combination of enabled modules, themes, or specific configurations could be causing the problem.
The issue began after updating Drupal Core from 9 to 10.
The problem persists across different themes.
Similar to other problems documented for CKEditor when used inside a modal dialog (e.g.,
https://www.drupal.org/project/drupal/issues/3328425
🐛
CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal
Needs work
), I propose adding the following CSS to the CKEditor's editor.css stylesheet. This will force the browser to show the expected background color on selected text:
.ui-dialog .ck-editor p::selection {
color: var(--font-color);
background: var(--ck-color-link-fake-selection);
}
As mentioned above, the issue persists across different themes, which indicates it is not theme-specific, that's why I'm proposing applying the workaround directly to the CKEditor CSS file.
Active
11.0 🔥
Last updated