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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

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,
@@ -237,8 +237,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;
@@ -280,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

@@ -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,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

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;
 };

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

@@ -86,7 +86,7 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       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;
         let {
           activeNode,
           decorations,
@@ -219,11 +219,10 @@ export const createPlugin = (api, getIntl) => {
           // Add drop targets when node is being dragged
           // if the transaction is only for analytics and user is dragging, continue to draw drop targets
           if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
-            var _meta$activeNode2;
             const {
               decs,
               decorationState: updatedDecorationState
-            } = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType);
+            } = dropTargetDecorations(newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : meta.activeNode);
             decorationState = updatedDecorationState;
             decorations = decorations.add(newState.doc, decs);
           }
@@ -263,7 +262,7 @@ export const createPlugin = (api, getIntl) => {
         return {
           decorations,
           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/es2019/ui/consts.js

@@ -4,12 +4,16 @@ export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
 export const DRAG_HANDLE_DEFAULT_GAP = 8;
+export const DRAG_HANDLE_NARROW_GAP = 4;
 export const DRAG_HANDLE_MAX_GAP = 12;
 export const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
 export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
-export const dragHandleGap = nodeType => {
+export const dragHandleGap = (nodeType, parentNodeType) => {
+  if (parentNodeType && parentNodeType !== 'doc') {
+    return DRAG_HANDLE_NARROW_GAP;
+  }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }

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

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

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

@@ -53,11 +53,11 @@ const getDropTargetOffsetStyle = (prevNode, nextNode) => {
   }
   const top = getNodeMargins(nextNode).top;
   const bottom = getNodeMargins(prevNode).bottom;
-  const merginDiff = Math.round((top - bottom) / 2);
-  if (merginDiff === 0) {
+  const marginDiff = Math.round((top - bottom) / 2);
+  if (marginDiff === 0) {
     return null;
   }
-  const offset = Math.max(Math.min(merginDiff, 24), -24);
+  const offset = Math.max(Math.min(marginDiff, 24), -24);
   return marginLookupMap[offset];
 };
 export const DropTarget = ({

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

@@ -12,17 +12,17 @@ export const getTopPosition = (dom, type) => {
     return `${dom.offsetTop}px`;
   }
 };
-export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates) => {
+export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates, parentType) => {
   if (!dom) {
     return 'auto';
   }
   if (!innerContainer) {
-    return `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+    return `${dom.offsetLeft - dragHandleGap(type, parentType) - 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
   const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
-  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px`;
 };