@atlaskit/editor-plugin-table 7.1.0 → 7.1.1

package/src/event-handlers.ts

@@ -47,7 +47,10 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import type { ElementContentRects } from './types';
-import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import {
+  TableCssClassName as ClassName,
+  RESIZE_HANDLE_AREA_DECORATION_GAP,
+} from './types';
 import {
   convertHTMLCellIndexToColumnIndex,
   getColumnIndexMappedToColumnIndexInFirstRow,
@@ -91,6 +94,14 @@ const isFocusingDragHandles = (event: Event) =>
   event.relatedTarget.closest('button') &&
   event.relatedTarget.getAttribute('draggable') === 'true';
 
+const isFocusingDragHandlesClickableZone = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.classList.contains(
+    ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+  );
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -100,7 +111,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
     !isFocusingFloatingToolbar(event) &&
-    !isFocusingDragHandles(event)
+    !isFocusingDragHandles(event) &&
+    !isFocusingDragHandlesClickableZone(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }

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

@@ -79,6 +79,7 @@ export const moveSourceWithAnalytics =
     tr?: Transaction,
   ) => {
     return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
       const { totalRowCount, totalColumnCount } =
         getSelectedTableInfo(selection);
       return {
@@ -93,7 +94,9 @@ export const moveSourceWithAnalytics =
           count: sourceIndexes.length,
           // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
           // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-          distance: Math.min(...sourceIndexes.map((v) => targetIndex - v)),
+          distance:
+            Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) *
+            direction,
           // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
           status: sourceIndexes.includes(targetIndex)
             ? TABLE_STATUS.CANCELLED
@@ -130,15 +133,15 @@ export const moveSourceWithAnalyticsViaShortcut =
       ? getSelectedRowIndexes(selectionRect)
       : getSelectedColumnIndexes(selectionRect);
 
-    // FIXME: We can move if only one row/column selected
-    if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+    if (selectedIndexes.length === 0) {
       return false;
     }
 
-    const sourceIndex = selectedIndexes[0];
+    // const sourceIndex = selectedIndexes[0];
     // we can move only by one row/column
     // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-    const targetIndex = sourceIndex + direction;
+    const targetIndex =
+      Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
 
     // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
     const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
@@ -155,8 +158,8 @@ export const moveSourceWithAnalyticsViaShortcut =
 
     // We can move only if there are no merged cells in the source or target row/column
     const hasMergedCellsInSource = isRow
-      ? hasMergedCellsInRow(sourceIndex)(selection)
-      : hasMergedCellsInColumn(sourceIndex)(selection);
+      ? hasMergedCellsInRow(selectedIndexes)(selection)
+      : hasMergedCellsInColumn(selectedIndexes)(selection);
     if (hasMergedCellsInSource) {
       return false;
     }
@@ -171,7 +174,7 @@ export const moveSourceWithAnalyticsViaShortcut =
     return moveSourceWithAnalytics(editorAnalyticsAPI)(
       INPUT_METHOD.SHORTCUT,
       sourceType,
-      [sourceIndex],
+      selectedIndexes,
       targetIndex,
     )(state, dispatch);
   };

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

@@ -2,15 +2,9 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import {
-  moveColumn,
-  moveRow,
-  selectColumn,
-  selectRow,
-} from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
@@ -19,7 +13,6 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
-import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -118,31 +111,10 @@ export const moveSource = (
       if (sourceIndexes.includes(targetIndex)) {
         return nextTr.setMeta('addToHistory', false);
       }
-
-      const anchor = nextTr.selection.anchor;
-      const selectStartOfTable = (newTr: Transaction) =>
-        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-
-      const isTableRow = sourceType === 'table-row';
-      if (isTableRow) {
-        return combineTransforms(
-          [
-            moveRow(state, sourceIndexes, targetIndex),
-            selectStartOfTable,
-            selectRow(targetIndex),
-          ],
-          nextTr,
-        );
-      }
-
-      return combineTransforms(
-        [
-          moveColumn(state, sourceIndexes, targetIndex),
-          selectStartOfTable,
-          selectColumn(targetIndex),
-        ],
-        nextTr,
-      );
+      const move = sourceType === 'table-row' ? moveRow : moveColumn;
+      return move(state, sourceIndexes, targetIndex, {
+        selectAfterMove: true,
+      })(nextTr);
     },
   );
 

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

@@ -82,9 +82,6 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
         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;

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

@@ -45,11 +45,6 @@ export const getDraggableDataFromEvent = ({
     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);

package/src/types.ts

@@ -330,6 +330,7 @@ export const TableCssClassName = {
   DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
 
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: `${tablePrefixSelector}-drag-handle-button-clickable-zone`,
 
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,

package/src/ui/DragHandle/index.tsx

@@ -11,11 +11,13 @@ import { browser } from '@atlaskit/editor-common/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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 { token } from '@atlaskit/tokens';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
 import { HandleIconComponent } from './HandleIconComponent';
@@ -64,17 +66,18 @@ const DragHandleComponent = ({
   const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
+  const isRow = direction === 'row';
+  const isColumn = direction === 'column';
 
-  const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  const isColumnHandleHovered =
-    direction === 'column' && hoveredColumns.length > 0;
+  const isRowHandleHovered = isRow && hoveredRows.length > 0;
+  const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
 
   const hasMergedCells = useMemo(
     () =>
-      direction === 'row'
+      isRow
         ? hasMergedCellsInRow(indexes[0])(selection)
         : hasMergedCellsInColumn(indexes[0])(selection),
-    [indexes, direction, selection],
+    [indexes, isRow, selection],
   );
 
   const handleIconProps = {
@@ -113,7 +116,7 @@ const DragHandleComponent = ({
                 // be generated.
                 container.style.left = `-${rect.width - 0.0001}px`;
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return { x: 12, y: rect.height / 2 };
               } else {
                 return { x: rect.width / 2 + 4, y: 12 };
@@ -132,18 +135,35 @@ const DragHandleComponent = ({
     tableLocalId,
     direction,
     indexes,
+    isRow,
     editorView.state.selection,
     hasMergedCells,
     canDrag,
   ]);
 
-  const showDragMenuAnchorId =
-    direction === 'row'
-      ? 'drag-handle-button-row'
-      : 'drag-handle-button-column';
+  const showDragMenuAnchorId = isRow
+    ? 'drag-handle-button-row'
+    : 'drag-handle-button-column';
 
   return (
     <>
+      <button
+        className={ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE}
+        data-testid="table-drag-handle-clickable-zone-button"
+        style={{
+          height: isRow
+            ? `calc(100% - ${dragTableInsertColumnButtonSize}px)`
+            : `${token('space.200', '16px')}`, // 16px here because it's the size of drag handle button's large side
+          width: isRow
+            ? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
+            : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
+          left: isRow ? '3px' : undefined,
+          bottom: isColumn ? '0' : undefined,
+          alignSelf: isColumn ? 'none' : 'center',
+          zIndex: isColumn ? '-1' : 'auto',
+        }}
+        onClick={onClick}
+      />
       <button
         id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
@@ -155,13 +175,12 @@ const DragHandleComponent = ({
         )}
         ref={dragHandleDivRef}
         style={{
-          transform: direction === 'column' ? 'none' : 'rotate(90deg)',
+          transform: isColumn ? 'none' : 'rotate(90deg)',
+          alignSelf: isColumn ? 'none' : 'center',
         }}
         data-testid="table-drag-handle-button"
         aria-label={formatMessage(
-          direction === 'row'
-            ? messages.rowDragHandle
-            : messages.columnDragHandle,
+          isRow ? messages.rowDragHandle : messages.columnDragHandle,
         )}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -73,7 +73,10 @@ import {
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
 } from '../../utils';
-import { contextualMenuDropdownWidth } from '../consts';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
+} from '../consts';
 import {
   AddColRightIcon,
   AddRowBelowIcon,
@@ -145,7 +148,11 @@ export class ContextualMenu extends Component<
           onMouseEnter={this.handleItemMouseEnter}
           onMouseLeave={this.handleItemMouseLeave}
           fitHeight={188}
-          fitWidth={contextualMenuDropdownWidth}
+          fitWidth={
+            isDragAndDropEnabled
+              ? contextualMenuDropdownWidthDnD
+              : contextualMenuDropdownWidth
+          }
           boundariesElement={boundariesElement}
           offset={offset}
           section={

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;
 
@@ -235,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/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