Problem/Motivation
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.
Steps to reproduce
This is my current setup:
- Drupal Core 10.2.6
- Layout Builder module is enabled
- Custom subtheme of bootstrap_barrio active
- "Gin" as the active Administration theme
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.
Proposed resolution
Similar to other problems documented for CKEditor when used inside a modal dialog (e.g., https://www.drupal.org/project/drupal/issues/3328425), 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.
Remaining tasks
- Test
- Get maintainer approval