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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.27.0
+
+### Minor Changes
+
+- [#114097](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114097)
+  [`c767c26ecbc7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c767c26ecbc7c) -
+  [ux] [ED-26269] Support moving multiple nodes with shortcuts
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.26.4
+
+### Patch Changes
+
+- [#112698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112698)
+  [`121f8e8854a3a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/121f8e8854a3a) -
+  [ux] [ED-26476] Bugfix for drag handle appearing on nested tables when it shouldn't.
+
 ## 2.26.3
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -67,16 +67,22 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      setMultiSelectPositions: function setMultiSelectPositions() {
+      setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
         return function (_ref5) {
           var _api$selection;
           var tr = _ref5.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
-          var _expandSelectionBound = (0, _selection.expandSelectionBounds)(tr.selection.$anchor, tr.selection.$head),
-            expandedAnchor = _expandSelectionBound.$anchor,
-            expandedHead = _expandSelectionBound.$head;
+          var expandedAnchor, expandedHead;
+          if (anchor !== undefined && head !== undefined) {
+            expandedAnchor = tr.doc.resolve(anchor);
+            expandedHead = tr.doc.resolve(head);
+          } else {
+            var expandedSelection = (0, _selection.expandSelectionBounds)(tr.selection.$anchor, tr.selection.$head);
+            expandedAnchor = expandedSelection.$anchor;
+            expandedHead = expandedSelection.$head;
+          }
           api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
             tr: tr
           });

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

@@ -95,7 +95,18 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
-    var currentNodePos = getCurrentNodePos(state);
+    var isMultiSelectEnabled = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
+    var expandedAnchor, expandedHead;
+    var pluginState = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
+    if (pluginState !== null && pluginState !== void 0 && pluginState.multiSelectDnD) {
+      expandedAnchor = pluginState.multiSelectDnD.anchor;
+      expandedHead = pluginState.multiSelectDnD.head;
+    } else {
+      var expandedSelection = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head);
+      expandedAnchor = expandedSelection.$anchor.pos;
+      expandedHead = expandedSelection.$head.pos;
+    }
+    var currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
@@ -206,7 +217,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         }
       } else {
         var _endOfDoc = $pos.end();
-        var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        var nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > _endOfDoc) {
           return false;
         }
@@ -228,6 +239,9 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         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;
+          api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr: tr
+          });
           moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
@@ -235,7 +249,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           return tr;
         });
         return true;
-      } else if (nodeType) {
+      } else if (nodeType && !isMultiSelectEnabled) {
         var _api$core8;
         // If the node is first/last one, only select the node
         api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
@@ -245,6 +259,17 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           return tr;
         });
         return true;
+      } else if (isMultiSelectEnabled) {
+        var _api$core9;
+        api === null || api === void 0 || (_api$core9 = api.core) === null || _api$core9 === void 0 || _api$core9.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
+          api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr: tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
       }
     }
     return false;
@@ -254,8 +279,9 @@ var moveNode = exports.moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
-    return function (_ref6) {
-      var tr = _ref6.tr;
+    return function (_ref7) {
+      var _api$blockControls$co;
+      var tr = _ref7.tr;
       if (!api) {
         return tr;
       }
@@ -327,10 +353,14 @@ var moveNode = exports.moveNode = function moveNode(api) {
         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, handleNode.type.name);
-      tr.setMeta(_main.key, {
+      var sliceSize = sliceTo - sliceFrom;
+      tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
+        tr: tr
+      })) !== null && _api$blockControls$co !== void 0 ? _api$blockControls$co : tr : (0, _getSelection.selectNode)(tr, mappedTo, handleNode.type.name);
+      var currMeta = tr.getMeta(_main.key);
+      tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
         nodeMoved: true
-      });
+      }));
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);
       var expandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($to, [expand, nestedExpand]);

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

@@ -28,9 +28,16 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
-  var _node$attrs, _node$attrs2;
+  var _nodeTypes$table, _node$attrs, _node$attrs2;
   var isEmbedCard = node.type.name === 'embedCard';
   var isMediaSingle = node.type.name === 'mediaSingle';
