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

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -7,11 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayoutDropTargetDecoration = exports.createDropTargetDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
@@ -103,21 +101,13 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
     element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
     element.style.setProperty('display', 'block');
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache,
-          isSameLayout: isSameLayout
-        }));
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
@@ -138,19 +128,12 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache
-        }));
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC

package/dist/cjs/pm-plugins/main.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.oldApply = exports.newApply = exports.key = exports.createPlugin = void 0;
+exports.oldApply = exports.newApply = exports.key = exports.getDecorations = exports.createPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -26,8 +27,12 @@ var _decorationsDropTarget = require("./decorations-drop-target");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
+var _analytics2 = require("./utils/analytics");
 var _anchorUtils = require("./utils/anchor-utils");
+var _selection = require("./utils/selection");
 var _transactions = require("./utils/transactions");
+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; }
 var key = exports.key = new _state.PluginKey('blockControls');
 var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
 var isHTMLElement = function isHTMLElement(element) {
@@ -78,7 +83,8 @@ var destroyFn = function destroyFn(api, editorView) {
       }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
-        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);
+        if (isMultiSelect) {
           var _api$blockControls, _api$selection;
           var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
             multiSelectDnD = _ref4.multiSelectDnD;
@@ -99,6 +105,13 @@ var destroyFn = function destroyFn(api, editorView) {
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
           var _api$analytics2;
+          var nodeTypes, hasSelectedMultipleNodes;
+          if (isMultiSelect && api) {
+            var position = (0, _selection.getSelectedSlicePosition)(start, tr, api);
+            var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, position.from, position.to);
+            nodeTypes = attributes.nodeTypes;
+            hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+          }
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           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) {
             action: _analytics.ACTION.CANCELLED,
             actionSubject: _analytics.ACTION_SUBJECT.DRAG,
             actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-            attributes: {
+            attributes: _objectSpread({
               nodeDepth: resolvedMovingNode.depth,
               nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
-            }
+            }, isMultiSelect && {
+              nodeTypes: nodeTypes,
+              hasSelectedMultipleNodes: hasSelectedMultipleNodes
+            })
           })(tr);
         }
         return tr.setMeta(key, {
@@ -134,6 +150,10 @@ var initialState = {
   isPMDragging: false,
   multiSelectDnD: undefined
 };
+var getDecorations = exports.getDecorations = function getDecorations(state) {
+  var _key$getState;
+  return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+};
 var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
   var activeNode = currentState.activeNode,
@@ -469,12 +489,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
     },
     props: {
       decorations: function decorations(state) {
-        var _api$editorDisabled, _key$getState;
+        var _api$editorDisabled, _key$getState2;
         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;
         if (isDisabled) {
           return;
         }
-        return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
       },
       handleDOMEvents: {
         drop: function drop(view, event) {
@@ -547,10 +567,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }));
         },
         dragend: function dragend(view) {
-          var _key$getState2;
+          var _key$getState3;
           var state = view.state,
             dispatch = view.dispatch;
-          if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
+          if ((_key$getState3 = key.getState(state)) !== null && _key$getState3 !== void 0 && _key$getState3.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
               isPMDragging: false
             }));

package/dist/cjs/pm-plugins/utils/analytics.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMultiSelectAnalyticsAttributes = exports.fireInsertLayoutAnalytics = exports.attachMoveNodeAnalytics = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var attachMoveNodeAnalytics = exports.attachMoveNodeAnalytics = function attachMoveNodeAnalytics(tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api, fromNodeTypes, hasSelectedMultipleNodes) {
+  var _api$analytics;
+  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({
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    action: _analytics.ACTION.MOVED,
+    actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+    attributes: {
+      nodeDepth: fromDepth,
+      nodeType: fromNodeType,
+      nodeTypes: fromNodeTypes,
+      hasSelectedMultipleNodes: hasSelectedMultipleNodes,
+      destinationNodeDepth: toDepth,
+      destinationNodeType: toNodeType,
+      isSameParent: isSameParent,
+      inputMethod: inputMethod
+    }
+  })(tr);
+};
+var fireInsertLayoutAnalytics = exports.fireInsertLayoutAnalytics = function fireInsertLayoutAnalytics(tr, api, nodeTypes, hasSelectedMultipleNodes) {
+  var _api$analytics2;
+  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({
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
+    attributes: {
+      inputMethod: _analytics.INPUT_METHOD.DRAG_AND_DROP,
+      nodeTypes: nodeTypes,
+      hasSelectedMultipleNodes: hasSelectedMultipleNodes
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  })(tr);
+};
+
+/**
+ * Given a range, return distinctive types of node and whether there are multiple nodes in the range
+ */
+var getMultiSelectAnalyticsAttributes = exports.getMultiSelectAnalyticsAttributes = function getMultiSelectAnalyticsAttributes(tr, anchor, head) {
+  var nodeTypes = [];
+  var from = Math.min(anchor, head);
+  var to = Math.max(anchor, head);
+  tr.doc.nodesBetween(from, to, function (node, pos) {
+    if (pos < from) {
+      // ignore parent node
+      return true;
+    }
+    nodeTypes.push(node.type.name);
+
+    // only care about the top level (relatively in the range) nodes
+    return false;
+  });
+  return {
+    nodeTypes: (0, _platformFeatureFlags.fg)('platform_editor_track_node_types') ? (0, _toConsumableArray2.default)(new Set(nodeTypes)).sort().join(',') : undefined,
+    hasSelectedMultipleNodes: nodeTypes.length > 1
+  };
+};

package/dist/cjs/pm-plugins/utils/selection.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMultiSelectionIfPosInside = void 0;
+exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = void 0;
 var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos) {
   var _api$blockControls;
-  var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+  var _ref = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     multiSelectDnD = _ref.multiSelectDnD;
   if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
     var multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -19,4 +19,24 @@ var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = functi
     } : {};
   }
   return {};
