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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/commands/move-node.js +132 -0
  3. package/dist/cjs/consts.js +11 -0
  4. package/dist/cjs/plugin.js +5 -37
  5. package/dist/cjs/pm-plugins/keymap.js +4 -0
  6. package/dist/cjs/pm-plugins/main.js +2 -2
  7. package/dist/cjs/ui/drag-handle.js +9 -3
  8. package/dist/cjs/ui/drop-target.js +4 -1
  9. package/dist/cjs/ui/global-styles.js +4 -1
  10. package/dist/cjs/ui/mouse-move-wrapper.js +4 -1
  11. package/dist/es2019/commands/move-node.js +125 -0
  12. package/dist/es2019/consts.js +5 -0
  13. package/dist/es2019/plugin.js +2 -33
  14. package/dist/es2019/pm-plugins/keymap.js +5 -1
  15. package/dist/es2019/pm-plugins/main.js +2 -2
  16. package/dist/es2019/ui/drag-handle.js +7 -3
  17. package/dist/es2019/ui/drop-target.js +4 -1
  18. package/dist/es2019/ui/global-styles.js +4 -1
  19. package/dist/es2019/ui/mouse-move-wrapper.js +4 -1
  20. package/dist/esm/commands/move-node.js +126 -0
  21. package/dist/esm/consts.js +5 -0
  22. package/dist/esm/plugin.js +5 -37
  23. package/dist/esm/pm-plugins/keymap.js +5 -1
  24. package/dist/esm/pm-plugins/main.js +2 -2
  25. package/dist/esm/ui/drag-handle.js +9 -3
  26. package/dist/esm/ui/drop-target.js +4 -1
  27. package/dist/esm/ui/global-styles.js +4 -1
  28. package/dist/esm/ui/mouse-move-wrapper.js +4 -1
  29. package/dist/types/commands/move-node.d.ts +5 -0
  30. package/dist/types/consts.d.ts +4 -0
  31. package/dist/types/index.d.ts +1 -1
  32. package/dist/types/types.d.ts +4 -1
  33. package/dist/types/ui/global-styles.d.ts +4 -1
  34. package/dist/types-ts4.5/commands/move-node.d.ts +5 -0
  35. package/dist/types-ts4.5/consts.d.ts +4 -0
  36. package/dist/types-ts4.5/index.d.ts +1 -1
  37. package/dist/types-ts4.5/types.d.ts +4 -1
  38. package/dist/types-ts4.5/ui/global-styles.d.ts +4 -1
  39. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#122706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122706)
8
+ [`1d88c71435949`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1d88c71435949) -
9
+ ED-24330 Dispatch meta to set isDragging to false in PM drop handler to remove drop target
10
+ decorations
11
+
12
+ ## 1.7.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [`042e8561002b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/042e8561002b0) -
17
+ [ux] [ED-23210] Implement shortcut for moving a node up and down in the document
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 1.6.1
4
24
 
