@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/image/imageblockediting.js

@@ -0,0 +1,159 @@
+/**
+ * @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/imageblockediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
+import { UpcastWriter } 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 default 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 UpcastWriter(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.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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/imageediting
+ */
+import { Plugin } from 'ckeditor5/src/core.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 default class ImageEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/image/imageediting.js

@@ -0,0 +1,69 @@
+/**
+ * @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/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 default 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.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/imageinlineediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
+import ImageEditing from './imageediting.js';
+import ImageSizeAttributes from '../imagesizeattributes.js';
+import ImageUtils from '../imageutils.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 default class ImageInlineEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageEditing, typeof ImageSizeAttributes, typeof ImageUtils, typeof ImagePlaceholder, typeof ClipboardPipeline];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInlineEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting
+     * inline images (inline image widgets) and their attributes.
+     */
+    private _setupConversion;
+    /**
+     * 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.
+     */
+    private _setupClipboardIntegration;
+}

package/src/image/imageinlineediting.js

@@ -0,0 +1,178 @@
+/**
+ * @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/imageinlineediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
+import { UpcastWriter } 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 default 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 UpcastWriter(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.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @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/imageloadobserver
+ */
+import { Observer } from 'ckeditor5/src/engine.js';
+/**
+ * Observes all new images added to the {@link module:engine/view/document~Document},
+ * fires {@link module:engine/view/document~Document#event:imageLoaded} and
+ * {@link module:engine/view/document~Document#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 default class ImageLoadObserver extends Observer {
+    /**
+     * @inheritDoc
+     */
+    observe(domRoot: HTMLElement): void;
+    /**
+     * @inheritDoc
+     */
+    stopObserving(domRoot: HTMLElement): void;
+    /**
+     * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
+     * {@link module:engine/view/document~Document#event:imageLoaded}
+     * if observer {@link #isEnabled is enabled}.
+     *
+     * @param domEvent The DOM event.
+     */
+    private _fireEvents;
+}
+/**
+ * Fired when an <img/> DOM element has been loaded in the DOM root.
+ *
+ * Introduced by {@link module:image/image/imageloadobserver~ImageLoadObserver}.
+ *
+ * @see module:image/image/imageloadobserver~ImageLoadObserver
+ *
+ * @eventName module:engine/view/document~Document#imageLoaded
+ * @param data Event data.
+ */
+export type ImageLoadedEvent = {
+    name: 'imageLoaded';
+    args: [Event];
+};

package/src/image/imageloadobserver.js

@@ -0,0 +1,52 @@
+/**
+ * @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/imageloadobserver
+ */
+import { Observer } from 'ckeditor5/src/engine.js';
+/**
+ * Observes all new images added to the {@link module:engine/view/document~Document},
+ * fires {@link module:engine/view/document~Document#event:imageLoaded} and
+ * {@link module:engine/view/document~Document#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 default 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~Document#event:layoutChanged} and
+     * {@link module:engine/view/document~Document#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.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @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/imageplaceholder
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+import '../../theme/imageplaceholder.css';
+/**
+ * Adds support for image placeholder that is automatically removed when the image is loaded.
+ */
+export default class ImagePlaceholder extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImagePlaceholder";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Extends model schema.
+     */
+    private _setupSchema;
+    /**
+     * Registers converters.
+     */
+    private _setupConversion;
+    /**
+     * Prepares listener for image load.
+     */
+    private _setupLoadListener;
+}