+};
+
+/**
+ *
+ * @returns from and to positions of the selected content (after expansion)
+ */
+var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
+  var _activeNode$nodeSize;
+  var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos),
+    anchor = _getMultiSelectionIfP.anchor,
+    head = _getMultiSelectionIfP.head;
+  var inSelection = anchor !== undefined && head !== undefined;
+  var from = inSelection ? Math.min(anchor, head) : handlePos;
+  var activeNode = tr.doc.nodeAt(handlePos);
+  var activeNodeEndPos = handlePos + ((_activeNode$nodeSize = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeSize) !== null && _activeNode$nodeSize !== void 0 ? _activeNode$nodeSize : 1);
+  var to = inSelection ? Math.max(anchor, head) : activeNodeEndPos;
+  return {
+    from: from,
+    to: to
+  };
 };

package/dist/cjs/ui/drag-handle.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragHandle = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -25,18 +26,17 @@ var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
+var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
-/**
+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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var iconWrapperStyles = (0, _primitives.xcss)({
   display: 'flex',
   justifyContent: 'center',
@@ -263,7 +263,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
             exposure: true
           });
+          var nodeTypes, hasSelectedMultipleNodes;
+          var resolvedMovingNode = tr.doc.resolve(start);
+          var maybeNode = resolvedMovingNode.nodeAfter;
           if (isMultiSelect) {
+            var _tr$getMeta;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -274,22 +278,32 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
                 tr: tr
               });
             }
+            var multiSelectDnD = (_tr$getMeta = tr.getMeta(_main.key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
+            if (multiSelectDnD) {
+              var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, multiSelectDnD.anchor, multiSelectDnD.head);
+              nodeTypes = attributes.nodeTypes;
+              hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+            } else {
+              nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
+              hasSelectedMultipleNodes = false;
+            }
           }
           api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
-          var resolvedMovingNode = tr.doc.resolve(start);
-          var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.DRAGGED,
             actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
             actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-            attributes: {
+            attributes: _objectSpread({
               nodeDepth: resolvedMovingNode.depth,
               nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
-            }
+            }, isMultiSelect && {
+              nodeTypes: nodeTypes,
+              hasSelectedMultipleNodes: hasSelectedMultipleNodes
+            })
           })(tr);
           return tr;
         });
@@ -389,7 +403,21 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     setDragHandleSelected((0, _getSelection.isHandleInSelection)(view.state, selection, start));
   }, [start, selection, view.state]);
-  var helpDescriptors = [{
+  var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
+    description: formatMessage(_messages.blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    keymap: _keymaps.dragToMoveUp
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    keymap: _keymaps.dragToMoveDown
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveLeft),
+    keymap: _keymaps.dragToMoveLeft
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveRight),
+    keymap: _keymaps.dragToMoveRight
+  }] : [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
     description: formatMessage(_messages.blockControlsMessages.moveUp),

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

@@ -11,12 +11,13 @@ import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/u
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { key } from '../pm-plugins/main';
+import { attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { DIRECTION } from '../pm-plugins/utils/consts';
-import { attachMoveNodeAnalytics } from '../pm-plugins/utils/fire-analytics';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
 import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
-import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
+import { getSelectedSlicePosition } from '../pm-plugins/utils/selection';
+import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
 
 /**
@@ -50,7 +51,7 @@ const isDragLayoutColumnToTopLevel = ($from, $to) => {
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
+const getCurrentNodePos = state => {
   var _activeNode$handleOpt;
   const {
     selection
@@ -91,28 +92,47 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
-    const currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
+    const currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       const $pos = state.doc.resolve(currentNodePos);
+      const isTopLevelNode = $pos.depth === 0;
       let moveToPos = -1;
       const nodeIndex = $pos.index();
       const isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && 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 && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core, _api$core2;
+          const nodeBefore = $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
+          if (moveToPos < 0) {
+            return false;
+          }
           api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
             tr
           }) => {
             var _api$blockControls, _api$blockControls$co;
             api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveToLayout(currentNodePos, moveToPos, {
-              selectMovedNode: true
+              moveToEnd: true,
+              moveNodeAtCursorPos: true
             })({
               tr
             });
+            const insertColumnStep = getInsertLayoutStep(tr);
+            const mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo, true);
             return tr;
           });
+          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core3, _api$blockControls2, _api$blockControls2$c;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(currentNodePos, moveToPos, {
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -126,8 +146,31 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
       } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
-          var _api$core2;
+        if (isTopLevelNode && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core4, _api$core5;
+          const endOfDoc = $pos.end();
+          moveToPos = $pos.posAtIndex($pos.index() + 1);
+          if (moveToPos >= endOfDoc) {
+            return false;
+          }
+          api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+            tr
+          }) => {
+            var _api$blockControls3, _api$blockControls3$c;
+            api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : (_api$blockControls3$c = _api$blockControls3.commands) === null || _api$blockControls3$c === void 0 ? void 0 : _api$blockControls3$c.moveToLayout(currentNodePos, moveToPos, {
+              moveNodeAtCursorPos: true
+            })({
+              tr
+            });
+            const insertColumnStep = getInsertLayoutStep(tr);
+            const mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo);
+            return tr;
+          });
+          api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core6, _api$blockControls4, _api$blockControls4$c;
           const index = $pos.index($pos.depth);
           const parent = $pos.node($pos.depth);
           // get the next layoutColumn node
@@ -140,18 +183,10 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           }
           const 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
-            tr
-          }) => {
-            var _api$blockControls2, _api$blockControls2$c;
-            api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(currentNodePos, moveToPos, {
-              moveToEnd,
-              selectMovedNode: true
-            })({
-              tr
-            });
-            return tr;
-          });
+          api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveToLayout(currentNodePos, moveToPos, {
+            moveToEnd,
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -189,8 +224,8 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
       const shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core3;
-        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+        var _api$core7;
+        api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
           tr
         }) => {
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
@@ -201,9 +236,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         });
         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 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core8 = api.core) === null || _api$core8 === void 0 ? void 0 : _api$core8.actions.execute(({
           tr
         }) => {
           selectNode(tr, currentNodePos, nodeType);
@@ -228,23 +263,21 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   }
   let sliceFrom = start;
   let sliceTo;
+  let mappedTo;
+  let sourceNodeTypes, hasSelectedMultipleNodes;
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
   });
   if (isMultiSelect) {
-    var _handleNode$nodeSize;
-    const {
-      anchor,
-      head
-    } = getMultiSelectionIfPosInside(api, start);
-    const inSelection = anchor !== undefined && head !== undefined;
-    sliceFrom = inSelection ? Math.min(anchor, head) : start;
-    const handleSize = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
-    const handleEnd = sliceFrom + handleSize;
-    sliceTo = inSelection ? Math.max(anchor, head) : handleEnd;
+    const slicePosition = getSelectedSlicePosition(start, tr, api);
+    sliceFrom = slicePosition.from;
+    sliceTo = slicePosition.to;
+    const attributes = getMultiSelectAnalyticsAttributes(tr, sliceFrom, sliceTo);
+    hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+    sourceNodeTypes = attributes.nodeTypes;
   } else {
-    var _handleNode$nodeSize2;
-    const size = (_handleNode$nodeSize2 = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize2 !== void 0 ? _handleNode$nodeSize2 : 1;
+    var _handleNode$nodeSize;
+    const size = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
     sliceTo = sliceFrom + size;
   }
   const {
@@ -253,7 +286,6 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   } = tr.doc.type.schema.nodes;
   const $to = tr.doc.resolve(to);
   const $handlePos = tr.doc.resolve(start);
-  let mappedTo;
   if (editorExperiment('nested-dnd', true)) {
     const nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
     const destType = $to.node().type;
@@ -309,7 +341,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     }
   }
   if (editorExperiment('advanced_layouts', true)) {
-    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);
+    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 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
@@ -324,6 +356,10 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
         destinationNodeType: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name,
         ...(fg('platform_editor_element_drag_and_drop_ed_23873') && {
           inputMethod
+        }),
+        ...(isMultiSelect && {
+          sourceNodeTypes,
+          hasSelectedMultipleNodes
         })
       }
     })(tr);