@atlaskit/editor-plugin-block-controls 2.26.1 → 2.26.3

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 (42) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/editor-commands/move-node.js +16 -15
  3. package/dist/cjs/editor-commands/move-to-layout.js +20 -8
  4. package/dist/cjs/editor-commands/show-drag-handle.js +89 -3
  5. package/dist/cjs/pm-plugins/decorations-anchor.js +5 -10
  6. package/dist/cjs/pm-plugins/decorations-common.js +5 -1
  7. package/dist/cjs/pm-plugins/main.js +28 -8
  8. package/dist/cjs/pm-plugins/utils/analytics.js +66 -0
  9. package/dist/cjs/pm-plugins/utils/selection.js +22 -2
  10. package/dist/cjs/ui/drag-handle.js +23 -9
  11. package/dist/es2019/editor-commands/move-node.js +17 -16
  12. package/dist/es2019/editor-commands/move-to-layout.js +20 -8
  13. package/dist/es2019/editor-commands/show-drag-handle.js +88 -3
  14. package/dist/es2019/pm-plugins/decorations-anchor.js +6 -11
  15. package/dist/es2019/pm-plugins/decorations-common.js +4 -0
  16. package/dist/es2019/pm-plugins/main.js +24 -6
  17. package/dist/es2019/pm-plugins/utils/{fire-analytics.js → analytics.js} +31 -3
  18. package/dist/es2019/pm-plugins/utils/selection.js +22 -1
  19. package/dist/es2019/ui/drag-handle.js +19 -3
  20. package/dist/esm/editor-commands/move-node.js +17 -16
  21. package/dist/esm/editor-commands/move-to-layout.js +20 -8
  22. package/dist/esm/editor-commands/show-drag-handle.js +88 -2
  23. package/dist/esm/pm-plugins/decorations-anchor.js +6 -11
  24. package/dist/esm/pm-plugins/decorations-common.js +4 -0
  25. package/dist/esm/pm-plugins/main.js +27 -7
  26. package/dist/esm/pm-plugins/utils/{fire-analytics.js → analytics.js} +32 -3
  27. package/dist/esm/pm-plugins/utils/selection.js +21 -1
  28. package/dist/esm/ui/drag-handle.js +22 -4
  29. package/dist/types/editor-commands/show-drag-handle.d.ts +1 -1
  30. package/dist/types/pm-plugins/decorations-common.d.ts +1 -0
  31. package/dist/types/pm-plugins/main.d.ts +1 -0
  32. package/dist/types/pm-plugins/utils/analytics.d.ts +12 -0
  33. package/dist/types/pm-plugins/utils/selection.d.ts +9 -0
  34. package/dist/types-ts4.5/editor-commands/show-drag-handle.d.ts +1 -1
  35. package/dist/types-ts4.5/pm-plugins/decorations-common.d.ts +1 -0
  36. package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -0
  37. package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts +12 -0
  38. package/dist/types-ts4.5/pm-plugins/utils/selection.d.ts +9 -0
  39. package/package.json +11 -5
  40. package/dist/cjs/pm-plugins/utils/fire-analytics.js +0 -36
  41. package/dist/types/pm-plugins/utils/fire-analytics.d.ts +0 -5
  42. package/dist/types-ts4.5/pm-plugins/utils/fire-analytics.d.ts +0 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.26.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#112186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112186)
8
+ [`9462d8ca2405a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9462d8ca2405a) -
9
+ Bump adf-schema to 47.2.1
10
+
11
+ ## 2.26.2
12
+
13
+ ### Patch Changes
14
+
15
+ - [#109976](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109976)
16
+ [`2f1cbe0e2b32f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f1cbe0e2b32f) -
17
+ [ED-26272] Update DnD related analytics, e.g. element moved, to reflect multi-select info
18
+ (distinctive types of nodes, whether multiple nodes are selected)
19
+ - Updated dependencies
20
+
3
21
  ## 2.26.1
4
22
 
5
23
  ### Patch Changes
