@atlaskit/editor-plugin-table 5.3.34 → 5.3.35

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.35
+
+### Patch Changes
+
+- [#43255](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43255) [`404fa3bc44e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/404fa3bc44e) - Add requestAnimationFrame around move row/column command to fix an issue where selection would be lost
+- Updated dependencies
+
 ## 5.3.34
 
 ### Patch Changes

package/dist/cjs/plugins/table/event-handlers.js

@@ -359,7 +359,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled) {
+    if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled && !(0, _pluginFactory.getPluginState)(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updatePluginStateDecorations = exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
+var _transforms = require("../../utils/transforms");
 var _actions = require("./actions");
 var _consts = require("./consts");
 var _pluginFactory = require("./plugin-factory");
@@ -76,11 +78,15 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
+    var anchor = tr.selection.anchor;
+    var selectStartOfTable = function selectStartOfTable(newTr) {
+      return newTr.setSelection(_state.TextSelection.create(newTr.doc, anchor));
+    };
     var isTableRow = sourceType === 'table-row';
-    var move = isTableRow ? _utils.moveRow : _utils.moveColumn;
-    var newTr = move(sourceIndex, targetIndex)(tr);
-    var select = isTableRow ? _utils.selectRow : _utils.selectColumn;
-    return select(targetIndex)(newTr);
+    if (isTableRow) {
+      return (0, _transforms.combineTransforms)([(0, _utils.moveRow)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectRow)(targetIndex)], tr);
+    }
+    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], tr);
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -27,7 +27,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         dropTargetType: _consts.DropTargetType.NONE,
         dropTargetIndex: 0,
         isDragMenuOpen: false,
-        dragMenuIndex: 0
+        dragMenuIndex: 0,
+        isDragging: false
       };
     }),
     key: _pluginKey.pluginKey,
@@ -132,7 +133,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             }
             var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(function () {
+              (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -16,13 +16,15 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       });
     case _actions.DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: _consts.DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       });
     case _actions.DragAndDropActionType.TOGGLE_DRAG_MENU:
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -148,7 +148,9 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
-          (0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+          requestAnimationFrame(function () {
+            (0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+          });
           return true;
         }
         return false;

package/dist/cjs/plugins/table/utils/transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.combineTransforms = void 0;
+var combineTransforms = exports.combineTransforms = function combineTransforms(transforms, tr) {
+  return transforms.reduce(function (prev, curr) {
+    return curr(prev);
+  }, tr);
+};

package/dist/es2019/plugins/table/event-handlers.js

@@ -366,7 +366,7 @@ const trackCellLocation = (view, mouseEvent) => {
   }
 };
 export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
-  if (getPluginState(view.state).isDragAndDropEnabled) {
+  if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
     trackCellLocation(view, mouseEvent);
   }
   return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -1,7 +1,9 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
@@ -62,11 +64,13 @@ export const moveSource = (sourceType, sourceIndex, targetIndex) => createComman
   if (sourceIndex === targetIndex) {
     return tr.setMeta('addToHistory', false);
   }
+  const anchor = tr.selection.anchor;
+  const selectStartOfTable = newTr => newTr.setSelection(TextSelection.create(newTr.doc, anchor));
   const isTableRow = sourceType === 'table-row';
-  const move = isTableRow ? moveRow : moveColumn;
-  const newTr = move(sourceIndex, targetIndex)(tr);
-  const select = isTableRow ? selectRow : selectColumn;
-  return select(targetIndex)(newTr);
+  if (isTableRow) {
+    return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+  }
+  return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
 });
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {

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

@@ -18,7 +18,8 @@ export const createPlugin = (dispatch, eventDispatcher) => {
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
       isDragMenuOpen: false,
-      dragMenuIndex: 0
+      dragMenuIndex: 0,
+      isDragging: false
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -132,7 +133,9 @@ export const createPlugin = (dispatch, eventDispatcher) => {
               return;
             }
             const [sourceIndex] = sourceIndexes;
-            moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(() => {
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

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

@@ -7,14 +7,16 @@ export default ((pluginState, action) => {
         ...pluginState,
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       };
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return {

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -133,7 +133,9 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap,
     icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {
-        moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        requestAnimationFrame(() => {
+          moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        });
         return true;
       }
       return false;

package/dist/es2019/plugins/table/utils/transforms.js

@@ -0,0 +1,5 @@
+export const combineTransforms = (transforms, tr) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};

package/dist/esm/plugins/table/event-handlers.js

@@ -350,7 +350,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -1,7 +1,9 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
@@ -71,11 +73,15 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
+    var anchor = tr.selection.anchor;
+    var selectStartOfTable = function selectStartOfTable(newTr) {
+      return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+    };
     var isTableRow = sourceType === 'table-row';
-    var move = isTableRow ? moveRow : moveColumn;
-    var newTr = move(sourceIndex, targetIndex)(tr);
-    var select = isTableRow ? selectRow : selectColumn;
-    return select(targetIndex)(newTr);
+    if (isTableRow) {
+      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+    }
+    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -20,7 +20,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
         isDragMenuOpen: false,
-        dragMenuIndex: 0
+        dragMenuIndex: 0,
+        isDragging: false
       };
     }),
     key: pluginKey,
@@ -125,7 +126,9 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             }
             var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(function () {
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -9,13 +9,15 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       });
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       });
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -141,7 +141,9 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
-          moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          requestAnimationFrame(function () {
+            moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          });
           return true;
         }
         return false;

package/dist/esm/plugins/table/utils/transforms.js

@@ -0,0 +1,5 @@
+export var combineTransforms = function combineTransforms(transforms, tr) {
+  return transforms.reduce(function (prev, curr) {
+    return curr(prev);
+  }, tr);
+};

package/dist/types/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

package/dist/types/plugins/table/utils/transforms.d.ts

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

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

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.34",
+  "version": "5.3.35",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@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/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.11.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^18.0.0",

package/src/plugins/table/event-handlers.ts

@@ -587,7 +587,10 @@ export const withCellTracking =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (
+      getPluginState(view.state).isDragAndDropEnabled &&
+      !getDragDropPluginState(view.state).isDragging
+    ) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -2,6 +2,7 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -18,6 +19,7 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -114,11 +116,31 @@ export const moveSource = (
         return tr.setMeta('addToHistory', false);
       }
 
+      const anchor = tr.selection.anchor;
+      const selectStartOfTable = (newTr: Transaction) =>
+        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+
       const isTableRow = sourceType === 'table-row';
-      const move = isTableRow ? moveRow : moveColumn;
-      const newTr = move(sourceIndex, targetIndex)(tr);
-      const select = isTableRow ? selectRow : selectColumn;
-      return select(targetIndex)(newTr);
+
+      if (isTableRow) {
+        return combineTransforms(
+          [
+            moveRow(sourceIndex, targetIndex),
+            selectStartOfTable,
+            selectRow(targetIndex),
+          ],
+          tr,
+        );
+      }
+
+      return combineTransforms(
+        [
+          moveColumn(sourceIndex, targetIndex),
+          selectStartOfTable,
+          selectColumn(targetIndex),
+        ],
+        tr,
+      );
     },
   );
 

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

@@ -39,6 +39,7 @@ export const createPlugin = (
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
+      isDragging: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -160,11 +161,14 @@ export const createPlugin = (
             }
 
             const [sourceIndex] = sourceIndexes;
-            moveSource(
-              sourceType,
-              sourceIndex,
-              targetAdjustedIndex + (direction === -1 ? 0 : -1),
-            )(editorView.state, editorView.dispatch);
+
+            requestAnimationFrame(() => {
+              moveSource(
+                sourceType,
+                sourceIndex,
+                targetAdjustedIndex + (direction === -1 ? 0 : -1),
+              )(editorView.state, editorView.dispatch);
+            });
           },
         }),
       };

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

@@ -14,6 +14,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index,
+        isDragging: true,
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
@@ -21,6 +22,7 @@ export default (
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
+        isDragging: false,
       };
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return {

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

@@ -11,4 +11,5 @@ export interface DragAndDropPluginState {
   isDragMenuOpen: boolean;
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
+  isDragging: boolean;
 }

package/src/plugins/table/utils/drag-menu.ts

@@ -194,11 +194,13 @@ export const getDragMenuConfig = (
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {
-          moveSource(
-            `table-${direction}`,
-            index!,
-            index! + offset,
-          )(state, dispatch);
+          requestAnimationFrame(() => {
+            moveSource(
+              `table-${direction}`,
+              index!,
+              index! + offset,
+            )(state, dispatch);
+          });
           return true;
         }
         return false;

package/src/plugins/table/utils/transforms.ts

@@ -0,0 +1,10 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+
+export const combineTransforms = (
+  transforms: Array<(tr: Transaction) => Transaction>,
+  tr: Transaction,
+) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};