@atlaskit/editor-plugin-block-controls 1.10.1 → 1.10.3

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.10.3
+
+### Patch Changes
+
+- [#127123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127123)
+  [`7a68ab6404094`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7a68ab6404094) -
+  [ux] Add validation to node move, only show valid drop targets
+- [#126802](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126802)
+  [`2cd334b37d1d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cd334b37d1d8) -
+  Clean up FFs
+
+## 1.10.2
+
+### Patch Changes
+
+- [`63d659eb3e73d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63d659eb3e73d) -
+  ED-24315 improve a11y for block controls
+
 ## 1.10.1
 
 ### Patch Changes
 
+- [#125984](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125984)
+  [`167a210dfd672`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/167a210dfd672) -
+  [ux] Update shortcuts for element dnd
 - [#125542](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125542)
   [`06bc2f65f892e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06bc2f65f892e) -
   ED-24304 resolve range error issue
+- Updated dependencies
 
 ## 1.10.0
 

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.moveNodeViaShortcut = exports.moveNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -14,12 +15,14 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../utils");
+var _validation = require("../utils/validation");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function transformNested(nodeCopy, destType) {
-  var firstChild = nodeCopy.content.firstChild;
-  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
-    return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, firstChild.type.schema);
+  var srcNode = nodeCopy.content.firstChild;
+  var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
+  if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
+    return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
   }
   return nodeCopy;
 }
@@ -53,7 +56,7 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   }
   return currentNodePos;
 };
-var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
+var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
@@ -79,7 +82,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         var _api$core;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
           var tr = _ref2.tr;
-          moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT)({
+          moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
           tr.scrollIntoView();
@@ -104,6 +107,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
 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 (_ref4) {
       var _node$nodeSize, _api$analytics;
       var tr = _ref4.tr;
@@ -117,7 +121,14 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var mappedTo;
       if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
         var nodeCopy = tr.doc.slice(start, end, false); // cut the content
-        var destType = tr.doc.resolve(to).node().type.name;
+        var $to = tr.doc.resolve(to);
+        var $from = tr.doc.resolve(start);
+        var destType = $to.node().type;
+        var srcType = $from.node().child($from.index()).type;
+        var destParent = $to.node($to.depth);
+        if (!(0, _validation.canMoveToIndex)(destParent, $to.index(), srcType)) {
+          return tr;
+        }
         var convertedNode = transformNested(nodeCopy, destType).content;
         tr.delete(start, end); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
@@ -145,6 +156,13 @@ var moveNode = exports.moveNode = function moveNode(api) {
           inputMethod: inputMethod
         })
       })(tr);
+      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;
+        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'
+        });
+      }
       return tr;
     };
   };

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

@@ -15,9 +15,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
+var _validation = require("../utils/validation");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -25,8 +26,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   var decorationState = [];
   var prevNode;
   var state = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
-  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
+  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
+    var nodeType = newState.doc.type.schema.nodes[activeNodeType];
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline) {
@@ -35,6 +37,12 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       if (IGNORE_NODES.includes(node.type.name)) {
         return true; //skip over, don't consider it a valid depth
       }
+      var canDrop = parent && activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
+
+      //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
+      if (!canDrop) {
+        return false; //not valid pos, so nested not valid either
+      }
       decorationState.push({
         id: pos,
         pos: pos
@@ -48,6 +56,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     var dropTargetDec = /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
       id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
+      formatMessage: formatMessage,
       prevNode: prevNode,
       nextNode: node
     });
@@ -90,7 +99,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
-      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
+      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length,
+      formatMessage: formatMessage
     }), element);
     return element;
   }, {

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

@@ -10,7 +10,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _moveNode = require("../commands/move-node");
 var _showDragHandle = require("../commands/show-drag-handle");
 var _consts = require("../consts");
-function keymapList(api) {
+function keymapList(api, formatMessage) {
   var keymapList = {};
   if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.showElementDragHandle.common, function (state, dispatch, view) {
@@ -18,11 +18,11 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP), keymapList);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN), keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
   }
   return keymapList;
 }
-var boundKeydownHandler = exports.boundKeydownHandler = function boundKeydownHandler(api) {
-  return (0, _keymap.keydownHandler)(keymapList(api));
+var boundKeydownHandler = exports.boundKeydownHandler = function boundKeydownHandler(api, formatMessage) {
+  return (0, _keymap.keydownHandler)(keymapList(api, formatMessage));
 };

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

@@ -94,7 +94,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -184,6 +184,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        var _getIntl = getIntl(),
+          formatMessage = _getIntl.formatMessage;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -273,7 +275,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+              var _meta$activeNode2;
+              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType),
                 _decs2 = _dropTargetDecoration.decs,
                 updatedDecorationState = _dropTargetDecoration.decorationState;
               decorationState = updatedDecorationState;
@@ -298,7 +301,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+              var _meta$activeNode3;
+              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType),
                 _decs3 = _dropTargetDecoration2.decs,
                 _updatedDecorationState = _dropTargetDecoration2.decorationState;
               decorationState = _updatedDecorationState;
@@ -359,7 +363,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
@@ -454,11 +458,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
               return true;
             }
           }
-
-          //NOTE: altKey === 'option' on MacOS
-          if (event.altKey && event.shiftKey && event.ctrlKey && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+          if (event.shiftKey && event.ctrlKey && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+            var _getIntl2 = getIntl(),
+              formatMessage = _getIntl2.formatMessage;
             //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && (0, _keymap.boundKeydownHandler)(api)(view, event)) {
+            if (!event.repeat && (0, _keymap.boundKeydownHandler)(api, formatMessage)(view, event)) {
               event.preventDefault();
               return true;
             }

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

@@ -367,27 +367,39 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     description: formatMessage(_messages.blockControlsMessages.moveDown),
     keymap: _keymaps.dragToMoveDown
   }];
+  var message = helpDescriptors.map(function (descriptor) {
+    return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
+  }).join('. ');
   var renderButton = function renderButton() {
-    return (0, _react2.jsx)("button", {
-      type: "button",
-      css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
-      ref: buttonRef
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
-      onClick: handleOnClick,
-      onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
-      onKeyDown: handleKeyDown,
-      "data-testid": "block-ctrl-drag-handle"
-    }, (0, _react2.jsx)(_dragHandler.default, {
-      label: "",
-      size: "medium"
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/no-html-button
+      (0, _react2.jsx)("button", {
+        type: "button",
+        css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+        ref: buttonRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
+        onClick: handleOnClick,
+        onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+        onKeyDown: handleKeyDown,
+        "data-testid": "block-ctrl-drag-handle"
+      }, (0, _react2.jsx)(_dragHandler.default, {
+        label: "",
+        size: "medium"
+      }))
+    );
   };
   return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
-    })
+    }),
+    onShow: function onShow() {
+      var _api$accessibilityUti;
+      api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
+        priority: 'important'
+      });
+    }
   }, renderButton()) : renderButton();
 };
 var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleInternal);

package/dist/cjs/ui/drop-target.js

@@ -79,7 +79,8 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
-    nextNode = _ref3.nextNode;
+    nextNode = _ref3.nextNode,
+    formatMessage = _ref3.formatMessage;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -119,11 +120,11 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2;
           var start = activeNode.pos;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
         }
       }
     });
-  }, [id, api]);
+  }, [id, api, formatMessage]);
   var topTargetMarginStyle = (0, _react.useMemo)(function () {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

package/dist/cjs/ui/global-styles.js

@@ -90,30 +90,15 @@ var extendedHoverZoneNested = (0, _react.css)({
     display: 'none'
   }
 });
-var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
-var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
-var withoutInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  display: 'none !important'
-}));
 var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
 
-/**
- * Please do not change change transform to display:none, or visibility:hidden
- * Otherwise it might break composition input for Chrome
- * https://product-fabric.atlassian.net/browse/ED-24136
- */
-var withoutInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
-  transform: 'scale(0)'
-}));
-
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -141,14 +126,10 @@ var withMediaSingleStyleFix = (0, _react.css)((0, _defineProperty2.default)({},
   cursor: 'pointer'
 }));
 var getTextNodeStyle = function getTextNodeStyle() {
-  if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23868')) {
-    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
-  } else {
-    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
-  }
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
   });
 };

package/dist/cjs/utils/validation.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canMoveToIndex = canMoveToIndex;
+function canMoveToIndex(destParent, indexIntoParent, srcType) {
+  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
+}

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

@@ -1,4 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
@@ -6,10 +7,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
+import { canMoveToIndex } from '../utils/validation';
 function transformNested(nodeCopy, destType) {
-  const firstChild = nodeCopy.content.firstChild;
-  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
-    return transformSliceNestedExpandToExpand(nodeCopy, firstChild.type.schema);
+  const srcNode = nodeCopy.content.firstChild;
+  const schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
+  if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
+    return transformSliceNestedExpandToExpand(nodeCopy, schema);
   }
   return nodeCopy;
 }
@@ -46,7 +49,7 @@ const getCurrentNodePos = state => {
   }
   return currentNodePos;
 };
-export const moveNodeViaShortcut = (api, direction) => {
+export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
     const currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
@@ -73,7 +76,7 @@ export const moveNodeViaShortcut = (api, direction) => {
         api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
           tr
         }) => {
-          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
+          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr
           });
           tr.scrollIntoView();
@@ -96,7 +99,7 @@ export const moveNodeViaShortcut = (api, direction) => {
     return false;
   };
 };
-export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP) => ({
+export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage) => ({
   tr
 }) => {
   var _node$nodeSize, _api$analytics;
@@ -110,7 +113,14 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   let mappedTo;
   if (fg('platform_editor_elements_dnd_nested')) {
     const nodeCopy = tr.doc.slice(start, end, false); // cut the content
-    const destType = tr.doc.resolve(to).node().type.name;
+    const $to = tr.doc.resolve(to);
+    const $from = tr.doc.resolve(start);
+    const destType = $to.node().type;
+    const srcType = $from.node().child($from.index()).type;
+    const destParent = $to.node($to.depth);
+    if (!canMoveToIndex(destParent, $to.index(), srcType)) {
+      return tr;
+    }
     const convertedNode = transformNested(nodeCopy, destType).content;
     tr.delete(start, end); // delete the content from the original position
     mappedTo = tr.mapping.map(to);
@@ -139,5 +149,12 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       })
     }
   })(tr);
+  if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
+    var _api$accessibilityUti;
+    const movedMessage = to > start ? 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'
+    });
+  }
   return tr;
 };

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

@@ -7,9 +7,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
+import { canMoveToIndex } from '../utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
-export const dropTargetDecorations = (oldState, newState, api) => {
+export const dropTargetDecorations = (oldState, newState, api, formatMessage, activeNodeType) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -17,8 +18,9 @@ export const dropTargetDecorations = (oldState, newState, api) => {
   const decorationState = [];
   let prevNode;
   const state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
-  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, _parent, index) => {
+  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
     let depth = 0;
+    const nodeType = newState.doc.type.schema.nodes[activeNodeType];
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline) {
@@ -27,6 +29,12 @@ export const dropTargetDecorations = (oldState, newState, api) => {
       if (IGNORE_NODES.includes(node.type.name)) {
         return true; //skip over, don't consider it a valid depth
       }
+      const canDrop = parent && activeNodeType && canMoveToIndex(parent, index, nodeType);
+
+      //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
+      if (!canDrop) {
+        return false; //not valid pos, so nested not valid either
+      }
       decorationState.push({
         id: pos,
         pos
@@ -40,6 +48,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     const dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
       api,
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
+      formatMessage,
       prevNode,
       nextNode: node
     });
@@ -82,7 +91,8 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
-      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
+      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length,
+      formatMessage
     }), element);
     return element;
   }, {

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

@@ -4,7 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
 import { DIRECTION } from '../consts';
-function keymapList(api) {
+function keymapList(api, formatMessage) {
   let keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
     bindKeymapWithCommand(showElementDragHandle.common, (state, dispatch, view) => {
@@ -12,9 +12,9 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
-    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
-    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
+    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
+    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
   }
   return keymapList;
 }
-export const boundKeydownHandler = api => keydownHandler(keymapList(api));
+export const boundKeydownHandler = (api, formatMessage) => keydownHandler(keymapList(api, formatMessage));

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

@@ -88,7 +88,7 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -174,6 +174,9 @@ export const createPlugin = (api, getIntl) => {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         const maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        const {
+          formatMessage
+        } = getIntl();
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -259,10 +262,11 @@ export const createPlugin = (api, getIntl) => {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
+              var _meta$activeNode2;
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -286,10 +290,11 @@ export const createPlugin = (api, getIntl) => {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             const shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
+              var _meta$activeNode3;
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -347,7 +352,7 @@ export const createPlugin = (api, getIntl) => {
         return {
           decorations,
           decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
@@ -447,11 +452,12 @@ export const createPlugin = (api, getIntl) => {
               return true;
             }
           }
-
-          //NOTE: altKey === 'option' on MacOS
-          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+          if (event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            const {
+              formatMessage
+            } = getIntl();
             //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+            if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
               event.preventDefault();
               return true;
             }