@atlaskit/editor-plugin-block-controls 3.16.2 → 3.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.17.0
+
+### Minor Changes
+
+- [#166327](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166327)
+  [`56ba43df67f02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56ba43df67f02) -
+  ED-28157 implment reduced drop target logic
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.16.2
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -182,7 +182,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP, _key$getState$isSelec, _key$getState9;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$activeD, _key$getState4, _key$getState$isDragg, _key$getState5, _key$getState$isPMDra, _key$getState6, _key$getState$multiSe, _key$getState7, _key$getState$isShift, _key$getState8, _key$getState$lastDra, _key$getState9, _interactionTrackingP, _key$getState$isSelec, _key$getState0;
       if (!editorState) {
         return undefined;
       }
@@ -190,13 +190,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
         activeNode: (_key$getState$activeN = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-        multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+        activeDropTargetNode: (_key$getState$activeD = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
+        isDragging: (_key$getState$isDragg = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+        multiSelectDnD: (_key$getState$multiSe = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+        isShiftDown: (_key$getState$isShift = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
-        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
+        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
     },
     contentComponent: function contentComponent(_ref8) {

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveDropTargetDecorations = exports.canMoveNodeOrSliceToPos = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _decorationsCommon = require("./decorations-common");
+var _decorationsDropTarget = require("./decorations-drop-target");
+var _decorationsFindSurroundingNodes = require("./decorations-find-surrounding-nodes");
+var _activeAnchorTracker = require("./utils/active-anchor-tracker");
+var _validation = require("./utils/validation");
+/**
+ * List of parent node types that can have child nodes
+ */
+var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
+
+/**
+ * List of node types that does not allow drop targets at before or after the node.
+ */
+var NODE_WITH_NO_PARENT_POS = ['tableCell', 'tableHeader', 'layoutColumn'];
+var isContainerNode = function isContainerNode(node) {
+  return PARENT_WITH_END_DROP_TARGET.includes(node.type.name);
+};
+var canMoveNodeOrSliceToPos = exports.canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode) {
+  // For deciding to show drop targets or not when multiple nodes are selected
+  var selection = state.selection;
+  var _expandSelectionBound = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head),
+    expandedAnchor = _expandSelectionBound.$anchor,
+    expandedHead = _expandSelectionBound.$head;
+  var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  var $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
+  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
+  var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
+  if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
+    var selectionSlice = state.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, $toPos);
+    } else {
+      canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $toPos, node));
+    }
+    if (!canDropMultipleNodes || !canDropSingleNode) {
+      return false;
+    }
+  } else {
+    var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $toPos, node);
+    return canDrop;
+  }
+  return true;
+};
+var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) {
+  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  var decs = [];
+  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  var $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
+  var $toPos = state.doc.resolve(activeDropTargetNode.pos);
+  var _findSurroundingNodes = (0, _decorationsFindSurroundingNodes.findSurroundingNodes)(state, $toPos, activeDropTargetNode.nodeTypeName),
+    parent = _findSurroundingNodes.parent,
+    index = _findSurroundingNodes.index,
+    node = _findSurroundingNodes.node,
+    pos = _findSurroundingNodes.pos,
+    before = _findSurroundingNodes.before,
+    after = _findSurroundingNodes.after,
+    depth = _findSurroundingNodes.depth;
+
+  /**
+   * If the current node is a container node, we show the drop targets
+   * above the first child and below the last child.
+   */
+  if (isContainerNode(node)) {
+    // can move to before first child
+    if (node.firstChild && canMoveNodeOrSliceToPos(state, node.firstChild, node, 0, state.doc.resolve(pos + 1),
+    // +1 to get the position of the first child
+    activeNode)) {
+      decs.push((0, _decorationsDropTarget.createDropTargetDecoration)(pos + 1, {
+        api: api,
+        prevNode: undefined,
+        nextNode: node.firstChild,
+        parentNode: node,
+        formatMessage: formatMessage,
+        dropTargetStyle: 'default'
+      }, nodeViewPortalProviderAPI, 1));
+    }
+
+    // can move to after last child
+    if (node.lastChild && canMoveNodeOrSliceToPos(state, node.lastChild, node, node.childCount - 1, state.doc.resolve(pos + node.nodeSize - 1),
+    // -1 to get the position after last child
+    activeNode)) {
+      decs.push((0, _decorationsDropTarget.createDropTargetDecoration)(pos + node.nodeSize - 1, {
+        api: api,
+        prevNode: node.lastChild,
+        nextNode: undefined,
+        parentNode: node,
+        formatMessage: formatMessage,
+        dropTargetStyle: 'default'
+      }, nodeViewPortalProviderAPI, -1));
+    }
+  }
+
+  /**
+   * Create drop target before and after the current node
+   */
+  if (!NODE_WITH_NO_PARENT_POS.includes(node.type.name)) {
+    var isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, $toPos);
+    var isInSupportedContainer = ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
+    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (0, _utils.isEmptyParagraph)(node);
+    if (canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode)) {
+      decs.push((0, _decorationsDropTarget.createDropTargetDecoration)(pos, {
+        api: api,
+        prevNode: before || undefined,
+        nextNode: node,
+        parentNode: parent || undefined,
+        formatMessage: formatMessage,
+        dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
+      }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+    }
+    if (canMoveNodeOrSliceToPos(state, node, parent, index + 1, state.doc.resolve(pos + node.nodeSize), activeNode)) {
+      decs.push((0, _decorationsDropTarget.createDropTargetDecoration)(pos + node.nodeSize, {
+        api: api,
+        prevNode: node,
+        nextNode: after || undefined,
+        parentNode: parent || undefined,
+        formatMessage: formatMessage,
+        dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
+      }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+    }
+  }
+
+  // if the current node is not a top level node, we create one for advanced layout drop targets
+  if (depth > 1) {
+    var root = (0, _decorationsFindSurroundingNodes.findSurroundingNodes)(state, state.doc.resolve($toPos.before(2)));
+    decs.push((0, _decorationsDropTarget.createDropTargetDecoration)(root.pos, {
+      api: api,
+      prevNode: root.before || undefined,
+      nextNode: root.node,
+      parentNode: state.doc || undefined,
+      formatMessage: formatMessage,
+      dropTargetStyle: 'default'
+    }, nodeViewPortalProviderAPI, 0, undefined, false));
+    _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(root.node));
+  } else {
+    _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(node));
+  }
+  return decs;
+};

package/dist/cjs/pm-plugins/decorations-find-surrounding-nodes.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSurroundingNodes = void 0;
+var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
+var blockLeafNodes = ['blockCard', 'rule'];
+
+/**
+ * This function returns the surrounding nodes of a given resolved position in the editor.
+ * It provides the position, node, parent, before and after nodes, index, and depth.
+ * @param state current editor state
+ * @param $pos a resolved position in the editor state.
+ * @returns {SurroundingNodes} An object containing the surrounding nodes information.
+ * @example
+ * const surroundingNodes = findSurroundingNodes(state, $pos);
+ */
+var _findSurroundingNodes = exports.findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
+  var depth = $pos.depth;
+
+  // special cases like hr rule here
+  if (blockLeafNodes.includes(nodeType || '') || $pos.pos === 0) {
+    var _parent = $pos.node(depth);
+    var _node = $pos.nodeAfter;
+    var _index = $pos.index();
+    var _before = _index > 0 ? _parent.child(_index - 1) : null;
+    var _after = _index < _parent.childCount - 1 ? _parent.child(_index + 1) : null;
+    return {
+      pos: $pos.pos,
+      node: _node,
+      parent: _parent,
+      before: _before,
+      after: _after,
+      index: _index,
+      depth: 1
+    };
+  }
+  var isRootNode = depth === 1;
+  var node = $pos.node(depth);
+  var isIgnoredNode = IGNORE_NODES.includes(node.type.name);
+  if (isIgnoredNode && !isRootNode) {
+    // If the node is an ignored node, we return the surrounding nodes of its parent
+    return _findSurroundingNodes(state, state.doc.resolve($pos.before(depth - 1)));
+  }
+  var pos = $pos.before(depth);
+  var parent = isRootNode ? state.doc : $pos.node(depth - 1);
+  var index = $pos.index(depth - 1);
+  var before = index > 0 ? parent.child(index - 1) : null;
+  var after = index < parent.childCount - 1 ? parent.child(index + 1) : null;
+  return {
+    pos: pos,
+    node: node,
+    parent: parent,
+    before: before,
+    after: after,
+    index: index,
+    depth: depth
+  };
+};

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

@@ -14,16 +14,18 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
+var _decorationsDropTargetActive = require("./decorations-drop-target-active");
 var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
 var _handleMouseDown = require("./handle-mouse-down");
 var _handleMouseOver = require("./handle-mouse-over");
@@ -206,7 +208,7 @@ var destroyFn = function destroyFn(api, editorView) {
   return _combine.combine.apply(void 0, cleanupFn);
 };
 var initialState = {
-  decorations: _view2.DecorationSet.empty,
+  decorations: _view.DecorationSet.empty,
   activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
@@ -238,7 +240,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
   return nodeDecAtActivePos;
 };
 var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -307,7 +309,15 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var hasJustFinishedResizing = resizerMeta === false;
   multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
-    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
+    var _meta$isDragging;
+    if (((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+      // When dragging, we want to keep the multiSelectDnD object unless both document and selection
+      // has changed, in which case we want to reset it.
+      var shouldResetMultiSelectDnD = tr.docChanged && tr.selectionSet && tr.selection.empty;
+      multiSelectDnD = shouldResetMultiSelectDnD ? undefined : multiSelectDnD;
+    } else {
+      multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
+    }
   }
   var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   var latestActiveNode;
@@ -322,7 +332,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   }
 
   // Re-create node decorations
-  var isDecSetEmpty = decorations === _view2.DecorationSet.empty;
+  var isDecSetEmpty = decorations === _view.DecorationSet.empty;
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
   var isActiveNodeModified = false;
@@ -425,17 +435,26 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   }
 
   // Drop targets may be missing when the node count is being changed during a drag
-  var isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+  var isDropTargetsMissing = ((_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
 
   // Remove drop target decorations when dragging stops or they need to be redrawn
   if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
     var dropTargetDecs = (0, _decorationsDropTarget.findDropTargetDecs)(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
-
-  // Add drop targets when dragging starts or some are missing
+  var currentActiveDropTargetNode = isDragging ? currentState.activeDropTargetNode : undefined;
   if (api) {
-    if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+      if (meta !== null && meta !== void 0 && meta.activeDropTargetNode) {
+        currentActiveDropTargetNode = meta === null || meta === void 0 ? void 0 : meta.activeDropTargetNode;
+        var decos = (0, _decorationsDropTargetActive.getActiveDropTargetDecorations)(meta.activeDropTargetNode, newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode);
+        decorations = decorations.remove((0, _decorationsDropTarget.findDropTargetDecs)(decorations));
+        if (decos.length > 0) {
+          decorations = decorations.add(newState.doc, decos);
+        }
+      }
+    } else if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
+      // Add drop targets when dragging starts or some are missing
       var decs = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
@@ -471,7 +490,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   return {
     decorations: decorations,
     activeNode: newActiveNode,
-    isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
+    activeDropTargetNode: currentActiveDropTargetNode,
+    isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
     menuTriggerBy: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
@@ -570,8 +590,25 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
           return false;
         },
-        dragenter: function dragenter(_view, event) {
-          if (isAdvancedLayoutEnabled) {
+        dragenter: function dragenter(view, event) {
+          if (isHTMLElement(event.target) && (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+            var targetElement = event.target.closest('[data-prosemirror-node-name]');
+            if (targetElement) {
+              var _api$blockControls$sh;
+              var nodeTypeName = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('data-prosemirror-node-name');
+              var pos = view.posAtDOM(targetElement, -1);
+              var currentActiveDropTargetNode = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.activeDropTargetNode;
+              if ((currentActiveDropTargetNode === null || currentActiveDropTargetNode === void 0 ? void 0 : currentActiveDropTargetNode.pos) !== pos || (currentActiveDropTargetNode === null || currentActiveDropTargetNode === void 0 ? void 0 : currentActiveDropTargetNode.nodeTypeName) !== nodeTypeName) {
+                var activeDropTargetNode = {
+                  pos: pos,
+                  nodeTypeName: nodeTypeName
+                };
+                view.dispatch(view.state.tr.setMeta(key, {
+                  activeDropTargetNode: activeDropTargetNode
+                }));
+              }
+            }
+          } else if (isAdvancedLayoutEnabled) {
             if (isHTMLElement(event.target)) {
               var closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
               if (closestParentElement) {
@@ -645,8 +682,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
             }
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
-              var _api$blockControls$sh;
-              if (api !== null && api !== void 0 && (_api$blockControls$sh = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh !== void 0 && _api$blockControls$sh.isSelectedViaDragHandle) {
+              var _api$blockControls$sh2;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -682,8 +719,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(_isDragHandle));
             }
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
-              var _api$blockControls$sh2;
-              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
+              var _api$blockControls$sh3;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }

package/dist/es2019/blockControlsPlugin.js

@@ -173,7 +173,7 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP, _key$getState$isSelec, _key$getState9;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$activeD, _key$getState4, _key$getState$isDragg, _key$getState5, _key$getState$isPMDra, _key$getState6, _key$getState$multiSe, _key$getState7, _key$getState$isShift, _key$getState8, _key$getState$lastDra, _key$getState9, _interactionTrackingP, _key$getState$isSelec, _key$getState0;
     if (!editorState) {
       return undefined;
     }
@@ -181,13 +181,14 @@ export const blockControlsPlugin = ({
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
       menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
       activeNode: (_key$getState$activeN = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-      isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-      multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-      isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-      lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+      activeDropTargetNode: (_key$getState$activeD = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
+      isDragging: (_key$getState$isDragg = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+      isPMDragging: (_key$getState$isPMDra = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+      multiSelectDnD: (_key$getState$multiSe = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+      isShiftDown: (_key$getState$isShift = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+      lastDragCancelled: (_key$getState$lastDra = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
       isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
-      isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
+      isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
   },
   contentComponent({

package/dist/es2019/pm-plugins/decorations-drop-target-active.js

@@ -0,0 +1,151 @@
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNodeAnchor, unmountDecorations } from './decorations-common';
+import { createDropTargetDecoration } from './decorations-drop-target';
+import { findSurroundingNodes } from './decorations-find-surrounding-nodes';
+import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
+import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
+
+/**
+ * List of parent node types that can have child nodes
+ */
+const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
+
+/**
+ * List of node types that does not allow drop targets at before or after the node.
+ */
+const NODE_WITH_NO_PARENT_POS = ['tableCell', 'tableHeader', 'layoutColumn'];
+const isContainerNode = node => {
+  return PARENT_WITH_END_DROP_TARGET.includes(node.type.name);
+};
+export const canMoveNodeOrSliceToPos = (state, node, parent, index, $toPos, activeNode) => {
+  // For deciding to show drop targets or not when multiple nodes are selected
+  const selection = state.selection;
+  const {
+    $anchor: expandedAnchor,
+    $head: expandedHead
+  } = expandSelectionBounds(selection.$anchor, selection.$head);
+  const selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  const selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  const $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
+  const activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
+  const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    const selectionSlice = state.doc.slice(selectionFrom, selectionTo, false);
+    const selectionSliceChildCount = selectionSlice.content.childCount;
+    let canDropSingleNode = true;
+    let 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 = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $toPos);
+    } else {
+      canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node));
+    }
+    if (!canDropMultipleNodes || !canDropSingleNode) {
+      return false;
+    }
+  } else {
+    const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node);
+    return canDrop;
+  }
+  return true;
+};
+export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) => {
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  const decs = [];
+  const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  const $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
+  const $toPos = state.doc.resolve(activeDropTargetNode.pos);
+  const {
+    parent,
+    index,
+    node,
+    pos,
+    before,
+    after,
+    depth
+  } = findSurroundingNodes(state, $toPos, activeDropTargetNode.nodeTypeName);
+
+  /**
+   * If the current node is a container node, we show the drop targets
+   * above the first child and below the last child.
+   */
+  if (isContainerNode(node)) {
+    // can move to before first child
+    if (node.firstChild && canMoveNodeOrSliceToPos(state, node.firstChild, node, 0, state.doc.resolve(pos + 1),
+    // +1 to get the position of the first child
+    activeNode)) {
+      decs.push(createDropTargetDecoration(pos + 1, {
+        api,
+        prevNode: undefined,
+        nextNode: node.firstChild,
+        parentNode: node,
+        formatMessage,
+        dropTargetStyle: 'default'
+      }, nodeViewPortalProviderAPI, 1));
+    }
+
+    // can move to after last child
+    if (node.lastChild && canMoveNodeOrSliceToPos(state, node.lastChild, node, node.childCount - 1, state.doc.resolve(pos + node.nodeSize - 1),
+    // -1 to get the position after last child
+    activeNode)) {
+      decs.push(createDropTargetDecoration(pos + node.nodeSize - 1, {
+        api,
+        prevNode: node.lastChild,
+        nextNode: undefined,
+        parentNode: node,
+        formatMessage,
+        dropTargetStyle: 'default'
+      }, nodeViewPortalProviderAPI, -1));
+    }
+  }
+
+  /**
+   * Create drop target before and after the current node
+   */
+  if (!NODE_WITH_NO_PARENT_POS.includes(node.type.name)) {
+    const isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, $toPos);
+    const isInSupportedContainer = ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
+    const shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && isEmptyParagraph(node);
+    if (canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode)) {
+      decs.push(createDropTargetDecoration(pos, {
+        api,
+        prevNode: before || undefined,
+        nextNode: node,
+        parentNode: parent || undefined,
+        formatMessage,
+        dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
+      }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+    }
+    if (canMoveNodeOrSliceToPos(state, node, parent, index + 1, state.doc.resolve(pos + node.nodeSize), activeNode)) {
+      decs.push(createDropTargetDecoration(pos + node.nodeSize, {
+        api,
+        prevNode: node,
+        nextNode: after || undefined,
+        parentNode: parent || undefined,
+        formatMessage,
+        dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
+      }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+    }
+  }
+
+  // if the current node is not a top level node, we create one for advanced layout drop targets
+  if (depth > 1) {
+    const root = findSurroundingNodes(state, state.doc.resolve($toPos.before(2)));
+    decs.push(createDropTargetDecoration(root.pos, {
+      api,
+      prevNode: root.before || undefined,
+      nextNode: root.node,
+      parentNode: state.doc || undefined,
+      formatMessage,
+      dropTargetStyle: 'default'
+    }, nodeViewPortalProviderAPI, 0, undefined, false));
+    defaultActiveAnchorTracker.emit(getNodeAnchor(root.node));
+  } else {
+    defaultActiveAnchorTracker.emit(getNodeAnchor(node));
+  }
+  return decs;
+};