@atlaskit/editor-plugin-block-controls 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.7.0
+
+### Minor Changes
+
+- [`042e8561002b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/042e8561002b0) -
+  [ux] [ED-23210] Implement shortcut for moving a node up and down in the document
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.6.1
 
 ### Patch Changes

package/dist/cjs/commands/move-node.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveNodeViaShortcut = exports.moveNode = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _consts = require("../consts");
+var _main = require("../pm-plugins/main");
+var _utils2 = require("../utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ *
+ * @returns the start position of a node if the node can be moved, otherwise -1
+ */
+var getCurrentNodePos = function getCurrentNodePos(state) {
+  var _activeNode$handleOpt;
+  var selection = state.selection;
+  var _ref = _main.key.getState(state) || {},
+    activeNode = _ref.activeNode;
+  var currentNodePos = -1;
+
+  // There are 3 cases when a node can be moved
+  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
+    // 1. drag handle of the node is focused
+    currentNodePos = activeNode.pos;
+  } else if ((0, _utils.isInTable)(state)) {
+    if ((0, _utils.isTableSelected)(selection)) {
+      var _findTable$pos, _findTable;
+      // We only move table node if it's fully selected
+      // to avoid shortcut collision with table drag and drop
+      currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+    }
+  } else if (!(state.selection instanceof _selection.GapCursorSelection)) {
+    // 2. caret cursor is inside the node
+    // 3. the start of the selection is inside the node
+    currentNodePos = selection.$from.before(1);
+  }
+  return currentNodePos;
+};
+var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
+  return function (state) {
+    var currentNodePos = getCurrentNodePos(state);
+    if (currentNodePos > -1) {
+      var _state$doc$nodeAt;
+      var $pos = state.doc.resolve(currentNodePos);
+      var moveToPos = -1;
+      if (direction === _consts.DIRECTION.UP) {
+        var nodeBefore = $pos.nodeBefore;
+        if (nodeBefore) {
+          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        }
+      } else {
+        var endOfDoc = $pos.end();
+        var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        var nodeAfter = state.doc.nodeAt(nodeAfterPos);
+        if (nodeAfterPos < endOfDoc && nodeAfter) {
+          // if not the last node, move to the end of the next node
+          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        }
+      }
+      var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
+      if (moveToPos > -1) {
+        var _api$core;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT)({
+            tr: tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      } else if (nodeType) {
+        var _api$core2;
+        // If the node is first/last one, only select the node
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          (0, _utils2.selectNode)(tr, currentNodePos, nodeType);
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      }
+    }
+    return false;
+  };
+};
+var moveNode = exports.moveNode = function moveNode(api) {
+  return function (start, to) {
+    var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
+    return function (_ref4) {
+      var _node$nodeSize, _api$analytics;
+      var tr = _ref4.tr;
+      var node = tr.doc.nodeAt(start);
+      var resolvedNode = tr.doc.resolve(start);
+      if (!node) {
+        return tr;
+      }
+      var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
+      var end = start + size;
+      var nodeCopy = tr.doc.content.cut(start, end); // cut the content
+      tr.delete(start, end); // delete the content from the original position
+      var mappedTo = tr.mapping.map(to);
+      tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+      tr = (0, _utils2.selectNode)(tr, mappedTo, node.type.name);
+      tr.setMeta(_main.key, {
+        nodeMoved: true
+      });
+      api === null || api === void 0 || api.core.actions.focus();
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics.ACTION.MOVED,
+        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: _objectSpread({
+          nodeDepth: resolvedNode.depth,
+          nodeType: node.type.name
+        }, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
+          inputMethod: inputMethod
+        })
+      })(tr);
+      return tr;
+    };
+  };
+};

package/dist/cjs/consts.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DIRECTION = void 0;
+var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
+  DIRECTION["UP"] = "up";
+  DIRECTION["DOWN"] = "down";
+  return DIRECTION;
+}({});

package/dist/cjs/plugin.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _moveNode = require("./commands/move-node");
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
@@ -25,42 +25,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }];
     },
     commands: {
-      moveNode: function moveNode(start, to) {
+      moveNode: (0, _moveNode.moveNode)(api),
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref3) {
-          var _node$nodeSize, _api$analytics;
           var tr = _ref3.tr;
-          var node = tr.doc.nodeAt(start);
-          var resolvedNode = tr.doc.resolve(start);
-          if (!node) {
-            return tr;
-          }
-          var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-          var end = start + size;
-          var nodeCopy = tr.doc.content.cut(start, end); // cut the content
-          tr.delete(start, end); // delete the content from the original position
-          var mappedTo = tr.mapping.map(to);
-          tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-          tr = (0, _utils.selectNode)(tr, mappedTo, node.type.name);
-          tr.setMeta(_main.key, {
-            nodeMoved: true
-          });
-          api === null || api === void 0 || api.core.actions.focus();
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-            eventType: _analytics.EVENT_TYPE.TRACK,
-            action: _analytics.ACTION.MOVED,
-            actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-            attributes: {
-              nodeDepth: resolvedNode.depth,
-              nodeType: node.type.name
-            }
-          })(tr);
-          return tr;
-        };
-      },
-      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
           tr.setMeta(_main.key, {
             activeNode: {
               pos: pos,
@@ -73,8 +41,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
-        return function (_ref5) {
-          var tr = _ref5.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           if (pos === undefined) {
             return tr;
           }

package/dist/cjs/pm-plugins/keymap.js

@@ -7,7 +7,9 @@ exports.boundKeydownHandler = void 0;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _moveNode = require("../commands/move-node");
 var _showDragHandle = require("../commands/show-drag-handle");
+var _consts = require("../consts");
 function keymapList(api) {
   var keymapList = {};
   if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -16,6 +18,8 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP), keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN), keymapList);
   }
   return keymapList;
 }

package/dist/cjs/ui/drag-handle.js

@@ -25,7 +25,10 @@ var _utils = require("../utils");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -196,8 +199,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           });
           return tr;
         });
-      } else {
-        // return focus to editor to resume editing from caret positon
+      } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
+        return pressed;
+      })) {
+        // If not trying to press shortcut keys,
+        // return focus to editor to resume editing from caret position
         view.focus();
       }
     }

package/dist/cjs/ui/drop-target.js

@@ -15,7 +15,10 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _consts = require("./consts");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/global-styles.js

@@ -8,7 +8,10 @@ exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var extendedHoverZone = (0, _react.css)({

package/dist/cjs/ui/mouse-move-wrapper.js

@@ -12,7 +12,10 @@ var _bindEventListener = require("bind-event-listener");
 var _main = require("../pm-plugins/main");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 var _consts = require("./consts");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/es2019/commands/move-node.js

@@ -0,0 +1,125 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { DIRECTION } from '../consts';
+import { key } from '../pm-plugins/main';
+import { selectNode } from '../utils';
+
+/**
+ *
+ * @returns the start position of a node if the node can be moved, otherwise -1
+ */
+const getCurrentNodePos = state => {
+  var _activeNode$handleOpt;
+  const {
+    selection
+  } = state;
+  const {
+    activeNode
+  } = key.getState(state) || {};
+  let currentNodePos = -1;
+
+  // There are 3 cases when a node can be moved
+  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
+    // 1. drag handle of the node is focused
+    currentNodePos = activeNode.pos;
+  } else if (isInTable(state)) {
+    if (isTableSelected(selection)) {
+      var _findTable$pos, _findTable;
+      // We only move table node if it's fully selected
+      // to avoid shortcut collision with table drag and drop
+      currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+    }
+  } else if (!(state.selection instanceof GapCursorSelection)) {
+    // 2. caret cursor is inside the node
+    // 3. the start of the selection is inside the node
+    currentNodePos = selection.$from.before(1);
+  }
+  return currentNodePos;
+};
+export const moveNodeViaShortcut = (api, direction) => {
+  return state => {
+    const currentNodePos = getCurrentNodePos(state);
+    if (currentNodePos > -1) {
+      var _state$doc$nodeAt;
+      const $pos = state.doc.resolve(currentNodePos);
+      let moveToPos = -1;
+      if (direction === DIRECTION.UP) {
+        const nodeBefore = $pos.nodeBefore;
+        if (nodeBefore) {
+          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        }
+      } else {
+        const endOfDoc = $pos.end();
+        const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        const nodeAfter = state.doc.nodeAt(nodeAfterPos);
+        if (nodeAfterPos < endOfDoc && nodeAfter) {
+          // if not the last node, move to the end of the next node
+          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        }
+      }
+      const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
+      if (moveToPos > -1) {
+        var _api$core;
+        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+          tr
+        }) => {
+          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
+            tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      } else if (nodeType) {
+        var _api$core2;
+        // If the node is first/last one, only select the node
+        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+          tr
+        }) => {
+          selectNode(tr, currentNodePos, nodeType);
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP) => ({
+  tr
+}) => {
+  var _node$nodeSize, _api$analytics;
+  const node = tr.doc.nodeAt(start);
+  const resolvedNode = tr.doc.resolve(start);
+  if (!node) {
+    return tr;
+  }
+  const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
+  const end = start + size;
+  let nodeCopy = tr.doc.content.cut(start, end); // cut the content
+  tr.delete(start, end); // delete the content from the original position
+  const mappedTo = tr.mapping.map(to);
+  tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+  tr = selectNode(tr, mappedTo, node.type.name);
+  tr.setMeta(key, {
+    nodeMoved: true
+  });
+  api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+    eventType: EVENT_TYPE.TRACK,
+    action: ACTION.MOVED,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+    attributes: {
+      nodeDepth: resolvedNode.depth,
+      nodeType: node.type.name,
+      ...(fg('platform_editor_element_drag_and_drop_ed_23873') && {
+        inputMethod
+      })
+    }
+  })(tr);
+  return tr;
+};

package/dist/es2019/consts.js

@@ -0,0 +1,5 @@
+export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
+  DIRECTION["UP"] = "up";
+  DIRECTION["DOWN"] = "down";
+  return DIRECTION;
+}({});

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { moveNode } from './commands/move-node';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -17,38 +17,7 @@ export const blockControlsPlugin = ({
     }];
   },
   commands: {
-    moveNode: (start, to) => ({
-      tr
-    }) => {
-      var _node$nodeSize, _api$analytics;
-      const node = tr.doc.nodeAt(start);
-      const resolvedNode = tr.doc.resolve(start);
-      if (!node) {
-        return tr;
-      }
-      const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-      const end = start + size;
-      let nodeCopy = tr.doc.content.cut(start, end); // cut the content
-      tr.delete(start, end); // delete the content from the original position
-      const mappedTo = tr.mapping.map(to);
-      tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-      tr = selectNode(tr, mappedTo, node.type.name);
-      tr.setMeta(key, {
-        nodeMoved: true
-      });
-      api === null || api === void 0 ? void 0 : api.core.actions.focus();
-      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
-        eventType: EVENT_TYPE.TRACK,
-        action: ACTION.MOVED,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-        attributes: {
-          nodeDepth: resolvedNode.depth,
-          nodeType: node.type.name
-        }
-      })(tr);
-      return tr;
-    },
+    moveNode: moveNode(api),
     showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
       tr
     }) => {

package/dist/es2019/pm-plugins/keymap.js

@@ -1,7 +1,9 @@
-import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
+import { DIRECTION } from '../consts';
 function keymapList(api) {
   let keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -10,6 +12,8 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
+    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
+    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
   }
   return keymapList;
 }

package/dist/es2019/ui/drag-handle.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -186,8 +189,9 @@ const DragHandleInternal = ({
           });
           return tr;
         });
-      } else {
-        // return focus to editor to resume editing from caret positon
+      } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
+        // If not trying to press shortcut keys,
+        // return focus to editor to resume editing from caret position
         view.focus();
       }
     }

package/dist/es2019/ui/drop-target.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/global-styles.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/es2019/ui/mouse-move-wrapper.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/commands/move-node.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { DIRECTION } from '../consts';
+import { key } from '../pm-plugins/main';
+import { selectNode } from '../utils';
+
+/**
+ *
+ * @returns the start position of a node if the node can be moved, otherwise -1
+ */
+var getCurrentNodePos = function getCurrentNodePos(state) {
+  var _activeNode$handleOpt;
+  var selection = state.selection;
+  var _ref = key.getState(state) || {},
+    activeNode = _ref.activeNode;
+  var currentNodePos = -1;
+
+  // There are 3 cases when a node can be moved
+  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
+    // 1. drag handle of the node is focused
+    currentNodePos = activeNode.pos;
+  } else if (isInTable(state)) {
+    if (isTableSelected(selection)) {
+      var _findTable$pos, _findTable;
+      // We only move table node if it's fully selected
+      // to avoid shortcut collision with table drag and drop
+      currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+    }
+  } else if (!(state.selection instanceof GapCursorSelection)) {
+    // 2. caret cursor is inside the node
+    // 3. the start of the selection is inside the node
+    currentNodePos = selection.$from.before(1);
+  }
+  return currentNodePos;
+};
+export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
+  return function (state) {
+    var currentNodePos = getCurrentNodePos(state);
+    if (currentNodePos > -1) {
+      var _state$doc$nodeAt;
+      var $pos = state.doc.resolve(currentNodePos);
+      var moveToPos = -1;
+      if (direction === DIRECTION.UP) {
+        var nodeBefore = $pos.nodeBefore;
+        if (nodeBefore) {
+          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        }
+      } else {
+        var endOfDoc = $pos.end();
+        var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        var nodeAfter = state.doc.nodeAt(nodeAfterPos);
+        if (nodeAfterPos < endOfDoc && nodeAfter) {
+          // if not the last node, move to the end of the next node
+          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        }
+      }
+      var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
+      if (moveToPos > -1) {
+        var _api$core;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
+            tr: tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      } else if (nodeType) {
+        var _api$core2;
+        // If the node is first/last one, only select the node
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          selectNode(tr, currentNodePos, nodeType);
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export var moveNode = function moveNode(api) {
+  return function (start, to) {
+    var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
+    return function (_ref4) {
+      var _node$nodeSize, _api$analytics;
+      var tr = _ref4.tr;
+      var node = tr.doc.nodeAt(start);
+      var resolvedNode = tr.doc.resolve(start);
+      if (!node) {
+        return tr;
+      }
+      var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
+      var end = start + size;
+      var nodeCopy = tr.doc.content.cut(start, end); // cut the content
+      tr.delete(start, end); // delete the content from the original position
+      var mappedTo = tr.mapping.map(to);
+      tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+      tr = selectNode(tr, mappedTo, node.type.name);
+      tr.setMeta(key, {
+        nodeMoved: true
+      });
+      api === null || api === void 0 || api.core.actions.focus();
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        eventType: EVENT_TYPE.TRACK,
+        action: ACTION.MOVED,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: _objectSpread({
+          nodeDepth: resolvedNode.depth,
+          nodeType: node.type.name
+        }, fg('platform_editor_element_drag_and_drop_ed_23873') && {
+          inputMethod: inputMethod
+        })
+      })(tr);
+      return tr;
+    };
+  };
+};

package/dist/esm/consts.js

@@ -0,0 +1,5 @@
+export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
+  DIRECTION["UP"] = "up";
+  DIRECTION["DOWN"] = "down";
+  return DIRECTION;
+}({});

package/dist/esm/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { moveNode } from './commands/move-node';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -18,42 +18,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }];
     },
     commands: {
-      moveNode: function moveNode(start, to) {
+      moveNode: moveNode(api),
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref3) {
-          var _node$nodeSize, _api$analytics;
           var tr = _ref3.tr;
-          var node = tr.doc.nodeAt(start);
-          var resolvedNode = tr.doc.resolve(start);
-          if (!node) {
-            return tr;
-          }
-          var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-          var end = start + size;
-          var nodeCopy = tr.doc.content.cut(start, end); // cut the content
-          tr.delete(start, end); // delete the content from the original position
-          var mappedTo = tr.mapping.map(to);
-          tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-          tr = selectNode(tr, mappedTo, node.type.name);
-          tr.setMeta(key, {
-            nodeMoved: true
-          });
-          api === null || api === void 0 || api.core.actions.focus();
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-            eventType: EVENT_TYPE.TRACK,
-            action: ACTION.MOVED,
-            actionSubject: ACTION_SUBJECT.ELEMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-            attributes: {
-              nodeDepth: resolvedNode.depth,
-              nodeType: node.type.name
-            }
-          })(tr);
-          return tr;
-        };
-      },
-      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
           tr.setMeta(key, {
             activeNode: {
               pos: pos,
@@ -66,8 +34,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
-        return function (_ref5) {
-          var tr = _ref5.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           if (pos === undefined) {
             return tr;
           }

package/dist/esm/pm-plugins/keymap.js

@@ -1,7 +1,9 @@
-import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
+import { DIRECTION } from '../consts';
 function keymapList(api) {
   var keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -10,6 +12,8 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
+    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
+    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
   }
   return keymapList;
 }

package/dist/esm/ui/drag-handle.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -187,8 +190,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           });
           return tr;
         });
-      } else {
-        // return focus to editor to resume editing from caret positon
+      } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
+        return pressed;
+      })) {
+        // If not trying to press shortcut keys,
+        // return focus to editor to resume editing from caret position
         view.focus();
       }
     }

package/dist/esm/ui/drop-target.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/ui/global-styles.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/esm/ui/mouse-move-wrapper.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/types/commands/move-node.d.ts

@@ -0,0 +1,5 @@
+import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { DIRECTION } from '../consts';
+import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
+export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
+export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;

package/dist/types/consts.d.ts

@@ -0,0 +1,4 @@
+export declare enum DIRECTION {
+    UP = "up",
+    DOWN = "down"
+}

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -16,6 +17,7 @@ export interface PluginState {
         pos: number;
         anchorName: string;
         nodeType: string;
+        handleOptions?: HandleOptions;
     } | null;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
@@ -47,7 +49,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveNode: (start: number, to: number) => EditorCommand;
+        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
@@ -67,3 +69,4 @@ export type BlockControlsMeta = {
     editorHeight: number;
     nodeMoved: boolean;
 };
+export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT;

package/dist/types/ui/global-styles.d.ts

@@ -1,3 +1,6 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

package/dist/types-ts4.5/commands/move-node.d.ts

@@ -0,0 +1,5 @@
+import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { DIRECTION } from '../consts';
+import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
+export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
+export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;

package/dist/types-ts4.5/consts.d.ts

@@ -0,0 +1,4 @@
+export declare enum DIRECTION {
+    UP = "up",
+    DOWN = "down"
+}

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';
+export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';

package/dist/types-ts4.5/types.d.ts

@@ -1,3 +1,4 @@
+import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -16,6 +17,7 @@ export interface PluginState {
         pos: number;
         anchorName: string;
         nodeType: string;
+        handleOptions?: HandleOptions;
     } | null;
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
@@ -47,7 +49,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveNode: (start: number, to: number) => EditorCommand;
+        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
@@ -67,3 +69,4 @@ export type BlockControlsMeta = {
     editorHeight: number;
     nodeMoved: boolean;
 };
+export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -1,3 +1,6 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.6.1",
+	"version": "1.7.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^86.2.0",
+		"@atlaskit/editor-common": "^86.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",