@atlaskit/editor-plugin-extension 4.1.2 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.0.0
+
+### Major Changes
+
+- [#122281](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122281)
+  [`8c84e6db9b94f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c84e6db9b94f) -
+  EDF-2539 Integrated object sidebar api through context-panel plugin in extensions to show panel.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.2
 
 ### Patch Changes

package/dist/cjs/extensionPlugin.js

@@ -20,6 +20,9 @@ var _bodiedExtension = require("./pm-plugins/toDOM-fixes/bodiedExtension");
 var _toolbar = require("./pm-plugins/toolbar");
 var _uniqueId = require("./pm-plugins/unique-id");
 var _contextPanel = require("./ui/context-panel");
+var _useConfigPanelPluginHook = require("./ui/useConfigPanelPluginHook");
+// Remove below line when cleaning up platform_editor_ai_object_sidebar_injection feature flag
+
 var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
   var _ref$config = _ref.config,
@@ -58,7 +61,9 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       }
       var pluginState = _pluginKey.pluginKey.getState(state);
       return {
-        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel,
+        extensionProvider: pluginState === null || pluginState === void 0 ? void 0 : pluginState.extensionProvider,
+        processParametersAfter: pluginState === null || pluginState === void 0 ? void 0 : pluginState.processParametersAfter
       };
     },
     pmPlugins: function pmPlugins() {
@@ -176,10 +181,17 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
       }),
-      contextPanel: (0, _contextPanel.getContextPanel)(function () {
+      contextPanel: !(0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? (0, _contextPanel.getContextPanel)(function () {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(_api, featureFlags)
-    }
+      })(_api, featureFlags) : undefined
+    },
+    usePluginHook: (0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
+      var editorView = _ref6.editorView;
+      (0, _useConfigPanelPluginHook.useConfigPanelPluginHook)({
+        editorView: editorView,
+        api: _api
+      });
+    } : undefined
   };
 };

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

@@ -27,7 +27,9 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
+var _DescriptionSummary = require("./DescriptionSummary");
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _FormContent = _interopRequireDefault(require("./FormContent"));
 var _FormErrorBoundary = require("./FormErrorBoundary");
@@ -270,6 +272,10 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
     }());
     // memoized to prevent rerender on new parameters
     (0, _defineProperty2.default)(_this, "renderHeader", (0, _memoizeOne.default)(function (extensionManifest) {
+      // If below FG is true then Header will be rendered separately
+      if ((0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection')) {
+        return null;
+      }
       var _this$props2 = _this.props,
         onCancel = _this$props2.onCancel,
         showHeader = _this$props2.showHeader;
@@ -436,7 +442,9 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
               noValidate: true,
               onKeyDown: handleKeyDown,
               "data-testid": "extension-config-panel"
-            }), _this2.renderHeader(extensionManifest), /*#__PURE__*/_react.default.createElement(ConfigFormIntlWithBoundary, {
+            }), _this2.renderHeader(extensionManifest), (0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') && /*#__PURE__*/_react.default.createElement(_DescriptionSummary.DescriptionSummary, {
+              extensionManifest: extensionManifest
+            }), /*#__PURE__*/_react.default.createElement(ConfigFormIntlWithBoundary, {
               api: api,
               canSave: false,
               errorMessage: errorMessage,

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DescriptionSummary = DescriptionSummary;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _primitives = require("@atlaskit/primitives");
+var _HelpLink = require("./HelpLink");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var descriptionStyles = (0, _primitives.xcss)({
+  marginBottom: 'space.300'
+});
+var helpLinkStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.150'
+});
+function DescriptionSummary(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var description = extensionManifest.description,
+    documentationUrl = extensionManifest.documentationUrl;
+  // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+  // This will be removed when Top 5 Modernized Macros updates are rolled out
+  var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+  var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (description || documentationUrl) && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: descriptionStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && /*#__PURE__*/_react.default.createElement(_react.Fragment, null,
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  description.replace(/([^.])$/, '$1.'), ' '), documentationUrl && (enableHelpCTA ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: helpLinkStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    as: "p"
+  }, /*#__PURE__*/_react.default.createElement(_HelpLink.HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(_extensions.configPanelMessages.help)
+  }))) : /*#__PURE__*/_react.default.createElement(_HelpLink.HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(_extensions.configPanelMessages.documentation)
+  })))));
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _withExtensionManifest = require("../withExtensionManifest");
+var itemBodyStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  margin: 'space.200',
+  flexGrow: 3
+});
+var itemTextStyles = (0, _primitives.xcss)({
+  maxWidth: '100%',
+  whiteSpace: 'initial'
+});
+var summaryStyles = (0, _primitives.xcss)({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: 'color.text.subtlest',
+  marginTop: 'space.050',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+function HeaderAfterIconElement(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var title = extensionManifest.title;
+  var summary = extensionManifest.summary;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: itemBodyStyles
+  }, summary ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: itemTextStyles
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "context-panel-title",
+    "data-testid": "context-panel-title"
+  }, title), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: summaryStyles
+  }, summary)) : /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    direction: "column",
+    alignItems: "center",
+    testId: "context-panel-title"
+  }, title));
+}
+var _default = exports.default = (0, _withExtensionManifest.withExtensionManifest)(HeaderAfterIconElement);

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _withExtensionManifest = require("../withExtensionManifest");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var iconWidth = '40px';
+var itemIconStyles = (0, _primitives.xcss)({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function HeaderIcon(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var icon = extensionManifest.icons['48'];
+  var title = extensionManifest.title;
+  var ResolvedIcon = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _react.lazy)(function () {
+      return icon().then(function (Cmp) {
+        if ('default' in Cmp) {
+          return Cmp;
+        }
+        return {
+          default: Cmp
+        };
+      });
+    });
+  }, [icon]);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: itemIconStyles
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(ResolvedIcon, {
+    label: title
+  })));
+}
+var _default = exports.default = (0, _withExtensionManifest.withExtensionManifest)(HeaderIcon);

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

@@ -15,6 +15,7 @@ var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _HelpLink = require("./HelpLink");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -152,22 +153,12 @@ var Header = function Header(_ref) {
     xcss: helpLinkStyles
   }, (0, _react2.jsx)(_primitives.Text, {
     as: "p"
-  }, (0, _react2.jsx)(HelpLink, {
+  }, (0, _react2.jsx)(_HelpLink.HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(_extensions.configPanelMessages.help)
-  }))) : (0, _react2.jsx)(HelpLink, {
+  }))) : (0, _react2.jsx)(_HelpLink.HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(_extensions.configPanelMessages.documentation)
   })))));
 };
-var HelpLink = function HelpLink(_ref2) {
-  var documentationUrl = _ref2.documentationUrl,
-    label = _ref2.label;
-  return (0, _react2.jsx)("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: documentationUrl,
-    "data-testid": "config-panel-header-documentation-link"
-  }, label);
-};
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HelpLink = void 0;
+var _react = _interopRequireDefault(require("react"));
+var HelpLink = exports.HelpLink = function HelpLink(_ref) {
+  var documentationUrl = _ref.documentationUrl,
+    label = _ref.label;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+    _react.default.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentationUrl,
+      "data-testid": "config-panel-header-documentation-link"
+    }, label)
+  );
+};

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALLOWED_PARAM_TYPES = exports.ALLOWED_LOGGED_MACRO_PARAMS = void 0;
+exports.CONFIG_PANEL_WIDTH = exports.CONFIG_PANEL_ID = exports.ALLOWED_PARAM_TYPES = exports.ALLOWED_LOGGED_MACRO_PARAMS = void 0;
 // Allowlist of { macroKey: parameterName[] } for analytics logging
 var ALLOWED_LOGGED_MACRO_PARAMS = exports.ALLOWED_LOGGED_MACRO_PARAMS = {
   children: ['all', 'first', 'depth', 'style', 'excerptType', 'sort', 'reverse'],
   'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
   excerpt: ['hidden']
 };
-var ALLOWED_PARAM_TYPES = exports.ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+var ALLOWED_PARAM_TYPES = exports.ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+var CONFIG_PANEL_WIDTH = exports.CONFIG_PANEL_WIDTH = 320;
+var CONFIG_PANEL_ID = exports.CONFIG_PANEL_ID = 'extensions-panel';

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withExtensionManifest = withExtensionManifest;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _useStateFromPromise3 = require("./use-state-from-promise");
+var _excluded = ["extensionKey", "extensionProvider", "extensionType"];
+function withExtensionManifest(WrappedComponent) {
+  return function WithExtensionManifest(props) {
+    var extensionKey = props.extensionKey,
+      extensionProvider = props.extensionProvider,
+      extensionType = props.extensionType,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    var _useStateFromPromise = (0, _useStateFromPromise3.useStateFromPromise)(function () {
+        return extensionProvider.getExtension(extensionType, extensionKey);
+      }, [extensionProvider, extensionType, extensionKey]),
+      _useStateFromPromise2 = (0, _slicedToArray2.default)(_useStateFromPromise, 1),
+      extensionManifest = _useStateFromPromise2[0];
+    return extensionManifest ?
+    /*#__PURE__*/
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading
+    _react.default.createElement(WrappedComponent, (0, _extends2.default)({
+      extensionManifest: extensionManifest
+    }, restProps)) : null;
+  };
+}

package/dist/cjs/ui/useConfigPanelPluginHook.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContextPanelBodyComponent = void 0;
+exports.hideConfigPanel = hideConfigPanel;
+exports.showConfigPanel = showConfigPanel;
+exports.startClosingConfigPanel = startClosingConfigPanel;
+exports.useConfigPanelPluginHook = useConfigPanelPluginHook;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _primitives = require("@atlaskit/primitives");
+var _commands = require("../editor-commands/commands");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _utils = require("../pm-plugins/utils");
+var _ConfigPanelLoader = _interopRequireDefault(require("./ConfigPanel/ConfigPanelLoader"));
+var _constants = require("./ConfigPanel/constants");
+var _HeaderAfterIconElement = _interopRequireDefault(require("./ConfigPanel/Header/HeaderAfterIconElement"));
+var _HeaderIcon = _interopRequireDefault(require("./ConfigPanel/Header/HeaderIcon"));
+var _contextPanel = require("./context-panel");
+var _SaveIndicator = require("./SaveIndicator/SaveIndicator");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useConfigPanelPluginHook(_ref) {
+  var editorView = _ref.editorView,
+    api = _ref.api;
+  var editorState = editorView.state;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['extension']),
+    extensionState = _useSharedPluginState.extensionState;
+  (0, _react.useEffect)(function () {
+    var nodeWithPos = (0, _utils.getSelectedExtension)(editorState, true);
+    // Adding checks to bail out early
+    if (!nodeWithPos || !extensionState) {
+      hideConfigPanel(api);
+      return;
+    }
+    if (extensionState) {
+      var showContextPanel = extensionState.showContextPanel,
+        extensionProvider = extensionState.extensionProvider,
+        processParametersAfter = extensionState.processParametersAfter;
+      if (showContextPanel && extensionProvider && processParametersAfter) {
+        showConfigPanel({
+          api: api,
+          editorView: editorView,
+          extensionProvider: extensionProvider,
+          nodeWithPos: nodeWithPos
+        });
+      } else {
+        hideConfigPanel(api);
+      }
+    }
+  }, [api, editorState, editorView, extensionState]);
+}
+function hideConfigPanel(api) {
+  var _api$contextPanel;
+  var closePanelById = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || (_api$contextPanel = _api$contextPanel.actions) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.closePanelById;
+  if (closePanelById) {
+    closePanelById(_constants.CONFIG_PANEL_ID);
+  }
+}
+function showConfigPanel(_ref2) {
+  var _api$contextPanel2;
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    extensionProvider = _ref2.extensionProvider,
+    nodeWithPos = _ref2.nodeWithPos;
+  var showContextPanel = api === null || api === void 0 || (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 || (_api$contextPanel2 = _api$contextPanel2.actions) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.showPanel;
+  if (showContextPanel) {
+    var nodeAttrs = nodeWithPos === null || nodeWithPos === void 0 ? void 0 : nodeWithPos.node.attrs;
+    var extensionType = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionType;
+    var extensionKey = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionKey;
+
+    /**
+     * Loading extension manifest fails when using
+     * 	extensionKey directly from nodeAttrs.
+     * Always get extensionKey from getExtensionKeyAndNodeKey to load
+     * 	extension manifest successfully.
+     */
+    var _getExtensionKeyAndNo = (0, _extensions.getExtensionKeyAndNodeKey)(extensionKey, extensionType),
+      _getExtensionKeyAndNo2 = (0, _slicedToArray2.default)(_getExtensionKeyAndNo, 2),
+      extKey = _getExtensionKeyAndNo2[0],
+      _ = _getExtensionKeyAndNo2[1];
+    var HeadeIconWrapper = function HeadeIconWrapper() {
+      return /*#__PURE__*/_react.default.createElement(_HeaderIcon.default, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    var HeaderAfterIconElementWrapper = function HeaderAfterIconElementWrapper() {
+      return /*#__PURE__*/_react.default.createElement(_HeaderAfterIconElement.default, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    var BodyComponent = getContextPanelBodyComponent({
+      api: api,
+      editorView: editorView,
+      extensionProvider: extensionProvider,
+      nodeWithPos: nodeWithPos
+    });
+    showContextPanel({
+      id: _constants.CONFIG_PANEL_ID,
+      headerComponentElements: {
+        HeaderIcon: HeadeIconWrapper,
+        headerLabel: _extensions.configPanelMessages.objectSidebarPanelHeaderLabel,
+        HeaderAfterIconElement: HeaderAfterIconElementWrapper
+      },
+      BodyComponent: BodyComponent,
+      closeOptions: {
+        canClosePanel: function canClosePanel() {
+          var extensionState = (0, _pluginFactory.getPluginState)(editorView.state);
+          /**
+           * 	If context panel is open, then first update extension plugin state.
+           * 	Updating extension plugin state will trigger useEffect in useConfigPanelPluginHook,
+           * 		which will call hideConfigPanel.
+           */
+          if (extensionState !== null && extensionState !== void 0 && extensionState.showContextPanel) {
+            startClosingConfigPanel({
+              api: api,
+              editorView: editorView
+            });
+            return false;
+          }
+
+          // Return true if extension plugin state has been updated and hideConfigPanel has been called.
+          return true;
+        }
+      }
+    }, 'push', _constants.CONFIG_PANEL_WIDTH);
+  }
+}
+function startClosingConfigPanel(_x) {
+  return _startClosingConfigPanel.apply(this, arguments);
+}
+function _startClosingConfigPanel() {
+  _startClosingConfigPanel = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
+    var _api$contextPanel3;
+    var api, editorView, applyChange;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          api = _ref3.api, editorView = _ref3.editorView;
+          applyChange = api === null || api === void 0 || (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange; // Even if the save failed, we should proceed with closing the panel
+          (0, _commands.clearEditingContext)(applyChange)(editorView.state, editorView.dispatch);
+          _context2.prev = 3;
+          _context2.next = 6;
+          return new Promise(function (resolve, reject) {
+            (0, _commands.forceAutoSave)(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+          });
+        case 6:
+          _context2.next = 11;
+          break;
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](3);
+          // Even if the save failed, we should proceed with closing the panel
+          // eslint-disable-next-line no-console
+          console.error("Autosave failed with error", _context2.t0);
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[3, 8]]);
+  }));
+  return _startClosingConfigPanel.apply(this, arguments);
+}
+var getContextPanelBodyComponent = exports.getContextPanelBodyComponent = function getContextPanelBodyComponent(_ref4) {
+  var _api$featureFlags;
+  var api = _ref4.api,
+    editorView = _ref4.editorView,
+    extensionProvider = _ref4.extensionProvider,
+    nodeWithPos = _ref4.nodeWithPos;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var editorState = editorView.state;
+  var extensionState = (0, _pluginFactory.getPluginState)(editorState);
+  var autoSaveResolve = extensionState.autoSaveResolve,
+    autoSaveReject = extensionState.autoSaveReject,
+    processParametersBefore = extensionState.processParametersBefore;
+  var _nodeWithPos$node$att = nodeWithPos.node.attrs,
+    extensionType = _nodeWithPos$node$att.extensionType,
+    extensionKey = _nodeWithPos$node$att.extensionKey,
+    parameters = _nodeWithPos$node$att.parameters;
+  var _getExtensionKeyAndNo3 = (0, _extensions.getExtensionKeyAndNodeKey)(extensionKey, extensionType),
+    _getExtensionKeyAndNo4 = (0, _slicedToArray2.default)(_getExtensionKeyAndNo3, 2),
+    extKey = _getExtensionKeyAndNo4[0],
+    nodeKey = _getExtensionKeyAndNo4[1];
+  var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      padding: "space.200"
+    }, /*#__PURE__*/_react.default.createElement(_SaveIndicator.SaveIndicator, {
+      duration: 5000,
+      visible: true
+    }, function (_ref5) {
+      var onSaveStarted = _ref5.onSaveStarted,
+        onSaveEnded = _ref5.onSaveEnded;
+      return /*#__PURE__*/_react.default.createElement(_ConfigPanelLoader.default, {
+        api: api,
+        showHeader: true,
+        closeOnEsc: true,
+        extensionType: extensionType,
+        extensionKey: extKey,
+        nodeKey: nodeKey,
+        extensionParameters: parameters,
+        parameters: configParams,
+        extensionProvider: extensionProvider,
+        autoSaveTrigger: autoSaveResolve,
+        autoSaveReject: autoSaveReject,
+        onChange: ( /*#__PURE__*/function () {
+          var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(updatedParameters) {
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return (0, _contextPanel.onChangeAction)(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+                case 2:
+                  onSaveEnded();
+                  if (autoSaveResolve) {
+                    autoSaveResolve();
+                  }
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x2) {
+            return _ref6.apply(this, arguments);
+          };
+        }()),
+        onCancel: function onCancel() {
+          return startClosingConfigPanel({
+            api: api,
+            editorView: editorView
+          });
+        },
+        featureFlags: featureFlags
+      });
+    }));
+  };
+};

package/dist/es2019/extensionPlugin.js

@@ -12,7 +12,9 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { bodiedExtensionSpecWithFixedToDOM } from './pm-plugins/toDOM-fixes/bodiedExtension';
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+// Remove below line when cleaning up platform_editor_ai_object_sidebar_injection feature flag
 import { getContextPanel } from './ui/context-panel';
+import { useConfigPanelPluginHook } from './ui/useConfigPanelPluginHook';
 export const extensionPlugin = ({
   config: options = {},
   api
@@ -51,7 +53,9 @@ export const extensionPlugin = ({
       }
       const pluginState = pluginKey.getState(state);
       return {
-        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel,
+        extensionProvider: pluginState === null || pluginState === void 0 ? void 0 : pluginState.extensionProvider,
+        processParametersAfter: pluginState === null || pluginState === void 0 ? void 0 : pluginState.processParametersAfter
       };
     },
     pmPlugins() {
@@ -165,10 +169,18 @@ export const extensionPlugin = ({
         applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
       }),
-      contextPanel: getContextPanel(() => {
+      contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(() => {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(api, featureFlags)
-    }
+      })(api, featureFlags) : undefined
+    },
+    usePluginHook: fg('platform_editor_ai_object_sidebar_injection') ? ({
+      editorView
+    }) => {
+      useConfigPanelPluginHook({
+        editorView,
+        api
+      });
+    } : undefined
   };
 };