#8871: Integrate inline images with the link feature

packages/ckeditor5-image/src/autoimage.js

@@ -13,7 +13,7 @@ import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
 import { Undo } from 'ckeditor5/src/undo';
 import { global } from 'ckeditor5/src/utils';
 
-import { insertImage } from './image/utils';
+import ImageUtils from './imageutils';
 
 // Implements the pattern: http(s)://(www.)example.com/path/to/resource.ext?query=params&maybe=too.
 const IMAGE_URL_REGEXP = new RegExp( String( /^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@!$&'()*+,;=%-]+/.source +
@@ -32,7 +32,7 @@ export default class AutoImage extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ Clipboard, Undo ];
+		return [ Clipboard, ImageUtils, Undo ];
 	}
 
 	/**
@@ -118,6 +118,8 @@ export default class AutoImage extends Plugin {
 		// TODO: Use a marker instead of LiveRange & LivePositions.
 		const urlRange = new LiveRange( leftPosition, rightPosition );
 		const walker = urlRange.getWalker( { ignoreElementEnd: true } );
+		const selectionAttributes = Object.fromEntries( editor.model.document.selection.getAttributes() );
+		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
 
 		let src = '';
 
@@ -166,7 +168,7 @@ export default class AutoImage extends Plugin {
 					insertionPosition = this._positionToInsert.toPosition();
 				}
 
-				insertImage( editor, { src }, insertionPosition );
+				imageUtils.insertImage( { ...selectionAttributes, src }, insertionPosition );
 
 				this._positionToInsert.detach();
 				this._positionToInsert = null;

packages/ckeditor5-image/src/image.js

@@ -11,7 +11,6 @@ import { Plugin } from 'ckeditor5/src/core';
 
 import ImageBlock from './imageblock';
 import ImageInline from './imageinline';
-import { isImageWidget } from './image/utils';
 
 import '../theme/image.css';
 
@@ -44,16 +43,6 @@ export default class Image extends Plugin {
 	static get pluginName() {
 		return 'Image';
 	}
-
-	/**
-	 * Checks if a given view element is an image widget.
-	 *
-	 * @param {module:engine/view/element~Element} viewElement
-	 * @returns {Boolean}
-	 */
-	isImageWidget( viewElement ) {
-		return isImageWidget( viewElement );
-	}
 }
 
 /**

packages/ckeditor5-image/src/image/converters.js

@@ -8,7 +8,6 @@
  */
 
 import { first } from 'ckeditor5/src/utils';
-import { getViewImageFromWidget } from './utils';
 
 /**
  * Returns a function that converts the image view representation:
@@ -22,9 +21,10 @@ import { getViewImageFromWidget } from './utils';
  * The entire content of the `<figure>` element except the first `<img>` is being converted as children
  * of the `<image>` model element.
  *
+ * @param {module:image/imageutils~ImageUtils} imageUtils
  * @returns {Function}
  */
