@atlaskit/editor-plugin-block-controls 11.2.9 → 11.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/editor-commands/move-node.js +12 -32
  3. package/dist/cjs/editor-commands/move-to-layout.js +59 -127
  4. package/dist/cjs/pm-plugins/decorations-drop-target-active.js +11 -16
  5. package/dist/cjs/pm-plugins/decorations-drop-target.js +13 -24
  6. package/dist/cjs/pm-plugins/main.js +51 -88
  7. package/dist/cjs/pm-plugins/utils/analytics.js +1 -2
  8. package/dist/cjs/pm-plugins/utils/remove-from-source.js +4 -14
  9. package/dist/cjs/ui/drag-handle.js +32 -44
  10. package/dist/es2019/editor-commands/move-node.js +9 -31
  11. package/dist/es2019/editor-commands/move-to-layout.js +61 -121
  12. package/dist/es2019/pm-plugins/decorations-drop-target-active.js +11 -16
  13. package/dist/es2019/pm-plugins/decorations-drop-target.js +13 -24
  14. package/dist/es2019/pm-plugins/main.js +55 -91
  15. package/dist/es2019/pm-plugins/utils/analytics.js +1 -2
  16. package/dist/es2019/pm-plugins/utils/remove-from-source.js +4 -14
  17. package/dist/es2019/ui/drag-handle.js +32 -45
  18. package/dist/esm/editor-commands/move-node.js +13 -33
  19. package/dist/esm/editor-commands/move-to-layout.js +59 -127
  20. package/dist/esm/pm-plugins/decorations-drop-target-active.js +11 -16
  21. package/dist/esm/pm-plugins/decorations-drop-target.js +13 -24
  22. package/dist/esm/pm-plugins/main.js +51 -88
  23. package/dist/esm/pm-plugins/utils/analytics.js +1 -2
  24. package/dist/esm/pm-plugins/utils/remove-from-source.js +4 -14
  25. package/dist/esm/ui/drag-handle.js +32 -44
  26. package/dist/types/pm-plugins/main.d.ts +0 -1
  27. package/dist/types/pm-plugins/utils/analytics.d.ts +2 -2
  28. package/dist/types/pm-plugins/utils/remove-from-source.d.ts +1 -1
  29. package/dist/types-ts4.5/pm-plugins/main.d.ts +0 -1
  30. package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts +2 -2
  31. package/dist/types-ts4.5/pm-plugins/utils/remove-from-source.d.ts +1 -1
  32. package/editor-plugin-block-controls.docs.tsx +38 -0
  33. package/package.json +4 -3
@@ -39,24 +39,19 @@ export var canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, nod
39
39
  var $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
40
40
  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
41
41
  var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
42
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
43
- var selectionSlice = state.doc.slice(selectionFrom, selectionTo, false);
44
- var selectionSliceChildCount = selectionSlice.content.childCount;
45
- var canDropSingleNode = true;
46
- var canDropMultipleNodes = true;
42
+ var selectionSlice = state.doc.slice(selectionFrom, selectionTo, false);
43
+ var selectionSliceChildCount = selectionSlice.content.childCount;
44
+ var canDropSingleNode = true;
45
+ var canDropMultipleNodes = true;
47
46
 
48
- // when there is only one node in the slice, use the same logic as when multi select is not on
49
- if (selectionSliceChildCount > 1 && handleInsideSelection) {
50
- canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $toPos);
51
- } else {
52
- canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node));
53
- }
54
- if (!canDropMultipleNodes || !canDropSingleNode) {
55
- return false;
56
- }
47
+ // when there is only one node in the slice, use the same logic as when multi select is not on
48
+ if (selectionSliceChildCount > 1 && handleInsideSelection) {
49
+ canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $toPos);
57
50
  } else {
58
- var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node);
59
- return canDrop;
51
+ canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node));
52
+ }
53
+ if (!canDropMultipleNodes || !canDropSingleNode) {
54
+ return false;
60
55
  }
61
56
  return true;
62
57
  };
@@ -167,7 +167,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
167
167
  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
168
168
  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
169
169
  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
170
- var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
171
170
  anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
172
171
  var prevNodeStack = [];
173
172
  var popNodeStack = function popNodeStack(depth) {
@@ -223,31 +222,21 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
223
222
  return shouldDescend(node); //skip over, don't consider it a valid depth
224
223
  }
225
224
 
