@ckeditor/ckeditor5-image 40.1.0 → 41.0.0

package/src/imageinsert/ui/imageinserturlview.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @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
+ */
+import { ButtonView, View, FocusCycler, LabeledFieldView, type InputTextView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+/**
+ * The insert an image via URL view.
+ *
+ * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ */
+export default class ImageInsertUrlView extends View {
+    /**
+     * The URL input field view.
+     */
+    urlInputView: LabeledFieldView<InputTextView>;
+    /**
+     * The "insert/update" button view.
+     */
+    insertButtonView: ButtonView;
+    /**
+     * The "cancel" button view.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * The value of the URL input.
+     *
+     * @observable
+     */
+    imageURLInputValue: string;
+    /**
+     * Observable property used to alter labels while some image is selected and when it is not.
+     *
+     * @observable
+     */
+    isImageSelected: boolean;
+    /**
+     * Observable property indicating whether the form interactive elements should be enabled.
+     *
+     * @observable
+     */
+    isEnabled: boolean;
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    readonly focusCycler: FocusCycler;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    private readonly _focusables;
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates the {@link #urlInputView}.
+     */
+    private _createUrlInputView;
+    /**
+     * Creates the {@link #insertButtonView}.
+     */
+    private _createInsertButton;
+    /**
+     * Creates the {@link #cancelButtonView}.
+     */
+    private _createCancelButton;
+    /**
+     * Focuses the view.
+     */
+    focus(direction: 1 | -1): void;
+}
+/**
+ * Fired when the form view is submitted.
+ *
+ * @eventName ~ImageInsertUrlView#submit
+ */
+export type ImageInsertUrlViewSubmitEvent = {
+    name: 'submit';
+    args: [];
+};
+/**
+ * Fired when the form view is canceled.
+ *
+ * @eventName ~ImageInsertUrlView#cancel
+ */
+export type ImageInsertUrlViewCancelEvent = {
+    name: 'cancel';
+    args: [];
+};

package/src/imageinsert/ui/imageinserturlview.js

@@ -0,0 +1,156 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imageinsert/ui/imageinserturlview
+ */
+import { icons } from 'ckeditor5/src/core.js';
+import { ButtonView, View, ViewCollection, FocusCycler, LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
+/**
+ * The insert an image via URL view.
+ *
+ * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ */
+export default class ImageInsertUrlView extends View {
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.set('imageURLInputValue', '');
+        this.set('isImageSelected', false);
+        this.set('isEnabled', true);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this._focusables = new ViewCollection();
+        this.focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
+        });
+        this.urlInputView = this._createUrlInputView();
+        this.insertButtonView = this._createInsertButton();
+        this.cancelButtonView = this._createCancelButton();
+        this._focusables.addMany([
+            this.urlInputView,
+            this.insertButtonView,
+            this.cancelButtonView
+        ]);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-image-insert-url'
+                ]
+            },
+            children: [
+                this.urlInputView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-image-insert-url__action-row'
+                        ]
+                    },
+                    children: [
+                        this.insertButtonView,
+                        this.cancelButtonView
+                    ]
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        for (const view of this._focusables) {
+            this.focusTracker.add(view.element);
+        }
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Creates the {@link #urlInputView}.
+     */
+    _createUrlInputView() {
+        const locale = this.locale;
+        const t = locale.t;
+        const urlInputView = new LabeledFieldView(locale, createLabeledInputText);
+        urlInputView.bind('label').to(this, 'isImageSelected', value => value ? t('Update image URL') : t('Insert image via URL'));
+        urlInputView.bind('isEnabled').to(this);
+        urlInputView.fieldView.placeholder = 'https://example.com/image.png';
+        urlInputView.fieldView.bind('value').to(this, 'imageURLInputValue', (value) => value || '');
+        urlInputView.fieldView.on('input', () => {
+            this.imageURLInputValue = urlInputView.fieldView.element.value.trim();
+        });
+        return urlInputView;
+    }
+    /**
+     * Creates the {@link #insertButtonView}.
+     */
+    _createInsertButton() {
+        const locale = this.locale;
+        const t = locale.t;
+        const insertButtonView = new ButtonView(locale);
+        insertButtonView.set({
+            icon: icons.check,
+            class: 'ck-button-save',
+            type: 'submit',
+            withText: true
+        });
+        insertButtonView.bind('label').to(this, 'isImageSelected', value => value ? t('Update') : t('Insert'));
+        insertButtonView.bind('isEnabled').to(this, 'imageURLInputValue', this, 'isEnabled', (...values) => values.every(value => value));
+        insertButtonView.delegate('execute').to(this, 'submit');
+        return insertButtonView;
+    }
+    /**
+     * Creates the {@link #cancelButtonView}.
+     */
+    _createCancelButton() {
+        const locale = this.locale;
+        const t = locale.t;
+        const cancelButtonView = new ButtonView(locale);
+        cancelButtonView.set({
+            label: t('Cancel'),
+            icon: icons.cancel,
+            class: 'ck-button-cancel',
+            withText: true
+        });
+        cancelButtonView.bind('isEnabled').to(this);
+        cancelButtonView.delegate('execute').to(this, 'cancel');
+        return cancelButtonView;
+    }
+    /**
+     * Focuses the view.
+     */
+    focus(direction) {
+        if (direction === -1) {
+            this.focusCycler.focusLast();
+        }
+        else {
+            this.focusCycler.focusFirst();
+        }
+    }
+}

