@atlaskit/editor-plugin-block-controls 3.19.4 → 3.19.6

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

@@ -1,5 +1,6 @@
 const IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 const blockLeafNodes = ['blockCard', 'rule'];
+const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
  * This function returns the surrounding nodes of a given resolved position in the editor.
@@ -22,22 +23,30 @@ export const findSurroundingNodes = (state, $pos, nodeType) => {
     const after = index < parent.childCount - 1 ? parent.child(index + 1) : null;
     return {
       pos: $pos.pos,
-      node: node,
+      node,
       parent,
       before,
       after,
       index,
-      depth: 1
+      depth
     };
   }
   const isRootNode = depth === 1;
   const node = $pos.node(depth);
-  const isIgnoredNode = IGNORE_NODES.includes(node.type.name);
-  if (isIgnoredNode && !isRootNode) {
+
+  // go through the path to find the first node that is not allow child drop target
+  // From top to bottom, we check the node types at each depth
+  for (let i = 1; i < depth; i++) {
+    const nodeType = $pos.node(i).type.name;
+    if (DISABLE_CHILD_DROP_TARGET.includes(nodeType)) {
+      return findSurroundingNodes(state, state.doc.resolve($pos.before(i + 1)), nodeType);
+    }
+  }
+  if (IGNORE_NODES.includes(node.type.name) && !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 pos = depth > 0 ? $pos.before(depth) : 0;
   const parent = isRootNode ? state.doc : $pos.node(depth - 1);
   const index = $pos.index(depth - 1);
   const before = index > 0 ? parent.child(index - 1) : null;

package/dist/es2019/pm-plugins/handle-mouse-down.js

@@ -1,4 +1,3 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 export const handleMouseDown = api => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
@@ -13,7 +12,7 @@ export const handleMouseDown = api => (view, event) => {
       return false;
     }
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
-  } else if (fg('platform_editor_controls_patch_5')) {
+  } else {
     const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle]') !== null;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
   }

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

@@ -250,8 +250,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     menuTriggerBy,
     isPMDragging,
     isShiftDown,
-    lastDragCancelled,
-    isSelectedViaDragHandle
+    lastDragCancelled
   } = currentState;
   let isActiveNodeDeleted = false;
   const {
@@ -442,12 +441,22 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   let currentActiveDropTargetNode = isDragging ? currentState.activeDropTargetNode : undefined;
   if (api) {
     if (expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+      // If page is updated while dragging (likely by remote updates), we simply remove the drop targets
+      // and add them back when the use interacts with the editor again
+      if (isDropTargetsMissing) {
+        const oldDropTargetDecs = findDropTargetDecs(decorations);
+        decorations = decorations.remove(oldDropTargetDecs);
+      }
       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);
+        const oldDropTargetDecs = findDropTargetDecs(decorations);
+        const {
+          decsToAdd,
+          decsToRemove
+        } = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode);
+        decorations = decorations.remove(decsToRemove);
+        if (decsToAdd.length > 0) {
+          decorations = decorations.add(newState.doc, decsToAdd);
         }
       }
     } else if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
@@ -483,7 +492,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
     isMenuOpenNew = !isMenuOpen;
   }
-  const isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5') ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
+  const isSelectedViaDragHandle = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle);
   return {
     decorations,
     activeNode: newActiveNode,
@@ -500,7 +509,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     multiSelectDnD,
     isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
     lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
-    isSelectedViaDragHandle: isSelectedViaDragHandleNew
+    isSelectedViaDragHandle
   };
 };
 export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
@@ -656,7 +665,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           handleMouseOver(view, event, api);
           return false;
         },
-        mousedown: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? handleMouseDown(api) : undefined,
+        mousedown: editorExperiment('platform_editor_controls', 'variant1') ? handleMouseDown(api) : undefined,
         keydown(view, event) {
           if (isMultiSelectEnabled) {
             if (event.shiftKey && event.ctrlKey) {
@@ -681,11 +690,11 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
                 return true;
               }
             }
-            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
               const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
               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')) {
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
               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));
