@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

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

@@ -9,6 +9,7 @@ import {
 type HandleIconProps = {
   hasMergedCells: boolean;
   direction: 'row' | 'column';
+  forceDefaultHandle: boolean;
   isDragMenuOpen: boolean | undefined;
   isRowHandleHovered: boolean;
   isColumnHandleHovered: boolean;
@@ -20,6 +21,7 @@ type HandleIconProps = {
 export const HandleIconComponent = (props: HandleIconProps) => {
   const {
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -29,22 +31,21 @@ export const HandleIconComponent = (props: HandleIconProps) => {
     dragMenuDirection,
   } = props;
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
+
   const isCurrentRowOrColumnSelected =
     isCurrentRowSelected || isCurrentColumnSelected;
+
   const isDragMenuOpenOnCurrentRowOrColumn =
     isDragMenuOpen &&
     dragMenuDirection === direction &&
     isCurrentRowOrColumnSelected;
 
-  const showNormalHandle = hasMergedCells ? (
-    <DragHandleDisabledIcon />
-  ) : (
-    <DragHandleIcon />
-  );
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (
+    forceDefaultHandle ||
+    isHandleHovered ||
+    isDragMenuOpenOnCurrentRowOrColumn
+  ) {
+    return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;
   }
 
   return <MinimisedHandleIcon />;

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

@@ -22,6 +22,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
+  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -38,6 +39,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -63,6 +65,7 @@ export const DragHandle = ({
     isDragMenuOpen &&
     direction === 'row' &&
     hoveredCell.rowIndex === dragMenuIndex;
+
   const isCurrentColumnSelected =
     isDragMenuOpen &&
     direction === 'column' &&
@@ -83,6 +86,7 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,

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';
 
@@ -13,7 +14,8 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
+import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -30,6 +32,7 @@ export interface ColumnControlsProps {
   rowHeights?: number[];
   colWidths?: (number | undefined)[];
   hasHeaderColumn?: boolean;
+  isTableHovered?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -55,6 +58,7 @@ export const ColumnControls = ({
   rowHeights,
   colWidths,
   hasHeaderColumn,
+  isTableHovered,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
@@ -64,14 +68,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')
@@ -109,11 +105,15 @@ export const ColumnControls = ({
 
       // update hovered cell location
       const { state, dispatch } = editorView;
-      if (tableActive && hoveredCell?.colIndex !== Number(colIndex)) {
-        hoverCell(hoveredCell?.rowIndex, Number(colIndex))(state, dispatch);
+      if (tableActive) {
+        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+        // of the opposite dimension. For example; here when we mouse over the column drag handle then we're technically
+        // also hovering over row 0 index. And vice-versa with rows. This means we don't need to worry about knowing the
+        // current row index. We can just force it to 0.
+        hoverCell(0, Number(colIndex))(state, dispatch);
       }
     },
-    [editorView, hoveredCell?.colIndex, hoveredCell?.rowIndex, tableActive],
+    [editorView, tableActive],
   );
 
   const handleMouseOut = useCallback(() => {
@@ -132,6 +132,122 @@ export const ColumnControls = ({
     return [colIndex!];
   }, [colIndex]);
 
+  const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
+
+  const generateHandleByType = useCallback(
+    (type: HandleTypes): JSX.Element | null => {
+      if (!hoveredCell) {
+        return null;
+      }
+      const { isDragMenuOpen, dragMenuIndex, dragMenuDirection } =
+        getDragDropPluginState(editorView.state);
+      const isHover = type === 'hover';
+
+      const isHoveredOnSelectedColumn =
+        isDragMenuOpen &&
+        dragMenuDirection === 'column' &&
+        dragMenuIndex === colIndex;
+
+      const showCondition = isHover
+        ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell?.colIndex)
+        : isDragMenuOpen && dragMenuDirection === 'column';
+
+      if (!showCondition) {
+        return null;
+      }
+
+      const selectedColumnPosition = `${dragMenuIndex + 1} / span ${
+        selectedColIndexes.length
+      }`;
+
+      const gridColumnPosition = selectedColIndexes.includes(colIndex!)
+        ? `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`
+        : `${colIndex! + 1} / span 1`;
+
+      const selectedApprearance = isInDanger ? 'danger' : 'selected';
+      const hoveredAppearance = selectedColIndexes.includes(colIndex!)
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'default';
+
+      return (
+        showCondition && (
+          <div
+            key={type}
+            style={{
+              gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+              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'
+                : 'table-floating-column-control-selected'
+            }
+          >
+            <DragHandle
+              direction="column"
+              tableLocalId={localId || ''}
+              indexes={isHover ? colIndexes : selectedColIndexes}
+              forceDefaultHandle={!isHover}
+              previewWidth={colWidths?.[colIndex!] ?? 48}
+              previewHeight={previewHeight}
+              appearance={isHover ? hoveredAppearance : selectedApprearance}
+              onClick={handleClick}
+              onMouseOver={handleMouseOver}
+              onMouseOut={handleMouseOut}
+              onMouseUp={handleMouseUp}
+              editorView={editorView}
+            />
+          </div>
+        )
+      );
+    },
+    [
+      colIndex,
+      previewHeight,
+      colWidths,
+      colIndexes,
+      editorView,
+      handleClick,
+      handleMouseOut,
+      handleMouseOver,
+      handleMouseUp,
+      hoveredCell,
+      isInDanger,
+      localId,
+      selectedColIndexes,
+    ],
+  );
+
+  const columnHandles = useCallback(
+    (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();
+    },
+    [generateHandleByType, selectedColIndexes],
+  );
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -173,44 +289,7 @@ export const ColumnControls = ({
               />
             </div>
           ))}
-        {tableActive &&
-          !isResizing &&
-          !!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={hoveredCell.colWidth}
-                previewHeight={hoveredCell.colHeight}
-                appearance={
-                  selectedColIndexes.includes(hoveredCell.colIndex!)
-                    ? isInDanger
-                      ? 'danger'
-                      : 'selected'
-                    : 'default'
-                }
-                onClick={handleClick}
-                onMouseOver={handleMouseOver}
-                onMouseOut={handleMouseOut}
-                onMouseUp={handleMouseUp}
-                editorView={editorView}
-              />
-            </div>
-          )}
+        {tableActive && !isResizing && columnHandles(hoveredCell)}
       </div>
     </div>
   );

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

@@ -34,6 +34,7 @@ export interface Props {
   isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
+  isTableHovered?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -47,6 +48,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   stickyHeader,
   selection,
   isInDanger,
+  isTableHovered,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -130,6 +132,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         tableRef={tableRef}
         isResizing={isResizing}
         tableActive={tableActive}
+        isTableHovered={isTableHovered}
         stickyTop={tableActive ? stickyTop : undefined}
         localId={currentNodeLocalId}
         isInDanger={isInDanger}

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,
@@ -20,9 +21,14 @@ import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 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,
@@ -41,6 +47,7 @@ type DragControlsProps = {
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
   isResizing?: boolean;
+  isTableHovered?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -66,6 +73,7 @@ const DragControlsComponent = ({
   editorView,
   isInDanger,
   isResizing,
+  isTableHovered,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
@@ -112,14 +120,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;
@@ -161,6 +161,124 @@ const DragControlsComponent = ({
     [rowIndex, selectRow],
   );
 
+  const generateHandleByType = useCallback(
+    (type: HandleTypes): JSX.Element | null => {
+      if (!hoveredCell) {
+        return null;
+      }
+      const { isDragMenuOpen, dragMenuIndex, dragMenuDirection } =
+        getDragDropPluginState(editorView.state);
+      const isHover = type === 'hover';
+
+      const isHoveredOnSelectedRow =
+        isDragMenuOpen &&
+        dragMenuDirection === 'row' &&
+        dragMenuIndex === rowIndex;
+
+      const showCondition = isHover
+        ? !isHoveredOnSelectedRow &&
+          !selectedRowIndexes.includes(rowIndex!) &&
+          Number.isFinite(hoveredCell?.colIndex)
+        : isDragMenuOpen &&
+          dragMenuDirection === 'row' &&
+          Number.isFinite(hoveredCell?.colIndex);
+
+      if (!showCondition) {
+        return null;
+      }
+
+      const gridRowPosition =
+        // if more than one row is selected, ensure the handle spans over the selected range
+        selectedRowIndexes.includes(rowIndex!)
+          ? `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`
+          : `${rowIndex! + 1} / span 1`;
+
+      const selectedRowPosition = `${dragMenuIndex + 1} / span ${
+        selectedRowIndexes.length
+      }`;
+
+      const selectedApprearance = isInDanger ? 'danger' : 'selected';
+      const hoveredAppearance = selectedRowIndexes.includes(rowIndex!)
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'default';
+
+      return (
+        showCondition && (
+          <div
+            key={type}
+            style={{
+              gridRow: isHover ? gridRowPosition : selectedRowPosition,
+              gridColumn: '2',
+              display: 'flex',
+              height: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            data-testid={
+              isHover
+                ? 'table-floating-row-drag-handle'
+                : 'table-floating-row-control-selected'
+            }
+          >
+            <DragHandle
+              direction="row"
+              tableLocalId={currentNodeLocalId}
+              indexes={isHover ? rowIndexes : selectedRowIndexes}
+              forceDefaultHandle={!isHover}
+              previewWidth={tableWidth}
+              previewHeight={rowHeights[rowIndex!]}
+              appearance={isHover ? hoveredAppearance : selectedApprearance}
+              onClick={handleClick}
+              onMouseOver={handleMouseOver}
+              onMouseOut={handleMouseOut}
+              onMouseUp={onMouseUp}
+              editorView={editorView}
+            />
+          </div>
+        )
+      );
+    },
+    [
+      currentNodeLocalId,
+      editorView,
+      handleClick,
+      handleMouseOut,
+      handleMouseOver,
+      hoveredCell,
+      isInDanger,
+      onMouseUp,
+      rowHeights,
+      rowIndex,
+      rowIndexes,
+      selectedRowIndexes,
+      tableWidth,
+    ],
+  );
+
+  const rowHandles = useCallback(
+    (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();
+    },
+    [generateHandleByType, selectedRowIndexes],
+  );
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -217,38 +335,7 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && Number.isFinite(rowIndex) && (
-        <div
-          style={{
-            gridRow: gridRowPosition,
-            gridColumn: '2',
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-          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}
-          />
-        </div>
-      )}
+      {!isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell)}
     </div>
   );
 };

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

@@ -7,7 +7,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverCell, hoverRows, selectRow } from '../../commands';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
@@ -24,6 +23,7 @@ export interface Props {
   tableNode?: PmNode;
   tableActive?: boolean;
   isInDanger?: boolean;
+  isTableHovered?: boolean;
   isResizing?: boolean;
   isHeaderRowEnabled?: boolean;
   isHeaderColumnEnabled?: boolean;
@@ -105,6 +105,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       headerRowHeight,
       stickyHeader,
       hoveredCell,
+      isTableHovered,
     } = this.props;
     return (
       this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
@@ -121,7 +122,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       isSelectionUpdated(selection!, nextProps.selection) ||
       headerRowHeight !== nextProps.headerRowHeight ||
       stickyHeader !== nextProps.stickyHeader ||
-      hoveredCell !== nextProps.hoveredCell
+      hoveredCell !== nextProps.hoveredCell ||
+      isTableHovered !== nextProps.isTableHovered
     );
   }
 
@@ -147,6 +149,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader,
       isDragAndDropEnabled,
       hoveredCell,
+      isTableHovered,
     } = this.props;
 
     if (!tableRef) {
@@ -196,6 +199,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                     tableRef={tableRef}
                     tableNode={tableNode}
                     hoveredCell={hoveredCell}
+                    isTableHovered={isTableHovered}
                     editorView={editorView}
                     tableActive={tableActive}
                     isInDanger={isInDanger}
@@ -256,10 +260,13 @@ export default class TableFloatingControls extends Component<Props, State> {
   private updateCellHoverLocation = (rowIndex: number) => {
     const { editorView, tableActive } = this.props;
     const { state, dispatch } = editorView;
-    const { hoveredCell } = getPluginState(state);
 
-    if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-      hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+    if (tableActive) {
+      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+      // current column index. We can just force it to 0.
+      hoverCell(rowIndex, 0)(state, dispatch);
     }
   };
 }

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

@@ -264,3 +264,25 @@ export const getTop = (element: HTMLElement | Window | undefined): number => {
 
   return element?.getBoundingClientRect?.()?.top ?? 0;
 };
+
+export const findNearestCellIndexToPoint = (
+  x: number,
+  y: number,
+): { row: number; col: number } | undefined => {
+  const elements = document.elementsFromPoint(x, y);
+  const cell = elements.find(
+    (el) =>
+      el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH',
+  ) as HTMLTableCellElement | undefined;
+  const row = (cell?.parentElement ?? undefined) as
+    | HTMLTableRowElement
+    | undefined;
+
+  if (!Number.isFinite(row?.rowIndex) || !Number.isFinite(cell?.cellIndex)) {
+    return undefined;
+  }
+  return {
+    row: row!.rowIndex,
+    col: cell!.cellIndex,
+  };
+};

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

@@ -57,6 +57,7 @@ export {
   updateResizeHandles,
   isResizeHandleDecoration,
   hasResizeHandler,
+  findNearestCellIndexToPoint,
 } from './dom';
 export {
   convertHTMLCellIndexToColumnIndex,