@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.0

package/src/image/insertimagecommand.js

@@ -1,125 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/image/insertimagecommand
- */
-import { Command } from 'ckeditor5/src/core.js';
-import { logWarning, toArray } from 'ckeditor5/src/utils.js';
-/**
- * Insert image command.
- *
- * The command is registered by the {@link module:image/image/imageediting~ImageEditing} plugin as `insertImage`
- * and it is also available via aliased `imageInsert` name.
- *
- * In order to insert an image at the current selection position
- * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
- * execute the command and specify the image source:
- *
- * ```ts
- * editor.execute( 'insertImage', { source: 'http://url.to.the/image' } );
- * ```
- *
- * It is also possible to insert multiple images at once:
- *
- * ```ts
- * editor.execute( 'insertImage', {
- * 	source:  [
- * 		'path/to/image.jpg',
- * 		'path/to/other-image.jpg'
- * 	]
- * } );
- * ```
- *
- * If you want to take the full control over the process, you can specify individual model attributes:
- *
- * ```ts
- * editor.execute( 'insertImage', {
- * 	source:  [
- * 		{ src: 'path/to/image.jpg', alt: 'First alt text' },
- * 		{ src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
- * 	]
- * } );
- * ```
- */
-export class InsertImageCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        const configImageInsertType = editor.config.get('image.insert.type');
-        if (!editor.plugins.has('ImageBlockEditing')) {
-            if (configImageInsertType === 'block') {
-                /**
-                 * The {@link module:image/imageblock~ImageBlock} plugin must be enabled to allow inserting block images. See
-                 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
-                 *
-                 * @error image-block-plugin-required
-                 */
-                logWarning('image-block-plugin-required');
-            }
-        }
-        if (!editor.plugins.has('ImageInlineEditing')) {
-            if (configImageInsertType === 'inline') {
-                /**
-                 * The {@link module:image/imageinline~ImageInline} plugin must be enabled to allow inserting inline images. See
-                 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
-                 *
-                 * @error image-inline-plugin-required
-                 */
-                logWarning('image-inline-plugin-required');
-            }
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        this.isEnabled = imageUtils.isImageAllowed();
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @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);
-        const selection = this.editor.model.document.selection;
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        // In case of multiple images, each image (starting from the 2nd) will be inserted at a position that
-        // follows the previous one. That will move the selection and, to stay on the safe side and make sure
-        // all images inherit the same selection attributes, they are collected beforehand.
-        //
-        // Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
-        // not split that link but preserves its continuity.
-        //
-        // Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
-        const selectionAttributes = Object.fromEntries(selection.getAttributes());
-        sourceDefinitions.forEach((sourceDefinition, index) => {
-            const selectedElement = selection.getSelectedElement();
-            if (typeof sourceDefinition === 'string') {
-                sourceDefinition = { src: sourceDefinition };
-            }
-            // Inserting of an inline image replace the selected element and make a selection on the inserted image.
-            // Therefore inserting multiple inline images requires creating position after each element.
-            if (index && selectedElement && imageUtils.isImage(selectedElement)) {
-                const position = this.editor.model.createPositionAfter(selectedElement);
-                imageUtils.insertImage({ ...sourceDefinition, ...selectionAttributes }, position, options.imageType);
-            }
-            else if (options.breakBlock) {
-                imageUtils.insertImage({ ...sourceDefinition, ...selectionAttributes }, selection.getFirstPosition(), options.imageType);
-            }
-            else {
-                imageUtils.insertImage({ ...sourceDefinition, ...selectionAttributes }, null, options.imageType);
-            }
-        });
-    }
-}

package/src/image/replaceimagesourcecommand.js

@@ -1,75 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { Command } from 'ckeditor5/src/core.js';
-/**
- * @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 class ReplaceImageSourceCommand extends Command {
-    constructor(editor) {
-        super(editor);
-        this.decorate('cleanupImage');
-    }
-    /**
-     * @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();
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        this.editor.model.change(writer => {
-            writer.setAttribute('src', options.source, image);
-            this.cleanupImage(writer, image);
-            imageUtils.setImageNaturalSizeAttributes(image);
-        });
-    }
-    /**
-     * Cleanup image attributes that are not relevant to the new source.
-     *
-     * Removed attributes are: 'srcset', 'sizes', 'sources', 'width', 'height', 'alt'.
-     *
-     * This method is decorated, to allow custom cleanup logic.
-     * For example, to remove 'myImageId' attribute after 'src' has changed:
-     *
-     * ```ts
-     * replaceImageSourceCommand.on( 'cleanupImage', ( eventInfo, [ writer, image ] ) => {
-     * 	writer.removeAttribute( 'myImageId', image );
-     * } );
-     * ```
-     */
-    cleanupImage(writer, image) {
-        writer.removeAttribute('srcset', image);
-        writer.removeAttribute('sizes', image);
-        /**
-         * In case responsive images some attributes should be cleaned up.
-         * Check: https://github.com/ckeditor/ckeditor5/issues/15093
-         */
-        writer.removeAttribute('sources', image);
-        writer.removeAttribute('width', image);
-        writer.removeAttribute('height', image);
-        writer.removeAttribute('alt', image);
-    }
-}

package/src/image/ui/utils.js

@@ -1,46 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { BalloonPanelView } from 'ckeditor5/src/ui.js';
-/**
- * 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.
- * @internal
- */
-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.
- * @internal
- */
-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.js

@@ -1,125 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { first } from 'ckeditor5/src/utils.js';
-/**
- * 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';
-}
-/**
- * Returns parsed value of the size, but only if it contains unit: px.
- *
- * @internal
- */
-export function getSizeValueIfInPx(size) {
-    if (size && size.endsWith('px')) {
-        return parseInt(size);
-    }
-    return null;
-}
-/**
- * Returns true if both styles (width and height) are set.
- *
- * 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
- */
-export function widthAndHeightStylesAreBothSet(viewElement) {
-    const widthStyle = getSizeValueIfInPx(viewElement.getStyle('width'));
-    const heightStyle = getSizeValueIfInPx(viewElement.getStyle('height'));
-    return !!(widthStyle && heightStyle);
-}

package/src/image.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/image
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageBlock } from './imageblock.js';
-import { ImageInline } from './imageinline.js';
-import '../theme/image.css';
-/**
- * The image plugin.
- *
- * For a detailed overview, check the {@glink features/images/images-overview image feature} documentation.
- *
- * This is a "glue" plugin which loads the following plugins:
- *
- * * {@link module:image/imageblock~ImageBlock},
- * * {@link module:image/imageinline~ImageInline},
- *
- * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
- * for more information.
- */
-export class Image extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageBlock, ImageInline];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'Image';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}

package/src/imageblock.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imageblock
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { Widget } from 'ckeditor5/src/widget.js';
-import { ImageTextAlternative } from './imagetextalternative.js';
-import { ImageBlockEditing } from './image/imageblockediting.js';
-import { ImageInsertUI } from './imageinsert/imageinsertui.js';
-import '../theme/image.css';
-/**
- * The image block plugin.
- *
- * This is a "glue" plugin which loads the following plugins:
- *
- * * {@link module:image/image/imageblockediting~ImageBlockEditing},
- * * {@link module:image/imagetextalternative~ImageTextAlternative}.
- *
- * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
- * for more information.
- */
-export class ImageBlock extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageBlockEditing, Widget, ImageTextAlternative, ImageInsertUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageBlock';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}