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

package/src/image/imageblockediting.js

@@ -1,159 +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/imageblockediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
-import { ViewUpcastWriter } from 'ckeditor5/src/engine.js';
-import { downcastImageAttribute, downcastSrcsetAttribute, upcastImageFigure } from './converters.js';
-import { ImageEditing } from './imageediting.js';
-import { ImageSizeAttributes } from '../imagesizeattributes.js';
-import { ImageTypeCommand } from './imagetypecommand.js';
-import { ImageUtils } from '../imageutils.js';
-import { getImgViewElementMatcher, createBlockImageViewElement, determineImageTypeForInsertionAtSelection } from './utils.js';
-import { ImagePlaceholder } from './imageplaceholder.js';
-/**
- * The image block plugin.
- *
- * It registers:
- *
- * * `<imageBlock>` as a block element in the document schema, and allows `alt`, `src` and `srcset` attributes.
- * * converters for editing and data pipelines.,
- * * {@link module:image/image/imagetypecommand~ImageTypeCommand `'imageTypeBlock'`} command that converts inline images into
- * block images.
- */
-export class ImageBlockEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageEditing, ImageSizeAttributes, ImageUtils, ImagePlaceholder, ClipboardPipeline];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageBlockEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const schema = editor.model.schema;
-        // Converters 'alt' and 'srcset' are added in 'ImageEditing' plugin.
-        schema.register('imageBlock', {
-            inheritAllFrom: '$blockObject',
-            allowAttributes: ['alt', 'src', 'srcset']
-        });
-        this._setupConversion();
-        if (editor.plugins.has('ImageInlineEditing')) {
-            editor.commands.add('imageTypeBlock', new ImageTypeCommand(this.editor, 'imageBlock'));
-            this._setupClipboardIntegration();
-        }
-    }
-    /**
-     * Configures conversion pipelines to support upcasting and downcasting
-     * block images (block image widgets) and their attributes.
-     */
-    _setupConversion() {
-        const editor = this.editor;
-        const t = editor.t;
-        const conversion = editor.conversion;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        conversion.for('dataDowncast')
-            .elementToStructure({
-            model: 'imageBlock',
-            view: (modelElement, { writer }) => createBlockImageViewElement(writer)
-        });
-        conversion.for('editingDowncast')
-            .elementToStructure({
-            model: 'imageBlock',
-            view: (modelElement, { writer }) => imageUtils.toImageWidget(createBlockImageViewElement(writer), writer, t('image widget'))
-        });
-        conversion.for('downcast')
-            .add(downcastImageAttribute(imageUtils, 'imageBlock', 'src'))
-            .add(downcastImageAttribute(imageUtils, 'imageBlock', 'alt'))
-            .add(downcastSrcsetAttribute(imageUtils, 'imageBlock'));
-        // More image related upcasts are in 'ImageEditing' plugin.
-        conversion.for('upcast')
-            .elementToElement({
-            view: getImgViewElementMatcher(editor, 'imageBlock'),
-            model: (viewImage, { writer }) => writer.createElement('imageBlock', viewImage.hasAttribute('src') ? { src: viewImage.getAttribute('src') } : undefined)
-        })
-            .add(upcastImageFigure(imageUtils));
-    }
-    /**
-     * Integrates the plugin with the clipboard pipeline.
-     *
-     * Idea is that the feature should recognize the user's intent when an **inline** image is
-     * pasted or dropped. If such an image is pasted/dropped:
-     *
-     * * into an empty block (e.g. an empty paragraph),
-     * * on another object (e.g. some block widget).
-     *
-     * it gets converted into a block image on the fly. We assume this is the user's intent
-     * if they decided to put their image there.
-     *
-     * See the `ImageInlineEditing` for the similar integration that works in the opposite direction.
-     *
-     * The feature also sets image `width` and `height` attributes on paste.
-     */
-    _setupClipboardIntegration() {
-        const editor = this.editor;
-        const model = editor.model;
-        const editingView = editor.editing.view;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
-        this.listenTo(clipboardPipeline, 'inputTransformation', (evt, data) => {
-            const docFragmentChildren = Array.from(data.content.getChildren());
-            let modelRange;
-            // Make sure only <img> elements are dropped or pasted. Otherwise, if there some other HTML
-            // mixed up, this should be handled as a regular paste.
-            if (!docFragmentChildren.every(imageUtils.isInlineImageView)) {
-                return;
-            }
-            // When drag and dropping, data.targetRanges specifies where to drop because
-            // this is usually a different place than the current model selection (the user
-            // uses a drop marker to specify the drop location).
-            if (data.targetRanges) {
-                modelRange = editor.editing.mapper.toModelRange(data.targetRanges[0]);
-            }
-            // Pasting, however, always occurs at the current model selection.
-            else {
-                modelRange = model.document.selection.getFirstRange();
-            }
-            const selection = model.createSelection(modelRange);
-            // Convert inline images into block images only when the currently selected block is empty
-            // (e.g. an empty paragraph) or some object is selected (to replace it).
-            if (determineImageTypeForInsertionAtSelection(model.schema, selection) === 'imageBlock') {
-                const writer = new ViewUpcastWriter(editingView.document);
-                // Wrap <img ... /> -> <figure class="image"><img .../></figure>
-                const blockViewImages = docFragmentChildren.map(inlineViewImage => writer.createElement('figure', { class: 'image' }, inlineViewImage));
-                data.content = writer.createDocumentFragment(blockViewImages);
-            }
-        });
-        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data) => {
-            if (data.method !== 'paste') {
-                return;
-            }
-            model.change(writer => {
-                const range = writer.createRangeIn(data.content);
-                for (const item of range.getItems()) {
-                    if (item.is('element', 'imageBlock')) {
-                        imageUtils.setImageNaturalSizeAttributes(item);
-                    }
-                }
-            });
-        });
-    }
-}

