@atlaskit/editor-plugin-table 5.3.29 → 5.3.31

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

@@ -1,5 +1,11 @@
 import type { MouseEvent } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { injectIntl } from 'react-intl-next';
 import type { WrappedComponentProps } from 'react-intl-next';
@@ -9,27 +15,32 @@ 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 { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import type { CellHoverMeta } from '../../../types';
+import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
   getSelectedRowIndexes,
 } from '../../../utils';
+import { dropTargetExtendedWidth } from '../../consts';
 import { DragHandle } from '../../DragHandle';
+import RowDropTarget from '../RowDropTarget';
 
 type DragControlsProps = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
   tableNode?: PmNode;
+  tableWidth: number;
   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;
@@ -49,21 +60,47 @@ const getSelectedRows = (selection: Selection) => {
 const DragControlsComponent = ({
   tableRef,
   tableNode,
+  tableWidth,
   hoveredCell,
   tableActive,
   editorView,
   isInDanger,
   isResizing,
-  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
   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;
+  const currentNodeLocalId = tableNode?.attrs?.localId ?? '';
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({ source }) {
+        const { type, localId, indexes } =
+          source.data as Partial<DraggableSourceData>;
+
+        if (!indexes || !localId || type !== 'table-row') {
+          return false;
+        }
+
+        const { tableNode } = getTablePluginState(editorView.state);
+        // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+        // watch for changes
+        return localId === tableNode?.attrs.localId;
+      },
+      onDragStart() {
+        setIsDragging(true);
+      },
+      onDrop() {
+        setIsDragging(false);
+      },
+    });
+  }, [editorView]);
 
   const onMouseUp = useCallback(() => {
     toggleDragMenu(
@@ -125,23 +162,28 @@ const DragControlsComponent = ({
       className={ClassName.DRAG_ROW_CONTROLS}
       style={{
         gridTemplateRows: heights,
+        gridTemplateColumns: isDragging
+          ? `${dropTargetExtendedWidth}px 24px ${tableWidth}px`
+          : `${dropTargetExtendedWidth}px 24px`,
       }}
       onMouseMove={handleMouseMove}
     >
       {!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}
-          >
-            {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
-            {/* {!hasHeaderRow && index === 0 && (
+          <Fragment key={index}>
+            <div
+              style={{
+                gridRow: `${index + 1} / span 1`,
+                gridColumn: '2',
+              }}
+              data-start-index={startIndex}
+              data-end-index={endIndex}
+              className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
+              contentEditable={false}
+              key={index}
+            >
+              {/* TODO: Disabling first column insert button https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50 */}
+              {/* {!hasHeaderRow && index === 0 && (
               <div
                 style={{
                   top: '0px',
@@ -150,13 +192,30 @@ const DragControlsComponent = ({
                 className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
               />
             )} */}
-            <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
-          </div>
+              <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
+            </div>
+            {isDragging && (
+              <RowDropTarget
+                key={index}
+                index={index}
+                localId={currentNodeLocalId}
+                style={{
+                  gridColumn: '1 / span 3',
+                  gridRow: `${index + 1} / span 1`,
+                  height: '100%',
+                  pointerEvents: 'auto',
+                  position: 'relative',
+                  left: token('space.negative.100', '-8px'),
+                }}
+              />
+            )}
+          </Fragment>
         ))}
       {!isResizing && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: gridRowPosition,
+            gridColumn: '2',
             display: 'flex',
             height: '100%',
             alignItems: 'center',
@@ -165,9 +224,9 @@ const DragControlsComponent = ({
           data-testid="table-floating-row-drag-handle"
         >
           <DragHandle
-            tableLocalId={tableNode?.attrs?.localId ?? ''}
+            tableLocalId={currentNodeLocalId}
             indexes={[rowIndex!]}
-            previewWidth={rowWidth}
+            previewWidth={tableWidth}
             previewHeight={rowHeights[rowIndex!]}
             appearance={
               selectedRowIndexes.includes(rowIndex!)

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react';
+
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+
+import type { DraggableSourceData } from '../../../types';
+
+export type RowDropTargetProps = {
+  index: number;
+  localId?: string;
+  style?: React.CSSProperties;
+};
+
+const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
+  const dropTargetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop({ source }) {
+        const data = source.data as DraggableSourceData;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-row' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!data.indexes?.length &&
+          data.indexes?.indexOf(index) === -1
+        );
+      },
+      getData({ input, element }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex: index,
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom'],
+        });
+      },
+    });
+  }, [index, localId]);
+
+  return (
+    <div
+      ref={dropTargetRef}
+      style={style}
+      data-drop-target-index={index}
+      data-drop-target-localid={localId}
+      data-testid="table-floating-row-controls-drop-target"
+    ></div>
+  );
+};
+
+export default RowDropTarget;

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

@@ -9,6 +9,7 @@ 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';
 import { isSelectionUpdated } from '../../utils';
 
@@ -38,13 +39,24 @@ export interface Props {
 }
 
 interface State {
-  tableHeight: number;
+  tableWrapperWidth: number;
+  tableWrapperHeight: number;
 }
 
 export default class TableFloatingControls extends Component<Props, State> {
   static displayName = 'TableFloatingControls';
   private resizeObserver?: ResizeObserver;
 
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      tableWrapperWidth: 0,
+      /** Height needs to be tracked to re-render decorations correctly, do not remove */
+      tableWrapperHeight: 0,
+    };
+  }
+
   componentDidMount() {
     this.tryInitResizeObserver();
   }
@@ -58,13 +70,23 @@ export default class TableFloatingControls extends Component<Props, State> {
   private tryInitResizeObserver() {
     let { tableRef } = this.props;
     if (tableRef && !this.resizeObserver && window?.ResizeObserver) {
+      const tableWrapper = tableRef.closest(
+        `.${ClassName.TABLE_NODE_WRAPPER}`,
+      ) as Element;
       this.resizeObserver = new ResizeObserver((entries) => {
         for (let entry of entries) {
-          const tableHeight = entry.contentRect.height;
-          this.setState({ tableHeight });
+          this.setState((prev) => {
+            return prev?.tableWrapperWidth === entry.contentRect.width &&
+              prev.tableWrapperHeight === entry.contentRect.height
+              ? prev
+              : {
+                  tableWrapperWidth: entry.contentRect.width,
+                  tableWrapperHeight: entry.contentRect.height,
+                };
+          });
         }
       });
-      this.resizeObserver.observe(tableRef);
+      this.resizeObserver.observe(tableWrapper);
     }
   }
 
@@ -84,12 +106,11 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader,
       hoveredCell,
     } = this.props;
-    const tableHeight = this.state?.tableHeight;
-    const nextTableHeight = nextState?.tableHeight;
     return (
+      this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
+      this.state.tableWrapperHeight !== nextState.tableWrapperHeight ||
       ordering !== nextProps.ordering ||
       tableRef !== nextProps.tableRef ||
-      tableHeight !== nextTableHeight ||
       tableActive !== nextProps.tableActive ||
       isInDanger !== nextProps.isInDanger ||
       isResizing !== nextProps.isResizing ||
@@ -174,7 +195,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                   tableActive={tableActive}
                   isInDanger={isInDanger}
                   isResizing={isResizing}
-                  hasHeaderRow={hasHeaderRow}
+                  tableWidth={this.state.tableWrapperWidth}
                   hoverRows={this.hoverRows}
                   selectRow={this.selectRow}
                   updateCellHoverLocation={this.updateCellHoverLocation}

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

@@ -29,6 +29,7 @@ import { TableCssClassName as ClassName } from '../types';
 
 import {
   columnControlsDecorationHeight,
+  dropTargetExtendedWidth,
   resizeHandlerAreaWidth,
   resizeLineWidth,
   rowControlsZIndex,
@@ -712,7 +713,7 @@ export const tableStyles = (
       display: grid;
       align-items: center;
       position: absolute;
-      left: -4px;
+      left: -${dropTargetExtendedWidth + 4}px;
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {

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

@@ -151,9 +151,12 @@ export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
 
+export const dropTargetsZIndex = 14;
+
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 
 export const dragMenuDropdownWidth = 240;
+export const dropTargetExtendedWidth = 150;

package/src/plugins/table/utils/column-controls.ts

@@ -1,7 +1,7 @@
 import { maphElem } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {

package/tsconfig.app.json

@@ -73,10 +73,10 @@
       "path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
     },
     {
-      "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
+      "path": "../../pragmatic-drag-and-drop/auto-scroll/tsconfig.app.json"
     },
     {
-      "path": "../../pragmatic-drag-and-drop/react-beautiful-dnd-autoscroll/tsconfig.app.json"
+      "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
     },
     {
       "path": "../../design-system/primitives/tsconfig.app.json"