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

package/src/styleutils.js

@@ -1,275 +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/styleutils
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { isObject } from 'es-toolkit/compat';
-// These are intermediate element names that can't be rendered as style preview because they don't make sense standalone.
-const NON_PREVIEWABLE_ELEMENT_NAMES = [
-    'caption', 'colgroup', 'dd', 'dt', 'figcaption', 'legend', 'li', 'optgroup', 'option', 'rp',
-    'rt', 'summary', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr'
-];
-export class StyleUtils extends Plugin {
-    _htmlSupport;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StyleUtils';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this.decorate('isStyleEnabledForBlock');
-        this.decorate('isStyleActiveForBlock');
-        this.decorate('getAffectedBlocks');
-        this.decorate('isStyleEnabledForInlineSelection');
-        this.decorate('isStyleActiveForInlineSelection');
-        this.decorate('getAffectedInlineSelectable');
-        this.decorate('getStylePreview');
-        this.decorate('configureGHSDataFilter');
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        this._htmlSupport = this.editor.plugins.get('GeneralHtmlSupport');
-    }
-    /**
-     * Normalizes {@link module:style/styleconfig~StyleConfig#definitions} in the configuration of the styles feature.
-     * The structure of normalized styles looks as follows:
-     *
-     * ```ts
-     * {
-     * 	block: [
-     * 		<module:style/style~StyleDefinition>,
-     * 		<module:style/style~StyleDefinition>,
-     * 		...
-     * 	],
-     * 	inline: [
-     * 		<module:style/style~StyleDefinition>,
-     * 		<module:style/style~StyleDefinition>,
-     * 		...
-     * 	]
-     * }
-     * ```
-     *
-     * @returns An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
-     */
-    normalizeConfig(dataSchema, styleDefinitions = []) {
-        const normalizedDefinitions = {
-            block: [],
-            inline: []
-        };
-        for (const definition of styleDefinitions) {
-            const modelElements = [];
-            const ghsAttributes = [];
-            for (const ghsDefinition of dataSchema.getDefinitionsForView(definition.element)) {
-                const appliesToBlock = 'appliesToBlock' in ghsDefinition ? ghsDefinition.appliesToBlock : false;
-                if (ghsDefinition.isBlock || appliesToBlock) {
-                    if (typeof appliesToBlock == 'string') {
-                        modelElements.push(appliesToBlock);
-                    }
-                    else if (ghsDefinition.isBlock) {
-                        const ghsBlockDefinition = ghsDefinition;
-                        modelElements.push(ghsDefinition.model);
-                        if (ghsBlockDefinition.paragraphLikeModel) {
-                            modelElements.push(ghsBlockDefinition.paragraphLikeModel);
-                        }
-                    }
-                }
-                else {
-                    ghsAttributes.push(ghsDefinition.model);
-                }
-            }
-            const previewTemplate = this.getStylePreview(definition, [
-                { text: 'AaBbCcDdEeFfGgHhIiJj' }
-            ]);
-            if (modelElements.length) {
-                normalizedDefinitions.block.push({
-                    ...definition,
-                    previewTemplate,
-                    modelElements,
-                    isBlock: true
-                });
-            }
-            else {
-                normalizedDefinitions.inline.push({
-                    ...definition,
-                    previewTemplate,
-                    ghsAttributes
-                });
-            }
-        }
-        return normalizedDefinitions;
-    }
-    /**
-     * Verifies if the given style is applicable to the provided block element.
-     *
-     * @internal
-     */
-    isStyleEnabledForBlock(definition, block) {
-        const model = this.editor.model;
-        const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
-        if (!model.schema.checkAttribute(block, attributeName)) {
-            return false;
-        }
-        return definition.modelElements.includes(block.name);
-    }
-    /**
-     * Returns true if the given style is applied to the specified block element.
-     *
-     * @internal
-     */
-    isStyleActiveForBlock(definition, block) {
-        const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
-        const ghsAttributeValue = block.getAttribute(attributeName);
-        return this.hasAllClasses(ghsAttributeValue, definition.classes);
-    }
-    /**
-     * Returns an array of block elements that style should be applied to.
-     *
-     * @internal
-     */
-    getAffectedBlocks(definition, block) {
-        if (definition.modelElements.includes(block.name)) {
-            return [block];
-        }
-        return null;
-    }
-    /**
-     * Verifies if the given style is applicable to the provided document selection.
-     *
-     * @internal
-     */
-    isStyleEnabledForInlineSelection(definition, selection) {
-        const model = this.editor.model;
-        for (const ghsAttributeName of definition.ghsAttributes) {
-            if (model.schema.checkAttributeInSelection(selection, ghsAttributeName)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Returns true if the given style is applied to the specified document selection.
-     *
-     * @internal
-     */
-    isStyleActiveForInlineSelection(definition, selection) {
-        for (const ghsAttributeName of definition.ghsAttributes) {
-            const ghsAttributeValue = this._getValueFromFirstAllowedNode(selection, ghsAttributeName);
-            if (this.hasAllClasses(ghsAttributeValue, definition.classes)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Returns a selectable that given style should be applied to.
-     *
-     * @internal
-     */
-    getAffectedInlineSelectable(definition, selection) {
-        return selection;
-    }
-    /**
-     * Returns the `TemplateDefinition` used by styles dropdown to render style preview.
-     *
-     * @internal
-     */
-    getStylePreview(definition, children) {
-        const { element, classes } = definition;
-        return {
-            tag: isPreviewable(element) ? element : 'div',
-            attributes: {
-                class: classes
-            },
-            children
-        };
-    }
-    /**
-     * Verifies if all classes are present in the given GHS attribute.
-     *
-     * @internal
-     */
-    hasAllClasses(ghsAttributeValue, classes) {
-        return isObject(ghsAttributeValue) &&
-            hasClassesProperty(ghsAttributeValue) &&
-            classes.every(className => ghsAttributeValue.classes.includes(className));
-    }
-    /**
-     * This is where the styles feature configures the GHS feature. This method translates normalized
-     * {@link module:style/styleconfig~StyleDefinition style definitions} to
-     * {@link module:engine/view/matcher~MatcherObjectPattern matcher patterns} and feeds them to the GHS
-     * {@link module:html-support/datafilter~DataFilter} plugin.
-     *
-     * @internal
-     */
-    configureGHSDataFilter({ block, inline }) {
-        const ghsDataFilter = this.editor.plugins.get('DataFilter');
-        ghsDataFilter.loadAllowedConfig(block.map(normalizedStyleDefinitionToMatcherPattern));
-        ghsDataFilter.loadAllowedConfig(inline.map(normalizedStyleDefinitionToMatcherPattern));
-    }
-    /**
-     * Checks the attribute value of the first node in the selection that allows the attribute.
-     * For the collapsed selection, returns the selection attribute.
-     *
-     * @param selection The document selection.
-     * @param attributeName Name of the GHS attribute.
-     * @returns The attribute value.
-     */
-    _getValueFromFirstAllowedNode(selection, attributeName) {
-        const model = this.editor.model;
-        const schema = model.schema;
-        if (selection.isCollapsed) {
-            return selection.getAttribute(attributeName);
-        }
-        for (const range of selection.getRanges()) {
-            for (const item of range.getItems()) {
-                if (schema.checkAttribute(item, attributeName)) {
-                    return item.getAttribute(attributeName);
-                }
-            }
-        }
-        return null;
-    }
-}
-/**
- * Checks if given object has `classes` property which is an array.
- *
- * @param obj Object to check.
- */
-function hasClassesProperty(obj) {
-    return Boolean(obj.classes) && Array.isArray(obj.classes);
-}
-/**
- * Decides whether an element should be created in the preview or a substitute `<div>` should
- * be used instead. This avoids previewing a standalone `<td>`, `<li>`, etc. without a parent.
- *
- * @param elementName Name of the element
- * @returns Boolean indicating whether the element can be rendered.
- */
-function isPreviewable(elementName) {
-    return !NON_PREVIEWABLE_ELEMENT_NAMES.includes(elementName);
-}
-/**
- * Translates a normalized style definition to a view matcher pattern.
- */
-function normalizedStyleDefinitionToMatcherPattern({ element, classes }) {
-    return {
-        name: element,
-        classes
-    };
-}

package/src/ui/stylegridbuttonview.js

@@ -1,65 +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 { ButtonView, View } from 'ckeditor5/src/ui.js';
-/**
- * A class representing an individual button (style) in the grid. Renders a rich preview of the style.
- *
- * @internal
- */
-export class StyleGridButtonView extends ButtonView {
-    /**
-     * Definition of the style the button will apply when executed.
-     */
-    styleDefinition;
-    /**
-     * The view rendering the preview of the style.
-     */
-    previewView;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridbuttonview~StyleGridButtonView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinition Definition of the style.
-     */
-    constructor(locale, styleDefinition) {
-        super(locale);
-        this.styleDefinition = styleDefinition;
-        this.previewView = this._createPreview();
-        this.set({
-            label: styleDefinition.name,
-            class: 'ck-style-grid__button',
-            withText: true
-        });
-        this.extendTemplate({
-            attributes: {
-                role: 'option'
-            }
-        });
-        this.children.add(this.previewView, 0);
-    }
-    /**
-     * Creates the view representing the preview of the style.
-     */
-    _createPreview() {
-        const previewView = new View(this.locale);
-        previewView.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset_all-excluded',
-                    'ck-style-grid__button__preview',
-                    'ck-content'
-                ],
-                // The preview "AaBbCcDdEeFfGgHhIiJj" should not be read by screen readers because it is purely presentational.
-                'aria-hidden': 'true'
-            },
-            children: [
-                this.styleDefinition.previewTemplate
-            ]
-        });
-        return previewView;
-    }
-}

package/src/ui/stylegridview.js

@@ -1,103 +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/ui/stylegridview
- */
-import { View, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { StyleGridButtonView } from './stylegridbuttonview.js';
-import '../../theme/stylegrid.css';
-/**
- * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
- * Allows users to select a style.
- *
- * @internal
- */
-export class StyleGridView extends View {
-    /**
-     * Tracks information about the DOM focus in the view.
-     */
-    focusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * A collection of style {@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}.
-     */
-    children;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Definitions of the styles.
-     */
-    constructor(locale, styleDefinitions) {
-        super(locale);
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.set('activeStyles', []);
-        this.set('enabledStyles', []);
-        this.children = this.createCollection();
-        this.children.delegate('execute').to(this);
-        for (const definition of styleDefinitions) {
-            const gridTileView = new StyleGridButtonView(locale, definition);
-            this.children.add(gridTileView);
-        }
-        this.on('change:activeStyles', () => {
-            for (const child of this.children) {
-                child.isOn = this.activeStyles.includes(child.styleDefinition.name);
-            }
-        });
-        this.on('change:enabledStyles', () => {
-            for (const child of this.children) {
-                child.isEnabled = this.enabledStyles.includes(child.styleDefinition.name);
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-style-grid'
-                ],
-                role: 'listbox'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        for (const child of this.children) {
-            this.focusTracker.add(child.element);
-        }
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.children,
-            numberOfColumns: 3,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-        // Start listening for the keystrokes coming from the grid view.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * Focuses the first style button in the grid.
-     */
-    focus() {
-        this.children.first.focus();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-}

package/src/ui/stylegroupview.js

@@ -1,55 +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/ui/stylegroupview
- */
-import { LabelView, View } from 'ckeditor5/src/ui.js';
-import { StyleGridView } from './stylegridview.js';
-import '../../theme/stylegroup.css';
-/**
- * A class representing a group of styles (e.g. "block" or "inline").
- *
- * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
- *
- * @internal
- */
-export class StyleGroupView extends View {
-    /**
-     * The styles grid of the group.
-     */
-    gridView;
-    /**
-     * The label of the group.
-     */
-    labelView;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param label The localized label of the group.
-     * @param styleDefinitions Definitions of the styles in the group.
-     */
-    constructor(locale, label, styleDefinitions) {
-        super(locale);
-        this.labelView = new LabelView(locale);
-        this.labelView.text = label;
-        this.gridView = new StyleGridView(locale, styleDefinitions);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-style-panel__style-group'
-                ],
-                role: 'group',
-                'aria-labelledby': this.labelView.id
-            },
-            children: [
-                this.labelView,
-                this.gridView
-            ]
-        });
-    }
-}

package/src/ui/stylepanelview.js

@@ -1,125 +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/ui/stylepanelview
- */
-import { FocusCycler, View, ViewCollection } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { StyleGroupView } from './stylegroupview.js';
-import '../../theme/stylepanel.css';
-/**
- * A class representing a panel with available content styles. It renders styles in button grids, grouped
- * in categories.
- *
- * @internal
- */
-export class StylePanelView extends View {
-    /**
-     * Tracks information about DOM focus in the panel.
-     */
-    focusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * A collection of panel children.
-     */
-    children;
-    /**
-     * A view representing block styles group.
-     */
-    blockStylesGroupView;
-    /**
-     * A view representing inline styles group
-     */
-    inlineStylesGroupView;
-    /**
-     * A collection of views that can be focused in the panel.
-     */
-    _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the panel.
-     */
-    _focusCycler;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Normalized definitions of the styles.
-     */
-    constructor(locale, styleDefinitions) {
-        super(locale);
-        const t = locale.t;
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.children = this.createCollection();
-        this.blockStylesGroupView = new StyleGroupView(locale, t('Block styles'), styleDefinitions.block);
-        this.inlineStylesGroupView = new StyleGroupView(locale, t('Text styles'), styleDefinitions.inline);
-        this.set('activeStyles', []);
-        this.set('enabledStyles', []);
-        this._focusables = new ViewCollection();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate style groups backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
-                focusPrevious: ['shift + tab'],
-                // Navigate style groups forward using the <kbd>Tab</kbd> key.
-                focusNext: ['tab']
-            }
-        });
-        if (styleDefinitions.block.length) {
-            this.children.add(this.blockStylesGroupView);
-        }
-        if (styleDefinitions.inline.length) {
-            this.children.add(this.inlineStylesGroupView);
-        }
-        this.blockStylesGroupView.gridView.delegate('execute').to(this);
-        this.inlineStylesGroupView.gridView.delegate('execute').to(this);
-        this.blockStylesGroupView.gridView
-            .bind('activeStyles', 'enabledStyles')
-            .to(this, 'activeStyles', 'enabledStyles');
-        this.inlineStylesGroupView.gridView
-            .bind('activeStyles', 'enabledStyles')
-            .to(this, 'activeStyles', 'enabledStyles');
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-style-panel'
-                ]
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Register the views as focusable.
-        this._focusables.add(this.blockStylesGroupView.gridView);
-        this._focusables.add(this.inlineStylesGroupView.gridView);
-        // Register the views in the focus tracker.
-        this.focusTracker.add(this.blockStylesGroupView.gridView.element);
-        this.focusTracker.add(this.inlineStylesGroupView.gridView.element);
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * Focuses the first focusable element in the panel.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the last focusable element in the panel.
-     */
-    focusLast() {
-        this._focusCycler.focusLast();
-    }
-}

package/theme/style.css

@@ -1,4 +0,0 @@
-/*
- * 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
- */

package/theme/stylegrid.css

@@ -1,29 +0,0 @@
-/*
- * 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
- */
-
-:root {
-	--ck-style-panel-columns: 3;
-}
-
-.ck.ck-style-panel .ck-style-grid {
-	display: grid;
-	grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
-	justify-content: start;
-
-	& .ck-style-grid__button {
-		display: flex;
-		justify-content: space-between;
-		flex-direction: column;
-
-		& .ck-style-grid__button__preview {
-			display: flex;
-			align-content: center;
-			justify-content: flex-start;
-			align-items: center;
-			flex-grow: 1;
-			flex-basis: 100%;
-		}
-	}
-}

package/theme/stylegroup.css

@@ -1,4 +0,0 @@
-/*
- * 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
- */

package/theme/stylepanel.css

@@ -1,5 +0,0 @@
-/*
- * 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
- */
-