@ckeditor/ckeditor5-image 38.0.1 → 38.1.1

package/src/image/replaceimagesourcecommand.d.ts

@@ -1,34 +1,34 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-/**
- * @module image/image/replaceimagesourcecommand
- */
-/**
- * Replace image source command.
- *
- * Changes image source to the one provided. Can be executed as follows:
- *
- * ```ts
- * editor.execute( 'replaceImageSource', { source: 'http://url.to.the/image' } );
- * ```
- */
-export default class ReplaceImageSourceCommand extends Command {
-    value: string | null;
-    /**
-     * @inheritDoc
-     */
-    refresh(): void;
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.source The image source to replace.
-     */
-    execute(options: {
-        source: string;
-    }): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+/**
+ * @module image/image/replaceimagesourcecommand
+ */
+/**
+ * Replace image source command.
+ *
+ * Changes image source to the one provided. Can be executed as follows:
+ *
+ * ```ts
+ * editor.execute( 'replaceImageSource', { source: 'http://url.to.the/image' } );
+ * ```
+ */
+export default class ReplaceImageSourceCommand extends Command {
+    value: string | null;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.source The image source to replace.
+     */
+    execute(options: {
+        source: string;
+    }): void;
+}

package/src/image/replaceimagesourcecommand.js

@@ -1,44 +1,44 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-/**
- * @module image/image/replaceimagesourcecommand
- */
-/**
- * Replace image source command.
- *
- * Changes image source to the one provided. Can be executed as follows:
- *
- * ```ts
- * editor.execute( 'replaceImageSource', { source: 'http://url.to.the/image' } );
- * ```
- */
-export default class ReplaceImageSourceCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const element = this.editor.model.document.selection.getSelectedElement();
-        this.isEnabled = imageUtils.isImage(element);
-        this.value = this.isEnabled ? element.getAttribute('src') : null;
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.source The image source to replace.
-     */
-    execute(options) {
-        const image = this.editor.model.document.selection.getSelectedElement();
-        this.editor.model.change(writer => {
-            writer.setAttribute('src', options.source, image);
-            writer.removeAttribute('srcset', image);
-            writer.removeAttribute('sizes', image);
-        });
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+/**
+ * @module image/image/replaceimagesourcecommand
+ */
+/**
+ * Replace image source command.
+ *
+ * Changes image source to the one provided. Can be executed as follows:
+ *
+ * ```ts
+ * editor.execute( 'replaceImageSource', { source: 'http://url.to.the/image' } );
+ * ```
+ */
+export default class ReplaceImageSourceCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const element = this.editor.model.document.selection.getSelectedElement();
+        this.isEnabled = imageUtils.isImage(element);
+        this.value = this.isEnabled ? element.getAttribute('src') : null;
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.source The image source to replace.
+     */
+    execute(options) {
+        const image = this.editor.model.document.selection.getSelectedElement();
+        this.editor.model.change(writer => {
+            writer.setAttribute('src', options.source, image);
+            writer.removeAttribute('srcset', image);
+            writer.removeAttribute('sizes', image);
+        });
+    }
+}

package/src/image/ui/utils.d.ts

@@ -1,25 +1,25 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module image/image/ui/utils
- */
-import type { PositionOptions } from 'ckeditor5/src/utils';
-import type { Editor } from 'ckeditor5/src/core';
-/**
- * A helper utility that positions the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
- * with respect to the image in the editor content, if one is selected.
- *
- * @param editor The editor instance.
- */
-export declare function repositionContextualBalloon(editor: Editor): void;
-/**
- * Returns the positioning options that control the geometry of the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
- * to the selected element in the editor content.
- *
- * @param editor The editor instance.
- */
-export declare function getBalloonPositionData(editor: Editor): Partial<PositionOptions>;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/image/ui/utils
+ */
+import type { PositionOptions } from 'ckeditor5/src/utils';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * A helper utility that positions the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
+ * with respect to the image in the editor content, if one is selected.
+ *
+ * @param editor The editor instance.
+ */
+export declare function repositionContextualBalloon(editor: Editor): void;
+/**
+ * Returns the positioning options that control the geometry of the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
+ * to the selected element in the editor content.
+ *
+ * @param editor The editor instance.
+ */
+export declare function getBalloonPositionData(editor: Editor): Partial<PositionOptions>;

package/src/image/ui/utils.js

@@ -1,44 +1,44 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { BalloonPanelView } from 'ckeditor5/src/ui';
-/**
- * A helper utility that positions the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
- * with respect to the image in the editor content, if one is selected.
- *
- * @param editor The editor instance.
- */
-export function repositionContextualBalloon(editor) {
-    const balloon = editor.plugins.get('ContextualBalloon');
-    const imageUtils = editor.plugins.get('ImageUtils');
-    if (imageUtils.getClosestSelectedImageWidget(editor.editing.view.document.selection)) {
-        const position = getBalloonPositionData(editor);
-        balloon.updatePosition(position);
-    }
-}
-/**
- * Returns the positioning options that control the geometry of the
- * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
- * to the selected element in the editor content.
- *
- * @param editor The editor instance.
- */
-export function getBalloonPositionData(editor) {
-    const editingView = editor.editing.view;
-    const defaultPositions = BalloonPanelView.defaultPositions;
-    const imageUtils = editor.plugins.get('ImageUtils');
-    return {
-        target: editingView.domConverter.mapViewToDom(imageUtils.getClosestSelectedImageWidget(editingView.document.selection)),
-        positions: [
-            defaultPositions.northArrowSouth,
-            defaultPositions.northArrowSouthWest,
-            defaultPositions.northArrowSouthEast,
-            defaultPositions.southArrowNorth,
-            defaultPositions.southArrowNorthWest,
-            defaultPositions.southArrowNorthEast,
-            defaultPositions.viewportStickyNorth
-        ]
-    };
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { BalloonPanelView } from 'ckeditor5/src/ui';
+/**
+ * A helper utility that positions the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
+ * with respect to the image in the editor content, if one is selected.
+ *
+ * @param editor The editor instance.
+ */
+export function repositionContextualBalloon(editor) {
+    const balloon = editor.plugins.get('ContextualBalloon');
+    const imageUtils = editor.plugins.get('ImageUtils');
+    if (imageUtils.getClosestSelectedImageWidget(editor.editing.view.document.selection)) {
+        const position = getBalloonPositionData(editor);
+        balloon.updatePosition(position);
+    }
+}
+/**
+ * Returns the positioning options that control the geometry of the
+ * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
+ * to the selected element in the editor content.
+ *
+ * @param editor The editor instance.
+ */
+export function getBalloonPositionData(editor) {
+    const editingView = editor.editing.view;
+    const defaultPositions = BalloonPanelView.defaultPositions;
+    const imageUtils = editor.plugins.get('ImageUtils');
+    return {
+        target: editingView.domConverter.mapViewToDom(imageUtils.getClosestSelectedImageWidget(editingView.document.selection)),
+        positions: [
+            defaultPositions.northArrowSouth,
+            defaultPositions.northArrowSouthWest,
+            defaultPositions.northArrowSouthEast,
+            defaultPositions.southArrowNorth,
+            defaultPositions.southArrowNorthWest,
+            defaultPositions.southArrowNorthEast,
+            defaultPositions.viewportStickyNorth
+        ]
+    };
+}

package/src/image/utils.d.ts

@@ -1,52 +1,52 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module image/image/utils
- */
-import type { DocumentSelection, MatcherPattern, Schema, Selection, ViewContainerElement, DowncastWriter } from 'ckeditor5/src/engine';
-import type { Editor } from 'ckeditor5/src/core';
-/**
- * Creates a view element representing the inline image.
- *
- * ```html
- * <span class="image-inline"><img></img></span>
- * ```
- *
- * Note that `alt` and `src` attributes are converted separately, so they are not included.
- *
- * @internal
- */
-export declare function createInlineImageViewElement(writer: DowncastWriter): ViewContainerElement;
-/**
- * Creates a view element representing the block image.
- *
- * ```html
- * <figure class="image"><img></img></figure>
- * ```
- *
- * Note that `alt` and `src` attributes are converted separately, so they are not included.
- *
- * @internal
- */
-export declare function createBlockImageViewElement(writer: DowncastWriter): ViewContainerElement;
-/**
- * A function returning a `MatcherPattern` for a particular type of View images.
- *
- * @internal
- * @param matchImageType The type of created image.
- */
-export declare function getImgViewElementMatcher(editor: Editor, matchImageType: 'imageBlock' | 'imageInline'): MatcherPattern;
-/**
- * Considering the current model selection, it returns the name of the model image element
- * (`'imageBlock'` or `'imageInline'`) that will make most sense from the UX perspective if a new
- * image was inserted (also: uploaded, dropped, pasted) at that selection.
- *
- * The assumption is that inserting images into empty blocks or on other block widgets should
- * produce block images. Inline images should be inserted in other cases, e.g. in paragraphs
- * that already contain some text.
- *
- * @internal
- */
-export declare function determineImageTypeForInsertionAtSelection(schema: Schema, selection: Selection | DocumentSelection): 'imageBlock' | 'imageInline';
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/image/utils
+ */
+import type { DocumentSelection, MatcherPattern, Schema, Selection, ViewContainerElement, DowncastWriter } from 'ckeditor5/src/engine';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * Creates a view element representing the inline image.
+ *
+ * ```html
+ * <span class="image-inline"><img></img></span>
+ * ```
+ *
+ * Note that `alt` and `src` attributes are converted separately, so they are not included.
+ *
+ * @internal
+ */
+export declare function createInlineImageViewElement(writer: DowncastWriter): ViewContainerElement;
+/**
+ * Creates a view element representing the block image.
+ *
+ * ```html
+ * <figure class="image"><img></img></figure>
+ * ```
+ *
+ * Note that `alt` and `src` attributes are converted separately, so they are not included.
+ *
+ * @internal
+ */
+export declare function createBlockImageViewElement(writer: DowncastWriter): ViewContainerElement;
+/**
+ * A function returning a `MatcherPattern` for a particular type of View images.
+ *
+ * @internal
+ * @param matchImageType The type of created image.
+ */
+export declare function getImgViewElementMatcher(editor: Editor, matchImageType: 'imageBlock' | 'imageInline'): MatcherPattern;
+/**
+ * Considering the current model selection, it returns the name of the model image element
+ * (`'imageBlock'` or `'imageInline'`) that will make most sense from the UX perspective if a new
+ * image was inserted (also: uploaded, dropped, pasted) at that selection.
+ *
+ * The assumption is that inserting images into empty blocks or on other block widgets should
+ * produce block images. Inline images should be inserted in other cases, e.g. in paragraphs
+ * that already contain some text.
+ *
+ * @internal
+ */
+export declare function determineImageTypeForInsertionAtSelection(schema: Schema, selection: Selection | DocumentSelection): 'imageBlock' | 'imageInline';

package/src/image/utils.js

@@ -1,100 +1,100 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-/**
- * Creates a view element representing the inline image.
- *
- * ```html
- * <span class="image-inline"><img></img></span>
- * ```
- *
- * Note that `alt` and `src` attributes are converted separately, so they are not included.
- *
- * @internal
- */
-export function createInlineImageViewElement(writer) {
-    return writer.createContainerElement('span', { class: 'image-inline' }, writer.createEmptyElement('img'));
-}
-/**
- * Creates a view element representing the block image.
- *
- * ```html
- * <figure class="image"><img></img></figure>
- * ```
- *
- * Note that `alt` and `src` attributes are converted separately, so they are not included.
- *
- * @internal
- */
-export function createBlockImageViewElement(writer) {
-    return writer.createContainerElement('figure', { class: 'image' }, [
-        writer.createEmptyElement('img'),
-        writer.createSlot('children')
-    ]);
-}
-/**
- * A function returning a `MatcherPattern` for a particular type of View images.
- *
- * @internal
- * @param matchImageType The type of created image.
- */
-export function getImgViewElementMatcher(editor, matchImageType) {
-    const imageUtils = editor.plugins.get('ImageUtils');
-    const areBothImagePluginsLoaded = editor.plugins.has('ImageInlineEditing') && editor.plugins.has('ImageBlockEditing');
-    return element => {
-        // Check if the matched view element is an <img>.
-        if (!imageUtils.isInlineImageView(element)) {
-            return null;
-        }
-        // If just one of the plugins is loaded (block or inline), it will match all kinds of images.
-        if (!areBothImagePluginsLoaded) {
-            return getPositiveMatchPattern(element);
-        }
-        // The <img> can be standalone, wrapped in <figure>...</figure> (ImageBlock plugin) or
-        // wrapped in <figure><a>...</a></figure> (LinkImage plugin).
-        const imageType = element.getStyle('display') == 'block' || element.findAncestor(imageUtils.isBlockImageView) ?
-            'imageBlock' :
-            'imageInline';
-        if (imageType !== matchImageType) {
-            return null;
-        }
-        return getPositiveMatchPattern(element);
-    };
-    function getPositiveMatchPattern(element) {
-        const pattern = {
-            name: true
-        };
-        // This will trigger src consumption (See https://github.com/ckeditor/ckeditor5/issues/11530).
-        if (element.hasAttribute('src')) {
-            pattern.attributes = ['src'];
-        }
-        return pattern;
-    }
-}
-/**
- * Considering the current model selection, it returns the name of the model image element
- * (`'imageBlock'` or `'imageInline'`) that will make most sense from the UX perspective if a new
- * image was inserted (also: uploaded, dropped, pasted) at that selection.
- *
- * The assumption is that inserting images into empty blocks or on other block widgets should
- * produce block images. Inline images should be inserted in other cases, e.g. in paragraphs
- * that already contain some text.
- *
- * @internal
- */
-export function determineImageTypeForInsertionAtSelection(schema, selection) {
-    const firstBlock = first(selection.getSelectedBlocks());
-    // Insert a block image if the selection is not in/on block elements or it's on a block widget.
-    if (!firstBlock || schema.isObject(firstBlock)) {
-        return 'imageBlock';
-    }
-    // A block image should also be inserted into an empty block element
-    // (that is not an empty list item so the list won't get split).
-    if (firstBlock.isEmpty && firstBlock.name != 'listItem') {
-        return 'imageBlock';
-    }
-    // Otherwise insert an inline image.
-    return 'imageInline';
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+/**
+ * Creates a view element representing the inline image.
+ *
+ * ```html
+ * <span class="image-inline"><img></img></span>
+ * ```
+ *
+ * Note that `alt` and `src` attributes are converted separately, so they are not included.
+ *
+ * @internal
+ */
+export function createInlineImageViewElement(writer) {
+    return writer.createContainerElement('span', { class: 'image-inline' }, writer.createEmptyElement('img'));
+}
+/**
+ * Creates a view element representing the block image.
+ *
+ * ```html
+ * <figure class="image"><img></img></figure>
+ * ```
+ *
+ * Note that `alt` and `src` attributes are converted separately, so they are not included.
+ *
+ * @internal
+ */
+export function createBlockImageViewElement(writer) {
+    return writer.createContainerElement('figure', { class: 'image' }, [
+        writer.createEmptyElement('img'),
+        writer.createSlot('children')
+    ]);
+}
+/**
+ * A function returning a `MatcherPattern` for a particular type of View images.
+ *
+ * @internal
+ * @param matchImageType The type of created image.
+ */
+export function getImgViewElementMatcher(editor, matchImageType) {
+    const imageUtils = editor.plugins.get('ImageUtils');
+    const areBothImagePluginsLoaded = editor.plugins.has('ImageInlineEditing') && editor.plugins.has('ImageBlockEditing');
+    return element => {
+        // Check if the matched view element is an <img>.
+        if (!imageUtils.isInlineImageView(element)) {
+            return null;
+        }
+        // If just one of the plugins is loaded (block or inline), it will match all kinds of images.
+        if (!areBothImagePluginsLoaded) {
+            return getPositiveMatchPattern(element);
+        }
+        // The <img> can be standalone, wrapped in <figure>...</figure> (ImageBlock plugin) or
+        // wrapped in <figure><a>...</a></figure> (LinkImage plugin).
+        const imageType = element.getStyle('display') == 'block' || element.findAncestor(imageUtils.isBlockImageView) ?
+            'imageBlock' :
+            'imageInline';
+        if (imageType !== matchImageType) {
+            return null;
+        }
+        return getPositiveMatchPattern(element);
+    };
+    function getPositiveMatchPattern(element) {
+        const pattern = {
+            name: true
+        };
+        // This will trigger src consumption (See https://github.com/ckeditor/ckeditor5/issues/11530).
+        if (element.hasAttribute('src')) {
+            pattern.attributes = ['src'];
+        }
+        return pattern;
+    }
+}
+/**
+ * Considering the current model selection, it returns the name of the model image element
+ * (`'imageBlock'` or `'imageInline'`) that will make most sense from the UX perspective if a new
+ * image was inserted (also: uploaded, dropped, pasted) at that selection.
+ *
+ * The assumption is that inserting images into empty blocks or on other block widgets should
+ * produce block images. Inline images should be inserted in other cases, e.g. in paragraphs
+ * that already contain some text.
+ *
+ * @internal
+ */
+export function determineImageTypeForInsertionAtSelection(schema, selection) {
+    const firstBlock = first(selection.getSelectedBlocks());
+    // Insert a block image if the selection is not in/on block elements or it's on a block widget.
+    if (!firstBlock || schema.isObject(firstBlock)) {
+        return 'imageBlock';
+    }
+    // A block image should also be inserted into an empty block element
+    // (that is not an empty list item so the list won't get split).
+    if (firstBlock.isEmpty && firstBlock.name != 'listItem') {
+        return 'imageBlock';
+    }
+    // Otherwise insert an inline image.
+    return 'imageInline';
+}