@ckeditor/ckeditor5-table 45.0.0-alpha.0 → 45.0.0-alpha.10

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -6,7 +6,7 @@
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
 import { throttle, isEqual } from 'es-toolkit/compat';
-import { global, DomEmitterMixin } from 'ckeditor5/src/utils.js';
+import { global, DomEmitterMixin, Rect, toUnit } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
 import TableEditing from '../tableediting.js';
@@ -16,6 +16,7 @@ import TableWidthsCommand from './tablewidthscommand.js';
 import { downcastTableResizedClass, upcastColgroupElement } from './converters.js';
 import { clamp, createFilledArray, sumArray, getColumnEdgesIndexes, getChangedResizedTables, getColumnMinWidthAsPercentage, getElementWidthInPixels, getTableWidthInPixels, normalizeColumnWidths, toPrecision, getDomCellOuterWidth, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils.js';
 import { COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
+const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */
@@ -326,10 +327,83 @@ export default class TableColumnResizeEditing extends Plugin {
     _registerResizingListeners() {
         const editingView = this.editor.editing.view;
         editingView.addObserver(MouseEventsObserver);
+        editingView.document.on('mouseover', this._onMouseOverHandler.bind(this), { priority: 'high' });
         editingView.document.on('mousedown', this._onMouseDownHandler.bind(this), { priority: 'high' });
+        editingView.document.on('mouseout', this._onMouseOutHandler.bind(this), { priority: 'high' });
         this._domEmitter.listenTo(global.window.document, 'mousemove', throttle(this._onMouseMoveHandler.bind(this), 50));
         this._domEmitter.listenTo(global.window.document, 'mouseup', this._onMouseUpHandler.bind(this));
     }
+    /**
+     * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    _recalculateResizerElement(viewResizer) {
+        const editor = this.editor;
+        const domConverter = editor.editing.view.domConverter;
+        // Get DOM target figure ancestor element.
+        const domTable = domConverter.mapViewToDom(viewResizer.findAncestor('table'));
+        // Get DOM table cell element.
+        const domCell = domConverter.mapViewToDom(viewResizer.findAncestor(item => ['td', 'th'].includes(item.name)));
+        const rectTable = new Rect(domTable);
+        const rectCell = new Rect(domCell);
+        // Calculate the top, and bottom positions of the column resizer element.
+        const targetTopPosition = toPx(Number((rectTable.top - rectCell.top).toFixed(4)));
+        const targetBottomPosition = toPx(Number((rectCell.bottom - rectTable.bottom).toFixed(4)));
+        // Set `top` and `bottom` styles to the column resizer element.
+        editor.editing.view.change(viewWriter => {
+            viewWriter.setStyle('top', targetTopPosition, viewResizer);
+            viewWriter.setStyle('bottom', targetBottomPosition, viewResizer);
+        });
+    }
+    /**
+     * Remove `top` and `bottom` styles of the column resizer element.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    _resetResizerStyles(viewResizer) {
+        this.editor.editing.view.change(viewWriter => {
+            viewWriter.removeStyle('top', viewResizer);
+            viewWriter.removeStyle('bottom', viewResizer);
+        });
+    }
+    /**
+     * Handles the `mouseover` event on column resizer element.
+     * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    _onMouseOverHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        this._recalculateResizerElement(target);
+    }
+    /**
+     * Handles the `mouseout` event on column resizer element.
+     * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    _onMouseOutHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        if (this._isResizingActive) {
+            return;
+        }
+        this._resetResizerStyles(target);
+    }
     /**
      * Handles the `mousedown` event on column resizer element:
      *  * calculates the initial column pixel widths,
@@ -461,7 +535,7 @@ export default class TableColumnResizeEditing extends Plugin {
             this._onMouseUpHandler();
             return;
         }
-        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
+        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn, viewResizer }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
         const dxLowerBound = -leftColumnWidth + COLUMN_MIN_WIDTH_IN_PIXELS;
         const dxUpperBound = isRightEdge ?
             viewFigureParentWidth - tableWidth :
@@ -486,6 +560,7 @@ export default class TableColumnResizeEditing extends Plugin {
                 writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
             }
         });
+        this._recalculateResizerElement(viewResizer);
     }
     /**
      * Handles the `mouseup` event.
@@ -556,6 +631,10 @@ export default class TableColumnResizeEditing extends Plugin {
         editingView.change(writer => {
             writer.removeClass('ck-table-column-resizer__active', viewResizer);
         });
+        const element = editingView.domConverter.mapViewToDom(viewResizer);
+        if (!element.matches(':hover')) {
+            this._resetResizerStyles(viewResizer);
+        }
         this._isResizingActive = false;
         this._resizingData = null;
     }

package/src/tablelayout.d.ts

@@ -13,7 +13,7 @@ import TableColumnResize from './tablecolumnresize.js';
 /**
  * The table plugin.
  *
- * For a detailed overview, check the {@glink features/tables/tables-layout Layout table feature documentation}.
+ * For a detailed overview, check the {@glink features/tables/layout-tables Layout table feature documentation}.
  */
 export default class TableLayout extends Plugin {
     /**

package/src/tablelayout.js

@@ -13,7 +13,7 @@ import TableColumnResize from './tablecolumnresize.js';
 /**
  * The table plugin.
  *
- * For a detailed overview, check the {@glink features/tables/tables-layout Layout table feature documentation}.
+ * For a detailed overview, check the {@glink features/tables/layout-tables Layout table feature documentation}.
  */
 export default class TableLayout extends Plugin {
     /**

package/src/tableproperties/commands/tablepropertycommand.d.ts

@@ -26,8 +26,18 @@ export default class TablePropertyCommand extends Command {
     readonly attributeName: string;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
+     */
+    protected _defaultValue: string | undefined;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    private readonly _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
      */
-    protected readonly _defaultValue: string | undefined;
+    private readonly _defaultLayoutTableValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *

package/src/tableproperties/commands/tablepropertycommand.js

@@ -16,8 +16,18 @@ export default class TablePropertyCommand extends Command {
     attributeName;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
      */
     _defaultValue;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
+     */
+    _defaultLayoutTableValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *
@@ -28,7 +38,8 @@ export default class TablePropertyCommand extends Command {
     constructor(editor, attributeName, defaultValue) {
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        this._defaultLayoutTableValue = attributeName === 'tableBorderStyle' ? 'none' : undefined;
     }
     /**
      * @inheritDoc
@@ -37,6 +48,9 @@ export default class TablePropertyCommand extends Command {
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ?
+            this._defaultContentTableValue :
+            this._defaultLayoutTableValue;
         this.isEnabled = !!table;
         this.value = this._getValue(table);
     }

package/src/tableproperties/tablepropertiesediting.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine.js';
 import TableEditing from '../tableediting.js';
-import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
+import { downcastAttributeToStyle, downcastTableAttribute, getDefaultValueAdjusted, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand.js';
 import TableBorderColorCommand from './commands/tablebordercolorcommand.js';
 import TableBorderStyleCommand from './commands/tableborderstylecommand.js';
@@ -133,15 +133,36 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         .attributeToAttribute({
         model: {
             name: 'table',
-            key: 'tableAlignment'
+            key: 'tableAlignment',
+            values: ['left', 'center', 'right']
         },
-        view: alignment => ({
-            key: 'style',
-            value: {
-                // Model: `alignment:center` => CSS: `float:none`.
-                float: alignment === 'center' ? 'none' : alignment
+        view: {
+            left: {
+                key: 'style',
+                value: {
+                    float: 'left'
+                }
+            },
+            right: {
+                key: 'style',
+                value: {
+                    float: 'right'
+                }
+            },
+            center: (alignment, conversionApi, data) => {
+                const value = data.item.getAttribute('tableType') !== 'layout' ? {
+                    // Model: `alignment:center` => CSS: `float:none`.
+                    float: 'none'
+                } : {
+                    'margin-left': 'auto',
+                    'margin-right': 'auto'
+                };
+                return {
+                    key: 'style',
+                    value
+                };
             }
-        }),
+        },
         converterPriority: 'high'
     });
     conversion.for('upcast')
@@ -155,13 +176,32 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
                     align = 'center';
                 }
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
+            }
+        }
+    })
+        // Support for the `margin-left:auto; margin-right:auto;` CSS definition for the table alignment.
+        .attributeToAttribute({
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                'margin-left': 'auto',
+                'margin-right': 'auto'
+            }
+        },
+        model: {
+            key: 'tableAlignment',
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                const align = 'center';
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -175,9 +215,10 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             name: 'table',
             key: 'tableAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });

package/src/tableproperties/tablepropertiesui.d.ts

@@ -18,7 +18,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    private _defaultTableProperties;
+    private _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    private _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TablePropertiesUI extends Plugin {
      * The properties form view displayed inside the balloon.
      */
     view: TablePropertiesView | null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.

package/src/tableproperties/tablepropertiesui.js

@@ -13,7 +13,7 @@ import TablePropertiesView from './ui/tablepropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
 import { getSelectionAffectedTableWidget } from '../utils/ui/widget.js';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultProperties, getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -35,7 +35,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    _defaultTableProperties;
+    _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -44,6 +48,14 @@ export default class TablePropertiesUI extends Plugin {
      * The properties form view displayed inside the balloon.
      */
     view = null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    _viewWithContentTableDefaults = null;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    _viewWithLayoutTableDefaults = null;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -87,9 +99,10 @@ export default class TablePropertiesUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        this._defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
+        this._defaultContentTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
+        this._defaultLayoutTableProperties = getNormalizedDefaultProperties();
         this._balloon = editor.plugins.get(ContextualBalloon);
         editor.ui.componentFactory.add('tableProperties', () => this._createTablePropertiesButton());
     }
@@ -129,7 +142,7 @@ export default class TablePropertiesUI extends Plugin {
      *
      * @returns The table properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -140,7 +153,7 @@ export default class TablePropertiesUI extends Plugin {
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties,
+            defaultTableProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -223,7 +236,9 @@ export default class TablePropertiesUI extends Plugin {
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
             const propertyKey = property;
-            const defaultValue = this._defaultTableProperties[propertyKey] || '';
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableProperties[propertyKey] || '' :
+                this._defaultLayoutTableProperties[propertyKey] || '';
             return [propertyKey, (commands.get(commandName).value || defaultValue)];
         })
             .forEach(([property, value]) => {
@@ -244,9 +259,16 @@ export default class TablePropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });

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

@@ -7,12 +7,12 @@
  */
 import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig, type FocusableView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import type ColorInputView from '../../ui/colorinputview.js';
+import type { TablePropertiesOptions } from '../../tableconfig.js';
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
-import type ColorInputView from '../../ui/colorinputview.js';
-import type { TablePropertiesOptions } from '../../tableconfig.js';
 /**
  * Additional configuration of the view.
  */

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

@@ -80,18 +80,18 @@ export type NormalizeTableDefaultPropertiesOptions = {
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
 /**
  * Returns the normalized default table properties.
  *
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultTableProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultTableProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
 /**
  * Returns the normalized default cell properties.
  *
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultCellProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultCellProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;

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

@@ -146,7 +146,13 @@ export function fillToolbar(options) {
             return buttonValue === valueToCompare;
         });
         button.on('execute', () => {
-            view[propertyName] = buttonValue;
+            // 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);
     }

package/theme/tablecolumnresize.css

@@ -16,10 +16,6 @@
 	table-layout: fixed;
 }
 
-.ck-content .table table {
-	overflow: hidden;
-}
-
 .ck-content .table td,
 .ck-content .table th {
 	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
@@ -58,12 +54,6 @@
 .ck.ck-editor__editable .table .ck-table-column-resizer__active {
 	background-color: var(--ck-color-selector-column-resizer-hover);
 	opacity: 0.25;
-	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
-	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
-	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
-	   unrealistic height for a single table. */
-	top: -999999px;
-	bottom: -999999px;
 }
 
 .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {

package/theme/tablelayout.css

@@ -27,6 +27,12 @@
 
 		/* Widget type around overrides. */
 		&.ck-widget {
+			&:hover {
+				/* To prevent the widget outline from being cut off at the bottom
+				when the next cell or table has a background color, for example. */
+				z-index: var(--ck-z-default);
+			}
+
 			&:hover > .ck-widget__selection-handle {
 				opacity: 0.75;
 				visibility: visible;
@@ -39,10 +45,16 @@
 			/* Because of setting the opacity to 0.75 to the selection handle for the layout table,
 			it overrides the similar selector in widget (specificity is higher),
 			thats why we must override it here also. */
-			&:has( .ck-widget:hover ) > .ck-widget__selection-handle {
+			&:has( .ck-widget.table:hover ) > .ck-widget__selection-handle {
 				opacity: 0;
 				visibility: hidden;
 			}
+
+			&.ck-widget_selected {
+				/* To prevent the widget outline from being cut off at the bottom
+				when the next cell or table has a background color, for example. */
+				z-index: var(--ck-z-default);
+			}
 		}
 	}
 }