@atlaskit/editor-plugin-table 5.3.0 → 5.3.1

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

@@ -22,6 +22,7 @@ import {
   columnControlsDecorationHeight,
   columnControlsSelectedZIndex,
   columnControlsZIndex,
+  insertLineWidth,
   lineMarkerSize,
   resizeHandlerAreaWidth,
   resizeHandlerZIndex,
@@ -746,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,
+    };
+  });