@atlaskit/editor-plugin-breakout 15.0.16 → 15.0.18

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-breakout
 
+## 15.0.18
+
+### Patch Changes
+
+- [`656801b9e097c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/656801b9e097c) -
+  VOLTC-331 - Migrate updated package usage in platform/editor: rewrite barrel imports of
+  voltCompliant provider packages to deep/subpath imports (consumer-side debarrel). No public API
+  changes.
+- Updated dependencies
+
+## 15.0.17
+
+### Patch Changes
+
+- [`288e340380dbb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/288e340380dbb) -
+  Behind experiment platform_editor_reduce_event_listener_count: cut the number of native DOM event
+  listeners the editor registers per node. React 18 registers a bubble and a capture listener for
+  every supported event type on each portal container (~130 listeners) and never removes them, so
+  (1) node views whose render() returns null no longer mount a portal at all, and (2) the breakout
+  resize handle tooltip portal is deferred until the pointer enters the node instead of being
+  mounted for every resizable node up front.
+
+  Also reduces the work the layout column divider decorations do on every `decorations(state)` read:
+  the mousedown listener is unbound when the widget decoration is destroyed, the widget DOM is built
+  lazily rather than once per call, the document walk no longer descends into node types that cannot
+  contain a layout, and the decoration key is derived from the layout's ordinal rather than its
+  position so an edit above a layout no longer invalidates and rebuilds every divider below it. The
+  widget now resolves its own layout section and column index from its live position at mousedown.
+
+- Updated dependencies
+
 ## 15.0.16
 
 ### Patch Changes

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

@@ -10,18 +10,15 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
-var _v = _interopRequireDefault(require("uuid/v4"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
-var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
+var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/utils/disable-native-drag-preview");
+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"));
+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); }
-// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-
 var getNodeName = function getNodeName(nodeName) {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -60,7 +57,7 @@ var RailWithTooltip = function RailWithTooltip(_ref) {
     var name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
     setNodeName(name);
   }, [target]);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     content: intl.formatMessage(resizeHandleMessage[nodeName]),
     position: "mouse"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -81,6 +78,9 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     intl = _ref2.intl,
     nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   var state = 'default';
+  // Read once per resizer: `isExperimentEnabled` fires an exposure event, and `registerEvents` is
+  // bound to several elements so checking it inside the handler would emit one per element hovered.
+  var isDeferredTooltipEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_reduce_event_listener_count');
   var isLeftResizeHandleDisabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions');
   var createHandle = function createHandle(side) {
     var handle = document.createElement('div');
@@ -106,22 +106,62 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     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);
+    };
 
-    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-    var key = (0, _v.default)();
-    nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/_react.default.createElement(RailWithTooltip, {
-        rail: rail,
-        target: target,
-        intl: intl
-      });
-    }, tooltipContainer, key);
+    // Only meaningful on the deferred path, where the tooltip mounts on first hover and so may
+    // never mount at all. The eager path below mounts unconditionally and does not consult it.
+    var isTooltipMounted = false;
+    var mountTooltip = function mountTooltip() {
+      if (isTooltipMounted) {
+        return;
+      }
+      isTooltipMounted = true;
+      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
+      // identical to the eager path.
+      renderTooltip();
+    };
+
+    // 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.
+    if (isDeferredTooltipEnabled) {
+      // Without the tooltip's `[role="presentation"]` / `.pm-breakout-resize-handle-rail-inside-tooltip`
+      // wrappers (both stretched to `width: 100%` by `pragmaticResizerStylesForTooltip`), the rail
+      // would size to its content as a flex item. Stretch it explicitly so the pre-mount and
+      // post-mount geometry match exactly — `100%` of the 7px handle container either way.
+      rail.style.width = '100%';
+      tooltipContainer.appendChild(rail);
+    } else {
+      renderTooltip();
+    }
     return {
       handle: handle,
       rail: rail,
       handleHitBox: handleHitBox,
+      mountTooltip: mountTooltip,
       destroyTooltip: function destroyTooltip() {
-        return nodeViewPortalProviderAPI.remove(key);
+        // The eager path always mounted, so it always removes — unchanged from before. Only
+        // the deferred path can reach `destroyTooltip` without having mounted anything.
+        if (isDeferredTooltipEnabled && !isTooltipMounted) {
+          return;
+        }
+        nodeViewPortalProviderAPI.remove(key);
+        isTooltipMounted = false;
       }
     };
   };
@@ -129,7 +169,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
   // Remove const leftHandle during 'platform_editor_lovability_resize_dividers_panels' cleanup
   var leftHandle = isLeftResizeHandleDisabled ? undefined : createHandle('left');
   var registerHandle = function registerHandle(handleElement, handleSide) {
-    return (0, _adapter.draggable)({
+    return (0, _elementAdapter.draggable)({
       element: handleElement,
       onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
         var nativeSetDragImage = _ref3.nativeSetDragImage;
@@ -161,6 +201,10 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     return [(0, _bindEventListener.bind)(element, {
       type: 'mouseenter',
       listener: function listener() {
+        if (isDeferredTooltipEnabled) {
+          rightHandle.mountTooltip();
+          leftHandle === null || leftHandle === void 0 || leftHandle.mountTooltip();
+        }
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
       }

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

@@ -10,7 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pragmaticResizer = require("./pragmatic-resizer");
 var _resizerCallbacks = require("./resizer-callbacks");
@@ -98,13 +98,13 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
     if (!isLiveViewMode) {
-      (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') || (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_exts_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      (0, _fg.fg)('platform_editor_lovability_resize_gracefully') || (0, _fg.fg)('platform_editor_lovability_resize_exts_gracefully') ? this.setupResizerCallbacksIfSupported(dom, contentDOM, view, mark, isResizingDividersPanelsEnabled, isResizingExtensionsEnabled, api) : this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
     }
     this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
       var _sharedState$nextShar, _sharedState$prevShar;
       if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
         var _sharedState$nextShar4, _sharedState$nextShar5;
-        if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_gracefully') || (0, _platformFeatureFlags.fg)('platform_editor_lovability_resize_exts_gracefully')) {
+        if ((0, _fg.fg)('platform_editor_lovability_resize_gracefully') || (0, _fg.fg)('platform_editor_lovability_resize_exts_gracefully')) {
           var _sharedState$nextShar2, _sharedState$nextShar3;
           if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view') {
             var _this$cancelScheduled;

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

@@ -1,15 +1,13 @@
 import React, { useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
-// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/disable-native-drag-preview';
+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';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
 const getNodeName = nodeName => {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -68,6 +66,9 @@ export const createPragmaticResizer = ({
   nodeViewPortalProviderAPI
 }) => {
   let state = 'default';
+  // Read once per resizer: `isExperimentEnabled` fires an exposure event, and `registerEvents` is
+  // bound to several elements so checking it inside the handler would emit one per element hovered.
+  const isDeferredTooltipEnabled = isExperimentEnabled('platform_editor_reduce_event_listener_count');
   const isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
   const createHandle = side => {
     const handle = document.createElement('div');
@@ -93,19 +94,59 @@ export const createPragmaticResizer = ({
     tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
     handle.appendChild(tooltipContainer);
     handle.appendChild(handleHitBox);
-
-    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-    const key = uuid();
-    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
+    const key = crypto.randomUUID();
+    const renderTooltip = () => nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
       rail: rail,
       target: target,
       intl: intl
     }), tooltipContainer, key);
+
+    // Only meaningful on the deferred path, where the tooltip mounts on first hover and so may
+    // never mount at all. The eager path below mounts unconditionally and does not consult it.
+    let isTooltipMounted = false;
+    const mountTooltip = () => {
+      if (isTooltipMounted) {
+        return;
+      }
+      isTooltipMounted = true;
+      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
+      // identical to the eager path.
+      renderTooltip();
+    };
+
+    // 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.
+    if (isDeferredTooltipEnabled) {
+      // Without the tooltip's `[role="presentation"]` / `.pm-breakout-resize-handle-rail-inside-tooltip`
+      // wrappers (both stretched to `width: 100%` by `pragmaticResizerStylesForTooltip`), the rail
+      // would size to its content as a flex item. Stretch it explicitly so the pre-mount and
+      // post-mount geometry match exactly — `100%` of the 7px handle container either way.
+      rail.style.width = '100%';
+      tooltipContainer.appendChild(rail);
+    } else {
+      renderTooltip();
+    }
     return {
       handle,
       rail,
       handleHitBox,
-      destroyTooltip: () => nodeViewPortalProviderAPI.remove(key)
+      mountTooltip,
+      destroyTooltip: () => {
+        // The eager path always mounted, so it always removes — unchanged from before. Only
+        // the deferred path can reach `destroyTooltip` without having mounted anything.
+        if (isDeferredTooltipEnabled && !isTooltipMounted) {
+          return;
+        }
+        nodeViewPortalProviderAPI.remove(key);
+        isTooltipMounted = false;
+      }
     };
   };
   const rightHandle = createHandle('right');
@@ -143,6 +184,10 @@ export const createPragmaticResizer = ({
     return [bind(element, {
       type: 'mouseenter',
       listener: () => {
+        if (isDeferredTooltipEnabled) {
+          rightHandle.mountTooltip();
+          leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.mountTooltip();
+        }
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 ? void 0 : leftHandle.rail.style.setProperty('opacity', '1');
       }

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';

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

@@ -2,16 +2,14 @@ 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';
-// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid/v4';
 import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/disable-native-drag-preview';
+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';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
 var getNodeName = function getNodeName(nodeName) {
   if (nodeName === 'layoutSection') {
     return 'layout';
@@ -71,6 +69,9 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
     intl = _ref2.intl,
     nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   var state = 'default';
+  // Read once per resizer: `isExperimentEnabled` fires an exposure event, and `registerEvents` is
+  // bound to several elements so checking it inside the handler would emit one per element hovered.
+  var isDeferredTooltipEnabled = isExperimentEnabled('platform_editor_reduce_event_listener_count');
   var isLeftResizeHandleDisabled = expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) || isExperimentEnabled('platform_editor_lovability_resize_extensions');
   var createHandle = function createHandle(side) {
     var handle = document.createElement('div');
@@ -96,22 +97,62 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
     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);
+    };
 
-    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-    var key = uuid();
-    nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/React.createElement(RailWithTooltip, {
-        rail: rail,
-        target: target,
-        intl: intl
-      });
-    }, tooltipContainer, key);
+    // Only meaningful on the deferred path, where the tooltip mounts on first hover and so may
+    // never mount at all. The eager path below mounts unconditionally and does not consult it.
+    var isTooltipMounted = false;
+    var mountTooltip = function mountTooltip() {
+      if (isTooltipMounted) {
+        return;
+      }
+      isTooltipMounted = true;
+      // `RailWithTooltip`'s ref moves `rail` into the tooltip wrapper, so the DOM ends up
+      // identical to the eager path.
+      renderTooltip();
+    };
+
+    // 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.
+    if (isDeferredTooltipEnabled) {
+      // Without the tooltip's `[role="presentation"]` / `.pm-breakout-resize-handle-rail-inside-tooltip`
+      // wrappers (both stretched to `width: 100%` by `pragmaticResizerStylesForTooltip`), the rail
+      // would size to its content as a flex item. Stretch it explicitly so the pre-mount and
+      // post-mount geometry match exactly — `100%` of the 7px handle container either way.
+      rail.style.width = '100%';
+      tooltipContainer.appendChild(rail);
+    } else {
+      renderTooltip();
+    }
     return {
       handle: handle,
       rail: rail,
       handleHitBox: handleHitBox,
+      mountTooltip: mountTooltip,
       destroyTooltip: function destroyTooltip() {
-        return nodeViewPortalProviderAPI.remove(key);
+        // The eager path always mounted, so it always removes — unchanged from before. Only
+        // the deferred path can reach `destroyTooltip` without having mounted anything.
+        if (isDeferredTooltipEnabled && !isTooltipMounted) {
+          return;
+        }
+        nodeViewPortalProviderAPI.remove(key);
+        isTooltipMounted = false;
       }
     };
   };
@@ -151,6 +192,10 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
     return [bind(element, {
       type: 'mouseenter',
       listener: function listener() {
+        if (isDeferredTooltipEnabled) {
+          rightHandle.mountTooltip();
+          leftHandle === null || leftHandle === void 0 || leftHandle.mountTooltip();
+        }
         rightHandle.rail.style.setProperty('opacity', '1');
         leftHandle === null || leftHandle === void 0 || leftHandle.rail.style.setProperty('opacity', '1');
       }

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

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "15.0.16",
+	"version": "15.0.18",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",