@atlaskit/editor-plugin-table 5.3.28 → 5.3.30

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -7,11 +7,11 @@ 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;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type RowDropTargetProps = {
+    index: number;
+    localId?: string;
+    style?: React.CSSProperties;
+};
+declare const RowDropTarget: ({ index, localId, style }: RowDropTargetProps) => JSX.Element;
+export default RowDropTarget;

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

@@ -26,11 +26,13 @@ export interface Props {
     insertRowButtonIndex?: number;
 }
 interface State {
-    tableHeight: number;
+    tableWrapperWidth: number;
+    tableWrapperHeight: number;
 }
 export default class TableFloatingControls extends Component<Props, State> {
     static displayName: string;
     private resizeObserver?;
+    constructor(props: Props);
     componentDidMount(): void;
     componentDidUpdate(): void;
     private tryInitResizeObserver;

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

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

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

@@ -1,5 +1,5 @@
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
 export declare const isColumnDeleteButtonVisible: (selection: Selection) => boolean;
 export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.28",
+  "version": "5.3.30",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,12 +42,12 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.24.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.7.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.4",
     "@atlaskit/primitives": "^1.10.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
-    "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -74,6 +74,7 @@ describe('NumberColumn', () => {
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
           updateCellHoverLocation={jest.fn()}
+          tableWidth={760}
         />
       </IntlProvider>,
     );
@@ -110,6 +111,7 @@ describe('NumberColumn', () => {
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
           updateCellHoverLocation={jest.fn()}
+          tableWidth={760}
         />
       </IntlProvider>,
     );

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

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+
+import { tableMarginTop } from '@atlaskit/editor-common/styles';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+
+import type { DraggableSourceData } from '../types';
+import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';
+import { ColumnDropTarget } from '../ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget';
+import { getColumnsWidths } from '../utils';
+
+export const ExternalDropTargets = ({
+  editorView,
+  node,
+  getScrollOffset,
+  getTableWrapperWidth,
+}: {
+  editorView: EditorView;
+  node?: PMNode;
+  getScrollOffset: () => number;
+  getTableWrapperWidth: () => number;
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const currentNodeLocalId = node?.attrs.localId;
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({ source }) {
+        const { type, indexes, localId } =
+          source.data as Partial<DraggableSourceData>;
+        return (
+          type === 'table-column' &&
+          !!indexes?.length &&
+          localId === currentNodeLocalId
+        );
+      },
+      onDragStart() {
+        setIsDragging(true);
+      },
+      onDrop() {
+        setIsDragging(false);
+      },
+    });
+  }, [currentNodeLocalId, editorView]);
+
+  if (!isDragging) {
+    return null;
+  }
+
+  const colWidths = getColumnsWidths(editorView);
+
+  return (
+    <div
+      style={{
+        width: getTableWrapperWidth(),
+        overflow: 'hidden',
+        position: 'absolute',
+        top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
+        pointerEvents: 'auto',
+        zIndex: `${dropTargetsZIndex}`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          // move drop targets based on table wrapper scroll
+          marginLeft: `-${getScrollOffset()}px`,
+        }}
+      >
+        {colWidths?.map((width, index) => {
+          return (
+            <ColumnDropTarget
+              key={index}
+              index={index}
+              localId={currentNodeLocalId}
+              width={width}
+              height={dropTargetExtendedWidth}
+              marginTop={0}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -33,6 +33,13 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements,
+} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -52,9 +59,10 @@ import {
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import type { PluginInjectionAPI } from '../types';
+import type { DraggableSourceData, PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import {
+  dropTargetExtendedWidth,
   tableOverflowShadowWidth,
   tableOverflowShadowWidthWide,
 } from '../ui/consts';
@@ -67,6 +75,7 @@ import {
   tablesHaveDifferentNoOfColumns,
 } from '../utils';
 
+import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
@@ -129,6 +138,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private isInitialOverflowSent: boolean;
   private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
 
+  private dragAndDropCleanupFn?: CleanupFn;
+
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
@@ -160,7 +171,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidMount() {
-    const { allowColumnResizing, eventDispatcher, options } = this.props;
+    const {
+      allowColumnResizing,
+      eventDispatcher,
+      options,
+      isDragAndDropEnabled,
+      getNode,
+    } = this.props;
+
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true,
@@ -174,6 +192,53 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           );
         }
       }
+
+      if (isDragAndDropEnabled) {
+        this.dragAndDropCleanupFn = combine(
+          autoScrollForElements({
+            element: this.wrapper,
+            canScroll: ({ source }) => {
+              const { localId, type } =
+                source.data as Partial<DraggableSourceData>;
+              const node = getNode();
+              return localId === node?.attrs.localId && type === 'table-column';
+            },
+          }),
+          autoScrollWindowForElements({
+            canScroll: ({ source }) => {
+              const { localId, type } =
+                source.data as Partial<DraggableSourceData>;
+              const node = getNode();
+              return localId === node?.attrs.localId && type === 'table-row';
+            },
+          }),
+          unsafeOverflowAutoScrollForElements({
+            element: this.wrapper,
+            canScroll: ({ source }) => {
+              const { localId } = source.data as Partial<DraggableSourceData>;
+              const node = getNode();
+              return localId === node?.attrs.localId;
+            },
+            getOverflow: () => ({
+              fromTopEdge: {
+                top: dropTargetExtendedWidth,
+                right: dropTargetExtendedWidth,
+                left: dropTargetExtendedWidth,
+              },
+              fromRightEdge: {
+                right: dropTargetExtendedWidth,
+                top: dropTargetExtendedWidth,
+                bottom: dropTargetExtendedWidth,
+              },
+              fromLeftEdge: {
+                top: dropTargetExtendedWidth,
+                left: dropTargetExtendedWidth,
+                bottom: dropTargetExtendedWidth,
+              },
+            }),
+          }),
+        );
+      }
     }
 
     if (allowColumnResizing) {
@@ -207,11 +272,20 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentWillUnmount() {
-    const { allowColumnResizing, eventDispatcher, options } = this.props;
+    const {
+      allowColumnResizing,
+      eventDispatcher,
+      options,
+      isDragAndDropEnabled,
+    } = this.props;
     if (this.wrapper && !isIE11) {
       this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
     }
 
+    if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
+      this.dragAndDropCleanupFn();
+    }
+
     if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
       if (this.stickyScrollbar) {
         this.stickyScrollbar.dispose();
@@ -509,9 +583,18 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )}
 
         {allowControls && rowControls}
-
-        {isDragAndDropEnabled && allowControls && colControls}
-
+        {isDragAndDropEnabled && (
+          <ExternalDropTargets
+            editorView={view}
+            node={node}
+            getScrollOffset={() => {
+              return this.wrapper?.scrollLeft || 0;
+            }}
+            getTableWrapperWidth={() => {
+              return this.wrapper?.clientWidth || 760;
+            }}
+          />
+        )}
         <div
           style={shadowStyle(showBeforeShadow)}
           className={ClassName.TABLE_LEFT_SHADOW}
@@ -544,7 +627,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               }
             }
           }}
-        />
+        >
+          {allowControls && colControls}
+        </div>
         {getBooleanFF('platform.editor.table-sticky-scrollbar') && (
           <div
             className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}

package/src/plugins/table/nodeviews/TableRow.ts

@@ -6,8 +6,6 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -16,7 +14,7 @@ import {
   syncStickyRowToTable,
   updateStickyMargins as updateTableMargin,
 } from '../pm-plugins/table-resizing/utils/dom';
-import type { DraggableSourceData, TablePluginState } from '../types';
+import type { TablePluginState } from '../types';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import {
   STICKY_HEADER_TOGGLE_TOLERANCE_MS,
@@ -53,10 +51,9 @@ export default class TableRow
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
 
-    const { pluginConfig, isDragAndDropEnabled } = getPluginState(view.state);
+    const { pluginConfig } = getPluginState(view.state);
 
     this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -64,10 +61,6 @@ export default class TableRow
         this.subscribe();
       }
     }
-
-    if (this.isDragAndDropEnabled) {
-      this.addDropTarget(this.contentDOM);
-    }
   }
 
   /**
@@ -75,8 +68,6 @@ export default class TableRow
    */
   private isHeaderRow: boolean;
   private isStickyHeaderEnabled: boolean;
-  // @ts-ignore
-  private isDragAndDropEnabled: boolean;
   private editorScrollableElement?: HTMLElement | Window;
   private colControlsOffset = 0;
   private focused = false;
@@ -93,7 +84,6 @@ export default class TableRow
   private listening = false;
   private padding: number = 0;
   private top: number = 0;
-  private dropTargetCleanup?: () => void;
 
   /**
    * Methods: Nodeview Lifecycle
@@ -140,9 +130,6 @@ export default class TableRow
 
       this.emitOff(true);
     }
-
-    // If a drop target cleanup method has been set then we should call it.
-    this.dropTargetCleanup?.();
   }
 
   ignoreMutation(
@@ -181,56 +168,6 @@ export default class TableRow
   /**
    * Methods
    */
-
-  private addDropTarget(element: HTMLElement) {
-    const pos = this.getPos()!;
-    if (!Number.isFinite(pos)) {
-      return;
-    }
-
-    if (this.dropTargetCleanup) {
-      this.dropTargetCleanup();
-    }
-
-    this.dropTargetCleanup = dropTargetForElements({
-      element: element,
-      canDrop: ({ source }) => {
-        const data = source.data as DraggableSourceData;
-        const { localId, targetIndex } = this.getCurrentData();
-        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(targetIndex) === -1
-        );
-      },
-      getIsSticky: () => true,
-      getData: ({ input, element }) => {
-        const { localId, targetIndex } = this.getCurrentData();
-        const data = {
-          localId,
-          type: 'table-row',
-          targetIndex,
-        };
-        return attachClosestEdge(data, {
-          input,
-          element,
-          allowedEdges: ['top', 'bottom'],
-        });
-      },
-    });
-  }
-
-  private getCurrentData() {
-    const resolvedPos = this.view.state.doc.resolve(this.getPos()!);
-    const targetIndex = resolvedPos.index();
-    const localId = resolvedPos.parent.attrs.localId;
-    return { targetIndex, localId };
-  }
-
   private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);

package/src/plugins/table/nodeviews/TableStickyScrollbar.ts

@@ -38,7 +38,7 @@ export class TableStickyScrollbar {
       this.handleScrollDebounced.cancel();
     }
 
-    this.deleteIntesactionObserver();
+    this.deleteIntersectionObserver();
   }
 
   scrollLeft(left: number) {
@@ -95,7 +95,7 @@ export class TableStickyScrollbar {
               ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
             )
           ) {
-            this.sentenialBottomCallback(entry);
+            this.sentinelBottomCallback(entry);
           }
 
           if (
@@ -103,7 +103,7 @@ export class TableStickyScrollbar {
               ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
             )
           ) {
-            this.sentenialTopCallback(entry);
+            this.sentinelTopCallback(entry);
           }
         });
       },
@@ -123,7 +123,7 @@ export class TableStickyScrollbar {
     );
   }
 
-  private deleteIntesactionObserver() {
+  private deleteIntersectionObserver() {
     if (this.intersectionObserver) {
       if (this.sentinels.bottom) {
         this.intersectionObserver.unobserve(this.sentinels.bottom);
@@ -132,7 +132,7 @@ export class TableStickyScrollbar {
     }
   }
 
-  private sentenialBottomCallback(entry: IntersectionObserverEntry) {
+  private sentinelBottomCallback(entry: IntersectionObserverEntry) {
     const sentinelIsAboveScrollArea =
       entry.boundingClientRect.top < (entry.rootBounds?.top || 0);
 
@@ -145,7 +145,7 @@ export class TableStickyScrollbar {
     this.toggle();
   }
 
-  private sentenialTopCallback(entry: IntersectionObserverEntry) {
+  private sentinelTopCallback(entry: IntersectionObserverEntry) {
     const sentinelIsBelowScrollArea =
       (entry.rootBounds?.bottom || 0) < entry.boundingClientRect.top;
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -8,7 +8,6 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 
 import type { DraggableSourceData } from '../../types';
 import {
@@ -109,14 +108,9 @@ export const createPlugin = (
             return localId === tableNode?.attrs.localId;
           },
           onDragStart: ({ location }) => {
-            autoScroller.start({ input: location.current.input });
             toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag(event) {
-            autoScroller.updateInput({
-              input: event.location.current.input,
-            });
-
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -138,7 +132,6 @@ export const createPlugin = (
             );
           },
           onDrop(event) {
-            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -65,6 +65,7 @@ export const ColumnDropTarget: React.FC<Props> = ({
         height: height && `${height}px`,
         marginTop: marginTop && `${marginTop}px`,
         pointerEvents: 'auto',
+        flexShrink: 0,
       }}
       data-drop-target-index={index}
       data-drop-target-localid={localId}

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

@@ -1,7 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import ReactDOM from 'react-dom';
-
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -121,13 +119,11 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
       ? stickyHeader.top
       : undefined;
 
-  const mountTo = (tableRef && tableRef?.parentElement) || document.body;
-
   if (!tableActive) {
     return null;
   }
 
-  return ReactDOM.createPortal(
+  return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
       data-testid="table-floating-column-controls-wrapper"
@@ -155,8 +151,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
           colWidths={colWidths}
         />
       )}
-    </div>,
-    mountTo,
+    </div>
   );
 };