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

package/src/fontfamily/utils.js

@@ -1,91 +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/fontfamily/utils
- */
-/**
- * Normalizes the {@link module:font/fontconfig~FontFamilyConfig#options configuration options}
- * to the {@link module:font/fontconfig~FontFamilyOption} format.
- *
- * @param configuredOptions An array of options taken from the configuration.
- * @internal
- */
-export function normalizeOptions(configuredOptions) {
-    // Convert options to objects.
-    return configuredOptions
-        .map(getOptionDefinition)
-        // Filter out undefined values that `getOptionDefinition` might return.
-        .filter(option => option !== undefined);
-}
-/**
- * Normalizes the CSS `font-family` property value to an array of unquoted and trimmed font faces.
- *
- * @internal
- */
-export function normalizeFontFamilies(fontDefinition) {
-    return fontDefinition
-        .replace(/["']/g, '').split(',')
-        .map(name => name.trim());
-}
-/**
- * Returns an option definition either created from string shortcut.
- * If object is passed then this method will return it without alternating it. Returns undefined for item than cannot be parsed.
- *
- */
-function getOptionDefinition(option) {
-    // Treat any object as full item definition provided by user in configuration.
-    if (typeof option === 'object') {
-        return option;
-    }
-    // Handle 'default' string as a special case. It will be used to remove the fontFamily attribute.
-    if (option === 'default') {
-        return {
-            title: 'Default',
-            model: undefined
-        };
-    }
-    // Ignore values that we cannot parse to a definition.
-    if (typeof option !== 'string') {
-        return undefined;
-    }
-    // Return font family definition from font string.
-    return generateFontPreset(option);
-}
-/**
- * Creates a predefined preset for pixel size. It deconstructs font-family like string into full configuration option.
- * A font definition is passed as coma delimited set of font family names. Font names might be quoted.
- *
- * @param fontDefinition A font definition form configuration.
- */
-function generateFontPreset(fontDefinition) {
-    // Remove quotes from font names. They will be normalized later.
-    const fontNames = normalizeFontFamilies(fontDefinition);
-    // The first matched font name will be used as dropdown list item title and as model value.
-    const firstFontName = fontNames[0];
-    // CSS-compatible font names.
-    const cssFontNames = fontNames.map(normalizeFontNameForCSS).join(', ');
-    return {
-        title: firstFontName,
-        model: cssFontNames,
-        view: {
-            name: 'span',
-            styles: {
-                'font-family': cssFontNames
-            },
-            priority: 7
-        }
-    };
-}
-/**
- * Normalizes font name for the style attribute. It adds braces (') if font name contains spaces.
- */
-function normalizeFontNameForCSS(fontName) {
-    fontName = fontName.trim();
-    // Compound font names should be quoted.
-    if (fontName.indexOf(' ') > 0) {
-        fontName = `'${fontName}'`;
-    }
-    return fontName;
-}

package/src/fontfamily.js

@@ -1,39 +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/fontfamily
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FontFamilyEditing } from './fontfamily/fontfamilyediting.js';
-import { FontFamilyUI } from './fontfamily/fontfamilyui.js';
-/**
- * The font family plugin.
- *
- * For a detailed overview, check the {@glink features/font font feature} documentatiom
- * and the {@glink api/font package page}.
- *
- * This is a "glue" plugin which loads the {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing} and
- * {@link module:font/fontfamily/fontfamilyui~FontFamilyUI} features in the editor.
- */
-export class FontFamily extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [FontFamilyEditing, FontFamilyUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontFamily';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}

package/src/fontsize/fontsizecommand.js

@@ -1,24 +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 { FontCommand } from '../fontcommand.js';
-import { FONT_SIZE } from '../utils.js';
-/**
- * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
- * to apply the font size.
- *
- * ```ts
- * editor.execute( 'fontSize', { value: 'small' } );
- * ```
- *
- * **Note**: Executing the command without the value removes the attribute from the model.
- */
-export class FontSizeCommand extends FontCommand {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor, FONT_SIZE);
-    }
-}

package/src/fontsize/fontsizeediting.js

