@atlaskit/editor-common 119.16.0 → 119.16.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-common
 
+## 119.16.2
+
+### 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.
+
+## 119.16.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 119.16.0
 
 ### Minor Changes

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "119.15.1";
+var packageVersion = "119.16.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/react-node-view/index.js

@@ -28,6 +28,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _analytics = require("../analytics");
 var _coreUtils = require("../core-utils");
 var _eventDispatcher = require("../event-dispatcher");
@@ -50,6 +51,12 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
     // Spreading props to pass through dynamic component props
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /**
+     * Tracks whether a React portal is currently mounted into `domRef`. Only used under
+     * `platform_editor_reduce_event_listener_count`, where a node view whose `render()`
+     * returns `null` does not mount one at all.
+     */
+    (0, _defineProperty2.default)(this, "hasMountedPortal", false);
     (0, _defineProperty2.default)(this, "decorations", []);
     (0, _defineProperty2.default)(this, "handleRef", function (node) {
       return _this._handleRef(node);
@@ -153,13 +160,41 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
       if (!this.domRef || !component) {
         return;
       }
+
+      // React 18 does event delegation per portal container: `createPortal` calls
+      // `listenToAllSupportedEvents(container)`, which registers a bubble *and* a capture
+      // listener for every supported event type — roughly 130 real `addEventListener` calls
+      // on the container element. Those listeners are never removed (React has no
+      // un-listen path), so mounting a portal for a node view that renders nothing is pure
+      // overhead that scales with the number of such nodes in the document.
+      //
+      // `PortalProviderAPI.render` already invokes the thunk eagerly (see
+      // `getPortalProviderAPI`), so evaluating the element here does not change *when*
+      // `render()` runs — the pre-evaluated element is handed to the same render call below.
+      // If a node view starts out empty and later renders something, `update()` calls back into
+      // this method and the portal is mounted at that point.
+      var renderComponent = component;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_reduce_event_listener_count')) {
+        var element = component();
+        if (element === null) {
+          if (this.hasMountedPortal) {
+            this.portalProviderAPI.remove(this.key);
+            this.hasMountedPortal = false;
+          }
+          return;
+        }
+        this.hasMountedPortal = true;
+        renderComponent = function renderComponent() {
+          return element;
+        };
+      }
       var componentWithErrorBoundary = function componentWithErrorBoundary() {
         var _this3$node$type$name, _this3$node;
         return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
           component: _analytics.ACTION_SUBJECT.REACT_NODE_VIEW,
           componentId: (_this3$node$type$name = _this3 === null || _this3 === void 0 || (_this3$node = _this3.node) === null || _this3$node === void 0 || (_this3$node = _this3$node.type) === null || _this3$node === void 0 ? void 0 : _this3$node.name) !== null && _this3$node$type$name !== void 0 ? _this3$node$type$name : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
           dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent
-        }, component());
+        }, renderComponent());
       };
       this.portalProviderAPI.render(componentWithErrorBoundary,
       // Spreading props to pass through dynamic component props

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "119.15.1";
+var packageVersion = "119.16.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "119.15.1";
+const packageVersion = "119.16.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/react-node-view/index.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 import React from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { isSSR } from '../core-utils';
 import { createDispatch } from '../event-dispatcher';
@@ -22,6 +23,12 @@ export default class ReactNodeView {
     // Spreading props to pass through dynamic component props
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /**
+     * Tracks whether a React portal is currently mounted into `domRef`. Only used under
+     * `platform_editor_reduce_event_listener_count`, where a node view whose `render()`
+     * returns `null` does not mount one at all.
+     */
+    _defineProperty(this, "hasMountedPortal", false);
     _defineProperty(this, "decorations", []);
     _defineProperty(this, "handleRef", node => this._handleRef(node));
     _defineProperty(this, "dispatchAnalyticsEvent", payload => {
@@ -116,13 +123,39 @@ export default class ReactNodeView {
     if (!this.domRef || !component) {
       return;
     }
+
+    // React 18 does event delegation per portal container: `createPortal` calls
+    // `listenToAllSupportedEvents(container)`, which registers a bubble *and* a capture
+    // listener for every supported event type — roughly 130 real `addEventListener` calls
+    // on the container element. Those listeners are never removed (React has no
+    // un-listen path), so mounting a portal for a node view that renders nothing is pure
+    // overhead that scales with the number of such nodes in the document.
+    //
+    // `PortalProviderAPI.render` already invokes the thunk eagerly (see
+    // `getPortalProviderAPI`), so evaluating the element here does not change *when*
+    // `render()` runs — the pre-evaluated element is handed to the same render call below.
+    // If a node view starts out empty and later renders something, `update()` calls back into
+    // this method and the portal is mounted at that point.
+    let renderComponent = component;
+    if (isExperimentEnabled('platform_editor_reduce_event_listener_count')) {
+      const element = component();
+      if (element === null) {
+        if (this.hasMountedPortal) {
+          this.portalProviderAPI.remove(this.key);
+          this.hasMountedPortal = false;
+        }
+        return;
+      }
+      this.hasMountedPortal = true;
+      renderComponent = () => element;
+    }
     const componentWithErrorBoundary = () => {
       var _this$node$type$name, _this$node, _this$node$type;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.REACT_NODE_VIEW,
         componentId: (_this$node$type$name = this === null || this === void 0 ? void 0 : (_this$node = this.node) === null || _this$node === void 0 ? void 0 : (_this$node$type = _this$node.type) === null || _this$node$type === void 0 ? void 0 : _this$node$type.name) !== null && _this$node$type$name !== void 0 ? _this$node$type$name : ACTION_SUBJECT_ID.UNKNOWN_NODE,
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent
-      }, component());
+      }, renderComponent());
     };
     this.portalProviderAPI.render(componentWithErrorBoundary,
     // Spreading props to pass through dynamic component props

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "119.15.1";
+const packageVersion = "119.16.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "119.15.1";
+var packageVersion = "119.16.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/react-node-view/index.js

@@ -6,6 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 import React from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { isSSR } from '../core-utils';
 import { createDispatch } from '../event-dispatcher';
@@ -26,6 +27,12 @@ var ReactNodeView = /*#__PURE__*/function () {
     // Spreading props to pass through dynamic component props
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /**
+     * Tracks whether a React portal is currently mounted into `domRef`. Only used under
+     * `platform_editor_reduce_event_listener_count`, where a node view whose `render()`
+     * returns `null` does not mount one at all.
+     */
+    _defineProperty(this, "hasMountedPortal", false);
     _defineProperty(this, "decorations", []);
     _defineProperty(this, "handleRef", function (node) {
       return _this._handleRef(node);
@@ -129,13 +136,41 @@ var ReactNodeView = /*#__PURE__*/function () {
       if (!this.domRef || !component) {
         return;
       }
+
+      // React 18 does event delegation per portal container: `createPortal` calls
+      // `listenToAllSupportedEvents(container)`, which registers a bubble *and* a capture
+      // listener for every supported event type — roughly 130 real `addEventListener` calls
+      // on the container element. Those listeners are never removed (React has no
+      // un-listen path), so mounting a portal for a node view that renders nothing is pure
+      // overhead that scales with the number of such nodes in the document.
+      //
+      // `PortalProviderAPI.render` already invokes the thunk eagerly (see
+      // `getPortalProviderAPI`), so evaluating the element here does not change *when*
+      // `render()` runs — the pre-evaluated element is handed to the same render call below.
+      // If a node view starts out empty and later renders something, `update()` calls back into
+      // this method and the portal is mounted at that point.
+      var renderComponent = component;
+      if (isExperimentEnabled('platform_editor_reduce_event_listener_count')) {
+        var element = component();
+        if (element === null) {
+          if (this.hasMountedPortal) {
+            this.portalProviderAPI.remove(this.key);
+            this.hasMountedPortal = false;
+          }
+          return;
+        }
+        this.hasMountedPortal = true;
+        renderComponent = function renderComponent() {
+          return element;
+        };
+      }
       var componentWithErrorBoundary = function componentWithErrorBoundary() {
         var _this3$node$type$name, _this3$node;
         return /*#__PURE__*/React.createElement(ErrorBoundary, {
           component: ACTION_SUBJECT.REACT_NODE_VIEW,
           componentId: (_this3$node$type$name = _this3 === null || _this3 === void 0 || (_this3$node = _this3.node) === null || _this3$node === void 0 || (_this3$node = _this3$node.type) === null || _this3$node === void 0 ? void 0 : _this3$node.name) !== null && _this3$node$type$name !== void 0 ? _this3$node$type$name : ACTION_SUBJECT_ID.UNKNOWN_NODE,
           dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent
-        }, component());
+        }, renderComponent());
       };
       this.portalProviderAPI.render(componentWithErrorBoundary,
       // Spreading props to pass through dynamic component props

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "119.15.1";
+var packageVersion = "119.16.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/react-node-view/index.d.ts

@@ -14,6 +14,12 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
     private reactComponent?;
     private portalProviderAPI;
     private _viewShouldUpdate?;
+    /**
+     * Tracks whether a React portal is currently mounted into `domRef`. Only used under
+     * `platform_editor_reduce_event_listener_count`, where a node view whose `render()`
+     * returns `null` does not mount one at all.
+     */
+    private hasMountedPortal;
     protected eventDispatcher?: EventDispatcher;
     protected decorations: ReadonlyArray<Decoration>;
     reactComponentProps: P;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "119.16.0",
+	"version": "119.16.2",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -84,7 +84,7 @@
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/teams-app-config": "^2.2.0",
 		"@atlaskit/textfield": "^10.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",
 		"@atlaskit/width-detector": "^7.1.0",