@atlaskit/editor-plugin-block-controls 11.1.1 → 11.2.1

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

@@ -43,16 +43,6 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
     exposure: true
   }) ? true : ignore_nodes.includes(node.type.name);
 };
-var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos) {
-  if (pos <= 0 || pos >= state.doc.nodeSize - 2) {
-    return pos;
-  }
-  var $pos = state.doc.resolve(pos);
-  if ($pos.depth > 0) {
-    return $pos.before();
-  }
-  return pos;
-};
 
 /**
  * Find node decorations corresponding to nodes with starting position between from and to (non-inclusive)
@@ -62,43 +52,25 @@ var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos)
  */
 export var findNodeDecs = function findNodeDecs(state, decorations, from, to) {
   var newFrom = from;
-  if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-    // return empty array if range reversed
-    if (typeof to === 'number' && typeof newFrom === 'number' && newFrom > to) {
-      return [];
-    }
-    var decs = decorations.find(newFrom, to, function (spec) {
-      return spec.type === TYPE_NODE_DEC;
-    });
+  var newTo = to;
 
-    // Prosemirror finds any decorations that overlap with the provided position range, but we don't want to include decorations of nodes that start outside of the range
-    if (typeof to === 'number' && typeof newFrom === 'number') {
-      decs = decs.filter(function (dec) {
-        return dec.from >= (newFrom || 0) && dec.from < to;
-      });
-    }
-    return decs;
-  } else {
-    var newTo = to;
-
-    // make it non-inclusive
-    if (newFrom !== undefined) {
-      newFrom++;
-    }
+  // make it non-inclusive
+  if (newFrom !== undefined) {
+    newFrom++;
+  }
 
-    // make it non-inclusive
-    if (newTo !== undefined) {
-      newTo--;
-    }
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
 
-    // return empty array if range reversed
-    if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
-      return [];
-    }
-    return decorations.find(newFrom, newTo, function (spec) {
-      return spec.type === TYPE_NODE_DEC;
-    });
+  // return empty array if range reversed
+  if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
+    return [];
   }
+  return decorations.find(newFrom, newTo, function (spec) {
+    return spec.type === TYPE_NODE_DEC;
+  });
 };
 export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