@@ -19,8 +19,8 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
19
19
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
20
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
21
21
  var _main = require("../pm-plugins/main");
22
+ var _analytics2 = require("../pm-plugins/utils/analytics");
22
23
  var _consts = require("../pm-plugins/utils/consts");
23
- var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
24
24
  var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
25
25
  var _getSelection = require("../pm-plugins/utils/getSelection");
26
26
  var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
@@ -265,22 +265,21 @@ var moveNode = exports.moveNode = function moveNode(api) {
265
265
  }
266
266
  var sliceFrom = start;
267
267
  var sliceTo;
268
+ var mappedTo;
269
+ var sourceNodeTypes, hasSelectedMultipleNodes;
268
270
  var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
269
271
  exposure: true
270
272
  });
271
273
  if (isMultiSelect) {
272
- var _handleNode$nodeSize;
273
- var _getMultiSelectionIfP = (0, _selection2.getMultiSelectionIfPosInside)(api, start),
274
- anchor = _getMultiSelectionIfP.anchor,
275
- head = _getMultiSelectionIfP.head;
276
- var inSelection = anchor !== undefined && head !== undefined;
277
- sliceFrom = inSelection ? Math.min(anchor, head) : start;
278
- var handleSize = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
279
- var handleEnd = sliceFrom + handleSize;
280
- sliceTo = inSelection ? Math.max(anchor, head) : handleEnd;
274
+ var slicePosition = (0, _selection2.getSelectedSlicePosition)(start, tr, api);
275
+ sliceFrom = slicePosition.from;
276
+ sliceTo = slicePosition.to;
277
+ var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, sliceFrom, sliceTo);
278
+ hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
279
+ sourceNodeTypes = attributes.nodeTypes;
281
280
  } else {
282
- var _handleNode$nodeSize2;
283
- var size = (_handleNode$nodeSize2 = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize2 !== void 0 ? _handleNode$nodeSize2 : 1;
281
+ var _handleNode$nodeSize;
282
+ var size = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
284
283
  sliceTo = sliceFrom + size;
285
284
  }
286
285
  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
@@ -288,7 +287,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
288
287
  nestedExpand = _tr$doc$type$schema$n.nestedExpand;
289
288
  var $to = tr.doc.resolve(to);
290
289
  var $handlePos = tr.doc.resolve(start);
291
- var mappedTo;
292
290
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
293
291
  var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
294
292
  var destType = $to.node().type;
@@ -344,7 +342,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
344
342
  }
345
343
  }
346
344
  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
347
- (0, _fireAnalytics.attachMoveNodeAnalytics)(tr, inputMethod, $handlePos.depth, handleNode.type.name, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name, $handlePos.sameParent($mappedTo), api);
345
+ (0, _analytics2.attachMoveNodeAnalytics)(tr, inputMethod, $handlePos.depth, handleNode.type.name, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name, $handlePos.sameParent($mappedTo), api, sourceNodeTypes, hasSelectedMultipleNodes);
348
346
  } else {
349
347
  var _api$analytics;
350
348
  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -352,13 +350,16 @@ var moveNode = exports.moveNode = function moveNode(api) {
352
350
  action: _analytics.ACTION.MOVED,
353
351
  actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
354
352
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
355
- attributes: _objectSpread({
353
+ attributes: _objectSpread(_objectSpread({
356
354
  nodeDepth: $handlePos.depth,
357
355
  nodeType: handleNode.type.name,
358
356
  destinationNodeDepth: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth,
359
357
  destinationNodeType: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name
360
358
  }, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
361
359
  inputMethod: inputMethod
360
+ }), isMultiSelect && {
361
+ sourceNodeTypes: sourceNodeTypes,
362
+ hasSelectedMultipleNodes: hasSelectedMultipleNodes
362
363
  })
363
364
  })(tr);
364
365
  }
@@ -10,9 +10,9 @@ var _model = require("@atlaskit/editor-prosemirror/model");
10
10
  var _state = require("@atlaskit/editor-prosemirror/state");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
