Kaynağa Gözat

Merge branch 'master' into t/58

Piotrek Koszuliński 8 yıl önce
ebeveyn
işleme
795e1e9ecd
30 değiştirilmiş dosya ile 467 ekleme ve 96 silme
  1. 26 0
      packages/ckeditor5-image/CHANGELOG.md
  2. 26 0
      packages/ckeditor5-image/lang/translations/ast.po
  3. 26 0
      packages/ckeditor5-image/lang/translations/de.po
  4. 23 0
      packages/ckeditor5-image/lang/translations/en.po
  5. 26 0
      packages/ckeditor5-image/lang/translations/fr.po
  6. 26 0
      packages/ckeditor5-image/lang/translations/hr.po
  7. 26 0
      packages/ckeditor5-image/lang/translations/hu.po
  8. 26 0
      packages/ckeditor5-image/lang/translations/it.po
  9. 26 0
      packages/ckeditor5-image/lang/translations/ku.po
  10. 26 0
      packages/ckeditor5-image/lang/translations/pt.po
  11. 26 0
      packages/ckeditor5-image/lang/translations/uk.po
  12. 26 0
      packages/ckeditor5-image/lang/translations/zh-cn.po
  13. 14 14
      packages/ckeditor5-image/package.json
  14. 0 30
      packages/ckeditor5-image/src/image/converters.js
  15. 3 5
      packages/ckeditor5-image/src/image/imageengine.js
  16. 3 3
      packages/ckeditor5-image/src/image/ui/imageballoonpanelview.js
  17. 11 3
      packages/ckeditor5-image/src/image/utils.js
  18. 38 1
      packages/ckeditor5-image/src/widget/utils.js
  19. 2 2
      packages/ckeditor5-image/src/widget/widgetengine.js
  20. 1 24
      packages/ckeditor5-image/tests/image/converters.js
  21. 1 1
      packages/ckeditor5-image/tests/image/ui/imageballoonpanelview.js
  22. 21 4
      packages/ckeditor5-image/tests/image/utils.js
  23. 2 2
      packages/ckeditor5-image/tests/manual/caption.html
  24. 3 3
      packages/ckeditor5-image/tests/manual/image.html
  25. 1 1
      packages/ckeditor5-image/tests/manual/imagestyle.html
  26. BIN
      packages/ckeditor5-image/tests/manual/logo.png
  27. BIN
      packages/ckeditor5-image/tests/manual/sample.jpg
  28. 1 1
      packages/ckeditor5-image/tests/manual/textalternative.html
  29. 40 1
      packages/ckeditor5-image/tests/widget/utils.js
  30. 17 1
      packages/ckeditor5-image/tests/widget/widgetengine.js

+ 26 - 0
packages/ckeditor5-image/CHANGELOG.md

