@atlaskit/editor-plugin-block-controls 2.26.0 → 2.26.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.26.2
+
+### Patch Changes
+
+- [#109976](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109976)
+  [`2f1cbe0e2b32f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f1cbe0e2b32f) -
+  [ED-26272] Update DnD related analytics, e.g. element moved, to reflect multi-select info
+  (distinctive types of nodes, whether multiple nodes are selected)
+- Updated dependencies
+
+## 2.26.1
+
+### Patch Changes
+
+- [#111887](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111887)
+  [`dc433156e592a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc433156e592a) -
+  [ux] ED-26101 Create layout with nodes before/after using keyboard shortcuts
+
 ## 2.26.0
 
 ### Minor Changes

package/dist/cjs/editor-commands/move-node.js

@@ -19,12 +19,13 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
+var _analytics2 = require("../pm-plugins/utils/analytics");
 var _consts = require("../pm-plugins/utils/consts");
-var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
 var _selection2 = require("../pm-plugins/utils/selection");
+var _updateSelection = require("../pm-plugins/utils/update-selection");
 var _validation = require("../pm-plugins/utils/validation");
 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; }
 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; }
@@ -58,7 +59,7 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
+var getCurrentNodePos = function getCurrentNodePos(state) {
   var _activeNode$handleOpt;
   var selection = state.selection;
   var _ref = _main.key.getState(state) || {},
@@ -94,27 +95,46 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
-    var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
+    var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
+      var isTopLevelNode = $pos.depth === 0;
       var moveToPos = -1;
       var nodeIndex = $pos.index();
       var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
-          var _$pos$nodeBefore, _api$core;
-          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+        if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core, _api$core2;
+          var nodeBefore = $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
+          if (moveToPos < 0) {
+            return false;
+          }
           api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
             var _api$blockControls;
             var tr = _ref2.tr;
             api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveToLayout(currentNodePos, moveToPos, {
-              selectMovedNode: true
+              moveToEnd: true,
+              moveNodeAtCursorPos: true
             })({
               tr: tr
             });
+            var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            (0, _updateSelection.updateSelection)(tr, mappedTo, true);
             return tr;
           });
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core3, _api$blockControls2;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -128,8 +148,30 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
       } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
-          var _api$core2;
+        if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core4, _api$core5;
+          var endOfDoc = $pos.end();
+          moveToPos = $pos.posAtIndex($pos.index() + 1);
+          if (moveToPos >= endOfDoc) {
+            return false;
+          }
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref3) {
+            var _api$blockControls3;
+            var tr = _ref3.tr;
+            api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || (_api$blockControls3 = _api$blockControls3.commands) === null || _api$blockControls3 === void 0 || _api$blockControls3.moveToLayout(currentNodePos, moveToPos, {
+              moveNodeAtCursorPos: true
+            })({
+              tr: tr
+            });
+            var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            (0, _updateSelection.updateSelection)(tr, mappedTo);
+            return tr;
+          });
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core6, _api$blockControls4;
           var _index = $pos.index($pos.depth);
           var parent = $pos.node($pos.depth);
           // get the next layoutColumn node
@@ -142,17 +184,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           }
           var moveToEnd = _index === parent.childCount - 2;
           moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
