CKEditor 5: Javascript error when plugin settings has NULL value

Created on 11 March 2024, 10 months ago
Updated 8 April 2024, 9 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 2 days 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
    10 months ago
    Total: 199s
    #116797
  • Pipeline finished with Success
    10 months ago
    #116803
  • ๐Ÿ‡ง๐Ÿ‡ทBrazil gedvan Joรฃo Pessoa

    Moving to 10.3.x

  • Status changed to Needs review 9 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 9 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 9 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 9 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 9 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024