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

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

@@ -0,0 +1,54 @@
+const IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
+const 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);
+ */
+export const findSurroundingNodes = (state, $pos, nodeType) => {
+  const depth = $pos.depth;
+
+  // special cases like hr rule here
+  if (blockLeafNodes.includes(nodeType || '') || $pos.pos === 0) {
+    const parent = $pos.node(depth);
+    const node = $pos.nodeAfter;
+    const index = $pos.index();
+    const before = index > 0 ? parent.child(index - 1) : null;
+    const after = index < parent.childCount - 1 ? parent.child(index + 1) : null;
+    return {
+      pos: $pos.pos,
+      node: node,
+      parent,
+      before,
+      after,
+      index,
+      depth: 1
+    };
+  }
+  const isRootNode = depth === 1;
+  const node = $pos.node(depth);
+  const 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)));
+  }
+  const pos = $pos.before(depth);
+  const parent = isRootNode ? state.doc : $pos.node(depth - 1);
+  const index = $pos.index(depth - 1);
+  const before = index > 0 ? parent.child(index - 1) : null;
+  const after = index < parent.childCount - 1 ? parent.child(index + 1) : null;
+  return {
+    pos,
+    node,
+    parent,
+    before,
+    after,
+    index,
+    depth
+  };
+};

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

@@ -11,11 +11,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BLOCK_MENU_ENABLED } from '../ui/consts';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
+import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
@@ -234,7 +236,7 @@ const getDecorationAtPos = (decorations, pos, to) => {
   return nodeDecAtActivePos;
 };
 export const 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;
   let {
     activeNode,
     decorations,
@@ -308,7 +310,15 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   const 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) && 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.
+      const 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;
+    }
   }
   const maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   let latestActiveNode;
@@ -424,17 +434,26 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   }
 
   // Drop targets may be missing when the node count is being changed during a drag
-  const 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);
+  const 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) {
     const dropTargetDecs = findDropTargetDecs(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
-
-  // Add drop targets when dragging starts or some are missing
+  let currentActiveDropTargetNode = isDragging ? currentState.activeDropTargetNode : undefined;
   if (api) {
-    if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
+    if (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;
+        const decos = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode);
+        decorations = decorations.remove(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
       const decs = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
@@ -470,7 +489,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   return {
     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: editorExperiment('platform_editor_controls', 'variant1') ? (meta === null || meta === void 0 ? 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,
@@ -571,8 +591,25 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           }
           return false;
         },
-        dragenter(_view, event) {
-          if (isAdvancedLayoutEnabled) {
+        dragenter(view, event) {
+          if (isHTMLElement(event.target) && expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+            const targetElement = event.target.closest('[data-prosemirror-node-name]');
+            if (targetElement) {
+              var _api$blockControls$sh;
+              const nodeTypeName = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('data-prosemirror-node-name');
+              const pos = view.posAtDOM(targetElement, -1);
+              const currentActiveDropTargetNode = api === null || api === void 0 ? 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) {
+                const activeDropTargetNode = {
+                  pos,
+                  nodeTypeName
+                };
+                view.dispatch(view.state.tr.setMeta(key, {
+                  activeDropTargetNode
+                }));
+              }
+            }
+          } else if (isAdvancedLayoutEnabled) {
             if (isHTMLElement(event.target)) {
               const closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
               if (closestParentElement) {
@@ -651,8 +688,8 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
               api === null || api === void 0 ? 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') && editorExperiment('platform_editor_controls', 'variant1') && 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 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -690,8 +727,8 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
               api === null || api === void 0 ? 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') && editorExperiment('platform_editor_controls', 'variant1') && 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 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }

package/dist/esm/blockControlsPlugin.js

@@ -175,7 +175,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     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;
       }
@@ -183,13 +183,14 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         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: function contentComponent(_ref8) {

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

@@ -0,0 +1,149 @@
+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
+ */
+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);
+};
+export var 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 = 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 (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 = canMoveSliceToIndex(selectionSlice, selectionFrom, selectionTo, parent, index, $toPos);
+    } else {
+      canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node));
+    }
+    if (!canDropMultipleNodes || !canDropSingleNode) {
+      return false;
+    }
+  } else {
+    var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $toPos, node);
+    return canDrop;
+  }
+  return true;
+};
+export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) {
+  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 = 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(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(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 && 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 && isEmptyParagraph(node);
+    if (canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode)) {
+      decs.push(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(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 = findSurroundingNodes(state, state.doc.resolve($toPos.before(2)));
+    decs.push(createDropTargetDecoration(root.pos, {
+      api: api,
+      prevNode: root.before || undefined,
+      nextNode: root.node,
+      parentNode: state.doc || undefined,
+      formatMessage: formatMessage,
+      dropTargetStyle: 'default'
+    }, nodeViewPortalProviderAPI, 0, undefined, false));
+    defaultActiveAnchorTracker.emit(getNodeAnchor(root.node));
+  } else {
+    defaultActiveAnchorTracker.emit(getNodeAnchor(node));
+  }
+  return decs;
+};

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

@@ -0,0 +1,55 @@
+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 = 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
+  };
+};
+export { _findSurroundingNodes as findSurroundingNodes };

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

@@ -14,11 +14,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BLOCK_MENU_ENABLED } from '../ui/consts';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
+import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
@@ -231,7 +233,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
   return nodeDecAtActivePos;
 };
 var _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,
