@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

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

@@ -55,6 +55,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  floatingColumnControls,
   HeaderButton,
   HeaderButtonDanger,
   HeaderButtonHover,
@@ -62,6 +63,7 @@ import {
   hoveredDeleteButton,
   hoveredWarningCell,
   insertColumnButtonWrapper,
+  insertLine,
   InsertMarker,
   insertRowButtonWrapper,
   OverflowShadow,
@@ -290,6 +292,7 @@ export const tableStyles = (
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
     ${hoveredWarningCell};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
     ${rangeSelectionStyles};
 
@@ -515,6 +518,10 @@ export const tableStyles = (
         }
       }
 
+      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+        padding: 0 ${tablePadding}px;
+      }
+
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
         padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
       }
@@ -670,6 +677,8 @@ export const tableStyles = (
       )}
     }
 
+    ${floatingColumnControls(props)}
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover(props)}
       ${HeaderButtonDanger(props)}
@@ -855,6 +864,12 @@ export const tableStyles = (
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
+
+    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      position: absolute;
+      top: ${tableMarginTop + 1}px;
+    }
+
     ${tableWrapperStyles()}
   }
 

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

@@ -131,6 +131,7 @@ export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex =

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

@@ -22,6 +22,7 @@ import {
   columnControlsDecorationHeight,
   columnControlsSelectedZIndex,
   columnControlsZIndex,
+  insertLineWidth,
   lineMarkerSize,
   resizeHandlerAreaWidth,
   resizeHandlerZIndex,
@@ -374,6 +375,20 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
+export const floatingColumnControls = (props: ThemeProps) => {
+  return css`
+    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+      box-sizing: border-box;
+      position: absolute;
+
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+  `;
+};
+
 export const columnControlsDecoration = (props: ThemeProps) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
@@ -732,3 +747,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

@@ -566,3 +566,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/index.ts

@@ -12,7 +12,9 @@ export {
   createCellHoverDecoration,
   updateDecorations,
   createResizeHandleDecoration,
+  createColumnInsertLine,
   createColumnLineResize,
+  createRowInsertLine,
 } from './decoration';
 export {
   isIsolating,
@@ -70,3 +72,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,
+    };
+  });