226
- // When multi select is on, validate all the nodes in the selection instead of just the handle node
227
- if (isMultiSelect) {
228
- var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
229
- var selectionSliceChildCount = selectionSlice.content.childCount;
230
- var canDropSingleNode = true;
231
- var canDropMultipleNodes = true;
225
+ // validate all the nodes in the selection instead of just the handle node
226
+ var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
227
+ var selectionSliceChildCount = selectionSlice.content.childCount;
228
+ var canDropSingleNode = true;
229
+ var canDropMultipleNodes = true;
232
230
 
233
- // when there is only one node in the slice, use the same logic as when multi select is not on
234
- if (selectionSliceChildCount > 1 && handleInsideSelection) {
235
- canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $pos);
236
- } else {
237
- canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
238
- }
239
- if (!canDropMultipleNodes || !canDropSingleNode) {
240
- pushNodeStack(node, depth);
241
- return false; //not valid pos, so nested not valid either
242
- }
231
+ // when there is only one node in the slice, use the same logic as when multi select is not on
232
+ if (selectionSliceChildCount > 1 && handleInsideSelection) {
233
+ canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $pos);
243
234
  } else {
244
- var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node);
245
-
246
- //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
247
- if (!canDrop) {
248
- pushNodeStack(node, depth);
249
- return false; //not valid pos, so nested not valid either
250
- }
235
+ canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
236
+ }
237
+ if (!canDropMultipleNodes || !canDropSingleNode) {
238
+ pushNodeStack(node, depth);
239
+ return false; //not valid pos, so nested not valid either
251
240
  }
252
241
  var parentTypesWithEndDropTarget = editorExperiment('platform_synced_block', true) ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
