@atlaskit/editor-plugin-table 7.0.3 → 7.1.1

package/src/ui/FloatingContextualMenu/index.tsx

@@ -23,6 +23,7 @@ import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { PluginConfig } from '../../types';
 import {
   contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
   contextualMenuTriggerSize,
 } from '../consts';
 
@@ -53,7 +54,9 @@ const FloatingContextualMenu = ({
   getEditorContainerWidth,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-  const { targetCellPosition } = getPluginState(editorView.state);
+  const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
+    editorView.state,
+  );
   if (
     !isOpen ||
     !targetCellPosition ||
@@ -89,7 +92,11 @@ const FloatingContextualMenu = ({
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
       fitHeight={188}
-      fitWidth={contextualMenuDropdownWidth}
+      fitWidth={
+        isDragAndDropEnabled
+          ? contextualMenuDropdownWidthDnD
+          : contextualMenuDropdownWidth
+      }
       // z-index value below is to ensure that this menu is above other floating menu
       // in table, but below floating dialogs like typeaheads, pickers, etc.
       zIndex={
@@ -101,7 +108,7 @@ const FloatingContextualMenu = ({
       offset={[-7, 0]}
       stick={true}
     >
-      <div css={tablePopupStyles}>
+      <div css={tablePopupStyles(isDragAndDropEnabled)}>
         <ContextualMenu
           editorView={editorView}
           offset={[contextualMenuTriggerSize / 2, -contextualMenuTriggerSize]}

package/src/ui/FloatingContextualMenu/styles.ts

@@ -5,7 +5,10 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
-import { contextualMenuDropdownWidth } from '../consts';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
+} from '../consts';
 
 export const cellColourPreviewStyles = (selectedColor: string) => css`
   &::before {
@@ -20,7 +23,9 @@ export const elementBeforeIconStyles = css`
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export const tablePopupStyles = css`
+export const tablePopupStyles = (
+  isDragAndDropEnabled: boolean | undefined,
+) => css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};
     background: ${token('elevation.surface.overlay', 'white')};
@@ -31,7 +36,9 @@ export const tablePopupStyles = css`
     display: block;
     position: absolute;
     top: 0;
-    left: ${contextualMenuDropdownWidth}px;
+    left: ${isDragAndDropEnabled
+      ? contextualMenuDropdownWidthDnD
+      : contextualMenuDropdownWidth}px;
     padding: ${token('space.100', '8px')};
 
     > div {

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -159,10 +159,17 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
-  const handleMouseUp = useCallback(() => {
-    const { state, dispatch } = editorView;
-    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
-  }, [editorView, colIndex]);
+  const handleMouseUp = useCallback(
+    (event) => {
+      const { state, dispatch } = editorView;
+      if (event.shiftKey) {
+        return;
+      }
+
+      toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+    },
+    [editorView, colIndex],
+  );
 
   const colIndexes = useMemo(() => {
     return [colIndex!];
@@ -251,6 +258,8 @@ export const ColumnControls = ({
           height: 'fit-content',
           placeSelf: 'center',
           zIndex: 99,
+          width: '100%',
+          position: 'relative',
         }}
         data-column-control-index={hoveredCell.colIndex}
         data-testid={`table-floating-column-${

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -6,33 +6,21 @@ import { ColumnDropTarget } from './ColumnDropTarget';
 
 export interface Props {
   tableRef: HTMLTableElement;
-  stickyTop?: number;
   tableHeight?: number;
   localId?: string;
-  rowHeights?: number[];
   colWidths?: (number | undefined)[];
 }
 
 export const ColumnDropTargets: React.FC<Props> = ({
   tableRef,
   tableHeight,
-  stickyTop,
   localId,
-  rowHeights,
   colWidths,
 }) => {
   if (!tableRef) {
     return null;
   }
 
-  const firstRow = tableRef.querySelector('tr');
-  const hasHeaderRow = firstRow
-    ? firstRow.getAttribute('data-header-row')
-    : false;
-
-  const marginTop =
-    hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
-
   return (
     <div
       className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
@@ -50,7 +38,7 @@ export const ColumnDropTargets: React.FC<Props> = ({
               localId={localId}
               width={width}
               height={tableHeight}
-              marginTop={marginTop}
+              marginTop={0}
             />
           );
         })}

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -165,10 +165,8 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
       {isDragging && (
         <ColumnDropTargets
           tableRef={tableRef}
-          stickyTop={tableActive ? stickyTop : undefined}
           tableHeight={tableRect.height}
           localId={currentNodeLocalId}
-          rowHeights={rowHeights}
           colWidths={colWidths}
         />
       )}

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -113,13 +113,20 @@ const DragControlsComponent = ({
     });
   }, [editorView]);
 
-  const onMouseUp = useCallback(() => {
-    toggleDragMenu(
-      undefined,
-      'row',
-      hoveredCell?.rowIndex,
-    )(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell?.rowIndex]);
+  const onMouseUp = useCallback(
+    (event) => {
+      if (event.shiftKey) {
+        return;
+      }
+
+      toggleDragMenu(
+        undefined,
+        'row',
+        hoveredCell?.rowIndex,
+      )(editorView.state, editorView.dispatch);
+    },
+    [editorView, hoveredCell?.rowIndex],
+  );
 
   const rowIndex = hoveredCell?.rowIndex;
 
@@ -194,6 +201,7 @@ const DragControlsComponent = ({
         !selectedRowIndexes.includes(rowIndex!) &&
         Number.isFinite(hoveredCell?.colIndex)
       : selectedRowIndexes.length < rowHeights.length &&
+        rowIndex! < rowHeights.length &&
         Number.isFinite(hoveredCell?.colIndex);
 
     if (!showCondition) {
@@ -234,7 +242,9 @@ const DragControlsComponent = ({
           gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
           gridColumn: '2',
           // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+          display: 'flex',
           width: '9px',
+          height: '100%',
           position: 'relative',
           right: '-0.5px',
         }}

package/src/ui/common-styles.ts

@@ -309,8 +309,8 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
     ${hoveredDeleteButton()};
     ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
-    ${resizeHandle()};
+    ${props.featureFlags?.tableDragAndDrop && insertLine()};
+    ${resizeHandle(props.featureFlags?.tableDragAndDrop)};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -520,7 +520,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
     }
 
     ${sentinelStyles}
-    ${OverflowShadow()}
+    ${OverflowShadow(props.featureFlags?.tableDragAndDrop)}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -753,6 +753,22 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       }
     }
 
+    .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
+      background: none;
+      border: none;
+      outline: none;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      :focus {
+        outline: none;
+      }
+    }
+
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
       pointer-events: auto;
@@ -844,7 +860,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       margin-left: ${getBooleanFF('platform.editor.custom-table-width')
         ? akEditorTableToolbarSize
         : akEditorTableToolbarSize - 1}px;
-      top: ${getBooleanFF('platform.editor.table.drag-and-drop')
+      top: ${props.featureFlags?.tableDragAndDrop
         ? 0
         : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;

package/src/ui/consts.ts

@@ -13,7 +13,6 @@ import {
   akEditorUnitZIndex,
   akRichMediaResizeZIndex,
 } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import {
   B200,
   N0,
@@ -119,11 +118,8 @@ export const resizeLineWidth = 2;
 export const resizeHandlerZIndex =
   columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = getBooleanFF(
-  'platform.editor.table.drag-and-drop',
-)
-  ? 250
-  : 180;
+export const contextualMenuDropdownWidth = 180;
+export const contextualMenuDropdownWidthDnD = 250;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;

package/src/ui/icons/AddRowAboveIcon.tsx

@@ -16,22 +16,8 @@ export const AddRowAboveIcon = () => (
       fill={token('color.border.inverse', '#FFFFFF')}
       fillOpacity="0.01"
     />
-    <mask
-      id="path-1-inside-1_896_17822"
-      fill={token('color.border.inverse', '#FFFFFF')}
-    >
-      <rect x="6" y="12" width="12" height="8" rx="0.5" />
-    </mask>
-    <rect
-      x="6"
-      y="12"
-      width="12"
-      height="8"
-      rx="0.5"
-      stroke="currentColor"
-      strokeWidth="4"
-      mask="url(#path-1-inside-1_896_17822)"
-    />
+    <rect x="6" y="12" width="12" height="3" rx="0.5" fill="currentColor" />
+    <rect x="6" y="16" width="12" height="3" rx="0.5" fill="currentColor" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

package/src/ui/icons/AddRowBelowIcon.tsx

@@ -10,26 +10,35 @@ export const AddRowBelowIcon = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <mask
-      id="path-1-inside-1_920_47112"
+    <rect
+      width="24"
+      height="24"
+      transform="matrix(-1 0 0 -1 24 24)"
       fill={token('color.border.inverse', '#FFFFFF')}
-    >
-      <rect x="6" y="4" width="12" height="8" rx="0.5" />
-    </mask>
+      fillOpacity="0.01"
+    />
+    <rect
+      x="18"
+      y="12"
+      width="12"
+      height="3"
+      rx="0.5"
+      transform="rotate(-180 18 12)"
+      fill="currentColor"
+    />
     <rect
-      x="6"
-      y="4"
+      x="18"
+      y="8"
       width="12"
-      height="8"
+      height="3"
       rx="0.5"
-      stroke="currentColor"
-      strokeWidth="4"
-      mask="url(#path-1-inside-1_920_47112)"
+      transform="rotate(-180 18 8)"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z"
+      d="M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z"
       fill="currentColor"
     />
   </svg>

package/src/ui/ui-styles.ts

@@ -331,7 +331,9 @@ export const DeleteButton = () => css`
   }
 `;
 
-export const OverflowShadow = () => css`
+export const OverflowShadow = (
+  isDragAndDropEnabled: boolean | undefined,
+) => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
     height: calc(100% - ${tableMarginTop}px);
@@ -395,15 +397,17 @@ export const OverflowShadow = () => css`
         }px)`};
   }
   .${ClassName.WITH_CONTROLS} {
-    ${overflowShadowWidhoutDnD()}
+    ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor};
     }
   }
 `;
 
-const overflowShadowWidhoutDnD = () => {
-  if (!getBooleanFF('platform.editor.table.drag-and-drop')) {
+const overflowShadowWidhoutDnD = (
+  isDragAndDropEnabled: boolean | undefined,
+) => {
+  if (!isDragAndDropEnabled) {
     return css`
       .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
         height: calc(100% - ${tableMarginTopWithControl}px);
@@ -791,8 +795,8 @@ const getLastColumnResizerOverrides = () => {
     : '';
 };
 
-const resizeHandleOverrides = () => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+const resizeHandleOverrides = (isDragAndDropEnabled: boolean | undefined) => {
+  if (isDragAndDropEnabled) {
     return css`
       th.${ClassName.WITH_RESIZE_LINE}::before,
         td.${ClassName.WITH_RESIZE_LINE}::before {
@@ -866,7 +870,7 @@ const resizeHandleOverrides = () => {
   `;
 };
 
-export const resizeHandle = () => css`
+export const resizeHandle = (isDragAndDropEnabled: boolean | undefined) => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -881,7 +885,7 @@ export const resizeHandle = () => css`
 
     ${getLastColumnResizerOverrides()}
 
-    ${resizeHandleOverrides()}
+    ${resizeHandleOverrides(isDragAndDropEnabled)}
 
     table
       tr:first-of-type

package/src/utils/drag-menu.ts

@@ -55,7 +55,7 @@ import {
   AddRowBelowIcon,
 } from '../ui/icons';
 
-import { getSelectedColumnIndexes } from './index';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 
 const canDecrease = (index?: number, min: number = 0) =>
   index !== undefined && index > min;
@@ -140,35 +140,49 @@ export const getDragMenuConfig = (
       ? [
           {
             label: 'up',
-            offset: -1,
-            canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowUpIcon,
             keymap: moveRowUp,
+            canMove: (selectionRect?: Rect) =>
+              canDrag && canDecrease(selectionRect?.top),
+            getOriginIndexes: getSelectedRowIndexes,
+            getTargetIndex: (selectionRect: Rect) => selectionRect.top - 1,
           },
           {
             label: 'down',
-            offset: 1,
-            canMove: (index?: number) =>
-              canDrag && canIncrease(index, (tableMap?.height ?? 0) - 1),
             icon: ArrowDownIcon,
             keymap: moveRowDown,
+            canMove: (selectionRect?: Rect) =>
+              canDrag &&
+              canIncrease(
+                (selectionRect?.bottom ?? 0) - 1,
+                (tableMap?.height ?? 0) - 1,
+              ),
+            getOriginIndexes: getSelectedRowIndexes,
+            getTargetIndex: (selectionRect: Rect) => selectionRect.bottom,
           },
         ]
       : [
           {
             label: 'left',
-            offset: -1,
-            canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowLeftIcon,
             keymap: moveColumnLeft,
+            canMove: (selectionRect?: Rect) =>
+              canDrag && canDecrease(selectionRect?.left),
+            getOriginIndexes: getSelectedColumnIndexes,
+            getTargetIndex: (selectionRect: Rect) => selectionRect.left - 1,
           },
           {
             label: 'right',
-            offset: 1,
-            canMove: (index?: number) =>
-              canDrag && canIncrease(index, (tableMap?.width ?? 0) - 1),
             icon: ArrowRightIcon,
             keymap: moveColumnRight,
+            canMove: (selectionRect?: Rect) =>
+              canDrag &&
+              canIncrease(
+                (selectionRect?.right ?? 0) - 1,
+                (tableMap?.width ?? 0) - 1,
+              ),
+            getOriginIndexes: getSelectedColumnIndexes,
+            getTargetIndex: (selectionRect: Rect) => selectionRect.right,
           },
         ];
 
@@ -257,27 +271,29 @@ export const getDragMenuConfig = (
       icon: RemoveIcon,
       keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn),
     },
-    ...moveOptions.map(({ label, offset, canMove, icon, keymap }) => ({
-      id: `move_${direction}_${label}`,
-      title: `Move ${direction} ${label}`,
-      disabled: !canMove(index),
-      icon,
-      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
-        if (canMove(index)) {
-          requestAnimationFrame(() => {
-            moveSourceWithAnalytics(editorAnalyticsAPI)(
-              INPUT_METHOD.TABLE_CONTEXT_MENU,
-              `table-${direction}`,
-              [index!],
-              index! + offset,
-            )(editorView.state, editorView.dispatch);
-          });
-          return true;
-        }
-        return false;
-      },
-      keymap: keymap && tooltip(keymap),
-    })),
+    ...moveOptions.map(
+      ({ label, canMove, icon, keymap, getOriginIndexes, getTargetIndex }) => ({
+        id: `move_${direction}_${label}`,
+        title: `Move ${direction} ${label}`,
+        disabled: !canMove(selectionRect),
+        icon,
+        onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+          if (canMove(selectionRect)) {
+            requestAnimationFrame(() => {
+              moveSourceWithAnalytics(editorAnalyticsAPI)(
+                INPUT_METHOD.TABLE_CONTEXT_MENU,
+                `table-${direction}`,
+                getOriginIndexes(selectionRect!),
+                getTargetIndex(selectionRect!),
+              )(editorView.state, editorView.dispatch);
+            });
+            return true;
+          }
+          return false;
+        },
+        keymap: keymap && tooltip(keymap),
+      }),
+    ),
 
     ...sortOptions.map(({ label, order, icon }) => ({
       id: `sort_column_${order}`,