Allow overriding/disabling base theme's ckeditor5-stylesheets value

Created on 29 June 2024, 2 months ago
Updated 30 June 2024, 2 months ago

Problem/Motivation

Is there a straightforward way to override/disable the base theme's ckeditor5-stylesheets? Base theme's CKEditor5 stylesheet gets loaded by _ckeditor5_theme_css() regardless of my sub-theme's ckeditor5-stylesheets value.

I am using bootstrap5 as base theme. It has the following lines and seems to follow the instructions in Change record: New API for adding theme-specific styles in CKEditor 5 .

ckeditor5-stylesheets:
  - css/ck5style.css

This issue happens in both D10 and D11 with any base theme that has CKEditor5 stylesheets.

The change record above does not say anything about the expected behaviour regarding the base theme's CKEditor5 stylesheets. So, I'm not sure if this should be considered a feature request or a bug.

Workaround: Here is a workaround, but it would be easier to control this through sub-theme's ckeditor5-stylesheets value.

/**
 * Implements hook_system_info_alter().
 */
function mymodule_system_info_alter(array &$info, Extension $file, $type) {
  if ($type == 'theme' && $file->getName() == 'bootstrap5') {
    $info['ckeditor5-stylesheets'] = FALSE;
  }
}

Steps to reproduce

0. Make sure ckeditor5 is installed.

1. Install a base theme that has ckeditor5-stylesheets value, for example bootstrap5 (inside D10, as bootstrap5 is not available in D11 yet).

composer require 'drupal/bootstrap5:^4.0'
drush theme:install bootstrap5

 

2. Create a sub-theme. For bootstrap5, you can use the following command:

drush --include="web/themes/contrib/bootstrap5/src/Drush" bootstrap5:generate-subtheme my_subtheme --subtheme-name="My sub-theme"

 

3. Observe that our new sub-theme has the following lines and seems to follow the instructions in the change record above:

...
ckeditor5-stylesheets:
  - css/ck5style.css
...
base theme: bootstrap5

 

4. Install the sub-theme and make it the default theme. Also, turn off CSS aggregation for easier testing and clear cache.

drush theme:install my_subtheme
drush config-set system.theme default my_subtheme
drush config-set system.performance css.preprocess 0
drush cr

 

5. Test through browser/drush:

5.a Test in browser: Go to /node/add/page and observe that CKEditor5 stylesheets are loaded for both base theme and sub-theme (for example, the /themes/contrib/bootstrap5/css/ck5style.css and /themes/custom/my_subtheme/css/ck5style.css).

5.b Check _ckeditor5_theme_css()'s output by executing the following drush command:

drush eval 'echo var_dump(_ckeditor5_theme_css());'

... and observe that CKEditor5 stylesheet of base theme still shows up in the output in addition to the sub-theme's:

array(2) {
  [0]=>
  string(43) "/themes/contrib/bootstrap5/css/ck5style.css"
  [1]=>
  string(48) "/themes/custom/my_subtheme/css/ck5style.css"
}

 

6. Now set ckeditor5-stylesheets to false in your sub-theme's .info.yml file:

...
ckeditor5-stylesheets: false
...
base theme: bootstrap5

 

7. Clear cache and repeat the step 5 above for testing:

7.a Test in browser: Observe that base theme's CKEditor5 stylesheet (for example, the /themes/contrib/bootstrap5/css/ck5style.css above) is loaded.

7.b Check _ckeditor5_theme_css()'s output using the following command:

drush eval 'echo var_dump(_ckeditor5_theme_css());'

and observe that the base theme's CKEditor5 stylesheet still shows up in the output:

array(1) {
  [0]=>
  string(43) "/themes/contrib/bootstrap5/css/ck5style.css"
}

Proposed resolution

Either of the following:

  • Load the base theme's CKEditor5 stylesheets only if the sub-theme does not provide it (this behaviour is mentioned by alex.skrypnyk in the change record page .) This is the easiest option I think, as we just need to stop looking once we find a theme (the sub-theme or a base theme) that has ckeditor5-stylesheets set (either false or actual CKEditor5 stylesheets). However, it may cause issues for existing sites that are intended to use CKEditor5 stylesheets from both base theme and the sub-theme.
  • Provide a functionality similar to libraries-override.
Feature request
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated 2 days ago

Created by

🇨🇦Canada druplr

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024