@atlaskit/editor-plugin-table 5.8.2 → 5.8.4

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

@@ -9,7 +9,9 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 
 import type { DraggableSourceData } from '../../types';
 import {
@@ -32,6 +34,205 @@ import { pluginKey } from './plugin-key';
 import type { DragAndDropPluginState } from './types';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
+const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
+  const editorPageScrollContainer = document.querySelector(
+    '.fabric-editor-popup-scroll-parent',
+  );
+
+  const rowAutoScrollers = editorPageScrollContainer
+    ? [
+        monitorForElements({
+          canMonitor({ source }) {
+            const { type } = source.data as Partial<DraggableSourceData>;
+            return type === 'table-row';
+          },
+          onDragStart() {
+            // auto scroller doesn't work when scroll-behavior: smooth is set, this monitor temporarily removes it via inline styles
+            (editorPageScrollContainer as HTMLElement).style.setProperty(
+              'scroll-behavior',
+              'unset',
+            );
+          },
+          onDrop() {
+            // 'null' will remove the inline style
+            (editorPageScrollContainer as HTMLElement).style.setProperty(
+              'scroll-behavior',
+              null,
+            );
+          },
+        }),
+        autoScrollForElements({
+          element: editorPageScrollContainer as HTMLElement,
+          canScroll: ({ source }) => {
+            const { type } = source.data as Partial<DraggableSourceData>;
+            return type === 'table-row';
+          },
+        }),
+      ]
+    : [];
+
+  return combine(
+    ...rowAutoScrollers,
+    monitorForElements({
+      canMonitor({ source }) {
+        const { type, localId, indexes } =
+          source.data as Partial<DraggableSourceData>;
+
+        // First; Perform any quick checks so we can abort early.
+        if (
+          !indexes ||
+          !localId ||
+          // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+          // of more then 1 item.
+          indexes.length !== 1 ||
+          !(type === 'table-row' || type === 'table-column')
+        ) {
+          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: ({ location }) => {
+        toggleDragMenu(false)(editorView.state, editorView.dispatch);
+      },
+      onDrag(event) {
+        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) {
+          clearDropTarget()(editorView.state, editorView.dispatch);
+          return;
+        }
+
+        // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+        // insert location as to where the draggable will most likely be go. For example;
+        const { sourceType, targetAdjustedIndex } = data;
+        const dropTargetType =
+          sourceType === 'table-row'
+            ? DropTargetType.ROW
+            : DropTargetType.COLUMN;
+
+        const hasMergedCells = hasMergedCellsInBetween(
+          [targetAdjustedIndex - 1, targetAdjustedIndex],
+          dropTargetType,
+        )(editorView.state.selection);
+
+        setDropTarget(
+          dropTargetType,
+          targetAdjustedIndex,
+          hasMergedCells,
+        )(editorView.state, editorView.dispatch);
+      },
+      onDrop(event) {
+        const data = getDraggableDataFromEvent(event);
+
+        // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
+        // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
+        // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
+        // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
+        // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
+        // triggered by this on drop event.
+        const { hoveredCell } = getTablePluginState(editorView.state);
+
+        const cell = findNearestCellIndexToPoint(
+          event.location.current.input.clientX,
+          event.location.current.input.clientY,
+        );
+        const tr = editorView.state.tr;
+        const action = {
+          type: 'HOVER_CELL',
+          data: {
+            hoveredCell: {
+              rowIndex: cell?.row ?? hoveredCell.rowIndex,
+              colIndex: cell?.col ?? hoveredCell.colIndex,
+            },
+          },
+        };
+        tr.setMeta(tablePluginKey, action);
+
+        // If no data can be found then it's most like we do not want to perform any drop action
+        if (!data) {
+          // If we're able to determine the source type of the dropped element then we should report to analytics that
+          // the drop event was cancelled. Otherwise we will cancel silently.
+          if (
+            event?.source?.data?.type === 'table-row' ||
+            event?.source?.data?.type === 'table-column'
+          ) {
+            return clearDropTargetWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.DRAG_AND_DROP,
+              event.source.data.type,
+              TABLE_STATUS.CANCELLED,
+              tr,
+            )(editorView.state, editorView.dispatch);
+          }
+          return clearDropTarget(tr)(editorView.state, editorView.dispatch);
+        }
+
+        const {
+          sourceType,
+          sourceIndexes,
+          targetIndex,
+          targetAdjustedIndex,
+          direction,
+        } = data;
+
+        // When we drop on a target we will know the targets row/col index for certain,
+        if (sourceType === 'table-row') {
+          action.data.hoveredCell.rowIndex = targetIndex;
+        } else {
+          action.data.hoveredCell.colIndex = targetIndex;
+        }
+
+        // If the drop target index contains merged cells then we should not allow the drop to occur.
+        if (
+          hasMergedCellsInBetween(
+            [targetAdjustedIndex - 1, targetAdjustedIndex],
+            sourceType === 'table-row'
+              ? DropTargetType.ROW
+              : DropTargetType.COLUMN,
+          )(editorView.state.selection)
+        ) {
+          clearDropTargetWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.DRAG_AND_DROP,
+            sourceType,
+            // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
+            TABLE_STATUS.INVALID,
+            tr,
+          )(editorView.state, editorView.dispatch);
+          return;
+        }
+
+        const [sourceIndex] = sourceIndexes;
+
+        requestAnimationFrame(() => {
+          moveSourceWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.DRAG_AND_DROP,
+            sourceType,
+            sourceIndex,
+            targetAdjustedIndex + (direction === -1 ? 0 : -1),
+            tr,
+          )(editorView.state, editorView.dispatch);
+
+          // force a colgroup update here, otherwise dropped columns don't have
+          // the correct width immediately after the drop
+          if (sourceType === 'table-column') {
+            const { tableRef, tableNode } = getTablePluginState(
+              editorView.state,
+            );
+            if (tableRef && tableNode) {
+              insertColgroupFromNode(tableRef, tableNode);
+            }
+          }
+
+          editorView.focus();
+        });
+      },
+    }),
+  );
+};
+
 export const createPlugin = (
   dispatch: Dispatch,
   eventDispatcher: EventDispatcher,
@@ -122,163 +323,7 @@ export const createPlugin = (
     },
     view: (editorView: EditorView) => {
       return {
-        destroy: monitorForElements({
-          canMonitor({ source }) {
-            const { type, localId, indexes } =
-              source.data as Partial<DraggableSourceData>;
-
-            // First; Perform any quick checks so we can abort early.
-            if (
-              !indexes ||
-              !localId ||
-              // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-              // of more then 1 item.
-              indexes.length !== 1 ||
-              !(type === 'table-row' || type === 'table-column')
-            ) {
-              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: ({ location }) => {
-            toggleDragMenu(false)(editorView.state, editorView.dispatch);
-          },
-          onDrag(event) {
-            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) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
-              return;
-            }
-
-            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
-            // insert location as to where the draggable will most likely be go. For example;
-            const { sourceType, targetAdjustedIndex } = data;
-            const dropTargetType =
-              sourceType === 'table-row'
-                ? DropTargetType.ROW
-                : DropTargetType.COLUMN;
-
-            const hasMergedCells = hasMergedCellsInBetween(
-              [targetAdjustedIndex - 1, targetAdjustedIndex],
-              dropTargetType,
-            )(editorView.state.selection);
-
-            setDropTarget(
-              dropTargetType,
-              targetAdjustedIndex,
-              hasMergedCells,
-            )(editorView.state, editorView.dispatch);
-          },
-          onDrop(event) {
-            const data = getDraggableDataFromEvent(event);
-
-            // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
-            // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
-            // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
-            // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
-            // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
-            // triggered by this on drop event.
-            const { hoveredCell } = getTablePluginState(editorView.state);
-
-            const cell = findNearestCellIndexToPoint(
-              event.location.current.input.clientX,
-              event.location.current.input.clientY,
-            );
-            const tr = editorView.state.tr;
-            const action = {
-              type: 'HOVER_CELL',
-              data: {
-                hoveredCell: {
-                  rowIndex: cell?.row ?? hoveredCell.rowIndex,
-                  colIndex: cell?.col ?? hoveredCell.colIndex,
-                },
-              },
-            };
-            tr.setMeta(tablePluginKey, action);
-
-            // If no data can be found then it's most like we do not want to perform any drop action
-            if (!data) {
-              // If we're able to determine the source type of the dropped element then we should report to analytics that
-              // the drop event was cancelled. Otherwise we will cancel silently.
-              if (
-                event?.source?.data?.type === 'table-row' ||
-                event?.source?.data?.type === 'table-column'
-              ) {
-                return clearDropTargetWithAnalytics(editorAnalyticsAPI)(
-                  INPUT_METHOD.DRAG_AND_DROP,
-                  event.source.data.type,
-                  TABLE_STATUS.CANCELLED,
-                  tr,
-                )(editorView.state, editorView.dispatch);
-              }
-              return clearDropTarget(tr)(editorView.state, editorView.dispatch);
-            }
-
-            const {
-              sourceType,
-              sourceIndexes,
-              targetIndex,
-              targetAdjustedIndex,
-              direction,
-            } = data;
-
-            // When we drop on a target we will know the targets row/col index for certain,
-            if (sourceType === 'table-row') {
-              action.data.hoveredCell.rowIndex = targetIndex;
-            } else {
-              action.data.hoveredCell.colIndex = targetIndex;
-            }
-
-            // If the drop target index contains merged cells then we should not allow the drop to occur.
-            if (
-              hasMergedCellsInBetween(
-                [targetAdjustedIndex - 1, targetAdjustedIndex],
-                sourceType === 'table-row'
-                  ? DropTargetType.ROW
-                  : DropTargetType.COLUMN,
-              )(editorView.state.selection)
-            ) {
-              clearDropTargetWithAnalytics(editorAnalyticsAPI)(
-                INPUT_METHOD.DRAG_AND_DROP,
-                sourceType,
-                // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
-                TABLE_STATUS.INVALID,
-                tr,
-              )(editorView.state, editorView.dispatch);
-              return;
-            }
-
-            const [sourceIndex] = sourceIndexes;
-
-            requestAnimationFrame(() => {
-              moveSourceWithAnalytics(editorAnalyticsAPI)(
-                INPUT_METHOD.DRAG_AND_DROP,
-                sourceType,
-                sourceIndex,
-                targetAdjustedIndex + (direction === -1 ? 0 : -1),
-                tr,
-              )(editorView.state, editorView.dispatch);
-
-              // force a colgroup update here, otherwise dropped columns don't have
-              // the correct width immediately after the drop
-              if (sourceType === 'table-column') {
-                const { tableRef, tableNode } = getTablePluginState(
-                  editorView.state,
-                );
-                if (tableRef && tableNode) {
-                  insertColgroupFromNode(tableRef, tableNode);
-                }
-              }
-
-              editorView.focus();
-            });
-          },
-        }),
+        destroy: destroyFn(editorView, editorAnalyticsAPI),
       };
     },
     props: {

package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts

@@ -0,0 +1,52 @@
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
+
+import type { DraggableSourceData } from '../../../types';
+import { dropTargetExtendedWidth } from '../../../ui/consts';
+
+type AutoScrollerFactory = {
+  tableWrapper: HTMLElement;
+  getNode: () => PmNode;
+};
+
+export const autoScrollerFactory = ({
+  tableWrapper,
+  getNode,
+}: AutoScrollerFactory) => {
+  return [
+    autoScrollForElements({
+      element: tableWrapper,
+      canScroll: ({ source }) => {
+        const { localId, type } = source.data as Partial<DraggableSourceData>;
+        const node = getNode();
+        return localId === node?.attrs.localId && type === 'table-column';
+      },
+    }),
+    unsafeOverflowAutoScrollForElements({
+      element: tableWrapper,
+      canScroll: ({ source }) => {
+        const { localId, type } = source.data as Partial<DraggableSourceData>;
+        const node = getNode();
+        return localId === node?.attrs.localId && type === 'table-column';
+      },
+      getOverflow: () => ({
+        fromTopEdge: {
+          top: dropTargetExtendedWidth,
+          right: dropTargetExtendedWidth,
+          left: dropTargetExtendedWidth,
+        },
+        fromRightEdge: {
+          right: dropTargetExtendedWidth,
+          top: dropTargetExtendedWidth,
+          bottom: dropTargetExtendedWidth,
+        },
+        fromLeftEdge: {
+          top: dropTargetExtendedWidth,
+          left: dropTargetExtendedWidth,
+          bottom: dropTargetExtendedWidth,
+        },
+      }),
+    }),
+  ];
+};

package/src/pm-plugins/drag-and-drop/utils/index.ts

@@ -1 +1,3 @@
 export { getDraggableDataFromEvent } from './monitor';
+
+export { autoScrollerFactory } from './autoscrollers';

package/src/ui/DragHandle/index.tsx

@@ -3,7 +3,10 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 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';
@@ -36,7 +39,7 @@ type DragHandleProps = {
   isDragMenuTarget: boolean; // this is identify which current handle component is
 };
 
-export const DragHandle = ({
+const DragHandleComponent = ({
   isDragMenuTarget,
   tableLocalId,
   direction = 'row',
@@ -51,7 +54,8 @@ export const DragHandle = ({
   onClick,
   editorView,
   canDrag = false,
-}: DragHandleProps) => {
+  intl: { formatMessage },
+}: DragHandleProps & WrappedComponentProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
@@ -154,6 +158,11 @@ export const DragHandle = ({
           transform: direction === 'column' ? 'none' : 'rotate(90deg)',
         }}
         data-testid="table-drag-handle-button"
+        aria-label={formatMessage(
+          direction === 'row'
+            ? messages.rowDragHandle
+            : messages.columnDragHandle,
+        )}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
         onMouseUp={(e) => {
@@ -187,3 +196,5 @@ export const DragHandle = ({
     </>
   );
 };
+
+export const DragHandle = injectIntl(DragHandleComponent);

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -303,7 +303,7 @@ export class ContextualMenu extends Component<
       content: formatMessage(
         isDragAndDropEnabled &&
           getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addColumn
+          ? messages.addColumnRight
           : messages.insertColumn,
       ),
       value: { name: 'insert_column' },
@@ -327,7 +327,7 @@ export class ContextualMenu extends Component<
       content: formatMessage(
         isDragAndDropEnabled &&
           getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addRow
+          ? messages.addRowBelow
           : messages.insertRow,
       ),
       value: { name: 'insert_row' },