-          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
-            var _api$blockControls2;
-            var tr = _ref3.tr;
-            api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
-              moveToEnd: moveToEnd,
-              selectMovedNode: true
-            })({
-              tr: tr
-            });
-            return tr;
-          });
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveToLayout(currentNodePos, moveToPos, {
+            moveToEnd: moveToEnd,
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -164,15 +199,15 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
           moveToPos = $pos.start() - 1;
         } else {
-          var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
-          if (nodeBefore) {
-            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          var _nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
+          if (_nodeBefore) {
+            moveToPos = currentNodePos - _nodeBefore.nodeSize;
           }
         }
       } else {
-        var endOfDoc = $pos.end();
+        var _endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        if (nodeAfterPos > endOfDoc) {
+        if (nodeAfterPos > _endOfDoc) {
           return false;
         }
         if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
@@ -190,8 +225,8 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
       var shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core3;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+        var _api$core7;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref4) {
           var tr = _ref4.tr;
           moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
@@ -201,9 +236,9 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         });
         return true;
       } else if (nodeType) {
-        var _api$core4;
+        var _api$core8;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
           (0, _getSelection.selectNode)(tr, currentNodePos, nodeType);
           tr.scrollIntoView();
@@ -230,22 +265,21 @@ var moveNode = exports.moveNode = function moveNode(api) {
       }
       var sliceFrom = start;
       var sliceTo;
+      var mappedTo;
+      var sourceNodeTypes, hasSelectedMultipleNodes;
       var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
         exposure: true
       });
       if (isMultiSelect) {
-        var _handleNode$nodeSize;
-        var _getMultiSelectionIfP = (0, _selection2.getMultiSelectionIfPosInside)(api, start),
-          anchor = _getMultiSelectionIfP.anchor,
-          head = _getMultiSelectionIfP.head;
-        var inSelection = anchor !== undefined && head !== undefined;
-        sliceFrom = inSelection ? Math.min(anchor, head) : start;
-        var handleSize = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
-        var handleEnd = sliceFrom + handleSize;
-        sliceTo = inSelection ? Math.max(anchor, head) : handleEnd;
+        var slicePosition = (0, _selection2.getSelectedSlicePosition)(start, tr, api);
+        sliceFrom = slicePosition.from;
+        sliceTo = slicePosition.to;
+        var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, sliceFrom, sliceTo);
+        hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+        sourceNodeTypes = attributes.nodeTypes;
       } else {
-        var _handleNode$nodeSize2;
-        var size = (_handleNode$nodeSize2 = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize2 !== void 0 ? _handleNode$nodeSize2 : 1;
+        var _handleNode$nodeSize;
+        var size = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
         sliceTo = sliceFrom + size;
       }
       var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
@@ -253,7 +287,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
         nestedExpand = _tr$doc$type$schema$n.nestedExpand;
       var $to = tr.doc.resolve(to);
       var $handlePos = tr.doc.resolve(start);
-      var mappedTo;
       if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
         var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
         var destType = $to.node().type;
@@ -309,7 +342,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
         }
       }
       if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
-        (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);
+        (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);
       } else {
         var _api$analytics;
         api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -317,13 +350,16 @@ var moveNode = exports.moveNode = function moveNode(api) {
           action: _analytics.ACTION.MOVED,
           actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
           actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-          attributes: _objectSpread({
+          attributes: _objectSpread(_objectSpread({
             nodeDepth: $handlePos.depth,
             nodeType: handleNode.type.name,
             destinationNodeDepth: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth,
             destinationNodeType: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name
           }, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
             inputMethod: inputMethod
+          }), isMultiSelect && {
+            sourceNodeTypes: sourceNodeTypes,
+            hasSelectedMultipleNodes: hasSelectedMultipleNodes
           })
         })(tr);
       }

package/dist/cjs/editor-commands/move-to-layout.js

@@ -10,9 +10,9 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _analytics2 = require("../pm-plugins/utils/analytics");
 var _checkFragment = require("../pm-plugins/utils/check-fragment");
 var _consts = require("../pm-plugins/utils/consts");
-var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
 var _selection = require("../pm-plugins/utils/selection");
 var _updateColumnWidths = require("../pm-plugins/utils/update-column-widths");
@@ -47,9 +47,14 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
   var isSameLayout = (0, _validation.isInSameLayout)($originalFrom, $originalTo);
   var sourceContentEndPos = -1;
-  if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
+  var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
+  var sourceNodeTypes, hasSelectedMultipleNodes;
+  if (isMultiSelect) {
     if (sourceContent instanceof _model.Fragment) {
       sourceContentEndPos = from + sourceContent.size;
+      var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, from, sourceContentEndPos);
+      hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+      sourceNodeTypes = attributes.nodeTypes;
     }
   } else {
     if (sourceContent instanceof _model.Node) {
@@ -68,7 +73,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
     if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
       tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
-    (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);
+    (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);
   } else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
     var _$originalFrom$nodeAf2;
     if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
@@ -79,7 +84,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
       var mappedFrom = tr.mapping.map(from);
       (0, _removeFromSource.removeFromSource)(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
     }
-    (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);
+    (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);
   }
   return tr;
 };
