Clipboard plugin's handling of images should be configurable - will break other plugins by default

[FlowIT-JIT]

Type of report

Bug

Provide detailed reproduction steps (if any)

In june 2021 the built-in clipboard plugin was extended to offer native support for pasting images as base64.
But since there is already multiple plugins out there offering similar functionality (some with additional features), pasting an image will now result in two images being inserted.

Code causing the problem starts here:

ckeditor4/plugins/clipboard/plugin.js

Line 149 in 70649e5

// Convert image file (if present) to base64 string for modern browsers except IE<10, as it does not support

While native support for pasting images is wonderful, the current implementation seems to break support for custom image paste plugins as there is no way to prevent the clipboard event from inserting the image too, without stopping the event chain. At least not exposed as public API. One can hack it using CKEDITOR.plugins.clipboard.isCustomDataTypesSupported = false;

Furthermore, base64 images can be huge and it may severely hurt performance, especially if using the change event to continuously validate data or push changes to application state - although this use case is discouraged:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#event-change

If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.

In addition, the clipboard event even stops the event chain once the image has been processed, preventing other plugins registered later from receiving the image data.

ckeditor4/plugins/clipboard/plugin.js

Line 199 in 70649e5

evt.stop();

Why would you even use a custom image plugin to handle image pasting?
To automatically upload images immediately. To temporarily store images in blob storage rather than using base64, which greatly increases performance when working with large documents (we use this). To optimize/modify images before inserting them. To support pasting of multiple images at once (we use this). There could be many reasons.

A small sample has been put together which lets the user switch between CKEditor 4.16.1 and the current Major, to test image pasting in both of them.

Download: https://codemagic.dk/CKEditorDemo.zip

1. Open CKEditor demo/index.html (can run locally)
2. Make sure CKEditor version is set to "Old CKEditor"
3. Paste an image into the editor - everything is fine, we get exatly one image.

Now test with the current major.

1. Open CKEditor demo/index.html (can run locally)
2. Make sure CKEditor version is set to "New CKEditor (improved)"
3. Paste an image into the editor - BUG: image is inserted twice !

Expected result

Clipboard plugin should allow for other plugins to handle image pasting

Actual result

Clipboard plugin causes duplicate images

Other details

• Browser: Chrome 93.0.4577.63 (Official Build) (x86_64)
• OS: macOS 10.13.6 (17G14042)
• CKEditor version: 4.16.1 and 4.17.x
• Installed CKEditor plugins: clipboard, misc.

[Comandeer]

I can confirm the issue.

I can think of two possible solutions:

• adding config variable for switching image pasting on/off,
• moving the image pasting logic to separate plugin.

Probably adding config variable would be less invasive solution.

[FlowIT-JIT]

Thanks for confirming @Comandeer 👍😊

I took the liberty to take a go at it. I agree with the suggested approach; adding an option to control the behaviour.

Pull request: #4896

The new option is called "handleImagePasting" (boolean).
We can certainly talk about the ideal name for the new option, but I think "handleImagePasting" makes sense. It indicates that the plugin is responsible for handling image pasting. I considered both "enableImagePasting" and "disableImagePasting", but I don't quite think it communicates that the plugin now "owns" that domain and prevents other plugins from receiving the data. But I'm not really religious about it - feel free to rename it 😊

Example

CKEDITOR.replace( 'editor', {
	// Allow 3rd party plugins to handle image pasting
	clipboard_handleImagePasting: false,
	extraPlugins: "customImagePasteHandlerPlugin"
} );

[CKEditorBot]

Closed in #4896