@ckeditor/ckeditor5-image 45.0.0-alpha.9 → 45.1.0-alpha.0

package/dist/index.js

@@ -1635,6 +1635,20 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             attachDowncastConverter(dispatcher, 'width', 'width', false);
             attachDowncastConverter(dispatcher, 'height', 'height', false);
         });
+        // Consume `aspect-ratio` style if `width` and `height` attributes are set on the image.
+        editor.conversion.for('upcast').add((dispatcher)=>{
+            dispatcher.on('element:img', (evt, data, conversionApi)=>{
+                const width = data.viewItem.getAttribute('width');
+                const height = data.viewItem.getAttribute('height');
+                if (width && height) {
+                    conversionApi.consumable.consume(data.viewItem, {
+                        styles: [
+                            'aspect-ratio'
+                        ]
+                    });
+                }
+            });
+        });
         function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage, isEditingDowncast = false) {
             dispatcher.on(`attribute:${modelAttributeName}:${imageType}`, (evt, data, conversionApi)=>{
                 if (!conversionApi.consumable.consume(data.item, evt.name)) {
@@ -4606,6 +4620,15 @@ function getImagesFromChangeItem(editor, item) {
                 }
             }
         });
+        editor.conversion.for('upcast').add((dispatcher)=>{
+            dispatcher.on(`element:${imageType === 'imageBlock' ? 'figure' : 'img'}`, (evt, data, conversionApi)=>{
+                conversionApi.consumable.consume(data.viewItem, {
+                    classes: [
+                        'image_resized'
+                    ]
+                });
+            });
+        });
     }
 }
 
@@ -4663,7 +4686,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
     /**
 	 * A helper function that creates a standalone button component for the plugin.
 	 *
-	 * @param resizeOption A model of the resize option.
+	 * @param option A model of the resize option.
 	 */ _registerImageResizeButton(option) {
         const editor = this.editor;
         const { name, value, icon } = option;
@@ -4680,7 +4703,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
 				 * {@link module:image/imageconfig~ImageResizeOption plugin configuration}.
 				 *
 				 * @error imageresizebuttons-missing-icon
-				 * @param option Invalid image resize option.
+				 * @param {module:image/imageconfig~ImageResizeOption} option Invalid image resize option.
 				*/ throw new CKEditorError('imageresizebuttons-missing-icon', editor, option);
             }
             button.set({
@@ -5932,8 +5955,8 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 			 * are missing. Make sure these plugins are loaded in your editor to get this image style option working.
 			 *
 			 * @error image-style-missing-dependency
-			 * @param {String} [option] The name of the unsupported option.
-			 * @param {String} [missingPlugins] The names of the plugins one of which has to be loaded for the particular option.
+			 * @param {string} style The name of the unsupported option.
+			 * @param {Array.<string>} missingPlugins The names of the plugins one of which has to be loaded for the particular option.
 			 */ logWarning('image-style-missing-dependency', {
                 style: option,
                 missingPlugins: modelElements.map((name)=>name === 'imageBlock' ? 'ImageBlockEditing' : 'ImageInlineEditing')
@@ -5969,8 +5992,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 	 * * {@link module:image/imageconfig~ImageStyleDropdownDefinition image style dropdown definition}
 	 *
 	 * @error image-style-configuration-definition-invalid
-	 * @param {String} [dropdown] The name of the invalid drop-down
-	 * @param {String} [style] The name of the invalid image style option
+	 * @param {object} info The information about the invalid definition.
 	 */ logWarning('image-style-configuration-definition-invalid', info);
 }
 var utils = {