@atlaskit/editor-plugin-table 5.3.26 → 5.3.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.26",
+  "version": "5.3.28",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.19.0",
+    "@atlaskit/editor-common": "^76.20.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugins/table/commands/hover.ts

@@ -6,7 +6,7 @@ import {
   getCellsInRow,
 } from '@atlaskit/editor-tables/utils';
 
-import { createCommand } from '../pm-plugins/plugin-factory';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableDecorations } from '../types';
 import {
@@ -57,13 +57,18 @@ export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
       const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
+
+      const { isDragAndDropEnabled } = getPluginState(state);
       if (!cells) {
         return false;
       }
+
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredColumns,
         isInDanger,
       );
 
@@ -90,10 +95,13 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredRows,
         isInDanger,
       );
 
@@ -127,10 +135,13 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
         state.tr,
+        isDragAndDropEnabled,
+        [],
         isInDanger,
         isSelected,
       );

package/src/plugins/table/event-handlers.ts

@@ -41,6 +41,7 @@ import {
   showInsertRowButton,
   showResizeHandleLine,
 } from './commands';
+import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -299,7 +300,9 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   if (isDragAndDropEnabled) {
-    hoverCell()(state, dispatch);
+    const { isDragMenuOpen } = getDragDropPluginState(state);
+    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
+    !isDragMenuOpen && hoverCell()(state, dispatch);
   }
 
   if (

package/src/plugins/table/types.ts

@@ -325,6 +325,9 @@ export const TableCssClassName = {
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
 
+  /** disabled classes */
+  DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
@@ -334,6 +337,7 @@ export const TableCssClassName = {
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
   HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
+  HOVERED_DISABLED_CELL: `${tablePrefixSelector}-hovered-disabled`,
   HOVERED_CELL_IN_DANGER: 'danger',
   HOVERED_CELL_ACTIVE: 'active',
   HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -1,16 +1,19 @@
 import type { MouseEventHandler } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
-import { DragHandleIcon } from '../icons';
+import { DragHandleDisabledIcon, DragHandleIcon } from '../icons';
 
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
@@ -25,6 +28,7 @@ type DragHandleProps = {
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
   onMouseUp?: MouseEventHandler;
+  editorView: EditorView;
 };
 
 export const DragHandle = ({
@@ -38,17 +42,32 @@ export const DragHandle = ({
   onMouseOut,
   onMouseUp,
   onClick,
+  editorView,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
+  const { isDragAndDropEnabled } = getPluginState(editorView.state);
+  const { selection } = editorView.state;
+
+  const hasMergedCells = useMemo(
+    () =>
+      direction === 'row'
+        ? hasMergedCellsInRow(indexes[0])(selection)
+        : hasMergedCellsInColumn(indexes[0])(selection),
+    [indexes, direction, selection],
+  );
 
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
+
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
+        canDrag: () => {
+          return !hasMergedCells;
+        },
         getInitialData() {
           return {
             localId: tableLocalId,
@@ -75,11 +94,23 @@ export const DragHandle = ({
         },
       });
     }
-  }, [tableLocalId, direction, indexes]);
+  }, [
+    tableLocalId,
+    direction,
+    indexes,
+    editorView.state.selection,
+    hasMergedCells,
+  ]);
 
   return (
     <button
-      className={classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance)}
+      className={classnames(
+        ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+        appearance,
+        isDragAndDropEnabled &&
+          hasMergedCells &&
+          ClassName.DRAG_HANDLE_DISABLED,
+      )}
       ref={dragHandleDivRef}
       style={{
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -91,7 +122,7 @@ export const DragHandle = ({
       onMouseUp={onMouseUp}
       onClick={onClick}
     >
-      <DragHandleIcon />
+      {hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />}
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -174,6 +174,7 @@ export const ColumnControls = ({
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
                 onMouseUp={handleMouseUp}
+                editorView={editorView}
               />
             </div>
           )}

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

@@ -180,6 +180,7 @@ const DragControlsComponent = ({
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
             onMouseUp={onMouseUp}
+            editorView={editorView}
           />
         </div>
       )}

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

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  disabledCell,
   dragCornerControlButton,
   dragInsertButtonWrapper,
   floatingColumnControls,
@@ -315,6 +316,7 @@ export const tableStyles = (
     ${columnControlsLineMarker()};
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
+    ${disabledCell(props)};
     ${hoveredWarningCell};
     ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
@@ -779,58 +781,49 @@ export const tableStyles = (
       align-items: center;
       outline: none !important;
 
-      svg {
-        rect {
-          fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-        }
-        g {
-          fill: ${token('color.icon.subtle', '#626F86')};
-        }
-      }
-
-      &:hover {
-        svg {
+      &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+        & > svg {
           rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
           }
           g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+            fill: ${token('color.icon.subtle', '#626F86')};
           }
         }
-      }
 
-      &.selected {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
-          }
-          g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+        &:hover {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#FFF')};
+            }
           }
         }
-      }
 
-      &.danger {
-        svg {
-          rect {
-            fill: ${token(
-              'color.background.accent.red.subtler.pressed',
-              '#F87462',
-            )};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.selected {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579dff')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#fff')};
+            }
           }
         }
-      }
 
-      &.disabled {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.danger {
+          svg {
+            rect {
+              fill: ${token(
+                'color.background.accent.red.subtler.pressed',
+                '#F87462',
+              )};
+            }
+            g {
+              fill: ${token('color.border.inverse', '#FFF')};
+            }
           }
         }
       }

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

@@ -97,6 +97,12 @@ export const tableCellDeleteColor = themed({
   light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
   dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
 });
+
+export const tableCellDisabledColor = token(
+  'color.background.accent.gray.subtler.hovered',
+  '#C1C7D0',
+);
+
 export const tableBorderDeleteColor = themed({
   light: token('color.border.danger', R400),
   dark: token('color.border.danger', R400),

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,