@ckeditor/ckeditor5-font 36.0.0 → 37.0.0-alpha.0

package/src/ui/colorui.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @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 ColorTableView from './colortableview';
+import '../fontconfig';
+/**
+ * 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;
+    /**
+     * 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

@@ -2,149 +2,96 @@
  * @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';
-
+import '../fontconfig';
 /**
  * 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}.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class ColorUI extends Plugin {
-	/**
-	 * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
-	 *
-	 * @param {module:core/editor/editor~Editor} editor
-	 * @param {Object} config The configuration object.
-	 * @param {String} config.commandName The name of the command which will be executed when a color tile is clicked.
-	 * @param {String} config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
-	 * and the configuration scope name in `editor.config`.
-	 * @param {String} config.icon The SVG icon used by the dropdown.
-	 * @param {String} config.dropdownLabel The label used by the dropdown.
-	 */
-	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
-		super( editor );
-
-		/**
-		 * The name of the command which will be executed when a color tile is clicked.
-		 *
-		 * @type {String}
-		 */
-		this.commandName = commandName;
-
-		/**
-		 * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
-		 * Also the configuration scope name in `editor.config`.
-		 *
-		 * @type {String}
-		 */
-		this.componentName = componentName;
-
-		/**
-		 * The SVG icon used by the dropdown.
-		 * @type {String}
-		 */
-		this.icon = icon;
-
-		/**
-		 * The label used by the dropdown.
-		 *
-		 * @type {String}
-		 */
-		this.dropdownLabel = dropdownLabel;
-
-		/**
-		 * The number of columns in the color grid.
-		 *
-		 * @type {Number}
-		 */
-		this.columns = editor.config.get( `${ this.componentName }.columns` );
-
-		/**
-		 * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
-		 *
-		 * @member {module:font/ui/colortableview~ColorTableView}
-		 */
-		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 colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors );
-		const localizedColors = getLocalizedColorOptions( locale, colorsConfig );
-		const documentColorsCount = editor.config.get( `${ this.componentName }.documentColors` );
-
-		// Register the UI component.
-		editor.ui.componentFactory.add( this.componentName, locale => {
-			const dropdownView = createDropdown( locale );
-			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' ),
-				documentColorsLabel: documentColorsCount !== 0 ? t( 'Document colors' ) : undefined,
-				documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount
-			} );
-
-			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 );
-
-			dropdownView.on( 'execute', ( evt, data ) => {
-				editor.execute( this.commandName, data );
-				editor.editing.view.focus();
-			} );
-
-			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
-				// Grids rendering is deferred (#6192).
-				dropdownView.colorTableView.appendGrids();
-
-				if ( isVisible ) {
-					if ( documentColorsCount !== 0 ) {
-						this.colorTableView.updateDocumentColors( editor.model, this.componentName );
-					}
-					this.colorTableView.updateSelectedColors();
-				}
-			} );
-
-			// Accessibility: focus the first active color when opening the dropdown.
-			focusChildOnDropdownOpen( dropdownView, () => dropdownView.colorTableView.staticColorsGrid.items.find( item => item.isOn ) );
-
-			return dropdownView;
-		} );
-	}
+    /**
+     * 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 colorsConfig = normalizeColorOptions((editor.config.get(this.componentName)).colors);
+        const localizedColors = getLocalizedColorOptions(locale, colorsConfig);
+        const documentColorsCount = editor.config.get(`${this.componentName}.documentColors`);
+        // Register the UI component.
+        editor.ui.componentFactory.add(this.componentName, locale => {
+            const dropdownView = createDropdown(locale);
+            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'),
+                documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
+                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount
+            });
+            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);
+            dropdownView.on('execute', (evt, data) => {
+                editor.execute(this.commandName, data);
+                editor.editing.view.focus();
+            });
+            dropdownView.on('change:isOpen', (evt, name, isVisible) => {
+                // Grids rendering is deferred (#6192).
+                dropdownView.colorTableView.appendGrids();
+                if (isVisible) {
+                    if (documentColorsCount !== 0) {
+                        this.colorTableView.updateDocumentColors(editor.model, this.componentName);
+                    }
+                    this.colorTableView.updateSelectedColors();
+                }
+            });
+            // Accessibility: focus the first active color when opening the dropdown.
+            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.staticColorsGrid.items.find((item) => item.isOn));
+            return dropdownView;
+        });
+    }
 }

package/src/utils.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @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, 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, documentColorsLabel, documentColorsCount }: {
+    dropdownView: ColorTableDropdownView;
+    colors: Array<ColorDefinition>;
+    columns: number;
+    removeButtonLabel: string;
+    documentColorsLabel?: string;
+    documentColorsCount?: number;
+}): ColorTableView;
+export type ColorTableDropdownView = DropdownView & {
+    colorTableView?: ColorTableView;
+};

package/src/utils.js

@@ -2,120 +2,90 @@
  * @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';
-
 /**
  * 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 {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
- *
- * @param {String} modelAttributeKey Key
- * @param {Array.<module:font/fontfamily~FontFamilyOption>|Array.<module:font/fontsize~FontSizeOption>} options
- * @returns {module:engine/conversion/conversion~ConverterDefinition}
+ * Builds a proper converter definition out of input data.
  */
-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;
+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'`.
- *
- * @param {String} styleAttr
- * @return {String}
  */
-export function renderUpcastAttribute( styleAttr ) {
-	return viewElement => normalizeColorCode( viewElement.getStyle( styleAttr ) );
+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'`.
- *
- * @param {String} styleAttr
  */
-export function renderDowncastElement( styleAttr ) {
-	return ( modelAttributeValue, { writer } ) => writer.createAttributeElement( 'span', {
-		style: `${ styleAttr }:${ modelAttributeValue }`
-	}, { priority: 7 } );
+export function renderDowncastElement(styleAttr) {
+    return (modelAttributeValue, { writer }) => writer.createAttributeElement('span', {
+        style: `${styleAttr}:${modelAttributeValue}`
+    }, { priority: 7 });
 }
-
 /**
  * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
  *
- * @param {Object} config The configuration object.
- * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView The dropdown view to which
- * a {@link module:font/ui/colortableview~ColorTableView} will be added.
- * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions
- * representing colors to be displayed in the color table.
- * @param {String} config.removeButtonLabel The label for the button responsible for removing the color.
- * @param {String} config.documentColorsLabel The label for the section with document colors.
- * @param {String} config.documentColorsCount The number of document colors inside the dropdown.
- * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
+ * @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 function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {
-	const locale = dropdownView.locale;
-	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } );
-
-	dropdownView.colorTableView = colorTableView;
-	dropdownView.panelView.children.add( colorTableView );
-
-	colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
-
-	return colorTableView;
+export function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount }) {
+    const locale = dropdownView.locale;
+    const colorTableView = new ColorTableView(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount });
+    dropdownView.colorTableView = colorTableView;
+    dropdownView.panelView.children.add(colorTableView);
+    colorTableView.delegate('execute').to(dropdownView, 'execute');
+    return colorTableView;
 }
-
-// Fixes the color value string.
-//
-// @param {String} value
-// @returns {String}
-function normalizeColorCode( value ) {
-	return value.replace( /\s/g, '' );
+/**
+ * Fixes the color value string.
+ */
+function normalizeColorCode(value) {
+    return value.replace(/\s/g, '');
 }