@ckeditor/ckeditor5-font 40.0.0 → 40.1.0

package/src/ui/colorui.js

@@ -1,130 +1,130 @@
-/**
- * @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 { addColorSelectorToDropdown } 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:ui/colorselector/colorselectorview~ColorSelectorView}.
- */
-export default class ColorUI extends Plugin {
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured
-     * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
-     *
-     * @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.colorSelectorView = 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.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
-            });
-            this.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);
-            this.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;
-                }
-            });
-            this.colorSelectorView.on('colorPicker:show', () => {
-                this._undoStepBatch = editor.model.createBatch();
-            });
-            this.colorSelectorView.on('colorPicker: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.colorSelectorView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        this.colorSelectorView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    this.colorSelectorView.updateSelectedColors();
-                    this.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;
-        });
-    }
-}
+/**
+ * @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 { addColorSelectorToDropdown } 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:ui/colorselector/colorselectorview~ColorSelectorView}.
+ */
+export default class ColorUI extends Plugin {
+    /**
+     * Creates a plugin which introduces a dropdown with a pre–configured
+     * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
+     *
+     * @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.colorSelectorView = 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.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
+            });
+            this.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);
+            this.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;
+                }
+            });
+            this.colorSelectorView.on('colorPicker:show', () => {
+                this._undoStepBatch = editor.model.createBatch();
+            });
+            this.colorSelectorView.on('colorPicker: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.colorSelectorView.appendUI();
+                }
+                if (isVisible) {
+                    if (documentColorsCount !== 0) {
+                        this.colorSelectorView.updateDocumentColors(editor.model, this.componentName);
+                    }
+                    this.colorSelectorView.updateSelectedColors();
+                    this.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;
+        });
+    }
+}

package/src/utils.d.ts

@@ -1,80 +1,80 @@
-/**
- * @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 type { FontFamilyOption, FontSizeOption } from './fontconfig';
-import { ColorSelectorView, type ColorDefinition, type ColorPickerViewConfig, type 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:ui/colorselector/colorselectorview~ColorSelectorView} to the color dropdown with proper initial values.
- *
- * @param config.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
- * will be added.
- * @param config.colors An array with definitions representing colors to be displayed in the color selector.
- * @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.
- * @param config.colorPickerViewConfig Configuration of the color picker view.
- * @returns The new color selector view.
- */
-export declare function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }: {
-    dropdownView: ColorSelectorDropdownView;
-    colors: Array<ColorDefinition>;
-    columns: number;
-    removeButtonLabel: string;
-    colorPickerLabel: string;
-    documentColorsLabel?: string;
-    documentColorsCount?: number;
-    colorPickerViewConfig: ColorPickerViewConfig | false;
-}): ColorSelectorView;
-export type ColorSelectorDropdownView = DropdownView & {
-    colorSelectorView?: ColorSelectorView;
-};
+/**
+ * @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 type { FontFamilyOption, FontSizeOption } from './fontconfig';
+import { ColorSelectorView, type ColorDefinition, type ColorPickerViewConfig, type 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:ui/colorselector/colorselectorview~ColorSelectorView} to the color dropdown with proper initial values.
+ *
+ * @param config.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
+ * will be added.
+ * @param config.colors An array with definitions representing colors to be displayed in the color selector.
+ * @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.
+ * @param config.colorPickerViewConfig Configuration of the color picker view.
+ * @returns The new color selector view.
+ */
+export declare function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }: {
+    dropdownView: ColorSelectorDropdownView;
+    colors: Array<ColorDefinition>;
+    columns: number;
+    removeButtonLabel: string;
+    colorPickerLabel: string;
+    documentColorsLabel?: string;
+    documentColorsCount?: number;
+    colorPickerViewConfig: ColorPickerViewConfig | false;
+}): ColorSelectorView;
+export type ColorSelectorDropdownView = DropdownView & {
+    colorSelectorView?: ColorSelectorView;
+};

package/src/utils.js

@@ -1,97 +1,97 @@
-/**
- * @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
- */
-import { ColorSelectorView } from 'ckeditor5/src/ui';
-/**
- * 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.
- */
-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'`.
- */
-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'`.
- */
-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 config.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
- * will be added.
- * @param config.colors An array with definitions representing colors to be displayed in the color selector.
- * @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.
- * @param config.colorPickerViewConfig Configuration of the color picker view.
- * @returns The new color selector view.
- */
-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, '');
-}
+/**
+ * @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
+ */
+import { ColorSelectorView } from 'ckeditor5/src/ui';
+/**
+ * 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.
+ */
+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'`.
+ */
+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'`.
+ */
+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 config.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
+ * will be added.
+ * @param config.colors An array with definitions representing colors to be displayed in the color selector.
+ * @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.
+ * @param config.colorPickerViewConfig Configuration of the color picker view.
+ * @returns The new color selector view.
+ */
+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, '');
+}