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

package/src/imagesizeattributes.js

@@ -1,163 +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/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 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() {
-        const schema = this.editor.model.schema;
-        if (this.editor.plugins.has('ImageBlockEditing')) {
-            schema.extend('imageBlock', { allowAttributes: ['width', 'height'] });
-        }
-        if (this.editor.plugins.has('ImageInlineEditing')) {
-            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, true);
-            attachDowncastConverter(dispatcher, 'height', 'height', true, true);
-        });
-        editor.conversion.for('dataDowncast').add(dispatcher => {
-            attachDowncastConverter(dispatcher, 'width', 'width', false);
-            attachDowncastConverter(dispatcher, 'height', 'height', false);
-        });
-        // Consume `aspect-ratio` style if `width` and `height` attributes are set on the image.
-        editor.conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:img', (evt, data, conversionApi) => {
-                const width = data.viewItem.getAttribute('width');
-                const height = data.viewItem.getAttribute('height');
-                if (width && height) {
-                    conversionApi.consumable.consume(data.viewItem, { styles: ['aspect-ratio'] });
-                }
-            });
-        });
-        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage, isEditingDowncast = false) {
-            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);
-                }
-                const width = data.item.getAttribute('width');
-                const height = data.item.getAttribute('height');
-                const hasSizes = width && height;
-                if (hasSizes && isEditingDowncast) {
-                    viewWriter.setAttribute('loading', 'lazy', 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;
-                }
-                if (hasSizes) {
-                    viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
-                }
-            });
-        }
-    }
-}

package/src/imagestyle/converters.js

@@ -1,118 +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 isEqual from 'es-toolkit/compat/isEqual';
-import { first } from 'ckeditor5/src/utils.js';
-import { DEFAULT_OPTIONS } from './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.
- * @internal
- */
-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.
- * @internal
- */
-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);
-            }
-        }
-        // Normalize float styles (alignLeft, alignRight).
-        normalizeFloatToDefinitionStyle(conversionApi, viewElement, modelImageElement, styles);
-    };
-}
-/**
- * A helper function that attempts to convert the `float` CSS style into a corresponding `imageStyle` attribute.
- *
- * It maps `float: left` and `float: right` to standard alignment styles (e.g. `'alignLeft'`, `'alignRight'`),
- * but only if the target style definition matches one of the {@link module:image/image/utils~DEFAULT_OPTIONS default options}.
- */
-function normalizeFloatToDefinitionStyle(conversionApi, viewElement, modelElement, styles) {
-    if (!conversionApi.consumable.test(viewElement, { styles: ['float'] })) {
-        return;
-    }
-    let floatStyleName = null;
-    switch (viewElement.getStyle('float')) {
-        case 'left':
-            floatStyleName = 'alignLeft';
-            break;
-        case 'right':
-            floatStyleName = 'alignRight';
-            break;
-    }
-    if (!floatStyleName) {
-        return;
-    }
-    const definition = getStyleDefinitionByName(floatStyleName, styles);
-    if (!definition) {
-        return;
-    }
-    const builtinDefinition = DEFAULT_OPTIONS[definition.name];
-    if (!isEqual(definition, builtinDefinition)) {
-        return;
-    }
-    conversionApi.writer.setAttribute('imageStyle', floatStyleName, modelElement);
-    conversionApi.consumable.consume(viewElement, { styles: ['float'] });
-}
-/**
- * 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.js

@@ -1,117 +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 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 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`.
-     */
-    _defaultStyles;
-    /**
-     * The styles handled by this command.
-     */
-    _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, 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.js

@@ -1,127 +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/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 class ImageStyleEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageStyleEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [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;
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const isBlockPluginLoaded = editor.plugins.has('ImageBlockEditing');
-        const isInlinePluginLoaded = editor.plugins.has('ImageInlineEditing');
-        editor.config.define('image.styles', utils.getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded));
-        this.normalizedStyles = utils.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' });
-            schema.setAttributeProperties('imageStyle', { isFormatting: true });
-            // Converter for figure element from view to model.
-            editor.data.upcastDispatcher.on('element:figure', viewToModelConverter, { priority: 'low' });
-        }
-        if (isInlinePluginLoaded) {
-            schema.extend('imageInline', { allowAttributes: 'imageStyle' });
-            schema.setAttributeProperties('imageStyle', { isFormatting: true });
-            // 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;
-        });
-    }
-}