Merge pull request #9508 from ckeditor/i/9144-updated-snippets

Docs (image): All of the editor build configurations and snippets are updated to show the inline images UI. See #9144. Internal (image): All of the manual tests are updated to show the inline images UI. See #9144.
ckeditor · Apr 20, 2021 · da9dc99 · da9dc99
2 parents 76899a2 + 974df2d
commit da9dc99
Show file tree

Hide file tree

Showing 126 changed files with 201 additions and 343 deletions.
diff --git a/docs/_snippets/examples/balloon-block-editor.html b/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>
 

diff --git a/docs/_snippets/examples/classic-editor.html b/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>
 

diff --git a/docs/_snippets/examples/document-editor.html b/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>

diff --git a/docs/_snippets/examples/document-editor.js b/docs/_snippets/examples/document-editor.js
@@ -12,12 +12,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 DecoupledEditor
 	.create( document.querySelector( '.document-editor__editable' ), {
 		extraPlugins: [ ImageResize ],
-		cloudServices: CS_CONFIG,
-		image: {
-			toolbar: [
-				'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight'
-			]
-		}
+		cloudServices: CS_CONFIG
 	} )
 	.then( editor => {
 		const toolbarContainer = document.querySelector( '.document-editor__toolbar' );

diff --git a/docs/_snippets/examples/inline-editor.html b/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>
 

diff --git a/docs/_snippets/examples/inline-editor.js b/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,32 +33,11 @@ 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'

diff --git a/docs/_snippets/examples/multi-root-editor.html b/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>
 

diff --git a/docs/_snippets/examples/multi-root-editor.js b/docs/_snippets/examples/multi-root-editor.js
@@ -398,9 +398,8 @@ MultirootEditor
 			'insertTable', 'mediaEmbed', 'undo', 'redo' ],
 		image: {
 			toolbar: [
-				'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side'
-			],
-			styles: [ 'full', 'side' ]
+				'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative'
+			]
 		},
 		table: {
 			contentToolbar: [

diff --git a/docs/_snippets/features/mathtype.js b/docs/_snippets/features/mathtype.js
@@ -48,15 +48,10 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			styles: [
-				'full',
-				'alignLeft',
-				'alignRight'
-			],
 			toolbar: [
-				'imageStyle:alignLeft',
-				'imageStyle:full',
-				'imageStyle:alignRight',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
 				'|',
 				'toggleImageCaption',
 				'imageTextAlternative'

diff --git a/docs/_snippets/features/toolbar-breakpoint.js b/docs/_snippets/features/toolbar-breakpoint.js
@@ -27,7 +27,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/toolbar-grouping.js b/docs/_snippets/features/toolbar-grouping.js
@@ -23,7 +23,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/toolbar-wrapping.js b/docs/_snippets/features/toolbar-wrapping.js
@@ -28,7 +28,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/wproofreader.js b/docs/_snippets/features/wproofreader.js
@@ -48,15 +48,10 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			styles: [
-				'full',
-				'alignLeft',
-				'alignRight'
-			],
 			toolbar: [
-				'imageStyle:alignLeft',
-				'imageStyle:full',
-				'imageStyle:alignRight',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
 				'|',
 				'toggleImageCaption',
 				'imageTextAlternative'

diff --git a/docs/assets/img/fields.jpg b/docs/assets/img/fields.jpg
diff --git a/docs/assets/img/fields_2x.jpg b/docs/assets/img/fields_2x.jpg
diff --git a/docs/assets/img/malta.jpg b/docs/assets/img/malta.jpg
diff --git a/docs/assets/img/malta_2x.jpg b/docs/assets/img/malta_2x.jpg
diff --git a/docs/assets/img/tajmahal.jpg b/docs/assets/img/tajmahal.jpg
diff --git a/docs/assets/img/tajmahal_2x.jpg b/docs/assets/img/tajmahal_2x.jpg
diff --git a/docs/assets/img/umbrellas.jpg b/docs/assets/img/umbrellas.jpg
diff --git a/docs/assets/img/umbrellas_2x.jpg b/docs/assets/img/umbrellas_2x.jpg
diff --git a/docs/assets/img/volcano.jpg b/docs/assets/img/volcano.jpg
diff --git a/docs/assets/img/volcano_2x.jpg b/docs/assets/img/volcano_2x.jpg
diff --git a/docs/builds/guides/development/dll-builds.md b/docs/builds/guides/development/dll-builds.md
@@ -125,6 +125,7 @@ For example:
 		},
 		image: {
 			toolbar: [
+				'imageStyle:inline',
 				'imageStyle:full',
 				'imageStyle:side',
 				'|',

diff --git a/docs/builds/guides/integration/advanced-setup.md b/docs/builds/guides/integration/advanced-setup.md
@@ -265,6 +265,7 @@ ClassicEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',
@@ -352,6 +353,7 @@ ClassicEditor
 		],
 		image: {
 			toolbar: [
+				'imageStyle:inline',
 				'imageStyle:full',
 				'imageStyle:side',
 				'|',

diff --git a/docs/builds/guides/integration/installing-plugins.md b/docs/builds/guides/integration/installing-plugins.md
@@ -114,6 +114,7 @@ ClassicEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',

diff --git a/docs/framework/guides/custom-editor-creator.md b/docs/framework/guides/custom-editor-creator.md
@@ -442,8 +442,7 @@ MultirootEditor
 		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'uploadImage', 'blockQuote',
 			'insertTable', 'mediaEmbed', 'undo', 'redo' ],
 		image: {
-			toolbar: [ 'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
-			styles: [ 'full', 'alignLeft', 'alignRight' ]
+			toolbar: [ 'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText' ],
 		},
 		table: {
 			contentToolbar: [

diff --git a/packages/ckeditor5-build-balloon-block/build/ckeditor.js b/packages/ckeditor5-build-balloon-block/build/ckeditor.js
diff --git a/packages/ckeditor5-build-balloon-block/build/ckeditor.js.map b/packages/ckeditor5-build-balloon-block/build/ckeditor.js.map
diff --git a/packages/ckeditor5-build-balloon-block/src/ckeditor.js b/packages/ckeditor5-build-balloon-block/src/ckeditor.js
@@ -93,6 +93,7 @@ BalloonEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',

diff --git a/packages/ckeditor5-build-balloon/build/ckeditor.js b/packages/ckeditor5-build-balloon/build/ckeditor.js
diff --git a/packages/ckeditor5-build-balloon/build/ckeditor.js.map b/packages/ckeditor5-build-balloon/build/ckeditor.js.map
diff --git a/packages/ckeditor5-build-balloon/src/ckeditor.js b/packages/ckeditor5-build-balloon/src/ckeditor.js
@@ -86,6 +86,7 @@ BalloonEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',

diff --git a/packages/ckeditor5-build-classic/build/ckeditor.js b/packages/ckeditor5-build-classic/build/ckeditor.js
diff --git a/packages/ckeditor5-build-classic/build/ckeditor.js.map b/packages/ckeditor5-build-classic/build/ckeditor.js.map
diff --git a/packages/ckeditor5-build-classic/src/ckeditor.js b/packages/ckeditor5-build-classic/src/ckeditor.js
@@ -86,6 +86,7 @@ ClassicEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',

diff --git a/packages/ckeditor5-build-decoupled-document/build/ckeditor.js b/packages/ckeditor5-build-decoupled-document/build/ckeditor.js
diff --git a/packages/ckeditor5-build-decoupled-document/build/ckeditor.js.map b/packages/ckeditor5-build-decoupled-document/build/ckeditor.js.map
diff --git a/packages/ckeditor5-build-decoupled-document/src/ckeditor.js b/packages/ckeditor5-build-decoupled-document/src/ckeditor.js
@@ -114,15 +114,10 @@ DecoupledEditor.defaultConfig = {
 		]
 	},
 	image: {
-		styles: [
-			'full',
-			'alignLeft',
-			'alignRight'
-		],
 		toolbar: [
-			'imageStyle:alignLeft',
-			'imageStyle:full',
-			'imageStyle:alignRight',
+			'imageStyle:inline',
+			'imageStyle:wrapText',
+			'imageStyle:breakText',
 			'|',
 			'toggleImageCaption',
 			'imageTextAlternative'

diff --git a/packages/ckeditor5-build-inline/build/ckeditor.js b/packages/ckeditor5-build-inline/build/ckeditor.js
diff --git a/packages/ckeditor5-build-inline/build/ckeditor.js.map b/packages/ckeditor5-build-inline/build/ckeditor.js.map
diff --git a/packages/ckeditor5-build-inline/src/ckeditor.js b/packages/ckeditor5-build-inline/src/ckeditor.js
@@ -86,6 +86,7 @@ InlineEditor.defaultConfig = {
 	},
 	image: {
 		toolbar: [
+			'imageStyle:inline',
 			'imageStyle:full',
 			'imageStyle:side',
 			'|',

diff --git a/packages/ckeditor5-ckfinder/tests/manual/ckfinder.js b/packages/ckeditor5-ckfinder/tests/manual/ckfinder.js
@@ -17,7 +17,7 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, ImageUpload, CKFinderUploadAdapter, CKFinder ],
 		toolbar: [ 'heading', '|', 'undo', 'redo', 'ckfinder' ],
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
 		ckfinder: {
 			// eslint-disable-next-line max-len

diff --git a/packages/ckeditor5-clipboard/tests/manual/dragdrop.js b/packages/ckeditor5-clipboard/tests/manual/dragdrop.js
@@ -194,14 +194,9 @@ ClassicEditor
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		},
 		image: {
-			styles: [
-				'alignCenter',
-				'alignLeft',
-				'alignRight'
-			],
 			toolbar: [
 				'imageTextAlternative', '|',
-				'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|',
+				'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
 				'resizeImage'
 			]
 		},

diff --git a/packages/ckeditor5-core/tests/manual/readonly.js b/packages/ckeditor5-core/tests/manual/readonly.js
@@ -15,7 +15,7 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, BalloonToolbar ],
 		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
 		balloonToolbar: [ 'bold', 'italic', 'link' ]
 	} )

diff --git a/packages/ckeditor5-easy-image/tests/manual/easyimage.js b/packages/ckeditor5-easy-image/tests/manual/easyimage.js
@@ -33,7 +33,7 @@ ClassicEditor
 			'redo'
 		],
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
 		table: {
 			contentToolbar: [

diff --git a/packages/ckeditor5-editor-balloon/tests/manual/ballooneditor.js b/packages/ckeditor5-editor-balloon/tests/manual/ballooneditor.js
@@ -23,7 +23,7 @@ function initEditors() {
 				plugins: [ ArticlePluginSet ],
 				toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
 				image: {
-					toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+					toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 				}
 			} )
 			.then( editor => {

diff --git a/packages/ckeditor5-editor-balloon/tests/manual/memory.js b/packages/ckeditor5-editor-balloon/tests/manual/memory.js
@@ -44,6 +44,7 @@ function initEditors() {
 				},
 				image: {
 					toolbar: [
+						'imageStyle:inline',
 						'imageStyle:full',
 						'imageStyle:side',
 						'|',

diff --git a/packages/ckeditor5-editor-classic/tests/manual/memory.js b/packages/ckeditor5-editor-classic/tests/manual/memory.js
@@ -38,6 +38,7 @@ function initEditor() {
 			},
 			image: {
 				toolbar: [
+					'imageStyle:inline',
 					'imageStyle:full',
 					'imageStyle:side',
 					'|',

diff --git a/packages/ckeditor5-editor-decoupled/tests/manual/memory.js b/packages/ckeditor5-editor-decoupled/tests/manual/memory.js
@@ -40,6 +40,7 @@ function initEditor() {
 			},
 			image: {
 				toolbar: [
+					'imageStyle:inline',
 					'imageStyle:full',
 					'imageStyle:side',
 					'|',

diff --git a/packages/ckeditor5-editor-inline/tests/manual/memory.js b/packages/ckeditor5-editor-inline/tests/manual/memory.js
@@ -44,6 +44,7 @@ function initEditors() {
 				},
 				image: {
 					toolbar: [
+						'imageStyle:inline',
 						'imageStyle:full',
 						'imageStyle:side',
 						'|',

diff --git a/packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.js b/packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.js
@@ -333,7 +333,7 @@ ClassicEditor
 		cloudServices: CS_CONFIG,
 		extraPlugins: [ ComplexBox ],
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		table: {
 			contentToolbar: [

diff --git a/...s/ckeditor5-engine/docs/_snippets/framework/extending-content-custom-element-converter.js b/...s/ckeditor5-engine/docs/_snippets/framework/extending-content-custom-element-converter.js
@@ -185,7 +185,7 @@ ClassicEditor
 		cloudServices: CS_CONFIG,
 		extraPlugins: [ InfoBox ],
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
 		},
 		table: {
 			contentToolbar: [