package/src/imageinsert.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageinsert
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUpload from './imageupload';
-import ImageInsertViaUrl from './imageinsertviaurl';
-import ImageInsertUI from './imageinsert/imageinsertui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUpload from './imageupload.js';
+import ImageInsertViaUrl from './imageinsertviaurl.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
 /**
  * The image insert plugin.
  *

package/src/imageinsert.js

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageinsert
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUpload from './imageupload';
-import ImageInsertViaUrl from './imageinsertviaurl';
-import ImageInsertUI from './imageinsert/imageinsertui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUpload from './imageupload.js';
+import ImageInsertViaUrl from './imageinsertviaurl.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
 /**
  * The image insert plugin.
  *

package/src/imageinsertviaurl.d.ts

@@ -1,12 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageinsertviaurl
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageInsertUI from './imageinsert/imageinsertui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui.js';
 /**
  * The image insert via URL plugin.
  *
@@ -26,5 +27,5 @@ export default class ImageInsertViaUrl extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageInsertUI];
+    static get requires(): readonly [typeof ImageInsertViaUrlUI, typeof ImageInsertUI];
 }

package/src/imageinsertviaurl.js

@@ -1,12 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageinsertviaurl
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageInsertUI from './imageinsert/imageinsertui';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui.js';
 /**
  * The image insert via URL plugin.
  *
@@ -29,6 +30,6 @@ export default class ImageInsertViaUrl extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageInsertUI];
+        return [ImageInsertViaUrlUI, ImageInsertUI];
     }
 }

package/src/imageresize/imageresizebuttons.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize/imageresizebuttons
  */
-import { Plugin, type Editor } from 'ckeditor5/src/core';
-import ImageResizeEditing from './imageresizeediting';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import ImageResizeEditing from './imageresizeediting.js';
 /**
  * The image resize buttons plugin.
  *

package/src/imageresize/imageresizebuttons.js

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize/imageresizebuttons
  */