+ var _analytics2 = require("../pm-plugins/utils/analytics");
13
14
  var _checkFragment = require("../pm-plugins/utils/check-fragment");
14
15
  var _consts = require("../pm-plugins/utils/consts");
15
- var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
16
16
  var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
17
17
  var _selection = require("../pm-plugins/utils/selection");
18
18
  var _updateColumnWidths = require("../pm-plugins/utils/update-column-widths");
@@ -47,9 +47,14 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
47
47
  var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
48
48
  var isSameLayout = (0, _validation.isInSameLayout)($originalFrom, $originalTo);
49
49
  var sourceContentEndPos = -1;
50
- if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
50
+ var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
51
+ var sourceNodeTypes, hasSelectedMultipleNodes;
52
+ if (isMultiSelect) {
51
53
  if (sourceContent instanceof _model.Fragment) {
52
54
  sourceContentEndPos = from + sourceContent.size;
55
+ var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, from, sourceContentEndPos);
56
+ hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
57
+ sourceNodeTypes = attributes.nodeTypes;
53
58
  }
54
59
  } else {
55
60
  if (sourceContent instanceof _model.Node) {
@@ -68,7 +73,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
68
73
  if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
69
74
  tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
70
75
  }
71
- (0, _fireAnalytics.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api);
76
+ (0, _analytics2.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
72
77
  } else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
73
78
  var _$originalFrom$nodeAf2;
74
79
  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
@@ -79,7 +84,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
79
84
  var mappedFrom = tr.mapping.map(from);
80
85
  (0, _removeFromSource.removeFromSource)(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
81
86
  }
82
- (0, _fireAnalytics.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api);
87
+ (0, _analytics2.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
83
88
  }
84
89
  return tr;
85
90
  };
@@ -197,7 +202,7 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
197
202
  var _getMultiSelectionIfP = (0, _selection.getMultiSelectionIfPosInside)(api, from),
198
203
  anchor = _getMultiSelectionIfP.anchor,
199
204
  head = _getMultiSelectionIfP.head;
200
- if (anchor && head) {
205
+ if (anchor !== undefined && head !== undefined) {
201
206
  sourceFrom = Math.min(anchor, head);
202
207
  sourceTo = Math.max(anchor, head);
203
208
  sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
@@ -254,7 +259,7 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
254
259
  var _content$marks$find;
255
260
  return (_content$marks$find = content.marks.find(function (m) {
256
261
  return m.type === breakout;
257
- })) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs;
262
+ })) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
258
263
  } else if (content instanceof _model.Fragment) {
259
264
  // Find the first breakout mode in the fragment
260
265
  var firstBreakoutMode;
@@ -314,6 +319,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
314
319
  if (!fromContentWithoutBreakout) {
315
320
  return tr;
316
321
  }
322
+ var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
317
323
  if (toNode.type === layoutSection) {
318
324
  var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
319
325
  return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
@@ -333,7 +339,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
333
339
  // resolve again the source node after node updated (remove breakout marks)
334
340
  toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
335
341
  }
336
- if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
342
+ if (isMultiSelect) {
337
343
  if ((0, _checkFragment.isFragmentOfType)(fromContentWithoutBreakout, 'layoutColumn') && fromContentWithoutBreakout.firstChild) {
338
344
  fromContentWithoutBreakout = fromContentWithoutBreakout.firstChild.content;
339
345
  }
@@ -345,6 +351,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
345
351
  var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromContentWithoutBreakout] : [fromContentWithoutBreakout, toNodeWithoutBreakout];
346
352
  var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
347
353
  if (newLayout) {
354
+ var sourceNodeTypes, hasSelectedMultipleNodes;
355
+ if (isMultiSelect) {
356
+ var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, $sourceFrom.pos, sourceTo);
357
+ hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
358
+ sourceNodeTypes = attributes.nodeTypes;
359
+ }
348
360
  tr = (0, _removeFromSource.removeFromSource)(tr, $sourceFrom, sourceTo);
349
361
  var mappedTo = tr.mapping.map(to);
350
362
  tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
@@ -354,7 +366,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
354
366
  breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
355
367
  mode: breakoutMode
356
368
  })]);
357
- (0, _fireAnalytics.fireInsertLayoutAnalytics)(tr, api);
369
+ (0, _analytics2.fireInsertLayoutAnalytics)(tr, api, sourceNodeTypes, hasSelectedMultipleNodes);
358
370
  }
359
371
  return tr;
360
372
  }
@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.showDragHandleAtSelection = void 0;
7
- var _utils = require("@atlaskit/editor-tables/utils");
7
+ var _utils = require("@atlaskit/editor-prosemirror/utils");
8
+ var _utils2 = require("@atlaskit/editor-tables/utils");
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
11
+ var _decorationsAnchor = require("../pm-plugins/decorations-anchor");
9
12
  var _main = require("../pm-plugins/main");
10
13
  var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
11
- var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
14
+ var showDragHandleAtSelectionOld = function showDragHandleAtSelectionOld(api, shouldFocusParentNode) {
12
15
  return function (state, _, view) {
13
16
  var $from = state.selection.$from;
14
17
  var shouldFocusParentNode;
@@ -19,7 +22,7 @@ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function sho
19
22
 
20
23
  // if the node is already focused, pressing the keymap second times should focus the parent node
21
24
  shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
22
- var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
25
+ var parentPos = (0, _utils2.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
23
26
  var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
24
27
  if (parentElement) {
25
28
  // Ignored via go/ees005
@@ -68,4 +71,87 @@ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function sho
68
71
  }
69
72
  return false;
70
73
  };
74
+ };
75
+ var findParentPosForHandle = function findParentPosForHandle(state) {
76
+ var _activeNode$handleOpt2;
77
+ var $from = state.selection.$from;
78
+ var _ref2 = _main.key.getState(state) || {},
79
+ activeNode = _ref2.activeNode;
80
+
81
+ // if a node handle is already focused, return the parent pos of that node (with focused handle)
82
+ if (activeNode && (_activeNode$handleOpt2 = activeNode.handleOptions) !== null && _activeNode$handleOpt2 !== void 0 && _activeNode$handleOpt2.isFocused) {
83
+ var $activeNodePos = state.doc.resolve(activeNode.pos);
84
+
85
+ // if the handle is at the top level already, do nothing
86
+ if ($activeNodePos.depth === 0) {
87
+ return undefined;
88
+ }
89
+ return $activeNodePos.before();
90
+ }
91
+
92
+ // if we are in second level of nested node, we should focus the node at level 1
93
+ if ($from.depth <= 1) {
94
+ return $from.before(1);
95
+ }
96
+
97
+ // if we are inside a table, we should focus the table's handle
98
+ var parentTableNode = (0, _utils.findParentNodeOfType)([state.schema.nodes.table])(state.selection);
99
+ if (parentTableNode) {
100
+ return parentTableNode.pos;
101
+ }
102
+
103
+ // else find closest parent node
104
+ return (0, _getNestedNodePosition.getNestedNodePosition)(state);
105
+ };
106
+ var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
107
+ var decorations = (0, _main.getDecorations)(state);
108
+ if (!decorations) {
109
+ return undefined;
110
+ }
111
+ var nextHandleNodePos = findParentPosForHandle(state);
112
+ if (nextHandleNodePos === undefined) {
113
+ return undefined;
114
+ }
115
+ var nextHandleNode = state.doc.nodeAt(nextHandleNodePos);
116
+ var nodeDecorations = nextHandleNode && (0, _decorationsAnchor.findNodeDecs)(decorations, nextHandleNodePos, nextHandleNodePos + nextHandleNode.nodeSize);
117
+ if (!nodeDecorations || nodeDecorations.length === 0) {
118
+ return undefined;
119
+ }
120
+
121
+ // ensure the decoration covers the position of the look up node
122
+ nodeDecorations = nodeDecorations.filter(function (decoration) {
123
+ return decoration.from <= nextHandleNodePos;
124
+ });
125
+ if (nodeDecorations.length === 0) {
126
+ return undefined;
127
+ }
128
+
129
+ // sort the decorations by the position of the node
130
+ // so we can find the closest decoration to the node
131
+ nodeDecorations.sort(function (a, b) {
132
+ if (a.from === b.from) {
133
+ return a.to - b.to;
134
+ }
135
+ return b.from - a.from;
136
+ });
137
+
138
+ // return the closest decoration to the node
139
+ return nodeDecorations[0];
140
+ };
141
+ var showDragHandleAtSelectionNew = function showDragHandleAtSelectionNew(api) {
142
+ return function (state) {
143
+ var decoration = findNextAnchorDecoration(state);
144
+ if (api && decoration) {
145
+ api.core.actions.execute(api.blockControls.commands.showDragHandleAt(decoration.from, decoration.spec.anchorName, decoration.spec.nodeTypeWithLevel, {
146
+ isFocused: true
147
+ }));
148
+ return true;
149
+ }
150
+ return false;
151
+ };
152
+ };
153
+ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
154
+ return function (state, dispatch, view) {
155
+ return (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_a11y') ? showDragHandleAtSelectionNew(api)(state) : showDragHandleAtSelectionOld(api)(state, dispatch, view);
156
+ };
71
157
  };
@@ -78,11 +78,10 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
78
78
  var ignore_nodes = (0, _experiments.editorExperiment)('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
79
79
  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
80
80
  var depth = 0;
81
- var anchorName;
82
81
  var shouldDescend = shouldDescendIntoNode(node);
83
- anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
82
+ var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
83
+ var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
84
84
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
85
- var _anchorName;
86
85
  // Doesn't descend into a node
87
86
  if (node.isInline) {
88
87
  return false;
@@ -91,19 +90,15 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
91
90
  if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
92
91
  return shouldDescend; //skip over, don't consider it a valid depth
93
92
  }
94
- anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
95
- } else {
96
- var _anchorName2;
97
- anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
98
93
  }
99
94
  var anchorStyles = "anchor-name: ".concat(anchorName, ";");
100
- var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
101
95
  decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
102
96
  style: anchorStyles
103
- }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', node.type.name + subType), 'data-drag-handler-anchor-depth', "".concat(depth)), {
97
+ }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {
104
98
  type: _decorationsCommon.TYPE_NODE_DEC,
105
99
  anchorName: anchorName,
106
- nodeType: node.type.name
100
+ nodeType: node.type.name,
101
+ nodeTypeWithLevel: nodeTypeWithLevel
107
102
  }));
108
103
  return shouldDescend && depth < (0, _decorationsCommon.getNestedDepth)();
109
104
  });
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.unmountDecorations = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
7
+ exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = 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"));
@@ -20,6 +20,10 @@ var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
20
20
  var handleId = ObjHash.getForNode(node);
21
21
  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
22
22
  };