+  var nodeTypes = node.type.schema.nodes;
+  var isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 || (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
+  var parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
+  var isNestedTable = isTable && parentIsTable;
+  if (isNestedTable && (0, _platformFeatureFlags.fg)('platform_editor_disable_drag_handle_nested_tables')) {
+    return true;
+  }
   var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && (0, _experiments.editorExperiment)('advanced_layouts', true);
   if (isFirstTableRow) {
     return false;

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

@@ -8,6 +8,7 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -70,18 +71,38 @@ 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';
-    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);
+
+    // temporarily re-instating ReactDOM.render to fix drag handle focus issue, fix to
+    // follow via ED-26546
+
+    // if (fg('platform_editor_react18_plugin_portalprovider')) {
+    // 	nodeViewPortalProviderAPI.render(
+    // 		() =>
+    // 			createElement(DragHandle, {
+    // 				view,
+    // 				api,
+    // 				formatMessage,
+    // 				getPos,
+    // 				anchorName,
+    // 				nodeType,
+    // 				handleOptions,
+    // 				isTopLevelNode,
+    // 			}),
+    // 		element,
+    // 		key,
+    // 	);
+    // } else {
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+      view: view,
+      api: api,
+      formatMessage: formatMessage,
+      getPos: getPos,
+      anchorName: anchorName,
+      nodeType: nodeType,
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
+    }), element);
+    //}
     return element;
   }, {
     side: -1,

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

@@ -189,7 +189,9 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
-    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ? undefined : multiSelectDnD;
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ||
+    // For move node with shortcut, only reset when the selection changes
+    tr.selection.anchor !== multiSelectDnD.textAnchor || tr.selection.head !== multiSelectDnD.textHead ? undefined : multiSelectDnD;
   }
   var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
     from = _getTrMetadata.from,

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

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = void 0;
-var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos) {
-  var _api$blockControls;
-  var _ref = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-    multiSelectDnD = _ref.multiSelectDnD;
+var _main = require("../main");
+var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
+  var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
+  var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
+  // With move nodes shortcut, we expand selection and move node within one transaction,
+  // Hence we also look for `multiSelectDnD` in transaction meta
+  var multiSelectDnD = (_pluginState$multiSel = pluginState === null || pluginState === void 0 ? void 0 : pluginState.multiSelectDnD) !== null && _pluginState$multiSel !== void 0 ? _pluginState$multiSel : tr === null || tr === void 0 || (_tr$getMeta = tr.getMeta(_main.key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
   if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
     var multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
     var multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -27,7 +30,7 @@ var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = functi
  */
 var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
   var _activeNode$nodeSize;
-  var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos),
+  var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos, tr),
     anchor = _getMultiSelectionIfP.anchor,
     head = _getMultiSelectionIfP.head;
   var inSelection = anchor !== undefined && head !== undefined;

package/dist/es2019/blockControlsPlugin.js

@@ -56,7 +56,7 @@ export const blockControlsPlugin = ({
       });
       return tr;
     },
-    setMultiSelectPositions: () => ({
+    setMultiSelectPositions: (anchor, head) => ({
       tr
     }) => {
       var _api$selection;
@@ -64,10 +64,15 @@ export const blockControlsPlugin = ({
         anchor: userAnchor,
         head: userHead
       } = tr.selection;
-      const {
-        $anchor: expandedAnchor,
-        $head: expandedHead
-      } = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head);
+      let expandedAnchor, expandedHead;
+      if (anchor !== undefined && head !== undefined) {
+        expandedAnchor = tr.doc.resolve(anchor);
+        expandedHead = tr.doc.resolve(head);
+      } else {
+        const expandedSelection = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head);
+        expandedAnchor = expandedSelection.$anchor;
+        expandedHead = expandedSelection.$head;
+      }
       api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
         tr
       });

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

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
-import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { GapCursorSelection, expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
@@ -92,7 +92,18 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
-    const currentNodePos = getCurrentNodePos(state);
+    const isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+    let expandedAnchor, expandedHead;
+    const pluginState = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
+    if (pluginState !== null && pluginState !== void 0 && pluginState.multiSelectDnD) {
+      expandedAnchor = pluginState.multiSelectDnD.anchor;
+      expandedHead = pluginState.multiSelectDnD.head;
+    } else {
+      const expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
+      expandedAnchor = expandedSelection.$anchor.pos;
+      expandedHead = expandedSelection.$head.pos;
+    }
+    const currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       const $pos = state.doc.resolve(currentNodePos);
@@ -205,7 +216,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         }
       } else {
         const endOfDoc = $pos.end();
-        const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        const nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > endOfDoc) {
           return false;
         }
@@ -228,6 +239,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
           tr
         }) => {
+          api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr
+          });
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr
           });
@@ -235,7 +249,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           return tr;
         });
         return true;
-      } else if (nodeType) {
+      } else if (nodeType && !isMultiSelectEnabled) {
         var _api$core8;
         // If the node is first/last one, only select the node
         api === null || api === void 0 ? void 0 : (_api$core8 = api.core) === null || _api$core8 === void 0 ? void 0 : _api$core8.actions.execute(({
@@ -246,6 +260,18 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           return tr;
         });
         return true;
+      } else if (isMultiSelectEnabled) {
+        var _api$core9;
+        api === null || api === void 0 ? void 0 : (_api$core9 = api.core) === null || _api$core9 === void 0 ? void 0 : _api$core9.actions.execute(({
+          tr
+        }) => {
+          api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
       }
     }
     return false;
@@ -254,6 +280,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
 export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage) => ({
   tr
 }) => {
+  var _api$blockControls$co2;
   if (!api) {
     return tr;
   }
@@ -326,8 +353,13 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     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, handleNode.type.name);
+  const sliceSize = sliceTo - sliceFrom;
+  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co2 = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
+    tr
+  })) !== null && _api$blockControls$co2 !== void 0 ? _api$blockControls$co2 : tr : selectNode(tr, mappedTo, handleNode.type.name);
+  const currMeta = tr.getMeta(key);
   tr.setMeta(key, {
+    ...currMeta,
     nodeMoved: true
   });
   api === null || api === void 0 ? void 0 : api.core.actions.focus();

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

@@ -20,9 +20,16 @@ export const shouldDescendIntoNode = node => {
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
-  var _node$attrs, _node$attrs2;
+  var _nodeTypes$table, _node$attrs, _node$attrs2;
   const isEmbedCard = node.type.name === 'embedCard';
   const isMediaSingle = node.type.name === 'mediaSingle';
+  const nodeTypes = node.type.schema.nodes;
+  const isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 ? void 0 : (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
+  const parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
+  const isNestedTable = isTable && parentIsTable;
+  if (isNestedTable && fg('platform_editor_disable_drag_handle_nested_tables')) {
+    return true;
+  }
   const isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && editorExperiment('advanced_layouts', true);
   if (isFirstTableRow) {
     return false;

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

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
+import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -61,7 +62,28 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     // 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';
-    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
+
+    // temporarily re-instating ReactDOM.render to fix drag handle focus issue, fix to
+    // follow via ED-26546
+
+    // if (fg('platform_editor_react18_plugin_portalprovider')) {
+    // 	nodeViewPortalProviderAPI.render(
+    // 		() =>
+    // 			createElement(DragHandle, {
+    // 				view,
+    // 				api,
+    // 				formatMessage,
+    // 				getPos,
+    // 				anchorName,
+    // 				nodeType,
+    // 				handleOptions,
+    // 				isTopLevelNode,
+    // 			}),
+    // 		element,
+    // 		key,
+    // 	);
+    // } else {
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
       view,
       api,
       formatMessage,
@@ -70,7 +92,8 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       nodeType,
       handleOptions,
       isTopLevelNode
-    }), element, key);
+    }), element);
+    //}
     return element;
   }, {
     side: -1,

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

@@ -189,7 +189,9 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   const resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
-    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ? undefined : multiSelectDnD;
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ||
+    // For move node with shortcut, only reset when the selection changes
+    tr.selection.anchor !== multiSelectDnD.textAnchor || tr.selection.head !== multiSelectDnD.textHead ? undefined : multiSelectDnD;
   }
   const {
     from,

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

@@ -1,8 +1,10 @@
-export const getMultiSelectionIfPosInside = (api, pos) => {
-  var _api$blockControls;
-  const {
-    multiSelectDnD
-  } = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+import { key } from '../main';
+export const getMultiSelectionIfPosInside = (api, pos, tr) => {
+  var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
+  const pluginState = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
+  // With move nodes shortcut, we expand selection and move node within one transaction,
+  // Hence we also look for `multiSelectDnD` in transaction meta
+  const multiSelectDnD = (_pluginState$multiSel = pluginState === null || pluginState === void 0 ? void 0 : pluginState.multiSelectDnD) !== null && _pluginState$multiSel !== void 0 ? _pluginState$multiSel : tr === null || tr === void 0 ? void 0 : (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
   if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
     const multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
     const multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -25,7 +27,7 @@ export const getSelectedSlicePosition = (handlePos, tr, api) => {
   const {
     anchor,
     head
-  } = getMultiSelectionIfPosInside(api, handlePos);
+  } = getMultiSelectionIfPosInside(api, handlePos, tr);
   const inSelection = anchor !== undefined && head !== undefined;
   const from = inSelection ? Math.min(anchor, head) : handlePos;
   const activeNode = tr.doc.nodeAt(handlePos);

package/dist/esm/blockControlsPlugin.js

@@ -60,16 +60,22 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return tr;
         };
       },
-      setMultiSelectPositions: function setMultiSelectPositions() {
+      setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
         return function (_ref5) {
           var _api$selection;
           var tr = _ref5.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
-          var _expandSelectionBound = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head),
-            expandedAnchor = _expandSelectionBound.$anchor,
-            expandedHead = _expandSelectionBound.$head;
+          var expandedAnchor, expandedHead;
+          if (anchor !== undefined && head !== undefined) {
+            expandedAnchor = tr.doc.resolve(anchor);
+            expandedHead = tr.doc.resolve(head);
+          } else {
+            var expandedSelection = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head);
+            expandedAnchor = expandedSelection.$anchor;
+            expandedHead = expandedSelection.$head;
+          }
           api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
             tr: tr
           });

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

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
-import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { GapCursorSelection, expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
@@ -89,7 +89,18 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
-    var currentNodePos = getCurrentNodePos(state);
+    var isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+    var expandedAnchor, expandedHead;
+    var pluginState = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
+    if (pluginState !== null && pluginState !== void 0 && pluginState.multiSelectDnD) {
+      expandedAnchor = pluginState.multiSelectDnD.anchor;
+      expandedHead = pluginState.multiSelectDnD.head;
+    } else {
+      var expandedSelection = expandSelectionBounds(selection.$anchor, selection.$head);
+      expandedAnchor = expandedSelection.$anchor.pos;
+      expandedHead = expandedSelection.$head.pos;
+    }
+    var currentNodePos = isMultiSelectEnabled ? Math.min(expandedAnchor, expandedHead) : getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
@@ -200,7 +211,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         }
       } else {
         var _endOfDoc = $pos.end();
-        var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
+        var nodeAfterPos = isMultiSelectEnabled ? Math.max(expandedAnchor, expandedHead) : $pos.posAtIndex($pos.index() + 1);
         if (nodeAfterPos > _endOfDoc) {
           return false;
         }
@@ -222,6 +233,9 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         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;
+          api === null || api === void 0 || api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr: tr
+          });
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
@@ -229,7 +243,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
           return tr;
         });
         return true;
-      } else if (nodeType) {
+      } else if (nodeType && !isMultiSelectEnabled) {
         var _api$core8;
         // If the node is first/last one, only select the node
         api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
@@ -239,6 +253,17 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
           return tr;
         });
         return true;
+      } else if (isMultiSelectEnabled) {
+        var _api$core9;
+        api === null || api === void 0 || (_api$core9 = api.core) === null || _api$core9 === void 0 || _api$core9.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
+          api.blockControls.commands.setMultiSelectPositions(expandedAnchor, expandedHead)({
+            tr: tr
+          });
+          tr.scrollIntoView();
+          return tr;
+        });
+        return true;
       }
     }
     return false;
@@ -248,8 +273,9 @@ export var moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
-    return function (_ref6) {
-      var tr = _ref6.tr;
+    return function (_ref7) {
+      var _api$blockControls$co;
+      var tr = _ref7.tr;
       if (!api) {
         return tr;
       }
@@ -321,10 +347,14 @@ export var moveNode = function moveNode(api) {
         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, handleNode.type.name);
-      tr.setMeta(key, {
+      var sliceSize = sliceTo - sliceFrom;
+      tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
+        tr: tr
+      })) !== null && _api$blockControls$co !== void 0 ? _api$blockControls$co : tr : selectNode(tr, mappedTo, handleNode.type.name);
+      var currMeta = tr.getMeta(key);
+      tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
         nodeMoved: true
-      });
+      }));
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);
       var expandAncestor = findParentNodeOfTypeClosestToPos($to, [expand, nestedExpand]);

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

@@ -21,9 +21,16 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
-  var _node$attrs, _node$attrs2;
+  var _nodeTypes$table, _node$attrs, _node$attrs2;
   var isEmbedCard = node.type.name === 'embedCard';
   var isMediaSingle = node.type.name === 'mediaSingle';
+  var nodeTypes = node.type.schema.nodes;
+  var isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 || (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
+  var parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
+  var isNestedTable = isTable && parentIsTable;
+  if (isNestedTable && fg('platform_editor_disable_drag_handle_nested_tables')) {
+    return true;
+  }
   var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && editorExperiment('advanced_layouts', true);
   if (isFirstTableRow) {
     return false;

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
+import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -63,18 +64,38 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     // 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';
-    nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/createElement(DragHandle, {
-        view: view,
-        api: api,
-        formatMessage: formatMessage,
-        getPos: getPos,
-        anchorName: anchorName,
-        nodeType: nodeType,
-        handleOptions: handleOptions,
-        isTopLevelNode: isTopLevelNode
-      });
-    }, element, key);
+
+    // temporarily re-instating ReactDOM.render to fix drag handle focus issue, fix to
+    // follow via ED-26546
+
+    // if (fg('platform_editor_react18_plugin_portalprovider')) {
+    // 	nodeViewPortalProviderAPI.render(
+    // 		() =>
+    // 			createElement(DragHandle, {
+    // 				view,
+    // 				api,
+    // 				formatMessage,
+    // 				getPos,
+    // 				anchorName,
+    // 				nodeType,
+    // 				handleOptions,
+    // 				isTopLevelNode,
+    // 			}),
+    // 		element,
+    // 		key,
+    // 	);
+    // } else {
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      view: view,
+      api: api,
+      formatMessage: formatMessage,
+      getPos: getPos,
+      anchorName: anchorName,
+      nodeType: nodeType,
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
+    }), element);
+    //}
     return element;
   }, {
     side: -1,

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

@@ -182,7 +182,9 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   var resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
-    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ? undefined : multiSelectDnD;
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ||
+    // For move node with shortcut, only reset when the selection changes
+    tr.selection.anchor !== multiSelectDnD.textAnchor || tr.selection.head !== multiSelectDnD.textHead ? undefined : multiSelectDnD;
   }
   var _getTrMetadata = getTrMetadata(tr),
     from = _getTrMetadata.from,

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

@@ -1,7 +1,10 @@
-export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos) {
-  var _api$blockControls;
-  var _ref = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-    multiSelectDnD = _ref.multiSelectDnD;
+import { key } from '../main';
+export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
+  var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
+  var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
+  // With move nodes shortcut, we expand selection and move node within one transaction,
+  // Hence we also look for `multiSelectDnD` in transaction meta
+  var multiSelectDnD = (_pluginState$multiSel = pluginState === null || pluginState === void 0 ? void 0 : pluginState.multiSelectDnD) !== null && _pluginState$multiSel !== void 0 ? _pluginState$multiSel : tr === null || tr === void 0 || (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.multiSelectDnD;
   if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
     var multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
     var multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -21,7 +24,7 @@ export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(
  */
 export var getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
   var _activeNode$nodeSize;
-  var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos),
+  var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, handlePos, tr),
     anchor = _getMultiSelectionIfP.anchor,
     head = _getMultiSelectionIfP.head;
   var inSelection = anchor !== undefined && head !== undefined;

package/dist/types/blockControlsPluginType.d.ts

@@ -87,7 +87,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
-        setMultiSelectPositions: () => EditorCommand;
+        setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };
 }>;
 export type BlockControlsMeta = {

package/dist/types/pm-plugins/utils/selection.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
-export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number) => {
+export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
     anchor?: number;
     head?: number;
 };

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -87,7 +87,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
-        setMultiSelectPositions: () => EditorCommand;
+        setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };
 }>;
 export type BlockControlsMeta = {

package/dist/types-ts4.5/pm-plugins/utils/selection.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
-export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number) => {
+export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
     anchor?: number;
     head?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.26.3",
+	"version": "2.27.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": "^47.2.1",
-		"@atlaskit/editor-common": "^99.14.0",
+		"@atlaskit/editor-common": "^99.16.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
@@ -148,6 +148,9 @@
 		},
 		"platform_editor_track_node_types": {
 			"type": "boolean"
+		},
+		"platform_editor_disable_drag_handle_nested_tables": {
+			"type": "boolean"
 		}
 	}
 }