253
242
  if (parent.lastChild === node && !isEmptyParagraph(node) && parentTypesWithEndDropTarget.includes(parent.type.name)) {
@@ -108,59 +108,49 @@ var destroyFn = function destroyFn(api, editorView) {
108
108
  return;
109
109
  }
110
110
  (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
111
- var _api$userIntent;
111
+ var _api$blockControls, _api$selection, _api$userIntent;
112
112
  var tr = _ref3.tr;
113
- var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
114
- if (isMultiSelect) {
115
- var _api$blockControls, _api$selection;
116
- var _ref4 = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
117
- multiSelectDnD = _ref4.multiSelectDnD;
118
- // Restore the users initial Editor selection when the drop completes
119
- if (multiSelectDnD) {
120
- // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
121
- var expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
122
- if (expandedSelectionUnchanged) {
123
- var $anchor = tr.doc.resolve(multiSelectDnD.userAnchor);
124
- var $head = tr.doc.resolve(multiSelectDnD.userHead);
125
- if ($head.node() === $anchor.node()) {
126
- var $from = $anchor.min($head);
127
- selectNode(tr, $from.pos, $from.node().type.name, api);
128
- } else {
129
- tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
130
- }
113
+ var _ref4 = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
114
+ multiSelectDnD = _ref4.multiSelectDnD;
115
+ // Restore the users initial Editor selection when the drop completes
116
+ if (multiSelectDnD) {
117
+ // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
118
+ var expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
119
+ if (expandedSelectionUnchanged) {
120
+ var $anchor = tr.doc.resolve(multiSelectDnD.userAnchor);
121
+ var $head = tr.doc.resolve(multiSelectDnD.userHead);
122
+ if ($head.node() === $anchor.node()) {
123
+ var $from = $anchor.min($head);
124
+ selectNode(tr, $from.pos, $from.node().type.name, api);
125
+ } else {
126
+ tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
131
127
  }
132
128
  }
133
- (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.clearManualSelection()({
134
- tr: tr
135
- });
136
129
  }
130
+ (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.clearManualSelection()({
131
+ tr: tr
132
+ });
137
133
  var _ref5 = source.data,
138
134
  start = _ref5.start;
139
135
  // if no drop targets are rendered, assume that drop is invalid
140
136
  var lastDragCancelled = location.current.dropTargets.length === 0;
141
137
  if (lastDragCancelled) {
142
138
  var _api$analytics2;
143
- var nodeTypes, hasSelectedMultipleNodes;
144
- if (isMultiSelect) {
145
- var position = getSelectedSlicePosition(start, tr, api);
146
- var attributes = getMultiSelectAnalyticsAttributes(tr, position.from, position.to);
147
- nodeTypes = attributes.nodeTypes;
139
+ var position = getSelectedSlicePosition(start, tr, api);
140
+ var attributes = getMultiSelectAnalyticsAttributes(tr, position.from, position.to);
141
+ var nodeTypes = attributes.nodeTypes,
148
142
  hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
149
- }
150
143
  var resolvedMovingNode = tr.doc.resolve(start);
151
- var maybeNode = resolvedMovingNode.nodeAfter;
152
144
  (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
153
145
  eventType: EVENT_TYPE.UI,
154
146
  action: ACTION.CANCELLED,
155
147
  actionSubject: ACTION_SUBJECT.DRAG,
156
148
  actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
157
- attributes: _objectSpread({
149
+ attributes: {
158
150
  nodeDepth: resolvedMovingNode.depth,
159
- nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
160
- }, isMultiSelect && {
161
- nodeTypes: nodeTypes,
151
+ nodeTypes: nodeTypes || '',
162
152
  hasSelectedMultipleNodes: hasSelectedMultipleNodes
163
- })
153
+ }
164
154
  })(tr);
165
155
  }
166
156
  if (fg('platform_editor_ease_of_use_metrics')) {
@@ -330,7 +320,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
330
320
  };
331
321
  }
332
322
  }
333
- if (multiSelectDnD && flags.isMultiSelectEnabled) {
323
+ if (multiSelectDnD) {
334
324
  multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
335
325
  multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
336
326
  }
@@ -339,7 +329,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
339
329
  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
340
330
  var hasJustFinishedResizing = resizerMeta === false;
341
331
  multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
342
- if (multiSelectDnD && flags.isMultiSelectEnabled) {
332
+ if (multiSelectDnD) {
343
333
  var _meta$isDragging;
344
334
  if (((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
345
335
  // When dragging, we want to keep the multiSelectDnD object unless both document and selection
@@ -789,12 +779,8 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
789
779
  var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
790
780
  exposure: true
791
781
  });
792
- var isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
793
- exposure: true
794
- });
795
782
  var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
796
783
  var flags = {
797
- isMultiSelectEnabled: isMultiSelectEnabled,
798
784
  toolbarFlagsEnabled: toolbarFlagsEnabled
799
785
  };
800
786
  var anchorRectCache;
@@ -849,7 +835,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
849
835
  var tr = state.tr;
850
836
  var pluginState = key.getState(state);
851
837
  var dndDragCancelled = (_pluginState = pluginState) === null || _pluginState === void 0 ? void 0 : _pluginState.lastDragCancelled;
852
- if ((_pluginState2 = pluginState) !== null && _pluginState2 !== void 0 && _pluginState2.isPMDragging || dndDragCancelled && isMultiSelectEnabled) {
838
+ if ((_pluginState2 = pluginState) !== null && _pluginState2 !== void 0 && _pluginState2.isPMDragging || dndDragCancelled) {
853
839
  if (fg('platform_editor_ease_of_use_metrics')) {
854
840
  var _api$metrics2;
855
841
  api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 || _api$metrics2.commands.startActiveSessionTimer()({
@@ -868,7 +854,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
868
854
  // Currently we can only drag one node at a time
869
855
  // so we only need to check first child
870
856
  var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
871
- if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
857
+ if (dndDragCancelled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
872
858
  // we prevent native DnD for layoutColumn to prevent single column layout.
873
859
  event.preventDefault();
874
860
  return false;
@@ -995,55 +981,32 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
995
981
  if (api !== null && api !== void 0 && (_api$limitedMode8 = api.limitedMode) !== null && _api$limitedMode8 !== void 0 && (_api$limitedMode8 = _api$limitedMode8.sharedState.currentState()) !== null && _api$limitedMode8 !== void 0 && _api$limitedMode8.enabled) {
996
982
  return;
997
983
  }
998
- if (isMultiSelectEnabled) {
999
- if (event.shiftKey && event.ctrlKey) {
1000
- //prevent holding down key combo from firing repeatedly
1001
- if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
1002
- event.preventDefault();
1003
- return true;
1004
- }
1005
- }
1006
- if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
1007
- var isDragHandle = event.target.closest(editorExperiment('platform_editor_block_menu', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle="true"]') !== null;
1008
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
1009
- }
1010
- if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
1011
- var _api$blockControls$sh2, _api$blockControls$sh3;
1012
- var isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && editorExperiment('platform_editor_block_menu', true);
1013
- // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
1014
- // in this scenario, isSelectedViaDragHandle should not be set to false
1015
- if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
1016
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
1017
- }
984
+ if (event.shiftKey && event.ctrlKey) {
985
+ //prevent holding down key combo from firing repeatedly
986
+ if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
987
+ event.preventDefault();
988
+ return true;
1018
989
  }
1019
- if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
1020
- view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
1021
- isShiftDown: true
1022
- })));
1023
- }
1024
- return false;
1025
- } else {
1026
- if (event.shiftKey && event.ctrlKey) {
1027
- //prevent holding down key combo from firing repeatedly
1028
- if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
1029
- event.preventDefault();
1030
- return true;
1031
- }
1032
- }
1033
- if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
1034
- var _isDragHandle = event.target.closest(editorExperiment('platform_editor_block_menu', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle="true"]') !== null;
1035
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(_isDragHandle));
1036
- }
1037
- if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
1038
- var _api$blockControls$sh4, _api$blockControls$sh5;
1039
- var _isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.isMenuOpen) && editorExperiment('platform_editor_block_menu', true);
1040
- // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
1041
- // in this scenario, isSelectedViaDragHandle should not be set to false
1042
- if (api !== null && api !== void 0 && (_api$blockControls$sh5 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh5 !== void 0 && _api$blockControls$sh5.isSelectedViaDragHandle && !_isBlockMenuOpen) {
1043
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
1044
- }
990
+ }
991
+ if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
992
+ var isDragHandle = event.target.closest(editorExperiment('platform_editor_block_menu', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle="true"]') !== null;
993
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
994
+ }
995
+ if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
996
+ var _api$blockControls$sh2, _api$blockControls$sh3;
997
+ var isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && editorExperiment('platform_editor_block_menu', true);
998
+ // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
999
+ // in this scenario, isSelectedViaDragHandle should not be set to false
1000
+ if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
1001
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
1045
1002
  }
1046
1003
  }
1004
+ if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
1005
+ view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
1006
+ isShiftDown: true
1007
+ })));
1008
+ }
1009
+ return false;
1047
1010
  },
