@atlaskit/editor-plugin-table 5.3.12 → 5.3.13

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

@@ -1,7 +1,11 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 export interface DragAndDropPluginState {
     decorationSet: DecorationSet;
     dropTargetType: DropTargetType;
     dropTargetIndex: number;
+    isDragMenuOpen: boolean;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex: number;
 }

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

@@ -373,6 +373,7 @@ export type InvalidNodeAttr = {
     spanValue: number;
     tableLocalId: string;
 };
+export type TableDirection = 'row' | 'column';
 /**
  * Drag and Drop interfaces
  */

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

@@ -1,15 +1,17 @@
 import type { MouseEventHandler } from 'react';
+import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     previewWidth?: number;
     previewHeight?: number;
-    direction?: 'column' | 'row';
+    direction?: TableDirection;
     appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import type { TableDirection } from '../../types';
 export declare const DragPreview: ({ direction, width, height, }: {
-    direction: 'column' | 'row';
+    direction: TableDirection;
     width: number;
     height: number;
 }) => JSX.Element;

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

@@ -3,6 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { TableDirection } from '../../types';
 import type { CellSelectionType } from './types';
 export interface Props {
     editorView: EditorView;
@@ -23,7 +24,7 @@ export interface State {
     position?: string;
     scrollLeft: number;
 }
-export declare function getSelectionType(selection: Selection): 'column' | 'row' | undefined;
+export declare function getSelectionType(selection: Selection): TableDirection | undefined;
 declare class FloatingDeleteButton extends Component<Props, State> {
     static displayName: string;
     wrapper: HTMLElement | null;

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

@@ -1 +1,2 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+export type CellSelectionType = TableDirection | undefined;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginConfig, TableDirection } from '../../types';
+type DragMenuProps = {
+    direction?: TableDirection;
+    index?: number;
+    tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
+    editorView: EditorView;
+    isOpen?: boolean;
+    targetCellPosition?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    pluginConfig?: PluginConfig;
+};
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export {};

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

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

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

@@ -1,8 +1,9 @@
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    type: 'row' | 'column';
+    direction: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;

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

@@ -1,3 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
-declare function getPopupOptions(type: 'column' | 'row', index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+import type { TableDirection } from '../../types';
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     editorView: EditorView;
     getEditorContainerWidth: GetEditorContainerWidth;

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;

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

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -8,6 +9,7 @@ export interface Props {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     isInDanger?: boolean;
     isResizing?: boolean;
@@ -21,6 +23,7 @@ export interface Props {
     hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
+    insertRowButtonIndex?: number;
 }
 interface State {
     tableHeight: number;

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

@@ -50,3 +50,4 @@ export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export declare const dragMenuDropdownWidth = 240;

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

@@ -0,0 +1,7 @@
+import type { Command, DropdownOptionT } from '@atlaskit/editor-common/types';
+import type { TableMap } from '@atlaskit/editor-tables/table-map';
+import type { TableDirection } from '../types';
+export interface DragMenuConfig extends DropdownOptionT<Command> {
+    id: string;
+}
+export declare const getDragMenuConfig: (direction: TableDirection, tableMap?: TableMap, index?: number) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.12",
+  "version": "5.3.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
-    "@atlaskit/primitives": "^1.6.7",
+    "@atlaskit/primitives": "^1.7.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",

package/src/plugins/table/index.tsx

@@ -75,6 +75,7 @@ import type { ColumnResizingPluginState, PluginConfig } from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
+import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
@@ -363,6 +364,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               stickyHeadersState,
               tablePluginState,
               tableWidthPluginState,
+              dragAndDropState,
             }) => {
               const { state } = editorView;
               const isColumnResizing = resizingPluginState?.dragging;
@@ -382,6 +384,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 isHeaderColumnEnabled,
                 isHeaderRowEnabled,
                 tableWrapperTarget,
+                isDragAndDropEnabled,
               } = tablePluginState!;
 
               const { allowControls } = pluginConfig;
@@ -467,6 +470,19 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       }
                     />
                   )}
