@atlaskit/editor-plugin-block-controls 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.12.0
+
+### Minor Changes
+
+- [#130247](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130247)
+  [`c331860f119e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c331860f119e6) -
+  ED-24455 add suport for drag expand drop into table
+
+### Patch Changes
+
+- [#130406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130406)
+  [`487b48abdae42`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/487b48abdae42) -
+  ED-24554 Don't show handle for indented tasks
+- [#130260](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130260)
+  [`d338ce6e4ff6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d338ce6e4ff6e) -
+  Reduce drag handle gap for nested elements
+- Updated dependencies
+
+## 1.11.2
+
+### Patch Changes
+
+- [#129108](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129108)
+  [`c3bcb8b4001bd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3bcb8b4001bd) -
+  ED-24540 Clean up droptarget decorations after dropping in nested nodes to fix node splitting
+  issue
+- [#129411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129411)
+  [`2cfee5779f921`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cfee5779f921) -
+  ED-24456 improve drop target vertical position for nested nodes
+- Updated dependencies
+
 ## 1.11.1
 
 ### Patch Changes

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

@@ -18,11 +18,24 @@ 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) {
+/**
+ * This function transforms the slice to move
+ * @param nodeCopy The slice contains the node to be moved
+ * @param destType The type of the destiation node
+ * @returns transformed slice or null if unable to
+ */
+function transformSourceSlice(nodeCopy, destType) {
   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);
+  if (srcNode && schema) {
+    var _schema$nodes = schema.nodes,
+      doc = _schema$nodes.doc,
+      layoutColumn = _schema$nodes.layoutColumn;
+    if (srcNode.type === schema.nodes.nestedExpand && [doc, layoutColumn].includes(destType)) {
+      return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
+    } else if (srcNode.type === schema.nodes.expand && (0, _validation.isInsideTable)(destType)) {
+      return (0, _validation.transformSliceExpandToNestedExpand)(nodeCopy);
+    }
   }
   return nodeCopy;
 }
@@ -120,16 +133,19 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var end = start + size;
       var mappedTo;
       if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+        var _transformSourceSlice;
         var nodeCopy = tr.doc.slice(start, end, false); // cut the content
         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)) {
+        if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $from.node().child($from.index()))) {
+          return tr;
+        }
+        var convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
+        if (!convertedNode) {
           return tr;
         }
-        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

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

@@ -16,8 +16,8 @@ var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _validation = require("../utils/validation");
-var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem'];
-var IGNORE_NODES_AND_DESCENDANTS = ['listItem'];
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
 var getNestedDepth = function getNestedDepth() {
   return (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
@@ -34,16 +34,17 @@ var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTa
     side: -1
   });
 };
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   var decorationState = [];
   var prevNode;
+  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
-    var nodeType = newState.doc.type.schema.nodes[activeNodeType];
     var endDec = null;
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
@@ -55,7 +56,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
-      var canDrop = activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
+      var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
@@ -154,13 +155,14 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var _Decoration$node2;
     var depth = 0;
     var anchorName;
+    var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       // Doesn't descend into a node
-      if (node.isInline || IGNORE_NODES_AND_DESCENDANTS.includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '')) {
+      if (node.isInline) {
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
-        return true; //skip over, don't consider it a valid depth
+        return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;
       anchorName = "--node-anchor-".concat(node.type.name, "-").concat(pos);
@@ -172,7 +174,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     }, (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 depth < getNestedDepth();
+    return shouldDescend && depth < getNestedDepth();
   });
   return decs;
 };

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

@@ -92,7 +92,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _activeNodeWithNewNod, _meta$activeNode3, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _activeNodeWithNewNod, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         var activeNode = currentState.activeNode,
           decorations = currentState.decorations,
           isMenuOpen = currentState.isMenuOpen,
@@ -138,8 +138,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
-        var dropTargetLen = decorations.find().filter(function (_ref8) {
-          var spec = _ref8.spec;
+        var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
           return spec.type === 'drop-target-decoration';
         }).length;
 
@@ -164,8 +163,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, 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) {
-          var oldNodeDecs = decorations.find().filter(function (_ref9) {
-            var spec = _ref9.spec;
+          var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
@@ -202,8 +200,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
-          var _oldHandle = decorations.find().filter(function (_ref10) {
-            var spec = _ref10.spec;
+          var _oldHandle = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -213,8 +210,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when node type changes
         if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-          var _oldHandle2 = decorations.find().filter(function (_ref11) {
-            var spec = _ref11.spec;
+          var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle2);
@@ -222,21 +218,26 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.add(newState.doc, [_decs]);
         }
         var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-        var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+        var 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) {
-            var spec = _ref12.spec;
-            return spec.type === 'drop-target-decoration';
-          });
-          decorations = decorations.remove(dropTargetDecs);
+          if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+            var remainingDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type !== 'drop-target-decoration';
+            });
+            decorations = _view.DecorationSet.create(newState.doc, remainingDecs);
+          } else {
+            // Remove drop target decoration when dragging stops
+            var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type === 'drop-target-decoration';
+            });
+            decorations = decorations.remove(dropTargetDecs);
+          }
         }
         if (api) {
           // 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 _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),
+            var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : meta.activeNode),
               _decs2 = _dropTargetDecoration.decs,
               updatedDecorationState = _dropTargetDecoration.decorationState;
             decorationState = updatedDecorationState;
@@ -246,9 +247,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         //Map drop target decoration positions when the document changes
         if (shouldMapDropTargets) {
-          decorationState = decorationState.map(function (_ref13) {
-            var id = _ref13.id,
-              pos = _ref13.pos;
+          decorationState = decorationState.map(function (_ref8) {
+            var id = _ref8.id,
+              pos = _ref8.pos;
             return {
               id: id,
               pos: tr.mapping.map(pos)
@@ -261,8 +262,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref14) {
-          var spec = _ref14.spec;
+        var hasNodeDecoration = decorations.find().some(function (_ref9) {
+          var spec = _ref9.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {
@@ -278,7 +279,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode3 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode3 !== void 0 ? _meta$activeNode3 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : 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,

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_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;
+exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = 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;
@@ -13,12 +13,16 @@ 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_NARROW_GAP = exports.DRAG_HANDLE_NARROW_GAP = 4;
 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) {
+var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
+  if (parentNodeType && parentNodeType !== 'doc') {
+    return DRAG_HANDLE_NARROW_GAP;
+  }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }

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

@@ -253,6 +253,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
   }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
+    var parentNodeType;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      var pos = getPos();
+      var $pos = pos && view.state.doc.resolve(pos);
+      var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
+      var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+      parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
+    }
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -274,15 +282,15 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
-      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);
   var _useState5 = (0, _react.useState)({
       display: 'none'
     }),

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

@@ -23,6 +23,7 @@ var _consts = require("./consts");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
@@ -32,6 +33,12 @@ var styleDropTarget = (0, _react2.css)({
   display: 'block',
   zIndex: _constants.layers.card()
 });
+var styleDropIndicator = (0, _react2.css)({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
+});
 var nestedDropIndicatorStyle = (0, _react2.css)({
   position: 'relative'
 });
@@ -42,10 +49,9 @@ var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).
   return [key,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
   (0, _react2.css)({
-    marginTop: value
+    transform: "translateY(".concat(value, ")")
   })];
 }));
-var BASE_LINE_MARGIN = -8;
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
     return _consts.nodeMargins['default'];
@@ -56,26 +62,19 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
 };
-var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, nextNode) {
+var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
   if (!prevNode || !nextNode) {
     return null;
   }
-  var space = BASE_LINE_MARGIN - Math.round((getNodeMargins(prevNode).bottom - getNodeMargins(nextNode).top) / 2);
-  if (space < -24) {
-    return marginLookupMap[-24];
-  } else if (space > 24) {
-    return marginLookupMap[24];
-  } else {
-    return marginLookupMap[space];
+  var top = getNodeMargins(nextNode).top;
+  var bottom = getNodeMargins(prevNode).bottom;
+  var marginDiff = Math.round((top - bottom) / 2);
+  if (marginDiff === 0) {
+    return null;
   }
+  var offset = Math.max(Math.min(marginDiff, 24), -24);
+  return marginLookupMap[offset];
 };
-var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-var styleDropIndicator = (0, _react2.css)({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
-});
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
@@ -127,22 +126,22 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       }
     });
   }, [id, api, formatMessage]);
-  var topTargetMarginStyle = (0, _react.useMemo)(function () {
+  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
     /**
      * First child of a nested node.
-     * Disable the position adjustment for the nested node temporarily
+     * Disable the position adjustment temporarily
      */
-    if (parentNode === prevNode || isNestedDropTarget) {
+    if (parentNode === prevNode) {
       return null;
     }
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+    return getDropTargetOffsetStyle(prevNode, nextNode);
+  }, [prevNode, nextNode, parentNode]);
   var widthStyle = (0, _defineProperty2.default)({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: widthStyle,

package/dist/cjs/utils/drag-handle-positions.js

@@ -18,17 +18,17 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type)
     return "".concat(dom.offsetTop, "px");
   }
 };
-var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates, parentType) {
   if (!dom) {
     return 'auto';
   }
   if (!innerContainer) {
-    return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
+    return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
   }
 
   // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
   // We need to adjust the left offset position of the drag handle to account for the relative span
   var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
-  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
 };

package/dist/cjs/utils/validation.js

@@ -1,9 +1,80 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.canMoveToIndex = canMoveToIndex;
-function canMoveToIndex(destParent, indexIntoParent, srcType) {
-  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
+exports.canMoveNodeToIndex = canMoveNodeToIndex;
+exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isInsideTable = exports.isExpand = exports.isDoc = void 0;
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
+  var _nodeType$schema$node = nodeType.schema.nodes,
+    tableCell = _nodeType$schema$node.tableCell,
+    tableHeader = _nodeType$schema$node.tableHeader;
+  return [tableCell, tableHeader].indexOf(nodeType) >= 0;
+};
+var isDoc = exports.isDoc = function isDoc(nodeType) {
+  return nodeType === nodeType.schema.nodes.doc;
+};
+var isExpand = exports.isExpand = function isExpand(nodeType) {
+  return nodeType === nodeType.schema.nodes.expand;
+};
+var isNestedExpand = exports.isNestedExpand = function isNestedExpand(nodeType) {
+  return nodeType === nodeType.schema.nodes.nestedExpand;
+};
+
+/**
+ * This function converts an expand into a nested expand,
+ * although it may fail based on the expand's content.
+ * @param expandNode the node to transform.
+ * @returns an nested expand node
+ * @throws RangeError: Invalid content for node nestedExpand
+ */
+var transformExpandToNestedExpand = exports.transformExpandToNestedExpand = function transformExpandToNestedExpand(expandNode) {
+  var _expandNode$type$sche = expandNode.type.schema.nodes,
+    expand = _expandNode$type$sche.expand,
+    nestedExpand = _expandNode$type$sche.nestedExpand;
+  if (expandNode.type === expand) {
+    return nestedExpand.createChecked(expandNode.attrs, expandNode.content, expandNode.marks);
+  }
+  return null;
+};
+var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
+  var children = [];
+  try {
+    slice.content.forEach(function (node) {
+      if (isExpand(node.type)) {
+        var nestedExpandNode = transformExpandToNestedExpand(node);
+        if (nestedExpandNode) {
+          children.push(nestedExpandNode);
+        }
+      } else {
+        children.push(node);
+      }
+    });
+  } catch (e) {
+    return null;
+  }
+  return new _model.Slice(_model.Fragment.fromArray(children), slice.openStart, slice.openEnd);
+};
+var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = (0, _memoizeOne.default)(function (node) {
+  try {
+    return transformExpandToNestedExpand(node);
+  } catch (e) {
+    return null;
+  }
+});
+function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+  var srcNodeType = srcNode.type;
+  if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
+    if (memoizedTransformExpandToNestedExpand(srcNode)) {
+      srcNodeType = srcNodeType.schema.nodes.nestedExpand;
+    } else {
+      return false;
+    }
+  } else if (isDoc(destParent.type) && isNestedExpand(srcNodeType)) {
+    srcNodeType = srcNodeType.schema.nodes.expand;
+  }
+  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }

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

@@ -7,12 +7,27 @@ 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) {
+import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
+
+/**
+ * This function transforms the slice to move
+ * @param nodeCopy The slice contains the node to be moved
+ * @param destType The type of the destiation node
+ * @returns transformed slice or null if unable to
+ */
+function transformSourceSlice(nodeCopy, destType) {
   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);
+  if (srcNode && schema) {
+    const {
+      doc,
+      layoutColumn
+    } = schema.nodes;
+    if (srcNode.type === schema.nodes.nestedExpand && [doc, layoutColumn].includes(destType)) {
+      return transformSliceNestedExpandToExpand(nodeCopy, schema);
+    } else if (srcNode.type === schema.nodes.expand && isInsideTable(destType)) {
+      return transformSliceExpandToNestedExpand(nodeCopy);
+    }
   }
   return nodeCopy;
 }
@@ -112,16 +127,19 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const end = start + size;
   let mappedTo;
   if (fg('platform_editor_elements_dnd_nested')) {
+    var _transformSourceSlice;
     const nodeCopy = tr.doc.slice(start, end, false); // cut the content
     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)) {
+    if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
+      return tr;
+    }
+    const convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
+    if (!convertedNode) {
       return tr;
     }
-    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