1048
1011
  keyup: function keyup(view, event) {
1049
1012
  var _api$limitedMode9;
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import { fg } from '@atlaskit/platform-feature-flags';
4
- export var attachMoveNodeAnalytics = function attachMoveNodeAnalytics(tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api, fromNodeTypes, hasSelectedMultipleNodes) {
4
+ export var attachMoveNodeAnalytics = function attachMoveNodeAnalytics(tr, inputMethod, fromDepth, fromNodeTypes, toDepth, toNodeType, isSameParent, api, hasSelectedMultipleNodes) {
5
5
  var _api$analytics;
6
6
  return api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.attachAnalyticsEvent({
7
7
  eventType: EVENT_TYPE.TRACK,
@@ -10,7 +10,6 @@ export var attachMoveNodeAnalytics = function attachMoveNodeAnalytics(tr, inputM
10
10
  actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
11
11
  attributes: {
12
12
  nodeDepth: fromDepth,
13
- nodeType: fromNodeType,
14
13
  nodeTypes: fromNodeTypes,
15
14
  hasSelectedMultipleNodes: hasSelectedMultipleNodes,
16
15
  destinationNodeDepth: toDepth,
@@ -5,18 +5,8 @@ import { isFragmentOfType } from './check-fragment';
5
5
  import { MIN_LAYOUT_COLUMN } from './consts';
6
6
  import { updateColumnWidths } from './update-column-widths';
7
7
  export var removeFromSource = function removeFromSource(tr, $from, to) {
8
- var _sourceContent, _sourceContent2;
9
- var sourceContent = $from.nodeAfter;
10
- var isLayoutColumn = ((_sourceContent = sourceContent) === null || _sourceContent === void 0 ? void 0 : _sourceContent.type.name) === 'layoutColumn';
11
- var sourceNodeEndPos = $from.pos + (((_sourceContent2 = sourceContent) === null || _sourceContent2 === void 0 ? void 0 : _sourceContent2.nodeSize) || 1);
12
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
13
- sourceContent = tr.doc.slice($from.pos, to).content;
14
- isLayoutColumn = isFragmentOfType(sourceContent, 'layoutColumn');
15
- sourceNodeEndPos = to === undefined ? $from.pos + sourceContent.size : to;
16
- }
17
- if (!sourceContent) {
18
- return tr;
19
- }
8
+ var sourceContent = tr.doc.slice($from.pos, to).content;
9
+ var isLayoutColumn = isFragmentOfType(sourceContent, 'layoutColumn');
20
10
 
21
11
  /**
22
12
  * This logic is used to handle the case when a user tries to delete a layout column
@@ -29,7 +19,7 @@ export var removeFromSource = function removeFromSource(tr, $from, to) {
29
19
  // Only delete the layout content, but keep the layout column itself
30
20
  // This logic should be remove when we clean up the code for single column layouts.
31
21
  // since this step has no effect on the layout column, because the parent node is removed in the later step.
32
- tr.delete($from.pos + 1, sourceNodeEndPos - 1);
22
+ tr.delete($from.pos + 1, to - 1);
33
23
 
34
24
  // This check should be remove when clean up the code for single column layouts.
35
25
  // since it has been checked in the previous step.
@@ -52,6 +42,6 @@ export var removeFromSource = function removeFromSource(tr, $from, to) {
52
42
  updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
53
43
  }
54
44
  }
55
- tr.delete($from.pos, sourceNodeEndPos);
45
+ tr.delete($from.pos, to);
56
46
  return tr;
57
47
  };
@@ -386,7 +386,6 @@ export var DragHandle = function DragHandle(_ref) {
386
386
  interactionState = _useSharedPluginState.interactionState;
387
387
  var start = getPos();
388
388
  var isLayoutColumn = nodeType === 'layoutColumn';
389
- var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
390
389
 
391
390
  // Dynamically calculate if node is top-level based on current position (gated by experiment)
392
391
  var isTopLevelNodeDynamic = useMemo(function () {
@@ -470,7 +469,7 @@ export var DragHandle = function DragHandle(_ref) {
470
469
  actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
471
470
  attributes: {
472
471
  nodeDepth: resolvedStartPos.depth,
473
- nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
472
+ nodeTypes: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
474
473
  }
475
474
  })(tr);
476
475
  expandAndUpdateSelection({
@@ -502,9 +501,6 @@ export var DragHandle = function DragHandle(_ref) {
502
501
  }, [api, view, getPos, nodeType, anchorName]);
503
502
  var handleOnClick = useCallback(function (e) {
504
503
  var _api$core2;
505
- if (!isMultiSelect) {
506
- setDragHandleSelected(!dragHandleSelected);
507
- }
508
504
  api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
509
505
  var _api$blockControls$sh, _api$analytics2;
510
506
  var tr = _ref3.tr;
@@ -514,7 +510,7 @@ export var DragHandle = function DragHandle(_ref) {
514
510
  }
515
511
  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;
516
512
  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;
517
- if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
513
+ if (tr.selection.empty || !e.shiftKey) {
518
514
  tr = selectNode(tr, startPos, nodeType, api);
519
515
  } else if (isTopLevelNodeValue && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
520
516
  var _api$blockControls3;
@@ -535,13 +531,13 @@ export var DragHandle = function DragHandle(_ref) {
535
531
  actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
536
532
  attributes: {
537
533
  nodeDepth: resolvedMovingNode.depth,
538
- nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
534
+ nodeTypes: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
539
535
  }
540
536
  })(tr);
541
537
  return tr;
542
538
  });
543
539
  view.focus();
544
- }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNodeValue, nodeType]);
540
+ }, [api, view, getPos, isTopLevelNodeValue, nodeType]);
545
541
  var handleKeyDown = useCallback(function (e) {
546
542
  // allow user to use spacebar to select the node
547
543
  if (!e.repeat && e.key === ' ') {
@@ -559,9 +555,6 @@ export var DragHandle = function DragHandle(_ref) {
559
555
  var $startPos = tr.doc.resolve(startPos + node.nodeSize);
560
556
  var selection = new TextSelection($startPos);
561
557
  tr.setSelection(selection);
562
- !isMultiSelect && tr.setMeta(key, {
563
- pos: startPos
564
- });
565
558
  return tr;
566
559
  });
567
560
  } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
@@ -571,7 +564,7 @@ export var DragHandle = function DragHandle(_ref) {
571
564
  // return focus to editor to resume editing from caret position
572
565
  view.focus();
573
566
  }
574
- }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
567
+ }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, view]);
575
568
  var handleKeyDownNew = useCallback(function (e) {
576
569
  // allow user to use spacebar to select the node
577
570
  if (e.key === 'Enter' || !e.repeat && e.key === ' ') {
@@ -641,28 +634,25 @@ export var DragHandle = function DragHandle(_ref) {
641
634
  };
642
635
  },
643
636
  onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
644
- var _api$blockControls$sh2;
637
+ var _api$core6, _api$blockControls$sh2;
645
638
  var nativeSetDragImage = _ref6.nativeSetDragImage;
646
- if (isMultiSelect) {
647
- var _api$core6;
648
- api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
649
- var tr = _ref7.tr;
650
- var handlePos = getPos();
651
- if (typeof handlePos !== 'number') {
652
- return tr;
653
- }
654
- var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
655
- if (!tr.selection.empty && newHandlePosCheck) {
656
- var _api$blockControls6;
657
- api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
658
- tr: tr
659
- });
660
- } else {
661
- tr = selectNode(tr, handlePos, nodeType, api);
662
- }
639
+ api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
640
+ var tr = _ref7.tr;
641
+ var handlePos = getPos();
642
+ if (typeof handlePos !== 'number') {
663
643
  return tr;
664
- });
665
- }
644
+ }
645
+ var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
646
+ if (!tr.selection.empty && newHandlePosCheck) {
647
+ var _api$blockControls6;
648
+ api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
649
+ tr: tr
650
+ });
651
+ } else {
652
+ tr = selectNode(tr, handlePos, nodeType, api);
653
+ }
654
+ return tr;
655
+ });
666
656
  var startPos = getPos();
667
657
  var state = view.state;
668
658
  var doc = state.doc,
@@ -677,7 +667,7 @@ export var DragHandle = function DragHandle(_ref) {
677
667
  sliceTo = Math.max(anchor, head);
678
668
  }
679
669
  var expandedSlice = doc.slice(sliceFrom, sliceTo);
680
- var isDraggingMultiLine = isMultiSelect && startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
670
+ var isDraggingMultiLine = startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
681
671
  setCustomNativeDragPreview({
682
672
  getOffset: function getOffset() {
683
673
  if (!isDraggingMultiLine) {
@@ -785,20 +775,18 @@ export var DragHandle = function DragHandle(_ref) {
785
775
  action: ACTION.DRAGGED,
786
776
  actionSubject: ACTION_SUBJECT.ELEMENT,
787
777
  actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
788
- attributes: _objectSpread({
778
+ attributes: {
789
779
  nodeDepth: resolvedMovingNode.depth,
790
- nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
791
- }, isMultiSelect && {
792
- nodeTypes: nodeTypes,
780
+ nodeTypes: nodeTypes || '',
793
781
  hasSelectedMultipleNodes: hasSelectedMultipleNodes
794
- })
782
+ }
795
783
  })(tr);
796
784
  return tr;
797
785
  });
798
786
  view.focus();
799
787
  }
800
788
  });
801
- }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
789
+ }, [anchorName, api, getPos, nodeType, start, view]);
802
790
  var calculatePositionOld = useCallback(function () {
803
791
  var pos = getPos();
804
792
  var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -881,14 +869,14 @@ export var DragHandle = function DragHandle(_ref) {
881
869
  }
882
870
  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
883
871
  useEffect(function () {
884
- if (!isMultiSelect || typeof start !== 'number' || !selection) {
872
+ if (typeof start !== 'number' || !selection) {
885
873
  return;
886
874
  }
887
875
  setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
888
- }, [start, selection, view, isMultiSelect]);
876
+ }, [start, selection, view]);
889
877
  useEffect(function () {
890
878
  var _api$blockControls$sh4;
891
- if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
879
+ if (isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
892
880
  return;
893
881
  }
894
882
  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;
@@ -898,7 +886,7 @@ export var DragHandle = function DragHandle(_ref) {
898
886
  } else {
899
887
  setDragHandleDisabled(false);
900
888
  }
901
- }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNodeValue, view]);
889
+ }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isShiftDown, isTopLevelNodeValue, view]);
902
890
  var dragHandleMessage = editorExperiment('platform_editor_block_menu', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
903
891
  br: jsx("br", null)
904
892
  }) : formatMessage(blockControlsMessages.dragToMove);
@@ -976,7 +964,7 @@ export var DragHandle = function DragHandle(_ref) {
976
964
  return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
977
965
  }).join('. ');
978
966
  var handleOnDrop = function handleOnDrop(event) {
979
- editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
967
+ event.stopPropagation();
980
968
  };
981
969
  var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
982
970
  var browser = getBrowserInfo();
@@ -9,7 +9,6 @@ import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, Mult
9
9
  import { AnchorRectCache } from './utils/anchor-utils';
10
10
  export declare const key: PluginKey<PluginState>;
11
11
  export interface FlagType {
12
- isMultiSelectEnabled: boolean;
13
12
  toolbarFlagsEnabled: boolean;
14
13
  }
15
14
  export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
@@ -1,12 +1,12 @@
1
1
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
3
3
  import type { BlockControlsPlugin } from '../../blockControlsPluginType';
4
- export declare const attachMoveNodeAnalytics: (tr: Transaction, inputMethod: string, fromDepth: number, fromNodeType: string, toDepth?: number, toNodeType?: string, isSameParent?: boolean, api?: ExtractInjectionAPI<BlockControlsPlugin>, fromNodeTypes?: string, hasSelectedMultipleNodes?: boolean) => boolean | undefined;
4
+ export declare const attachMoveNodeAnalytics: (tr: Transaction, inputMethod: string, fromDepth: number, fromNodeTypes: string | undefined, toDepth?: number, toNodeType?: string, isSameParent?: boolean, api?: ExtractInjectionAPI<BlockControlsPlugin>, hasSelectedMultipleNodes?: boolean) => boolean | undefined;
5
5
  export declare const fireInsertLayoutAnalytics: (tr: Transaction, api?: ExtractInjectionAPI<BlockControlsPlugin>, nodeTypes?: string, hasSelectedMultipleNodes?: boolean, columnCount?: number) => void;
6
6
  /**
7
7
  * Given a range, return distinctive types of node and whether there are multiple nodes in the range
8
8
  */
9
9
  export declare const getMultiSelectAnalyticsAttributes: (tr: Transaction, anchor: number, head: number) => {
10
- nodeTypes: string | undefined;
11
10
  hasSelectedMultipleNodes: boolean;
11
+ nodeTypes: string | undefined;
12
12
  };
@@ -1,3 +1,3 @@
1
1
  import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
2
2
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
3
- export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos, to?: number) => Transaction;
3
+ export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos, to: number) => Transaction;
@@ -9,7 +9,6 @@ import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, Mult
9
9
  import { AnchorRectCache } from './utils/anchor-utils';
10
10
  export declare const key: PluginKey<PluginState>;
11
11
  export interface FlagType {
12
- isMultiSelectEnabled: boolean;
13
12
  toolbarFlagsEnabled: boolean;
14
13
  }
15
14
  export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
@@ -1,12 +1,12 @@
1
1
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
3
3
  import type { BlockControlsPlugin } from '../../blockControlsPluginType';
4
- export declare const attachMoveNodeAnalytics: (tr: Transaction, inputMethod: string, fromDepth: number, fromNodeType: string, toDepth?: number, toNodeType?: string, isSameParent?: boolean, api?: ExtractInjectionAPI<BlockControlsPlugin>, fromNodeTypes?: string, hasSelectedMultipleNodes?: boolean) => boolean | undefined;
4
+ export declare const attachMoveNodeAnalytics: (tr: Transaction, inputMethod: string, fromDepth: number, fromNodeTypes: string | undefined, toDepth?: number, toNodeType?: string, isSameParent?: boolean, api?: ExtractInjectionAPI<BlockControlsPlugin>, hasSelectedMultipleNodes?: boolean) => boolean | undefined;
5
5
  export declare const fireInsertLayoutAnalytics: (tr: Transaction, api?: ExtractInjectionAPI<BlockControlsPlugin>, nodeTypes?: string, hasSelectedMultipleNodes?: boolean, columnCount?: number) => void;
6
6
  /**
7
7
  * Given a range, return distinctive types of node and whether there are multiple nodes in the range
8
8
  */
9
9
  export declare const getMultiSelectAnalyticsAttributes: (tr: Transaction, anchor: number, head: number) => {
10
- nodeTypes: string | undefined;
11
10
  hasSelectedMultipleNodes: boolean;
11
+ nodeTypes: string | undefined;
12
12
  };
@@ -1,3 +1,3 @@
1
1
  import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
2
2
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
3
- export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos, to?: number) => Transaction;
3
+ export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos, to: number) => Transaction;