@atlaskit/editor-plugin-block-controls 3.8.4 → 3.8.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.6
+
+### Patch Changes
+
+- [#137780](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137780)
+  [`6940941e679c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6940941e679c5) -
+  Move style decoration to own plugin
+- Updated dependencies
+
+## 3.8.5
+
+### Patch Changes
+
+- [#133802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133802)
+  [`f523489c8b68a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f523489c8b68a) -
+  [ux] ED-27217 Clean up experiment platform_editor_element_drag_and_drop_nested
+- Updated dependencies
+
 ## 3.8.4
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -13,6 +14,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
+var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _main = require("./pm-plugins/main");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
@@ -25,7 +27,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -33,6 +35,13 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
+      var controlsPlugins = [{
+        name: 'firstNodeDec',
+        plugin: function plugin() {
+          return (0, _firstNodeDecPlugin.firstNodeDecPlugin)();
+        }
+      }];
+      return [].concat(plugins, (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? controlsPlugins : []));
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),

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

@@ -121,7 +121,7 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
-    if (selection.$from.depth > 0 && (0, _experiments.editorExperiment)('nested-dnd', true)) {
+    if (selection.$from.depth > 0) {
       currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)(state);
     }
   }
@@ -135,12 +135,8 @@ var getFocusedHandle = function getFocusedHandle(state) {
 };
 var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
-    var isParentNodeOfTypeLayout;
-    var shouldEnableNestedDndA11y = (0, _experiments.editorExperiment)('nested-dnd', true);
     var selection = state.selection;
-    if (shouldEnableNestedDndA11y) {
-      isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
-    }
+    var isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     var isMultiSelectEnabled = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
     var expandedSelection = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head);
     var expandedAnchor = expandedSelection.$anchor.pos;
@@ -161,7 +157,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var moveToPos = -1;
       var nodeIndex = $currentNodePos.index();
       var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
-      if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
+      if (direction === _consts.DIRECTION.LEFT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core, _api$core2;
           var nodeBefore = $currentNodePos.nodeBefore;
@@ -205,7 +201,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
           moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
-      } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
+      } else if (direction === _consts.DIRECTION.RIGHT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core4, _api$core5;
           var endOfDoc = $currentNodePos.end();
@@ -257,7 +253,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         if (isLayoutColumnSelected) {
           moveToPos = $currentNodePos.start() - 1;
         } else {
-          var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
+          var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
           if (_nodeBefore) {
             moveToPos = currentNodePos - _nodeBefore.nodeSize;
           }
@@ -282,10 +278,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       if (moveToPos > -1 && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_2')) {
         var isDestDepthSameAsSource = $currentNodePos.depth === state.doc.resolve(moveToPos).depth;
         var isSourceLayoutColumn = nodeType === 'layoutColumn';
-        shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn;
+        shouldMoveNode = isDestDepthSameAsSource || isSourceLayoutColumn;
       } else {
         // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-        shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn';
+        shouldMoveNode = moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn';
       }
       var _expandSelectionBound = (0, _selection.expandSelectionBounds)($currentNodePos, selection.$to),
         $newAnchor = _expandSelectionBound.$anchor,
@@ -358,7 +354,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
       }
       var sliceFrom = start;
       var sliceTo;
-      var mappedTo;
       var sourceNodeTypes, hasSelectedMultipleNodes;
       var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
       if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
@@ -384,60 +379,53 @@ var moveNode = exports.moveNode = function moveNode(api) {
         nestedExpand = _tr$doc$type$schema$n.nestedExpand;
       var $to = tr.doc.resolve(to);
       var $handlePos = tr.doc.resolve(start);
-      if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-        var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
-        var destType = $to.node().type;
-        var destParent = $to.node($to.depth);
-        var sourceNode = $handlePos.nodeAfter;
-        var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
-        var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
-        var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
+      var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
+      var destType = $to.node().type;
+      var destParent = $to.node($to.depth);
+      var sourceNode = $handlePos.nodeAfter;
+      var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
+      var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
+      var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
-        //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
-        // Move a layout column to top level
-        // Move a layout column into a table cell, only moves the content into the cell
-        // Move a layout column into a panel, only moves the content into the panel
-        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
-          // need update after we support single column layout.
-          var layoutColumnContent = sourceNode.content;
-          var fragment;
-          if (dragLayoutColumnIntoTable) {
-            var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
-            fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
-            if (!fragment) {
-              return tr;
-            }
-          } else {
-            fragment = _model.Fragment.from(layoutColumnContent);
+      //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
+      // Move a layout column to top level
+      // Move a layout column into a table cell, only moves the content into the cell
+      // Move a layout column into a panel, only moves the content into the panel
+      if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
+        // need update after we support single column layout.
+        var layoutColumnContent = sourceNode.content;
+        var fragment;
+        if (dragLayoutColumnIntoTable) {
+          var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
+          fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
+          if (!fragment) {
+            return tr;
           }
-          (0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
-          var _mappedTo = tr.mapping.map(to);
-          tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
-          return tr;
-        }
-        if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
-          return tr;
-        }
-        var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
-        var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
-        if (!convertedNode) {
-          return tr;
-        }
-        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
-        mappedTo = tr.mapping.map(to);
-        var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
-        if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
-          // if only a single empty paragraph within container, replace it
-          tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
         } else {
-          // otherwise just insert the content at the new position
-          tr.insert(mappedTo, convertedNode);
+          fragment = _model.Fragment.from(layoutColumnContent);
         }
+        (0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
+        var _mappedTo = tr.mapping.map(to);
+        tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
+        return tr;
+      }
+      if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
+        return tr;
+      }
+      var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
+      var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
+      if (!convertedNode) {
+        return tr;
+      }
+      tr.delete(sliceFrom, sliceTo); // delete the content from the original position
+      var mappedTo = tr.mapping.map(to);
+      var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
+      if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
+        // if only a single empty paragraph within container, replace it
+        tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
       } else {
-        var _nodeCopy = tr.doc.content.cut(sliceFrom, sliceTo); // cut the content
-        tr.delete(sliceFrom, sliceTo); // delete the content from the original position
-        mappedTo = tr.mapping.map(to);
-        tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
+        // otherwise just insert the content at the new position
+        tr.insert(mappedTo, convertedNode);
       }
       var sliceSize = sliceTo - sliceFrom;
       tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
@@ -450,7 +438,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);
       var expandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($to, [expand, nestedExpand]);
-      if (expandAncestor && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
+      if (expandAncestor && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
         var wasExpandExpanded = _expand.expandedState.get(expandAncestor.node);
         var updatedExpandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($mappedTo, [expand, nestedExpand]);
         if (wasExpandExpanded !== undefined && updatedExpandAncestor) {

package/dist/cjs/editor-commands/show-drag-handle.js

@@ -5,80 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showDragHandleAtSelection = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _utils2 = require("@atlaskit/editor-tables/utils");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsAnchor = require("../pm-plugins/decorations-anchor");
 var _main = require("../pm-plugins/main");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
-var showDragHandleAtSelectionOld = function showDragHandleAtSelectionOld(api, shouldFocusParentNode) {
-  return function (state, _, view) {
-    var $from = state.selection.$from;
-    var shouldFocusParentNode;
-    if ($from.depth > 1 && (0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var _activeNode$handleOpt, _view$domAtPos;
-      var _ref = _main.key.getState(state) || {},
-        activeNode = _ref.activeNode;
-
-      // if the node is already focused, pressing the keymap second times should focus the parent node
-      shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
-      var parentPos = (0, _utils2.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _getNestedNodePosition.getNestedNodePosition)(state) + 1;
-      var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      if (parentElement) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
-        if (!anchorName || !nodeType) {
-          // for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
-          var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
-          if (closestParentElement) {
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
-          }
-        }
-        if (api && anchorName && nodeType) {
-          api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
-            isFocused: true
-          }));
-          return true;
-        }
-      }
-    }
-    var rootPos = $from.before(1);
-    var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
-    var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
-    var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
-    if (rootNode) {
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
-      if (api && _anchorName && _nodeType) {
-        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
-          isFocused: true
-        }));
-        return true;
-      }
-    }
-    return false;
-  };
-};
 var findParentPosForHandle = function findParentPosForHandle(state) {
-  var _activeNode$handleOpt2;
+  var _activeNode$handleOpt;
   var $from = state.selection.$from;
-  var _ref2 = _main.key.getState(state) || {},
-    activeNode = _ref2.activeNode;
+  var _ref = _main.key.getState(state) || {},
+    activeNode = _ref.activeNode;
 
   // if a node handle is already focused, return the parent pos of that node (with focused handle)
-  if (activeNode && (_activeNode$handleOpt2 = activeNode.handleOptions) !== null && _activeNode$handleOpt2 !== void 0 && _activeNode$handleOpt2.isFocused) {
+  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     var $activeNodePos = state.doc.resolve(activeNode.pos);
 
     // if the handle is at the top level already, do nothing
@@ -137,7 +74,7 @@ var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
   // return the closest decoration to the node
   return nodeDecorations[0];
 };
-var showDragHandleAtSelectionNew = function showDragHandleAtSelectionNew(api) {
+var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
   return function (state) {
     var decoration = findNextAnchorDecoration(state);
     if (api && decoration) {
@@ -148,9 +85,4 @@ var showDragHandleAtSelectionNew = function showDragHandleAtSelectionNew(api) {
     }
     return false;
   };
-};
-var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
-  return function (state, dispatch, view) {
-    return (0, _experiments.editorExperiment)('nested-dnd', true) ? showDragHandleAtSelectionNew(api)(state) : showDragHandleAtSelectionOld(api)(state, dispatch, view);
-  };
 };

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

@@ -88,19 +88,16 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var shouldDescend = shouldDescendIntoNode(node);
     var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
     var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
-    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      // Doesn't descend into a node
-      if (node.isInline) {
-        return false;
-      }
-      depth = newState.doc.resolve(pos).depth;
-      if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
-        return shouldDescend; //skip over, don't consider it a valid depth
-      }
+
+    // Doesn't descend into a node
+    if (node.isInline) {
+      return false;
+    }
+    depth = newState.doc.resolve(pos).depth;
+    if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
+      return shouldDescend; //skip over, don't consider it a valid depth
     }
