@ckeditor/ckeditor5-image - npm Package Compare versions

Comparing version 25.0.0 to 26.0.0

package.json

 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "25.0.0",
+  "version": "26.0.0",
   "description": "Image feature for CKEditor 5.",
@@ -12,27 +12,34 @@ "keywords": [
   ],
+  "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "^25.0.0",
-    "@ckeditor/ckeditor5-core": "^25.0.0",
-    "@ckeditor/ckeditor5-engine": "^25.0.0",
-    "@ckeditor/ckeditor5-ui": "^25.0.0",
-    "@ckeditor/ckeditor5-undo": "^25.0.0",
-    "@ckeditor/ckeditor5-upload": "^25.0.0",
-    "@ckeditor/ckeditor5-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-widget": "^25.0.0"
+    "@ckeditor/ckeditor5-ui": "^26.0.0",
+    "ckeditor5": "^26.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^25.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^25.0.0",
-    "@ckeditor/ckeditor5-ckfinder": "^25.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^25.0.0",
-    "@ckeditor/ckeditor5-enter": "^25.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^25.0.0",
-    "@ckeditor/ckeditor5-heading": "^25.0.0",
-    "@ckeditor/ckeditor5-html-embed": "^25.0.0",
-    "@ckeditor/ckeditor5-indent": "^25.0.0",
-    "@ckeditor/ckeditor5-link": "^25.0.0",
-    "@ckeditor/ckeditor5-list": "^25.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^25.0.0",
-    "@ckeditor/ckeditor5-table": "^25.0.0",
-    "@ckeditor/ckeditor5-typing": "^25.0.0"
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^26.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^26.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "^26.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^26.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^26.0.0",
+    "@ckeditor/ckeditor5-core": "^26.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^24.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^26.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^26.0.0",
+    "@ckeditor/ckeditor5-engine": "^26.0.0",
+    "@ckeditor/ckeditor5-enter": "^26.0.0",
+    "@ckeditor/ckeditor5-heading": "^26.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^26.0.0",
+    "@ckeditor/ckeditor5-indent": "^26.0.0",
+    "@ckeditor/ckeditor5-link": "^26.0.0",
+    "@ckeditor/ckeditor5-list": "^26.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^26.0.0",
+    "@ckeditor/ckeditor5-table": "^26.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^26.0.0",
+    "@ckeditor/ckeditor5-typing": "^26.0.0",
+    "@ckeditor/ckeditor5-undo": "^26.0.0",
+    "@ckeditor/ckeditor5-upload": "^26.0.0",
+    "@ckeditor/ckeditor5-utils": "^26.0.0",
+    "@ckeditor/ckeditor5-widget": "^26.0.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   },
@@ -55,4 +62,8 @@ "engines": {
     "src",
-    "theme"
-  ]
+    "theme",
+    "build"
+  ],
+  "scripts": {
+    "dll:build": "webpack"
+  }
 }

src/autoimage.js

@@ -10,8 +10,8 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import LiveRange from '@ckeditor/ckeditor5-engine/src/model/liverange';
-import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { Plugin } from 'ckeditor5/src/core';
+import { Clipboard } from 'ckeditor5/src/clipboard';
+import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
+import { Undo } from 'ckeditor5/src/undo';
+import { global } from 'ckeditor5/src/utils';
+
 import { insertImage } from './image/utils';
