@atlaskit/editor-plugin-table 5.3.0 → 5.3.1

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/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/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';
@@ -230,6 +231,8 @@ export declare enum TableDecorations {
     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: {
@@ -292,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;
@@ -354,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/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

@@ -14,3 +14,4 @@ export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotio
 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.3.0",
+  "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/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

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

@@ -1,22 +1,69 @@
-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 {
+  createColumnInsertLine,
+  createRowInsertLine,
+  updateDecorations,
+} from '../../utils';
 
 import { DragAndDropActionType } from './actions';
 import type { DropTargetType } from './consts';
-import { createCommand } from './plugin-factory';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 
 // TODO: This command is a placeholder example. Please replace this if required.
+export const getDecorations = (state: EditorState): DecorationSet => {
+  return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
+};
+
+export const updatePluginStateDecorations = (
+  state: EditorState,
+  decorations: Decoration[],
+  key: TableDecorations,
+): DecorationSet =>
+  updateDecorations(state.doc, getDecorations(state), decorations, key);
+
 export const setDropTarget = (
   type: DropTargetType,
   index: number,
   tr?: Transaction,
 ) =>
   createCommand(
-    {
-      type: DragAndDropActionType.SET_DROP_TARGET,
-      data: {
-        type,
-        index,
-      },
+    (state) => {
+      const { dropTargetType, dropTargetIndex } = getPluginState(state);
+      if (dropTargetType === type && dropTargetIndex === index) {
+        return false;
+      }
+
+      let decorationSet = DecorationSet.empty;
+      if (type === 'column') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createColumnInsertLine(index, state.selection),
+          TableDecorations.COLUMN_INSERT_LINE,
+        );
+      } else if (type === 'row') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createRowInsertLine(index, state.selection),
+          TableDecorations.ROW_INSERT_LINE,
+        );
+      }
+
+      return {
+        type: DragAndDropActionType.SET_DROP_TARGET,
+        data: {
+          decorationSet,
+          type,
+          index,
+        },
+      };
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),
@@ -26,6 +73,9 @@ export const clearDropTarget = (tr?: Transaction) =>
   createCommand(
     {
       type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty,
+      },
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),

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

@@ -5,10 +5,20 @@ import type {
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type { DraggableSourceData } from '../../types';
+import {
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+} from '../../utils/merged-cells';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import { getDraggableDataFromEvent } from './utils/monitor';
 
 export const createPlugin = (
   dispatch: Dispatch,
@@ -24,11 +34,74 @@ export const createPlugin = (
     })),
     key: pluginKey,
     view: (editorView: EditorView) => {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
-
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: monitorForElements({
+          canMonitor({ source }) {
+            const { type, localId, indexes } =
+              source.data as Partial<DraggableSourceData>;
+
+            // First; Perform any quick checks so we can abort early.
+            if (
+              !indexes ||
+              !localId ||
+              // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+              // of more then 1 item.
+              indexes.length !== 1 ||
+              !(type === 'table-row' || type === 'table-column')
+            ) {
+              return false;
+            }
+
+            const { tableNode } = getTablePluginState(editorView.state);
+            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+            // watch for changes
+            return localId === tableNode?.attrs.localId;
+          },
+          onDrag(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drag actions
+            if (!data) {
+              return;
+            }
+
+            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+            // insert location as to where the draggable will most likely be go. For example;
+            // const { sourceType, targetAdjustedIndex } = data;
+            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
+            // return editorView.dispatch(
+            //   highlight(targetAdjustedIndex)(editorView.state.tr),
+            // );
+          },
+          onDrop(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drop action
+            if (!data) {
+              return;
+            }
+
+            const { sourceType, sourceIndexes, targetAdjustedIndex } = data;
+
+            // If the drop target index contains merged cells then we should not allow the drop to occur.
+            const hasMergedCells =
+              sourceType === 'table-row'
+                ? hasMergedCellsInRow
+                : hasMergedCellsInColumn;
+            if (
+              hasMergedCells(targetAdjustedIndex)(editorView.state.selection)
+            ) {
+              return;
+            }
+
+            const move = sourceType === 'table-row' ? moveRow : moveColumn;
+
+            const [sourceIndex] = sourceIndexes;
+            return editorView.dispatch(
+              move(sourceIndex, targetAdjustedIndex)(editorView.state.tr),
+            );
+          },
+        }),
       };
     },
     props: {

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

@@ -11,12 +11,14 @@ export default (
     case DragAndDropActionType.SET_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index,
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
       };

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

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

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

@@ -0,0 +1,72 @@
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type {
+  DraggableData,
+  DraggableSourceData,
+  DraggableTargetData,
+} from '../../../types';
+
+export const getDraggableDataFromEvent = ({
+  location,
+  source,
+}: ElementEventBasePayload): DraggableData | undefined => {
+  const destination = location.current.dropTargets.at(0);
+  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+  // the current draggable.
+  if (!destination) {
+    return undefined;
+  }
+
+  // This is the draggable elements data
+  const {
+    indexes: sourceIndexes,
+    type: sourceType,
+    localId: sourceLocalId,
+  } = source.data as DraggableSourceData;
+
+  // This is the drop target's data
+  const {
+    targetIndex,
+    type: targetType,
+    localId: targetLocalId,
+  } = destination.data as DraggableTargetData;
+
+  // Some basic check to abort early with...
+  if (
+    !sourceIndexes ||
+    targetIndex < 0 ||
+    // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+    sourceType !== targetType ||
+    // abort if the draggable is coming from a different table that the target is on.
+    sourceLocalId !== targetLocalId
+  ) {
+    return undefined;
+  }
+
+  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
+  if (sourceIndexes.length > 1) {
+    return undefined;
+  }
+
+  const targetClosestEdge =
+    extractClosestEdge(destination.data) ??
+    ((targetType === 'table-row' ? 'top' : 'left') as Edge);
+  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+  // the new target index to be 1 index higher.
+  const targetOffset =
+    targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+
+  return {
+    sourceType,
+    sourceLocalId,
+    sourceIndexes,
+    targetType,
+    targetLocalId,
+    targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge,
+  };
+};

package/src/plugins/table/types.ts

@@ -14,6 +14,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';
 
@@ -245,6 +246,9 @@ export enum TableDecorations {
   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',
 }
 
@@ -329,8 +333,15 @@ export const TableCssClassName = {
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
 
+  WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
+
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
+
+  WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
 };
 
 export interface ToolbarMenuConfig {
@@ -383,8 +394,19 @@ export interface DraggableSourceData extends Record<string, unknown> {
   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/src/plugins/table/ui/common-styles.ts

@@ -63,6 +63,7 @@ import {
   hoveredDeleteButton,
   hoveredWarningCell,
   insertColumnButtonWrapper,
+  insertLine,
   InsertMarker,
   insertRowButtonWrapper,
   OverflowShadow,
@@ -291,6 +292,7 @@ export const tableStyles = (
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
     ${hoveredWarningCell};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
     ${rangeSelectionStyles};
 

package/src/plugins/table/ui/consts.ts

@@ -131,6 +131,7 @@ export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex =