@ckeditor/ckeditor5-image 32.0.0 → 33.0.0

package/build/translations/el.js

@@ -1 +1 @@
-!function(e){const i=e.el=e.el||{};i.dictionary=Object.assign(i.dictionary||{},{"Break text":"","Centered image":"","Change image text alternative":"Αλλαγή εναλλακτικού κείμενου","Enter image caption":"Λεζάντα","Full size image":"Εικόνα πλήρης μεγέθους","Image resize list":"","Image toolbar":"","image widget":"","In line":"",Insert:"","Insert image":"Εισαγωγή εικόνας","Insert image via URL":"","Left aligned image":"",Original:"","Resize image":"","Resize image to %0":"","Resize image to the original size":"","Right aligned image":"","Side image":"","Text alternative":"Εναλλακτικό κείμενο",Update:"","Update image URL":"","Upload failed":"","Wrap text":""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(e){const i=e.el=e.el||{};i.dictionary=Object.assign(i.dictionary||{},{"Break text":"Κατάτμηση κειμένου","Centered image":"Εικόνα με στοίχιση στο κέντρο","Change image text alternative":"Αλλαγή εναλλακτικού κείμενου εικόνας","Enter image caption":"Εισαγωγή λεζάντας εικόνας","Full size image":"Εικόνα σε πλήρες μέγεθος","Image resize list":"Λίστα μεγεθών εικόνων","Image toolbar":"Γραμμή εργαλείων εικόνας","image widget":"Γραφικό στοιχείο εικόνας","In line":"Εντός γραμμής",Insert:"Εισαγωγή","Insert image":"Εισαγωγή εικόνας","Insert image via URL":"Εισαγωγή εικόνας μέσω διεύθυνσης","Left aligned image":"Εικόνα με αριστερή στοίχιση",Original:"Αρχικό","Resize image":"Αλλαγή μεγέθους εικόνας","Resize image to %0":"Αλλαγή μεγέθους σε %0","Resize image to the original size":"Αλλαγή μεγέθους εικόνας στο αρχικό μέγεθος","Right aligned image":"Εικόνα με δεξιά στοίχιση","Side image":"Πλευρική εικόνα","Text alternative":"Εναλλακτικό κείμενο",Update:"Ενημέρωση","Update image URL":"Ενημέρωση διεύθυνσης εικόνας","Upload failed":"Η αποστολή απέτυχε","Wrap text":"Αναδίπλωση κειμένου"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/build/translations/es.js

@@ -1 +1 @@
-!function(a){const e=a.es=a.es||{};e.dictionary=Object.assign(e.dictionary||{},{"Break text":"","Centered image":"Imagen centrada","Change image text alternative":"Cambiar el texto alternativo de la imagen","Enter image caption":"Introducir título de la imagen","Full size image":"Imagen a tamaño completo","Image resize list":"","Image toolbar":"Barra de herramientas de imagen","image widget":"Widget de imagen","In line":"",Insert:"Insertar","Insert image":"Insertar imagen","Insert image via URL":"Insertar imagen vía URL","Left aligned image":"Imagen alineada a la izquierda",Original:"Original","Resize image":"","Resize image to %0":"","Resize image to the original size":"","Right aligned image":"Imagen alineada a la derecha","Side image":"Imagen lateral","Text alternative":"Texto alternativo",Update:"Actualizar","Update image URL":"Actualizar imagen vía URL","Upload failed":"Fallo en la subida","Wrap text":""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(a){const e=a.es=a.es||{};e.dictionary=Object.assign(e.dictionary||{},{"Break text":"Permitir quebrar texto","Centered image":"Imagen centrada","Change image text alternative":"Cambiar el texto alternativo de la imagen","Enter image caption":"Introducir título de la imagen","Full size image":"Imagen a tamaño completo","Image resize list":"Listado para redimensionar imagen","Image toolbar":"Barra de herramientas de imagen","image widget":"Widget de imagen","In line":"En línea",Insert:"Insertar","Insert image":"Insertar imagen","Insert image via URL":"Insertar imagen vía URL","Left aligned image":"Imagen alineada a la izquierda",Original:"Original","Resize image":"Redimensionar imagen","Resize image to %0":"Redimensionar imagen al %0","Resize image to the original size":"Redimensionar imagen al tamaño original","Right aligned image":"Imagen alineada a la derecha","Side image":"Imagen lateral","Text alternative":"Texto alternativo",Update:"Actualizar","Update image URL":"Actualizar imagen vía URL","Upload failed":"Fallo en la subida","Wrap text":"Mantener texto unido"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/el.po

@@ -18,43 +18,43 @@ msgstr ""
 
 msgctxt "The label for the image widget."
 msgid "image widget"
-msgstr ""
+msgstr "Γραφικό στοιχείο εικόνας"
 
 msgctxt "The label for the image style button that wraps text around the image."
 msgid "Wrap text"
-msgstr ""
+msgstr "Αναδίπλωση κειμένου"
 
 msgctxt "The label for the image style button that breaks the text around the image."
 msgid "Break text"
-msgstr ""
+msgstr "Κατάτμηση κειμένου"
 
 msgctxt "The label for the image style button that places the image inside the line of text."
 msgid "In line"
-msgstr ""
+msgstr "Εντός γραμμής"
 
 msgctxt "The label for the Side image option."
 msgid "Side image"
-msgstr ""
+msgstr "Πλευρική εικόνα"
 
 msgctxt "The label for the Full size image option."
 msgid "Full size image"
-msgstr "Εικόνα πλήρης μεγέθους"
+msgstr "Εικόνα σε πλήρες μέγεθος"
 
 msgctxt "The label for the Left aligned image option."
 msgid "Left aligned image"
-msgstr ""
+msgstr "Εικόνα με αριστερή στοίχιση"
 
 msgctxt "The label for the Centered image option."
 msgid "Centered image"
-msgstr ""
+msgstr "Εικόνα με στοίχιση στο κέντρο"
 
 msgctxt "The label for the Right aligned image option."
 msgid "Right aligned image"
-msgstr ""
+msgstr "Εικόνα με δεξιά στοίχιση"
 
 msgctxt "The label for the Change image text alternative button."
 msgid "Change image text alternative"
-msgstr "Αλλαγή εναλλακτικού κείμενου"
+msgstr "Αλλαγή εναλλακτικού κείμενου εικόνας"
 
 msgctxt "The label for the image text alternative input."
 msgid "Text alternative"
@@ -62,7 +62,7 @@ msgstr "Εναλλακτικό κείμενο"
 
 msgctxt "The placeholder text for the image caption displayed when the caption is empty."
 msgid "Enter image caption"
-msgstr "Λεζάντα"
+msgstr "Εισαγωγή λεζάντας εικόνας"
 
 msgctxt "The label for the insert image toolbar button."
 msgid "Insert image"
@@ -70,44 +70,44 @@ msgstr "Εισαγωγή εικόνας"
 
 msgctxt "The title of the notification displayed when upload fails."
 msgid "Upload failed"
-msgstr ""
+msgstr "Η αποστολή απέτυχε"
 
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Image toolbar"
-msgstr ""
+msgstr "Γραμμή εργαλείων εικόνας"
 
 msgctxt "The label used for the dropdown in the image toolbar containing defined resize options."
 msgid "Resize image"
-msgstr ""
+msgstr "Αλλαγή μεγέθους εικόνας"
 
 msgctxt "The label used for the standalone resize options buttons in the image toolbar."
 msgid "Resize image to %0"
-msgstr ""
+msgstr "Αλλαγή μεγέθους σε %0"
 
 msgctxt "The accessibility label of the standalone image resize reset option button in the image toolbar for screen readers."
 msgid "Resize image to the original size"
-msgstr ""
+msgstr "Αλλαγή μεγέθους εικόνας στο αρχικό μέγεθος"
 
 msgctxt "The default label for the resize option that resets the size of the image."
 msgid "Original"
-msgstr ""
+msgstr "Αρχικό"
 
 msgctxt "The accessibility label of the image resize dropdown for screen readers."
 msgid "Image resize list"
-msgstr ""
+msgstr "Λίστα μεγεθών εικόνων"
 
 msgctxt "The label of the form submit button if the image source URL input has no value."
 msgid "Insert"
-msgstr ""
+msgstr "Εισαγωγή"
 
 msgctxt "The label of the form submit button if the image source URL input has a value."
 msgid "Update"
-msgstr ""
+msgstr "Ενημέρωση"
 
 msgctxt "The input label for the Insert image via URL form."
 msgid "Insert image via URL"
-msgstr ""
+msgstr "Εισαγωγή εικόνας μέσω διεύθυνσης"
 
 msgctxt "The input label for the Insert image via URL form for a pre-existing image."
 msgid "Update image URL"
-msgstr ""
+msgstr "Ενημέρωση διεύθυνσης εικόνας"

package/lang/translations/es.po

@@ -22,15 +22,15 @@ msgstr "Widget de imagen"
 
 msgctxt "The label for the image style button that wraps text around the image."
 msgid "Wrap text"
-msgstr ""
+msgstr "Mantener texto unido"
 
 msgctxt "The label for the image style button that breaks the text around the image."
 msgid "Break text"
-msgstr ""
+msgstr "Permitir quebrar texto"
 
 msgctxt "The label for the image style button that places the image inside the line of text."
 msgid "In line"
-msgstr ""
+msgstr "En línea"
 
 msgctxt "The label for the Side image option."
 msgid "Side image"
@@ -78,15 +78,15 @@ msgstr "Barra de herramientas de imagen"
 
 msgctxt "The label used for the dropdown in the image toolbar containing defined resize options."
 msgid "Resize image"
-msgstr ""
+msgstr "Redimensionar imagen"
 
 msgctxt "The label used for the standalone resize options buttons in the image toolbar."
 msgid "Resize image to %0"
-msgstr ""
+msgstr "Redimensionar imagen al %0"
 
 msgctxt "The accessibility label of the standalone image resize reset option button in the image toolbar for screen readers."
 msgid "Resize image to the original size"
-msgstr ""
+msgstr "Redimensionar imagen al tamaño original"
 
 msgctxt "The default label for the resize option that resets the size of the image."
 msgid "Original"
@@ -94,7 +94,7 @@ msgstr "Original"
 
 msgctxt "The accessibility label of the image resize dropdown for screen readers."
 msgid "Image resize list"
-msgstr ""
+msgstr "Listado para redimensionar imagen"
 
 msgctxt "The label of the form submit button if the image source URL input has no value."
 msgid "Insert"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "32.0.0",
+  "version": "33.0.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,39 +12,40 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^32.0.0",
-    "ckeditor5": "^32.0.0",
+    "@ckeditor/ckeditor5-ui": "^33.0.0",
+    "ckeditor5": "^33.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^32.0.0",
-    "@ckeditor/ckeditor5-autoformat": "^32.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^32.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^32.0.0",
-    "@ckeditor/ckeditor5-ckfinder": "^32.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^32.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^32.0.0",
-    "@ckeditor/ckeditor5-core": "^32.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^27.1.0",
-    "@ckeditor/ckeditor5-easy-image": "^32.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^32.0.0",
-    "@ckeditor/ckeditor5-engine": "^32.0.0",
-    "@ckeditor/ckeditor5-enter": "^32.0.0",
-    "@ckeditor/ckeditor5-essentials": "^32.0.0",
-    "@ckeditor/ckeditor5-heading": "^32.0.0",
-    "@ckeditor/ckeditor5-html-embed": "^32.0.0",
-    "@ckeditor/ckeditor5-indent": "^32.0.0",
-    "@ckeditor/ckeditor5-link": "^32.0.0",
-    "@ckeditor/ckeditor5-list": "^32.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^32.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^32.0.0",
-    "@ckeditor/ckeditor5-table": "^32.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^32.0.0",
-    "@ckeditor/ckeditor5-typing": "^32.0.0",
-    "@ckeditor/ckeditor5-undo": "^32.0.0",
-    "@ckeditor/ckeditor5-upload": "^32.0.0",
-    "@ckeditor/ckeditor5-utils": "^32.0.0",
-    "@ckeditor/ckeditor5-widget": "^32.0.0",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^33.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^33.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^33.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^33.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "^33.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^33.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^33.0.0",
+    "@ckeditor/ckeditor5-core": "^33.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^28.0.1",
+    "@ckeditor/ckeditor5-easy-image": "^33.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^33.0.0",
+    "@ckeditor/ckeditor5-engine": "^33.0.0",
+    "@ckeditor/ckeditor5-enter": "^33.0.0",
+    "@ckeditor/ckeditor5-essentials": "^33.0.0",
+    "@ckeditor/ckeditor5-heading": "^33.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^33.0.0",
+    "@ckeditor/ckeditor5-indent": "^33.0.0",
+    "@ckeditor/ckeditor5-link": "^33.0.0",
+    "@ckeditor/ckeditor5-list": "^33.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^33.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^33.0.0",
+    "@ckeditor/ckeditor5-table": "^33.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^33.0.0",
+    "@ckeditor/ckeditor5-typing": "^33.0.0",
+    "@ckeditor/ckeditor5-undo": "^33.0.0",
+    "@ckeditor/ckeditor5-upload": "^33.0.0",
+    "@ckeditor/ckeditor5-utils": "^33.0.0",
+    "@ckeditor/ckeditor5-watchdog": "^33.0.0",
+    "@ckeditor/ckeditor5-widget": "^33.0.0",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },

package/src/image/converters.js

@@ -235,13 +235,12 @@ export function downcastSourcesAttribute( imageUtils ) {
 
 		if ( data.attributeNewValue && data.attributeNewValue.length ) {
 			// Make sure <picture> does not break attribute elements, for instance <a> in linked images.
-			const pictureElement = viewWriter.createContainerElement( 'picture', {}, { isAllowedInsideAttributeElement: true } );
-
-			for ( const sourceAttributes of data.attributeNewValue ) {
-				const sourceElement = viewWriter.createEmptyElement( 'source', sourceAttributes );
-
-				viewWriter.insert( viewWriter.createPositionAt( pictureElement, 'end' ), sourceElement );
-			}
+			const pictureElement = viewWriter.createContainerElement( 'picture', null,
+				data.attributeNewValue.map( sourceAttributes => {
+					return viewWriter.createEmptyElement( 'source', sourceAttributes );
+				} ),
+				{ isAllowedInsideAttributeElement: true }
+			);
 
 			// Collect all wrapping attribute elements.
 			const attributeElements = [];

package/src/image/imageblockediting.js

@@ -22,7 +22,7 @@ import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
 import {
 	getImgViewElementMatcher,
-	createImageViewElement,
+	createBlockImageViewElement,
 	determineImageTypeForInsertionAtSelection
 } from '../image/utils';
 
@@ -90,16 +90,16 @@ export default class ImageBlockEditing extends Plugin {
 		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		conversion.for( 'dataDowncast' )
-			.elementToElement( {
+			.elementToStructure( {
 				model: 'imageBlock',
-				view: ( modelElement, { writer } ) => createImageViewElement( writer, 'imageBlock' )
+				view: ( modelElement, { writer } ) => createBlockImageViewElement( writer )
 			} );
 
 		conversion.for( 'editingDowncast' )
-			.elementToElement( {
+			.elementToStructure( {
 				model: 'imageBlock',
 				view: ( modelElement, { writer } ) => imageUtils.toImageWidget(
-					createImageViewElement( writer, 'imageBlock' ), writer, t( 'image widget' )
+					createBlockImageViewElement( writer ), writer, t( 'image widget' )
 				)
 			} );
 

package/src/image/imageinlineediting.js

@@ -21,7 +21,7 @@ import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
 import {
 	getImgViewElementMatcher,
-	createImageViewElement,
+	createInlineImageViewElement,
 	determineImageTypeForInsertionAtSelection
 } from '../image/utils';
 
@@ -105,10 +105,10 @@ export default class ImageInlineEditing extends Plugin {
 			} );
 
 		conversion.for( 'editingDowncast' )
-			.elementToElement( {
+			.elementToStructure( {
 				model: 'imageInline',
 				view: ( modelElement, { writer } ) => imageUtils.toImageWidget(
-					createImageViewElement( writer, 'imageInline' ), writer, t( 'image widget' )
+					createInlineImageViewElement( writer ), writer, t( 'image widget' )
 				)
 			} );
 

package/src/image/utils.js

@@ -10,33 +10,39 @@
 import { first } from 'ckeditor5/src/utils';
 
 /**
- * Creates a view element representing the image of provided image type.
+ * Creates a view element representing the inline image.
  *
- * An 'imageBlock' type (block image):
+ *		<span class="image-inline"><img></img></span>
  *
- *		<figure class="image"><img></img></figure>
+ * Note that `alt` and `src` attributes are converted separately, so they are not included.
  *
- * An 'imageInline' type (inline image):
+ * @protected
+ * @param {module:engine/view/downcastwriter~DowncastWriter} writer
+ * @returns {module:engine/view/containerelement~ContainerElement}
+ */
+export function createInlineImageViewElement( writer ) {
+	return writer.createContainerElement( 'span', { class: 'image-inline' },
+		writer.createEmptyElement( 'img' ),
+		{ isAllowedInsideAttributeElement: true }
+	);
+}
+
+/**
+ * Creates a view element representing the block image.
  *
- *		<span class="image-inline"><img></img></span>
+ *		<figure class="image"><img></img></figure>
  *
  * Note that `alt` and `src` attributes are converted separately, so they are not included.
  *
  * @protected
  * @param {module:engine/view/downcastwriter~DowncastWriter} writer
- * @param {'imageBlock'|'imageInline'} imageType The type of created image.
  * @returns {module:engine/view/containerelement~ContainerElement}
  */
-export function createImageViewElement( writer, imageType ) {
-	const emptyElement = writer.createEmptyElement( 'img' );
-
-	const container = imageType === 'imageBlock' ?
-		writer.createContainerElement( 'figure', { class: 'image' } ) :
-		writer.createContainerElement( 'span', { class: 'image-inline' }, { isAllowedInsideAttributeElement: true } );
-
-	writer.insert( writer.createPositionAt( container, 0 ), emptyElement );
-
-	return container;
+export function createBlockImageViewElement( writer ) {
+	return writer.createContainerElement( 'figure', { class: 'image' }, [
+		writer.createEmptyElement( 'img' ),
+		writer.createSlot()
+	] );
 }
 
 /**

package/src/imagecaption/imagecaptionediting.js

@@ -14,7 +14,7 @@ import { toWidgetEditable } from 'ckeditor5/src/widget';
 import ToggleImageCaptionCommand from './toggleimagecaptioncommand';
 
 import ImageUtils from '../imageutils';
-import { getCaptionFromImageModelElement, matchImageCaptionViewElement } from './utils';
+import ImageCaptionUtils from './imagecaptionutils';
 
 /**
  * The image caption engine plugin. It is responsible for:
@@ -30,7 +30,7 @@ export default class ImageCaptionEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageUtils ];
+		return [ ImageUtils, ImageCaptionUtils ];
 	}
 
 	/**
@@ -93,11 +93,12 @@ export default class ImageCaptionEditing extends Plugin {
 		const editor = this.editor;
 		const view = editor.editing.view;
 		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const imageCaptionUtils = editor.plugins.get( 'ImageCaptionUtils' );
 		const t = editor.t;
 
 		// View -> model converter for the data pipeline.
 		editor.conversion.for( 'upcast' ).elementToElement( {
-			view: element => matchImageCaptionViewElement( imageUtils, element ),
+			view: element => imageCaptionUtils.matchImageCaptionViewElement( element ),
 			model: 'caption'
 		} );
 
@@ -134,9 +135,6 @@ export default class ImageCaptionEditing extends Plugin {
 				return toWidgetEditable( figcaptionElement, writer );
 			}
 		} );
-
-		editor.editing.mapper.on( 'modelToViewPosition', mapModelPositionToView( view ) );
-		editor.data.mapper.on( 'modelToViewPosition', mapModelPositionToView( view ) );
 	}
 
 	/**
@@ -149,6 +147,7 @@ export default class ImageCaptionEditing extends Plugin {
 	_setupImageTypeCommandsIntegration() {
 		const editor = this.editor;
 		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const imageCaptionUtils = editor.plugins.get( 'ImageCaptionUtils' );
 		const imageTypeInlineCommand = editor.commands.get( 'imageTypeInline' );
 		const imageTypeBlockCommand = editor.commands.get( 'imageTypeBlock' );
 
@@ -166,7 +165,7 @@ export default class ImageCaptionEditing extends Plugin {
 			}
 
 			if ( imageUtils.isBlockImage( oldElement ) ) {
-				const oldCaptionElement = getCaptionFromImageModelElement( oldElement );
+				const oldCaptionElement = imageCaptionUtils.getCaptionFromImageModelElement( oldElement );
 
 				// If the old element was a captioned block image (the caption was visible),
 				// simply save it so it can be restored.
@@ -244,28 +243,3 @@ export default class ImageCaptionEditing extends Plugin {
 		this._savedCaptionsMap.set( imageModelElement, caption.toJSON() );
 	}
 }
-
-// Creates a mapper callback that reverses the order of `<img>` and `<figcaption>` in the image.
-// Without it, `<figcaption>` would precede the `<img>` in the conversion.
-//
-// <imageBlock>^</imageBlock> -> <figure><img>^<caption></caption></figure>
-//
-// @private
-// @param {module:engine/view/view~View} editingView
-// @returns {Function}
-function mapModelPositionToView( editingView ) {
-	return ( evt, data ) => {
-		const modelPosition = data.modelPosition;
-		const parent = modelPosition.parent;
-
-		if ( !parent.is( 'element', 'imageBlock' ) ) {
-			return;
-		}
-
-		const viewElement = data.mapper.toViewElement( parent );
-
-		// The "img" element is inserted by ImageBlockEditing during the downcast conversion via
-		// an explicit view position so the "0" position does not need any mapping.
-		data.viewPosition = editingView.createPositionAt( viewElement, modelPosition.offset + 1 );
-	};
-}

package/src/imagecaption/imagecaptionui.js

@@ -9,9 +9,7 @@
 
 import { Plugin, icons } from 'ckeditor5/src/core';
 import { ButtonView } from 'ckeditor5/src/ui';
-import ImageUtils from '../imageutils';
-
-import { getCaptionFromModelSelection } from './utils';
+import ImageCaptionUtils from './imagecaptionutils';
 
 /**
  * The image caption UI plugin. It introduces the `'toggleImageCaption'` UI button.
@@ -23,7 +21,7 @@ export default class ImageCaptionUI extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageUtils ];
+		return [ ImageCaptionUtils ];
 	}
 
 	/**
@@ -39,7 +37,7 @@ export default class ImageCaptionUI extends Plugin {
 	init() {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
-		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const imageCaptionUtils = editor.plugins.get( 'ImageCaptionUtils' );
 		const t = editor.t;
 
 		editor.ui.componentFactory.add( 'toggleImageCaption', locale => {
@@ -59,7 +57,7 @@ export default class ImageCaptionUI extends Plugin {
 				editor.execute( 'toggleImageCaption', { focusCaptionOnShow: true } );
 
 				// Scroll to the selection and highlight the caption if the caption showed up.
-				const modelCaptionElement = getCaptionFromModelSelection( imageUtils, editor.model.document.selection );
+				const modelCaptionElement = imageCaptionUtils.getCaptionFromModelSelection( editor.model.document.selection );
 
 				if ( modelCaptionElement ) {
 					const figcaptionElement = editor.editing.mapper.toViewElement( modelCaptionElement );

package/src/imagecaption/imagecaptionutils.js

@@ -0,0 +1,89 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/imagecaptionutils/utils
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import ImageUtils from '../imageutils';
+
+/**
+ * The image caption utilities plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageCaptionUtils extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageCaptionUtils';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUtils ];
+	}
+
+	/**
+	 * Returns the caption model element from a given image element. Returns `null` if no caption is found.
+	 *
+	 * @param {module:engine/model/element~Element} imageModelElement
+	 * @returns {module:engine/model/element~Element|null}
+	 */
+	getCaptionFromImageModelElement( imageModelElement ) {
+		for ( const node of imageModelElement.getChildren() ) {
+			if ( !!node && node.is( 'element', 'caption' ) ) {
+				return node;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Returns the caption model element for a model selection. Returns `null` if the selection has no caption element ancestor.
+	 *
+	 * @param {module:engine/model/selection~Selection} selection
+	 * @returns {module:engine/model/element~Element|null}
+	 */
+	getCaptionFromModelSelection( selection ) {
+		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
+		const captionElement = selection.getFirstPosition().findAncestor( 'caption' );
+
+		if ( !captionElement ) {
+			return null;
+		}
+
+		if ( imageUtils.isBlockImage( captionElement.parent ) ) {
+			return captionElement;
+		}
+
+		return null;
+	}
+
+	/**
+	 * {@link module:engine/view/matcher~Matcher} pattern. Checks if a given element is a `<figcaption>` element that is placed
+	 * inside the image `<figure>` element.
+	 *
+	 * @param {module:engine/view/element~Element} element
+	 * @returns {Object|null} Returns the object accepted by {@link module:engine/view/matcher~Matcher} or `null` if the element
+	 * cannot be matched.
+	 */
+	matchImageCaptionViewElement( element ) {
+		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
+
+		// Convert only captions for images.
+		if ( element.name == 'figcaption' && imageUtils.isBlockImageView( element.parent ) ) {
+			return { name: true };
+		}
+
+		return null;
+	}
+}