@@ -300,7 +302,15 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   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) && 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;
@@ -418,17 +428,26 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   }
 
   // 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 = 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 (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 = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode);
+        decorations = decorations.remove(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 = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
@@ -464,7 +483,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   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: 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,
@@ -564,8 +584,25 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           }
           return false;
         },
-        dragenter: function dragenter(_view, event) {
-          if (isAdvancedLayoutEnabled) {
+        dragenter: function dragenter(view, event) {
+          if (isHTMLElement(event.target) && 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) {
@@ -639,8 +676,8 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
               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') && editorExperiment('platform_editor_controls', 'variant1') && 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));
               }
             }
@@ -676,8 +713,8 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
               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') && editorExperiment('platform_editor_controls', 'variant1') && 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/types/blockControlsPluginType.d.ts

@@ -22,6 +22,10 @@ export type ActiveNode = {
     rootAnchorName?: string;
     rootNodeType?: string;
 };
+export type ActiveDropTargetNode = {
+    pos: number;
+    nodeTypeName: string | null;
+};
 export type MultiSelectDnD = {
     anchor: number;
     head: number;
@@ -39,6 +43,7 @@ export interface PluginState {
     editorWidthLeft: number;
     editorWidthRight: number;
     activeNode?: ActiveNode;
+    activeDropTargetNode?: ActiveDropTargetNode;
     isResizerResizing: boolean;
     /**
      * @private
@@ -59,6 +64,7 @@ export type BlockControlsSharedState = {
     isMenuOpen: boolean;
     menuTriggerBy?: string;
     activeNode?: ActiveNode;
+    activeDropTargetNode?: ActiveDropTargetNode;
     isDragging: boolean;
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;

package/dist/types/pm-plugins/decorations-drop-target-active.d.ts

@@ -0,0 +1,9 @@
+import { type IntlShape } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { ActiveDropTargetNode, ActiveNode, BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const canMoveNodeOrSliceToPos: (state: EditorState, node: PMNode, parent: PMNode, index: number, $toPos: ResolvedPos, activeNode?: ActiveNode) => boolean | null;
+export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode) => Decoration[];

package/dist/types/pm-plugins/decorations-find-surrounding-nodes.d.ts

@@ -0,0 +1,22 @@
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+type SurroundingNodes = {
+    pos: number;
+    node: PMNode;
+    depth: number;
+    index: number;
+    parent: PMNode;
+    before: PMNode | null;
+    after: PMNode | null;
+};
+/**
+ * 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);
+ */
+export declare const findSurroundingNodes: (state: EditorState, $pos: ResolvedPos, nodeType?: string | null) => SurroundingNodes;
+export {};

package/dist/types/pm-plugins/main.d.ts

@@ -5,7 +5,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
+import type { ActiveDropTargetNode, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
@@ -15,6 +15,7 @@ export declare const getDecorations: (state: EditorState) => DecorationSet | und
 export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;
     activeNode: any;
+    activeDropTargetNode: ActiveDropTargetNode | undefined;
     isDragging: any;
     isMenuOpen: boolean | undefined;
     menuTriggerBy: any;