Make removing the Image plugin from classic build less cumbersome

[wwalc]

Adjusting CKEditor 5 Builds is currently quite cumbersome. As an end user I want to be able to download a CKEditor 5 Build and remove features from it easily, just like it was possible in CKEditor 4 via config.removePlugins.

Unfortunately it's not, especially for Images.

The setup that I tried:

ClassicEditor.create( document.querySelector( '#text-editor' ), {
	removePlugins: [ 'Blockquote', 'Image', 'List' ],
	toolbar: [
		'headings',
		'bold',
		'italic',
		'link',
		'unlink'
	]
} )
.then( editor => {
	console.log( editor );
} )
.catch( error => {
	console.error( error );
} );

unfortunately resulted in:

CKEditorError: componentfactory-item-missing: There is no such UI component in the factory. {"name":"imageTextAlternative"}

Being naive, I tried:

removePlugins: [ 'Blockquote', 'Image', 'List', 'ImageTextAlternative' ]

which of course did not work.

What finally helped was:

removePlugins: [ 'Blockquote', 'Image', 'ImageToolbar', 'List' ],

I guess this is a consequence of the default image config where the image toolbar is defined.

However, going finally to the point: if the ImageToolbar plugin requires the Image plugin and can't operate without it, shouldn't it remove itself automatically when Image plugin is removed?

Not sure if it's just about Image-related plugins or if there are other plugins with similar problems.

[Reinmar]

There are two problems here:

1. That we don't have default toolbar configurations (automatic ones, like in CKEditor 4). Bacause of that you need to remember to change the toolbar configuration after removing a plugin.

2. That removing the Image plugin does not remove the ImageToolbar plugin. If ImageToolbar depended on Image, then you'd at least see the following warning:

   plugincollection-required: Cannot load a plugin because one of its dependencies is listed in the removePlugins option.

   But in this case, the ImageToolbar plugin does not depend on Image at all. These are independent plugins. The only thing which glues them is the default image.toolbar config predefined in the build. That's why you've seen that error.

   However, the solution here is again – a default automatic toolbar configuration.

[Reinmar]

Related ticket: #409.

[Reinmar]

There's one more thing that we could do, though, apart from working on default toolbar configurations.

We could make the toolbar item loader check whether item exists in the component factory. If it does, then fine – add it to the item collection. If not, then log a warning (instead of throwing an error like now). The warning would come directly from the toolbar view so it could be more clear than the current error. Plus, the editor will work.

[Reinmar]

cc @oleq

[oleq]

But in this case, the ImageToolbar plugin does not depend on Image at all. These are independent plugins. The only thing which glues them is the default image.toolbar config predefined in the build. That's why you've seen that error.

I would give decoupling these plugins a try. Didn't check internals so I'm not sure this is the only glue, though.

We could make the toolbar item loader check whether item exists in the component factory. If it does, then fine – add it to the item collection. If not, then log a warning (instead of throwing an error like now). The warning would come directly from the toolbar view so it could be more clear than the current error. Plus, the editor will work.

Sounds like a plan.

[Reinmar]

I would give decoupling these plugins a try. Didn't check internals so I'm not sure this is the only glue, though.

They are completely decoupled. What Wiktor tried to do failed because he used an editor build which has a preconfigured image toolbar. So the image toolbar feature was configured to load buttons which Wiktor removed by removing their plugins.

Sounds like a plan.

Could you handle it?

[oleq]

Yes. I'll handle this thing.

[Reinmar]

BTW, this worked fine:

import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic/ckeditor';

ClassicEditor
	.create( document.querySelector( '#snippet-image' ), {
		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle' ],
		image: {}
	} )

EDIT: OK, that's a different story anyway.

[wwalc]

We could make the toolbar item loader check whether item exists in the component factory. If it does, then fine – add it to the item collection. If not, then log a warning (instead of throwing an error like now). The warning would come directly from the toolbar view so it could be more clear than the current error. Plus, the editor will work.

+100.