@ckeditor/ckeditor5-link 28.0.0 → 30.0.0

package/package.json

@@ -1,36 +1,40 @@
 {
   "name": "@ckeditor/ckeditor5-link",
-  "version": "28.0.0",
+  "version": "30.0.0",
   "description": "Link feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^28.0.0",
-    "ckeditor5": "^28.0.0",
+    "@ckeditor/ckeditor5-ui": "^30.0.0",
+    "ckeditor5": "^30.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^28.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^28.0.0",
-    "@ckeditor/ckeditor5-code-block": "^28.0.0",
-    "@ckeditor/ckeditor5-core": "^28.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
-    "@ckeditor/ckeditor5-engine": "^28.0.0",
-    "@ckeditor/ckeditor5-enter": "^28.0.0",
-    "@ckeditor/ckeditor5-image": "^28.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^28.0.0",
-    "@ckeditor/ckeditor5-typing": "^28.0.0",
-    "@ckeditor/ckeditor5-undo": "^28.0.0",
-    "@ckeditor/ckeditor5-utils": "^28.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^30.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^30.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^30.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^30.0.0",
+    "@ckeditor/ckeditor5-code-block": "^30.0.0",
+    "@ckeditor/ckeditor5-core": "^30.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-easy-image": "^30.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^30.0.0",
+    "@ckeditor/ckeditor5-engine": "^30.0.0",
+    "@ckeditor/ckeditor5-enter": "^30.0.0",
+    "@ckeditor/ckeditor5-image": "^30.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^30.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^30.0.0",
+    "@ckeditor/ckeditor5-typing": "^30.0.0",
+    "@ckeditor/ckeditor5-undo": "^30.0.0",
+    "@ckeditor/ckeditor5-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-widget": "^30.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
@@ -51,7 +55,8 @@
     "lang",
     "src",
     "theme",
-    "build"
+    "build",
+    "ckeditor5-metadata.json"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/autolink.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { TextWatcher, getLastTextLine } from 'ckeditor5/src/typing';
+import { Delete, TextWatcher, getLastTextLine } from 'ckeditor5/src/typing';
 
 import { addLinkProtocolIfApplicable } from './utils';
 
@@ -69,6 +69,13 @@ const URL_GROUP_IN_MATCH = 2;
  * @extends module:core/plugin~Plugin
  */
 export default class AutoLink extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ Delete ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -226,6 +233,7 @@ export default class AutoLink extends Plugin {
 	 */
 	_applyAutoLink( link, range ) {
 		const model = this.editor.model;
+		const deletePlugin = this.editor.plugins.get( 'Delete' );
 
 		if ( !this.isEnabled || !isLinkAllowedOnRange( range, model ) ) {
 			return;
@@ -236,6 +244,10 @@ export default class AutoLink extends Plugin {
 			const defaultProtocol = this.editor.config.get( 'link.defaultProtocol' );
 			const parsedUrl = addLinkProtocolIfApplicable( link, defaultProtocol );
 			writer.setAttribute( 'linkHref', parsedUrl, range );
+
+			model.enqueueChange( () => {
+				deletePlugin.requestUndoOnBackspace();
+			} );
 		} );
 	}
 }

package/src/link.js

@@ -215,9 +215,15 @@ export default class Link extends Plugin {
  * @typedef {Object} module:link/link~LinkDecoratorAutomaticDefinition
  * @property {'automatic'} mode Link decorator type. It is `'automatic'` for all automatic decorators.
  * @property {Function} callback Takes a `url` as a parameter and returns `true` if the `attributes` should be applied to the link.
- * @property {Object} attributes Key-value pairs used as link attributes added to the output during the
+ * @property {Object} [attributes] Key-value pairs used as link attributes added to the output during the
  * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
  * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {Object} [styles] Key-value pairs used as link styles added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {String|Array.<String>} [classes] Class names used as link classes added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
  */
 
 /**
@@ -241,8 +247,14 @@ export default class Link extends Plugin {
  * @typedef {Object} module:link/link~LinkDecoratorManualDefinition
  * @property {'manual'} mode Link decorator type. It is `'manual'` for all manual decorators.
  * @property {String} label The label of the UI button that the user can use to control the presence of link attributes.
- * @property {Object} attributes Key-value pairs used as link attributes added to the output during the
+ * @property {Object} [attributes] Key-value pairs used as link attributes added to the output during the
  * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
  * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {Object} [styles] Key-value pairs used as link styles added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+ * @property {String|Array.<String>} [classes] Class names used as link classes added to the output during the
+ * {@glink framework/guides/architecture/editing-engine#conversion downcasting}.
+ * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
  * @property {Boolean} [defaultValue] Controls whether the decorator is "on" by default.
  */

package/src/linkcommand.js

@@ -9,10 +9,10 @@
 
 import { Command } from 'ckeditor5/src/core';
 import { findAttributeRange } from 'ckeditor5/src/typing';
-import { Collection, toMap, first } from 'ckeditor5/src/utils';
+import { Collection, first, toMap } from 'ckeditor5/src/utils';
 
 import AutomaticDecorators from './utils/automaticdecorators';
-import { isImageAllowed } from './utils';
+import { isLinkableElement } from './utils';
 
 /**
  * The link command. It is used by the {@link module:link/link~Link link feature}.
@@ -44,7 +44,7 @@ export default class LinkCommand extends Command {
 
 		/**
 		 * An instance of the helper that ties together all {@link module:link/link~LinkDecoratorAutomaticDefinition}
-		 * that are used by the {@glink features/link link} and the {@glink features/image#linking-images linking images} features.
+		 * that are used by the {@glink features/link link} and the {@glink features/images/images-linking linking images} features.
 		 *
 		 * @readonly
 		 * @type {module:link/utils~AutomaticDecorators}
@@ -66,18 +66,17 @@ export default class LinkCommand extends Command {
 	 */
 	refresh() {
 		const model = this.editor.model;
-		const doc = model.document;
-
-		const selectedElement = first( doc.selection.getSelectedBlocks() );
+		const selection = model.document.selection;
+		const selectedElement = selection.getSelectedElement() || first( selection.getSelectedBlocks() );
 
-		// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
+		// A check for any integration that allows linking elements (e.g. `LinkImage`).
 		// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
-		if ( isImageAllowed( selectedElement, model.schema ) ) {
+		if ( isLinkableElement( selectedElement, model.schema ) ) {
 			this.value = selectedElement.getAttribute( 'linkHref' );
 			this.isEnabled = model.schema.checkAttribute( selectedElement, 'linkHref' );
 		} else {
-			this.value = doc.selection.getAttribute( 'linkHref' );
-			this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'linkHref' );
+			this.value = selection.getAttribute( 'linkHref' );
+			this.isEnabled = model.schema.checkAttributeInSelection( selection, 'linkHref' );
 		}
 
 		for ( const manualDecorator of this.manualDecorators ) {
@@ -258,17 +257,16 @@ export default class LinkCommand extends Command {
 	 */
 	_getDecoratorStateFromModel( decoratorName ) {
 		const model = this.editor.model;
-		const doc = model.document;
-
-		const selectedElement = first( doc.selection.getSelectedBlocks() );
+		const selection = model.document.selection;
+		const selectedElement = selection.getSelectedElement();
 
 		// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
 		// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
-		if ( isImageAllowed( selectedElement, model.schema ) ) {
+		if ( isLinkableElement( selectedElement, model.schema ) ) {
 			return selectedElement.getAttribute( decoratorName );
 		}
 
-		return doc.selection.getAttribute( decoratorName );
+		return selection.getAttribute( decoratorName );
 	}
 
 	/**

package/src/linkediting.js

@@ -184,14 +184,24 @@ export default class LinkEditing extends Plugin {
 			editor.model.schema.extend( '$text', { allowAttributes: decorator.id } );
 
 			// Keeps reference to manual decorator to decode its name to attributes during downcast.
-			manualDecorators.add( new ManualDecorator( decorator ) );
+			decorator = new ManualDecorator( decorator );
+
+			manualDecorators.add( decorator );
 
 			editor.conversion.for( 'downcast' ).attributeToElement( {
 				model: decorator.id,
 				view: ( manualDecoratorName, { writer } ) => {
 					if ( manualDecoratorName ) {
-						const attributes = manualDecorators.get( decorator.id ).attributes;
-						const element = writer.createAttributeElement( 'a', attributes, { priority: 5 } );
+						const element = writer.createAttributeElement( 'a', decorator.attributes, { priority: 5 } );
+
+						if ( decorator.classes ) {
+							writer.addClass( decorator.classes, element );
+						}
+
+						for ( const key in decorator.styles ) {
+							writer.setStyle( key, decorator.styles[ key ], element );
+						}
+
 						writer.setCustomProperty( 'link', true, element );
 
 						return element;
@@ -201,7 +211,7 @@ export default class LinkEditing extends Plugin {
 			editor.conversion.for( 'upcast' ).elementToAttribute( {
 				view: {
 					name: 'a',
-					attributes: manualDecorators.get( decorator.id ).attributes
+					...decorator._createPattern()
 				},
 				model: {
 					key: decorator.id
@@ -572,7 +582,7 @@ function isTyping( editor ) {
 	return input.isInput( editor.model.change( writer => writer.batch ) );
 }
 
-// Returns an array containing names of attributes allowed on `$text` that describes the link item.
+// Returns an array containing names of the attributes allowed on `$text` that describes the link item.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @returns {Array.<String>}

package/src/linkimageediting.js

@@ -13,12 +13,10 @@ import { toMap } from 'ckeditor5/src/utils';
 
 import LinkEditing from './linkediting';
 
-import linkIcon from '../theme/icons/link.svg';
-
 /**
  * The link image engine feature.
  *
- * It accepts the `linkHref="url"` attribute in the model for the {@link module:image/image~Image `<image>`} element
+ * It accepts the `linkHref="url"` attribute in the model for the {@link module:image/image~Image `<imageBlock>`} element
  * which allows linking images.
  *
  * @extends module:core/plugin~Plugin
@@ -28,7 +26,7 @@ export default class LinkImageEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ 'ImageEditing', LinkEditing ];
+		return [ 'ImageEditing', 'ImageUtils', LinkEditing ];
 	}
 
 	/**
@@ -40,12 +38,18 @@ export default class LinkImageEditing extends Plugin {
 
 	init() {
 		const editor = this.editor;
+		const schema = editor.model.schema;
 
-		editor.model.schema.extend( 'image', { allowAttributes: [ 'linkHref' ] } );
+		if ( editor.plugins.has( 'ImageBlockEditing' ) ) {
+			schema.extend( 'imageBlock', { allowAttributes: [ 'linkHref' ] } );
+		}
 
-		editor.conversion.for( 'upcast' ).add( upcastLink() );
-		editor.conversion.for( 'editingDowncast' ).add( downcastImageLink( { attachIconIndicator: true } ) );
-		editor.conversion.for( 'dataDowncast' ).add( downcastImageLink( { attachIconIndicator: false } ) );
+		if ( editor.plugins.has( 'ImageInlineEditing' ) ) {
+			schema.extend( 'imageInline', { allowAttributes: [ 'linkHref' ] } );
+		}
+
+		editor.conversion.for( 'upcast' ).add( upcastLink( editor ) );
+		editor.conversion.for( 'downcast' ).add( downcastImageLink( editor ) );
 
 		// Definitions for decorators are provided by the `link` command and the `LinkEditing` plugin.
 		this._enableAutomaticDecorators();
@@ -77,30 +81,56 @@ export default class LinkImageEditing extends Plugin {
 	_enableManualDecorators() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'link' );
-		const manualDecorators = command.manualDecorators;
 
 		for ( const decorator of command.manualDecorators ) {
-			editor.model.schema.extend( 'image', { allowAttributes: decorator.id } );
-			editor.conversion.for( 'downcast' ).add( downcastImageLinkManualDecorator( manualDecorators, decorator ) );
-			editor.conversion.for( 'upcast' ).add( upcastImageLinkManualDecorator( manualDecorators, decorator ) );
+			if ( editor.plugins.has( 'ImageBlockEditing' ) ) {
+				editor.model.schema.extend( 'imageBlock', { allowAttributes: decorator.id } );
+			}
+
+			if ( editor.plugins.has( 'ImageInlineEditing' ) ) {
+				editor.model.schema.extend( 'imageInline', { allowAttributes: decorator.id } );
+			}
+
+			editor.conversion.for( 'downcast' ).add( downcastImageLinkManualDecorator( decorator ) );
+			editor.conversion.for( 'upcast' ).add( upcastImageLinkManualDecorator( editor, decorator ) );
 		}
 	}
 }
 
-// Returns a converter that consumes the 'href' attribute if a link contains an image.
+// Returns a converter for linked block images that consumes the "href" attribute
+// if a link contains an image.
 //
 // @private
+// @param {module:core/editor/editor~Editor} editor The editor instance.
 // @returns {Function}
-function upcastLink() {
+function upcastLink( editor ) {
+	const isImageInlinePluginLoaded = editor.plugins.has( 'ImageInlineEditing' );
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
+
 	return dispatcher => {
 		dispatcher.on( 'element:a', ( evt, data, conversionApi ) => {
 			const viewLink = data.viewItem;
-			const imageInLink = getFirstImage( viewLink );
+			const imageInLink = imageUtils.findViewImgElement( viewLink );
 
 			if ( !imageInLink ) {
 				return;
 			}
 
+			const blockImageView = imageInLink.findAncestor( element => imageUtils.isBlockImageView( element ) );
+
+			// There are four possible cases to consider here
+			//
+			// 1. A "root > ... > figure.image > a > img" structure.
+			// 2. A "root > ... > figure.image > a > picture > img" structure.
+			// 3. A "root > ... > block > a > img" structure.
+			// 4. A "root > ... > block > a > picture > img" structure.
+			//
+			// but the last 2 cases should only be considered by this converter when the inline image plugin
+			// is NOT loaded in the editor (because otherwise, that would be a plain, linked inline image).
+			if ( isImageInlinePluginLoaded && !blockImageView ) {
+				return;
+			}
+
 			// There's an image inside an <a> element - we consume it so it won't be picked up by the Link plugin.
 			const consumableAttributes = { attributes: [ 'href' ] };
 
@@ -121,7 +151,7 @@ function upcastLink() {
 			// figure > a > img: parent of the view link element is an image element (figure).
 			let modelElement = data.modelCursor.parent;
 
-			if ( !modelElement.is( 'element', 'image' ) ) {
+			if ( !modelElement.is( 'element', 'imageBlock' ) ) {
 				// a > img: parent of the view link is not the image (figure) element. We need to convert it manually.
 				const conversionResult = conversionApi.convertItem( imageInLink, data.modelCursor );
 
@@ -134,7 +164,7 @@ function upcastLink() {
 				modelElement = data.modelCursor.nodeBefore;
 			}
 
-			if ( modelElement && modelElement.is( 'element', 'image' ) ) {
+			if ( modelElement && modelElement.is( 'element', 'imageBlock' ) ) {
 				// Set the linkHref attribute from link element on model image element.
 				conversionApi.writer.setAttribute( 'linkHref', linkHref, modelElement );
 			}
@@ -144,42 +174,34 @@ function upcastLink() {
 	};
 }
 
-// Return a converter that adds the `<a>` element to data.
+// Creates a converter that adds `<a>` to linked block image view elements.
 //
 // @private
-// @params {Object} options
-// @params {Boolean} options.attachIconIndicator=false If set to `true`, an icon that informs about the linked image will be added.
-// @returns {Function}
-function downcastImageLink( options ) {
+function downcastImageLink( editor ) {
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
+
 	return dispatcher => {
-		dispatcher.on( 'attribute:linkHref:image', ( evt, data, conversionApi ) => {
+		dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
+			if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+				return;
+			}
+
 			// The image will be already converted - so it will be present in the view.
 			const viewFigure = conversionApi.mapper.toViewElement( data.item );
 			const writer = conversionApi.writer;
 
 			// But we need to check whether the link element exists.
 			const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
-
-			let linkIconIndicator;
-
-			if ( options.attachIconIndicator ) {
-				// Create an icon indicator for a linked image.
-				linkIconIndicator = writer.createUIElement( 'span', { class: 'ck ck-link-image_icon' }, function( domDocument ) {
-					const domElement = this.toDomElement( domDocument );
-					domElement.innerHTML = linkIcon;
-
-					return domElement;
-				} );
-			}
+			const viewImage = imageUtils.findViewImgElement( viewFigure );
+			// <picture>...<img/></picture> or <img/>
+			const viewImgOrPicture = viewImage.parent.is( 'element', 'picture' ) ? viewImage.parent : viewImage;
 
 			// If so, update the attribute if it's defined or remove the entire link if the attribute is empty.
 			if ( linkInImage ) {
 				if ( data.attributeNewValue ) {
 					writer.setAttribute( 'href', data.attributeNewValue, linkInImage );
 				} else {
-					const viewImage = Array.from( linkInImage.getChildren() ).find( child => child.name === 'img' );
-
-					writer.move( writer.createRangeOn( viewImage ), writer.createPositionAt( viewFigure, 0 ) );
+					writer.move( writer.createRangeOn( viewImgOrPicture ), writer.createPositionAt( viewFigure, 0 ) );
 					writer.remove( linkInImage );
 				}
 			} else {
@@ -191,14 +213,9 @@ function downcastImageLink( options ) {
 				writer.insert( writer.createPositionAt( viewFigure, 0 ), linkElement );
 
 				// 3. Move the image to the link.
-				writer.move( writer.createRangeOn( viewFigure.getChild( 1 ) ), writer.createPositionAt( linkElement, 0 ) );
-
-				// 4. Inset the linked image icon indicator while downcast to editing.
-				if ( linkIconIndicator ) {
-					writer.insert( writer.createPositionAt( linkElement, 'end' ), linkIconIndicator );
-				}
+				writer.move( writer.createRangeOn( viewImgOrPicture ), writer.createPositionAt( linkElement, 0 ) );
 			}
-		} );
+		}, { priority: 'high' } );
 	};
 }
 
@@ -206,11 +223,9 @@ function downcastImageLink( options ) {
 //
 // @private
 // @returns {Function}
-function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
+function downcastImageLinkManualDecorator( decorator ) {
 	return dispatcher => {
-		dispatcher.on( `attribute:${ decorator.id }:image`, ( evt, data, conversionApi ) => {
-			const attributes = manualDecorators.get( decorator.id ).attributes;
-
+		dispatcher.on( `attribute:${ decorator.id }:imageBlock`, ( evt, data, conversionApi ) => {
 			const viewFigure = conversionApi.mapper.toViewElement( data.item );
 			const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
 
@@ -221,9 +236,17 @@ function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
 				return;
 			}
 
-			for ( const [ key, val ] of toMap( attributes ) ) {
+			for ( const [ key, val ] of toMap( decorator.attributes ) ) {
 				conversionApi.writer.setAttribute( key, val, linkInImage );
 			}
+
+			if ( decorator.classes ) {
+				conversionApi.writer.addClass( decorator.classes, linkInImage );
+			}
+
+			for ( const key in decorator.styles ) {
+				conversionApi.writer.setStyle( key, decorator.styles[ key ], linkInImage );
+			}
 		} );
 	};
 }
@@ -232,11 +255,13 @@ function downcastImageLinkManualDecorator( manualDecorators, decorator ) {
 //
 // @private
 // @returns {Function}
-function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
+function upcastImageLinkManualDecorator( editor, decorator ) {
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
+
 	return dispatcher => {
 		dispatcher.on( 'element:a', ( evt, data, conversionApi ) => {
 			const viewLink = data.viewItem;
-			const imageInLink = getFirstImage( viewLink );
+			const imageInLink = imageUtils.findViewImgElement( viewLink );
 
 			// We need to check whether an image is inside a link because the converter handles
 			// only manual decorators for linked images. See #7975.
@@ -244,11 +269,7 @@ function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
 				return;
 			}
 
-			const consumableAttributes = {
-				attributes: manualDecorators.get( decorator.id ).attributes
-			};
-
-			const matcher = new Matcher( consumableAttributes );
+			const matcher = new Matcher( decorator._createPattern() );
 			const result = matcher.match( viewLink );
 
 			// The link element does not have required attributes or/and proper values.
@@ -261,7 +282,7 @@ function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
 				return;
 			}
 
-			// At this stage we can assume that we have the `<image>` element.
+			// At this stage we can assume that we have the `<imageBlock>` element.
 			// `nodeBefore` comes after conversion: `<a><img></a>`.
 			// `parent` comes with full image definition: `<figure><a><img></a></figure>.
 			// See the body of the `upcastLink()` function.
@@ -272,12 +293,3 @@ function upcastImageLinkManualDecorator( manualDecorators, decorator ) {
 		// Using the same priority that `upcastLink()` converter guarantees that the linked image was properly converted.
 	};
 }
-
-// Returns the first image in a given view element.
-//
-// @private
-// @param {module:engine/view/element~Element}
-// @returns {module:engine/view/element~Element|undefined}
-function getFirstImage( viewElement ) {
-	return Array.from( viewElement.getChildren() ).find( child => child.name === 'img' );
-}

package/src/linkimageui.js

@@ -30,7 +30,7 @@ export default class LinkImageUI extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ LinkEditing, LinkUI, 'Image' ];
+		return [ LinkEditing, LinkUI, 'ImageBlockEditing' ];
 	}
 
 	/**
@@ -48,12 +48,15 @@ export default class LinkImageUI extends Plugin {
 		const viewDocument = editor.editing.view.document;
 
 		this.listenTo( viewDocument, 'click', ( evt, data ) => {
-			const hasLink = isImageLinked( viewDocument.selection.getSelectedElement(), editor.plugins.get( 'Image' ) );
-
-			if ( hasLink ) {
+			if ( this._isSelectedLinkedImage( editor.model.document.selection ) ) {
+				// Prevent browser navigation when clicking a linked image.
 				data.preventDefault();
+
+				// Block the `LinkUI` plugin when an image was clicked.
+				// In such a case, we'd like to display the image toolbar.
+				evt.stop();
 			}
-		} );
+		}, { priority: 'high' } );
 
 		this._createToolbarLinkImageButton();
 	}
@@ -91,9 +94,7 @@ export default class LinkImageUI extends Plugin {
 
 			// Show the actionsView or formView (both from LinkUI) on button click depending on whether the image is linked already.
 			this.listenTo( button, 'execute', () => {
-				const hasLink = isImageLinked( editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get( 'Image' ) );
-
-				if ( hasLink ) {
+				if ( this._isSelectedLinkedImage( editor.model.document.selection ) ) {
 					plugin._addActionsView();
 				} else {
 					plugin._showUI( true );
@@ -103,18 +104,19 @@ export default class LinkImageUI extends Plugin {
 			return button;
 		} );
 	}
-}
 
-// A helper function that checks whether the element is a linked image.
-//
-// @param {module:engine/model/element~Element} element
-// @returns {Boolean}
-function isImageLinked( element, image ) {
-	const isImage = element && image.isImageWidget( element );
+	/**
+	 * Returns true if a linked image (either block or inline) is the only selected element
+	 * in the model document.
+	 *
+	 * @private
+	 * @param {module:engine/model/selection~Selection} selection
+	 * @returns {Boolean}
+	 */
+	_isSelectedLinkedImage( selection ) {
+		const selectedModelElement = selection.getSelectedElement();
+		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
 
-	if ( !isImage ) {
-		return false;
+		return imageUtils.isImage( selectedModelElement ) && selectedModelElement.hasAttribute( 'linkHref' );
 	}
-
-	return element.getChild( 0 ).is( 'element', 'a' );
 }