@atlaskit/editor-common 125.0.0 → 125.1.0

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 = "124.0.0";
+var packageVersion = "125.0.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui/Mention/mention-with-profilecard.js

@@ -8,6 +8,7 @@ exports.default = MentionWithProfileCard;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
 var _resourcedMention = _interopRequireDefault(require("@atlaskit/mention/resourced-mention"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
@@ -15,24 +16,42 @@ var _anchor = require("@atlaskit/primitives/anchor");
 var _profileCardTrigger = _interopRequireDefault(require("@atlaskit/profilecard/profile-card-trigger"));
 var _navigateToTeamsApp2 = require("@atlaskit/teams-app-config/utils/teams-app-navigation/navigate-to-teams-app");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-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); } // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
+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); } // oxlint-disable-next-line @atlassian/no-restricted-imports
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 // Lazy-loaded so the agent profile card chunk (and its `@atlaskit/rovo-agent-components`
 // dependency) stays off the critical path — it is only fetched when an agent mention
 // (`userType === 'APP'`) actually renders, never for person mentions.
-// Uses react-loadable to match editor-common's code-splitting factory (see src/icons/index.ts).
-var AgentProfileCardTrigger = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
-      '@atlaskit/profilecard/agent-profile-card-trigger'));
-    }).then(function (mod) {
-      return mod.AgentProfileCardTrigger;
-    });
-  },
+var loadAgentProfileCardTrigger = function loadAgentProfileCardTrigger() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
+    '@atlaskit/profilecard/agent-profile-card-trigger'));
+  }).then(function (mod) {
+    return mod.AgentProfileCardTrigger;
+  });
+};
+var AgentProfileCardTriggerLazy = (0, _reactLooselyLazy.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
+    '@atlaskit/profilecard/agent-profile-card-trigger'));
+  }).then(function (mod) {
+    return mod.AgentProfileCardTrigger;
+  });
+});
+AgentProfileCardTriggerLazy.displayName = 'lazy(AgentProfileCardTrigger)';
+var AgentProfileCardTriggerLoadable = (0, _reactLoadable.default)({
+  loader: loadAgentProfileCardTrigger,
   loading: function loading() {
     return null;
   }
 });
+var AgentProfileCardTrigger = function AgentProfileCardTrigger(props) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(AgentProfileCardTriggerLazy, props)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  _react.default.createElement(AgentProfileCardTriggerLoadable, props);
+};
 
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp

package/dist/es2019/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';
 const spinnerContainer = css({
   display: 'flex',
@@ -15,8 +20,11 @@ const spinnerContainer = css({
   height: '100%',
   width: '100%'
 });
-const ElementBrowserLoader = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(module => module.default),
+const loadElementBrowser = () => import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(module => module.default);
+const ElementBrowserLazy = lazy(() => import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(module => module.default));
+ElementBrowserLazy.displayName = 'lazy(ElementBrowser)';
+const ElementBrowserLoadable = Loadable({
+  loader: loadElementBrowser,
   loading: () => jsx("div", {
     css: spinnerContainer
   }, jsx(Spinner, {
@@ -24,4 +32,10 @@ const ElementBrowserLoader = Loadable({
     interactionName: "element-browser-spinner"
   }))
 });
+const ElementBrowserLoader = props => 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 = () => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? ElementBrowserLazy.preload() : ElementBrowserLoadable.preload();
 export default ElementBrowserLoader;

package/dist/es2019/extensibility/Extension.js

@@ -25,7 +25,8 @@ export class Extension extends Component {
         macroInteractionDesignFeatureFlags,
         showLivePagesBodiedMacrosRendererView,
         showUpdatedLivePages1PBodiedExtensionUI,
-        rendererExtensionHandlers
+        rendererExtensionHandlers,
+        onContentReady
       } = this.props;
 
       // Extensions are not yet using the new plugin architecture, and the use of the pluginInjectionApi
@@ -53,7 +54,8 @@ export class Extension extends Component {
         showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         rendererExtensionHandlers: rendererExtensionHandlers,
-        isLivePageViewMode: isLivePageViewMode
+        isLivePageViewMode: isLivePageViewMode,
+        onContentReady: onContentReady
       });
     });
     this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -181,7 +181,8 @@ class ExtensionComponentInner extends Component {
         extensionLoadingHandlers,
         editorView,
         showBodiedExtensionRendererView,
-        rendererExtensionHandlers
+        rendererExtensionHandlers,
+        onContentReady
       } = this.props;
       const {
         extensionType,
@@ -238,6 +239,7 @@ class ExtensionComponentInner extends Component {
             references: this.props.references,
             isSelected: isSelected,
             loadingFallback: loadingFallback,
+            onContentReady: onContentReady,
             showUnknownMacroPlaceholder: true
           });
         }

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -67,6 +67,7 @@ export const ExtensionNodeWrapper = ({
   nodeType,
   macroInteractionDesignFeatureFlags,
   generatedContentMotion = false,
+  contentReady = false,
   intl
 }) => {
   const {
@@ -76,6 +77,7 @@ export const ExtensionNodeWrapper = ({
   // 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/es2019/extensibility/GeneratedContentReveal.js

@@ -3,14 +3,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.
@@ -55,32 +54,28 @@ const embedContentEnteringStyles = null;
 
 export const GeneratedContentReveal = ({
   children,
+  contentReady,
   intl,
   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.
   const [wrapperElement, setWrapperElement] = useState(null);
-  const [state, setState] = useState('collapsed');
+  const [readyTimedOut, setReadyTimedOut] = useState(false);
+  const [opened, setOpened] = useState(false);
 
-  // Only a collapsed node opens, so whichever of the readiness signal and the fail-safe timer
-  // comes second changes nothing.
-  const startRevealing = useCallback(() => {
-    setState(current => current === 'collapsed' ? 'revealing' : current);
-  }, []);
-
-  // Step 2 → 3.
-  useNativeEmbedSettled(wrapperElement, startRevealing);
+  // Derived, so the two ways a node opens need no ordering between them.
+  const state = opened ? 'open' : contentReady || readyTimedOut ? 'revealing' : 'collapsed';
 
   // One timer, set on mount, so the deadline never moves.
   useEffect(() => {
-    const timer = setTimeout(startRevealing, READY_TIMEOUT_MS);
+    const timer = setTimeout(() => setReadyTimedOut(true), READY_TIMEOUT_MS);
     return () => clearTimeout(timer);
-  }, [startRevealing]);
+  }, []);
   useEffect(() => {
     if (state !== 'revealing') {
       return;
     }
-    const timer = setTimeout(() => setState('open'), REVEAL_TIMEOUT_MS);
+    const timer = setTimeout(() => setOpened(true), REVEAL_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [state]);
 
@@ -92,7 +87,7 @@ export const GeneratedContentReveal = ({
   const onAnimationEnd = useCallback(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/es2019/extensibility/extensionNodeView.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
@@ -264,22 +264,14 @@ export class ExtensionNode extends ReactNodeView {
     };
   }
   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.
@@ -288,19 +280,55 @@ export class ExtensionNode extends 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
+    });
   }
 }
+/**
+ * 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({
+  editorView,
+  eventDispatcher,
+  forwardRef,
+  getPos,
+  node,
+  renderProps
+}) {
+  var _renderProps$extensio, _renderProps$extensio2;
+  const [contentReady, setContentReady] = useState(false);
+  const onContentReady = useCallback(() => 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.
+  const 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/es2019/extensions/extension-handlers.js

@@ -1,6 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -59,6 +64,38 @@ function isUnknownConfluenceMacroWithBody(extensionNode) {
   var _extensionNode$parame, _extensionNode$parame2, _extensionNode$parame3;
   return extensionNode !== null && extensionNode.type === 'extension' && extensionNode.extensionType === 'com.atlassian.confluence.macro.core' && !!((_extensionNode$parame = extensionNode.parameters) !== null && _extensionNode$parame !== void 0 && (_extensionNode$parame2 = _extensionNode$parame.macroParams) !== null && _extensionNode$parame2 !== void 0 && (_extensionNode$parame3 = _extensionNode$parame2.__bodyContent) !== null && _extensionNode$parame3 !== void 0 && _extensionNode$parame3.value);
 }
+// eslint-disable-next-line @repo/internal/react/no-class-components -- error boundaries require a class component
+class ExtensionRendererErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {});
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidCatch(error) {
+    // eslint-disable-next-line no-console
+    console.error('Error rendering extension', error);
+  }
+  render() {
+    return this.state.error ? renderExtensionLoadingError(this.state.error, this.props.fallbackProps) : this.props.children;
+  }
+}
+const 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) {
   const intl = useIntl();
   const extensionNode = props.node;
@@ -81,27 +118,45 @@ function ExtensionLoading(props) {
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getNodeRenderer(extensionProvider, extensionType, extensionKey) {
-  return Loadable({
-    loader: () => {
-      const maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
-      if (maybePromise instanceof Promise) {
-        return maybePromise.then(node => resolveImport(node.render()));
-      } else {
-        var _renderSync, _ref;
-        const preloaded = maybePromise === null || maybePromise === void 0 ? 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());
-      }
-    },
+  const loadNodeRenderer = () => {
+    var _renderSync, _ref;
+    const maybePromise = getExtensionModuleNodeMaybePreloaded(extensionProvider, extensionType, extensionKey);
+    if (maybePromise instanceof Promise) {
+      return maybePromise.then(node => resolveImport(node.render()));
+    }
+    const preloaded = maybePromise === null || maybePromise === void 0 ? 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());
+  };
+  const LazyNodeRenderer = lazy(() => loadNodeRenderer());
+  LazyNodeRenderer.displayName = 'lazy(NodeRenderer)';
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const 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
   });
+  const 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 = () => 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/es2019/floating-toolbar/DropdownMenuExtensionItems.js

@@ -1,5 +1,8 @@
 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';
@@ -62,10 +65,21 @@ const DropdownMenuExtensionItem = ({
   // Use ref to keep icon component stable across renders
   const iconRef = useRef(null);
   if (!iconRef.current && item.icon) {
-    iconRef.current = Loadable({
-      loader: () => resolveExtensionIcon(item.icon),
+    const loadIcon = () => resolveExtensionIcon(item.icon);
+    const IconLazy = lazy(() => resolveExtensionIcon(item.icon));
+    IconLazy.displayName = 'lazy(ExtensionIcon)';
+    const IconLoadable = Loadable({
+      loader: loadIcon,
       loading: noop
     });
+    const Icon = props => 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 = () => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconLazy.preload() : IconLoadable.preload();
+    iconRef.current = Icon;
   }
   const dropdownItem = convertExtensionToDropdownMenuItem({
     item,

package/dist/es2019/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,7 +14,17 @@ export { PanelNoteIcon } from './shared/PanelNoteIcon';
 export { BorderIcon } from './shared/BorderIcon';
 export { SteppedRainbowIconDecoration, rainbow, disabledRainbow } from './shared/SteppedRainbowIconDecoration';
 export { DynamicStrokeIconDecoration } from './shared/DynamicStrokeIconDecoration';
-export const IconTable = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(module => module.default),
+const loadIconTable = () => import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(module => module.default);
+const IconTableLazy = lazy(() => import( /* webpackChunkName: "@atlaskit-internal_editor-icon-table" */'../icons/shared/table').then(module => module.default));
+IconTableLazy.displayName = 'lazy(IconTable)';
+const IconTableLoadable = Loadable({
+  loader: loadIconTable,
   loading: () => null
-});
+});
+export const IconTable = props => 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 = () => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? IconTableLazy.preload() : IconTableLoadable.preload();

package/dist/es2019/monitoring/error.js

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