@atlaskit/editor-common 124.0.0 → 125.1.0

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

@@ -7,6 +7,11 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import Spinner from '@atlaskit/spinner/spinner';
 var spinnerContainer = css({
   display: 'flex',
@@ -15,12 +20,19 @@ var spinnerContainer = css({
   height: '100%',
   width: '100%'
 });
-var ElementBrowserLoader = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
-      return module.default;
-    });
-  },
+var loadElementBrowser = function loadElementBrowser() {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
+    return module.default;
+  });
+};
+var ElementBrowserLazy = lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
+    return module.default;
+  });
+});
+ElementBrowserLazy.displayName = 'lazy(ElementBrowser)';
+var ElementBrowserLoadable = Loadable({
+  loader: loadElementBrowser,
   loading: function loading() {
     return jsx("div", {
       css: spinnerContainer
@@ -30,4 +42,14 @@ var ElementBrowserLoader = Loadable({
     }));
   }
 });
+var ElementBrowserLoader = function ElementBrowserLoader(props) {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? jsx(LazySuspense, {
+    fallback: null
+  }, jsx(ElementBrowserLazy, props)) :
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  jsx(ElementBrowserLoadable, props);
+};
+ElementBrowserLoader.preload = function () {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? ElementBrowserLazy.preload() : ElementBrowserLoadable.preload();
+};
 export default ElementBrowserLoader;

package/dist/esm/extensibility/Extension.js

@@ -33,7 +33,8 @@ export var 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.
@@ -59,7 +60,8 @@ export var Extension = /*#__PURE__*/function (_Component) {
         showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         rendererExtensionHandlers: rendererExtensionHandlers,
-        isLivePageViewMode: isLivePageViewMode
+        isLivePageViewMode: isLivePageViewMode,
+        onContentReady: onContentReady
       });
     });
     _this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/esm/extensibility/ExtensionComponent.js

@@ -233,7 +233,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,
@@ -288,6 +289,7 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
             references: _this.props.references,
             isSelected: isSelected,
             loadingFallback: loadingFallback,
+            onContentReady: onContentReady,
             showUnknownMacroPlaceholder: true
           });
         }

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -68,6 +68,8 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
     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;
@@ -75,6 +77,7 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   // Fixed for the node view's lifetime: switching would remount the subtree and reload the embed.
   if (generatedContentMotion) {
     return jsx(GeneratedContentReveal, {
+      contentReady: contentReady,
       intl: intl,
       showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }, children);

package/dist/esm/extensibility/GeneratedContentReveal.js

@@ -4,14 +4,13 @@ import "./GeneratedContentReveal.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';
 import { ExtensionSSRReactContextsProvider } from './ExtensionSSRReactContextsProvider';
-import { useNativeEmbedSettled } from './useNativeEmbedSettled';
 
 /*
  * 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.
@@ -56,42 +55,41 @@ var embedContentEnteringStyles = null;
 
 export var 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 = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     wrapperElement = _useState2[0],
     setWrapperElement = _useState2[1];
-  var _useState3 = useState('collapsed'),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
+    readyTimedOut = _useState4[0],
+    setReadyTimedOut = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_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 = useCallback(function () {
-    setState(function (current) {
-      return current === 'collapsed' ? 'revealing' : current;
-    });
-  }, []);
-
-  // Step 2 → 3.
-  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.
   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]);
+  }, []);
   useEffect(function () {
     if (state !== 'revealing') {
       return;
     }
     var timer = setTimeout(function () {
-      return setState('open');
+      return setOpened(true);
     }, REVEAL_TIMEOUT_MS);
     return function () {
       return clearTimeout(timer);
@@ -106,7 +104,7 @@ export var GeneratedContentReveal = function GeneratedContentReveal(_ref) {
   var onAnimationEnd = 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.createElement(ExtensionSSRReactContextsProvider, {

package/dist/esm/extensibility/extensionNodeView.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -8,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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 = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isSSR } from '../core-utils';
@@ -302,22 +303,14 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     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.createElement(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) && isNativeEmbedExtension(this.node)
-      }, /*#__PURE__*/React.createElement(Extension, {
+      return /*#__PURE__*/React.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.
@@ -326,20 +319,60 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
         // 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);
+/**
+ * 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentReady = _useState2[0],
+    setContentReady = _useState2[1];
+  var onContentReady = 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) && isNativeEmbedExtension(node);
+  return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
+    intl: renderProps.intl,
+    nodeType: node.type.name,
+    macroInteractionDesignFeatureFlags: renderProps.macroInteractionDesignFeatureFlags,
+    generatedContentMotion: generatedContentMotion,
+    contentReady: contentReady
+  }, /*#__PURE__*/React.createElement(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
 export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionLoadingHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags, showLivePagesBodiedMacrosRendererView, showUpdatedLivePages1PBodiedExtensionUI, rendererExtensionHandlers, intl) {

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

@@ -1,9 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
 import { useIntl } from 'react-intl';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getExtensionKeyAndNodeKey, resolveImport } from './manifest-helpers';
 import { messages } from './messages';
 import { resolveImportSync } from './resolveImportSync';
@@ -105,6 +117,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;
+    _classCallCheck(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));
+    _defineProperty(_this, "state", {});
+    return _this;
+  }
+  _inherits(ExtensionRendererErrorBoundary, _React$Component);
+  return _createClass(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.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.createElement(ExtensionLoading, _extends({
+    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 = useIntl();
   var extensionNode = props.node;
@@ -127,29 +185,51 @@ function ExtensionLoading(props) {
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getNodeRenderer(extensionProvider, extensionType, extensionKey) {
-  return Loadable({
-    loader: function loader() {
-      var maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
-      if (maybePromise instanceof Promise) {
-        return maybePromise.then(function (node) {
-          return 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
-        resolveImportSync(preloaded) : 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 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
+    resolveImportSync(preloaded) : resolveImport(maybePromise.render());
+  };
+  var LazyNodeRenderer = lazy(function () {
+    return loadNodeRenderer();
+  });
+  LazyNodeRenderer.displayName = 'lazy(NodeRenderer)';
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var LoadableNodeRenderer = Loadable({
+    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 (!isExperimentEnabled('platform_editor_loosely_lazy_migration')) {
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      return /*#__PURE__*/React.createElement(LoadableNodeRenderer, props);
+    }
+    return /*#__PURE__*/React.createElement(ExtensionRendererErrorBoundary, {
+      fallbackProps: props
+    }, /*#__PURE__*/React.createElement(LazySuspense, {
+      fallback: (_props$loadingFallbac = props.loadingFallback) !== null && _props$loadingFallbac !== void 0 ? _props$loadingFallbac : null
+    }, /*#__PURE__*/React.createElement(LazyNodeRenderer, props)));
+  };
+  NodeRenderer.preload = function () {
+    return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? LazyNodeRenderer.preload() : LoadableNodeRenderer.preload();
+  };
+  return NodeRenderer;
 }
 // eslint-disable-next-line @atlaskit/editor/no-re-export
 export { getExtensionManifest } from './getExtensionManifest';

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

@@ -3,6 +3,9 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useRef, useState } from 'react';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getContextualToolbarItemsFromModule } from '../extensions';
 import { nodeToJSON } from '../utils';
 import { DropdownMenuItem } from './DropdownMenuItem';
@@ -85,12 +88,29 @@ var DropdownMenuExtensionItem = function DropdownMenuExtensionItem(_ref3) {
   // Use ref to keep icon component stable across renders
   var iconRef = useRef(null);
   if (!iconRef.current && item.icon) {
-    iconRef.current = Loadable({
-      loader: function loader() {
-        return resolveExtensionIcon(item.icon);
-      },
+    var loadIcon = function loadIcon() {
+      return resolveExtensionIcon(item.icon);
+    };
+    var IconLazy = lazy(function () {
+      return resolveExtensionIcon(item.icon);
+    });
+    IconLazy.displayName = 'lazy(ExtensionIcon)';
+    var IconLoadable = Loadable({
+      loader: loadIcon,
       loading: noop
     });
+    var Icon = function Icon(props) {
+      return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(IconLazy, props)) :
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
+      React.createElement(IconLoadable, props);
+    };
+    Icon.preload = function () {
+      return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconLazy.preload() : IconLoadable.preload();
+    };
+    iconRef.current = Icon;
   }
   var dropdownItem = convertExtensionToDropdownMenuItem({
     item: item,

package/dist/esm/icons/index.js

@@ -1,7 +1,11 @@
 // Disable no-re-export rule for entry point files
 /* eslint-disable @atlaskit/editor/no-re-export */
 
+import React from 'react';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 export { PanelInfoIcon } from './shared/PanelInfoIcon';
 export { PanelWarningIcon } from './shared/PanelWarningIcon';
 export { PanelErrorIcon } from './shared/PanelErrorIcon';
@@ -10,13 +14,31 @@ export { PanelNoteIcon } from './shared/PanelNoteIcon';
 export { BorderIcon } from './shared/BorderIcon';
 export { SteppedRainbowIconDecoration, rainbow, disabledRainbow } from './shared/SteppedRainbowIconDecoration';
 export { DynamicStrokeIconDecoration } from './shared/DynamicStrokeIconDecoration';
-export var IconTable = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
-      return module.default;
-    });
-  },
+var loadIconTable = function loadIconTable() {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
+    return module.default;
+  });
+};
+var IconTableLazy = lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(function (module) {
+    return module.default;
+  });
+});
+IconTableLazy.displayName = 'lazy(IconTable)';
+var IconTableLoadable = Loadable({
+  loader: loadIconTable,
   loading: function loading() {
     return null;
   }
-});
+});
+export var IconTable = function IconTable(props) {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(IconTableLazy, props)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading -- pass icon props to the legacy component
+  React.createElement(IconTableLoadable, props);
+};
+IconTable.preload = function () {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconTableLazy.preload() : IconTableLoadable.preload();
+};

package/dist/esm/monitoring/error.js

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