@ckeditor/ckeditor5-font 38.1.0 → 38.1.1

package/src/ui/colorui.d.ts

@@ -1,67 +1,67 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module font/ui/colorui
- */
-import { Plugin, type Editor } from 'ckeditor5/src/core';
-import { type FONT_BACKGROUND_COLOR, type FONT_COLOR } from '../utils';
-import { type default as ColorTableView } from './colortableview';
-/**
- * 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:font/ui/colortableview~ColorTableView}.
- */
-export default class ColorUI extends Plugin {
-    /**
-     * The name of the command which will be executed when a color tile is clicked.
-     */
-    commandName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
-    /**
-     * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
-     * Also the configuration scope name in `editor.config`.
-     */
-    componentName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
-    /**
-     * The SVG icon used by the dropdown.
-     */
-    icon: string;
-    /**
-     * The label used by the dropdown.
-     */
-    dropdownLabel: string;
-    /**
-     * The number of columns in the color grid.
-     */
-    columns: number;
-    /**
-     * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
-     */
-    colorTableView: ColorTableView | undefined;
-    /**
-     * Keeps all changes in color picker in one batch while dropdown is open.
-     */
-    private _undoStepBatch;
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
-     *
-     * @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: Editor, { commandName, componentName, icon, dropdownLabel }: {
-        commandName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
-        componentName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
-        icon: string;
-        dropdownLabel: string;
-    });
-    /**
-    * @inheritDoc
-    */
-    init(): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module font/ui/colorui
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+import { type FONT_BACKGROUND_COLOR, type FONT_COLOR } from '../utils';
+import { type default as ColorTableView } from './colortableview';
+/**
+ * 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:font/ui/colortableview~ColorTableView}.
+ */
+export default class ColorUI extends Plugin {
+    /**
+     * The name of the command which will be executed when a color tile is clicked.
+     */
+    commandName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
+    /**
+     * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
+     * Also the configuration scope name in `editor.config`.
+     */
+    componentName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
+    /**
+     * The SVG icon used by the dropdown.
+     */
+    icon: string;
+    /**
+     * The label used by the dropdown.
+     */
+    dropdownLabel: string;
+    /**
+     * The number of columns in the color grid.
+     */
+    columns: number;
+    /**
+     * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
+     */
+    colorTableView: ColorTableView | undefined;
+    /**
+     * Keeps all changes in color picker in one batch while dropdown is open.
+     */
+    private _undoStepBatch;
+    /**
+     * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
+     *
+     * @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: Editor, { commandName, componentName, icon, dropdownLabel }: {
+        commandName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
+        componentName: typeof FONT_BACKGROUND_COLOR | typeof FONT_COLOR;
+        icon: string;
+        dropdownLabel: string;
+    });
+    /**
+    * @inheritDoc
+    */
+    init(): void;
+}

package/src/ui/colorui.js

@@ -1,128 +1,128 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module font/ui/colorui
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
-import { addColorTableToDropdown } from '../utils';
-/**
- * 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:font/ui/colortableview~ColorTableView}.
- */
-export default class ColorUI extends Plugin {
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
-     *
-     * @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`);
-        this.colorTableView = undefined;
-    }
-    /**
-    * @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;
-            this.colorTableView = addColorTableToDropdown({
-                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,
-                colorPickerConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
-            });
-            this.colorTableView.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);
-            this.colorTableView.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();
-                }
-            });
-            this.colorTableView.on('showColorPicker', () => {
-                this._undoStepBatch = editor.model.createBatch();
-            });
-            this.colorTableView.on('cancel', () => {
-                if (this._undoStepBatch.operations.length) {
-                    // We need to close the dropdown before the undo batch.
-                    // Otherwise, ColorUI 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.colorTableView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        this.colorTableView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    this.colorTableView.updateSelectedColors();
-                }
-                else {
-                    this.colorTableView.showColorGrids();
-                }
-            });
-            // Accessibility: focus the first active color when opening the dropdown.
-            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.colorGridsPageView.staticColorsGrid.items.find((item) => item.isOn));
-            return dropdownView;
-        });
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module font/ui/colorui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
+import { addColorTableToDropdown } from '../utils';
+/**
+ * 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:font/ui/colortableview~ColorTableView}.
+ */
+export default class ColorUI extends Plugin {
+    /**
+     * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
+     *
+     * @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`);
+        this.colorTableView = undefined;
+    }
+    /**
+    * @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;
+            this.colorTableView = addColorTableToDropdown({
+                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,
+                colorPickerConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
+            });
+            this.colorTableView.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);
+            this.colorTableView.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();
+                }
+            });
+            this.colorTableView.on('showColorPicker', () => {
+                this._undoStepBatch = editor.model.createBatch();
+            });
+            this.colorTableView.on('cancel', () => {
+                if (this._undoStepBatch.operations.length) {
+                    // We need to close the dropdown before the undo batch.
+                    // Otherwise, ColorUI 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.colorTableView.appendUI();
+                }
+                if (isVisible) {
+                    if (documentColorsCount !== 0) {
+                        this.colorTableView.updateDocumentColors(editor.model, this.componentName);
+                    }
+                    this.colorTableView.updateSelectedColors();
+                }
+                else {
+                    this.colorTableView.showColorGrids();
+                }
+            });
+            // Accessibility: focus the first active color when opening the dropdown.
+            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.colorGridsPageView.staticColorsGrid.items.find((item) => item.isOn));
+            return dropdownView;
+        });
+    }
+}

package/src/utils.d.ts

@@ -1,79 +1,79 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module font/utils
- */
-import ColorTableView from './ui/colortableview';
-import type { FontFamilyOption, FontSizeOption } from './fontconfig';
-import type { ColorDefinition, ColorPickerConfig, DropdownView } from 'ckeditor5/src/ui';
-import type { ArrayOrItem } from 'ckeditor5/src/utils';
-import type { ViewAttributeElement, ViewElement, MatcherPattern, ViewElementDefinition, DowncastConversionApi } from 'ckeditor5/src/engine';
-/**
- * The name of the font size plugin.
- */
-export declare const FONT_SIZE = "fontSize";
-/**
- * The name of the font family plugin.
- */
-export declare const FONT_FAMILY = "fontFamily";
-/**
- * The name of the font color plugin.
- */
-export declare const FONT_COLOR = "fontColor";
-/**
- * The name of the font background color plugin.
- */
-export declare const FONT_BACKGROUND_COLOR = "fontBackgroundColor";
-/**
- * Builds a proper converter definition out of input data.
- */
-export declare function buildDefinition(modelAttributeKey: string, options: Array<FontFamilyOption> | Array<FontSizeOption>): FontConverterDefinition;
-export type FontConverterDefinition = {
-    model: {
-        key: string;
-        values: Array<string>;
-    };
-    view: Record<string, ViewElementDefinition>;
-    upcastAlso: Record<string, ArrayOrItem<MatcherPattern>>;
-};
-/**
- * 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'`.
- */
-export declare function renderUpcastAttribute(styleAttr: string): (viewElement: ViewElement) => string;
-/**
- * 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'`.
- */
-export declare function renderDowncastElement(styleAttr: string): (modelAttributeValue: string, { writer }: DowncastConversionApi) => ViewAttributeElement;
-/**
- * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
- *
- * @param config.dropdownView The dropdown view to which a {@link module:font/ui/colortableview~ColorTableView} will be added.
- * @param config.colors An array with definitions representing colors to be displayed in the color table.
- * @param config.removeButtonLabel The label for the button responsible for removing the color.
- * @param config.documentColorsLabel The label for the section with document colors.
- * @param config.documentColorsCount The number of document colors inside the dropdown.
- * @returns The new color table view.
- */
-export declare function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }: {
-    dropdownView: ColorTableDropdownView;
-    colors: Array<ColorDefinition>;
-    columns: number;
-    removeButtonLabel: string;
-    colorPickerLabel: string;
-    documentColorsLabel?: string;
-    documentColorsCount?: number;
-    colorPickerConfig: ColorPickerConfig | false;
-}): ColorTableView;
-export type ColorTableDropdownView = DropdownView & {
-    colorTableView?: ColorTableView;
-};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module font/utils
+ */
+import ColorTableView from './ui/colortableview';
+import type { FontFamilyOption, FontSizeOption } from './fontconfig';
+import type { ColorDefinition, ColorPickerConfig, DropdownView } from 'ckeditor5/src/ui';
+import type { ArrayOrItem } from 'ckeditor5/src/utils';
+import type { ViewAttributeElement, ViewElement, MatcherPattern, ViewElementDefinition, DowncastConversionApi } from 'ckeditor5/src/engine';
+/**
+ * The name of the font size plugin.
+ */
+export declare const FONT_SIZE = "fontSize";
+/**
+ * The name of the font family plugin.
+ */
+export declare const FONT_FAMILY = "fontFamily";
+/**
+ * The name of the font color plugin.
+ */
+export declare const FONT_COLOR = "fontColor";
+/**
+ * The name of the font background color plugin.
+ */
+export declare const FONT_BACKGROUND_COLOR = "fontBackgroundColor";
+/**
+ * Builds a proper converter definition out of input data.
+ */
+export declare function buildDefinition(modelAttributeKey: string, options: Array<FontFamilyOption> | Array<FontSizeOption>): FontConverterDefinition;
+export type FontConverterDefinition = {
+    model: {
+        key: string;
+        values: Array<string>;
+    };
+    view: Record<string, ViewElementDefinition>;
+    upcastAlso: Record<string, ArrayOrItem<MatcherPattern>>;
+};
+/**
+ * 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'`.
+ */
+export declare function renderUpcastAttribute(styleAttr: string): (viewElement: ViewElement) => string;
+/**
+ * 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'`.
+ */
+export declare function renderDowncastElement(styleAttr: string): (modelAttributeValue: string, { writer }: DowncastConversionApi) => ViewAttributeElement;
+/**
+ * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
+ *
+ * @param config.dropdownView The dropdown view to which a {@link module:font/ui/colortableview~ColorTableView} will be added.
+ * @param config.colors An array with definitions representing colors to be displayed in the color table.
+ * @param config.removeButtonLabel The label for the button responsible for removing the color.
+ * @param config.documentColorsLabel The label for the section with document colors.
+ * @param config.documentColorsCount The number of document colors inside the dropdown.
+ * @returns The new color table view.
+ */
+export declare function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }: {
+    dropdownView: ColorTableDropdownView;
+    colors: Array<ColorDefinition>;
+    columns: number;
+    removeButtonLabel: string;
+    colorPickerLabel: string;
+    documentColorsLabel?: string;
+    documentColorsCount?: number;
+    colorPickerConfig: ColorPickerConfig | false;
+}): ColorTableView;
+export type ColorTableDropdownView = DropdownView & {
+    colorTableView?: ColorTableView;
+};