@atlaskit/editor-plugin-extension 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-extension
 
+## 1.17.0
+
+### Minor Changes
+
+- [#162388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162388)
+  [`20e29525ca817`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/20e29525ca817) -
+  refactor: use React.lazy instead of react-loadable for config-panel header icon
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.16.0
 
 ### Minor Changes

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -494,6 +494,7 @@ function ConfigFormIntlWithBoundary(_ref6) {
     featureFlags: featureFlags
   }));
 }
-var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
+var result = (0, _analyticsNext.withAnalyticsContext)({
   source: 'ConfigPanel'
-})((0, _analyticsNext.withAnalyticsEvents)()(ConfigPanel));
+})((0, _analyticsNext.withAnalyticsEvents)()(ConfigPanel));
+var _default = exports.default = result;

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -13,6 +13,7 @@ var _new = require("@atlaskit/button/new");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -97,19 +98,35 @@ var Header = function Header(_ref) {
     enableHelpCTA = _ref.enableHelpCTA,
     onClose = _ref.onClose,
     intl = _ref.intl;
-  var ResolvedIcon = (0, _reactLoadable.default)({
-    loader: icon,
-    loading: function loading() {
-      return null;
+  var ResolvedIcon = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2_loadable')) {
+      return /*#__PURE__*/(0, _react.lazy)(function () {
+        return icon().then(function (Cmp) {
+          if ('default' in Cmp) {
+            return Cmp;
+          }
+          return {
+            default: Cmp
+          };
+        });
+      });
     }
-  });
+    return (0, _reactLoadable.default)({
+      loader: icon,
+      loading: function loading() {
+        return null;
+      }
+    });
+  }, [icon]);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
     css: itemStyles
   }, (0, _react2.jsx)("div", {
     css: itemIconStyles
+  }, (0, _react2.jsx)(_react.Suspense, {
+    fallback: null
   }, (0, _react2.jsx)(ResolvedIcon, {
     label: title
-  })), (0, _react2.jsx)("div", {
+  }))), (0, _react2.jsx)("div", {
     css: itemBodyStyles
   }, summary ? (0, _react2.jsx)("div", {
     css: itemTextStyles

package/dist/es2019/ui/ConfigPanel/ConfigPanel.js

@@ -438,6 +438,7 @@ function ConfigFormIntlWithBoundary({
     featureFlags: featureFlags
   }));
 }
-export default withAnalyticsContext({
+const result = withAnalyticsContext({
   source: 'ConfigPanel'
-})(withAnalyticsEvents()(ConfigPanel));
+})(withAnalyticsEvents()(ConfigPanel));
+export default result;

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment } from 'react';
+import { Fragment, lazy, Suspense, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -90,17 +91,31 @@ const Header = ({
   onClose,
   intl
 }) => {
-  const ResolvedIcon = Loadable({
-    loader: icon,
-    loading: () => null
-  });
+  const ResolvedIcon = useMemo(() => {
+    if (fg('platform_editor_react18_phase2_loadable')) {
+      return /*#__PURE__*/lazy(() => icon().then(Cmp => {
+        if ('default' in Cmp) {
+          return Cmp;
+        }
+        return {
+          default: Cmp
+        };
+      }));
+    }
+    return Loadable({
+      loader: icon,
+      loading: () => null
+    });
+  }, [icon]);
   return jsx(Fragment, null, jsx("div", {
     css: itemStyles
   }, jsx("div", {
     css: itemIconStyles
+  }, jsx(Suspense, {
+    fallback: null
   }, jsx(ResolvedIcon, {
     label: title
-  })), jsx("div", {
+  }))), jsx("div", {
     css: itemBodyStyles
   }, summary ? jsx("div", {
     css: itemTextStyles

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -484,6 +484,7 @@ function ConfigFormIntlWithBoundary(_ref6) {
     featureFlags: featureFlags
   }));
 }
-export default withAnalyticsContext({
+var result = withAnalyticsContext({
   source: 'ConfigPanel'
-})(withAnalyticsEvents()(ConfigPanel));
+})(withAnalyticsEvents()(ConfigPanel));
+export default result;

package/dist/esm/ui/ConfigPanel/Header.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment } from 'react';
+import { Fragment, lazy, Suspense, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -89,19 +90,35 @@ var Header = function Header(_ref) {
     enableHelpCTA = _ref.enableHelpCTA,
     onClose = _ref.onClose,
     intl = _ref.intl;
-  var ResolvedIcon = Loadable({
-    loader: icon,
-    loading: function loading() {
-      return null;
+  var ResolvedIcon = useMemo(function () {
+    if (fg('platform_editor_react18_phase2_loadable')) {
+      return /*#__PURE__*/lazy(function () {
+        return icon().then(function (Cmp) {
+          if ('default' in Cmp) {
+            return Cmp;
+          }
+          return {
+            default: Cmp
+          };
+        });
+      });
     }
-  });
+    return Loadable({
+      loader: icon,
+      loading: function loading() {
+        return null;
+      }
+    });
+  }, [icon]);
   return jsx(Fragment, null, jsx("div", {
     css: itemStyles
   }, jsx("div", {
     css: itemIconStyles
+  }, jsx(Suspense, {
+    fallback: null
   }, jsx(ResolvedIcon, {
     label: title
-  })), jsx("div", {
+  }))), jsx("div", {
     css: itemBodyStyles
   }, summary ? jsx("div", {
     css: itemTextStyles

package/dist/types/ui/ConfigPanel/ConfigPanel.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { ExtensionManifest, FieldDefinition, OnSaveCallback, Parameters } from '@atlaskit/editor-common/extensions';
-import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { RejectSave } from '../../types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExtensionPlugin, RejectSave } from '../../types';
+declare const result: React.ForwardRefExoticComponent<Pick<Omit<{
     extensionManifest?: ExtensionManifest | undefined;
     fields?: FieldDefinition[] | undefined;
     parameters?: Parameters | undefined;
@@ -16,57 +16,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
     errorMessage: string | null;
     isLoading?: boolean | undefined;
     featureFlags?: FeatureFlags | undefined;
-    api: import("@atlaskit/editor-common/types").EditorInjectionAPI<"extension", {
-        pluginConfiguration: import("../../types").ExtensionPluginOptions | undefined;
-        dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
-            pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
-            sharedState: {
-                createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
-                attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
-                performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
-            };
-            dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
-                pluginConfiguration: FeatureFlags;
-                sharedState: FeatureFlags;
-            }, FeatureFlags>>];
-            actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
-        }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
-            pluginConfiguration: FeatureFlags;
-            sharedState: FeatureFlags;
-        }, FeatureFlags>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
-            sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
-        }, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"decorations", {
-            sharedState: import("@atlaskit/editor-plugin-decorations").DecorationState;
-            actions: {
-                hoverDecoration: (nodeType: import("prosemirror-model").NodeType | import("prosemirror-model").NodeType[], add: boolean, className?: string | undefined) => import("@atlaskit/editor-common/types").Command;
-                removeDecoration: import("@atlaskit/editor-common/types").Command;
-            };
-        }, undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextPanel", {
-            actions: {
-                applyChange: (tr: import("prosemirror-state").Transaction) => import("prosemirror-state").Transaction;
-            };
-            sharedState: {
-                contents: React.ReactNode[] | undefined;
-            } | undefined;
-        }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextIdentifier", {
-            pluginConfiguration: import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined;
-            sharedState: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration | undefined;
-            commands: {
-                setProvider: (config: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration) => import("@atlaskit/editor-common/types").EditorCommand;
-            };
-        }, import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined>>];
-        sharedState: {
-            showContextPanel: boolean | undefined;
-        } | undefined;
-        actions: {
-            editSelectedExtension: () => boolean;
-            api: () => import("@atlaskit/editor-common/extensions").ExtensionAPI;
-            insertMacroFromMacroBrowser: (macroProvider: import("@atlaskit/editor-common/provider-factory").MacroProvider, macroNode?: import("prosemirror-model").Node | undefined, isEditing?: boolean | undefined) => (view: import("prosemirror-view").EditorView) => Promise<boolean>;
-            insertOrReplaceExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
-            insertOrReplaceBodiedExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
-            runMacroAutoConvert: import("../../types").RunMacroAutoConvert;
-            forceAutoSave: (applyChangeToContextPanel: import("@atlaskit/editor-plugin-context-panel").ApplyChangeHandler | undefined) => (resolve: () => void, reject?: RejectSave | undefined) => import("@atlaskit/editor-common/types").Command;
-        };
-    }> | undefined;
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
 }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
-export default _default;
+export default result;

package/dist/types-ts4.5/ui/ConfigPanel/ConfigPanel.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { ExtensionManifest, FieldDefinition, OnSaveCallback, Parameters } from '@atlaskit/editor-common/extensions';
-import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { RejectSave } from '../../types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExtensionPlugin, RejectSave } from '../../types';
+declare const result: React.ForwardRefExoticComponent<Pick<Omit<{
     extensionManifest?: ExtensionManifest | undefined;
     fields?: FieldDefinition[] | undefined;
     parameters?: Parameters | undefined;
@@ -16,66 +16,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
     errorMessage: string | null;
     isLoading?: boolean | undefined;
     featureFlags?: FeatureFlags | undefined;
-    api: import("@atlaskit/editor-common/types").EditorInjectionAPI<"extension", {
-        pluginConfiguration: import("../../types").ExtensionPluginOptions | undefined;
-        dependencies: [
-            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
-                pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
-                sharedState: {
-                    createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
-                    attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
-                    performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
-                };
-                dependencies: [
-                    import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
-                        pluginConfiguration: FeatureFlags;
-                        sharedState: FeatureFlags;
-                    }, FeatureFlags>>
-                ];
-                actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
-            }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>,
-            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
-                pluginConfiguration: FeatureFlags;
-                sharedState: FeatureFlags;
-            }, FeatureFlags>>,
-            import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
-                sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
-            }, undefined>,
-            import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"decorations", {
-                sharedState: import("@atlaskit/editor-plugin-decorations").DecorationState;
-                actions: {
-                    hoverDecoration: (nodeType: import("prosemirror-model").NodeType | import("prosemirror-model").NodeType[], add: boolean, className?: string | undefined) => import("@atlaskit/editor-common/types").Command;
-                    removeDecoration: import("@atlaskit/editor-common/types").Command;
-                };
-            }, undefined>,
-            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextPanel", {
-                actions: {
-                    applyChange: (tr: import("prosemirror-state").Transaction) => import("prosemirror-state").Transaction;
-                };
-                sharedState: {
-                    contents: React.ReactNode[] | undefined;
-                } | undefined;
-            }, undefined>>,
-            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextIdentifier", {
-                pluginConfiguration: import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined;
-                sharedState: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration | undefined;
-                commands: {
-                    setProvider: (config: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration) => import("@atlaskit/editor-common/types").EditorCommand;
-                };
-            }, import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined>>
-        ];
-        sharedState: {
-            showContextPanel: boolean | undefined;
-        } | undefined;
-        actions: {
-            editSelectedExtension: () => boolean;
-            api: () => import("@atlaskit/editor-common/extensions").ExtensionAPI;
-            insertMacroFromMacroBrowser: (macroProvider: import("@atlaskit/editor-common/provider-factory").MacroProvider, macroNode?: import("prosemirror-model").Node | undefined, isEditing?: boolean | undefined) => (view: import("prosemirror-view").EditorView) => Promise<boolean>;
-            insertOrReplaceExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
-            insertOrReplaceBodiedExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
-            runMacroAutoConvert: import("../../types").RunMacroAutoConvert;
-            forceAutoSave: (applyChangeToContextPanel: import("@atlaskit/editor-plugin-context-panel").ApplyChangeHandler | undefined) => (resolve: () => void, reject?: RejectSave | undefined) => import("@atlaskit/editor-common/types").Command;
-        };
-    }> | undefined;
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
 }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
-export default _default;
+export default result;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "1.16.0",
+	"version": "1.17.0",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,14 +24,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/adf-utils": "^19.10.0",
+		"@atlaskit/adf-utils": "^19.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/checkbox": "^15.1.0",
-		"@atlaskit/datetime-picker": "^15.7.0",
-		"@atlaskit/editor-common": "^94.13.0",
-		"@atlaskit/editor-json-transformer": "^8.20.0",
+		"@atlaskit/datetime-picker": "^15.9.0",
+		"@atlaskit/editor-common": "^94.17.0",
+		"@atlaskit/editor-json-transformer": "^8.21.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^1.3.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/heading": "2.4.7",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.0.0",
+		"@atlaskit/primitives": "^13.1.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/select": "^18.5.0",
@@ -59,7 +59,7 @@
 		"@atlaskit/tmp-editor-statsig": "^2.12.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.2.0",
-		"@atlaskit/tooltip": "^18.8.0",
+		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -109,6 +109,9 @@
 	"platform-feature-flags": {
 		"platform_editor_remove_copy_button_from_view_mode": {
 			"type": "boolean"
+		},
+		"platform_editor_react18_phase2_loadable": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {