@atlaskit/editor-plugin-table 5.5.1 → 5.5.3

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

@@ -7,48 +7,23 @@ import {
 } from '../icons';
 
 type HandleIconProps = {
-  canDrag: boolean;
-  hasMergedCells: boolean;
-  direction: 'row' | 'column';
-  isDragMenuOpen: boolean | undefined;
+  forceDefaultHandle: boolean;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
-  isCurrentRowSelected: boolean;
-  isCurrentColumnSelected: boolean;
-  dragMenuDirection: 'row' | 'column' | undefined;
+  hasMergedCells: boolean;
 };
 
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
-    canDrag,
-    direction,
-    isDragMenuOpen,
+    forceDefaultHandle,
     isRowHandleHovered,
     isColumnHandleHovered,
     hasMergedCells,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
-  const isCurrentRowOrColumnSelected =
-    isCurrentRowSelected || isCurrentColumnSelected;
-  const isDragMenuOpenOnCurrentRowOrColumn =
-    isDragMenuOpen &&
-    dragMenuDirection === direction &&
-    isCurrentRowOrColumnSelected;
-
-  const isDragPossible = canDrag && !hasMergedCells;
-
-  const showNormalHandle = !isDragPossible ? (
-    <DragHandleDisabledIcon />
-  ) : (
-    <DragHandleIcon />
-  );
 
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (isHandleHovered || forceDefaultHandle) {
+    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
   }
 
   return <MinimisedHandleIcon />;

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

@@ -9,7 +9,6 @@ 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 as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
@@ -23,6 +22,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -40,6 +40,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -53,24 +54,11 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
-  const { hoveredColumns, hoveredRows, hoveredCell } = getPluginState(
-    editorView.state,
-  );
 
-  const { dragMenuDirection, isDragMenuOpen, dragMenuIndex } =
-    getDragDropPluginState(editorView.state);
+  const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
 
-  const isCurrentRowSelected =
-    isDragMenuOpen &&
-    direction === 'row' &&
-    hoveredCell.rowIndex === dragMenuIndex;
-  const isCurrentColumnSelected =
-    isDragMenuOpen &&
-    direction === 'column' &&
-    hoveredCell.colIndex === dragMenuIndex;
-
   const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   const isColumnHandleHovered =
     direction === 'column' && hoveredColumns.length > 0;