+                  {isDragAndDropEnabled && (
+                    <FloatingDragMenu
+                      editorView={editorView}
+                      mountPoint={popupsMountPoint}
+                      boundariesElement={popupsBoundariesElement}
+                      tableRef={tableRef as HTMLTableElement}
+                      tableNode={tableNode}
+                      targetCellPosition={targetCellPosition}
+                      direction={dragAndDropState?.dragMenuDirection}
+                      index={dragAndDropState?.dragMenuIndex}
+                      isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
+                    />
+                  )}
                   {allowControls && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}

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

@@ -416,6 +416,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         <TableFloatingControls
           editorView={view}
           tableRef={tableRef}
+          tableNode={node}
           tableActive={tableActive}
           hoveredRows={hoveredRows}
           hoveredCell={hoveredCell}
@@ -423,7 +424,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           isResizing={isResizing}
           isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
           isHeaderRowEnabled={isHeaderRowEnabled}
-          isDragAndDropEnabled={options?.isDragAndDropEnabled}
+          isDragAndDropEnabled={isDragAndDropEnabled}
           ordering={ordering}
           isHeaderColumnEnabled={isHeaderColumnEnabled}
           hasHeaderRow={hasHeaderRow}

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

@@ -1,5 +1,7 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
+import type { TableDirection } from '../../types';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropAction<T, D> {
@@ -10,6 +12,7 @@ export interface DragAndDropAction<T, D> {
 export const DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
   CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
 } as const;
 
 export type DragAndDropSetDropTargetAction = DragAndDropAction<
@@ -28,7 +31,17 @@ export type DragAndDropClearDropTargetAction = DragAndDropAction<
   }
 >;
 
+export type DragAndDropToggleDragMenuAction = DragAndDropAction<
+  typeof DragAndDropActionType.TOGGLE_DRAG_MENU,
+  {
+    isDragMenuOpen: boolean;
+    direction: TableDirection;
+    index: number;
+  }
+>;
+
 // NOTE: This should be a Union of all possible actions
 export type DragAndDropPluginAction =
   | DragAndDropSetDropTargetAction
-  | DragAndDropClearDropTargetAction;
+  | DragAndDropClearDropTargetAction
+  | DragAndDropToggleDragMenuAction;

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

@@ -11,7 +11,7 @@ import {
   selectRow,
 } from '@atlaskit/editor-tables/utils';
 
-import type { DraggableType } from '../../types';
+import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
 import {
   createColumnInsertLine,
@@ -121,3 +121,34 @@ export const moveSource = (
       return select(targetIndex)(newTr);
     },
   );
+
+export const toggleDragMenu = (
+  isDragMenuOpen: boolean | undefined,
+  direction?: TableDirection,
+  index?: number,
+) =>
+  createCommand(
+    (state) => {
+      let {
+        isDragMenuOpen: previousOpenState,
+        dragMenuDirection,
+        dragMenuIndex,
+      } = getPluginState(state);
+      if (previousOpenState === isDragMenuOpen) {
+        return false;
+      }
+
+      return {
+        type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+        data: {
+          isDragMenuOpen:
+            isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
+          direction: direction ?? dragMenuDirection,
+          index: index ?? dragMenuIndex,
+        },
+      };
+    },
+    (tr: Transaction) => {
+      return tr.setMeta('addToHistory', false);
+    },
+  );

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

@@ -5,6 +5,7 @@ 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 { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
@@ -14,6 +15,7 @@ import {
 } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
+import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -27,12 +29,49 @@ export const createPlugin = (
   return new SafePlugin({
     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,
+      isDragMenuOpen: false,
+      dragMenuIndex: 0,
     })),
     key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      const { targetCellPosition: oldTargetCellPosition } =
+        getTablePluginState(oldState);
+      const { targetCellPosition: newTargetCellPosition } =
+        getTablePluginState(newState);
+      const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          const tr = newState.tr;
+          const action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined,
+            },
+          };
+
+          if (newTargetCellPosition !== undefined) {
+            const cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            if (
+              cells &&
+              cells.length &&
+              cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)
+            ) {
+              return tr.setMeta(pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(pluginKey, action);
+          }
+        }
+      }
+    },
     view: (editorView: EditorView) => {
       return {
         destroy: monitorForElements({

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

@@ -22,6 +22,13 @@ export default (
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
       };
+    case DragAndDropActionType.TOGGLE_DRAG_MENU:
+      return {
+        ...pluginState,
+        isDragMenuOpen: action.data.isDragMenuOpen,
+        dragMenuDirection: action.data.direction,
+        dragMenuIndex: action.data.index,
+      };
     default:
       return pluginState;
   }

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

@@ -1,9 +1,14 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
+import type { TableDirection } from '../../types';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
   decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
+  isDragMenuOpen: boolean;
+  dragMenuDirection?: TableDirection;
+  dragMenuIndex: number;
 }

package/src/plugins/table/types.ts

@@ -405,6 +405,8 @@ export type InvalidNodeAttr = {
   tableLocalId: string;
 };
 
+export type TableDirection = 'row' | 'column';
+
 /**
  * Drag and Drop interfaces
  */

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

@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
@@ -18,11 +19,12 @@ type DragHandleProps = {
   indexes: number[];
   previewWidth?: number;
   previewHeight?: number;
-  direction?: 'column' | 'row';
+  direction?: TableDirection;
   appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
+  onMouseUp?: MouseEventHandler;
 };
 
 export const DragHandle = ({
@@ -34,6 +36,7 @@ export const DragHandle = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
+  onMouseUp,
   onClick,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
@@ -85,6 +88,7 @@ export const DragHandle = ({
       data-testid="table-floating-column-controls-drag-handle"
       onMouseOver={onMouseOver}
       onMouseOut={onMouseOut}
+      onMouseUp={onMouseUp}
       onClick={onClick}
     >
       <DragHandleIcon />

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, xcss } from '@atlaskit/primitives';
 
+import type { TableDirection } from '../../types';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 
 const boxStyles = xcss({
@@ -17,7 +18,7 @@ export const DragPreview = ({
   width,
   height,
 }: {
-  direction: 'column' | 'row';
+  direction: TableDirection;
   width: number;
   height: number;
 }) => {

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

@@ -23,6 +23,7 @@ import {
 } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   getColumnDeleteButtonParams,
@@ -60,7 +61,7 @@ export interface State {
 
 export function getSelectionType(
   selection: Selection,
-): 'column' | 'row' | undefined {
+): TableDirection | undefined {
   if (!isTableSelected(selection) && selection instanceof CellSelection) {
     if (selection.isRowSelection()) {
       return 'row';

package/src/plugins/table/ui/FloatingDeleteButton/types.ts

@@ -1 +1,3 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+
+export type CellSelectionType = TableDirection | undefined;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import type { Command } from '@atlaskit/editor-common/types';
+import {
+  ArrowKeyNavigationType,
+  DropdownMenu,
+} from '@atlaskit/editor-common/ui-menu';
+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 { TableMap } from '@atlaskit/editor-tables/table-map';
+
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import type { PluginConfig, TableDirection } from '../../types';
+import type { DragMenuConfig } from '../../utils/drag-menu';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+
+type DragMenuProps = {
+  direction?: TableDirection;
+  index?: number;
+  tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
+  editorView: EditorView;
+  isOpen?: boolean;
+  targetCellPosition?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  pluginConfig?: PluginConfig;
+};
+
+const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
+  let menuItems: MenuItem[] = [];
+  let menuCallback: { [key: string]: Command } = {};
+  dragMenuConfig.forEach((item) => {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: { name: item.id },
+      isDisabled: item.disabled,
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return { menuItems, menuCallback };
+};
+
+export const DragMenu = ({
+  direction = 'row',
+  index,
+  isOpen,
+  editorView,
+  tableNode,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+}: DragMenuProps) => {
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+
+  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+
+  const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
+
+  const closeMenu = () => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(false)(state, dispatch);
+  };
+
+  const onMenuItemActivated = ({ item }: { item: MenuItem }) => {
+    menuCallback[item.value.name]?.(editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+
+  if (!menuItems) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu
+      mountTo={mountPoint}
+      //This needs be removed when the a11y is completely handled
+      //Disabling key navigation now as it works only partially
+      arrowKeyNavigationProviderOptions={{
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true,
+      }}
+      items={[
+        {
+          items: menuItems,
+        },
+      ]}
+      isOpen={isOpen}
+      onOpenChange={closeMenu}
+      onItemActivated={onMenuItemActivated}
+      fitWidth={dragMenuDropdownWidth}
+      boundariesElement={boundariesElement}
+    />
+  );
+};