@ckeditor/ckeditor5-table 47.6.1 → 48.0.0-alpha.0

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

@@ -1,391 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module table/utils/ui/table-propertiesexperimental
- */
-/* istanbul ignore file -- @preserve */
-import { ButtonView, UIModel } from 'ckeditor5/src/ui.js';
-import { Collection } from 'ckeditor5/src/utils.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) {
-    return {
-        none: t('None'),
-        solid: t('Solid'),
-        dotted: t('Dotted'),
-        dashed: t('Dashed'),
-        double: t('Double'),
-        groove: t('Groove'),
-        ridge: t('Ridge'),
-        inset: t('Inset'),
-        outset: t('Outset')
-    };
-}
-/**
- * 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) {
-    return t('The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".');
-}
-/**
- * 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) {
-    return t('The value is invalid. Try "10px" or "2em" or simply "2".');
-}
-/**
- * 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~isColorStyleValue}.
- *
- * @internal
- */
-export function colorFieldValidator(value) {
-    value = value.trim().toLowerCase();
-    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~isLengthStyleValue}.
- * See {@link module:engine/view/styles/utils~isPercentageStyleValue}.
- *
- * @internal
- */
-export function lengthFieldValidator(value) {
-    value = value.trim();
-    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~isLengthStyleValue}.
- *
- * @internal
- */
-export function lineWidthFieldValidator(value) {
-    value = value.trim();
-    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) {
-    const itemDefinitions = new Collection();
-    const styleLabels = getBorderStyleLabels(view.t);
-    for (const style in styleLabels) {
-        const definition = {
-            type: 'button',
-            model: new UIModel({
-                _borderStyleValue: style,
-                label: styleLabels[style],
-                role: 'menuitemradio',
-                withText: true
-            })
-        };
-        if (style === 'none') {
-            definition.model.bind('isOn').to(view, 'borderStyle', value => {
-                if (defaultStyle === 'none') {
-                    return !value;
-                }
-                return value === style;
-            });
-        }
-        else {
-            definition.model.bind('isOn').to(view, 'borderStyle', value => {
-                return value === style;
-            });
-        }
-        itemDefinitions.add(definition);
-    }
-    return itemDefinitions;
-}
-/**
- * A helper that fills a toolbar with buttons that:
- *
- * * have some labels,
- * * 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.
- * @param options.toolbar The toolbar to fill with buttons.
- * @param options.labels Object with button labels.
- * @param options.propertyName The name of the observable property in the view.
- * @param options.nameToValue A function that maps a button name to a value. By default names are the same as values.
- * @param options.defaultValue Default value for the property.
- */
-export function fillToolbar(options) {
-    const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
-    for (const name in labels) {
-        const button = new ButtonView(view.locale);
-        button.set({
-            role: 'radio',
-            isToggleable: true,
-            label: labels[name],
-            icon: icons[name],
-            tooltip: labels[name]
-        });
-        // If specified the `nameToValue()` callback, map the value based on the option's name.
-        const buttonValue = nameToValue ? nameToValue(name) : name;
-        button.bind('isOn').to(view, propertyName, value => {
-            // `value` comes from `view[ propertyName ]`.
-            let valueToCompare = value;
-            // If it's empty, and the `defaultValue` is specified, use it instead.
-            if (value === '' && defaultValue) {
-                valueToCompare = defaultValue;
-            }
-            return buttonValue === valueToCompare;
-        });
-        button.on('execute', () => {
-            // Allow toggling alignment if there is no default value specified (especially for layout tables).
-            if (!defaultValue && buttonValue && view[propertyName] === buttonValue) {
-                view[propertyName] = undefined;
-            }
-            else {
-                view[propertyName] = buttonValue;
-            }
-        });
-        toolbar.items.add(button);
-    }
-}
-/**
- * A default color palette used by various user interfaces related to tables, for instance,
- * by {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI} or
- * {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI}.
- *
- * The color palette follows the {@link module:table/tableconfig~TableColorConfig table color configuration format}
- * and contains the following color definitions:
- *
- * ```ts
- * const defaultColors = [
- *   {
- *     color: 'hsl(0, 0%, 0%)',
- *     label: 'Black'
- *   },
- *   {
- *     color: 'hsl(0, 0%, 30%)',
- *     label: 'Dim grey'
- *   },
- *   {
- *     color: 'hsl(0, 0%, 60%)',
- *     label: 'Grey'
- *   },
- *   {
- *     color: 'hsl(0, 0%, 90%)',
- *     label: 'Light grey'
- *   },
- *   {
- *     color: 'hsl(0, 0%, 100%)',
- *     label: 'White',
- *     hasBorder: true
- *   },
- *   {
- *     color: 'hsl(0, 75%, 60%)',
- *     label: 'Red'
- *   },
- *   {
- *     color: 'hsl(30, 75%, 60%)',
- *     label: 'Orange'
- *   },
- *   {
- *     color: 'hsl(60, 75%, 60%)',
- *     label: 'Yellow'
- *   },
- *   {
- *     color: 'hsl(90, 75%, 60%)',
- *     label: 'Light green'
- *   },
- *   {
- *     color: 'hsl(120, 75%, 60%)',
- *     label: 'Green'
- *   },
- *   {
- *     color: 'hsl(150, 75%, 60%)',
- *     label: 'Aquamarine'
- *   },
- *   {
- *     color: 'hsl(180, 75%, 60%)',
- *     label: 'Turquoise'
- *   },
- *   {
- *     color: 'hsl(210, 75%, 60%)',
- *     label: 'Light blue'
- *   },
- *   {
- *     color: 'hsl(240, 75%, 60%)',
- *     label: 'Blue'
- *   },
- *   {
- *     color: 'hsl(270, 75%, 60%)',
- *     label: 'Purple'
- *   }
- * ];
- * ```
- *
- * @internal
- */
-export const defaultColors = [
-    {
-        color: 'hsl(0, 0%, 0%)',
-        label: 'Black'
-    },
-    {
-        color: 'hsl(0, 0%, 30%)',
-        label: 'Dim grey'
-    },
-    {
-        color: 'hsl(0, 0%, 60%)',
-        label: 'Grey'
-    },
-    {
-        color: 'hsl(0, 0%, 90%)',
-        label: 'Light grey'
-    },
-    {
-        color: 'hsl(0, 0%, 100%)',
-        label: 'White',
-        hasBorder: true
-    },
-    {
-        color: 'hsl(0, 75%, 60%)',
-        label: 'Red'
-    },
-    {
-        color: 'hsl(30, 75%, 60%)',
-        label: 'Orange'
-    },
-    {
-        color: 'hsl(60, 75%, 60%)',
-        label: 'Yellow'
-    },
-    {
-        color: 'hsl(90, 75%, 60%)',
-        label: 'Light green'
-    },
-    {
-        color: 'hsl(120, 75%, 60%)',
-        label: 'Green'
-    },
-    {
-        color: 'hsl(150, 75%, 60%)',
-        label: 'Aquamarine'
-    },
-    {
-        color: 'hsl(180, 75%, 60%)',
-        label: 'Turquoise'
-    },
-    {
-        color: 'hsl(210, 75%, 60%)',
-        label: 'Light blue'
-    },
-    {
-        color: 'hsl(240, 75%, 60%)',
-        label: 'Blue'
-    },
-    {
-        color: 'hsl(270, 75%, 60%)',
-        label: 'Purple'
-    }
-];
-/**
- * Returns a creator for a color input with a label.
- *
- * For given options, it returns a function that creates an instance of a
- * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
- * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
- *
- * The helper does the following:
- *
- * * It sets the color input `id` and `ariaDescribedById` attributes.
- * * It binds the color input `isReadOnly` to the labeled view.
- * * It binds the color input `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when the user starts typing in the color input.
- *
- * Usage:
- *
- * ```ts
- * const colorInputCreator = getLabeledColorInputCreator( {
- *   colorConfig: [ ... ],
- *   columns: 3,
- * } );
- *
- * const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
- * console.log( labeledInputView.view ); // A color input instance.
- * ```
- *
- * @internal
- * @param options Color input options.
- * @param options.colorConfig The configuration of the color palette displayed in the input's dropdown.
- * @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,
-            colorPickerConfig: options.colorPickerConfig
-        });
-        colorInputView.inputView.set({
-            id: viewUid,
-            ariaDescribedById: statusUid
-        });
-        colorInputView.bind('isReadOnly').to(labeledFieldView, 'isEnabled', value => !value);
-        colorInputView.bind('hasError').to(labeledFieldView, 'errorText', value => !!value);
-        colorInputView.on('input', () => {
-            // UX: Make the error text disappear and disable the error indicator as the user
-            // starts fixing the errors.
-            labeledFieldView.errorText = null;
-        });
-        labeledFieldView.bind('isEmpty', 'isFocused').to(colorInputView);
-        return colorInputView;
-    };
-}
-/**
- * A simple helper method to detect number strings.
- * I allows full number notation, so omitting 0 is not allowed:
- */
-function isNumberString(value) {
-    const parsedValue = parseFloat(value);
-    return !Number.isNaN(parsedValue) && value === String(parsedValue);
-}
-function colorConfigToColorGridDefinitions(colorConfig) {
-    return colorConfig.map(item => ({
-        color: item.model,
-        label: item.label,
-        options: {
-            hasBorder: item.hasBorder
-        }
-    }));
-}