@@ -162,7 +167,7 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
+var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCursorPos) {
   if (from === to) {
     return;
   }
@@ -193,11 +198,11 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
   var sourceContent = $from.nodeAfter;
   var sourceFrom = from;
   var sourceTo = from + sourceContent.nodeSize;
-  if (isMultiSelect) {
+  if (isMultiSelect && !moveNodeAtCursorPos) {
     var _getMultiSelectionIfP = (0, _selection.getMultiSelectionIfPosInside)(api, from),
       anchor = _getMultiSelectionIfP.anchor,
       head = _getMultiSelectionIfP.head;
-    if (anchor && head) {
+    if (anchor !== undefined && head !== undefined) {
       sourceFrom = Math.min(anchor, head);
       sourceTo = Math.max(anchor, head);
       sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
@@ -254,7 +259,7 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
       var _content$marks$find;
       return (_content$marks$find = content.marks.find(function (m) {
         return m.type === breakout;
-      })) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs;
+      })) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
     } else if (content instanceof _model.Fragment) {
       // Find the first breakout mode in the fragment
       var firstBreakoutMode;
@@ -290,7 +295,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       if (!api) {
         return tr;
       }
-      var canMove = canMoveToLayout(api, from, to, tr);
+      var canMove = canMoveToLayout(api, from, to, tr, options === null || options === void 0 ? void 0 : options.moveNodeAtCursorPos);
       if (!canMove) {
         return tr;
       }
@@ -314,6 +319,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       if (!fromContentWithoutBreakout) {
         return tr;
       }
+      var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
       if (toNode.type === layoutSection) {
         var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
         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) {
           // resolve again the source node after node updated (remove breakout marks)
           toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
         }
-        if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
+        if (isMultiSelect) {
           if ((0, _checkFragment.isFragmentOfType)(fromContentWithoutBreakout, 'layoutColumn') && fromContentWithoutBreakout.firstChild) {
             fromContentWithoutBreakout = fromContentWithoutBreakout.firstChild.content;
           }
@@ -345,6 +351,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
         var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromContentWithoutBreakout] : [fromContentWithoutBreakout, toNodeWithoutBreakout];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
+          var sourceNodeTypes, hasSelectedMultipleNodes;
+          if (isMultiSelect) {
+            var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, $sourceFrom.pos, sourceTo);
+            hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+            sourceNodeTypes = attributes.nodeTypes;
+          }
           tr = (0, _removeFromSource.removeFromSource)(tr, $sourceFrom, sourceTo);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
@@ -354,7 +366,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
           breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
             mode: breakoutMode
           })]);
-          (0, _fireAnalytics.fireInsertLayoutAnalytics)(tr, api);
+          (0, _analytics2.fireInsertLayoutAnalytics)(tr, api, sourceNodeTypes, hasSelectedMultipleNodes);
         }
         return tr;
       }

package/dist/cjs/editor-commands/show-drag-handle.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.showDragHandleAtSelection = void 0;
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _decorationsAnchor = require("../pm-plugins/decorations-anchor");
 var _main = require("../pm-plugins/main");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
