@ckeditor/ckeditor5-table 45.0.0-alpha.1 → 45.0.0-alpha.11

package/dist/index.js

@@ -4,7 +4,7 @@
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidgetEditable, toWidget, Widget, isWidget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, DomEmitterMixin, toUnit } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconCheck, IconCancel, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconTableLayout, IconTableProperties, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconCaption } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, ViewModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler, DropdownButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { ClipboardMarkersUtils, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
@@ -34,19 +34,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
                 if (!shouldUpcast(viewElement)) {
                     return;
                 }
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
-                        includeSelf: true
-                    });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const normalized = viewElement.getNormalizedStyle(styleName);
                 const value = reduceBoxSides ? reduceBoxSidesValue(normalized) : normalized;
                 if (localDefaultValue !== value) {
@@ -171,6 +159,20 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
             }
         }));
 }
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */ function getDefaultValueAdjusted(defaultValue, layoutTableDefault, data) {
+    const modelElement = data.modelRange && first(data.modelRange.getItems({
+        shallow: true
+    }));
+    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
+        includeSelf: true
+    });
+    if (tableElement && tableElement.getAttribute('tableType') === 'layout') {
+        return layoutTableDefault;
+    }
+    return defaultValue;
+}
 /**
  * Reduces the full top, right, bottom, left object to a single string if all sides are equal.
  * Returns original style otherwise.
@@ -9081,19 +9083,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         model: {
             key: 'tableCellHorizontalAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
-                        includeSelf: true
-                    });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'left';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getStyle('text-align');
                 return align === localDefaultValue ? null : align;
             }
@@ -9109,19 +9099,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         model: {
             key: 'tableCellHorizontalAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
-                        includeSelf: true
-                    });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'left';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getAttribute('align');
                 return align === localDefaultValue ? null : align;
             }
@@ -9161,19 +9139,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         model: {
             key: 'tableCellVerticalAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
-                        includeSelf: true
-                    });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'middle';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const align = viewElement.getStyle('vertical-align');
                 return align === localDefaultValue ? null : align;
             }
@@ -9189,19 +9155,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         model: {
             key: 'tableCellVerticalAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
-                        includeSelf: true
-                    });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'middle';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const valign = viewElement.getAttribute('valign');
                 return valign === localDefaultValue ? null : valign;
             }
@@ -9566,6 +9520,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         });
 }
 
+const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */ class TableColumnResizeEditing extends Plugin {
@@ -9869,12 +9824,88 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
 	 */ _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,
@@ -9999,7 +10030,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             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 : rightColumnWidth - COLUMN_MIN_WIDTH_IN_PIXELS;
         // The multiplier is needed for calculating the proper movement offset:
@@ -10021,6 +10052,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
                 writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
             }
         });
+        this._recalculateResizerElement(viewResizer);
     }
     /**
 	 * Handles the `mouseup` event.
@@ -10085,6 +10117,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         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;
     }
@@ -10535,7 +10571,7 @@ const TABLE_TYPES = [
 /**
  * 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}.
  */ class TableLayout extends Plugin {
     /**
 	 * @inheritDoc
@@ -11073,16 +11109,7 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         model: {
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
@@ -11091,6 +11118,23 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
                 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;
+            }
+        }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
     .attributeToAttribute({
         view: {
@@ -11102,16 +11146,7 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
             name: 'table',
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data)=>{
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({
-                        shallow: true
-                    }));
-                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = viewElement.getAttribute('align');
                 return align === localDefaultValue ? null : align;
             }