@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.
- package/CHANGELOG.md +20 -0
- package/dist/cjs/commands/move-node.js +132 -0
- package/dist/cjs/consts.js +11 -0
- package/dist/cjs/plugin.js +5 -37
- package/dist/cjs/pm-plugins/keymap.js +4 -0
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/cjs/ui/drag-handle.js +9 -3
- package/dist/cjs/ui/drop-target.js +4 -1
- package/dist/cjs/ui/global-styles.js +4 -1
- package/dist/cjs/ui/mouse-move-wrapper.js +4 -1
- package/dist/es2019/commands/move-node.js +125 -0
- package/dist/es2019/consts.js +5 -0
- package/dist/es2019/plugin.js +2 -33
- package/dist/es2019/pm-plugins/keymap.js +5 -1
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/es2019/ui/drag-handle.js +7 -3
- package/dist/es2019/ui/drop-target.js +4 -1
- package/dist/es2019/ui/global-styles.js +4 -1
- package/dist/es2019/ui/mouse-move-wrapper.js +4 -1
- package/dist/esm/commands/move-node.js +126 -0
- package/dist/esm/consts.js +5 -0
- package/dist/esm/plugin.js +5 -37
- package/dist/esm/pm-plugins/keymap.js +5 -1
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/esm/ui/drag-handle.js +9 -3
- package/dist/esm/ui/drop-target.js +4 -1
- package/dist/esm/ui/global-styles.js +4 -1
- package/dist/esm/ui/mouse-move-wrapper.js +4 -1
- package/dist/types/commands/move-node.d.ts +5 -0
- package/dist/types/consts.d.ts +4 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/types.d.ts +4 -1
- package/dist/types/ui/global-styles.d.ts +4 -1
- package/dist/types-ts4.5/commands/move-node.d.ts +5 -0
- package/dist/types-ts4.5/consts.d.ts +4 -0
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +4 -1
- package/dist/types-ts4.5/ui/global-styles.d.ts +4 -1
- 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
|
+
}({});
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -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
|
|
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:
|
|
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 (
|
|
77
|
-
var 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
|
|
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
|
-
/**
|
|
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
|
-
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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
|
+
};
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
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: (
|
|
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
|
|
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
|
-
/**
|
|
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
|
-
//
|
|
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
|
-
/**
|
|
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';
|
|
@@ -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
|
+
};
|
package/dist/esm/plugin.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
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:
|
|
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 (
|
|
70
|
-
var 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
|
|
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
|
-
/**
|
|
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
|
-
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
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;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -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';
|
package/dist/types/types.d.ts
CHANGED
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "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.
|
|
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.
|
|
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
|
}
|