-export function viewFigureToModel() {
+export function viewFigureToModel( imageUtils ) {
 	return dispatcher => {
 		dispatcher.on( 'element:figure', converter );
 	};
@@ -36,7 +36,7 @@ export function viewFigureToModel() {
 		}
 
 		// Find an image element inside the figure element.
-		const viewImage = getViewImageFromWidget( data.viewItem );
+		const viewImage = imageUtils.getViewImageFromWidget( data.viewItem );
 
 		// Do not convert if image element is absent, is missing src attribute or was already converted.
 		if ( !viewImage || !viewImage.hasAttribute( 'src' ) || !conversionApi.consumable.test( viewImage, { name: true } ) ) {
@@ -64,10 +64,11 @@ export function viewFigureToModel() {
 /**
  * Converter used to convert the `srcset` model image attribute to the `srcset`, `sizes` and `width` attributes in the view.
  *
+ * @param {module:image/imageutils~ImageUtils} imageUtils
  * @param {'image'|'imageInline'} imageType The type of the image.
  * @returns {Function}
  */
-export function srcsetAttributeConverter( imageType ) {
+export function srcsetAttributeConverter( imageUtils, imageType ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:srcset:${ imageType }`, converter );
 	};
@@ -79,7 +80,7 @@ export function srcsetAttributeConverter( imageType ) {
 
 		const writer = conversionApi.writer;
 		const element = conversionApi.mapper.toViewElement( data.item );
-		const img = getViewImageFromWidget( element );
+		const img = imageUtils.getViewImageFromWidget( element );
 
 		if ( data.attributeNewValue === null ) {
 			const srcset = data.attributeOldValue;
@@ -111,11 +112,12 @@ export function srcsetAttributeConverter( imageType ) {
 /**
  * Converter used to convert a given image attribute from the model to the view.
  *
+ * @param {module:image/imageutils~ImageUtils} imageUtils
  * @param {'image'|'imageInline'} imageType The type of the image.
  * @param {String} attributeKey The name of the attribute to convert.
  * @returns {Function}
  */
-export function modelToViewAttributeConverter( imageType, attributeKey ) {
+export function modelToViewAttributeConverter( imageUtils, imageType, attributeKey ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:${ attributeKey }:${ imageType }`, converter );
 	};
@@ -127,7 +129,7 @@ export function modelToViewAttributeConverter( imageType, attributeKey ) {
 
 		const viewWriter = conversionApi.writer;
 		const element = conversionApi.mapper.toViewElement( data.item );
-		const img = getViewImageFromWidget( element );
+		const img = imageUtils.getViewImageFromWidget( element );
 
 		viewWriter.setAttribute( data.attributeKey, data.attributeNewValue || '', img );
 	}

packages/ckeditor5-image/src/image/imageblockediting.js

@@ -12,16 +12,15 @@ import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 
 import { modelToViewAttributeConverter, srcsetAttributeConverter, viewFigureToModel } from './converters';
-import {
-	toImageWidget,
-	createImageViewElement,
-	getImageTypeMatcher,
-	determineImageTypeForInsertionAtSelection,
-	isInlineImageView
-} from './utils';
 
 import ImageEditing from './imageediting';
 import ImageTypeCommand from './imagetypecommand';
+import ImageUtils from '../imageutils';
+import {
+	getImageTypeMatcher,
+	createImageViewElement,
+	determineImageTypeForInsertionAtSelection
+} from '../image/utils';
 
 /**
  * The image block plugin.
@@ -40,7 +39,7 @@ export default class ImageBlockEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageEditing, ClipboardPipeline ];
+		return [ ImageEditing, ImageUtils, ClipboardPipeline ];
 	}
 
 	/**
@@ -84,6 +83,7 @@ export default class ImageBlockEditing extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const conversion = editor.conversion;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		conversion.for( 'dataDowncast' )
 			.elementToElement( {
@@ -94,23 +94,23 @@ export default class ImageBlockEditing extends Plugin {
 		conversion.for( 'editingDowncast' )
 			.elementToElement( {
 				model: 'image',
-				view: ( modelElement, { writer } ) => toImageWidget(
+				view: ( modelElement, { writer } ) => imageUtils.toImageWidget(
 					createImageViewElement( writer, 'image' ), writer, t( 'image widget' )
 				)
 			} );
 
 		conversion.for( 'downcast' )
-			.add( modelToViewAttributeConverter( 'image', 'src' ) )
-			.add( modelToViewAttributeConverter( 'image', 'alt' ) )
-			.add( srcsetAttributeConverter( 'image' ) );
+			.add( modelToViewAttributeConverter( imageUtils, 'image', 'src' ) )
+			.add( modelToViewAttributeConverter( imageUtils, 'image', 'alt' ) )
+			.add( srcsetAttributeConverter( imageUtils, 'image' ) );
 
 		// More image related upcasts are in 'ImageEditing' plugin.
 		conversion.for( 'upcast' )
 			.elementToElement( {
-				view: getImageTypeMatcher( 'image', editor ),
+				view: getImageTypeMatcher( editor, 'image' ),
 				model: ( viewImage, { writer } ) => writer.createElement( 'image', { src: viewImage.getAttribute( 'src' ) } )
 			} )
-			.add( viewFigureToModel() );
+			.add( viewFigureToModel( imageUtils ) );
 	}
 
 	/**
@@ -132,16 +132,16 @@ export default class ImageBlockEditing extends Plugin {
 	_setupClipboardIntegration() {
 		const editor = this.editor;
 		const model = editor.model;
-		const schema = model.schema;
 		const editingView = editor.editing.view;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		this.listenTo( editor.plugins.get( 'ClipboardPipeline' ), 'inputTransformation', ( evt, data ) => {
 			const docFragmentChildren = Array.from( data.content.getChildren() );
 			let modelRange;
 
 			// Make sure only <img> elements are dropped or pasted. Otherwise, if there some other HTML
 			// mixed up, this should be handled as a regular paste.
-			if ( !docFragmentChildren.every( isInlineImageView ) ) {
+			if ( !docFragmentChildren.every( imageUtils.isInlineImageView ) ) {
 				return;
 			}
 
@@ -160,7 +160,7 @@ export default class ImageBlockEditing extends Plugin {
 
 			// Convert inline images into block images only when the currently selected block is empty
 			// (e.g. an empty paragraph) or some object is selected (to replace it).
-			if ( determineImageTypeForInsertionAtSelection( schema, selection ) === 'image' ) {
+			if ( determineImageTypeForInsertionAtSelection( model.schema, selection ) === 'image' ) {
 				const writer = new UpcastWriter( editingView.document );
 
 				// Wrap <img ... /> -> <figure class="image"><img .../></figure>

packages/ckeditor5-image/src/image/imageediting.js

@@ -10,6 +10,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import ImageLoadObserver from './imageloadobserver';
 import InsertImageCommand from './insertimagecommand';
+import ImageUtils from '../imageutils';
 
 /**
  * The image engine plugin. This module loads common code shared between
@@ -21,6 +22,13 @@ import InsertImageCommand from './insertimagecommand';
  * @extends module:core/plugin~Plugin
  */
 export default class ImageEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUtils ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */

packages/ckeditor5-image/src/image/imageinlineediting.js

@@ -11,18 +11,16 @@ import { Plugin } from 'ckeditor5/src/core';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 
-import {
-	toImageWidget,
-	createImageViewElement,
-	getImageTypeMatcher,
-	getViewImageFromWidget,
-	determineImageTypeForInsertionAtSelection,
-	isBlockImageView
-} from './utils';
 import { modelToViewAttributeConverter, srcsetAttributeConverter } from './converters';
 
 import ImageEditing from './imageediting';
 import ImageTypeCommand from './imagetypecommand';
+import ImageUtils from '../imageutils';
+import {
+	getImageTypeMatcher,
+	createImageViewElement,
+	determineImageTypeForInsertionAtSelection
+} from '../image/utils';
 
 /**
  * The image inline plugin.
@@ -41,7 +39,7 @@ export default class ImageInlineEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageEditing, ClipboardPipeline ];
+		return [ ImageEditing, ImageUtils, ClipboardPipeline ];
 	}
 
 	/**
@@ -85,6 +83,7 @@ export default class ImageInlineEditing extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const conversion = editor.conversion;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		conversion.for( 'dataDowncast' )
 			.elementToElement( {
@@ -95,20 +94,20 @@ export default class ImageInlineEditing extends Plugin {
 		conversion.for( 'editingDowncast' )
 			.elementToElement( {
 				model: 'imageInline',
-				view: ( modelElement, { writer } ) => toImageWidget(
+				view: ( modelElement, { writer } ) => imageUtils.toImageWidget(
 					createImageViewElement( writer, 'imageInline' ), writer, t( 'inline image widget' )
 				)
 			} );
 
 		conversion.for( 'downcast' )
-			.add( modelToViewAttributeConverter( 'imageInline', 'src' ) )
-			.add( modelToViewAttributeConverter( 'imageInline', 'alt' ) )
-			.add( srcsetAttributeConverter( 'imageInline' ) );
+			.add( modelToViewAttributeConverter( imageUtils, 'imageInline', 'src' ) )
+			.add( modelToViewAttributeConverter( imageUtils, 'imageInline', 'alt' ) )
+			.add( srcsetAttributeConverter( imageUtils, 'imageInline' ) );
 
 		// More image related upcasts are in 'ImageEditing' plugin.
 		conversion.for( 'upcast' )
 			.elementToElement( {
-				view: getImageTypeMatcher( 'imageInline', editor ),
+				view: getImageTypeMatcher( editor, 'imageInline' ),
 				model: ( viewImage, { writer } ) => writer.createElement( 'imageInline', { src: viewImage.getAttribute( 'src' ) } )
 			} );
 	}
@@ -133,16 +132,16 @@ export default class ImageInlineEditing extends Plugin {
 	_setupClipboardIntegration() {
 		const editor = this.editor;
 		const model = editor.model;
-		const schema = model.schema;
 		const editingView = editor.editing.view;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		this.listenTo( editor.plugins.get( 'ClipboardPipeline' ), 'inputTransformation', ( evt, data ) => {
 			const docFragmentChildren = Array.from( data.content.getChildren() );
 			let modelRange;
 
 			// Make sure only <figure class="image"></figure> elements are dropped or pasted. Otherwise, if there some other HTML
 			// mixed up, this should be handled as a regular paste.
-			if ( !docFragmentChildren.every( isBlockImageView ) ) {
+			if ( !docFragmentChildren.every( imageUtils.isBlockImageView ) ) {
 				return;
 			}
 
@@ -161,17 +160,18 @@ export default class ImageInlineEditing extends Plugin {
 
 			// Convert block images into inline images only when pasting or dropping into non-empty blocks
 			// and when the block is not an object (e.g. pasting to replace another widget).
-			if ( determineImageTypeForInsertionAtSelection( schema, selection ) === 'imageInline' ) {
+			if ( determineImageTypeForInsertionAtSelection( model.schema, selection ) === 'imageInline' ) {
 				const writer = new UpcastWriter( editingView.document );
 
 				// Unwrap <figure class="image"><img .../></figure> -> <img ... />
 				// but <figure class="image"><img .../><figcaption>...</figcaption></figure> -> stays the same
 				const inlineViewImages = docFragmentChildren.map( blockViewImage => {
+					// If there's just one child, it can be either <img /> or <a><img></a>.
 					// If there are other children than <img>, this means that the block image
 					// has a caption or some other features and this kind of image should be
 					// pasted/dropped without modifications.
 					if ( blockViewImage.childCount === 1 ) {
-						return getViewImageFromWidget( blockViewImage );
+						return blockViewImage.getChild( 0 );
 					} else {
 						return blockViewImage;
 					}