@ckeditor/ckeditor5-image 45.2.1-alpha.9 → 46.0.0-alpha.0

package/dist/index.js

@@ -4,12 +4,12 @@
  */
 import { Plugin, Command } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { Clipboard, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
-import { LivePosition, LiveRange, Observer, UpcastWriter, enablePlaceholder, Element } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { ModelLivePosition, ModelLiveRange, Observer, ViewUpcastWriter, enableViewPlaceholder, ModelElement } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
 import { first, DomEmitterMixin, global, FocusTracker, KeystrokeHandler, logWarning, toArray, env, CKEditorError, Collection, Rect } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { toWidget, isWidget, findOptimalInsertionRange, Widget, toWidgetEditable, WidgetResize, calculateResizeHostAncestorWidth, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { View, FormRowView, ViewCollection, FocusCycler, submitHandler, ButtonView, FormHeaderView, LabeledFieldView, createLabeledInputText, BalloonPanelView, ContextualBalloon, CssTransitionDisablerMixin, clickOutsideHandler, CollapsibleView, SplitButtonView, createDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, FileDialogButtonView, MenuBarMenuListItemFileDialogButtonView, Notification, Dialog, MenuBarMenuListItemButtonView, ViewModel, DropdownButtonView, addListToDropdown, createLabeledInputNumber, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { View, FormRowView, ViewCollection, FocusCycler, submitHandler, ButtonView, FormHeaderView, LabeledFieldView, createLabeledInputText, BalloonPanelView, ContextualBalloon, CssTransitionDisablerMixin, clickOutsideHandler, CollapsibleView, SplitButtonView, createDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, FileDialogButtonView, MenuBarMenuListItemFileDialogButtonView, Notification, Dialog, MenuBarMenuListItemButtonView, UIModel, DropdownButtonView, addListToDropdown, createLabeledInputNumber, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { IconPreviousArrow, IconTextAlternative, IconImage, IconCaption, IconImageUpload, IconImageUrl, IconObjectSizeFull, IconObjectSizeCustom, IconObjectSizeLarge, IconObjectSizeMedium, IconObjectSizeSmall, IconObjectInline, IconObjectInlineRight, IconObjectInlineLeft, IconObjectCenter, IconObjectRight, IconObjectLeft, IconObjectFullWidth } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { FileRepository } from '@ckeditor/ckeditor5-upload/dist/index.js';
 import { isObject, identity } from 'es-toolkit/compat';
@@ -111,6 +111,8 @@ import { isObject, identity } from 'es-toolkit/compat';
 }
 /**
  * Returns parsed value of the size, but only if it contains unit: px.
+ *
+ * @internal
  */ function getSizeValueIfInPx(size) {
     if (size && size.endsWith('px')) {
         return parseInt(size);
@@ -123,6 +125,8 @@ import { isObject, identity } from 'es-toolkit/compat';
  * If both image styles: width & height are set, they will override the image width & height attributes in the
  * browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles.
  * That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.
+ *
+ * @internal
  */ function widthAndHeightStylesAreBothSet(viewElement) {
     const widthStyle = getSizeValueIfInPx(viewElement.getStyle('width'));
     const heightStyle = getSizeValueIfInPx(viewElement.getStyle('height'));
@@ -176,7 +180,7 @@ const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
 	 * ```
 	 *
 	 * @param attributes Attributes of the inserted image.
-	 * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~Schema}.
+	 * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~ModelSchema}.
 	 * @param selectable Place to insert the image. If not specified,
 	 * the {@link module:widget/utils~findOptimalInsertionRange} logic will be applied for the block images
 	 * and `model.document.selection` for the inline images.
@@ -297,8 +301,8 @@ const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
         return isImageAllowedInParent(this.editor, selection) && isNotInsideImage(selection);
     }
     /**
-	 * 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
+	 * Converts a given {@link module:engine/view/element~ViewElement} to an image widget:
+	 * * Adds a {@link module:engine/view/element~ViewElement#_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.
 	 *
@@ -465,9 +469,9 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         // into an image.
         this.listenTo(clipboardPipeline, 'inputTransformation', ()=>{
             const firstRange = modelDocument.selection.getFirstRange();
-            const leftLivePosition = LivePosition.fromPosition(firstRange.start);
+            const leftLivePosition = ModelLivePosition.fromPosition(firstRange.start);
             leftLivePosition.stickiness = 'toPrevious';
-            const rightLivePosition = LivePosition.fromPosition(firstRange.end);
+            const rightLivePosition = ModelLivePosition.fromPosition(firstRange.end);
             rightLivePosition.stickiness = 'toNext';
             modelDocument.once('change:data', ()=>{
                 this._embedImageBetweenPositions(leftLivePosition, rightLivePosition);
@@ -496,8 +500,8 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 	 * @param rightPosition Right position of the selection.
 	 */ _embedImageBetweenPositions(leftPosition, rightPosition) {
         const editor = this.editor;
-        // TODO: Use a marker instead of LiveRange & LivePositions.
-        const urlRange = new LiveRange(leftPosition, rightPosition);
+        // TODO: Use a marker instead of ModelLiveRange & LivePositions.
+        const urlRange = new ModelLiveRange(leftPosition, rightPosition);
         const walker = urlRange.getWalker({
             ignoreElementEnd: true
         });
@@ -516,7 +520,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             return;
         }
         // Position will not be available in the `setTimeout` function so let's clone it.
-        this._positionToInsert = LivePosition.fromPosition(leftPosition);
+        this._positionToInsert = ModelLivePosition.fromPosition(leftPosition);
         // This action mustn't be executed if undo was called between pasting and auto-embedding.
         this._timeoutId = setTimeout(()=>{
             // Do nothing if image element cannot be inserted at the current position.
@@ -614,6 +618,8 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 
 /**
  * The TextAlternativeFormView class.
+ *
+ * @internal
  */ class TextAlternativeFormView extends View {
     /**
 	 * Tracks information about the DOM focus in the form.
@@ -778,6 +784,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
  * with respect to the image in the editor content, if one is selected.
  *
  * @param editor The editor instance.
+ * @internal
  */ function repositionContextualBalloon(editor) {
     const balloon = editor.plugins.get('ContextualBalloon');
     const imageUtils = editor.plugins.get('ImageUtils');
@@ -792,6 +799,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
  * to the selected element in the editor content.
  *
  * @param editor The editor instance.
+ * @internal
  */ function getBalloonPositionData(editor) {
     const editingView = editor.editing.view;
     const defaultPositions = BalloonPanelView.defaultPositions;
@@ -1248,9 +1256,9 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 }
 
 /**
- * Observes all new images added to the {@link module:engine/view/document~Document},
- * fires {@link module:engine/view/document~Document#event:imageLoaded} and
- * {@link module:engine/view/document~Document#event:layoutChanged} event every time when the new image
+ * Observes all new images added to the {@link module:engine/view/document~ViewDocument},
+ * fires {@link module:engine/view/document~ViewDocument#event:imageLoaded} and
+ * {@link module:engine/view/document~ViewDocument#event:layoutChanged} event every time when the new image
  * has been loaded.
  *
  * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
@@ -1277,8 +1285,8 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         this.stopListening(domRoot);
     }
     /**
-	 * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
-	 * {@link module:engine/view/document~Document#event:imageLoaded}
+	 * Fires {@link module:engine/view/document~ViewDocument#event:layoutChanged} and
+	 * {@link module:engine/view/document~ViewDocument#event:imageLoaded}
 	 * if observer {@link #isEnabled is enabled}.
 	 *
 	 * @param domEvent The DOM event.
@@ -1558,8 +1566,9 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     /**
 	 * Registers the `width` and `height` attributes for inline and block images.
 	 */ _registerSchema() {
+        const schema = this.editor.model.schema;
         if (this.editor.plugins.has('ImageBlockEditing')) {
-            this.editor.model.schema.extend('imageBlock', {
+            schema.extend('imageBlock', {
                 allowAttributes: [
                     'width',
                     'height'
@@ -1567,7 +1576,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             });
         }
         if (this.editor.plugins.has('ImageInlineEditing')) {
-            this.editor.model.schema.extend('imageInline', {
+            schema.extend('imageInline', {
                 allowAttributes: [
                     'width',
                     'height'
@@ -1986,7 +1995,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             // Convert inline images into block images only when the currently selected block is empty
             // (e.g. an empty paragraph) or some object is selected (to replace it).
             if (determineImageTypeForInsertionAtSelection(model.schema, selection) === 'imageBlock') {
-                const writer = new UpcastWriter(editingView.document);
+                const writer = new ViewUpcastWriter(editingView.document);
                 // Wrap <img ... /> -> <figure class="image"><img .../></figure>
                 const blockViewImages = docFragmentChildren.map((inlineViewImage)=>writer.createElement('figure', {
                         class: 'image'
@@ -2014,6 +2023,8 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
  * The view displayed in the insert image dropdown.
  *
  * See {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+ *
+ * @internal
  */ class ImageInsertFormView extends View {
     /**
 	 * Tracks information about DOM focus in the form.
@@ -2457,7 +2468,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             // Convert block images into inline images only when pasting or dropping into non-empty blocks
             // and when the block is not an object (e.g. pasting to replace another widget).
             if (determineImageTypeForInsertionAtSelection(model.schema, selection) === 'imageInline') {
-                const writer = new UpcastWriter(editingView.document);
+                const writer = new ViewUpcastWriter(editingView.document);
                 // Unwrap <figure class="image"><img .../></figure> -> <img ... />
                 // but <figure class="image"><img .../><figcaption>...</figcaption></figure> -> stays the same
                 const inlineViewImages = docFragmentChildren.map((blockViewImage)=>{
@@ -2837,7 +2848,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                 const figcaptionElement = writer.createEditableElement('figcaption');
                 writer.setCustomProperty('imageCaption', true, figcaptionElement);
                 figcaptionElement.placeholder = t('Enter image caption');
-                enablePlaceholder({
+                enableViewPlaceholder({
                     view,
                     element: figcaptionElement,
                     keepOnFocus: true
@@ -2908,7 +2919,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         }
     }
     /**
-	 * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
+	 * Returns the saved {@link module:engine/model/element~ModelElement#toJSON JSONified} caption
 	 * of an image model element.
 	 *
 	 * See {@link #_saveCaption}.
@@ -2918,10 +2929,10 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 	 * @returns The model caption element or `null` if there is none.
 	 */ _getSavedCaption(imageModelElement) {
         const jsonObject = this._savedCaptionsMap.get(imageModelElement);
-        return jsonObject ? Element.fromJSON(jsonObject) : null;
+        return jsonObject ? ModelElement.fromJSON(jsonObject) : null;
     }
     /**
-	 * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
+	 * Saves a {@link module:engine/model/element~ModelElement#toJSON JSONified} caption for
 	 * an image element to allow restoring it in the future.
 	 *
 	 * A caption is saved every time it gets hidden and/or the type of an image changes. The
@@ -3065,6 +3076,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 /**
  * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
  *
+ * @internal
  * @param image Image whose source to fetch.
  * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
  * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
@@ -3094,6 +3106,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
  * Checks whether a given node is an image element with a local source (Base64 or blob).
  *
  * @param node The node to check.
+ * @internal
  */ function isLocalImage(imageUtils, node) {
     if (!imageUtils.isInlineImageView(node) || !node.getAttribute('src')) {
         return false;
@@ -3423,7 +3436,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     }, 3000);
 }
 /**
- * Create progress bar element using {@link module:engine/view/uielement~UIElement}.
+ * Create progress bar element using {@link module:engine/view/uielement~ViewUIElement}.
  */ function _createProgressBar(writer) {
     const progressBar = writer.createUIElement('div', {
         class: 'ck-progress-bar'
@@ -3432,7 +3445,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     return progressBar;
 }
 /**
- * Create placeholder element using {@link module:engine/view/uielement~UIElement}.
+ * Create placeholder element using {@link module:engine/view/uielement~ViewUIElement}.
  */ function _createPlaceholder(writer) {
     const placeholder = writer.createUIElement('div', {
         class: 'ck-upload-placeholder-loader'
@@ -3441,7 +3454,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     return placeholder;
 }
 /**
- * Returns {@link module:engine/view/uielement~UIElement} of given unique property from image figure element.
+ * Returns {@link module:engine/view/uielement~ViewUIElement} of given unique property from image figure element.
  * Returns `undefined` if element is not found.
  */ function _getUIElement(imageFigure, uniqueProperty) {
     for (const child of imageFigure.getChildren()){
@@ -3451,7 +3464,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     }
 }
 /**
- * Removes {@link module:engine/view/uielement~UIElement} of given unique property from image figure element.
+ * Removes {@link module:engine/view/uielement~ViewUIElement} of given unique property from image figure element.
  */ function _removeUIElement(viewFigure, writer, uniqueProperty) {
     const element = _getUIElement(viewFigure, uniqueProperty);
     if (element) {
@@ -3572,7 +3585,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
  * and the `imageUpload` command as an aliased name.
  *
  * When an image is uploaded, it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete`} event
- * that allows adding custom attributes to the {@link module:engine/model/element~Element image element}.
+ * that allows adding custom attributes to the {@link module:engine/model/element~ModelElement image element}.
  */ class ImageUploadEditing extends Plugin {
     /**
 	 * @inheritDoc
@@ -3688,7 +3701,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         this.listenTo(editor.editing.view.document, 'clipboardInput', (evt, data)=>{
             // Skip if non empty HTML data is included.
             // https://github.com/ckeditor/ckeditor5-upload/issues/68
-            if (isHtmlIncluded(data.dataTransfer)) {
+            if (isHtmlInDataTransfer(data.dataTransfer)) {
                 return;
             }
             const images = Array.from(data.dataTransfer.files).filter((file)=>{
@@ -3734,7 +3747,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             if (!fetchableImages.length) {
                 return;
             }
-            const writer = new UpcastWriter(editor.editing.view.document);
+            const writer = new ViewUpcastWriter(editor.editing.view.document);
             for (const fetchableImage of fetchableImages){
                 // Set attribute marking that the image was processed already.
                 writer.setAttribute('uploadProcessed', true, fetchableImage.imageElement);
@@ -4045,7 +4058,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 }
 /**
  * Returns `true` if non-empty `text/html` is included in the data transfer.
- */ function isHtmlIncluded(dataTransfer) {
+ */ function isHtmlInDataTransfer(dataTransfer) {
     return Array.from(dataTransfer.types).includes('text/html') && dataTransfer.getData('text/html') !== '';
 }
 function getImagesFromChangeItem(editor, item) {
@@ -4089,6 +4102,8 @@ function getImagesFromChangeItem(editor, item) {
  * The insert an image via URL view.
  *
  * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ *
+ * @internal
  */ class ImageInsertUrlView extends View {
     /**
 	 * The URL input field view.
@@ -4521,21 +4536,34 @@ function getImagesFromChangeItem(editor, item) {
         this._registerSchema();
     }
     _registerSchema() {
+        const schema = this.editor.model.schema;
         if (this.editor.plugins.has('ImageBlockEditing')) {
-            this.editor.model.schema.extend('imageBlock', {
+            schema.extend('imageBlock', {
                 allowAttributes: [
                     'resizedWidth',
                     'resizedHeight'
                 ]
             });
+            schema.setAttributeProperties('resizedWidth', {
+                isFormatting: true
+            });
+            schema.setAttributeProperties('resizedHeight', {
+                isFormatting: true
+            });
         }
         if (this.editor.plugins.has('ImageInlineEditing')) {
-            this.editor.model.schema.extend('imageInline', {
+            schema.extend('imageInline', {
                 allowAttributes: [
                     'resizedWidth',
                     'resizedHeight'
                 ]
             });
+            schema.setAttributeProperties('resizedWidth', {
+                isFormatting: true
+            });
+            schema.setAttributeProperties('resizedHeight', {
+                isFormatting: true
+            });
         }
     }
     /**
@@ -4847,7 +4875,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
                 const customResizeUI = editor.plugins.get('ImageCustomResizeUI');
                 definition = {
                     type: 'button',
-                    model: new ViewModel({
+                    model: new UIModel({
                         label: this._getOptionLabelValue(option),
                         role: 'menuitemradio',
                         withText: true,
@@ -4862,7 +4890,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
             } else {
                 definition = {
                     type: 'button',
-                    model: new ViewModel({
+                    model: new UIModel({
                         commandName: 'resizeImage',
                         commandValue: option.valueWithUnits,
                         label: this._getOptionLabelValue(option),
@@ -5025,6 +5053,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 
  * @param dimension Unsafe string with dimension.
  * @returns Parsed dimension with extracted numeric value and units.
+ * @internal
  */ function tryParseDimensionWithUnit(dimension) {
     if (!dimension) {
         return null;
@@ -5045,6 +5074,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * @param parentDimensionPx	Dimension of parent element that contains measured element.
  * @param dimension Measured element dimension.
  * @returns Casted dimension.
+ * @internal
  */ function tryCastDimensionsToUnit(parentDimensionPx, dimension, targetUnit) {
     // "%" -> "px" conversion
     if (targetUnit === 'px') {
@@ -5069,6 +5099,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * Finds model, view and DOM element for selected image element. Returns `null` if there is no image selected.
  *
  * @param editor Editor instance.
+ * @internal
  */ function getSelectedImageEditorNodes(editor) {
     const { editing } = editor;
     const imageUtils = editor.plugins.get('ImageUtils');
@@ -5095,6 +5126,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * @param editor Editor instance.
  * @param targetUnit Unit in which dimension will be returned.
  * @returns Parsed image width after resize (with unit).
+ * @internal
  */ function getSelectedImageWidthInUnits(editor, targetUnit) {
     const imageNodes = getSelectedImageEditorNodes(editor);
     if (!imageNodes) {
@@ -5116,6 +5148,8 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 
 /**
  * The ImageCustomResizeFormView class.
+ *
+ * @internal
  */ class ImageCustomResizeFormView extends View {
     /**
 	 * Tracks information about the DOM focus in the form.
@@ -5346,6 +5380,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * @param editor Editor instance.
  * @param targetUnit Unit in which dimension will be returned.
  * @returns Possible resize range in numeric form.
+ * @internal
  */ function getSelectedImagePossibleResizeRange(editor, targetUnit) {
     const imageNodes = getSelectedImageEditorNodes(editor);
     if (!imageNodes) {
@@ -5671,6 +5706,8 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * * **`'inline'`** is an inline image without any CSS class,
  * * **`'block'`** is a block image without any CSS class,
  * * **`'side'`** is a block image styled with the `image-style-side` CSS class.
+ *
+ * @internal
  */ const DEFAULT_OPTIONS = {
     // This style represents an image placed in the line of text.
     get inline () {
@@ -5778,6 +5815,8 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
  *
  * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
+ *
+ * @internal
  */ const DEFAULT_ICONS = /* #__PURE__ */ (()=>({
         full: IconObjectFullWidth,
         left: IconObjectLeft,
@@ -5797,6 +5836,8 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  * those that wraps the text around the image,
  * * **`'imageStyle:breakText'`**, which contains the `alignBlockLeft`, `alignCenter` and `alignBlockRight` options, that is,
  * those that breaks the text around the image.
+ *
+ * @internal
  */ const DEFAULT_DROPDOWN_DEFINITIONS = [
     {
         name: 'imageStyle:wrapText',
@@ -5994,14 +6035,11 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 	 * @param {object} info The information about the invalid definition.
 	 */ logWarning('image-style-configuration-definition-invalid', info);
 }
-var utils = {
+const utils = {
     normalizeStyles,
     getDefaultStylesConfiguration,
     getDefaultDropdownDefinitions,
-    warnInvalidStyle,
-    DEFAULT_OPTIONS,
-    DEFAULT_ICONS,
-    DEFAULT_DROPDOWN_DEFINITIONS
+    warnInvalidStyle
 };
 
 /**
@@ -6011,6 +6049,7 @@ var utils = {
  *
  * @param styles An array containing available image style options.
  * @returns A model-to-view attribute converter.
+ * @internal
  */ function modelToViewStyleAttribute(styles) {
     return (evt, data, conversionApi)=>{
         if (!conversionApi.consumable.consume(data.item, evt.name)) {
@@ -6034,6 +6073,7 @@ var utils = {
  *
  * @param styles Image style options for which the converter is created.
  * @returns A view-to-model converter.
+ * @internal
  */ function viewToModelStyleAttribute(styles) {
     // Convert only non–default styles.
     const nonDefaultStyles = {
@@ -6112,12 +6152,11 @@ var utils = {
     /**
 	 * @inheritDoc
 	 */ init() {
-        const { normalizeStyles, getDefaultStylesConfiguration } = utils;
         const editor = this.editor;
         const isBlockPluginLoaded = editor.plugins.has('ImageBlockEditing');
         const isInlinePluginLoaded = editor.plugins.has('ImageInlineEditing');
-        editor.config.define('image.styles', getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded));
-        this.normalizedStyles = normalizeStyles({
+        editor.config.define('image.styles', utils.getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded));
+        this.normalizedStyles = utils.normalizeStyles({
             configuredStyles: editor.config.get('image.styles'),
             isBlockPluginLoaded,
             isInlinePluginLoaded
@@ -6144,6 +6183,9 @@ var utils = {
             schema.extend('imageBlock', {
                 allowAttributes: 'imageStyle'
             });
+            schema.setAttributeProperties('imageStyle', {
+                isFormatting: true
+            });
             // Converter for figure element from view to model.
             editor.data.upcastDispatcher.on('element:figure', viewToModelConverter, {
                 priority: 'low'
@@ -6153,6 +6195,9 @@ var utils = {
             schema.extend('imageInline', {
                 allowAttributes: 'imageStyle'
             });
+            schema.setAttributeProperties('imageStyle', {
+                isFormatting: true
+            });
             // Converter for the img element from view to model.
             editor.data.upcastDispatcher.on('element:img', viewToModelConverter, {
                 priority: 'low'
@@ -6583,5 +6628,5 @@ var utils = {
     }
 }
 
-export { AutoImage, Image, ImageBlock, ImageBlockEditing, ImageCaption, ImageCaptionEditing, ImageCaptionUI, ImageCaptionUtils, ImageCustomResizeUI, ImageEditing, ImageInline, ImageInsert, ImageInsertUI, ImageInsertViaUrl, ImageResize, ImageResizeButtons, ImageResizeEditing, ImageResizeHandles, ImageSizeAttributes, ImageStyle, ImageStyleEditing, ImageStyleUI, ImageTextAlternative, ImageTextAlternativeEditing, ImageTextAlternativeUI, ImageToolbar, ImageUpload, ImageUploadEditing, ImageUploadProgress, ImageUploadUI, ImageUtils, PictureEditing, createImageTypeRegExp };
+export { AutoImage, Image, ImageBlock, ImageBlockEditing, ImageCaption, ImageCaptionEditing, ImageCaptionUI, ImageCaptionUtils, ImageCustomResizeUI, ImageEditing, ImageInline, ImageInlineEditing, ImageInsert, ImageInsertUI, ImageInsertViaUrl, ImageInsertViaUrlUI, ImageLoadObserver, ImagePlaceholder, ImageResize, ImageResizeButtons, ImageResizeEditing, ImageResizeHandles, ImageSizeAttributes, ImageStyle, ImageStyleCommand, ImageStyleEditing, ImageStyleUI, ImageTextAlternative, ImageTextAlternativeCommand, ImageTextAlternativeEditing, ImageTextAlternativeUI, ImageToolbar, ImageTypeCommand, ImageUpload, ImageUploadEditing, ImageUploadProgress, ImageUploadUI, ImageUtils, InsertImageCommand, PictureEditing, ReplaceImageSourceCommand, ResizeImageCommand, ToggleImageCaptionCommand, UploadImageCommand, DEFAULT_DROPDOWN_DEFINITIONS as _IMAGE_DEFAULT_DROPDOWN_DEFINITIONS, DEFAULT_ICONS as _IMAGE_DEFAULT_ICONS, DEFAULT_OPTIONS as _IMAGE_DEFAULT_OPTIONS, ImageCustomResizeFormView as _ImageCustomResizeFormView, ImageInsertFormView as _ImageInsertFormView, ImageInsertUrlView as _ImageInsertUrlView, utils as _ImageStyleUtils, TextAlternativeFormView as _ImageTextAlternativeFormView, widthAndHeightStylesAreBothSet as _checkIfImageWidthAndHeightStylesAreBothSet, createBlockImageViewElement as _createBlockImageViewElement, createInlineImageViewElement as _createInlineImageViewElement, determineImageTypeForInsertionAtSelection as _determineImageTypeForInsertionAtSelection, downcastImageAttribute as _downcastImageAttribute, downcastSourcesAttribute as _downcastImageSourcesAttribute, downcastSrcsetAttribute as _downcastImageSrcsetAttribute, fetchLocalImage as _fetchLocalImage, getBalloonPositionData as _getImageBalloonPositionData, getSizeValueIfInPx as _getImageSizeValueIfInPx, getImgViewElementMatcher as _getImageViewElementMatcher, getSelectedImageEditorNodes as _getSelectedImageEditorNodes, getSelectedImagePossibleResizeRange as _getSelectedImagePossibleResizeRange, getSelectedImageWidthInUnits as _getSelectedImageWidthInUnits, isLocalImage as _isLocalImage, modelToViewStyleAttribute as _modelToViewImageStyleAttribute, repositionContextualBalloon as _repositionImageContextualBalloon, tryCastDimensionsToUnit as _tryCastImageDimensionsToUnit, tryParseDimensionWithUnit as _tryParseImageDimensionWithUnit, upcastImageFigure as _upcastImageFigure, upcastPicture as _upcastImagePicture, viewToModelStyleAttribute as _viewToModelImageStyleAttribute, createImageTypeRegExp, isHtmlInDataTransfer };
 //# sourceMappingURL=index.js.map