@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

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

@@ -22,6 +22,7 @@ import {
   columnControlsDecorationHeight,
   columnControlsSelectedZIndex,
   columnControlsZIndex,
+  insertLineWidth,
   lineMarkerSize,
   resizeHandlerAreaWidth,
   resizeHandlerZIndex,
@@ -389,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} {
@@ -674,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;
@@ -732,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
@@ -746,3 +791,117 @@ export const resizeHandle = (props: ThemeProps) => css`
     }
   }
 `;
+
+export const insertLine = (props: ThemeProps) => css`
+  .${ClassName.TABLE_CONTAINER} {
+    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${token('space.negative.025', '-2px')};
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: ${token('space.negative.025', '-2px')};
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      right: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${token('space.negative.025', '-2px')};
+      top: -1px;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${token('space.negative.025', '-2px')};
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -1px;
+    }
+
+    td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${token('space.negative.025', '-2px')};
+      bottom: 0;
+      height: ${insertLineWidth}px;
+      width: calc(100% + 2px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${token('space.negative.025', '-2px')};
+      bottom: 0;
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+  }
+`;

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 = (
@@ -566,3 +614,104 @@ export const createColumnLineResize = (
     })
     .filter(nonNullable);
 };
+
+export const createColumnInsertLine = (
+  columnIndex: number,
+  selection: Selection,
+): Decoration[] => {
+  const table = findTable(selection);
+  if (!table) {
+    return [];
+  }
+
+  const map = TableMap.get(table.node);
+
+  const isFirstColumn = columnIndex === 0;
+  const isLastColumn = columnIndex === map.width;
+  if (isLastColumn) {
+    columnIndex -= 1;
+  }
+  const decorationClassName = isFirstColumn
+    ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE
+    : isLastColumn
+    ? ClassName.WITH_LAST_COLUMN_INSERT_LINE
+    : ClassName.WITH_COLUMN_INSERT_LINE;
+
+  const cellPositions = makeArray(map.height)
+    .map((rowIndex) => map.map[map.width * rowIndex + columnIndex])
+    .filter((cellPosition, rowIndex) => {
+      if (isLastColumn) {
+        return true; // If is the last column no filter applied
+      }
+      const nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
+      return cellPosition !== nextPosition; // Removed it if next position is merged
+    });
+
+  const cells = cellPositions.map((pos) => ({
+    pos: pos + table.start,
+    node: table.node.nodeAt(pos),
+  }));
+
+  return cells
+    .map((cell, index) => {
+      if (!cell || !cell.node) {
+        return;
+      }
+
+      return Decoration.node(
+        cell.pos,
+        cell.pos + cell.node.nodeSize,
+        {
+          class: decorationClassName,
+        },
+        {
+          key: `${TableDecorations.COLUMN_INSERT_LINE}_${index}`,
+        },
+      );
+    })
+    .filter(nonNullable);
+};
+
+export const createRowInsertLine = (
+  rowIndex: number,
+  selection: Selection,
+): Decoration[] => {
+  const table = findTable(selection);
+  if (!table) {
+    return [];
+  }
+
+  const map = TableMap.get(table.node);
+  const isLastRow = rowIndex === map.height;
+  if (isLastRow) {
+    rowIndex -= 1;
+  }
+
+  const cells = getCellsInRow(rowIndex)(selection);
+  if (!cells) {
+    return [];
+  }
+
+  const decorationClassName = isLastRow
+    ? ClassName.WITH_LAST_ROW_INSERT_LINE
+    : ClassName.WITH_ROW_INSERT_LINE;
+
+  return cells
+    .map((cell, index) => {
+      if (!cell || !cell.node) {
+        return;
+      }
+
+      return Decoration.node(
+        cell.pos,
+        cell.pos + cell.node.nodeSize,
+        {
+          class: decorationClassName,
+        },
+        {
+          key: `${TableDecorations.ROW_INSERT_LINE}_${index}`,
+        },
+      );
+    })
+    .filter(nonNullable);
+};

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

@@ -12,7 +12,9 @@ export {
   createCellHoverDecoration,
   updateDecorations,
   createResizeHandleDecoration,
+  createColumnInsertLine,
   createColumnLineResize,
+  createRowInsertLine,
 } from './decoration';
 export {
   isIsolating,
@@ -44,6 +46,8 @@ export {
   isColumnControlsDecorations,
   isTableControlsButton,
   isTableContainerOrWrapper,
+  isColumnDragControlsDecorations,
+  isRowDragControlsButton,
   isRowControlsButton,
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
@@ -70,3 +74,4 @@ export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
+export { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';

package/src/plugins/table/utils/merged-cells.ts

@@ -0,0 +1,67 @@
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables';
+import { findTable, TableMap } from '@atlaskit/editor-tables';
+
+const hasMergedCells =
+  (
+    indexes: number | number[],
+    normalizeRect: (index: number, map: TableMap) => Rect,
+  ) =>
+  (selection: Selection): boolean => {
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+
+    const map = TableMap.get(table.node);
+    const cellPositions = new Set<number>();
+    const mergedCells = new Set<number>();
+
+    map.map.forEach((value) => {
+      if (cellPositions.has(value)) {
+        mergedCells.add(value);
+      } else {
+        cellPositions.add(value);
+      }
+    });
+
+    if (!mergedCells.size) {
+      return false;
+    }
+
+    return (Array.isArray(indexes) ? indexes : [indexes])
+      .map((index) => normalizeRect(index, map))
+      .filter((rect) => rect.left < rect.right && rect.top < rect.bottom)
+      .some((rect) => {
+        const n = (rect.right - rect.left) * (rect.bottom - rect.top);
+        const cells = map.cellsInRect(rect);
+        if (cells.length !== n) {
+          // We can quickly assume that if the amount of cells from the map is different to what the rect says
+          // then there is most likely merged cells across this area which is removing cells
+          return true;
+        }
+        return cells.some((nodePos) => mergedCells.has(nodePos));
+      });
+  };
+
+export const hasMergedCellsInColumn = (columnIndexes: number | number[]) =>
+  hasMergedCells(columnIndexes, (index: number, map: TableMap) => {
+    const x = Math.max(Math.min(index, map.width - 1), 0); // clamped index
+    return {
+      left: x,
+      right: x === index ? x + 1 : x,
+      top: 0,
+      bottom: map.height,
+    };
+  });
+
+export const hasMergedCellsInRow = (rowIndexes: number | number[]) =>
+  hasMergedCells(rowIndexes, (index: number, map: TableMap) => {
+    const y = Math.max(Math.min(index, map.height - 1), 0); // clamped index
+    return {
+      left: 0,
+      right: map.width,
+      top: y,
+      bottom: y === index ? y + 1 : y,
+    };
+  });

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"
     },