@atlaskit/editor-plugin-block-controls 2.13.30 → 2.13.31

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.31
+
+### Patch Changes
+
+- [#171553](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171553)
+  [`ef0f90dd048d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ef0f90dd048d8) -
+  [ED-25917] Replace dynamic styles for inline hover zone with css var
+- [#171077](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171077)
+  [`0a92cf56671ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a92cf56671ac) -
+  ED-25867 always show drag handler for layout columns
+- Updated dependencies
+
 ## 2.13.30
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -13,26 +13,6 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
-var isEmptyParagraphOrPlaceholder = function isEmptyParagraphOrPlaceholder(node) {
-  if (node && node.type.name === 'paragraph') {
-    var _node$firstChild;
-    return node.childCount === 0 || node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'placeholder';
-  }
-  return false;
-};
-var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
-    var foundNonEmptyNode = false;
-    for (var i = 0; i < node.childCount; i++) {
-      var child = node.child(i);
-      if (!isEmptyParagraphOrPlaceholder(child)) {
-        foundNonEmptyNode = true;
-        break;
-      }
-    }
-    return !foundNonEmptyNode;
-  }
-};
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -98,11 +78,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    var node = view.state.doc.nodeAt(pos);
-    if ((0, _experiments.editorExperiment)('advanced_layouts', true) && node && isLayoutColumnWithoutContent(node)) {
-      // Don't show drag handle when there is no content/only placeholder in layout column
-      return false;
-    }
     var rootPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineDropTarget = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -12,7 +13,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
@@ -26,10 +26,31 @@ var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
+var HOVER_ZONE_WIDTH = '--editor-blocks-inline-hover-zone-width';
+var HOVER_ZONE_HEIGHT = '--editor-blocks-inline-hover-zone-height';
+var HOVER_ZONE_TOP = '--editor-blocks-inline-hover-zone-top';
+var HOVER_ZONE_BOTTOM = '--editor-blocks-inline-hover-zone-bottom';
+var HOVER_ZONE_ANCHOR_NAME = '--editor-blocks-inline-hover-zone-anchor-name';
 var hoverZoneCommonStyle = (0, _react2.css)({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
-  zIndex: 120
+  zIndex: 120,
+  positionAnchor: "var(".concat(HOVER_ZONE_ANCHOR_NAME, ")"),
+  minWidth: "var(--ds-space-100, 8px)",
+  left: 0,
+  right: 0,
+  width: "var(".concat(HOVER_ZONE_WIDTH, ")"),
+  height: "var(".concat(HOVER_ZONE_HEIGHT, ")")
+});
+var leftHoverZoneStyle = (0, _react2.css)({
+  right: "unset",
+  top: "var(".concat(HOVER_ZONE_TOP, ")"),
+  bottom: 'unset'
+});
+var rightHoverZoneStyle = (0, _react2.css)({
+  left: "unset",
+  top: 'unset',
+  bottom: "var(".concat(HOVER_ZONE_BOTTOM, ")")
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -125,7 +146,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
 
     // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
     var heightTargetAnchorName = targetAnchorName;
-    if ((0, _experiments.editorExperiment)('advanced_layouts', true) && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+    if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       heightTargetAnchorName = isLeftPosition ? (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild) : (0, _decorationsCommon.getNodeAnchor)(nextNode.lastChild);
     }
     if ((0, _anchorUtils.isAnchorSupported)()) {
@@ -175,27 +196,17 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
       }));
     }
   }, [api, getPos, position]);
-  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
-    var isLayoutNode = (0, _experiments.editorExperiment)('advanced_layouts', true) && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+  var hoverZoneRectStyle = (0, _react.useMemo)(function () {
+    var _ref3;
+    var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
     var layoutAdjustment = isLayoutNode ? {
       width: 11,
       height: 4,
       top: 6,
       bottom: 2
     } : undefined;
-    return (0, _react2.css)({
-      positionAnchor: anchorName,
-      minWidth: "var(--ds-space-100, 8px)",
-      left: isLeftPosition ? 0 : 'unset',
-      right: isLeftPosition ? 'unset' : 0,
-      top: "calc(anchor(top))",
-      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)"),
-      height: "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")
-    }, isLayoutNode && {
-      top: isLeftPosition ? "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)") : 'unset',
-      bottom: isLeftPosition ? 'unset' : "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")
-    });
-  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, anchorName, isLeftPosition, nodeDimension]);
+    return _ref3 = {}, (0, _defineProperty2.default)(_ref3, HOVER_ZONE_WIDTH, nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)")), (0, _defineProperty2.default)(_ref3, HOVER_ZONE_HEIGHT, "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")), (0, _defineProperty2.default)(_ref3, HOVER_ZONE_TOP, "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)")), (0, _defineProperty2.default)(_ref3, HOVER_ZONE_BOTTOM, "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")), (0, _defineProperty2.default)(_ref3, HOVER_ZONE_ANCHOR_NAME, anchorName), _ref3;
+  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, nodeDimension, anchorName]);
   var dropIndicatorPos = (0, _react.useMemo)(function () {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);
@@ -216,7 +227,10 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
   return (0, _react2.jsx)("div", {
     ref: ref,
     "data-testid": "drop-target-hover-zone-".concat(position),
-    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+    css: [hoverZoneCommonStyle, isLeftPosition ? leftHoverZoneStyle : rightHoverZoneStyle]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: hoverZoneRectStyle
   }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: dropIndicatorPos
   }) : isActiveAnchor && (0, _react2.jsx)("div", {

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

@@ -7,26 +7,6 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
-const isEmptyParagraphOrPlaceholder = node => {
-  if (node && node.type.name === 'paragraph') {
-    var _node$firstChild;
-    return node.childCount === 0 || node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'placeholder';
-  }
-  return false;
-};
-const isLayoutColumnWithoutContent = node => {
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
-    let foundNonEmptyNode = false;
-    for (let i = 0; i < node.childCount; i++) {
-      const child = node.child(i);
-      if (!isEmptyParagraphOrPlaceholder(child)) {
-        foundNonEmptyNode = true;
-        break;
-      }
-    }
-    return !foundNonEmptyNode;
-  }
-};
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _target$classList;
   const {
@@ -93,11 +73,6 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    const node = view.state.doc.nodeAt(pos);
-    if (editorExperiment('advanced_layouts', true) && node && isLayoutColumnWithoutContent(node)) {
-      // Don't show drag handle when there is no content/only placeholder in layout column
-      return false;
-    }
     let rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -12,15 +12,35 @@ import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
 import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
+const HOVER_ZONE_WIDTH = '--editor-blocks-inline-hover-zone-width';
+const HOVER_ZONE_HEIGHT = '--editor-blocks-inline-hover-zone-height';
+const HOVER_ZONE_TOP = '--editor-blocks-inline-hover-zone-top';
+const HOVER_ZONE_BOTTOM = '--editor-blocks-inline-hover-zone-bottom';
+const HOVER_ZONE_ANCHOR_NAME = '--editor-blocks-inline-hover-zone-anchor-name';
 const hoverZoneCommonStyle = css({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
-  zIndex: 120
+  zIndex: 120,
+  positionAnchor: `var(${HOVER_ZONE_ANCHOR_NAME})`,
+  minWidth: "var(--ds-space-100, 8px)",
+  left: 0,
+  right: 0,
+  width: `var(${HOVER_ZONE_WIDTH})`,
+  height: `var(${HOVER_ZONE_HEIGHT})`
+});
+const leftHoverZoneStyle = css({
+  right: `unset`,
+  top: `var(${HOVER_ZONE_TOP})`,
+  bottom: 'unset'
+});
+const rightHoverZoneStyle = css({
+  left: `unset`,
+  top: 'unset',
+  bottom: `var(${HOVER_ZONE_BOTTOM})`
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -112,7 +132,7 @@ export const InlineDropTarget = ({
 
     // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
     let heightTargetAnchorName = targetAnchorName;
-    if (editorExperiment('advanced_layouts', true) && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+    if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
     }
     if (isAnchorSupported()) {
@@ -165,27 +185,22 @@ export const InlineDropTarget = ({
       }));
     }
   }, [api, getPos, position]);
-  const inlineHoverZoneRectStyle = useMemo(() => {
-    const isLayoutNode = editorExperiment('advanced_layouts', true) && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+  const hoverZoneRectStyle = useMemo(() => {
+    const isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
     const layoutAdjustment = isLayoutNode ? {
       width: 11,
       height: 4,
       top: 6,
       bottom: 2
     } : undefined;
-    return css({
-      positionAnchor: anchorName,
-      minWidth: "var(--ds-space-100, 8px)",
-      left: isLeftPosition ? 0 : 'unset',
-      right: isLeftPosition ? 'unset' : 0,
-      top: `calc(anchor(top))`,
-      width: nodeDimension.widthOffset ? `calc((100% - ${nodeDimension.width})/2 - ${GAP}px + ${nodeDimension.widthOffset} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)` : `calc((100% - ${nodeDimension.width})/2 - ${GAP}px - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)`,
-      height: `calc(${nodeDimension.height} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0}px)`
-    }, isLayoutNode && {
-      top: isLeftPosition ? `calc(${nodeDimension.top} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0}px)` : 'unset',
-      bottom: isLeftPosition ? 'unset' : `calc(${nodeDimension.bottom} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0}px)`
-    });
-  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, anchorName, isLeftPosition, nodeDimension]);
+    return {
+      [HOVER_ZONE_WIDTH]: nodeDimension.widthOffset ? `calc((100% - ${nodeDimension.width})/2 - ${GAP}px + ${nodeDimension.widthOffset} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)` : `calc((100% - ${nodeDimension.width})/2 - ${GAP}px - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)`,
+      [HOVER_ZONE_HEIGHT]: `calc(${nodeDimension.height} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0}px)`,
+      [HOVER_ZONE_TOP]: `calc(${nodeDimension.top} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0}px)`,
+      [HOVER_ZONE_BOTTOM]: `calc(${nodeDimension.bottom} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0}px)`,
+      [HOVER_ZONE_ANCHOR_NAME]: anchorName
+    };
+  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, nodeDimension, anchorName]);
   const dropIndicatorPos = useMemo(() => {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);
@@ -206,7 +221,10 @@ export const InlineDropTarget = ({
   return jsx("div", {
     ref: ref,
     "data-testid": `drop-target-hover-zone-${position}`,
-    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+    css: [hoverZoneCommonStyle, isLeftPosition ? leftHoverZoneStyle : rightHoverZoneStyle]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: hoverZoneRectStyle
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: dropIndicatorPos
   }) : isActiveAnchor && jsx("div", {

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

@@ -7,26 +7,6 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
-var isEmptyParagraphOrPlaceholder = function isEmptyParagraphOrPlaceholder(node) {
-  if (node && node.type.name === 'paragraph') {
-    var _node$firstChild;
-    return node.childCount === 0 || node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'placeholder';
-  }
-  return false;
-};
-var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
-    var foundNonEmptyNode = false;
-    for (var i = 0; i < node.childCount; i++) {
-      var child = node.child(i);
-      if (!isEmptyParagraphOrPlaceholder(child)) {
-        foundNonEmptyNode = true;
-        break;
-      }
-    }
-    return !foundNonEmptyNode;
-  }
-};
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -92,11 +72,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    var node = view.state.doc.nodeAt(pos);
-    if (editorExperiment('advanced_layouts', true) && node && isLayoutColumnWithoutContent(node)) {
-      // Don't show drag handle when there is no content/only placeholder in layout column
-      return false;
-    }
     var rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -13,15 +14,35 @@ import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
 import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
+var HOVER_ZONE_WIDTH = '--editor-blocks-inline-hover-zone-width';
+var HOVER_ZONE_HEIGHT = '--editor-blocks-inline-hover-zone-height';
+var HOVER_ZONE_TOP = '--editor-blocks-inline-hover-zone-top';
+var HOVER_ZONE_BOTTOM = '--editor-blocks-inline-hover-zone-bottom';
+var HOVER_ZONE_ANCHOR_NAME = '--editor-blocks-inline-hover-zone-anchor-name';
 var hoverZoneCommonStyle = css({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
-  zIndex: 120
+  zIndex: 120,
+  positionAnchor: "var(".concat(HOVER_ZONE_ANCHOR_NAME, ")"),
+  minWidth: "var(--ds-space-100, 8px)",
+  left: 0,
+  right: 0,
+  width: "var(".concat(HOVER_ZONE_WIDTH, ")"),
+  height: "var(".concat(HOVER_ZONE_HEIGHT, ")")
+});
+var leftHoverZoneStyle = css({
+  right: "unset",
+  top: "var(".concat(HOVER_ZONE_TOP, ")"),
+  bottom: 'unset'
+});
+var rightHoverZoneStyle = css({
+  left: "unset",
+  top: 'unset',
+  bottom: "var(".concat(HOVER_ZONE_BOTTOM, ")")
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -117,7 +138,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
 
     // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
     var heightTargetAnchorName = targetAnchorName;
-    if (editorExperiment('advanced_layouts', true) && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+    if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
     }
     if (isAnchorSupported()) {
@@ -167,27 +188,17 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
       }));
     }
   }, [api, getPos, position]);
-  var inlineHoverZoneRectStyle = useMemo(function () {
-    var isLayoutNode = editorExperiment('advanced_layouts', true) && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+  var hoverZoneRectStyle = useMemo(function () {
+    var _ref3;
+    var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
     var layoutAdjustment = isLayoutNode ? {
       width: 11,
       height: 4,
       top: 6,
       bottom: 2
     } : undefined;
-    return css({
-      positionAnchor: anchorName,
-      minWidth: "var(--ds-space-100, 8px)",
-      left: isLeftPosition ? 0 : 'unset',
-      right: isLeftPosition ? 'unset' : 0,
-      top: "calc(anchor(top))",
-      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)"),
-      height: "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")
-    }, isLayoutNode && {
-      top: isLeftPosition ? "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)") : 'unset',
-      bottom: isLeftPosition ? 'unset' : "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")
-    });
-  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, anchorName, isLeftPosition, nodeDimension]);
+    return _ref3 = {}, _defineProperty(_ref3, HOVER_ZONE_WIDTH, nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)")), _defineProperty(_ref3, HOVER_ZONE_HEIGHT, "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")), _defineProperty(_ref3, HOVER_ZONE_TOP, "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)")), _defineProperty(_ref3, HOVER_ZONE_BOTTOM, "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")), _defineProperty(_ref3, HOVER_ZONE_ANCHOR_NAME, anchorName), _ref3;
+  }, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, nodeDimension, anchorName]);
   var dropIndicatorPos = useMemo(function () {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);
@@ -208,7 +219,10 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   return jsx("div", {
     ref: ref,
     "data-testid": "drop-target-hover-zone-".concat(position),
-    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+    css: [hoverZoneCommonStyle, isLeftPosition ? leftHoverZoneStyle : rightHoverZoneStyle]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: hoverZoneRectStyle
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: dropIndicatorPos
   }) : isActiveAnchor && jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.30",
+	"version": "2.13.31",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,14 +41,14 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/icon": "^23.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
+		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.21.0",
+		"@atlaskit/tmp-editor-statsig": "^2.22.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",