@atlaskit/editor-plugin-breakout 15.0.15 → 15.0.17

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-breakout
 
+## 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
+
+- Updated dependencies
+
 ## 15.0.15
 
 ### Patch Changes

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

@@ -10,7 +10,6 @@ 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");
@@ -20,8 +19,6 @@ 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"));
 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';
@@ -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;
       }
     };
   };
@@ -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/es2019/pm-plugins/pragmatic-resizer.js

@@ -1,7 +1,5 @@
 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';
@@ -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/esm/pm-plugins/pragmatic-resizer.js

@@ -2,8 +2,6 @@ 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';
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "15.0.15",
+	"version": "15.0.17",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^158.0.0",
+		"@atlaskit/tmp-editor-statsig": "^159.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@babel/runtime": "^7.0.0",