@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

package/dist/types/plugins/table/ui/icons/AddColRightIcon.d.ts

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

package/dist/types/plugins/table/ui/icons/AddRowAboveIcon.d.ts

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

package/dist/types/plugins/table/ui/icons/AddRowBelowIcon.d.ts

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

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

@@ -1,2 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { AddRowAboveIcon } from './AddRowAboveIcon';
+export { AddRowBelowIcon } from './AddRowBelowIcon';
+export { AddColLeftIcon } from './AddColLeftIcon';
+export { AddColRightIcon } from './AddColRightIcon';

package/dist/types/plugins/table/ui/messages.d.ts

@@ -59,5 +59,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    cornerControl: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

package/dist/types/plugins/table/ui/ui-styles.d.ts

@@ -4,6 +4,7 @@ export declare const HeaderButton: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

package/dist/types/plugins/table/utils/dom.d.ts

@@ -9,10 +9,11 @@ export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boo
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
 /** drag-and-drop classes */
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
-export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
+export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
+export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {

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

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

package/dist/types/plugins/table/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

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

@@ -253,9 +253,6 @@ export declare const TableCssClassName: {
     COLUMN_CONTROLS: string;
     COLUMN_CONTROLS_DECORATIONS: string;
     COLUMN_SELECTED: string;
-    COLUMN_CONTROLS_WRAPPER: string;
-    COLUMN_DROP_TARGET_CONTROLS: string;
-    COLUMN_CONTROLS_INNER: string;
     ROW_CONTROLS_WRAPPER: string;
     ROW_CONTROLS: string;
     ROW_CONTROLS_INNER: string;
@@ -290,7 +287,12 @@ export declare const TableCssClassName: {
     DRAG_COLUMN_CONTROLS: string;
     DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: string;
     DRAG_COLUMN_FLOATING_INSERT_DOT: string;
+    DRAG_COLUMN_CONTROLS_WRAPPER: string;
+    DRAG_COLUMN_DROP_TARGET_CONTROLS: string;
+    DRAG_COLUMN_CONTROLS_INNER: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
+    DRAG_CORNER_BUTTON: string;
+    DRAG_CORNER_BUTTON_INNER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;

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

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -14,6 +16,7 @@ type DragMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
+    getEditorContainerWidth: GetEditorContainerWidth;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
@@ -13,9 +14,10 @@ export interface Props {
     direction?: TableDirection;
     index?: number;
     targetCellPosition?: number;
+    getEditorContainerWidth: GetEditorContainerWidth;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { CornerControlProps } from './types';
+export declare const CornerControls: React.FC<import("react-intl-next").WithIntlProps<CornerControlProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps<"intl">>;
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { CornerControlProps } from './types';
+export declare const DragCornerControls: React.FC<import("react-intl-next").WithIntlProps<CornerControlProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps<"intl">>;
+};

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

@@ -1,16 +1,2 @@
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-export interface Props {
-    editorView: EditorView;
-    tableRef?: HTMLTableElement;
-    isInDanger?: boolean;
-    isResizing?: boolean;
-    hoveredRows?: number[];
-    isHeaderColumnEnabled?: boolean;
-    isHeaderRowEnabled?: boolean;
-    stickyTop?: number;
-}
-export declare const CornerControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
-};
+export { CornerControls } from './ClassicCornerControls';
+export { DragCornerControls } from './DragCornerControls';

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

@@ -0,0 +1,11 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export type CornerControlProps = {
+    editorView: EditorView;
+    tableRef?: HTMLTableElement;
+    isInDanger?: boolean;
+    isResizing?: boolean;
+    hoveredRows?: number[];
+    isHeaderColumnEnabled?: boolean;
+    isHeaderRowEnabled?: boolean;
+    stickyTop?: number;
+};

package/dist/types-ts4.5/plugins/table/ui/icons/AddColLeftIcon.d.ts

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

package/dist/types-ts4.5/plugins/table/ui/icons/AddColRightIcon.d.ts

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

package/dist/types-ts4.5/plugins/table/ui/icons/AddRowAboveIcon.d.ts

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

package/dist/types-ts4.5/plugins/table/ui/icons/AddRowBelowIcon.d.ts

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

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

@@ -1,2 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { AddRowAboveIcon } from './AddRowAboveIcon';
+export { AddRowBelowIcon } from './AddRowBelowIcon';
+export { AddColLeftIcon } from './AddColLeftIcon';
+export { AddColRightIcon } from './AddColRightIcon';

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

@@ -59,5 +59,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    cornerControl: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

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

@@ -4,6 +4,7 @@ export declare const HeaderButton: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

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

@@ -12,10 +12,11 @@ export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boo
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
 /** drag-and-drop classes */
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
-export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
+export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
+export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {

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

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

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

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.14",
+  "version": "5.3.16",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.15.0",
+    "@atlaskit/editor-common": "^76.16.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugins/table/event-handlers.ts

@@ -56,6 +56,7 @@ import {
   isColumnControlsDecorations,
   isCornerButton,
   isDragColumnFloatingInsertDot,
+  isDragCornerButton,
   isDragRowFloatingInsertDot,
   isInsertRowButton,
   isResizeHandleDecoration,
@@ -237,7 +238,8 @@ export const handleMouseDown = (_: EditorView, event: Event) => {
     event.target instanceof HTMLElement &&
     (isTableContainerOrWrapper(event.target) ||
       isColumnControlsDecorations(event.target) ||
-      isRowControlsButton(event.target))
+      isRowControlsButton(event.target) ||
+      isDragCornerButton(event.target))
   );
 
   if (isControl) {
@@ -326,13 +328,16 @@ export const handleMouseMove = (
     isDragColumnFloatingInsertDot(element)
   ) {
     const { state, dispatch } = view;
-    const { insertColumnButtonIndex } = getPluginState(state);
+    const { insertColumnButtonIndex, isDragAndDropEnabled } =
+      getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
 
     const positionColumn =
       getMousePositionHorizontalRelativeByElement(
         event as MouseEvent,
         elementContentRects,
+        undefined,
+        isDragAndDropEnabled,
       ) === 'right'
         ? endIndex
         : startIndex;

package/src/plugins/table/index.tsx

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

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

@@ -17,7 +17,12 @@ import {
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { DragAndDropActionType } from './actions';
-import { clearDropTarget, moveSource, setDropTarget } from './commands';
+import {
+  clearDropTarget,
+  moveSource,
+  setDropTarget,
+  toggleDragMenu,
+} from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -99,6 +104,7 @@ export const createPlugin = (
           },
           onDragStart: ({ location }) => {
             autoScroller.start({ input: location.current.input });
+            toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag(event) {
             autoScroller.updateInput({

package/src/plugins/table/types.ts

@@ -273,10 +273,6 @@ export const TableCssClassName = {
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
 
-  COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
-  COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
-  COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
-
   ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
   ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
   ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
@@ -320,8 +316,15 @@ export const TableCssClassName = {
   DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
   DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
 
+  DRAG_COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
+  DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
+  DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
+
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
 
+  DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
+  DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,

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

@@ -1,6 +1,10 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 
-import type { Command } from '@atlaskit/editor-common/types';
+import type {
+  Command,
+  GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
 import {
   ArrowKeyNavigationType,
   DropdownMenu,
@@ -8,10 +12,19 @@ import {
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import {
+  findCellRectClosestToPos,
+  getSelectionRect,
+  isSelectionType,
+} from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import type { PluginConfig, TableDirection } from '../../types';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -28,6 +41,7 @@ type DragMenuProps = {
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
   pluginConfig?: PluginConfig;
+  getEditorContainerWidth: GetEditorContainerWidth;
 };
 
 const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
@@ -39,6 +53,19 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
       content: item.title,
       value: { name: item.id },
       isDisabled: item.disabled,
+      elemBefore: item.icon ? (
+        <div
+          style={{
+            marginRight: token('space.negative.075', '-6px'),
+            display: 'flex',
+          }}
+        >
+          <item.icon label={item.title} />
+        </div>
+      ) : undefined,
+      elemAfter: item.keymap ? (
+        <div css={shortcutStyle}>{item.keymap}</div>
+      ) : undefined,
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -54,10 +81,25 @@ export const DragMenu = ({
   mountPoint,
   boundariesElement,
   scrollableElement,
+  targetCellPosition,
+  getEditorContainerWidth,
 }: DragMenuProps) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
 
-  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  const { state, dispatch } = editorView;
+  const { selection } = state;
+  const selectionRect = isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : findCellRectClosestToPos(selection.$from);
+
+  const dragMenuConfig = getDragMenuConfig(
+    direction,
+    getEditorContainerWidth,
+    tableMap,
+    index,
+    targetCellPosition,
+    selectionRect,
+  );
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
 
@@ -66,11 +108,34 @@ export const DragMenu = ({
     toggleDragMenu(false)(state, dispatch);
   };
 
-  const onMenuItemActivated = ({ item }: { item: MenuItem }) => {
-    menuCallback[item.value.name]?.(editorView.state, editorView.dispatch);
+  const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {
+    menuCallback[item.value.name]?.(state, dispatch);
     closeMenu();
   };
 
+  const handleItemMouseEnter = ({ item }: { item: MenuItem }) => {
+    if (!selectionRect || !item.value.name?.startsWith('delete')) {
+      return;
+    }
+
+    (item.value.name === 'delete_column'
+      ? hoverColumns(getSelectedColumnIndexes(selectionRect), true)
+      : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
+  };
+
+  const handleItemMouseLeave = ({ item }: { item: any }) => {
+    if (
+      [
+        'sort_column_asc',
+        'sort_column_desc',
+        'delete_column',
+        'delete_row',
+      ].indexOf(item.value.name) > -1
+    ) {
+      clearHoverSelection()(state, dispatch);
+    }
+  };
+
   if (!menuItems) {
     return null;
   }
@@ -91,7 +156,9 @@ export const DragMenu = ({
       ]}
       isOpen={isOpen}
       onOpenChange={closeMenu}
-      onItemActivated={onMenuItemActivated}
+      onItemActivated={handleMenuItemActivated}
+      onMouseEnter={handleItemMouseEnter}
+      onMouseLeave={handleItemMouseLeave}
       fitWidth={dragMenuDropdownWidth}
       boundariesElement={boundariesElement}
     />

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -23,6 +24,7 @@ export interface Props {
   direction?: TableDirection;
   index?: number;
   targetCellPosition?: number;
+  getEditorContainerWidth: GetEditorContainerWidth;
 }
 
 const FloatingDragMenu = ({
@@ -36,6 +38,7 @@ const FloatingDragMenu = ({
   direction,
   index,
   targetCellPosition,
+  getEditorContainerWidth,
 }: Props) => {
   if (
     !isOpen ||
@@ -81,6 +84,8 @@ const FloatingDragMenu = ({
         tableNode={tableNode}
         direction={direction}
         index={index}
+        targetCellPosition={targetCellPosition}
+        getEditorContainerWidth={getEditorContainerWidth}
       />
     </Popup>
   );

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

@@ -81,6 +81,14 @@ export class FloatingInsertButton extends React.Component<
       dispatchAnalyticsEvent,
     } = this.props;
 
+    // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+    if (
+      isDragAndDropEnabled &&
+      (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)
+    ) {
+      return null;
+    }
+
     const type =
       typeof insertColumnButtonIndex !== 'undefined'
         ? 'column'

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

@@ -5,7 +5,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { token } from '@atlaskit/tokens';
 
 import {
   clearHoverSelection,
@@ -108,7 +107,7 @@ export const ColumnControls = ({
   return (
     <div className={ClassName.DRAG_COLUMN_CONTROLS}>
       <div
-        className={ClassName.COLUMN_CONTROLS_INNER}
+        className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
@@ -127,7 +126,8 @@ export const ColumnControls = ({
               contentEditable={false}
               key={index}
             >
-              {!hasHeaderColumn && index === 0 && (
+              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
+              {/* {!hasHeaderColumn && index === 0 && (
                 <div
                   style={{
                     left: '0px',
@@ -135,7 +135,7 @@ export const ColumnControls = ({
                   }}
                   className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 />
-              )}
+              )} */}
               <div
                 className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
                 style={columnParams.length - 1 === index ? { right: '0' } : {}}
@@ -149,12 +149,10 @@ export const ColumnControls = ({
             <div
               style={{
                 gridColumn: gridColumnPosition,
-                zIndex: 99,
                 display: 'flex',
-                width: '100%',
                 justifyContent: 'center',
                 alignItems: 'center',
-                marginTop: token('space.negative.025', '-2px'),
+                zIndex: 99,
               }}
               data-column-control-index={hoveredCell.colIndex}
               data-testid="table-floating-column-control"