Merge pull request #8090 from ckeditor/i/8034

Other (image): The `config.image.upload.panel.items` does not need to be set anymore in order to show the "insert image via URL form". It is enough to load the new `ImageInsert` plugin and use the new `imageInsert` button. See #8034.
ckeditor · Sep 17, 2020 · 48a9e94 · 48a9e94
2 parents 3e6ea99 + 86849d6
commit 48a9e94
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 80 deletions.
diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-insert-via-url.js b/packages/ckeditor5-image/docs/_snippets/features/image-insert-via-url.js
@@ -19,12 +19,7 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
-			upload: {
-				panel: {
-					items: [ 'insertImageViaUrl' ]
-				}
-			}
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/packages/ckeditor5-image/docs/features/image.md b/packages/ckeditor5-image/docs/features/image.md
@@ -87,23 +87,15 @@ See the {@link features/image-upload Image upload} guide.
 
 Besides the ability to insert images by uploading them directly from your disk or via CKFinder, you can also configure CKEditor 5 to allow inserting images via source URL.
 
-In order to enable this option, install the `ImageInsert` plugin and configure {@link module:image/imageupload~ImageUploadPanelConfig#items `image.upload.panel.items`} like below:
+In order to enable this option, install the `ImageInsert` plugin and add the `imageInsert` button to the toolbar (it replaces the standard `imageUpload` button).
 
 ```js
 import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ... , ImageInsert ],
-		toolbar: [ ... , 'imageInsert' ],
-		image: {
-			// ...
-			upload: {
-				panel: {
-					items: [ 'insertImageViaUrl' ]
-				}
-			}
-		}
+		toolbar: [ ... , 'imageInsert' ]
 	} )
 ```
 

diff --git a/packages/ckeditor5-image/src/imageinsert.js b/packages/ckeditor5-image/src/imageinsert.js
@@ -42,11 +42,10 @@ export default class ImageInsert extends Plugin {
 }
 
 /**
- * Image insert panel view configuration.
- * **NOTE:** Currently the panel settings are configurable through the `image.upload` property.
+ * The image insert configuration.
  *
  * @protected
- * @member {module:image/imageupload~ImageUploadPanelConfig} module:image/imageupload~ImageUploadConfig#panel
+ * @member {module:image/imageinsert~ImageInsertConfig} module:image/image~ImageConfig#insert
  */
 
 /**
@@ -55,8 +54,8 @@ export default class ImageInsert extends Plugin {
  *		ClassicEditor
  *			.create( editorElement, {
  * 				image: {
- * 					upload: {
- * 						panel: ... // panel settings for "imageInsert" view goes here
+ * 					insert: {
+ *						... // settings for "imageInsert" view goes here
  * 					}
  * 				}
  *			} )
@@ -66,11 +65,11 @@ export default class ImageInsert extends Plugin {
  * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  *
  * @protected
- * @interface module:image/imageupload~ImageUploadPanelConfig
+ * @interface module:image/imageinsert~ImageInsertConfig
  */
 
 /**
- * The list of {@link module:image/imageinsert~ImageInsert} integrations.
+ * The image insert panel view configuration contains a list of {@link module:image/imageinsert~ImageInsert} integrations.
  *
  * The option accepts string tokens.
  * * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`.
@@ -81,18 +80,16 @@ export default class ImageInsert extends Plugin {
  * in that case should be `pluginXButton`.
  *
  *		// Add `insertImageViaUrl`, `openCKFinder` and custom `pluginXButton` integrations.
- *		const imageUploadConfig = {
- *			upload: {
- *				panel: {
- *					items: [
- *						'insertImageViaUrl',
- *						'openCKFinder',
- *						'pluginXButton'
- *					]
- *				}
+ *		const imageInsertConfig = {
+ *			insert: {
+ *				integrations: [
+ *					'insertImageViaUrl',
+ *					'openCKFinder',
+ *					'pluginXButton'
+ *				]
  *			}
  *		};
  *
- * @member {Array.<String>} module:image/imageupload~ImageUploadPanelConfig#items
+ * @member {Array.<String>} module:image/imageinsert~ImageInsertConfig#integrations
  * @default [ 'insertImageViaUrl' ]
  */
diff --git a/packages/ckeditor5-image/src/imageinsert/utils.js b/packages/ckeditor5-image/src/imageinsert/utils.js
@@ -19,7 +19,7 @@ import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/
  * @returns {Object.<String, module:ui/view~View>} Integrations object.
  */
 export function prepareIntegrations( editor ) {
-	const panelItems = editor.config.get( 'image.upload.panel.items' );
+	const panelItems = editor.config.get( 'image.insert.integrations' );
 	const imageInsertUIPlugin = editor.plugins.get( 'ImageInsertUI' );
 
 	const PREDEFINED_INTEGRATIONS = {

diff --git a/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js b/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js
@@ -48,12 +48,10 @@ describe( 'ImageInsertUI', () => {
 					plugins: [ Paragraph, Image, ImageInsert, ImageInsertUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
 					toolbar: [ 'imageInsert' ],
 					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl'
-								]
-							}
+						insert: {
+							integrations: [
+								'insertImageViaUrl'
+							]
 						}
 					}
 				} )
@@ -296,13 +294,11 @@ describe( 'ImageInsertUI', () => {
 						Clipboard
 					],
 					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
+						insert: {
+							integrations: [
+								'insertImageViaUrl',
+								'openCKFinder'
+							]
 						}
 					}
 				} );

diff --git a/packages/ckeditor5-image/tests/imageinsert/utils.js b/packages/ckeditor5-image/tests/imageinsert/utils.js
@@ -30,13 +30,11 @@ describe( 'Upload utils', () => {
 						ImageUploadUI
 					],
 					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
+						insert: {
+							integrations: [
+								'insertImageViaUrl',
+								'openCKFinder'
+							]
 						}
 					}
 				} );
@@ -64,13 +62,11 @@ describe( 'Upload utils', () => {
 						ImageUploadUI
 					],
 					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
+						insert: {
+							integrations: [
+								'insertImageViaUrl',
+								'openCKFinder'
+							]
 						}
 					}
 				} );
@@ -94,12 +90,10 @@ describe( 'Upload utils', () => {
 						ImageUploadUI
 					],
 					image: {
-						upload: {
-							panel: {
-								items: [
-									'link'
-								]
-							}
+						insert: {
+							integrations: [
+								'link'
+							]
 						}
 					}
 				} );

diff --git a/packages/ckeditor5-image/tests/manual/imageinsertviaurl.js b/packages/ckeditor5-image/tests/manual/imageinsertviaurl.js
@@ -30,13 +30,11 @@ ClassicEditor
 		],
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
-			upload: {
-				panel: {
-					items: [
-						'insertImageViaUrl',
-						'openCKFinder'
-					]
-				}
+			insert: {
+				integrations: [
+					'insertImageViaUrl',
+					'openCKFinder'
+				]
 			}
 		},
 		ckfinder: {

diff --git a/tests/manual/all-features.js b/tests/manual/all-features.js
@@ -97,12 +97,10 @@ ClassicEditor
 				'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|',
 				'imageResize'
 			],
-			upload: {
-				panel: {
-					items: [
-						'insertImageViaUrl'
-					]
-				}
+			insert: {
+				integrations: [
+					'insertImageViaUrl'
+				]
 			}
 		},
 		placeholder: 'Type the content here!',