package/src/utils/ui/widget.js

@@ -1,56 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-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);
-    if (selectedTable) {
-        return selectedTable;
-    }
-    return getTableWidgetAncestor(selection);
-}
-/**
- * Returns a table widget editing view element if one is selected.
- *
- * @internal
- */
-export function getSelectedTableWidget(selection) {
-    const viewElement = selection.getSelectedElement();
-    if (viewElement && isTableWidget(viewElement)) {
-        return viewElement;
-    }
-    return null;
-}
-/**
- * Returns a table widget editing view element if one is among the selection's ancestors.
- *
- * @internal
- */
-export function getTableWidgetAncestor(selection) {
-    const selectionPosition = selection.getFirstPosition();
-    if (!selectionPosition) {
-        return null;
-    }
-    let parent = selectionPosition.parent;
-    while (parent) {
-        if (parent.is('element') && isTableWidget(parent)) {
-            return parent;
-        }
-        parent = parent.parent;
-    }
-    return null;
-}
-/**
- * Checks if a given view element is a table widget.
- *
- * @internal
- */
-export function isTableWidget(viewNode) {
-    return viewNode.is('element') && !!viewNode.getCustomProperty('table') && isWidget(viewNode);
-}

package/theme/colorinput.css

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-input-color {
-	width: 100%;
-	display: flex;
-	flex-direction: row-reverse;
-
-	& > input.ck.ck-input-text {
-		min-width: auto;
-		flex-grow: 1;
-	}
-
-	& > div.ck.ck-dropdown {
-		min-width: auto;
-
-		/* This dropdown has no arrow but a color preview instead. */
-		& > .ck-input-color__button .ck-dropdown__arrow {
-			display: none;
-		}
-	}
-
-	& .ck.ck-input-color__button {
-		/* Resolving issue with misaligned buttons on Safari (see #10589) */
-		display: flex;
-
-		& .ck.ck-input-color__button__preview {
-			position: relative;
-			overflow: hidden;
-
-			& > .ck.ck-input-color__button__preview__no-color-indicator {
-				position: absolute;
-				display: block;
-			}
-		}
-	}
-}

