CKEditor 5: Javascript error when plugin settings has NULL value

Created on 11 March 2024, 9 months ago
Updated 8 April 2024, 8 months ago

Problem/Motivation

When a CKEditor 5 plugin returns a configuration array that contains a NULL value, a javascript error is thrown on the browser console, and the editor is not loaded.

Steps to reproduce

  1. On a custom module, implement a CKEditor 5 plugin.
  2. On the plugin class, implement the getDynamicPluginConfig() method and return a settings array. Make one of the entries an array containing a NULL value. Ex:
    public function getDynamicPluginConfig(array $static_plugin_config, EditorInterface $editor): array {
      return [
        'myconfig' => ['foo', NULL],
      ];
    }
    
  3. Set up a text format to use the CKEditor 5, if there's no one.
  4. Go to a page that renders an editor, like /node/add/page
  5. You'll see that the editor is not loaded, and there's a JS error on the browser console.

Proposed resolution

The error happens because the ckeditor5's code that processes the plugin configs does not properly test for NULL values (processConfig() function on core/modules/ckeditor5/js/ckeditor5.js file).

Remaining tasks

  • Fix JS code

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

--

๐Ÿ› Bug report
Status

Fixed

Version

10.2 โœจ

Component
CKEditor 5ย  โ†’

Last updated about 15 hours ago

Created by

๐Ÿ‡ง๐Ÿ‡ทBrazil gedvan Joรฃo Pessoa

Live updates comments and jobs are added and updated live.
  • Contributed project blocker

    It denotes an issue that prevents porting of a contributed project to the stable version of Drupal due to missing APIs, regressions, and so on.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @gedvan
  • Pipeline finished with Failed
    8 months ago
    Total: 199s
    #116797
  • Pipeline finished with Success
    8 months ago
    #116803
  • ๐Ÿ‡ง๐Ÿ‡ทBrazil gedvan Joรฃo Pessoa

    Moving to 10.3.x

  • Status changed to Needs review 8 months ago
  • ๐Ÿ‡ง๐Ÿ‡ทBrazil gedvan Joรฃo Pessoa

    By mistake, I created this for 10.2.x. I've changed the Version field to 10.3.x, but I don't know how to rebase the issue branch and MR. If someone can help, I'd appreciate it.

  • Status changed to Needs work 8 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Should actually target 11.x as the current "main" branch. Bugs can be backported.

    MR should be updated too.

    The scenario may be valid, not sure if it's a bug in the custom code though. But will need a failing test to show the problem.

  • Status changed to Postponed: needs info 8 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    It's not clear to me what the steps to reproduce are. It's also not clear to me if "just NULL" ever makes sense โ€” it'd make more sense to not have any configuration at that point? ๐Ÿค”๐Ÿ˜…

  • ๐Ÿ‡ง๐Ÿ‡ทBrazil gedvan Joรฃo Pessoa

    @wim-leers I bumped into this when I was writing a plugin to add the Text Transformation feature into CKEditor 5. I've made it (BTW, I've written a module for that โ†’ ), but trying some plugin advanced configs, I noticed some of them needed returning NULL values. For example, the extra config with regular expressions:

    Looking at core/modules/ckeditor5/js/ckeditor5.js code, I found out that I could return a RegExp as config using a structure like this (on a CKEditor5Plugin or hook_ckeditor5_plugin_info_alter implementation):

    return [
      // ... 
      'extra' => [
        [
          'from' => ['regexp' => ['pattern' => '/(^|\s)(")([^"]*)(")$/']],
          'to' => [NULL, 'ยซ', NULL, 'ยป'],
        ],
      ]
    ];
    

    However, when I did this, the editor got broken, and a JS error on the browser console pointed to an error on ckeditor5.js. Then, looking at processConfig()'s code, it assumes the config parameter is always a valid Object, but in Javascript, typeof null === 'object' (which is crazy), so when config is null, the error occurs.

    My MR just adds a null check for the config parameter.

  • Status changed to RTBC 8 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Oh โ€ฆ intriguing! Thanks a lot for that clear explanation! ๐Ÿ‘

    Explicit test coverage for this seems totally overkill for that simple oversight and trivial code addition ๐Ÿ‘

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom alexpott ๐Ÿ‡ช๐Ÿ‡บ๐ŸŒ

    Committed and pushed 695c6a53ca to 11.x and 0590956f51 to 10.3.x and 4fb6e509bf to 10.2.x. Thanks!

    • alexpott โ†’ committed 4fb6e509 on 10.2.x
      Issue #3427200 by gedvan, Wim Leers: CKEditor 5: Javascript error when...
    • alexpott โ†’ committed 0590956f on 10.3.x
      Issue #3427200 by gedvan, Wim Leers: CKEditor 5: Javascript error when...
  • Status changed to Fixed 8 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024