@atlaskit/editor-plugin-block-controls 8.11.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.0.0
+
+### Patch Changes
+
+- [`ae28f2e6bb741`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae28f2e6bb741) -
+  Editor-4477: Removed the heading with alignment patch in the newGetSelection
+- [`ae28f2e6bb741`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae28f2e6bb741) -
+  Editor-5020-fix-inline-drop-hints-not-visible-in-sync-block
+- Updated dependencies
+
+## 8.12.0
+
+### Minor Changes
+
+- [`c78234abd2778`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c78234abd2778) -
+  EDITOR-5792 fix drop target for sync blocks
+
 ## 8.11.0
 
 ### Minor Changes

package/dist/cjs/editor-commands/move-to-layout.js

@@ -134,16 +134,21 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
   var _ref3 = tr.doc.type.schema.nodes || {},
     layoutSection = _ref3.layoutSection,
     layoutColumn = _ref3.layoutColumn,
-    doc = _ref3.doc;
+    doc = _ref3.doc,
+    bodiedSyncBlock = _ref3.bodiedSyncBlock;
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
     return;
   }
   var $to = tr.doc.resolve(to);
+  var allowedParentTypes = [doc, layoutSection];
+  if (bodiedSyncBlock && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_synced_block_patch_6', 'isEnabled', true)) {
+    allowedParentTypes.push(bodiedSyncBlock);
+  }
 
   // drop at invalid position, not top level, or not a layout column
-  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+  if (!$to.nodeAfter || !allowedParentTypes.includes($to.parent.type)) {
     return;
   }
   var $from = tr.doc.resolve(from);

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findSurroundingNodes = void 0;
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 var blockLeafNodes = ['blockCard', 'rule', 'extension'];
+var blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -19,7 +21,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 var _findSurroundingNodes = exports.findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
   var depth = $pos.depth;
-  var blockLeafNodeList = blockLeafNodes;
+  var blockLeafNodeList = (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
+    exposure: true
+  }) ? blockLeafNodeNext : blockLeafNodes;
 
   // special cases like hr rule here
   if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {

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

@@ -5,6 +5,7 @@ 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");
@@ -12,7 +13,13 @@ 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;
+  var parentNode = arguments.length > 4 ? arguments[4] : undefined;
+  var isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
   if ((0, _experiments.editorExperiment)('advanced_layouts', false) || isNested) {
+    // If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
+    if (isInsideBodiedSyncBlock && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_synced_block_patch_6', 'isEnabled', true)) {
+      return true;
+    }
     return false;
   }
   if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
@@ -21,7 +28,7 @@ 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, _experiments.editorExperiment)('platform_synced_block', true)) {
+  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, _experiments.editorExperiment)('platform_synced_block', true) && !(0, _expValEquals.expValEquals)('platform_synced_block_patch_6', 'isEnabled', true)) {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {

package/dist/cjs/ui/drop-target.js

@@ -70,6 +70,15 @@ var nestedDropZoneStyle = (0, _react2.css)({
   width: 'unset'
 });
 var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+var enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
+var getEnableDropZone = function getEnableDropZone() {
+  if ((0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
+    exposure: true
+  })) {
+    return enableDropZoneNext;
+  }
+  return enableDropZone;
+};
 
 // This z index is used in container like layout
 var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
@@ -104,12 +113,13 @@ var HoverZone = function HoverZone(_ref) {
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 2),
     _isActive = _useActiveAnchorTrack2[0],
     setActiveAnchor = _useActiveAnchorTrack2[1];
+  var isInsideBodiedSyncBlock = parent && parent.type.name === 'bodiedSyncBlock' && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_synced_block_patch_6', 'isEnabled', true);
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({
         element: ref.current,
         onDragEnter: function onDragEnter() {
-          if (!isNestedDropTarget && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+          if ((!isNestedDropTarget || isInsideBodiedSyncBlock) && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
             setActiveAnchor();
           }
           _onDragEnter();
@@ -118,11 +128,11 @@ var HoverZone = function HoverZone(_ref) {
         onDrop: onDrop
       });
     }
-  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
+  }, [isNestedDropTarget, isInsideBodiedSyncBlock, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
-    var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
+    var heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
     var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
     return (0, _react2.css)({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -147,7 +157,7 @@ var HoverZone = function HoverZone(_ref) {
       var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
       if (_anchorName) {
-        var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        var enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
         if ((0, _anchorUtils.isAnchorSupported)()) {
           top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
         } else if (anchorRectCache) {
@@ -229,6 +239,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
   var dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     width: isNestedDropTarget ? 'unset' : '100%'
   }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat(lineLength || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, _constants.layers.navigation());
+  var isShowInlineDropTarget = (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode, parentNode);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
@@ -273,7 +284,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     api: api
-  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
+  }), isShowInlineDropTarget && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {

package/dist/es2019/editor-commands/move-to-layout.js

@@ -130,7 +130,8 @@ const canMoveToLayout = (api, from, to, tr, moveNodeAtCursorPos) => {
   const {
     layoutSection,
     layoutColumn,
-    doc
+    doc,
+    bodiedSyncBlock
   } = tr.doc.type.schema.nodes || {};
 
   // layout plugin does not exist
@@ -138,9 +139,13 @@ const canMoveToLayout = (api, from, to, tr, moveNodeAtCursorPos) => {
     return;
   }
   const $to = tr.doc.resolve(to);
+  const allowedParentTypes = [doc, layoutSection];
+  if (bodiedSyncBlock && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
+    allowedParentTypes.push(bodiedSyncBlock);
+  }
 
   // drop at invalid position, not top level, or not a layout column
-  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+  if (!$to.nodeAfter || !allowedParentTypes.includes($to.parent.type)) {
     return;
   }
   const $from = tr.doc.resolve(from);

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

@@ -1,5 +1,7 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 const blockLeafNodes = ['blockCard', 'rule', 'extension'];
+const blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -13,7 +15,9 @@ const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 export const findSurroundingNodes = (state, $pos, nodeType) => {
   const depth = $pos.depth;
-  const blockLeafNodeList = blockLeafNodes;
+  const blockLeafNodeList = editorExperiment('platform_synced_block_patch_6', true, {
+    exposure: true
+  }) ? blockLeafNodeNext : blockLeafNodes;
 
   // special cases like hr rule here
   if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {

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

@@ -1,4 +1,5 @@
 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';
@@ -7,8 +8,13 @@ export const shouldAllowInlineDropTarget = (isNested, node,
 /**
  * Is the active node in the same layout as the target node
  */
-isSameLayout = false, activeNode) => {
+isSameLayout = false, activeNode, parentNode) => {
+  const isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
   if (editorExperiment('advanced_layouts', false) || isNested) {
+    // If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
+    if (isInsideBodiedSyncBlock && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
+      return true;
+    }
     return false;
   }
   if (isWrappedMedia(node)) {
@@ -17,7 +23,7 @@ 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) || '')) && editorExperiment('platform_synced_block', true)) {
+  if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true) && !expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {

package/dist/es2019/ui/drop-target.js

@@ -60,6 +60,15 @@ const nestedDropZoneStyle = css({
   width: 'unset'
 });
 const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+const enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
+const getEnableDropZone = () => {
+  if (editorExperiment('platform_synced_block_patch_6', true, {
+    exposure: true
+  })) {
+    return enableDropZoneNext;
+  }
+  return enableDropZone;
+};
 
 // This z index is used in container like layout
 const fullHeightStyleAdjustZIndexStyle = css({
@@ -92,12 +101,13 @@ const HoverZone = ({
     return node ? getNodeAnchor(node) : '';
   }, [api, node, pos, position]);
   const [_isActive, setActiveAnchor] = useActiveAnchorTracker(anchorName);
+  const isInsideBodiedSyncBlock = parent && parent.type.name === 'bodiedSyncBlock' && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true);
   useEffect(() => {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
         onDragEnter: () => {
-          if (!isNestedDropTarget && editorExperiment('advanced_layouts', true)) {
+          if ((!isNestedDropTarget || isInsideBodiedSyncBlock) && editorExperiment('advanced_layouts', true)) {
             setActiveAnchor();
           }
           onDragEnter();
@@ -106,11 +116,11 @@ const HoverZone = ({
         onDrop
       });
     }
-  }, [isNestedDropTarget, onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
+  }, [isNestedDropTarget, isInsideBodiedSyncBlock, onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   const hoverZoneUpperStyle = useMemo(() => {
     const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
     const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
-    const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
+    const heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
     const transform = position === 'upper' ? `translateY(calc(-100% + ${transformOffset}))` : `translateY(${transformOffset})`;
     return css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -135,7 +145,7 @@ const HoverZone = ({
       const anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       let top = 'unset';
       if (anchorName) {
-        const enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        const enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
         if (isAnchorSupported()) {
           top = enabledDropZone ? `calc(anchor(${anchorName} 50%))` : `calc(anchor(${anchorName} bottom) - 4px)`;
         } else if (anchorRectCache) {
@@ -222,6 +232,7 @@ export const DropTarget = props => {
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: layers.navigation()
   };
+  const isShowInlineDropTarget = shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode, parentNode);
   return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: () => setIsDraggedOver(true),
     onDragLeave: () => setIsDraggedOver(false),
@@ -258,7 +269,7 @@ export const DropTarget = props => {
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     api: api
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget
+  }), isShowInlineDropTarget && jsx(Fragment, null, jsx(InlineDropTarget
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {

package/dist/esm/editor-commands/move-to-layout.js

@@ -128,16 +128,21 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
   var _ref3 = tr.doc.type.schema.nodes || {},
     layoutSection = _ref3.layoutSection,
     layoutColumn = _ref3.layoutColumn,
-    doc = _ref3.doc;
+    doc = _ref3.doc,
+    bodiedSyncBlock = _ref3.bodiedSyncBlock;
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
     return;
   }
   var $to = tr.doc.resolve(to);
+  var allowedParentTypes = [doc, layoutSection];
+  if (bodiedSyncBlock && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
+    allowedParentTypes.push(bodiedSyncBlock);
+  }
 
   // drop at invalid position, not top level, or not a layout column
-  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+  if (!$to.nodeAfter || !allowedParentTypes.includes($to.parent.type)) {
     return;
   }
   var $from = tr.doc.resolve(from);

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

@@ -1,5 +1,7 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 var blockLeafNodes = ['blockCard', 'rule', 'extension'];
+var blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -13,7 +15,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 var _findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
   var depth = $pos.depth;
-  var blockLeafNodeList = blockLeafNodes;
+  var blockLeafNodeList = editorExperiment('platform_synced_block_patch_6', true, {
+    exposure: true
+  }) ? blockLeafNodeNext : blockLeafNodes;
 
   // special cases like hr rule here
   if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {

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

@@ -1,4 +1,5 @@
 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';
@@ -6,7 +7,13 @@ 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;
+  var parentNode = arguments.length > 4 ? arguments[4] : undefined;
+  var isInsideBodiedSyncBlock = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) === 'bodiedSyncBlock';
   if (editorExperiment('advanced_layouts', false) || isNested) {
+    // If nested inside bodiedSyncBlock, enable inline drop target so user can drop to create a layout inside it
+    if (isInsideBodiedSyncBlock && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
+      return true;
+    }
     return false;
   }
   if (isWrappedMedia(node)) {
@@ -15,7 +22,7 @@ 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) || '')) && editorExperiment('platform_synced_block', true)) {
+  if ((syncedBlockTypes.includes((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || '') || syncedBlockTypes.includes((node === null || node === void 0 ? void 0 : node.type.name) || '')) && editorExperiment('platform_synced_block', true) && !expValEquals('platform_synced_block_patch_6', 'isEnabled', true)) {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {

package/dist/esm/ui/drop-target.js

@@ -62,6 +62,15 @@ var nestedDropZoneStyle = css({
   width: 'unset'
 });
 var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+var enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
+var getEnableDropZone = function getEnableDropZone() {
+  if (editorExperiment('platform_synced_block_patch_6', true, {
+    exposure: true
+  })) {
+    return enableDropZoneNext;
+  }
+  return enableDropZone;
+};
 
 // This z index is used in container like layout
 var fullHeightStyleAdjustZIndexStyle = css({
@@ -96,12 +105,13 @@ var HoverZone = function HoverZone(_ref) {
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 2),
     _isActive = _useActiveAnchorTrack2[0],
     setActiveAnchor = _useActiveAnchorTrack2[1];
+  var isInsideBodiedSyncBlock = parent && parent.type.name === 'bodiedSyncBlock' && expValEquals('platform_synced_block', 'isEnabled', true) && expValEquals('platform_synced_block_patch_6', 'isEnabled', true);
   useEffect(function () {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
         onDragEnter: function onDragEnter() {
-          if (!isNestedDropTarget && editorExperiment('advanced_layouts', true)) {
+          if ((!isNestedDropTarget || isInsideBodiedSyncBlock) && editorExperiment('advanced_layouts', true)) {
             setActiveAnchor();
           }
           _onDragEnter();
@@ -110,11 +120,11 @@ var HoverZone = function HoverZone(_ref) {
         onDrop: onDrop
       });
     }
-  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
+  }, [isNestedDropTarget, isInsideBodiedSyncBlock, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
   var hoverZoneUpperStyle = useMemo(function () {
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
-    var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
+    var heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
     var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
     return css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -139,7 +149,7 @@ var HoverZone = function HoverZone(_ref) {
       var _anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       var top = 'unset';
       if (_anchorName) {
-        var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
+        var enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
         if (isAnchorSupported()) {
           top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
         } else if (anchorRectCache) {
@@ -221,6 +231,7 @@ export var DropTarget = function DropTarget(props) {
   var dynamicStyle = _defineProperty(_defineProperty(_defineProperty({
     width: isNestedDropTarget ? 'unset' : '100%'
   }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat(lineLength || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, layers.navigation());
+  var isShowInlineDropTarget = shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode, parentNode);
   return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
@@ -265,7 +276,7 @@ export var DropTarget = function DropTarget(props) {
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     api: api
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget
+  }), isShowInlineDropTarget && jsx(Fragment, null, jsx(InlineDropTarget
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {

package/dist/types/pm-plugins/utils/inline-drop-target.d.ts

@@ -4,4 +4,4 @@ export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMN
 /**
  * Is the active node in the same layout as the target node
  */
-isSameLayout?: boolean, activeNode?: ActiveNode) => boolean;
+isSameLayout?: boolean, activeNode?: ActiveNode, parentNode?: PMNode) => boolean;

package/dist/types-ts4.5/pm-plugins/utils/inline-drop-target.d.ts

@@ -4,4 +4,4 @@ export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMN
 /**
  * Is the active node in the same layout as the target node
  */
-isSameLayout?: boolean, activeNode?: ActiveNode) => boolean;
+isSameLayout?: boolean, activeNode?: ActiveNode, parentNode?: PMNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "8.11.0",
+	"version": "9.0.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,20 +30,20 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.10.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^7.0.0",
-		"@atlaskit/editor-plugin-analytics": "^7.0.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^7.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
-		"@atlaskit/editor-plugin-feature-flags": "^6.0.0",
-		"@atlaskit/editor-plugin-interaction": "^14.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^4.0.0",
-		"@atlaskit/editor-plugin-metrics": "^8.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^7.5.0",
-		"@atlaskit/editor-plugin-selection": "^7.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^7.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^5.0.0",
-		"@atlaskit/editor-plugin-width": "^8.1.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^8.0.0",
+		"@atlaskit/editor-plugin-analytics": "^8.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^8.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^10.0.0",
+		"@atlaskit/editor-plugin-feature-flags": "^7.0.0",
+		"@atlaskit/editor-plugin-interaction": "^15.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^5.0.0",
+		"@atlaskit/editor-plugin-metrics": "^9.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^8.0.0",
+		"@atlaskit/editor-plugin-selection": "^8.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^5.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^8.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^6.0.0",
+		"@atlaskit/editor-plugin-width": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
@@ -56,8 +56,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^35.4.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tmp-editor-statsig": "^35.10.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.31.0",
+		"@atlaskit/editor-common": "^112.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"