@@ -0,0 +1,26 @@
+Changelog
+=========
+
+## [0.4.0](https://github.com/ckeditor/ckeditor5-image/compare/v0.3.0...v0.4.0) (2017-03-06)
+
+### Bug fixes
+
+* Moved focus tracking setup to `ImageBalloonPanelView#init()` method to prevent too early access to the view element. Closes [#42](https://github.com/ckeditor/ckeditor5/issues/42). ([985e509](https://github.com/ckeditor/ckeditor5-image/commit/985e509))
+* Used "low-vision" icon instead of "input" for text alternative button. Closes [#59](https://github.com/ckeditor/ckeditor5/issues/59). ([6edd823](https://github.com/ckeditor/ckeditor5-image/commit/6edd823))
+
+### Features
+
+* Added a separator between image styles and text alternative buttons in the image toolbar. Closes [#64](https://github.com/ckeditor/ckeditor5/issues/64). ([925a538](https://github.com/ckeditor/ckeditor5-image/commit/925a538))
+* Introduced image captions support. Closes [#28](https://github.com/ckeditor/ckeditor5/issues/28). ([6bb4069](https://github.com/ckeditor/ckeditor5-image/commit/6bb4069))
+
+### Other changes
+
+* Enhanced how selection label for widgets is defined. Closes [#9](https://github.com/ckeditor/ckeditor5/issues/9). ([5c1897d](https://github.com/ckeditor/ckeditor5-image/commit/5c1897d))
+* Renamed "Image alternate text" to "Image text alternative" all across the code. Improved directory structure to have most important features in the top level of `src/`. Closes [#37](https://github.com/ckeditor/ckeditor5/issues/37). ([e38675f](https://github.com/ckeditor/ckeditor5-image/commit/e38675f))
+* Uploaded translations. ([d619f1d](https://github.com/ckeditor/ckeditor5-image/commit/d619f1d))
+
+
+### BREAKING CHANGES
+
+* The `src/imagealternatetext/imagealternatetext` module is now `src/imagetextalternative`. All other related classes and directories were renamed too.
+* All the base image's util modules are now inside `src/image/`. The same applies to all other features. The main features are now directly in `src/`. Closes [#33](https://github.com/ckeditor/ckeditor5/issues/33). Closes [#26](https://github.com/ckeditor/ckeditor5/issues/26).

+ 26 - 0
packages/ckeditor5-image/lang/translations/ast.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Asturian (https://www.transifex.com/ckeditor/teams/11143/ast/)\n"
+"Language: ast\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "complementu d'imaxen"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Imaxen llateral"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Imaxen a tamañu completu"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/de.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: German (https://www.transifex.com/ckeditor/teams/11143/de/)\n"
+"Language: de\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Bild-Steuerelement"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Seitenbild"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Bild in voller Größe"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Alternativ Text ändern"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Textalternative"

+ 23 - 0
packages/ckeditor5-image/lang/translations/en.po

@@ -0,0 +1,23 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "image widget"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Side image"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Full size image"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Change image text alternative"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Text alternative"

+ 26 - 0
packages/ckeditor5-image/lang/translations/fr.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: French (https://www.transifex.com/ckeditor/teams/11143/fr/)\n"
+"Language: fr\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "objet image"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Image sur le côté"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Image taille réelle"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Changer le texte alternatif à l’image"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Texte alternatif"

+ 26 - 0
packages/ckeditor5-image/lang/translations/hr.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Croatian (https://www.transifex.com/ckeditor/teams/11143/hr/)\n"
+"Language: hr\n"
+"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2;\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Slika widget"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Slika sa strane"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Slika pune veličine"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Promijeni alternativni tekst slike"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Alternativni tekst"

+ 26 - 0
packages/ckeditor5-image/lang/translations/hu.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Hungarian (https://www.transifex.com/ckeditor/teams/11143/hu/)\n"
+"Language: hu\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "képmodul"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Oldalsó kép"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Teljes méretű kép"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/it.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Italian (https://www.transifex.com/ckeditor/teams/11143/it/)\n"
+"Language: it\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Widget immagine"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Immagine laterale"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Immagine a dimensione intera"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/ku.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Kurdish (https://www.transifex.com/ckeditor/teams/11143/ku/)\n"
+"Language: ku\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "وێدجیتی وێنە"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "لای وێنە"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "پڕ بەقەبارەی وێنە"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/pt.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Portuguese (https://www.transifex.com/ckeditor/teams/11143/pt/)\n"
+"Language: pt\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "módulo de imagem"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Imagem lateral"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Imagem em tamanho completo"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/uk.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Ukrainian (https://www.transifex.com/ckeditor/teams/11143/uk/)\n"
+"Language: uk\n"
+"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Віджет зображення"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Бокове зображення"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Повний розмір зображення"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 26 - 0
packages/ckeditor5-image/lang/translations/zh-cn.po

@@ -0,0 +1,26 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Chinese (China) (https://www.transifex.com/ckeditor/teams/11143/zh_CN/)\n"
+"Language: zh_CN\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "图像小部件"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr ""
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "全尺寸图像"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr ""
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr ""

+ 14 - 14
packages/ckeditor5-image/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "*",
-    "@ckeditor/ckeditor5-engine": "*",
-    "@ckeditor/ckeditor5-ui": "*",
-    "@ckeditor/ckeditor5-utils": "*",
-    "@ckeditor/ckeditor5-theme-lark": "*"
+    "@ckeditor/ckeditor5-core": "^0.7.0",
+    "@ckeditor/ckeditor5-engine": "^0.8.0",
+    "@ckeditor/ckeditor5-ui": "^0.7.1",
+    "@ckeditor/ckeditor5-utils": "^0.8.0",
+    "@ckeditor/ckeditor5-theme-lark": "^0.6.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-clipboard": "*",
-    "@ckeditor/ckeditor5-dev-lint": "^2.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "*",
-    "@ckeditor/ckeditor5-enter": "*",
-    "@ckeditor/ckeditor5-heading": "*",
-    "@ckeditor/ckeditor5-paragraph": "*",
-    "@ckeditor/ckeditor5-typing": "*",
-    "@ckeditor/ckeditor5-undo": "*",
+    "@ckeditor/ckeditor5-clipboard": "^0.4.1",
+    "@ckeditor/ckeditor5-dev-lint": "^2.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^0.7.1",
+    "@ckeditor/ckeditor5-enter": "^0.8.0",
+    "@ckeditor/ckeditor5-heading": "^0.8.0",
+    "@ckeditor/ckeditor5-paragraph": "^0.6.1",
+    "@ckeditor/ckeditor5-typing": "^0.8.0",
+    "@ckeditor/ckeditor5-undo": "^0.7.1",
     "gulp": "^3.9.1",
     "guppy-pre-commit": "^0.4.0"
   },

+ 0 - 30
packages/ckeditor5-image/src/image/converters.js

@@ -10,7 +10,6 @@
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 import modelWriter from '@ckeditor/ckeditor5-engine/src/model/writer';
-import { isImageWidget } from './utils';
 
 /**
  * Returns function that converts image view representation:
@@ -71,35 +70,6 @@ export function viewToModelImage() {
 	};
 }
 
-/**
- * Returns model to view selection converter. This converter is applied after default selection conversion is made.
- * It creates fake view selection when {@link module:engine/view/selection~Selection#getSelectedElement} returns instance
- * of image widget.
- *
- * @param {Function} t {@link module:utils/locale~Locale#t Locale#t function} used to translate default fake selection's label.
- * @returns {Function}
- */
-export function modelToViewSelection( t ) {
-	return ( evt, data, consumable, conversionApi ) => {
-		const viewSelection = conversionApi.viewSelection;
-		const selectedElement = viewSelection.getSelectedElement();
-
-		if ( !selectedElement || !isImageWidget( selectedElement ) ) {
-			return;
-		}
-
-		let fakeSelectionLabel = t( 'image widget' );
-		const imgElement = selectedElement.getChild( 0 );
-		const altText = imgElement.getAttribute( 'alt' );
-
-		if ( altText ) {
-			fakeSelectionLabel = `${ altText } ${ fakeSelectionLabel }`;
-		}
-
-		viewSelection.setFake( true, { label: fakeSelectionLabel } );
-	};
-}
-
 /**
  * Creates image attribute converter for provided model conversion dispatchers.
  *

+ 3 - 5
packages/ckeditor5-image/src/image/imageengine.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import WidgetEngine from '../widget/widgetengine';
-import { viewToModelImage, modelToViewSelection, createImageAttributeConverter } from './converters';
+import { viewToModelImage, createImageAttributeConverter } from './converters';
 import { toImageWidget } from './utils';
 import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
@@ -39,6 +39,7 @@ export default class ImageEngine extends Plugin {
 		const schema = doc.schema;
 		const data = editor.data;
 		const editing = editor.editing;
+		const t = editor.t;
 
 		// Configure schema.
 		schema.registerItem( 'image' );
@@ -54,16 +55,13 @@ export default class ImageEngine extends Plugin {
 		// Build converter from model to view for editing pipeline.
 		buildModelConverter().for( editing.modelToView )
 			.fromElement( 'image' )
-			.toElement( () => toImageWidget( createImageViewElement() ) );
+			.toElement( () => toImageWidget( createImageViewElement(), t( 'image widget' ) ) );
 
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'src' );
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'alt' );
 
 		// Converter for figure element from view to model.
 		data.viewToModel.on( 'element:figure', viewToModelImage() );
-
-		// Creates fake selection label if selection is placed around image widget.
-		editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
 	}
 }
 

+ 3 - 3
packages/ckeditor5-image/src/image/ui/imageballoonpanelview.js

@@ -9,7 +9,7 @@
 
 import throttle from '@ckeditor/ckeditor5-utils/src/lib/lodash/throttle';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/balloonpanel/balloonpanelview';
+import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import { isImageWidget } from '../utils';
 
 const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
@@ -42,11 +42,11 @@ const positions = {
 };
 
 /**
- * Image balloon panel class. It extends {module:ui/balloonpanel/balloonpanelview~BalloonPanelView} by adding helpers
+ * Image balloon panel class. It extends {module:ui/panel/balloon/balloonpanelview~BalloonPanelView} by adding helpers
  * to use with image widgets. It sets proper positioning on `scroll` and `resize` events and hides the panel when
  * image is no longer selected or focus is lost.
  *
- * @extends module:ui/balloonpanel/balloonpanelview~BalloonPanelView
+ * @extends module:ui/panel/balloon/balloonpanelview~BalloonPanelView
  */
 export default class ImageBalloonPanelView extends BalloonPanelView {
 	/**

+ 11 - 3
packages/ckeditor5-image/src/image/utils.js

@@ -15,15 +15,23 @@ const imageSymbol = Symbol( 'isImage' );
 /**
  * Converts given {@link module:engine/view/element~Element} to image widget:
  * * adds {@link module:engine/view/element~Element#setCustomProperty custom property} allowing to recognize image widget element,
- * * calls {@link module:image/widget/utils~widgetize widgetize}.
+ * * calls {@link module:image/widget/utils~widgetize widgetize} function with proper element's label creator.
  *
  * @param {module:engine/view/element~Element} viewElement
+ * @param {String} label Element's label. It will be concatenated with image's `alt` attribute if one is present.
  * @returns {module:engine/view/element~Element}
  */
-export function toImageWidget( viewElement ) {
+export function toImageWidget( viewElement, label ) {
 	viewElement.setCustomProperty( imageSymbol, true );
 
-	return widgetize( viewElement );
+	return widgetize( viewElement, { label: labelCreator } );
+
+	function labelCreator() {
+		const imgElement = viewElement.getChild( 0 );
+		const altText = imgElement.getAttribute( 'alt' );
+
+		return altText ? `${ altText } ${ label }` : label;
+	}
 }
 
 /**

+ 38 - 1
packages/ckeditor5-image/src/widget/utils.js

@@ -8,6 +8,7 @@
  */
 
 const widgetSymbol = Symbol( 'isWidget' );
+const labelSymbol = Symbol( 'label' );
 
 /**
  * CSS class added to each widget element.
@@ -41,17 +42,53 @@ export function isWidget( element ) {
  * * adds custom property allowing to recognize widget elements by using {@link ~isWidget}.
  *
  * @param {module:engine/view/element~Element} element
+ * @param {Object} [options]
+ * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
+ * a plain string or a function returning a string.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
-export function widgetize( element ) {
+export function widgetize( element, options ) {
+	options = options || {};
 	element.setAttribute( 'contenteditable', false );
 	element.getFillerOffset = getFillerOffset;
 	element.addClass( WIDGET_CLASS_NAME );
 	element.setCustomProperty( widgetSymbol, true );
 
+	if ( options.label ) {
+		setLabel( element, options.label );
+	}
+
 	return element;
 }
 
+/**
+ * Sets label for given element.
+ * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
+ * {@link ~getLabel}.
+ *
+ * @param {module:engine/view/element~Element} element
+ * @param {String|Function} labelOrCreator
+ */
+export function setLabel( element, labelOrCreator ) {
+	element.setCustomProperty( labelSymbol, labelOrCreator );
+}
+
+/**
+ * Returns label for provided element.
+ *
+ * @param {module:engine/view/element~Element} element
+ * @return {String}
+ */
+export function getLabel( element ) {
+	const labelCreator = element.getCustomProperty( labelSymbol );
+
+	if ( !labelCreator ) {
+		return '';
+	}
+
+	return typeof labelCreator == 'function' ? labelCreator() : labelCreator;
+}
+
 // Default filler offset function applied to all widget elements.
 //
 // @returns {null}

+ 2 - 2
packages/ckeditor5-image/src/widget/widgetengine.js

@@ -8,7 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { WIDGET_SELECTED_CLASS_NAME, isWidget } from './utils';
+import { WIDGET_SELECTED_CLASS_NAME, isWidget, getLabel } from './utils';
 
 /**
  * The widget engine plugin.
@@ -42,7 +42,7 @@ export default class WidgetEngine extends Plugin {
 				return;
 			}
 
-			viewSelection.setFake( true );
+			viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
 			selectedElement.addClass( WIDGET_SELECTED_CLASS_NAME );
 			previouslySelected = selectedElement;
 		}, { priority: 'low' } );

+ 1 - 24
packages/ckeditor5-image/tests/image/converters.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-import { viewToModelImage, modelToViewSelection, createImageAttributeConverter } from '../../src/image/converters';
+import { viewToModelImage, createImageAttributeConverter } from '../../src/image/converters';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { createImageViewElement } from '../../src/image/imageengine';
 import { toImageWidget } from '../../src/image/utils';
@@ -32,7 +32,6 @@ describe( 'Image converters', () => {
 					.fromElement( 'image' )
 					.toElement( () => toImageWidget( createImageViewElement() ) );
 
-				editor.editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'image' )
 					.toElement( () => toImageWidget( createImageViewElement() ) );
@@ -85,28 +84,6 @@ describe( 'Image converters', () => {
 		} );
 	} );
 
-	describe( 'modelToViewSelection', () => {
-		it( 'should convert selection over image to fake selection', () => {
-			setModelData( document, '[<image src=""></image>]' );
-
-			expect( viewDocument.selection.isFake ).to.be.true;
-			expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'image widget' );
-		} );
-
-		it( 'should convert fake selection label with alt', () => {
-			setModelData( document, '[<image src="" alt="foo bar"></image>]' );
-
-			expect( viewDocument.selection.isFake ).to.be.true;
-			expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'foo bar image widget' );
-		} );
-
-		it( 'should not convert fake selection if image is not selected', () => {
-			setModelData( document, '[]<image src="" alt="foo bar"></image>' );
-
-			expect( viewDocument.selection.isFake ).to.be.false;
-		} );
-	} );
-
 	describe( 'modelToViewAttributeConverter', () => {
 		it( 'should convert adding attribute to image', () => {
 			setModelData( document, '<image src=""></image>' );

+ 1 - 1
packages/ckeditor5-image/tests/image/ui/imageballoonpanelview.js

@@ -8,7 +8,7 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import ImageBalloonPanel from '../../../src/image/ui/imageballoonpanelview';
-import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/balloonpanel/balloonpanelview';
+import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import ImageEngine from '../../../src/image/imageengine';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 

+ 21 - 4
packages/ckeditor5-image/tests/image/utils.js

@@ -6,20 +6,37 @@
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import { toImageWidget, isImageWidget, isImage } from '../../src/image/utils';
-import { isWidget } from '../../src/widget/utils';
+import { isWidget, getLabel } from '../../src/widget/utils';
 
 describe( 'image widget utils', () => {
-	let element;
+	let element, image;
 
 	beforeEach( () => {
-		element = new ViewElement( 'div' );
-		toImageWidget( element );
+		image = new ViewElement( 'img' );
+		element = new ViewElement( 'figure', null, image );
+		toImageWidget( element, 'image widget' );
 	} );
 
 	describe( 'toImageWidget()', () => {
 		it( 'should be widgetized', () => {
 			expect( isWidget( element ) ).to.be.true;
 		} );
+
+		it( 'should set element\'s label', () => {
+			expect( getLabel( element ) ).to.equal( 'image widget' );
+		} );
+
+		it( 'should set element\'s label combined with alt attribute', () => {
+			image.setAttribute( 'alt', 'foo bar baz' );
+			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
+		} );
+
+		it( 'provided label creator should always return same label', () => {
+			image.setAttribute( 'alt', 'foo bar baz' );
+
+			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
+			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
+		} );
 	} );
 
 	describe( 'isImageWidget()', () => {

+ 2 - 2
packages/ckeditor5-image/tests/manual/caption.html

@@ -1,11 +1,11 @@
 <div id="editor">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
 	<figure class="image">
-		<img src="logo.png" />
+		<img src="sample.jpg" />
 		<figcaption>CKEditor logo - caption</figcaption>
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
-		<img src="logo.png"  />
+		<img src="sample.jpg"  />
 	</figure>
 </div>

+ 3 - 3
packages/ckeditor5-image/tests/manual/image.html

@@ -1,14 +1,14 @@
 <div id="editor">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image image-style-side">
-		<img src="logo.png" alt="" />
+		<img src="sample.jpg" alt="" />
 	</figure>
 	<figure class="image">
-		<img src="logo.png" alt="" />
+		<img src="sample.jpg" alt="" />
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
-		<img src="logo.png" alt="CKEditor logo" />
+		<img src="sample.jpg" alt="CKEditor logo" />
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 </div>

+ 1 - 1
packages/ckeditor5-image/tests/manual/imagestyle.html

@@ -1,7 +1,7 @@
 <div id="editor">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
-		<img src="logo.png" alt="" />
+		<img src="sample.jpg" alt="" />
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>

BIN
packages/ckeditor5-image/tests/manual/logo.png


BIN
packages/ckeditor5-image/tests/manual/sample.jpg


+ 1 - 1
packages/ckeditor5-image/tests/manual/textalternative.html

@@ -1,7 +1,7 @@
 <div id="editor">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
-		<img src="logo.png" alt="CKEditor logo" />
+		<img src="sample.jpg" alt="CKEditor logo" />
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>

+ 40 - 1
packages/ckeditor5-image/tests/widget/utils.js

@@ -4,7 +4,7 @@
  */
 
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
-import { widgetize, isWidget, WIDGET_CLASS_NAME } from '../../src/widget/utils';
+import { widgetize, isWidget, WIDGET_CLASS_NAME, setLabel, getLabel } from '../../src/widget/utils';
 
 describe( 'widget utils', () => {
 	let element;
@@ -27,6 +27,20 @@ describe( 'widget utils', () => {
 		it( 'should add proper CSS class', () => {
 			expect( element.hasClass( WIDGET_CLASS_NAME ) ).to.be.true;
 		} );
+
+		it( 'should add element\'s label if one is provided', () => {
+			element = new ViewElement( 'div' );
+			widgetize( element, { label: 'foo bar baz label' } );
+
+			expect( getLabel( element ) ).to.equal( 'foo bar baz label' );
+		} );
+
+		it( 'should add element\'s label if one is provided as function', () => {
+			element = new ViewElement( 'div' );
+			widgetize( element, { label: () => 'foo bar baz label' } );
+
+			expect( getLabel( element ) ).to.equal( 'foo bar baz label' );
+		} );
 	} );
 
 	describe( 'isWidget()', () => {
@@ -38,4 +52,29 @@ describe( 'widget utils', () => {
 			expect( isWidget( new ViewElement( 'p' ) ) ).to.be.false;
 		} );
 	} );
+
+	describe( 'label utils', () => {
+		it( 'should allow to set label for element', () => {
+			const element = new ViewElement( 'p' );
+			setLabel( element, 'foo bar baz' );
+
+			expect( getLabel( element ) ).to.equal( 'foo bar baz' );
+		} );
+
+		it( 'should return empty string for elements without label', () => {
+			const element = new ViewElement( 'div' );
+
+			expect( getLabel( element ) ).to.equal( '' );
+		} );
+
+		it( 'should allow to use a function as label creator', () => {
+			const element = new ViewElement( 'p' );
+			let caption = 'foo';
+			setLabel( element, () => caption );
+
+			expect( getLabel( element ) ).to.equal( 'foo' );
+			caption = 'bar';
+			expect( getLabel( element ) ).to.equal( 'bar' );
+		} );
+	} );
 } );

+ 17 - 1
packages/ckeditor5-image/tests/widget/widgetengine.js

@@ -31,7 +31,11 @@ describe( 'WidgetEngine', () => {
 
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'widget' )
-					.toElement( () => widgetize( new ViewContainer( 'div' ) ) );
+					.toElement( () => {
+						const element = widgetize( new ViewContainer( 'div' ), { label: 'element label' } );
+
+						return element;
+					} );
 
 				buildModelConverter().for( editor.editing.modelToView )
 					.fromElement( 'editable' )
@@ -52,6 +56,18 @@ describe( 'WidgetEngine', () => {
 		expect( viewDocument.selection.isFake ).to.be.true;
 	} );
 
+	it( 'should use element\'s label to set fake selection if one is provided', () => {
+		setModelData( document, '[<widget>foo bar</widget>]' );
+
+		expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'element label' );
+	} );
+
+	it( 'fake selection should be empty if widget is not selected', () => {
+		setModelData( document, '<widget>foo bar</widget>' );
+
+		expect( viewDocument.selection.fakeSelectionLabel ).to.equal( '' );
+	} );
+
 	it( 'should toggle selected class', () => {
 		setModelData( document, '[<widget>foo</widget>]' );