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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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)
               };
             });

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/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

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

@@ -1,4 +1,5 @@
 import { createElement } from 'react';
+import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -6,6 +7,8 @@ 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';
+const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
+const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
 export const dropTargetDecorations = (oldState, newState, api) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -15,13 +18,28 @@ export const dropTargetDecorations = (oldState, newState, api) => {
   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) => {
-    decorationState.push({
-      index,
-      pos
-    });
+    let depth = 0;
+    if (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
+      });
+    } else {
+      decorationState.push({
+        id: index,
+        pos
+      });
+    }
     const dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
       api,
-      index,
+      id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       prevNode,
       nextNode: node
     });
@@ -36,7 +54,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
       side: -1
     }));
     prevNode = node;
-    return false;
+    return depth < NESTED_DEPTH;
   });
 
   /**
@@ -46,16 +64,25 @@ export const dropTargetDecorations = (oldState, newState, api) => {
    * node and not its size.
    *
    */
-  decorationState.push({
-    index: decorationState.length + 1,
-    pos: newState.doc.nodeSize - 2
-  });
+
+  const lastPos = newState.doc.content.size;
+  if (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(Decoration.widget(newState.doc.nodeSize - 2, () => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
-      index: decorationState.length
+      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
     }), element);
     return element;
   }, {
@@ -79,7 +106,20 @@ export const emptyParagraphNodeDecorations = () => {
 export const nodeDecorations = newState => {
   const decs = [];
   newState.doc.descendants((node, pos, _parent, index) => {
-    const anchorName = `--node-anchor-${node.type.name}-${index}`;
+    let depth = 0;
+    let anchorName;
+    if (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-${node.type.name}-${pos}`;
+    } else {
+      anchorName = `--node-anchor-${node.type.name}-${index}`;
+    }
     let style;
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`;
@@ -89,11 +129,12 @@ export const nodeDecorations = newState => {
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style,
       ['data-drag-handler-anchor-name']: anchorName,
-      ['data-drag-handler-node-type']: node.type.name
+      ['data-drag-handler-node-type']: node.type.name,
+      ['data-drag-handler-anchor-depth']: `${depth}`
     }, {
       type: 'node-decoration'
     }));
-    return false;
+    return depth < NESTED_DEPTH;
   });
   return decs;
 };
@@ -137,6 +178,7 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
   return decs;
 };
 export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, handleOptions) => {
+  let unbind;
   const elementType = fg('platform_editor_element_drag_and_drop_ed_24150') ? 'span' : 'div';
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement(elementType);
@@ -144,6 +186,14 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_elements_dnd_nested')) {
+      unbind = bind(element, {
+        type: 'mouseover',
+        listener: e => {
+          e.stopPropagation();
+        }
+      });
+    }
     if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
       unmountDecorations('data-blocks-drag-handle-container');
     }
@@ -167,6 +217,9 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
     side: -1,
     id: 'drag-handle',
     destroy: node => {
+      if (fg('platform_editor_elements_dnd_nested')) {
+        unbind && unbind();
+      }
       if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
         ReactDOM.unmountComponentAtNode(node);
       }

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

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