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

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

@@ -5,11 +5,11 @@
 /**
  * @module table/utils/ui/table-properties
  */
-import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View } 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';
-import ColorInputView from '../../ui/colorinputview';
+import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
+import { Collection, type LocaleTranslate } from 'ckeditor5/src/utils.js';
+import type TableCellPropertiesView from '../../tablecellproperties/ui/tablecellpropertiesview.js';
+import type TablePropertiesView from '../../tableproperties/ui/tablepropertiesview.js';
+import ColorInputView from '../../ui/colorinputview.js';
 /**
  * Returns an object containing pairs of CSS border style values and their localized UI
  * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
@@ -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

@@ -5,10 +5,10 @@
 /**
  * @module table/utils/ui/table-properties
  */
-import { ButtonView, Model } from 'ckeditor5/src/ui';
-import { Collection } from 'ckeditor5/src/utils';
-import { isColor, isLength, isPercentage } from 'ckeditor5/src/engine';
-import ColorInputView from '../../ui/colorinputview';
+import { ButtonView, Model } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import { isColor, isLength, isPercentage } from 'ckeditor5/src/engine.js';
+import ColorInputView from '../../ui/colorinputview.js';
 const isEmpty = (val) => val === '';
 /**
  * Returns an object containing pairs of CSS border style values and their localized UI
@@ -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/src/utils/ui/widget.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/utils/ui/widget
  */
-import type { ViewDocumentSelection, ViewElement } from 'ckeditor5/src/engine';
+import type { ViewDocumentSelection, ViewElement } from 'ckeditor5/src/engine.js';
 /**
  * Returns a table widget editing view element if one is selected.
  */

package/src/utils/ui/widget.js

@@ -2,7 +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
  */
-import { isWidget } from 'ckeditor5/src/widget';
+import { isWidget } from 'ckeditor5/src/widget.js';
 /**
  * Returns a table widget editing view element if one is selected.
  */

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