package/src/image/imageediting.js

@@ -1,69 +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/imageediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageLoadObserver } from './imageloadobserver.js';
-import { InsertImageCommand } from './insertimagecommand.js';
-import { ReplaceImageSourceCommand } from './replaceimagesourcecommand.js';
-import { ImageUtils } from '../imageutils.js';
-/**
- * The image engine plugin. This module loads common code shared between
- * {@link module:image/image/imageinlineediting~ImageInlineEditing} and
- * {@link module:image/image/imageblockediting~ImageBlockEditing} plugins.
- *
- * This plugin registers the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command.
- */
-export class ImageEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        // See https://github.com/ckeditor/ckeditor5-image/issues/142.
-        editor.editing.view.addObserver(ImageLoadObserver);
-        conversion.for('upcast')
-            .attributeToAttribute({
-            view: {
-                name: 'img',
-                key: 'alt'
-            },
-            model: 'alt'
-        })
-            .attributeToAttribute({
-            view: {
-                name: 'img',
-                key: 'srcset'
-            },
-            model: 'srcset'
-        });
-        const insertImageCommand = new InsertImageCommand(editor);
-        const replaceImageSourceCommand = new ReplaceImageSourceCommand(editor);
-        editor.commands.add('insertImage', insertImageCommand);
-        editor.commands.add('replaceImageSource', replaceImageSourceCommand);
-        // `imageInsert` is an alias for backward compatibility.
-        editor.commands.add('imageInsert', insertImageCommand);
-    }
-}

package/src/image/imageinlineediting.js

