@atlaskit/editor-plugin-table 5.3.1 → 5.3.3

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

@@ -31,6 +31,7 @@ import {
   columnControlsDecorationHeight,
   resizeHandlerAreaWidth,
   resizeLineWidth,
+  rowControlsZIndex,
   stickyHeaderBorderBottomWidth,
   stickyRowOffsetTop,
   tableBorderColor,
@@ -240,6 +241,26 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
+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};
+        }
+      `
+    : 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`
@@ -677,6 +698,12 @@ export const tableStyles = (
       )}
     }
 
+    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+      display: grid;
+      align-items: center;
+      position: absolute;
+    }
+
     ${floatingColumnControls(props)}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
@@ -691,7 +718,9 @@ export const tableStyles = (
       margin-left: ${getBooleanFF('platform.editor.custom-table-width')
         ? akEditorTableToolbarSize
         : akEditorTableToolbarSize - 1}px;
-      top: ${akEditorTableToolbarSize}px;
+      top: ${getBooleanFF('platform.editor.table.drag-and-drop')
+        ? 0
+        : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
@@ -717,6 +746,21 @@ export const tableStyles = (
       }
     }
 
+    // add a background above the first numbered column cell when sticky header is engaged
+    // which hides the table when scrolling
+    .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
+      content: '';
+      display: block;
+      height: 33px;
+      width: 100%;
+      background-color: ${token('elevation.surface', 'white')};
+      position: absolute;
+
+      // the extra pixel is accounting for borders
+      top: -34px;
+      left: -1px;
+    }
+
     .${ClassName.WITH_CONTROLS} {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
         display: block;
@@ -741,10 +785,10 @@ export const tableStyles = (
       }
     }
     :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
-      .${ClassName.NUMBERED_COLUMN_BUTTON} {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
         cursor: pointer;
       }
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
         border-bottom: 1px solid ${tableBorderSelectedColor(props)};
         border-color: ${tableBorderSelectedColor(props)};
         background-color: ${tableToolbarSelectedColor(props)};
@@ -780,6 +824,10 @@ export const tableStyles = (
         margin-top: 0;
       }
 
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} + * {
+        margin-top: 0;
+      }
+
       /*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.
@@ -853,17 +901,10 @@ export const tableStyles = (
         }
       }
     }
-    .${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;
-    }
+    ${tableRowControlStyles()}
     .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      left: -${tableToolbarSize}px;
-    }
 
     .${ClassName.COLUMN_CONTROLS_WRAPPER} {
       position: absolute;

package/src/plugins/table/ui/consts.ts

@@ -130,6 +130,7 @@ export const lineMarkerSize = 4;
 export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const rowControlsZIndex = akEditorUnitZIndex * 10;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
 export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;

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,12 @@
     {
       "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
     },
+    {
+      "path": "../../pragmatic-drag-and-drop/react-accessibility/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/primitives/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },