@atlaskit/editor-plugin-breakout 30.0.15 → 30.0.17

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-breakout
 
+## 30.0.17
+
+### Patch Changes
+
+- Updated dependencies
+
+## 30.0.16
+
+### Patch Changes
+
+- [`49fcffc905097`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49fcffc905097) -
+  Clean up experiment `platform_editor_use_vanilla_components`, keeping the shipped vanilla DOM
+  tooltip implementations and removing the React-based control paths.
+- Updated dependencies
+
 ## 30.0.15
 
 ### Patch Changes

package/dist/cjs/pm-plugins/pragmatic-resizer.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resizeHandleMessage = exports.createPragmaticResizer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _breakout = require("@atlaskit/editor-common/messages/breakout");
 var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
@@ -18,8 +15,6 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/utils
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var getNodeName = function getNodeName(nodeName) {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -51,36 +46,6 @@ var resizeHandleMessage = exports.resizeHandleMessage = {
   bodiedExtension: _breakout.messages.resizeExtension,
   multiBodiedExtension: _breakout.messages.resizeExtension
 };
-/**
- * Remove during `platform_editor_use_vanilla_components` cleanup — replaced by
- * `createHandleTooltip`, which does the same job without a React tree per resize handle.
- */
-var RailWithTooltip = function RailWithTooltip(_ref) {
-  var rail = _ref.rail,
-    target = _ref.target,
-    intl = _ref.intl;
-  var _useState = (0, _react.useState)('node'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    nodeName = _useState2[0],
-    setNodeName = _useState2[1];
-  (0, _react.useLayoutEffect)(function () {
-    var node = target.querySelector('[data-prosemirror-node-name]');
-    var name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
-    setNodeName(name);
-  }, [target]);
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    content: intl.formatMessage(resizeHandleMessage[nodeName]),
-    position: "mouse"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "pm-breakout-resize-handle-rail-inside-tooltip",
-    ref: function ref(el) {
-      if (el && rail.parentNode !== el) {
-        el.appendChild(rail);
-      }
-    }
-  }));
-};
 
 /** Identifies the vanilla tooltip for tests and debugging. */
 var TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
@@ -93,17 +58,17 @@ var TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
 var TOOLTIP_CLASS_NAMES = "".concat(_vanillaTooltip.VANILLA_TOOLTIP_DEFAULT_CLASS, " ").concat(TOOLTIP_CLASS_NAME);
 
 /**
- * Vanilla DOM equivalent of `RailWithTooltip`, behind `platform_editor_use_vanilla_components`.
+ * Builds the resize handle's tooltip as plain DOM.
  *
  * Anchored to a point rather than to the rail, which spans the node's full height and would strand
- * the tooltip at the top of a tall node. This reproduces the control arm's `position="mouse"`,
+ * the tooltip at the top of a tall node. This reproduces the ADS tooltip's `position="mouse"`,
  * which latches the cursor as the tooltip opens and does not move it afterwards — so no cursor
  * tracking is needed, just one style write per hover.
  */
-var createHandleTooltip = function createHandleTooltip(_ref2) {
-  var anchor = _ref2.anchor,
-    intl = _ref2.intl,
-    target = _ref2.target;
+var createHandleTooltip = function createHandleTooltip(_ref) {
+  var anchor = _ref.anchor,
+    intl = _ref.intl,
+    target = _ref.target;
   // Only correct once ProseMirror has populated `contentDOM`, so callers must build on first
   // hover — earlier reads fall back to the generic 'node' label.
   var node = target.querySelector('[data-prosemirror-node-name]');
@@ -117,16 +82,15 @@ var createHandleTooltip = function createHandleTooltip(_ref2) {
   undefined,
   // No `onShow`.
   undefined,
-  // Below the cursor, matching the control arm's `position="mouse"`.
+  // Below the cursor, matching the ADS tooltip's `position="mouse"`.
   'bottom');
 };
-var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref3) {
-  var target = _ref3.target,
-    _onDragStart = _ref3.onDragStart,
-    onDrag = _ref3.onDrag,
-    _onDrop = _ref3.onDrop,
-    intl = _ref3.intl,
-    nodeViewPortalProviderAPI = _ref3.nodeViewPortalProviderAPI;
+var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref2) {
+  var target = _ref2.target,
+    _onDragStart = _ref2.onDragStart,
+    onDrag = _ref2.onDrag,
+    _onDrop = _ref2.onDrop,
+    intl = _ref2.intl;
   var state = 'default';
   var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions') || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_left_resize_handle');
   var createHandle = function createHandle(side) {
@@ -151,33 +115,19 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     rail.appendChild(thumb);
 
     // Marks the point the pointer entered the rail, and anchors the tooltip there: zero height
-    // so it is a point not a box, full rail width so the tooltip centres like the control arm.
+    // so it is a point not a box, full rail width so the tooltip centres on the cursor.
     //
     // Must stay a child of `rail` — `openTooltipAt` sets `top` from the rail's `offsetY`, which
     // only lines up while the rail is the containing block. jsdom cannot catch a wrong parent.
     //
-    // Not built on the control arm, which must keep byte-identical DOM.
-    var tooltipAnchor;
-    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
-      // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
-      tooltipAnchor = document.createElement('div');
-      tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
-      rail.appendChild(tooltipAnchor);
-    }
+    // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
+    var tooltipAnchor = document.createElement('div');
+    tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
+    rail.appendChild(tooltipAnchor);
     var tooltipContainer = document.createElement('div');
     tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
     handle.appendChild(tooltipContainer);
     handle.appendChild(handleHitBox);
-    var key = crypto.randomUUID();
-    var renderTooltip = function renderTooltip() {
-      return nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/_react.default.createElement(RailWithTooltip, {
-          rail: rail,
-          target: target,
-          intl: intl
-        });
-      }, tooltipContainer, key);
-    };
     var vanillaTooltip;
 
     // Tracks whether there is anything to tear down: the tooltip mounts on first hover and so
@@ -188,34 +138,22 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
         return;
       }
       isTooltipMounted = true;
-
-      // `tooltipAnchor` is always set when the experiment is on; the check also narrows it.
-      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components') && tooltipAnchor) {
-        vanillaTooltip = createHandleTooltip({
-          anchor: tooltipAnchor,
-          target: target,
-          intl: intl
-        });
-        return;
-      }
-
-      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
-      // identical to the pre-mount state below.
-      renderTooltip();
+      vanillaTooltip = createHandleTooltip({
+        anchor: tooltipAnchor,
+        target: target,
+        intl: intl
+      });
     };
 
-    // React 18 registers ~130 native event listeners on every portal container (see
-    // `listenToAllSupportedEvents`), and never removes them. Mounting this tooltip up front
-    // costs that for every resizable node in the document — two containers per node when the
-    // left handle is enabled — even though only the hovered handle can ever show a tooltip.
+    // The tooltip is built on the first `mouseenter` of the node (see `registerEvents` below)
+    // rather than up front, so a handle that is never hovered costs nothing. The rail has
+    // `opacity: 0` until the pointer is inside the node, so the pre-mount DOM is never
+    // visible, and the `mouseenter` fires on the whole node — long before the pointer reaches
+    // the 7px handle.
     //
-    // Instead, park `rail` directly in the wrapper and mount the tooltip on the first
-    // `mouseenter` of the node (see `registerEvents` below). The rail has `opacity: 0` until
-    // the pointer is inside the node, so the pre-mount DOM is never visible, and the
-    // `mouseenter` fires on the whole node — long before the pointer reaches the 7px handle.
-    //
-    // Parking the rail also needs `width: 100%`: without the ADS tooltip's wrappers (stretched
-    // by `pragmaticResizerStylesForTooltip`) it would size to its content as a flex item.
+    // Parking the rail in the wrapper also needs `width: 100%`: without the ADS tooltip's
+    // wrappers (stretched by `pragmaticResizerStylesForTooltip`) it would size to its content
+    // as a flex item.
     rail.style.width = '100%';
     tooltipContainer.appendChild(rail);
     return {
@@ -226,24 +164,11 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
       handleHitBox: handleHitBox,
       mountTooltip: mountTooltip,
       destroyTooltip: function destroyTooltip() {
-        // Re-read is safe: the gate is fixed for the page, so it matches what `mountTooltip`
-        // saw. At cleanup, keep this body and delete the control arm below.
-        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
-          // May never have mounted, and there is no portal to remove either way.
-          if (vanillaTooltip) {
-            vanillaTooltip.destroy();
-            vanillaTooltip = undefined;
-          }
-          isTooltipMounted = false;
-          return;
+        // May never have mounted, as the tooltip is built on first hover.
+        if (vanillaTooltip) {
+          vanillaTooltip.destroy();
+          vanillaTooltip = undefined;
         }
-
-        // The tooltip mounts on first hover, so `destroyTooltip` can be reached without
-        // anything having been mounted.
-        if (!isTooltipMounted) {
-          return;
-        }
-        nodeViewPortalProviderAPI.remove(key);
         isTooltipMounted = false;
       }
     };
@@ -254,8 +179,8 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
   var registerHandle = function registerHandle(handleElement, handleSide) {
     return (0, _elementAdapter.draggable)({
       element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
-        var nativeSetDragImage = _ref4.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage: nativeSetDragImage
         });
@@ -270,13 +195,11 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
         state = 'resizing';
         handleElement.classList.add('pm-breakout-resize-handle-container--active');
 
-        // The ADS tooltip hides itself on press; the vanilla one has no pointer-press
-        // listener, and its anchor moves with the rail, so it would follow the drag.
-        // Tearing it down hides it immediately; the next hover rebuilds it.
-        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
-          rightHandle.destroyTooltip();
-          leftHandle === null || leftHandle === void 0 || leftHandle.destroyTooltip();
-        }
+        // The tooltip has no pointer-press listener, and its anchor moves with the rail,
+        // so it would follow the drag. Tearing it down hides it immediately; the next
+        // hover rebuilds it.
+        rightHandle.destroyTooltip();
+        leftHandle === null || leftHandle === void 0 || leftHandle.destroyTooltip();
         _onDragStart(args);
       },
       onDrag: onDrag,
@@ -316,24 +239,20 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
       type: 'mouseenter',
       listener: function listener(event) {
         // Mounted on first hover rather than up front, so a handle that is never
-        // hovered costs no portal and no listeners.
+        // hovered costs nothing.
         rightHandle.mountTooltip();
         leftHandle === null || leftHandle === void 0 || leftHandle.mountTooltip();
-        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
-          // After the mount above, so the tooltip always exists to be opened.
-          openTooltipAt(hoverAnchor, event);
-        }
+        // After the mount above, so the tooltip always exists to be opened.
+        openTooltipAt(hoverAnchor, event);
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
       }
     }), (0, _bindEventListener.bind)(element, {
       type: 'mouseleave',
       listener: function listener() {
-        // Ahead of the resize guard below: the ADS tooltip hides whenever the pointer
+        // Ahead of the resize guard below: the tooltip hides whenever the pointer
         // leaves the rail, including part-way through a resize.
-        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
-          closeTooltip(hoverAnchor);
-        }
+        closeTooltip(hoverAnchor);
         if (state === 'resizing') {
           return;
         }

package/dist/cjs/pm-plugins/resizing-mark-view.js

@@ -141,8 +141,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
       var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
           target: contentDOM
         }, callbacks), {}, {
-          intl: this.intl,
-          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+          intl: this.intl
         })),
         leftHandle = _createPragmaticResiz.leftHandle,
         rightHandle = _createPragmaticResiz.rightHandle,

package/dist/es2019/pm-plugins/pragmatic-resizer.js

@@ -1,4 +1,3 @@
-import React, { useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { messages } from '@atlaskit/editor-common/messages/breakout';
 import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
@@ -8,7 +7,6 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
 const getNodeName = nodeName => {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -40,34 +38,6 @@ export const resizeHandleMessage = {
   bodiedExtension: messages.resizeExtension,
   multiBodiedExtension: messages.resizeExtension
 };
-/**
- * Remove during `platform_editor_use_vanilla_components` cleanup — replaced by
- * `createHandleTooltip`, which does the same job without a React tree per resize handle.
- */
-const RailWithTooltip = ({
-  rail,
-  target,
-  intl
-}) => {
-  const [nodeName, setNodeName] = useState('node');
-  useLayoutEffect(() => {
-    const node = target.querySelector('[data-prosemirror-node-name]');
-    const name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
-    setNodeName(name);
-  }, [target]);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: intl.formatMessage(resizeHandleMessage[nodeName]),
-    position: "mouse"
-  }, /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "pm-breakout-resize-handle-rail-inside-tooltip",
-    ref: el => {
-      if (el && rail.parentNode !== el) {
-        el.appendChild(rail);
-      }
-    }
-  }));
-};
 
 /** Identifies the vanilla tooltip for tests and debugging. */
 const TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
@@ -80,10 +50,10 @@ const TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
 const TOOLTIP_CLASS_NAMES = `${VANILLA_TOOLTIP_DEFAULT_CLASS} ${TOOLTIP_CLASS_NAME}`;
 
 /**
- * Vanilla DOM equivalent of `RailWithTooltip`, behind `platform_editor_use_vanilla_components`.
+ * Builds the resize handle's tooltip as plain DOM.
  *
  * Anchored to a point rather than to the rail, which spans the node's full height and would strand
- * the tooltip at the top of a tall node. This reproduces the control arm's `position="mouse"`,
+ * the tooltip at the top of a tall node. This reproduces the ADS tooltip's `position="mouse"`,
  * which latches the cursor as the tooltip opens and does not move it afterwards — so no cursor
  * tracking is needed, just one style write per hover.
  */
@@ -105,7 +75,7 @@ const createHandleTooltip = ({
   undefined,
   // No `onShow`.
   undefined,
-  // Below the cursor, matching the control arm's `position="mouse"`.
+  // Below the cursor, matching the ADS tooltip's `position="mouse"`.
   'bottom');
 };
 export const createPragmaticResizer = ({
@@ -113,8 +83,7 @@ export const createPragmaticResizer = ({
   onDragStart,
   onDrag,
   onDrop,
-  intl,
-  nodeViewPortalProviderAPI
+  intl
 }) => {
   let state = 'default';
   const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions') || isExperimentEnabled('platform_editor_remove_left_resize_handle');
@@ -140,29 +109,19 @@ export const createPragmaticResizer = ({
     rail.appendChild(thumb);
 
     // Marks the point the pointer entered the rail, and anchors the tooltip there: zero height
-    // so it is a point not a box, full rail width so the tooltip centres like the control arm.
+    // so it is a point not a box, full rail width so the tooltip centres on the cursor.
     //
     // Must stay a child of `rail` — `openTooltipAt` sets `top` from the rail's `offsetY`, which
     // only lines up while the rail is the containing block. jsdom cannot catch a wrong parent.
     //
-    // Not built on the control arm, which must keep byte-identical DOM.
-    let tooltipAnchor;
-    if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-      // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
-      tooltipAnchor = document.createElement('div');
-      tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
-      rail.appendChild(tooltipAnchor);
-    }
+    // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
+    const tooltipAnchor = document.createElement('div');
+    tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
+    rail.appendChild(tooltipAnchor);
     const tooltipContainer = document.createElement('div');
     tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
     handle.appendChild(tooltipContainer);
     handle.appendChild(handleHitBox);
-    const key = crypto.randomUUID();
-    const renderTooltip = () => nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
-      rail: rail,
-      target: target,
-      intl: intl
-    }), tooltipContainer, key);
     let vanillaTooltip;
 
     // Tracks whether there is anything to tear down: the tooltip mounts on first hover and so
@@ -173,34 +132,22 @@ export const createPragmaticResizer = ({
         return;
       }
       isTooltipMounted = true;
-
-      // `tooltipAnchor` is always set when the experiment is on; the check also narrows it.
-      if (isExperimentEnabled('platform_editor_use_vanilla_components') && tooltipAnchor) {
-        vanillaTooltip = createHandleTooltip({
-          anchor: tooltipAnchor,
-          target,
-          intl
-        });
-        return;
-      }
-
-      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
-      // identical to the pre-mount state below.
-      renderTooltip();
+      vanillaTooltip = createHandleTooltip({
+        anchor: tooltipAnchor,
+        target,
+        intl
+      });
     };
 
-    // React 18 registers ~130 native event listeners on every portal container (see
-    // `listenToAllSupportedEvents`), and never removes them. Mounting this tooltip up front
-    // costs that for every resizable node in the document — two containers per node when the
-    // left handle is enabled — even though only the hovered handle can ever show a tooltip.
-    //
-    // Instead, park `rail` directly in the wrapper and mount the tooltip on the first
-    // `mouseenter` of the node (see `registerEvents` below). The rail has `opacity: 0` until
-    // the pointer is inside the node, so the pre-mount DOM is never visible, and the
-    // `mouseenter` fires on the whole node — long before the pointer reaches the 7px handle.
+    // The tooltip is built on the first `mouseenter` of the node (see `registerEvents` below)
+    // rather than up front, so a handle that is never hovered costs nothing. The rail has
+    // `opacity: 0` until the pointer is inside the node, so the pre-mount DOM is never
+    // visible, and the `mouseenter` fires on the whole node — long before the pointer reaches
+    // the 7px handle.
     //
-    // Parking the rail also needs `width: 100%`: without the ADS tooltip's wrappers (stretched
-    // by `pragmaticResizerStylesForTooltip`) it would size to its content as a flex item.
+    // Parking the rail in the wrapper also needs `width: 100%`: without the ADS tooltip's
+    // wrappers (stretched by `pragmaticResizerStylesForTooltip`) it would size to its content
+    // as a flex item.
     rail.style.width = '100%';
     tooltipContainer.appendChild(rail);
     return {
@@ -211,24 +158,11 @@ export const createPragmaticResizer = ({
       handleHitBox,
       mountTooltip,
       destroyTooltip: () => {
-        // Re-read is safe: the gate is fixed for the page, so it matches what `mountTooltip`
-        // saw. At cleanup, keep this body and delete the control arm below.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          // May never have mounted, and there is no portal to remove either way.
-          if (vanillaTooltip) {
-            vanillaTooltip.destroy();
-            vanillaTooltip = undefined;
-          }
-          isTooltipMounted = false;
-          return;
+        // May never have mounted, as the tooltip is built on first hover.
+        if (vanillaTooltip) {
+          vanillaTooltip.destroy();
+          vanillaTooltip = undefined;
         }
-
-        // The tooltip mounts on first hover, so `destroyTooltip` can be reached without
-        // anything having been mounted.
-        if (!isTooltipMounted) {
-          return;
-        }
-        nodeViewPortalProviderAPI.remove(key);
         isTooltipMounted = false;
       }
     };
@@ -254,13 +188,11 @@ export const createPragmaticResizer = ({
         state = 'resizing';
         handleElement.classList.add('pm-breakout-resize-handle-container--active');
 
-        // The ADS tooltip hides itself on press; the vanilla one has no pointer-press
-        // listener, and its anchor moves with the rail, so it would follow the drag.
-        // Tearing it down hides it immediately; the next hover rebuilds it.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          rightHandle.destroyTooltip();
-          leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.destroyTooltip();
-        }
+        // The tooltip has no pointer-press listener, and its anchor moves with the rail,
+        // so it would follow the drag. Tearing it down hides it immediately; the next
+        // hover rebuilds it.
+        rightHandle.destroyTooltip();
+        leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.destroyTooltip();
         onDragStart(args);
       },
       onDrag,
@@ -300,24 +232,20 @@ export const createPragmaticResizer = ({
       type: 'mouseenter',
       listener: event => {
         // Mounted on first hover rather than up front, so a handle that is never
-        // hovered costs no portal and no listeners.
+        // hovered costs nothing.
         rightHandle.mountTooltip();
         leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.mountTooltip();
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          // After the mount above, so the tooltip always exists to be opened.
-          openTooltipAt(hoverAnchor, event);
-        }
+        // After the mount above, so the tooltip always exists to be opened.
+        openTooltipAt(hoverAnchor, event);
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.rail.style.setProperty('opacity', '1');
       }
     }), bind(element, {
       type: 'mouseleave',
       listener: () => {
-        // Ahead of the resize guard below: the ADS tooltip hides whenever the pointer
+        // Ahead of the resize guard below: the tooltip hides whenever the pointer
         // leaves the rail, including part-way through a resize.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          closeTooltip(hoverAnchor);
-        }
+        closeTooltip(hoverAnchor);
         if (state === 'resizing') {
           return;
         }

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -127,8 +127,7 @@ export class ResizingMarkView {
     } = createPragmaticResizer({
       target: contentDOM,
       ...callbacks,
-      intl: this.intl,
-      nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+      intl: this.intl
     });
     if (leftHandle) {
       this.dom.prepend(leftHandle);

package/dist/esm/pm-plugins/pragmatic-resizer.js

@@ -1,6 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { messages } from '@atlaskit/editor-common/messages/breakout';
 import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
@@ -10,7 +8,6 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
 var getNodeName = function getNodeName(nodeName) {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -42,36 +39,6 @@ export var resizeHandleMessage = {
   bodiedExtension: messages.resizeExtension,
   multiBodiedExtension: messages.resizeExtension
 };
-/**
- * Remove during `platform_editor_use_vanilla_components` cleanup — replaced by
- * `createHandleTooltip`, which does the same job without a React tree per resize handle.
- */
-var RailWithTooltip = function RailWithTooltip(_ref) {
-  var rail = _ref.rail,
-    target = _ref.target,
-    intl = _ref.intl;
-  var _useState = useState('node'),
-    _useState2 = _slicedToArray(_useState, 2),
-    nodeName = _useState2[0],
-    setNodeName = _useState2[1];
-  useLayoutEffect(function () {
-    var node = target.querySelector('[data-prosemirror-node-name]');
-    var name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
-    setNodeName(name);
-  }, [target]);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: intl.formatMessage(resizeHandleMessage[nodeName]),
-    position: "mouse"
-  }, /*#__PURE__*/React.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "pm-breakout-resize-handle-rail-inside-tooltip",
-    ref: function ref(el) {
-      if (el && rail.parentNode !== el) {
-        el.appendChild(rail);
-      }
-    }
-  }));
-};
 
 /** Identifies the vanilla tooltip for tests and debugging. */
 var TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
@@ -84,17 +51,17 @@ var TOOLTIP_CLASS_NAME = 'pm-breakout-resize-tooltip';
 var TOOLTIP_CLASS_NAMES = "".concat(VANILLA_TOOLTIP_DEFAULT_CLASS, " ").concat(TOOLTIP_CLASS_NAME);
 
 /**
- * Vanilla DOM equivalent of `RailWithTooltip`, behind `platform_editor_use_vanilla_components`.
+ * Builds the resize handle's tooltip as plain DOM.
  *
  * Anchored to a point rather than to the rail, which spans the node's full height and would strand
- * the tooltip at the top of a tall node. This reproduces the control arm's `position="mouse"`,
+ * the tooltip at the top of a tall node. This reproduces the ADS tooltip's `position="mouse"`,
  * which latches the cursor as the tooltip opens and does not move it afterwards — so no cursor
  * tracking is needed, just one style write per hover.
  */
-var createHandleTooltip = function createHandleTooltip(_ref2) {
-  var anchor = _ref2.anchor,
-    intl = _ref2.intl,
-    target = _ref2.target;
+var createHandleTooltip = function createHandleTooltip(_ref) {
+  var anchor = _ref.anchor,
+    intl = _ref.intl,
+    target = _ref.target;
   // Only correct once ProseMirror has populated `contentDOM`, so callers must build on first
   // hover — earlier reads fall back to the generic 'node' label.
   var node = target.querySelector('[data-prosemirror-node-name]');
@@ -108,16 +75,15 @@ var createHandleTooltip = function createHandleTooltip(_ref2) {
   undefined,
   // No `onShow`.
   undefined,
-  // Below the cursor, matching the control arm's `position="mouse"`.
+  // Below the cursor, matching the ADS tooltip's `position="mouse"`.
   'bottom');
 };
-export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
-  var target = _ref3.target,
-    _onDragStart = _ref3.onDragStart,
-    onDrag = _ref3.onDrag,
-    _onDrop = _ref3.onDrop,
-    intl = _ref3.intl,
-    nodeViewPortalProviderAPI = _ref3.nodeViewPortalProviderAPI;
+export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
+  var target = _ref2.target,
+    _onDragStart = _ref2.onDragStart,
+    onDrag = _ref2.onDrag,
+    _onDrop = _ref2.onDrop,
+    intl = _ref2.intl;
   var state = 'default';
   var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions') || isExperimentEnabled('platform_editor_remove_left_resize_handle');
   var createHandle = function createHandle(side) {
@@ -142,33 +108,19 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
     rail.appendChild(thumb);
 
     // Marks the point the pointer entered the rail, and anchors the tooltip there: zero height
-    // so it is a point not a box, full rail width so the tooltip centres like the control arm.
+    // so it is a point not a box, full rail width so the tooltip centres on the cursor.
     //
     // Must stay a child of `rail` — `openTooltipAt` sets `top` from the rail's `offsetY`, which
     // only lines up while the rail is the containing block. jsdom cannot catch a wrong parent.
     //
-    // Not built on the control arm, which must keep byte-identical DOM.
-    var tooltipAnchor;
-    if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-      // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
-      tooltipAnchor = document.createElement('div');
-      tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
-      rail.appendChild(tooltipAnchor);
-    }
+    // Positioned by `.pm-breakout-resize-tooltip-anchor`; only the pointer's Y is passed in.
+    var tooltipAnchor = document.createElement('div');
+    tooltipAnchor.classList.add('pm-breakout-resize-tooltip-anchor');
+    rail.appendChild(tooltipAnchor);
     var tooltipContainer = document.createElement('div');
     tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
     handle.appendChild(tooltipContainer);
     handle.appendChild(handleHitBox);
-    var key = crypto.randomUUID();
-    var renderTooltip = function renderTooltip() {
-      return nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/React.createElement(RailWithTooltip, {
-          rail: rail,
-          target: target,
-          intl: intl
-        });
-      }, tooltipContainer, key);
-    };
     var vanillaTooltip;
 
     // Tracks whether there is anything to tear down: the tooltip mounts on first hover and so
@@ -179,34 +131,22 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
         return;
       }
       isTooltipMounted = true;
-
-      // `tooltipAnchor` is always set when the experiment is on; the check also narrows it.
-      if (isExperimentEnabled('platform_editor_use_vanilla_components') && tooltipAnchor) {
-        vanillaTooltip = createHandleTooltip({
-          anchor: tooltipAnchor,
-          target: target,
-          intl: intl
-        });
-        return;
-      }
-
-      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
-      // identical to the pre-mount state below.
-      renderTooltip();
+      vanillaTooltip = createHandleTooltip({
+        anchor: tooltipAnchor,
+        target: target,
+        intl: intl
+      });
     };
 
-    // React 18 registers ~130 native event listeners on every portal container (see
-    // `listenToAllSupportedEvents`), and never removes them. Mounting this tooltip up front
-    // costs that for every resizable node in the document — two containers per node when the
-    // left handle is enabled — even though only the hovered handle can ever show a tooltip.
+    // The tooltip is built on the first `mouseenter` of the node (see `registerEvents` below)
+    // rather than up front, so a handle that is never hovered costs nothing. The rail has
+    // `opacity: 0` until the pointer is inside the node, so the pre-mount DOM is never
+    // visible, and the `mouseenter` fires on the whole node — long before the pointer reaches
+    // the 7px handle.
     //
-    // Instead, park `rail` directly in the wrapper and mount the tooltip on the first
-    // `mouseenter` of the node (see `registerEvents` below). The rail has `opacity: 0` until
-    // the pointer is inside the node, so the pre-mount DOM is never visible, and the
-    // `mouseenter` fires on the whole node — long before the pointer reaches the 7px handle.
-    //
-    // Parking the rail also needs `width: 100%`: without the ADS tooltip's wrappers (stretched
-    // by `pragmaticResizerStylesForTooltip`) it would size to its content as a flex item.
+    // Parking the rail in the wrapper also needs `width: 100%`: without the ADS tooltip's
+    // wrappers (stretched by `pragmaticResizerStylesForTooltip`) it would size to its content
+    // as a flex item.
     rail.style.width = '100%';
     tooltipContainer.appendChild(rail);
     return {
@@ -217,24 +157,11 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
       handleHitBox: handleHitBox,
       mountTooltip: mountTooltip,
       destroyTooltip: function destroyTooltip() {
-        // Re-read is safe: the gate is fixed for the page, so it matches what `mountTooltip`
-        // saw. At cleanup, keep this body and delete the control arm below.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          // May never have mounted, and there is no portal to remove either way.
-          if (vanillaTooltip) {
-            vanillaTooltip.destroy();
-            vanillaTooltip = undefined;
-          }
-          isTooltipMounted = false;
-          return;
+        // May never have mounted, as the tooltip is built on first hover.
+        if (vanillaTooltip) {
+          vanillaTooltip.destroy();
+          vanillaTooltip = undefined;
         }
-
-        // The tooltip mounts on first hover, so `destroyTooltip` can be reached without
-        // anything having been mounted.
-        if (!isTooltipMounted) {
-          return;
-        }
-        nodeViewPortalProviderAPI.remove(key);
         isTooltipMounted = false;
       }
     };
@@ -245,8 +172,8 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
   var registerHandle = function registerHandle(handleElement, handleSide) {
     return draggable({
       element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
-        var nativeSetDragImage = _ref4.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         disableNativeDragPreview({
           nativeSetDragImage: nativeSetDragImage
         });
@@ -261,13 +188,11 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
         state = 'resizing';
         handleElement.classList.add('pm-breakout-resize-handle-container--active');
 
-        // The ADS tooltip hides itself on press; the vanilla one has no pointer-press
-        // listener, and its anchor moves with the rail, so it would follow the drag.
-        // Tearing it down hides it immediately; the next hover rebuilds it.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          rightHandle.destroyTooltip();
-          leftHandle === null || leftHandle === void 0 || leftHandle.destroyTooltip();
-        }
+        // The tooltip has no pointer-press listener, and its anchor moves with the rail,
+        // so it would follow the drag. Tearing it down hides it immediately; the next
+        // hover rebuilds it.
+        rightHandle.destroyTooltip();
+        leftHandle === null || leftHandle === void 0 || leftHandle.destroyTooltip();
         _onDragStart(args);
       },
       onDrag: onDrag,
@@ -307,24 +232,20 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref3) {
       type: 'mouseenter',
       listener: function listener(event) {
         // Mounted on first hover rather than up front, so a handle that is never
-        // hovered costs no portal and no listeners.
+        // hovered costs nothing.
         rightHandle.mountTooltip();
         leftHandle === null || leftHandle === void 0 || leftHandle.mountTooltip();
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          // After the mount above, so the tooltip always exists to be opened.
-          openTooltipAt(hoverAnchor, event);
-        }
+        // After the mount above, so the tooltip always exists to be opened.
+        openTooltipAt(hoverAnchor, event);
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
       }
     }), bind(element, {
       type: 'mouseleave',
       listener: function listener() {
-        // Ahead of the resize guard below: the ADS tooltip hides whenever the pointer
+        // Ahead of the resize guard below: the tooltip hides whenever the pointer
         // leaves the rail, including part-way through a resize.
-        if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
-          closeTooltip(hoverAnchor);
-        }
+        closeTooltip(hoverAnchor);
         if (state === 'resizing') {
           return;
         }

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -134,8 +134,7 @@ export var ResizingMarkView = /*#__PURE__*/function () {
       var _createPragmaticResiz = createPragmaticResizer(_objectSpread(_objectSpread({
           target: contentDOM
         }, callbacks), {}, {
-          intl: this.intl,
-          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+          intl: this.intl
         })),
         leftHandle = _createPragmaticResiz.leftHandle,
         rightHandle = _createPragmaticResiz.rightHandle,

package/dist/types/pm-plugins/pragmatic-resizer.d.ts

@@ -1,10 +1,8 @@
 import type { IntlShape, MessageDescriptor } from 'react-intl';
-import type { PortalProviderAPI } from '@atlaskit/editor-common/common';
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/internal-types';
 export declare const resizeHandleMessage: Record<string, MessageDescriptor>;
-export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, nodeViewPortalProviderAPI, }: {
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, }: {
     intl: IntlShape;
-    nodeViewPortalProviderAPI: PortalProviderAPI;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "30.0.15",
+	"version": "30.0.17",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,8 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^259.0.0",
-		"@atlaskit/tokens": "^20.9.0",
+		"@atlaskit/tmp-editor-statsig": "^260.0.0",
+		"@atlaskit/tokens": "^20.10.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",