-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 { Plugin, icons } from 'ckeditor5/src/core.js';
+import { ButtonView, DropdownButtonView, ViewModel, createDropdown, addListToDropdown } from 'ckeditor5/src/ui.js';
+import { CKEditorError, Collection } from 'ckeditor5/src/utils.js';
+import ImageResizeEditing from './imageresizeediting.js';
 const RESIZE_ICONS = {
     small: icons.objectSizeSmall,
     medium: icons.objectSizeMedium,
@@ -188,7 +188,7 @@ export default class ImageResizeButtons extends Plugin {
             const optionValueWithUnit = option.value ? option.value + this._resizeUnit : null;
             const definition = {
                 type: 'button',
-                model: new Model({
+                model: new ViewModel({
                     commandName: 'resizeImage',
                     commandValue: optionValueWithUnit,
                     label: this._getOptionLabelValue(option),

package/src/imageresize/imageresizeediting.d.ts

@@ -1,9 +1,9 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { type Editor, Plugin } from 'ckeditor5/src/core';
-import ImageUtils from '../imageutils';
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
 /**
  * The image resize editing feature.
  *

package/src/imageresize/imageresizeediting.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUtils from '../imageutils';
-import ResizeImageCommand from './resizeimagecommand';
-import { widthAndHeightStylesAreBothSet } from '../image/utils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+import ResizeImageCommand from './resizeimagecommand.js';
+import { widthAndHeightStylesAreBothSet } from '../image/utils.js';
 /**
  * The image resize editing feature.
  *

package/src/imageresize/imageresizehandles.d.ts

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { WidgetResize } from 'ckeditor5/src/widget';
-import ImageUtils from '../imageutils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetResize } from 'ckeditor5/src/widget.js';
+import ImageUtils from '../imageutils.js';
 /**
  * The image resize by handles feature.
  *

package/src/imageresize/imageresizehandles.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { WidgetResize } from 'ckeditor5/src/widget';
-import ImageUtils from '../imageutils';
-import ImageLoadObserver from '../image/imageloadobserver';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetResize } from 'ckeditor5/src/widget.js';
+import ImageUtils from '../imageutils.js';
+import ImageLoadObserver from '../image/imageloadobserver.js';
 const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' +
     'figure.image.ck-widget > picture > img,' +
     'figure.image.ck-widget > a > img,' +

package/src/imageresize/resizeimagecommand.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize/resizeimagecommand
  */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 /**
  * The resize image command. Currently, it only supports the width attribute.
  */

package/src/imageresize/resizeimagecommand.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize/resizeimagecommand
  */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 /**
  * The resize image command. Currently, it only supports the width attribute.
  */

package/src/imageresize.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageResizeButtons from './imageresize/imageresizebuttons';
-import ImageResizeEditing from './imageresize/imageresizeediting';
-import ImageResizeHandles from './imageresize/imageresizehandles';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageResizeButtons from './imageresize/imageresizebuttons.js';
+import ImageResizeEditing from './imageresize/imageresizeediting.js';
+import ImageResizeHandles from './imageresize/imageresizehandles.js';
 import '../theme/imageresize.css';
 /**
  * The image resize plugin.

package/src/imageresize.js

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imageresize
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageResizeButtons from './imageresize/imageresizebuttons';
-import ImageResizeEditing from './imageresize/imageresizeediting';
-import ImageResizeHandles from './imageresize/imageresizehandles';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageResizeButtons from './imageresize/imageresizebuttons.js';
+import ImageResizeEditing from './imageresize/imageresizeediting.js';
+import ImageResizeHandles from './imageresize/imageresizehandles.js';
 import '../theme/imageresize.css';
 /**
  * The image resize plugin.

package/src/imagesizeattributes.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imagesizeattributes
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUtils from './imageutils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from './imageutils.js';
 /**
  * This plugin enables `width` and `height` attributes in inline and block image elements.
  */

package/src/imagesizeattributes.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imagesizeattributes
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUtils from './imageutils';
-import { widthAndHeightStylesAreBothSet, getSizeValueIfInPx } from './image/utils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from './imageutils.js';
+import { widthAndHeightStylesAreBothSet, getSizeValueIfInPx } from './image/utils.js';
 /**
  * This plugin enables `width` and `height` attributes in inline and block image elements.
  */

package/src/imagestyle/converters.d.ts

@@ -1,10 +1,10 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import type { DowncastAttributeEvent, UpcastElementEvent } from 'ckeditor5/src/engine';
-import { type GetCallback } from 'ckeditor5/src/utils';
-import type { ImageStyleOptionDefinition } from '../imageconfig';
+import type { DowncastAttributeEvent, UpcastElementEvent } from 'ckeditor5/src/engine.js';
+import { type GetCallback } from 'ckeditor5/src/utils.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
 /**
  * @module image/imagestyle/converters
  */

package/src/imagestyle/converters.js

@@ -1,8 +1,8 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { first } from 'ckeditor5/src/utils';
+import { first } from 'ckeditor5/src/utils.js';
 /**
  * @module image/imagestyle/converters
  */

package/src/imagestyle/imagestylecommand.d.ts

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imagestyle/imagestylecommand
  */
-import type { Element } from 'ckeditor5/src/engine';
-import { Command, type Editor } from 'ckeditor5/src/core';
-import type { ImageStyleOptionDefinition } from '../imageconfig';
+import type { Element } from 'ckeditor5/src/engine.js';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
 /**
  * The image style command. It is used to apply {@link module:image/imageconfig~ImageStyleConfig#options image style option}
  * to a selected image.

package/src/imagestyle/imagestylecommand.js

@@ -1,8 +1,8 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 /**
  * The image style command. It is used to apply {@link module:image/imageconfig~ImageStyleConfig#options image style option}
  * to a selected image.

package/src/imagestyle/imagestyleediting.d.ts

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
  * @module image/imagestyle/imagestyleediting
  */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageUtils from '../imageutils';
-import type { ImageStyleOptionDefinition } from '../imageconfig';
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
 /**
  * The image style engine plugin. It sets the default configuration, creates converters and registers
  * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.