@atlaskit/editor-plugin-table 5.4.19 → 5.4.21

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -97,6 +97,7 @@ export interface ComponentProps {
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
+  canDrag?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
@@ -470,6 +471,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       pluginInjectionApi,
       isDragAndDropEnabled,
+      canDrag,
     } = this.props;
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -497,6 +499,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         isHeaderRowEnabled={isHeaderRowEnabled}
         isDragAndDropEnabled={isDragAndDropEnabled}
+        canDrag={canDrag}
         ordering={ordering}
         isHeaderColumnEnabled={isHeaderColumnEnabled}
         hasHeaderRow={hasHeaderRow}
@@ -525,6 +528,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
         getEditorFeatureFlags={this.props.getEditorFeatureFlags}
+        canDrag={canDrag}
       />
     ) : null;
 

package/src/plugins/table/nodeviews/table.tsx

@@ -27,6 +27,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
+import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
@@ -206,6 +207,7 @@ export default class TableView extends ReactNodeView<Props> {
           tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey,
+          tableDragAndDropState: tableDragAndDropPluginKey,
         }}
         editorView={props.view}
         render={(pluginStates) => {
@@ -215,6 +217,7 @@ export default class TableView extends ReactNodeView<Props> {
             pluginState,
             // containerWidth,
             mediaState,
+            tableDragAndDropState,
           } = pluginStates;
           const containerWidth = props.getEditorContainerWidth();
 
@@ -250,6 +253,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
+              canDrag={tableDragAndDropState?.canDrag ?? false}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}

package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts

@@ -3,6 +3,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;
@@ -13,6 +14,7 @@ export const DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
   CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
   TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
+  UPDATE: 'UPDATE',
 } as const;
 
 export type DragAndDropSetDropTargetAction = DragAndDropAction<
@@ -40,8 +42,14 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<
   }
 >;
 
+export type DragAndDropUpdateAction = DragAndDropAction<
+  typeof DragAndDropActionType.UPDATE,
+  Partial<DragAndDropPluginState>
+>;
+
 // NOTE: This should be a Union of all possible actions
 export type DragAndDropPluginAction =
   | DragAndDropSetDropTargetAction
   | DragAndDropClearDropTargetAction
-  | DragAndDropToggleDragMenuAction;
+  | DragAndDropToggleDragMenuAction
+  | DragAndDropUpdateAction;

package/src/plugins/table/pm-plugins/drag-and-drop/consts.ts

@@ -6,3 +6,5 @@ export const DropTargetType = {
 
 export type DropTargetType =
   (typeof DropTargetType)[keyof typeof DropTargetType];
+
+export const DRAGGABLE_TABLE_NODE_SIZE_LIMIT = 20000;

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

@@ -25,9 +25,10 @@ import {
   setDropTarget,
   toggleDragMenu,
 } from './commands';
-import { DropTargetType } from './consts';
+import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import type { DragAndDropPluginState } from './types';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
 export const createPlugin = (
@@ -42,14 +43,23 @@ export const createPlugin = (
       isDragMenuOpen: false,
       dragMenuIndex: 0,
       isDragging: false,
+      canDrag: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
-      const { targetCellPosition: oldTargetCellPosition } =
-        getTablePluginState(oldState);
-      const { targetCellPosition: newTargetCellPosition } =
-        getTablePluginState(newState);
-      const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+      const {
+        targetCellPosition: oldTargetCellPosition,
+        tableNode: oldTableNode,
+      } = getTablePluginState(oldState);
+      const {
+        targetCellPosition: newTargetCellPosition,
+        tableNode: newTableNode,
+      } = getTablePluginState(newState);
+      const { isDragMenuOpen, dragMenuIndex, canDrag } =
+        getPluginState(newState);
+
+      const stateChanges: Array<Partial<DragAndDropPluginState>> = [];
+      const tr = newState.tr;
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -57,15 +67,6 @@ export const createPlugin = (
       // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
       if (oldTargetCellPosition !== newTargetCellPosition) {
         if (isDragMenuOpen) {
-          const tr = newState.tr;
-          const action = {
-            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
-            data: {
-              isDragMenuOpen: false,
-              direction: undefined,
-            },
-          };
-
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
             // ED-20673 check if it is a cell selection,
@@ -78,13 +79,44 @@ export const createPlugin = (
               cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) &&
               !isCellSelection
             ) {
-              return tr.setMeta(pluginKey, action);
+              stateChanges.push({
+                isDragMenuOpen: false,
+                dragMenuDirection: undefined,
+              });
             } // else NOP
           } else {
-            return tr.setMeta(pluginKey, action);
+            stateChanges.push({
+              isDragMenuOpen: false,
+              dragMenuDirection: undefined,
+            });
           }
         }
       }
+
+      if (oldTableNode?.nodeSize !== newTableNode?.nodeSize) {
+        const nextCanDrag =
+          (newTableNode?.nodeSize ?? 0) < DRAGGABLE_TABLE_NODE_SIZE_LIMIT;
+
+        if (canDrag !== nextCanDrag) {
+          stateChanges.push({
+            canDrag: nextCanDrag,
+          });
+        }
+      }
+
+      if (stateChanges.length) {
+        return tr
+          .setMeta(pluginKey, {
+            type: DragAndDropActionType.UPDATE,
+            data: {
+              ...stateChanges.reduce(
+                (state, cur) => ({ ...state, ...cur }),
+                {},
+              ),
+            },
+          })
+          .setMeta('addToHistory', false);
+      }
     },
     view: (editorView: EditorView) => {
       return {

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -31,6 +31,11 @@ export default (
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index,
       };
+    case DragAndDropActionType.UPDATE:
+      return {
+        ...pluginState,
+        ...action.data,
+      };
     default:
       return pluginState;
   }

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

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

package/src/plugins/table/ui/DragHandle/HandleIconComponent.tsx

@@ -7,6 +7,7 @@ import {
 } from '../icons';
 
 type HandleIconProps = {
+  canDrag: boolean;
   hasMergedCells: boolean;
   direction: 'row' | 'column';
   isDragMenuOpen: boolean | undefined;
@@ -19,6 +20,7 @@ type HandleIconProps = {
 
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
+    canDrag,
     direction,
     isDragMenuOpen,
     isRowHandleHovered,
@@ -36,7 +38,9 @@ export const HandleIconComponent = (props: HandleIconProps) => {
     dragMenuDirection === direction &&
     isCurrentRowOrColumnSelected;
 
-  const showNormalHandle = hasMergedCells ? (
+  const isDragPossible = canDrag && !hasMergedCells;
+
+  const showNormalHandle = !isDragPossible ? (
     <DragHandleDisabledIcon />
   ) : (
     <DragHandleIcon />

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -32,6 +32,7 @@ type DragHandleProps = {
   onMouseOut?: MouseEventHandler;
   onMouseUp?: MouseEventHandler;
   editorView: EditorView;
+  canDrag?: boolean;
 };
 
 export const DragHandle = ({
@@ -46,6 +47,7 @@ export const DragHandle = ({
   onMouseUp,
   onClick,
   editorView,
+  canDrag = false,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
@@ -82,6 +84,7 @@ export const DragHandle = ({
   );
 
   const handleIconProps = {
+    canDrag,
     hasMergedCells,
     direction,
     isDragMenuOpen,
@@ -99,7 +102,7 @@ export const DragHandle = ({
       return draggable({
         element: dragHandleDivRefCurrent,
         canDrag: () => {
-          return !hasMergedCells;
+          return canDrag && !hasMergedCells;
         },
         getInitialData() {
           return {
@@ -142,6 +145,7 @@ export const DragHandle = ({
     indexes,
     editorView.state.selection,
     hasMergedCells,
+    canDrag,
   ]);
 
   return (
@@ -151,7 +155,7 @@ export const DragHandle = ({
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,
           {
-            [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells,
+            [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells,
           },
         )}
         ref={dragHandleDivRef}

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

@@ -49,6 +49,7 @@ type DragMenuProps = {
   scrollableElement?: HTMLElement;
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
+  canDrag?: boolean;
 };
 
 const groupedDragMenuConfig = [
@@ -119,6 +120,7 @@ export const DragMenu = ({
   scrollableElement,
   targetCellPosition,
   getEditorContainerWidth,
+  canDrag,
 }: DragMenuProps) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
 
@@ -137,7 +139,7 @@ export const DragMenu = ({
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
-    shouldMoveDisabled,
+    !!canDrag && !shouldMoveDisabled,
     tableMap,
     index,
     targetCellPosition,

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

@@ -25,6 +25,7 @@ export interface Props {
   index?: number;
   targetCellPosition?: number;
   getEditorContainerWidth: GetEditorContainerWidth;
+  canDrag?: boolean;
 }
 
 const FloatingDragMenu = ({
@@ -39,6 +40,7 @@ const FloatingDragMenu = ({
   index,
   targetCellPosition,
   getEditorContainerWidth,
+  canDrag,
 }: Props) => {
   if (
     !isOpen ||
@@ -86,6 +88,7 @@ const FloatingDragMenu = ({
         index={index}
         targetCellPosition={targetCellPosition}
         getEditorContainerWidth={getEditorContainerWidth}
+        canDrag={canDrag}
       />
     </Popup>
   );

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

@@ -1,6 +1,7 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -31,6 +32,7 @@ export interface ColumnControlsProps {
   colWidths?: (number | undefined)[];
   hasHeaderColumn?: boolean;
   isTableHovered?: boolean;
+  canDrag?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -57,6 +59,7 @@ export const ColumnControls = ({
   colWidths,
   hasHeaderColumn,
   isTableHovered,
+  canDrag,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
@@ -203,7 +206,7 @@ export const ColumnControls = ({
                 direction="column"
                 tableLocalId={localId || ''}
                 indexes={colIndexes}
-                previewWidth={colWidths?.[colIndex!] ?? 48}
+                previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
                 previewHeight={previewHeight}
                 appearance={
                   selectedColIndexes.includes(hoveredCell.colIndex!)
@@ -217,6 +220,7 @@ export const ColumnControls = ({
                 onMouseOut={handleMouseOut}
                 onMouseUp={handleMouseUp}
                 editorView={editorView}
+                canDrag={canDrag}
               />
             </div>
           )}

package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx

@@ -35,6 +35,7 @@ export interface Props {
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
   isTableHovered?: boolean;
+  canDrag?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -49,6 +50,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   selection,
   isInDanger,
   isTableHovered,
+  canDrag,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -139,6 +141,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         rowHeights={rowHeights}
         colWidths={colWidths}
         hasHeaderColumn={hasHeaderColumn}
+        canDrag={canDrag}
       />
       {hasDropTargets && (
         <ColumnDropTargets

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

@@ -42,6 +42,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;
@@ -68,6 +69,7 @@ const DragControlsComponent = ({
   isInDanger,
   isResizing,
   isTableHovered,
+  canDrag,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
@@ -169,8 +171,8 @@ const DragControlsComponent = ({
       style={{
         gridTemplateRows: heights,
         gridTemplateColumns: isDragging
-          ? `${dropTargetExtendedWidth}px 28px ${tableWidth}px`
-          : 'none',
+          ? `${dropTargetExtendedWidth}px 14px ${tableWidth}px`
+          : '0px 14px 0px',
         left: isDragging ? `-${dropTargetExtendedWidth + 2}px` : `-2px`,
       }}
       onMouseMove={handleMouseMove}
@@ -188,7 +190,7 @@ const DragControlsComponent = ({
               data-end-index={endIndex}
               className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
               contentEditable={false}
-              key={index}
+              key={`insert-dot-${index}`}
             >
               {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
               {/* {!hasHeaderRow && index === 0 && (
@@ -204,7 +206,7 @@ const DragControlsComponent = ({
             </div>
             {isDragging && (
               <RowDropTarget
-                key={index}
+                key={`drop-target-${index}`}
                 index={index}
                 localId={currentNodeLocalId}
                 style={{
@@ -224,10 +226,10 @@ const DragControlsComponent = ({
           style={{
             gridRow: gridRowPosition,
             gridColumn: '2',
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
+            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+            width: '9px',
+            position: 'relative',
+            right: '-0.5px',
           }}
           data-testid="table-floating-row-drag-handle"
         >
@@ -248,6 +250,7 @@ const DragControlsComponent = ({
             onMouseOut={handleMouseOut}
             onMouseUp={onMouseUp}
             editorView={editorView}
+            canDrag={canDrag}
           />
         </div>
       )}

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -29,6 +29,7 @@ export interface Props {
   isHeaderColumnEnabled?: boolean;
   isNumberColumnEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
+  canDrag?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
@@ -106,6 +107,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader,
       hoveredCell,
       isTableHovered,
+      canDrag,
     } = this.props;
     return (
       this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
@@ -123,7 +125,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       headerRowHeight !== nextProps.headerRowHeight ||
       stickyHeader !== nextProps.stickyHeader ||
       hoveredCell !== nextProps.hoveredCell ||
-      isTableHovered !== nextProps.isTableHovered
+      isTableHovered !== nextProps.isTableHovered ||
+      canDrag !== nextProps.canDrag
     );
   }
 
@@ -150,6 +153,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       isDragAndDropEnabled,
       hoveredCell,
       isTableHovered,
+      canDrag,
     } = this.props;
 
     if (!tableRef) {
@@ -208,6 +212,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                     hoverRows={this.hoverRows}
                     selectRow={this.selectRow}
                     updateCellHoverLocation={this.updateCellHoverLocation}
+                    canDrag={canDrag}
                   />
                 </>
               ) : (

package/src/plugins/table/ui/common-styles.ts

@@ -717,10 +717,9 @@ export const tableStyles = (
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        position: relative;
         align-self: end;
-        position: absolute;
         height: 100%;
-        width: 24px;
       }
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {

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

@@ -57,7 +57,7 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
 export const getDragMenuConfig = (
   direction: TableDirection,
   getEditorContainerWidth: GetEditorContainerWidth,
-  hasMergedCells: boolean,
+  canDrag: boolean,
   tableMap?: TableMap,
   index?: number,
   targetCellPosition?: number,
@@ -99,14 +99,14 @@ export const getDragMenuConfig = (
           {
             label: 'up',
             offset: -1,
-            canMove: canDecrease,
+            canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowUpIcon,
           },
           {
             label: 'down',
             offset: 1,
             canMove: (index?: number) =>
-              canIncrease(index, (tableMap?.height ?? 0) - 1),
+              canDrag && canIncrease(index, (tableMap?.height ?? 0) - 1),
             icon: ArrowDownIcon,
           },
         ]
@@ -114,14 +114,14 @@ export const getDragMenuConfig = (
           {
             label: 'left',
             offset: -1,
-            canMove: canDecrease,
+            canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowLeftIcon,
           },
           {
             label: 'right',
             offset: 1,
             canMove: (index?: number) =>
-              canIncrease(index, (tableMap?.width ?? 0) - 1),
+              canDrag && canIncrease(index, (tableMap?.width ?? 0) - 1),
             icon: ArrowRightIcon,
           },
         ];
@@ -196,7 +196,7 @@ export const getDragMenuConfig = (
     ...moveOptions.map(({ label, offset, canMove, icon }) => ({
       id: `move_${direction}_${label}`,
       title: `Move ${direction} ${label}`,
-      disabled: hasMergedCells || !canMove(index),
+      disabled: !canMove(index),
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {