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

package/src/fontsize.js

@@ -1,49 +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 font/fontsize
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FontSizeEditing } from './fontsize/fontsizeediting.js';
-import { FontSizeUI } from './fontsize/fontsizeui.js';
-import { normalizeOptions } from './fontsize/utils.js';
-/**
- * The font size plugin.
- *
- * For a detailed overview, check the {@glink features/font font feature} documentation
- * and the {@glink api/font package page}.
- *
- * This is a "glue" plugin which loads the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} and
- * {@link module:font/fontsize/fontsizeui~FontSizeUI} features in the editor.
- */
-export class FontSize extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [FontSizeEditing, FontSizeUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontSize';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * Normalizes and translates the {@link module:font/fontconfig~FontSizeConfig#options configuration options}
-     * to the {@link module:font/fontconfig~FontSizeOption} format.
-     *
-     * @param options An array of options taken from the configuration.
-     */
-    normalizeSizeOptions(options) {
-        return normalizeOptions(options);
-    }
-}

package/src/index.js

@@ -1,30 +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 font
- */
-export { Font } from './font.js';
-export { FontBackgroundColor } from './fontbackgroundcolor.js';
-export { FontColor } from './fontcolor.js';
-export { FontFamily } from './fontfamily.js';
-export { FontSize } from './fontsize.js';
-export { FontCommand } from './fontcommand.js';
-export { FontBackgroundColorEditing } from './fontbackgroundcolor/fontbackgroundcolorediting.js';
-export { FontBackgroundColorUI } from './fontbackgroundcolor/fontbackgroundcolorui.js';
-export { FontColorEditing } from './fontcolor/fontcolorediting.js';
-export { FontColorUI } from './fontcolor/fontcolorui.js';
-export { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
-export { FontFamilyUI } from './fontfamily/fontfamilyui.js';
-export { FontSizeEditing } from './fontsize/fontsizeediting.js';
-export { FontSizeUI } from './fontsize/fontsizeui.js';
-export { FontBackgroundColorCommand } from './fontbackgroundcolor/fontbackgroundcolorcommand.js';
-export { FontColorCommand } from './fontcolor/fontcolorcommand.js';
-export { FontFamilyCommand } from './fontfamily/fontfamilycommand.js';
-export { FontSizeCommand } from './fontsize/fontsizecommand.js';
-export { FontColorUIBase } from './ui/colorui.js';
-export { buildDefinition as _buildFontDefinition, renderUpcastAttribute as _renderUpcastFontColorAttribute, renderDowncastElement as _renderDowncastFontElement, addColorSelectorToDropdown as _addFontColorSelectorToDropdown } from './utils.js';
-export { normalizeOptions as _normalizeFontFamilyOptions } from './fontfamily/utils.js';
-export { normalizeOptions as _normalizeFontSizeOptions } from './fontsize/utils.js';
-import './augmentation.js';

package/src/ui/colorui.js

@@ -1,201 +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 font/ui/colorui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen, MenuBarMenuView, ColorSelectorView } from 'ckeditor5/src/ui.js';
-import { addColorSelectorToDropdown } from '../utils.js';
-/**
- * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
- *
- * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
- * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- */
-export class FontColorUIBase extends Plugin {
-    /**
-     * The name of the command which will be executed when a color tile is clicked.
-     */
-    commandName;
-    /**
-     * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
-     * Also the configuration scope name in `editor.config`.
-     */
-    componentName;
-    /**
-     * The SVG icon used by the dropdown.
-     */
-    icon;
-    /**
-     * The label used by the dropdown.
-     */
-    dropdownLabel;
-    /**
-     * The number of columns in the color grid.
-     */
-    columns;
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured
-     * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
-     *
-     * @param editor An editor instance.
-     * @param config The configuration object.
-     * @param config.commandName The name of the command which will be executed when a color tile is clicked.
-     * @param config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
-     * and the configuration scope name in `editor.config`.
-     * @param config.icon The SVG icon used by the dropdown.
-     * @param config.dropdownLabel The label used by the dropdown.
-     */
-    constructor(editor, { commandName, componentName, icon, dropdownLabel }) {
-        super(editor);
-        this.commandName = commandName;
-        this.componentName = componentName;
-        this.icon = icon;
-        this.dropdownLabel = dropdownLabel;
-        this.columns = editor.config.get(`${this.componentName}.columns`);
-    }
-    /**
-    * @inheritDoc
-    */
-    init() {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const t = locale.t;
-        const command = editor.commands.get(this.commandName);
-        const componentConfig = editor.config.get(this.componentName);
-        const colorsConfig = normalizeColorOptions(componentConfig.colors);
-        const localizedColors = getLocalizedColorOptions(locale, colorsConfig);
-        const documentColorsCount = componentConfig.documentColors;
-        const hasColorPicker = componentConfig.colorPicker !== false;
-        // Register the UI component.
-        editor.ui.componentFactory.add(this.componentName, locale => {
-            const dropdownView = createDropdown(locale);
-            // Font color dropdown rendering is deferred once it gets open to improve performance (#6192).
-            let dropdownContentRendered = false;
-            const colorSelectorView = addColorSelectorToDropdown({
-                dropdownView,
-                colors: localizedColors.map(option => ({
-                    label: option.label,
-                    color: option.model,
-                    options: {
-                        hasBorder: option.hasBorder
-                    }
-                })),
-                columns: this.columns,
-                removeButtonLabel: t('Remove color'),
-                colorPickerLabel: t('Color picker'),
-                documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
-                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
-                colorPickerViewConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
-            });
-            colorSelectorView.bind('selectedColor').to(command, 'value');
-            dropdownView.buttonView.set({
-                label: this.dropdownLabel,
-                icon: this.icon,
-                tooltip: true
-            });
-            dropdownView.extendTemplate({
-                attributes: {
-                    class: 'ck-color-ui-dropdown'
-                }
-            });
-            dropdownView.bind('isEnabled').to(command);
-            colorSelectorView.on('execute', (evt, data) => {
-                if (dropdownView.isOpen) {
-                    editor.execute(this.commandName, {
-                        value: data.value,
-                        batch: this._undoStepBatch
-                    });
-                }
-                if (data.source !== 'colorPicker') {
-                    editor.editing.view.focus();
-                }
-                if (data.source === 'colorPickerSaveButton') {
-                    dropdownView.isOpen = false;
-                }
-            });
-            colorSelectorView.on('colorPicker:show', () => {
-                this._undoStepBatch = editor.model.createBatch();
-            });
-            colorSelectorView.on('colorPicker:cancel', () => {
-                if (this._undoStepBatch.operations.length) {
-                    // We need to close the dropdown before the undo batch.
-                    // Otherwise, FontColorUIBase treats undo as a selected color change,
-                    // propagating the update to the whole selection.
-                    // That's an issue if spans with various colors were selected.
-                    dropdownView.isOpen = false;
-                    editor.execute('undo', this._undoStepBatch);
-                }
-                editor.editing.view.focus();
-            });
-            dropdownView.on('change:isOpen', (evt, name, isVisible) => {
-                if (!dropdownContentRendered) {
-                    dropdownContentRendered = true;
-                    dropdownView.colorSelectorView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        colorSelectorView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    colorSelectorView.updateSelectedColors();
-                    colorSelectorView.showColorGridsFragment();
-                }
-            });
-            // Accessibility: focus the first active color when opening the dropdown.
-            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorSelectorView.colorGridsFragmentView.staticColorsGrid.items.find((item) => item.isOn));
-            return dropdownView;
-        });
-        // Register menu bar button..
-        editor.ui.componentFactory.add(`menuBar:${this.componentName}`, locale => {
-            const menuView = new MenuBarMenuView(locale);
-            menuView.buttonView.set({
-                label: this.dropdownLabel,
-                icon: this.icon
-            });
-            menuView.bind('isEnabled').to(command);
-            // Font color sub-menu rendering is deferred once it gets open to improve performance (#6192).
-            let contentRendered = false;
-            const colorSelectorView = new ColorSelectorView(locale, {
-                colors: localizedColors.map(option => ({
-                    label: option.label,
-                    color: option.model,
-                    options: {
-                        hasBorder: option.hasBorder
-                    }
-                })),
-                columns: this.columns,
-                removeButtonLabel: t('Remove color'),
-                colorPickerLabel: t('Color picker'),
-                documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
-                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
-                colorPickerViewConfig: false
-            });
-            colorSelectorView.bind('selectedColor').to(command, 'value');
-            colorSelectorView.delegate('execute').to(menuView);
-            colorSelectorView.on('execute', (evt, data) => {
-                editor.execute(this.commandName, {
-                    value: data.value,
-                    batch: this._undoStepBatch
-                });
-                editor.editing.view.focus();
-            });
-            menuView.on('change:isOpen', (evt, name, isVisible) => {
-                if (!contentRendered) {
-                    contentRendered = true;
-                    colorSelectorView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        colorSelectorView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    colorSelectorView.updateSelectedColors();
-                    colorSelectorView.showColorGridsFragment();
-                }
-            });
-            menuView.panelView.children.add(colorSelectorView);
-            return menuView;
-        });
-    }
-}

package/src/utils.js

@@ -1,107 +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 { ColorSelectorView } from 'ckeditor5/src/ui.js';
-/**
- * The name of the font size plugin.
- */
-export const FONT_SIZE = 'fontSize';
-/**
- * The name of the font family plugin.
- */
-export const FONT_FAMILY = 'fontFamily';
-/**
- * The name of the font color plugin.
- */
-export const FONT_COLOR = 'fontColor';
-/**
- * The name of the font background color plugin.
- */
-export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
-/**
- * Builds a proper converter definition out of input data.
- *
- * @internal
- */
-export function buildDefinition(modelAttributeKey, options) {
-    const definition = {
-        model: {
-            key: modelAttributeKey,
-            values: []
-        },
-        view: {},
-        upcastAlso: {}
-    };
-    for (const option of options) {
-        definition.model.values.push(option.model);
-        definition.view[option.model] = option.view;
-        if (option.upcastAlso) {
-            definition.upcastAlso[option.model] = option.upcastAlso;
-        }
-    }
-    return definition;
-}
-/**
- * A {@link module:font/fontcolor~FontColor font color} and
- * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
- * responsible for upcasting data to the model.
- *
- * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
- *
- * @internal
- */
-export function renderUpcastAttribute(styleAttr) {
-    return (viewElement) => normalizeColorCode(viewElement.getStyle(styleAttr));
-}
-/**
- * A {@link module:font/fontcolor~FontColor font color} and
- * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
- * responsible for downcasting a color attribute to a `<span>` element.
- *
- * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
- *
- * @internal
- */
-export function renderDowncastElement(styleAttr) {
-    return (modelAttributeValue, { writer }) => writer.createAttributeElement('span', {
-        style: `${styleAttr}:${modelAttributeValue}`
-    }, { priority: 7 });
-}
-/**
- * A helper that adds {@link module:ui/colorselector/colorselectorview~ColorSelectorView} to the color dropdown with proper initial values.
- *
- * @param options Configuration options
- * @param options.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
- * will be added.
- * @param options.colors An array with definitions representing colors to be displayed in the color selector.
- * @param options.columns The number of columns in the color grid.
- * @param options.removeButtonLabel The label for the button responsible for removing the color.
- * @param options.colorPickerLabel The label for the color picker button.
- * @param options.documentColorsLabel The label for the section with document colors.
- * @param options.documentColorsCount The number of document colors inside the dropdown.
- * @param options.colorPickerViewConfig Configuration of the color picker view.
- * @returns The new color selector view.
- * @internal
- */
-export function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }) {
-    const locale = dropdownView.locale;
-    const colorSelectorView = new ColorSelectorView(locale, {
-        colors,
-        columns,
-        removeButtonLabel,
-        colorPickerLabel,
-        documentColorsLabel,
-        documentColorsCount,
-        colorPickerViewConfig
-    });
-    dropdownView.colorSelectorView = colorSelectorView;
-    dropdownView.panelView.children.add(colorSelectorView);
-    return colorSelectorView;
-}
-/**
- * Fixes the color value string.
- */
-function normalizeColorCode(value) {
-    return value.replace(/\s/g, '');
-}

package/theme/fontsize.css

@@ -1,33 +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
- */
-
-/* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */
-
-:root {
-	--ck-content-font-size-tiny: 0.7em;
-	--ck-content-font-size-small: 0.85em;
-	--ck-content-font-size-big: 1.4em;
-	--ck-content-font-size-huge: 1.8em;
-}
-
-/* Styles should be prefixed with the `.ck-content` class.
-See https://github.com/ckeditor/ckeditor5/issues/6636 */
-.ck-content {
-	& .text-tiny {
-		font-size: var(--ck-content-font-size-tiny);
-	}
-
-	& .text-small {
-		font-size: var(--ck-content-font-size-small);
-	}
-
-	& .text-big {
-		font-size: var(--ck-content-font-size-big);
-	}
-
-	& .text-huge {
-		font-size: var(--ck-content-font-size-huge);
-	}
-}