@atlaskit/editor-plugin-block-controls 3.19.14 → 3.20.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.20.0
+
+### Minor Changes
+
+- [#181590](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181590)
+  [`d44ad3c53ed98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d44ad3c53ed98) -
+  ED-28433 fix drop zone after performance optimzations
+
 ## 3.19.14
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -216,7 +216,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         api: api
       }) : /*#__PURE__*/_react.default.createElement(_dragHandleMenu.DragHandleMenu, {
         api: api
-      }), /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null));
+      }), /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
+        api: api
+      }));
     }
   };
 };

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

@@ -59,7 +59,7 @@ var canMoveNodeOrSliceToPos = exports.canMoveNodeOrSliceToPos = function canMove
   }
   return true;
 };
-var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode) {
+var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_block_controls_drop_target_mem_fix')) {
     (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   }
@@ -105,7 +105,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
           parentNode: node,
           formatMessage: formatMessage,
           dropTargetStyle: isEmptyContainer ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, 1));
+        }, nodeViewPortalProviderAPI, 1, anchorRectCache));
       }
     }
 
@@ -130,7 +130,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
             parentNode: node,
             formatMessage: formatMessage,
             dropTargetStyle: 'remainingHeight'
-          }, nodeViewPortalProviderAPI, -1));
+          }, nodeViewPortalProviderAPI, -1, anchorRectCache));
         }
       }
     }
@@ -157,7 +157,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
           parentNode: parent || undefined,
           formatMessage: formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
 
@@ -177,7 +177,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
           parentNode: parent || undefined,
           formatMessage: formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
   }
@@ -202,7 +202,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
         parentNode: state.doc || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: 'default'
-      }, nodeViewPortalProviderAPI, -1, undefined, false));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache, false));
     }
     rootNodeWithPos = {
       node: root.node,
@@ -228,7 +228,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
                 api: api,
                 parent: parent,
                 formatMessage: formatMessage
-              }, nodeViewPortalProviderAPI, undefined));
+              }, nodeViewPortalProviderAPI, anchorRectCache));
             }
           }
           return false;

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findSurroundingNodes = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 var blockLeafNodes = ['blockCard', 'rule'];
+var blockLeafNodesNext = ['blockCard', 'rule', 'extension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -19,9 +21,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 var _findSurroundingNodes = exports.findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
   var depth = $pos.depth;
-
+  var blockLeafNodeList = (0, _platformFeatureFlags.fg)('platform_editor_block_controls_perf_opt_patch_1') ? blockLeafNodesNext : blockLeafNodes;
   // special cases like hr rule here
-  if (blockLeafNodes.includes(nodeType || '') || $pos.pos === 0) {
+  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
     var _parent = $pos.node(depth);
     var _node = $pos.nodeAfter;
     var _index = $pos.index();

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

@@ -472,7 +472,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       if (meta !== null && meta !== void 0 && meta.activeDropTargetNode) {
         currentActiveDropTargetNode = meta === null || meta === void 0 ? void 0 : meta.activeDropTargetNode;
         var _oldDropTargetDecs = (0, _decorationsDropTarget.findDropTargetDecs)(decorations);
-        var _getActiveDropTargetD = (0, _decorationsDropTargetActive.getActiveDropTargetDecorations)(meta.activeDropTargetNode, newState, api, _oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode),
+        var _getActiveDropTargetD = (0, _decorationsDropTargetActive.getActiveDropTargetDecorations)(meta.activeDropTargetNode, newState, api, _oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache),
           decsToAdd = _getActiveDropTargetD.decsToAdd,
           decsToRemove = _getActiveDropTargetD.decsToRemove;
         decorations = decorations.remove(decsToRemove);
@@ -648,12 +648,18 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         dragstart: function dragstart(view) {
-          var _anchorRectCache;
+          var _anchorRectCache2;
           (0, _performanceMeasures.startMeasure)(EDITOR_BLOCKS_DRAG_INIT);
           if (isAdvancedLayoutEnabled) {
             _activeAnchorTracker.defaultActiveAnchorTracker.reset();
           }
-          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
+          if ((0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+            if ((0, _platformFeatureFlags.fg)('platform_editor_block_controls_perf_opt_patch_1')) {
+              var _anchorRectCache;
+              (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.clear();
+            }
+          }
+          (_anchorRectCache2 = anchorRectCache) === null || _anchorRectCache2 === void 0 || _anchorRectCache2.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
             isPMDragging: true
           })));

package/dist/cjs/ui/global-styles.js

@@ -8,10 +8,12 @@ exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 /**
@@ -88,6 +90,13 @@ var extendedHoverZone = function extendedHoverZone() {
     display: 'none'
   }));
 };
+var extendedDragZone = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
+    width: 'var(--ak-editor-max-container-width)',
+    left: "calc((100% - var(--ak-editor-max-container-width))/2)"
+  })
+});
 var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -292,8 +301,12 @@ var blockCardWithoutLayout = (0, _react.css)({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
-var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var api = _ref.api;
+  var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
+    disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !(0, _platformFeatureFlags.fg)('platform_editor_block_controls_perf_opt_patch_1')
+  });
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/es2019/blockControlsPlugin.js

@@ -208,6 +208,8 @@ export const blockControlsPlugin = ({
       api: api
     }) : /*#__PURE__*/React.createElement(DragHandleMenu, {
       api: api
-    }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
+    }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+      api: api
+    }));
   }
 });

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

@@ -55,7 +55,7 @@ export const canMoveNodeOrSliceToPos = (state, node, parent, index, $toPos, acti
   }
   return true;
 };
-export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode) => {
+export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache) => {
   if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
     unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   }
@@ -96,7 +96,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
           parentNode: node,
           formatMessage,
           dropTargetStyle: isEmptyContainer ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, 1));
+        }, nodeViewPortalProviderAPI, 1, anchorRectCache));
       }
     }
 
@@ -119,7 +119,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
             parentNode: node,
             formatMessage,
             dropTargetStyle: 'remainingHeight'
-          }, nodeViewPortalProviderAPI, -1));
+          }, nodeViewPortalProviderAPI, -1, anchorRectCache));
         }
       }
     }
@@ -144,7 +144,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
           parentNode: parent || undefined,
           formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
 
@@ -162,7 +162,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
           parentNode: parent || undefined,
           formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
   }
@@ -185,7 +185,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
         parentNode: state.doc || undefined,
         formatMessage,
         dropTargetStyle: 'default'
-      }, nodeViewPortalProviderAPI, -1, undefined, false));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache, false));
     }
     rootNodeWithPos = {
       node: root.node,
@@ -209,7 +209,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
                 api,
                 parent,
                 formatMessage
-              }, nodeViewPortalProviderAPI, undefined));
+              }, nodeViewPortalProviderAPI, anchorRectCache));
             }
           }
           return false;

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

@@ -1,5 +1,7 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 const IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 const blockLeafNodes = ['blockCard', 'rule'];
+const blockLeafNodesNext = ['blockCard', 'rule', 'extension'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -13,9 +15,9 @@ const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 export const findSurroundingNodes = (state, $pos, nodeType) => {
   const depth = $pos.depth;
-
+  const blockLeafNodeList = fg('platform_editor_block_controls_perf_opt_patch_1') ? blockLeafNodesNext : blockLeafNodes;
   // special cases like hr rule here
-  if (blockLeafNodes.includes(nodeType || '') || $pos.pos === 0) {
+  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
     const parent = $pos.node(depth);
     const node = $pos.nodeAfter;
     const index = $pos.index();

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

@@ -474,7 +474,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         const {
           decsToAdd,
           decsToRemove
-        } = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode);
+        } = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
         decorations = decorations.remove(decsToRemove);
         if (decsToAdd.length > 0) {
           decorations = decorations.add(newState.doc, decsToAdd);
@@ -650,12 +650,18 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           }
         },
         dragstart(view) {
-          var _anchorRectCache;
+          var _anchorRectCache2;
           startMeasure(EDITOR_BLOCKS_DRAG_INIT);
           if (isAdvancedLayoutEnabled) {
             defaultActiveAnchorTracker.reset();
           }
-          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
+          if (expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+            if (fg('platform_editor_block_controls_perf_opt_patch_1')) {
+              var _anchorRectCache;
+              (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.clear();
+            }
+          }
+          (_anchorRectCache2 = anchorRectCache) === null || _anchorRectCache2 === void 0 ? void 0 : _anchorRectCache2.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             ...view.state.tr.getMeta(key),
             isPMDragging: true

package/dist/es2019/ui/global-styles.js

@@ -5,10 +5,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -95,6 +97,16 @@ const extendedHoverZone = () => css({
     display: 'none'
   }
 });
+const extendedDragZone = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&& [data-drag-handler-anchor-depth="0"]${dragHandlerAnchorSelector}::after`]: {
+      width: 'var(--ak-editor-max-container-width)',
+      left: `calc((100% - var(--ak-editor-max-container-width))/2)`
+    }
+  }
+});
 const paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 const indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -321,8 +333,13 @@ const blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
-export const GlobalStylesWrapper = () => {
+export const GlobalStylesWrapper = ({
+  api
+}) => {
+  const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
+    disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
+  });
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/esm/blockControlsPlugin.js

@@ -209,7 +209,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         api: api
       }) : /*#__PURE__*/React.createElement(DragHandleMenu, {
         api: api
-      }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
+      }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+        api: api
+      }));
     }
   };
 };

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

@@ -54,7 +54,7 @@ export var canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, nod
   }
   return true;
 };
-export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode) {
+export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, existingDecs, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache) {
   if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
     unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   }
@@ -100,7 +100,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
           parentNode: node,
           formatMessage: formatMessage,
           dropTargetStyle: isEmptyContainer ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, 1));
+        }, nodeViewPortalProviderAPI, 1, anchorRectCache));
       }
     }
 
@@ -125,7 +125,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
             parentNode: node,
             formatMessage: formatMessage,
             dropTargetStyle: 'remainingHeight'
-          }, nodeViewPortalProviderAPI, -1));
+          }, nodeViewPortalProviderAPI, -1, anchorRectCache));
         }
       }
     }
@@ -152,7 +152,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
           parentNode: parent || undefined,
           formatMessage: formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
 
@@ -172,7 +172,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
           parentNode: parent || undefined,
           formatMessage: formatMessage,
           dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-        }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
+        }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
       }
     }
   }
@@ -197,7 +197,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
         parentNode: state.doc || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: 'default'
-      }, nodeViewPortalProviderAPI, -1, undefined, false));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache, false));
     }
     rootNodeWithPos = {
       node: root.node,
@@ -223,7 +223,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
                 api: api,
                 parent: parent,
                 formatMessage: formatMessage
-              }, nodeViewPortalProviderAPI, undefined));
+              }, nodeViewPortalProviderAPI, anchorRectCache));
             }
           }
           return false;

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

@@ -1,5 +1,7 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
 var blockLeafNodes = ['blockCard', 'rule'];
+var blockLeafNodesNext = ['blockCard', 'rule', 'extension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 
 /**
@@ -13,9 +15,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
  */
 var _findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
   var depth = $pos.depth;
-
+  var blockLeafNodeList = fg('platform_editor_block_controls_perf_opt_patch_1') ? blockLeafNodesNext : blockLeafNodes;
   // special cases like hr rule here
-  if (blockLeafNodes.includes(nodeType || '') || $pos.pos === 0) {
+  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
     var _parent = $pos.node(depth);
     var _node = $pos.nodeAfter;
     var _index = $pos.index();

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

@@ -465,7 +465,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       if (meta !== null && meta !== void 0 && meta.activeDropTargetNode) {
         currentActiveDropTargetNode = meta === null || meta === void 0 ? void 0 : meta.activeDropTargetNode;
         var _oldDropTargetDecs = findDropTargetDecs(decorations);
-        var _getActiveDropTargetD = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, _oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode),
+        var _getActiveDropTargetD = getActiveDropTargetDecorations(meta.activeDropTargetNode, newState, api, _oldDropTargetDecs, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache),
           decsToAdd = _getActiveDropTargetD.decsToAdd,
           decsToRemove = _getActiveDropTargetD.decsToRemove;
         decorations = decorations.remove(decsToRemove);
@@ -642,12 +642,18 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           }
         },
         dragstart: function dragstart(view) {
-          var _anchorRectCache;
+          var _anchorRectCache2;
           startMeasure(EDITOR_BLOCKS_DRAG_INIT);
           if (isAdvancedLayoutEnabled) {
             defaultActiveAnchorTracker.reset();
           }
-          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
+          if (expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)) {
+            if (fg('platform_editor_block_controls_perf_opt_patch_1')) {
+              var _anchorRectCache;
+              (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.clear();
+            }
+          }
+          (_anchorRectCache2 = anchorRectCache) === null || _anchorRectCache2 === void 0 || _anchorRectCache2.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
             isPMDragging: true
           })));

package/dist/esm/ui/global-styles.js

@@ -6,10 +6,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -81,6 +83,13 @@ var extendedHoverZone = function extendedHoverZone() {
     display: 'none'
   }));
 };
+var extendedDragZone = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
+    width: 'var(--ak-editor-max-container-width)',
+    left: "calc((100% - var(--ak-editor-max-container-width))/2)"
+  })
+});
 var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -285,8 +294,12 @@ var blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
-export var GlobalStylesWrapper = function GlobalStylesWrapper() {
+export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var api = _ref.api;
+  var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
+    disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
+  });
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types/pm-plugins/decorations-drop-target-active.d.ts

@@ -3,10 +3,11 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveDropTargetNode, ActiveNode, BlockControlsPlugin } from '../blockControlsPluginType';
+import type { AnchorRectCache } from './utils/anchor-utils';
 export declare const canMoveNodeOrSliceToPos: (state: EditorState, node: PMNode, parent: PMNode, index: number, $toPos: ResolvedPos, activeNode?: ActiveNode) => boolean | null;
-export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode) => {
+export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache) => {
     decsToAdd: Decoration[];
     decsToRemove: Decoration[];
 };

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -1,10 +1,10 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type QuickInsertButtonDecorationParams = {
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types/pm-plugins/interaction-tracking/handle-key-down.d.ts

@@ -1,2 +1,2 @@
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean;

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage?: IntlShape['formatMessage']) => (view: EditorView, event: KeyboardEvent) => boolean;

package/dist/types/pm-plugins/quick-insert-calculate-position.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
     rootAnchorName: string | undefined;
     getPos: () => number | undefined;

package/dist/types/pm-plugins/utils/check-fragment.d.ts

@@ -1,4 +1,4 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { type Fragment } from '@atlaskit/editor-prosemirror/model';
 /**
  * Check if the fragment has only one node of the specified type
  */

package/dist/types/pm-plugins/utils/drag-handle-positions.d.ts

@@ -1,4 +1,4 @@
-import { AnchorRectCache } from './anchor-utils';
+import { type AnchorRectCache } from './anchor-utils';
 export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean, parentType?: string) => string;
 export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;

package/dist/types/pm-plugins/utils/getSelection.d.ts

@@ -1,5 +1,5 @@
-import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
+import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState, NodeSelection, TextSelection, type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;

package/dist/types/pm-plugins/vanilla-quick-insert.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 type VanillaQuickInsertProps = {
     formatMessage: IntlShape['formatMessage'];
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types/ui/block-menu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 type BlockMenuProps = {
     editorView: EditorView | undefined;

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

@@ -3,7 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+import { type AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type DragHandleProps = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;

package/dist/types/ui/global-styles.d.ts

@@ -3,4 +3,8 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-export declare const GlobalStylesWrapper: () => jsx.JSX.Element;
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const GlobalStylesWrapper: ({ api, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+}) => jsx.JSX.Element;

package/dist/types/ui/quick-insert-button.d.ts

@@ -7,7 +7,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+import { type AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type Props = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types/ui/utils/anchor-name.d.ts

@@ -1,4 +1,4 @@
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 type RefreshAnchorNameParams = {
     getPos: () => number | undefined;
     view: EditorView;

package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types-ts4.5/pm-plugins/decorations-drop-target-active.d.ts

@@ -3,10 +3,11 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveDropTargetNode, ActiveNode, BlockControlsPlugin } from '../blockControlsPluginType';
+import type { AnchorRectCache } from './utils/anchor-utils';
 export declare const canMoveNodeOrSliceToPos: (state: EditorState, node: PMNode, parent: PMNode, index: number, $toPos: ResolvedPos, activeNode?: ActiveNode) => boolean | null;
-export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode) => {
+export declare const getActiveDropTargetDecorations: (activeDropTargetNode: ActiveDropTargetNode, state: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, existingDecs: Decoration[], formatMessage: IntlShape['formatMessage'], nodeViewPortalProviderAPI: PortalProviderAPI, activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache) => {
     decsToAdd: Decoration[];
     decsToRemove: Decoration[];
 };

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -1,10 +1,10 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type QuickInsertButtonDecorationParams = {
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types-ts4.5/pm-plugins/interaction-tracking/handle-key-down.d.ts

@@ -1,2 +1,2 @@
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage?: IntlShape['formatMessage']) => (view: EditorView, event: KeyboardEvent) => boolean;

package/dist/types-ts4.5/pm-plugins/quick-insert-calculate-position.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
     rootAnchorName: string | undefined;
     getPos: () => number | undefined;

package/dist/types-ts4.5/pm-plugins/utils/check-fragment.d.ts

@@ -1,4 +1,4 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { type Fragment } from '@atlaskit/editor-prosemirror/model';
 /**
  * Check if the fragment has only one node of the specified type
  */

package/dist/types-ts4.5/pm-plugins/utils/drag-handle-positions.d.ts

@@ -1,4 +1,4 @@
-import { AnchorRectCache } from './anchor-utils';
+import { type AnchorRectCache } from './anchor-utils';
 export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean, parentType?: string) => string;
 export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;

package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts

@@ -1,5 +1,5 @@
-import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
+import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState, NodeSelection, TextSelection, type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;

package/dist/types-ts4.5/pm-plugins/vanilla-quick-insert.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from './utils/anchor-utils';
+import { type AnchorRectCache } from './utils/anchor-utils';
 type VanillaQuickInsertProps = {
     formatMessage: IntlShape['formatMessage'];
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types-ts4.5/ui/block-menu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 type BlockMenuProps = {
     editorView: EditorView | undefined;

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

@@ -3,7 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+import { type AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type DragHandleProps = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -3,4 +3,8 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-export declare const GlobalStylesWrapper: () => jsx.JSX.Element;
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const GlobalStylesWrapper: ({ api, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/quick-insert-button.d.ts

@@ -7,7 +7,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+import { type AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type Props = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin>;

package/dist/types-ts4.5/ui/utils/anchor-name.d.ts

@@ -1,4 +1,4 @@
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 type RefreshAnchorNameParams = {
     getPos: () => number | undefined;
     view: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.19.14",
+	"version": "3.20.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^107.4.0",
+		"@atlaskit/editor-common": "^107.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.6.0",
+		"@atlaskit/tmp-editor-statsig": "^8.7.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -185,6 +185,9 @@
 		"platform_editor_controls_patch_15": {
 			"type": "boolean"
 		},
+		"platform_editor_block_controls_perf_opt_patch_1": {
+			"type": "boolean"
+		},
 		"platform_editor_breakout_resizing_widget_fix": {
 			"type": "boolean"
 		}