@atlaskit/editor-plugin-table 5.8.2 → 5.8.3

package/dist/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -3,7 +3,9 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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 { findNearestCellIndexToPoint, hasMergedCellsInBetween } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
@@ -15,6 +17,161 @@ import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
+const destroyFn = (editorView, editorAnalyticsAPI) => {
+  const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
+  const rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
+    canMonitor({
+      source
+    }) {
+      const {
+        type
+      } = source.data;
+      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.style.setProperty('scroll-behavior', 'unset');
+    },
+    onDrop() {
+      // 'null' will remove the inline style
+      editorPageScrollContainer.style.setProperty('scroll-behavior', null);
+    }
+  }), autoScrollForElements({
+    element: editorPageScrollContainer,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        type
+      } = source.data;
+      return type === 'table-row';
+    }
+  })] : [];
+  return combine(...rowAutoScrollers, monitorForElements({
+    canMonitor({
+      source
+    }) {
+      const {
+        type,
+        localId,
+        indexes
+      } = source.data;
+
+      // 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 === null || tableNode === void 0 ? void 0 : 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) {
+      var _cell$row, _cell$col;
+      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 = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
+            colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _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) {
+        var _event$source, _event$source$data, _event$source2, _event$source2$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 === null || event === void 0 ? void 0 : (_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$data = _event$source.data) === null || _event$source$data === void 0 ? void 0 : _event$source$data.type) === 'table-row' || (event === null || event === void 0 ? void 0 : (_event$source2 = event.source) === null || _event$source2 === void 0 ? void 0 : (_event$source2$data = _event$source2.data) === null || _event$source2$data === void 0 ? void 0 : _event$source2$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, eventDispatcher, editorAnalyticsAPI) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
@@ -93,130 +250,7 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
     },
     view: editorView => {
       return {
-        destroy: monitorForElements({
-          canMonitor({
-            source
-          }) {
-            const {
-              type,
-              localId,
-              indexes
-            } = source.data;
-
-            // 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 === null || tableNode === void 0 ? void 0 : 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) {
-            var _cell$row, _cell$col;
-            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 = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
-                  colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _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) {
-              var _event$source, _event$source$data, _event$source2, _event$source2$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 === null || event === void 0 ? void 0 : (_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$data = _event$source.data) === null || _event$source$data === void 0 ? void 0 : _event$source$data.type) === 'table-row' || (event === null || event === void 0 ? void 0 : (_event$source2 = event.source) === null || _event$source2 === void 0 ? void 0 : (_event$source2$data = _event$source2.data) === null || _event$source2$data === void 0 ? void 0 : _event$source2$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/dist/es2019/pm-plugins/drag-and-drop/utils/autoscrollers.js

@@ -0,0 +1,50 @@
+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 { dropTargetExtendedWidth } from '../../../ui/consts';
+export const autoScrollerFactory = ({
+  tableWrapper,
+  getNode
+}) => {
+  return [autoScrollForElements({
+    element: tableWrapper,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        localId,
+        type
+      } = source.data;
+      const node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+    }
+  }), unsafeOverflowAutoScrollForElements({
+    element: tableWrapper,
+    canScroll: ({
+      source
+    }) => {
+      const {
+        localId,
+        type
+      } = source.data;
+      const node = getNode();
+      return localId === (node === null || node === void 0 ? void 0 : 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/dist/es2019/pm-plugins/drag-and-drop/utils/index.js

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

package/dist/esm/nodeviews/TableComponent.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -20,10 +21,9 @@ import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-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 { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -31,7 +31,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { dropTargetExtendedWidth, tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -320,55 +320,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (isDragAndDropEnabled) {
-          this.dragAndDropCleanupFn = combine(autoScrollForElements({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref) {
-              var source = _ref.source;
-              var _ref2 = source.data,
-                localId = _ref2.localId,
-                type = _ref2.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            }
-          }), autoScrollWindowForElements({
-            canScroll: function canScroll(_ref3) {
-              var source = _ref3.source;
-              var _ref4 = source.data,
-                localId = _ref4.localId,
-                type = _ref4.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
-            }
-          }), unsafeOverflowAutoScrollForElements({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref5) {
-              var source = _ref5.source;
-              var _ref6 = source.data,
-                localId = _ref6.localId,
-                type = _ref6.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            },
-            getOverflow: function getOverflow() {
-              return {
-                fromTopEdge: {
-                  top: dropTargetExtendedWidth,
-                  right: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth
-                },
-                fromRightEdge: {
-                  right: dropTargetExtendedWidth,
-                  top: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                },
-                fromLeftEdge: {
-                  top: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                }
-              };
-            }
-          }));
+          this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
+            tableWrapper: this.wrapper,
+            getNode: getNode
+          })));
         }
       }
       if (allowColumnResizing) {