Przeglądaj źródła

Merge branch 'master' into t/ckeditor5/494

Aleksander Nowodzinski 7 lat temu
rodzic
commit
30273c249d
34 zmienionych plików z 136 dodań i 146 usunięć
  1. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-caption.js
  2. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js
  3. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-style.js
  4. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-toolbar.js
  5. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image.js
  6. 4 1
      packages/ckeditor5-image/docs/api/image.md
  7. 26 25
      packages/ckeditor5-image/docs/features/image.md
  8. 1 1
      packages/ckeditor5-image/package.json
  9. 4 2
      packages/ckeditor5-image/src/image.js
  10. 1 1
      packages/ckeditor5-image/src/image/converters.js
  11. 2 2
      packages/ckeditor5-image/src/image/imageediting.js
  12. 3 3
      packages/ckeditor5-image/src/image/ui/utils.js
  13. 4 4
      packages/ckeditor5-image/src/image/utils.js
  14. 2 0
      packages/ckeditor5-image/src/imagecaption.js
  15. 11 11
      packages/ckeditor5-image/src/imagecaption/imagecaptionediting.js
  16. 6 4
      packages/ckeditor5-image/src/imagestyle.js
  17. 2 2
      packages/ckeditor5-image/src/imagestyle/converters.js
  18. 3 7
      packages/ckeditor5-image/src/imagestyle/imagestylecommand.js
  19. 7 7
      packages/ckeditor5-image/src/imagestyle/imagestyleediting.js
  20. 1 1
      packages/ckeditor5-image/src/imagestyle/imagestyleui.js
  21. 12 12
      packages/ckeditor5-image/src/imagestyle/utils.js
  22. 1 1
      packages/ckeditor5-image/src/imagetextalternative/imagetextalternativecommand.js
  23. 1 2
      packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js
  24. 1 1
      packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js
  25. 10 11
      packages/ckeditor5-image/src/imagetoolbar.js
  26. 4 2
      packages/ckeditor5-image/src/imageupload.js
  27. 5 5
      packages/ckeditor5-image/src/imageupload/imageuploadcommand.js
  28. 3 3
      packages/ckeditor5-image/src/imageupload/imageuploadediting.js
  29. 5 5
      packages/ckeditor5-image/src/imageupload/imageuploadprogress.js
  30. 2 2
      packages/ckeditor5-image/src/imageupload/imageuploadui.js
  31. 8 8
      packages/ckeditor5-image/src/imageupload/utils.js
  32. 0 16
      packages/ckeditor5-image/tests/imagestyle/imagestylecommand.js
  33. 1 1
      packages/ckeditor5-image/theme/image.css
  34. 1 1
      packages/ckeditor5-image/theme/imageuploadprogress.css

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-caption.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 
-import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config.js';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-caption' ), {

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 
-import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config.js';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 
-import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config.js';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style' ), {

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-toolbar.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 
-import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config.js';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-toolbar' ), {

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 
-import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config.js';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image' ), {

+ 4 - 1
packages/ckeditor5-image/docs/api/image.md

@@ -13,9 +13,12 @@ This package implements the image feature for CKEditor 5. The feature is introdu
 See the {@link features/image Image feature} guide and the documentation for the following plugins:
 
 * {@link module:image/image~Image}
-* {@link module:image/imagetoolbar~ImageToolbar}
 * {@link module:image/imagecaption~ImageCaption}
 * {@link module:image/imagestyle~ImageStyle}
+* {@link module:image/imagetextalternative~ImageTextAlternative}
+* {@link module:image/imagetoolbar~ImageToolbar}
+* {@link module:image/imageupload~ImageUpload}
+
 
 ## Installation
 

+ 26 - 25
packages/ckeditor5-image/docs/features/image.md

@@ -7,10 +7,11 @@ category: features
 
 The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains multiple plugins that implement various image-related features:
 
-* {@link module:image/image~Image} implements basic support for images,
-* {@link module:image/imagetoolbar~ImageToolbar} adds the image feature's contextual toolbar,
-* {@link module:image/imagecaption~ImageCaption} adds support for captions,
-* {@link module:image/imagestyle~ImageStyle} adds support for image styles,
+* {@link module:image/image~Image} implements basic support for images.
+* {@link module:image/imagetoolbar~ImageToolbar} adds the image feature's contextual toolbar.
+* {@link module:image/imagecaption~ImageCaption} adds support for captions.
+* {@link module:image/imagestyle~ImageStyle} adds support for image styles.
+* {@link module:image/imagetextalternative~ImageTextAlternative} adds support for adding text alternative.
 * {@link module:image/imageupload~ImageUpload} adds support for uploading dropped or pasted images (see: {@link features/image-upload Image upload}).
 
 <info-box info>
@@ -41,7 +42,7 @@ You can see the demo of an editor with the base image feature enabled below:
 
 ## Image contextual toolbar
 
-The {@link module:image/imagetoolbar~ImageToolbar} plugin introduces contextual toolbar for images. The toolbar appears when an image is selected and can be configured to contain any buttons you want. Usually, these will be image-related options such as the text alternative (which is introduced by the base image plugin) button and [image styles buttons](#image-styles).
+The {@link module:image/imagetoolbar~ImageToolbar} plugin introduces a contextual toolbar for images. The toolbar appears when an image is selected and can be configured to contain any buttons you want. Usually, these will be image-related options such as the text alternative (which is introduced by the base image plugin) button and [image styles buttons](#image-styles).
 
 See a demo of an editor with the contextual toolbar enabled:
 
@@ -75,13 +76,13 @@ By default, if the image caption is empty, the `<figcaption>` element is not vis
 
 ## Image styles
 
-In simple integrations it is enough to let the user insert images, set their text alternative and the editor's job is done. An example of such a simple solution are e.g. [GitHub](https://github.com) comments. The styling of the images (e.g. their maximum width and margins) is controlled by GitHub through stylesheets.
+In simple integrations it is enough to let the user insert images, set their text alternative and the editor's job is done. An example of such a simple solution are e.g. [GitHub](https://github.com) comments. The styling of the images (for example, their maximum width and margins) is controlled by GitHub through stylesheets.
 
-In more advanced scenarios, the user may need to be able to decide whether the image should take the whole width (e.g. if it is the article's main photo) or it should take e.g. 50% of the width and be pulled out of the content (so called "pulled images"). Various integration scenarios require different types of images to be used.
+In more advanced scenarios, the user may need to be able to decide whether the image should take the whole width (if it is the article's main photo) or it should take, for example, 50% of the width and be pulled out of the content (so called "pulled images"). Various integration scenarios require different types of images to be used.
 
 This is what the {@link module:image/imagestyle~ImageStyle} feature is designed for.
 
-However, unlike in CKEditor 4, the user does not set the border, alignment, margins, width, etc. separately. Instead, the user can pick one of the styles defined by the developer who prepared the editor integration. This gives the developer control over how the users style images and makes the user's life easier by setting multiple properties at once.
+However, unlike in CKEditor 4, in CKEditor 5 the end user does not set the image border, alignment, margins, width, etc. separately. Instead, they can pick one of the styles defined by the developer who prepared the editor integration. This gives the developer control over how the users style images and makes the user's life easier by setting multiple properties at once.
 
 A style is applied to the image in form of a class. By default, the editor is configured to support two styles: "full width" (which does not apply any class &mdash; it is the default style) and "side image" (which applies the `image-style-side` class).
 
@@ -98,9 +99,9 @@ A side image:
 ```
 
 <info-box>
-	The actual styling of the images is the developer's job. The editor comes with some default styles, but they will only be applied to images inside the editor. The developer needs to style them on the target pages.
+	The actual styling of the images is the developer's job. The editor comes with some default styles, but they will only be applied to images inside the editor. The developer needs to style them appropriately on the target pages.
 
-	Here you can find the source of the default styles applied by the editor: [`ckeditor5-image/theme/imagestyle.css`](https://github.com/ckeditor/ckeditor5-image/blob/master/theme/imagestyle.css).
+	You can find the source of the default styles applied by the editor here: [`ckeditor5-image/theme/imagestyle.css`](https://github.com/ckeditor/ckeditor5-image/blob/master/theme/imagestyle.css).
 </info-box>
 
 Below you can see a demo of the editor with the image styles feature enabled. The default configuration is used. You can change the styles of images through the image's contextual toolbar.
@@ -111,23 +112,23 @@ Below you can see a demo of the editor with the image styles feature enabled. Th
 
 The available image styles can be configured using the {@link module:image/image~ImageConfig#styles `image.styles`} option.
 
-The following editor supports the default full style plus left- and right-aligned images:
+The following editor supports the default full image style plus left- and right-aligned images:
 
 ```js
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		image: {
-			// You need to configure the image toolbar too, so it uses the new style buttons.
+			// You need to configure the image toolbar, too, so it uses the new style buttons.
 			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
 
 			styles: [
 				// This option is equal to a situation where no style is applied.
 				'full',
 
-				// This represents an image aligned to left.
+				// This represents an image aligned to the left.
 				'alignLeft',
 
-				// This represents an image aligned to right.
+				// This represents an image aligned to the right.
 				'alignRight'
 			]
 		}
@@ -136,14 +137,14 @@ ClassicEditor
 	.catch( ... );
 ```
 
-In the code sample above we used predefined image styles – `'full'`, `'alignLeft'` and `'alignRight'`. The latter two apply, respectively, `.image-style-align-left` and  `.image-style-align-right` classes to the `<figure>` element.
+The code sample above uses predefined image styles: `'full'`, `'alignLeft'` and `'alignRight'`. The latter two apply, respectively, the `.image-style-align-left` and  `.image-style-align-right` classes to the `<figure>` element.
 
 See the result below:
 
 {@snippet features/image-style-custom}
 
 <info-box hint>
-	In the example above the options used represent simple "align left" and "align right" styles. Most text editors support left, center, right alignments, however, try not to think about CKEditor 5's image styles in this way. Try to understand what use cases the system needs to support and define semantical options accordingly. Defining useful and clear styles is one of the steps towards a good user experience and clear, portable output. For example, the "side image" style can be displayed as a floated image on wide screens and as a normal image on low resolution screens.
+	In the example above the options used represent simple "align left" and "align right" styles. Most text editors support left, center and right alignments, however, try not to think about CKEditor 5's image styles in this way. Try to understand what use cases the system needs to support and define semantical options accordingly. Defining useful and clear styles is one of the steps towards a good user experience and clear, portable output. For example, the "side image" style can be displayed as a floated image on wide screens and as a normal image on low resolution screens.
 </info-box>
 
 ### Defining custom styles
@@ -162,9 +163,9 @@ you can also define your own styles or modify the existing ones.
 	Reusing (or modifying) predefined styles has this advantage that CKEditor 5 will use its official translations for the defined button titles.
 </info-box>
 
-You can find advanced examples in the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option's documentation.
+You can find advanced examples in the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option documentation.
 
-TODO (live example)...
+<!-- TODO (live example)... -->
 
 ## Image upload
 
@@ -172,19 +173,19 @@ See the {@link features/image-upload Image upload} guide.
 
 ## Responsive images
 
-TODO...
+Coming soon...
 
-<!-- TODO 6  when finished, link here from the image-upload guide. -->
+<!-- TODO 6 when finished, link here from the image-upload guide. -->
 
 ## Installation
 
-To add the image features to your editor install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:
+To add image features to your editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:
 
-```
+```bash
 npm install --save @ckeditor/ckeditor5-image
 ```
 
-And add the plugins which you need to your plugin list. You also need to set the image toolbar items.
+And add the plugins that you need to your plugin list. You also need to set the image toolbar items.
 
 ```js
 import Image from '@ckeditor/ckeditor5-image/src/image';
@@ -215,7 +216,7 @@ The {@link module:image/image~Image} plugin registers:
 The {@link module:image/imagestyle~ImageStyle} plugin registers:
 
 * A button for each defined style &mdash; e.g. `'imageStyle:full'` and `'imageStyle:side'`.
-* The {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand `'imageStyle'` command} which accepts value based on the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option (e.g. `'full'` and `'side'`):
+* The {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand `'imageStyle'` command} which accepts a value based on the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option (e.g. `'full'` and `'side'`):
 
 	```js
 	editor.execute( 'imageStyle', { value: 'side' } );
@@ -223,7 +224,7 @@ The {@link module:image/imagestyle~ImageStyle} plugin registers:
 
 The {@link module:image/imageupload~ImageUpload} plugin registers:
 
-* The `'imageUpload'` button which opens the native file browser to ley you upload a file directly from your disk.
+* The `'imageUpload'` button which opens the native file browser to let you upload a file directly from your disk.
 * The {@link module:image/imageupload/imageuploadcommand~ImageUploadCommand `'imageUpload'` command} which accepts the file to upload.
 
 ## Contribute

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

@@ -30,7 +30,7 @@
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
-    "lint-staged": "^6.0.0"
+    "lint-staged": "^7.0.0"
   },
   "engines": {
     "node": ">=6.0.0",

+ 4 - 2
packages/ckeditor5-image/src/image.js

@@ -19,6 +19,8 @@ import '../theme/image.css';
  *
  * Uses the {@link module:image/image/imageediting~ImageEditing}.
  *
+ * For a detailed overview, check the {@glink features/image image feature} documentation.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class Image extends Plugin {
@@ -38,7 +40,7 @@ export default class Image extends Plugin {
 }
 
 /**
- * The configuration of the image features. Used by the image features in `@ckeditor/ckeditor5-image` package.
+ * The configuration of the image features. Used by the image features in the `@ckeditor/ckeditor5-image` package.
  *
  * Read more in {@link module:image/image~ImageConfig}.
  *
@@ -46,7 +48,7 @@ export default class Image extends Plugin {
  */
 
 /**
- * The configuration of the image features. Used by the image features in `@ckeditor/ckeditor5-image` package.
+ * The configuration of the image features. Used by the image features in the `@ckeditor/ckeditor5-image` package.
  *
  *		ClassicEditor
  *			.create( editorElement, {

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

@@ -66,7 +66,7 @@ export function viewFigureToModel() {
 }
 
 /**
- * Converter used to convert `srcset` model image's attribute to `srcset`, `sizes` and `width` attributes in the view.
+ * Converter used to convert the `srcset` model image attribute to the `srcset`, `sizes` and `width` attributes in the view.
  *
  * @return {Function}
  */

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

@@ -24,8 +24,8 @@ import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 
 /**
  * The image engine plugin.
- * Registers `<image>` as a block element in the document schema, and allows `alt`, `src` and `srcset` attributes.
- * Registers converters for editing and data pipelines.
+ * It registers `<image>` as a block element in the document schema, and allows `alt`, `src` and `srcset` attributes.
+ * It also egisters converters for editing and data pipelines.
  *
  * @extends module:core/plugin~Plugin
  */

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

@@ -11,8 +11,8 @@ import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpa
 import { isImageWidgetSelected } from '../utils';
 
 /**
- * A helper utility which positions the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon} instance
+ * A helper utility that positions the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
  * with respect to the image in the editor content, if one is selected.
  *
  * @param {module:core/editor/editor~Editor} editor The editor instance.
@@ -29,7 +29,7 @@ export function repositionContextualBalloon( editor ) {
 
 /**
  * Returns the positioning options that control the geometry of the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}, with respect
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  * to the selected element in the editor content.
  *
  * @param {module:core/editor/editor~Editor} editor The editor instance.

+ 4 - 4
packages/ckeditor5-image/src/image/utils.js

@@ -14,12 +14,12 @@ const imageSymbol = Symbol( 'isImage' );
 
 /**
  * Converts a given {@link module:engine/view/element~Element} to an image widget:
- * * adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the image widget element,
- * * calls the {@link module:widget/utils~toWidget toWidget} function with the proper element's label creator.
+ * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the image widget element.
+ * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
  *
  * @param {module:engine/view/element~Element} viewElement
- * @param {module:engine/view/writer~Writer} writer Instance of view writer.
- * @param {String} label Element's label. It will be concatenated with the image `alt` attribute if one is present.
+ * @param {module:engine/view/writer~Writer} writer An instance of the view writer.
+ * @param {String} label The element's label. It will be concatenated with the image `alt` attribute if one is present.
  * @returns {module:engine/view/element~Element}
  */
 export function toImageWidget( viewElement, writer, label ) {

+ 2 - 0
packages/ckeditor5-image/src/imagecaption.js

@@ -15,6 +15,8 @@ import '../theme/imagecaption.css';
 /**
  * The image caption plugin.
  *
+ * For a detailed overview, check the {@glink features/image#image-captions image caption} documentation.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class ImageCaption extends Plugin {

+ 11 - 11
packages/ckeditor5-image/src/imagecaption/imagecaptionediting.js

@@ -38,7 +38,7 @@ export default class ImageCaptionEditing extends Plugin {
 		const t = editor.t;
 
 		/**
-		 * Last selected caption editable.
+		 * The last selected caption editable.
 		 * It is used for hiding the editable when it is empty and the image widget is no longer selected.
 		 *
 		 * @private
@@ -89,7 +89,7 @@ export default class ImageCaptionEditing extends Plugin {
 	 *
 	 * @private
 	 * @param {module:engine/view/writer~Writer} viewWriter
-	 * @returns {Boolean} Returns `true` when view is updated.
+	 * @returns {Boolean} Returns `true` when the view is updated.
 	 */
 	_updateCaptionVisibility( viewWriter ) {
 		const mapper = this.editor.editing.mapper;
@@ -144,7 +144,7 @@ export default class ImageCaptionEditing extends Plugin {
 	}
 
 	/**
-	 * Returns converter that fixes caption visibility during the model-to-view conversion.
+	 * Returns a converter that fixes caption visibility during the model-to-view conversion.
 	 * Checks if the changed node is placed inside the caption element and fixes its visibility in the view.
 	 *
 	 * @private
@@ -173,12 +173,12 @@ export default class ImageCaptionEditing extends Plugin {
 	}
 
 	/**
-	 * Checks whether data inserted to the model document have image element that has no caption element inside it.
-	 * If there is none - adds it to the image element.
+	 * Checks whether the data inserted to the model document have an image element that has no caption element inside it.
+	 * If there is none, it adds it to the image element.
 	 *
 	 * @private
-	 * @param {module:engine/model/writer~Writer} writer Writer to make changes with.
-	 * @returns {Boolean} `true` if any change has been applied, `false` otherwise.
+	 * @param {module:engine/model/writer~Writer} writer The writer to make changes with.
+	 * @returns {Boolean} `true` if any change was applied, `false` otherwise.
 	 */
 	_insertMissingModelCaptionElement( writer ) {
 		const model = this.editor.model;
@@ -262,12 +262,12 @@ function getParentCaption( node ) {
 	return null;
 }
 
-// Hides given caption in the view if it's empty.
+// Hides a given caption in the view if it is empty.
 //
 // @private
 // @param {module:engine/view/containerelement~ContainerElement} caption
 // @param {module:engine/view/writer~Writer} viewWriter
-// @returns {Boolean} Returns `true` if view was modified.
+// @returns {Boolean} Returns `true` if the view was modified.
 function hideCaptionIfEmpty( caption, viewWriter ) {
 	if ( !caption.childCount && !caption.hasClass( 'ck-hidden' ) ) {
 		viewWriter.addClass( 'ck-hidden', caption );
@@ -277,12 +277,12 @@ function hideCaptionIfEmpty( caption, viewWriter ) {
 	return false;
 }
 
-// Shows the caption
+// Shows the caption.
 //
 // @private
 // @param {module:engine/view/containerelement~ContainerElement} caption
 // @param {module:engine/view/writer~Writer} viewWriter
-// @returns {Boolean} Returns `true` if view was modified.
+// @returns {Boolean} Returns `true` if the view was modified.
 function showCaption( caption, viewWriter ) {
 	if ( caption.hasClass( 'ck-hidden' ) ) {
 		viewWriter.removeClass( 'ck-hidden', caption );

+ 6 - 4
packages/ckeditor5-image/src/imagestyle.js

@@ -17,6 +17,8 @@ import ImageStyleUI from './imagestyle/imagestyleui';
  * It loads the {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing}
  * and {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugins.
  *
+ * For a detailed overview, check the {@glink features/image#image-styles image styles} documentation.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class ImageStyle extends Plugin {
@@ -46,7 +48,7 @@ export default class ImageStyle extends Plugin {
  *
  * which configures two default styles:
  *
- *  * the "full" style which doesn't apply any class, e.g. for images styled to span 100% width of the content,
+ *  * the "full" style which does not apply any class, e.g. for images styled to span 100% width of the content,
  *  * the "side" style with the `.image-style-side` CSS class.
  *
  * See {@link module:image/imagestyle/utils~defaultStyles} to learn more about default
@@ -54,7 +56,7 @@ export default class ImageStyle extends Plugin {
  *
  * The {@link module:image/imagestyle/utils~defaultStyles default styles} can be customized,
  * e.g. to change the icon, title or CSS class of the style. The feature also provides several
- * {@link module:image/imagestyle/utils~defaultIcons default icons} to chose from.
+ * {@link module:image/imagestyle/utils~defaultIcons default icons} to choose from.
  *
  *		import customIcon from 'custom-icon.svg';
  *
@@ -71,7 +73,7 @@ export default class ImageStyle extends Plugin {
  *			]
  *		};
  *
- * If none of the default styles is good enough, it is possible to define independent custom styles too:
+ * If none of the default styles is good enough, it is possible to define independent custom styles, too:
  *
  *		import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  *		import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
@@ -97,7 +99,7 @@ export default class ImageStyle extends Plugin {
  *
  *		editor.execute( 'imageStyle' { value: 'side' } );
  *
- * The feature creates also buttons which execute the command. So, assuming that you use the
+ * The feature also creates buttons that execute the commands. So, assuming that you use the
  * default image styles setting, you can {@link module:image/image~ImageConfig#toolbar configure the image toolbar}
  * (or any other toolbar) to contain these options:
  *

+ 2 - 2
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -42,7 +42,7 @@ export function modelToViewStyleAttribute( styles ) {
 /**
  * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
  *
- * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles Styles for which the converter is created.
+ * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles The styles for which the converter is created.
  * @returns {Function} A view-to-model converter.
  */
 export function viewToModelStyleAttribute( styles ) {
@@ -73,7 +73,7 @@ export function viewToModelStyleAttribute( styles ) {
 	};
 }
 
-// Returns style with given `name` from array of styles.
+// Returns the style with a given `name` from an array of styles.
 //
 // @param {String} name
 // @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat> } styles

+ 3 - 7
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -20,13 +20,13 @@ export default class ImageStyleCommand extends Command {
 	 * Creates an instance of the image style command. Each command instance is handling one style.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor The editor instance.
-	 * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles A styles that this command supports.
+	 * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles The styles that this command supports.
 	 */
 	constructor( editor, styles ) {
 		super( editor );
 
 		/**
-		 * Cached name of the default style if present. If there is no default style it defaults to `false`.
+		 * The cached name of the default style if it is present. If there is no default style, it defaults to `false`.
 		 *
 		 * @type {Boolean|String}
 		 * @private
@@ -78,13 +78,9 @@ export default class ImageStyleCommand extends Command {
 	 * {@link module:image/image~ImageConfig#styles `image.styles`} configuration option).
 	 * @fires execute
 	 */
-	execute( options = {} ) {
+	execute( options ) {
 		const styleName = options.value;
 
-		if ( !this.styles[ styleName ] ) {
-			return;
-		}
-
 		const model = this.editor.model;
 		const imageElement = model.document.selection.getSelectedElement();
 

+ 7 - 7
packages/ckeditor5-image/src/imagestyle/imagestyleediting.js

@@ -67,7 +67,7 @@ export default class ImageStyleEditing extends Plugin {
 }
 
 /**
- * Image style format descriptor.
+ * The image style format descriptor.
  *
  *		import fullSizeIcon from 'path/to/icon.svg';
  *
@@ -82,21 +82,21 @@ export default class ImageStyleEditing extends Plugin {
  *
  * @property {String} name The unique name of the style. It will be used to:
  *
- * * store the chosen style in the model by setting the `imageStyle` attribute of the `<image>` element,
- * * as a value of the {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute `imageStyle` command},
- * * when registering button for each of the styles (`'imageStyle:{name}'`) in the
+ * * Store the chosen style in the model by setting the `imageStyle` attribute of the `<image>` element.
+ * * As a value of the {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute `imageStyle` command},
+ * * when registering a button for each of the styles (`'imageStyle:{name}'`) in the
  * {@link module:ui/componentfactory~ComponentFactory UI components factory} (this functionality is provided by the
- * {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugin),
+ * {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugin).
  *
  * @property {Boolean} [isDefault] When set, the style will be used as the default one.
  * A default style does not apply any CSS class to the view element.
  *
  * @property {String} icon One of the following to be used when creating the style's button:
  *
- * * An SVG icon source (as an XML string),
+ * * An SVG icon source (as an XML string).
  * * One of {@link module:image/imagestyle/utils~defaultIcons} to use a default icon provided by the plugin.
  *
  * @property {String} title The style's title.
  *
- * @property {String} className The CSS class used to represent the style in view.
+ * @property {String} className The CSS class used to represent the style in the view.
  */

+ 1 - 1
packages/ckeditor5-image/src/imagestyle/imagestyleui.js

@@ -92,7 +92,7 @@ export default class ImageStyleUI extends Plugin {
 }
 
 /**
- * Returns translated `title` from the passed styles array.
+ * Returns the translated `title` from the passed styles array.
  *
  * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles
  * @param titles

+ 12 - 12
packages/ckeditor5-image/src/imagestyle/utils.js

@@ -15,24 +15,24 @@ import centerIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
 import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
 
 /**
- * Default image styles provided by the plugin, which can be referred in the
- * {@link module:image/image~ImageConfig#styles} config.
+ * Default image styles provided by the plugin that can be referred in the
+ * {@link module:image/image~ImageConfig#styles} configuration.
  *
  * Among them, 2 default semantic content styles are available:
  *
  * * `full` is a full–width image without any CSS class,
- * * `side` is a side image styled with the `image-style-side` CSS class
+ * * `side` is a side image styled with the `image-style-side` CSS class.
  *
  * There are also 3 styles focused on formatting:
  *
  * * `alignLeft` aligns the image to the left using the `image-style-align-left` class,
- * * `alignCenter` centers the image to the left using the `image-style-align-center` class,
+ * * `alignCenter` centers the image using the `image-style-align-center` class,
  * * `alignRight` aligns the image to the right using the `image-style-align-right` class,
  *
  * @member {Object.<String,Object>}
  */
 const defaultStyles = {
-	// This option is equal to situation when no style is applied.
+	// This option is equal to the situation when no style is applied.
 	full: {
 		name: 'full',
 		title: 'Full size image',
@@ -40,7 +40,7 @@ const defaultStyles = {
 		isDefault: true
 	},
 
-	// This represents side image.
+	// This represents a side image.
 	side: {
 		name: 'side',
 		title: 'Side image',
@@ -48,7 +48,7 @@ const defaultStyles = {
 		className: 'image-style-side'
 	},
 
-	// This style represents an imaged aligned to the left.
+	// This style represents an image aligned to the left.
 	alignLeft: {
 		name: 'alignLeft',
 		title: 'Left aligned image',
@@ -56,7 +56,7 @@ const defaultStyles = {
 		className: 'image-style-align-left'
 	},
 
-	// This style represents a centered imaged.
+	// This style represents a centered image.
 	alignCenter: {
 		name: 'alignCenter',
 		title: 'Centered image',
@@ -64,7 +64,7 @@ const defaultStyles = {
 		className: 'image-style-align-center'
 	},
 
-	// This style represents an imaged aligned to the right.
+	// This style represents an image aligned to the right.
 	alignRight: {
 		name: 'alignRight',
 		title: 'Right aligned image',
@@ -74,8 +74,8 @@ const defaultStyles = {
 };
 
 /**
- * Default image style icons provided by the plugin, which can be referred in the
- * {@link module:image/image~ImageConfig#styles} config.
+ * Default image style icons provided by the plugin that can be referred in the
+ * {@link module:image/image~ImageConfig#styles} configuration.
  *
  * There are 4 icons available: `'full'`, `'left'`, `'center'` and `'right'`.
  *
@@ -89,7 +89,7 @@ const defaultIcons = {
 };
 
 /**
- * Returns {@link module:image/image~ImageConfig#styles} array with items normalized in the
+ * Returns a {@link module:image/image~ImageConfig#styles} array with items normalized in the
  * {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat} format and a complete `icon` markup for each style.
  *
  * @returns {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>}

+ 1 - 1
packages/ckeditor5-image/src/imagetextalternative/imagetextalternativecommand.js

@@ -11,7 +11,7 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { isImage } from '../image/utils';
 
 /**
- * The image text alternative command. It is used to change the `alt` attribute on `<image>` elements.
+ * The image text alternative command. It is used to change the `alt` attribute of `<image>` elements.
  *
  * @extends module:core/command~Command
  */

+ 1 - 2
packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js

@@ -182,8 +182,7 @@ export default class ImageTextAlternativeUI extends Plugin {
 	}
 
 	/**
-	 * Returns `true` when the {@link #_form} is the visible view
-	 * in the {@link #_balloon}.
+	 * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
 	 *
 	 * @private
 	 * @type {Boolean}

+ 1 - 1
packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js

@@ -38,7 +38,7 @@ export default class TextAlternativeFormView extends View {
 		const t = this.locale.t;
 
 		/**
-		 * Tracks information about DOM focus in the form.
+		 * Tracks information about the DOM focus in the form.
 		 *
 		 * @readonly
 		 * @member {module:utils/focustracker~FocusTracker}

+ 10 - 11
packages/ckeditor5-image/src/imagetoolbar.js

@@ -23,6 +23,8 @@ const balloonClassName = 'ck-toolbar-container';
  *
  * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
  *
+ * For a detailed overview, check the {@glink features/image#image-contextual-toolbar image contextual toolbar} documentation.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class ImageToolbar extends Plugin {
@@ -47,7 +49,7 @@ export default class ImageToolbar extends Plugin {
 		const editor = this.editor;
 		const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
 
-		// If `BalloonToolbar` plugin is loaded, it should be disabled for images
+		// If the `BalloonToolbar` plugin is loaded, it should be disabled for images
 		// which have their own toolbar to avoid duplication.
 		// https://github.com/ckeditor/ckeditor5-image/issues/110
 		if ( balloonToolbar ) {
@@ -72,7 +74,7 @@ export default class ImageToolbar extends Plugin {
 		}
 
 		/**
-		 * The contextual balloon plugin instance.
+		 * A contextual balloon plugin instance.
 		 *
 		 * @private
 		 * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
@@ -80,8 +82,7 @@ export default class ImageToolbar extends Plugin {
 		this._balloon = this.editor.plugins.get( 'ContextualBalloon' );
 
 		/**
-		 * A `ToolbarView` instance used to display the buttons specific for image
-		 * editing.
+		 * A `ToolbarView` instance used to display the buttons specific for image editing.
 		 *
 		 * @protected
 		 * @type {module:ui/toolbar/toolbarview~ToolbarView}
@@ -103,8 +104,7 @@ export default class ImageToolbar extends Plugin {
 	}
 
 	/**
-	 * Checks whether the toolbar should show up or hide depending on the
-	 * current selection.
+	 * Checks whether the toolbar should show up or hide depending on the current selection.
 	 *
 	 * @private
 	 */
@@ -157,8 +157,7 @@ export default class ImageToolbar extends Plugin {
 	}
 
 	/**
-	 * Returns `true` when the {@link #_toolbar} is the visible view
-	 * in the {@link #_balloon}.
+	 * Returns `true` when the {@link #_toolbar} is the visible view in the {@link #_balloon}.
 	 *
 	 * @private
 	 * @type {Boolean}
@@ -170,14 +169,14 @@ export default class ImageToolbar extends Plugin {
 
 /**
  * Items to be placed in the image toolbar.
- * The option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
+ * This option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
  *
  * Assuming that you use the following features:
  *
  * * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
- * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ * * {@link module:image/imagetextalternative~ImageTextAlternative},
  *
- * Three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
+ * three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
  * `'imageStyle:full'`, `'imageStyle:side'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
  *
  *		const imageConfig = {

+ 4 - 2
packages/ckeditor5-image/src/imageupload.js

@@ -13,13 +13,15 @@ import ImageUploadProgress from './imageupload/imageuploadprogress';
 import ImageUploadEditing from './imageupload/imageuploadediting';
 
 /**
- * Image upload plugin.
+ * The image upload plugin.
  *
- * This plugin do not do anything directly, but loads set of specific plugins to enable image uploading:
+ * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
  * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
  * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
  * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
  *
+ * For a detailed overview, check the {@glink features/image-upload image upload feature} documentation.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class ImageUpload extends Plugin {

+ 5 - 5
packages/ckeditor5-image/src/imageupload/imageuploadcommand.js

@@ -23,12 +23,12 @@ export default class ImageUploadCommand extends Command {
 	 * Executes the command.
 	 *
 	 * @fires execute
-	 * @param {Object} options Options for executed command.
-	 * @param {File} options.file Image file to upload.
-	 * @param {module:engine/model/position~Position} [options.insertAt] Position at which the image should be inserted.
-	 * If the position is not specified the image will be inserted into the current selection.
+	 * @param {Object} options Options for the executed command.
+	 * @param {File} options.file The image file to upload.
+	 * @param {module:engine/model/position~Position} [options.insertAt] The position at which the image should be inserted.
+	 * If the position is not specified, the image will be inserted into the current selection.
 	 * Note: You can use the {@link module:upload/utils~findOptimalInsertionPosition} function to calculate
-	 * (e.g. based on the current selection) a position which is more optimal from UX perspective.
+	 * (e.g. based on the current selection) a position which is more optimal from the UX perspective.
 	 */
 	execute( options ) {
 		const editor = this.editor;

+ 3 - 3
packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -110,8 +110,8 @@ export default class ImageUploadEditing extends Plugin {
 	}
 
 	/**
-	 * Performs image loading. Image is read from the disk and temporary data is displayed, after uploading process
-	 * is complete we replace temporary data with target image from the server.
+	 * Performs image loading. The image is read from the disk and temporary data is displayed. When the upload process
+	 * is complete the temporary data is replaced with the target image from the server.
 	 *
 	 * @private
 	 * @param {module:upload/filerepository~FileLoader} loader
@@ -213,7 +213,7 @@ export default class ImageUploadEditing extends Plugin {
 	}
 }
 
-// Returns true if non-empty `text/html` is included in data transfer.
+// Returns `true` if non-empty `text/html` is included in the data transfer.
 //
 // @param {module:clipboard/datatransfer~DataTransfer} dataTransfer
 // @returns {Boolean}

+ 5 - 5
packages/ckeditor5-image/src/imageupload/imageuploadprogress.js

@@ -16,8 +16,8 @@ import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import '../../theme/imageuploadprogress.css';
 
 /**
- * Image upload progress plugin.
- * Shows placeholder when image is read from disk and progress bar while image is uploading.
+ * The image upload progress plugin.
+ * It shows a placeholder when the image is read from the disk and a progress bar while the image is uploading.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -29,7 +29,7 @@ export default class ImageUploadProgress extends Plugin {
 		super( editor );
 
 		/**
-		 * Image's placeholder that is displayed before real image data can be accessed.
+		 * The image placeholder that is displayed before real image data can be accessed.
 		 *
 		 * @protected
 		 * @member {String} #placeholder
@@ -48,9 +48,9 @@ export default class ImageUploadProgress extends Plugin {
 	}
 
 	/**
-	 * This ethod is called each time image's `uploadStatus` attribute is changed.
+	 * This method is called each time the image `uploadStatus` attribute is changed.
 	 *
-	 * @param {module:utils/eventinfo~EventInfo} evt Object containing information about the fired event.
+	 * @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
 	 * @param {Object} data Additional information about the change.
 	 * @param {module:engine/conversion/modelconsumable~ModelConsumable} consumable Values to consume.
 	 * @param {Object} conversionApi

+ 2 - 2
packages/ckeditor5-image/src/imageupload/imageuploadui.js

@@ -13,8 +13,8 @@ import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 import { isImageType, findOptimalInsertionPosition } from './utils';
 
 /**
- * Image upload button plugin.
- * Adds `imageUpload` button to UI component factory.
+ * The image upload button plugin.
+ * Adds the `imageUpload` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
  *
  * @extends module:core/plugin~Plugin
  */

+ 8 - 8
packages/ckeditor5-image/src/imageupload/utils.js

@@ -10,7 +10,7 @@
 import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 
 /**
- * Checks if given file is an image.
+ * Checks if a given file is an image.
  *
  * @param {File} file
  * @returns {Boolean}
@@ -24,16 +24,16 @@ export function isImageType( file ) {
 /**
  * Returns a model position which is optimal (in terms of UX) for inserting an image.
  *
- * For instance, if a selection is in a middle of a paragraph, position before this paragraph
- * will be returned, so that it's not split. If the selection is at the end of a paragraph,
- * position after this paragraph will be returned.
+ * For instance, if a selection is in the middle of a paragraph, the position before this paragraph
+ * will be returned so that it is not split. If the selection is at the end of a paragraph,
+ * the position after this paragraph will be returned.
  *
- * Note: If selection is placed in an empty block, that block will be returned. If that position
- * is then passed to {@link module:engine/model/model~Model#insertContent}
- * that block will be fully replaced by the image.
+ * Note: If the selection is placed in an empty block, that block will be returned. If that position
+ * is then passed to {@link module:engine/model/model~Model#insertContent},
+ * the block will be fully replaced by the image.
  *
  * @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
- * Selection based on which the insertion position should be calculated.
+ * The selection based on which the insertion position should be calculated.
  * @returns {module:engine/model/position~Position} The optimal position.
  */
 export function findOptimalInsertionPosition( selection ) {

+ 0 - 16
packages/ckeditor5-image/tests/imagestyle/imagestylecommand.js

@@ -70,22 +70,6 @@ describe( 'ImageStyleCommand', () => {
 		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 	} );
 
-	it( 'should do nothing attribute is not known', () => {
-		setData( model, '[<image imageStyle="otherStyle"></image>]' );
-
-		command.execute( { value: 'someNotExistingStyle' } );
-
-		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
-	} );
-
-	it( 'should do nothing when value is not passed', () => {
-		setData( model, '[<image imageStyle="otherStyle"></image>]' );
-
-		command.execute();
-
-		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
-	} );
-
 	it( 'should use parent batch', () => {
 		setData( model, '[<image></image>]' );
 

+ 1 - 1
packages/ckeditor5-image/theme/image.css

@@ -11,7 +11,7 @@
 		/* Prevent unnecessary margins caused by line-height (see #44). */
 		display: block;
 
-		/* Center the image if its width is smaller than content's width. */
+		/* Center the image if its width is smaller than the content's width. */
 		margin: 0 auto;
 
 		/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */

+ 1 - 1
packages/ckeditor5-image/theme/imageuploadprogress.css

@@ -12,7 +12,7 @@
 	position: relative;
 	overflow: hidden;
 
-	/* Infinite progress bar on top while image is read. */
+	/* Infinite progress bar on top while the image is read. */
 	&.ck-infinite-progress::before {
 		content: "";
 		position: absolute;