@atlaskit/editor-plugin-block-controls 3.15.9 → 3.15.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.15.11
+
+### Patch Changes
+
+- [#166480](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166480)
+  [`55d4dbd11d97d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55d4dbd11d97d) -
+  Add 'marks: []' to both widgets to ensure PM renders them at the top level document, not inside
+  sibling elements wrapped with marks
+- Updated dependencies
+
+## 3.15.10
+
+### Patch Changes
+
+- [#165562](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165562)
+  [`59af663a32c9a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/59af663a32c9a) -
+  Reduce block control re-renders under experiment
+- Updated dependencies
+
 ## 3.15.9
 
 ### Patch Changes

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

@@ -30,9 +30,41 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
   });
 };
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
-  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
+    exposure: true
+  })) {
+    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   var unbind;
   var key = (0, _uuid.default)();
+  var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
+    side: -1,
+    type: _decorationsCommon.TYPE_HANDLE_DEC,
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
+    }
+  } : {
+    side: -1,
+    type: _decorationsCommon.TYPE_HANDLE_DEC,
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
+    }
+  };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
@@ -122,12 +154,5 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       }), element);
     }
     return element;
-  }, {
-    side: -1,
-    type: _decorationsCommon.TYPE_HANDLE_DEC,
-    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
-    destroy: function destroy(_) {
-      unbind && unbind();
-    }
-  });
+  }, widgetSpec);
 };

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -18,6 +19,30 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
 };
 var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = (0, _uuid.default)();
+  var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  } : {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
   return _view.Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
     element.contentEditable = 'false';
@@ -55,13 +80,5 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
       }, element, key);
     }
     return element;
-  }, {
-    side: -2,
-    type: TYPE_QUICK_INSERT,
-    destroy: function destroy(_) {
-      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
-    }
-  });
+  }, widgetSpec);
 };

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

@@ -20,8 +20,8 @@ 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");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
-var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/utility/drag-handle-vertical"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -272,29 +272,42 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _ref$isTopLevelNode = _ref.isTopLevelNode,
     isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
     anchorRectCache = _ref.anchorRectCache;
-  var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(768),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    blockCardWidth = _useState2[0],
-    setBlockCardWidth = _useState2[1];
+    dragHandleSelected = _useState2[0],
+    setDragHandleSelected = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    dragHandleSelected = _useState4[0],
-    setDragHandleSelected = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
+    dragHandleDisabled = _useState4[0],
+    setDragHandleDisabled = _useState4[1];
+  var _useState5 = (0, _react.useState)(768),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    dragHandleDisabled = _useState6[0],
-    setDragHandleDisabled = _useState6[1];
+    blockCardWidth = _useState6[0],
+    setBlockCardWidth = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    recalculatePosition = _useState8[0],
+    setRecalculatePosition = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      display: 'none'
+    }),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    positionStylesOld = _useState0[0],
+    setPositionStylesOld = _useState0[1];
   var _useDragHandlePluginS = useDragHandlePluginState(api),
     macroInteractionUpdates = _useDragHandlePluginS.macroInteractionUpdates;
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
   var _hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.hasHadInteraction') !== false;
   var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
+  var start = getPos();
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
   (0, _react.useEffect)(function () {
+    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -581,7 +594,61 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var calculatePosition = (0, _react.useCallback)(function () {
+  var positionStyles = (0, _react.useMemo)(function () {
+    if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
+      return {};
+    }
+
+    // This is a no-op to allow recalculatePosition to be used as a dependency
+    if (recalculatePosition) {
+      setRecalculatePosition(recalculatePosition);
+    }
+    var pos = getPos();
+    var $pos = pos && view.state.doc.resolve(pos);
+    var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
+    var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
+    var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
+    var safeAnchorName = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') ? (0, _anchorName.refreshAnchorName)({
+      getPos: getPos,
+      view: view,
+      anchorName: anchorName
+    }) : anchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility');
+    var isBlockCard = nodeType === 'blockCard';
+    var isEmbedCard = nodeType === 'embedCard';
+    var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
+    if (supportsAnchor) {
+      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      return _objectSpread({
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
+      }, bottom);
+    }
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    return _objectSpread({
+      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
+      top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
+    }, height);
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
     var $pos = pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
@@ -627,13 +694,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
-  var _useState7 = (0, _react.useState)({
-      display: 'none'
-    }),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    positionStyles = _useState8[0],
-    setPositionStyles = _useState8[1];
   (0, _react.useEffect)(function () {
+    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -643,19 +707,41 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
         type: 'transitionend',
         listener: function listener() {
-          setPositionStyles(calculatePosition());
+          setPositionStylesOld(calculatePositionOld());
         }
       });
     }
     var calcPos = requestAnimationFrame(function () {
-      setPositionStyles(calculatePosition());
+      setPositionStylesOld(calculatePositionOld());
     });
     return function () {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
-  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
+      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() {
+          setRecalculatePosition(!recalculatePosition);
+        }
+      });
+    }
+    return function () {
+      var _cleanUpTransitionLis2;
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [view, anchorName, nodeType, recalculatePosition]);
   (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 () {
@@ -664,7 +750,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        view.focus();
+        if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
+          view.focus();
+        }
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -673,7 +761,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return;
     }
     setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
-  }, [start, selection, view.state, isMultiSelect]);
+  }, [start, selection, view, isMultiSelect]);
   (0, _react.useEffect)(function () {
     var _api$blockControls$sh4;
     if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
@@ -686,7 +774,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
   var helpDescriptors = isTopLevelNode ? [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
@@ -771,7 +859,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && positionStyles || {},
+        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -790,7 +878,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         spacing: "spacious",
         label: "",
         LEGACY_fallbackIcon: _dragHandler.default,
-        LEGACY_size: "medium"
+        LEGACY_size: "medium",
+        size: "small"
       })))
     );
   };
@@ -798,7 +887,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: positionStyles,
+      style: (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
@@ -824,7 +913,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: positionStyles,
+      style: (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
@@ -860,6 +949,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     getPos = _ref8.getPos,
     anchorName = _ref8.anchorName,
     nodeType = _ref8.nodeType,
+    handleOptions = _ref8.handleOptions,
     anchorRectCache = _ref8.anchorRectCache;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
@@ -870,6 +960,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     getPos: getPos,
     anchorName: anchorName,
     nodeType: nodeType,
+    handleOptions: handleOptions,
     anchorRectCache: anchorRectCache
   }));
 };

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

@@ -21,9 +21,41 @@ export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
 export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) => {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
+    exposure: true
+  })) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   let unbind;
   const key = uuid();
+  const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: node => {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  } : {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    destroy: node => {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  };
   return Decoration.widget(pos, (view, getPosUnsafe) => {
     const element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
@@ -113,12 +145,5 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       }), element);
     }
     return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    destroy: _ => {
-      unbind && unbind();
-    }
-  });
+  }, widgetSpec);
 };

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -2,6 +2,7 @@ import { createElement } from 'react';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
@@ -9,6 +10,30 @@ export const findQuickInsertInsertButtonDecoration = (decorations, from, to) =>
 };
 export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
   const key = uuid();
+  const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  } : {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    destroy: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
   return Decoration.widget(rootPos, (view, getPos) => {
     const element = document.createElement('span');
     element.contentEditable = 'false';
@@ -42,13 +67,5 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
       }), element, key);
     }
     return element;
-  }, {
-    side: -2,
-    type: TYPE_QUICK_INSERT,
-    destroy: _ => {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
-    }
-  });
+  }, widgetSpec);
 };

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+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';
@@ -17,8 +17,8 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
-import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -265,11 +265,14 @@ export const DragHandle = ({
   anchorRectCache
 }) => {
   var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
-  const start = getPos();
   const buttonRef = useRef(null);
-  const [blockCardWidth, setBlockCardWidth] = useState(768);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
+  const [blockCardWidth, setBlockCardWidth] = useState(768);
+  const [recalculatePosition, setRecalculatePosition] = useState(false);
+  const [positionStylesOld, setPositionStylesOld] = useState({
+    display: 'none'
+  });
   const {
     macroInteractionUpdates
   } = useDragHandlePluginState(api);
@@ -277,9 +280,13 @@ export const DragHandle = ({
   const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
   const _hasHadInteraction = useSharedPluginStateSelector(api, 'interaction.hasHadInteraction') !== false;
   const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  const start = getPos();
   const isLayoutColumn = nodeType === 'layoutColumn';
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
   useEffect(() => {
+    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
@@ -571,7 +578,63 @@ export const DragHandle = ({
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  const calculatePosition = useCallback(() => {
+  const positionStyles = useMemo(() => {
+    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return {};
+    }
+
+    // This is a no-op to allow recalculatePosition to be used as a dependency
+    if (recalculatePosition) {
+      setRecalculatePosition(recalculatePosition);
+    }
+    const pos = getPos();
+    const $pos = pos && view.state.doc.resolve(pos);
+    const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
+    const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
+    const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
+    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos,
+      view,
+      anchorName
+    }) : anchorName;
+    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
+    const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
+    const isBlockCard = nodeType === 'blockCard';
+    const isEmbedCard = nodeType === 'embedCard';
+    const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    let innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    const isSticky = shouldBeSticky(nodeType);
+    if (supportsAnchor) {
+      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      return {
+        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(nodeType)}px)`,
+        ...bottom
+      };
+    }
+    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
+    return {
+      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
+      top: getTopPosition(dom, nodeType),
+      ...height
+    };
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  const calculatePositionOld = useCallback(() => {
     const pos = getPos();
     const $pos = pos && view.state.doc.resolve(pos);
     const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
@@ -619,10 +682,10 @@ export const DragHandle = ({
       ...height
     };
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
-  const [positionStyles, setPositionStyles] = useState({
-    display: 'none'
-  });
   useEffect(() => {
+    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     let cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
@@ -632,19 +695,41 @@ export const DragHandle = ({
       cleanUpTransitionListener = bind(dom, {
         type: 'transitionend',
         listener: () => {
-          setPositionStyles(calculatePosition());
+          setPositionStylesOld(calculatePositionOld());
         }
       });
     }
     const calcPos = requestAnimationFrame(() => {
-      setPositionStyles(calculatePosition());
+      setPositionStylesOld(calculatePositionOld());
     });
     return () => {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
-  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  useEffect(() => {
+    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      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: () => {
+          setRecalculatePosition(!recalculatePosition);
+        }
+      });
+    }
+    return () => {
+      var _cleanUpTransitionLis2;
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
+    };
+  }, [view, anchorName, nodeType, recalculatePosition]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
       const id = requestAnimationFrame(() => {
@@ -653,7 +738,9 @@ export const DragHandle = ({
       });
       return () => {
         cancelAnimationFrame(id);
-        view.focus();
+        if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+          view.focus();
+        }
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -662,7 +749,7 @@ export const DragHandle = ({
       return;
     }
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
-  }, [start, selection, view.state, isMultiSelect]);
+  }, [start, selection, view, isMultiSelect]);
   useEffect(() => {
     var _api$blockControls$sh4;
     if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
@@ -675,7 +762,7 @@ export const DragHandle = ({
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
   let helpDescriptors = isTopLevelNode ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -759,7 +846,7 @@ export const DragHandle = ({
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: !editorExperiment('platform_editor_controls', 'variant1') && positionStyles || {},
+    style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
     onClick: handleOnClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown
@@ -778,12 +865,13 @@ export const DragHandle = ({
     spacing: "spacious",
     label: "",
     LEGACY_fallbackIcon: DragHandlerIcon,
-    LEGACY_size: "medium"
+    LEGACY_size: "medium",
+    size: "small"
   })));
   const stickyWithTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
-    style: positionStyles,
+    style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
     xcss: [dragHandleContainerStyles],
     as: "span",
     testId: "block-ctrl-drag-handle-container"
@@ -807,7 +895,7 @@ export const DragHandle = ({
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
-    style: positionStyles,
+    style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
     xcss: [dragHandleContainerStyles],
     as: "span",
     testId: "block-ctrl-drag-handle-container"
@@ -840,6 +928,7 @@ export const DragHandleWithVisibility = ({
   getPos,
   anchorName,
   nodeType,
+  handleOptions,
   anchorRectCache
 }) => {
   return jsx(VisibilityContainer, {
@@ -851,6 +940,7 @@ export const DragHandleWithVisibility = ({
     getPos: getPos,
     anchorName: anchorName,
     nodeType: nodeType,
+    handleOptions: handleOptions,
     anchorRectCache: anchorRectCache
   }));
 };

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

@@ -23,9 +23,41 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
   });
 };
 export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
+    exposure: true
+  })) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   var unbind;
   var key = uuid();
+  var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  } : {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  };
   return Decoration.widget(pos, function (view, getPosUnsafe) {
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
@@ -115,12 +147,5 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
       }), element);
     }
     return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
-    destroy: function destroy(_) {
-      unbind && unbind();
-    }
-  });
+  }, widgetSpec);
 };

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -2,6 +2,7 @@ import { createElement } from 'react';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -11,6 +12,30 @@ export var findQuickInsertInsertButtonDecoration = function findQuickInsertInser
 };
 export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = uuid();
+  var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(_) {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  } : {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    destroy: function destroy(_) {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
   return Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
     element.contentEditable = 'false';
@@ -48,13 +73,5 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
       }, element, key);
     }
     return element;
-  }, {
-    side: -2,
-    type: TYPE_QUICK_INSERT,
-    destroy: function destroy(_) {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
-    }
-  });
+  }, widgetSpec);
 };

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

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+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';
@@ -22,8 +22,8 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
-import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -269,29 +269,42 @@ export var DragHandle = function DragHandle(_ref) {
     _ref$isTopLevelNode = _ref.isTopLevelNode,
     isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
     anchorRectCache = _ref.anchorRectCache;
-  var start = getPos();
   var buttonRef = useRef(null);
-  var _useState = useState(768),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    blockCardWidth = _useState2[0],
-    setBlockCardWidth = _useState2[1];
+    dragHandleSelected = _useState2[0],
+    setDragHandleSelected = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    dragHandleSelected = _useState4[0],
-    setDragHandleSelected = _useState4[1];
-  var _useState5 = useState(false),
+    dragHandleDisabled = _useState4[0],
+    setDragHandleDisabled = _useState4[1];
+  var _useState5 = useState(768),
     _useState6 = _slicedToArray(_useState5, 2),
-    dragHandleDisabled = _useState6[0],
-    setDragHandleDisabled = _useState6[1];
+    blockCardWidth = _useState6[0],
+    setBlockCardWidth = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    recalculatePosition = _useState8[0],
+    setRecalculatePosition = _useState8[1];
+  var _useState9 = useState({
+      display: 'none'
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    positionStylesOld = _useState0[0],
+    setPositionStylesOld = _useState0[1];
   var _useDragHandlePluginS = useDragHandlePluginState(api),
     macroInteractionUpdates = _useDragHandlePluginS.macroInteractionUpdates;
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
   var _hasHadInteraction = useSharedPluginStateSelector(api, 'interaction.hasHadInteraction') !== false;
   var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  var start = getPos();
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
   useEffect(function () {
+    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -578,7 +591,61 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var calculatePosition = useCallback(function () {
+  var positionStyles = useMemo(function () {
+    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return {};
+    }
+
+    // This is a no-op to allow recalculatePosition to be used as a dependency
+    if (recalculatePosition) {
+      setRecalculatePosition(recalculatePosition);
+    }
+    var pos = getPos();
+    var $pos = pos && view.state.doc.resolve(pos);
+    var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
+    var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
+    var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
+    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos: getPos,
+      view: view,
+      anchorName: anchorName
+    }) : anchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
+    var isBlockCard = nodeType === 'blockCard';
+    var isEmbedCard = nodeType === 'embedCard';
+    var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = shouldBeSticky(nodeType);
+    if (supportsAnchor) {
+      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      return _objectSpread({
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)")
+      }, bottom);
+    }
+    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    return _objectSpread({
+      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
+      top: getTopPosition(dom, nodeType)
+    }, height);
+  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
+  var calculatePositionOld = useCallback(function () {
     var pos = getPos();
     var $pos = pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
@@ -624,13 +691,10 @@ export var DragHandle = function DragHandle(_ref) {
       top: getTopPosition(dom, nodeType)
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
-  var _useState7 = useState({
-      display: 'none'
-    }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    positionStyles = _useState8[0],
-    setPositionStyles = _useState8[1];
   useEffect(function () {
+    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -640,19 +704,41 @@ export var DragHandle = function DragHandle(_ref) {
       cleanUpTransitionListener = bind(dom, {
         type: 'transitionend',
         listener: function listener() {
-          setPositionStyles(calculatePosition());
+          setPositionStylesOld(calculatePositionOld());
         }
       });
     }
     var calcPos = requestAnimationFrame(function () {
-      setPositionStyles(calculatePosition());
+      setPositionStylesOld(calculatePositionOld());
     });
     return function () {
       var _cleanUpTransitionLis;
       cancelAnimationFrame(calcPos);
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
-  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  }, [calculatePositionOld, view.dom, anchorName, nodeType]);
+  useEffect(function () {
+    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+      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() {
+          setRecalculatePosition(!recalculatePosition);
+        }
+      });
+    }
+    return function () {
+      var _cleanUpTransitionLis2;
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [view, anchorName, nodeType, recalculatePosition]);
   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 () {
@@ -661,7 +747,9 @@ export var DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        view.focus();
+        if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
+          view.focus();
+        }
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -670,7 +758,7 @@ export var DragHandle = function DragHandle(_ref) {
       return;
     }
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
-  }, [start, selection, view.state, isMultiSelect]);
+  }, [start, selection, view, isMultiSelect]);
   useEffect(function () {
     var _api$blockControls$sh4;
     if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
@@ -683,7 +771,7 @@ export var DragHandle = function DragHandle(_ref) {
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view]);
   var helpDescriptors = isTopLevelNode ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -768,7 +856,7 @@ export var DragHandle = function DragHandle(_ref) {
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !editorExperiment('platform_editor_controls', 'variant1') && positionStyles || {},
+        style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -787,7 +875,8 @@ export var DragHandle = function DragHandle(_ref) {
         spacing: "spacious",
         label: "",
         LEGACY_fallbackIcon: DragHandlerIcon,
-        LEGACY_size: "medium"
+        LEGACY_size: "medium",
+        size: "small"
       })))
     );
   };
@@ -795,7 +884,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: positionStyles,
+      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
@@ -821,7 +910,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: positionStyles,
+      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld,
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
@@ -857,6 +946,7 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
     getPos = _ref8.getPos,
     anchorName = _ref8.anchorName,
     nodeType = _ref8.nodeType,
+    handleOptions = _ref8.handleOptions,
     anchorRectCache = _ref8.anchorRectCache;
   return jsx(VisibilityContainer, {
     api: api
@@ -867,6 +957,7 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
     getPos: getPos,
     anchorName: anchorName,
     nodeType: nodeType,
+    handleOptions: handleOptions,
     anchorRectCache: anchorRectCache
   }));
 };

package/dist/types/ui/drag-handle.d.ts

@@ -16,5 +16,5 @@ type DragHandleProps = {
     anchorRectCache?: AnchorRectCache;
 };
 export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
-export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/drag-handle.d.ts

@@ -16,5 +16,5 @@ type DragHandleProps = {
     anchorRectCache?: AnchorRectCache;
 };
 export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
-export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.15.9",
+	"version": "3.15.11",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.1.0",
+		"@atlaskit/editor-common": "^106.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -56,9 +56,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.8.0",
+		"@atlaskit/tmp-editor-statsig": "^5.12.0",
 		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",