5
25
  ### Patch Changes
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.moveNodeViaShortcut = exports.moveNode = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
+ var _selection = require("@atlaskit/editor-common/selection");
11
+ var _utils = require("@atlaskit/editor-tables/utils");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
+ var _consts = require("../consts");
14
+ var _main = require("../pm-plugins/main");
15
+ var _utils2 = require("../utils");
16
+ 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; }
17
+ 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; }
18
+ /**
19
+ *
20
+ * @returns the start position of a node if the node can be moved, otherwise -1
21
+ */
22
+ var getCurrentNodePos = function getCurrentNodePos(state) {
23
+ var _activeNode$handleOpt;
24
+ var selection = state.selection;
25
+ var _ref = _main.key.getState(state) || {},
26
+ activeNode = _ref.activeNode;
27
+ var currentNodePos = -1;
28
+
29
+ // There are 3 cases when a node can be moved
30
+ if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
31
+ // 1. drag handle of the node is focused
32
+ currentNodePos = activeNode.pos;
33
+ } else if ((0, _utils.isInTable)(state)) {
34
+ if ((0, _utils.isTableSelected)(selection)) {
35
+ var _findTable$pos, _findTable;
36
+ // We only move table node if it's fully selected
37
+ // to avoid shortcut collision with table drag and drop
38
+ currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
39
+ }
40
+ } else if (!(state.selection instanceof _selection.GapCursorSelection)) {
41
+ // 2. caret cursor is inside the node
42
+ // 3. the start of the selection is inside the node
43
+ currentNodePos = selection.$from.before(1);
44
+ }
45
+ return currentNodePos;
46
+ };
47
+ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
48
+ return function (state) {
49
+ var currentNodePos = getCurrentNodePos(state);
50
+ if (currentNodePos > -1) {
51
+ var _state$doc$nodeAt;
52
+ var $pos = state.doc.resolve(currentNodePos);
53
+ var moveToPos = -1;
54
+ if (direction === _consts.DIRECTION.UP) {
55
+ var nodeBefore = $pos.nodeBefore;
56
+ if (nodeBefore) {
57
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
58
+ }
59
+ } else {
60
+ var endOfDoc = $pos.end();
61
+ var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
62
+ var nodeAfter = state.doc.nodeAt(nodeAfterPos);
63
+ if (nodeAfterPos < endOfDoc && nodeAfter) {
64
+ // if not the last node, move to the end of the next node
65
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
66
+ }
67
+ }
68
+ var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
69
+ if (moveToPos > -1) {
70
+ var _api$core;
71
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
72
+ var tr = _ref2.tr;
73
+ moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT)({
74
+ tr: tr
75
+ });
76
+ tr.scrollIntoView();
77
+ return tr;
78
+ });
79
+ return true;
80
+ } else if (nodeType) {
81
+ var _api$core2;
82
+ // If the node is first/last one, only select the node
83
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
84
+ var tr = _ref3.tr;
85
+ (0, _utils2.selectNode)(tr, currentNodePos, nodeType);
86
+ tr.scrollIntoView();
87
+ return tr;
88
+ });
89
+ return true;
90
+ }
91
+ }
92
+ return false;
93
+ };
94
+ };
95
+ var moveNode = exports.moveNode = function moveNode(api) {
96
+ return function (start, to) {
97
+ var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
98
+ return function (_ref4) {
99
+ var _node$nodeSize, _api$analytics;
100
+ var tr = _ref4.tr;
101
+ var node = tr.doc.nodeAt(start);
102
+ var resolvedNode = tr.doc.resolve(start);
103
+ if (!node) {
104
+ return tr;
105
+ }
106
+ var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
107
+ var end = start + size;
108
+ var nodeCopy = tr.doc.content.cut(start, end); // cut the content
109
+ tr.delete(start, end); // delete the content from the original position
110
+ var mappedTo = tr.mapping.map(to);
111
+ tr.insert(mappedTo, nodeCopy); // insert the content at the new position
112
+ tr = (0, _utils2.selectNode)(tr, mappedTo, node.type.name);
113
+ tr.setMeta(_main.key, {
114
+ nodeMoved: true
115
+ });
116
+ api === null || api === void 0 || api.core.actions.focus();
117
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
118
+ eventType: _analytics.EVENT_TYPE.TRACK,
119
+ action: _analytics.ACTION.MOVED,
120
+ actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
121
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
122
+ attributes: _objectSpread({
123
+ nodeDepth: resolvedNode.depth,
124
+ nodeType: node.type.name
125
+ }, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
126
+ inputMethod: inputMethod
127
+ })
128
+ })(tr);
129
+ return tr;
130
+ };
131
+ };
132
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.DIRECTION = void 0;
7
+ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
8
+ DIRECTION["UP"] = "up";
9
+ DIRECTION["DOWN"] = "down";
10
+ return DIRECTION;
11
+ }({});
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.blockControlsPlugin = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- var _analytics = require("@atlaskit/editor-common/analytics");
9
+ var _moveNode = require("./commands/move-node");
10
10
  var _main = require("./pm-plugins/main");
11
11
  var _dragHandleMenu = require("./ui/drag-handle-menu");
12
12
  var _globalStyles = require("./ui/global-styles");
@@ -25,42 +25,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
25
25
  }];
26
26
  },
27
27
  commands: {
28
- moveNode: function moveNode(start, to) {
28
+ moveNode: (0, _moveNode.moveNode)(api),
29
+ showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
29
30
  return function (_ref3) {
30
- var _node$nodeSize, _api$analytics;
31
31
  var tr = _ref3.tr;
32
- var node = tr.doc.nodeAt(start);
33
- var resolvedNode = tr.doc.resolve(start);
34
- if (!node) {
35
- return tr;
36
- }
37
- var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
38
- var end = start + size;
39
- var nodeCopy = tr.doc.content.cut(start, end); // cut the content
40
- tr.delete(start, end); // delete the content from the original position
41
- var mappedTo = tr.mapping.map(to);
42
- tr.insert(mappedTo, nodeCopy); // insert the content at the new position
43
- tr = (0, _utils.selectNode)(tr, mappedTo, node.type.name);
44
- tr.setMeta(_main.key, {
45
- nodeMoved: true
46
- });
47
- api === null || api === void 0 || api.core.actions.focus();
48
- api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
49
- eventType: _analytics.EVENT_TYPE.TRACK,
50
- action: _analytics.ACTION.MOVED,
51
- actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
52
- actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
53
- attributes: {
54
- nodeDepth: resolvedNode.depth,
55
- nodeType: node.type.name
56
- }
57
- })(tr);
58
- return tr;
59
- };
60
- },
61
- showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
62
- return function (_ref4) {
63
- var tr = _ref4.tr;
64
32
  tr.setMeta(_main.key, {
65
33
  activeNode: {
66
34
  pos: pos,
@@ -73,8 +41,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
73
41
  };
74
42
  },
75
43
  setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
76
- return function (_ref5) {
77
- var tr = _ref5.tr;
44
+ return function (_ref4) {
45
+ var tr = _ref4.tr;
78
46
  if (pos === undefined) {
79
47
  return tr;
80
48
  }
@@ -7,7 +7,9 @@ exports.boundKeydownHandler = void 0;
7
7
  var _keymaps = require("@atlaskit/editor-common/keymaps");
8
8
  var _keymap = require("@atlaskit/editor-prosemirror/keymap");
9
9
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
+ var _moveNode = require("../commands/move-node");
10
11
  var _showDragHandle = require("../commands/show-drag-handle");
12
+ var _consts = require("../consts");
11
13
  function keymapList(api) {
12
14
  var keymapList = {};
13
15
  if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -16,6 +18,8 @@ function keymapList(api) {
16
18
  //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
17
19
  return true;
18
20
  }, keymapList);
21
+ (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP), keymapList);
22
+ (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN), keymapList);
19
23
  }
20
24
  return keymapList;
21
25
  }
@@ -255,7 +255,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
255
255
  }
256
256
 
257
257
  // Remove drop target decoration when dragging stops
258
- if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
258
+ if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
259
259
  var dropTargetDecs = decorations.find().filter(function (_ref11) {
260
260
  var spec = _ref11.spec;
261
261
  return spec.type === 'drop-target-decoration';
@@ -330,7 +330,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
330
330
  handleDOMEvents: {
331
331
  drop: function drop(view, event) {
332
332
  // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
333
- // this duplicates the an empty version of the node it was dropping,
333
+ // this duplicates an empty version of the node it was dropping,
334
334
  // Adding some check here to prevent that if drop position is within activeNode
335
335
  var state = view.state,
336
336
  dispatch = view.dispatch,
@@ -25,7 +25,10 @@ var _utils = require("../utils");
25
25
  var _dragHandlePositions = require("../utils/drag-handle-positions");
26
26
  var _consts = require("./consts");
27
27
  var _dragPreview = require("./drag-preview");
28
- /** @jsx jsx */
28
+ /**
29
+ * @jsxRuntime classic
30
+ * @jsx jsx
31
+ */
29
32
 
30
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
31
34
 
@@ -196,8 +199,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
196
199
  });
197
200
  return tr;
198
201
  });
199
- } else {
200
- // return focus to editor to resume editing from caret positon
202
+ } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
203
+ return pressed;
204
+ })) {
205
+ // If not trying to press shortcut keys,
206
+ // return focus to editor to resume editing from caret position
201
207
  view.focus();
202
208
  }
203
209
  }
@@ -15,7 +15,10 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
15
15
  var _constants = require("@atlaskit/theme/constants");
16
16
  var _dragTargetDebug = require("../utils/drag-target-debug");
17
17
  var _consts = require("./consts");
18
- /** @jsx jsx */
18
+ /**
19
+ * @jsxRuntime classic
20
+ * @jsx jsx
21
+ */
19
22
 
20
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
24
 
@@ -8,7 +8,10 @@ exports.GlobalStylesWrapper = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
- /** @jsx jsx */
11
+ /**
12
+ * @jsxRuntime classic
13
+ * @jsx jsx
14
+ */
12
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
16
 
14
17
  var extendedHoverZone = (0, _react.css)({
@@ -12,7 +12,10 @@ var _bindEventListener = require("bind-event-listener");
12
12
  var _main = require("../pm-plugins/main");
13
13
  var _dragHandlePositions = require("../utils/drag-handle-positions");
14
14
  var _consts = require("./consts");
15
- /** @jsx jsx */
15
+ /**
16
+ * @jsxRuntime classic
17
+ * @jsx jsx
18
+ */
16
19
 
17
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
18
21
 
@@ -0,0 +1,125 @@
1
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
+ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
3
+ import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { DIRECTION } from '../consts';
6
+ import { key } from '../pm-plugins/main';
7
+ import { selectNode } from '../utils';
8
+
9
+ /**
10
+ *
11
+ * @returns the start position of a node if the node can be moved, otherwise -1
12
+ */
13
+ const getCurrentNodePos = state => {
14
+ var _activeNode$handleOpt;
15
+ const {
16
+ selection
17
+ } = state;
18
+ const {
19
+ activeNode
20
+ } = key.getState(state) || {};
21
+ let currentNodePos = -1;
22
+
23
+ // There are 3 cases when a node can be moved
24
+ if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
25
+ // 1. drag handle of the node is focused
26
+ currentNodePos = activeNode.pos;
27
+ } else if (isInTable(state)) {
28
+ if (isTableSelected(selection)) {
29
+ var _findTable$pos, _findTable;
30
+ // We only move table node if it's fully selected
31
+ // to avoid shortcut collision with table drag and drop
32
+ currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
33
+ }
34
+ } else if (!(state.selection instanceof GapCursorSelection)) {
35
+ // 2. caret cursor is inside the node
36
+ // 3. the start of the selection is inside the node
37
+ currentNodePos = selection.$from.before(1);
38
+ }
39
+ return currentNodePos;
40
+ };
41
+ export const moveNodeViaShortcut = (api, direction) => {
42
+ return state => {
43
+ const currentNodePos = getCurrentNodePos(state);
44
+ if (currentNodePos > -1) {
45
+ var _state$doc$nodeAt;
46
+ const $pos = state.doc.resolve(currentNodePos);
47
+ let moveToPos = -1;
48
+ if (direction === DIRECTION.UP) {
49
+ const nodeBefore = $pos.nodeBefore;
50
+ if (nodeBefore) {
51
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
52
+ }
53
+ } else {
54
+ const endOfDoc = $pos.end();
55
+ const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
56
+ const nodeAfter = state.doc.nodeAt(nodeAfterPos);
57
+ if (nodeAfterPos < endOfDoc && nodeAfter) {
58
+ // if not the last node, move to the end of the next node
59
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
60
+ }
61
+ }
62
+ const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
63
+ if (moveToPos > -1) {
64
+ var _api$core;
65
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
66
+ tr
67
+ }) => {
68
+ moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
69
+ tr
70
+ });
71
+ tr.scrollIntoView();
72
+ return tr;
73
+ });
74
+ return true;
75
+ } else if (nodeType) {
76
+ var _api$core2;
77
+ // If the node is first/last one, only select the node
78
+ api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
79
+ tr
80
+ }) => {
81
+ selectNode(tr, currentNodePos, nodeType);
82
+ tr.scrollIntoView();
83
+ return tr;
84
+ });
85
+ return true;
86
+ }
87
+ }
88
+ return false;
89
+ };
90
+ };
91
+ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP) => ({
92
+ tr
93
+ }) => {
94
+ var _node$nodeSize, _api$analytics;
95
+ const node = tr.doc.nodeAt(start);
96
+ const resolvedNode = tr.doc.resolve(start);
97
+ if (!node) {
98
+ return tr;
99
+ }
100
+ const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
101
+ const end = start + size;
102
+ let nodeCopy = tr.doc.content.cut(start, end); // cut the content
103
+ tr.delete(start, end); // delete the content from the original position
104
+ const mappedTo = tr.mapping.map(to);
105
+ tr.insert(mappedTo, nodeCopy); // insert the content at the new position
106
+ tr = selectNode(tr, mappedTo, node.type.name);
107
+ tr.setMeta(key, {
108
+ nodeMoved: true
109
+ });
110
+ api === null || api === void 0 ? void 0 : api.core.actions.focus();
111
+ api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
112
+ eventType: EVENT_TYPE.TRACK,
113
+ action: ACTION.MOVED,
114
+ actionSubject: ACTION_SUBJECT.ELEMENT,
115
+ actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
116
+ attributes: {
117
+ nodeDepth: resolvedNode.depth,
118
+ nodeType: node.type.name,
119
+ ...(fg('platform_editor_element_drag_and_drop_ed_23873') && {
120
+ inputMethod
121
+ })
122
+ }
123
+ })(tr);
124
+ return tr;
125
+ };
@@ -0,0 +1,5 @@
1
+ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
2
+ DIRECTION["UP"] = "up";
3
+ DIRECTION["DOWN"] = "down";
4
+ return DIRECTION;
5
+ }({});
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
+ import { moveNode } from './commands/move-node';
3
3
  import { createPlugin, key } from './pm-plugins/main';
4
4
  import { DragHandleMenu } from './ui/drag-handle-menu';
5
5
  import { GlobalStylesWrapper } from './ui/global-styles';
@@ -17,38 +17,7 @@ export const blockControlsPlugin = ({
17
17
  }];
18
18
  },
19
19
  commands: {
20
- moveNode: (start, to) => ({
21
- tr
22
- }) => {
23
- var _node$nodeSize, _api$analytics;
24
- const node = tr.doc.nodeAt(start);
25
- const resolvedNode = tr.doc.resolve(start);
26
- if (!node) {
27
- return tr;
28
- }
29
- const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
30
- const end = start + size;
31
- let nodeCopy = tr.doc.content.cut(start, end); // cut the content
32
- tr.delete(start, end); // delete the content from the original position
33
- const mappedTo = tr.mapping.map(to);
34
- tr.insert(mappedTo, nodeCopy); // insert the content at the new position
35
- tr = selectNode(tr, mappedTo, node.type.name);
36
- tr.setMeta(key, {
37
- nodeMoved: true
38
- });
39
- api === null || api === void 0 ? void 0 : api.core.actions.focus();
40
- api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
41
- eventType: EVENT_TYPE.TRACK,
42
- action: ACTION.MOVED,
43
- actionSubject: ACTION_SUBJECT.ELEMENT,
44
- actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
45
- attributes: {
46
- nodeDepth: resolvedNode.depth,
47
- nodeType: node.type.name
48
- }
49
- })(tr);
50
- return tr;
51
- },
20
+ moveNode: moveNode(api),
52
21
  showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
53
22
  tr
54
23
  }) => {
@@ -1,7 +1,9 @@
1
- import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
1
+ import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
2
2
  import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
3
3
  import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { moveNodeViaShortcut } from '../commands/move-node';
4
5
  import { showDragHandleAtSelection } from '../commands/show-drag-handle';
6
+ import { DIRECTION } from '../consts';
5
7
  function keymapList(api) {
6
8
  let keymapList = {};
7
9
  if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -10,6 +12,8 @@ function keymapList(api) {
10
12
  //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
11
13
  return true;
12
14
  }, keymapList);
15
+ bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
16
+ bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
13
17
  }
14
18
  return keymapList;
15
19
  }
@@ -244,7 +244,7 @@ export const createPlugin = (api, getIntl) => {
244
244
  }
245
245
 
246
246
  // Remove drop target decoration when dragging stops
247
- if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
247
+ if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && (fg('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
248
248
  const dropTargetDecs = decorations.find().filter(({
249
249
  spec
250
250
  }) => spec.type === 'drop-target-decoration');
@@ -318,7 +318,7 @@ export const createPlugin = (api, getIntl) => {
318
318
  handleDOMEvents: {
319
319
  drop(view, event) {
320
320
  // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
321
- // this duplicates the an empty version of the node it was dropping,
321
+ // this duplicates an empty version of the node it was dropping,
322
322
  // Adding some check here to prevent that if drop position is within activeNode
323
323
  const {
324
324
  state,
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
7
  import { css, jsx } from '@emotion/react';
@@ -186,8 +189,9 @@ const DragHandleInternal = ({
186
189
  });
187
190
  return tr;
188
191
  });
189
- } else {
190
- // return focus to editor to resume editing from caret positon
192
+ } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
193
+ // If not trying to press shortcut keys,
194
+ // return focus to editor to resume editing from caret position
191
195
  view.focus();
192
196
  }
193
197
  }
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { useEffect, useMemo, useRef, useState } from 'react';
3
6
 
4
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
6
  import { css, Global, jsx } from '@emotion/react';
4
7
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
3
6
 
4
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -0,0 +1,126 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ 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; }
3
+ 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; }
4
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
5
+ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
6
+ import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { DIRECTION } from '../consts';
9
+ import { key } from '../pm-plugins/main';
10
+ import { selectNode } from '../utils';
11
+
12
+ /**
13
+ *
14
+ * @returns the start position of a node if the node can be moved, otherwise -1
15
+ */
16
+ var getCurrentNodePos = function getCurrentNodePos(state) {
17
+ var _activeNode$handleOpt;
18
+ var selection = state.selection;
19
+ var _ref = key.getState(state) || {},
20
+ activeNode = _ref.activeNode;
21
+ var currentNodePos = -1;
22
+
23
+ // There are 3 cases when a node can be moved
24
+ if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
25
+ // 1. drag handle of the node is focused
26
+ currentNodePos = activeNode.pos;
27
+ } else if (isInTable(state)) {
28
+ if (isTableSelected(selection)) {
29
+ var _findTable$pos, _findTable;
30
+ // We only move table node if it's fully selected
31
+ // to avoid shortcut collision with table drag and drop
32
+ currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
33
+ }
34
+ } else if (!(state.selection instanceof GapCursorSelection)) {
35
+ // 2. caret cursor is inside the node
36
+ // 3. the start of the selection is inside the node
37
+ currentNodePos = selection.$from.before(1);
38
+ }
39
+ return currentNodePos;
40
+ };
41
+ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
42
+ return function (state) {
43
+ var currentNodePos = getCurrentNodePos(state);
44
+ if (currentNodePos > -1) {
45
+ var _state$doc$nodeAt;
46
+ var $pos = state.doc.resolve(currentNodePos);
47
+ var moveToPos = -1;
48
+ if (direction === DIRECTION.UP) {
49
+ var nodeBefore = $pos.nodeBefore;
50
+ if (nodeBefore) {
51
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
52
+ }
53
+ } else {
54
+ var endOfDoc = $pos.end();
55
+ var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
56
+ var nodeAfter = state.doc.nodeAt(nodeAfterPos);
57
+ if (nodeAfterPos < endOfDoc && nodeAfter) {
58
+ // if not the last node, move to the end of the next node
59
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
60
+ }
61
+ }
62
+ var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
63
+ if (moveToPos > -1) {
64
+ var _api$core;
65
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
66
+ var tr = _ref2.tr;
67
+ moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
68
+ tr: tr
69
+ });
70
+ tr.scrollIntoView();
71
+ return tr;
72
+ });
73
+ return true;
74
+ } else if (nodeType) {
75
+ var _api$core2;
76
+ // If the node is first/last one, only select the node
77
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
78
+ var tr = _ref3.tr;
79
+ selectNode(tr, currentNodePos, nodeType);
80
+ tr.scrollIntoView();
81
+ return tr;
82
+ });
83
+ return true;
84
+ }
85
+ }
86
+ return false;
87
+ };
88
+ };
89
+ export var moveNode = function moveNode(api) {
90
+ return function (start, to) {
91
+ var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
92
+ return function (_ref4) {
93
+ var _node$nodeSize, _api$analytics;
94
+ var tr = _ref4.tr;
95
+ var node = tr.doc.nodeAt(start);
96
+ var resolvedNode = tr.doc.resolve(start);
97
+ if (!node) {
98
+ return tr;
99
+ }
100
+ var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
101
+ var end = start + size;
102
+ var nodeCopy = tr.doc.content.cut(start, end); // cut the content
103
+ tr.delete(start, end); // delete the content from the original position
104
+ var mappedTo = tr.mapping.map(to);
105
+ tr.insert(mappedTo, nodeCopy); // insert the content at the new position
106
+ tr = selectNode(tr, mappedTo, node.type.name);
107
+ tr.setMeta(key, {
108
+ nodeMoved: true
109
+ });
110
+ api === null || api === void 0 || api.core.actions.focus();
111
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
112
+ eventType: EVENT_TYPE.TRACK,
113
+ action: ACTION.MOVED,
114
+ actionSubject: ACTION_SUBJECT.ELEMENT,
115
+ actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
116
+ attributes: _objectSpread({
117
+ nodeDepth: resolvedNode.depth,
118
+ nodeType: node.type.name
119
+ }, fg('platform_editor_element_drag_and_drop_ed_23873') && {
120
+ inputMethod: inputMethod
121
+ })
122
+ })(tr);
123
+ return tr;
124
+ };
125
+ };
126
+ };
@@ -0,0 +1,5 @@
1
+ export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
2
+ DIRECTION["UP"] = "up";
3
+ DIRECTION["DOWN"] = "down";
4
+ return DIRECTION;
5
+ }({});
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
+ import { moveNode } from './commands/move-node';
3
3
  import { createPlugin, key } from './pm-plugins/main';
4
4
  import { DragHandleMenu } from './ui/drag-handle-menu';
5
5
  import { GlobalStylesWrapper } from './ui/global-styles';
@@ -18,42 +18,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
18
18
  }];
19
19
  },
20
20
  commands: {
21
- moveNode: function moveNode(start, to) {
21
+ moveNode: moveNode(api),
22
+ showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
22
23
  return function (_ref3) {
23
- var _node$nodeSize, _api$analytics;
24
24
  var tr = _ref3.tr;
25
- var node = tr.doc.nodeAt(start);
26
- var resolvedNode = tr.doc.resolve(start);
27
- if (!node) {
28
- return tr;
29
- }
30
- var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
31
- var end = start + size;
32
- var nodeCopy = tr.doc.content.cut(start, end); // cut the content
33
- tr.delete(start, end); // delete the content from the original position
34
- var mappedTo = tr.mapping.map(to);
35
- tr.insert(mappedTo, nodeCopy); // insert the content at the new position
36
- tr = selectNode(tr, mappedTo, node.type.name);
37
- tr.setMeta(key, {
38
- nodeMoved: true
39
- });
40
- api === null || api === void 0 || api.core.actions.focus();
41
- api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
42
- eventType: EVENT_TYPE.TRACK,
43
- action: ACTION.MOVED,
44
- actionSubject: ACTION_SUBJECT.ELEMENT,
45
- actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
46
- attributes: {
47
- nodeDepth: resolvedNode.depth,
48
- nodeType: node.type.name
49
- }
50
- })(tr);
51
- return tr;
52
- };
53
- },
54
- showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
55
- return function (_ref4) {
56
- var tr = _ref4.tr;
57
25
  tr.setMeta(key, {
58
26
  activeNode: {
59
27
  pos: pos,
@@ -66,8 +34,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
66
34
  };
67
35
  },
68
36
  setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
69
- return function (_ref5) {
70
- var tr = _ref5.tr;
37
+ return function (_ref4) {
38
+ var tr = _ref4.tr;
71
39
  if (pos === undefined) {
72
40
  return tr;
73
41
  }
@@ -1,7 +1,9 @@
1
- import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
1
+ import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
2
2
  import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
3
3
  import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { moveNodeViaShortcut } from '../commands/move-node';
4
5
  import { showDragHandleAtSelection } from '../commands/show-drag-handle';
6
+ import { DIRECTION } from '../consts';
5
7
  function keymapList(api) {
6
8
  var keymapList = {};
7
9
  if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -10,6 +12,8 @@ function keymapList(api) {
10
12
  //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
11
13
  return true;
12
14
  }, keymapList);
15
+ bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
16
+ bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
13
17
  }
14
18
  return keymapList;
15
19
  }
@@ -248,7 +248,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
248
248
  }
249
249
 
250
250
  // Remove drop target decoration when dragging stops
251
- if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
251
+ if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && (fg('platform_editor_element_drag_and_drop_ed_24330') ? true : !tr.docChanged)) {
252
252
  var dropTargetDecs = decorations.find().filter(function (_ref11) {
253
253
  var spec = _ref11.spec;
254
254
  return spec.type === 'drop-target-decoration';
@@ -323,7 +323,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
323
323
  handleDOMEvents: {
324
324
  drop: function drop(view, event) {
325
325
  // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
326
- // this duplicates the an empty version of the node it was dropping,
326
+ // this duplicates an empty version of the node it was dropping,
327
327
  // Adding some check here to prevent that if drop position is within activeNode
328
328
  var state = view.state,
329
329
  dispatch = view.dispatch,
@@ -1,5 +1,8 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /** @jsx jsx */
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
3
6
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
5
8
  import { css, jsx } from '@emotion/react';
@@ -187,8 +190,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
187
190
  });
188
191
  return tr;
189
192
  });
190
- } else {
191
- // return focus to editor to resume editing from caret positon
193
+ } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
194
+ return pressed;
195
+ })) {
196
+ // If not trying to press shortcut keys,
197
+ // return focus to editor to resume editing from caret position
192
198
  view.focus();
193
199
  }
