@atlaskit/editor-plugin-table 5.3.25 → 5.3.27

package/src/plugins/table/ui/icons/DragHandleDisabledIcon.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+interface DragHandleDisabledIconProps {
+  style?: React.CSSProperties;
+}
+
+export const DragHandleDisabledIcon = ({
+  style,
+}: DragHandleDisabledIconProps) => (
+  <svg
+    width="24"
+    height="16"
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <rect
+      width="24"
+      height="16"
+      rx="4"
+      fill={token('color.background.accent.gray.subtlest', 'Neutral200')}
+    />
+    <g>
+      <rect
+        x="7"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+      <rect
+        x="11"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+      <rect
+        x="15"
+        y="4"
+        width="2"
+        height="8"
+        rx="1"
+        fill={token('color.icon.disabled', '#091E424F')}
+      />
+    </g>
+  </svg>
+);

package/src/plugins/table/ui/icons/index.ts

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -31,6 +31,7 @@ import {
   tableBorderDeleteColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
+  tableCellDisabledColor,
   tableCellHoverDeleteIconBackground,
   tableCellHoverDeleteIconColor,
   tableCellSelectedDeleteIconBackground,
@@ -707,6 +708,18 @@ export const hoveredDeleteButton = (props: ThemeProps) => css`
   }
 `;
 
+export const disabledCell = (props: ThemeProps) => css`
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL} {
+      position: relative;
+      border: 1px solid ${tableCellDisabledColor};
+    }
+    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_DISABLED_CELL}::after {
+      border: 1px solid ${tableCellDisabledColor};
+    }
+  }
+`;
 export const hoveredCell = (props: ThemeProps) => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {

package/src/plugins/table/utils/decoration.ts

@@ -28,6 +28,8 @@ import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';
+
 const filterDecorationByKey = (
   key: TableDecorations,
   decorationSet: DecorationSet,
@@ -66,6 +68,8 @@ export const createControlsHoverDecoration = (
   cells: Cell[],
   type: 'row' | 'column' | 'table',
   tr: Transaction | ReadonlyTransaction,
+  isDragAndDropEnable: boolean | undefined,
+  hoveredIndexes: number[],
   danger?: boolean,
   selected?: boolean,
 ): Decoration[] => {
@@ -95,6 +99,13 @@ export const createControlsHoverDecoration = (
 
   let updatedCells: number[] = cells.map((x) => x.pos);
 
+  const hasMergedCells =
+    type === 'row'
+      ? hasMergedCellsInRow(hoveredIndexes[0])(tr.selection)
+      : hasMergedCellsInColumn(hoveredIndexes[0])(tr.selection);
+
+  let disabled: boolean = hasMergedCells;
+
   // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
   // So If the table cells are in danger we want to create a "rectangle" selection
@@ -140,6 +151,9 @@ export const createControlsHoverDecoration = (
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
+    if (isDragAndDropEnable && disabled) {
+      classes.push(ClassName.HOVERED_DISABLED_CELL);
+    }
 
     classes.push(
       type === 'column'

package/src/plugins/table/utils/selection.ts

@@ -1,6 +1,10 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type {
+  Selection,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
   getSelectionRangeInColumn,