@atlaskit/editor-plugin-table 7.1.1 → 7.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 7.1.2
+
+### Patch Changes
+
+- [#70109](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70109) [`ecf39362df41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ecf39362df41) - The drag preview size will now match the same size of the selection row/col region when a drag is started.
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -136,7 +136,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     };
   }, [tableWrapper, handleScroll]);
   var generateHandleByType = function generateHandleByType(type) {
-    var _rowHeights$reduce, _colWidths;
+    var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
@@ -157,6 +157,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
+      return sum + (v !== null && v !== void 0 ? v : _styles.tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
+    }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : _styles.tableCellMinWidth;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
@@ -178,7 +181,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       tableLocalId: localId || '',
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isColumnsSelected,
-      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
+      previewWidth: previewWidth,
       previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -143,6 +143,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     var isSelecting = isRowsSelected && !isHover;
     var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    var previewHeight = rowHeights.reduce(function (sum, v, i) {
+      return sum + v * (indexes.includes(i) ? 1 : 0);
+    }, 0);
     return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
@@ -163,7 +166,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isRowsSelected,
       previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
+      previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -135,7 +135,7 @@ export const ColumnControls = ({
     };
   }, [tableWrapper, handleScroll]);
   const generateHandleByType = type => {
-    var _rowHeights$reduce, _colWidths;
+    var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
@@ -154,6 +154,7 @@ export const ColumnControls = ({
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
@@ -175,7 +176,7 @@ export const ColumnControls = ({
       tableLocalId: localId || '',
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isColumnsSelected,
-      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
+      previewWidth: previewWidth,
       previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -133,6 +133,7 @@ const DragControlsComponent = ({
     const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     const isSelecting = isRowsSelected && !isHover;
     const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    const previewHeight = rowHeights.reduce((sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0), 0);
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
@@ -153,7 +154,7 @@ const DragControlsComponent = ({
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isRowsSelected,
       previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
+      previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -127,7 +127,7 @@ export var ColumnControls = function ColumnControls(_ref) {
     };
   }, [tableWrapper, handleScroll]);
   var generateHandleByType = function generateHandleByType(type) {
-    var _rowHeights$reduce, _colWidths;
+    var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
@@ -148,6 +148,9 @@ export var ColumnControls = function ColumnControls(_ref) {
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
+      return sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
+    }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
@@ -169,7 +172,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       tableLocalId: localId || '',
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isColumnsSelected,
-      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
+      previewWidth: previewWidth,
       previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -133,6 +133,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     var isSelecting = isRowsSelected && !isHover;
     var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    var previewHeight = rowHeights.reduce(function (sum, v, i) {
+      return sum + v * (indexes.includes(i) ? 1 : 0);
+    }, 0);
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
@@ -153,7 +156,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isRowsSelected,
       previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
+      previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/nodeviews/TableComponent.tsx

@@ -7,11 +7,11 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Command, DocBuilder } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import {
   findTable,
   findTableClosestToPos,
   selectTable,
+  selectTableClosestToPos,
 } from '@atlaskit/editor-tables/utils';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -247,6 +247,13 @@ export const ColumnControls = ({
         : selectedColIndexes
       : colIndexes;
 
+    const previewWidth =
+      colWidths?.reduce<number>(
+        (sum, v, i) =>
+          sum + (v ?? tableCellMinWidth) * (indexes.includes(i) ? 1 : 0),
+        0,
+      ) ?? tableCellMinWidth;
+
     return (
       <div
         key={type}
@@ -272,7 +279,7 @@ export const ColumnControls = ({
           tableLocalId={localId || ''}
           indexes={indexes}
           forceDefaultHandle={isHover ? false : isColumnsSelected}
-          previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+          previewWidth={previewWidth}
           previewHeight={previewHeight}
           appearance={
             isSelecting ? currentSelectionAppearance : hoveredAppearance

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -235,6 +235,11 @@ const DragControlsComponent = ({
         : selectedRowIndexes
       : rowIndexes;
 
+    const previewHeight = rowHeights.reduce(
+      (sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0),
+      0,
+    );
+
     return (
       <div
         key={type}
@@ -259,7 +264,7 @@ const DragControlsComponent = ({
           indexes={indexes}
           forceDefaultHandle={isHover ? false : isRowsSelected}
           previewWidth={tableWidth}
-          previewHeight={rowHeights[rowIndex!]}
+          previewHeight={previewHeight}
           appearance={
             isSelecting ? currentSelectionAppearance : hoveredAppearance
           }