194
200
  }
@@ -1,5 +1,8 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /** @jsx jsx */
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
3
6
  import { useEffect, useMemo, useRef, useState } from 'react';
4
7
 
5
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -1,5 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- /** @jsx jsx */
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
3
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
7
  import { css, Global, jsx } from '@emotion/react';
5
8
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -1,5 +1,8 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /** @jsx jsx */
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
3
6
  import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
4
7
 
5
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -0,0 +1,5 @@
1
+ import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import { DIRECTION } from '../consts';
3
+ import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
4
+ export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
5
+ export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
@@ -0,0 +1,4 @@
1
+ export declare enum DIRECTION {
2
+ UP = "up",
3
+ DOWN = "down"
4
+ }
@@ -1,2 +1,2 @@
1
1
  export { blockControlsPlugin } from './plugin';
2
- export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';
2
+ export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
@@ -1,3 +1,4 @@
1
+ import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
3
  import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
4
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -16,6 +17,7 @@ export interface PluginState {
16
17
  pos: number;
17
18
  anchorName: string;
18
19
  nodeType: string;
20
+ handleOptions?: HandleOptions;
19
21
  } | null;
20
22
  isResizerResizing: boolean;
21
23
  isDocSizeLimitEnabled: boolean | null;
@@ -47,7 +49,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
47
49
  ];
48
50
  sharedState: BlockControlsSharedState;
49
51
  commands: {
50
- moveNode: (start: number, to: number) => EditorCommand;
52
+ moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
51
53
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
52
54
  setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
53
55
  };
@@ -67,3 +69,4 @@ export type BlockControlsMeta = {
67
69
  editorHeight: number;
68
70
  nodeMoved: boolean;
69
71
  };
72
+ export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT;
@@ -1,3 +1,6 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { jsx } from '@emotion/react';
3
6
  export declare const GlobalStylesWrapper: () => jsx.JSX.Element;
@@ -0,0 +1,5 @@
1
+ import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import { DIRECTION } from '../consts';
3
+ import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
4
+ export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
5
+ export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
@@ -0,0 +1,4 @@
1
+ export declare enum DIRECTION {
2
+ UP = "up",
3
+ DOWN = "down"
4
+ }
@@ -1,2 +1,2 @@
1
1
  export { blockControlsPlugin } from './plugin';
2
- export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, } from './types';
2
+ export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
@@ -1,3 +1,4 @@
1
+ import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
3
  import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
4
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -16,6 +17,7 @@ export interface PluginState {
16
17
  pos: number;
17
18
  anchorName: string;
18
19
  nodeType: string;
20
+ handleOptions?: HandleOptions;
19
21
  } | null;
20
22
  isResizerResizing: boolean;
21
23
  isDocSizeLimitEnabled: boolean | null;
@@ -47,7 +49,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
47
49
  ];
48
50
  sharedState: BlockControlsSharedState;
49
51
  commands: {
50
- moveNode: (start: number, to: number) => EditorCommand;
52
+ moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
51
53
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
52
54
  setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
53
55
  };
@@ -67,3 +69,4 @@ export type BlockControlsMeta = {
67
69
  editorHeight: number;
68
70
  nodeMoved: boolean;
69
71
  };
72
+ export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT;
@@ -1,3 +1,6 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { jsx } from '@emotion/react';
3
6
  export declare const GlobalStylesWrapper: () => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.6.1",
3
+ "version": "1.7.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^39.0.3",
35
- "@atlaskit/editor-common": "^86.2.0",
35
+ "@atlaskit/editor-common": "^86.5.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
38
38
  "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -40,7 +40,7 @@
40
40
  "@atlaskit/editor-prosemirror": "4.0.1",
41
41
  "@atlaskit/editor-shared-styles": "^2.13.0",
42
42
  "@atlaskit/editor-tables": "^2.7.0",
43
- "@atlaskit/icon": "^22.6.0",
43
+ "@atlaskit/icon": "^22.7.0",
44
44
  "@atlaskit/platform-feature-flags": "^0.3.0",
45
45
  "@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
@@ -157,6 +157,9 @@
157
157
  },
158
158
  "platform_editor_element_drag_and_drop_ed_24150": {
159
159
  "type": "boolean"
160
+ },
161
+ "platform_editor_element_drag_and_drop_ed_24330": {
162
+ "type": "boolean"
160
163
  }
161
164
  }
162
165
  }