@@ -1,171 +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/fontsizeediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { CKEditorError } from 'ckeditor5/src/utils.js';
-import { isLengthStyleValue, isPercentageStyleValue } from 'ckeditor5/src/engine.js';
-import { FontSizeCommand } from './fontsizecommand.js';
-import { normalizeOptions } from './utils.js';
-import { buildDefinition, FONT_SIZE } from '../utils.js';
-// Mapping of `<font size="..">` styling to CSS's `font-size` values.
-const styleFontSize = [
-    'x-small', // Size "0" equal to "1".
-    'x-small',
-    'small',
-    'medium',
-    'large',
-    'x-large',
-    'xx-large',
-    'xxx-large'
-];
-/**
- * The font size editing feature.
- *
- * It introduces the {@link module:font/fontsize/fontsizecommand~FontSizeCommand command} and the `fontSize`
- * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
- * as a `<span>` element with either:
- * * a style attribute (`<span style="font-size:12px">...</span>`),
- * * or a class attribute (`<span class="text-small">...</span>`)
- *
- * depending on the {@link module:font/fontconfig~FontSizeConfig configuration}.
- */
-export class FontSizeEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontSizeEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        // Define default configuration using named presets.
-        editor.config.define(FONT_SIZE, {
-            options: [
-                'tiny',
-                'small',
-                'default',
-                'big',
-                'huge'
-            ],
-            supportAllValues: false
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Allow fontSize attribute on text nodes.
-        editor.model.schema.extend('$text', { allowAttributes: FONT_SIZE });
-        editor.model.schema.setAttributeProperties(FONT_SIZE, {
-            isFormatting: true,
-            copyOnEnter: true
-        });
-        const supportAllValues = editor.config.get('fontSize.supportAllValues');
-        // Define view to model conversion.
-        const options = normalizeOptions(this.editor.config.get('fontSize.options'))
-            .filter(item => item.model);
-        const definition = buildDefinition(FONT_SIZE, options);
-        // Set-up the two-way conversion.
-        if (supportAllValues) {
-            this._prepareAnyValueConverters(definition);
-            this._prepareCompatibilityConverter();
-        }
-        else {
-            editor.conversion.attributeToElement(definition);
-        }
-        // Add FontSize command.
-        editor.commands.add(FONT_SIZE, new FontSizeCommand(editor));
-    }
-    /**
-     * These converters enable keeping any value found as `style="font-size: *"` as a value of an attribute on a text even
-     * if it is not defined in the plugin configuration.
-     *
-     * @param definition Converter definition out of input data.
-     */
-    _prepareAnyValueConverters(definition) {
-        const editor = this.editor;
-        // If `fontSize.supportAllValues=true`, we do not allow to use named presets in the plugin's configuration.
-        const presets = definition.model.values.filter((value) => {
-            return !isLengthStyleValue(String(value)) && !isPercentageStyleValue(String(value));
-        });
-        if (presets.length) {
-            /**
-             * If {@link module:font/fontconfig~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} is `true`,
-             * you need to use numerical values as font size options.
-             *
-             * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
-             *
-             * @error font-size-invalid-use-of-named-presets
-             * @param {Array.<string>} presets Invalid values.
-             */
-            throw new CKEditorError('font-size-invalid-use-of-named-presets', null, { presets });
-        }
-        editor.conversion.for('downcast').attributeToElement({
-            model: FONT_SIZE,
-            view: (attributeValue, { writer }) => {
-                if (!attributeValue) {
-                    return;
-                }
-                return writer.createAttributeElement('span', { style: 'font-size:' + attributeValue }, { priority: 7 });
-            }
-        });
-        editor.conversion.for('upcast').elementToAttribute({
-            model: {
-                key: FONT_SIZE,
-                value: (viewElement) => viewElement.getStyle('font-size')
-            },
-            view: {
-                name: 'span',
-                styles: {
-                    'font-size': /.*/
-                }
-            }
-        });
-    }
-    /**
-     * Adds support for legacy `<font size="..">` formatting.
-     */
-    _prepareCompatibilityConverter() {
-        const editor = this.editor;
-        editor.conversion.for('upcast').elementToAttribute({
-            view: {
-                name: 'font',
-                attributes: {
-                    // Documentation mentions sizes from 1 to 7. To handle old content we support all values
-                    // up to 999 but clamp it to the valid range. Why 999? It should cover accidental values
-                    // similar to percentage, e.g. 100%, 200% which could be the usual mistake for font size.
-                    'size': /^[+-]?\d{1,3}$/
-                }
-            },
-            model: {
-                key: FONT_SIZE,
-                value: (viewElement) => {
-                    const value = viewElement.getAttribute('size');
-                    const isRelative = value[0] === '-' || value[0] === '+';
-                    let size = parseInt(value, 10);
-                    if (isRelative) {
-                        // Add relative size (which can be negative) to the default size = 3.
-                        size = 3 + size;
-                    }
-                    const maxSize = styleFontSize.length - 1;
-                    const clampedSize = Math.min(Math.max(size, 0), maxSize);
-                    return styleFontSize[clampedSize];
-                }
-            }
-        });
-    }
-}