@@ -84,15 +72,10 @@ export const DragHandle = ({
   );
 
   const handleIconProps = {
-    canDrag,
-    hasMergedCells,
-    direction,
-    isDragMenuOpen,
-    isRowHandleHovered,
+    forceDefaultHandle,
     isColumnHandleHovered,
-    isCurrentRowSelected,
-    isCurrentColumnSelected,
-    dragMenuDirection,
+    isRowHandleHovered,
+    hasMergedCells,
   };
 
   useEffect(() => {

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -14,7 +15,7 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -69,14 +70,6 @@ export const ColumnControls = ({
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex!)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex! + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
-
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow
     ? firstRow.getAttribute('data-header-row')
@@ -143,6 +136,114 @@ export const ColumnControls = ({
 
   const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
+  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
+    if (!hoveredCell || !colWidths?.length) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isColumnsSelected = selectedColIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isColumnsSelected &&
+        !selectedColIndexes.includes(colIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedColIndexes.length < colWidths?.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridColumnPosition = `${colIndex! + 1} / span 1`;
+    const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${
+      selectedColIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedColIndexes.includes(colIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionApprearance = isColumnsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const istSelecting = isColumnsSelected && !isHover;
+
+    // this indexes are used to calculate the drag and drop source
+    const indexes = isColumnsSelected
+      ? isHover
+        ? colIndexes
+        : selectedColIndexes
+      : colIndexes;
+
+    return (
+      showCondition && (
+        <div
+          key={type}
+          style={{
+            gridColumn: istSelecting
+              ? selectedColumnPosition
+              : gridColumnPosition,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 'fit-content',
+            placeSelf: 'center',
+            zIndex: 99,
+          }}
+          data-column-control-index={hoveredCell.colIndex}
+          data-testid={
+            isHover
+              ? 'table-floating-column-control-hover'
+              : 'table-floating-column-control'
+          }
+        >
+          <DragHandle
+            direction="column"
+            tableLocalId={localId || ''}
+            indexes={indexes}
+            forceDefaultHandle={isHover ? false : isColumnsSelected}
+            previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+            previewHeight={previewHeight}
+            appearance={
+              istSelecting ? currentSelectionApprearance : hoveredAppearance
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+            onMouseUp={handleMouseUp}
+            editorView={editorView}
+            canDrag={canDrag}
+          />
+        </div>
+      )
+    );
+  };
+
+  const columnHandles = (hoveredCell: CellHoverMeta | undefined) => {
+    if (!hoveredCell) {
+      return null;
+    }
+
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+
+    const sortedHandles = [
+      generateHandleByType('hover'),
+      generateHandleByType('selected'),
+    ];
+
+    return hoveredCell.colIndex < selectedColIndexes[0]
+      ? sortedHandles
+      : sortedHandles.reverse();
+  };
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -185,45 +286,9 @@ export const ColumnControls = ({
             </div>
           ))}
         {tableActive &&
-          !isResizing &&
           isTableHovered &&
-          !!hoveredCell &&
-          Number.isFinite(hoveredCell.colIndex) && (
-            <div
-              style={{
-                gridColumn: gridColumnPosition,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: 'fit-content',
-                placeSelf: 'center',
-                zIndex: 99,
-              }}
-              data-column-control-index={hoveredCell.colIndex}
-              data-testid="table-floating-column-control"
-            >
-              <DragHandle
-                direction="column"
-                tableLocalId={localId || ''}
-                indexes={colIndexes}
-                previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
-                previewHeight={previewHeight}
-                appearance={
-                  selectedColIndexes.includes(hoveredCell.colIndex!)
-                    ? isInDanger
-                      ? 'danger'
-                      : 'selected'
-                    : 'default'
-                }
-                onClick={handleClick}
-                onMouseOver={handleMouseOver}
-                onMouseOut={handleMouseOut}
-                onMouseUp={handleMouseUp}
-                editorView={editorView}
-                canDrag={canDrag}
-              />
-            </div>
-          )}
+          !isResizing &&
+          columnHandles(hoveredCell)}
       </div>
     </div>
   );

package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -81,9 +81,9 @@ export default class NumberColumn extends Component<Props, any> {
     );
   }
 
-  private hoverRows = (index: number) =>
-    this.props.tableActive ? this.props.hoverRows([index]) : null;
-
+  private hoverRows = (index: number) => {
+    return this.props.tableActive ? this.props.hoverRows([index]) : null;
+  };
   private selectRow = (
     index: number,
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, {
   Fragment,
@@ -22,7 +23,11 @@ import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
-import type { CellHoverMeta, DraggableSourceData } from '../../../types';
+import type {
+  CellHoverMeta,
+  DraggableSourceData,
+  HandleTypes,
+} from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
@@ -116,14 +121,6 @@ const DragControlsComponent = ({
 
   const rowIndex = hoveredCell?.rowIndex;
 
-  const gridRowPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex!)) {
-      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    }
-    return `${rowIndex! + 1} / span 1`;
-  }, [rowIndex, selectedRowIndexes]);
-
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const { state, dispatch } = editorView;
@@ -165,6 +162,111 @@ const DragControlsComponent = ({
     [rowIndex, selectRow],
   );
 
+  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
+    if (!hoveredCell) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isRowsSelected = selectedRowIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isRowsSelected &&
+        !selectedRowIndexes.includes(rowIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedRowIndexes.length < rowHeights.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridRowPosition = `${rowIndex! + 1} / span 1`;
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    const selectedRowPosition = `${selectedRowIndexes[0] + 1} / span ${
+      selectedRowIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedRowIndexes.includes(rowIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionAppearance = isRowsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const isSelecting = isRowsSelected && !isHover;
+
+    const indexes = isRowsSelected
+      ? isHover
+        ? rowIndexes
+        : selectedRowIndexes
+      : 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={
+            isHover
+              ? 'table-floating-row-drag-handle-hover'
+              : 'table-floating-row-drag-handle'
+          }
+        >
+          <DragHandle
+            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>
+      )
+    );
+  };
+
+  const rowHandles = (hoveredCell: CellHoverMeta | undefined) => {
+    if (!hoveredCell) {
+      return null;
+    }
+
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+
+    const sortedHandles = [
+      generateHandleByType('hover'),
+      generateHandleByType('selected'),
+    ];
+
+    return hoveredCell.rowIndex < selectedRowIndexes[0]
+      ? sortedHandles
+      : sortedHandles.reverse();
+  };
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -221,39 +323,11 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && isTableHovered && Number.isFinite(rowIndex) && (
-        <div
-          style={{
-            gridRow: 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
-            tableLocalId={currentNodeLocalId}
-            indexes={rowIndexes}
-            previewWidth={tableWidth}
-            previewHeight={rowHeights[rowIndex!]}
-            appearance={
-              selectedRowIndexes.includes(rowIndex!)
-                ? isInDanger
-                  ? 'danger'
-                  : 'selected'
-                : 'default'
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={onMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )}
+      {tableActive &&
+        isTableHovered &&
+        !isResizing &&
+        Number.isFinite(rowIndex) &&
+        rowHandles(hoveredCell)}
     </div>
   );
 };

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

@@ -717,9 +717,10 @@ export const tableStyles = (
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
-        position: relative;
+        position: absolute;
         align-self: end;
         height: 100%;
+        width: 18px;
       }
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {