@atlaskit/editor-plugin-block-controls 1.5.18 → 1.5.20

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.20
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.5.19
+
+### Patch Changes
+
+- [#119849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119849)
+  [`5178d3ebdd7db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5178d3ebdd7db) -
+  ED-23896 Fix responsiveness of extensions, macros, table alignment
+- Updated dependencies
+
 ## 1.5.18
 
 ### Patch Changes

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

@@ -143,6 +143,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -163,7 +166,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
-      _reactDom.default.unmountComponentAtNode(node);
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -8,6 +8,7 @@ exports.DragHandle = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -259,7 +260,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     });
   }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  var positionStyles = (0, _react.useMemo)(function () {
+  var calculatePosition = (0, _react.useCallback)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -281,18 +282,59 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    return {
+    return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
+    } : {
       left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  var _useState5 = (0, _react.useState)({
+      display: 'none'
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    newPositionStyles = _useState6[0],
+    setNewPositionStyles = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      return;
+    }
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setNewPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setNewPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  var positionStyles = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       var id = requestAnimationFrame(function () {
@@ -321,7 +363,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       ref: buttonRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: positionStyles,
+      style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
       onClick: handleOnClick,
       onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
       onKeyDown: handleKeyDown,

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

@@ -137,6 +137,9 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -157,7 +160,9 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
     side: -1,
     id: 'drag-handle',
     destroy: node => {
-      ReactDOM.unmountComponentAtNode(node);
+      if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -2,6 +2,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -250,7 +251,7 @@ const DragHandleInternal = ({
     });
   }, [anchorName, api, nodeType, view, start]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  const positionStyles = useMemo(() => {
+  const calculatePosition = useCallback(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
     const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -272,18 +273,56 @@ const DragHandleInternal = ({
     }
     if (supportsAnchor) {
       return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
-    return {
+    return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
+    } : {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  const [newPositionStyles, setNewPositionStyles] = useState({
+    display: 'none'
+  });
+  useEffect(() => {
+    if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return;
+    }
+    let cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: () => {
+          setNewPositionStyles(calculatePosition());
+        }
+      });
+    }
+    const calcPos = requestAnimationFrame(() => {
+      setNewPositionStyles(calculatePosition());
+    });
+    return () => {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  const positionStyles = useMemo(() => {
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
       const id = requestAnimationFrame(() => {
@@ -311,7 +350,7 @@ const DragHandleInternal = ({
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: positionStyles,
+    style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
     onClick: handleOnClick,
     onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
     onKeyDown: handleKeyDown,

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

@@ -136,6 +136,9 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -156,7 +159,9 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
-      ReactDOM.unmountComponentAtNode(node);
+      if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -250,7 +251,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     });
   }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  var positionStyles = useMemo(function () {
+  var calculatePosition = useCallback(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -272,18 +273,59 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    return {
+    return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
+    } : {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  var _useState5 = useState({
+      display: 'none'
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    newPositionStyles = _useState6[0],
+    setNewPositionStyles = _useState6[1];
+  useEffect(function () {
+    if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return;
+    }
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setNewPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setNewPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  var positionStyles = useMemo(function () {
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
   useEffect(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
       var id = requestAnimationFrame(function () {
@@ -312,7 +354,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       ref: buttonRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: positionStyles,
+      style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
       onClick: handleOnClick,
       onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
       onKeyDown: handleKeyDown,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.5.18",
+	"version": "1.5.20",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^85.1.0",
+		"@atlaskit/editor-common": "^86.0.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.55.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -142,6 +142,9 @@
 		},
 		"platform_editor_element_drag_and_drop_ed_24049": {
 			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_23896": {
+			"type": "boolean"
 		}
 	}
 }