@@ -1,178 +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/imageinlineediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
-import { ViewUpcastWriter } from 'ckeditor5/src/engine.js';
-import { downcastImageAttribute, downcastSrcsetAttribute } from './converters.js';
-import { ImageEditing } from './imageediting.js';
-import { ImageSizeAttributes } from '../imagesizeattributes.js';
-import { ImageTypeCommand } from './imagetypecommand.js';
-import { ImageUtils } from '../imageutils.js';
-import { getImgViewElementMatcher, createInlineImageViewElement, determineImageTypeForInsertionAtSelection } from './utils.js';
-import { ImagePlaceholder } from './imageplaceholder.js';
-/**
- * The image inline plugin.
- *
- * It registers:
- *
- * * `<imageInline>` as an inline element in the document schema, and allows `alt`, `src` and `srcset` attributes.
- * * converters for editing and data pipelines.
- * * {@link module:image/image/imagetypecommand~ImageTypeCommand `'imageTypeInline'`} command that converts block images into
- * inline images.
- */
-export class ImageInlineEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageEditing, ImageSizeAttributes, ImageUtils, ImagePlaceholder, ClipboardPipeline];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageInlineEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const schema = editor.model.schema;
-        // Converters 'alt' and 'srcset' are added in 'ImageEditing' plugin.
-        schema.register('imageInline', {
-            inheritAllFrom: '$inlineObject',
-            allowAttributes: ['alt', 'src', 'srcset'],
-            // Disallow inline images in captions (at least for now).
-            // This is the best spot to do that because independent packages can introduce captions (ImageCaption, TableCaption, etc.).
-            disallowIn: ['caption']
-        });
-        this._setupConversion();
-        if (editor.plugins.has('ImageBlockEditing')) {
-            editor.commands.add('imageTypeInline', new ImageTypeCommand(this.editor, 'imageInline'));
-            this._setupClipboardIntegration();
-        }
-    }
-    /**
-     * Configures conversion pipelines to support upcasting and downcasting
-     * inline images (inline image widgets) and their attributes.
-     */
-    _setupConversion() {
-        const editor = this.editor;
-        const t = editor.t;
-        const conversion = editor.conversion;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        conversion.for('dataDowncast')
-            .elementToElement({
-            model: 'imageInline',
-            view: (modelElement, { writer }) => writer.createEmptyElement('img')
-        });
-        conversion.for('editingDowncast')
-            .elementToStructure({
-            model: 'imageInline',
-            view: (modelElement, { writer }) => imageUtils.toImageWidget(createInlineImageViewElement(writer), writer, t('image widget'))
-        });
-        conversion.for('downcast')
-            .add(downcastImageAttribute(imageUtils, 'imageInline', 'src'))
-            .add(downcastImageAttribute(imageUtils, 'imageInline', 'alt'))
-            .add(downcastSrcsetAttribute(imageUtils, 'imageInline'));
-        // More image related upcasts are in 'ImageEditing' plugin.
-        conversion.for('upcast')
-            .elementToElement({
-            view: getImgViewElementMatcher(editor, 'imageInline'),
-            model: (viewImage, { writer }) => writer.createElement('imageInline', viewImage.hasAttribute('src') ? { src: viewImage.getAttribute('src') } : undefined)
-        });
-    }
-    /**
-     * Integrates the plugin with the clipboard pipeline.
-     *
-     * Idea is that the feature should recognize the user's intent when an **block** image is
-     * pasted or dropped. If such an image is pasted/dropped into a non-empty block
-     * (e.g. a paragraph with some text) it gets converted into an inline image on the fly.
-     *
-     * We assume this is the user's intent if they decided to put their image there.
-     *
-     * **Note**: If a block image has a caption, it will not be converted to an inline image
-     * to avoid the confusion. Captions are added on purpose and they should never be lost
-     * in the clipboard pipeline.
-     *
-     * See the `ImageBlockEditing` for the similar integration that works in the opposite direction.
-     *
-     * The feature also sets image `width` and `height` attributes when pasting.
-     */
-    _setupClipboardIntegration() {
-        const editor = this.editor;
-        const model = editor.model;
-        const editingView = editor.editing.view;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
-        this.listenTo(clipboardPipeline, 'inputTransformation', (evt, data) => {
-            const docFragmentChildren = Array.from(data.content.getChildren());
-            let modelRange;
-            // Make sure only <figure class="image"></figure> elements are dropped or pasted. Otherwise, if there some other HTML
-            // mixed up, this should be handled as a regular paste.
-            if (!docFragmentChildren.every(imageUtils.isBlockImageView)) {
-                return;
-            }
-            // When drag and dropping, data.targetRanges specifies where to drop because
-            // this is usually a different place than the current model selection (the user
-            // uses a drop marker to specify the drop location).
-            if (data.targetRanges) {
-                modelRange = editor.editing.mapper.toModelRange(data.targetRanges[0]);
-            }
-            // Pasting, however, always occurs at the current model selection.
-            else {
-                modelRange = model.document.selection.getFirstRange();
-            }
-            const selection = model.createSelection(modelRange);
-            // Convert block images into inline images only when pasting or dropping into non-empty blocks
-            // and when the block is not an object (e.g. pasting to replace another widget).
-            if (determineImageTypeForInsertionAtSelection(model.schema, selection) === 'imageInline') {
-                const writer = new ViewUpcastWriter(editingView.document);
-                // Unwrap <figure class="image"><img .../></figure> -> <img ... />
-                // but <figure class="image"><img .../><figcaption>...</figcaption></figure> -> stays the same
-                const inlineViewImages = docFragmentChildren.map(blockViewImage => {
-                    // If there's just one child, it can be either <img /> or <a><img></a>.
-                    // If there are other children than <img>, this means that the block image
-                    // has a caption or some other features and this kind of image should be
-                    // pasted/dropped without modifications.
-                    if (blockViewImage.childCount === 1) {
-                        // Pass the attributes which are present only in the <figure> to the <img>
-                        // (e.g. the style="width:10%" attribute applied by the ImageResize plugin).
-                        Array.from(blockViewImage.getAttributes())
-                            .forEach(attribute => writer.setAttribute(...attribute, imageUtils.findViewImgElement(blockViewImage)));
-                        return blockViewImage.getChild(0);
-                    }
-                    else {
-                        return blockViewImage;
-                    }
-                });
-                data.content = writer.createDocumentFragment(inlineViewImages);
-            }
-        });
-        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data) => {
-            if (data.method !== 'paste') {
-                return;
-            }
-            model.change(writer => {
-                const range = writer.createRangeIn(data.content);
-                for (const item of range.getItems()) {
-                    if (item.is('element', 'imageInline')) {
-                        imageUtils.setImageNaturalSizeAttributes(item);
-                    }
-                }
-            });
-        });
-    }
-}

package/src/image/imageloadobserver.js

@@ -1,52 +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/imageloadobserver
- */
-import { Observer } from 'ckeditor5/src/engine.js';
-/**
- * Observes all new images added to the {@link module:engine/view/document~ViewDocument},
- * fires {@link module:engine/view/document~ViewDocument#event:imageLoaded} and
- * {@link module:engine/view/document~ViewDocument#event:layoutChanged} event every time when the new image
- * has been loaded.
- *
- * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
- */
-export class ImageLoadObserver extends Observer {
-    /**
-     * @inheritDoc
-     */
-    observe(domRoot) {
-        this.listenTo(domRoot, 'load', (event, domEvent) => {
-            const domElement = domEvent.target;
-            if (this.checkShouldIgnoreEventFromTarget(domElement)) {
-                return;
-            }
-            if (domElement.tagName == 'IMG') {
-                this._fireEvents(domEvent);
-            }
-            // Use capture phase for better performance (#4504).
-        }, { useCapture: true });
-    }
-    /**
-     * @inheritDoc
-     */
-    stopObserving(domRoot) {
-        this.stopListening(domRoot);
-    }
-    /**
-     * Fires {@link module:engine/view/document~ViewDocument#event:layoutChanged} and
-     * {@link module:engine/view/document~ViewDocument#event:imageLoaded}
-     * if observer {@link #isEnabled is enabled}.
-     *
-     * @param domEvent The DOM event.
-     */
-    _fireEvents(domEvent) {
-        if (this.isEnabled) {
-            this.document.fire('layoutChanged');
-            this.document.fire('imageLoaded', domEvent);
-        }
-    }
-}

package/src/image/imageplaceholder.js

@@ -1,119 +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/imageplaceholder
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageUtils } from '../imageutils.js';
-import { ImageLoadObserver } from './imageloadobserver.js';
-import '../../theme/imageplaceholder.css';
-/**
- * Adds support for image placeholder that is automatically removed when the image is loaded.
- */
-export class ImagePlaceholder extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImagePlaceholder';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        this._setupSchema();
-        this._setupConversion();
-        this._setupLoadListener();
-    }
-    /**
-     * Extends model schema.
-     */
-    _setupSchema() {
-        const schema = this.editor.model.schema;
-        // Wait for ImageBlockEditing or ImageInlineEditing to register their elements first,
-        // that's why doing this in afterInit() instead of init().
-        if (schema.isRegistered('imageBlock')) {
-            schema.extend('imageBlock', {
-                allowAttributes: ['placeholder']
-            });
-        }
-        if (schema.isRegistered('imageInline')) {
-            schema.extend('imageInline', {
-                allowAttributes: ['placeholder']
-            });
-        }
-    }
-    /**
-     * Registers converters.
-     */
-    _setupConversion() {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        conversion.for('editingDowncast').add(dispatcher => {
-            dispatcher.on('attribute:placeholder', (evt, data, conversionApi) => {
-                if (!conversionApi.consumable.test(data.item, evt.name)) {
-                    return;
-                }
-                if (!data.item.is('element', 'imageBlock') && !data.item.is('element', 'imageInline')) {
-                    return;
-                }
-                conversionApi.consumable.consume(data.item, evt.name);
-                const viewWriter = conversionApi.writer;
-                const element = conversionApi.mapper.toViewElement(data.item);
-                const img = imageUtils.findViewImgElement(element);
-                if (data.attributeNewValue) {
-                    viewWriter.addClass('image_placeholder', img);
-                    viewWriter.setStyle('background-image', `url(${data.attributeNewValue})`, img);
-                    viewWriter.setCustomProperty('editingPipeline:doNotReuseOnce', true, img);
-                }
-                else {
-                    viewWriter.removeClass('image_placeholder', img);
-                    viewWriter.removeStyle('background-image', img);
-                }
-            });
-        });
-    }
-    /**
-     * Prepares listener for image load.
-     */
-    _setupLoadListener() {
-        const editor = this.editor;
-        const model = editor.model;
-        const editing = editor.editing;
-        const editingView = editing.view;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        editingView.addObserver(ImageLoadObserver);
-        this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
-            const imgViewElement = editingView.domConverter.mapDomToView(domEvent.target);
-            if (!imgViewElement) {
-                return;
-            }
-            const viewElement = imageUtils.getImageWidgetFromImageView(imgViewElement);
-            if (!viewElement) {
-                return;
-            }
-            const modelElement = editing.mapper.toModelElement(viewElement);
-            if (!modelElement || !modelElement.hasAttribute('placeholder')) {
-                return;
-            }
-            model.enqueueChange({ isUndoable: false }, writer => {
-                writer.removeAttribute('placeholder', modelElement);
-            });
-        });
-    }
-}

package/src/image/imagetypecommand.js

@@ -1,84 +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';
-/**
- * The image type command. It changes the type of a selected image, depending on the configuration.
- */
-export class ImageTypeCommand extends Command {
-    /**
-     * Model element name the command converts to.
-     */
-    _modelElementName;
-    /**
-     * @inheritDoc
-     *
-     * @param modelElementName Model element name the command converts to.
-     */
-    constructor(editor, modelElementName) {
-        super(editor);
-        this._modelElementName = modelElementName;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
-        if (this._modelElementName === 'imageBlock') {
-            this.isEnabled = imageUtils.isInlineImage(element);
-        }
-        else {
-            this.isEnabled = imageUtils.isBlockImage(element);
-        }
-    }
-    /**
-     * Executes the command and changes the type of a selected image.
-     *
-     * @fires execute
-     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
-     * The default is `true`.
-     * @returns An object containing references to old and new model image elements
-     * (for before and after the change) so external integrations can hook into the decorated
-     * `execute` event and handle this change. `null` if the type change failed.
-     */
-    execute(options = {}) {
-        const editor = this.editor;
-        const model = this.editor.model;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const oldElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
-        const attributes = Object.fromEntries(oldElement.getAttributes());
-        // Don't change image type if "src" is missing (a broken image), unless there's "uploadId" set.
-        // This state may happen during image upload (before it finishes) and it should be possible to change type
-        // of the image in the meantime.
-        if (!attributes.src && !attributes.uploadId) {
-            return null;
-        }
-        return model.change(writer => {
-            const { setImageSizes = true } = options;
-            // Get all markers that contain the old image element.
-            const markers = Array.from(model.markers)
-                .filter(marker => marker.getRange().containsItem(oldElement));
-            const newElement = imageUtils.insertImage(attributes, model.createSelection(oldElement, 'on'), this._modelElementName, { setImageSizes });
-            if (!newElement) {
-                return null;
-            }
-            const newElementRange = writer.createRangeOn(newElement);
-            // Expand the previously intersecting markers' ranges to include the new image element.
-            for (const marker of markers) {
-                const markerRange = marker.getRange();
-                // Join the survived part of the old marker range with the new element range
-                // (loosely because there could be some new paragraph or the existing one might got split).
-                const range = markerRange.root.rootName != '$graveyard' ?
-                    markerRange.getJoined(newElementRange, true) : newElementRange;
-                writer.updateMarker(marker, { range });
-            }
-            return {
-                oldElement,
-                newElement
-            };
-        });
-    }
-}