@@ -720,11 +729,11 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
                 return true;
               }
             }
-            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
               const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
               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')) {
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
               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/es2019/ui/drag-handle.js

@@ -593,7 +593,7 @@ export const DragHandle = ({
     const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
-    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
       getPos,
       view,
       anchorName
@@ -641,7 +641,7 @@ export const DragHandle = ({
     const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
-    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
       getPos,
       view,
       anchorName

package/dist/es2019/ui/quick-insert-button.js

@@ -118,11 +118,11 @@ export const TypeAheadControl = ({
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   const calculatePosition = useCallback(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${rootAnchorName} start)`) && CSS.supports('left', `anchor(${rootAnchorName} start)`);
-    const safeAnchorName = fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    const safeAnchorName = refreshAnchorName({
       getPos,
       view,
       anchorName: rootAnchorName
-    }) : rootAnchorName;
+    });
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
     const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';

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

@@ -54,14 +54,20 @@ export var canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, nod
   }
   return true;
 };
-export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) {
+export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode) {
   if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
     unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   }
-  var decs = [];
+  var decsToAdd = [];
+  var decsToRemove = existingDecs.filter(function (dec) {
+    return !!dec;
+  });
   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 existingDecsPos = decsToRemove.map(function (dec) {
+    return dec.from;
+  });
   var _findSurroundingNodes = findSurroundingNodes(state, $toPos, activeDropTargetNode.nodeTypeName),
     parent = _findSurroundingNodes.parent,
     index = _findSurroundingNodes.index,
@@ -76,32 +82,52 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
    * above the first child and below the last child.
    */
   if (isContainerNode(node)) {
+    var isEmptyContainer = node.childCount === 0 || node.childCount === 1 && isEmptyParagraph(node.firstChild);
+
     // 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));
+    var posBeforeFirstChild = pos + 1; // +1 to get the position of the first child
+    if (node.firstChild && canMoveNodeOrSliceToPos(state, node.firstChild, node, 0, state.doc.resolve(posBeforeFirstChild), activeNode)) {
+      if (existingDecsPos.includes(posBeforeFirstChild)) {
+        // if the decoration already exists, we don't add it again.
+        decsToRemove = decsToRemove.filter(function (dec) {
+          return dec.from !== posBeforeFirstChild;
+        });
+      } else {
+        decsToAdd.push(createDropTargetDecoration(posBeforeFirstChild, {
+          api: api,
+          prevNode: undefined,
+          nextNode: node.firstChild,
+          parentNode: node,
+          formatMessage: formatMessage,
+          dropTargetStyle: isEmptyContainer ? 'remainingHeight' : '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));
+    // if the node is empty, we don't show the drop target at the end of the node
+    if (!isEmptyContainer) {
+      var posAfterLastChild = pos + node.nodeSize - 1; // -1 to get the position after last child
+
+      if (node.lastChild && canMoveNodeOrSliceToPos(state, node.lastChild, node, node.childCount - 1, state.doc.resolve(posAfterLastChild),
+      // -1 to get the position after last child
+      activeNode)) {
+        if (existingDecsPos.includes(posAfterLastChild)) {
+          // if the decoration already exists, we don't add it again.
+          decsToRemove = decsToRemove.filter(function (dec) {
+            return dec.from !== posAfterLastChild;
+          });
+        } else {
+          decsToAdd.push(createDropTargetDecoration(posAfterLastChild, {
+            api: api,
+            prevNode: node.lastChild,
+            nextNode: undefined,
+            parentNode: node,
+            formatMessage: formatMessage,
+            dropTargetStyle: 'remainingHeight'
+          }, nodeViewPortalProviderAPI, -1));
+        }
+      }
     }
   }
 
@@ -113,24 +139,41 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
     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 (existingDecsPos.includes(pos)) {
+        // if the decoration already exists, we don't add it again.
+        decsToRemove = decsToRemove.filter(function (dec) {
+          return dec.from !== pos;
+        });
+      } else {
+        decsToAdd.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 node is a container node, we show the drop target after the node
+    var posAfterNode = pos + node.nodeSize;
+    if (canMoveNodeOrSliceToPos(state, node, parent, index + 1, state.doc.resolve(posAfterNode), activeNode)) {
+      if (existingDecsPos.includes(posAfterNode)) {
+        // if the decoration already exists, we don't add it again.
+        decsToRemove = decsToRemove.filter(function (dec) {
+          return dec.from !== posAfterNode;
+        });
+      } else {
+        decsToAdd.push(createDropTargetDecoration(posAfterNode, {
+          api: api,
+          prevNode: node,
+          nextNode: after || undefined,
+          parentNode: parent || undefined,
+          formatMessage: formatMessage,
+          dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
+        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+      }
     }
   }
   var rootNodeWithPos = {
@@ -141,14 +184,21 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
   // 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));
+    if (existingDecsPos.includes(root.pos)) {
+      // if the decoration already exists, we don't add it again.
+      decsToRemove = decsToRemove.filter(function (dec) {
+        return dec.from !== root.pos;
+      });
+    } else {
+      decsToAdd.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));
+    }
     rootNodeWithPos = {
       node: root.node,
       pos: root.pos
@@ -162,11 +212,19 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
         layoutSectionNode.descendants(function (childNode, childPos, parent, index) {
           if (childNode.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 // Not the first node
           ) {
-            decs.push(createLayoutDropTargetDecoration(rootNodeWithPos.pos + childPos + 1, {
-              api: api,
-              parent: parent,
-              formatMessage: formatMessage
-            }, nodeViewPortalProviderAPI, undefined));
+            var currentPos = rootNodeWithPos.pos + childPos + 1;
+            if (existingDecsPos.includes(currentPos)) {
+              // if the decoration already exists, we don't add it again.
+              decsToRemove = decsToRemove.filter(function (dec) {
+                return dec.from !== currentPos;
+              });
+            } else {
+              decsToAdd.push(createLayoutDropTargetDecoration(rootNodeWithPos.pos + childPos + 1, {
+                api: api,
+                parent: parent,
+                formatMessage: formatMessage
+              }, nodeViewPortalProviderAPI, undefined));
+            }
           }
           return false;
         });
@@ -174,5 +232,8 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
     }
   }
   defaultActiveAnchorTracker.emit(getNodeAnchor(rootNodeWithPos.node));
-  return decs;
+  return {
+    decsToAdd: decsToAdd,
+    decsToRemove: decsToRemove
+  };
 };

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

@@ -1,5 +1,6 @@
 var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 var blockLeafNodes = ['blockCard', 'rule'];
+var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
  * This function returns the surrounding nodes of a given resolved position in the editor.
@@ -27,17 +28,25 @@ var _findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType)
       before: _before,
       after: _after,
       index: _index,
-      depth: 1
+      depth: depth
     };
   }
   var isRootNode = depth === 1;
   var node = $pos.node(depth);
-  var isIgnoredNode = IGNORE_NODES.includes(node.type.name);
-  if (isIgnoredNode && !isRootNode) {
+
+  // go through the path to find the first node that is not allow child drop target
+  // From top to bottom, we check the node types at each depth
+  for (var i = 1; i < depth; i++) {
+    var _nodeType = $pos.node(i).type.name;
+    if (DISABLE_CHILD_DROP_TARGET.includes(_nodeType)) {
+      return _findSurroundingNodes(state, state.doc.resolve($pos.before(i + 1)), _nodeType);
+    }
+  }
+  if (IGNORE_NODES.includes(node.type.name) && !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 pos = depth > 0 ? $pos.before(depth) : 0;
   var parent = isRootNode ? state.doc : $pos.node(depth - 1);
   var index = $pos.index(depth - 1);
   var before = index > 0 ? parent.child(index - 1) : null;

package/dist/esm/pm-plugins/handle-mouse-down.js

@@ -1,4 +1,3 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 export var handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
     if (!(event.target instanceof HTMLElement)) {
@@ -14,7 +13,7 @@ export var handleMouseDown = function handleMouseDown(api) {
         return false;
       }
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
-    } else if (fg('platform_editor_controls_patch_5')) {
+    } else {
       var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle]') !== null;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
     }

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

@@ -244,8 +244,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown,
-    lastDragCancelled = currentState.lastDragCancelled,
-    isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
+    lastDragCancelled = currentState.lastDragCancelled;
   var isActiveNodeDeleted = false;
   var _getTrMetadata = getTrMetadata(tr),
     from = _getTrMetadata.from,
@@ -436,12 +435,21 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var currentActiveDropTargetNode = isDragging ? currentState.activeDropTargetNode : undefined;
   if (api) {
     if (expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+      // If page is updated while dragging (likely by remote updates), we simply remove the drop targets
+      // and add them back when the use interacts with the editor again
+      if (isDropTargetsMissing) {
+        var oldDropTargetDecs = findDropTargetDecs(decorations);
+        decorations = decorations.remove(oldDropTargetDecs);
+      }
       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);
+        var _oldDropTargetDecs = findDropTargetDecs(decorations);
+        var _getActiveDropTargetD = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, _oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode),
+          decsToAdd = _getActiveDropTargetD.decsToAdd,
+          decsToRemove = _getActiveDropTargetD.decsToRemove;
+        decorations = decorations.remove(decsToRemove);
+        if (decsToAdd.length > 0) {
+          decorations = decorations.add(newState.doc, decsToAdd);
         }
       }
     } else if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
@@ -477,7 +485,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
     isMenuOpenNew = !isMenuOpen;
   }
-  var isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5') ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
+  var isSelectedViaDragHandle = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle);
   return {
     decorations: decorations,
     activeNode: newActiveNode,
@@ -494,7 +502,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     multiSelectDnD: multiSelectDnD,
     isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
     lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
-    isSelectedViaDragHandle: isSelectedViaDragHandleNew
+    isSelectedViaDragHandle: isSelectedViaDragHandle
   };
 };
 export { _apply as apply };
@@ -645,7 +653,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           handleMouseOver(view, event, api);
           return false;
         },
-        mousedown: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? handleMouseDown(api) : undefined,
+        mousedown: editorExperiment('platform_editor_controls', 'variant1') ? handleMouseDown(api) : undefined,
         keydown: function keydown(view, event) {
           if (isMultiSelectEnabled) {
             if (event.shiftKey && event.ctrlKey) {
@@ -669,11 +677,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
                 return true;
               }
             }
-            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
               var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
               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')) {
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
               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));
@@ -706,11 +714,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
                 return true;
               }
             }
-            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1')) {
               var _isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
               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')) {
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1')) {
               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/esm/ui/drag-handle.js

@@ -606,7 +606,7 @@ export var DragHandle = function DragHandle(_ref) {
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
-    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
       getPos: getPos,
       view: view,
       anchorName: anchorName
@@ -652,7 +652,7 @@ export var DragHandle = function DragHandle(_ref) {
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
-    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
       getPos: getPos,
       view: view,
       anchorName: anchorName

package/dist/esm/ui/quick-insert-button.js

@@ -124,11 +124,11 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   var calculatePosition = useCallback(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
-    var safeAnchorName = fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+    var safeAnchorName = refreshAnchorName({
       getPos: getPos,
       view: view,
       anchorName: rootAnchorName
-    }) : rootAnchorName;
+    });
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';

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

@@ -6,4 +6,7 @@ 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[];
+export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode) => {
+    decsToAdd: Decoration[];
+    decsToRemove: Decoration[];
+};

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

@@ -6,4 +6,7 @@ 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[];
+export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode) => {
+    decsToAdd: Decoration[];
+    decsToRemove: Decoration[];
+};