@atlaskit/editor-plugin-table 5.5.7 → 5.5.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.8
+
+### Patch Changes
+
+- [#60644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60644) [`513c52530ec8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/513c52530ec8) - add distribute column logic to drag menu
+- Updated dependencies
+
 ## 5.5.7
 
 ### Patch Changes

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -84,7 +84,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -20,8 +20,12 @@ var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipc
 var _commands = require("../commands");
 var _delete = require("../commands/delete");
 var _commands2 = require("../pm-plugins/drag-and-drop/commands");
+var _commands3 = require("../pm-plugins/table-resizing/commands");
+var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
+var _toolbar = require("../toolbar");
 var _transforms = require("../transforms");
 var _icons = require("../ui/icons");
+var _index = require("./index");
 var canDecrease = function canDecrease(index) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index > min;
@@ -30,7 +34,15 @@ var canIncrease = function canIncrease(index) {
   var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index < max;
 };
-var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, tableMap, index, targetCellPosition, selectionRect) {
+var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
+  var rect = (0, _toolbar.getClosestSelectionRect)(state);
+  if (rect) {
+    var selectedColIndexes = (0, _index.getSelectedColumnIndexes)(rect);
+    return selectedColIndexes.length > 1;
+  }
+  return false;
+};
+var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -114,8 +126,19 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   })), [direction === 'column' ? {
     id: 'distribute_columns',
     title: 'Distribute columns',
-    disabled: true,
-    onClick: function onClick() {
+    disabled: !isDistributeColumnsEnabled(editorView.state),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
+      if (selectionRect) {
+        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        if (newResizeState) {
+          var resizeState = newResizeState.resizeState,
+            table = newResizeState.table;
+          (0, _commands3.distributeColumnsWidths)(resizeState, table)(state, dispatch);
+          return true;
+        }
+        return false;
+      }
       return false;
     },
     icon: _layoutThreeEqual.default

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -75,7 +75,7 @@ export const DragMenu = ({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -12,11 +12,23 @@ import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-dou
 import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
 import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { distributeColumnsWidths } from '../pm-plugins/table-resizing/commands';
+import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
+import { getSelectedColumnIndexes } from './index';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, tableMap, index, targetCellPosition, selectionRect) => {
+const isDistributeColumnsEnabled = state => {
+  const rect = getClosestSelectionRect(state);
+  if (rect) {
+    const selectedColIndexes = getSelectedColumnIndexes(rect);
+    return selectedColIndexes.length > 1;
+  }
+  return false;
+};
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) => {
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -95,8 +107,21 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, t
   })), direction === 'column' ? {
     id: 'distribute_columns',
     title: 'Distribute columns',
-    disabled: true,
-    onClick: () => {
+    disabled: !isDistributeColumnsEnabled(editorView.state),
+    onClick: (state, dispatch) => {
+      const selectionRect = getClosestSelectionRect(state);
+      if (selectionRect) {
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        if (newResizeState) {
+          const {
+            resizeState,
+            table
+          } = newResizeState;
+          distributeColumnsWidths(resizeState, table)(state, dispatch);
+          return true;
+        }
+        return false;
+      }
       return false;
     },
     icon: EditorLayoutThreeEqualIcon

package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -76,7 +76,7 @@ export var DragMenu = function DragMenu(_ref) {
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -13,8 +13,12 @@ import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-dou
 import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
 import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { distributeColumnsWidths } from '../pm-plugins/table-resizing/commands';
+import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
+import { getSelectedColumnIndexes } from './index';
 var canDecrease = function canDecrease(index) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index > min;
@@ -23,7 +27,15 @@ var canIncrease = function canIncrease(index) {
   var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index < max;
 };
-export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, tableMap, index, targetCellPosition, selectionRect) {
+var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
+  var rect = getClosestSelectionRect(state);
+  if (rect) {
+    var selectedColIndexes = getSelectedColumnIndexes(rect);
+    return selectedColIndexes.length > 1;
+  }
+  return false;
+};
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -107,8 +119,19 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   })), [direction === 'column' ? {
     id: 'distribute_columns',
     title: 'Distribute columns',
-    disabled: true,
-    onClick: function onClick() {
+    disabled: !isDistributeColumnsEnabled(editorView.state),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+      if (selectionRect) {
+        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        if (newResizeState) {
+          var resizeState = newResizeState.resizeState,
+            table = newResizeState.table;
+          distributeColumnsWidths(resizeState, table)(state, dispatch);
+          return true;
+        }
+        return false;
+      }
       return false;
     },
     icon: EditorLayoutThreeEqualIcon

package/dist/types/plugins/table/utils/drag-menu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
@@ -7,4 +8,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import type { TableDirection } from '../types';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
@@ -7,4 +8,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.13.0",
+    "@atlaskit/primitives": "^1.14.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.29.0",
     "@atlaskit/tooltip": "^18.0.0",

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -140,6 +140,7 @@ export const DragMenu = ({
     direction,
     getEditorContainerWidth,
     !!canDrag && !shouldMoveDisabled,
+    editorView,
     tableMap,
     index,
     targetCellPosition,

package/src/plugins/table/utils/drag-menu.ts

@@ -15,6 +15,7 @@ import type {
   IconProps,
 } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
 import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
@@ -34,6 +35,9 @@ import {
 } from '../commands';
 import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { distributeColumnsWidths } from '../pm-plugins/table-resizing/commands';
+import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import type { TableDirection } from '../types';
 import {
@@ -43,11 +47,22 @@ import {
   AddRowBelowIcon,
 } from '../ui/icons';
 
+import { getSelectedColumnIndexes } from './index';
+
 const canDecrease = (index?: number, min: number = 0) =>
   index !== undefined && index > min;
 const canIncrease = (index?: number, max: number = 0) =>
   index !== undefined && index < max;
 
+const isDistributeColumnsEnabled = (state: EditorState) => {
+  const rect = getClosestSelectionRect(state);
+  if (rect) {
+    const selectedColIndexes = getSelectedColumnIndexes(rect);
+    return selectedColIndexes.length > 1;
+  }
+  return false;
+};
+
 export interface DragMenuConfig extends DropdownOptionT<Command> {
   id: string;
   icon?: React.ComponentType<IconProps>;
@@ -58,6 +73,7 @@ export const getDragMenuConfig = (
   direction: TableDirection,
   getEditorContainerWidth: GetEditorContainerWidth,
   canDrag: boolean,
+  editorView: EditorView,
   tableMap?: TableMap,
   index?: number,
   targetCellPosition?: number,
@@ -163,8 +179,24 @@ export const getDragMenuConfig = (
       ? {
           id: 'distribute_columns',
           title: 'Distribute columns',
-          disabled: true,
-          onClick: () => {
+          disabled: !isDistributeColumnsEnabled(editorView.state),
+          onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+            const selectionRect = getClosestSelectionRect(state);
+            if (selectionRect) {
+              const newResizeState = getNewResizeStateFromSelectedColumns(
+                selectionRect,
+                state,
+                editorView.domAtPos.bind(editorView),
+                getEditorContainerWidth,
+              );
+
+              if (newResizeState) {
+                const { resizeState, table } = newResizeState;
+                distributeColumnsWidths(resizeState, table)(state, dispatch);
+                return true;
+              }
+              return false;
+            }
             return false;
           },
           icon: EditorLayoutThreeEqualIcon,