@atlaskit/editor-plugin-table 7.5.15 → 7.6.0

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

@@ -11,3 +11,4 @@ export declare const setDropTarget: (type: DropTargetType, index: number, hasMer
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
+export declare const cloneSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

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

@@ -0,0 +1,3 @@
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { DraggableBehaviour } from '../../../types';
+export declare const getDragBehaviour: ({ altKey, ctrlKey, }: Input) => DraggableBehaviour;

package/dist/types/types.d.ts

@@ -435,6 +435,7 @@ export type TableDirection = 'row' | 'column';
  * Drag and Drop interfaces
  */
 export type DraggableType = 'table-row' | 'table-column';
+export type DraggableBehaviour = 'move' | 'clone';
 export interface DraggableSourceData extends Record<string, unknown> {
     type: DraggableType;
     localId: string;
@@ -454,7 +455,17 @@ export interface DraggableData {
     targetIndex: number;
     targetAdjustedIndex: number;
     targetClosestEdge: Edge;
-    direction: 1 | -1;
+    /**
+     * The target direction identifies where relative to the target index is the item being dropped. A value of 'start' would
+     * mean that the item is being inserted before the index, and 'end would be after.
+     */
+    targetDirection: 'start' | 'end';
+    /**
+     * This represents a hollistic movement direction; a value of 1 means the source->target index would shift in a positive direction.
+     * A value of 0 indicates that the target index is inside the the source indexes.
+     */
+    direction: 1 | -1 | 0;
+    behaviour: DraggableBehaviour;
 }
 export type HandleTypes = 'hover' | 'selected';
 export interface MessageDescriptor {

package/dist/types/ui/TableFullWidthLabel/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FullWidthDisplay: () => JSX.Element;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -6,3 +6,4 @@ import type { DraggableData, DraggableType } from '../../types';
 export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndexes: number[] | undefined, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (sourceType: DraggableType, direction: DraggableData['direction']) => Command;
+export declare const cloneSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => Command;

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

@@ -11,3 +11,4 @@ export declare const setDropTarget: (type: DropTargetType, index: number, hasMer
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => import("@atlaskit/editor-common/types").Command;
+export declare const cloneSource: (sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: 'start' | 'end', tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

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

@@ -0,0 +1,3 @@
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { DraggableBehaviour } from '../../../types';
+export declare const getDragBehaviour: ({ altKey, ctrlKey, }: Input) => DraggableBehaviour;

package/dist/types-ts4.5/types.d.ts

@@ -435,6 +435,7 @@ export type TableDirection = 'row' | 'column';
  * Drag and Drop interfaces
  */
 export type DraggableType = 'table-row' | 'table-column';
+export type DraggableBehaviour = 'move' | 'clone';
 export interface DraggableSourceData extends Record<string, unknown> {
     type: DraggableType;
     localId: string;
@@ -454,7 +455,17 @@ export interface DraggableData {
     targetIndex: number;
     targetAdjustedIndex: number;
     targetClosestEdge: Edge;
-    direction: 1 | -1;
+    /**
+     * The target direction identifies where relative to the target index is the item being dropped. A value of 'start' would
+     * mean that the item is being inserted before the index, and 'end would be after.
+     */
+    targetDirection: 'start' | 'end';
+    /**
+     * This represents a hollistic movement direction; a value of 1 means the source->target index would shift in a positive direction.
+     * A value of 0 indicates that the target index is inside the the source indexes.
+     */
+    direction: 1 | -1 | 0;
+    behaviour: DraggableBehaviour;
 }
 export type HandleTypes = 'hover' | 'selected';
 export interface MessageDescriptor {

package/dist/types-ts4.5/ui/TableFullWidthLabel/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FullWidthDisplay: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.15",
+  "version": "7.6.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.18.0",
+    "@atlaskit/editor-common": "^78.20.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -39,7 +39,7 @@
     "@atlaskit/editor-plugin-width": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.5.0",
+    "@atlaskit/editor-tables": "^2.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -26,7 +26,7 @@ import {
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
 import { canMove, getTargetIndex } from '../../utils/drag-menu';
 
-import { clearDropTarget, moveSource } from './commands';
+import { clearDropTarget, cloneSource, moveSource } from './commands';
 
 export const clearDropTargetWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -157,3 +157,58 @@ export const moveSourceWithAnalyticsViaShortcut =
       targetIndex,
     )(state, dispatch);
   };
+
+export const cloneSourceWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    inputMethod:
+      | INPUT_METHOD.TABLE_CONTEXT_MENU
+      | INPUT_METHOD.DRAG_AND_DROP
+      | INPUT_METHOD.SHORTCUT,
+    sourceType: DraggableType,
+    sourceIndexes: number[],
+    targetIndex: number,
+    targetDirection: 'start' | 'end',
+    tr?: Transaction,
+  ) => {
+    return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+      const { totalRowCount, totalColumnCount } =
+        getSelectedTableInfo(selection);
+      return {
+        action:
+          sourceType === 'table-row'
+            ? TABLE_ACTION.CLONED_ROW
+            : TABLE_ACTION.CLONED_COLUMN,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        attributes: {
+          inputMethod,
+          count: sourceIndexes.length,
+          // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
+          // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
+          distance:
+            Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) *
+            direction,
+          // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
+          status: sourceIndexes.includes(targetIndex)
+            ? TABLE_STATUS.CANCELLED
+            : TABLE_STATUS.SUCCESS,
+          totalRowCount,
+          totalColumnCount,
+        },
+        eventType: EVENT_TYPE.TRACK,
+      };
+    })(editorAnalyticsAPI)((state, dispatch) => {
+      if (dispatch) {
+        cloneSource(
+          sourceType,
+          sourceIndexes,
+          targetIndex,
+          targetDirection,
+          tr,
+        )(state, dispatch);
+      }
+      return true;
+    });
+  };

package/src/pm-plugins/drag-and-drop/commands.ts

@@ -4,7 +4,12 @@ import type {
 } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import {
+  cloneColumn,
+  cloneRow,
+  moveColumn,
+  moveRow,
+} from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
@@ -59,7 +64,6 @@ export const setDropTarget = (
           TableDecorations.ROW_INSERT_LINE,
         );
       }
-
       return {
         type: DragAndDropActionType.SET_DROP_TARGET,
         data: {
@@ -175,3 +179,28 @@ export const toggleDragMenu = (
       return tr.setMeta('addToHistory', false);
     },
   );
+
+export const cloneSource = (
+  sourceType: DraggableType,
+  sourceIndexes: number[],
+  targetIndex: number,
+  targetDirection: 'start' | 'end',
+  tr?: Transaction,
+) =>
+  createCommand(
+    (state) => {
+      return {
+        type: DragAndDropActionType.CLEAR_DROP_TARGET,
+        data: {
+          decorationSet: DecorationSet.empty,
+        },
+      };
+    },
+    (originalTr: Transaction, state) => {
+      const nextTr = tr || originalTr;
+      const clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
+      return clone(state, sourceIndexes, targetIndex, targetDirection, {
+        selectAfterClone: true,
+      })(nextTr);
+    },
+  );

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

@@ -26,6 +26,7 @@ import { DragAndDropActionType } from './actions';
 import { clearDropTarget, setDropTarget, toggleDragMenu } from './commands';
 import {
   clearDropTargetWithAnalytics,
+  cloneSourceWithAnalytics,
   moveSourceWithAnalytics,
 } from './commands-with-analytics';
 import { DropTargetType } from './consts';
@@ -172,7 +173,9 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
           sourceIndexes,
           targetIndex,
           targetAdjustedIndex,
+          targetDirection,
           direction,
+          behaviour,
         } = data;
 
         // When we drop on a target we will know the targets row/col index for certain,
@@ -203,13 +206,24 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
         }
 
         requestAnimationFrame(() => {
-          moveSourceWithAnalytics(editorAnalyticsAPI)(
-            INPUT_METHOD.DRAG_AND_DROP,
-            sourceType,
-            sourceIndexes,
-            targetAdjustedIndex + (direction === -1 ? 0 : -1),
-            tr,
-          )(editorView.state, editorView.dispatch);
+          if (behaviour === 'clone') {
+            cloneSourceWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.DRAG_AND_DROP,
+              sourceType,
+              sourceIndexes,
+              targetIndex,
+              targetDirection,
+              tr,
+            )(editorView.state, editorView.dispatch);
+          } else {
+            moveSourceWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.DRAG_AND_DROP,
+              sourceType,
+              sourceIndexes,
+              targetAdjustedIndex + (direction === 1 ? -1 : 0),
+              tr,
+            )(editorView.state, editorView.dispatch);
+          }
 
           // force a colgroup update here, otherwise dropped columns don't have
           // the correct width immediately after the drop

