@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/image/utils.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @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/image/utils
+ */
+import type { DocumentSelection, MatcherPattern, Schema, Selection, ViewContainerElement, DowncastWriter, ViewElement } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.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 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';
+/**
+ * Returns parsed value of the size, but only if it contains unit: px.
+ */
+export declare function getSizeValueIfInPx(size: string | undefined): number | 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.
+ */
+export declare function widthAndHeightStylesAreBothSet(viewElement: ViewElement): boolean;

package/src/image/utils.js

@@ -0,0 +1,121 @@
+/**
+ * @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.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.
+ */
+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.
+ */
+export function widthAndHeightStylesAreBothSet(viewElement) {
+    const widthStyle = getSizeValueIfInPx(viewElement.getStyle('width'));
+    const heightStyle = getSizeValueIfInPx(viewElement.getStyle('height'));
+    return !!(widthStyle && heightStyle);
+}

package/src/image.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @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/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 default class Image extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageBlock, typeof ImageInline];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Image";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}

package/src/image.js

@@ -0,0 +1,44 @@
+/**
+ * @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/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 default 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.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @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/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 default class ImageBlock extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageBlockEditing, typeof Widget, typeof ImageTextAlternative, typeof ImageInsertUI];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageBlock";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}

package/src/imageblock.js

@@ -0,0 +1,44 @@
+/**
+ * @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/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 default 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;
+    }
+}

package/src/imagecaption/imagecaptionediting.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @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/imagecaption/imagecaptionediting
+ */
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { Element } from 'ckeditor5/src/engine.js';
+import ImageUtils from '../imageutils.js';
+import ImageCaptionUtils from './imagecaptionutils.js';
+/**
+ * The image caption engine plugin. It is responsible for:
+ *
+ * * registering converters for the caption element,
+ * * registering converters for the caption model attribute,
+ * * registering the {@link module:image/imagecaption/toggleimagecaptioncommand~ToggleImageCaptionCommand `toggleImageCaption`} command.
+ */
+export default class ImageCaptionEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils, typeof ImageCaptionUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageCaptionEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * A map that keeps saved JSONified image captions and image model elements they are
+     * associated with.
+     *
+     * To learn more about this system, see {@link #_saveCaption}.
+     */
+    private _savedCaptionsMap;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting
+     * image captions.
+     */
+    private _setupConversion;
+    /**
+     * Integrates with {@link module:image/image/imagetypecommand~ImageTypeCommand image type commands}
+     * to make sure the caption is preserved when the type of an image changes so it can be restored
+     * in the future if the user decides they want their caption back.
+     */
+    private _setupImageTypeCommandsIntegration;
+    /**
+     * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
+     * of an image model element.
+     *
+     * See {@link #_saveCaption}.
+     *
+     * @internal
+     * @param imageModelElement The model element the caption should be returned for.
+     * @returns The model caption element or `null` if there is none.
+     */
+    _getSavedCaption(imageModelElement: Element): Element | null;
+    /**
+     * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
+     * an image element to allow restoring it in the future.
+     *
+     * A caption is saved every time it gets hidden and/or the type of an image changes. The
+     * user should be able to restore it on demand.
+     *
+     * **Note**: The caption cannot be stored in the image model element attribute because,
+     * for instance, when the model state propagates to collaborators, the attribute would get
+     * lost (mainly because it does not convert to anything when the caption is hidden) and
+     * the states of collaborators' models would de-synchronize causing numerous issues.
+     *
+     * See {@link #_getSavedCaption}.
+     *
+     * @internal
+     * @param imageModelElement The model element the caption is saved for.
+     * @param caption The caption model element to be saved.
+     */
+    _saveCaption(imageModelElement: Element, caption: Element): void;
+    /**
+     * Reconverts image caption when image alt attribute changes.
+     * The change of alt attribute is reflected in caption's aria-label attribute.
+     */
+    private _registerCaptionReconversion;
+}

package/src/imagecaption/imagecaptionediting.js

@@ -0,0 +1,231 @@
+/**
+ * @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/imagecaption/imagecaptionediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Element, enablePlaceholder } from 'ckeditor5/src/engine.js';
+import { toWidgetEditable } from 'ckeditor5/src/widget.js';
+import ToggleImageCaptionCommand from './toggleimagecaptioncommand.js';
+import ImageUtils from '../imageutils.js';
+import ImageCaptionUtils from './imagecaptionutils.js';
+/**
+ * The image caption engine plugin. It is responsible for:
+ *
+ * * registering converters for the caption element,
+ * * registering converters for the caption model attribute,
+ * * registering the {@link module:image/imagecaption/toggleimagecaptioncommand~ToggleImageCaptionCommand `toggleImageCaption`} command.
+ */
+export default class ImageCaptionEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils, ImageCaptionUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageCaptionEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._savedCaptionsMap = new WeakMap();
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        // Schema configuration.
+        if (!schema.isRegistered('caption')) {
+            schema.register('caption', {
+                allowIn: 'imageBlock',
+                allowContentOf: '$block',
+                isLimit: true
+            });
+        }
+        else {
+            schema.extend('caption', {
+                allowIn: 'imageBlock'
+            });
+        }
+        editor.commands.add('toggleImageCaption', new ToggleImageCaptionCommand(this.editor));
+        this._setupConversion();
+        this._setupImageTypeCommandsIntegration();
+        this._registerCaptionReconversion();
+    }
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting
+     * image captions.
+     */
+    _setupConversion() {
+        const editor = this.editor;
+        const view = editor.editing.view;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
+        const t = editor.t;
+        // View -> model converter for the data pipeline.
+        editor.conversion.for('upcast').elementToElement({
+            view: element => imageCaptionUtils.matchImageCaptionViewElement(element),
+            model: 'caption'
+        });
+        // Model -> view converter for the data pipeline.
+        editor.conversion.for('dataDowncast').elementToElement({
+            model: 'caption',
+            view: (modelElement, { writer }) => {
+                if (!imageUtils.isBlockImage(modelElement.parent)) {
+                    return null;
+                }
+                return writer.createContainerElement('figcaption');
+            }
+        });
+        // Model -> view converter for the editing pipeline.
+        editor.conversion.for('editingDowncast').elementToElement({
+            model: 'caption',
+            view: (modelElement, { writer }) => {
+                if (!imageUtils.isBlockImage(modelElement.parent)) {
+                    return null;
+                }
+                const figcaptionElement = writer.createEditableElement('figcaption');
+                writer.setCustomProperty('imageCaption', true, figcaptionElement);
+                figcaptionElement.placeholder = t('Enter image caption');
+                enablePlaceholder({
+                    view,
+                    element: figcaptionElement,
+                    keepOnFocus: true
+                });
+                const imageAlt = modelElement.parent.getAttribute('alt');
+                const label = imageAlt ? t('Caption for image: %0', [imageAlt]) : t('Caption for the image');
+                return toWidgetEditable(figcaptionElement, writer, { label });
+            }
+        });
+    }
+    /**
+     * Integrates with {@link module:image/image/imagetypecommand~ImageTypeCommand image type commands}
+     * to make sure the caption is preserved when the type of an image changes so it can be restored
+     * in the future if the user decides they want their caption back.
+     */
+    _setupImageTypeCommandsIntegration() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
+        const imageTypeInlineCommand = editor.commands.get('imageTypeInline');
+        const imageTypeBlockCommand = editor.commands.get('imageTypeBlock');
+        const handleImageTypeChange = evt => {
+            // The image type command execution can be unsuccessful.
+            if (!evt.return) {
+                return;
+            }
+            const { oldElement, newElement } = evt.return;
+            /* istanbul ignore if: paranoid check -- @preserve */
+            if (!oldElement) {
+                return;
+            }
+            if (imageUtils.isBlockImage(oldElement)) {
+                const oldCaptionElement = imageCaptionUtils.getCaptionFromImageModelElement(oldElement);
+                // If the old element was a captioned block image (the caption was visible),
+                // simply save it so it can be restored.
+                if (oldCaptionElement) {
+                    this._saveCaption(newElement, oldCaptionElement);
+                    return;
+                }
+            }
+            const savedOldElementCaption = this._getSavedCaption(oldElement);
+            // If either:
+            //
+            // * the block image didn't have a visible caption,
+            // * the block image caption was hidden (and already saved),
+            // * the inline image was passed
+            //
+            // just try to "pass" the saved caption from the old image to the new image
+            // so it can be retrieved in the future if the user wants it back.
+            if (savedOldElementCaption) {
+                // Note: Since we're writing to a WeakMap, we don't bother with removing the
+                // [ oldElement, savedOldElementCaption ] pair from it.
+                this._saveCaption(newElement, savedOldElementCaption);
+            }
+        };
+        // Presence of the commands depends on the Image(Inline|Block)Editing plugins loaded in the editor.
+        if (imageTypeInlineCommand) {
+            this.listenTo(imageTypeInlineCommand, 'execute', handleImageTypeChange, { priority: 'low' });
+        }
+        if (imageTypeBlockCommand) {
+            this.listenTo(imageTypeBlockCommand, 'execute', handleImageTypeChange, { priority: 'low' });
+        }
+    }
+    /**
+     * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
+     * of an image model element.
+     *
+     * See {@link #_saveCaption}.
+     *
+     * @internal
+     * @param imageModelElement The model element the caption should be returned for.
+     * @returns The model caption element or `null` if there is none.
+     */
+    _getSavedCaption(imageModelElement) {
+        const jsonObject = this._savedCaptionsMap.get(imageModelElement);
+        return jsonObject ? Element.fromJSON(jsonObject) : null;
+    }
+    /**
+     * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
+     * an image element to allow restoring it in the future.
+     *
+     * A caption is saved every time it gets hidden and/or the type of an image changes. The
+     * user should be able to restore it on demand.
+     *
+     * **Note**: The caption cannot be stored in the image model element attribute because,
+     * for instance, when the model state propagates to collaborators, the attribute would get
+     * lost (mainly because it does not convert to anything when the caption is hidden) and
+     * the states of collaborators' models would de-synchronize causing numerous issues.
+     *
+     * See {@link #_getSavedCaption}.
+     *
+     * @internal
+     * @param imageModelElement The model element the caption is saved for.
+     * @param caption The caption model element to be saved.
+     */
+    _saveCaption(imageModelElement, caption) {
+        this._savedCaptionsMap.set(imageModelElement, caption.toJSON());
+    }
+    /**
+     * Reconverts image caption when image alt attribute changes.
+     * The change of alt attribute is reflected in caption's aria-label attribute.
+     */
+    _registerCaptionReconversion() {
+        const editor = this.editor;
+        const model = editor.model;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
+        model.document.on('change:data', () => {
+            const changes = model.document.differ.getChanges();
+            for (const change of changes) {
+                if (change.attributeKey !== 'alt') {
+                    continue;
+                }
+                const image = change.range.start.nodeAfter;
+                if (imageUtils.isBlockImage(image)) {
+                    const caption = imageCaptionUtils.getCaptionFromImageModelElement(image);
+                    if (!caption) {
+                        return;
+                    }
+                    editor.editing.reconvertItem(caption);
+                }
+            }
+        });
+    }
+}