@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/src/ui/ui-styles.ts

@@ -7,6 +7,7 @@ import {
 } from '@atlaskit/editor-common/styles';
 import {
   akEditorShadowZIndex,
+  akEditorTableBorder,
   akEditorTableNumberColumnWidth,
   akEditorUnitZIndex,
 } from '@atlaskit/editor-shared-styles';
@@ -897,116 +898,166 @@ export const resizeHandle = () => css`
 `;
 
 // Drag and Drop: drop target insert line
+const tableCellColumnInsertLineStyles = css`
+  content: ' ';
+  position: absolute;
+  height: calc(100% + ${tableCellBorderWidth * 2}px);
+  width: ${insertLineWidth}px;
+  z-index: ${columnControlsZIndex * 2};
+`;
+
+const tableCellRowInsertLineStyles = css`
+  content: ' ';
+  position: absolute;
+  left: ${token('space.negative.025', '-2px')};
+  height: ${insertLineWidth}px;
+  width: calc(100% + ${tableCellBorderWidth * 2}px);
+  z-index: ${columnControlsZIndex * 2};
+`;
+
+const insertLineActiveColor = css`
+  background-color: ${tableBorderSelectedColor};
+`;
+
+const insertLineInactiveColor = css`
+  background-color: ${token(
+    'color.background.accent.gray.subtler',
+    akEditorTableBorder,
+  )};
+`;
+
 export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       left: -1px;
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: -1px;
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
       left: -1px;
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: -1px;
+      top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       left: ${token('space.negative.025', '-2px')};
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: ${token('space.negative.025', '-2px')};
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
       left: ${token('space.negative.025', '-2px')};
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      left: ${token('space.negative.025', '-2px')};
+      top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
+      ${tableCellColumnInsertLineStyles}
       right: -1px;
       top: -1px;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      right: -1px;
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      content: ' ';
+      ${tableCellColumnInsertLineStyles}
       right: -1px;
-      position: absolute;
-      width: ${insertLineWidth}px;
-      height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+      ${tableCellColumnInsertLineStyles}
+      right: -1px;
+      top: -${tableCellBorderWidth}px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_ROW_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
-      left: ${token('space.negative.025', '-2px')};
+      ${tableCellRowInsertLineStyles}
       top: -1px;
-      height: ${insertLineWidth}px;
-      width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      top: -1px;
+      ${insertLineInactiveColor}
     }
 
     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};
-      z-index: ${columnControlsZIndex * 2};
+      ${tableCellRowInsertLineStyles}
+      top: -1px;
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
       top: -1px;
+      ${insertLineInactiveColor}
     }
 
     td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      content: ' ';
-      position: absolute;
-      left: ${token('space.negative.025', '-2px')};
+      ${tableCellRowInsertLineStyles}
       bottom: 0;
-      height: ${insertLineWidth}px;
-      width: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    td.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      bottom: 0;
+      ${insertLineInactiveColor}
     }
 
     th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      content: ' ';
-      left: ${token('space.negative.025', '-2px')};
+      ${tableCellRowInsertLineStyles}
       bottom: 0;
-      position: absolute;
-      height: ${insertLineWidth}px;
-      width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
+      ${insertLineActiveColor}
+    }
+
+    th.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+      ${tableCellRowInsertLineStyles}
+      bottom: 0;
+      ${insertLineInactiveColor}
     }
   }
 `;

package/src/utils/decoration.ts

@@ -593,6 +593,7 @@ export const createColumnLineResize = (
 export const createColumnInsertLine = (
   columnIndex: number,
   selection: Selection,
+  hasMergedCells: boolean,
 ): Decoration[] => {
   const table = findTable(selection);
   if (!table) {
@@ -606,11 +607,21 @@ export const createColumnInsertLine = (
   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;
+
+  let decorationClassName: string;
+  if (hasMergedCells) {
+    decorationClassName = isFirstColumn
+      ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE
+      : isLastColumn
+      ? ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE
+      : ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE;
+  } else {
+    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])
@@ -650,6 +661,7 @@ export const createColumnInsertLine = (
 export const createRowInsertLine = (
   rowIndex: number,
   selection: Selection,
+  hasMergedCells: boolean,
 ): Decoration[] => {
   const table = findTable(selection);
   if (!table) {
@@ -667,9 +679,16 @@ export const createRowInsertLine = (
     return [];
   }
 
-  const decorationClassName = isLastRow
-    ? ClassName.WITH_LAST_ROW_INSERT_LINE
-    : ClassName.WITH_ROW_INSERT_LINE;
+  let decorationClassName: string;
+  if (hasMergedCells) {
+    decorationClassName = isLastRow
+      ? ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE
+      : ClassName.WITH_ROW_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isLastRow
+      ? ClassName.WITH_LAST_ROW_INSERT_LINE
+      : ClassName.WITH_ROW_INSERT_LINE;
+  }
 
   return cells
     .map((cell, index) => {

package/tsconfig.app.json

@@ -84,6 +84,9 @@
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },
+    {
+      "path": "../../design-system/toggle/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/tokens/tsconfig.app.json"
     },