package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts

@@ -0,0 +1,12 @@
+import { browser } from '@atlaskit/editor-common/utils';
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+
+import type { DraggableBehaviour } from '../../../types';
+
+export const getDragBehaviour = ({
+  altKey,
+  ctrlKey,
+}: Input): DraggableBehaviour => {
+  const isCloneModifierKeyPressed = browser.mac ? altKey : ctrlKey;
+  return isCloneModifierKeyPressed ? 'clone' : 'move';
+};

package/src/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -8,6 +8,8 @@ import type {
   DraggableTargetData,
 } from '../../../types';
 
+import { getDragBehaviour } from './getDragBehaviour';
+
 export const getDraggableDataFromEvent = ({
   location,
   source,
@@ -54,9 +56,16 @@ export const getDraggableDataFromEvent = ({
   const targetOffset =
     targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
 
-  // since only consecutive rows/cols can be moved we can assume that if the first index is greater then
-  // the target index, the then the direction of the DnD is decreasing
-  const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
+  // if the min index is greater then the target index, the then the direction of the DnD is decreasing
+  // if the target is within the min/max index then we can assume that no direction exists so it will be 0.
+  const srcMin = Math.min(...sourceIndexes);
+  const srcMax = Math.max(...sourceIndexes);
+  const direction =
+    targetIndex >= srcMin && targetIndex <= srcMax
+      ? 0
+      : srcMin >= targetIndex
+      ? -1
+      : 1;
 
   return {
     sourceType,
@@ -67,6 +76,11 @@ export const getDraggableDataFromEvent = ({
     targetIndex,
     targetAdjustedIndex: targetIndex + targetOffset,
     targetClosestEdge,
+    targetDirection:
+      targetClosestEdge === 'top' || targetClosestEdge === 'left'
+        ? 'start'
+        : 'end',
     direction,
+    behaviour: getDragBehaviour(location.current.input),
   };
 };

package/src/toolbar.tsx

@@ -90,6 +90,7 @@ import type {
   ToolbarMenuState,
 } from './types';
 import { TableCssClassName } from './types';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import {
   getMergedCellsPositions,
   getSelectedColumnIndexes,
@@ -452,6 +453,55 @@ export const getToolbarConfig =
     // We don't want to show floating toolbar while resizing the table
     const isWidthResizing = tableWidthState?.resizing;
 
+    const { isTableScalingEnabled, widthToWidest } = pluginState;
+
+    if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+      const { stickyScrollbar } = getEditorFeatureFlags();
+
+      const nodeType = state.schema.nodes.table;
+      const getDomRef = (editorView: EditorView) => {
+        let element: HTMLElement | undefined;
+        const domAtPos = editorView.domAtPos.bind(editorView);
+        const parent = findParentDomRefOfType(
+          nodeType,
+          domAtPos,
+        )(state.selection);
+        if (parent) {
+          const tableRef =
+            (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
+            undefined;
+          if (tableRef) {
+            element =
+              closestElement(
+                tableRef,
+                `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
+              ) || undefined;
+          }
+        }
+        return element;
+      };
+      const fullWidthLabel = {
+        id: 'editor.table.fullWidthLabel',
+        type: 'custom',
+        fallback: [],
+        render: () => {
+          return <FullWidthDisplay key={'full-width-label'} />;
+        },
+      } as FloatingToolbarItem<Command>;
+
+      return {
+        title: 'Table floating label',
+        getDomRef,
+        nodeType,
+        key: 'full-width-label',
+        offset: [0, 18],
+        absoluteOffset: stickyScrollbar ? { top: -6 } : { top: 0 },
+        zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
+        items: [fullWidthLabel],
+        scrollable: true,
+      };
+    }
+
     if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
       const nodeType = state.schema.nodes.table;
       const menu = getToolbarMenuConfig(

package/src/types.ts

@@ -477,6 +477,8 @@ export type TableDirection = 'row' | 'column';
  * Drag and Drop interfaces
  */
 export type DraggableType = 'table-row' | 'table-column';
+export type DraggableBehaviour = 'move' | 'clone';
+
 export interface DraggableSourceData extends Record<string, unknown> {
   type: DraggableType;
   localId: string;
@@ -498,7 +500,17 @@ export interface DraggableData {
   targetIndex: number;
   targetAdjustedIndex: number;
   targetClosestEdge: Edge;
-  direction: 1 | -1;
+  /**
+   * The target direction identifies where relative to the target index is the item being dropped. A value of 'start' would
+   * mean that the item is being inserted before the index, and 'end would be after.
+   */
+  targetDirection: 'start' | 'end';
+  /**
+   * This represents a hollistic movement direction; a value of 1 means the source->target index would shift in a positive direction.
+   * A value of 0 indicates that the target index is inside the the source indexes.
+   */
+  direction: 1 | -1 | 0;
+  behaviour: DraggableBehaviour;
 }
 
 export type HandleTypes = 'hover' | 'selected';

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  attachClosestEdge,
+  type Edge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
+import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
 import type { DraggableSourceData } from '../../../types';
 
 export interface Props {
@@ -29,8 +33,16 @@ export const ColumnDropTarget = ({
 
     return dropTargetForElements({
       element: dropTargetRef.current,
-      canDrop({ source }) {
+      canDrop({ source, input }) {
         const data = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        const isDropValid =
+          behaviour === 'move'
+            ? data.indexes?.indexOf(index) === -1
+            : behaviour === 'clone';
+
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-column' &&
@@ -38,20 +50,42 @@ export const ColumnDropTarget = ({
           data.localId === localId &&
           // Only draggables which DO NOT include this drop targets index can be dropped
           !!data.indexes?.length &&
-          data.indexes?.indexOf(index) === -1
+          isDropValid
         );
       },
+      getDropEffect: ({ input }) =>
+        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
-      getData({ input, element }) {
+      getData({ source, input, element }) {
         const data = {
           localId,
           type: 'table-column',
           targetIndex: index,
         };
+        const srcData = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+        const allowedEdges: Edge[] =
+          behaviour === 'move'
+            ? srcData.indexes?.reduce(
+                (acc, v) => {
+                  if (v - index === -1) {
+                    acc.shift();
+                  }
+                  if (v - index === 1) {
+                    acc.pop();
+                  }
+                  return acc;
+                },
+                ['left', 'right'],
+              )
+            : ['left', 'right'];
+
         return attachClosestEdge(data, {
           input,
           element,
-          allowedEdges: ['left', 'right'],
+          allowedEdges,
         });
       },
     });

package/src/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  attachClosestEdge,
+  type Edge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
+import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
 import type { DraggableSourceData } from '../../../types';
 
 export type RowDropTargetProps = {
@@ -21,8 +25,16 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
 
     return dropTargetForElements({
       element: dropTargetRef.current,
-      canDrop({ source }) {
+      canDrop({ source, input }) {
         const data = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
+        const isDropValid =
+          behaviour === 'move'
+            ? data.indexes?.indexOf(index) === -1
+            : behaviour === 'clone';
+
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
@@ -30,20 +42,43 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
           data.localId === localId &&
           // Only draggables which DO NOT include this drop targets index can be dropped
           !!data.indexes?.length &&
-          data.indexes?.indexOf(index) === -1
+          isDropValid
         );
       },
+      getDropEffect: ({ input }) =>
+        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
       getIsSticky: () => true,
-      getData({ input, element }) {
+      getData({ source, input, element }) {
         const data = {
           localId,
           type: 'table-row',
           targetIndex: index,
         };
+
+        const srcData = source.data as DraggableSourceData;
+        const behaviour = getDragBehaviour(input);
+
+        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+        const allowedEdges: Edge[] =
+          behaviour === 'move'
+            ? srcData.indexes?.reduce(
+                (acc, v) => {
+                  if (v - index === -1) {
+                    acc.shift();
+                  }
+                  if (v - index === 1) {
+                    acc.pop();
+                  }
+                  return acc;
+                },
+                ['top', 'bottom'],
+              )
+            : ['top', 'bottom'];
+
         return attachClosestEdge(data, {
           input,
           element,
-          allowedEdges: ['top', 'bottom'],
+          allowedEdges,
         });
       },
     });

package/src/ui/TableFullWidthLabel/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useIntl } from 'react-intl-next';
+
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { token } from '@atlaskit/tokens';
+
+const tableFullWidthLabelStyles = xcss({
+  minWidth: '120px',
+  height: token('space.300', '24px'),
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const FullWidthDisplay = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Box xcss={tableFullWidthLabelStyles}>
+      <Inline>{formatMessage(messages.fullWidthLabel)}</Inline>
+    </Box>
+  );
+};