@atlaskit/editor-plugin-block-controls 2.1.11 → 2.2.0
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 +16 -0
- package/dist/cjs/commands/move-node.js +39 -14
- package/dist/cjs/commands/show-drag-handle.js +30 -6
- package/dist/cjs/consts.js +2 -0
- package/dist/cjs/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/cjs/pm-plugins/keymap.js +2 -0
- package/dist/cjs/ui/drag-handle.js +23 -2
- package/dist/es2019/commands/move-node.js +32 -7
- package/dist/es2019/commands/show-drag-handle.js +29 -2
- package/dist/es2019/consts.js +2 -0
- package/dist/es2019/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/es2019/pm-plugins/keymap.js +3 -1
- package/dist/es2019/ui/drag-handle.js +22 -2
- package/dist/esm/commands/move-node.js +32 -7
- package/dist/esm/commands/show-drag-handle.js +30 -6
- package/dist/esm/consts.js +2 -0
- package/dist/esm/pm-plugins/handle-mouse-over.js +1 -1
- package/dist/esm/pm-plugins/keymap.js +3 -1
- package/dist/esm/ui/drag-handle.js +22 -1
- package/dist/types/commands/show-drag-handle.d.ts +1 -1
- package/dist/types/consts.d.ts +3 -1
- package/dist/types-ts4.5/commands/show-drag-handle.d.ts +1 -1
- package/dist/types-ts4.5/consts.d.ts +3 -1
- package/package.json +5 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#148229](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148229)
|
|
8
|
+
[`657f160f0cfc0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/657f160f0cfc0) -
|
|
9
|
+
Add a11y support on moving nested elements
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#137506](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137506)
|
|
14
|
+
[`bc1742c9fd32e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc1742c9fd32e) -
|
|
15
|
+
ED-24902: Fix to only check when to hide drag handle on doc level (behind
|
|
16
|
+
confluence_frontend_page_title_enter_improvements)
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 2.1.11
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -11,12 +11,13 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
11
11
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
12
12
|
var _transforms = require("@atlaskit/editor-common/transforms");
|
|
13
13
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
14
|
-
var _utils2 = require("@atlaskit/editor-
|
|
14
|
+
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
15
|
+
var _utils3 = require("@atlaskit/editor-tables/utils");
|
|
15
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
17
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
17
18
|
var _consts = require("../consts");
|
|
18
19
|
var _main = require("../pm-plugins/main");
|
|
19
|
-
var
|
|
20
|
+
var _utils4 = require("../utils");
|
|
20
21
|
var _validation = require("../utils/validation");
|
|
21
22
|
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; }
|
|
22
23
|
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; }
|
|
@@ -46,7 +47,7 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
46
47
|
*
|
|
47
48
|
* @returns the start position of a node if the node can be moved, otherwise -1
|
|
48
49
|
*/
|
|
49
|
-
var getCurrentNodePos = function getCurrentNodePos(state) {
|
|
50
|
+
var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
|
|
50
51
|
var _activeNode$handleOpt;
|
|
51
52
|
var selection = state.selection;
|
|
52
53
|
var _ref = _main.key.getState(state) || {},
|
|
@@ -57,32 +58,53 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
|
|
|
57
58
|
if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
|
|
58
59
|
// 1. drag handle of the node is focused
|
|
59
60
|
currentNodePos = activeNode.pos;
|
|
60
|
-
} else if ((0,
|
|
61
|
-
if ((0,
|
|
61
|
+
} else if ((0, _utils3.isInTable)(state)) {
|
|
62
|
+
if ((0, _utils3.isTableSelected)(selection)) {
|
|
62
63
|
var _findTable$pos, _findTable;
|
|
63
64
|
// We only move table node if it's fully selected
|
|
64
65
|
// to avoid shortcut collision with table drag and drop
|
|
65
|
-
currentNodePos = (_findTable$pos = (_findTable = (0,
|
|
66
|
+
currentNodePos = (_findTable$pos = (_findTable = (0, _utils3.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
|
|
66
67
|
}
|
|
67
68
|
} else if (!(state.selection instanceof _selection.GapCursorSelection)) {
|
|
68
69
|
// 2. caret cursor is inside the node
|
|
69
70
|
// 3. the start of the selection is inside the node
|
|
70
71
|
currentNodePos = selection.$from.before(1);
|
|
72
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
73
|
+
currentNodePos = selection.$from.depth > (isParentNodeOfTypeLayout ? 2 : 1) ? selection.$from.before(selection.$from.depth) : selection.$from.before(1);
|
|
74
|
+
}
|
|
71
75
|
}
|
|
72
76
|
return currentNodePos;
|
|
73
77
|
};
|
|
74
78
|
var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
|
|
75
79
|
return function (state) {
|
|
76
|
-
var
|
|
80
|
+
var isParentNodeOfTypeLayout;
|
|
81
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
82
|
+
isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
|
|
83
|
+
}
|
|
84
|
+
var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
|
|
77
85
|
if (currentNodePos > -1) {
|
|
78
86
|
var _state$doc$nodeAt;
|
|
79
87
|
var $pos = state.doc.resolve(currentNodePos);
|
|
80
88
|
var moveToPos = -1;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
if (
|
|
84
|
-
|
|
89
|
+
var nodeIndex = $pos.index();
|
|
90
|
+
if (direction === _consts.DIRECTION.LEFT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
91
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
92
|
+
return false;
|
|
85
93
|
}
|
|
94
|
+
|
|
95
|
+
// get the previous layoutSection node
|
|
96
|
+
var index = $pos.index($pos.depth - 1);
|
|
97
|
+
var grandParent = $pos.node($pos.depth - 1);
|
|
98
|
+
var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
|
|
99
|
+
moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
100
|
+
} else if (direction === _consts.DIRECTION.RIGHT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
101
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
104
|
+
moveToPos = $pos.after($pos.depth) + 1;
|
|
105
|
+
} else if (direction === _consts.DIRECTION.UP) {
|
|
106
|
+
var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
|
|
107
|
+
moveToPos = $pos.depth > 1 && nodeIndex === 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
|
|
86
108
|
} else {
|
|
87
109
|
var endOfDoc = $pos.end();
|
|
88
110
|
var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
|
|
@@ -93,7 +115,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
93
115
|
}
|
|
94
116
|
}
|
|
95
117
|
var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
|
|
96
|
-
|
|
118
|
+
|
|
119
|
+
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
120
|
+
var shouldMoveNode = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
|
|
121
|
+
if (shouldMoveNode) {
|
|
97
122
|
var _api$core;
|
|
98
123
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
99
124
|
var tr = _ref2.tr;
|
|
@@ -109,7 +134,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
109
134
|
// If the node is first/last one, only select the node
|
|
110
135
|
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
|
|
111
136
|
var tr = _ref3.tr;
|
|
112
|
-
(0,
|
|
137
|
+
(0, _utils4.selectNode)(tr, currentNodePos, nodeType);
|
|
113
138
|
tr.scrollIntoView();
|
|
114
139
|
return tr;
|
|
115
140
|
});
|
|
@@ -164,7 +189,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
164
189
|
mappedTo = tr.mapping.map(to);
|
|
165
190
|
tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
|
|
166
191
|
}
|
|
167
|
-
tr = (0,
|
|
192
|
+
tr = (0, _utils4.selectNode)(tr, mappedTo, node.type.name);
|
|
168
193
|
tr.setMeta(_main.key, {
|
|
169
194
|
nodeMoved: true
|
|
170
195
|
});
|
|
@@ -4,18 +4,42 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.showDragHandleAtSelection = void 0;
|
|
7
|
+
var _utils = require("@atlaskit/editor-tables/utils");
|
|
7
8
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
|
-
var
|
|
9
|
+
var _main = require("../pm-plugins/main");
|
|
10
|
+
var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
|
|
9
11
|
return function (state, _, view) {
|
|
10
|
-
var
|
|
12
|
+
var $from = state.selection.$from;
|
|
13
|
+
var shouldFocusParentNode;
|
|
14
|
+
if ($from.depth > 1 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
15
|
+
var _activeNode$handleOpt, _view$domAtPos;
|
|
16
|
+
var _ref = _main.key.getState(state) || {},
|
|
17
|
+
activeNode = _ref.activeNode;
|
|
18
|
+
|
|
19
|
+
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
20
|
+
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
21
|
+
var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.start($from.depth - 1) : $from.start();
|
|
22
|
+
var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
23
|
+
if (parentElement) {
|
|
24
|
+
var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
25
|
+
var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
26
|
+
if (api && anchorName && nodeType) {
|
|
27
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt($from.before(), anchorName, nodeType, {
|
|
28
|
+
isFocused: true
|
|
29
|
+
}));
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
var rootPos = $from.before(1);
|
|
11
35
|
var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
12
36
|
var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
13
37
|
var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
14
38
|
if (rootNode) {
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
if (api &&
|
|
18
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos,
|
|
39
|
+
var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
40
|
+
var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
41
|
+
if (api && _anchorName && _nodeType) {
|
|
42
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
|
|
19
43
|
isFocused: true
|
|
20
44
|
}));
|
|
21
45
|
return true;
|
package/dist/cjs/consts.js
CHANGED
|
@@ -16,7 +16,7 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
|
|
|
16
16
|
var isDocFirstChildEmptyLine = function isDocFirstChildEmptyLine(elem) {
|
|
17
17
|
var _elem$firstElementChi;
|
|
18
18
|
var parentElement = elem.parentElement;
|
|
19
|
-
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
19
|
+
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
20
20
|
};
|
|
21
21
|
var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
|
|
22
22
|
var _api$blockControls;
|
|
@@ -20,6 +20,8 @@ function keymapList(api, formatMessage) {
|
|
|
20
20
|
}, keymapList);
|
|
21
21
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
|
|
22
22
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
|
|
23
|
+
(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
|
|
24
|
+
(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
|
|
23
25
|
}
|
|
24
26
|
return keymapList;
|
|
25
27
|
}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.DragHandle = void 0;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
8
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
10
|
var _react = require("react");
|
|
10
11
|
var _react2 = require("@emotion/react");
|
|
@@ -15,6 +16,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
15
16
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
16
17
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
17
18
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
19
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
18
20
|
var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
|
|
19
21
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
22
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
@@ -22,7 +24,7 @@ var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/ele
|
|
|
22
24
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
23
25
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
24
26
|
var _main = require("../pm-plugins/main");
|
|
25
|
-
var
|
|
27
|
+
var _utils2 = require("../utils");
|
|
26
28
|
var _dragHandlePositions = require("../utils/drag-handle-positions");
|
|
27
29
|
var _consts = require("./consts");
|
|
28
30
|
var _dragPreview = require("./drag-preview");
|
|
@@ -118,7 +120,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
118
120
|
if (startPos === undefined) {
|
|
119
121
|
return tr;
|
|
120
122
|
}
|
|
121
|
-
tr = (0,
|
|
123
|
+
tr = (0, _utils2.selectNode)(tr, startPos, nodeType);
|
|
122
124
|
var resolvedMovingNode = tr.doc.resolve(startPos);
|
|
123
125
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
124
126
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -368,7 +370,26 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
368
370
|
keymap: _keymaps.dragToMoveDown
|
|
369
371
|
}] : [{
|
|
370
372
|
description: formatMessage(_messages.blockControlsMessages.dragToMove)
|
|
373
|
+
}, {
|
|
374
|
+
description: formatMessage(_messages.blockControlsMessages.moveUp),
|
|
375
|
+
keymap: _keymaps.dragToMoveUp
|
|
376
|
+
}, {
|
|
377
|
+
description: formatMessage(_messages.blockControlsMessages.moveDown),
|
|
378
|
+
keymap: _keymaps.dragToMoveDown
|
|
371
379
|
}];
|
|
380
|
+
var isParentNodeOfTypeLayout;
|
|
381
|
+
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
382
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || !!(0, _utils.findParentNodeOfType)([view.state.schema.nodes.layoutSection])(view.state.selection);
|
|
383
|
+
if (isParentNodeOfTypeLayout) {
|
|
384
|
+
helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
|
|
385
|
+
description: formatMessage(_messages.blockControlsMessages.moveLeft),
|
|
386
|
+
keymap: _keymaps.dragToMoveLeft
|
|
387
|
+
}, {
|
|
388
|
+
description: formatMessage(_messages.blockControlsMessages.moveRight),
|
|
389
|
+
keymap: _keymaps.dragToMoveRight
|
|
390
|
+
}]);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
372
393
|
var message = helpDescriptors.map(function (descriptor) {
|
|
373
394
|
return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
|
|
374
395
|
}).join('. ');
|
|
@@ -3,6 +3,7 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
|
3
3
|
import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
4
4
|
import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
|
|
5
5
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
6
7
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
7
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
@@ -38,7 +39,7 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
38
39
|
*
|
|
39
40
|
* @returns the start position of a node if the node can be moved, otherwise -1
|
|
40
41
|
*/
|
|
41
|
-
const getCurrentNodePos = state => {
|
|
42
|
+
const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
|
|
42
43
|
var _activeNode$handleOpt;
|
|
43
44
|
const {
|
|
44
45
|
selection
|
|
@@ -63,21 +64,42 @@ const getCurrentNodePos = state => {
|
|
|
63
64
|
// 2. caret cursor is inside the node
|
|
64
65
|
// 3. the start of the selection is inside the node
|
|
65
66
|
currentNodePos = selection.$from.before(1);
|
|
67
|
+
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
68
|
+
currentNodePos = selection.$from.depth > (isParentNodeOfTypeLayout ? 2 : 1) ? selection.$from.before(selection.$from.depth) : selection.$from.before(1);
|
|
69
|
+
}
|
|
66
70
|
}
|
|
67
71
|
return currentNodePos;
|
|
68
72
|
};
|
|
69
73
|
export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
70
74
|
return state => {
|
|
71
|
-
|
|
75
|
+
let isParentNodeOfTypeLayout;
|
|
76
|
+
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
77
|
+
isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
|
|
78
|
+
}
|
|
79
|
+
const currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
|
|
72
80
|
if (currentNodePos > -1) {
|
|
73
81
|
var _state$doc$nodeAt;
|
|
74
82
|
const $pos = state.doc.resolve(currentNodePos);
|
|
75
83
|
let moveToPos = -1;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
if (
|
|
79
|
-
|
|
84
|
+
const nodeIndex = $pos.index();
|
|
85
|
+
if (direction === DIRECTION.LEFT && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
86
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
87
|
+
return false;
|
|
80
88
|
}
|
|
89
|
+
|
|
90
|
+
// get the previous layoutSection node
|
|
91
|
+
const index = $pos.index($pos.depth - 1);
|
|
92
|
+
const grandParent = $pos.node($pos.depth - 1);
|
|
93
|
+
const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
|
|
94
|
+
moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
95
|
+
} else if (direction === DIRECTION.RIGHT && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
96
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
97
|
+
return false;
|
|
98
|
+
}
|
|
99
|
+
moveToPos = $pos.after($pos.depth) + 1;
|
|
100
|
+
} else if (direction === DIRECTION.UP) {
|
|
101
|
+
const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
|
|
102
|
+
moveToPos = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
|
|
81
103
|
} else {
|
|
82
104
|
const endOfDoc = $pos.end();
|
|
83
105
|
const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
|
|
@@ -88,7 +110,10 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
88
110
|
}
|
|
89
111
|
}
|
|
90
112
|
const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
|
|
91
|
-
|
|
113
|
+
|
|
114
|
+
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
115
|
+
const shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
|
|
116
|
+
if (shouldMoveNode) {
|
|
92
117
|
var _api$core;
|
|
93
118
|
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
|
|
94
119
|
tr
|
|
@@ -1,6 +1,33 @@
|
|
|
1
|
+
import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
1
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
-
|
|
3
|
-
|
|
3
|
+
import { key } from '../pm-plugins/main';
|
|
4
|
+
export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
|
|
5
|
+
const {
|
|
6
|
+
$from
|
|
7
|
+
} = state.selection;
|
|
8
|
+
let shouldFocusParentNode;
|
|
9
|
+
if ($from.depth > 1 && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
10
|
+
var _activeNode$handleOpt, _view$domAtPos;
|
|
11
|
+
const {
|
|
12
|
+
activeNode
|
|
13
|
+
} = key.getState(state) || {};
|
|
14
|
+
|
|
15
|
+
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
16
|
+
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
17
|
+
const parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.start($from.depth - 1) : $from.start();
|
|
18
|
+
const parentElement = view === null || view === void 0 ? void 0 : (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
19
|
+
if (parentElement) {
|
|
20
|
+
const anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
21
|
+
const nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
22
|
+
if (api && anchorName && nodeType) {
|
|
23
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt($from.before(), anchorName, nodeType, {
|
|
24
|
+
isFocused: true
|
|
25
|
+
}));
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
const rootPos = $from.before(1);
|
|
4
31
|
const dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
5
32
|
const nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
6
33
|
const rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
package/dist/es2019/consts.js
CHANGED
|
@@ -10,7 +10,7 @@ const isEmptyNestedParagraphOrHeading = target => {
|
|
|
10
10
|
const isDocFirstChildEmptyLine = elem => {
|
|
11
11
|
var _elem$firstElementChi;
|
|
12
12
|
const parentElement = elem.parentElement;
|
|
13
|
-
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
13
|
+
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
14
14
|
};
|
|
15
15
|
export const handleMouseOver = (view, event, api) => {
|
|
16
16
|
var _api$blockControls;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
|
|
1
|
+
import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, 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
4
|
import { moveNodeViaShortcut } from '../commands/move-node';
|
|
@@ -14,6 +14,8 @@ function keymapList(api, formatMessage) {
|
|
|
14
14
|
}, keymapList);
|
|
15
15
|
bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
|
|
16
16
|
bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
|
|
17
|
+
fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
|
|
18
|
+
fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
|
|
17
19
|
}
|
|
18
20
|
return keymapList;
|
|
19
21
|
}
|
|
@@ -9,9 +9,10 @@ import { bind } from 'bind-event-listener';
|
|
|
9
9
|
import { injectIntl } from 'react-intl-next';
|
|
10
10
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
11
11
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
12
|
-
import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
12
|
+
import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
13
13
|
import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
14
14
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
15
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
15
16
|
import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
16
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
18
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -342,7 +343,7 @@ const DragHandleInternal = ({
|
|
|
342
343
|
};
|
|
343
344
|
}
|
|
344
345
|
}, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
|
|
345
|
-
|
|
346
|
+
let helpDescriptors = isTopLevelNode ? [{
|
|
346
347
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
347
348
|
}, {
|
|
348
349
|
description: formatMessage(blockControlsMessages.moveUp),
|
|
@@ -352,7 +353,26 @@ const DragHandleInternal = ({
|
|
|
352
353
|
keymap: dragToMoveDown
|
|
353
354
|
}] : [{
|
|
354
355
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
356
|
+
}, {
|
|
357
|
+
description: formatMessage(blockControlsMessages.moveUp),
|
|
358
|
+
keymap: dragToMoveUp
|
|
359
|
+
}, {
|
|
360
|
+
description: formatMessage(blockControlsMessages.moveDown),
|
|
361
|
+
keymap: dragToMoveDown
|
|
355
362
|
}];
|
|
363
|
+
let isParentNodeOfTypeLayout;
|
|
364
|
+
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
365
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || !!findParentNodeOfType([view.state.schema.nodes.layoutSection])(view.state.selection);
|
|
366
|
+
if (isParentNodeOfTypeLayout) {
|
|
367
|
+
helpDescriptors = [...helpDescriptors, {
|
|
368
|
+
description: formatMessage(blockControlsMessages.moveLeft),
|
|
369
|
+
keymap: dragToMoveLeft
|
|
370
|
+
}, {
|
|
371
|
+
description: formatMessage(blockControlsMessages.moveRight),
|
|
372
|
+
keymap: dragToMoveRight
|
|
373
|
+
}];
|
|
374
|
+
}
|
|
375
|
+
}
|
|
356
376
|
const message = helpDescriptors.map(descriptor => {
|
|
357
377
|
return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
|
|
358
378
|
}).join('. ');
|
|
@@ -6,6 +6,7 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
|
6
6
|
import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
7
7
|
import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
|
|
8
8
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
9
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
9
10
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
10
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
@@ -40,7 +41,7 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
40
41
|
*
|
|
41
42
|
* @returns the start position of a node if the node can be moved, otherwise -1
|
|
42
43
|
*/
|
|
43
|
-
var getCurrentNodePos = function getCurrentNodePos(state) {
|
|
44
|
+
var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
|
|
44
45
|
var _activeNode$handleOpt;
|
|
45
46
|
var selection = state.selection;
|
|
46
47
|
var _ref = key.getState(state) || {},
|
|
@@ -62,21 +63,42 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
|
|
|
62
63
|
// 2. caret cursor is inside the node
|
|
63
64
|
// 3. the start of the selection is inside the node
|
|
64
65
|
currentNodePos = selection.$from.before(1);
|
|
66
|
+
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
67
|
+
currentNodePos = selection.$from.depth > (isParentNodeOfTypeLayout ? 2 : 1) ? selection.$from.before(selection.$from.depth) : selection.$from.before(1);
|
|
68
|
+
}
|
|
65
69
|
}
|
|
66
70
|
return currentNodePos;
|
|
67
71
|
};
|
|
68
72
|
export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
|
|
69
73
|
return function (state) {
|
|
70
|
-
var
|
|
74
|
+
var isParentNodeOfTypeLayout;
|
|
75
|
+
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
76
|
+
isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
|
|
77
|
+
}
|
|
78
|
+
var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
|
|
71
79
|
if (currentNodePos > -1) {
|
|
72
80
|
var _state$doc$nodeAt;
|
|
73
81
|
var $pos = state.doc.resolve(currentNodePos);
|
|
74
82
|
var moveToPos = -1;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
if (
|
|
78
|
-
|
|
83
|
+
var nodeIndex = $pos.index();
|
|
84
|
+
if (direction === DIRECTION.LEFT && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
85
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
86
|
+
return false;
|
|
79
87
|
}
|
|
88
|
+
|
|
89
|
+
// get the previous layoutSection node
|
|
90
|
+
var index = $pos.index($pos.depth - 1);
|
|
91
|
+
var grandParent = $pos.node($pos.depth - 1);
|
|
92
|
+
var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
|
|
93
|
+
moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
94
|
+
} else if (direction === DIRECTION.RIGHT && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
95
|
+
if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
moveToPos = $pos.after($pos.depth) + 1;
|
|
99
|
+
} else if (direction === DIRECTION.UP) {
|
|
100
|
+
var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
|
|
101
|
+
moveToPos = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
|
|
80
102
|
} else {
|
|
81
103
|
var endOfDoc = $pos.end();
|
|
82
104
|
var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
|
|
@@ -87,7 +109,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
87
109
|
}
|
|
88
110
|
}
|
|
89
111
|
var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
|
|
90
|
-
|
|
112
|
+
|
|
113
|
+
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
114
|
+
var shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
|
|
115
|
+
if (shouldMoveNode) {
|
|
91
116
|
var _api$core;
|
|
92
117
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
93
118
|
var tr = _ref2.tr;
|
|
@@ -1,15 +1,39 @@
|
|
|
1
|
+
import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
1
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
-
|
|
3
|
+
import { key } from '../pm-plugins/main';
|
|
4
|
+
export var showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
|
|
3
5
|
return function (state, _, view) {
|
|
4
|
-
var
|
|
6
|
+
var $from = state.selection.$from;
|
|
7
|
+
var shouldFocusParentNode;
|
|
8
|
+
if ($from.depth > 1 && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
9
|
+
var _activeNode$handleOpt, _view$domAtPos;
|
|
10
|
+
var _ref = key.getState(state) || {},
|
|
11
|
+
activeNode = _ref.activeNode;
|
|
12
|
+
|
|
13
|
+
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
14
|
+
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
15
|
+
var parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.start($from.depth - 1) : $from.start();
|
|
16
|
+
var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
17
|
+
if (parentElement) {
|
|
18
|
+
var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
19
|
+
var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
20
|
+
if (api && anchorName && nodeType) {
|
|
21
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt($from.before(), anchorName, nodeType, {
|
|
22
|
+
isFocused: true
|
|
23
|
+
}));
|
|
24
|
+
return true;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
var rootPos = $from.before(1);
|
|
5
29
|
var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
6
30
|
var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
7
31
|
var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
8
32
|
if (rootNode) {
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
if (api &&
|
|
12
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos,
|
|
33
|
+
var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
34
|
+
var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
35
|
+
if (api && _anchorName && _nodeType) {
|
|
36
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
|
|
13
37
|
isFocused: true
|
|
14
38
|
}));
|
|
15
39
|
return true;
|
package/dist/esm/consts.js
CHANGED
|
@@ -10,7 +10,7 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
|
|
|
10
10
|
var isDocFirstChildEmptyLine = function isDocFirstChildEmptyLine(elem) {
|
|
11
11
|
var _elem$firstElementChi;
|
|
12
12
|
var parentElement = elem.parentElement;
|
|
13
|
-
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
13
|
+
return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
|
|
14
14
|
};
|
|
15
15
|
export var handleMouseOver = function handleMouseOver(view, event, api) {
|
|
16
16
|
var _api$blockControls;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
|
|
1
|
+
import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, 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
4
|
import { moveNodeViaShortcut } from '../commands/move-node';
|
|
@@ -14,6 +14,8 @@ function keymapList(api, formatMessage) {
|
|
|
14
14
|
}, keymapList);
|
|
15
15
|
bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
|
|
16
16
|
bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
|
|
17
|
+
fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
|
|
18
|
+
fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
|
|
17
19
|
}
|
|
18
20
|
return keymapList;
|
|
19
21
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
/**
|
|
3
4
|
* @jsxRuntime classic
|
|
@@ -10,9 +11,10 @@ import { bind } from 'bind-event-listener';
|
|
|
10
11
|
import { injectIntl } from 'react-intl-next';
|
|
11
12
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
12
13
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
13
|
-
import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
14
|
+
import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
14
15
|
import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
15
16
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
17
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
16
18
|
import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
17
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
20
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -359,7 +361,26 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
359
361
|
keymap: dragToMoveDown
|
|
360
362
|
}] : [{
|
|
361
363
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
364
|
+
}, {
|
|
365
|
+
description: formatMessage(blockControlsMessages.moveUp),
|
|
366
|
+
keymap: dragToMoveUp
|
|
367
|
+
}, {
|
|
368
|
+
description: formatMessage(blockControlsMessages.moveDown),
|
|
369
|
+
keymap: dragToMoveDown
|
|
362
370
|
}];
|
|
371
|
+
var isParentNodeOfTypeLayout;
|
|
372
|
+
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
373
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || !!findParentNodeOfType([view.state.schema.nodes.layoutSection])(view.state.selection);
|
|
374
|
+
if (isParentNodeOfTypeLayout) {
|
|
375
|
+
helpDescriptors = [].concat(_toConsumableArray(helpDescriptors), [{
|
|
376
|
+
description: formatMessage(blockControlsMessages.moveLeft),
|
|
377
|
+
keymap: dragToMoveLeft
|
|
378
|
+
}, {
|
|
379
|
+
description: formatMessage(blockControlsMessages.moveRight),
|
|
380
|
+
keymap: dragToMoveRight
|
|
381
|
+
}]);
|
|
382
|
+
}
|
|
383
|
+
}
|
|
363
384
|
var message = helpDescriptors.map(function (descriptor) {
|
|
364
385
|
return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
|
|
365
386
|
}).join('. ');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { BlockControlsPlugin } from '../types';
|
|
3
|
-
export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin
|
|
3
|
+
export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>, shouldFocusParentNode?: boolean) => Command;
|
package/dist/types/consts.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { BlockControlsPlugin } from '../types';
|
|
3
|
-
export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin
|
|
3
|
+
export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>, shouldFocusParentNode?: boolean) => Command;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@atlaskit/adf-schema": "^40.9.0",
|
|
34
|
-
"@atlaskit/editor-common": "^93.
|
|
34
|
+
"@atlaskit/editor-common": "^93.1.0",
|
|
35
35
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
37
37
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
@@ -147,6 +147,9 @@
|
|
|
147
147
|
},
|
|
148
148
|
"confluence_frontend_page_title_enter_improvements": {
|
|
149
149
|
"type": "boolean"
|
|
150
|
+
},
|
|
151
|
+
"platform_editor_element_dnd_nested_a11y": {
|
|
152
|
+
"type": "boolean"
|
|
150
153
|
}
|
|
151
154
|
}
|
|
152
155
|
}
|