@atlaskit/editor-plugin-table 5.2.1 → 5.3.0

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

@@ -6,7 +6,7 @@ import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig } from './types';
-interface TablePluginOptions {
+export interface TablePluginOptions {
     tableOptions: PluginConfig;
     tableResizingEnabled?: boolean;
     dragAndDropEnabled?: boolean;

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

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

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

@@ -0,0 +1,3 @@
+import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DragAndDropPluginState } from './types';
+export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, pluginState: DragAndDropPluginState) => DragAndDropPluginState;

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

@@ -1,2 +1 @@
-declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("./types").DragAndDropPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState)) => import("prosemirror-state").SafeStateField<import("./types").DragAndDropPluginState>, createCommand: <A = import("./actions").DragAndDropPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
-export { createPluginState, createCommand };
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("./types").DragAndDropPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState)) => import("prosemirror-state").SafeStateField<import("./types").DragAndDropPluginState>, createCommand: <A = import("./actions").DragAndDropPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState;

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

@@ -1,5 +1,7 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { DropTargetType } from './consts';
 export interface DragAndDropPluginState {
+    decorationSet: DecorationSet;
     dropTargetType: DropTargetType;
     dropTargetIndex: number;
 }

package/dist/types/plugins/table/toolbar.d.ts

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

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

@@ -225,6 +225,7 @@ export declare enum TableDecorations {
     TABLE_CONTROLS_HOVER = "TABLE_CONTROLS_HOVER",
     CELL_CONTROLS_HOVER = "CELL_CONTROLS_HOVER",
     COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
+    COLUMN_DROP_TARGET_DECORATIONS = "COLUMN_DROP_TARGET_DECORATIONS",
     COLUMN_SELECTED = "COLUMN_SELECTED",
     COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
     COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
@@ -235,6 +236,9 @@ 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;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    tableRef: HTMLTableElement;
+    stickyTop?: number;
+    tableHeight?: number;
+    localId?: string;
+}
+export declare const ColumnDropTargets: React.FC<Props>;
+export default ColumnDropTargets;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+export interface Props {
+    editorView: EditorView;
+    getEditorFeatureFlags: GetEditorFeatureFlags;
+    selection?: Selection;
+    tableRef?: HTMLTableElement;
+    tableActive?: boolean;
+    hasHeaderRow?: boolean;
+    headerRowHeight?: number;
+    hoveredRows?: number[];
+    ordering?: TableColumnOrdering;
+    stickyHeader?: RowStickyState;
+}
+export declare const TableFloatingColumnControls: React.FC<Props>;
+export default TableFloatingColumnControls;

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

@@ -8,6 +8,7 @@ export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emo
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
 export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -6,3 +6,4 @@ export declare enum TableSelectionDirection {
 }
 export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

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

@@ -6,7 +6,7 @@ import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig } from './types';
-interface TablePluginOptions {
+export interface TablePluginOptions {
     tableOptions: PluginConfig;
     tableResizingEnabled?: boolean;
     dragAndDropEnabled?: boolean;

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

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

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

@@ -0,0 +1,3 @@
+import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DragAndDropPluginState } from './types';
+export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, pluginState: DragAndDropPluginState) => DragAndDropPluginState;

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

@@ -1,2 +1 @@
-declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("./types").DragAndDropPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState)) => import("prosemirror-state").SafeStateField<import("./types").DragAndDropPluginState>, createCommand: <A = import("./actions").DragAndDropPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
-export { createPluginState, createCommand };
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("./types").DragAndDropPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState)) => import("prosemirror-state").SafeStateField<import("./types").DragAndDropPluginState>, createCommand: <A = import("./actions").DragAndDropPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").DragAndDropPluginState;

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

@@ -1,5 +1,7 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { DropTargetType } from './consts';
 export interface DragAndDropPluginState {
+    decorationSet: DecorationSet;
     dropTargetType: DropTargetType;
     dropTargetIndex: number;
 }

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

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

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

@@ -225,6 +225,7 @@ export declare enum TableDecorations {
     TABLE_CONTROLS_HOVER = "TABLE_CONTROLS_HOVER",
     CELL_CONTROLS_HOVER = "CELL_CONTROLS_HOVER",
     COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
+    COLUMN_DROP_TARGET_DECORATIONS = "COLUMN_DROP_TARGET_DECORATIONS",
     COLUMN_SELECTED = "COLUMN_SELECTED",
     COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
     COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
@@ -235,6 +236,9 @@ 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;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    tableRef: HTMLTableElement;
+    stickyTop?: number;
+    tableHeight?: number;
+    localId?: string;
+}
+export declare const ColumnDropTargets: React.FC<Props>;
+export default ColumnDropTargets;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+export interface Props {
+    editorView: EditorView;
+    getEditorFeatureFlags: GetEditorFeatureFlags;
+    selection?: Selection;
+    tableRef?: HTMLTableElement;
+    tableActive?: boolean;
+    hasHeaderRow?: boolean;
+    headerRowHeight?: number;
+    hoveredRows?: number[];
+    ordering?: TableColumnOrdering;
+    stickyHeader?: RowStickyState;
+}
+export declare const TableFloatingColumnControls: React.FC<Props>;
+export default TableFloatingColumnControls;

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

@@ -8,6 +8,7 @@ export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emo
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
 export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "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.10.0",
+    "@atlaskit/editor-common": "^76.11.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -127,6 +127,9 @@
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },
+    "platform.editor.table.shift-arrowup-fix": {
+      "type": "boolean"
+    },
     "platform.editor.table.update-table-resizer-styles": {
       "type": "boolean"
     },

package/src/__tests__/unit/ui/TableFloatingColumnControls.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+
+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';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+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,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import type { TablePluginState } from '../../../plugins/table/types';
+import TableFloatingColumnControls from '../../../plugins/table/ui/TableFloatingColumnControls';
+
+describe('TableFloatingColumnControls', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const fakeGetEditorFeatureFlags = () => ({});
+  const editor = (
+    doc: DocBuilder,
+    options?: {
+      dragAndDropEnabled?: boolean;
+    },
+  ) => {
+    const preset = new Preset<LightEditorPlugin>()
+      .add([featureFlagsPlugin, {}])
+      .add([analyticsPlugin, {}])
+      .add(contentInsertionPlugin)
+      .add(widthPlugin)
+      .add(guidelinePlugin)
+      .add(selectionPlugin)
+      .add([tablePlugin, { ...options, tableOptions: {} }]);
+    return createEditor<TablePluginState, PluginKey, typeof preset>({
+      doc,
+      preset,
+      pluginKey: pluginKey,
+    });
+  };
+
+  it('should not render floating column controls when tableRef undefined and drag and drop is not enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+    );
+    const { container } = render(
+      <TableFloatingColumnControls
+        editorView={editorView}
+        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+      />,
+    );
+    expect(container.innerHTML).toEqual('');
+  });
+
+  it('should not render floating column controls when tableRef undefined and drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const { container } = render(
+      <TableFloatingColumnControls
+        editorView={editorView}
+        getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+      />,
+    );
+    expect(container.innerHTML).toEqual('');
+  });
+
+  it('should render a drop target per column', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty, tdEmpty, tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const ref = editorView.dom.querySelector('table') || undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <TableFloatingColumnControls
+          tableRef={ref}
+          tableActive={true}
+          editorView={editorView}
+          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+        />
+      </IntlProvider>,
+    );
+
+    const dropTargets = screen.getAllByTestId(
+      'table-floating-column-controls-drop-target',
+    );
+    expect(dropTargets).toHaveLength(5);
+  });
+
+  it('should render a drop target per column regardless of row count', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty), tr(tdEmpty), tr(tdEmpty))),
+      {
+        dragAndDropEnabled: true,
+      },
+    );
+    const ref = editorView.dom.querySelector('table') || undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <TableFloatingColumnControls
+          tableRef={ref}
+          tableActive={true}
+          editorView={editorView}
+          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+        />
+      </IntlProvider>,
+    );
+
+    const dropTargets = screen.getAllByTestId(
+      'table-floating-column-controls-drop-target',
+    );
+    expect(dropTargets).toHaveLength(1);
+  });
+});

package/src/plugins/table/commands/selection.ts

@@ -20,6 +20,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import type tablePlugin from '../index';
+import { getClosestSelectionRect } from '../toolbar';
 
 export enum TableSelectionDirection {
   TopToBottom = 'TopToBottom',
@@ -485,3 +486,26 @@ const isSelectionAtStartOfTable = ($pos: ResolvedPos, selection: Selection) =>
 
 const isSelectionAtEndOfTable = ($pos: ResolvedPos, selection: Selection) =>
   isSelectionAtEndOfNode($pos, findTable(selection));
+
+export const shiftArrowUpFromTable =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const selectionRect = getClosestSelectionRect(state);
+    const index = selectionRect?.top;
+    if (table && index === 0) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    return false;
+  };

package/src/plugins/table/index.tsx

@@ -78,7 +78,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
-interface TablePluginOptions {
+export interface TablePluginOptions {
   tableOptions: PluginConfig;
   // experimental custom table resizing experience, set inside editor-core behind a feature flag
   // will eventually replace breakoutEnabled

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

@@ -58,6 +58,7 @@ import {
   tableOverflowShadowWidth,
   tableOverflowShadowWidthWide,
 } from '../ui/consts';
+import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
@@ -91,6 +92,7 @@ export interface ComponentProps {
   isHeaderRowEnabled: boolean;
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
+  isDragAndDropEnabled?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
@@ -396,6 +398,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       options,
       getPos,
       pluginInjectionApi,
+      isDragAndDropEnabled,
     } = this.props;
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -431,6 +434,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       </div>
     );
 
+    const colControls = (
+      <div className={ClassName.COLUMN_CONTROLS_WRAPPER}>
+        <TableFloatingColumnControls
+          editorView={view}
+          tableRef={tableRef}
+          tableActive={tableActive}
+          hoveredRows={hoveredRows}
+          ordering={ordering}
+          hasHeaderRow={hasHeaderRow}
+          // pass `selection` and `tableHeight` to control re-render
+          selection={view.state.selection}
+          headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
+          stickyHeader={this.state.stickyHeader}
+          getEditorFeatureFlags={this.props.getEditorFeatureFlags}
+        />
+      </div>
+    );
+
     const shadowPadding =
       allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
 
@@ -482,7 +503,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             data-testid="sticky-scrollbar-sentinel-top"
           />
         )}
+
         {allowControls && rowControls}
+
+        {isDragAndDropEnabled && allowControls && colControls}
+
         <div
           style={shadowStyle(showBeforeShadow)}
           className={ClassName.TABLE_LEFT_SHADOW}

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

@@ -248,6 +248,7 @@ export default class TableView extends ReactNodeView<Props> {
               allowControls={pluginState!.pluginConfig.allowControls!}
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
+              isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}

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

@@ -0,0 +1,35 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+import type {
+  ReadonlyTransaction,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import type { DragAndDropPluginState } from './types';
+
+type BuilderDragAndDropPluginState = (props: {
+  tr: Transaction | ReadonlyTransaction;
+  table?: ContentNodeWithPos;
+}) => (pluginState: DragAndDropPluginState) => DragAndDropPluginState;
+
+const buildPluginState =
+  (
+    builders: Array<BuilderDragAndDropPluginState>,
+  ): BuilderDragAndDropPluginState =>
+  (props) =>
+  (pluginState) => {
+    return builders.reduce(
+      (_pluginState, transform) => transform(props)(_pluginState),
+      pluginState,
+    );
+  };
+
+export const handleDocOrSelectionChanged = (
+  tr: Transaction | ReadonlyTransaction,
+  pluginState: DragAndDropPluginState,
+): DragAndDropPluginState =>
+  buildPluginState([])({
+    tr,
+    table: findTable(tr.selection),
+  })(pluginState);

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

@@ -1,8 +1,33 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 
+import { pluginKey as tablePluginKey } from '../plugin-key';
+
+import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
 
-const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer);
+export const { createPluginState, createCommand, getPluginState } =
+  pluginFactory(pluginKey, reducer, {
+    mapping: (tr, pluginState) => {
+      if (tr.docChanged) {
+        let decorationSet = pluginState.decorationSet;
+
+        const meta = tr.getMeta(tablePluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          decorationSet = meta.data.decorationSet;
+        }
+
+        if (decorationSet) {
+          decorationSet = decorationSet.map(tr.mapping, tr.doc);
+        }
 
-export { createPluginState, createCommand };
+        return {
+          ...pluginState,
+          ...{ decorationSet },
+        };
+      }
+      return pluginState;
+    },
+    onDocChanged: handleDocOrSelectionChanged,
+    onSelectionChanged: handleDocOrSelectionChanged,
+  });

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

@@ -4,9 +4,10 @@ import type {
 } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import { DropTargetType } from './consts';
-import { createPluginState } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
 export const createPlugin = (
@@ -14,19 +15,27 @@ export const createPlugin = (
   eventDispatcher: EventDispatcher,
 ) => {
   return new SafePlugin({
-    state: createPluginState(dispatch, {
+    state: createPluginState(dispatch, (state) => ({
+      decorationSet: DecorationSet.empty,
       // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
       // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
-    }),
+    })),
     key: pluginKey,
     view: (editorView: EditorView) => {
       // TODO: Add Pragmatic DnD monitor when the view is constructed.
+
       return {
         // TODO: Cleanup monitor instance
         // destroy: cleanup,
       };
     },
+    props: {
+      decorations: (state) => {
+        const { decorationSet } = getPluginState(state);
+        return decorationSet;
+      },
+    },
   });
 };

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

@@ -1,6 +1,9 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
+  decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
 }