23
+ var getNodeTypeWithLevel = exports.getNodeTypeWithLevel = function getNodeTypeWithLevel(node) {
24
+ var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
25
+ return node.type.name + subType;
26
+ };
23
27
  var ObjHash = /*#__PURE__*/function () {
24
28
  function ObjHash() {
25
29
  (0, _classCallCheck2.default)(this, ObjHash);
@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.oldApply = exports.newApply = exports.key = exports.createPlugin = void 0;
7
+ exports.oldApply = exports.newApply = exports.key = exports.getDecorations = exports.createPlugin = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
10
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
10
11
  var _steps = require("@atlaskit/adf-schema/steps");
11
12
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -26,8 +27,12 @@ var _decorationsDropTarget = require("./decorations-drop-target");
26
27
  var _handleMouseOver = require("./handle-mouse-over");
27
28
  var _keymap = require("./keymap");
28
29
  var _activeAnchorTracker = require("./utils/active-anchor-tracker");
30
+ var _analytics2 = require("./utils/analytics");
29
31
  var _anchorUtils = require("./utils/anchor-utils");
32
+ var _selection = require("./utils/selection");
30
33
  var _transactions = require("./utils/transactions");
34
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
35
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
31
36
  var key = exports.key = new _state.PluginKey('blockControls');
32
37
  var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
33
38
  var isHTMLElement = function isHTMLElement(element) {
@@ -78,7 +83,8 @@ var destroyFn = function destroyFn(api, editorView) {
78
83
  }
79
84
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
80
85
  var tr = _ref3.tr;
81
- if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
86
+ var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
87
+ if (isMultiSelect) {
82
88
  var _api$blockControls, _api$selection;
83
89
  var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
84
90
  multiSelectDnD = _ref4.multiSelectDnD;
@@ -99,6 +105,13 @@ var destroyFn = function destroyFn(api, editorView) {
99
105
  // if no drop targets are rendered, assume that drop is invalid
100
106
  if (location.current.dropTargets.length === 0) {
101
107
  var _api$analytics2;
108
+ var nodeTypes, hasSelectedMultipleNodes;
109
+ if (isMultiSelect && api) {
110
+ var position = (0, _selection.getSelectedSlicePosition)(start, tr, api);
111
+ var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, position.from, position.to);
112
+ nodeTypes = attributes.nodeTypes;
113
+ hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
114
+ }
102
115
  var resolvedMovingNode = tr.doc.resolve(start);
103
116
  var maybeNode = resolvedMovingNode.nodeAfter;
104
117
  api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
@@ -106,10 +119,13 @@ var destroyFn = function destroyFn(api, editorView) {
106
119
  action: _analytics.ACTION.CANCELLED,
107
120
  actionSubject: _analytics.ACTION_SUBJECT.DRAG,
108
121
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
109
- attributes: {
122
+ attributes: _objectSpread({
110
123
  nodeDepth: resolvedMovingNode.depth,
111
124
  nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
112
- }
125
+ }, isMultiSelect && {
126
+ nodeTypes: nodeTypes,
127
+ hasSelectedMultipleNodes: hasSelectedMultipleNodes
128
+ })
113
129
  })(tr);
114
130
  }
115
131
  return tr.setMeta(key, {
@@ -134,6 +150,10 @@ var initialState = {
134
150
  isPMDragging: false,
135
151
  multiSelectDnD: undefined
136
152
  };
153
+ var getDecorations = exports.getDecorations = function getDecorations(state) {
154
+ var _key$getState;
155
+ return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
156
+ };
137
157
  var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
138
158
  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
139
159
  var activeNode = currentState.activeNode,
@@ -469,12 +489,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
469
489
  },
470
490
  props: {
471
491
  decorations: function decorations(state) {
472
- var _api$editorDisabled, _key$getState;
492
+ var _api$editorDisabled, _key$getState2;
473
493
  var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
474
494
  if (isDisabled) {
475
495
  return;
476
496
  }
477
- return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
497
+ return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
478
498
  },
479
499
  handleDOMEvents: {
480
500
  drop: function drop(view, event) {
@@ -547,10 +567,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
547
567
  }));
548
568
  },
549
569
  dragend: function dragend(view) {
550
- var _key$getState2;
570
+ var _key$getState3;
551
571
  var state = view.state,
552
572
  dispatch = view.dispatch;
553
- if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
573
+ if ((_key$getState3 = key.getState(state)) !== null && _key$getState3 !== void 0 && _key$getState3.isPMDragging) {
554
574
  dispatch(state.tr.setMeta(key, {
555
575
  isPMDragging: false
556
576
  }));
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getMultiSelectAnalyticsAttributes = exports.fireInsertLayoutAnalytics = exports.attachMoveNodeAnalytics = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var attachMoveNodeAnalytics = exports.attachMoveNodeAnalytics = function attachMoveNodeAnalytics(tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api, fromNodeTypes, hasSelectedMultipleNodes) {
12
+ var _api$analytics;
13
+ 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({
14
+ eventType: _analytics.EVENT_TYPE.TRACK,
15
+ action: _analytics.ACTION.MOVED,
16
+ actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
17
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
18
+ attributes: {
19
+ nodeDepth: fromDepth,
20
+ nodeType: fromNodeType,
21
+ nodeTypes: fromNodeTypes,
22
+ hasSelectedMultipleNodes: hasSelectedMultipleNodes,
23
+ destinationNodeDepth: toDepth,
24
+ destinationNodeType: toNodeType,
25
+ isSameParent: isSameParent,
26
+ inputMethod: inputMethod
27
+ }
28
+ })(tr);
29
+ };
30
+ var fireInsertLayoutAnalytics = exports.fireInsertLayoutAnalytics = function fireInsertLayoutAnalytics(tr, api, nodeTypes, hasSelectedMultipleNodes) {
31
+ var _api$analytics2;
32
+ api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
33
+ action: _analytics.ACTION.INSERTED,
34
+ actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
35
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
36
+ attributes: {
37
+ inputMethod: _analytics.INPUT_METHOD.DRAG_AND_DROP,
38
+ nodeTypes: nodeTypes,
39
+ hasSelectedMultipleNodes: hasSelectedMultipleNodes
40
+ },
41
+ eventType: _analytics.EVENT_TYPE.TRACK
42
+ })(tr);
43
+ };
44
+
45
+ /**
46
+ * Given a range, return distinctive types of node and whether there are multiple nodes in the range
47
+ */
48
+ var getMultiSelectAnalyticsAttributes = exports.getMultiSelectAnalyticsAttributes = function getMultiSelectAnalyticsAttributes(tr, anchor, head) {
49
+ var nodeTypes = [];
50
+ var from = Math.min(anchor, head);
51
+ var to = Math.max(anchor, head);
52
+ tr.doc.nodesBetween(from, to, function (node, pos) {
53
+ if (pos < from) {
54
+ // ignore parent node
55
+ return true;
56
+ }
57
+ nodeTypes.push(node.type.name);
58
+
59
+ // only care about the top level (relatively in the range) nodes
60
+ return false;
61
+ });
62
+ return {
63
+ nodeTypes: (0, _platformFeatureFlags.fg)('platform_editor_track_node_types') ? (0, _toConsumableArray2.default)(new Set(nodeTypes)).sort().join(',') : undefined,
64
+ hasSelectedMultipleNodes: nodeTypes.length > 1
65
+ };
66
+ };
@@ -3,10 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getMultiSelectionIfPosInside = void 0;
6
+ exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = void 0;
7
7
  var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos) {
8
8
  var _api$blockControls;
9
- var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
9
+ var _ref = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
10
10
  multiSelectDnD = _ref.multiSelectDnD;
11
11
  if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
12
12
  var multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -19,4 +19,24 @@ var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = functi
19
19
  } : {};
20
20
  }
21
21
  return {};
22
+ };
23
+
24
+ /**
25
+ *
26
+ * @returns from and to positions of the selected content (after expansion)
27
+ */
28
+ var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
29
+ var _activeNode$nodeSize;
30
+ var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos),
31
+ anchor = _getMultiSelectionIfP.anchor,
32
+ head = _getMultiSelectionIfP.head;
33
+ var inSelection = anchor !== undefined && head !== undefined;
34
+ var from = inSelection ? Math.min(anchor, head) : handlePos;
35
+ var activeNode = tr.doc.nodeAt(handlePos);
36
+ var activeNodeEndPos = handlePos + ((_activeNode$nodeSize = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeSize) !== null && _activeNode$nodeSize !== void 0 ? _activeNode$nodeSize : 1);
37
+ var to = inSelection ? Math.max(anchor, head) : activeNodeEndPos;
38
+ return {
39
+ from: from,
40
+ to: to
41
+ };
22
42
  };