@atlaskit/editor-plugin-block-controls 1.11.2 → 1.12.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.12.1
+
+### Patch Changes
+
+- [#130485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130485)
+  [`5b6725b15e18e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5b6725b15e18e) -
+  Update node decorations when document changes for nested dnd scenarios
+- [#130711](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130711)
+  [`f878c5be1ed97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f878c5be1ed97) -
+  ED-24455 additional fix and tests
+- Updated dependencies
+
+## 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

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

@@ -71,6 +71,13 @@ var destroyFn = function destroyFn(api) {
   }));
   return _combine.combine.apply(void 0, cleanupFn);
 };
+function getDocChildrenCount(newState) {
+  var size = 0;
+  newState.doc.descendants(function (node) {
+    size += node.childCount;
+  });
+  return size;
+}
 var initialState = {
   decorations: _view.DecorationSet.empty,
   decorationState: [],
@@ -82,7 +89,8 @@ var initialState = {
   editorWidthRight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
-  isPMDragging: false
+  isPMDragging: false,
+  childCount: 0
 };
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
   return new _safePlugin.SafePlugin({
@@ -92,7 +100,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,
@@ -102,14 +110,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           editorWidthRight = currentState.editorWidthRight,
           isResizerResizing = currentState.isResizerResizing,
           isDragging = currentState.isDragging,
-          isPMDragging = currentState.isPMDragging;
+          isPMDragging = currentState.isPMDragging,
+          childCount = currentState.childCount;
         var activeNodeWithNewNodeType = null;
         var meta = tr.getMeta(key);
-
+        var newChildCount = tr.docChanged && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? getDocChildrenCount(newState) : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
+        var nodeCountChanged = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
         var shouldRemoveHandle = !tr.getMeta('isRemote');
 
         // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
@@ -129,20 +138,26 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           var spec = _ref6.spec;
           return spec.id === 'drag-handle';
         });
-        var decsLength = decorations.find().filter(function (_ref7) {
+        var decsLength = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? decorations.find().filter(function (_ref7) {
           var spec = _ref7.spec;
+          return spec.type === 'node-decoration';
+        }).length : decorations.find().filter(function (_ref8) {
+          var spec = _ref8.spec;
           return spec.id !== 'drag-handle';
         }).length;
-
-        //TODO: Fix this logic for nested scenarios
-        if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+        var newNodeDecs;
+        if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+          // naive solution while we work on performance optimised approach under ED-24503
+          newNodeDecs = (0, _decorations.nodeDecorations)(newState);
+          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
+        } else {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
         var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
           return spec.type === 'drop-target-decoration';
         }).length;
-
-        //TODO: Fix this logic for nested scenarios
+        var _getIntl = getIntl(),
+          formatMessage = _getIntl.formatMessage;
         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;
         }
@@ -158,17 +173,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
-        var _getIntl = getIntl(),
-          formatMessage = _getIntl.formatMessage;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
+          var _newNodeDecs;
           var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
-          var nodeDecs = (0, _decorations.nodeDecorations)(newState);
-          decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
+          newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : (0, _decorations.nodeDecorations)(newState);
+          decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
 
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
@@ -237,8 +251,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           // Add drop targets when node is being dragged
           // if the transaction is only for analytics and user is dragging, continue to draw drop targets
           if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-            var _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;
@@ -248,9 +261,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         //Map drop target decoration positions when the document changes
         if (shouldMapDropTargets) {
-          decorationState = decorationState.map(function (_ref8) {
-            var id = _ref8.id,
-              pos = _ref8.pos;
+          decorationState = decorationState.map(function (_ref9) {
+            var id = _ref9.id,
+              pos = _ref9.pos;
             return {
               id: id,
               pos: tr.mapping.map(pos)
@@ -262,9 +275,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref9) {
-          var spec = _ref9.spec;
+        var isEmptyDoc = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        var hasNodeDecoration = decorations.find().some(function (_ref10) {
+          var spec = _ref10.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {
@@ -280,7 +293,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,
@@ -288,7 +301,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
           isResizerResizing: isResizerResizing,
           isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
+          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
+          childCount: newChildCount
         };
       }
     },

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

@@ -68,11 +68,11 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
   }
   var top = getNodeMargins(nextNode).top;
   var bottom = getNodeMargins(prevNode).bottom;
-  var merginDiff = Math.round((top - bottom) / 2);
-  if (merginDiff === 0) {
+  var marginDiff = Math.round((top - bottom) / 2);
+  if (marginDiff === 0) {
     return null;
   }
-  var offset = Math.max(Math.min(merginDiff, 24), -24);
+  var offset = Math.max(Math.min(marginDiff, 24), -24);
   return marginLookupMap[offset];
 };
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {

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,83 @@
 "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.isLayoutColumn = 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 isLayoutColumn = exports.isLayoutColumn = function isLayoutColumn(nodeType) {
+  return nodeType === nodeType.schema.nodes.layoutColumn;
+};
+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) || isLayoutColumn(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

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

@@ -7,9 +7,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { canMoveToIndex } from '../utils/validation';
-const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem'];
-const IGNORE_NODES_AND_DESCENDANTS = ['listItem'];
+import { canMoveNodeToIndex } from '../utils/validation';
+const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
 const getNestedDepth = () => fg('platform_editor_elements_dnd_nested') ? 100 : 0;
 const createDropTargetDecoration = (pos, dropTargetDec) => {
@@ -24,16 +24,17 @@ const createDropTargetDecoration = (pos, dropTargetDec) => {
     side: -1
   });
 };
-export const dropTargetDecorations = (oldState, newState, api, formatMessage, activeNodeType) => {
+export const dropTargetDecorations = (newState, api, formatMessage, activeNode) => {
   const 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.
   const decorationState = [];
   let prevNode;
+  const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
     let depth = 0;
-    const nodeType = newState.doc.type.schema.nodes[activeNodeType];
     let endDec = null;
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
@@ -45,7 +46,7 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
         prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
-      const canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
+      const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
@@ -144,13 +145,14 @@ export const nodeDecorations = newState => {
   newState.doc.descendants((node, pos, parent, index) => {
     let depth = 0;
     let anchorName;
+    const shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
     if (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-${node.type.name}-${pos}`;
@@ -165,7 +167,7 @@ export const nodeDecorations = newState => {
     }, {
       type: 'node-decoration'
     }));
-    return depth < getNestedDepth();
+    return shouldDescend && depth < getNestedDepth();
   });
   return decs;
 };