-var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
+var showDragHandleAtSelectionOld = function showDragHandleAtSelectionOld(api, shouldFocusParentNode) {
   return function (state, _, view) {
     var $from = state.selection.$from;
     var shouldFocusParentNode;
@@ -19,7 +22,7 @@ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function sho
 
       // if the node is already focused, pressing the keymap second times should focus the parent node
       shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
-      var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
+      var parentPos = (0, _utils2.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
       var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
       if (parentElement) {
         // Ignored via go/ees005
@@ -68,4 +71,87 @@ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function sho
     }
     return false;
   };
+};
+var findParentPosForHandle = function findParentPosForHandle(state) {
+  var _activeNode$handleOpt2;
+  var $from = state.selection.$from;
+  var _ref2 = _main.key.getState(state) || {},
+    activeNode = _ref2.activeNode;
+
+  // if a node handle is already focused, return the parent pos of that node (with focused handle)
+  if (activeNode && (_activeNode$handleOpt2 = activeNode.handleOptions) !== null && _activeNode$handleOpt2 !== void 0 && _activeNode$handleOpt2.isFocused) {
+    var $activeNodePos = state.doc.resolve(activeNode.pos);
+
+    // if the handle is at the top level already, do nothing
+    if ($activeNodePos.depth === 0) {
+      return undefined;
+    }
+    return $activeNodePos.before();
+  }
+
+  // if we are in second level of nested node, we should focus the node at level 1
+  if ($from.depth <= 1) {
+    return $from.before(1);
+  }
+
+  // if we are inside a table, we should focus the table's handle
+  var parentTableNode = (0, _utils.findParentNodeOfType)([state.schema.nodes.table])(state.selection);
+  if (parentTableNode) {
+    return parentTableNode.pos;
+  }
+
+  // else find closest parent node
+  return (0, _getNestedNodePosition.getNestedNodePosition)(state);
+};
+var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
+  var decorations = (0, _main.getDecorations)(state);
+  if (!decorations) {
+    return undefined;
+  }
+  var nextHandleNodePos = findParentPosForHandle(state);
+  if (nextHandleNodePos === undefined) {
+    return undefined;
+  }
+  var nextHandleNode = state.doc.nodeAt(nextHandleNodePos);
+  var nodeDecorations = nextHandleNode && (0, _decorationsAnchor.findNodeDecs)(decorations, nextHandleNodePos, nextHandleNodePos + nextHandleNode.nodeSize);
+  if (!nodeDecorations || nodeDecorations.length === 0) {
+    return undefined;
+  }
+
+  // ensure the decoration covers the position of the look up node
+  nodeDecorations = nodeDecorations.filter(function (decoration) {
+    return decoration.from <= nextHandleNodePos;
+  });
+  if (nodeDecorations.length === 0) {
+    return undefined;
+  }
+
+  // sort the decorations by the position of the node
+  // so we can find the closest decoration to the node
+  nodeDecorations.sort(function (a, b) {
+    if (a.from === b.from) {
+      return a.to - b.to;
+    }
+    return b.from - a.from;
+  });
+
+  // return the closest decoration to the node
+  return nodeDecorations[0];
+};
+var showDragHandleAtSelectionNew = function showDragHandleAtSelectionNew(api) {
+  return function (state) {
+    var decoration = findNextAnchorDecoration(state);
+    if (api && decoration) {
+      api.core.actions.execute(api.blockControls.commands.showDragHandleAt(decoration.from, decoration.spec.anchorName, decoration.spec.nodeTypeWithLevel, {
+        isFocused: true
+      }));
+      return true;
+    }
+    return false;
+  };
+};
+var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
+  return function (state, dispatch, view) {
+    return (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_a11y') ? showDragHandleAtSelectionNew(api)(state) : showDragHandleAtSelectionOld(api)(state, dispatch, view);
+  };
 };

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -78,11 +78,10 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   var ignore_nodes = (0, _experiments.editorExperiment)('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
-    var anchorName;
     var shouldDescend = shouldDescendIntoNode(node);
-    anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
+    var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
+    var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var _anchorName;
       // Doesn't descend into a node
       if (node.isInline) {
         return false;
@@ -91,19 +90,15 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
-      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
     }
     var anchorStyles = "anchor-name: ".concat(anchorName, ";");
-    var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
       style: anchorStyles
-    }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', node.type.name + subType), 'data-drag-handler-anchor-depth', "".concat(depth)), {
+    }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {
       type: _decorationsCommon.TYPE_NODE_DEC,
       anchorName: anchorName,
-      nodeType: node.type.name
+      nodeType: node.type.name,
+      nodeTypeWithLevel: nodeTypeWithLevel
     }));
     return shouldDescend && depth < (0, _decorationsCommon.getNestedDepth)();
   });

package/dist/cjs/pm-plugins/decorations-common.js

@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unmountDecorations = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
+exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
@@ -22,6 +20,10 @@ var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
   var handleId = ObjHash.getForNode(node);
   return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
 };
+var getNodeTypeWithLevel = exports.getNodeTypeWithLevel = function getNodeTypeWithLevel(node) {
+  var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
+  return node.type.name + subType;
+};
 var ObjHash = /*#__PURE__*/function () {
   function ObjHash() {
     (0, _classCallCheck2.default)(this, ObjHash);
@@ -44,13 +46,9 @@ var unmountDecorations = exports.unmountDecorations = function unmountDecoration
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      var nodeKey = el.getAttribute(key);
-      if (nodeKey) {
-        nodeViewPortalProviderAPI.remove(nodeKey);
-      }
-    } else {
-      _reactDom.default.unmountComponentAtNode(el);
+    var nodeKey = el.getAttribute(key);
+    if (nodeKey) {
+      nodeViewPortalProviderAPI.remove(nodeKey);
     }
   });
 };

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -8,10 +8,8 @@ exports.findHandleDec = exports.emptyParagraphNodeDecorations = exports.dragHand
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -72,21 +70,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-          view: view,
-          api: api,
-          formatMessage: formatMessage,
-          getPos: getPos,
-          anchorName: anchorName,
-          nodeType: nodeType,
-          handleOptions: handleOptions,
-          isTopLevelNode: isTopLevelNode
-        });
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
         view: view,
         api: api,
         formatMessage: formatMessage,
@@ -95,8 +80,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
         nodeType: nodeType,
         handleOptions: handleOptions,
         isTopLevelNode: isTopLevelNode
-      }), element);
-    }
+      });
+    }, element, key);
     return element;
   }, {
     side: -1,