@atlaskit/editor-plugin-block-controls 3.8.4 → 3.8.5
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 +9 -0
- package/dist/cjs/editor-commands/move-node.js +50 -62
- package/dist/cjs/editor-commands/show-drag-handle.js +5 -73
- package/dist/cjs/pm-plugins/decorations-anchor.js +9 -10
- package/dist/cjs/pm-plugins/decorations-common.js +2 -5
- package/dist/cjs/pm-plugins/decorations-drag-handle.js +18 -22
- package/dist/cjs/pm-plugins/decorations-drop-target.js +46 -48
- package/dist/cjs/pm-plugins/handle-mouse-over.js +5 -10
- package/dist/cjs/pm-plugins/keymap.js +10 -13
- package/dist/cjs/pm-plugins/main.js +4 -177
- package/dist/cjs/ui/drag-handle.js +6 -9
- package/dist/cjs/ui/drop-target.js +1 -1
- package/dist/cjs/ui/global-styles.js +1 -28
- package/dist/es2019/editor-commands/move-node.js +50 -62
- package/dist/es2019/editor-commands/show-drag-handle.js +4 -69
- package/dist/es2019/pm-plugins/decorations-anchor.js +10 -11
- package/dist/es2019/pm-plugins/decorations-common.js +1 -2
- package/dist/es2019/pm-plugins/decorations-drag-handle.js +18 -24
- package/dist/es2019/pm-plugins/decorations-drop-target.js +47 -49
- package/dist/es2019/pm-plugins/handle-mouse-over.js +5 -10
- package/dist/es2019/pm-plugins/keymap.js +10 -13
- package/dist/es2019/pm-plugins/main.js +3 -158
- package/dist/es2019/ui/drag-handle.js +6 -9
- package/dist/es2019/ui/drop-target.js +1 -1
- package/dist/es2019/ui/global-styles.js +1 -42
- package/dist/esm/editor-commands/move-node.js +50 -62
- package/dist/esm/editor-commands/show-drag-handle.js +5 -73
- package/dist/esm/pm-plugins/decorations-anchor.js +10 -11
- package/dist/esm/pm-plugins/decorations-common.js +1 -4
- package/dist/esm/pm-plugins/decorations-drag-handle.js +18 -22
- package/dist/esm/pm-plugins/decorations-drop-target.js +47 -49
- package/dist/esm/pm-plugins/handle-mouse-over.js +5 -10
- package/dist/esm/pm-plugins/keymap.js +10 -13
- package/dist/esm/pm-plugins/main.js +5 -177
- package/dist/esm/ui/drag-handle.js +6 -9
- package/dist/esm/ui/drop-target.js +1 -1
- package/dist/esm/ui/global-styles.js +1 -28
- package/dist/types/pm-plugins/decorations-common.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +1 -15
- package/dist/types-ts4.5/pm-plugins/decorations-common.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -15
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.8.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#133802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133802)
|
|
8
|
+
[`f523489c8b68a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f523489c8b68a) -
|
|
9
|
+
[ux] ED-27217 Clean up experiment platform_editor_element_drag_and_drop_nested
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 3.8.4
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -121,7 +121,7 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
|
|
|
121
121
|
// 2. caret cursor is inside the node
|
|
122
122
|
// 3. the start of the selection is inside the node
|
|
123
123
|
currentNodePos = selection.$from.before(1);
|
|
124
|
-
if (selection.$from.depth > 0
|
|
124
|
+
if (selection.$from.depth > 0) {
|
|
125
125
|
currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)(state);
|
|
126
126
|
}
|
|
127
127
|
}
|
|
@@ -135,12 +135,8 @@ var getFocusedHandle = function getFocusedHandle(state) {
|
|
|
135
135
|
};
|
|
136
136
|
var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
|
|
137
137
|
return function (state) {
|
|
138
|
-
var isParentNodeOfTypeLayout;
|
|
139
|
-
var shouldEnableNestedDndA11y = (0, _experiments.editorExperiment)('nested-dnd', true);
|
|
140
138
|
var selection = state.selection;
|
|
141
|
-
|
|
142
|
-
isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
|
|
143
|
-
}
|
|
139
|
+
var isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
|
|
144
140
|
var isMultiSelectEnabled = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
|
|
145
141
|
var expandedSelection = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head);
|
|
146
142
|
var expandedAnchor = expandedSelection.$anchor.pos;
|
|
@@ -161,7 +157,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
161
157
|
var moveToPos = -1;
|
|
162
158
|
var nodeIndex = $currentNodePos.index();
|
|
163
159
|
var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
|
|
164
|
-
if (direction === _consts.DIRECTION.LEFT
|
|
160
|
+
if (direction === _consts.DIRECTION.LEFT) {
|
|
165
161
|
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
166
162
|
var _api$core, _api$core2;
|
|
167
163
|
var nodeBefore = $currentNodePos.nodeBefore;
|
|
@@ -205,7 +201,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
205
201
|
var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
|
|
206
202
|
moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
207
203
|
}
|
|
208
|
-
} else if (direction === _consts.DIRECTION.RIGHT
|
|
204
|
+
} else if (direction === _consts.DIRECTION.RIGHT) {
|
|
209
205
|
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
210
206
|
var _api$core4, _api$core5;
|
|
211
207
|
var endOfDoc = $currentNodePos.end();
|
|
@@ -257,7 +253,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
257
253
|
if (isLayoutColumnSelected) {
|
|
258
254
|
moveToPos = $currentNodePos.start() - 1;
|
|
259
255
|
} else {
|
|
260
|
-
var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0
|
|
256
|
+
var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
|
|
261
257
|
if (_nodeBefore) {
|
|
262
258
|
moveToPos = currentNodePos - _nodeBefore.nodeSize;
|
|
263
259
|
}
|
|
@@ -282,10 +278,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
282
278
|
if (moveToPos > -1 && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_2')) {
|
|
283
279
|
var isDestDepthSameAsSource = $currentNodePos.depth === state.doc.resolve(moveToPos).depth;
|
|
284
280
|
var isSourceLayoutColumn = nodeType === 'layoutColumn';
|
|
285
|
-
shouldMoveNode =
|
|
281
|
+
shouldMoveNode = isDestDepthSameAsSource || isSourceLayoutColumn;
|
|
286
282
|
} else {
|
|
287
283
|
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
288
|
-
shouldMoveNode =
|
|
284
|
+
shouldMoveNode = moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn';
|
|
289
285
|
}
|
|
290
286
|
var _expandSelectionBound = (0, _selection.expandSelectionBounds)($currentNodePos, selection.$to),
|
|
291
287
|
$newAnchor = _expandSelectionBound.$anchor,
|
|
@@ -358,7 +354,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
358
354
|
}
|
|
359
355
|
var sliceFrom = start;
|
|
360
356
|
var sliceTo;
|
|
361
|
-
var mappedTo;
|
|
362
357
|
var sourceNodeTypes, hasSelectedMultipleNodes;
|
|
363
358
|
var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
|
|
364
359
|
if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
|
|
@@ -384,60 +379,53 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
384
379
|
nestedExpand = _tr$doc$type$schema$n.nestedExpand;
|
|
385
380
|
var $to = tr.doc.resolve(to);
|
|
386
381
|
var $handlePos = tr.doc.resolve(start);
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
|
|
382
|
+
var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
|
|
383
|
+
var destType = $to.node().type;
|
|
384
|
+
var destParent = $to.node($to.depth);
|
|
385
|
+
var sourceNode = $handlePos.nodeAfter;
|
|
386
|
+
var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
387
|
+
var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
388
|
+
var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
|
|
395
389
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
} else {
|
|
411
|
-
fragment = _model.Fragment.from(layoutColumnContent);
|
|
390
|
+
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
391
|
+
// Move a layout column to top level
|
|
392
|
+
// Move a layout column into a table cell, only moves the content into the cell
|
|
393
|
+
// Move a layout column into a panel, only moves the content into the panel
|
|
394
|
+
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
|
|
395
|
+
// need update after we support single column layout.
|
|
396
|
+
var layoutColumnContent = sourceNode.content;
|
|
397
|
+
var fragment;
|
|
398
|
+
if (dragLayoutColumnIntoTable) {
|
|
399
|
+
var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
|
|
400
|
+
fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
|
|
401
|
+
if (!fragment) {
|
|
402
|
+
return tr;
|
|
412
403
|
}
|
|
413
|
-
(0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
|
|
414
|
-
var _mappedTo = tr.mapping.map(to);
|
|
415
|
-
tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
|
|
416
|
-
return tr;
|
|
417
|
-
}
|
|
418
|
-
if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
|
|
419
|
-
return tr;
|
|
420
|
-
}
|
|
421
|
-
var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
|
|
422
|
-
var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
|
|
423
|
-
if (!convertedNode) {
|
|
424
|
-
return tr;
|
|
425
|
-
}
|
|
426
|
-
tr.delete(sliceFrom, sliceTo); // delete the content from the original position
|
|
427
|
-
mappedTo = tr.mapping.map(to);
|
|
428
|
-
var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
|
|
429
|
-
if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
|
|
430
|
-
// if only a single empty paragraph within container, replace it
|
|
431
|
-
tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
|
|
432
404
|
} else {
|
|
433
|
-
|
|
434
|
-
tr.insert(mappedTo, convertedNode);
|
|
405
|
+
fragment = _model.Fragment.from(layoutColumnContent);
|
|
435
406
|
}
|
|
407
|
+
(0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
|
|
408
|
+
var _mappedTo = tr.mapping.map(to);
|
|
409
|
+
tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
|
|
410
|
+
return tr;
|
|
411
|
+
}
|
|
412
|
+
if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
|
|
413
|
+
return tr;
|
|
414
|
+
}
|
|
415
|
+
var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
|
|
416
|
+
var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
|
|
417
|
+
if (!convertedNode) {
|
|
418
|
+
return tr;
|
|
419
|
+
}
|
|
420
|
+
tr.delete(sliceFrom, sliceTo); // delete the content from the original position
|
|
421
|
+
var mappedTo = tr.mapping.map(to);
|
|
422
|
+
var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
|
|
423
|
+
if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
|
|
424
|
+
// if only a single empty paragraph within container, replace it
|
|
425
|
+
tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
|
|
436
426
|
} else {
|
|
437
|
-
|
|
438
|
-
tr.
|
|
439
|
-
mappedTo = tr.mapping.map(to);
|
|
440
|
-
tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
|
|
427
|
+
// otherwise just insert the content at the new position
|
|
428
|
+
tr.insert(mappedTo, convertedNode);
|
|
441
429
|
}
|
|
442
430
|
var sliceSize = sliceTo - sliceFrom;
|
|
443
431
|
tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
|
|
@@ -450,7 +438,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
450
438
|
api === null || api === void 0 || api.core.actions.focus();
|
|
451
439
|
var $mappedTo = tr.doc.resolve(mappedTo);
|
|
452
440
|
var expandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($to, [expand, nestedExpand]);
|
|
453
|
-
if (expandAncestor && (0,
|
|
441
|
+
if (expandAncestor && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
|
|
454
442
|
var wasExpandExpanded = _expand.expandedState.get(expandAncestor.node);
|
|
455
443
|
var updatedExpandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($mappedTo, [expand, nestedExpand]);
|
|
456
444
|
if (wasExpandExpanded !== undefined && updatedExpandAncestor) {
|
|
@@ -5,80 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.showDragHandleAtSelection = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
8
|
-
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
9
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
10
8
|
var _decorationsAnchor = require("../pm-plugins/decorations-anchor");
|
|
11
9
|
var _main = require("../pm-plugins/main");
|
|
12
10
|
var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
|
|
13
|
-
var showDragHandleAtSelectionOld = function showDragHandleAtSelectionOld(api, shouldFocusParentNode) {
|
|
14
|
-
return function (state, _, view) {
|
|
15
|
-
var $from = state.selection.$from;
|
|
16
|
-
var shouldFocusParentNode;
|
|
17
|
-
if ($from.depth > 1 && (0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
18
|
-
var _activeNode$handleOpt, _view$domAtPos;
|
|
19
|
-
var _ref = _main.key.getState(state) || {},
|
|
20
|
-
activeNode = _ref.activeNode;
|
|
21
|
-
|
|
22
|
-
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
23
|
-
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
24
|
-
var parentPos = (0, _utils2.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
|
|
25
|
-
var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
26
|
-
if (parentElement) {
|
|
27
|
-
// Ignored via go/ees005
|
|
28
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
29
|
-
var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
30
|
-
// Ignored via go/ees005
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
32
|
-
var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
33
|
-
if (!anchorName || !nodeType) {
|
|
34
|
-
// for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
|
|
35
|
-
var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
|
|
36
|
-
if (closestParentElement) {
|
|
37
|
-
// Ignored via go/ees005
|
|
38
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
39
|
-
anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
|
|
40
|
-
// Ignored via go/ees005
|
|
41
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
42
|
-
nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
if (api && anchorName && nodeType) {
|
|
46
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
|
|
47
|
-
isFocused: true
|
|
48
|
-
}));
|
|
49
|
-
return true;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
var rootPos = $from.before(1);
|
|
54
|
-
var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
|
|
55
|
-
var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
|
|
56
|
-
var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
|
|
57
|
-
if (rootNode) {
|
|
58
|
-
// Ignored via go/ees005
|
|
59
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
60
|
-
var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
|
|
61
|
-
// Ignored via go/ees005
|
|
62
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
63
|
-
var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
|
|
64
|
-
if (api && _anchorName && _nodeType) {
|
|
65
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
|
|
66
|
-
isFocused: true
|
|
67
|
-
}));
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return false;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
11
|
var findParentPosForHandle = function findParentPosForHandle(state) {
|
|
75
|
-
var _activeNode$
|
|
12
|
+
var _activeNode$handleOpt;
|
|
76
13
|
var $from = state.selection.$from;
|
|
77
|
-
var
|
|
78
|
-
activeNode =
|
|
14
|
+
var _ref = _main.key.getState(state) || {},
|
|
15
|
+
activeNode = _ref.activeNode;
|
|
79
16
|
|
|
80
17
|
// if a node handle is already focused, return the parent pos of that node (with focused handle)
|
|
81
|
-
if (activeNode && (_activeNode$
|
|
18
|
+
if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
|
|
82
19
|
var $activeNodePos = state.doc.resolve(activeNode.pos);
|
|
83
20
|
|
|
84
21
|
// if the handle is at the top level already, do nothing
|
|
@@ -137,7 +74,7 @@ var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
|
|
|
137
74
|
// return the closest decoration to the node
|
|
138
75
|
return nodeDecorations[0];
|
|
139
76
|
};
|
|
140
|
-
var
|
|
77
|
+
var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
|
|
141
78
|
return function (state) {
|
|
142
79
|
var decoration = findNextAnchorDecoration(state);
|
|
143
80
|
if (api && decoration) {
|
|
@@ -148,9 +85,4 @@ var showDragHandleAtSelectionNew = function showDragHandleAtSelectionNew(api) {
|
|
|
148
85
|
}
|
|
149
86
|
return false;
|
|
150
87
|
};
|
|
151
|
-
};
|
|
152
|
-
var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
|
|
153
|
-
return function (state, dispatch, view) {
|
|
154
|
-
return (0, _experiments.editorExperiment)('nested-dnd', true) ? showDragHandleAtSelectionNew(api)(state) : showDragHandleAtSelectionOld(api)(state, dispatch, view);
|
|
155
|
-
};
|
|
156
88
|
};
|
|
@@ -88,15 +88,14 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
88
88
|
var shouldDescend = shouldDescendIntoNode(node);
|
|
89
89
|
var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
|
|
90
90
|
var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
91
|
+
|
|
92
|
+
// Doesn't descend into a node
|
|
93
|
+
if (node.isInline) {
|
|
94
|
+
return false;
|
|
95
|
+
}
|
|
96
|
+
depth = newState.doc.resolve(pos).depth;
|
|
97
|
+
if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
|
|
98
|
+
return shouldDescend; //skip over, don't consider it a valid depth
|
|
100
99
|
}
|
|
101
100
|
var anchorStyles = pos === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
|
|
102
101
|
// we're rendering quick insert button and drag handle. For now override margin-top to 0
|
|
@@ -109,7 +108,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
109
108
|
nodeType: node.type.name,
|
|
110
109
|
nodeTypeWithLevel: nodeTypeWithLevel
|
|
111
110
|
}));
|
|
112
|
-
return shouldDescend && depth <
|
|
111
|
+
return shouldDescend && depth < _decorationsCommon.NESTED_DEPTH;
|
|
113
112
|
});
|
|
114
113
|
return decs;
|
|
115
114
|
};
|
|
@@ -4,19 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.
|
|
7
|
+
exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = exports.NESTED_DEPTH = void 0;
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
12
12
|
var _uuid = _interopRequireDefault(require("uuid"));
|
|
13
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
13
|
var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
|
|
15
14
|
var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
|
|
16
15
|
var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
|
|
17
|
-
var
|
|
18
|
-
return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
|
|
19
|
-
};
|
|
16
|
+
var NESTED_DEPTH = exports.NESTED_DEPTH = 100;
|
|
20
17
|
var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
|
|
21
18
|
var handleId = ObjHash.getForNode(node);
|
|
22
19
|
return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
|
|
@@ -48,25 +48,23 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
48
48
|
return undefined;
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
});
|
|
69
|
-
}
|
|
51
|
+
var newPos = getPos();
|
|
52
|
+
if (typeof newPos === 'number') {
|
|
53
|
+
var $pos = view.state.doc.resolve(newPos);
|
|
54
|
+
isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
|
|
55
|
+
}
|
|
56
|
+
/*
|
|
57
|
+
* We disable mouseover event to fix flickering issue on hover
|
|
58
|
+
* However, the tooltip for nested drag handle is no long working.
|
|
59
|
+
*/
|
|
60
|
+
if (newPos === undefined || !isTopLevelNode) {
|
|
61
|
+
// This will also hide the tooltip.
|
|
62
|
+
unbind = (0, _bindEventListener.bind)(element, {
|
|
63
|
+
type: 'mouseover',
|
|
64
|
+
listener: function listener(e) {
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
}
|
|
67
|
+
});
|
|
70
68
|
}
|
|
71
69
|
|
|
72
70
|
// There are times when global clear: "both" styles are applied to this decoration causing jumpiness
|
|
@@ -124,9 +122,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
124
122
|
type: _decorationsCommon.TYPE_HANDLE_DEC,
|
|
125
123
|
testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
|
|
126
124
|
destroy: function destroy() {
|
|
127
|
-
|
|
128
|
-
unbind && unbind();
|
|
129
|
-
}
|
|
125
|
+
return unbind && unbind();
|
|
130
126
|
}
|
|
131
127
|
});
|
|
132
128
|
};
|
|
@@ -180,62 +180,60 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
180
180
|
var endPos;
|
|
181
181
|
var $pos = newState.doc.resolve(pos);
|
|
182
182
|
var isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, $pos);
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
if (
|
|
186
|
-
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
|
|
187
|
-
return false;
|
|
188
|
-
}
|
|
189
|
-
if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 && (
|
|
190
|
-
// Not the first node
|
|
191
|
-
(parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts2.maxLayoutColumnSupported)() || isSameLayout)) {
|
|
192
|
-
// Add drop target for layout columns
|
|
193
|
-
decs.push(createLayoutDropTargetDecoration(pos, {
|
|
194
|
-
api: api,
|
|
195
|
-
parent: parent,
|
|
196
|
-
formatMessage: formatMessage
|
|
197
|
-
}, nodeViewPortalProviderAPI, anchorRectCache));
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
|
|
201
|
-
pushNodeStack(node, depth);
|
|
183
|
+
depth = $pos.depth;
|
|
184
|
+
if (isAdvancedLayoutsPreRelease2) {
|
|
185
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
|
|
202
186
|
return false;
|
|
203
187
|
}
|
|
204
|
-
if (
|
|
205
|
-
|
|
206
|
-
|
|
188
|
+
if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 && (
|
|
189
|
+
// Not the first node
|
|
190
|
+
(parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts2.maxLayoutColumnSupported)() || isSameLayout)) {
|
|
191
|
+
// Add drop target for layout columns
|
|
192
|
+
decs.push(createLayoutDropTargetDecoration(pos, {
|
|
193
|
+
api: api,
|
|
194
|
+
parent: parent,
|
|
195
|
+
formatMessage: formatMessage
|
|
196
|
+
}, nodeViewPortalProviderAPI, anchorRectCache));
|
|
207
197
|
}
|
|
198
|
+
}
|
|
199
|
+
if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
|
|
200
|
+
pushNodeStack(node, depth);
|
|
201
|
+
return false;
|
|
202
|
+
}
|
|
203
|
+
if (IGNORE_NODES.includes(node.type.name)) {
|
|
204
|
+
pushNodeStack(node, depth);
|
|
205
|
+
return shouldDescend(node); //skip over, don't consider it a valid depth
|
|
206
|
+
}
|
|
208
207
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
208
|
+
// When multi select is on, validate all the nodes in the selection instead of just the handle node
|
|
209
|
+
if (isMultiSelect) {
|
|
210
|
+
var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
|
|
211
|
+
var selectionSliceChildCount = selectionSlice.content.childCount;
|
|
212
|
+
var canDropSingleNode = true;
|
|
213
|
+
var canDropMultipleNodes = true;
|
|
215
214
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
} else {
|
|
220
|
-
canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node));
|
|
221
|
-
}
|
|
222
|
-
if (!canDropMultipleNodes || !canDropSingleNode) {
|
|
223
|
-
pushNodeStack(node, depth);
|
|
224
|
-
return false; //not valid pos, so nested not valid either
|
|
225
|
-
}
|
|
215
|
+
// when there is only one node in the slice, use the same logic as when multi select is not on
|
|
216
|
+
if (selectionSliceChildCount > 1 && handleInsideSelection) {
|
|
217
|
+
canDropMultipleNodes = (0, _validation.canMoveSliceToIndex)(selectionSlice, selectionFrom, selectionTo, parent, index, $pos);
|
|
226
218
|
} else {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
return false; //not valid pos, so nested not valid either
|
|
233
|
-
}
|
|
219
|
+
canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node));
|
|
220
|
+
}
|
|
221
|
+
if (!canDropMultipleNodes || !canDropSingleNode) {
|
|
222
|
+
pushNodeStack(node, depth);
|
|
223
|
+
return false; //not valid pos, so nested not valid either
|
|
234
224
|
}
|
|
235
|
-
|
|
236
|
-
|
|
225
|
+
} else {
|
|
226
|
+
var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node);
|
|
227
|
+
|
|
228
|
+
//NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
|
|
229
|
+
if (!canDrop) {
|
|
230
|
+
pushNodeStack(node, depth);
|
|
231
|
+
return false; //not valid pos, so nested not valid either
|
|
237
232
|
}
|
|
238
233
|
}
|
|
234
|
+
if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
|
|
235
|
+
endPos = pos + node.nodeSize;
|
|
236
|
+
}
|
|
239
237
|
var previousNode = popNodeStack(depth); // created scoped variable
|
|
240
238
|
|
|
241
239
|
// only table and layout need to render full height drop target
|
|
@@ -259,7 +257,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
259
257
|
}, nodeViewPortalProviderAPI, -1, anchorRectCache));
|
|
260
258
|
}
|
|
261
259
|
pushNodeStack(node, depth);
|
|
262
|
-
return depth <
|
|
260
|
+
return depth < _decorationsCommon.NESTED_DEPTH && shouldDescend(node);
|
|
263
261
|
});
|
|
264
262
|
if (docTo === POS_END_OF_DOC) {
|
|
265
263
|
decs.push(createDropTargetDecoration(POS_END_OF_DOC, {
|
|
@@ -34,7 +34,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
34
34
|
if (rootElement) {
|
|
35
35
|
var _rootElement$parentEl;
|
|
36
36
|
// We want to exlude handles from showing for empty paragraph and heading nodes
|
|
37
|
-
if (
|
|
37
|
+
if (isEmptyNestedParagraphOrHeading(rootElement)) {
|
|
38
38
|
return false;
|
|
39
39
|
}
|
|
40
40
|
if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
@@ -47,12 +47,12 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
47
47
|
var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
|
|
48
48
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
49
49
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
50
|
-
if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow')
|
|
50
|
+
if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow')) {
|
|
51
51
|
rootElement = parentElement;
|
|
52
52
|
}
|
|
53
53
|
} else {
|
|
54
54
|
// We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
|
|
55
|
-
if (parentElement && parentElementType === 'table'
|
|
55
|
+
if (parentElement && parentElementType === 'table') {
|
|
56
56
|
rootElement = parentElement;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -73,7 +73,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
73
73
|
}
|
|
74
74
|
var parentRootElement = rootElement.parentElement;
|
|
75
75
|
var pos;
|
|
76
|
-
if (parentRootElement
|
|
76
|
+
if (parentRootElement) {
|
|
77
77
|
var _parentRootElement$ch;
|
|
78
78
|
var childNodes = Array.from(parentRootElement.childNodes);
|
|
79
79
|
var index = childNodes.indexOf(rootElement);
|
|
@@ -91,12 +91,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
91
91
|
// Don't show drag handle for layout column in a single column layout
|
|
92
92
|
return false;
|
|
93
93
|
}
|
|
94
|
-
var targetPos;
|
|
95
|
-
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
96
|
-
targetPos = view.state.doc.resolve(pos).pos;
|
|
97
|
-
} else {
|
|
98
|
-
targetPos = view.state.doc.resolve(pos).start(1) - 1;
|
|
99
|
-
}
|
|
94
|
+
var targetPos = view.state.doc.resolve(pos).pos;
|
|
100
95
|
var rootAnchorName;
|
|
101
96
|
var rootNodeType;
|
|
102
97
|
var rootPos;
|
|
@@ -7,7 +7,6 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
10
|
var _moveNode = require("../editor-commands/move-node");
|
|
12
11
|
var _showDragHandle = require("../editor-commands/show-drag-handle");
|
|
13
12
|
var _consts = require("./utils/consts");
|
|
@@ -17,8 +16,8 @@ function keymapList(api, formatMessage) {
|
|
|
17
16
|
(0, _keymaps.bindKeymapWithCommand)(
|
|
18
17
|
// Ignored via go/ees005
|
|
19
18
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
20
|
-
_keymaps.showElementDragHandle.common, function (state
|
|
21
|
-
(0, _showDragHandle.showDragHandleAtSelection)(api)(state
|
|
19
|
+
_keymaps.showElementDragHandle.common, function (state) {
|
|
20
|
+
(0, _showDragHandle.showDragHandleAtSelection)(api)(state);
|
|
22
21
|
//we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
|
|
23
22
|
return true;
|
|
24
23
|
}, keymapList);
|
|
@@ -30,16 +29,14 @@ function keymapList(api, formatMessage) {
|
|
|
30
29
|
// Ignored via go/ees005
|
|
31
30
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
32
31
|
_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
|
|
42
|
-
}
|
|
32
|
+
(0, _keymaps.bindKeymapWithCommand)(
|
|
33
|
+
// Ignored via go/ees005
|
|
34
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
35
|
+
_keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
|
|
36
|
+
(0, _keymaps.bindKeymapWithCommand)(
|
|
37
|
+
// Ignored via go/ees005
|
|
38
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
39
|
+
_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
|
|
43
40
|
}
|
|
44
41
|
return keymapList;
|
|
45
42
|
}
|