@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/imagesizeattributes.js

@@ -0,0 +1,148 @@
+/**
+ * @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/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from './imageutils.js';
+import { widthAndHeightStylesAreBothSet, getSizeValueIfInPx } from './image/utils.js';
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */
+export default class ImageSizeAttributes extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageSizeAttributes';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        this._registerSchema();
+        this._registerConverters('imageBlock');
+        this._registerConverters('imageInline');
+    }
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    _registerSchema() {
+        if (this.editor.plugins.has('ImageBlockEditing')) {
+            this.editor.model.schema.extend('imageBlock', { allowAttributes: ['width', 'height'] });
+        }
+        if (this.editor.plugins.has('ImageInlineEditing')) {
+            this.editor.model.schema.extend('imageInline', { allowAttributes: ['width', 'height'] });
+        }
+    }
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    _registerConverters(imageType) {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const viewElementName = imageType === 'imageBlock' ? 'figure' : 'img';
+        editor.conversion.for('upcast')
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    width: /.+/
+                }
+            },
+            model: {
+                key: 'width',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('width'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'width'
+            },
+            model: 'width'
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    height: /.+/
+                }
+            },
+            model: {
+                key: 'height',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('height'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'height'
+            },
+            model: 'height'
+        });
+        // Dedicated converters to propagate attributes to the <img> element.
+        editor.conversion.for('editingDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', true);
+            attachDowncastConverter(dispatcher, 'height', 'height', true);
+        });
+        editor.conversion.for('dataDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', false);
+            attachDowncastConverter(dispatcher, 'height', 'height', false);
+        });
+        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage) {
+            dispatcher.on(`attribute:${modelAttributeName}:${imageType}`, (evt, data, conversionApi) => {
+                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                const img = imageUtils.findViewImgElement(viewElement);
+                if (data.attributeNewValue !== null) {
+                    viewWriter.setAttribute(viewAttributeName, data.attributeNewValue, img);
+                }
+                else {
+                    viewWriter.removeAttribute(viewAttributeName, img);
+                }
+                // Do not set aspect-ratio for pictures. See https://github.com/ckeditor/ckeditor5/issues/14579.
+                if (data.item.hasAttribute('sources')) {
+                    return;
+                }
+                const isResized = data.item.hasAttribute('resizedWidth');
+                // Do not set aspect ratio for inline images which are not resized (data pipeline).
+                if (imageType === 'imageInline' && !isResized && !setRatioForInlineImage) {
+                    return;
+                }
+                const width = data.item.getAttribute('width');
+                const height = data.item.getAttribute('height');
+                if (width && height) {
+                    viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
+                }
+            });
+        }
+    }
+}

package/src/imagestyle/converters.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 type { DowncastAttributeEvent, UpcastElementEvent } from 'ckeditor5/src/engine.js';
+import { type GetCallback } from 'ckeditor5/src/utils.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
+/**
+ * @module image/imagestyle/converters
+ */
+/**
+ * Returns a converter for the `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
+ *
+ * @param styles An array containing available image style options.
+ * @returns A model-to-view attribute converter.
+ */
+export declare function modelToViewStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<DowncastAttributeEvent>;
+/**
+ * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
+ *
+ * @param styles Image style options for which the converter is created.
+ * @returns A view-to-model converter.
+ */
+export declare function viewToModelStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<UpcastElementEvent>;

package/src/imagestyle/converters.js

@@ -0,0 +1,79 @@
+/**
+ * @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';
+/**
+ * @module image/imagestyle/converters
+ */
+/**
+ * Returns a converter for the `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
+ *
+ * @param styles An array containing available image style options.
+ * @returns A model-to-view attribute converter.
+ */
+export function modelToViewStyleAttribute(styles) {
+    return (evt, data, conversionApi) => {
+        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+            return;
+        }
+        // Check if there is class name associated with given value.
+        const newStyle = getStyleDefinitionByName(data.attributeNewValue, styles);
+        const oldStyle = getStyleDefinitionByName(data.attributeOldValue, styles);
+        const viewElement = conversionApi.mapper.toViewElement(data.item);
+        const viewWriter = conversionApi.writer;
+        if (oldStyle) {
+            viewWriter.removeClass(oldStyle.className, viewElement);
+        }
+        if (newStyle) {
+            viewWriter.addClass(newStyle.className, viewElement);
+        }
+    };
+}
+/**
+ * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
+ *
+ * @param styles Image style options for which the converter is created.
+ * @returns A view-to-model converter.
+ */
+export function viewToModelStyleAttribute(styles) {
+    // Convert only non–default styles.
+    const nonDefaultStyles = {
+        imageInline: styles.filter(style => !style.isDefault && style.modelElements.includes('imageInline')),
+        imageBlock: styles.filter(style => !style.isDefault && style.modelElements.includes('imageBlock'))
+    };
+    return (evt, data, conversionApi) => {
+        if (!data.modelRange) {
+            return;
+        }
+        const viewElement = data.viewItem;
+        const modelImageElement = first(data.modelRange.getItems());
+        // Run this converter only if an image has been found in the model.
+        // In some cases it may not be found (for example if we run this on a figure with different type than image).
+        if (!modelImageElement) {
+            return;
+        }
+        // ...and the `imageStyle` attribute is allowed for that element, otherwise stop conversion early.
+        if (!conversionApi.schema.checkAttribute(modelImageElement, 'imageStyle')) {
+            return;
+        }
+        // Convert styles one by one.
+        for (const style of nonDefaultStyles[modelImageElement.name]) {
+            // Try to consume class corresponding with the style.
+            if (conversionApi.consumable.consume(viewElement, { classes: style.className })) {
+                // And convert this style to model attribute.
+                conversionApi.writer.setAttribute('imageStyle', style.name, modelImageElement);
+            }
+        }
+    };
+}
+/**
+ * Returns the style with a given `name` from an array of styles.
+ */
+function getStyleDefinitionByName(name, styles) {
+    for (const style of styles) {
+        if (style.name === name) {
+            return style;
+        }
+    }
+}

package/src/imagestyle/imagestylecommand.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @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/imagestyle/imagestylecommand
+ */
+import type { Element } from 'ckeditor5/src/engine.js';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
+/**
+ * The image style command. It is used to apply {@link module:image/imageconfig~ImageStyleConfig#options image style option}
+ * to a selected image.
+ *
+ * **Note**: Executing this command may change the image model element if the desired style requires an image of a different
+ * type. See {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute} to learn more.
+ */
+export default class ImageStyleCommand extends Command {
+    /**
+     * An object containing names of default style options for the inline and block images.
+     * If there is no default style option for the given image type in the configuration,
+     * the name will be `false`.
+     */
+    private _defaultStyles;
+    /**
+     * The styles handled by this command.
+     */
+    private _styles;
+    /**
+     * Creates an instance of the image style command. When executed, the command applies one of
+     * {@link module:image/imageconfig~ImageStyleConfig#options style options} to the currently selected image.
+     *
+     * @param editor The editor instance.
+     * @param styles The style options that this command supports.
+     */
+    constructor(editor: Editor, styles: Array<ImageStyleOptionDefinition>);
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command and applies the style to the currently selected image:
+     *
+     * ```ts
+     * editor.execute( 'imageStyle', { value: 'side' } );
+     * ```
+     *
+     * **Note**: Executing this command may change the image model element if the desired style requires an image
+     * of a different type. Learn more about {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements model element}
+     * configuration for the style option.
+     *
+     * @param options.value The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
+     * @fires execute
+     */
+    execute(options?: {
+        value?: string;
+        setImageSizes?: boolean;
+    }): void;
+    /**
+     * Returns `true` if requested style change would trigger the image type change.
+     *
+     * @param requestedStyle The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param imageElement The image model element.
+     */
+    shouldConvertImageType(requestedStyle: string, imageElement: Element): boolean;
+}

package/src/imagestyle/imagestylecommand.js

