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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.10.1
+
+### Patch Changes
+
+- [#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
+
+## 1.10.0
+
+### Minor Changes
+
+- [#123594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123594)
+  [`ea6c9a5361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea6c9a5361f96) -
+  [ux] Add prelim nested DnD support
+
 ## 1.9.1
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.moveNodeViaShortcut = exports.moveNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _selection = require("@atlaskit/editor-common/selection");
+var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
@@ -15,6 +16,14 @@ var _main = require("../pm-plugins/main");
 var _utils2 = require("../utils");
 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);
+  }
+  return nodeCopy;
+}
+
 /**
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
@@ -105,10 +114,20 @@ var moveNode = exports.moveNode = function moveNode(api) {
       }
       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 nodeCopy = tr.doc.content.cut(start, end); // cut the content
-      tr.delete(start, end); // delete the content from the original position
-      var mappedTo = tr.mapping.map(to);
-      tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+      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 convertedNode = transformNested(nodeCopy, destType).content;
+        tr.delete(start, end); // delete the content from the original position
+        mappedTo = tr.mapping.map(to);
+        tr.insert(mappedTo, convertedNode); // insert the content at the new position
+      } else {
+        var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
+        tr.delete(start, end); // delete the content from the original position
+        mappedTo = tr.mapping.map(to);
+        tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
+      }
       tr = (0, _utils2.selectNode)(tr, mappedTo, node.type.name);
       tr.setMeta(_main.key, {
         nodeMoved: true

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
 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 _reactIntlNext = require("react-intl-next");
 var _view = require("@atlaskit/editor-prosemirror/view");
@@ -14,6 +15,8 @@ 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 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 decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -23,13 +26,28 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   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) {
-    decorationState.push({
-      index: index,
-      pos: pos
-    });
+    var depth = 0;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      depth = newState.doc.resolve(pos).depth;
+      if (node.isInline) {
+        return false;
+      }
+      if (IGNORE_NODES.includes(node.type.name)) {
+        return true; //skip over, don't consider it a valid depth
+      }
+      decorationState.push({
+        id: pos,
+        pos: pos
+      });
+    } else {
+      decorationState.push({
+        id: index,
+        pos: pos
+      });
+    }
     var dropTargetDec = /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
-      index: index,
+      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
       prevNode: prevNode,
       nextNode: node
     });
@@ -44,7 +62,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       side: -1
     }));
     prevNode = node;
-    return false;
+    return depth < NESTED_DEPTH;
   });
 
   /**
@@ -54,16 +72,25 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
    * node and not its size.
    *
    */
-  decorationState.push({
-    index: decorationState.length + 1,
-    pos: newState.doc.nodeSize - 2
-  });
+
+  var lastPos = newState.doc.content.size;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+    decorationState.push({
+      id: lastPos,
+      pos: lastPos
+    });
+  } else {
+    decorationState.push({
+      id: decorationState.length + 1,
+      pos: newState.doc.nodeSize - 2
+    });
+  }
   decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
-      index: decorationState.length
+      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
     }), element);
     return element;
   }, {
@@ -87,7 +114,20 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
     var _Decoration$node2;
-    var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    var depth = 0;
+    var anchorName;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      if (node.isInline) {
+        return false;
+      }
+      if (IGNORE_NODES.includes(node.type.name)) {
+        return true; //skip over, don't consider it a valid depth
+      }
+      depth = newState.doc.resolve(pos).depth;
+      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(pos);
+    } else {
+      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    }
     var style;
     if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
@@ -96,10 +136,10 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     }
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+    }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
       type: 'node-decoration'
     }));
-    return false;
+    return depth < NESTED_DEPTH;
   });
   return decs;
 };
@@ -143,6 +183,7 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
   return decs;
 };
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
+  var unbind;
   var elementType = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24150') ? 'span' : 'div';
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement(elementType);
@@ -150,6 +191,14 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      unbind = (0, _bindEventListener.bind)(element, {
+        type: 'mouseover',
+        listener: function listener(e) {
+          e.stopPropagation();
+        }
+      });
+    }
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
       unmountDecorations('data-blocks-drag-handle-container');
     }
@@ -173,6 +222,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+        unbind && unbind();
+      }
       if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
         _reactDom.default.unmountComponentAtNode(node);
       }

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -29,7 +29,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       return false;
     }
     var pos = view.posAtDOM(rootElement, 0, 0);
-    var rootPos = view.state.doc.resolve(pos).start(1) - 1;
+    var rootPos;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      var $rootPos = view.state.doc.resolve(pos);
+      var depth = $rootPos.depth;
+      rootPos = depth ? $rootPos.before() : $rootPos.pos;
+    } else {
+      rootPos = view.state.doc.resolve(pos).start(1) - 1;
+    }
     var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       var _api$core, _api$blockControls2;

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

@@ -155,14 +155,22 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             var spec = _ref7.spec;
             return spec.id !== 'drag-handle';
           }).length;
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+            isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+          }
         }
         if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372')) {
           var dropTargetLen = decorations.find().filter(function (_ref8) {
             var spec = _ref8.spec;
             return spec.type === 'drop-target-decoration';
           }).length;
-          isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+            isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
+          }
         }
 
         // This is not targeted enough - it's trying to catch events like expand being set to breakout
@@ -252,7 +260,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
         var shouldMapDropTargets = false;
         if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372')) {
-          shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
+          shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
           if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
             // Remove drop target decoration when dragging stops
             var dropTargetDecs = decorations.find().filter(function (_ref12) {
@@ -273,13 +281,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             }
           }
 
-          // Map drop target decoration positions when the document changes
+          //Map drop target decoration positions when the document changes
           if (shouldMapDropTargets) {
             decorationState = decorationState.map(function (_ref13) {
-              var index = _ref13.index,
+              var id = _ref13.id,
                 pos = _ref13.pos;
               return {
-                index: index,
+                id: id,
                 pos: tr.mapping.map(pos)
               };
             });
@@ -310,10 +318,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           // Map drop target decoration positions when the document changes
           if (tr.docChanged && isDragging) {
             decorationState = decorationState.map(function (_ref15) {
-              var index = _ref15.index,
+              var id = _ref15.id,
                 pos = _ref15.pos;
               return {
-                index: index,
+                id: id,
                 pos: tr.mapping.map(pos)
               };
             });
@@ -400,7 +408,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             if (!nodeElement) {
               return false;
             }
-            var nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            var domPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
+            var nodeTarget = state.doc.nodeAt(domPos);
             isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
           }
           if (isSameNode) {

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _dropTargetMarginMap;
@@ -12,15 +12,17 @@ var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
-
+var DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_DEFAULT_GAP = 8;
+var DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_MAX_GAP = 12;
+var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
 var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {
-    return 12;
+    return DRAG_HANDLE_MAX_GAP;
   }
-  return 8;
+  return DRAG_HANDLE_DEFAULT_GAP;
 };
 var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
   switch (nodeType) {

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

@@ -68,6 +68,7 @@ var selectedStyles = (0, _react2.css)({
   color: "var(--ds-icon-selected, #0C66E4)"
 });
 var DragHandleInternal = function DragHandleInternal(_ref) {
+  var _api$core2, _api$analytics2, _api$core5, _api$core7;
   var view = _ref.view,
     api = _ref.api,
     getPos = _ref.getPos,
@@ -110,14 +111,15 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var _api$analytics;
       var tr = _ref2.tr;
-      if (start === undefined) {
+      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      if (startPos === undefined) {
         return tr;
       }
-      tr = (0, _utils.selectNode)(tr, start, nodeType);
+      tr = (0, _utils.selectNode)(tr, startPos, nodeType);
       tr.setMeta(_main.key, {
-        pos: start
+        pos: startPos
       });
-      var resolvedMovingNode = tr.doc.resolve(start);
+      var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
       (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -133,14 +135,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       return tr;
     });
     view.focus();
-  }, [start, api, view, dragHandleSelected, setDragHandleSelected, nodeType]);
+  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
 
   // handleMouseDown required along with onClick to ensure the correct selection
   // is set immediately when the drag handle is clicked. Otherwise browser native
   // drag and drop can take over and cause unpredictable behaviour.
   var handleMouseDown = (0, _react.useCallback)(function () {
-    var _api$core2;
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+    var _api$core3;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       if (start === undefined) {
         return tr;
@@ -158,44 +160,47 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
   // but ensures the preview is generated correctly.
   var handleMouseDownWrapperRemoved = (0, _react.useCallback)(function () {
-    var _api$core3;
-    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+    var _api$core4;
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
       var tr = _ref4.tr;
-      if (start === undefined) {
+      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      if (startPos === undefined) {
         return tr;
       }
-      var node = tr.doc.nodeAt(start);
+      var node = tr.doc.nodeAt(startPos);
       if (!node) {
         return tr;
       }
-      var $startPos = tr.doc.resolve(start + node.nodeSize);
+      var $startPos = tr.doc.resolve(startPos + node.nodeSize);
       var selection = new _state.TextSelection($startPos);
       tr.setSelection(selection);
       tr.setMeta(_main.key, {
-        pos: start
+        pos: startPos
       });
       return tr;
     });
-  }, [start, api]);
+  }, [api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, getPos, start]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
+
       if (!e.repeat && e.key === ' ') {
-        var _api$core4;
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+        var _api$core6;
+        var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
-          if (start === undefined) {
+          if (startPos === undefined) {
             return tr;
           }
-          var node = tr.doc.nodeAt(start);
+          var node = tr.doc.nodeAt(startPos);
           if (!node) {
             return tr;
           }
-          var $startPos = tr.doc.resolve(start + node.nodeSize);
+          var $startPos = tr.doc.resolve(startPos + node.nodeSize);
           var selection = new _state.TextSelection($startPos);
           tr.setSelection(selection);
           tr.setMeta(_main.key, {
-            pos: start
+            pos: startPos
           });
           return tr;
         });
@@ -207,7 +212,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         view.focus();
       }
     }
-  }, [start, api, view]);
+  }, [getPos, start, api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -236,12 +241,12 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5;
+        var _api$core8;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref8) {
-          var _api$blockControls, _api$analytics2;
+        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref8) {
+          var _api$blockControls, _api$analytics3;
           var tr = _ref8.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr: tr
@@ -249,7 +254,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.DRAGGED,
             actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,

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

@@ -77,7 +77,7 @@ var styleDropIndicator = (0, _react2.css)({
 });
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
-    index = _ref3.index,
+    id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode;
   var ref = (0, _react.useRef)(null);
@@ -113,7 +113,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
           return;
         }
         var _ref5 = decorationState.find(function (dec) {
-            return dec.index === index;
+            return dec.id === id;
           }) || {},
           pos = _ref5.pos;
         if (activeNode && pos !== undefined) {
@@ -123,7 +123,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
         }
       }
     });
-  }, [index, api]);
+  }, [id, api]);
   var topTargetMarginStyle = (0, _react.useMemo)(function () {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

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

@@ -8,6 +8,7 @@ exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _consts = require("./consts");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -40,11 +41,55 @@ var extendedHoverZone = (0, _react.css)({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });
+var extendedHoverZoneNested = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    display: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+      height: '100%',
+      cursor: 'default',
+      zIndex: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      cursor: 'default',
+      zIndex: -1
+    }
+  },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+    display: 'none'
+  }
+});
 var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
 var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
@@ -104,6 +149,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
 };
 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') && extendedHoverZone, 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(), (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
   });
 };

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

@@ -1,10 +1,18 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
+function transformNested(nodeCopy, destType) {
+  const firstChild = nodeCopy.content.firstChild;
+  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
+    return transformSliceNestedExpandToExpand(nodeCopy, firstChild.type.schema);
+  }
+  return nodeCopy;
+}
 
 /**
  *
@@ -99,10 +107,20 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   }
   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;
-  let nodeCopy = tr.doc.content.cut(start, end); // cut the content
-  tr.delete(start, end); // delete the content from the original position
-  const mappedTo = tr.mapping.map(to);
-  tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+  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 convertedNode = transformNested(nodeCopy, destType).content;
+    tr.delete(start, end); // delete the content from the original position
+    mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, convertedNode); // insert the content at the new position
+  } else {
+    const nodeCopy = tr.doc.content.cut(start, end); // cut the content
+    tr.delete(start, end); // delete the content from the original position
+    mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+  }
   tr = selectNode(tr, mappedTo, node.type.name);
   tr.setMeta(key, {
     nodeMoved: true