Ckeditor5: Introduce `extraPlugins` configuration

[pjasiun]

Now, whenever one wants to add a single plugin the configuration, he needs to find the list of all plugins which are currently loaded (what is not that easy), and add all of these plugins plus his own plugin.

Recently one of the core developers did this mistake (added only additional plugins) what was the reason for the wrong build, missing plugins, in our documentation. Recently I needed to explain how collaboration plugin should be added and also had no good idea who to make it easy.

I believe that since we already have removePlugins we should have also extraPlugins (CKEditor 4 configuration style) or something similar. This would be especially useful in some more complex builds where you have essential plugins which can not be removed (like Letters). Right now, in Letters base plugins are always added what makes plugins option works like extraPlugins, what is even messier.

[ssougnez]

Hi,

I'm trying to use this property to add the "underline" button to the toolbar of the BalloonEditor. As it does not work, I read the note on the doc saying that it only works for plugins with no dependencies. Are you talking about the "requires" function of the plugin? Because when I look the plugins in "ckeditor5-basic-styles" for example, they all require other plugins (for example "Underline" required "UnderlineEditing" and "UnderlineUI"), so does it mean that I won't be able to add a simple "underline" button to my editor without having to create a custom build?

To be honest, I read a lot the documentation and I'm afraid to be right. Indeed, it seems to be such a simple task to add a simple button to the toolbar that I wouldn't understand that I have to clone and maintain a repository of my own just for that. If I'm right, I'm sure that there are technical reasons why it's like that but no matter what they are, they shouldn't be an explanation of the reason why it's impossible to do such a simple task. If I'm wrong, please, excuse me and I'll create an issue as using "extraPlugins" to add the "Underline" plugin produce a "Cannot read property 'getAttribute' of null" exception.

Thanks

[pjasiun]

Yep, you are right that it is not possible to add underline plugin if it is not built into your editor build. I also created a ticket to explain the situation better.

[scofalik]

extraPlugins configuration option is primarily meant to add your own custom plugins.

[oleq]

@ssougnez CKEditor 5 is a rich text editing framework (unlike CKEditor 4). The ready–to–use builds we provide have been prepared just to satisfy the most common use–cases, so it's understandable they don't come with every single feature provided by the framework.

The framework has been optimized to deliver the smallest editor builds possible. That's why it's ultra–modular (modules like Underline import other modules (e.g. UnderlineUI) and those modules import even more modules (e.g. ButtonView), etc.) — if some module is not used, it's not built into the editor; only the code which is actually used has its place in the build.

Resolving dependencies (imports) happens when the editor is built using webpack. The cost of this solution is that once built, you cannot add more features that have dependencies. The build is a blob returned by webpack and all the modules that are dependencies are not available "from the outside". This is how webpack works.

If you want to add Underline (and UnderlineUI) to let's say ckeditor5-build-classic and then build it again, what actually happens is:

• UnderlineUI requires the ButtonView class (which in turn requires tons of other modules),
• Webpack does not (cannot) know those classes are probably already somewhere in the ckeditor5-build-classic build. What it sees is a huge blob of JS. There's no way to resolve Underline* imports against the code in the build.
• As a result, webpack imports dependencies of UnderlineUI again and they are duplicated.
• The duplicated dependencies cause problems with instanceof, duplicate the CSS (because JS modules import their styles in CKE5), cause general havoc and instability, etc..

That's the cost of using webpack and producing builds which are optimal for integrations they're used in. We probably wouldn't need to use webpack if web browsers supported ES6 modules natively and, along with web servers, were able to resolve them in a smart way.

The config.extraPlugins is just a syntax sugar created so you don't have to re–define the entire config.plugins (which could be looooong) if you want to add just a single plugin to the list. It does no magic in terms of plugin management in the build (maybe we communitacte it wrong, let's check it out in https://github.com/ckeditor/ckeditor5/issues/1393).

So yes, if you want more features in your build, you have to create a custom one (sorry ☹️). It's not a rocket sicence and we have it docummented but it requires some action from the developers.

We're doing our best to communicate what our framework is and what it isn't but we know our documentation could be better. Hopefully, in the future we'll provide an online tool that allows downloading builds with pre–selected set of features (that would help you a lot, I think) but it's still a down–the–road–thing for us and there are other tasks (like new features) that we'd rather foucs on right now.

[ssougnez]

Ok, it makes sense, thanks for the enlightenment. Then I guess the best option for me is the one described in here. I guess that creating a webpack.ckeditor.config and merging is using wbepack-merge could leverage the complexity of this. I might give that a shot.

Thanks and keep up the good work.