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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 11.2.1
+
+### Patch Changes
+
+- [`4642f37c59f0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4642f37c59f0f) -
+  Fix Remix button not appearing when hovering over tables in live page view mode. When the
+  `platform_editor_native_anchor_with_dnd` experiment is disabled, table rows only have
+  `data-node-anchor` (not `data-drag-handler-anchor-name`), so hover detection and anchor resolution
+  now fall back to `data-node-anchor`. Also fixes right-edge positioning for wide/max breakout
+  tables using `getBoundingClientRect`.
+- Updated dependencies
+
+## 11.2.0
+
+### Minor Changes
+
+- [`64134fd6d8fee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64134fd6d8fee) -
+  clean up platform_editor_block_control_optimise_render
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.1
 
 ### Patch Changes

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

@@ -50,16 +50,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)
@@ -69,43 +59,25 @@ var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos)
  */
 var findNodeDecs = exports.findNodeDecs = function findNodeDecs(state, decorations, from, to) {
   var newFrom = from;
-  if ((0, _experiments.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 === _decorationsCommon.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 === _decorationsCommon.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 === _decorationsCommon.TYPE_NODE_DEC;
+  });
 };
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
@@ -120,12 +92,6 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var shouldDescend = shouldDescendIntoNode(node);
     var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
     var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
-    if ((0, _experiments.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/cjs/pm-plugins/decorations-drag-handle.js

@@ -43,11 +43,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     handleOptions = _ref.handleOptions,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
-  if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
-    exposure: true
-  })) {
-    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  }
+  (0, _decorationsCommon.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 = (0, _uuid.default)();
@@ -64,9 +60,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     marks: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _marks.getActiveBlockMarks)(editorState, pos),
     destroy: function destroy(node) {
       unbind && unbind();
-      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        _reactDom.default.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -76,9 +69,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     marks: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (0, _marks.getActiveBlockMarks)(editorState, pos) : undefined,
     destroy: function destroy(node) {
       unbind && unbind();
-      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        _reactDom.default.unmountComponentAtNode(node);
-      }
     }
   };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {

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

@@ -13,7 +13,6 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var _marks = require("./utils/marks");
-var _vanillaQuickInsert = require("./vanilla-quick-insert");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
@@ -79,23 +78,6 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
       element.setAttribute('data-blocks-quick-insert-button', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
-      exposure: true
-    })) {
-      var vanillaElement = (0, _vanillaQuickInsert.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__*/(0, _react.createElement)(_quickInsertButton.QuickInsertWithVisibility, {
         api: api,

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

@@ -99,6 +99,19 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   }
   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(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]"))) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector("[".concat(_domAttrName.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 && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
@@ -111,7 +124,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
   }
   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;
@@ -184,6 +197,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       anchorName = rootElement.getAttribute((0, _domAttrName.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(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : anchorName;
+      }
     }
 
     // No need to update handle position if its already there
@@ -231,13 +249,16 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
+          var _ref4, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref4 = (_rootDOM$getAttribute = rootDOM.getAttribute((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
+          rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.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 : (0, _domAttrName.getTypeNameFromDom)(rootDOM);
         }
       }
     }
-    var nodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = isNativeAnchorSupported ? (0, _domAttrName.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 : (0, _domAttrName.getTypeNameFromDom)(rootElement);
     if (nodeType) {
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.key = exports.getDecorations = exports.getBlockControlsMeta = exports.createPlugin = exports.apply = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
@@ -56,7 +57,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 = (0, _browserApis.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((0, _element.autoScrollForElements)({
@@ -231,7 +233,7 @@ var getDecorations = exports.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 = (0, _decorationsAnchor.findNodeDecs)(state, decorations, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? pos : pos - 1, to);
+  var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(state, decorations, pos - 1, to);
 
   // Find the specific dec that the active node corresponds to
   var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -275,10 +277,11 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   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 = (0, _browserApis.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);
     }
@@ -378,7 +381,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     if (!flags.toolbarFlagsEnabled) {
       if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
-        var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? latestActiveNode.pos : latestActiveNode.pos - 1, to);
+        var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, latestActiveNode.pos - 1, to);
 
         // Find the specific dec that the active node corresponds to
         var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -441,6 +444,16 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // 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 = (0, _decorationsDragHandle.findHandleDec)(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     var _activeNode5, _activeNode6;
     var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
@@ -808,7 +821,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
     },
     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;
         }
@@ -821,7 +834,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             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 = (0, _decorationsDragHandle.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/cjs/ui/drag-handle.js

@@ -365,20 +365,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     blockCardWidth = _useState6[0],
     setBlockCardWidth = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    recalculatePosition = _useState8[0],
-    setRecalculatePosition = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    positionStylesOld = _useState8[0],
+    setPositionStylesOld = _useState8[1];
+  var _useState9 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    positionStylesOld = _useState0[0],
-    setPositionStylesOld = _useState0[1];
-  var _useState1 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    isFocused = _useState10[0],
-    setIsFocused = _useState10[1];
+    isFocused = _useState0[0],
+    setIsFocused = _useState0[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], function (states) {
       var _states$featureFlagsS, _states$selectionStat, _states$blockControls, _states$interactionSt;
       return {
@@ -414,9 +410,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   var isTopLevelNodeValue = (0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   (0, _react.useEffect)(function () {
-    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
@@ -810,60 +803,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var positionStyles = (0, _react.useMemo)(function () {
-    if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return {};
-    }
-
-    // This is a no-op to allow recalculatePosition to be used as a dependency
-    if (recalculatePosition) {
-      setRecalculatePosition(recalculatePosition);
-    }
-    var pos = getPos();
-    var $pos = (0, _expValEquals.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 = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _anchorName.refreshAnchorName)({
-      getPos: getPos,
-      view: view,
-      anchorName: anchorName
-    }) : anchorName;
-    var dom = view.dom.querySelector("[".concat((0, _domAttrName.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 = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
-    if (supportsAnchor) {
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
-      return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
-      }, bottom);
-    }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
-    return _objectSpread({
-      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
-    }, height);
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
     var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -911,9 +850,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   (0, _react.useEffect)(function () {
-    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
@@ -936,28 +872,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePositionOld, view.dom, anchorName, nodeType]);
-  (0, _react.useEffect)(function () {
-    if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
-    var cleanUpTransitionListener;
-    if (nodeType === 'extension' || nodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
-      if (!dom) {
-        return;
-      }
-      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
-        type: 'transitionend',
-        listener: function listener() {
-          setRecalculatePosition(!recalculatePosition);
-        }
-      });
-    }
-    return function () {
-      var _cleanUpTransitionLis2;
-      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
-    };
-  }, [view, anchorName, nodeType, recalculatePosition]);
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
@@ -966,9 +880,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-          view.focus();
-        }
+        view.focus();
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -1084,7 +996,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleMouseUp : undefined,
         onClick: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
@@ -1138,7 +1050,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: (0, _experiments.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],
@@ -1168,7 +1080,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: (0, _experiments.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/cjs/ui/global-styles.js

@@ -12,7 +12,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-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");
@@ -249,89 +248,6 @@ var globalStyles = function globalStyles() {
     }
   });
 };
-var quickInsertStyles = function quickInsertStyles() {
-  return (0, _react.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: _constants.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(_styles.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(_styles.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: _constants.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 = (0, _react.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': {
@@ -495,6 +411,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
       exposure: true
     }) ? (0, _expValEquals.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, (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, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };