@atlaskit/editor-plugin-table 5.4.7 → 5.4.9

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

@@ -265,26 +265,6 @@ const tableStickyHeaderFirefoxFixStyle = (
   }
 };
 
-const tableRowControlStyles = () => {
-  return getBooleanFF('platform.editor.table.drag-and-drop')
-    ? css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          margin-top: ${tableMarginTop}px;
-          left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex + 4};
-        }
-      `
-    : css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-          top: ${tableMarginTop - cornerControlHeight + 1}px;
-          left: -${tableToolbarSize}px;
-        }
-      `;
-};
-
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -558,7 +538,8 @@ export const tableStyles = (
     .less-padding {
       padding: 0 ${tablePadding}px;
 
-      .${ClassName.ROW_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
 
         // https://product-fabric.atlassian.net/browse/ED-16386
@@ -1056,8 +1037,24 @@ export const tableStyles = (
         }
       }
     }
-    ${tableRowControlStyles()}
-    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+
+    // override for DnD controls
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      margin-top: ${tableMarginTop}px;
+      left: -${tableToolbarSize + 1}px;
+      z-index: ${rowControlsZIndex + 4};
+    }
+
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
+      left: -${tableToolbarSize}px;
+    }
+
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+      .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
 

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

@@ -500,27 +500,24 @@ export const floatingColumnControls = (props: ThemeProps) => {
 };
 
 export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        display: none;
-      }
-    `;
-  } else {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-    `;
-  }
+  return css`
+    // override for DnD controls
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
+      display: none;
+    }
+
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+      content: ' ';
+      background-color: ${tableBorderColor(props)};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
+      right: -1px;
+    }
+  `;
 };
 
 export const columnControlsDecoration = (props: ThemeProps) => {

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

@@ -22,7 +22,6 @@ import {
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -219,37 +218,33 @@ export const createColumnControlsDecoration = (
 ): Decoration[] => {
   const cells: ContentNodeWithPos[] = getCellsInRow(0)(selection) || [];
 
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return [];
-  } else {
-    let index = 0;
-    return cells.map((cell) => {
-      const colspan = (cell.node.attrs as CellAttributes).colspan || 1;
-      // It's important these values are scoped locally as the widget callback could be executed anytime in the future
-      // and we want to avoid value leak
-      const startIndex = index;
-      const endIndex = startIndex + colspan;
-
-      // The next cell start index will commence from the current cell end index.
-      index = endIndex;
-
-      return Decoration.widget(
-        cell.pos + 1,
-        () => {
-          const element = document.createElement('div');
-          element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-          element.dataset.startIndex = `${startIndex}`;
-          element.dataset.endIndex = `${endIndex}`;
-          return element;
-        },
-        {
-          key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
-          // this decoration should be the first one, even before gap cursor.
-          side: -100,
-        },
-      );
-    });
-  }
+  let index = 0;
+  return cells.map((cell) => {
+    const colspan = (cell.node.attrs as CellAttributes).colspan || 1;
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+    const startIndex = index;
+    const endIndex = startIndex + colspan;
+
+    // The next cell start index will commence from the current cell end index.
+    index = endIndex;
+
+    return Decoration.widget(
+      cell.pos + 1,
+      () => {
+        const element = document.createElement('div');
+        element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+        element.dataset.startIndex = `${startIndex}`;
+        element.dataset.endIndex = `${endIndex}`;
+        return element;
+      },
+      {
+        key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
+        // this decoration should be the first one, even before gap cursor.
+        side: -100,
+      },
+    );
+  });
 };
 
 export const updateDecorations = (

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

@@ -57,6 +57,7 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
 export const getDragMenuConfig = (
   direction: TableDirection,
   getEditorContainerWidth: GetEditorContainerWidth,
+  hasMergedCells: boolean,
   tableMap?: TableMap,
   index?: number,
   targetCellPosition?: number,
@@ -95,7 +96,12 @@ export const getDragMenuConfig = (
   const moveOptions =
     direction === 'row'
       ? [
-          { label: 'up', offset: -1, canMove: canDecrease, icon: ArrowUpIcon },
+          {
+            label: 'up',
+            offset: -1,
+            canMove: canDecrease,
+            icon: ArrowUpIcon,
+          },
           {
             label: 'down',
             offset: 1,
@@ -190,7 +196,7 @@ export const getDragMenuConfig = (
     ...moveOptions.map(({ label, offset, canMove, icon }) => ({
       id: `move_${direction}_${label}`,
       title: `Move ${direction} ${label}`,
-      disabled: !canMove(index),
+      disabled: hasMergedCells || !canMove(index),
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {