@ckeditor/ckeditor5-table 0.0.0-nightly-20230630.0 → 0.0.0-nightly-20230702.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "0.0.0-nightly-20230630.0",
+  "version": "0.0.0-nightly-20230702.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,7 +12,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20230630.0",
+    "ckeditor5": "0.0.0-nightly-20230702.0",
     "lodash-es": "^4.17.15"
   },
   "engines": {

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;
 }