@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

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

@@ -7,6 +7,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import type tablePlugin from './index';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -225,16 +226,22 @@ 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",
     COLUMN_RESIZING_HANDLE_LINE = "COLUMN_RESIZING_HANDLE_LINE",
+    COLUMN_INSERT_LINE = "COLUMN_INSERT_LINE",
+    ROW_INSERT_LINE = "ROW_INSERT_LINE",
     LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
 }
 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;
@@ -288,8 +295,13 @@ export declare const TableCssClassName: {
     TABLE_STICKY: string;
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
+    WITH_COLUMN_INSERT_LINE: string;
+    WITH_FIRST_COLUMN_INSERT_LINE: string;
+    WITH_LAST_COLUMN_INSERT_LINE: string;
     WITH_RESIZE_LINE: string;
     WITH_RESIZE_LINE_LAST_COLUMN: string;
+    WITH_ROW_INSERT_LINE: string;
+    WITH_LAST_ROW_INSERT_LINE: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;
@@ -350,8 +362,18 @@ export interface DraggableSourceData extends Record<string, unknown> {
     localId: string;
     indexes: number[];
 }
-export interface DraggableTargetData extends Record<string, unknown> {
+export interface DraggableTargetData extends Record<string | symbol, unknown> {
     type: DraggableType;
     localId: string;
     targetIndex: number;
 }
+export interface DraggableData {
+    sourceType: DraggableType;
+    sourceLocalId: string;
+    sourceIndexes: number[];
+    targetType: DraggableType;
+    targetLocalId: string;
+    targetIndex: number;
+    targetAdjustedIndex: number;
+    targetClosestEdge: Edge;
+}

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/consts.d.ts

@@ -34,6 +34,7 @@ export declare const columnControlsDecorationHeight = 25;
 export declare const columnControlsZIndex: number;
 export declare const columnControlsSelectedZIndex: number;
 export declare const columnResizeHandleZIndex: number;
+export declare const insertLineWidth = 3;
 export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;

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

@@ -8,8 +8,10 @@ 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;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -14,3 +14,5 @@ export declare const createColumnControlsDecoration: (selection: Selection) => D
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [Decoration[], Decoration[]];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
+export declare const createColumnInsertLine: (columnIndex: number, selection: Selection) => Decoration[];
+export declare const createRowInsertLine: (rowIndex: number, selection: Selection) => Decoration[];

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

@@ -1,5 +1,5 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated, } from './selection';
-export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnLineResize, } from './decoration';
+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, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
@@ -9,3 +9,4 @@ export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
+export { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';

package/dist/types/plugins/table/utils/merged-cells.d.ts

@@ -0,0 +1,3 @@
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
+export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;

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/actions.d.ts

@@ -1,3 +1,4 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { DropTargetType } from './consts';
 export interface DragAndDropAction<T, D> {
     type: T;
@@ -10,6 +11,9 @@ export declare const DragAndDropActionType: {
 export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.SET_DROP_TARGET, {
     type: DropTargetType;
     index: number;
+    decorationSet: DecorationSet;
+}>;
+export type DragAndDropClearDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.CLEAR_DROP_TARGET, {
+    decorationSet: DecorationSet;
 }>;
-export type DragAndDropClearDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.CLEAR_DROP_TARGET, undefined>;
 export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction;

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

@@ -1,4 +1,9 @@
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TableDecorations } from '../../types';
 import type { DropTargetType } from './consts';
+export declare const getDecorations: (state: EditorState) => DecorationSet;
+export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

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/pm-plugins/drag-and-drop/utils/index.d.ts

@@ -0,0 +1 @@
+export { getDraggableDataFromEvent } from './monitor';

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

@@ -0,0 +1,3 @@
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import type { DraggableData } from '../../../types';
+export declare const getDraggableDataFromEvent: ({ location, source, }: ElementEventBasePayload) => DraggableData | undefined;

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

@@ -7,6 +7,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import type tablePlugin from './index';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -225,16 +226,22 @@ 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",
     COLUMN_RESIZING_HANDLE_LINE = "COLUMN_RESIZING_HANDLE_LINE",
+    COLUMN_INSERT_LINE = "COLUMN_INSERT_LINE",
+    ROW_INSERT_LINE = "ROW_INSERT_LINE",
     LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
 }
 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;
@@ -288,8 +295,13 @@ export declare const TableCssClassName: {
     TABLE_STICKY: string;
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
+    WITH_COLUMN_INSERT_LINE: string;
+    WITH_FIRST_COLUMN_INSERT_LINE: string;
+    WITH_LAST_COLUMN_INSERT_LINE: string;
     WITH_RESIZE_LINE: string;
     WITH_RESIZE_LINE_LAST_COLUMN: string;
+    WITH_ROW_INSERT_LINE: string;
+    WITH_LAST_ROW_INSERT_LINE: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;
@@ -350,8 +362,18 @@ export interface DraggableSourceData extends Record<string, unknown> {
     localId: string;
     indexes: number[];
 }
-export interface DraggableTargetData extends Record<string, unknown> {
+export interface DraggableTargetData extends Record<string | symbol, unknown> {
     type: DraggableType;
     localId: string;
     targetIndex: number;
 }
+export interface DraggableData {
+    sourceType: DraggableType;
+    sourceLocalId: string;
+    sourceIndexes: number[];
+    targetType: DraggableType;
+    targetLocalId: string;
+    targetIndex: number;
+    targetAdjustedIndex: number;
+    targetClosestEdge: Edge;
+}

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/consts.d.ts

@@ -34,6 +34,7 @@ export declare const columnControlsDecorationHeight = 25;
 export declare const columnControlsZIndex: number;
 export declare const columnControlsSelectedZIndex: number;
 export declare const columnResizeHandleZIndex: number;
+export declare const insertLineWidth = 3;
 export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;

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

@@ -8,8 +8,10 @@ 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;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -17,3 +17,5 @@ export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTr
     Decoration[]
 ];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
+export declare const createColumnInsertLine: (columnIndex: number, selection: Selection) => Decoration[];
+export declare const createRowInsertLine: (rowIndex: number, selection: Selection) => Decoration[];

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

@@ -1,5 +1,5 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated, } from './selection';
-export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnLineResize, } from './decoration';
+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, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
@@ -9,3 +9,4 @@ export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
+export { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';

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

@@ -0,0 +1,3 @@
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
+export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.2",
+  "version": "5.3.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -106,6 +106,9 @@
     "platform.editor.custom-table-width": {
       "type": "boolean"
     },
+    "platform.editor.table.drag-and-drop": {
+      "type": "boolean"
+    },
     "platform.editor.table-sticky-scrollbar": {
       "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/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/actions.ts

@@ -1,3 +1,5 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropAction<T, D> {
@@ -15,12 +17,15 @@ export type DragAndDropSetDropTargetAction = DragAndDropAction<
   {
     type: DropTargetType;
     index: number;
+    decorationSet: DecorationSet;
   }
 >;
 
 export type DragAndDropClearDropTargetAction = DragAndDropAction<
   typeof DragAndDropActionType.CLEAR_DROP_TARGET,
-  undefined
+  {
+    decorationSet: DecorationSet;
+  }
 >;
 
 // NOTE: This should be a Union of all possible actions