@@ -113,12 +85,6 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
     var shouldDescend = shouldDescendIntoNode(node);
     var anchorName = getNodeAnchor(node);
     var nodeTypeWithLevel = getNodeTypeWithLevel(node);
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      // We don't want to create decorations for nodes that start outside of the provided position range
-      if (pos < getPositionBeforeNodeAtPos(newState, docFrom)) {
-        return shouldDescend;
-      }
-    }
 
     // Doesn't descend into a node
     if (node.isInline) {

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

@@ -35,11 +35,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     handleOptions = _ref.handleOptions,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
-  if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
-    exposure: true
-  })) {
-    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  }
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
@@ -56,9 +52,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : getActiveBlockMarks(editorState, pos),
     destroy: function destroy(node) {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -68,9 +61,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? getActiveBlockMarks(editorState, pos) : undefined,
     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) {

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

@@ -7,7 +7,6 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
 import { getActiveBlockMarks } from './utils/marks';
-import { createVanillaButton } from './vanilla-quick-insert';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
@@ -71,23 +70,6 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
       element.setAttribute('data-blocks-quick-insert-button', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    if (editorExperiment('platform_editor_block_control_optimise_render', true, {
-      exposure: true
-    })) {
-      var vanillaElement = createVanillaButton({
-        formatMessage: formatMessage,
-        api: api,
-        view: view,
-        getPos: getPos,
-        cleanupCallbacks: cleanupCallbacks,
-        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
-        anchorName: anchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache: anchorRectCache
-      });
-      element.appendChild(vanillaElement);
-      return element;
-    }
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(QuickInsertWithVisibility, {
         api: api,

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

@@ -92,6 +92,19 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
 
+  // Fallback for table nodes in view mode: the table-anchor-names plugin sets data-node-anchor on
+  // the first <tr> element.
+  // - When platform_editor_native_anchor_with_dnd is disabled, the primary closest() uses
+  //   [data-drag-handler-anchor-name] and misses table rows. Try data-node-anchor via closest().
+  // - For wide/max breakout tables, hovering in the left/right margin area of the full-viewport-
+  //   width breakout wrapper (ak-editor-breakout-mark) sets event.target to the wrapper div, which
+  //   has no anchor attribute. Use querySelector to find the [data-node-anchor] descendant inside.
+  // Both cases apply only in view mode with right-side remix controls.
+  if (!rootElement && isViewMode && rightSideControlsEnabled) {
+    var _ref3, _target$closest;
+    rootElement = (_ref3 = (_target$closest = target === null || target === void 0 ? void 0 : target.closest("[".concat(NODE_ANCHOR_ATTR_NAME, "]"))) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector("[".concat(NODE_ANCHOR_ATTR_NAME, "]")) : null) !== null && _ref3 !== void 0 ? _ref3 : null;
+  }
+
   // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
   // block from the container's anchor so activeNode stays set and the button remains visible.
   if (!rootElement && rightSideControlsEnabled && fg('confluence_remix_button_right_side_block_fg')) {
@@ -104,7 +117,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
   }
   if (rootElement) {
-    var _rootElement$parentEl;
+    var _rootElement$parentEl, _rootElement$getAttri2;
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -177,6 +190,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       anchorName = rootElement.getAttribute(getAnchorAttrName());
+      // Fallback for table nodes that only have data-node-anchor (not data-drag-handler-anchor-name).
+      if (!anchorName) {
+        var _rootElement$getAttri;
+        anchorName = (_rootElement$getAttri = rootElement.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : anchorName;
+      }
     }
 
     // No need to update handle position if its already there
@@ -224,13 +242,16 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
+          var _ref4, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref4 = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
+          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : // Fallback: breakout mark wrappers have no data-drag-handler-node-type;
+          // use data-prosemirror-node-name instead.
+          (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : getTypeNameFromDom(rootDOM);
         }
       }
     }
-    var nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : // Fallback for table nodes: tr has data-prosemirror-node-name but not data-drag-handler-node-type.
+    (_rootElement$getAttri2 = rootElement.getAttribute('data-drag-handler-node-type')) !== null && _rootElement$getAttri2 !== void 0 ? _rootElement$getAttri2 : getTypeNameFromDom(rootElement);
     if (nodeType) {
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {

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

@@ -5,6 +5,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import rafSchedule from 'raf-schd';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
@@ -49,7 +50,8 @@ var isHTMLElement = function isHTMLElement(element) {
   return element instanceof HTMLElement;
 };
 var destroyFn = function destroyFn(api, editorView) {
-  var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var _getDocument$querySel, _getDocument;
+  var scrollable = (_getDocument$querySel = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel !== void 0 ? _getDocument$querySel : null;
   var cleanupFn = [];
   if (scrollable) {
     cleanupFn.push(autoScrollForElements({
@@ -224,7 +226,7 @@ export var getDecorations = function getDecorations(state) {
 };
 var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to) {
   // Find the newly minted node decs that touch the active node
-  var findNewNodeDecs = findNodeDecs(state, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? pos : pos - 1, to);
+  var findNewNodeDecs = findNodeDecs(state, decorations, pos - 1, to);
 
   // Find the specific dec that the active node corresponds to
   var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -268,10 +270,11 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var meta = tr.getMeta(key);
   var hasDocumentSizeBreachedThreshold = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey.getState(newState)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold;
   if (hasDocumentSizeBreachedThreshold) {
+    var _getDocument$querySel2, _getDocument2;
     /**
      * INFO: This if statement is a duplicate of the logic in destroy(). When the threshold is breached and we enter limited mode, we want to trigger the cleanup logic in destroy().
      */
-    var editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    var editorContentArea = (_getDocument$querySel2 = (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel2 !== void 0 ? _getDocument$querySel2 : null;
     if (editorContentArea && resizeObserverWidth) {
       resizeObserverWidth.unobserve(editorContentArea);
     }
@@ -371,7 +374,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     if (!flags.toolbarFlagsEnabled) {
       if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
-        var findNewNodeDecs = findNodeDecs(newState, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? latestActiveNode.pos : latestActiveNode.pos - 1, to);
+        var findNewNodeDecs = findNodeDecs(newState, decorations, latestActiveNode.pos - 1, to);
 
         // Find the specific dec that the active node corresponds to
         var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -434,6 +437,16 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // Remove handle dec when editor is blurred
     shouldRemoveHandle = shouldRemoveHandle || (meta === null || meta === void 0 ? void 0 : meta.editorBlurred);
   }
+
+  // In view mode with right-side controls, remove any lingering drag handle decorations
+  // (they may carry over from edit mode). Only remove drag handles specifically, not
+  // the remix button decorations (those are managed separately via showInViewMode).
+  if (isViewMode && rightSideControlsEnabled) {
+    var allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     var _activeNode5, _activeNode6;
     var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
@@ -802,7 +815,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
     },
     props: {
       decorations: function decorations(state) {
-        var _api$limitedMode2, _api$editorDisabled, _key$getState2;
+        var _api$limitedMode2, _api$editorDisabled, _key$getState2, _api$editorViewMode3;
         if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.enabled) {
           return;
         }
@@ -815,7 +828,16 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             return;
           }
         }
-        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        // In view mode with right-side controls, remove any lingering drag-handle decorations
+        // (created in edit mode) that may not have been cleaned up on mode switch.
+        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+          var handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
+          if (handleDecs.length > 0) {
+            decorationSet = decorationSet.remove(handleDecs);
+          }
+        }
+        return decorationSet;
       },
       handleDOMEvents: {
         drop: function drop(view, event) {

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

@@ -361,20 +361,16 @@ export var DragHandle = function DragHandle(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     blockCardWidth = _useState6[0],
     setBlockCardWidth = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    recalculatePosition = _useState8[0],
-    setRecalculatePosition = _useState8[1];
-  var _useState9 = useState({
+  var _useState7 = useState({
       display: 'none'
     }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    positionStylesOld = _useState8[0],
+    setPositionStylesOld = _useState8[1];
+  var _useState9 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = _slicedToArray(_useState9, 2),
-    positionStylesOld = _useState0[0],
-    setPositionStylesOld = _useState0[1];
-  var _useState1 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
-    _useState10 = _slicedToArray(_useState1, 2),
-    isFocused = _useState10[0],
-    setIsFocused = _useState10[1];
+    isFocused = _useState0[0],
+    setIsFocused = _useState0[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], function (states) {
       var _states$featureFlagsS, _states$selectionStat, _states$blockControls, _states$interactionSt;
       return {
@@ -410,9 +406,6 @@ export var DragHandle = function DragHandle(_ref) {
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   var isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   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("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
@@ -806,60 +799,6 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  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 = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(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') ? refreshAnchorName({
-      getPos: getPos,
-      view: view,
-      anchorName: anchorName
-    }) : anchorName;
-    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
-    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
-    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, isTopLevelNodeValue, 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(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
-      }, bottom);
-    }
-    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".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, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = useCallback(function () {
     var pos = getPos();
     var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -907,9 +846,6 @@ export var DragHandle = function DragHandle(_ref) {
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(function () {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
@@ -932,28 +868,6 @@ export var DragHandle = function DragHandle(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [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("[".concat(getAnchorAttrName(), "=\"").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) {
       var id = requestAnimationFrame(function () {
@@ -962,9 +876,7 @@ export var DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-          view.focus();
-        }
+        view.focus();
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -1080,7 +992,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') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        style: !editorExperiment('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: editorExperiment('platform_editor_block_menu', true) ? handleMouseUp : undefined,
         onClick: editorExperiment('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
@@ -1134,7 +1046,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+      style: positionStylesOld
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       xcss: [dragHandleContainerStyles],
@@ -1164,7 +1076,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+      style: positionStylesOld
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       xcss: [dragHandleContainerStyles],

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

@@ -6,11 +6,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, Global, jsx } from '@emotion/react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported } from '@atlaskit/editor-common/styles';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
-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 } from './consts';
@@ -242,89 +241,6 @@ var globalStyles = function globalStyles() {
     }
   });
 };
-var quickInsertStyles = function quickInsertStyles() {
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-button': {
-      backgroundColor: 'transparent',
-      top: "var(--top-override,8px)",
-      position: 'sticky',
-      boxSizing: 'border-box',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: "var(--ds-space-300, 24px)",
-      width: "var(--ds-space-300, 24px)",
-      border: 'none',
-      borderRadius: "var(--ds-radius-full, 9999px)",
-      zIndex: layers.card(),
-      outline: 'none',
-      cursor: 'pointer',
-      color: "var(--ds-icon-subtle, #505258)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      '--top-override': "".concat(tableControlsSpacing, "px")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      '--top-override': "".concat(tableControlsSpacing, "px")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-button:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-button:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-button:focus': {
-      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-visible-container': {
-      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
-      opacity: 1,
-      visibility: 'visible'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-invisible-container': {
-      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
-      opacity: 0,
-      visibility: 'hidden'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.blocks-quick-insert-tooltip': {
-      zIndex: layers.tooltip(),
-      borderRadius: "var(--ds-radius-small, 4px)",
-      padding: "var(--ds-space-050, 4px)".concat(" 0"),
-      boxSizing: 'border-box',
-      maxWidth: '240px',
-      backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
-      color: "var(--ds-text-inverse, #FFFFFF)",
-      font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-      insetBlockStart: "var(--ds-space-0, 0px)",
-      insetInlineStart: "var(--ds-space-0, 0px)",
-      overflowWrap: 'break-word',
-      paddingBlockEnd: "var(--ds-space-025, 2px)",
-      paddingBlockStart: "var(--ds-space-025, 2px)",
-      paddingInlineEnd: "var(--ds-space-075, 6px)",
-      paddingInlineStart: "var(--ds-space-075, 6px)",
-      wordWrap: 'break-word',
-      pointerEvents: 'none',
-      userSelect: 'none',
-      // Based on: platform/packages/design-system/motion/src/entering/keyframes-motion.tsx
-      transition: 'opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out',
-      '@media (prefers-reduced-motion: reduce)': {
-        transition: 'none'
-      }
-    }
-  });
-};
 var topLevelNodeMarginStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror': {
@@ -488,6 +404,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "11.1.1",
+	"version": "11.2.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^10.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^10.1.0",
 		"@atlaskit/editor-plugin-analytics": "^10.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^10.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^12.0.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-plugin-interaction": "^19.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^7.0.0",
 		"@atlaskit/editor-plugin-metrics": "^11.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^10.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^10.1.0",
 		"@atlaskit/editor-plugin-selection": "^10.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^10.0.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^23.1.0",
-		"@atlaskit/tmp-editor-statsig": "^64.0.0",
+		"@atlaskit/tmp-editor-statsig": "^65.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.5.0",
+		"@atlaskit/editor-common": "^114.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"