Link toolbar does not show for inline widgets with no defined toolbar

[ma2ciek]

A follow-up to #2052. Branch i/2052-inline-images 

I've been testing inline widgets (https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html) on the current branch of inline images (0b674a4) and when a link is added on an inline widget, the balloon can not be later opened by clicking on the widget.

cc @oleq.

[pomek]

It happens because we block the LinkUI in the wrong way:

ckeditor5/packages/ckeditor5-link/src/linkui.js

Lines 644 to 653 in f7b4ad4

	if ( view.createRangeIn( startLink ).getTrimmed().isEqual( range ) ) {
	// The link element is not fully selected when, for instance, there's an inline image widget directly inside.
	// This should be interpreted as a selected inline image and the image UI should be displayed instead
	// (LinkUI should not interact).
	if ( startLink.childCount === 1 && isWidget( startLink.getChild( 0 ) ) ) {
	return null;
	}
	return startLink;
	} else {

The code assumes that the selected widget must be an inline image. However, integrators can allow inserting a widget into a link.

We need to figure out some other way for blocking the LinkUI when the linked inline image is selected.

[pomek]

After applying some fixes, it works:

diff --git a/packages/ckeditor5-link/src/linkimageui.js b/packages/ckeditor5-link/src/linkimageui.js
index 1dc232a04a..93302e1d1f 100644
--- a/packages/ckeditor5-link/src/linkimageui.js
+++ b/packages/ckeditor5-link/src/linkimageui.js
@@ -49,10 +49,16 @@ export default class LinkImageUI extends Plugin {
 
 		// Prevent browser navigation when clicking a linked image.
 		this.listenTo( viewDocument, 'click', ( evt, data ) => {
+			// TODO: Should we block the `link` command or the `LinkUI` plugin?
+			// As for now, it blocks the command, as we do here `packages/ckeditor5-link/src/linkui.js:209`.
 			if ( this._isSelectedLinkedImage( editor.model.document.selection ) ) {
+				editor.commands.get( 'link' ).forceDisabled( 'LinkImageUI:link' );
+
 				data.preventDefault();
+			} else {
+				editor.commands.get( 'link' ).clearForceDisabled( 'LinkImageUI:link' );
 			}
-		} );
+		}, { priority: 'high' } );
 
 		this._createToolbarLinkImageButton();
 	}
diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js
index c665c1cac3..4986cfc4b5 100644
--- a/packages/ckeditor5-link/src/linkui.js
+++ b/packages/ckeditor5-link/src/linkui.js
@@ -240,12 +240,17 @@ export default class LinkUI extends Plugin {
 	 */
 	_enableUserBalloonInteractions() {
 		const viewDocument = this.editor.editing.view.document;
+		const linkCommand = this.editor.commands.get( 'link' );
 
 		// Handle click on view document and show panel when selection is placed inside the link element.
 		// Keep panel open until selection will be inside the same link element.
 		this.listenTo( viewDocument, 'click', () => {
 			const parentLink = this._getSelectedLinkElement();
 
+			if ( !linkCommand.isEnabled ) {
+				return;
+			}
+
 			if ( parentLink ) {
 				// Then show panel but keep focus inside editor editable.
 				this._showUI();
@@ -621,7 +626,7 @@ export default class LinkUI extends Plugin {
 	 * selected and the **only** element within the selection boundaries.
 	 *
 	 * @private
	 * @returns {module:engine/view/attributeelement~AttributeElement|null}
 	 */
 	_getSelectedLinkElement() {
 		const view = this.editor.editing.view;
@@ -642,13 +647,6 @@ export default class LinkUI extends Plugin {
 
 			// Check if the link element is fully selected.
 			if ( view.createRangeIn( startLink ).getTrimmed().isEqual( range ) ) {
-				// The link element is not fully selected when, for instance, there's an inline image widget directly inside.
-				// This should be interpreted as a selected inline image and the image UI should be displayed instead
-				// (LinkUI should not interact).
-				if ( startLink.childCount === 1 && isWidget( startLink.getChild( 0 ) ) ) {
-					return null;
-				}
-
 				return startLink;
 			} else {
 				return null;

[pomek]

☝️ When the inline image is selected, I cannot open the UI using Ctrl+K. So blocking the command is not working. I'll check how it will work when disabling the LinkUI plugin.

[pomek]

It works. The latest changes:

diff --git a/packages/ckeditor5-link/src/linkimageui.js b/packages/ckeditor5-link/src/linkimageui.js
index 1dc232a04a..6a7e056b7f 100644
--- a/packages/ckeditor5-link/src/linkimageui.js
+++ b/packages/ckeditor5-link/src/linkimageui.js
@@ -46,13 +46,19 @@ export default class LinkImageUI extends Plugin {
 	init() {
 		const editor = this.editor;
 		const viewDocument = editor.editing.view.document;
+		const linkUI = editor.plugins.get( 'LinkUI' );
 
 		// Prevent browser navigation when clicking a linked image.
 		this.listenTo( viewDocument, 'click', ( evt, data ) => {
+			// Block the `LinkUI` plugin when an image was clicked. In such a case, we'd like to display the image toolbar.
+			// See: #9607.
 			if ( this._isSelectedLinkedImage( editor.model.document.selection ) ) {
+				linkUI.forceDisabled( 'LinkImageUI:link' );
 				data.preventDefault();
+			} else {
+				linkUI.clearForceDisabled( 'LinkImageUI:link' );
 			}
-		} );
+		}, { priority: 'high' } );
 
 		this._createToolbarLinkImageButton();
 	}
diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js
index c665c1cac3..60323c42a7 100644
--- a/packages/ckeditor5-link/src/linkui.js
+++ b/packages/ckeditor5-link/src/linkui.js
@@ -246,6 +246,10 @@ export default class LinkUI extends Plugin {
 		this.listenTo( viewDocument, 'click', () => {
 			const parentLink = this._getSelectedLinkElement();
 
+			if ( !this.isEnabled ) {
+				return;
+			}
+
 			if ( parentLink ) {
 				// Then show panel but keep focus inside editor editable.
 				this._showUI();
@@ -642,13 +646,6 @@ export default class LinkUI extends Plugin {
 
 			// Check if the link element is fully selected.
 			if ( view.createRangeIn( startLink ).getTrimmed().isEqual( range ) ) {
-				// The link element is not fully selected when, for instance, there's an inline image widget directly inside.
-				// This should be interpreted as a selected inline image and the image UI should be displayed instead
-				// (LinkUI should not interact).
-				if ( startLink.childCount === 1 && isWidget( startLink.getChild( 0 ) ) ) {
-					return null;
-				}
-
 				return startLink;
 			} else {
 				return null;

[pomek]

Fixed by #9617.