@ckeditor/ckeditor5-ui 38.2.0-alpha.0 → 39.0.0

package/lang/translations/sr.po

@@ -114,4 +114,8 @@ msgstr "Контекстуална трака са алаткама Едитор
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "HEX"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "Prihvati"

package/lang/translations/sv.po

@@ -114,4 +114,8 @@ msgstr "Ordbehandlarens kontextuella verktygsfält"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "HEX"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "Acceptera"

package/lang/translations/th.po

@@ -114,4 +114,8 @@ msgstr "แถบเครื่องมือแก้ไขข้อควา
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "HEX"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "ยอมรับ"

package/lang/translations/tk.po

@@ -115,3 +115,7 @@ msgstr ""
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
 msgstr ""
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr ""

package/lang/translations/tr.po

@@ -114,4 +114,8 @@ msgstr "Düzenleyici içeriksel araç çubuğu"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "ONALTILIK"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "Kabul et"

package/lang/translations/tt.po

@@ -115,3 +115,7 @@ msgstr ""
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
 msgstr ""
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr ""

package/lang/translations/ug.po

@@ -115,3 +115,7 @@ msgstr ""
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
 msgstr ""
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "قوشۇل"

package/lang/translations/uk.po

@@ -114,4 +114,8 @@ msgstr "Контекстна панель інструментів редакт
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "Шістнадцятковий"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "Прийняти"

package/lang/translations/ur.po

@@ -115,3 +115,7 @@ msgstr ""
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
 msgstr ""
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr ""

package/lang/translations/uz.po

@@ -115,3 +115,7 @@ msgstr ""
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
 msgstr ""
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr ""

package/lang/translations/vi.po

@@ -114,4 +114,8 @@ msgstr "Thanh công cụ chỉnh sửa theo ngữ cảnh"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "HEX"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "Chấp nhận"

package/lang/translations/zh-cn.po

@@ -114,4 +114,8 @@ msgstr "编辑器上下文工具栏"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "十六进制"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "接受"

package/lang/translations/zh.po

@@ -114,4 +114,8 @@ msgstr "編輯器關聯式工具列"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "十六進位"
+
+msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
+msgid "Accept"
+msgstr "接受"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "38.2.0-alpha.0",
+  "version": "39.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,13 +10,12 @@
     "ckeditor5-dll"
   ],
   "main": "src/index.js",
-  "type": "module",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "38.2.0-alpha.0",
-    "@ckeditor/ckeditor5-utils": "38.2.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "39.0.0",
+    "@ckeditor/ckeditor5-utils": "39.0.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
-    "lodash-es": "^4.17.15",
+    "lodash-es": "4.17.21",
     "vanilla-colorful": "0.7.2"
   },
   "engines": {

package/src/colorgrid/colortileview.js

@@ -25,7 +25,7 @@ export default class ColorTileView extends ButtonView {
                 class: [
                     'ck',
                     'ck-color-grid__tile',
-                    bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
+                    bind.if('hasBorder', 'ck-color-selector__color-tile_bordered')
                 ]
             }
         });

package/src/colorpicker/colorpickerview.d.ts

@@ -5,12 +5,15 @@
 /**
  * @module ui/colorpicker/colorpickerview
  */
-import { type ColorPickerConfig } from './utils';
+import { type ColorPickerViewConfig } from './utils';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view';
 import type ViewCollection from '../viewcollection';
 import 'vanilla-colorful/hex-color-picker.js';
 import '../../theme/components/colorpicker/colorpicker.css';
+/**
+ * A class which represents a color picker with an input field for defining custom colors.
+ */
 export default class ColorPickerView extends View {
     /**
      * Element with saturation and hue sliders.
@@ -22,7 +25,8 @@ export default class ColorPickerView extends View {
      */
     hexInputRow: ColorPickerInputRowView;
     /**
-     * Current color state in color picker.
+     * Current color selected in the color picker. It can be set by the component itself
+     * (through the palette or input) or from the outside (e.g. to reflect the current selection color).
      */
     color: string;
     /**
@@ -42,21 +46,26 @@ export default class ColorPickerView extends View {
      */
     _hexColor: string;
     /**
-    * Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
-    * `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
-    */
+     * Debounced function updating the `color` property in the component
+     * and firing the `ColorPickerColorSelectedEvent`. Executed whenever color in component
+     * is changed by the user interaction (through the palette or input).
+     *
+     * @private
+     */
     private _debounceColorPickerEvent;
     /**
-     * The output format (the one in which colors are applied in the model) of color picker.
+     * A reference to the configuration of the color picker specified in the constructor.
+     *
+     * @private
      */
-    private _format;
+    private _config;
     /**
      * Creates a view of color picker.
      *
      * @param locale
      * @param config
      */
-    constructor(locale: Locale | undefined, config: ColorPickerConfig);
+    constructor(locale: Locale | undefined, config?: ColorPickerViewConfig);
     /**
      * Renders color picker in the view.
      */
@@ -107,4 +116,22 @@ declare class ColorPickerInputRowView extends View {
      */
     constructor(locale: Locale, children?: Array<View>);
 }
+/**
+ * An event fired whenever the color was selected through the color picker palette
+ * or the color picker input.
+ *
+ * This even fires only when the user changes the color. It does not fire when the color
+ * is changed programmatically, e.g. via
+ * {@link module:ui/colorpicker/colorpickerview~ColorPickerView#color}.
+ *
+ * @eventName ~ColorPickerView#colorSelected
+ */
+export type ColorPickerColorSelectedEvent = {
+    name: 'colorSelected';
+    args: [
+        {
+            color: string;
+        }
+    ];
+};
 export {};

package/src/colorpicker/colorpickerview.js

@@ -14,6 +14,9 @@ import { createLabeledInputText } from '../labeledfield/utils';
 import 'vanilla-colorful/hex-color-picker.js';
 import '../../theme/components/colorpicker/colorpicker.css';
 const waitingTime = 150;
+/**
+ * A class which represents a color picker with an input field for defining custom colors.
+ */
 export default class ColorPickerView extends View {
     /**
      * Creates a view of color picker.
@@ -21,14 +24,17 @@ export default class ColorPickerView extends View {
      * @param locale
      * @param config
      */
-    constructor(locale, config) {
+    constructor(locale, config = {}) {
         super(locale);
-        this.set('color', '');
-        this.set('_hexColor', '');
-        this._format = config.format || 'hsl';
+        this.set({
+            color: '',
+            _hexColor: ''
+        });
         this.hexInputRow = this._createInputRow();
         const children = this.createCollection();
-        children.add(this.hexInputRow);
+        if (!config.hideInput) {
+            children.add(this.hexInputRow);
+        }
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -37,21 +43,27 @@ export default class ColorPickerView extends View {
             },
             children
         });
+        this._config = config;
         this._debounceColorPickerEvent = debounce((color) => {
+            // At first, set the color internally in the component. It's converted to the configured output format.
             this.set('color', color);
+            // Then let the outside world know that the user changed the color.
+            this.fire('colorSelected', { color: this.color });
         }, waitingTime, {
             leading: true
         });
-        // Sets color in the picker if color was updated.
+        // The `color` property holds the color in the configured output format.
+        // Ensure it before actually setting the value.
         this.on('set:color', (evt, propertyName, newValue) => {
-            // The color needs always to be kept in the output format.
-            evt.return = convertColor(newValue, this._format);
+            evt.return = convertColor(newValue, this._config.format || 'hsl');
         });
+        // The `_hexColor` property is bound to the `color` one, but requires conversion.
         this.on('change:color', () => {
             this._hexColor = convertColorToCommonHexFormat(this.color);
         });
         this.on('change:_hexColor', () => {
-            // Should update color in color picker when its not focused
+            // Update the selected color in the color picker palette when it's not focused.
+            // It means the user typed the color in the input.
             if (document.activeElement !== this.picker) {
                 this.picker.setAttribute('color', this._hexColor);
             }
@@ -72,7 +84,12 @@ export default class ColorPickerView extends View {
         this.picker.setAttribute('tabindex', '-1');
         this._createSlidersView();
         if (this.element) {
-            this.element.insertBefore(this.picker, this.hexInputRow.element);
+            if (this.hexInputRow.element) {
+                this.element.insertBefore(this.picker, this.hexInputRow.element);
+            }
+            else {
+                this.element.appendChild(this.picker);
+            }
             // Create custom stylesheet with a look of focused pointer in color picker and append it into the color picker shadowDom
             const styleSheetForFocusedColorPicker = document.createElement('style');
             styleSheetForFocusedColorPicker.textContent = '[role="slider"]:focus [part$="pointer"] {' +
@@ -101,7 +118,7 @@ export default class ColorPickerView extends View {
         // See: https://github.com/cksource/ckeditor5-internal/issues/3245, https://github.com/ckeditor/ckeditor5/issues/14119,
         // https://github.com/cksource/ckeditor5-internal/issues/3268.
         /* istanbul ignore next -- @preserve */
-        if (env.isGecko || env.isiOS || env.isSafari) {
+        if (!this._config.hideInput && (env.isGecko || env.isiOS || env.isSafari)) {
             const input = this.hexInputRow.children.get(1);
             input.focus();
         }
@@ -209,7 +226,7 @@ class SliderView extends View {
         this.element.focus();
     }
 }
-// View abstaction over the `#` character before color input.
+// View abstraction over the `#` character before color input.
 class HashView extends View {
     constructor(locale) {
         super(locale);

package/src/colorpicker/utils.d.ts

@@ -18,6 +18,14 @@ export type ColorPickerOutputFormat = 'hex' | 'rgb' | 'hsl' | 'hwb' | 'lab' | 'l
 export type ColorPickerConfig = {
     format?: ColorPickerOutputFormat;
 };
+/**
+ * Configuration of the color picker view.
+ *
+ * It can be used to enforce a particular color format or hide the color input.
+ */
+export type ColorPickerViewConfig = ColorPickerConfig & {
+    hideInput?: boolean;
+};
 /**
  * Parses and converts the color string to requested format. Handles variety of color spaces
  * like `hsl`, `hex` or `rgb`.

package/src/colorselector/colorgridsfragmentview.d.ts

@@ -0,0 +1,194 @@
+/**
+ * @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 ui/colorselector/colorgridsfragmentview
+ */
+import View from '../view';
+import ButtonView from '../button/buttonview';
+import ColorGridView, { type ColorDefinition } from '../colorgrid/colorgridview';
+import DocumentColorCollection from './documentcolorcollection';
+import type { Model } from '@ckeditor/ckeditor5-engine';
+import type { FocusTracker, Locale } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from '../viewcollection';
+/**
+ * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
+ *
+ * It provides a UI that allows users to select colors from the a predefined set and from existing document colors.
+ *
+ * It consists of the following sub–components:
+ *
+ * * A "Remove color" button,
+ * * A static {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors defined in the configuration,
+ * * A dynamic {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors used in the document.
+ * * If color picker is configured, the "Color Picker" button is visible too.
+ */
+export default class ColorGridsFragmentView extends View {
+    /**
+     * A collection of the children of the table.
+     */
+    readonly items: ViewCollection;
+    /**
+     * An array with objects representing colors to be displayed in the grid.
+     */
+    colorDefinitions: Array<ColorDefinition>;
+    /**
+     * Tracks information about the DOM focus in the list.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * The number of columns in the color grid.
+     */
+    columns: number;
+    /**
+     * Preserves the reference to {@link module:ui/colorselector/documentcolorcollection~DocumentColorCollection} used to collect
+     * definitions that store the document colors.
+     *
+     * @readonly
+     */
+    documentColors: DocumentColorCollection;
+    /**
+     * The maximum number of colors in the document colors section.
+     * If it equals 0, the document colors section is not added.
+     *
+     * @readonly
+     */
+    documentColorsCount?: number;
+    /**
+     * Keeps the value of the command associated with the table for the current selection.
+     */
+    selectedColor: string;
+    /**
+     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+     * the default (static) color set.
+     *
+     * The property is loaded once the the parent dropdown is opened the first time.
+     *
+     * @readonly
+     */
+    staticColorsGrid: ColorGridView | undefined;
+    /**
+     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+     * the document colors. It remains undefined if the document colors feature is disabled.
+     *
+     * The property is loaded once the the parent dropdown is opened the first time.
+     *
+     * @readonly
+     */
+    documentColorsGrid: ColorGridView | undefined;
+    /**
+     * The "Color picker" button view.
+     */
+    colorPickerButtonView?: ButtonView;
+    /**
+     * The "Remove color" button view.
+     */
+    removeColorButtonView: ButtonView;
+    /**
+     * The property which is responsible for is component visible or not.
+     */
+    isVisible: boolean;
+    /**
+     * A collection of views that can be focused in the view.
+     *
+     * @readonly
+     */
+    protected _focusables: ViewCollection;
+    /**
+     * Document color section's label.
+     *
+     * @readonly
+     */
+    private _documentColorsLabel?;
+    /**
+     * The label of the button responsible for removing color attributes.
+     */
+    private _removeButtonLabel;
+    /**
+     * The label of the button responsible for switching to the color picker component.
+     */
+    private _colorPickerLabel;
+    /**
+     * Creates an instance of the view.
+     *
+     * @param locale The localization services instance.
+     * @param colors An array with definitions of colors to be displayed in the table.
+     * @param columns The number of columns in the color grid.
+     * @param removeButtonLabel The label of the button responsible for removing the color.
+     * @param colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param documentColorsLabel The label for the section with the document colors.
+     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param focusTracker Tracks information about the DOM focus in the list.
+     * @param focusables A collection of views that can be focused in the view.
+     */
+    constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }: {
+        colors: Array<ColorDefinition>;
+        columns: number;
+        removeButtonLabel: string;
+        colorPickerLabel: string;
+        documentColorsLabel?: string;
+        documentColorsCount?: number;
+        focusTracker: FocusTracker;
+        focusables: ViewCollection;
+    });
+    /**
+     * Scans through the editor model and searches for text node attributes with the given attribute name.
+     * Found entries are set as document colors.
+     *
+     * All the previously stored document colors will be lost in the process.
+     *
+     * @param model The model used as a source to obtain the document colors.
+     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
+     */
+    updateDocumentColors(model: Model, attributeName: string): void;
+    /**
+     * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgridview~ColorGridView}s
+     * available in the {@link module:ui/colorselector/colorselectorview~ColorSelectorView}. It guarantees that the selection will
+     * occur only in one of them.
+     */
+    updateSelectedColors(): void;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the component.
+     */
+    focus(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Handles displaying the color picker button (if it was previously created) and making it focusable.
+     */
+    addColorPickerButton(): void;
+    /**
+     * Adds color selector elements to focus tracker.
+     */
+    private _addColorSelectorElementsToFocusTracker;
+    /**
+     * Creates the button responsible for displaying the color picker component.
+     */
+    private _createColorPickerButton;
+    /**
+     * Adds the remove color button as a child of the current view.
+     */
+    private _createRemoveColorButton;
+    /**
+     * Creates a static color grid based on the editor configuration.
+     */
+    private _createStaticColorsGrid;
+    /**
+     * Creates the document colors section view and binds it to {@link #documentColors}.
+     */
+    private _createDocumentColorsGrid;
+    /**
+     * Adds a given color to the document colors list. If possible, the method will attempt to use
+     * data from the {@link #colorDefinitions} (label, color options).
+     *
+     * @param color A string that stores the value of the recently applied color.
+     */
+    private _addColorToDocumentColors;
+}