-    var anchorStyles = pos === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {
@@ -109,7 +106,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       nodeType: node.type.name,
       nodeTypeWithLevel: nodeTypeWithLevel
     }));
-    return shouldDescend && depth < (0, _decorationsCommon.getNestedDepth)();
+    return shouldDescend && depth < _decorationsCommon.NESTED_DEPTH;
   });
   return decs;
 };

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

@@ -4,19 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
+exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAnchor = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = exports.NESTED_DEPTH = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
 var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
-var getNestedDepth = exports.getNestedDepth = function getNestedDepth() {
-  return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
-};
+var NESTED_DEPTH = exports.NESTED_DEPTH = 100;
 var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
   var handleId = ObjHash.getForNode(node);
   return "--node-anchor-".concat(node.type.name, "-").concat(handleId);

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

@@ -48,25 +48,23 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
         return undefined;
       }
     };
-    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var newPos = getPos();
-      if (typeof newPos === 'number') {
-        var $pos = view.state.doc.resolve(newPos);
-        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
-      }
-      /*
-       * We disable mouseover event to fix flickering issue on hover
-       * However, the tooltip for nested drag handle is no long working.
-       */
-      if (newPos === undefined || !isTopLevelNode) {
-        // This will also hide the tooltip.
-        unbind = (0, _bindEventListener.bind)(element, {
-          type: 'mouseover',
-          listener: function listener(e) {
-            e.stopPropagation();
-          }
-        });
-      }
+    var newPos = getPos();
+    if (typeof newPos === 'number') {
+      var $pos = view.state.doc.resolve(newPos);
+      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+    }
+    /*
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
+    if (newPos === undefined || !isTopLevelNode) {
+      // This will also hide the tooltip.
+      unbind = (0, _bindEventListener.bind)(element, {
+        type: 'mouseover',
+        listener: function listener(e) {
+          e.stopPropagation();
+        }
+      });
     }
 
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
@@ -124,9 +122,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     destroy: function destroy() {
-      if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-        unbind && unbind();
-      }
+      return unbind && unbind();
     }
   });
 };

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

@@ -180,62 +180,60 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     var endPos;
     var $pos = newState.doc.resolve(pos);
     var isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, $pos);
-    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      depth = $pos.depth;
-      if (isAdvancedLayoutsPreRelease2) {
-        if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
-          return false;
-        }
-        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 && (
-        // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts2.maxLayoutColumnSupported)() || isSameLayout)) {
-          // Add drop target for layout columns
-          decs.push(createLayoutDropTargetDecoration(pos, {
-            api: api,
-            parent: parent,
-            formatMessage: formatMessage
-          }, nodeViewPortalProviderAPI, anchorRectCache));
-        }
-      }
-      if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
-        pushNodeStack(node, depth);
+    depth = $pos.depth;
+    if (isAdvancedLayoutsPreRelease2) {
+      if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
         return false;
       }
-      if (IGNORE_NODES.includes(node.type.name)) {
-        pushNodeStack(node, depth);
-        return shouldDescend(node); //skip over, don't consider it a valid depth
+      if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 && (
+      // Not the first node
+      (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts2.maxLayoutColumnSupported)() || isSameLayout)) {
+        // Add drop target for layout columns
+        decs.push(createLayoutDropTargetDecoration(pos, {
+          api: api,
+          parent: parent,
+          formatMessage: formatMessage
+        }, nodeViewPortalProviderAPI, anchorRectCache));
       }
+    }
+    if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
+      pushNodeStack(node, depth);
+      return false;
+    }
+    if (IGNORE_NODES.includes(node.type.name)) {
+      pushNodeStack(node, depth);
+      return shouldDescend(node); //skip over, don't consider it a valid depth
+    }
 
-      // When multi select is on, validate all the nodes in the selection instead of just the handle node
-      if (isMultiSelect) {
-        var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
-        var selectionSliceChildCount = selectionSlice.content.childCount;
-        var canDropSingleNode = true;
-        var canDropMultipleNodes = true;
+    // When multi select is on, validate all the nodes in the selection instead of just the handle node
+    if (isMultiSelect) {
+      var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
+      var selectionSliceChildCount = selectionSlice.content.childCount;
+      var canDropSingleNode = true;
+      var canDropMultipleNodes = true;
 
-        // when there is only one node in the slice, use the same logic as when multi select is not on
-        if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = (0, _validation.canMoveSliceToIndex)(selectionSlice, selectionFrom, selectionTo, parent, index, $pos);
-        } else {
-          canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node));
-        }
-        if (!canDropMultipleNodes || !canDropSingleNode) {
-          pushNodeStack(node, depth);
-          return false; //not valid pos, so nested not valid either
-        }
+      // when there is only one node in the slice, use the same logic as when multi select is not on
+      if (selectionSliceChildCount > 1 && handleInsideSelection) {
+        canDropMultipleNodes = (0, _validation.canMoveSliceToIndex)(selectionSlice, selectionFrom, selectionTo, parent, index, $pos);
       } else {
-        var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node);
-
-        //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
-        if (!canDrop) {
-          pushNodeStack(node, depth);
-          return false; //not valid pos, so nested not valid either
-        }
+        canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node));
+      }
+      if (!canDropMultipleNodes || !canDropSingleNode) {
+        pushNodeStack(node, depth);
+        return false; //not valid pos, so nested not valid either
       }
-      if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
-        endPos = pos + node.nodeSize;
+    } else {
+      var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node);
+
+      //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
+      if (!canDrop) {
+        pushNodeStack(node, depth);
+        return false; //not valid pos, so nested not valid either
       }
     }
+    if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+      endPos = pos + node.nodeSize;
+    }
     var previousNode = popNodeStack(depth); // created scoped variable
 
     // only table and layout need to render full height drop target
@@ -259,7 +257,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       }, nodeViewPortalProviderAPI, -1, anchorRectCache));
     }
     pushNodeStack(node, depth);
-    return depth < (0, _decorationsCommon.getNestedDepth)() && shouldDescend(node);
+    return depth < _decorationsCommon.NESTED_DEPTH && shouldDescend(node);
   });
   if (docTo === POS_END_OF_DOC) {
     decs.push(createDropTargetDecoration(POS_END_OF_DOC, {

package/dist/cjs/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firstNodeDecPluginKey = exports.firstNodeDecPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var firstNodeDecPluginKey = exports.firstNodeDecPluginKey = new _state.PluginKey('firstNodeDec');
+var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
+  ;
+  var firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return _view.DecorationSet.empty;
+  }
+  return _view.DecorationSet.create(state.doc, [_view.Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+var firstNodeDecPlugin = exports.firstNodeDecPlugin = function firstNodeDecPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: firstNodeDecPluginKey,
+    state: {
+      init: function init(_, state) {
+        return createFirstNodeDecSet(state);
+      },
+      apply: function apply(tr, currentState, _, newState) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep;
+        });
+        // Reapply decorations if there are any steps that modify the document
+        if (isDocChanged) {
+          return createFirstNodeDecSet(newState);
+        }
+        return currentState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return firstNodeDecPluginKey.getState(state);
+      }
+    }
+  });
+};