@atlaskit/editor-plugin-table 5.7.8 → 5.7.10

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -228,39 +228,39 @@ const DragControlsComponent = ({
       : rowIndexes;
 
     return (
-      showCondition && (
-        <div
-          key={type}
-          style={{
-            gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
-            gridColumn: '2',
-            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-            width: '9px',
-            position: 'relative',
-            right: '-0.5px',
-          }}
-          data-testid={'table-floating-row-drag-handle'}
-        >
-          <DragHandle
-            isDragMenuTarget={!isHover}
-            direction="row"
-            tableLocalId={currentNodeLocalId}
-            indexes={indexes}
-            forceDefaultHandle={isHover ? false : isRowsSelected}
-            previewWidth={tableWidth}
-            previewHeight={rowHeights[rowIndex!]}
-            appearance={
-              isSelecting ? currentSelectionAppearance : hoveredAppearance
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={onMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )
+      <div
+        key={type}
+        style={{
+          gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+          gridColumn: '2',
+          // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+          width: '9px',
+          position: 'relative',
+          right: '-0.5px',
+        }}
+        data-testid={`table-floating-row-${
+          isSelecting ? selectedRowIndexes[0] : rowIndex
+        }-drag-handle`}
+      >
+        <DragHandle
+          isDragMenuTarget={!isHover}
+          direction="row"
+          tableLocalId={currentNodeLocalId}
+          indexes={indexes}
+          forceDefaultHandle={isHover ? false : isRowsSelected}
+          previewWidth={tableWidth}
+          previewHeight={rowHeights[rowIndex!]}
+          appearance={
+            isSelecting ? currentSelectionAppearance : hoveredAppearance
+          }
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onMouseUp={onMouseUp}
+          editorView={editorView}
+          canDrag={canDrag}
+        />
+      </div>
     );
   };
 

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) => {