package/src/fontsize/fontsizeui.js

@@ -1,158 +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/fontsizeui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconFontSize } from 'ckeditor5/src/icons.js';
-import { UIModel, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { Collection } from 'ckeditor5/src/utils.js';
-import { normalizeOptions } from './utils.js';
-import { FONT_SIZE } from '../utils.js';
-import '../../theme/fontsize.css';
-/**
- * The font size UI plugin. It introduces the `'fontSize'` dropdown.
- */
-export class FontSizeUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontSizeUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        const options = this._getLocalizedOptions();
-        const command = editor.commands.get(FONT_SIZE);
-        const accessibleLabel = t('Font Size');
-        const listOptions = _prepareListOptions(options, command);
-        // Register UI component.
-        editor.ui.componentFactory.add(FONT_SIZE, locale => {
-            const dropdownView = createDropdown(locale);
-            addListToDropdown(dropdownView, listOptions, {
-                role: 'menu',
-                ariaLabel: accessibleLabel
-            });
-            // Create dropdown model.
-            dropdownView.buttonView.set({
-                label: accessibleLabel,
-                icon: IconFontSize,
-                tooltip: true
-            });
-            dropdownView.extendTemplate({
-                attributes: {
-                    class: [
-                        'ck-font-size-dropdown'
-                    ]
-                }
-            });
-            dropdownView.bind('isEnabled').to(command);
-            // Execute command when an item from the dropdown is selected.
-            this.listenTo(dropdownView, 'execute', evt => {
-                editor.execute(evt.source.commandName, { value: evt.source.commandParam });
-                editor.editing.view.focus();
-            });
-            return dropdownView;
-        });
-        editor.ui.componentFactory.add(`menuBar:${FONT_SIZE}`, locale => {
-            const menuView = new MenuBarMenuView(locale);
-            menuView.buttonView.set({
-                label: accessibleLabel,
-                icon: IconFontSize
-            });
-            menuView.bind('isEnabled').to(command);
-            const listView = new MenuBarMenuListView(locale);
-            for (const definition of listOptions) {
-                const listItemView = new MenuBarMenuListItemView(locale, menuView);
-                const buttonView = new MenuBarMenuListItemButtonView(locale);
-                buttonView.set({
-                    role: 'menuitemradio',
-                    isToggleable: true
-                });
-                buttonView.bind(...Object.keys(definition.model)).to(definition.model);
-                buttonView.delegate('execute').to(menuView);
-                buttonView.on('execute', () => {
-                    editor.execute(definition.model.commandName, {
-                        value: definition.model.commandParam
-                    });
-                    editor.editing.view.focus();
-                });
-                listItemView.children.add(buttonView);
-                listView.items.add(listItemView);
-            }
-            menuView.panelView.children.add(listView);
-            return menuView;
-        });
-    }
-    /**
-     * Returns options as defined in `config.fontSize.options` but processed to account for
-     * editor localization, i.e. to display {@link module:font/fontconfig~FontSizeOption}
-     * in the correct language.
-     *
-     * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
-     * when the user configuration is defined because the editor does not exist yet.
-     */
-    _getLocalizedOptions() {
-        const editor = this.editor;
-        const t = editor.t;
-        const localizedTitles = {
-            Default: t('Default'),
-            Tiny: t('Tiny'),
-            Small: t('Small'),
-            Big: t('Big'),
-            Huge: t('Huge')
-        };
-        const options = normalizeOptions((editor.config.get(FONT_SIZE)).options);
-        return options.map(option => {
-            const title = localizedTitles[option.title];
-            if (title && title != option.title) {
-                // Clone the option to avoid altering the original `namedPresets` from `./utils.js`.
-                option = Object.assign({}, option, { title });
-            }
-            return option;
-        });
-    }
-}
-/**
- * Prepares FontSize dropdown items.
- */
-function _prepareListOptions(options, command) {
-    const itemDefinitions = new Collection();
-    for (const option of options) {
-        const def = {
-            type: 'button',
-            model: new UIModel({
-                commandName: FONT_SIZE,
-                commandParam: option.model,
-                label: option.title,
-                class: 'ck-fontsize-option',
-                role: 'menuitemradio',
-                withText: true
-            })
-        };
-        if (option.view && typeof option.view !== 'string') {
-            if (option.view.styles) {
-                def.model.set('labelStyle', `font-size:${option.view.styles['font-size']}`);
-            }
-            if (option.view.classes) {
-                def.model.set('class', `${def.model.class} ${option.view.classes}`);
-            }
-        }
-        def.model.bind('isOn').to(command, 'value', value => value === option.model);
-        // Add the option to the collection.
-        itemDefinitions.add(def);
-    }
-    return itemDefinitions;
-}

package/src/fontsize/utils.js

@@ -1,167 +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/utils
- */
-import { CKEditorError } from 'ckeditor5/src/utils.js';
-/**
- * Normalizes and translates the {@link module:font/fontconfig~FontSizeConfig#options configuration options}
- * to the {@link module:font/fontconfig~FontSizeOption} format.
- *
- * @param configuredOptions An array of options taken from the configuration.
- * @internal
- */
-export function normalizeOptions(configuredOptions) {
-    // Convert options to objects.
-    return configuredOptions
-        .map(item => getOptionDefinition(item))
-        // Filter out undefined values that `getOptionDefinition` might return.
-        .filter((option) => option !== undefined);
-}
-// Default named presets map. Always create a new instance of the preset object in order to avoid modifying references.
-const namedPresets = {
-    get tiny() {
-        return {
-            title: 'Tiny',
-            model: 'tiny',
-            view: {
-                name: 'span',
-                classes: 'text-tiny',
-                priority: 7
-            }
-        };
-    },
-    get small() {
-        return {
-            title: 'Small',
-            model: 'small',
-            view: {
-                name: 'span',
-                classes: 'text-small',
-                priority: 7
-            }
-        };
-    },
-    get big() {
-        return {
-            title: 'Big',
-            model: 'big',
-            view: {
-                name: 'span',
-                classes: 'text-big',
-                priority: 7
-            }
-        };
-    },
-    get huge() {
-        return {
-            title: 'Huge',
-            model: 'huge',
-            view: {
-                name: 'span',
-                classes: 'text-huge',
-                priority: 7
-            }
-        };
-    }
-};
-/**
- * Returns an option definition either from preset or creates one from number shortcut.
- * If object is passed then this method will return it without alternating it. Returns undefined for item than cannot be parsed.
- */
-function getOptionDefinition(option) {
-    if (typeof option === 'number') {
-        option = String(option);
-    }
-    // Check whether passed option is a full item definition provided by user in configuration.
-    if (typeof option === 'object' && isFullItemDefinition(option)) {
-        return attachPriority(option);
-    }
-    const preset = findPreset(option);
-    // Item is a named preset.
-    if (preset) {
-        return attachPriority(preset);
-    }
-    // 'Default' font size. It will be used to remove the fontSize attribute.
-    if (option === 'default') {
-        return {
-            model: undefined,
-            title: 'Default'
-        };
-    }
-    // At this stage we probably have numerical value to generate a preset so parse it's value.
-    // Discard any faulty values.
-    if (isNumericalDefinition(option)) {
-        return undefined;
-    }
-    // Return font size definition from size value.
-    return generatePixelPreset(option);
-}
-/**
- * Creates a predefined preset for pixel size.
- * @param definition Font size in pixels.
- * @returns
- */
-function generatePixelPreset(definition) {
-    // Extend a short (numeric value) definition.
-    if (typeof definition === 'string') {
-        definition = {
-            title: definition,
-            model: `${parseFloat(definition)}px`
-        };
-    }
-    definition.view = {
-        name: 'span',
-        styles: {
-            'font-size': definition.model
-        }
-    };
-    return attachPriority(definition);
-}
-/**
- * Adds the priority to the view element definition if missing. It's required due to ckeditor/ckeditor5#2291
- */
-function attachPriority(definition) {
-    if (definition.view && typeof definition.view !== 'string' && !definition.view.priority) {
-        definition.view.priority = 7;
-    }
-    return definition;
-}
-/**
- * Returns a prepared preset definition. If passed an object, a name of preset should be defined as `model` value.
- *
- * @param definition.model A preset name.
- */
-function findPreset(definition) {
-    return typeof definition === 'string' ? namedPresets[definition] : namedPresets[definition.model];
-}
-/**
- * We treat `definition` as completed if it is an object that contains `title`, `model` and `view` values.
- */
-function isFullItemDefinition(definition) {
-    return definition.title && definition.model && definition.view;
-}
-function isNumericalDefinition(definition) {
-    let numberValue;
-    if (typeof definition === 'object') {
-        if (!definition.model) {
-            /**
-             * Provided value as an option for {@link module:font/fontsize~FontSize} seems to invalid.
-             *
-             * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
-             *
-             * @error font-size-invalid-definition
-             */
-            throw new CKEditorError('font-size-invalid-definition', null, definition);
-        }
-        else {
-            numberValue = parseFloat(definition.model);
-        }
-    }
-    else {
-        numberValue = parseFloat(definition);
-    }
-    return isNaN(numberValue);
-}