@atlaskit/editor-plugin-table 5.8.1 → 5.8.3

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/FloatingInsertButton/InsertButton.tsx

@@ -128,7 +128,7 @@ export const InsertButtonForDragAndDrop = ({
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M8.66667 7.33333V4.66667C8.66667 4.48986 8.59643 4.32029 8.47141 4.19526C8.34638 4.07024 8.17682 4 8 4C7.82318 4 7.65362 4.07024 7.52859 4.19526C7.40357 4.32029 7.33333 4.48986 7.33333 4.66667V7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82318 4 8C4 8.17682 4.07024 8.34638 4.19526 8.47141C4.32029 8.59643 4.48986 8.66667 4.66667 8.66667H7.33333V11.3333C7.33333 11.5101 7.40357 11.6797 7.52859 11.8047C7.65362 11.9298 7.82318 12 8 12C8.17682 12 8.34638 11.9298 8.47141 11.8047C8.59643 11.6797 8.66667 11.5101 8.66667 11.3333V8.66667H11.3333C11.5101 8.66667 11.6797 8.59643 11.8047 8.47141C11.9298 8.34638 12 8.17682 12 8C12 7.82318 11.9298 7.65362 11.8047 7.52859C11.6797 7.40357 11.5101 7.33333 11.3333 7.33333H8.66667Z"
+                d="M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z"
                 fill="currentColor"
               />
             </svg>