@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

package/src/plugins/table/ui/ui-styles.ts

@@ -187,6 +187,7 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
     bottom: -5px;
     left: 3px;
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
     ${Button(`
     background: ${token('elevation.surface.overlay', 'white')};
@@ -198,6 +199,7 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
     border-radius: 50%;
   `)}
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
     background: ${token('color.background.brand.bold', B300)};
     border: 1px solid ${token('color.background.brand.bold', B300)};
@@ -206,6 +208,46 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
   }
 `;
 
+export const dragCornerControlButton = (props: ThemeProps) => css`
+  .${ClassName.DRAG_CORNER_BUTTON} {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: ${token('space.negative.075', '-6px')};
+    left: ${token('space.075', '6px')};
+    background-color: ${token('elevation.surface', '#FFF')};
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    outline: none;
+    z-index: ${akEditorUnitZIndex * 99};
+
+    &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+      background-color: ${token('color.border.selected', '#0C66E4')};
+      border-color: ${token('color.border.selected', '#0C66E4')};
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+        border-color: ${token('color.border.selected', '#0C66E4')};
+      }
+    }
+  }
+
+  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+    border: 1px solid
+      ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+    border-radius: 50%;
+    width: 6px;
+    height: 6px;
+  }
+`;
+
 export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -403,12 +445,12 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
 
 export const floatingColumnControls = (props: ThemeProps) => {
   return css`
-    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+    .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
       position: absolute;
       top: 0;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: flex;
         flex-direction: row;
       }
@@ -417,7 +459,7 @@ export const floatingColumnControls = (props: ThemeProps) => {
     .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: grid;
         justify-items: center;
       }

package/src/plugins/table/utils/dom.ts

@@ -52,7 +52,7 @@ export const isTableContainerOrWrapper = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
 /** drag-and-drop classes */
-export const isRowDragControlsButton = (node: HTMLElement | null) =>
+export const isDragRowControlsButton = (node: HTMLElement | null) =>
   containsClassName(node, ClassName.DRAG_ROW_CONTROLS) ||
   closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
 
@@ -62,6 +62,10 @@ export const isDragRowFloatingInsertDot = (node: HTMLElement | null) =>
 export const isDragColumnFloatingInsertDot = (node: HTMLElement | null) =>
   containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
 