package/theme/formrow-experimental.css

@@ -1,15 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-form__row {
-	&.ck-table-form__action-row {
-		justify-content: flex-end;
-
-		& .ck-button-save,
-		& .ck-button-cancel {
-			justify-content: center;
-		}
-	}
-}

package/theme/formrow.css

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-form__row {
-	&.ck-table-form__action-row {
-		& .ck-button-save,
-		& .ck-button-cancel {
-			justify-content: center;
-		}
-	}
-}

package/theme/inserttable.css

@@ -1,10 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck .ck-insert-table-dropdown__grid {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}

package/theme/table.css

@@ -1,144 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck-content {
-	/* Ensure that table header text is aligned to the start by default. See https://github.com/ckeditor/ckeditor5/issues/19454. */
-	& .table th {
-		text-align: start;
-	}
-
-	/* Text alignment of the table header should match the editor settings and override the native browser styling,
-	when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638. */
-	&[dir="rtl"] .table th {
-		text-align: right;
-	}
-
-	&[dir="ltr"] .table th {
-		text-align: left;
-	}
-
-	& figure.table:not(.layout-table) {
-		display: table;
-
-		& > table {
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	& .table:not(.layout-table) {
-		/* Give the table widget some air and center it horizontally */
-		/* The first value should be equal to --ck-spacing-large variable if used in the editor context
-		to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
-		margin: 0.9em auto;
-	}
-
-	& table.table:not(.layout-table),
-	& figure.table:not(.layout-table) > table {
-		/* The table cells should have slight borders */
-		border-collapse: collapse;
-		border-spacing: 0;
-
-		/* The outer border of the table should be slightly darker than the inner lines.
-		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
-		border: 1px double hsl(0, 0%, 70%);
-
-		& > thead,
-		& > tbody {
-			/* The linter is disabled here because linter is confused when resolving the `table.table:not(.layout-table)`
-			and `figure.table:not(.layout-table) > table` selectors combined with below selectors.
-			There is no need to split it into two large structures with same code just to make linter happy. */
-			/* stylelint-disable no-descending-specificity */
-			& > tr {
-				& > th {
-					font-weight: bold;
-					background: hsla(0, 0%, 0%, 5%);
-				}
-
-				& > td,
-				& > th {
-					/* Opinionated table content styling: prevents content from shifting
-					 * when Enter is pressed in the first cell.
-					 * See: https://github.com/ckeditor/ckeditor5/pull/18801
-					 */
-					& > p:first-of-type {
-						margin-top: 0;
-					}
-
-					/* Mirrors the rule above for the last paragraph to keep the
-					 * experience consistent with the first paragraph.
-					 *
-					 * Together, these rules prevent margins from appearing when a
-					 * bogus paragraph becomes a real paragraph after it receives line
-					 * height, text alignment, or other block style.
-					 *
-					 * See: https://github.com/ckeditor/ckeditor5/pull/18801
-					 */
-					& > p:last-of-type {
-						margin-bottom: 0;
-					}
-
-					min-width: 2em;
-					padding: 0.4em;
-
-					/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
-					However, the border is a content style, so it should use .ck-content (so it works outside the editor).
-					Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
-					border: 1px solid hsl(0, 0%, 75%);
-				}
-			}
-		}
-	}
-}
-
-@media print {
-	.ck-content figure.table {
-		/**
-		 * Sometimes Chrome incorrectly calculates the height of the last table row and some
-		 * of the content overlaps the paragraph that is placed directly after the table. It affects
-		 * the column split mode pagination calculation which causes mismatch between the print mode and
-		 * the preview mode.
-		 *
-		 * This issue happens only if:
-		 *
-		 * 	* The table is inside a figure element.
-		 * 	* The table has `display: table` style set.
-		 * 	* The block element is placed directly after the table.
-		 */
-		&:not(.layout-table) {
-			width: fit-content;
-			height: fit-content;
-		}
-
-		/**
-		 * Expanding the table to the full height of the parent container is necessary because tables
-		 * are rendered inside <figure> elements, which is kinda buggy in table height calculation.
-		 * While setting `height: 100%` fixes the issue in the editing mode described here:
-		 * https://github.com/ckeditor/ckeditor5/issues/6186
-		 *
-		 * it's causing another issue with the table height in the print preview mode here:
-		 * https://github.com/ckeditor/ckeditor5/issues/16856
-		 *
-		 * For now, resetting the height to `initial` in the print mode works as a workaround.
-		 */
-		&:not(.layout-table) > table {
-			height: initial;
-		}
-	}
-}
-
-.ck-editor__editable .ck-table-bogus-paragraph {
-	/*
-	 * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
-	 * See https://github.com/ckeditor/ckeditor5/issues/6062.
-	 */
-	display: inline-block;
-
-	/*
-	 * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width.
-	 * See https://github.com/ckeditor/ckeditor5/issues/9117.
-	 */
-	width: 100%;
-}