@atlaskit/editor-plugin-block-controls 3.1.6 → 3.1.8
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 +28 -0
- package/dist/cjs/pm-plugins/utils/validation.js +6 -0
- package/dist/cjs/ui/consts.js +8 -0
- package/dist/cjs/ui/drag-handle.js +37 -18
- package/dist/es2019/pm-plugins/utils/validation.js +6 -0
- package/dist/es2019/ui/consts.js +8 -0
- package/dist/es2019/ui/drag-handle.js +36 -17
- package/dist/esm/pm-plugins/utils/validation.js +6 -0
- package/dist/esm/ui/consts.js +8 -0
- package/dist/esm/ui/drag-handle.js +37 -18
- package/package.json +12 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.1.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#120895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120895)
|
|
8
|
+
[`d38911e66c554`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d38911e66c554) -
|
|
9
|
+
Select nodes on drag
|
|
10
|
+
|
|
11
|
+
## 3.1.7
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
|
|
16
|
+
[`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
|
|
17
|
+
Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
|
|
18
|
+
future to avoid an accidental regression.
|
|
19
|
+
|
|
20
|
+
This is related to
|
|
21
|
+
https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
|
|
22
|
+
|
|
23
|
+
- [#120887](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120887)
|
|
24
|
+
[`ab17c525aee48`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab17c525aee48) -
|
|
25
|
+
Fix multi-select drag previews
|
|
26
|
+
- [#120893](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120893)
|
|
27
|
+
[`8070e79030a9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8070e79030a9b) -
|
|
28
|
+
Prevent multi-select layoutColumns from dropping
|
|
29
|
+
- Updated dependencies
|
|
30
|
+
|
|
3
31
|
## 3.1.6
|
|
4
32
|
|
|
5
33
|
### Patch Changes
|
|
@@ -122,6 +122,7 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
|
|
|
122
122
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
123
123
|
}
|
|
124
124
|
function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
|
|
125
|
+
var _slice$content$firstC;
|
|
125
126
|
var canMoveNodes = true;
|
|
126
127
|
var doc = $destNodePos.doc;
|
|
127
128
|
var nodesPos = [];
|
|
@@ -130,6 +131,11 @@ function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexI
|
|
|
130
131
|
if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
|
|
131
132
|
return false;
|
|
132
133
|
}
|
|
134
|
+
|
|
135
|
+
// Multiple layout columns do not drop correctly.
|
|
136
|
+
if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_1')) {
|
|
137
|
+
return false;
|
|
138
|
+
}
|
|
133
139
|
for (var i = 0; i < slice.content.childCount; i++) {
|
|
134
140
|
var node = slice.content.maybeChild(i);
|
|
135
141
|
if (i === 0) {
|
package/dist/cjs/ui/consts.js
CHANGED
|
@@ -124,8 +124,18 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
|
|
|
124
124
|
}
|
|
125
125
|
return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
|
|
126
126
|
};
|
|
127
|
+
var getNodeMargins = function getNodeMargins(node) {
|
|
128
|
+
if (!node) {
|
|
129
|
+
return _consts.nodeMargins['default'];
|
|
130
|
+
}
|
|
131
|
+
var nodeTypeName = node.type.name;
|
|
132
|
+
if (nodeTypeName === 'heading') {
|
|
133
|
+
return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
|
|
134
|
+
}
|
|
135
|
+
return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
|
|
136
|
+
};
|
|
127
137
|
var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
128
|
-
var _api$core2, _api$
|
|
138
|
+
var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
|
|
129
139
|
var view = _ref.view,
|
|
130
140
|
api = _ref.api,
|
|
131
141
|
formatMessage = _ref.formatMessage,
|
|
@@ -153,7 +163,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
153
163
|
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
154
164
|
var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
|
|
155
165
|
var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
|
|
156
|
-
var multiSelectDnD = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.multiSelectDnD');
|
|
157
166
|
var isLayoutColumn = nodeType === 'layoutColumn';
|
|
158
167
|
var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
|
|
159
168
|
exposure: true
|
|
@@ -181,13 +190,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
181
190
|
setDragHandleSelected(!dragHandleSelected);
|
|
182
191
|
}
|
|
183
192
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
184
|
-
var _api$analytics;
|
|
193
|
+
var _api$blockControls$sh, _api$analytics;
|
|
185
194
|
var tr = _ref2.tr;
|
|
186
195
|
var startPos = getPos();
|
|
187
196
|
if (startPos === undefined) {
|
|
188
197
|
return tr;
|
|
189
198
|
}
|
|
190
|
-
var
|
|
199
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
200
|
+
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
|
|
191
201
|
if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
|
|
192
202
|
tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
|
|
193
203
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
@@ -224,7 +234,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
224
234
|
return tr;
|
|
225
235
|
});
|
|
226
236
|
view.focus();
|
|
227
|
-
}, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$
|
|
237
|
+
}, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
|
|
228
238
|
|
|
229
239
|
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
230
240
|
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
@@ -287,6 +297,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
287
297
|
};
|
|
288
298
|
},
|
|
289
299
|
onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
|
|
300
|
+
var _api$blockControls$sh2;
|
|
290
301
|
var nativeSetDragImage = _ref4.nativeSetDragImage;
|
|
291
302
|
if (isMultiSelect) {
|
|
292
303
|
var _api$core5;
|
|
@@ -296,11 +307,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
296
307
|
if (typeof handlePos !== 'number') {
|
|
297
308
|
return tr;
|
|
298
309
|
}
|
|
299
|
-
|
|
310
|
+
var oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
|
|
311
|
+
var newHandlePosCheck = handlePos >= (tr.selection.$from.depth ? tr.selection.$from.before() : tr.selection.from) && handlePos < tr.selection.to;
|
|
312
|
+
if (!tr.selection.empty && ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
|
|
300
313
|
var _api$blockControls4;
|
|
301
314
|
api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.setMultiSelectPositions()({
|
|
302
315
|
tr: tr
|
|
303
316
|
});
|
|
317
|
+
} else if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_select_node_on_drag')) {
|
|
318
|
+
tr = (0, _getSelection.selectNode)(tr, handlePos, nodeType);
|
|
304
319
|
}
|
|
305
320
|
return tr;
|
|
306
321
|
});
|
|
@@ -311,9 +326,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
311
326
|
selection = state.selection;
|
|
312
327
|
var sliceFrom = selection.from;
|
|
313
328
|
var sliceTo = selection.to;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
329
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
|
|
330
|
+
if (mSelect) {
|
|
331
|
+
var anchor = mSelect.anchor,
|
|
332
|
+
head = mSelect.head;
|
|
317
333
|
sliceFrom = Math.min(anchor, head);
|
|
318
334
|
sliceTo = Math.max(anchor, head);
|
|
319
335
|
}
|
|
@@ -350,12 +366,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
350
366
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
351
367
|
var currentNodeElement = (0, _utils.findDomRefAtPos)(nodesStartPos[i], domAtPos);
|
|
352
368
|
var maybeCurrentNode = expandedSlice.content.maybeChild(i);
|
|
353
|
-
var currentNodeSpacing = maybeCurrentNode ?
|
|
369
|
+
var currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
|
|
354
370
|
domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
|
|
355
371
|
} else {
|
|
356
372
|
// when the node is after the handle, calculate the top margin of the active node
|
|
357
373
|
var maybeNextNode = expandedSlice.content.maybeChild(i);
|
|
358
|
-
activeNodeMarginTop = maybeNextNode ?
|
|
374
|
+
activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
|
|
359
375
|
break;
|
|
360
376
|
}
|
|
361
377
|
}
|
|
@@ -379,7 +395,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
379
395
|
} else {
|
|
380
396
|
var domAtPos = view.domAtPos.bind(view);
|
|
381
397
|
var previewContent = [];
|
|
382
|
-
expandedSlice.content.descendants(function (node, pos,
|
|
398
|
+
expandedSlice.content.descendants(function (node, pos, _parent, _index) {
|
|
383
399
|
// Get the dom element of the node
|
|
384
400
|
//eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
385
401
|
var nodeDomElement = (0, _utils.findDomRefAtPos)(sliceFrom + pos, domAtPos);
|
|
@@ -403,13 +419,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
403
419
|
return;
|
|
404
420
|
}
|
|
405
421
|
api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
|
|
406
|
-
var _api$blockControls5, _api$analytics3;
|
|
422
|
+
var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
|
|
407
423
|
var tr = _ref7.tr;
|
|
408
424
|
var nodeTypes, hasSelectedMultipleNodes;
|
|
409
425
|
var resolvedMovingNode = tr.doc.resolve(start);
|
|
410
426
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
411
|
-
|
|
412
|
-
|
|
427
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
428
|
+
if (mSelect) {
|
|
429
|
+
var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, mSelect.anchor, mSelect.head);
|
|
413
430
|
nodeTypes = attributes.nodeTypes;
|
|
414
431
|
hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
|
|
415
432
|
} else {
|
|
@@ -438,7 +455,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
438
455
|
view.focus();
|
|
439
456
|
}
|
|
440
457
|
});
|
|
441
|
-
}, [anchorName, api, getPos, isMultiSelect,
|
|
458
|
+
}, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
|
|
442
459
|
var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
443
460
|
var calculatePosition = (0, _react.useCallback)(function () {
|
|
444
461
|
var parentNodeType;
|
|
@@ -529,16 +546,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
529
546
|
setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
|
|
530
547
|
}, [start, selection, view.state, isMultiSelect]);
|
|
531
548
|
(0, _react.useEffect)(function () {
|
|
549
|
+
var _api$blockControls$sh4;
|
|
532
550
|
if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
|
|
533
551
|
return;
|
|
534
552
|
}
|
|
535
|
-
var
|
|
553
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
|
|
554
|
+
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
536
555
|
if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
537
556
|
setDragHandleDisabled(true);
|
|
538
557
|
} else {
|
|
539
558
|
setDragHandleDisabled(false);
|
|
540
559
|
}
|
|
541
|
-
}, [
|
|
560
|
+
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
542
561
|
var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
|
|
543
562
|
description: formatMessage(_messages.blockControlsMessages.dragToMove)
|
|
544
563
|
}, {
|
|
@@ -115,6 +115,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
115
115
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
116
116
|
}
|
|
117
117
|
export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
|
|
118
|
+
var _slice$content$firstC;
|
|
118
119
|
let canMoveNodes = true;
|
|
119
120
|
const doc = $destNodePos.doc;
|
|
120
121
|
const nodesPos = [];
|
|
@@ -123,6 +124,11 @@ export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent,
|
|
|
123
124
|
if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
|
|
124
125
|
return false;
|
|
125
126
|
}
|
|
127
|
+
|
|
128
|
+
// Multiple layout columns do not drop correctly.
|
|
129
|
+
if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
126
132
|
for (let i = 0; i < slice.content.childCount; i++) {
|
|
127
133
|
const node = slice.content.maybeChild(i);
|
|
128
134
|
if (i === 0) {
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -114,6 +114,16 @@ const getNodeSpacingForPreview = node => {
|
|
|
114
114
|
}
|
|
115
115
|
return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
|
|
116
116
|
};
|
|
117
|
+
const getNodeMargins = node => {
|
|
118
|
+
if (!node) {
|
|
119
|
+
return nodeMargins['default'];
|
|
120
|
+
}
|
|
121
|
+
const nodeTypeName = node.type.name;
|
|
122
|
+
if (nodeTypeName === 'heading') {
|
|
123
|
+
return nodeMargins[`heading${node.attrs.level}`] || nodeMargins['default'];
|
|
124
|
+
}
|
|
125
|
+
return nodeMargins[nodeTypeName] || nodeMargins['default'];
|
|
126
|
+
};
|
|
117
127
|
export const DragHandle = ({
|
|
118
128
|
view,
|
|
119
129
|
api,
|
|
@@ -124,7 +134,7 @@ export const DragHandle = ({
|
|
|
124
134
|
handleOptions,
|
|
125
135
|
isTopLevelNode = true
|
|
126
136
|
}) => {
|
|
127
|
-
var _api$core2, _api$
|
|
137
|
+
var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
|
|
128
138
|
const start = getPos();
|
|
129
139
|
const buttonRef = useRef(null);
|
|
130
140
|
const [blockCardWidth, setBlockCardWidth] = useState(768);
|
|
@@ -135,7 +145,6 @@ export const DragHandle = ({
|
|
|
135
145
|
} = useSharedPluginState(api, ['featureFlags']);
|
|
136
146
|
const selection = useSharedPluginStateSelector(api, 'selection.selection');
|
|
137
147
|
const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
|
|
138
|
-
const multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
|
|
139
148
|
const isLayoutColumn = nodeType === 'layoutColumn';
|
|
140
149
|
const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
|
|
141
150
|
exposure: true
|
|
@@ -163,12 +172,13 @@ export const DragHandle = ({
|
|
|
163
172
|
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
|
|
164
173
|
tr
|
|
165
174
|
}) => {
|
|
166
|
-
var _api$analytics;
|
|
175
|
+
var _api$blockControls$sh, _api$analytics;
|
|
167
176
|
const startPos = getPos();
|
|
168
177
|
if (startPos === undefined) {
|
|
169
178
|
return tr;
|
|
170
179
|
}
|
|
171
|
-
const
|
|
180
|
+
const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
181
|
+
const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
|
|
172
182
|
if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
|
|
173
183
|
tr = selectNode(tr, startPos, nodeType);
|
|
174
184
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -205,7 +215,7 @@ export const DragHandle = ({
|
|
|
205
215
|
return tr;
|
|
206
216
|
});
|
|
207
217
|
view.focus();
|
|
208
|
-
}, [isMultiSelect, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$
|
|
218
|
+
}, [isMultiSelect, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
|
|
209
219
|
|
|
210
220
|
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
211
221
|
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
@@ -267,6 +277,7 @@ export const DragHandle = ({
|
|
|
267
277
|
onGenerateDragPreview: ({
|
|
268
278
|
nativeSetDragImage
|
|
269
279
|
}) => {
|
|
280
|
+
var _api$blockControls$sh2;
|
|
270
281
|
if (isMultiSelect) {
|
|
271
282
|
var _api$core5;
|
|
272
283
|
api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
|
|
@@ -276,11 +287,15 @@ export const DragHandle = ({
|
|
|
276
287
|
if (typeof handlePos !== 'number') {
|
|
277
288
|
return tr;
|
|
278
289
|
}
|
|
279
|
-
|
|
290
|
+
const oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
|
|
291
|
+
const newHandlePosCheck = handlePos >= (tr.selection.$from.depth ? tr.selection.$from.before() : tr.selection.from) && handlePos < tr.selection.to;
|
|
292
|
+
if (!tr.selection.empty && (fg('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
|
|
280
293
|
var _api$blockControls4;
|
|
281
294
|
api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.setMultiSelectPositions()({
|
|
282
295
|
tr
|
|
283
296
|
});
|
|
297
|
+
} else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
|
|
298
|
+
tr = selectNode(tr, handlePos, nodeType);
|
|
284
299
|
}
|
|
285
300
|
return tr;
|
|
286
301
|
});
|
|
@@ -293,11 +308,12 @@ export const DragHandle = ({
|
|
|
293
308
|
} = state;
|
|
294
309
|
let sliceFrom = selection.from;
|
|
295
310
|
let sliceTo = selection.to;
|
|
296
|
-
|
|
311
|
+
const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
|
|
312
|
+
if (mSelect) {
|
|
297
313
|
const {
|
|
298
314
|
anchor,
|
|
299
315
|
head
|
|
300
|
-
} =
|
|
316
|
+
} = mSelect;
|
|
301
317
|
sliceFrom = Math.min(anchor, head);
|
|
302
318
|
sliceTo = Math.max(anchor, head);
|
|
303
319
|
}
|
|
@@ -334,12 +350,12 @@ export const DragHandle = ({
|
|
|
334
350
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
335
351
|
const currentNodeElement = findDomRefAtPos(nodesStartPos[i], domAtPos);
|
|
336
352
|
const maybeCurrentNode = expandedSlice.content.maybeChild(i);
|
|
337
|
-
const currentNodeSpacing = maybeCurrentNode ?
|
|
353
|
+
const currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
|
|
338
354
|
domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
|
|
339
355
|
} else {
|
|
340
356
|
// when the node is after the handle, calculate the top margin of the active node
|
|
341
357
|
const maybeNextNode = expandedSlice.content.maybeChild(i);
|
|
342
|
-
activeNodeMarginTop = maybeNextNode ?
|
|
358
|
+
activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
|
|
343
359
|
break;
|
|
344
360
|
}
|
|
345
361
|
}
|
|
@@ -364,7 +380,7 @@ export const DragHandle = ({
|
|
|
364
380
|
} else {
|
|
365
381
|
const domAtPos = view.domAtPos.bind(view);
|
|
366
382
|
const previewContent = [];
|
|
367
|
-
expandedSlice.content.descendants((node, pos,
|
|
383
|
+
expandedSlice.content.descendants((node, pos, _parent, _index) => {
|
|
368
384
|
// Get the dom element of the node
|
|
369
385
|
//eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
370
386
|
const nodeDomElement = findDomRefAtPos(sliceFrom + pos, domAtPos);
|
|
@@ -390,12 +406,13 @@ export const DragHandle = ({
|
|
|
390
406
|
api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
|
|
391
407
|
tr
|
|
392
408
|
}) => {
|
|
393
|
-
var _api$blockControls5, _api$analytics3;
|
|
409
|
+
var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
|
|
394
410
|
let nodeTypes, hasSelectedMultipleNodes;
|
|
395
411
|
const resolvedMovingNode = tr.doc.resolve(start);
|
|
396
412
|
const maybeNode = resolvedMovingNode.nodeAfter;
|
|
397
|
-
|
|
398
|
-
|
|
413
|
+
const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
414
|
+
if (mSelect) {
|
|
415
|
+
const attributes = getMultiSelectAnalyticsAttributes(tr, mSelect.anchor, mSelect.head);
|
|
399
416
|
nodeTypes = attributes.nodeTypes;
|
|
400
417
|
hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
|
|
401
418
|
} else {
|
|
@@ -425,7 +442,7 @@ export const DragHandle = ({
|
|
|
425
442
|
view.focus();
|
|
426
443
|
}
|
|
427
444
|
});
|
|
428
|
-
}, [anchorName, api, getPos, isMultiSelect,
|
|
445
|
+
}, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
|
|
429
446
|
const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
430
447
|
const calculatePosition = useCallback(() => {
|
|
431
448
|
let parentNodeType;
|
|
@@ -513,16 +530,18 @@ export const DragHandle = ({
|
|
|
513
530
|
setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
|
|
514
531
|
}, [start, selection, view.state, isMultiSelect]);
|
|
515
532
|
useEffect(() => {
|
|
533
|
+
var _api$blockControls$sh4;
|
|
516
534
|
if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
517
535
|
return;
|
|
518
536
|
}
|
|
519
|
-
const
|
|
537
|
+
const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
|
|
538
|
+
const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
520
539
|
if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
521
540
|
setDragHandleDisabled(true);
|
|
522
541
|
} else {
|
|
523
542
|
setDragHandleDisabled(false);
|
|
524
543
|
}
|
|
525
|
-
}, [
|
|
544
|
+
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
526
545
|
let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
|
|
527
546
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
528
547
|
}, {
|
|
@@ -113,6 +113,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
113
113
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
114
114
|
}
|
|
115
115
|
export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
|
|
116
|
+
var _slice$content$firstC;
|
|
116
117
|
var canMoveNodes = true;
|
|
117
118
|
var doc = $destNodePos.doc;
|
|
118
119
|
var nodesPos = [];
|
|
@@ -121,6 +122,11 @@ export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent,
|
|
|
121
122
|
if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
|
|
122
123
|
return false;
|
|
123
124
|
}
|
|
125
|
+
|
|
126
|
+
// Multiple layout columns do not drop correctly.
|
|
127
|
+
if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
|
|
128
|
+
return false;
|
|
129
|
+
}
|
|
124
130
|
for (var i = 0; i < slice.content.childCount; i++) {
|
|
125
131
|
var node = slice.content.maybeChild(i);
|
|
126
132
|
if (i === 0) {
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -119,8 +119,18 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
|
|
|
119
119
|
}
|
|
120
120
|
return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
|
|
121
121
|
};
|
|
122
|
+
var getNodeMargins = function getNodeMargins(node) {
|
|
123
|
+
if (!node) {
|
|
124
|
+
return nodeMargins['default'];
|
|
125
|
+
}
|
|
126
|
+
var nodeTypeName = node.type.name;
|
|
127
|
+
if (nodeTypeName === 'heading') {
|
|
128
|
+
return nodeMargins["heading".concat(node.attrs.level)] || nodeMargins['default'];
|
|
129
|
+
}
|
|
130
|
+
return nodeMargins[nodeTypeName] || nodeMargins['default'];
|
|
131
|
+
};
|
|
122
132
|
export var DragHandle = function DragHandle(_ref) {
|
|
123
|
-
var _api$core2, _api$
|
|
133
|
+
var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
|
|
124
134
|
var view = _ref.view,
|
|
125
135
|
api = _ref.api,
|
|
126
136
|
formatMessage = _ref.formatMessage,
|
|
@@ -148,7 +158,6 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
148
158
|
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
149
159
|
var selection = useSharedPluginStateSelector(api, 'selection.selection');
|
|
150
160
|
var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
|
|
151
|
-
var multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
|
|
152
161
|
var isLayoutColumn = nodeType === 'layoutColumn';
|
|
153
162
|
var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
|
|
154
163
|
exposure: true
|
|
@@ -176,13 +185,14 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
176
185
|
setDragHandleSelected(!dragHandleSelected);
|
|
177
186
|
}
|
|
178
187
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
179
|
-
var _api$analytics;
|
|
188
|
+
var _api$blockControls$sh, _api$analytics;
|
|
180
189
|
var tr = _ref2.tr;
|
|
181
190
|
var startPos = getPos();
|
|
182
191
|
if (startPos === undefined) {
|
|
183
192
|
return tr;
|
|
184
193
|
}
|
|
185
|
-
var
|
|
194
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
195
|
+
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
|
|
186
196
|
if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
|
|
187
197
|
tr = selectNode(tr, startPos, nodeType);
|
|
188
198
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -219,7 +229,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
219
229
|
return tr;
|
|
220
230
|
});
|
|
221
231
|
view.focus();
|
|
222
|
-
}, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$
|
|
232
|
+
}, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
|
|
223
233
|
|
|
224
234
|
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
225
235
|
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
@@ -282,6 +292,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
282
292
|
};
|
|
283
293
|
},
|
|
284
294
|
onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
|
|
295
|
+
var _api$blockControls$sh2;
|
|
285
296
|
var nativeSetDragImage = _ref4.nativeSetDragImage;
|
|
286
297
|
if (isMultiSelect) {
|
|
287
298
|
var _api$core5;
|
|
@@ -291,11 +302,15 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
291
302
|
if (typeof handlePos !== 'number') {
|
|
292
303
|
return tr;
|
|
293
304
|
}
|
|
294
|
-
|
|
305
|
+
var oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
|
|
306
|
+
var newHandlePosCheck = handlePos >= (tr.selection.$from.depth ? tr.selection.$from.before() : tr.selection.from) && handlePos < tr.selection.to;
|
|
307
|
+
if (!tr.selection.empty && (fg('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
|
|
295
308
|
var _api$blockControls4;
|
|
296
309
|
api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.setMultiSelectPositions()({
|
|
297
310
|
tr: tr
|
|
298
311
|
});
|
|
312
|
+
} else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
|
|
313
|
+
tr = selectNode(tr, handlePos, nodeType);
|
|
299
314
|
}
|
|
300
315
|
return tr;
|
|
301
316
|
});
|
|
@@ -306,9 +321,10 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
306
321
|
selection = state.selection;
|
|
307
322
|
var sliceFrom = selection.from;
|
|
308
323
|
var sliceTo = selection.to;
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
324
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
|
|
325
|
+
if (mSelect) {
|
|
326
|
+
var anchor = mSelect.anchor,
|
|
327
|
+
head = mSelect.head;
|
|
312
328
|
sliceFrom = Math.min(anchor, head);
|
|
313
329
|
sliceTo = Math.max(anchor, head);
|
|
314
330
|
}
|
|
@@ -345,12 +361,12 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
345
361
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
346
362
|
var currentNodeElement = findDomRefAtPos(nodesStartPos[i], domAtPos);
|
|
347
363
|
var maybeCurrentNode = expandedSlice.content.maybeChild(i);
|
|
348
|
-
var currentNodeSpacing = maybeCurrentNode ?
|
|
364
|
+
var currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
|
|
349
365
|
domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
|
|
350
366
|
} else {
|
|
351
367
|
// when the node is after the handle, calculate the top margin of the active node
|
|
352
368
|
var maybeNextNode = expandedSlice.content.maybeChild(i);
|
|
353
|
-
activeNodeMarginTop = maybeNextNode ?
|
|
369
|
+
activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
|
|
354
370
|
break;
|
|
355
371
|
}
|
|
356
372
|
}
|
|
@@ -374,7 +390,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
374
390
|
} else {
|
|
375
391
|
var domAtPos = view.domAtPos.bind(view);
|
|
376
392
|
var previewContent = [];
|
|
377
|
-
expandedSlice.content.descendants(function (node, pos,
|
|
393
|
+
expandedSlice.content.descendants(function (node, pos, _parent, _index) {
|
|
378
394
|
// Get the dom element of the node
|
|
379
395
|
//eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
380
396
|
var nodeDomElement = findDomRefAtPos(sliceFrom + pos, domAtPos);
|
|
@@ -398,13 +414,14 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
398
414
|
return;
|
|
399
415
|
}
|
|
400
416
|
api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
|
|
401
|
-
var _api$blockControls5, _api$analytics3;
|
|
417
|
+
var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
|
|
402
418
|
var tr = _ref7.tr;
|
|
403
419
|
var nodeTypes, hasSelectedMultipleNodes;
|
|
404
420
|
var resolvedMovingNode = tr.doc.resolve(start);
|
|
405
421
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
406
|
-
|
|
407
|
-
|
|
422
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
423
|
+
if (mSelect) {
|
|
424
|
+
var attributes = getMultiSelectAnalyticsAttributes(tr, mSelect.anchor, mSelect.head);
|
|
408
425
|
nodeTypes = attributes.nodeTypes;
|
|
409
426
|
hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
|
|
410
427
|
} else {
|
|
@@ -433,7 +450,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
433
450
|
view.focus();
|
|
434
451
|
}
|
|
435
452
|
});
|
|
436
|
-
}, [anchorName, api, getPos, isMultiSelect,
|
|
453
|
+
}, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
|
|
437
454
|
var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
438
455
|
var calculatePosition = useCallback(function () {
|
|
439
456
|
var parentNodeType;
|
|
@@ -524,16 +541,18 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
524
541
|
setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
|
|
525
542
|
}, [start, selection, view.state, isMultiSelect]);
|
|
526
543
|
useEffect(function () {
|
|
544
|
+
var _api$blockControls$sh4;
|
|
527
545
|
if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
528
546
|
return;
|
|
529
547
|
}
|
|
530
|
-
var
|
|
548
|
+
var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
|
|
549
|
+
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
531
550
|
if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
532
551
|
setDragHandleDisabled(true);
|
|
533
552
|
} else {
|
|
534
553
|
setDragHandleDisabled(false);
|
|
535
554
|
}
|
|
536
|
-
}, [
|
|
555
|
+
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
537
556
|
var helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
|
|
538
557
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
539
558
|
}, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.8",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -24,14 +24,16 @@
|
|
|
24
24
|
]
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
"sideEffects":
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"*.compiled.css"
|
|
29
|
+
],
|
|
28
30
|
"atlaskit:src": "src/index.ts",
|
|
29
31
|
"af:exports": {
|
|
30
32
|
".": "./src/index.ts"
|
|
31
33
|
},
|
|
32
34
|
"dependencies": {
|
|
33
35
|
"@atlaskit/adf-schema": "^47.2.1",
|
|
34
|
-
"@atlaskit/editor-common": "^100.
|
|
36
|
+
"@atlaskit/editor-common": "^100.4.0",
|
|
35
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
36
38
|
"@atlaskit/editor-plugin-analytics": "^2.0.0",
|
|
37
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
@@ -46,7 +48,7 @@
|
|
|
46
48
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
47
49
|
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
|
|
48
50
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
49
|
-
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.
|
|
51
|
+
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.1.0",
|
|
50
52
|
"@atlaskit/primitives": "^14.1.0",
|
|
51
53
|
"@atlaskit/theme": "^17.0.0",
|
|
52
54
|
"@atlaskit/tmp-editor-statsig": "^3.3.0",
|
|
@@ -154,6 +156,12 @@
|
|
|
154
156
|
},
|
|
155
157
|
"platform_editor_elements_dnd_shift_click_select": {
|
|
156
158
|
"type": "boolean"
|
|
159
|
+
},
|
|
160
|
+
"platform_editor_elements_dnd_multi_select_patch_1": {
|
|
161
|
+
"type": "boolean"
|
|
162
|
+
},
|
|
163
|
+
"platform_editor_elements_dnd_select_node_on_drag": {
|
|
164
|
+
"type": "boolean"
|
|
157
165
|
}
|
|
158
166
|
}
|
|
159
167
|
}
|