@@ -21,3 +21,3 @@
 const IMAGE_URL_REGEXP = new RegExp( String( /^(http(s)?:\/\/)?[\w-]+(\.[\w-]+)+[\w._~:/?#[\]@!$&'()*+,;=%-]+/.source +
-	/\.(jpg|jpeg|png|gif|ico|JPG|JPEG|PNG|GIF|ICO)\??[\w._~:/#[\]@!$&'()*+,;=%-]*$/.source ) );
+	/\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)\??[\w._~:/#[\]@!$&'()*+,;=%-]*$/.source ) );
 
@@ -147,3 +147,3 @@ /**
 			// Condition must be checked after timeout - pasting may take place on an element, replacing it. The final position matters.
-			const imageCommand = editor.commands.get( 'imageInsert' );
+			const imageCommand = editor.commands.get( 'insertImage' );
 
@@ -150,0 +150,0 @@ if ( !imageCommand.isEnabled ) {

src/image.js

@@ -10,6 +10,8 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageEditing from '../src/image/imageediting';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { Plugin } from 'ckeditor5/src/core';
+import { Widget } from 'ckeditor5/src/widget';
+
+import ImageEditing from './image/imageediting';
 import ImageTextAlternative from './imagetextalternative';
+import { isImageWidget } from './image/utils';
 
@@ -47,2 +49,12 @@ import '../theme/image.css';
 	}
+
+	/**
+	 * Checks if a given view element is an image widget.
+	 *
+	 * @param {module:engine/view/element~Element} viewElement
+	 * @returns {Boolean}
+	 */
+	isImageWidget( viewElement ) {
+		return isImageWidget( viewElement );
+	}
 }
@@ -49,0 +61,0 @@

src/image/converters.js

@@ -10,3 +10,3 @@ /**
 
-import first from '@ckeditor/ckeditor5-utils/src/first';
+import { first } from 'ckeditor5/src/utils';
 import { getViewImgFromWidget } from './utils';
@@ -13,0 +13,0 @@

src/image/imageediting.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageLoadObserver from './imageloadobserver';
@@ -22,3 +22,3 @@
 
-import ImageInsertCommand from './imageinsertcommand';
+import InsertImageCommand from './insertimagecommand';
 
@@ -32,3 +32,4 @@ /**
  * * converters for editing and data pipelines.
- * * `'imageInsert'` command.
+ * * `'insertImage'` command.
+ * * `'imageInsert'` command as an alias for `insertImage` command.
  *
@@ -119,3 +120,7 @@ * @extends module:core/plugin~Plugin
 
-		editor.commands.add( 'imageInsert', new ImageInsertCommand( editor ) );
+		const insertImageCommand = new InsertImageCommand( editor );
+
+		// Register `insertImage` command and add `imageInsert` command as an alias for backward compatibility.
+		editor.commands.add( 'insertImage', insertImageCommand );
+		editor.commands.add( 'imageInsert', insertImageCommand );
 	}
@@ -122,0 +127,0 @@ }

src/image/imageloadobserver.js

@@ -10,3 +10,3 @@ /**
 
-import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer';
+import { Observer } from 'ckeditor5/src/engine';
 
@@ -13,0 +13,0 @@ /**

src/image/ui/utils.js

@@ -10,3 +10,3 @@ /**
 
-import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
+import { BalloonPanelView } from 'ckeditor5/src/ui';
 import { getSelectedImageWidget } from '../utils';
@@ -13,0 +13,0 @@

src/image/utils.js

@@ -10,3 +10,3 @@ /**
 
-import { findOptimalInsertionPosition, isWidget, toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import { findOptimalInsertionPosition, checkSelectionOnObject, isWidget, toWidget } from 'ckeditor5/src/widget';
 
@@ -146,11 +146,2 @@ /**
 
-// Check if selection is on object.
-//
-// @returns {Boolean}
-function checkSelectionOnObject( selection, schema ) {
-	const selectedElement = selection.getSelectedElement();
-
-	return selectedElement && schema.isObject( selectedElement );
-}
-
 // Checks if selection is placed in other image (ie. in caption).
@@ -157,0 +148,0 @@ function isInOtherImage( selection ) {

src/imagecaption.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageCaptionEditing from './imagecaption/imagecaptionediting';
@@ -13,0 +13,0 @@

src/imagecaption/imagecaptionediting.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import { isImage } from '../image/utils';
@@ -13,0 +13,0 @@ import { captionElementCreator, getCaptionFromImage, matchImageCaption } from './utils';

src/imagecaption/utils.js

@@ -10,4 +10,4 @@ /**
 
-import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
-import { toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
+import { toWidgetEditable } from 'ckeditor5/src/widget';
 
@@ -14,0 +14,0 @@ /**

src/imageinsert.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageUpload from './imageupload';
@@ -59,3 +59,3 @@ import ImageInsertUI from './imageinsert/imageinsertui';
  * 					insert: {
- *						... // settings for "imageInsert" view goes here
+ *						... // settings for "insertImage" view goes here
  * 					}
@@ -62,0 +62,0 @@ * 				}

src/imageinsert/imageinsertui.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageInsertPanelView from './ui/imageinsertpanelview';
@@ -23,3 +23,4 @@ import { prepareIntegrations } from './utils';
  *
- * Adds the `'imageInsert'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
+ * Adds the `'insertImage'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageInsert` dropdown as an alias for backward compatibility.
  *
@@ -41,6 +42,9 @@ * @extends module:core/plugin~Plugin
 		const editor = this.editor;
+		const componentCreator = locale => {
+			return this._createDropdownView( locale );
+		};
 
-		editor.ui.componentFactory.add( 'imageInsert', locale => {
-			return this._createDropdownView( locale );
-		} );
+		// Register `insertImage` dropdown and add `imageInsert` dropdown as an alias for backward compatibility.
+		editor.ui.componentFactory.add( 'insertImage', componentCreator );
+		editor.ui.componentFactory.add( 'imageInsert', componentCreator );
 	}
@@ -59,3 +63,3 @@
 		const imageInsertView = new ImageInsertPanelView( locale, prepareIntegrations( editor ) );
-		const command = editor.commands.get( 'imageUpload' );
+		const command = editor.commands.get( 'uploadImage' );
 
@@ -65,4 +69,4 @@ const dropdownView = imageInsertView.dropdownView;
 
-		splitButtonView.actionView = editor.ui.componentFactory.create( 'imageUpload' );
-		// After we replaced action button with `imageUpload` component,
+		splitButtonView.actionView = editor.ui.componentFactory.create( 'uploadImage' );
+		// After we replaced action button with `uploadImage` component,
 		// we have lost a proper styling and some minor visual quirks have appeared.
@@ -85,3 +89,3 @@ // Brining back original split button classes helps fix the button styling
 	 * @param {module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView} imageInsertView An imageInsertView.
-	 * @param {module:core/command~Command} command An imageInsert command
+	 * @param {module:core/command~Command} command An insertImage command
 	 *
@@ -149,3 +153,3 @@ * @private
 			} else {
-				editor.execute( 'imageInsert', { source: imageInsertView.imageURLInputValue } );
+				editor.execute( 'insertImage', { source: imageInsertView.imageURLInputValue } );
 			}
@@ -152,0 +156,0 @@ }

src/imageinsert/ui/imageinsertformrowview.js

@@ -10,3 +10,3 @@ /**
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
+import { View } from 'ckeditor5/src/ui';
 
@@ -13,0 +13,0 @@ import '../../../theme/imageinsertformrowview.css';

src/imageinsert/ui/imageinsertpanelview.js

@@ -10,20 +10,8 @@ /**
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
+import { icons } from 'ckeditor5/src/core';
+import { ButtonView, View, SplitButtonView, ViewCollection, submitHandler, createDropdown, FocusCycler } from 'ckeditor5/src/ui';
+import { Collection, FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 import ImageInsertFormRowView from './imageinsertformrowview';
-import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-
-import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
-import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
-import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
-
 import '../../../theme/imageinsert.css';
@@ -245,3 +233,3 @@
 			label: t( 'Insert image' ),
-			icon: imageIcon,
+			icon: icons.image,
 			tooltip: true
@@ -277,3 +265,3 @@ } );
 			label: t( 'Insert' ),
-			icon: checkIcon,
+			icon: icons.check,
 			class: 'ck-button-save',
@@ -287,3 +275,3 @@ type: 'submit',
 			label: t( 'Cancel' ),
-			icon: cancelIcon,
+			icon: icons.cancel,
 			class: 'ck-button-cancel',
@@ -290,0 +278,0 @@ withText: true

src/imageinsert/utils.js

@@ -10,4 +10,3 @@ /**
 
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
+import { LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui';
 
@@ -14,0 +13,0 @@ /**

src/imageresize.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageResizeButtons from './imageresize/imageresizebuttons';
@@ -71,3 +71,3 @@ import ImageResizeEditing from './imageresize/imageresizeediting';
  * * value: An actual image width applied when a user clicks the mentioned button
- * ({@link module:image/imageresize/imageresizecommand~ImageResizeCommand} gets executed).
+ * ({@link module:image/imageresize/resizeimagecommand~ResizeImageCommand} gets executed).
  * The value property is combined with the {@link module:image/image~ImageConfig#resizeUnit `config.image.resizeUnit`} (`%` by default).
@@ -87,11 +87,11 @@ * For instance: `value: '50'` and `resizeUnit: '%'` will render as `'50%'` in the UI.
  *					resizeOptions: [ {
- *						name: 'imageResize:original',
+ *						name: 'resizeImage:original',
  *						value: null
  *					},
  *					{
- *						name: 'imageResize:50',
+ *						name: 'resizeImage:50',
  *						value: '50'
  *					},
  *					{
- *						name: 'imageResize:75',
+ *						name: 'resizeImage:75',
  *						value: '75'
@@ -107,3 +107,3 @@ *					} ]
  * With resize options defined, you can decide whether you want to display them as a dropdown or as standalone buttons.
- * For the dropdown, you need to pass only the `imageResize` token to the
+ * For the dropdown, you need to pass only the `resizeImage` token to the
 {@link module:image/image~ImageConfig#toolbar `config.image.toolbar`}. The dropdown contains all defined options by default:
@@ -116,14 +116,14 @@ *
  *					resizeOptions: [ {
- *						name: 'imageResize:original',
+ *						name: 'resizeImage:original',
  *						value: null
  *					},
  *					{
- *						name: 'imageResize:50',
+ *						name: 'resizeImage:50',
  *						value: '50'
  *					},
  *					{
- *						name: 'imageResize:75',
+ *						name: 'resizeImage:75',
  *						value: '75'
  *					} ],
- *					toolbar: [ 'imageResize', ... ],
+ *					toolbar: [ 'resizeImage', ... ],
  *				}
@@ -146,3 +146,3 @@ *			} )
  *					resizeOptions: [ {
- *						name: 'imageResize:original',
+ *						name: 'resizeImage:original',
  *						value: null,
@@ -152,3 +152,3 @@ *						icon: 'original'
  *					{
- *						name: 'imageResize:25',
+ *						name: 'resizeImage:25',
  *						value: '25',
@@ -158,3 +158,3 @@ *						icon: 'small'
  *					{
- *						name: 'imageResize:50',
+ *						name: 'resizeImage:50',
  *						value: '50',
@@ -164,7 +164,7 @@ *						icon: 'medium'
  *					{
- *						name: 'imageResize:75',
+ *						name: 'resizeImage:75',
  *						value: '75',
  *						icon: 'large'
  *					} ],
- *					toolbar: [ 'imageResize:25', 'imageResize:50', 'imageResize:75', 'imageResize:original', ... ],
+ *					toolbar: [ 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original', ... ],
  *				}
@@ -187,3 +187,3 @@ *			} )
  *					resizeOptions: [ {
- *						name: 'imageResize:original',
+ *						name: 'resizeImage:original',
  *						value: null,
@@ -194,3 +194,3 @@ *						label: 'Original size'
  *					{
- *						name: 'imageResize:50',
+ *						name: 'resizeImage:50',
  *						value: '50',
@@ -201,3 +201,3 @@ *						label: 'Medium size'
  *					{
- *						name: 'imageResize:75',
+ *						name: 'resizeImage:75',
  *						value: '75',
@@ -218,3 +218,3 @@ *						label: 'Large size'
  *			{
- *				name: 'imageResize:original',
+ *				name: 'resizeImage:original',
  *				value: null,
@@ -224,3 +224,3 @@ *				icon: 'original'
  *			{
- *				name: 'imageResize:25',
+ *				name: 'resizeImage:25',
  *				value: '25',
@@ -230,3 +230,3 @@ *				icon: 'small'
  *			{
- *				name: 'imageResize:50',
+ *				name: 'resizeImage:50',
  *				value: '50',
@@ -236,3 +236,3 @@ *				icon: 'medium'
  *			{
- *				name: 'imageResize:75',
+ *				name: 'resizeImage:75',
  *				value: '75',
@@ -239,0 +239,0 @@ *				icon: 'large'

src/imageresize/imageresizebuttons.js

@@ -10,23 +10,13 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { Plugin, icons } from 'ckeditor5/src/core';
+import { ButtonView, DropdownButtonView, Model, createDropdown, addListToDropdown } from 'ckeditor5/src/ui';
+import { CKEditorError, Collection } from 'ckeditor5/src/utils';
+
 import ImageResizeEditing from './imageresizeediting';
-import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import DropdownButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview';
 
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-
-import iconSmall from '@ckeditor/ckeditor5-core/theme/icons/object-size-small.svg';
-import iconMedium from '@ckeditor/ckeditor5-core/theme/icons/object-size-medium.svg';
-import iconLarge from '@ckeditor/ckeditor5-core/theme/icons/object-size-large.svg';
-import iconFull from '@ckeditor/ckeditor5-core/theme/icons/object-size-full.svg';
-
 const RESIZE_ICONS = {
-	small: iconSmall,
-	medium: iconMedium,
-	large: iconLarge,
-	original: iconFull
+	small: icons.objectSizeSmall,
+	medium: icons.objectSizeMedium,
+	large: icons.objectSizeLarge,
+	original: icons.objectSizeFull
 };
@@ -79,3 +69,3 @@
 		const options = editor.config.get( 'image.resizeOptions' );
-		const command = editor.commands.get( 'imageResize' );
+		const command = editor.commands.get( 'resizeImage' );
 
@@ -104,3 +94,3 @@ this.bind( 'isEnabled' ).to( command );
 			const button = new ButtonView( locale );
-			const command = editor.commands.get( 'imageResize' );
+			const command = editor.commands.get( 'resizeImage' );
 			const labelText = this._getOptionLabelValue( option, true );
@@ -139,3 +129,3 @@
 			this.listenTo( button, 'execute', () => {
-				editor.execute( 'imageResize', { width: optionValueWithUnit } );
+				editor.execute( 'resizeImage', { width: optionValueWithUnit } );
 			} );
@@ -159,5 +149,4 @@
 
-		// Register dropdown.
-		editor.ui.componentFactory.add( 'imageResize', locale => {
-			const command = editor.commands.get( 'imageResize' );
+		const componentCreator = locale => {
+			const command = editor.commands.get( 'resizeImage' );
 			const dropdownView = createDropdown( locale, DropdownButtonView );
@@ -169,3 +158,3 @@ const dropdownButton = dropdownView.buttonView;
 				commandValue: originalSizeOption.value,
-				icon: iconMedium,
+				icon: RESIZE_ICONS.medium,
 				isToggleable: true,
@@ -198,3 +187,7 @@ label: this._getOptionLabelValue( originalSizeOption ),
 			return dropdownView;
-		} );
+		};
+
+		// Register `resizeImage` dropdown and add `imageResize` dropdown as an alias for backward compatibility.
+		editor.ui.componentFactory.add( 'resizeImage', componentCreator );
+		editor.ui.componentFactory.add( 'imageResize', componentCreator );
 	}
@@ -236,3 +229,3 @@
 	 * @param {Array.<module:image/imageresize/imageresizebuttons~ImageResizeOption>} options The resize options.
-	 * @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command The resize image command.
+	 * @param {module:image/imageresize/resizeimagecommand~ResizeImageCommand} command The resize image command.
 	 * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} Dropdown item definitions.
@@ -248,3 +241,3 @@ */
 				model: new Model( {
-					commandName: 'imageResize',
+					commandName: 'resizeImage',
 					commandValue: optionValueWithUnit,
@@ -251,0 +244,0 @@ label: this._getOptionLabelValue( option ),

src/imageresize/imageresizeediting.js

@@ -10,4 +10,4 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageResizeCommand from './imageresizecommand';
+import { Plugin } from 'ckeditor5/src/core';
+import ResizeImageCommand from './resizeimagecommand';
 
@@ -39,3 +39,3 @@ /**
 			resizeOptions: [ {
-				name: 'imageResize:original',
+				name: 'resizeImage:original',
 				value: null,
@@ -45,3 +45,3 @@ icon: 'original'
 			{
-				name: 'imageResize:25',
+				name: 'resizeImage:25',
 				value: '25',
@@ -51,3 +51,3 @@ icon: 'small'
 			{
-				name: 'imageResize:50',
+				name: 'resizeImage:50',
 				value: '50',
@@ -57,3 +57,3 @@ icon: 'medium'
 			{
-				name: 'imageResize:75',
+				name: 'resizeImage:75',
 				value: '75',
@@ -70,3 +70,3 @@ icon: 'large'
 		const editor = this.editor;
-		const command = new ImageResizeCommand( editor );
+		const resizeImageCommand = new ResizeImageCommand( editor );
 
@@ -76,3 +76,5 @@ this._registerSchema();
 
-		editor.commands.add( 'imageResize', command );
+		// Register `resizeImage` command and add `imageResize` command as an alias for backward compatibility.
+		editor.commands.add( 'resizeImage', resizeImageCommand );
+		editor.commands.add( 'imageResize', resizeImageCommand );
 	}
@@ -79,0 +81,0 @@

src/imageresize/imageresizehandles.js

@@ -10,4 +10,5 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
+import { Plugin } from 'ckeditor5/src/core';
+import { WidgetResize } from 'ckeditor5/src/widget';
+
 import ImageLoadObserver from '../image/imageloadobserver';
@@ -42,3 +43,3 @@
 	init() {
-		const command = this.editor.commands.get( 'imageResize' );
+		const command = this.editor.commands.get( 'resizeImage' );
 		this.bind( 'isEnabled' ).to( command );
@@ -104,3 +105,3 @@
 					onCommit( newValue ) {
-						editor.execute( 'imageResize', { width: newValue } );
+						editor.execute( 'resizeImage', { width: newValue } );
 					}
@@ -107,0 +108,0 @@ } );

src/imagestyle.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageStyleEditing from './imagestyle/imagestyleediting';
@@ -79,5 +79,7 @@ import ImageStyleUI from './imagestyle/imagestyleui';
  *
- *		import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
- *		import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+ *		import { icons } from 'ckeditor5/src/core';
  *
+ *		const fullSizeIcon = icons.objectCenter';
+ *		const sideIcon = icons.objectRight';
+ *
  *		// ...
@@ -84,0 +86,0 @@ *

src/imagestyle/converters.js

@@ -6,3 +6,3 @@ /**
 
-import first from '@ckeditor/ckeditor5-utils/src/first';
+import { first } from 'ckeditor5/src/utils';
 
@@ -9,0 +9,0 @@ /**

src/imagestyle/imagestylecommand.js

@@ -10,3 +10,3 @@ /**
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
+import { Command } from 'ckeditor5/src/core';
 import { isImage } from '../image/utils';
@@ -13,0 +13,0 @@

src/imagestyle/imagestyleediting.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageStyleCommand from './imagestylecommand';
@@ -13,0 +13,0 @@ import { viewToModelStyleAttribute, modelToViewStyleAttribute } from './converters';

src/imagestyle/imagestyleui.js

@@ -10,4 +10,4 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
 
@@ -14,0 +14,0 @@ import { normalizeImageStyles } from './utils';

src/imagestyle/utils.js

@@ -10,7 +10,4 @@ /**
 
-import fullWidthIcon from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
-import leftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
-import centerIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
-import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
-import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from 'ckeditor5/src/utils';
+import { icons } from 'ckeditor5/src/core';
 
@@ -39,3 +36,3 @@ /**
 		title: 'Full size image',
-		icon: fullWidthIcon,
+		icon: icons.objectFullWidth,
 		isDefault: true
@@ -48,3 +45,3 @@ },
 		title: 'Side image',
-		icon: rightIcon,
+		icon: icons.objectRight,
 		className: 'image-style-side'
@@ -57,3 +54,3 @@ },
 		title: 'Left aligned image',
-		icon: leftIcon,
+		icon: icons.objectLeft,
 		className: 'image-style-align-left'
@@ -66,3 +63,3 @@ },
 		title: 'Centered image',
-		icon: centerIcon,
+		icon: icons.objectCenter,
 		className: 'image-style-align-center'
@@ -75,3 +72,3 @@ },
 		title: 'Right aligned image',
-		icon: rightIcon,
+		icon: icons.objectRight,
 		className: 'image-style-align-right'
@@ -90,6 +87,6 @@ }
 const defaultIcons = {
-	full: fullWidthIcon,
-	left: leftIcon,
-	right: rightIcon,
-	center: centerIcon
+	full: icons.objectFullWidth,
+	left: icons.objectLeft,
+	right: icons.objectRight,
+	center: icons.objectCenter
 };
@@ -96,0 +93,0 @@

src/imagetextalternative.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageTextAlternativeEditing from './imagetextalternative/imagetextalternativeediting';
@@ -13,0 +13,0 @@ import ImageTextAlternativeUI from './imagetextalternative/imagetextalternativeui';

src/imagetextalternative/imagetextalternativecommand.js

@@ -10,3 +10,3 @@ /**
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
+import { Command } from 'ckeditor5/src/core';
 import { isImage } from '../image/utils';
@@ -13,0 +13,0 @@

src/imagetextalternative/imagetextalternativeediting.js

@@ -11,3 +11,3 @@ /**
 import ImageTextAlternativeCommand from './imagetextalternativecommand';
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 
@@ -14,0 +14,0 @@ /**

src/imagetextalternative/imagetextalternativeui.js

@@ -10,8 +10,6 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
+import { Plugin, icons } from 'ckeditor5/src/core';
+import { ButtonView, ContextualBalloon, clickOutsideHandler } from 'ckeditor5/src/ui';
+
 import TextAlternativeFormView from './ui/textalternativeformview';
-import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
-import textAlternativeIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 import { repositionContextualBalloon, getBalloonPositionData } from '../image/ui/utils';
@@ -76,3 +74,3 @@ import { getSelectedImageWidget } from '../image/utils';
 				label: t( 'Change image text alternative' ),
-				icon: textAlternativeIcon,
+				icon: icons.lowVision,
 				tooltip: true
@@ -79,0 +77,0 @@ } );

src/imagetextalternative/ui/textalternativeformview.js

@@ -10,19 +10,19 @@ /**
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import {
+	ButtonView,
+	FocusCycler,
+	LabeledFieldView,
+	View,
+	ViewCollection,
+	createLabeledInputText,
+	injectCssTransitionDisabler,
+	submitHandler
+} from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import { icons } from 'ckeditor5/src/core';
 
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import '../../../theme/textalternativeform.css';
 
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
-import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
-
-import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-
-import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
-import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
-import '../../../theme/textalternativeform.css';
+// See: #8833.
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
@@ -72,3 +72,3 @@
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' );
+		this.saveButtonView = this._createButton( t( 'Save' ), icons.check, 'ck-button-save' );
 		this.saveButtonView.type = 'submit';
@@ -81,3 +81,3 @@
 		 */
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), icons.cancel, 'ck-button-cancel', 'cancel' );
 
@@ -84,0 +84,0 @@ /**

src/imagetoolbar.js

@@ -10,5 +10,6 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
+
 import { getSelectedImageWidget } from './image/utils';
-import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
 
@@ -15,0 +16,0 @@ /**

src/imageupload.js

@@ -10,3 +10,3 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5/src/core';
 import ImageUploadUI from './imageupload/imageuploadui';
@@ -13,0 +13,0 @@ import ImageUploadProgress from './imageupload/imageuploadprogress';

src/imageupload/imageuploadediting.js

@@ -10,10 +10,12 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
-import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
-import env from '@ckeditor/ckeditor5-utils/src/env';
+import { Plugin } from 'ckeditor5/src/core';
 
-import ImageUploadCommand from '../../src/imageupload/imageuploadcommand';
+import { UpcastWriter } from 'ckeditor5/src/engine';
+
+import { Notification } from 'ckeditor5/src/ui';
+import { Clipboard } from 'ckeditor5/src/clipboard';
+import { FileRepository } from 'ckeditor5/src/upload';
+import { env } from 'ckeditor5/src/utils';
+
+import UploadImageCommand from './uploadimagecommand';
 import { fetchLocalImage, isLocalImage } from '../../src/imageupload/utils';
@@ -24,3 +26,4 @@ import { createImageTypeRegExp } from './utils';
 /**
- * The editing part of the image upload feature. It registers the `'imageUpload'` command.
+ * The editing part of the image upload feature. It registers the `'uploadImage'` command
+ * and `imageUpload` command as an aliased name.
  *
@@ -71,5 +74,8 @@ * @extends module:core/plugin~Plugin
 
-		// Register imageUpload command.
-		editor.commands.add( 'imageUpload', new ImageUploadCommand( editor ) );
+		const uploadImageCommand = new UploadImageCommand( editor );
 
+		// Register `uploadImage` command and add `imageUpload` command as an alias for backward compatibility.
+		editor.commands.add( 'uploadImage', uploadImageCommand );
+		editor.commands.add( 'imageUpload', uploadImageCommand );
+
 		// Register upcast converter for uploadId.
@@ -116,3 +122,3 @@ conversion.for( 'upcast' )
 					editor.model.enqueueChange( 'default', () => {
-						editor.execute( 'imageUpload', { file: images } );
+						editor.execute( 'uploadImage', { file: images } );
 					} );
@@ -119,0 +125,0 @@ }

src/imageupload/imageuploadprogress.js

@@ -12,7 +12,8 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
-import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
+import { Plugin } from 'ckeditor5/src/core';
+import { FileRepository } from 'ckeditor5/src/upload';
 import { getViewImgFromWidget } from '../image/utils';
 
+import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
+
 import '../../theme/imageuploadprogress.css';
@@ -32,2 +33,9 @@ import '../../theme/imageuploadicon.css';
 	 */
+	static get pluginName() {
+		return 'ImageUploadProgress';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
 	constructor( editor ) {
@@ -34,0 +42,0 @@ super( editor );

src/imageupload/imageuploadui.js

@@ -10,8 +10,6 @@ /**
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
+import { Plugin, icons } from 'ckeditor5/src/core';
+import { FileDialogButtonView } from 'ckeditor5/src/upload';
 import { createImageTypeRegExp } from './utils';
 
-import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
-
 /**
@@ -22,3 +20,4 @@ * The image upload button plugin.
  *
- * Adds the `'imageUpload'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
+ * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageUpload` button as an alias for backward compatibility.
  *
@@ -41,7 +40,5 @@ * @extends module:core/plugin~Plugin
 		const t = editor.t;
-
-		// Setup `imageUpload` button.
-		editor.ui.componentFactory.add( 'imageUpload', locale => {
+		const componentCreator = locale => {
 			const view = new FileDialogButtonView( locale );
-			const command = editor.commands.get( 'imageUpload' );
+			const command = editor.commands.get( 'uploadImage' );
 			const imageTypes = editor.config.get( 'image.upload.types' );
@@ -57,3 +54,3 @@ const imageTypesRegExp = createImageTypeRegExp( imageTypes );
 				label: t( 'Insert image' ),
-				icon: imageIcon,
+				icon: icons.image,
 				tooltip: true
@@ -68,3 +65,3 @@ } );
 				if ( imagesToUpload.length ) {
-					editor.execute( 'imageUpload', { file: imagesToUpload } );
+					editor.execute( 'uploadImage', { file: imagesToUpload } );
 				}
@@ -74,4 +71,8 @@ } );
 			return view;
-		} );
+		};
+
+		// Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
+		editor.ui.componentFactory.add( 'uploadImage', componentCreator );
+		editor.ui.componentFactory.add( 'imageUpload', componentCreator );
 	}
 }

src/imageupload/utils.js

@@ -12,3 +12,3 @@ /**
 
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { global } from 'ckeditor5/src/utils';
 
@@ -15,0 +15,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

673931

increased by74.62%

Dependency count

2

decreased by-75%

Number of package files

113

increased by2.73%

Lines of code

4740

increased by1.52%

Worsened metrics

Dev dependency count

26

increased by85.71%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedckeditor5@^26.0.0

• + Added@ckeditor/ckeditor5-clipboard@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-core@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-enter@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-paragraph@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-select-all@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-typing@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-ui@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-undo@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-upload@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@26.0.0(transitive)

• + Added@ckeditor/ckeditor5-widget@26.0.0(transitive)

• + Addedckeditor5@26.0.0(transitive)

• - Removed@ckeditor/ckeditor5-clipboard@^25.0.0

• - Removed@ckeditor/ckeditor5-core@^25.0.0

• - Removed@ckeditor/ckeditor5-engine@^25.0.0

• - Removed@ckeditor/ckeditor5-undo@^25.0.0

• - Removed@ckeditor/ckeditor5-upload@^25.0.0

• - Removed@ckeditor/ckeditor5-utils@^25.0.0

• - Removed@ckeditor/ckeditor5-widget@^25.0.0

• - Removed@ckeditor/ckeditor5-clipboard@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-typing@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-undo@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-upload@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@25.0.0(transitive)

• - Removed@ckeditor/ckeditor5-widget@25.0.0(transitive)

• Updated@ckeditor/ckeditor5-ui@^26.0.0