@ckeditor/ckeditor5-style 47.6.1 → 48.0.0-alpha.0

package/src/integrations/table.js

@@ -1,123 +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 style/integrations/table
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { StyleUtils } from '../styleutils.js';
-export class TableStyleSupport extends Plugin {
-    _tableUtils;
-    _styleUtils;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableStyleSupport';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [StyleUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        if (!editor.plugins.has('TableEditing')) {
-            return;
-        }
-        this._styleUtils = editor.plugins.get(StyleUtils);
-        this._tableUtils = this.editor.plugins.get('TableUtils');
-        this.listenTo(this._styleUtils, 'isStyleEnabledForBlock', (evt, [definition, block]) => {
-            if (this._isApplicable(definition, block)) {
-                evt.return = this._isStyleEnabledForBlock(definition, block);
-                evt.stop();
-            }
-        }, { priority: 'high' });
-        this.listenTo(this._styleUtils, 'getAffectedBlocks', (evt, [definition, block]) => {
-            if (this._isApplicable(definition, block)) {
-                evt.return = this._getAffectedBlocks(definition, block);
-                evt.stop();
-            }
-        }, { priority: 'high' });
-        this.listenTo(this._styleUtils, 'configureGHSDataFilter', (evt, [{ block }]) => {
-            const ghsDataFilter = this.editor.plugins.get('DataFilter');
-            ghsDataFilter.loadAllowedConfig(block
-                .filter(definition => definition.element == 'figcaption')
-                .map(definition => ({ name: 'caption', classes: definition.classes })));
-        });
-    }
-    /**
-     * Checks if this plugin's custom logic should be applied for defintion-block pair.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block Block element to check if should be styled.
-     * @returns True if the defintion-block pair meet the plugin criteria, false otherwise.
-     */
-    _isApplicable(definition, block) {
-        if (['td', 'th'].includes(definition.element)) {
-            return block.name == 'tableCell';
-        }
-        if (['thead', 'tbody'].includes(definition.element)) {
-            return block.name == 'table';
-        }
-        return false;
-    }
-    /**
-     * Checks if the style definition should be applied to selected block.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block Block element to check if should be styled.
-     * @returns True if the block should be style with the style description, false otherwise.
-     */
-    _isStyleEnabledForBlock(definition, block) {
-        if (['td', 'th'].includes(definition.element)) {
-            const location = this._tableUtils.getCellLocation(block);
-            const tableRow = block.parent;
-            const table = tableRow.parent;
-            const headingRows = table.getAttribute('headingRows') || 0;
-            const headingColumns = table.getAttribute('headingColumns') || 0;
-            const isHeadingCell = location.row < headingRows || location.column < headingColumns;
-            if (definition.element == 'th') {
-                return isHeadingCell;
-            }
-            else {
-                return !isHeadingCell;
-            }
-        }
-        if (['thead', 'tbody'].includes(definition.element)) {
-            const headingRows = block.getAttribute('headingRows') || 0;
-            if (definition.element == 'thead') {
-                return headingRows > 0;
-            }
-            else {
-                return headingRows < this._tableUtils.getRows(block);
-            }
-        }
-        /* istanbul ignore next -- @preserve */
-        return false;
-    }
-    /**
-     * Gets all blocks that the style should be applied to.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block A block element from selection.
-     * @returns An array with the block that was passed as an argument if meets the criteria, null otherwise.
-     */
-    _getAffectedBlocks(definition, block) {
-        if (!this._isStyleEnabledForBlock(definition, block)) {
-            return null;
-        }
-        return [block];
-    }
-}

package/src/style.js

@@ -1,36 +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 style/style
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { StyleUI } from './styleui.js';
-import { StyleEditing } from './styleediting.js';
-/**
- * The style plugin.
- *
- * This is a "glue" plugin that loads the {@link module:style/styleediting~StyleEditing style editing feature}
- * and {@link module:style/styleui~StyleUI style UI feature}.
- */
-export class Style extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'Style';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [StyleEditing, StyleUI];
-    }
-}

package/src/stylecommand.js

@@ -1,208 +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';
-import { logWarning, first } from 'ckeditor5/src/utils.js';
-import { StyleUtils } from './styleutils.js';
-/**
- * Style command.
- *
- * Applies and removes styles from selection and elements.
- */
-export class StyleCommand extends Command {
-    /**
-     * Normalized definitions of the styles.
-     */
-    _styleDefinitions;
-    /**
-     * The StyleUtils plugin.
-     */
-    _styleUtils;
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor on which this command will be used.
-     * @param styleDefinitions Normalized definitions of the styles.
-     */
-    constructor(editor, styleDefinitions) {
-        super(editor);
-        this.set('value', []);
-        this.set('enabledStyles', []);
-        this._styleDefinitions = styleDefinitions;
-        this._styleUtils = this.editor.plugins.get(StyleUtils);
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const value = new Set();
-        const enabledStyles = new Set();
-        // Inline styles.
-        for (const definition of this._styleDefinitions.inline) {
-            // Check if this inline style is enabled.
-            if (this._styleUtils.isStyleEnabledForInlineSelection(definition, selection)) {
-                enabledStyles.add(definition.name);
-            }
-            // Check if this inline style is active.
-            if (this._styleUtils.isStyleActiveForInlineSelection(definition, selection)) {
-                value.add(definition.name);
-            }
-        }
-        // Block styles.
-        const firstBlock = first(selection.getSelectedBlocks()) || selection.getFirstPosition().parent;
-        if (firstBlock) {
-            const ancestorBlocks = firstBlock.getAncestors({ includeSelf: true, parentFirst: true });
-            for (const block of ancestorBlocks) {
-                if (block.is('rootElement')) {
-                    break;
-                }
-                for (const definition of this._styleDefinitions.block) {
-                    // Check if this block style is enabled.
-                    if (!this._styleUtils.isStyleEnabledForBlock(definition, block)) {
-                        continue;
-                    }
-                    enabledStyles.add(definition.name);
-                    // Check if this block style is active.
-                    if (this._styleUtils.isStyleActiveForBlock(definition, block)) {
-                        value.add(definition.name);
-                    }
-                }
-                // E.g. reached a model table when the selection is in a cell. The command should not modify
-                // ancestors of a table.
-                if (model.schema.isObject(block)) {
-                    break;
-                }
-            }
-        }
-        this.enabledStyles = Array.from(enabledStyles).sort();
-        this.isEnabled = this.enabledStyles.length > 0;
-        this.value = this.isEnabled ? Array.from(value).sort() : [];
-    }
-    /**
-     * Executes the command – applies the style classes to the selection or removes it from the selection.
-     *
-     * If the command value already contains the requested style, it will remove the style classes. Otherwise, it will set it.
-     *
-     * The execution result differs, depending on the {@link module:engine/model/document~ModelDocument#selection} and the
-     * style type (inline or block):
-     *
-     * * When applying inline styles:
-     *   * If the selection is on a range, the command applies the style classes to all nodes in that range.
-     *   * If the selection is collapsed in a non-empty node, the command applies the style classes to the
-     * {@link module:engine/model/document~ModelDocument#selection}.
-     *
-     * * When applying block styles:
-     *   * If the selection is on a range, the command applies the style classes to the nearest block parent element.
-     *
-     * @fires execute
-     * @param options Command options.
-     * @param options.styleName Style name matching the one defined in the
-     * {@link module:style/styleconfig~StyleConfig#definitions configuration}.
-     * @param options.forceValue Whether the command should add given style (`true`) or remove it (`false`) from the selection.
-     * If not set (default), the command will toggle the style basing on the first selected node. Note, that this will not force
-     * setting a style on an element that cannot receive given style.
-     */
-    execute({ styleName, forceValue }) {
-        if (!this.enabledStyles.includes(styleName)) {
-            /**
-             * Style command can be executed only with a correct style name.
-             *
-             * This warning may be caused by:
-             *
-             * * passing a name that is not specified in the {@link module:style/styleconfig~StyleConfig#definitions configuration}
-             * (e.g. a CSS class name),
-             * * when trying to apply a style that is not allowed on a given element.
-             *
-             * @error style-command-executed-with-incorrect-style-name
-             */
-            logWarning('style-command-executed-with-incorrect-style-name');
-            return;
-        }
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const htmlSupport = this.editor.plugins.get('GeneralHtmlSupport');
-        const allDefinitions = [
-            ...this._styleDefinitions.inline,
-            ...this._styleDefinitions.block
-        ];
-        const activeDefinitions = allDefinitions.filter(({ name }) => this.value.includes(name));
-        const definition = allDefinitions.find(({ name }) => name == styleName);
-        const shouldAddStyle = forceValue === undefined ? !this.value.includes(definition.name) : forceValue;
-        model.change(() => {
-            let selectables;
-            if (isBlockStyleDefinition(definition)) {
-                selectables = this._findAffectedBlocks(getBlocksFromSelection(selection), definition);
-            }
-            else {
-                selectables = [this._styleUtils.getAffectedInlineSelectable(definition, selection)];
-            }
-            for (const selectable of selectables) {
-                if (shouldAddStyle) {
-                    htmlSupport.addModelHtmlClass(definition.element, definition.classes, selectable);
-                }
-                else {
-                    htmlSupport.removeModelHtmlClass(definition.element, getDefinitionExclusiveClasses(activeDefinitions, definition), selectable);
-                }
-            }
-        });
-    }
-    /**
-     * Returns a set of elements that should be affected by the block-style change.
-     */
-    _findAffectedBlocks(selectedBlocks, definition) {
-        const blocks = new Set();
-        for (const selectedBlock of selectedBlocks) {
-            const ancestorBlocks = selectedBlock.getAncestors({ includeSelf: true, parentFirst: true });
-            for (const block of ancestorBlocks) {
-                if (block.is('rootElement')) {
-                    break;
-                }
-                const affectedBlocks = this._styleUtils.getAffectedBlocks(definition, block);
-                if (affectedBlocks) {
-                    for (const affectedBlock of affectedBlocks) {
-                        blocks.add(affectedBlock);
-                    }
-                    break;
-                }
-            }
-        }
-        return blocks;
-    }
-}
-/**
- * Returns classes that are defined only in the supplied definition and not in any other active definition. It's used
- * to ensure that classes used by other definitions are preserved when a style is removed. See #11748.
- *
- * @param activeDefinitions All currently active definitions affecting selected element(s).
- * @param definition Definition whose classes will be compared with all other active definition classes.
- * @returns Array of classes exclusive to the supplied definition.
- */
-function getDefinitionExclusiveClasses(activeDefinitions, definition) {
-    return activeDefinitions.reduce((classes, currentDefinition) => {
-        if (currentDefinition.name === definition.name) {
-            return classes;
-        }
-        return classes.filter(className => !currentDefinition.classes.includes(className));
-    }, definition.classes);
-}
-/**
- * Checks if provided style definition is of type block.
- */
-function isBlockStyleDefinition(definition) {
-    return 'isBlock' in definition;
-}
-/**
- * Gets block elements from selection. If there are none, returns first selected element.
- * @param selection Current document's selection.
- * @returns Selected blocks if there are any, first selected element otherwise.
- */
-function getBlocksFromSelection(selection) {
-    const blocks = Array.from(selection.getSelectedBlocks());
-    if (blocks.length) {
-        return blocks;
-    }
-    return [selection.getFirstPosition().parent];
-}

package/src/styleconfig.js

@@ -1,5 +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
- */
-export {};

package/src/styleediting.js

@@ -1,52 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module style/styleediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { StyleCommand } from './stylecommand.js';
-import { StyleUtils } from './styleutils.js';
-import { ListStyleSupport } from './integrations/list.js';
-import { TableStyleSupport } from './integrations/table.js';
-import { LinkStyleSupport } from './integrations/link.js';
-/**
- * The style engine feature.
- *
- * It configures the {@glink features/html/general-html-support General HTML Support feature} based on
- * {@link module:style/styleconfig~StyleConfig#definitions configured style definitions} and introduces the
- * {@link module:style/stylecommand~StyleCommand style command} that applies styles to the content of the document.
- */
-export class StyleEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StyleEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return ['GeneralHtmlSupport', StyleUtils, ListStyleSupport, TableStyleSupport, LinkStyleSupport];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const dataSchema = editor.plugins.get('DataSchema');
-        const styleUtils = editor.plugins.get('StyleUtils');
-        const styleDefinitions = editor.config.get('style.definitions');
-        const normalizedStyleDefinitions = styleUtils.normalizeConfig(dataSchema, styleDefinitions);
-        editor.commands.add('style', new StyleCommand(editor, normalizedStyleDefinitions));
-        styleUtils.configureGHSDataFilter(normalizedStyleDefinitions);
-    }
-}

package/src/styleui.js

@@ -1,100 +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 style/styleui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { createDropdown } from 'ckeditor5/src/ui.js';
-import { StylePanelView } from './ui/stylepanelview.js';
-import { StyleUtils } from './styleutils.js';
-import '../theme/style.css';
-/**
- * The UI plugin of the style feature .
- *
- * It registers the `'style'` UI dropdown in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
- * that displays a grid of styles and allows changing styles of the content.
- */
-export class StyleUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StyleUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [StyleUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const dataSchema = editor.plugins.get('DataSchema');
-        const styleUtils = editor.plugins.get('StyleUtils');
-        const styleDefinitions = editor.config.get('style.definitions');
-        const normalizedStyleDefinitions = styleUtils.normalizeConfig(dataSchema, styleDefinitions);
-        // Add the dropdown to the component factory.
-        editor.ui.componentFactory.add('style', locale => {
-            const t = locale.t;
-            const dropdown = createDropdown(locale);
-            const styleCommand = editor.commands.get('style');
-            dropdown.once('change:isOpen', () => {
-                const panelView = new StylePanelView(locale, normalizedStyleDefinitions);
-                // Put the styles panel is the dropdown.
-                dropdown.panelView.children.add(panelView);
-                // Close the dropdown when a style is selected in the styles panel.
-                panelView.delegate('execute').to(dropdown);
-                // Bind the state of the styles panel to the command.
-                panelView.bind('activeStyles').to(styleCommand, 'value');
-                panelView.bind('enabledStyles').to(styleCommand, 'enabledStyles');
-            });
-            // The entire dropdown will be disabled together with the command (e.g. when the editor goes read-only).
-            dropdown.bind('isEnabled').to(styleCommand);
-            // This dropdown has no icon. It displays text label depending on the selection.
-            dropdown.buttonView.withText = true;
-            // The label of the dropdown is dynamic and depends on how many styles are active at a time.
-            dropdown.buttonView.bind('label').to(styleCommand, 'value', value => {
-                if (value.length > 1) {
-                    return t('Multiple styles');
-                }
-                else if (value.length === 1) {
-                    return value[0];
-                }
-                else {
-                    return t('Styles');
-                }
-            });
-            // The dropdown has a static CSS class for easy customization. There's another CSS class
-            // that gets displayed when multiple styles are active at a time allowing visual customization of
-            // the label.
-            dropdown.bind('class').to(styleCommand, 'value', value => {
-                const classes = [
-                    'ck-style-dropdown'
-                ];
-                if (value.length > 1) {
-                    classes.push('ck-style-dropdown_multiple-active');
-                }
-                return classes.join(' ');
-            });
-            // Execute the command when a style is selected in the styles panel.
-            // Also focus the editable after executing the command.
-            // It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
-            dropdown.on('execute', evt => {
-                editor.execute('style', { styleName: evt.source.styleDefinition.name });
-                editor.editing.view.focus();
-            });
-            return dropdown;
-        });
-    }
-}