@ckeditor/ckeditor5-font 38.2.0-alpha.0 → 38.2.0-alpha.1

package/src/ui/colorui.d.ts

@@ -5,14 +5,14 @@
 /**
  * @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';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { type ColorSelectorView } from 'ckeditor5/src/ui.js';
+import { type FONT_BACKGROUND_COLOR, type FONT_COLOR } from '../utils.js';
 /**
  * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
  *
  * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
- * a {@link module:font/ui/colortableview~ColorTableView}.
+ * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
  */
 export default class ColorUI extends Plugin {
     /**
@@ -37,15 +37,16 @@ export default class ColorUI extends Plugin {
      */
     columns: number;
     /**
-     * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
+     * Keeps a reference to {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
      */
-    colorTableView: ColorTableView | undefined;
+    colorSelectorView: ColorSelectorView | 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}.
+     * 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.

package/src/ui/colorui.js

@@ -5,18 +5,19 @@
 /**
  * @module font/ui/colorui
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
-import { addColorTableToDropdown } from '../utils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from 'ckeditor5/src/ui.js';
+import { addColorSelectorToDropdown } from '../utils.js';
 /**
  * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
  *
  * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
- * a {@link module:font/ui/colortableview~ColorTableView}.
+ * 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:font/ui/colortableview~ColorTableView}.
+     * 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.
@@ -32,7 +33,7 @@ export default class ColorUI extends Plugin {
         this.icon = icon;
         this.dropdownLabel = dropdownLabel;
         this.columns = editor.config.get(`${this.componentName}.columns`);
-        this.colorTableView = undefined;
+        this.colorSelectorView = undefined;
     }
     /**
     * @inheritDoc
@@ -52,7 +53,7 @@ export default class ColorUI extends Plugin {
             const dropdownView = createDropdown(locale);
             // Font color dropdown rendering is deferred once it gets open to improve performance (#6192).
             let dropdownContentRendered = false;
-            this.colorTableView = addColorTableToDropdown({
+            this.colorSelectorView = addColorSelectorToDropdown({
                 dropdownView,
                 colors: localizedColors.map(option => ({
                     label: option.label,
@@ -66,9 +67,9 @@ export default class ColorUI extends Plugin {
                 colorPickerLabel: t('Color picker'),
                 documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
                 documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
-                colorPickerConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
+                colorPickerViewConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
             });
-            this.colorTableView.bind('selectedColor').to(command, 'value');
+            this.colorSelectorView.bind('selectedColor').to(command, 'value');
             dropdownView.buttonView.set({
                 label: this.dropdownLabel,
                 icon: this.icon,
@@ -80,7 +81,7 @@ export default class ColorUI extends Plugin {
                 }
             });
             dropdownView.bind('isEnabled').to(command);
-            this.colorTableView.on('execute', (evt, data) => {
+            this.colorSelectorView.on('execute', (evt, data) => {
                 if (dropdownView.isOpen) {
                     editor.execute(this.commandName, {
                         value: data.value,
@@ -90,11 +91,14 @@ export default class ColorUI extends Plugin {
                 if (data.source !== 'colorPicker') {
                     editor.editing.view.focus();
                 }
+                if (data.source === 'colorPickerSaveButton') {
+                    dropdownView.isOpen = false;
+                }
             });
-            this.colorTableView.on('showColorPicker', () => {
+            this.colorSelectorView.on('colorPicker:show', () => {
                 this._undoStepBatch = editor.model.createBatch();
             });
-            this.colorTableView.on('cancel', () => {
+            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,
@@ -108,20 +112,18 @@ export default class ColorUI extends Plugin {
             dropdownView.on('change:isOpen', (evt, name, isVisible) => {
                 if (!dropdownContentRendered) {
                     dropdownContentRendered = true;
-                    dropdownView.colorTableView.appendUI();
+                    dropdownView.colorSelectorView.appendUI();
                 }
                 if (isVisible) {
                     if (documentColorsCount !== 0) {
-                        this.colorTableView.updateDocumentColors(editor.model, this.componentName);
+                        this.colorSelectorView.updateDocumentColors(editor.model, this.componentName);
                     }
-                    this.colorTableView.updateSelectedColors();
-                }
-                else {
-                    this.colorTableView.showColorGrids();
+                    this.colorSelectorView.updateSelectedColors();
+                    this.colorSelectorView.showColorGridsFragment();
                 }
             });
             // Accessibility: focus the first active color when opening the dropdown.
-            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.colorGridsPageView.staticColorsGrid.items.find((item) => item.isOn));
+            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorSelectorView.colorGridsFragmentView.staticColorsGrid.items.find((item) => item.isOn));
             return dropdownView;
         });
     }

package/src/utils.d.ts

@@ -5,11 +5,10 @@
 /**
  * @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';
+import type { FontFamilyOption, FontSizeOption } from './fontconfig.js';
+import { ColorSelectorView, type ColorDefinition, type ColorPickerViewConfig, type DropdownView } from 'ckeditor5/src/ui.js';
+import type { ArrayOrItem } from 'ckeditor5/src/utils.js';
+import type { ViewAttributeElement, ViewElement, MatcherPattern, ViewElementDefinition, DowncastConversionApi } from 'ckeditor5/src/engine.js';
 /**
  * The name of the font size plugin.
  */
@@ -55,25 +54,27 @@ export declare function renderUpcastAttribute(styleAttr: string): (viewElement:
  */
 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.
+ * 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: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.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.
- * @returns The new color table view.
+ * @param config.colorPickerViewConfig Configuration of the color picker view.
+ * @returns The new color selector view.
  */
-export declare function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }: {
-    dropdownView: ColorTableDropdownView;
+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;
-    colorPickerConfig: ColorPickerConfig | false;
-}): ColorTableView;
-export type ColorTableDropdownView = DropdownView & {
-    colorTableView?: ColorTableView;
+    colorPickerViewConfig: ColorPickerViewConfig | false;
+}): ColorSelectorView;
+export type ColorSelectorDropdownView = DropdownView & {
+    colorSelectorView?: ColorSelectorView;
 };

package/src/utils.js

@@ -2,10 +2,7 @@
  * @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 { ColorSelectorView } from 'ckeditor5/src/ui.js';
 /**
  * The name of the font size plugin.
  */
@@ -66,29 +63,31 @@ export function renderDowncastElement(styleAttr) {
     }, { priority: 7 });
 }
 /**
- * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
+ * 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: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.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.
- * @returns The new color table view.
+ * @param config.colorPickerViewConfig Configuration of the color picker view.
+ * @returns The new color selector view.
  */
-export function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }) {
+export function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }) {
     const locale = dropdownView.locale;
-    const colorTableView = new ColorTableView(locale, {
+    const colorSelectorView = new ColorSelectorView(locale, {
         colors,
         columns,
         removeButtonLabel,
         colorPickerLabel,
         documentColorsLabel,
         documentColorsCount,
-        colorPickerConfig
+        colorPickerViewConfig
     });
-    dropdownView.colorTableView = colorTableView;
-    dropdownView.panelView.children.add(colorTableView);
-    return colorTableView;
+    dropdownView.colorSelectorView = colorSelectorView;
+    dropdownView.panelView.children.add(colorSelectorView);
+    return colorSelectorView;
 }
 /**
  * Fixes the color value string.

package/src/documentcolorcollection.d.ts

@@ -1,70 +0,0 @@
-/**
- * @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/documentcolorcollection
- */
-import type { ColorDefinition } from 'ckeditor5/src/ui';
-import { Collection, type CollectionAddEvent, type CollectionRemoveEvent, type CollectionChangeEvent } from 'ckeditor5/src/utils';
-declare const DocumentColorCollection_base: import("ckeditor5/src/utils").Mixed<{
-    new (options?: {
-        readonly idProperty?: string | undefined;
-    } | undefined): Collection<ColorDefinition>;
-    new (initialItems: Iterable<ColorDefinition>, options?: {
-        readonly idProperty?: string | undefined;
-    } | undefined): Collection<ColorDefinition>;
-}, import("ckeditor5/src/utils").Observable>;
-/**
- * A collection to store document colors. It enforces colors to be unique.
- */
-export default class DocumentColorCollection extends DocumentColorCollection_base {
-    /**
-     * Indicates whether the document color collection is empty.
-     *
-     * @observable
-     */
-    readonly isEmpty: boolean;
-    constructor(options?: any);
-    /**
-     * Adds a color to the document color collection.
-     *
-     * This method ensures that no color duplicates are inserted (compared using
-     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
-     *
-     * If the item does not have an ID, it will be automatically generated and set on the item.
-     *
-     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
-     * @fires add
-     * @fires change
-     */
-    add(item: ColorDefinition, index?: number): this;
-    /**
-     * Checks if an object with given colors is present in the document color collection.
-     */
-    hasColor(color: string): boolean;
-}
-/**
- * Fired when the collection was changed due to adding or removing items.
- *
- * @eventName ~DocumentColorCollection#change
- * @param data Changed items.
- */
-export type DocumentColorCollectionChangeEvent = CollectionChangeEvent;
-/**
- * Fired when an item is added to the collection.
- *
- * @eventName ~DocumentColorCollection#add
- * @param item The added item.
- * @param index An index where the addition occurred.
- */
-export type DocumentColorCollectionAddEvent = CollectionAddEvent;
-/**
- * Fired when an item is removed from the collection.
- *
- * @eventName ~DocumentColorCollection#remove
- * @param item The removed item.
- * @param index Index from which item was removed.
- */
-export type DocumentColorCollectionRemoveEvent = CollectionRemoveEvent;
-export {};

package/src/documentcolorcollection.js

@@ -1,42 +0,0 @@
-/**
- * @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 { Collection, ObservableMixin } from 'ckeditor5/src/utils';
-/**
- * A collection to store document colors. It enforces colors to be unique.
- */
-export default class DocumentColorCollection extends ObservableMixin((Collection)) {
-    constructor(options) {
-        super(options);
-        this.set('isEmpty', true);
-        this.on('change', () => {
-            this.set('isEmpty', this.length === 0);
-        });
-    }
-    /**
-     * Adds a color to the document color collection.
-     *
-     * This method ensures that no color duplicates are inserted (compared using
-     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
-     *
-     * If the item does not have an ID, it will be automatically generated and set on the item.
-     *
-     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
-     * @fires add
-     * @fires change
-     */
-    add(item, index) {
-        if (this.find(element => element.color === item.color)) {
-            // No duplicates are allowed.
-            return this;
-        }
-        return super.add(item, index);
-    }
-    /**
-     * Checks if an object with given colors is present in the document color collection.
-     */
-    hasColor(color) {
-        return !!this.find(item => item.color === color);
-    }
-}