@atlaskit/editor-plugin-table 5.4.16 → 5.4.18

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -64,6 +64,7 @@ export interface TablePluginState {
     tableWrapperTarget?: HTMLElement;
     isContextualMenuOpen?: boolean;
     isInDanger?: boolean;
+    isWholeTableInDanger?: boolean;
     insertColumnButtonIndex?: number;
     insertRowButtonIndex?: number;
     isFullWidthModeEnabled?: boolean;
@@ -420,4 +421,3 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
-export type HandleTypes = 'hover' | 'selected';

package/dist/types-ts4.5/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -2,7 +2,6 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
-    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -5,7 +5,6 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
-    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -16,5 +15,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.16",
+  "version": "5.4.18",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

@@ -157,6 +157,7 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
           hoveredColumns,
           hoveredRows,
           isInDanger,
+          isWholeTableInDanger: isInDanger,
         },
       };
     },
@@ -173,6 +174,7 @@ export const clearHoverSelection = () =>
         TableDecorations.ALL_CONTROLS_HOVER,
       ),
       isInDanger: false,
+      isWholeTableInDanger: false,
     },
   }));
 

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -143,7 +143,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.containerWidth = containerWidth;
     this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     const isFullWidthModeEnabled = options
       ? options.wasFullWidthModeEnabled
       : false;

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -155,7 +155,7 @@ export const TableResizer = ({
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
-  const { isInDanger } = getPluginState(editorView.state);
+  const { isWholeTableInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
@@ -394,7 +394,9 @@ export const TableResizer = ({
       snap={guidelineSnaps}
       handlePositioning="adjacent"
       isHandleVisible={isTableSelected}
-      appearance={isInDanger && isTableSelected ? 'danger' : undefined}
+      appearance={
+        isTableSelected && isWholeTableInDanger ? 'danger' : undefined
+      }
       handleHighlight="shadow"
       handleTooltipContent={formatMessage(messages.resizeTable)}
     >

package/src/plugins/table/types.ts

@@ -109,6 +109,7 @@ export interface TablePluginState {
   tableWrapperTarget?: HTMLElement;
   isContextualMenuOpen?: boolean;
   isInDanger?: boolean;
+  isWholeTableInDanger?: boolean;
   insertColumnButtonIndex?: number;
   insertRowButtonIndex?: number;
   isFullWidthModeEnabled?: boolean;
@@ -462,5 +463,3 @@ export interface DraggableData {
   targetClosestEdge: Edge;
   direction: 1 | -1;
 }
-
-export type HandleTypes = 'hover' | 'selected';

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

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

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

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
+import { browser } from '@atlaskit/editor-common/utils';
 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';
@@ -22,7 +23,6 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
-  forceDefaultHandle?: boolean;
   previewWidth?: number;
   previewHeight?: number;
   direction?: TableDirection;
@@ -39,7 +39,6 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
-  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -65,7 +64,6 @@ export const DragHandle = ({
     isDragMenuOpen &&
     direction === 'row' &&
     hoveredCell.rowIndex === dragMenuIndex;
-
   const isCurrentColumnSelected =
     isDragMenuOpen &&
     direction === 'column' &&
@@ -86,7 +84,6 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
-    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -163,9 +160,14 @@ export const DragHandle = ({
         }}
         onClick={onClick}
       >
-        <span style={{ pointerEvents: 'none' }}>
+        {/* cannot block pointer events in Firefox as it breaks Dragging functionality */}
+        {browser.gecko ? (
           <HandleIconComponent {...handleIconProps} />
-        </span>
+        ) : (
+          <span style={{ pointerEvents: 'none' }}>
+            <HandleIconComponent {...handleIconProps} />
+          </span>
+        )}
       </button>
       {previewContainer &&
         previewWidth !== undefined &&

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -131,12 +131,13 @@ export const DragMenu = ({
   const hasMergedCells =
     direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
 
-  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
+  const shouldMoveDisabled =
+    index !== undefined && hasMergedCells(index)(selection);
 
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
-    mergedCells,
+    shouldMoveDisabled,
     tableMap,
     index,
     targetCellPosition,

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

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -14,8 +13,7 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
-import type { CellHoverMeta, HandleTypes } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -68,6 +66,14 @@ 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')
@@ -134,120 +140,6 @@ export const ColumnControls = ({
 
   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}
@@ -289,7 +181,45 @@ export const ColumnControls = ({
               />
             </div>
           ))}
-        {tableActive && !isResizing && columnHandles(hoveredCell)}
+        {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!] ?? 48}
+                previewHeight={previewHeight}
+                appearance={
+                  selectedColIndexes.includes(hoveredCell.colIndex!)
+                    ? isInDanger
+                      ? 'danger'
+                      : 'selected'
+                    : 'default'
+                }
+                onClick={handleClick}
+                onMouseOver={handleMouseOver}
+                onMouseOut={handleMouseOut}
+                onMouseUp={handleMouseUp}
+                editorView={editorView}
+              />
+            </div>
+          )}
       </div>
     </div>
   );

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

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, {
   Fragment,
@@ -21,14 +20,9 @@ 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,
-  HandleTypes,
-} from '../../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
@@ -120,6 +114,14 @@ 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,124 +163,6 @@ 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}
@@ -335,7 +219,38 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell)}
+      {!isResizing && isTableHovered && 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>
+      )}
     </div>
   );
 };