+export const isDragCornerButton = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_CORNER_BUTTON) ||
+  containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:
@@ -120,15 +124,23 @@ export const getMousePositionHorizontalRelativeByElement = (
   mouseEvent: MouseEvent,
   elementContentRects?: ElementContentRects,
   gapInPixels?: number,
+  isDragAndDropEnabled?: boolean,
 ): 'left' | 'right' | null => {
   const element = mouseEvent.target;
 
   if (element instanceof HTMLElement) {
     let width, x;
-    const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
 
-    const id = closestCell?.id ?? '';
-    width = elementContentRects?.[id]?.width ?? 0;
+    if (isDragAndDropEnabled) {
+      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
+      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
+      width = element.clientWidth;
+    } else {
+      const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
+
+      const id = closestCell?.id ?? '';
+      width = elementContentRects?.[id]?.width ?? 0;
+    }
     x = mouseEvent.offsetX;
 
     if (width <= 0) {

package/src/plugins/table/utils/drag-menu.ts

@@ -1,13 +1,47 @@
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  backspace,
+  tooltip,
+} from '@atlaskit/editor-common/keymaps';
 import type {
   Command,
   CommandDispatch,
   DropdownOptionT,
+  GetEditorContainerWidth,
+  IconProps,
 } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { TableMap } from '@atlaskit/editor-tables/table-map';
+import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
+import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
+import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
 
+import {
+  clearMultipleCells,
+  insertColumn,
+  insertRow,
+  sortByColumn,
+} from '../commands';
+import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { deleteRows } from '../transforms';
 import type { TableDirection } from '../types';
+import {
+  AddColLeftIcon,
+  AddColRightIcon,
+  AddRowAboveIcon,
+  AddRowBelowIcon,
+} from '../ui/icons';
 
 const canDecrease = (index?: number, min: number = 0) =>
   index !== undefined && index > min;
@@ -16,39 +50,148 @@ const canIncrease = (index?: number, max: number = 0) =>
 
 export interface DragMenuConfig extends DropdownOptionT<Command> {
   id: string;
+  icon?: React.ComponentType<IconProps>;
+  keymap?: string;
 }
 
 export const getDragMenuConfig = (
   direction: TableDirection,
+  getEditorContainerWidth: GetEditorContainerWidth,
   tableMap?: TableMap,
   index?: number,
+  targetCellPosition?: number,
+  selectionRect?: Rect,
 ): DragMenuConfig[] => {
+  const addOptions =
+    direction === 'row'
+      ? [
+          {
+            label: 'above',
+            offset: 0,
+            icon: AddRowAboveIcon,
+            keymap: addRowBefore,
+          },
+          {
+            label: 'below',
+            offset: 1,
+            icon: AddRowBelowIcon,
+            keymap: addRowAfter,
+          },
+        ]
+      : [
+          {
+            label: 'left',
+            offset: 0,
+            icon: AddColLeftIcon,
+            keymap: addColumnBefore,
+          },
+          {
+            label: 'right',
+            offset: 1,
+            icon: AddColRightIcon,
+            keymap: addColumnAfter,
+          },
+        ];
   const moveOptions =
     direction === 'row'
       ? [
-          { label: 'up', offset: -1, canMove: canDecrease },
+          { label: 'up', offset: -1, canMove: canDecrease, icon: ArrowUpIcon },
           {
             label: 'down',
             offset: 1,
             canMove: (index?: number) =>
               canIncrease(index, (tableMap?.height ?? 0) - 1),
+            icon: ArrowDownIcon,
           },
         ]
       : [
-          { label: 'left', offset: -1, canMove: canDecrease },
+          {
+            label: 'left',
+            offset: -1,
+            canMove: canDecrease,
+            icon: ArrowLeftIcon,
+          },
           {
             label: 'right',
             offset: 1,
             canMove: (index?: number) =>
               canIncrease(index, (tableMap?.width ?? 0) - 1),
+            icon: ArrowRightIcon,
           },
         ];
 
+  const sortOptions =
+    direction === 'column'
+      ? [
+          {
+            label: 'increasing',
+            order: SortOrder.ASC,
+            icon: HipchatChevronDoubleUpIcon,
+          },
+          {
+            label: 'decreasing',
+            order: SortOrder.DESC,
+            icon: HipchatChevronDoubleDownIcon,
+          },
+        ]
+      : [];
   return [
-    ...moveOptions.map(({ label, offset, canMove }) => ({
+    ...addOptions.map(({ label, offset, icon, keymap }) => ({
+      id: `add_${direction}_${label}`,
+      title: `Add ${direction} ${label}`,
+      icon,
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (direction === 'row') {
+          insertRow(index! + offset, true)(state, dispatch);
+        } else {
+          insertColumn(getEditorContainerWidth)(index! + offset)(
+            state,
+            dispatch,
+          );
+        }
+        return true;
+      },
+      keymap: keymap && tooltip(keymap),
+    })),
+    direction === 'column'
+      ? {
+          id: 'distribute_columns',
+          title: 'Distribute columns',
+          disabled: true,
+          onClick: () => {
+            return false;
+          },
+          icon: EditorLayoutThreeEqualIcon,
+        }
+      : undefined,
+    {
+      id: 'clear_cells',
+      title: 'Clear cells',
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        clearMultipleCells(targetCellPosition)(state, dispatch);
+        return true;
+      },
+      icon: CrossCircleIcon,
+      keymap: tooltip(backspace),
+    },
+    {
+      id: `delete_${direction}`,
+      title: `Delete ${direction}`,
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (direction === 'row') {
+          dispatch?.(deleteRows(selectionRect!, false)(state.tr));
+        } else {
+          deleteColumnsCommand(selectionRect!)(state, dispatch);
+        }
+        return true;
+      },
+      icon: RemoveIcon,
+    },
+    ...moveOptions.map(({ label, offset, canMove, icon }) => ({
       id: `move_${direction}_${label}`,
       title: `Move ${direction} ${label}`,
       disabled: !canMove(index),
+      icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {
           moveSource(
@@ -61,5 +204,15 @@ export const getDragMenuConfig = (
         return false;
       },
     })),
-  ];
+
+    ...sortOptions.map(({ label, order, icon }) => ({
+      id: `sort_column_${order}`,
+      title: `Sort ${label}`,
+      icon,
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        sortByColumn(index!, order)(state, dispatch);
+        return true;
+      },
+    })),
+  ].filter(Boolean) as DragMenuConfig[];
 };

package/src/plugins/table/utils/index.ts

@@ -46,10 +46,11 @@ export {
   isColumnControlsDecorations,
   isTableControlsButton,
   isTableContainerOrWrapper,
-  isRowDragControlsButton,
   isRowControlsButton,
+  isDragRowControlsButton,
   isDragColumnFloatingInsertDot,
   isDragRowFloatingInsertDot,
+  isDragCornerButton,
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,