@atlaskit/editor-plugin-table 5.4.19 → 5.4.20

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

@@ -67,7 +67,8 @@ export var DragMenu = function DragMenu(_ref) {
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement,
     targetCellPosition = _ref.targetCellPosition,
-    getEditorContainerWidth = _ref.getEditorContainerWidth;
+    getEditorContainerWidth = _ref.getEditorContainerWidth,
+    canDrag = _ref.canDrag;
   var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
   var state = editorView.state,
     dispatch = editorView.dispatch;
@@ -75,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, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -16,7 +16,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     direction = _ref.direction,
     index = _ref.index,
     targetCellPosition = _ref.targetCellPosition,
-    getEditorContainerWidth = _ref.getEditorContainerWidth;
+    getEditorContainerWidth = _ref.getEditorContainerWidth,
+    canDrag = _ref.canDrag;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -51,7 +52,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     direction: direction,
     index: index,
     targetCellPosition: targetCellPosition,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    canDrag: canDrag
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
@@ -29,7 +30,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths,
     hasHeaderColumn = _ref.hasHeaderColumn,
-    isTableHovered = _ref.isTableHovered;
+    isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
@@ -139,14 +141,15 @@ export var ColumnControls = function ColumnControls(_ref) {
     direction: "column",
     tableLocalId: localId || '',
     indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
     previewHeight: previewHeight,
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: handleMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   }))));
 };
 export default ColumnControls;

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -19,7 +19,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     stickyHeader = _ref.stickyHeader,
     selection = _ref.selection,
     isInDanger = _ref.isInDanger,
-    isTableHovered = _ref.isTableHovered;
+    isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag;
   var _useState = useState({
       width: 0,
       height: 0
@@ -110,7 +111,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths,
-    hasHeaderColumn: hasHeaderColumn
+    hasHeaderColumn: hasHeaderColumn,
+    canDrag: canDrag
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,

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

@@ -33,6 +33,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     isInDanger = _ref.isInDanger,
     isResizing = _ref.isResizing,
     isTableHovered = _ref.isTableHovered,
+    canDrag = _ref.canDrag,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     updateCellHoverLocation = _ref.updateCellHoverLocation;
@@ -132,11 +133,11 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       "data-end-index": endIndex,
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
-      key: index
+      key: "insert-dot-".concat(index)
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
     })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
-      key: index,
+      key: "drop-target-".concat(index),
       index: index,
       localId: currentNodeLocalId,
       style: {
@@ -168,7 +169,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     onMouseUp: onMouseUp,
-    editorView: editorView
+    editorView: editorView,
+    canDrag: canDrag
   })));
 };
 export var DragControls = injectIntl(DragControlsComponent);

package/dist/esm/plugins/table/ui/TableFloatingControls/index.js

@@ -126,8 +126,9 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         headerRowHeight = _this$props2.headerRowHeight,
         stickyHeader = _this$props2.stickyHeader,
         hoveredCell = _this$props2.hoveredCell,
-        isTableHovered = _this$props2.isTableHovered;
-      return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
+        isTableHovered = _this$props2.isTableHovered,
+        canDrag = _this$props2.canDrag;
+      return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered || canDrag !== nextProps.canDrag;
     }
   }, {
     key: "componentWillUnmount",
@@ -154,7 +155,8 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         stickyHeader = _this$props3.stickyHeader,
         isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
         hoveredCell = _this$props3.hoveredCell,
-        isTableHovered = _this$props3.isTableHovered;
+        isTableHovered = _this$props3.isTableHovered,
+        canDrag = _this$props3.canDrag;
       if (!tableRef) {
         return null;
       }
@@ -196,7 +198,8 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         tableWidth: this.state.tableWrapperWidth,
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
-        updateCellHoverLocation: this.updateCellHoverLocation
+        updateCellHoverLocation: this.updateCellHoverLocation,
+        canDrag: canDrag
       })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
         editorView: editorView,
         tableRef: tableRef,

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

@@ -23,7 +23,7 @@ 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, hasMergedCells, tableMap, index, targetCellPosition, selectionRect) {
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -48,27 +48,31 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     offset: -1,
-    canMove: canDecrease,
+    canMove: function canMove(index) {
+      return canDrag && canDecrease(index);
+    },
     icon: ArrowUpIcon
   }, {
     label: 'down',
     offset: 1,
     canMove: function canMove(index) {
       var _tableMap$height;
-      return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+      return canDrag && canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
     },
     icon: ArrowDownIcon
   }] : [{
     label: 'left',
     offset: -1,
-    canMove: canDecrease,
+    canMove: function canMove(index) {
+      return canDrag && canDecrease(index);
+    },
     icon: ArrowLeftIcon
   }, {
     label: 'right',
     offset: 1,
     canMove: function canMove(index) {
       var _tableMap$width;
-      return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+      return canDrag && canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
     },
     icon: ArrowRightIcon
   }];
@@ -137,7 +141,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: hasMergedCells || !canMove(index),
+      disabled: !canMove(index),
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {

package/dist/types/plugins/table/nodeviews/TableComponent.d.ts

@@ -23,6 +23,7 @@ export interface ComponentProps {
     isHeaderColumnEnabled: boolean;
     isMediaFullscreen?: boolean;
     isDragAndDropEnabled?: boolean;
+    canDrag?: boolean;
     tableActive: boolean;
     ordering: TableColumnOrdering;
     isResizing?: boolean;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/actions.d.ts

@@ -1,6 +1,7 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
+import type { DragAndDropPluginState } from './types';
 export interface DragAndDropAction<T, D> {
     type: T;
     data: D;
@@ -9,6 +10,7 @@ export declare const DragAndDropActionType: {
     readonly SET_DROP_TARGET: "SET_DROP_TARGET";
     readonly CLEAR_DROP_TARGET: "CLEAR_DROP_TARGET";
     readonly TOGGLE_DRAG_MENU: "TOGGLE_DRAG_MENU";
+    readonly UPDATE: "UPDATE";
 };
 export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.SET_DROP_TARGET, {
     type: DropTargetType;
@@ -23,4 +25,5 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<typeof DragAndDr
     direction: TableDirection;
     index: number;
 }>;
-export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction;
+export type DragAndDropUpdateAction = DragAndDropAction<typeof DragAndDropActionType.UPDATE, Partial<DragAndDropPluginState>>;
+export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction | DragAndDropUpdateAction;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/consts.d.ts

@@ -4,3 +4,4 @@ export declare const DropTargetType: {
     readonly COLUMN: "column";
 };
 export type DropTargetType = (typeof DropTargetType)[keyof typeof DropTargetType];
+export declare const DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/plugin.d.ts

@@ -1,3 +1,4 @@
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<import("./types").DragAndDropPluginState>;
+import type { DragAndDropPluginState } from './types';
+export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<DragAndDropPluginState>;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -9,4 +9,5 @@ export interface DragAndDropPluginState {
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
     isDragging: boolean;
+    canDrag: boolean;
 }

package/dist/types/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 type HandleIconProps = {
+    canDrag: boolean;
     hasMergedCells: boolean;
     direction: 'row' | 'column';
     isDragMenuOpen: boolean | undefined;

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -14,6 +14,7 @@ type DragHandleProps = {
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
+    canDrag?: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -17,6 +17,7 @@ type DragMenuProps = {
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
+    canDrag?: boolean;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -15,9 +15,10 @@ export interface Props {
     index?: number;
     targetCellPosition?: number;
     getEditorContainerWidth: GetEditorContainerWidth;
+    canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -14,6 +14,7 @@ export interface ColumnControlsProps {
     colWidths?: (number | undefined)[];
     hasHeaderColumn?: boolean;
     isTableHovered?: boolean;
+    canDrag?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -22,6 +22,7 @@ export interface Props {
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
     isTableHovered?: boolean;
+    canDrag?: boolean;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -13,6 +13,7 @@ type DragControlsProps = {
     isInDanger?: boolean;
     isResizing?: boolean;
     isTableHovered?: boolean;
+    canDrag?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -18,6 +18,7 @@ export interface Props {
     isHeaderColumnEnabled?: boolean;
     isNumberColumnEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
+    canDrag?: boolean;
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];

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

@@ -7,4 +7,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCells: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts

@@ -23,6 +23,7 @@ export interface ComponentProps {
     isHeaderColumnEnabled: boolean;
     isMediaFullscreen?: boolean;
     isDragAndDropEnabled?: boolean;
+    canDrag?: boolean;
     tableActive: boolean;
     ordering: TableColumnOrdering;
     isResizing?: boolean;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/actions.d.ts

@@ -1,6 +1,7 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
+import type { DragAndDropPluginState } from './types';
 export interface DragAndDropAction<T, D> {
     type: T;
     data: D;
@@ -9,6 +10,7 @@ export declare const DragAndDropActionType: {
     readonly SET_DROP_TARGET: "SET_DROP_TARGET";
     readonly CLEAR_DROP_TARGET: "CLEAR_DROP_TARGET";
     readonly TOGGLE_DRAG_MENU: "TOGGLE_DRAG_MENU";
+    readonly UPDATE: "UPDATE";
 };
 export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.SET_DROP_TARGET, {
     type: DropTargetType;
@@ -23,4 +25,5 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<typeof DragAndDr
     direction: TableDirection;
     index: number;
 }>;
-export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction;
+export type DragAndDropUpdateAction = DragAndDropAction<typeof DragAndDropActionType.UPDATE, Partial<DragAndDropPluginState>>;
+export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction | DragAndDropUpdateAction;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/consts.d.ts

@@ -4,3 +4,4 @@ export declare const DropTargetType: {
     readonly COLUMN: "column";
 };
 export type DropTargetType = (typeof DropTargetType)[keyof typeof DropTargetType];
+export declare const DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/plugin.d.ts

@@ -1,3 +1,4 @@
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<import("./types").DragAndDropPluginState>;
+import type { DragAndDropPluginState } from './types';
+export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<DragAndDropPluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -9,4 +9,5 @@ export interface DragAndDropPluginState {
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
     isDragging: boolean;
+    canDrag: boolean;
 }

package/dist/types-ts4.5/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 type HandleIconProps = {
+    canDrag: boolean;
     hasMergedCells: boolean;
     direction: 'row' | 'column';
     isDragMenuOpen: boolean | undefined;

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -14,6 +14,7 @@ type DragHandleProps = {
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
+    canDrag?: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -17,6 +17,7 @@ type DragMenuProps = {
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
+    canDrag?: boolean;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -15,9 +15,10 @@ export interface Props {
     index?: number;
     targetCellPosition?: number;
     getEditorContainerWidth: GetEditorContainerWidth;
+    canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -14,6 +14,7 @@ export interface ColumnControlsProps {
     colWidths?: (number | undefined)[];
     hasHeaderColumn?: boolean;
     isTableHovered?: boolean;
+    canDrag?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -22,6 +22,7 @@ export interface Props {
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
     isTableHovered?: boolean;
+    canDrag?: boolean;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -13,6 +13,7 @@ type DragControlsProps = {
     isInDanger?: boolean;
     isResizing?: boolean;
     isTableHovered?: boolean;
+    canDrag?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -18,6 +18,7 @@ export interface Props {
     isHeaderColumnEnabled?: boolean;
     isNumberColumnEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
+    canDrag?: boolean;
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];

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

@@ -7,4 +7,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCells: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/package.json

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

package/src/__tests__/unit/pm-plugins/drag-and-drop/plugin.ts

@@ -0,0 +1,112 @@
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdCursor,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../../plugins/table';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT } from '../../../../plugins/table/pm-plugins/drag-and-drop/consts';
+import { getPluginState } from '../../../../plugins/table/pm-plugins/drag-and-drop/plugin-factory';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
+import type { PluginConfig } from '../../../../plugins/table/types';
+
+const tableOptions = {
+  allowNumberColumn: true,
+  allowHeaderRow: true,
+  allowHeaderColumn: true,
+  permittedLayouts: 'all',
+  allowColumnResizing: true,
+  stickyHeaders: true,
+} as PluginConfig;
+
+describe('drag and drop plugin', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            tableOptions,
+            dragAndDropEnabled: true,
+          },
+        ]),
+      pluginKey,
+    });
+
+  describe('when table is not selected', () => {
+    it('should reset table canDrag so by default tables are draggable', () => {
+      const { editorView } = editor(
+        doc(
+          p('{<>}Hello World'),
+          table()(tr(tdEmpty, tdEmpty), tr(tdEmpty, tdEmpty)),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(true);
+    });
+  });
+
+  describe('when table is selected', () => {
+    it('should allow items to be draggable if table is within nodeSize limit', () => {
+      const { editorView } = editor(
+        // The nodeSize of an empty 2x2 is 22 so if i adjust the limit to be 1 under the max (ie. 23), then canDrag should be enabled.
+        doc(
+          table()(
+            tr(tdCursor, tdEmpty),
+            tr(
+              tdEmpty,
+              td()(p('-'.repeat(DRAGGABLE_TABLE_NODE_SIZE_LIMIT - 23))),
+            ),
+          ),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(true);
+    });
+
+    it('should not allow items to be draggable if table is above nodeSize limit', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(tdCursor, tdEmpty),
+            tr(tdEmpty, td()(p('-'.repeat(DRAGGABLE_TABLE_NODE_SIZE_LIMIT)))),
+          ),
+        ),
+      );
+
+      const { canDrag } = getPluginState(editorView.state);
+      expect(canDrag).toBe(false);
+    });
+  });
+});

package/src/plugins/table/index.tsx

@@ -494,6 +494,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       direction={dragAndDropState?.dragMenuDirection}
                       index={dragAndDropState?.dragMenuIndex}
                       isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
+                      canDrag={dragAndDropState?.canDrag}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}