@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

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

@@ -9,12 +9,17 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
+import {
+  getRowHeights,
+  getRowsParams,
+  getSelectedRowIndexes,
+} from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 type DragControlsProps = {
@@ -24,6 +29,8 @@ type DragControlsProps = {
   tableActive?: boolean;
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
+  isResizing?: boolean;
+  hasHeaderRow?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -47,11 +54,14 @@ const DragControlsComponent = ({
   tableActive,
   editorView,
   isInDanger,
+  isResizing,
+  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const rowHeights = getRowHeights(tableRef);
+  const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
@@ -83,25 +93,21 @@ const DragControlsComponent = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      // avoid updating if event target is drag handle
-      if (
-        !(e.nativeEvent.target as Element).classList.contains(
-          ClassName.ROW_CONTROLS_WITH_DRAG,
-        )
-      ) {
+      const isParentDragControls = (e.nativeEvent.target as Element).closest(
+        `.${ClassName.DRAG_ROW_CONTROLS}`,
+      );
+      const rowIndex = (e.nativeEvent.target as Element).getAttribute(
+        'data-start-index',
+      );
+
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !rowIndex) {
         return;
       }
 
-      const hoverHeight = e.nativeEvent.offsetY;
-      let totalHeight = 0;
-      const rowIndex = rowHeights.findIndex((row) => {
-        totalHeight += row;
-        return hoverHeight <= totalHeight;
-      });
-
-      updateCellHoverLocation(rowIndex);
+      updateCellHoverLocation(Number(rowIndex));
     },
-    [updateCellHoverLocation, rowHeights],
+    [updateCellHoverLocation],
   );
 
   const handleMouseOver = useCallback(() => {
@@ -117,13 +123,37 @@ const DragControlsComponent = ({
 
   return (
     <div
-      className={ClassName.ROW_CONTROLS_WITH_DRAG}
+      className={ClassName.DRAG_ROW_CONTROLS}
       style={{
         gridTemplateRows: heights,
       }}
       onMouseMove={handleMouseMove}
     >
-      {Number.isFinite(rowIndex) && (
+      {!isResizing &&
+        rowsParams.map(({ startIndex, endIndex }, index) => (
+          <div
+            style={{
+              gridRow: `${index + 1} / span 1`,
+            }}
+            data-start-index={startIndex}
+            data-end-index={endIndex}
+            className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
+            contentEditable={false}
+            key={index}
+          >
+            {!hasHeaderRow && index === 0 && (
+              <div
+                style={{
+                  top: '0px',
+                  left: token('space.075', '6px'),
+                }}
+                className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
+              />
+            )}
+            <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
+          </div>
+        ))}
+      {!isResizing && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: gridRowPosition,
@@ -132,6 +162,7 @@ const DragControlsComponent = ({
             alignItems: 'center',
             justifyContent: 'center',
           }}
+          data-testid="table-floating-row-drag-handle"
         >
           <DragHandle
             tableLocalId={tableNode?.attrs?.localId ?? ''}

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

@@ -166,6 +166,8 @@ export default class TableFloatingControls extends Component<Props, State> {
                 editorView={editorView}
                 tableActive={tableActive}
                 isInDanger={isInDanger}
+                isResizing={isResizing}
+                hasHeaderRow={hasHeaderRow}
                 hoverRows={this.hoverRows}
                 selectRow={this.selectRow}
                 updateCellHoverLocation={this.updateCellHoverLocation}

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

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  dragInsertButtonWrapper,
   floatingColumnControls,
   HeaderButton,
   HeaderButtonDanger,
@@ -357,6 +358,8 @@ export const tableStyles = (
       ${insertRowButtonWrapper(props)}
     }
 
+    ${dragInsertButtonWrapper(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -700,12 +703,64 @@ export const tableStyles = (
       )}
     }
 
-    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_ROW_CONTROLS} {
       display: grid;
       align-items: center;
       position: absolute;
       left: -4px;
       z-index: ${akEditorUnitZIndex};
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        align-self: end;
+        position: absolute;
+        height: 100%;
+        width: 24px;
+      }
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+        position: absolute;
+        bottom: -3px;
+        left: 6px;
+        background-color: ${token(
+          'color.background.accent.gray.subtler',
+          '#C1C7D0',
+        )};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+      }
+    }
+
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        height: 24px;
+        position: absolute;
+        top: ${token('space.negative.150', '-12px')};
+        z-index: ${akEditorUnitZIndex};
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+        position: absolute;
+        height: 24px;
+        width: 100%;
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+        background-color: ${token(
+          'color.background.accent.gray.subtler',
+          '#C1C7D0',
+        )};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+        position: absolute;
+        right: -2px;
+      }
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
+      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+      bottom: -1px;
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
@@ -719,10 +774,10 @@ export const tableStyles = (
       display: flex;
       justify-content: center;
       align-items: center;
+      outline: none !important;
 
       svg {
         rect {
-          //
           fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
         }
         g {

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

@@ -180,6 +180,32 @@ const InsertButtonHover = () => css`
   }
 `;
 
+export const dragInsertButtonWrapper = (props: ThemeProps) => css`
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+    position: absolute;
+    z-index: ${akEditorUnitZIndex + 10};
+    bottom: -5px;
+    left: 3px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
+    ${Button(`
+    background: ${token('elevation.surface.overlay', 'white')};
+    color: ${token('color.icon', N300)};
+    border: 1px solid ${token(
+      'color.background.accent.gray.subtler',
+      '#C1C7D0',
+    )};
+    border-radius: 50%;
+  `)}
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
+    background: ${token('color.background.brand.bold', B300)};
+    border: 1px solid ${token('color.background.brand.bold', B300)};
+    color: ${token('color.icon.inverse', 'white')};
+    cursor: pointer;
+  }
+`;
+
 export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -388,7 +414,7 @@ export const floatingColumnControls = (props: ThemeProps) => {
       }
     }
 
-    .${ClassName.COLUMN_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {

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

@@ -40,10 +40,6 @@ export const isRowControlsButton = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
   containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 
-export const isRowDragControlsButton = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) ||
-  closestElement(node, `.${ClassName.ROW_CONTROLS_WITH_DRAG}`);
-
 export const isResizeHandleDecoration = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 
@@ -55,6 +51,17 @@ export const isTableContainerOrWrapper = (node: HTMLElement | null): boolean =>
   containsClassName(node, ClassName.TABLE_CONTAINER) ||
   containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
+/** drag-and-drop classes */
+export const isRowDragControlsButton = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_ROW_CONTROLS) ||
+  closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+
+export const isDragRowFloatingInsertDot = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+
+export const isDragColumnFloatingInsertDot = (node: HTMLElement | null) =>
+  containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:

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

@@ -48,6 +48,8 @@ export {
   isTableContainerOrWrapper,
   isRowDragControlsButton,
   isRowControlsButton,
+  isDragColumnFloatingInsertDot,
+  isDragRowFloatingInsertDot,
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,

package/tsconfig.app.json

@@ -75,6 +75,9 @@
     {
       "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
     },
+    {
+      "path": "../../pragmatic-drag-and-drop/react-beautiful-dnd-autoscroll/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/primitives/tsconfig.app.json"
     },