@@ -0,0 +1,107 @@
+/**
+ * @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 { Command } from 'ckeditor5/src/core.js';
+/**
+ * The image style command. It is used to apply {@link module:image/imageconfig~ImageStyleConfig#options image style option}
+ * to a selected image.
+ *
+ * **Note**: Executing this command may change the image model element if the desired style requires an image of a different
+ * type. See {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute} to learn more.
+ */
+export default class ImageStyleCommand extends Command {
+    /**
+     * Creates an instance of the image style command. When executed, the command applies one of
+     * {@link module:image/imageconfig~ImageStyleConfig#options style options} to the currently selected image.
+     *
+     * @param editor The editor instance.
+     * @param styles The style options that this command supports.
+     */
+    constructor(editor, styles) {
+        super(editor);
+        this._defaultStyles = {
+            imageBlock: false,
+            imageInline: false
+        };
+        this._styles = new Map(styles.map(style => {
+            if (style.isDefault) {
+                for (const modelElementName of style.modelElements) {
+                    this._defaultStyles[modelElementName] = style.name;
+                }
+            }
+            return [style.name, style];
+        }));
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
+        this.isEnabled = !!element;
+        if (!this.isEnabled) {
+            this.value = false;
+        }
+        else if (element.hasAttribute('imageStyle')) {
+            this.value = element.getAttribute('imageStyle');
+        }
+        else {
+            this.value = this._defaultStyles[element.name];
+        }
+    }
+    /**
+     * Executes the command and applies the style to the currently selected image:
+     *
+     * ```ts
+     * editor.execute( 'imageStyle', { value: 'side' } );
+     * ```
+     *
+     * **Note**: Executing this command may change the image model element if the desired style requires an image
+     * of a different type. Learn more about {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements model element}
+     * configuration for the style option.
+     *
+     * @param options.value The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
+     * @fires execute
+     */
+    execute(options = {}) {
+        const editor = this.editor;
+        const model = editor.model;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        model.change(writer => {
+            const requestedStyle = options.value;
+            const { setImageSizes = true } = options;
+            let imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
+            // Change the image type if a style requires it.
+            if (requestedStyle && this.shouldConvertImageType(requestedStyle, imageElement)) {
+                this.editor.execute(imageUtils.isBlockImage(imageElement) ? 'imageTypeInline' : 'imageTypeBlock', { setImageSizes });
+                // Update the imageElement to the newly created image.
+                imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
+            }
+            // Default style means that there is no `imageStyle` attribute in the model.
+            // https://github.com/ckeditor/ckeditor5-image/issues/147
+            if (!requestedStyle || this._styles.get(requestedStyle).isDefault) {
+                writer.removeAttribute('imageStyle', imageElement);
+            }
+            else {
+                writer.setAttribute('imageStyle', requestedStyle, imageElement);
+            }
+            if (setImageSizes) {
+                imageUtils.setImageNaturalSizeAttributes(imageElement);
+            }
+        });
+    }
+    /**
+     * Returns `true` if requested style change would trigger the image type change.
+     *
+     * @param requestedStyle The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param imageElement The image model element.
+     */
+    shouldConvertImageType(requestedStyle, imageElement) {
+        const supportedTypes = this._styles.get(requestedStyle).modelElements;
+        return !supportedTypes.includes(imageElement.name);
+    }
+}

package/src/imagestyle/imagestyleediting.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @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/imagestyle/imagestyleediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+import type { ImageStyleOptionDefinition } from '../imageconfig.js';
+/**
+ * The image style engine plugin. It sets the default configuration, creates converters and registers
+ * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.
+ */
+export default class ImageStyleEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageStyleEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * It contains a list of the normalized and validated style options.
+     *
+     * * Each option contains a complete icon markup.
+     * * The style options not supported by any of the loaded image editing plugins (
+     * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} or
+     * {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`}) are filtered out.
+     *
+     * @internal
+     * @readonly
+     */
+    normalizedStyles?: Array<ImageStyleOptionDefinition>;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Sets the editor conversion taking the presence of
+     * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`}
+     * and {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugins into consideration.
+     */
+    private _setupConversion;
+    /**
+     * Registers a post-fixer that will make sure that the style attribute value is correct for a specific image type (block vs inline).
+     */
+    private _setupPostFixer;
+}

package/src/imagestyle/imagestyleediting.js

@@ -0,0 +1,114 @@
+/**
+ * @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/imagestyle/imagestyleediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageStyleCommand from './imagestylecommand.js';
+import ImageUtils from '../imageutils.js';
+import utils from './utils.js';
+import { viewToModelStyleAttribute, modelToViewStyleAttribute } from './converters.js';
+/**
+ * The image style engine plugin. It sets the default configuration, creates converters and registers
+ * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.
+ */
+export default class ImageStyleEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageStyleEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const { normalizeStyles, getDefaultStylesConfiguration } = utils;
+        const editor = this.editor;
+        const isBlockPluginLoaded = editor.plugins.has('ImageBlockEditing');
+        const isInlinePluginLoaded = editor.plugins.has('ImageInlineEditing');
+        editor.config.define('image.styles', getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded));
+        this.normalizedStyles = normalizeStyles({
+            configuredStyles: editor.config.get('image.styles'),
+            isBlockPluginLoaded,
+            isInlinePluginLoaded
+        });
+        this._setupConversion(isBlockPluginLoaded, isInlinePluginLoaded);
+        this._setupPostFixer();
+        // Register imageStyle command.
+        editor.commands.add('imageStyle', new ImageStyleCommand(editor, this.normalizedStyles));
+    }
+    /**
+     * Sets the editor conversion taking the presence of
+     * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`}
+     * and {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugins into consideration.
+     */
+    _setupConversion(isBlockPluginLoaded, isInlinePluginLoaded) {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        const modelToViewConverter = modelToViewStyleAttribute(this.normalizedStyles);
+        const viewToModelConverter = viewToModelStyleAttribute(this.normalizedStyles);
+        editor.editing.downcastDispatcher.on('attribute:imageStyle', modelToViewConverter);
+        editor.data.downcastDispatcher.on('attribute:imageStyle', modelToViewConverter);
+        // Allow imageStyle attribute in image and imageInline.
+        // We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
+        if (isBlockPluginLoaded) {
+            schema.extend('imageBlock', { allowAttributes: 'imageStyle' });
+            // Converter for figure element from view to model.
+            editor.data.upcastDispatcher.on('element:figure', viewToModelConverter, { priority: 'low' });
+        }
+        if (isInlinePluginLoaded) {
+            schema.extend('imageInline', { allowAttributes: 'imageStyle' });
+            // Converter for the img element from view to model.
+            editor.data.upcastDispatcher.on('element:img', viewToModelConverter, { priority: 'low' });
+        }
+    }
+    /**
+     * Registers a post-fixer that will make sure that the style attribute value is correct for a specific image type (block vs inline).
+     */
+    _setupPostFixer() {
+        const editor = this.editor;
+        const document = editor.model.document;
+        const imageUtils = editor.plugins.get(ImageUtils);
+        const stylesMap = new Map(this.normalizedStyles.map(style => [style.name, style]));
+        // Make sure that style attribute is valid for the image type.
+        document.registerPostFixer(writer => {
+            let changed = false;
+            for (const change of document.differ.getChanges()) {
+                if (change.type == 'insert' || change.type == 'attribute' && change.attributeKey == 'imageStyle') {
+                    let element = change.type == 'insert' ? change.position.nodeAfter : change.range.start.nodeAfter;
+                    if (element && element.is('element', 'paragraph') && element.childCount > 0) {
+                        element = element.getChild(0);
+                    }
+                    if (!imageUtils.isImage(element)) {
+                        continue;
+                    }
+                    const imageStyle = element.getAttribute('imageStyle');
+                    if (!imageStyle) {
+                        continue;
+                    }
+                    const imageStyleDefinition = stylesMap.get(imageStyle);
+                    if (!imageStyleDefinition || !imageStyleDefinition.modelElements.includes(element.name)) {
+                        writer.removeAttribute('imageStyle', element);
+                        changed = true;
+                    }
+                }
+            }
+            return changed;
+        });
+    }
+}

package/src/imagestyle/imagestyleui.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @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/imagestyle/imagestyleui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageStyleEditing from './imagestyleediting.js';
+import '../../theme/imagestyle.css';
+/**
+ * The image style UI plugin.
+ *
+ * It registers buttons corresponding to the {@link module:image/imageconfig~ImageConfig#styles} configuration.
+ * It also registers the {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS default drop-downs} and the
+ * custom drop-downs defined by the developer in the {@link module:image/imageconfig~ImageConfig#toolbar} configuration.
+ */
+export default class ImageStyleUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageStyleEditing];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageStyleUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * Returns the default localized style titles provided by the plugin.
+     *
+     * The following localized titles corresponding with
+     * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
+     *
+     * * `'Wrap text'`,
+     * * `'Break text'`,
+     * * `'In line'`,
+     * * `'Full size image'`,
+     * * `'Side image'`,
+     * * `'Left aligned image'`,
+     * * `'Centered image'`,
+     * * `'Right aligned image'`
+     */
+    get localizedDefaultStylesTitles(): Record<string, string>;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
+     */
+    private _createDropdown;
+    /**
+     * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
+     */
+    private _createButton;
+    private _executeCommand;
+}