@atlaskit/editor-plugin-floating-toolbar 21.0.0 → 21.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 21.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.1.0
+
+### Minor Changes
+
+- [`21d8655ca13bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21d8655ca13bf) -
+  Migrate the editor floating toolbar's lazy-loaded extension controls to react-loosely-lazy behind
+  the `platform_editor_loosely_lazy_migration` experiment.
+
+### Patch Changes
+
+- [`8d37dc7e55d62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d37dc7e55d62) -
+  Clean up shipped experiment `platform_editor_block_menu`
+- Updated dependencies
+
 ## 21.0.0
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.copyNode = void 0;
-var _browser = require("@atlaskit/editor-common/browser");
 var _clipboard = require("@atlaskit/editor-common/clipboard");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var copyNode = exports.copyNode = function copyNode(nodeType, editorAnalyticsApi, inputMethod) {
   return function (_ref) {
     var tr = _ref.tr;
@@ -26,39 +23,7 @@ var copyNode = exports.copyNode = function copyNode(nodeType, editorAnalyticsApi
     var schema = tr.doc.type.schema;
     var copyToClipboardTr = tr;
     var domNode = (0, _copyButton.toDOM)(contentNodeWithPos.node, schema);
-    if ((0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true)) {
-      (0, _copyButton.copyDomNode)(domNode, contentNodeWithPos.node.type, tr.selection);
-    } else {
-      if (domNode) {
-        var div = document.createElement('div');
-        var browser = (0, _browser.getBrowserInfo)();
-        div.appendChild(domNode);
-
-        // if copying inline content
-        if (contentNodeWithPos.node.type.inlineContent) {
-          // The "1 1" refers to the start and end depth of the slice
-          // since we're copying the text inside a paragraph, it will always be 1 1
-          // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          div.firstChild.setAttribute('data-pm-slice', '1 1 []');
-        } else {
-          // The "0 0" refers to the start and end depth of the slice
-          // since we're copying the block node only, it will always be 0 0
-          // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          div.firstChild.setAttribute('data-pm-slice', '0 0 []');
-        }
-        // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
-        // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
-        if (browser.safari && tr.selection instanceof _state.NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
-          (0, _clipboard.copyHTMLToClipboardPolyfill)(div);
-        } else {
-          (0, _clipboard.copyHTMLToClipboard)(div);
-        }
-      }
-    }
+    (0, _copyButton.copyDomNode)(domNode, contentNodeWithPos.node.type, tr.selection);
     if (editorAnalyticsApi) {
       var analyticsPayload = (0, _clipboard.getNodeCopiedAnalyticsPayload)(contentNodeWithPos.node, inputMethod);
       editorAnalyticsApi.attachAnalyticsEvent(analyticsPayload)(copyToClipboardTr);

package/dist/cjs/ui/CheckboxModal.js

@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
 var _checkbox = require("@atlaskit/checkbox/checkbox");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
-var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
 var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
+var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
 var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
 var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
 var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));

package/dist/cjs/ui/ExtensionsPlaceholder.js

@@ -11,13 +11,17 @@ 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 _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 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;
 };
@@ -51,13 +55,25 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var ExtensionButton = function ExtensionButton(props) {
-  var item = props.item,
-    node = props.node,
-    extensionApi = props.extensionApi,
-    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
-  var ButtonIcon = _react.default.useMemo(function () {
-    return item.icon ? (0, _reactLoadable.default)({
+var ButtonIconLazy = function ButtonIconLazy(_ref2) {
+  var icon = _ref2.icon,
+    label = _ref2.label;
+  var Icon = _react.default.useMemo(function () {
+    return (0, _reactLooselyLazy.lazyForPaint)(function () {
+      return resolveExtensionIcon(icon);
+    });
+  }, [icon]);
+  return /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    label: label
+  }));
+};
+var ButtonIconLoadable = function ButtonIconLoadable(_ref3) {
+  var icon = _ref3.icon,
+    label = _ref3.label;
+  var Icon = _react.default.useMemo(function () {
+    return (0, _reactLoadable.default)({
       // Ignored via go/ees005
       // eslint-disable-next-line require-await
       loader: function () {
@@ -65,7 +81,7 @@ var ExtensionButton = function ExtensionButton(props) {
           return _regenerator.default.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+                return _context2.abrupt("return", resolveExtensionIcon(icon));
               case 1:
               case "end":
                 return _context2.stop();
@@ -78,8 +94,28 @@ var ExtensionButton = function ExtensionButton(props) {
         return loader;
       }(),
       loading: noop
-    }) : undefined;
-  }, [item.icon]);
+    });
+  }, [icon]);
+  return /*#__PURE__*/_react.default.createElement(Icon, {
+    label: label
+  });
+};
+var ExtensionIcon = function ExtensionIcon(_ref4) {
+  var icon = _ref4.icon,
+    label = _ref4.label;
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/_react.default.createElement(ButtonIconLazy, {
+    icon: icon,
+    label: label
+  }) : /*#__PURE__*/_react.default.createElement(ButtonIconLoadable, {
+    icon: icon,
+    label: label
+  });
+};
+var ExtensionButton = function ExtensionButton(props) {
+  var item = props.item,
+    node = props.node,
+    extensionApi = props.extensionApi,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var onClick = function onClick() {
     if (typeof item.action !== 'function') {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
@@ -104,7 +140,8 @@ var ExtensionButton = function ExtensionButton(props) {
   return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     title: item.label,
     ariaLabel: getAriaLabel(),
-    icon: ButtonIcon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
+    icon: item.icon ? /*#__PURE__*/_react.default.createElement(ExtensionIcon, {
+      icon: item.icon,
       label: item.label || ''
     }) : undefined,
     onClick: onClick,

package/dist/cjs/ui/SimpleModal.js

@@ -8,8 +8,8 @@ exports.SimpleModal = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
-var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
 var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
+var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
 var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
 var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
 var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));

package/dist/es2019/entry-points/floatingToolbarPlugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { floatingToolbarPlugin } from '../floatingToolbarPlugin';

package/dist/es2019/pm-plugins/commands.js

@@ -1,8 +1,5 @@
-import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill, getNodeCopiedAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
+import { getNodeCopiedAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
 import { copyDomNode, getSelectedNodeOrNodeParentByNodeType, toDOM } from '@atlaskit/editor-common/copy-button';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export const copyNode = (nodeType, editorAnalyticsApi, inputMethod) => ({
   tr
 }) => {
@@ -20,39 +17,7 @@ export const copyNode = (nodeType, editorAnalyticsApi, inputMethod) => ({
   const schema = tr.doc.type.schema;
   const copyToClipboardTr = tr;
   const domNode = toDOM(contentNodeWithPos.node, schema);
-  if (editorExperiment('platform_editor_block_menu', true)) {
-    copyDomNode(domNode, contentNodeWithPos.node.type, tr.selection);
-  } else {
-    if (domNode) {
-      const div = document.createElement('div');
-      const browser = getBrowserInfo();
-      div.appendChild(domNode);
-
-      // if copying inline content
-      if (contentNodeWithPos.node.type.inlineContent) {
-        // The "1 1" refers to the start and end depth of the slice
-        // since we're copying the text inside a paragraph, it will always be 1 1
-        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        div.firstChild.setAttribute('data-pm-slice', '1 1 []');
-      } else {
-        // The "0 0" refers to the start and end depth of the slice
-        // since we're copying the block node only, it will always be 0 0
-        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        div.firstChild.setAttribute('data-pm-slice', '0 0 []');
-      }
-      // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
-      // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
-      if (browser.safari && tr.selection instanceof NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
-        copyHTMLToClipboardPolyfill(div);
-      } else {
-        copyHTMLToClipboard(div);
-      }
-    }
-  }
+  copyDomNode(domNode, contentNodeWithPos.node.type, tr.selection);
   if (editorAnalyticsApi) {
     const analyticsPayload = getNodeCopiedAnalyticsPayload(contentNodeWithPos.node, inputMethod);
     editorAnalyticsApi.attachAnalyticsEvent(analyticsPayload)(copyToClipboardTr);

package/dist/es2019/ui/CheckboxModal.js

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import Button from '@atlaskit/button/default/button';
 import { Checkbox } from '@atlaskit/checkbox/checkbox';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
-import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalBody from '@atlaskit/modal-dialog/modal-body';
+import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';

package/dist/es2019/ui/ExtensionsPlaceholder.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { nodeToJSON } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import Dropdown from './Dropdown';
 const noop = () => null;
 const isDefaultExport = mod => {
@@ -17,6 +20,43 @@ const resolveExtensionIcon = async getIcon => {
   const maybeIcon = await getIcon();
   return isDefaultExport(maybeIcon) ? maybeIcon.default : maybeIcon;
 };
+const ButtonIconLazy = ({
+  icon,
+  label
+}) => {
+  const Icon = React.useMemo(() => lazyForPaint(() => resolveExtensionIcon(icon)), [icon]);
+  return /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  }));
+};
+const ButtonIconLoadable = ({
+  icon,
+  label
+}) => {
+  const Icon = React.useMemo(() => Loadable({
+    // Ignored via go/ees005
+    // eslint-disable-next-line require-await
+    loader: async () => resolveExtensionIcon(icon),
+    loading: noop
+  }), [icon]);
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  });
+};
+const ExtensionIcon = ({
+  icon,
+  label
+}) => {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(ButtonIconLazy, {
+    icon: icon,
+    label: label
+  }) : /*#__PURE__*/React.createElement(ButtonIconLoadable, {
+    icon: icon,
+    label: label
+  });
+};
 const ExtensionButton = props => {
   const {
     item,
@@ -24,12 +64,6 @@ const ExtensionButton = props => {
     extensionApi,
     areAnyNewToolbarFlagsEnabled
   } = props;
-  const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
-    // Ignored via go/ees005
-    // eslint-disable-next-line require-await
-    loader: async () => resolveExtensionIcon(item.icon),
-    loading: noop
-  }) : undefined, [item.icon]);
   const onClick = () => {
     if (typeof item.action !== 'function') {
       throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);
@@ -54,7 +88,8 @@ const ExtensionButton = props => {
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
     ariaLabel: getAriaLabel(),
-    icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+    icon: item.icon ? /*#__PURE__*/React.createElement(ExtensionIcon, {
+      icon: item.icon,
       label: item.label || ''
     }) : undefined,
     onClick: onClick,

package/dist/es2019/ui/SimpleModal.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Button from '@atlaskit/button/default/button';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
-import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalBody from '@atlaskit/modal-dialog/modal-body';
+import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';

package/dist/es2019/ui/Toolbar.js

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import React, { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/entry-points/floatingToolbarPlugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { floatingToolbarPlugin } from '../floatingToolbarPlugin';

package/dist/esm/pm-plugins/commands.js

@@ -1,8 +1,5 @@
-import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill, getNodeCopiedAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
+import { getNodeCopiedAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
 import { copyDomNode, getSelectedNodeOrNodeParentByNodeType, toDOM } from '@atlaskit/editor-common/copy-button';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var copyNode = function copyNode(nodeType, editorAnalyticsApi, inputMethod) {
   return function (_ref) {
     var tr = _ref.tr;
@@ -20,39 +17,7 @@ export var copyNode = function copyNode(nodeType, editorAnalyticsApi, inputMetho
     var schema = tr.doc.type.schema;
     var copyToClipboardTr = tr;
     var domNode = toDOM(contentNodeWithPos.node, schema);
-    if (editorExperiment('platform_editor_block_menu', true)) {
-      copyDomNode(domNode, contentNodeWithPos.node.type, tr.selection);
-    } else {
-      if (domNode) {
-        var div = document.createElement('div');
-        var browser = getBrowserInfo();
-        div.appendChild(domNode);
-
-        // if copying inline content
-        if (contentNodeWithPos.node.type.inlineContent) {
-          // The "1 1" refers to the start and end depth of the slice
-          // since we're copying the text inside a paragraph, it will always be 1 1
-          // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          div.firstChild.setAttribute('data-pm-slice', '1 1 []');
-        } else {
-          // The "0 0" refers to the start and end depth of the slice
-          // since we're copying the block node only, it will always be 0 0
-          // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          div.firstChild.setAttribute('data-pm-slice', '0 0 []');
-        }
-        // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
-        // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
-        if (browser.safari && tr.selection instanceof NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
-          copyHTMLToClipboardPolyfill(div);
-        } else {
-          copyHTMLToClipboard(div);
-        }
-      }
-    }
+    copyDomNode(domNode, contentNodeWithPos.node.type, tr.selection);
     if (editorAnalyticsApi) {
       var analyticsPayload = getNodeCopiedAnalyticsPayload(contentNodeWithPos.node, inputMethod);
       editorAnalyticsApi.attachAnalyticsEvent(analyticsPayload)(copyToClipboardTr);

package/dist/esm/ui/CheckboxModal.js

@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import Button from '@atlaskit/button/default/button';
 import { Checkbox } from '@atlaskit/checkbox/checkbox';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
-import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalBody from '@atlaskit/modal-dialog/modal-body';
+import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';

package/dist/esm/ui/ExtensionsPlaceholder.js

@@ -3,11 +3,14 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { nodeToJSON } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import Dropdown from './Dropdown';
 var noop = function noop() {
   return null;
@@ -42,13 +45,25 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var ExtensionButton = function ExtensionButton(props) {
-  var item = props.item,
-    node = props.node,
-    extensionApi = props.extensionApi,
-    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
-  var ButtonIcon = React.useMemo(function () {
-    return item.icon ? Loadable({
+var ButtonIconLazy = function ButtonIconLazy(_ref2) {
+  var icon = _ref2.icon,
+    label = _ref2.label;
+  var Icon = React.useMemo(function () {
+    return lazyForPaint(function () {
+      return resolveExtensionIcon(icon);
+    });
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  }));
+};
+var ButtonIconLoadable = function ButtonIconLoadable(_ref3) {
+  var icon = _ref3.icon,
+    label = _ref3.label;
+  var Icon = React.useMemo(function () {
+    return Loadable({
       // Ignored via go/ees005
       // eslint-disable-next-line require-await
       loader: function () {
@@ -56,7 +71,7 @@ var ExtensionButton = function ExtensionButton(props) {
           return _regeneratorRuntime.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+                return _context2.abrupt("return", resolveExtensionIcon(icon));
               case 1:
               case "end":
                 return _context2.stop();
@@ -69,8 +84,28 @@ var ExtensionButton = function ExtensionButton(props) {
         return loader;
       }(),
       loading: noop
-    }) : undefined;
-  }, [item.icon]);
+    });
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  });
+};
+var ExtensionIcon = function ExtensionIcon(_ref4) {
+  var icon = _ref4.icon,
+    label = _ref4.label;
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(ButtonIconLazy, {
+    icon: icon,
+    label: label
+  }) : /*#__PURE__*/React.createElement(ButtonIconLoadable, {
+    icon: icon,
+    label: label
+  });
+};
+var ExtensionButton = function ExtensionButton(props) {
+  var item = props.item,
+    node = props.node,
+    extensionApi = props.extensionApi,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var onClick = function onClick() {
     if (typeof item.action !== 'function') {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
@@ -95,7 +130,8 @@ var ExtensionButton = function ExtensionButton(props) {
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
     ariaLabel: getAriaLabel(),
-    icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+    icon: item.icon ? /*#__PURE__*/React.createElement(ExtensionIcon, {
+      icon: item.icon,
       label: item.label || ''
     }) : undefined,
     onClick: onClick,

package/dist/esm/ui/SimpleModal.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Button from '@atlaskit/button/default/button';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
-import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalBody from '@atlaskit/modal-dialog/modal-body';
+import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';

package/dist/esm/ui/Toolbar.js

@@ -14,6 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import React, { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "21.0.0",
+	"version": "21.1.1",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,10 +40,11 @@
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/menu": "^11.0.0",
 		"@atlaskit/modal-dialog": "^16.6.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/select": "^22.11.0",
-		"@atlaskit/tmp-editor-statsig": "^199.0.0",
+		"@atlaskit/tmp-editor-statsig": "^201.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -51,10 +52,11 @@
 		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3",
-		"react-loadable": "^5.1.0"
+		"react-loadable": "^5.1.0",
+		"react-loosely-lazy": "^1.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.0.0",
+		"@atlaskit/editor-common": "^123.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"