@atlaskit/editor-plugin-table 7.1.0 → 7.1.2

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/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}`,

package/tsconfig.json

@@ -578,6 +578,279 @@
       "@atlaskit/editor-plugin-hyperlink": [
         "../editor-plugin-hyperlink/src/index.ts"
       ],
+      "@atlaskit/editor-test-helpers/adf-schema": [
+        "../editor-test-helpers/src/adf-schema.ts"
+      ],
+      "@atlaskit/editor-test-helpers/ajv": [
+        "../editor-test-helpers/src/ajv.ts"
+      ],
+      "@atlaskit/editor-test-helpers/analytics-client-mock": [
+        "../editor-test-helpers/src/analytics-client-mock.ts"
+      ],
+      "@atlaskit/editor-test-helpers/autoformatting-provider": [
+        "../editor-test-helpers/src/autoformatting-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/base64fileconverter": [
+        "../editor-test-helpers/src/base64fileconverter.ts"
+      ],
+      "@atlaskit/editor-test-helpers/card-helpers": [
+        "../editor-test-helpers/src/card-helpers.ts"
+      ],
+      "@atlaskit/editor-test-helpers/card-provider": [
+        "../editor-test-helpers/src/card-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/confluence-card-client": [
+        "../editor-test-helpers/src/confluence-card-client.ts"
+      ],
+      "@atlaskit/editor-test-helpers/confluence-card-provider": [
+        "../editor-test-helpers/src/confluence-card-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/context-identifier-provider": [
+        "../editor-test-helpers/src/context-identifier-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/controllable-promise": [
+        "../editor-test-helpers/src/controllable-promise.ts"
+      ],
+      "@atlaskit/editor-test-helpers/constants": [
+        "../editor-test-helpers/src/constants.ts"
+      ],
+      "@atlaskit/editor-test-helpers/create-analytics-event-mock": [
+        "../editor-test-helpers/src/create-analytics-event-mock.ts"
+      ],
+      "@atlaskit/editor-test-helpers/create-editor": [
+        "../editor-test-helpers/src/create-editor.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/create-editor-state": [
+        "../editor-test-helpers/src/create-editor-state.ts"
+      ],
+      "@atlaskit/editor-test-helpers/create-prosemirror-editor": [
+        "../editor-test-helpers/src/create-prosemirror-editor.ts"
+      ],
+      "@atlaskit/editor-test-helpers/create-event": [
+        "../editor-test-helpers/src/create-event.ts"
+      ],
+      "@atlaskit/editor-test-helpers/dispatch-paste-event": [
+        "../editor-test-helpers/src/dispatch-paste-event.ts"
+      ],
+      "@atlaskit/editor-test-helpers/doc-builder": [
+        "../editor-test-helpers/src/doc-builder.ts"
+      ],
+      "@atlaskit/editor-test-helpers/enzyme": [
+        "../editor-test-helpers/src/enzyme.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/floating-toolbar": [
+        "../editor-test-helpers/src/floating-toolbar.ts"
+      ],
+      "@atlaskit/editor-test-helpers/rtl": [
+        "../editor-test-helpers/src/rtl.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/extensions": [
+        "../editor-test-helpers/src/extensions.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/jsdom-fixtures": [
+        "../editor-test-helpers/src/jsdom-fixtures.ts"
+      ],
+      "@atlaskit/editor-test-helpers/media-mock": [
+        "../editor-test-helpers/src/media-mock.ts"
+      ],
+      "@atlaskit/editor-test-helpers/media-client-mock": [
+        "../editor-test-helpers/src/media-client/index.ts"
+      ],
+      "@atlaskit/editor-test-helpers/media-provider": [
+        "../editor-test-helpers/src/media-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-activity-provider": [
+        "../editor-test-helpers/src/mock-activity-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-add-event-listener": [
+        "../editor-test-helpers/src/mock-add-event-listener.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-analytics-next": [
+        "../editor-test-helpers/src/mock-analytics-next.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/mock-extension-data": [
+        "../editor-test-helpers/src/mock-extension-data.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-insert-menu": [
+        "../editor-test-helpers/src/mock-insert-menu.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/mock-macro-provider": [
+        "../editor-test-helpers/src/mock-macro-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-performance-entry": [
+        "../editor-test-helpers/src/mock-performance-entry.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-performance-observer-entry-list": [
+        "../editor-test-helpers/src/mock-performance-observer-entry-list.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-intersection-observer": [
+        "../editor-test-helpers/src/mock-intersection-observer.ts"
+      ],
+      "@atlaskit/editor-test-helpers/mock-search-provider": [
+        "../editor-test-helpers/src/mock-search-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers/next-tick": [
+        "../editor-test-helpers/src/next-tick.ts"
+      ],
+      "@atlaskit/editor-test-helpers/random-id": [
+        "../editor-test-helpers/src/random-id.ts"
+      ],
+      "@atlaskit/editor-test-helpers/schema": [
+        "../editor-test-helpers/src/schema.ts"
+      ],
+      "@atlaskit/editor-test-helpers/schema-element-builder": [
+        "../editor-test-helpers/src/schema-element-builder.ts"
+      ],
+      "@atlaskit/editor-test-helpers/selection": [
+        "../editor-test-helpers/src/selection.ts"
+      ],
+      "@atlaskit/editor-test-helpers/send-key-to-pm": [
+        "../editor-test-helpers/src/send-key-to-pm.ts"
+      ],
+      "@atlaskit/editor-test-helpers/set-selection-transform": [
+        "../editor-test-helpers/src/set-selection-transform.ts"
+      ],
+      "@atlaskit/editor-test-helpers/simulate-platform": [
+        "../editor-test-helpers/src/simulate-platform.ts"
+      ],
+      "@atlaskit/editor-test-helpers/sleep": [
+        "../editor-test-helpers/src/sleep.ts"
+      ],
+      "@atlaskit/editor-test-helpers/table": [
+        "../editor-test-helpers/src/table.ts"
+      ],
+      "@atlaskit/editor-test-helpers/transactions": [
+        "../editor-test-helpers/src/transactions.ts"
+      ],
+      "@atlaskit/editor-test-helpers/use-example-document": [
+        "../editor-test-helpers/src/use-example-document.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils": [
+        "../editor-test-helpers/src/vr-utils.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils/base-utils": [
+        "../editor-test-helpers/src/vr-utils/base-utils.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils/bounding-client-rect": [
+        "../editor-test-helpers/src/vr-utils/bounding-client-rect.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils/device-viewport": [
+        "../editor-test-helpers/src/vr-utils/device-viewport.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils/frame-utils": [
+        "../editor-test-helpers/src/vr-utils/frame-utils.ts"
+      ],
+      "@atlaskit/editor-test-helpers/vr-utils/get-computed-style": [
+        "../editor-test-helpers/src/vr-utils/get-computed-style.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/editor": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/editor.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/emoji": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/emoji.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/extensions": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/extensions.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/mention": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/mention.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/table": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/table.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/toolbar": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/toolbar.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/keyboard": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/keyboard.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/types": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/types.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/blocks": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/blocks.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/code-block": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/code-block.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/date": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/date.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/decision": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/decision.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/element-browser": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/element-browser.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/expand": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/expand.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/find-replace": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/find-replace.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/help-dialog": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/help-dialog.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/hyperlink": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/hyperlink.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/layouts": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/layouts.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/media": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/media.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/mouse": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/mouse.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/quick-insert": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/quick-insert.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/selection": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/selection.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/smart-links": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/smart-links.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/status": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/status.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/panel": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/panel.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/task": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/task.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/unsupported": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/unsupported.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/list": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/list.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/breakout": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/breakout.ts"
+      ],
+      "@atlaskit/editor-test-helpers/page-objects/context-panel": [
+        "../editor-test-helpers/src/integration/helpers/page-objects/context-panel.ts"
+      ],
+      "@atlaskit/editor-test-helpers/testing-example-page": [
+        "../editor-test-helpers/src/testing-example-page.ts"
+      ],
+      "@atlaskit/editor-test-helpers/e2e-helpers": [
+        "../editor-test-helpers/src/e2e-helpers.ts"
+      ],
+      "@atlaskit/editor-test-helpers/wysiwyg-helpers": [
+        "../editor-test-helpers/src/wysiwyg-helpers.ts"
+      ],
+      "@atlaskit/editor-test-helpers/integration/escape-keydown": [
+        "../editor-test-helpers/src/integration/escape-keydown.ts"
+      ],
+      "@atlaskit/editor-test-helpers/create-test-extension-provider": [
+        "../editor-test-helpers/src/create-test-extension-provider.ts"
+      ],
+      "@atlaskit/editor-test-helpers": [
+        "../editor-test-helpers/src"
+      ],
       "@atlaskit/visual-regression": [
         "../../../build/test-tooling/visual-regression/src"
       ],