@ckeditor/ckeditor5-link 27.1.0 → 29.2.0

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' );
 }

package/src/linkui.js

@@ -10,7 +10,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { ClickObserver } from 'ckeditor5/src/engine';
 import { ButtonView, ContextualBalloon, clickOutsideHandler } from 'ckeditor5/src/ui';
-
+import { isWidget } from 'ckeditor5/src/widget';
 import LinkFormView from './ui/linkformview';
 import LinkActionsView from './ui/linkactionsview';
 import { addLinkProtocolIfApplicable, isLinkElement, LINK_KEYSTROKE } from './utils';
@@ -593,14 +593,19 @@ export default class LinkUI extends Plugin {
 
 			target = view.domConverter.viewRangeToDom( newRange );
 		} else {
-			const targetLink = this._getSelectedLinkElement();
-			const range = viewDocument.selection.getFirstRange();
-
-			target = targetLink ?
-				// When selection is inside link element, then attach panel to this element.
-				view.domConverter.mapViewToDom( targetLink ) :
-				// Otherwise attach panel to the selection.
-				view.domConverter.viewRangeToDom( range );
+			// Make sure the target is calculated on demand at the last moment because a cached DOM range
+			// (which is very fragile) can desynchronize with the state of the editing view if there was
+			// any rendering done in the meantime. This can happen, for instance, when an inline widget
+			// gets unlinked.
+			target = () => {
+				const targetLink = this._getSelectedLinkElement();
+
+				return targetLink ?
+					// When selection is inside link element, then attach panel to this element.
+					view.domConverter.mapViewToDom( targetLink ) :
+					// Otherwise attach panel to the selection.
+					view.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() );
+			};
 		}
 
 		return { target };
@@ -611,8 +616,9 @@ export default class LinkUI extends Plugin {
 	 * the {@link module:engine/view/document~Document editing view's} selection or `null`
 	 * if there is none.
 	 *
-	 * **Note**: For a non–collapsed selection, the link element is only returned when **fully**
-	 * selected and the **only** element within the selection boundaries.
+	 * **Note**: For a non–collapsed selection, the link element is returned when **fully**
+	 * selected and the **only** element within the selection boundaries, or when
+	 * a linked widget is selected.
 	 *
 	 * @private
 	 * @returns {module:engine/view/attributeelement~AttributeElement|null}
@@ -620,8 +626,10 @@ export default class LinkUI extends Plugin {
 	_getSelectedLinkElement() {
 		const view = this.editor.editing.view;
 		const selection = view.document.selection;
+		const selectedElement = selection.getSelectedElement();
 
-		if ( selection.isCollapsed ) {
+		// The selection is collapsed or some widget is selected (especially inline widget).
+		if ( selection.isCollapsed || selectedElement && isWidget( selectedElement ) ) {
 			return findLinkElementAncestor( selection.getFirstPosition() );
 		} else {
 			// The range for fully selected link is usually anchored in adjacent text nodes.

package/src/unlinkcommand.js

@@ -9,9 +9,8 @@
 
 import { Command } from 'ckeditor5/src/core';
 import { findAttributeRange } from 'ckeditor5/src/typing';
-import { first } from 'ckeditor5/src/utils';
 
-import { isImageAllowed } from './utils';
+import { isLinkableElement } from './utils';
 
 /**
  * The unlink command. It is used by the {@link module:link/link~Link link plugin}.
@@ -24,16 +23,15 @@ export default class UnlinkCommand 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();
 
-		// A check for the `LinkImage` plugin. If the selection contains an image 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.isEnabled = model.schema.checkAttribute( selectedElement, 'linkHref' );
 		} else {
-			this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'linkHref' );
+			this.isEnabled = model.schema.checkAttributeInSelection( selection, 'linkHref' );
 		}
 	}
 

package/src/utils/automaticdecorators.js

@@ -73,6 +73,15 @@ export default class AutomaticDecorators {
 					const viewElement = viewWriter.createAttributeElement( 'a', item.attributes, {
 						priority: 5
 					} );
+
+					if ( item.classes ) {
+						viewWriter.addClass( item.classes, viewElement );
+					}
+
+					for ( const key in item.styles ) {
+						viewWriter.setStyle( key, item.styles[ key ], viewElement );
+					}
+
 					viewWriter.setCustomProperty( 'link', true, viewElement );
 					if ( item.callback( data.attributeNewValue ) ) {
 						if ( data.item.is( 'selection' ) ) {
@@ -97,8 +106,8 @@ export default class AutomaticDecorators {
 	 */
 	getDispatcherForLinkedImage() {
 		return dispatcher => {
-			dispatcher.on( 'attribute:linkHref:image', ( evt, data, conversionApi ) => {
-				const viewFigure = conversionApi.mapper.toViewElement( data.item );
+			dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, { writer, mapper } ) => {
+				const viewFigure = mapper.toViewElement( data.item );
 				const linkInImage = Array.from( viewFigure.getChildren() ).find( child => child.name === 'a' );
 
 				for ( const item of this._definitions ) {
@@ -106,20 +115,38 @@ export default class AutomaticDecorators {
 
 					if ( item.callback( data.attributeNewValue ) ) {
 						for ( const [ key, val ] of attributes ) {
+							// Left for backward compatibility. Since v30 decorator should
+							// accept `classes` and `styles` separately from `attributes`.
 							if ( key === 'class' ) {
-								conversionApi.writer.addClass( val, linkInImage );
+								writer.addClass( val, linkInImage );
 							} else {
-								conversionApi.writer.setAttribute( key, val, linkInImage );
+								writer.setAttribute( key, val, linkInImage );
 							}
 						}
+
+						if ( item.classes ) {
+							writer.addClass( item.classes, linkInImage );
+						}
+
+						for ( const key in item.styles ) {
+							writer.setStyle( key, item.styles[ key ], linkInImage );
+						}
 					} else {
 						for ( const [ key, val ] of attributes ) {
 							if ( key === 'class' ) {
-								conversionApi.writer.removeClass( val, linkInImage );
+								writer.removeClass( val, linkInImage );
 							} else {
-								conversionApi.writer.removeAttribute( key, linkInImage );
+								writer.removeAttribute( key, linkInImage );
 							}
 						}
+
+						if ( item.classes ) {
+							writer.removeClass( item.classes, linkInImage );
+						}
+
+						for ( const key in item.styles ) {
+							writer.removeStyle( key, linkInImage );
+						}
 					}
 				}
 			} );

package/src/utils/manualdecorator.js

@@ -28,7 +28,7 @@ export default class ManualDecorator {
 	 * Attributes should keep the format of attributes defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
 	 * @param {Boolean} [config.defaultValue] Controls whether the decorator is "on" by default.
 	 */
-	constructor( { id, label, attributes, defaultValue } ) {
+	constructor( { id, label, attributes, classes, styles, defaultValue } ) {
 		/**
 		 * An ID of a manual decorator which is the name of the attribute in the model, for example: 'linkManualDecorator0'.
 		 *
@@ -65,6 +65,36 @@ export default class ManualDecorator {
 		 * @type {Object}
 		 */
 		this.attributes = attributes;
+
+		/**
+		 * A set of classes added to downcasted data when the decorator is activated for a specific link.
+		 * Classes should be added in a form of classes defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
+		 *
+		 * @type {Object}
+		 */
+		this.classes = classes;
+
+		/**
+		 * A set of styles added to downcasted data when the decorator is activated for a specific link.
+		 * Styles should be added in a form of styles defined in {@link module:engine/view/elementdefinition~ElementDefinition}.
+		 *
+		 * @type {Object}
+		 */
+		this.styles = styles;
+	}
+
+	/**
+	 * Returns {@link module:engine/view/matcher~MatcherPattern} with decorator attributes.
+	 *
+	 * @protected
+	 * @returns {module:engine/view/matcher~MatcherPattern}
+	 */
+	_createPattern() {
+		return {
+			attributes: this.attributes,
+			classes: this.classes,
+			styles: this.styles
+		};
 	}
 }
 

package/src/utils.js

@@ -129,18 +129,18 @@ export function normalizeDecorators( decorators ) {
 }
 
 /**
- * Returns `true` if the specified `element` is an image and it can be linked (the element allows having the `linkHref` attribute).
+ * Returns `true` if the specified `element` can be linked (the element allows the `linkHref` attribute).
  *
  * @params {module:engine/model/element~Element|null} element
  * @params {module:engine/model/schema~Schema} schema
  * @returns {Boolean}
  */
-export function isImageAllowed( element, schema ) {
+export function isLinkableElement( element, schema ) {
 	if ( !element ) {
 		return false;
 	}
 
-	return element.is( 'element', 'image' ) && schema.checkAttribute( 'image', 'linkHref' );
+	return schema.checkAttribute( element.name, 'linkHref' );
 }
 
 /**

package/theme/linkimage.css

@@ -3,17 +3,14 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-link-image_icon {
-	position: absolute;
-	top: var(--ck-spacing-medium);
-	right: var(--ck-spacing-medium);
-	width: 28px;
-	height: 28px;
-	padding: 4px;
-	box-sizing: border-box;
-	border-radius: var(--ck-border-radius);
-
-	& svg {
-		fill: currentColor;
+.ck.ck-editor__editable {
+	/* Linked image indicator */
+	& figure.image > a,
+	& a span.image-inline {
+		&::after {
+			display: block;
+			position: absolute;
+		}
 	}
 }
+