#2052: Support for inline images

CHANGELOG.md

@@ -2118,7 +2118,7 @@ Other releases:
 
 ## [12.4.0](https://github.com/ckeditor/ckeditor5/compare/v12.3.1...v12.4.0) (2019-08-26)
 
-This release brings a huge set of new features: [image resizing](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image.html#resizing-images), [to-do lists](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/todo-lists.html), [support for RTL languages](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/ui-language.html), [simple upload adapter](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html), [support for pasting from Google Docs](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/paste-from-office/paste-from-google-docs.html), [mathematic formulas](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/mathtype.html), and [spelling and grammar checking](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/spell-checker.html). In addition to that, as always, it contains many improvements and bug fixes.
+This release brings a huge set of new features: [image resizing](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image.html#resizing-images), [to-do lists](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/todo-lists.html), [support for RTL languages](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/ui-language.html), [simple upload adapter](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html), [support for pasting from Google Docs](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/paste-from-office/paste-from-google-docs.html), [mathematic formulas](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/mathtype.html), and [spelling and grammar checking](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/spell-checker.html). In addition to that, as always, it contains many improvements and bug fixes.
 
 Read more in the blog post: https://ckeditor.com/blog/CKEditor-5-v12.4.0-with-image-resizing-to-do-lists-RTL-language-support-and-more/
 

docs/_snippets/build-classic-source.js

@@ -6,5 +6,9 @@
 /* globals window */
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
+import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
 
 window.ClassicEditor = ClassicEditor;
+ClassicEditor.builtinPlugins.push( ImageInsert );
+ClassicEditor.builtinPlugins.push( AutoImage );

docs/_snippets/examples/balloon-block-editor.html

@@ -2,7 +2,7 @@
 	<h2>Taj Mahal: A breathtaking ode to love</h2>
 
 	<figure class="image image-style-side" height="400">
-		<img src="%BASE_PATH%/assets/img/tajmahal.jpg" alt="Taj Mahal illustration.">
+		<img src="%BASE_PATH%/assets/img/tajmahal.jpg" srcset="%BASE_PATH%/assets/img/tajmahal.jpg, %BASE_PATH%/assets/img/tajmahal_2x.jpg 2x" alt="Taj Mahal illustration.">
 		<figcaption>Taj Mahal with its poetic white marble tomb</figcaption>
 	</figure>
 

docs/_snippets/examples/classic-editor.html

@@ -3,7 +3,7 @@ <h2>The three greatest things you learn from traveling</h2>
 
 	<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
 
-	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/volcano.jpg" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/volcano.jpg" srcset="%BASE_PATH%/assets/img/volcano.jpg, %BASE_PATH%/assets/img/volcano_2x.jpg 2x" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
 		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
 	</figure>
 
@@ -25,7 +25,7 @@ <h3>Improvisation</h3>
 		<li>start your adventure</li>
 	</ul>
 
-	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" srcset="%BASE_PATH%/assets/img/umbrellas.jpg, %BASE_PATH%/assets/img/umbrellas_2x.jpg 2x" alt="Three Monks walking on ancient temple.">
 		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
 	</figure>
 

docs/_snippets/examples/document-editor.html

@@ -7,6 +7,7 @@ <h3 style="text-align:center;">Welcome letter</h3>
 
 			<p>Dear Guest,</p>
 			<p>We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
+			<figure class="image"><img src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img//malta_2x.jpg 2x" alt="Bilancino Hotel" /><figcaption>Bilancino Hotel</figcaption></figure>
 			<p>Please find below the full schedule of the event.</p>
 
 			<figure class="table">
@@ -52,7 +53,7 @@ <h3 style="text-align:center;">Welcome letter</h3>
 			<p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk <span style="background-color:hsl(60, 75%, 60%)">at least half an hour earlier</span> to make sure that the registration process goes as smoothly as possible.</p>
 
 			<p>We look forward to welcoming you to the event.</p>
-
+			<p><img class="image_resized" style="width: 180px;" src="https://c.cksource.com/a/1/img/docs/signature.png" alt="Victoria Valc signature" /></p>
 			<p><strong>Victoria Valc</strong></p>
 			<p><strong>Event Manager</strong></p>
 			<p><strong>Bilancino Hotel</strong></p>

docs/_snippets/examples/document-editor.js

@@ -6,16 +6,11 @@
 /* globals console, window, document */
 
 import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document/src/ckeditor';
-import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 DecoupledEditor
 	.create( document.querySelector( '.document-editor__editable' ), {
-		extraPlugins: [ ImageResize ],
-		cloudServices: CS_CONFIG,
-		image: {
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ]
-		}
+		cloudServices: CS_CONFIG
 	} )
 	.then( editor => {
 		const toolbarContainer = document.querySelector( '.document-editor__toolbar' );

docs/_snippets/examples/inline-editor.html

@@ -10,7 +10,7 @@ <h3>Destination of the Month</h3>
 		<h4>Valletta</h4>
 
 		<figure class="image image-style-align-right" style="width: 50%;">
-			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg">
+			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
 			<figcaption>It's siesta time in Valletta.</figcaption>
 		</figure>
 

docs/_snippets/examples/inline-editor.js

@@ -6,7 +6,6 @@
 /* globals console, window, document */
 
 import InlineEditor from '@ckeditor/ckeditor5-build-inline/src/ckeditor';
-import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );
@@ -34,33 +33,13 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 		];
 		config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];
 	} else {
-		config.extraPlugins = [ ImageResize ];
 		config.image = {
-			resizeOptions: [
-				{
-					name: 'resizeImage:original',
-					label: 'Original',
-					value: null
-				},
-				{
-					name: 'resizeImage:50',
-					label: '50%',
-					value: '50'
-				},
-				{
-					name: 'resizeImage:75',
-					label: '75%',
-					value: '75'
-				}
-			],
-			styles: [ 'full', 'alignLeft', 'alignRight' ],
 			toolbar: [
-				'imageStyle:alignLeft',
-				'imageStyle:full',
-				'imageStyle:alignRight',
-				'|',
-				'resizeImage',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
 				'|',
+				'toggleImageCaption',
 				'imageTextAlternative'
 			]
 		};

docs/_snippets/examples/multi-root-editor.html

@@ -12,7 +12,7 @@ <h3>Destination of the Month</h3>
 		<h4>Valletta</h4>
 
 		<figure class="image image-style-side">
-			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg">
+			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
 			<figcaption>It's siesta time in Valletta.</figcaption>
 		</figure>
 

docs/_snippets/examples/multi-root-editor.js

@@ -397,9 +397,9 @@ MultirootEditor
 			'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'uploadImage', 'blockQuote',
 			'insertTable', 'mediaEmbed', 'undo', 'redo' ],
 		image: {
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full',
-				'imageStyle:side' ],
-			styles: [ 'full', 'side' ]
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative'
+			]
 		},
 		table: {
 			contentToolbar: [

docs/_snippets/features/mathtype.js

@@ -48,16 +48,12 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			styles: [
-				'full',
-				'alignLeft',
-				'alignRight'
-			],
 			toolbar: [
-				'imageStyle:alignLeft',
-				'imageStyle:full',
-				'imageStyle:alignRight',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
 				'|',
+				'toggleImageCaption',
 				'imageTextAlternative'
 			]
 		},

docs/_snippets/features/toolbar-breakpoint.js

@@ -27,7 +27,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

docs/_snippets/features/toolbar-grouping.js

@@ -23,7 +23,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

docs/_snippets/features/toolbar-wrapping.js

@@ -28,7 +28,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

docs/_snippets/features/wproofreader.js

@@ -48,16 +48,12 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			styles: [
-				'full',
-				'alignLeft',
-				'alignRight'
-			],
 			toolbar: [
-				'imageStyle:alignLeft',
-				'imageStyle:full',
-				'imageStyle:alignRight',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
 				'|',
+				'toggleImageCaption',
 				'imageTextAlternative'
 			]
 		},

docs/assets/snippet-styles.css

@@ -28,9 +28,11 @@
 	margin-top: 0;
 }
 
+/*
 .ck.ck-content > :not(.ck-fake-selection-container):last-of-type {
 	margin-bottom: 0;
 }
+*/
 
 /* Override default Umberto's styles because they apply margins to media embed widgets with iframe
 previews breaking their structure. */

docs/builds/guides/development/dll-builds.md

@@ -125,9 +125,11 @@ For example:
 		},
 		image: {
 			toolbar: [
+				'imageStyle:inline',
 				'imageStyle:full',
 				'imageStyle:side',
 				'|',
+				'toggleImageCaption',
 				'imageTextAlternative'
 			]
 		},

docs/builds/guides/development/plugins.md

@@ -12,7 +12,7 @@ order: 20
 
 Features in CKEditor are introduced by plugins. In fact, without plugins CKEditor is an empty API with no use. The builds provided with CKEditor 5 are actually predefined collections of plugins, put together to satisfy specific needs.
 
-Plugins provided by the CKEditor core team are available in [npm](https://www.npmjs.com/search?q=ckeditor5) (and [GitHub](https://github.com/ckeditor?utf8=%E2%9C%93&q=ckeditor5&type=&language=), too) in form of npm packages. A package may contain one or more plugins (e.g. the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains {@link features/image several granular plugins}).
+Plugins provided by the CKEditor core team are available in [npm](https://www.npmjs.com/search?q=ckeditor5) (and [GitHub](https://github.com/ckeditor?utf8=%E2%9C%93&q=ckeditor5&type=&language=), too) in form of npm packages. A package may contain one or more plugins (e.g. the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains {@link features/images-overview several granular plugins}).
 
 ## Common use cases
 

docs/builds/guides/faq.md

@@ -72,7 +72,7 @@ By default, CKEditor 5 has no global registry of editor instances. But if necess
 
 ## How to enable image drag&drop and upload? Where should I start?
 
-The {@link features/image Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best image upload strategy for your project.
+The {@link features/images-overview Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best image upload strategy for your project.
 
 ## How to use CKEditor 5 with frameworks (Angular, React, Vue, etc.)?
 

docs/builds/guides/integration/advanced-setup.md

@@ -265,9 +265,11 @@ ClassicEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',
+			'toggleImageCaption',
 			'imageTextAlternative'
 		]
 	},
@@ -351,9 +353,11 @@ ClassicEditor
 		],
 		image: {
 			toolbar: [
+				'imageStyle:inline',
 				'imageStyle:full',
 				'imageStyle:side',
 				'|',
+				'toggleImageCaption',
 				'imageTextAlternative'
 			]
 		}

docs/builds/guides/integration/content-styles.md

@@ -9,7 +9,7 @@ order: 80
 
 # Content styles
 
-Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/image image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote block quote} feature that displays quotes in italic with a subtle border on the side.
+Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/images-overview image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote block quote} feature that displays quotes in italic with a subtle border on the side.
 
 {@img assets/img/builds-content-styles.png 823 Editor content styles.}