@ckeditor/ckeditor5-image 44.1.0 → 44.2.0-alpha.0

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin, Command, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { Clipboard, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
@@ -1337,6 +1337,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 	 * @param options Options for the executed command.
 	 * @param options.imageType The type of the image to insert. If not specified, the type will be determined automatically.
 	 * @param options.source The image source or an array of image sources to insert.
+	 * @param options.breakBlock If set to `true`, the block at the selection start will be broken before inserting the image.
 	 * See the documentation of the command to learn more about accepted formats.
 	 */ execute(options) {
         const sourceDefinitions = toArray(options.source);
@@ -1366,6 +1367,11 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                     ...sourceDefinition,
                     ...selectionAttributes
                 }, position, options.imageType);
+            } else if (options.breakBlock) {
+                imageUtils.insertImage({
+                    ...sourceDefinition,
+                    ...selectionAttributes
+                }, selection.getFirstPosition(), options.imageType);
             } else {
                 imageUtils.insertImage({
                     ...sourceDefinition,
@@ -1594,14 +1600,14 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         });
         // Dedicated converters to propagate attributes to the <img> element.
         editor.conversion.for('editingDowncast').add((dispatcher)=>{
-            attachDowncastConverter(dispatcher, 'width', 'width', true);
-            attachDowncastConverter(dispatcher, 'height', 'height', true);
+            attachDowncastConverter(dispatcher, 'width', 'width', true, true);
+            attachDowncastConverter(dispatcher, 'height', 'height', true, true);
         });
         editor.conversion.for('dataDowncast').add((dispatcher)=>{
             attachDowncastConverter(dispatcher, 'width', 'width', false);
             attachDowncastConverter(dispatcher, 'height', 'height', false);
         });
-        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage) {
+        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage, isEditingDowncast = false) {
             dispatcher.on(`attribute:${modelAttributeName}:${imageType}`, (evt, data, conversionApi)=>{
                 if (!conversionApi.consumable.consume(data.item, evt.name)) {
                     return;
@@ -1625,8 +1631,12 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                 }
                 const width = data.item.getAttribute('width');
                 const height = data.item.getAttribute('height');
-                if (width && height) {
-                    viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
+                if (!width || !height) {
+                    return;
+                }
+                viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
+                if (isEditingDowncast) {
+                    viewWriter.setAttribute('loading', 'lazy', img);
                 }
             });
         }
@@ -2118,8 +2128,8 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     }
     /**
 	 * Registers the insert image dropdown integration.
-	 */ registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm = false }) {
-        if (this._integrations.has(name)) {
+	 */ registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm = false, override = false }) {
+        if (this._integrations.has(name) && !override) {
             /**
 			 * There are two insert-image integrations registered with the same name.
 			 *
@@ -2165,7 +2175,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         const observables = integrations.map(({ observable })=>typeof observable == 'function' ? observable() : observable);
         dropdownView.bind('isEnabled').toMany(observables, 'isEnabled', (...isEnabled)=>isEnabled.some((isEnabled)=>isEnabled));
         dropdownView.once('change:isOpen', ()=>{
-            const integrationViews = integrations.map(({ formViewCreator })=>formViewCreator(integrations.length == 1));
+            const integrationViews = integrations.flatMap(({ formViewCreator })=>formViewCreator(integrations.length == 1));
             const imageInsertFormView = new ImageInsertFormView(editor.locale, integrationViews);
             dropdownView.panelView.children.add(imageInsertFormView);
         });
@@ -2179,24 +2189,19 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         if (!integrations.length) {
             return null;
         }
-        let resultView;
-        const firstIntegration = integrations[0];
-        if (integrations.length == 1) {
-            resultView = firstIntegration.menuBarButtonViewCreator(true);
-        } else {
-            resultView = new MenuBarMenuView(locale);
-            const listView = new MenuBarMenuListView(locale);
-            resultView.panelView.children.add(listView);
-            resultView.buttonView.set({
-                icon: icons.image,
-                label: t('Image')
-            });
-            for (const integration of integrations){
-                const listItemView = new MenuBarMenuListItemView(locale, resultView);
-                const buttonView = integration.menuBarButtonViewCreator(false);
-                listItemView.children.add(buttonView);
-                listView.items.add(listItemView);
-            }
+        const integrationViews = integrations.flatMap(({ menuBarButtonViewCreator })=>menuBarButtonViewCreator(integrations.length == 1));
+        const resultView = new MenuBarMenuView(locale);
+        const listView = new MenuBarMenuListView(locale);
+        resultView.panelView.children.add(listView);
+        resultView.buttonView.set({
+            icon: icons.image,
+            label: t('Image')
+        });
+        for (const integrationView of integrationViews){
+            const listItemView = new MenuBarMenuListItemView(locale, resultView);
+            listItemView.children.add(integrationView);
+            listView.items.add(listItemView);
+            integrationView.delegate('execute').to(resultView);
         }
         return resultView;
     }
@@ -4062,12 +4067,13 @@ function getImagesFromChangeItem(editor, item) {
         this.keystrokes = new KeystrokeHandler();
         this.urlInputView = this._createUrlInputView();
         this.setTemplate({
-            tag: 'div',
+            tag: 'form',
             attributes: {
                 class: [
                     'ck',
                     'ck-image-insert-url'
-                ]
+                ],
+                tabindex: '-1'
             },
             children: [
                 this.urlInputView,
@@ -4087,6 +4093,9 @@ function getImagesFromChangeItem(editor, item) {
 	 * @inheritDoc
 	 */ render() {
         super.render();
+        submitHandler({
+            view: this
+        });
         // Start listening for the keystrokes coming from #element.
         this.keystrokes.listenTo(this.element);
     }
@@ -4946,7 +4955,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 }
 
 /**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */ /**
  * @module image/imageresize/utils/tryparsedimensionwithunit
@@ -4999,7 +5008,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 }
 
 /**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */ /**
  * @module image/imageresize/utils/getselectedimageeditornodes