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

package/build/translations/sq.js

@@ -1 +1 @@
-!function(t){const e=t.sq=t.sq||{};e.dictionary=Object.assign(e.dictionary||{},{"Align cell text to the bottom":"","Align cell text to the center":"","Align cell text to the left":"","Align cell text to the middle":"","Align cell text to the right":"","Align cell text to the top":"","Align table to the left":"","Align table to the right":"",Alignment:"",Background:"",Border:"","Cell properties":"","Center table":"",Color:"","Color picker":"",Column:"Kolona",Dashed:"","Delete column":"Gris kolonën","Delete row":"Grish rreshtin",Dimensions:"",Dotted:"",Double:"","Enter table caption":"",Groove:"","Header column":"Kolona e kokës","Header row":"Rreshti i kokës",Height:"","Horizontal text alignment toolbar":"","Insert column left":"","Insert column right":"","Insert row above":"Shto rresht sipër","Insert row below":"Shto rresht poshtë","Insert table":"Shto tabelë",Inset:"","Justify cell text":"","Merge cell down":"Bashko kutizat poshtë","Merge cell left":"Bashko kutizat majtas","Merge cell right":"Bashko kutizat djathtas","Merge cell up":"Bashko kutizat sipër","Merge cells":"Bashko kutizat",None:"",Outset:"",Padding:"",Ridge:"",Row:"Rreshti","Select column":"","Select row":"",Solid:"","Split cell horizontally":"Ndaj kutizat horizontalisht","Split cell vertically":"Ndajë kutizat vertikalisht",Style:"","Table alignment toolbar":"","Table cell text alignment":"","Table properties":"","Table toolbar":"",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':"",'The value is invalid. Try "10px" or "2em" or simply "2".':"","Toggle caption off":"","Toggle caption on":"","Vertical text alignment toolbar":"",Width:""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(t){const e=t.sq=t.sq||{};e.dictionary=Object.assign(e.dictionary||{},{"Align cell text to the bottom":"Radhite tesktin e qelisë në fund","Align cell text to the center":"Radhite tekstin në mes","Align cell text to the left":"Radhit tekstin e qelisë majtas","Align cell text to the middle":"Radhit tekstin e qelisë në mes","Align cell text to the right":"Radhit tekstin e qelisë në të djathtë","Align cell text to the top":"Radhit tekstin e qelisë sipër","Align table to the left":"Radhit tabelën majtas","Align table to the right":"Radhit tabelën në të djathtë",Alignment:"Radhitja",Background:"Prapavija",Border:"","Cell properties":"Karakteristikat e qelisë","Center table":"",Color:"Ngjyra","Color picker":"",Column:"Kolona",Dashed:"","Delete column":"Gris kolonën","Delete row":"Grish rreshtin",Dimensions:"Dimensionet",Dotted:"Me pika",Double:"Me dy vija","Enter table caption":"",Groove:"","Header column":"Kolona e kokës","Header row":"Rreshti i kokës",Height:"Lartësia","Horizontal text alignment toolbar":"Kokështrirja e rradhitjes së tekstit horizontalisht","Insert column left":"Shto kolonë majtas","Insert column right":"Shto kolonë djathtas","Insert row above":"Shto rresht sipër","Insert row below":"Shto rresht poshtë","Insert table":"Shto tabelë",Inset:"","Justify cell text":"","Merge cell down":"Bashko kutizat poshtë","Merge cell left":"Bashko kutizat majtas","Merge cell right":"Bashko kutizat djathtas","Merge cell up":"Bashko kutizat sipër","Merge cells":"Bashko kutizat",None:"Asnjë",Outset:"",Padding:"",Ridge:"",Row:"Rreshti","Select column":"","Select row":"",Solid:"","Split cell horizontally":"Ndaj kutizat horizontalisht","Split cell vertically":"Ndajë kutizat vertikalisht",Style:"Stili","Table alignment toolbar":"Kokështrirja e radhitjes së tabelës","Table cell text alignment":"Rradhitja e tekstit të qelisë së tabelës","Table properties":"Karakteristikat e tabelës","Table toolbar":"Kokështrirja e tabelës",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'Kodi është i pavlefshëm. Provo"#FF0000" ose "rgb(255,0,0)" ose "red".','The value is invalid. Try "10px" or "2em" or simply "2".':"","Toggle caption off":"","Toggle caption on":"","Vertical text alignment toolbar":"Kokështrirja e rradhitjes së tekstit vertikalisht",Width:"Gjerësia"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/sq.po

@@ -26,11 +26,11 @@ msgstr "Kolona e kokës"
 
 msgctxt "Label for the insert table column to the left of the current one button."
 msgid "Insert column left"
-msgstr ""
+msgstr "Shto kolonë majtas"
 
 msgctxt "Label for the insert table column to the right of the current one button."
 msgid "Insert column right"
-msgstr ""
+msgstr "Shto kolonë djathtas"
 
 msgctxt "Label for the delete table column button."
 msgid "Delete column"
@@ -98,15 +98,15 @@ msgstr "Bashko kutizat"
 
 msgctxt "The label used by assistive technologies describing a table toolbar attached to a table widget."
 msgid "Table toolbar"
-msgstr ""
+msgstr "Kokështrirja e tabelës"
 
 msgctxt "The label describing the form allowing to specify the properties of a selected table."
 msgid "Table properties"
-msgstr ""
+msgstr "Karakteristikat e tabelës"
 
 msgctxt "The label describing the form allowing to specify the properties of a selected table cell."
 msgid "Cell properties"
-msgstr ""
+msgstr "Karakteristikat e qelisë"
 
 msgctxt "The label describing a group of border–related form fields (border style, color, etc.)."
 msgid "Border"
@@ -114,23 +114,23 @@ msgstr ""
 
 msgctxt "The label for the dropdown that allows configuring the border style of a table or a table cell."
 msgid "Style"
-msgstr ""
+msgstr "Stili"
 
 msgctxt "The label for the input that allows configuring the width of a table or a table cell or the width of a border."
 msgid "Width"
-msgstr ""
+msgstr "Gjerësia"
 
 msgctxt "The label for the input that allows configuring the height of a table or a table cell."
 msgid "Height"
-msgstr ""
+msgstr "Lartësia"
 
 msgctxt "The label for the input that allows configuring the border color of a table or a table cell."
 msgid "Color"
-msgstr ""
+msgstr "Ngjyra"
 
 msgctxt "The label for the input that allows configuring the background color of a table or a table cell."
 msgid "Background"
-msgstr ""
+msgstr "Prapavija"
 
 msgctxt "The label for the input that allows configuring the padding of a table cell."
 msgid "Padding"
@@ -138,31 +138,31 @@ msgstr ""
 
 msgctxt "The label describing a group of form fields that allows setting dimensions of a table or a table cell."
 msgid "Dimensions"
-msgstr ""
+msgstr "Dimensionet"
 
 msgctxt "The label for the group of toolbars that allows configuring the text alignment in a table cell."
 msgid "Table cell text alignment"
-msgstr ""
+msgstr "Rradhitja e tekstit të qelisë së tabelës"
 
 msgctxt "The label for the toolbar that allows configuring the alignment of a table."
 msgid "Alignment"
-msgstr ""
+msgstr "Radhitja"
 
 msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the horizontal text alignment in a table cell."
 msgid "Horizontal text alignment toolbar"
-msgstr ""
+msgstr "Kokështrirja e rradhitjes së tekstit horizontalisht"
 
 msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the vertical text alignment in a table cell."
 msgid "Vertical text alignment toolbar"
-msgstr ""
+msgstr "Kokështrirja e rradhitjes së tekstit vertikalisht"
 
 msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the alignment of a table."
 msgid "Table alignment toolbar"
-msgstr ""
+msgstr "Kokështrirja e radhitjes së tabelës"
 
 msgctxt "The label for the border style dropdown when no style is applied to a table or a table cell."
 msgid "None"
-msgstr ""
+msgstr "Asnjë"
 
 msgctxt "The label for the border style dropdown when the solid border is applied to a table or a table cell."
 msgid "Solid"
@@ -170,7 +170,7 @@ msgstr ""
 
 msgctxt "The label for the border style dropdown when the dotted border is applied to a table or a table cell."
 msgid "Dotted"
-msgstr ""
+msgstr "Me pika"
 
 msgctxt "The label for the border style dropdown when the dashed border is applied to a table or a table cell."
 msgid "Dashed"
@@ -178,7 +178,7 @@ msgstr ""
 
 msgctxt "The label for the border style dropdown when the double border is applied to a table or a table cell."
 msgid "Double"
-msgstr ""
+msgstr "Me dy vija"
 
 msgctxt "The label for the border style dropdown when the groove border is applied to a table or a table cell."
 msgid "Groove"
@@ -198,15 +198,15 @@ msgstr ""
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the left."
 msgid "Align cell text to the left"
-msgstr ""
+msgstr "Radhit tekstin e qelisë majtas"
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the center."
 msgid "Align cell text to the center"
-msgstr ""
+msgstr "Radhite tekstin në mes"
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the right."
 msgid "Align cell text to the right"
-msgstr ""
+msgstr "Radhit tekstin e qelisë në të djathtë"
 
 msgctxt "The label used by assistive technologies describing a button that justifies the table cell text."
 msgid "Justify cell text"
@@ -214,19 +214,19 @@ msgstr ""
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the top."
 msgid "Align cell text to the top"
-msgstr ""
+msgstr "Radhit tekstin e qelisë sipër"
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the middle."
 msgid "Align cell text to the middle"
-msgstr ""
+msgstr "Radhit tekstin e qelisë në mes"
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the bottom."
 msgid "Align cell text to the bottom"
-msgstr ""
+msgstr "Radhite tesktin e qelisë në fund"
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table to the left."
 msgid "Align table to the left"
-msgstr ""
+msgstr "Radhit tabelën majtas"
 
 msgctxt "The label used by assistive technologies describing a button that centers the table."
 msgid "Center table"
@@ -234,11 +234,11 @@ msgstr ""
 
 msgctxt "The label used by assistive technologies describing a button that aligns the table to the right."
 msgid "Align table to the right"
-msgstr ""
+msgstr "Radhit tabelën në të djathtë"
 
 msgctxt "The localized error string that can be displayed next to color (background, border) fields that have an invalid value"
 msgid "The color is invalid. Try \"#FF0000\" or \"rgb(255,0,0)\" or \"red\"."
-msgstr ""
+msgstr "Kodi është i pavlefshëm. Provo\"#FF0000\" ose \"rgb(255,0,0)\" ose \"red\"."
 
 msgctxt "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value."
 msgid "The value is invalid. Try \"10px\" or \"2em\" or simply \"2\"."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "38.2.0-alpha.0",
+  "version": "39.0.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,10 +11,9 @@
     "ckeditor5-dll"
   ],
   "main": "src/index.js",
-  "type": "module",
   "dependencies": {
-    "ckeditor5": "38.2.0-alpha.0",
-    "lodash-es": "^4.17.15"
+    "ckeditor5": "39.0.0",
+    "lodash-es": "4.17.21"
   },
   "engines": {
     "node": ">=16.0.0",

package/src/tablecaption/tablecaptionediting.js

@@ -73,10 +73,10 @@ export default class TableCaptionEditing extends Plugin {
                 }
                 const figcaptionElement = writer.createEditableElement('figcaption');
                 writer.setCustomProperty('tableCaption', true, figcaptionElement);
+                figcaptionElement.placeholder = t('Enter table caption');
                 enablePlaceholder({
                     view,
                     element: figcaptionElement,
-                    text: t('Enter table caption'),
                     keepOnFocus: true
                 });
                 return toWidgetEditable(figcaptionElement, writer);

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -108,10 +108,12 @@ export default class TableCellPropertiesUI extends Plugin {
         const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
         const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
         const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
+        const hasColorPicker = config.colorPicker !== false;
         const view = new TableCellPropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties: this._defaultTableCellProperties
+            defaultTableCellProperties: this._defaultTableCellProperties,
+            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
         // Render the view so its #element is available for the clickOutsideHandler.

package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tablecellproperties/ui/tablecellpropertiesview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type FocusableView, type NormalizedColorOption } from 'ckeditor5/src/ui';
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type FocusableView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui';
 import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils';
 import type ColorInputView from '../../ui/colorinputview';
 import type { TableCellPropertiesOptions } from '../../tableconfig';
@@ -16,6 +16,7 @@ export interface TableCellPropertiesViewOptions {
     borderColors: Array<NormalizedColorOption>;
     backgroundColors: Array<NormalizedColorOption>;
     defaultTableCellProperties: TableCellPropertiesOptions;
+    colorPickerConfig: false | ColorPickerConfig;
 }
 /**
  * The class representing a table cell properties form, allowing users to customize

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -228,7 +228,8 @@ export default class TableCellPropertiesView extends View {
         const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.borderColors,
             columns: 5,
-            defaultColorValue: defaultBorder.color
+            defaultColorValue: defaultBorder.color,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const locale = this.locale;
         const t = this.t;
@@ -319,7 +320,8 @@ export default class TableCellPropertiesView extends View {
         const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.backgroundColors,
             columns: 5,
-            defaultColorValue: this.options.defaultTableCellProperties.backgroundColor
+            defaultColorValue: this.options.defaultTableCellProperties.backgroundColor,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const backgroundInput = new LabeledFieldView(locale, colorInputCreator);
         backgroundInput.set({

package/src/tableconfig.d.ts

@@ -6,7 +6,7 @@
  * @module table/tableconfig
  */
 import type { ToolbarConfigItem } from 'ckeditor5/src/core';
-import type { ColorOption } from 'ckeditor5/src/ui';
+import type { ColorOption, ColorPickerConfig } from 'ckeditor5/src/ui';
 /**
  * The configuration of the table feature. Used by the table feature in the `@ckeditor/ckeditor5-table` package.
  *
@@ -208,6 +208,12 @@ export interface TablePropertiesConfig {
     borderColors?: TableColorConfig;
     backgroundColors?: TableColorConfig;
     defaultProperties?: TablePropertiesOptions;
+    /**
+     * Configuration of the color picker in the table properties balloon.
+     *
+     * If set to `false` the picker will not appear.
+     */
+    colorPicker?: false | ColorPickerConfig;
 }
 /**
  * The configuration of the table default properties feature.
@@ -253,6 +259,12 @@ export interface TableCellPropertiesConfig {
     borderColors?: TableColorConfig;
     backgroundColors?: TableColorConfig;
     defaultProperties?: TableCellPropertiesOptions;
+    /**
+     * Configuration of the color picker in the table cell properties balloon.
+     *
+     * If set to `false` the picker will not appear.
+     */
+    colorPicker?: false | ColorPickerConfig;
 }
 /**
  * An array of color definitions (either strings or objects).

package/src/tableproperties/tablepropertiesui.js

@@ -105,10 +105,12 @@ export default class TablePropertiesUI extends Plugin {
         const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
         const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
         const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
+        const hasColorPicker = config.colorPicker !== false;
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties
+            defaultTableProperties: this._defaultTableProperties,
+            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
         // Render the view so its #element is available for the clickOutsideHandler.

package/src/tableproperties/ui/tablepropertiesview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tableproperties/ui/tablepropertiesview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption } from 'ckeditor5/src/ui';
+import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
 import '../../../theme/form.css';
 import '../../../theme/tableform.css';
@@ -30,6 +30,10 @@ export interface TablePropertiesViewOptions {
      * The default table properties.
      */
     defaultTableProperties: TablePropertiesOptions;
+    /**
+     * The default color picker config.
+     */
+    colorPickerConfig: false | ColorPickerConfig;
 }
 /**
  * The class representing a table properties form, allowing users to customize

package/src/tableproperties/ui/tablepropertiesview.js

@@ -204,7 +204,8 @@ export default class TablePropertiesView extends View {
         const colorInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.borderColors,
             columns: 5,
-            defaultColorValue: defaultBorder.color
+            defaultColorValue: defaultBorder.color,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const locale = this.locale;
         const t = this.t;
@@ -295,7 +296,8 @@ export default class TablePropertiesView extends View {
         const backgroundInputCreator = getLabeledColorInputCreator({
             colorConfig: this.options.backgroundColors,
             columns: 5,
-            defaultColorValue: this.options.defaultTableProperties.backgroundColor
+            defaultColorValue: this.options.defaultTableProperties.backgroundColor,
+            colorPickerConfig: this.options.colorPickerConfig
         });
         const backgroundInput = new LabeledFieldView(locale, backgroundInputCreator);
         backgroundInput.set({

package/src/ui/colorinputview.d.ts

@@ -5,13 +5,14 @@
 /**
  * @module table/ui/colorinputview
  */
