@atlaskit/editor-plugin-block-controls 2.19.2 → 2.21.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.21.0
+
+### Minor Changes
+
+- [#102469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102469)
+  [`bb834fe685b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb834fe685b5a) -
+  ED-25924 makes drop hints appear more consistent
+
+## 2.20.0
+
+### Minor Changes
+
+- [#102564](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102564)
+  [`078168e470e88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/078168e470e88) -
+  [ux] Add initial multi-select
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.19.2
 
 ### Patch Changes

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

@@ -165,37 +165,55 @@ var moveNode = exports.moveNode = function moveNode(api) {
     // eslint-disable-next-line @typescript-eslint/max-params
     = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref4) {
-      var _node$nodeSize;
       var tr = _ref4.tr;
-      var node = tr.doc.nodeAt(start);
-      var resolvedNode = tr.doc.resolve(start);
-      if (!node) {
+      var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
+        exposure: true
+      });
+      var selection = tr.selection;
+      var selectionFrom = selection.$from.pos;
+      var selectionTo = selection.$to.pos;
+      var handleNode = tr.doc.nodeAt(start);
+      if (!handleNode) {
         return tr;
       }
+      var sliceFrom = start;
+      var sliceTo;
+      if (isMultiSelect) {
+        var _handleNode$nodeSize;
+        // //If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
+        var useSelection = sliceFrom >= selectionFrom - 1 && sliceFrom <= selectionTo;
+        sliceFrom = useSelection ? selectionFrom : 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 = useSelection ? selectionTo : handleEnd;
+      } 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;
+        sliceTo = sliceFrom + size;
+      }
       var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
         expand = _tr$doc$type$schema$n.expand,
         nestedExpand = _tr$doc$type$schema$n.nestedExpand;
-      var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-      var end = start + size;
-      var $from = tr.doc.resolve(start);
       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(start, end, false); // cut the content
+        var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
         var destType = $to.node().type;
         var destParent = $to.node($to.depth);
-        var sourceNode = $from.nodeAfter;
+        var sourceNode = $handlePos.nodeAfter;
 
+        //TODO: Does this need to be updated with new selection logic above? ^
         // Move a layout column to top level
-        if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+        if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
           // need update after we support single column layout.
           var fragment = _model.Fragment.from(sourceNode.content);
-          (0, _removeFromSource.removeFromSource)(tr, $from);
+          (0, _removeFromSource.removeFromSource)(tr, $handlePos);
           var _mappedTo = tr.mapping.map(to);
           tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
           return tr;
         }
-        if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $from.node().child($from.index()), $to)) {
+        if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
           return tr;
         }
         var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
@@ -203,7 +221,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
         if (!convertedNode) {
           return tr;
         }
-        tr.delete(start, end); // delete the content from the original position
+        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
         var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
         if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
@@ -214,12 +232,12 @@ var moveNode = exports.moveNode = function moveNode(api) {
           tr.insert(mappedTo, convertedNode);
         }
       } else {
-        var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
-        tr.delete(start, end); // delete the content from the original position
+        var _nodeCopy = tr.doc.content.cut(sliceFrom, sliceTo); // cut the content
+        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
         tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
       }
-      tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : (0, _getSelection.selectNode)(tr, mappedTo, node.type.name);
+      tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : (0, _getSelection.selectNode)(tr, mappedTo, handleNode.type.name);
       tr.setMeta(_main.key, {
         nodeMoved: true
       });
@@ -234,7 +252,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
         }
       }
       if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
-        (0, _fireAnalytics.attachMoveNodeAnalytics)(tr, inputMethod, resolvedNode.depth, node.type.name, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name, $from.sameParent($mappedTo), api);
+        (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);
       } else {
         var _api$analytics;
         api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -243,8 +261,8 @@ var moveNode = exports.moveNode = function moveNode(api) {
           actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
           actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
           attributes: _objectSpread({
-            nodeDepth: resolvedNode.depth,
-            nodeType: node.type.name,
+            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') && {
@@ -254,7 +272,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
       }
       if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
         var _api$accessibilityUti;
-        var movedMessage = to > start ? _messages.blockControlsMessages.movedDown : _messages.blockControlsMessages.movedup;
+        var movedMessage = to > sliceFrom ? _messages.blockControlsMessages.movedDown : _messages.blockControlsMessages.movedup;
         api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
           priority: 'important'
         });

package/dist/cjs/pm-plugins/utils/active-anchor-tracker.js

@@ -11,6 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _events = require("events");
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function () {
   function ActiveAnchorTracker() {
@@ -19,6 +20,11 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
     this.emitter = new _events.EventEmitter();
   }
   return (0, _createClass2.default)(ActiveAnchorTracker, [{
+    key: "getActiveAnchor",
+    value: function getActiveAnchor() {
+      return this.lastActiveAnchor;
+    }
+  }, {
     key: "subscribe",
     value: function subscribe(anchorName, callback) {
       if (this.emitter) {
@@ -68,6 +74,9 @@ var useActiveAnchorTracker = exports.useActiveAnchorTracker = function useActive
   (0, _react.useEffect)(function () {
     if (activeAnchorTracker && anchorName && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
       activeAnchorTracker.subscribe(anchorName, onActive);
+      if (activeAnchorTracker.getActiveAnchor() === anchorName && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        setIsActive(true);
+      }
       var unsubscribe = function unsubscribe() {
         activeAnchorTracker.unsubscribe(anchorName, onActive);
       };

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

@@ -225,10 +225,37 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
           var _api$blockControls, _api$analytics3;
           var tr = _ref6.tr;
+          var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
+            exposure: true
+          });
+          var selectionStart = start;
+          if (isMultiSelect) {
+            var selection = tr.selection;
+            var selectionFrom = selection.$from.pos;
+            var selectionTo = selection.$to.pos;
+            var $selectionFrom = tr.doc.resolve(selectionFrom);
+            var $selectionTo = tr.doc.resolve(selectionTo);
+            selectionStart = $selectionFrom.start();
+            var selectionEnd = $selectionTo.end();
+            var handlePos = getPos();
+            if (typeof handlePos !== 'number') {
+              return tr;
+            }
+            var posBeforeNode = $selectionFrom.pos ? $selectionFrom.start() - 1 : $selectionFrom.pos;
+            var shouldExpandSelection = handlePos >= posBeforeNode && handlePos <= selectionEnd;
+            if (shouldExpandSelection) {
+              //TODO: What happens if not a text selection?
+              var newSelection = _state.TextSelection.create(tr.doc, selectionStart, selectionEnd);
+              tr.setSelection(newSelection);
+            } else {
+              var _$selectionFrom = tr.doc.resolve(handlePos + 1);
+              (0, _getSelection.selectNode)(tr, handlePos, _$selectionFrom.node().type.name);
+            }
+          }
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
-          var resolvedMovingNode = tr.doc.resolve(start);
+          var resolvedMovingNode = tr.doc.resolve(selectionStart);
           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({

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

@@ -160,37 +160,55 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
 ) => ({
   tr
 }) => {
-  var _node$nodeSize;
-  const node = tr.doc.nodeAt(start);
-  const resolvedNode = tr.doc.resolve(start);
-  if (!node) {
+  const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
+  const selection = tr.selection;
+  const selectionFrom = selection.$from.pos;
+  const selectionTo = selection.$to.pos;
+  const handleNode = tr.doc.nodeAt(start);
+  if (!handleNode) {
     return tr;
   }
+  let sliceFrom = start;
+  let sliceTo;
+  if (isMultiSelect) {
+    var _handleNode$nodeSize;
+    // //If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
+    const useSelection = sliceFrom >= selectionFrom - 1 && sliceFrom <= selectionTo;
+    sliceFrom = useSelection ? selectionFrom : 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 = useSelection ? selectionTo : handleEnd;
+  } 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;
+    sliceTo = sliceFrom + size;
+  }
   const {
     expand,
     nestedExpand
   } = tr.doc.type.schema.nodes;
-  const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-  const end = start + size;
-  const $from = tr.doc.resolve(start);
   const $to = tr.doc.resolve(to);
+  const $handlePos = tr.doc.resolve(start);
   let mappedTo;
   if (editorExperiment('nested-dnd', true)) {
-    const nodeCopy = tr.doc.slice(start, end, false); // cut the content
+    const nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
     const destType = $to.node().type;
     const destParent = $to.node($to.depth);
-    const sourceNode = $from.nodeAfter;
+    const sourceNode = $handlePos.nodeAfter;
 
+    //TODO: Does this need to be updated with new selection logic above? ^
     // Move a layout column to top level
-    if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+    if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
       // need update after we support single column layout.
       const fragment = Fragment.from(sourceNode.content);
-      removeFromSource(tr, $from);
+      removeFromSource(tr, $handlePos);
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(mappedTo))).scrollIntoView();
       return tr;
     }
-    if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()), $to)) {
+    if (!canMoveNodeToIndex(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
       return tr;
     }
     const convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
@@ -198,7 +216,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     if (!convertedNode) {
       return tr;
     }
-    tr.delete(start, end); // delete the content from the original position
+    tr.delete(sliceFrom, sliceTo); // delete the content from the original position
     mappedTo = tr.mapping.map(to);
     const isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && isEmptyParagraph($to.nodeAfter);
     if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
@@ -209,12 +227,12 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       tr.insert(mappedTo, convertedNode);
     }
   } else {
-    const nodeCopy = tr.doc.content.cut(start, end); // cut the content
-    tr.delete(start, end); // delete the content from the original position
+    const nodeCopy = tr.doc.content.cut(sliceFrom, sliceTo); // cut the content
+    tr.delete(sliceFrom, sliceTo); // delete the content from the original position
     mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, nodeCopy); // insert the content at the new position
   }
-  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, node.type.name);
+  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, handleNode.type.name);
   tr.setMeta(key, {
     nodeMoved: true
   });
@@ -229,7 +247,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     }
   }
   if (editorExperiment('advanced_layouts', true)) {
-    attachMoveNodeAnalytics(tr, inputMethod, resolvedNode.depth, node.type.name, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name, $from.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);
   } 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({
@@ -238,8 +256,8 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       actionSubject: ACTION_SUBJECT.ELEMENT,
       actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
       attributes: {
-        nodeDepth: resolvedNode.depth,
-        nodeType: node.type.name,
+        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,
         ...(fg('platform_editor_element_drag_and_drop_ed_23873') && {
@@ -250,7 +268,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   }
   if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
     var _api$accessibilityUti;
-    const movedMessage = to > start ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
+    const movedMessage = to > sliceFrom ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
     api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
       priority: 'important'
     });

package/dist/es2019/pm-plugins/utils/active-anchor-tracker.js

@@ -1,12 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { EventEmitter } from 'events';
 import { useCallback, useEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export class ActiveAnchorTracker {
   constructor() {
     _defineProperty(this, "lastActiveAnchor", '');
     this.emitter = new EventEmitter();
   }
+  getActiveAnchor() {
+    return this.lastActiveAnchor;
+  }
   subscribe(anchorName, callback) {
     if (this.emitter) {
       this.emitter.on(anchorName, callback);
@@ -46,6 +50,9 @@ export const useActiveAnchorTracker = (anchorName, activeAnchorTracker = default
   useEffect(() => {
     if (activeAnchorTracker && anchorName && editorExperiment('advanced_layouts', true)) {
       activeAnchorTracker.subscribe(anchorName, onActive);
+      if (activeAnchorTracker.getActiveAnchor() === anchorName && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        setIsActive(true);
+      }
       const unsubscribe = () => {
         activeAnchorTracker.unsubscribe(anchorName, onActive);
       };

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

@@ -208,10 +208,37 @@ export const DragHandle = ({
           tr
         }) => {
           var _api$blockControls, _api$analytics3;
+          const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+            exposure: true
+          });
+          let selectionStart = start;
+          if (isMultiSelect) {
+            const selection = tr.selection;
+            const selectionFrom = selection.$from.pos;
+            const selectionTo = selection.$to.pos;
+            const $selectionFrom = tr.doc.resolve(selectionFrom);
+            const $selectionTo = tr.doc.resolve(selectionTo);
+            selectionStart = $selectionFrom.start();
+            const selectionEnd = $selectionTo.end();
+            const handlePos = getPos();
+            if (typeof handlePos !== 'number') {
+              return tr;
+            }
+            const posBeforeNode = $selectionFrom.pos ? $selectionFrom.start() - 1 : $selectionFrom.pos;
+            const shouldExpandSelection = handlePos >= posBeforeNode && handlePos <= selectionEnd;
+            if (shouldExpandSelection) {
+              //TODO: What happens if not a text selection?
+              const newSelection = TextSelection.create(tr.doc, selectionStart, selectionEnd);
+              tr.setSelection(newSelection);
+            } else {
+              const $selectionFrom = tr.doc.resolve(handlePos + 1);
+              selectNode(tr, handlePos, $selectionFrom.node().type.name);
+            }
+          }
           api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
-          const resolvedMovingNode = tr.doc.resolve(start);
+          const resolvedMovingNode = tr.doc.resolve(selectionStart);
           const maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({

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

@@ -159,37 +159,55 @@ export var moveNode = function moveNode(api) {
     // eslint-disable-next-line @typescript-eslint/max-params
     = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref4) {
-      var _node$nodeSize;
       var tr = _ref4.tr;
-      var node = tr.doc.nodeAt(start);
-      var resolvedNode = tr.doc.resolve(start);
-      if (!node) {
+      var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+        exposure: true
+      });
+      var selection = tr.selection;
+      var selectionFrom = selection.$from.pos;
+      var selectionTo = selection.$to.pos;
+      var handleNode = tr.doc.nodeAt(start);
+      if (!handleNode) {
         return tr;
       }
+      var sliceFrom = start;
+      var sliceTo;
+      if (isMultiSelect) {
+        var _handleNode$nodeSize;
+        // //If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
+        var useSelection = sliceFrom >= selectionFrom - 1 && sliceFrom <= selectionTo;
+        sliceFrom = useSelection ? selectionFrom : 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 = useSelection ? selectionTo : handleEnd;
+      } 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;
+        sliceTo = sliceFrom + size;
+      }
       var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
         expand = _tr$doc$type$schema$n.expand,
         nestedExpand = _tr$doc$type$schema$n.nestedExpand;
-      var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
-      var end = start + size;
-      var $from = tr.doc.resolve(start);
       var $to = tr.doc.resolve(to);
+      var $handlePos = tr.doc.resolve(start);
       var mappedTo;
       if (editorExperiment('nested-dnd', true)) {
-        var nodeCopy = tr.doc.slice(start, end, false); // cut the content
+        var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
         var destType = $to.node().type;
         var destParent = $to.node($to.depth);
-        var sourceNode = $from.nodeAfter;
+        var sourceNode = $handlePos.nodeAfter;
 
+        //TODO: Does this need to be updated with new selection logic above? ^
         // Move a layout column to top level
-        if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+        if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
           // need update after we support single column layout.
           var fragment = Fragment.from(sourceNode.content);
-          removeFromSource(tr, $from);
+          removeFromSource(tr, $handlePos);
           var _mappedTo = tr.mapping.map(to);
           tr.insert(_mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
           return tr;
         }
-        if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()), $to)) {
+        if (!canMoveNodeToIndex(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
           return tr;
         }
         var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
@@ -197,7 +215,7 @@ export var moveNode = function moveNode(api) {
         if (!convertedNode) {
           return tr;
         }
-        tr.delete(start, end); // delete the content from the original position
+        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
         var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && isEmptyParagraph($to.nodeAfter);
         if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
@@ -208,12 +226,12 @@ export var moveNode = function moveNode(api) {
           tr.insert(mappedTo, convertedNode);
         }
       } else {
-        var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
-        tr.delete(start, end); // delete the content from the original position
+        var _nodeCopy = tr.doc.content.cut(sliceFrom, sliceTo); // cut the content
+        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
         tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
       }
-      tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, node.type.name);
+      tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, handleNode.type.name);
       tr.setMeta(key, {
         nodeMoved: true
       });
@@ -228,7 +246,7 @@ export var moveNode = function moveNode(api) {
         }
       }
       if (editorExperiment('advanced_layouts', true)) {
-        attachMoveNodeAnalytics(tr, inputMethod, resolvedNode.depth, node.type.name, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth, $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.parent.type.name, $from.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);
       } else {
         var _api$analytics;
         api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -237,8 +255,8 @@ export var moveNode = function moveNode(api) {
           actionSubject: ACTION_SUBJECT.ELEMENT,
           actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
           attributes: _objectSpread({
-            nodeDepth: resolvedNode.depth,
-            nodeType: node.type.name,
+            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
           }, fg('platform_editor_element_drag_and_drop_ed_23873') && {
@@ -248,7 +266,7 @@ export var moveNode = function moveNode(api) {
       }
       if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
         var _api$accessibilityUti;
-        var movedMessage = to > start ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
+        var movedMessage = to > sliceFrom ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
         api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
           priority: 'important'
         });

package/dist/esm/pm-plugins/utils/active-anchor-tracker.js

@@ -4,6 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { EventEmitter } from 'events';
 import { useCallback, useEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var ActiveAnchorTracker = /*#__PURE__*/function () {
   function ActiveAnchorTracker() {
@@ -12,6 +13,11 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
     this.emitter = new EventEmitter();
   }
   return _createClass(ActiveAnchorTracker, [{
+    key: "getActiveAnchor",
+    value: function getActiveAnchor() {
+      return this.lastActiveAnchor;
+    }
+  }, {
     key: "subscribe",
     value: function subscribe(anchorName, callback) {
       if (this.emitter) {
@@ -63,6 +69,9 @@ export var useActiveAnchorTracker = function useActiveAnchorTracker(anchorName)
   useEffect(function () {
     if (activeAnchorTracker && anchorName && editorExperiment('advanced_layouts', true)) {
       activeAnchorTracker.subscribe(anchorName, onActive);
+      if (activeAnchorTracker.getActiveAnchor() === anchorName && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        setIsActive(true);
+      }
       var unsubscribe = function unsubscribe() {
         activeAnchorTracker.unsubscribe(anchorName, onActive);
       };

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

@@ -216,10 +216,37 @@ export var DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
           var _api$blockControls, _api$analytics3;
           var tr = _ref6.tr;
+          var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+            exposure: true
+          });
+          var selectionStart = start;
+          if (isMultiSelect) {
+            var selection = tr.selection;
+            var selectionFrom = selection.$from.pos;
+            var selectionTo = selection.$to.pos;
+            var $selectionFrom = tr.doc.resolve(selectionFrom);
+            var $selectionTo = tr.doc.resolve(selectionTo);
+            selectionStart = $selectionFrom.start();
+            var selectionEnd = $selectionTo.end();
+            var handlePos = getPos();
+            if (typeof handlePos !== 'number') {
+              return tr;
+            }
+            var posBeforeNode = $selectionFrom.pos ? $selectionFrom.start() - 1 : $selectionFrom.pos;
+            var shouldExpandSelection = handlePos >= posBeforeNode && handlePos <= selectionEnd;
+            if (shouldExpandSelection) {
+              //TODO: What happens if not a text selection?
+              var newSelection = TextSelection.create(tr.doc, selectionStart, selectionEnd);
+              tr.setSelection(newSelection);
+            } else {
+              var _$selectionFrom = tr.doc.resolve(handlePos + 1);
+              selectNode(tr, handlePos, _$selectionFrom.node().type.name);
+            }
+          }
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
-          var resolvedMovingNode = tr.doc.resolve(start);
+          var resolvedMovingNode = tr.doc.resolve(selectionStart);
           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({

package/dist/types/pm-plugins/utils/active-anchor-tracker.d.ts

@@ -6,6 +6,7 @@ export declare class ActiveAnchorTracker {
     emitter: EventEmitter | null;
     lastActiveAnchor: string;
     constructor();
+    getActiveAnchor(): string;
     subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
     unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
     emit(anchorName: string): void;

package/dist/types-ts4.5/pm-plugins/utils/active-anchor-tracker.d.ts

@@ -6,6 +6,7 @@ export declare class ActiveAnchorTracker {
     emitter: EventEmitter | null;
     lastActiveAnchor: string;
     constructor();
+    getActiveAnchor(): string;
     subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
     unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
     emit(anchorName: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.19.2",
+	"version": "2.21.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^99.1.0",
+		"@atlaskit/editor-common": "^99.3.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,14 +41,14 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^23.3.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.34.0",
+		"@atlaskit/tmp-editor-statsig": "^2.35.0",
 		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",