@atlaskit/editor-common 125.0.0 → 125.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-common
 
+## 125.1.0
+
+### Minor Changes
+
+- [`52a90f8df8ee2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52a90f8df8ee2) -
+  Native embed extensions take an `onContentReady` callback and call it once there is something to
+  show: the app's first painted frame for an experience that reports one, the frame's load event
+  otherwise, or a failure. The generated content reveal holds its node closed until that call, so
+  `editor-common` no longer watches the native embed loading attribute to work out when a node has
+  loaded. Both extension node views, the extension plugin's and the referentiality plugin's, hand
+  the callback to the extension.
+- [`bc78affbd7445`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bc78affbd7445) -
+  Migrate Editor Common's lazy-loaded components to react-loosely-lazy behind the
+  `platform_editor_loosely_lazy_migration` experiment.
+
+### Patch Changes
+
+- [`6ae411e31887f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6ae411e31887f) -
+  Fix Suggested Edits analytics exposure, navigation, and suggestion view tracking under
+  platform_editor_ai_content_suggested_edits.
+- Updated dependencies
+
 ## 125.0.0
 
 ### Patch Changes

package/dist/cjs/element-browser/components/ElementBrowserLoader.js

@@ -9,11 +9,15 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 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" != (0, _typeof2.default)(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); } /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+// oxlint-disable-next-line @atlassian/no-restricted-imports
 var spinnerContainer = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
@@ -21,14 +25,23 @@ var spinnerContainer = (0, _react2.css)({
   height: '100%',
   width: '100%'
 });
-var ElementBrowserLoader = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser'));
-    }).then(function (module) {
-      return module.default;
-    });
-  },
+var loadElementBrowser = function loadElementBrowser() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser'));
+  }).then(function (module) {
+    return module.default;
+  });
+};
+var ElementBrowserLazy = (0, _reactLooselyLazy.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser'));
+  }).then(function (module) {
+    return module.default;
+  });
+});
+ElementBrowserLazy.displayName = 'lazy(ElementBrowser)';
+var ElementBrowserLoadable = (0, _reactLoadable.default)({
+  loader: loadElementBrowser,
   loading: function loading() {
     return (0, _react2.jsx)("div", {
       css: spinnerContainer
@@ -38,4 +51,14 @@ var ElementBrowserLoader = (0, _reactLoadable.default)({
     }));
   }
 });
+var ElementBrowserLoader = function ElementBrowserLoader(props) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, (0, _react2.jsx)(ElementBrowserLazy, props)) :
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  (0, _react2.jsx)(ElementBrowserLoadable, props);
+};
+ElementBrowserLoader.preload = function () {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? ElementBrowserLazy.preload() : ElementBrowserLoadable.preload();
+};
 var _default = exports.default = ElementBrowserLoader;

package/dist/cjs/extensibility/Extension.js

@@ -42,7 +42,8 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         macroInteractionDesignFeatureFlags = _this$props.macroInteractionDesignFeatureFlags,
         showLivePagesBodiedMacrosRendererView = _this$props.showLivePagesBodiedMacrosRendererView,
         showUpdatedLivePages1PBodiedExtensionUI = _this$props.showUpdatedLivePages1PBodiedExtensionUI,
-        rendererExtensionHandlers = _this$props.rendererExtensionHandlers;
+        rendererExtensionHandlers = _this$props.rendererExtensionHandlers,
+        onContentReady = _this$props.onContentReady;
 
       // Extensions are not yet using the new plugin architecture, and the use of the pluginInjectionApi
       // is not type safe in editor-common.
@@ -68,7 +69,8 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         rendererExtensionHandlers: rendererExtensionHandlers,
-        isLivePageViewMode: isLivePageViewMode
+        isLivePageViewMode: isLivePageViewMode,
+        onContentReady: onContentReady
       });
     });
     _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -241,7 +241,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
         extensionLoadingHandlers = _this$props2.extensionLoadingHandlers,
         editorView = _this$props2.editorView,
         showBodiedExtensionRendererView = _this$props2.showBodiedExtensionRendererView,
-        rendererExtensionHandlers = _this$props2.rendererExtensionHandlers;
+        rendererExtensionHandlers = _this$props2.rendererExtensionHandlers,
+        onContentReady = _this$props2.onContentReady;
       var _pmNode$attrs = pmNode.attrs,
         extensionType = _pmNode$attrs.extensionType,
         extensionKey = _pmNode$attrs.extensionKey,
@@ -296,6 +297,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
             references: _this.props.references,
             isSelected: isSelected,
             loadingFallback: loadingFallback,
+            onContentReady: onContentReady,
             showUnknownMacroPlaceholder: true
           });
         }

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -76,6 +76,8 @@ var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNode
     macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
     _ref$generatedContent = _ref.generatedContentMotion,
     generatedContentMotion = _ref$generatedContent === void 0 ? false : _ref$generatedContent,
+    _ref$contentReady = _ref.contentReady,
+    contentReady = _ref$contentReady === void 0 ? false : _ref$contentReady,
     intl = _ref.intl;
   var _ref2 = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
@@ -83,6 +85,7 @@ var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNode
   // Fixed for the node view's lifetime: switching would remount the subtree and reload the embed.
   if (generatedContentMotion) {
     return (0, _react2.jsx)(_GeneratedContentReveal.GeneratedContentReveal, {
+      contentReady: contentReady,
       intl: intl,
       showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }, children);

package/dist/cjs/extensibility/GeneratedContentReveal.js

@@ -12,14 +12,13 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ExtensionSSRReactContextsProvider = require("./ExtensionSSRReactContextsProvider");
-var _useNativeEmbedSettled = require("./useNativeEmbedSettled");
 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); }
 /*
  * Animates a native embed into the document once it has loaded.
  *
  * 1. `collapsed` — clipped to zero height and `inert`. The embed loads behind it, full size but
  *    unseen, with its own loading overlay hidden.
- * 2. `useNativeEmbedSettled` calls back once the embed has finished loading.
+ * 2. The extension reports its content ready through `contentReady`.
  * 3. `revealing` — the node animates open to its content height (400ms).
  * 4. The embed fades in (200ms), delayed so it follows the opening instead of overlapping it.
  * 5. `open` — on `animationend`, when the content first becomes visible, `inert` is dropped.
@@ -64,42 +63,41 @@ var embedContentEnteringStyles = null;
 
 var GeneratedContentReveal = exports.GeneratedContentReveal = function GeneratedContentReveal(_ref) {
   var children = _ref.children,
+    contentReady = _ref.contentReady,
     intl = _ref.intl,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
-  // Held in state so the effects below run once the span exists.
+  // Held in state so the effect below runs once the span exists.
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     wrapperElement = _useState2[0],
     setWrapperElement = _useState2[1];
-  var _useState3 = (0, _react.useState)('collapsed'),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
+    readyTimedOut = _useState4[0],
+    setReadyTimedOut = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    opened = _useState6[0],
+    setOpened = _useState6[1];
 
-  // Only a collapsed node opens, so whichever of the readiness signal and the fail-safe timer
-  // comes second changes nothing.
-  var startRevealing = (0, _react.useCallback)(function () {
-    setState(function (current) {
-      return current === 'collapsed' ? 'revealing' : current;
-    });
-  }, []);
-
-  // Step 2 → 3.
-  (0, _useNativeEmbedSettled.useNativeEmbedSettled)(wrapperElement, startRevealing);
+  // Derived, so the two ways a node opens need no ordering between them.
+  var state = opened ? 'open' : contentReady || readyTimedOut ? 'revealing' : 'collapsed';
 
   // One timer, set on mount, so the deadline never moves.
   (0, _react.useEffect)(function () {
-    var timer = setTimeout(startRevealing, READY_TIMEOUT_MS);
+    var timer = setTimeout(function () {
+      return setReadyTimedOut(true);
+    }, READY_TIMEOUT_MS);
     return function () {
       return clearTimeout(timer);
     };
-  }, [startRevealing]);
+  }, []);
   (0, _react.useEffect)(function () {
     if (state !== 'revealing') {
       return;
     }
     var timer = setTimeout(function () {
-      return setState('open');
+      return setOpened(true);
     }, REVEAL_TIMEOUT_MS);
     return function () {
       return clearTimeout(timer);
@@ -114,7 +112,7 @@ var GeneratedContentReveal = exports.GeneratedContentReveal = function Generated
   var onAnimationEnd = (0, _react.useCallback)(function (event) {
     // The extension's own content animates too, and those events bubble.
     if (event.target === event.currentTarget) {
-      setState('open');
+      setOpened(true);
     }
   }, []);
   return /*#__PURE__*/_react.default.createElement(_ExtensionSSRReactContextsProvider.ExtensionSSRReactContextsProvider, {

package/dist/cjs/extensibility/extensionNodeView.js

@@ -1,11 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExtensionNode = void 0;
 exports.default = ExtensionNodeView;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -13,7 +15,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _coreUtils = require("../core-utils");
@@ -21,6 +23,7 @@ var _reactNodeView = _interopRequireDefault(require("../react-node-view"));
 var _Extension = require("./Extension");
 var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
 var _nativeEmbedExtension = require("./nativeEmbedExtension");
+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); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -310,22 +313,14 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _props$extensionNodeV, _props$extensionNodeV2;
       // While sitting on SSR DOM, skip the React portal — see {@link didReuseSsrDom}.
       if (this.didReuseSsrDom) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
-        intl: props.intl,
-        nodeType: this.node.type.name,
-        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
-        // Only native embeds animate in; the reveal waits on the embed's own loading state.
-        ,
-        generatedContentMotion: !!((_props$extensionNodeV = props.extensionNodeViewOptions) !== null && _props$extensionNodeV !== void 0 && _props$extensionNodeV.allowAIGeneratedContentMotion) && (0, _nativeEmbedExtension.isNativeEmbedExtension)(this.node)
-      }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
+      return /*#__PURE__*/_react.default.createElement(ExtensionNodeRender, {
         editorView: this.view,
-        node: this.node,
-        eventDispatcher: this.eventDispatcher
+        eventDispatcher: this.eventDispatcher,
+        forwardRef: forwardRef
         // The getPos arg is always a function when used with nodes
         // the version of the types we use has a union with the type
         // for marks.
@@ -334,20 +329,62 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57384
         ,
         getPos: this.getPos,
-        providerFactory: props.providerFactory,
-        handleContentDOMRef: forwardRef,
-        extensionHandlers: props.extensionHandlers,
-        extensionLoadingHandlers: props.extensionLoadingHandlers,
-        editorAppearance: (_props$extensionNodeV2 = props.extensionNodeViewOptions) === null || _props$extensionNodeV2 === void 0 ? void 0 : _props$extensionNodeV2.appearance,
-        pluginInjectionApi: props.pluginInjectionApi,
-        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags,
-        showLivePagesBodiedMacrosRendererView: props.showLivePagesBodiedMacrosRendererView,
-        showUpdatedLivePages1PBodiedExtensionUI: props.showUpdatedLivePages1PBodiedExtensionUI,
-        rendererExtensionHandlers: props.rendererExtensionHandlers
-      }));
+        node: this.node,
+        renderProps: props
+      });
     }
   }]);
-}(_reactNodeView.default); // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+}(_reactNodeView.default);
+/**
+ * Wraps the extension in its node wrapper. A component rather than part of the node view's `render`,
+ * so `contentReady` can be React state: the extension reports its content ready from inside the
+ * wrapper, and the wrapper animates the node in once it has.
+ */
+function ExtensionNodeRender(_ref2) {
+  var _renderProps$extensio, _renderProps$extensio2;
+  var editorView = _ref2.editorView,
+    eventDispatcher = _ref2.eventDispatcher,
+    forwardRef = _ref2.forwardRef,
+    getPos = _ref2.getPos,
+    node = _ref2.node,
+    renderProps = _ref2.renderProps;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    contentReady = _useState2[0],
+    setContentReady = _useState2[1];
+  var onContentReady = (0, _react.useCallback)(function () {
+    return setContentReady(true);
+  }, []);
+
+  // Only native embeds animate in; every other extension type renders as it does without the
+  // option, so nothing waits on a signal it does not send.
+  var generatedContentMotion = !!((_renderProps$extensio = renderProps.extensionNodeViewOptions) !== null && _renderProps$extensio !== void 0 && _renderProps$extensio.allowAIGeneratedContentMotion) && (0, _nativeEmbedExtension.isNativeEmbedExtension)(node);
+  return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
+    intl: renderProps.intl,
+    nodeType: node.type.name,
+    macroInteractionDesignFeatureFlags: renderProps.macroInteractionDesignFeatureFlags,
+    generatedContentMotion: generatedContentMotion,
+    contentReady: contentReady
+  }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
+    editorView: editorView,
+    node: node,
+    eventDispatcher: eventDispatcher,
+    getPos: getPos,
+    providerFactory: renderProps.providerFactory,
+    handleContentDOMRef: forwardRef,
+    extensionHandlers: renderProps.extensionHandlers,
+    extensionLoadingHandlers: renderProps.extensionLoadingHandlers,
+    editorAppearance: (_renderProps$extensio2 = renderProps.extensionNodeViewOptions) === null || _renderProps$extensio2 === void 0 ? void 0 : _renderProps$extensio2.appearance,
+    pluginInjectionApi: renderProps.pluginInjectionApi,
+    macroInteractionDesignFeatureFlags: renderProps.macroInteractionDesignFeatureFlags,
+    showLivePagesBodiedMacrosRendererView: renderProps.showLivePagesBodiedMacrosRendererView,
+    showUpdatedLivePages1PBodiedExtensionUI: renderProps.showUpdatedLivePages1PBodiedExtensionUI,
+    rendererExtensionHandlers: renderProps.rendererExtensionHandlers,
+    onContentReady: generatedContentMotion ? onContentReady : undefined
+  }));
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionLoadingHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags, showLivePagesBodiedMacrosRendererView, showUpdatedLivePages1PBodiedExtensionUI, rendererExtensionHandlers, intl) {
   return function (node, view, getPos) {
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {

package/dist/cjs/extensions/extension-handlers.js

@@ -15,16 +15,27 @@ exports.getExtensionModuleNodeMaybePreloaded = getExtensionModuleNodeMaybePreloa
 exports.getExtensionModuleNodePrivateProps = getExtensionModuleNodePrivateProps;
 exports.getNodeRenderer = getNodeRenderer;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _manifestHelpers = require("./manifest-helpers");
 var _messages = require("./messages");
 var _resolveImportSync = require("./resolveImportSync");
 var _UnknownMacroPlaceholder = require("./UnknownMacroPlaceholder");
 var _getExtensionManifest = require("./getExtensionManifest");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // oxlint-disable-next-line @atlassian/no-restricted-imports
 function getNodeFromManifest(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 manifest, extKey, nodeKey, extensionType, extensionKey) {
@@ -120,6 +131,52 @@ function isUnknownConfluenceMacroWithBody(extensionNode) {
   var _extensionNode$parame;
   return extensionNode !== null && extensionNode.type === 'extension' && extensionNode.extensionType === 'com.atlassian.confluence.macro.core' && !!((_extensionNode$parame = extensionNode.parameters) !== null && _extensionNode$parame !== void 0 && (_extensionNode$parame = _extensionNode$parame.macroParams) !== null && _extensionNode$parame !== void 0 && (_extensionNode$parame = _extensionNode$parame.__bodyContent) !== null && _extensionNode$parame !== void 0 && _extensionNode$parame.value);
 }
+// eslint-disable-next-line @repo/internal/react/no-class-components -- error boundaries require a class component
+var ExtensionRendererErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  function ExtensionRendererErrorBoundary() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ExtensionRendererErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ExtensionRendererErrorBoundary, [].concat(args));
+    (0, _defineProperty2.default)(_this, "state", {});
+    return _this;
+  }
+  (0, _inherits2.default)(ExtensionRendererErrorBoundary, _React$Component);
+  return (0, _createClass2.default)(ExtensionRendererErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.error('Error rendering extension', error);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.state.error ? renderExtensionLoadingError(this.state.error, this.props.fallbackProps) : this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        error: error
+      };
+    }
+  }]);
+}(_react.default.Component);
+var noop = function noop() {};
+function renderExtensionLoadingError(error, props) {
+  // Needed because the old react-loadable (older code-splitting library) error handling behaviour might be relied on by extensions.
+  // https://unpkg.com/react-loadable@5.2.2/lib/index.js
+  return /*#__PURE__*/_react.default.createElement(ExtensionLoading, (0, _extends2.default)({
+    isLoading: false,
+    pastDelay: true,
+    timedOut: false,
+    error: error,
+    retry: noop
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props));
+}
 function ExtensionLoading(props) {
   var intl = (0, _reactIntl.useIntl)();
   var extensionNode = props.node;
@@ -142,28 +199,50 @@ function ExtensionLoading(props) {
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getNodeRenderer(extensionProvider, extensionType, extensionKey) {
-  return (0, _reactLoadable.default)({
-    loader: function loader() {
-      var maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
-      if (maybePromise instanceof Promise) {
-        return maybePromise.then(function (node) {
-          return (0, _manifestHelpers.resolveImport)(node.render());
-        });
-      } else {
-        var _renderSync, _ref;
-        var preloaded = maybePromise === null || maybePromise === void 0 || (_renderSync = (_ref = maybePromise).renderSync) === null || _renderSync === void 0 ? void 0 : _renderSync.call(_ref);
-        // Only product implemented preloading will return sync result
-        // However the out-of-box won't handle this. Confluence uses a custom implementation
-        return preloaded ?
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (0, _resolveImportSync.resolveImportSync)(preloaded) : (0, _manifestHelpers.resolveImport)(maybePromise.render());
-      }
-    },
+  var loadNodeRenderer = function loadNodeRenderer() {
+    var _renderSync, _ref;
+    var maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
+    if (maybePromise instanceof Promise) {
+      return maybePromise.then(function (node) {
+        return (0, _manifestHelpers.resolveImport)(node.render());
+      });
+    }
+    var preloaded = maybePromise === null || maybePromise === void 0 || (_renderSync = (_ref = maybePromise).renderSync) === null || _renderSync === void 0 ? void 0 : _renderSync.call(_ref);
+    // Only product implemented preloading will return sync result
+    // However the out-of-box won't handle this. Confluence uses a custom implementation
+    return preloaded ?
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (0, _resolveImportSync.resolveImportSync)(preloaded) : (0, _manifestHelpers.resolveImport)(maybePromise.render());
+  };
+  var LazyNodeRenderer = (0, _reactLooselyLazy.lazy)(function () {
+    return loadNodeRenderer();
+  });
+  LazyNodeRenderer.displayName = 'lazy(NodeRenderer)';
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var LoadableNodeRenderer = (0, _reactLoadable.default)({
+    loader: loadNodeRenderer,
     // react-loadable passes all props from <NodeRenderer> to the loading component at runtime,
     // but its TypeScript types only expect LoadingComponentProps. We cast here because
     // ExtensionLoading accepts additional props (node, showUnknownMacroPlaceholder) that
     // react-loadable will pass through but doesn't know about in its type definitions.
     loading: ExtensionLoading
   });
+  var NodeRenderer = function NodeRenderer(props) {
+    var _props$loadingFallbac;
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration')) {
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      return /*#__PURE__*/_react.default.createElement(LoadableNodeRenderer, props);
+    }
+    return /*#__PURE__*/_react.default.createElement(ExtensionRendererErrorBoundary, {
+      fallbackProps: props
+    }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+      fallback: (_props$loadingFallbac = props.loadingFallback) !== null && _props$loadingFallbac !== void 0 ? _props$loadingFallbac : null
+    }, /*#__PURE__*/_react.default.createElement(LazyNodeRenderer, props)));
+  };
+  NodeRenderer.preload = function () {
+    return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? LazyNodeRenderer.preload() : LoadableNodeRenderer.preload();
+  };
+  return NodeRenderer;
 }
 // eslint-disable-next-line @atlaskit/editor/no-re-export

package/dist/cjs/floating-toolbar/DropdownMenuExtensionItems.js

@@ -11,11 +11,15 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _extensions = require("../extensions");
 var _utils = require("../utils");
 var _DropdownMenuItem = require("./DropdownMenuItem");
 var _DropdownSeparator = require("./DropdownSeparator");
 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+
 var noop = function noop() {
   return null;
 };
@@ -94,12 +98,29 @@ var DropdownMenuExtensionItem = function DropdownMenuExtensionItem(_ref3) {
   // Use ref to keep icon component stable across renders
   var iconRef = (0, _react.useRef)(null);
   if (!iconRef.current && item.icon) {
-    iconRef.current = (0, _reactLoadable.default)({
-      loader: function loader() {
-        return resolveExtensionIcon(item.icon);
-      },
+    var loadIcon = function loadIcon() {
+      return resolveExtensionIcon(item.icon);
+    };
+    var IconLazy = (0, _reactLooselyLazy.lazy)(function () {
+      return resolveExtensionIcon(item.icon);
+    });
+    IconLazy.displayName = 'lazy(ExtensionIcon)';
+    var IconLoadable = (0, _reactLoadable.default)({
+      loader: loadIcon,
       loading: noop
     });
+    var Icon = function Icon(props) {
+      return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+        fallback: null
+      }, /*#__PURE__*/_react.default.createElement(IconLazy, props)) :
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
+      _react.default.createElement(IconLoadable, props);
+    };
+    Icon.preload = function () {
+      return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? IconLazy.preload() : IconLoadable.preload();
+    };
+    iconRef.current = Icon;
   }
   var dropdownItem = convertExtensionToDropdownMenuItem({
     item: item,

package/dist/cjs/icons/index.js

@@ -66,7 +66,10 @@ Object.defineProperty(exports, "rainbow", {
   }
 });
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _PanelInfoIcon = require("./shared/PanelInfoIcon");
 var _PanelWarningIcon = require("./shared/PanelWarningIcon");
 var _PanelErrorIcon = require("./shared/PanelErrorIcon");
@@ -76,16 +79,36 @@ var _BorderIcon = require("./shared/BorderIcon");
 var _SteppedRainbowIconDecoration = require("./shared/SteppedRainbowIconDecoration");
 var _DynamicStrokeIconDecoration = require("./shared/DynamicStrokeIconDecoration");
 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" != (0, _typeof2.default)(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); } // Disable no-re-export rule for entry point files
-/* eslint-disable @atlaskit/editor/no-re-export */
-var IconTable = exports.IconTable = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table'));
-    }).then(function (module) {
-      return module.default;
-    });
-  },
+/* eslint-disable @atlaskit/editor/no-re-export */ // oxlint-disable-next-line @atlassian/no-restricted-imports
+var loadIconTable = function loadIconTable() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table'));
+  }).then(function (module) {
+    return module.default;
+  });
+};
+var IconTableLazy = (0, _reactLooselyLazy.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table'));
+  }).then(function (module) {
+    return module.default;
+  });
+});
+IconTableLazy.displayName = 'lazy(IconTable)';
+var IconTableLoadable = (0, _reactLoadable.default)({
+  loader: loadIconTable,
   loading: function loading() {
     return null;
   }
-});
+});
+var IconTable = exports.IconTable = function IconTable(props) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(IconTableLazy, props)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
+  _react.default.createElement(IconTableLoadable, props);
+};
+IconTable.preload = function () {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? IconTableLazy.preload() : IconTableLoadable.preload();
+};

package/dist/cjs/monitoring/error.js

@@ -27,7 +27,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 = "124.0.0";
+var packageVersion = "125.0.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007