-import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView } from 'ckeditor5/src/ui';
+import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView, type ColorPickerConfig } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
 import '../../theme/colorinput.css';
 export type ColorInputViewOptions = {
     colorDefinitions: Array<ColorDefinition>;
     columns: number;
     defaultColorValue?: string;
+    colorPickerConfig: false | ColorPickerConfig;
 };
 /**
  * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
@@ -121,13 +122,9 @@ export default class ColorInputView extends View {
      */
     private _createInputTextView;
     /**
-     * Creates and configures the button that clears the color.
+     * Creates and configures the panel with "color grid" and "color picker" inside the {@link #dropdownView}.
      */
-    private _createRemoveColorButton;
-    /**
-     * Creates and configures the color grid inside the {@link #dropdownView}.
-     */
-    private _createColorGrid;
+    private _createColorSelector;
     /**
      * Sets {@link #inputView}'s value property to the color value or color label,
      * if there is one and the user is not typing.

package/src/ui/colorinputview.js

@@ -5,8 +5,7 @@
 /**
  * @module table/ui/colorinputview
  */
-import { View, InputTextView, ButtonView, createDropdown, ColorGridView, FocusCycler, ViewCollection } from 'ckeditor5/src/ui';
-import { icons } from 'ckeditor5/src/core';
+import { View, InputTextView, createDropdown, FocusCycler, ViewCollection, ColorSelectorView } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 import '../../theme/colorinput.css';
 /**
@@ -94,10 +93,9 @@ export default class ColorInputView extends View {
         const locale = this.locale;
         const t = locale.t;
         const bind = this.bindTemplate;
-        const colorGrid = this._createColorGrid(locale);
+        const colorSelector = this._createColorSelector(locale);
         const dropdown = createDropdown(locale);
         const colorPreview = new View();
-        const removeColorButton = this._createRemoveColorButton();
         colorPreview.setTemplate({
             tag: 'span',
             attributes: {
@@ -129,13 +127,16 @@ export default class ColorInputView extends View {
         dropdown.buttonView.label = t('Color picker');
         dropdown.buttonView.tooltip = true;
         dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
-        dropdown.panelView.children.add(removeColorButton);
-        dropdown.panelView.children.add(colorGrid);
+        dropdown.panelView.children.add(colorSelector);
         dropdown.bind('isEnabled').to(this, 'isReadOnly', value => !value);
-        this._focusables.add(removeColorButton);
-        this._focusables.add(colorGrid);
-        this.focusTracker.add(removeColorButton.element);
-        this.focusTracker.add(colorGrid.element);
+        this._focusables.add(colorSelector);
+        this.focusTracker.add(colorSelector.element);
+        dropdown.on('change:isOpen', (evt, name, isVisible) => {
+            if (isVisible) {
+                colorSelector.updateSelectedColors();
+                colorSelector.showColorGridsFragment();
+            }
+        });
         return dropdown;
     }
     /**
@@ -169,40 +170,56 @@ export default class ColorInputView extends View {
         return inputView;
     }
     /**
-     * Creates and configures the button that clears the color.
+     * Creates and configures the panel with "color grid" and "color picker" inside the {@link #dropdownView}.
      */
-    _createRemoveColorButton() {
-        const locale = this.locale;
+    _createColorSelector(locale) {
         const t = locale.t;
-        const removeColorButton = new ButtonView(locale);
         const defaultColor = this.options.defaultColorValue || '';
         const removeColorButtonLabel = defaultColor ? t('Restore default') : t('Remove color');
-        removeColorButton.class = 'ck-input-color__remove-color';
-        removeColorButton.withText = true;
-        removeColorButton.icon = icons.eraser;
-        removeColorButton.label = removeColorButtonLabel;
-        removeColorButton.on('execute', () => {
-            this.value = defaultColor;
-            this.dropdownView.isOpen = false;
-            this.fire('input');
+        const colorSelector = new ColorSelectorView(locale, {
+            colors: this.options.colorDefinitions,
+            columns: this.options.columns,
+            removeButtonLabel: removeColorButtonLabel,
+            colorPickerLabel: t('Color picker'),
+            colorPickerViewConfig: this.options.colorPickerConfig === false ? false : {
+                ...this.options.colorPickerConfig,
+                hideInput: true
+            }
         });
-        return removeColorButton;
-    }
-    /**
-     * Creates and configures the color grid inside the {@link #dropdownView}.
-     */
-    _createColorGrid(locale) {
-        const colorGrid = new ColorGridView(locale, {
-            colorDefinitions: this.options.colorDefinitions,
-            columns: this.options.columns
+        colorSelector.appendUI();
+        colorSelector.on('execute', (evt, data) => {
+            if (data.source === 'colorPickerSaveButton') {
+                this.dropdownView.isOpen = false;
+                return;
+            }
+            this.value = data.value || defaultColor;
+            // Trigger the listener that actually applies the set value.
+            this.fire('input');
+            if (data.source !== 'colorPicker') {
+                this.dropdownView.isOpen = false;
+            }
         });
-        colorGrid.on('execute', (evtData, data) => {
-            this.value = data.value;
-            this.dropdownView.isOpen = false;
+        /**
+         * Color is saved before changes in color picker. In case "cancel button" is pressed
+         * this color will be applied.
+         */
+        let backupColor = this.value;
+        colorSelector.on('colorPicker:cancel', () => {
+            /**
+             * Revert color to previous value before changes in color picker.
+             */
+            this.value = backupColor;
             this.fire('input');
+            this.dropdownView.isOpen = false;
+        });
+        colorSelector.colorGridsFragmentView.colorPickerButtonView.on('execute', () => {
+            /**
+             * Save color value before changes in color picker.
+             */
+            backupColor = this.value;
         });
-        colorGrid.bind('selectedColor').to(this, 'value');
-        return colorGrid;
+        colorSelector.bind('selectedColor').to(this, 'value');
+        return colorSelector;
     }
     /**
      * Sets {@link #inputView}'s value property to the color value or color label,

package/src/utils/ui/table-properties.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/utils/ui/table-properties
  */
-import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View } from 'ckeditor5/src/ui';
+import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View, type ColorPickerConfig } from 'ckeditor5/src/ui';
 import { Collection, type LocaleTranslate } from 'ckeditor5/src/utils';
 import type TableCellPropertiesView from '../../tablecellproperties/ui/tablecellpropertiesview';
 import type TablePropertiesView from '../../tableproperties/ui/tablepropertiesview';
@@ -185,9 +185,11 @@ export declare const defaultColors: Array<ColorOption>;
  * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
  * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
  * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
+ * @param options.colorPickerConfig The configuration of the color picker. You could disable it or define your output format.
  */
 export declare function getLabeledColorInputCreator(options: {
     colorConfig: Array<NormalizedColorOption>;
     columns: number;
     defaultColorValue?: string;
+    colorPickerConfig: false | ColorPickerConfig;
 }): (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => ColorInputView;

package/src/utils/ui/table-properties.js

@@ -318,13 +318,15 @@ export const defaultColors = [
  * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
  * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
  * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
+ * @param options.colorPickerConfig The configuration of the color picker. You could disable it or define your output format.
  */
 export function getLabeledColorInputCreator(options) {
     return (labeledFieldView, viewUid, statusUid) => {
         const colorInputView = new ColorInputView(labeledFieldView.locale, {
             colorDefinitions: colorConfigToColorGridDefinitions(options.colorConfig),
             columns: options.columns,
-            defaultColorValue: options.defaultColorValue
+            defaultColorValue: options.defaultColorValue,
+            colorPickerConfig: options.colorPickerConfig
         });
         colorInputView.inputView.set({
             id: viewUid,

package/theme/tablecaption.css

@@ -4,9 +4,9 @@
  */
 
 :root {
-	--ck-color-table-caption-background: hsl(0, 0%, 97%);
-	--ck-color-table-caption-text: hsl(0, 0%, 20%);
-	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
+	--ck-color-selector-caption-background: hsl(0, 0%, 97%);
+	--ck-color-selector-caption-text: hsl(0, 0%, 20%);
+	--ck-color-selector-caption-highlighted-background: hsl(52deg 100% 50%);
 }
 
 /* Content styles */
@@ -15,8 +15,8 @@
 	caption-side: top;
 	word-break: break-word;
 	text-align: center;
-	color: var(--ck-color-table-caption-text);
-	background-color: var(--ck-color-table-caption-background);
+	color: var(--ck-color-selector-caption-text);
+	background-color: var(--ck-color-selector-caption-background);
 	padding: .6em;
 	font-size: .75em;
 	outline-offset: -1px;
@@ -44,10 +44,10 @@
 
 @keyframes ck-table-caption-highlight {
 	0% {
-		background-color: var(--ck-color-table-caption-highlighted-background);
+		background-color: var(--ck-color-selector-caption-highlighted-background);
 	}
 
 	100% {
-		background-color: var(--ck-color-table-caption-background);
+		background-color: var(--ck-color-selector-caption-background);
 	}
 }

package/theme/tablecolumnresize.css

@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-color-table-column-resizer-hover: var(--ck-color-base-active);
+	--ck-color-selector-column-resizer-hover: var(--ck-color-base-active);
 	--ck-table-column-resizer-width: 7px;
 
 	/* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
@@ -55,7 +55,7 @@
 
 .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
 .ck.ck-editor__editable .table .ck-table-column-resizer__active {
-	background-color: var(--ck-color-table-column-resizer-hover);
+	background-color: var(--ck-color-selector-column-resizer-hover);
 	opacity: 0.25;
 }