@atlaskit/editor-plugin-extension 5.0.6 → 5.0.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.0.8
+
+### Patch Changes
+
+- [#129262](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129262)
+  [`9408a99b473bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9408a99b473bb) -
+  EDF-2570 Fixed config panel not closing when navigating to other page issue is fixed.
+- Updated dependencies
+
+## 5.0.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.6
 
 ### Patch Changes

package/dist/cjs/extensionPlugin.js

@@ -25,7 +25,7 @@ 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 _api$featureFlags, _api$contextPanel, _api$analytics2, _api$analytics3, _api$contextPanel4, _api$decorations, _api$contextPanel5, _api$analytics4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     _api = _ref.api;
@@ -35,6 +35,7 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
   var editorViewRef = {
     current: null
   };
+  var showContextPanel = _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.showPanel;
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -83,8 +84,8 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       }, {
         name: 'extensionKeymap',
         plugin: function plugin() {
-          var _api$contextPanel;
-          return (0, _keymap.default)(_api === null || _api === void 0 || (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          var _api$contextPanel2;
+          return (0, _keymap.default)(_api === null || _api === void 0 || (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
@@ -118,12 +119,12 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
     },
     actions: {
       api: function api() {
-        var _api$contextPanel2, _api$analytics;
+        var _api$contextPanel3, _api$analytics;
         return (0, _extensionApi.createExtensionAPI)({
           // Ignored via go/ees005
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           editorView: editorViewRef.current,
-          applyChange: _api === null || _api === void 0 || (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange,
+          applyChange: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
           editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics = _api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         });
       },
@@ -167,7 +168,7 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       editSelectedExtension: (0, _actions.createEditSelectedExtensionAction)({
         editorViewRef: editorViewRef,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics3 = _api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions,
-        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
+        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange
       }),
       runMacroAutoConvert: _actions2.runMacroAutoConvert,
       forceAutoSave: _commands.forceAutoSave
@@ -179,16 +180,19 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       }) : (0, _toolbar.getToolbarConfig)({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
+        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel5 = _api.contextPanel) === null || _api$contextPanel5 === void 0 ? void 0 : _api$contextPanel5.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
         extensionApi: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _api : undefined
       }),
-      contextPanel: !(0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? (0, _contextPanel.getContextPanel)(function () {
+      contextPanel:
+      // if showContextPanel action is not available, or platform_editor_ai_object_sidebar_injection feature flag is off
+      // 	then keep using old context panel.
+      !showContextPanel || !(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) : undefined
     },
-    usePluginHook: (0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
+    usePluginHook: showContextPanel && (0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
       var editorView = _ref6.editorView;
       (0, _useConfigPanelPluginHook.useConfigPanelPluginHook)({
         editorView: editorView,

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

@@ -270,10 +270,15 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
         return _ref4.apply(this, arguments);
       };
     }());
+    /**
+     * Remove renderHeader when when cleaning platform_editor_ai_object_sidebar_injection FG
+     * Because header will br rendered separately outside of ConfigPanel.
+     * ConfigPanel will be body component of ContextPanel.
+     */
     // 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')) {
+      // Remove below line when cleaning platform_editor_ai_object_sidebar_injection FG
+      if (_this.props.usingObjectSidebarPanel) {
         return null;
       }
       var _this$props2 = _this.props,

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

@@ -115,7 +115,8 @@ function FieldsLoader(_ref) {
     featureFlags = _ref.featureFlags,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
-    api = _ref.api;
+    api = _ref.api,
+    usingObjectSidebarPanel = _ref.usingObjectSidebarPanel;
   var _useStateFromPromise = (0, _useStateFromPromise3.useStateFromPromise)(function () {
       return extensionProvider.getExtension(extensionType, extensionKey);
     }, [extensionProvider, extensionType, extensionKey]),
@@ -145,6 +146,9 @@ function FieldsLoader(_ref) {
       onCancel: onCancel,
       errorMessage: errorMessage,
       featureFlags: featureFlags
+      // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+      ,
+      usingObjectSidebarPanel: usingObjectSidebarPanel
     });
   });
 }

package/dist/cjs/ui/useConfigPanelPluginHook.js

@@ -57,6 +57,11 @@ function useConfigPanelPluginHook(_ref) {
       }
     }
   }, [api, editorState, editorView, extensionState]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      hideConfigPanel(api);
+    };
+  }, [api]);
 }
 function hideConfigPanel(api) {
   var _api$contextPanel;
@@ -111,12 +116,15 @@ function showConfigPanel(_ref2) {
       id: _constants.CONFIG_PANEL_ID,
       headerComponentElements: {
         HeaderIcon: HeadeIconWrapper,
-        headerLabel: _extensions.configPanelMessages.objectSidebarPanelHeaderLabel,
         HeaderAfterIconElement: HeaderAfterIconElementWrapper
       },
       BodyComponent: BodyComponent,
       closeOptions: {
         canClosePanel: function canClosePanel() {
+          // When navigating away from the editor, the editorView is destroyed.
+          if (editorView.isDestroyed) {
+            return true;
+          }
           var extensionState = (0, _pluginFactory.getPluginState)(editorView.state);
           /**
            * 	If context panel is open, then first update extension plugin state.
@@ -244,6 +252,10 @@ var getContextPanelBodyComponent = exports.getContextPanelBodyComponent = functi
           });
         },
         featureFlags: featureFlags
+        // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+        // Becuase it will always be true
+        ,
+        usingObjectSidebarPanel: true
       });
     }));
   };

package/dist/es2019/extensionPlugin.js

@@ -20,13 +20,14 @@ export const extensionPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
+  var _api$featureFlags, _api$contextPanel, _api$contextPanel$act, _api$analytics2, _api$analytics3, _api$contextPanel4, _api$decorations, _api$contextPanel5, _api$analytics4;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
   //This is needed to get the current selection in the editor
   const editorViewRef = {
     current: null
   };
+  const showContextPanel = api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : (_api$contextPanel$act = _api$contextPanel.actions) === null || _api$contextPanel$act === void 0 ? void 0 : _api$contextPanel$act.showPanel;
   return {
     name: 'extension',
     nodes() {
@@ -76,8 +77,8 @@ export const extensionPlugin = ({
       }, {
         name: 'extensionKeymap',
         plugin: () => {
-          var _api$contextPanel;
-          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          var _api$contextPanel2;
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
@@ -108,12 +109,12 @@ export const extensionPlugin = ({
     },
     actions: {
       api: () => {
-        var _api$contextPanel2, _api$analytics;
+        var _api$contextPanel3, _api$analytics;
         return createExtensionAPI({
           // Ignored via go/ees005
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           editorView: editorViewRef.current,
-          applyChange: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange,
+          applyChange: api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
           editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         });
       },
@@ -155,7 +156,7 @@ export const extensionPlugin = ({
       editSelectedExtension: createEditSelectedExtensionAction({
         editorViewRef,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
+        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange
       }),
       runMacroAutoConvert,
       forceAutoSave
@@ -167,16 +168,19 @@ export const extensionPlugin = ({
       }) : getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
+        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel5 = api.contextPanel) === null || _api$contextPanel5 === void 0 ? void 0 : _api$contextPanel5.actions.applyChange,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
         extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? api : undefined
       }),
-      contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(() => {
+      contextPanel:
+      // if showContextPanel action is not available, or platform_editor_ai_object_sidebar_injection feature flag is off
+      // 	then keep using old context panel.
+      !showContextPanel || !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) : undefined
     },
-    usePluginHook: fg('platform_editor_ai_object_sidebar_injection') ? ({
+    usePluginHook: showContextPanel && fg('platform_editor_ai_object_sidebar_injection') ? ({
       editorView
     }) => {
       useConfigPanelPluginHook({

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

@@ -213,10 +213,15 @@ class ConfigPanel extends React.Component {
         hasParsedParameters: true
       });
     });
+    /**
+     * Remove renderHeader when when cleaning platform_editor_ai_object_sidebar_injection FG
+     * Because header will br rendered separately outside of ConfigPanel.
+     * ConfigPanel will be body component of ContextPanel.
+     */
     // memoized to prevent rerender on new parameters
     _defineProperty(this, "renderHeader", memoizeOne(extensionManifest => {
-      // If below FG is true then Header will be rendered separately
-      if (fg('platform_editor_ai_object_sidebar_injection')) {
+      // Remove below line when cleaning platform_editor_ai_object_sidebar_injection FG
+      if (this.props.usingObjectSidebarPanel) {
         return null;
       }
       const {

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

@@ -100,7 +100,9 @@ export default function FieldsLoader({
   featureFlags,
   onChange,
   onCancel,
-  api
+  api,
+  // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+  usingObjectSidebarPanel
 }) {
   const [extensionManifest] = useStateFromPromise(() => extensionProvider.getExtension(extensionType, extensionKey), [extensionProvider, extensionType, extensionKey]);
   const [errorMessage, setErrorMessage] = useState(null);
@@ -123,5 +125,8 @@ export default function FieldsLoader({
     onCancel: onCancel,
     errorMessage: errorMessage,
     featureFlags: featureFlags
+    // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+    ,
+    usingObjectSidebarPanel: usingObjectSidebarPanel
   }));
 }

package/dist/es2019/ui/useConfigPanelPluginHook.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { configPanelMessages, getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Box } from '@atlaskit/primitives';
 import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
@@ -44,6 +44,11 @@ export function useConfigPanelPluginHook({
       }
     }
   }, [api, editorState, editorView, extensionState]);
+  useEffect(() => {
+    return () => {
+      hideConfigPanel(api);
+    };
+  }, [api]);
 }
 export function hideConfigPanel(api) {
   var _api$contextPanel, _api$contextPanel$act;
@@ -96,12 +101,15 @@ export function showConfigPanel({
       id: CONFIG_PANEL_ID,
       headerComponentElements: {
         HeaderIcon: HeadeIconWrapper,
-        headerLabel: configPanelMessages.objectSidebarPanelHeaderLabel,
         HeaderAfterIconElement: HeaderAfterIconElementWrapper
       },
       BodyComponent,
       closeOptions: {
         canClosePanel: () => {
+          // When navigating away from the editor, the editorView is destroyed.
+          if (editorView.isDestroyed) {
+            return true;
+          }
           const extensionState = getPluginState(editorView.state);
           /**
            * 	If context panel is open, then first update extension plugin state.
@@ -196,6 +204,10 @@ export const getContextPanelBodyComponent = ({
         editorView
       }),
       featureFlags: featureFlags
+      // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+      // Becuase it will always be true
+      ,
+      usingObjectSidebarPanel: true
     });
   }));
 };

package/dist/esm/extensionPlugin.js

@@ -17,7 +17,7 @@ import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
 import { getContextPanel } from './ui/context-panel';
 import { useConfigPanelPluginHook } from './ui/useConfigPanelPluginHook';
 export var extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
+  var _api$featureFlags, _api$contextPanel, _api$analytics2, _api$analytics3, _api$contextPanel4, _api$decorations, _api$contextPanel5, _api$analytics4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     _api = _ref.api;
@@ -27,6 +27,7 @@ export var extensionPlugin = function extensionPlugin(_ref) {
   var editorViewRef = {
     current: null
   };
+  var showContextPanel = _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.showPanel;
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -75,8 +76,8 @@ export var extensionPlugin = function extensionPlugin(_ref) {
       }, {
         name: 'extensionKeymap',
         plugin: function plugin() {
-          var _api$contextPanel;
-          return keymapPlugin(_api === null || _api === void 0 || (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          var _api$contextPanel2;
+          return keymapPlugin(_api === null || _api === void 0 || (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
@@ -110,12 +111,12 @@ export var extensionPlugin = function extensionPlugin(_ref) {
     },
     actions: {
       api: function api() {
-        var _api$contextPanel2, _api$analytics;
+        var _api$contextPanel3, _api$analytics;
         return createExtensionAPI({
           // Ignored via go/ees005
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           editorView: editorViewRef.current,
-          applyChange: _api === null || _api === void 0 || (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange,
+          applyChange: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
           editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics = _api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         });
       },
@@ -159,7 +160,7 @@ export var extensionPlugin = function extensionPlugin(_ref) {
       editSelectedExtension: createEditSelectedExtensionAction({
         editorViewRef: editorViewRef,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics3 = _api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions,
-        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
+        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange
       }),
       runMacroAutoConvert: runMacroAutoConvert,
       forceAutoSave: forceAutoSave
@@ -171,16 +172,19 @@ export var extensionPlugin = function extensionPlugin(_ref) {
       }) : getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
+        applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel5 = _api.contextPanel) === null || _api$contextPanel5 === void 0 ? void 0 : _api$contextPanel5.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
         extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? _api : undefined
       }),
-      contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(function () {
+      contextPanel:
+      // if showContextPanel action is not available, or platform_editor_ai_object_sidebar_injection feature flag is off
+      // 	then keep using old context panel.
+      !showContextPanel || !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(function () {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
       })(_api, featureFlags) : undefined
     },
-    usePluginHook: fg('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
+    usePluginHook: showContextPanel && fg('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
       var editorView = _ref6.editorView;
       useConfigPanelPluginHook({
         editorView: editorView,

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

@@ -260,10 +260,15 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
         return _ref4.apply(this, arguments);
       };
     }());
+    /**
+     * Remove renderHeader when when cleaning platform_editor_ai_object_sidebar_injection FG
+     * Because header will br rendered separately outside of ConfigPanel.
+     * ConfigPanel will be body component of ContextPanel.
+     */
     // memoized to prevent rerender on new parameters
     _defineProperty(_this, "renderHeader", memoizeOne(function (extensionManifest) {
-      // If below FG is true then Header will be rendered separately
-      if (fg('platform_editor_ai_object_sidebar_injection')) {
+      // Remove below line when cleaning platform_editor_ai_object_sidebar_injection FG
+      if (_this.props.usingObjectSidebarPanel) {
         return null;
       }
       var _this$props2 = _this.props,

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

@@ -105,7 +105,8 @@ export default function FieldsLoader(_ref) {
     featureFlags = _ref.featureFlags,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
-    api = _ref.api;
+    api = _ref.api,
+    usingObjectSidebarPanel = _ref.usingObjectSidebarPanel;
   var _useStateFromPromise = useStateFromPromise(function () {
       return extensionProvider.getExtension(extensionType, extensionKey);
     }, [extensionProvider, extensionType, extensionKey]),
@@ -135,6 +136,9 @@ export default function FieldsLoader(_ref) {
       onCancel: onCancel,
       errorMessage: errorMessage,
       featureFlags: featureFlags
+      // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+      ,
+      usingObjectSidebarPanel: usingObjectSidebarPanel
     });
   });
 }

package/dist/esm/ui/useConfigPanelPluginHook.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from 'react';
-import { configPanelMessages, getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Box } from '@atlaskit/primitives';
 import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
@@ -43,6 +43,11 @@ export function useConfigPanelPluginHook(_ref) {
       }
     }
   }, [api, editorState, editorView, extensionState]);
+  useEffect(function () {
+    return function () {
+      hideConfigPanel(api);
+    };
+  }, [api]);
 }
 export function hideConfigPanel(api) {
   var _api$contextPanel;
@@ -97,12 +102,15 @@ export function showConfigPanel(_ref2) {
       id: CONFIG_PANEL_ID,
       headerComponentElements: {
         HeaderIcon: HeadeIconWrapper,
-        headerLabel: configPanelMessages.objectSidebarPanelHeaderLabel,
         HeaderAfterIconElement: HeaderAfterIconElementWrapper
       },
       BodyComponent: BodyComponent,
       closeOptions: {
         canClosePanel: function canClosePanel() {
+          // When navigating away from the editor, the editorView is destroyed.
+          if (editorView.isDestroyed) {
+            return true;
+          }
           var extensionState = getPluginState(editorView.state);
           /**
            * 	If context panel is open, then first update extension plugin state.
@@ -230,6 +238,10 @@ export var getContextPanelBodyComponent = function getContextPanelBodyComponent(
           });
         },
         featureFlags: featureFlags
+        // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
+        // Becuase it will always be true
+        ,
+        usingObjectSidebarPanel: true
       });
     }));
   };

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

@@ -17,5 +17,6 @@ declare const result: React.ForwardRefExoticComponent<Omit<Omit<{
     isLoading?: boolean | undefined;
     featureFlags?: FeatureFlags | undefined;
     api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    usingObjectSidebarPanel?: boolean | undefined;
 }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & React.RefAttributes<any>>;
 export default result;

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

@@ -17,5 +17,6 @@ export type PublicProps = {
     onChange: (data: Parameters) => void;
     onCancel: () => void;
     api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    usingObjectSidebarPanel?: boolean;
 };
-export default function FieldsLoader({ extensionType, extensionKey, nodeKey, extensionProvider, extensionParameters, parameters, autoSaveTrigger, autoSaveReject, closeOnEsc, showHeader, featureFlags, onChange, onCancel, api, }: PublicProps): React.JSX.Element;
+export default function FieldsLoader({ extensionType, extensionKey, nodeKey, extensionProvider, extensionParameters, parameters, autoSaveTrigger, autoSaveReject, closeOnEsc, showHeader, featureFlags, onChange, onCancel, api, usingObjectSidebarPanel, }: PublicProps): React.JSX.Element;

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

@@ -17,5 +17,6 @@ declare const result: React.ForwardRefExoticComponent<Omit<Omit<{
     isLoading?: boolean | undefined;
     featureFlags?: FeatureFlags | undefined;
     api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    usingObjectSidebarPanel?: boolean | undefined;
 }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & React.RefAttributes<any>>;
 export default result;

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

@@ -17,5 +17,6 @@ export type PublicProps = {
     onChange: (data: Parameters) => void;
     onCancel: () => void;
     api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    usingObjectSidebarPanel?: boolean;
 };
-export default function FieldsLoader({ extensionType, extensionKey, nodeKey, extensionProvider, extensionParameters, parameters, autoSaveTrigger, autoSaveReject, closeOnEsc, showHeader, featureFlags, onChange, onCancel, api, }: PublicProps): React.JSX.Element;
+export default function FieldsLoader({ extensionType, extensionKey, nodeKey, extensionProvider, extensionParameters, parameters, autoSaveTrigger, autoSaveReject, closeOnEsc, showHeader, featureFlags, onChange, onCancel, api, usingObjectSidebarPanel, }: PublicProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "5.0.6",
+	"version": "5.0.8",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
 		"@atlaskit/datetime-picker": "^16.1.0",
-		"@atlaskit/editor-common": "^102.7.0",
+		"@atlaskit/editor-common": "^102.11.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
@@ -48,9 +48,9 @@
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/radio": "^8.0.0",
-		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
@@ -58,7 +58,7 @@
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.6.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",