@atlaskit/editor-plugin-block-controls 7.7.0 → 7.7.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.7.2
+
+### Patch Changes
+
+- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
+  EDITOR-2791 bump adf-schema
+- Updated dependencies
+
+## 7.7.1
+
+### Patch Changes
+
+- [`27d4ba93d0702`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27d4ba93d0702) -
+  EDITOR-3201 disable layout drop targets for sync blocks
+
 ## 7.7.0
 
 ### Minor Changes

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

@@ -24,6 +24,7 @@ var PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [].concat(PARENT_WITH_END_DROP_TARG
  * 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 UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
 var isContainerNode = function isContainerNode(node) {
   if ((0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true)) {
     return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
@@ -212,7 +213,8 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
   }
   if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     var _isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
-    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+    var hasUnsupportedContent = UNSUPPORTED_LAYOUT_CONTENT.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true);
+    if (rootNodeWithPos.node.type.name === 'layoutSection' && !hasUnsupportedContent) {
       var layoutSectionNode = rootNodeWithPos.node;
       if (layoutSectionNode.childCount < (0, _consts.maxLayoutColumnSupported)() || _isSameLayout) {
         layoutSectionNode.descendants(function (childNode, childPos, parent, index) {

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

@@ -771,8 +771,11 @@ 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')) {
-              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$sh2, _api$blockControls$sh3;
+              var isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -795,8 +798,11 @@ 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')) {
-              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) {
+              var _api$blockControls$sh4, _api$blockControls$sh5;
+              var _isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.isMenuOpen) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh5 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh5 !== void 0 && _api$blockControls$sh5.isSelectedViaDragHandle && !_isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }

package/dist/cjs/pm-plugins/utils/inline-drop-target.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldAllowInlineDropTarget = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _checkMediaLayout = require("./check-media-layout");
 var _consts = require("./consts");
+var syncedBlockTypes = ['syncBlock', 'bodiedSyncBlock'];
 var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
   var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var activeNode = arguments.length > 3 ? arguments[3] : undefined;
@@ -20,6 +22,9 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
   if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
     return false;
   }
+  if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < (0, _consts.maxLayoutColumnSupported)() || isSameLayout;
   }

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

@@ -16,6 +16,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _selection2 = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -36,7 +37,7 @@ var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _selection2 = require("../pm-plugins/utils/selection");
+var _selection3 = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
@@ -425,8 +426,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         }
       } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        var alignAnchorHeadToSel = (0, _selection3.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection3.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
         tr.setSelection(selectionWithExpandedHead);
         api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
           tr: tr
@@ -517,6 +518,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
         return tr;
       });
