@atlaskit/editor-plugin-table 5.3.1 → 5.3.2

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

@@ -390,6 +390,17 @@ export const floatingColumnControls = (props: ThemeProps) => {
 };
 
 export const columnControlsDecoration = (props: ThemeProps) => {
+  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} {
+        position: absolute;
+        // kinda a hacky way to center an element with absolute positioning inside a relative element
+        top: 25%;
+        left: 50%;
+        transform: translate(-50%, -100%);
+      }
+    `;
+  }
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -675,21 +686,35 @@ const getLastColumnResizerOverrides = () => {
     : '';
 };
 
-export const resizeHandle = (props: ThemeProps) => css`
-  .${ClassName.TABLE_CONTAINER} {
-    .${ClassName.RESIZE_HANDLE_DECORATION} {
-      background-color: transparent;
-      position: absolute;
-      width: ${resizeHandlerAreaWidth}px;
-      height: 100%;
-      top: 0;
-      right: -${resizeHandlerAreaWidth / 2}px;
-      cursor: col-resize;
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    ${getLastColumnResizerOverrides()}
+const resizeHandleOverrides = (props: ThemeProps) => {
+  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return css`
+      th.${ClassName.WITH_RESIZE_LINE}::before,
+        td.${ClassName.WITH_RESIZE_LINE}::before {
+        content: ' ';
+        position: absolute;
+        left: ${token('space.negative.025', '-2px')};
+        top: -1px;
+        width: ${resizeLineWidth}px;
+        height: calc(100% + 2px);
+        background-color: ${tableBorderSelectedColor(props)};
+        z-index: ${columnControlsZIndex * 2};
+      }
 
+      th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before,
+        td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+        content: ' ';
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        width: ${resizeLineWidth}px;
+        height: calc(100% + 2px);
+        background-color: ${tableBorderSelectedColor(props)};
+        z-index: ${columnControlsZIndex * 2};
+      }
+    `;
+  }
+  return css`
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;
@@ -733,6 +758,25 @@ export const resizeHandle = (props: ThemeProps) => css`
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
+  `;
+};
+
+export const resizeHandle = (props: ThemeProps) => css`
+  .${ClassName.TABLE_CONTAINER} {
+    .${ClassName.RESIZE_HANDLE_DECORATION} {
+      background-color: transparent;
+      position: absolute;
+      width: ${resizeHandlerAreaWidth}px;
+      height: 100%;
+      top: 0;
+      right: -${resizeHandlerAreaWidth / 2}px;
+      cursor: col-resize;
+      z-index: ${resizeHandlerZIndex};
+    }
+
+    ${getLastColumnResizerOverrides()}
+
+    ${resizeHandleOverrides(props)}
 
     table
       tr:first-of-type

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

@@ -22,10 +22,16 @@ import {
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import type { Cell, CellColumnPositioning } from '../types';
+import type {
+  Cell,
+  CellColumnPositioning,
+  CellHoverCoordinates,
+} from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
+import { DragHandle } from '../ui/DragHandle';
 
 const filterDecorationByKey = (
   key: TableDecorations,
@@ -206,35 +212,77 @@ export const createColumnSelectedDecoration = (
 
 export const createColumnControlsDecoration = (
   selection: Selection,
+  hoverLocation?: CellHoverCoordinates,
 ): Decoration[] => {
+  // todo: issue here where table may not be selected yet
   const cells: ContentNodeWithPos[] = getCellsInRow(0)(selection) || [];
-  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;
+  const table = findTable(selection);
 
-    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,
-      },
-    );
-  });
+  if (
+    getBooleanFF('platform.editor.table.drag-and-drop') &&
+    hoverLocation &&
+    !Number.isNaN(hoverLocation?.colIndex) &&
+    table
+  ) {
+    const colIndex = hoverLocation.colIndex as number;
+    const cell = cells[colIndex];
+    return [
+      Decoration.widget(
+        cell.pos + 1,
+        () => {
+          const element = document.createElement('div');
+          element.classList.add(
+            ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG,
+          );
+          ReactDOM.render(
+            createElement(DragHandle, {
+              tableLocalId: table.node.attrs.localId,
+              direction: 'column',
+              indexes: [colIndex],
+            }),
+            element,
+          );
+          return element;
+        },
+        {
+          key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${colIndex}`,
+          // this decoration should be the first one, even before gap cursor.
+          side: -100,
+          destroy: (node) => {
+            ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+          },
+        },
+      ),
+    ];
+  } 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,
+        },
+      );
+    });
+  }
 };
 
 export const updateDecorations = (

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

@@ -36,10 +36,18 @@ export const isColumnControlsDecorations = (
   node: HTMLElement | null,
 ): boolean => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 
+export const isColumnDragControlsDecorations = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG) ||
+  closestElement(node, `.${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG}`);
+
 export const isRowControlsButton = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
   containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 
+export const isRowDragControlsButton = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) ||
+  closestElement(node, `.${ClassName.ROW_CONTROLS_WITH_DRAG}`);
+
 export const isResizeHandleDecoration = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 

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

@@ -46,6 +46,8 @@ export {
   isColumnControlsDecorations,
   isTableControlsButton,
   isTableContainerOrWrapper,
+  isColumnDragControlsDecorations,
+  isRowDragControlsButton,
   isRowControlsButton,
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,

package/tsconfig.app.json

@@ -75,6 +75,9 @@
     {
       "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
     },
+    {
+      "path": "../../pragmatic-drag-and-drop/react-accessibility/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },