@ckeditor/ckeditor5-table 45.2.1 → 46.0.0-alpha.1

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

@@ -7,14 +7,15 @@
  */
 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';
+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}
  * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export declare function getBorderStyleLabels(t: LocaleTranslate): Record<string, string>;
@@ -22,6 +23,7 @@ export declare function getBorderStyleLabels(t: LocaleTranslate): Record<string,
  * Returns a localized error string that can be displayed next to color (background, border)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export declare function getLocalizedColorErrorText(t: LocaleTranslate): string;
@@ -29,6 +31,7 @@ export declare function getLocalizedColorErrorText(t: LocaleTranslate): string;
  * Returns a localized error string that can be displayed next to length (padding, border width)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export declare function getLocalizedLengthErrorText(t: LocaleTranslate): string;
@@ -36,27 +39,34 @@ export declare function getLocalizedLengthErrorText(t: LocaleTranslate): string;
  * Returns `true` when the passed value is an empty string or a valid CSS color expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isColor}.
+ * See {@link module:engine/view/styles/utils~isColorStyleValue}.
+ *
+ * @internal
  */
 export declare function colorFieldValidator(value: string): boolean;
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
- * See {@link module:engine/view/styles/utils~isPercentage}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ * See {@link module:engine/view/styles/utils~isPercentageStyleValue}.
+ *
+ * @internal
  */
 export declare function lengthFieldValidator(value: string): boolean;
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ *
+ * @internal
  */
 export declare function lineWidthFieldValidator(value: string): boolean;
 /**
  * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  *
+ * @internal
  * @param defaultStyle The default border.
  */
 export declare function getBorderStyleDefinitions(view: TableCellPropertiesView | TablePropertiesView, defaultStyle: string): Collection<ListDropdownItemDefinition>;
@@ -67,6 +77,7 @@ export declare function getBorderStyleDefinitions(view: TableCellPropertiesView
  * * have some icons,
  * * set a certain UI view property value upon execution.
  *
+ * @internal
  * @param options Configuration options
  * @param options.view The view that has the observable property.
  * @param options.icons Object with button icons.
@@ -158,6 +169,8 @@ export declare function fillToolbar<TView extends View, TPropertyName extends ke
  *   }
  * ];
  * ```
+ *
+ * @internal
  */
 export declare const defaultColors: Array<ColorOption>;
 /**

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

@@ -5,16 +5,17 @@
 /**
  * @module table/utils/ui/table-properties
  */
-import { ButtonView, ViewModel } from 'ckeditor5/src/ui.js';
+import { ButtonView, UIModel } 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';
+import { isColorStyleValue, isLengthStyleValue, isPercentageStyleValue } 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
  * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
  * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export function getBorderStyleLabels(t) {
@@ -34,6 +35,7 @@ export function getBorderStyleLabels(t) {
  * Returns a localized error string that can be displayed next to color (background, border)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export function getLocalizedColorErrorText(t) {
@@ -43,6 +45,7 @@ export function getLocalizedColorErrorText(t) {
  * Returns a localized error string that can be displayed next to length (padding, border width)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */
 export function getLocalizedLengthErrorText(t) {
@@ -52,36 +55,43 @@ export function getLocalizedLengthErrorText(t) {
  * Returns `true` when the passed value is an empty string or a valid CSS color expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isColor}.
+ * See {@link module:engine/view/styles/utils~isColorStyleValue}.
+ *
+ * @internal
  */
 export function colorFieldValidator(value) {
     value = value.trim().toLowerCase();
-    return isEmpty(value) || isColor(value);
+    return isEmpty(value) || isColorStyleValue(value);
 }
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
- * See {@link module:engine/view/styles/utils~isPercentage}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ * See {@link module:engine/view/styles/utils~isPercentageStyleValue}.
+ *
+ * @internal
  */
 export function lengthFieldValidator(value) {
     value = value.trim();
-    return isEmpty(value) || isNumberString(value) || isLength(value) || isPercentage(value);
+    return isEmpty(value) || isNumberString(value) || isLengthStyleValue(value) || isPercentageStyleValue(value);
 }
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ *
+ * @internal
  */
 export function lineWidthFieldValidator(value) {
     value = value.trim();
-    return isEmpty(value) || isNumberString(value) || isLength(value);
+    return isEmpty(value) || isNumberString(value) || isLengthStyleValue(value);
 }
 /**
  * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  *
+ * @internal
  * @param defaultStyle The default border.
  */
 export function getBorderStyleDefinitions(view, defaultStyle) {
@@ -90,7 +100,7 @@ export function getBorderStyleDefinitions(view, defaultStyle) {
     for (const style in styleLabels) {
         const definition = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 _borderStyleValue: style,
                 label: styleLabels[style],
                 role: 'menuitemradio',
@@ -121,6 +131,7 @@ export function getBorderStyleDefinitions(view, defaultStyle) {
  * * have some icons,
  * * set a certain UI view property value upon execution.
  *
+ * @internal
  * @param options Configuration options
  * @param options.view The view that has the observable property.
  * @param options.icons Object with button icons.
@@ -237,6 +248,8 @@ export function fillToolbar(options) {
  *   }
  * ];
  * ```
+ *
+ * @internal
  */
 export const defaultColors = [
     {

package/src/utils/ui/widget.d.ts

@@ -8,13 +8,19 @@
 import type { ViewDocumentSelection, ViewElement } from 'ckeditor5/src/engine.js';
 /**
  * Depending on the position of the selection either return the selected table or the table higher in the hierarchy.
+ *
+ * @internal
  */
 export declare function getSelectionAffectedTableWidget(selection: ViewDocumentSelection): ViewElement | null;
 /**
  * Returns a table widget editing view element if one is selected.
+ *
+ * @internal
  */
 export declare function getSelectedTableWidget(selection: ViewDocumentSelection): ViewElement | null;
 /**
  * Returns a table widget editing view element if one is among the selection's ancestors.
+ *
+ * @internal
  */
 export declare function getTableWidgetAncestor(selection: ViewDocumentSelection): ViewElement | null;

package/src/utils/ui/widget.js

@@ -5,6 +5,8 @@
 import { isWidget } from 'ckeditor5/src/widget.js';
 /**
  * Depending on the position of the selection either return the selected table or the table higher in the hierarchy.
+ *
+ * @internal
  */
 export function getSelectionAffectedTableWidget(selection) {
     const selectedTable = getSelectedTableWidget(selection);
@@ -15,6 +17,8 @@ export function getSelectionAffectedTableWidget(selection) {
 }
 /**
  * Returns a table widget editing view element if one is selected.
+ *
+ * @internal
  */
 export function getSelectedTableWidget(selection) {
     const viewElement = selection.getSelectedElement();
@@ -25,6 +29,8 @@ export function getSelectedTableWidget(selection) {
 }
 /**
  * Returns a table widget editing view element if one is among the selection's ancestors.
+ *
+ * @internal
  */
 export function getTableWidgetAncestor(selection) {
     const selectionPosition = selection.getFirstPosition();

package/theme/tablecaption.css

@@ -6,19 +6,20 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
 
 :root {
-	--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%);
+	--ck-content-color-table-caption-background: hsl(0, 0%, 97%);
+	--ck-content-color-table-caption-text: hsl(0, 0%, 20%);
+	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
 }
 
 /* Content styles */
 .ck-content .table > figcaption {
 	display: table-caption;
 	caption-side: top;
-	word-break: break-word;
+	word-break: normal;
+	overflow-wrap: anywhere;
 	text-align: center;
-	color: var(--ck-color-selector-caption-text);
-	background-color: var(--ck-color-selector-caption-background);
+	color: var(--ck-content-color-table-caption-text);
+	background-color: var(--ck-content-color-table-caption-background);
 	padding: .6em;
 	font-size: .75em;
 	outline-offset: -1px;
@@ -54,10 +55,10 @@
 
 @keyframes ck-table-caption-highlight {
 	0% {
-		background-color: var(--ck-color-selector-caption-highlighted-background);
+		background-color: var(--ck-color-table-caption-highlighted-background);
 	}
 
 	100% {
-		background-color: var(--ck-color-selector-caption-background);
+		background-color: var(--ck-content-color-table-caption-background);
 	}
 }

package/theme/tablecolumnresize.css

@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-color-selector-column-resizer-hover: var(--ck-color-base-active);
+	--ck-color-table-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.
@@ -52,7 +52,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-selector-column-resizer-hover);
+	background-color: var(--ck-color-table-column-resizer-hover);
 	opacity: 0.25;
 }