+    } else if (e.key === 'Backspace' || e.key === 'Delete') {
+      e.preventDefault();
+      e.stopPropagation();
+      api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
+        var _api$blockControls5;
+        var tr = _ref5.tr;
+        (0, _selection2.deleteSelectedRange)(tr);
+        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+          closeMenu: true
+        })({
+          tr: tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
       return pressed;
     })) {
@@ -538,21 +553,21 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref5.nativeSetDragImage;
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
-          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-            var tr = _ref6.tr;
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
             }
             var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && newHandlePosCheck) {
-              var _api$blockControls5;
-              api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
                 tr: tr
               });
             } else if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -622,8 +637,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref7) {
-            var container = _ref7.container;
+          render: function render(_ref8) {
+            var container = _ref8.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -659,9 +674,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics2;
-          var tr = _ref8.tr;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics2;
+          var tr = _ref9.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -674,7 +689,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -1057,15 +1072,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref9) {
-  var view = _ref9.view,
-    api = _ref9.api,
-    formatMessage = _ref9.formatMessage,
-    getPos = _ref9.getPos,
-    anchorName = _ref9.anchorName,
-    nodeType = _ref9.nodeType,
-    handleOptions = _ref9.handleOptions,
-    anchorRectCache = _ref9.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    anchorRectCache = _ref0.anchorRectCache;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
   }, (0, _react2.jsx)(DragHandle, {

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

@@ -19,6 +19,7 @@ const PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [...PARENT_WITH_END_DROP_TARGET,
  * 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 UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
 const isContainerNode = node => {
   if (expValEquals('platform_synced_block', 'isEnabled', true)) {
     return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
@@ -195,7 +196,8 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
   }
   if (editorExperiment('advanced_layouts', true)) {
     const isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
-    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+    const hasUnsupportedContent = UNSUPPORTED_LAYOUT_CONTENT.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') && expValEquals('platform_synced_block', 'isEnabled', true);
+    if (rootNodeWithPos.node.type.name === 'layoutSection' && !hasUnsupportedContent) {
       const layoutSectionNode = rootNodeWithPos.node;
       if (layoutSectionNode.childCount < maxLayoutColumnSupported() || isSameLayout) {
         layoutSectionNode.descendants((childNode, childPos, parent, index) => {

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

@@ -775,8 +775,11 @@ 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')) {
-              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$sh2, _api$blockControls$sh3;
+              const isBlockMenuOpen = (api === null || api === void 0 ? void 0 : (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
                 api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -800,8 +803,11 @@ 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')) {
-              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) {
+              var _api$blockControls$sh4, _api$blockControls$sh5;
+              const isBlockMenuOpen = (api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.isMenuOpen) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh5 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh5 !== void 0 && _api$blockControls$sh5.isSelectedViaDragHandle && !isBlockMenuOpen) {
                 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/pm-plugins/utils/inline-drop-target.js

@@ -1,7 +1,9 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isWrappedMedia } from './check-media-layout';
 import { maxLayoutColumnSupported } from './consts';
+const syncedBlockTypes = ['syncBlock', 'bodiedSyncBlock'];
 export const shouldAllowInlineDropTarget = (isNested, node,
 /**
  * Is the active node in the same layout as the target node
@@ -16,6 +18,9 @@ isSameLayout = false, activeNode) => {
   if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
     return false;
   }
+  if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && expValEquals('platform_synced_block', 'isEnabled', true)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < maxLayoutColumnSupported() || isSameLayout;
   }

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

@@ -13,6 +13,7 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -494,6 +495,21 @@ export const DragHandle = ({
         });
         return tr;
       });
+    } else if (e.key === 'Backspace' || e.key === 'Delete') {
+      e.preventDefault();
+      e.stopPropagation();
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+        tr
+      }) => {
+        var _api$blockControls5;
+        deleteSelectedRange(tr);
+        api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu({
+          closeMenu: true
+        })({
+          tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
       // If not trying to press shortcut keys,
       // return focus to editor to resume editing from caret position
@@ -526,8 +542,8 @@ export const DragHandle = ({
             }
             const newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && newHandlePosCheck) {
-              var _api$blockControls5;
-              api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setMultiSelectPositions()({
                 tr
               });
             } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -642,7 +658,7 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
           tr
         }) => {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics2;
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics2;
           let nodeTypes, hasSelectedMultipleNodes;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
@@ -655,7 +671,7 @@ export const DragHandle = ({
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
           tr.setMeta('scrollIntoView', false);

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

@@ -19,6 +19,7 @@ var PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [].concat(PARENT_WITH_END_DROP_TARG
  * 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 UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
 var isContainerNode = function isContainerNode(node) {
   if (expValEquals('platform_synced_block', 'isEnabled', true)) {
     return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
@@ -207,7 +208,8 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
   }
   if (editorExperiment('advanced_layouts', true)) {
     var _isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
-    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+    var hasUnsupportedContent = UNSUPPORTED_LAYOUT_CONTENT.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') && expValEquals('platform_synced_block', 'isEnabled', true);
+    if (rootNodeWithPos.node.type.name === 'layoutSection' && !hasUnsupportedContent) {
       var layoutSectionNode = rootNodeWithPos.node;
       if (layoutSectionNode.childCount < maxLayoutColumnSupported() || _isSameLayout) {
         layoutSectionNode.descendants(function (childNode, childPos, parent, index) {

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

@@ -765,8 +765,11 @@ 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')) {
-              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$sh2, _api$blockControls$sh3;
+              var isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -789,8 +792,11 @@ 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')) {
-              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) {
+              var _api$blockControls$sh4, _api$blockControls$sh5;
+              var _isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.isMenuOpen) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh5 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh5 !== void 0 && _api$blockControls$sh5.isSelectedViaDragHandle && !_isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }

package/dist/esm/pm-plugins/utils/inline-drop-target.js

@@ -1,7 +1,9 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isWrappedMedia } from './check-media-layout';
 import { maxLayoutColumnSupported } from './consts';
+var syncedBlockTypes = ['syncBlock', 'bodiedSyncBlock'];
 export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
   var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var activeNode = arguments.length > 3 ? arguments[3] : undefined;
@@ -14,6 +16,9 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
   if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
     return false;
   }
+  if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && expValEquals('platform_synced_block', 'isEnabled', true)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < maxLayoutColumnSupported() || isSameLayout;
   }

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

@@ -18,6 +18,7 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
 import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -514,6 +515,20 @@ export var DragHandle = function DragHandle(_ref) {
         });
         return tr;
       });
+    } else if (e.key === 'Backspace' || e.key === 'Delete') {
+      e.preventDefault();
+      e.stopPropagation();
+      api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
+        var _api$blockControls5;
+        var tr = _ref5.tr;
+        deleteSelectedRange(tr);
+        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+          closeMenu: true
+        })({
+          tr: tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
       return pressed;
     })) {
@@ -535,21 +550,21 @@ export var DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref5.nativeSetDragImage;
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
-          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-            var tr = _ref6.tr;
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
             }
             var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && newHandlePosCheck) {
-              var _api$blockControls5;
-              api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
                 tr: tr
               });
             } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -619,8 +634,8 @@ export var DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref7) {
-            var container = _ref7.container;
+          render: function render(_ref8) {
+            var container = _ref8.container;
             var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -656,9 +671,9 @@ export var DragHandle = function DragHandle(_ref) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics2;
-          var tr = _ref8.tr;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics2;
+          var tr = _ref9.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -671,7 +686,7 @@ export var DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -1054,15 +1069,15 @@ export var DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref9) {
-  var view = _ref9.view,
-    api = _ref9.api,
-    formatMessage = _ref9.formatMessage,
-    getPos = _ref9.getPos,
-    anchorName = _ref9.anchorName,
-    nodeType = _ref9.nodeType,
-    handleOptions = _ref9.handleOptions,
-    anchorRectCache = _ref9.anchorRectCache;
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    anchorRectCache = _ref0.anchorRectCache;
   return jsx(VisibilityContainer, {
     api: api
   }, jsx(DragHandle, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.7.0",
+	"version": "7.7.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.3.2",
+		"@atlaskit/adf-schema": "^51.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.9.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/link": "^3.2.0",
@@ -65,7 +65,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.31.0",
+		"@atlaskit/editor-common": "^110.32.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"