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

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

@@ -42,16 +42,6 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
     exposure: true
   }) ? true : ignore_nodes.includes(node.type.name);
 };
-const getPositionBeforeNodeAtPos = (state, pos) => {
-  if (pos <= 0 || pos >= state.doc.nodeSize - 2) {
-    return pos;
-  }
-  const $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)
@@ -61,39 +51,23 @@ const getPositionBeforeNodeAtPos = (state, pos) => {
  */
 export const findNodeDecs = (state, decorations, from, to) => {
   let 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 [];
-    }
-    let decs = decorations.find(newFrom, to, spec => spec.type === TYPE_NODE_DEC);
+  let 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(dec => {
-        return dec.from >= (newFrom || 0) && dec.from < to;
-      });
-    }
-    return decs;
-  } else {
-    let 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, spec => spec.type === TYPE_NODE_DEC);
+  // return empty array if range reversed
+  if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
+    return [];
   }
+  return decorations.find(newFrom, newTo, spec => spec.type === TYPE_NODE_DEC);
 };
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
@@ -108,12 +82,6 @@ export const nodeDecorations = (newState, from, to) => {
     const shouldDescend = shouldDescendIntoNode(node);
     const anchorName = getNodeAnchor(node);
     const 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/es2019/pm-plugins/decorations-drag-handle.js

@@ -34,11 +34,7 @@ export const dragHandleDecoration = ({
   anchorRectCache,
   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');
   let unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
@@ -55,9 +51,6 @@ export const dragHandleDecoration = ({
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : getActiveBlockMarks(editorState, pos),
     destroy: node => {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -67,9 +60,6 @@ export const dragHandleDecoration = ({
     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: node => {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   };
   return Decoration.widget(pos, (view, getPosUnsafe) => {

package/dist/es2019/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';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
@@ -70,23 +69,6 @@ export const quickInsertButtonDecoration = ({
       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
-    })) {
-      const vanillaElement = createVanillaButton({
-        formatMessage,
-        api,
-        view,
-        getPos,
-        cleanupCallbacks,
-        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
-        anchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache
-      });
-      element.appendChild(vanillaElement);
-      return element;
-    }
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(QuickInsertWithVisibility, {
       api,
       getPos,

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

@@ -91,6 +91,19 @@ export const handleMouseOver = (view, event, api) => {
   }
   let 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 _ref, _target$closest;
+    rootElement = (_ref = (_target$closest = target === null || target === void 0 ? void 0 : target.closest(`[${NODE_ANCHOR_ATTR_NAME}]`)) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector(`[${NODE_ANCHOR_ATTR_NAME}]`) : null) !== null && _ref !== void 0 ? _ref : 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')) {
@@ -103,7 +116,7 @@ export const 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;
@@ -176,6 +189,11 @@ export const 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
@@ -223,13 +241,16 @@ export const handleMouseOver = (view, event, api) => {
       if (targetPos !== rootPos) {
         const 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 _ref2, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref2 = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref2 !== void 0 ? _ref2 : 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);
         }
       }
     }
-    const nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    const 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/es2019/pm-plugins/main.js

@@ -1,4 +1,5 @@
 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';
@@ -44,7 +45,8 @@ const isHTMLElement = element => {
   return element instanceof HTMLElement;
 };
 const destroyFn = (api, editorView) => {
-  const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var _getDocument$querySel, _getDocument;
+  const 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;
   const cleanupFn = [];
   if (scrollable) {
     cleanupFn.push(autoScrollForElements({
@@ -224,7 +226,7 @@ export const getDecorations = state => {
 };
 const getDecorationAtPos = (state, decorations, pos, to) => {
   // Find the newly minted node decs that touch the active node
-  const findNewNodeDecs = findNodeDecs(state, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? pos : pos - 1, to);
+  const findNewNodeDecs = findNodeDecs(state, decorations, pos - 1, to);
 
   // Find the specific dec that the active node corresponds to
   const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === pos);
@@ -266,10 +268,11 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   const meta = tr.getMeta(key);
   const hasDocumentSizeBreachedThreshold = api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode$shar.limitedModePluginKey.getState(newState)) === null || _api$limitedMode$shar2 === void 0 ? void 0 : _api$limitedMode$shar2.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().
      */
-    const editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    const 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);
     }
@@ -369,7 +372,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     if (!flags.toolbarFlagsEnabled) {
       if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
-        const findNewNodeDecs = findNodeDecs(newState, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? latestActiveNode.pos : latestActiveNode.pos - 1, to);
+        const findNewNodeDecs = findNodeDecs(newState, decorations, latestActiveNode.pos - 1, to);
 
         // Find the specific dec that the active node corresponds to
         const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos);
@@ -430,6 +433,16 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // 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) {
+    const allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     var _activeNode5, _activeNode6;
     const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
@@ -705,7 +718,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     },
     props: {
       decorations: state => {
-        var _api$limitedMode2, _api$limitedMode2$sha, _api$editorDisabled, _api$editorDisabled$s, _key$getState2;
+        var _api$limitedMode2, _api$limitedMode2$sha, _api$editorDisabled, _api$editorDisabled$s, _key$getState2, _api$editorViewMode3, _api$editorViewMode3$;
         if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2$sha = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2$sha !== void 0 && _api$limitedMode2$sha.enabled) {
           return;
         }
@@ -718,7 +731,16 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
             return;
           }
         }
-        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        let 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 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
+          const handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
+          if (handleDecs.length > 0) {
+            decorationSet = decorationSet.remove(handleDecs);
+          }
+        }
+        return decorationSet;
       },
       handleDOMEvents: {
         drop(view, event) {

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

@@ -350,7 +350,6 @@ export const DragHandle = ({
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
   const [blockCardWidth, setBlockCardWidth] = useState(768);
-  const [recalculatePosition, setRecalculatePosition] = useState(false);
   const [positionStylesOld, setPositionStylesOld] = useState({
     display: 'none'
   });
@@ -391,9 +390,6 @@ export const DragHandle = ({
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   const isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   useEffect(() => {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
@@ -788,62 +784,6 @@ export const DragHandle = ({
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  const positionStyles = useMemo(() => {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return {};
-    }
-
-    // This is a no-op to allow recalculatePosition to be used as a dependency
-    if (recalculatePosition) {
-      setRecalculatePosition(recalculatePosition);
-    }
-    const pos = getPos();
-    const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
-    const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
-    const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
-    const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
-    const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
-    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
-      getPos,
-      view,
-      anchorName
-    }) : anchorName;
-    const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
-    const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
-    const isBlockCard = nodeType === 'blockCard';
-    const isEmbedCard = nodeType === 'embedCard';
-    const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
-    let innerContainer = null;
-    if (dom) {
-      if (isEmbedCard) {
-        innerContainer = dom.querySelector('.rich-media-item');
-      } else if (hasResizer) {
-        innerContainer = dom.querySelector('.resizer-item');
-      } else if (isExtension) {
-        innerContainer = dom.querySelector('.extension-container[data-layout]');
-      } else if (isBlockCard) {
-        //specific to datasource blockCard
-        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
-      }
-    }
-    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    const isSticky = shouldBeSticky(nodeType);
-    if (supportsAnchor) {
-      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
-      return {
-        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(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
-      };
-    }
-    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
-    return {
-      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: getTopPosition(dom, nodeType),
-      ...height
-    };
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   const calculatePositionOld = useCallback(() => {
     const pos = getPos();
     const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -893,9 +833,6 @@ export const DragHandle = ({
     };
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(() => {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     let cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
@@ -918,28 +855,6 @@ export const DragHandle = ({
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
   }, [calculatePositionOld, view.dom, anchorName, nodeType]);
-  useEffect(() => {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
-    let cleanUpTransitionListener;
-    if (nodeType === 'extension' || nodeType === 'embedCard') {
-      const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
-      if (!dom) {
-        return;
-      }
-      cleanUpTransitionListener = bind(dom, {
-        type: 'transitionend',
-        listener: () => {
-          setRecalculatePosition(!recalculatePosition);
-        }
-      });
-    }
-    return () => {
-      var _cleanUpTransitionLis2;
-      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
-    };
-  }, [view, anchorName, nodeType, recalculatePosition]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       const id = requestAnimationFrame(() => {
@@ -948,9 +863,7 @@ export const DragHandle = ({
       });
       return () => {
         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]);
@@ -1065,7 +978,7 @@ export const DragHandle = ({
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: !editorExperiment('platform_editor_controls', 'variant1') ? 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,
@@ -1117,7 +1030,7 @@ export const DragHandle = ({
   const stickyWithTooltip = () => 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],
@@ -1145,7 +1058,7 @@ export const DragHandle = ({
   const stickyWithoutTooltip = () => 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/es2019/ui/global-styles.js

@@ -5,11 +5,10 @@
 // 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';
@@ -301,87 +300,6 @@ const globalStyles = () => css({
     marginTop: '0 !important'
   }
 });
-const quickInsertStyles = () => 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': `${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': `${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)"} 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)"} 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'
-    }
-  }
-});
 const 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': {
@@ -581,6 +499,6 @@ export const GlobalStylesWrapper = ({
       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)]
   });
 };