@atlaskit/editor-plugin-extension 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-extension
 
+## 0.7.0
+
+### Minor Changes
+
+- [#68640](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68640) [`e173cb423c75`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e173cb423c75) - Migrate extension plugin to useSharedPluginState from WithPluginState. Adds new dependency on BasePlugin.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.6.3
+
+### Patch Changes
+
+- [#68264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68264) [`daa71f6aa162`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/daa71f6aa162) - [ux] ED-21883: Updated MultiBodied Extension related CSS and selections
+- Updated dependencies
+
 ## 0.6.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.performNodeUpdate = exports.editSelectedExtension = exports.editExtension = exports.createEditSelectedExtensionAction = exports.buildExtensionNode = void 0;
+exports.performNodeUpdate = exports.editExtension = exports.createEditSelectedExtensionAction = exports.buildExtensionNode = void 0;
 Object.defineProperty(exports, "transformSliceToRemoveOpenBodiedExtension", {
   enumerable: true,
   get: function get() {
@@ -166,28 +166,13 @@ var updateExtensionParams = function updateExtensionParams(editorAnalyticsAPI) {
     }();
   };
 };
-
-// This is to decouple extensions from editor core
-// Ideally in the future we completely deprecate `EditorActions`
-var editSelectedExtension = exports.editSelectedExtension = function editSelectedExtension(editorActions) {
-  var editorView = editorActions._privateGetEditorView();
-  var _getPluginState = (0, _main.getPluginState)(editorView.state),
-    updateExtension = _getPluginState.updateExtension,
-    applyChangeToContextPanel = _getPluginState.applyChangeToContextPanel;
-  // The analytics API cannot be accessed in this case because
-  // we do not have access to the plugin injection API. Rather
-  // than change the way this works - we just won't use analytics
-  // here for now.
-  var editorAnalyticsAPI = undefined;
-  return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(editorView.state, editorView.dispatch, editorView);
-};
 var editExtension = exports.editExtension = function editExtension(macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension) {
   return function (state, dispatch, view) {
     if (!view) {
       return false;
     }
-    var _getPluginState2 = (0, _main.getPluginState)(state),
-      localId = _getPluginState2.localId;
+    var _getPluginState = (0, _main.getPluginState)(state),
+      localId = _getPluginState.localId;
     var nodeWithPos = (0, _utils2.findExtensionWithLocalId)(state, localId);
     if (!nodeWithPos) {
       return false;
@@ -225,15 +210,15 @@ var editExtension = exports.editExtension = function editExtension(macroProvider
 };
 var createEditSelectedExtensionAction = exports.createEditSelectedExtensionAction = function createEditSelectedExtensionAction(_ref2) {
   var editorViewRef = _ref2.editorViewRef,
-    editorAnalyticsAPI = _ref2.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+    applyChangeToContextPanel = _ref2.applyChangeToContextPanel;
   return function () {
     var view = editorViewRef.current;
     if (!view) {
       return false;
     }
-    var _getPluginState3 = (0, _main.getPluginState)(view.state),
-      updateExtension = _getPluginState3.updateExtension,
-      applyChangeToContextPanel = _getPluginState3.applyChangeToContextPanel;
+    var _getPluginState2 = (0, _main.getPluginState)(view.state),
+      updateExtension = _getPluginState2.updateExtension;
     return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(view.state, view.dispatch, view);
   };
 };

package/dist/cjs/context-panel.js

@@ -46,9 +46,11 @@ var duplicateSelection = exports.duplicateSelection = function duplicateSelectio
   }
 };
 var getContextPanel = exports.getContextPanel = function getContextPanel(getEditorView) {
-  return function (allowAutoSave, featureFlags, applyChange) {
+  return function (api, allowAutoSave, featureFlags) {
     return function (state) {
+      var _api$contextPanel;
       var nodeWithPos = (0, _utils.getSelectedExtension)(state, true);
+      var applyChange = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange;
 
       // Adding checks to bail out early
       if (!nodeWithPos) {
@@ -82,6 +84,7 @@ var getContextPanel = exports.getContextPanel = function getContextPanel(getEdit
             return null;
           }
           return /*#__PURE__*/_react.default.createElement(_ConfigPanelLoader.default, {
+            api: api,
             showHeader: true,
             closeOnEsc: true,
             extensionType: extensionType,

package/dist/cjs/plugin.js

@@ -19,7 +19,7 @@ var _main = require("./pm-plugins/main");
 var _uniqueId = require("./pm-plugins/unique-id");
 var _toolbar = require("./toolbar");
 var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$decorations, _api$contextPanel3, _api$analytics4, _api$contextPanel4;
+  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     _api = _ref.api;
@@ -126,7 +126,8 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       insertMacroFromMacroBrowser: (0, _actions2.insertMacroFromMacroBrowser)(_api === null || _api === void 0 || (_api$analytics2 = _api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
       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
+        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
       }),
       runMacroAutoConvert: _actions2.runMacroAutoConvert,
       forceAutoSave: _commands.forceAutoSave
@@ -135,13 +136,13 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
       floatingToolbar: (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$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,
         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 () {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(options.allowAutoSave, featureFlags, _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
+      })(_api, options.allowAutoSave, featureFlags)
     }
   };
 };

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "createCommand", {
     return _pluginFactory.createCommand;
   }
 });
-exports.createPlugin = exports.createExtensionProviderHandler = exports.createContextIdentifierProviderHandler = void 0;
+exports.createPlugin = exports.createExtensionProviderHandler = void 0;
 Object.defineProperty(exports, "getPluginState", {
   enumerable: true,
   get: function get() {
@@ -123,50 +123,12 @@ var createExtensionProviderHandler = exports.createExtensionProviderHandler = fu
     };
   }();
 };
-var createContextIdentifierProviderHandler = exports.createContextIdentifierProviderHandler = function createContextIdentifierProviderHandler(view) {
-  return /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(name, provider) {
-      var contextIdentifierProvider;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!(name === 'contextIdentifierProvider' && provider)) {
-              _context3.next = 11;
-              break;
-            }
-            _context3.prev = 1;
-            _context3.next = 4;
-            return provider;
-          case 4:
-            contextIdentifierProvider = _context3.sent;
-            (0, _commands.updateState)({
-              contextIdentifierProvider: contextIdentifierProvider
-            })(view.state, view.dispatch);
-            _context3.next = 11;
-            break;
-          case 8:
-            _context3.prev = 8;
-            _context3.t0 = _context3["catch"](1);
-            (0, _commands.updateState)({
-              contextIdentifierProvider: undefined
-            })(view.state, view.dispatch);
-          case 11:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3, null, [[1, 8]]);
-    }));
-    return function (_x6, _x7) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-};
-var handleUpdate = exports.handleUpdate = function handleUpdate(_ref4) {
-  var view = _ref4.view,
-    prevState = _ref4.prevState,
-    domAtPos = _ref4.domAtPos,
-    extensionHandlers = _ref4.extensionHandlers,
-    applyChange = _ref4.applyChange;
+var handleUpdate = exports.handleUpdate = function handleUpdate(_ref3) {
+  var view = _ref3.view,
+    prevState = _ref3.prevState,
+    domAtPos = _ref3.domAtPos,
+    extensionHandlers = _ref3.extensionHandlers,
+    applyChange = _ref3.applyChange;
   var state = view.state,
     dispatch = view.dispatch;
   var _getPluginState = (0, _pluginFactory.getPluginState)(state),
@@ -224,13 +186,11 @@ var handleUpdate = exports.handleUpdate = function handleUpdate(_ref4) {
   return true;
 };
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi) {
-  var _pluginInjectionApi$c;
   var useLongPressSelection = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
   var state = (0, _pluginFactory.createPluginState)(dispatch, {
     showEditButton: false,
-    showContextPanel: false,
-    applyChangeToContextPanel: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.actions) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.applyChange
+    showContextPanel: false
   });
   var extensionNodeViewOptions = {
     appearance: options.appearance
@@ -240,23 +200,20 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       var extensionProviderHandler = createExtensionProviderHandler(editorView);
-      var contextIdentificationProviderHandler = createContextIdentifierProviderHandler(editorView);
       providerFactory.subscribe('extensionProvider', extensionProviderHandler);
-      providerFactory.subscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
       return {
         update: function update(view, prevState) {
-          var _pluginInjectionApi$c2;
+          var _pluginInjectionApi$c;
           handleUpdate({
             view: view,
             prevState: prevState,
             domAtPos: domAtPos,
             extensionHandlers: extensionHandlers,
-            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.applyChange
+            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.applyChange
           });
         },
         destroy: function destroy() {
           providerFactory.unsubscribe('extensionProvider', extensionProviderHandler);
-          providerFactory.unsubscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
         }
       };
     },
@@ -313,7 +270,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
         inlineExtension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         multiBodiedExtension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
-      handleClickOn: (0, _selection.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['extension', 'bodiedExtension', 'multiBodiedExtension'], function (target) {
         return !target.closest('.extension-content');
       }, {
         useLongPressSelection: useLongPressSelection

package/dist/cjs/toolbar.js

@@ -186,8 +186,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
            *
            */
           var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
+          // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
+          // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
+          var wrapperHeaderHeight = 40;
+          var toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
           return {
-            top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
+            top: toolbarTopPos,
             left: nextPos.left
           };
         },

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

@@ -26,9 +26,8 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _extensions = require("@atlaskit/editor-common/extensions");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
-var _pluginKey = require("../../plugin-key");
 var _constants = require("./constants");
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _FormContent = _interopRequireDefault(require("./FormContent"));
@@ -414,7 +413,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
         errorMessage = _this$props7.errorMessage,
         fields = _this$props7.fields,
         isLoading = _this$props7.isLoading,
-        onCancel = _this$props7.onCancel;
+        onCancel = _this$props7.onCancel,
+        api = _this$props7.api;
       var _this$state = this.state,
         currentParameters = _this$state.currentParameters,
         hasParsedParameters = _this$state.hasParsedParameters,
@@ -437,32 +437,20 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
             noValidate: true,
             onKeyDown: handleKeyDown,
             "data-testid": "extension-config-panel"
-          }), _this2.renderHeader(extensionManifest), /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-            plugins: {
-              extension: _pluginKey.pluginKey
-            },
-            render: function render(_ref6) {
-              var extension = _ref6.extension;
-              return /*#__PURE__*/_react.default.createElement(_FormErrorBoundary.FormErrorBoundary, {
-                contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
-                extensionKey: extensionManifest.key,
-                fields: fields || []
-              }, /*#__PURE__*/_react.default.createElement(ConfigFormIntl, {
-                canSave: !autoSave,
-                errorMessage: errorMessage,
-                extensionManifest: extensionManifest,
-                fields: fields,
-                firstVisibleFieldName: firstVisibleFieldName,
-                hasParsedParameters: hasParsedParameters,
-                isLoading: isLoading || false,
-                onCancel: onCancel,
-                onFieldChange: onFieldChange,
-                parameters: currentParameters,
-                submitting: submitting,
-                contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
-                featureFlags: featureFlags
-              }));
-            }
+          }), _this2.renderHeader(extensionManifest), /*#__PURE__*/_react.default.createElement(ConfigFormIntlWithBoundary, {
+            api: api,
+            canSave: !autoSave,
+            errorMessage: errorMessage,
+            extensionManifest: extensionManifest,
+            fields: fields !== null && fields !== void 0 ? fields : [],
+            firstVisibleFieldName: firstVisibleFieldName,
+            hasParsedParameters: hasParsedParameters,
+            isLoading: isLoading || false,
+            onCancel: onCancel,
+            onFieldChange: onFieldChange,
+            parameters: currentParameters,
+            submitting: submitting,
+            featureFlags: featureFlags
           }));
         });
       });
@@ -470,6 +458,44 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
   }]);
   return ConfigPanel;
 }(_react.default.Component);
+function ConfigFormIntlWithBoundary(_ref6) {
+  var api = _ref6.api,
+    fields = _ref6.fields,
+    submitting = _ref6.submitting,
+    parameters = _ref6.parameters,
+    featureFlags = _ref6.featureFlags,
+    canSave = _ref6.canSave,
+    extensionManifest = _ref6.extensionManifest,
+    onFieldChange = _ref6.onFieldChange,
+    onCancel = _ref6.onCancel,
+    isLoading = _ref6.isLoading,
+    hasParsedParameters = _ref6.hasParsedParameters,
+    firstVisibleFieldName = _ref6.firstVisibleFieldName,
+    errorMessage = _ref6.errorMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['contextIdentifier']),
+    contextIdentifierState = _useSharedPluginState.contextIdentifierState;
+  var _ref7 = contextIdentifierState !== null && contextIdentifierState !== void 0 ? contextIdentifierState : {},
+    contextIdentifierProvider = _ref7.contextIdentifierProvider;
+  return /*#__PURE__*/_react.default.createElement(_FormErrorBoundary.FormErrorBoundary, {
+    contextIdentifierProvider: contextIdentifierProvider,
+    extensionKey: extensionManifest.key,
+    fields: fields
+  }, /*#__PURE__*/_react.default.createElement(ConfigFormIntl, {
+    canSave: canSave,
+    errorMessage: errorMessage,
+    extensionManifest: extensionManifest,
+    fields: fields,
+    firstVisibleFieldName: firstVisibleFieldName,
+    hasParsedParameters: hasParsedParameters,
+    isLoading: isLoading || false,
+    onCancel: onCancel,
+    onFieldChange: onFieldChange,
+    parameters: parameters,
+    submitting: submitting,
+    contextIdentifierProvider: contextIdentifierProvider,
+    featureFlags: featureFlags
+  }));
+}
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   source: 'ConfigPanel'
 })((0, _analyticsNext.withAnalyticsEvents)()(ConfigPanel));

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

@@ -87,7 +87,8 @@ function FieldsLoader(_ref) {
     showHeader = _ref.showHeader,
     featureFlags = _ref.featureFlags,
     onChange = _ref.onChange,
-    onCancel = _ref.onCancel;
+    onCancel = _ref.onCancel,
+    api = _ref.api;
   var _useStateFromPromise = (0, _useStateFromPromise3.useStateFromPromise)(function () {
       return extensionProvider.getExtension(extensionType, extensionKey);
     }, [extensionProvider, extensionType, extensionKey]),
@@ -104,6 +105,7 @@ function FieldsLoader(_ref) {
     extensionParameters: extensionParameters
   }, function (fields) {
     return /*#__PURE__*/_react.default.createElement(_ConfigPanel.default, {
+      api: api,
       extensionManifest: extensionManifest,
       isLoading: !extensionManifest || errorMessage === null && !fields,
       fields: fields,

package/dist/es2019/actions.js

@@ -131,22 +131,6 @@ const updateExtensionParams = editorAnalyticsAPI => (updateExtension, node, acti
   } catch {}
   return true;
 };
-
-// This is to decouple extensions from editor core
-// Ideally in the future we completely deprecate `EditorActions`
-export const editSelectedExtension = editorActions => {
-  const editorView = editorActions._privateGetEditorView();
-  const {
-    updateExtension,
-    applyChangeToContextPanel
-  } = getPluginState(editorView.state);
-  // The analytics API cannot be accessed in this case because
-  // we do not have access to the plugin injection API. Rather
-  // than change the way this works - we just won't use analytics
-  // here for now.
-  const editorAnalyticsAPI = undefined;
-  return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(editorView.state, editorView.dispatch, editorView);
-};
 export const editExtension = (macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension) => (state, dispatch, view) => {
   if (!view) {
     return false;
@@ -190,7 +174,8 @@ export const editExtension = (macroProvider, applyChangeToContextPanel, editorAn
 };
 export const createEditSelectedExtensionAction = ({
   editorViewRef,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  applyChangeToContextPanel
 }) => () => {
   const {
     current: view
@@ -199,8 +184,7 @@ export const createEditSelectedExtensionAction = ({
     return false;
   }
   const {
-    updateExtension,
-    applyChangeToContextPanel
+    updateExtension
   } = getPluginState(view.state);
   return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(view.state, view.dispatch, view);
 };

package/dist/es2019/context-panel.js

@@ -28,8 +28,10 @@ export const duplicateSelection = (selectionToDuplicate, doc) => {
     return new CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
   }
 };
-export const getContextPanel = getEditorView => (allowAutoSave, featureFlags, applyChange) => state => {
+export const getContextPanel = getEditorView => (api, allowAutoSave, featureFlags) => state => {
+  var _api$contextPanel;
   const nodeWithPos = getSelectedExtension(state, true);
+  const applyChange = api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange;
 
   // Adding checks to bail out early
   if (!nodeWithPos) {
@@ -64,6 +66,7 @@ export const getContextPanel = getEditorView => (allowAutoSave, featureFlags, ap
         return null;
       }
       return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+        api: api,
         showHeader: true,
         closeOnEsc: true,
         extensionType: extensionType,

package/dist/es2019/plugin.js

@@ -15,7 +15,7 @@ export const extensionPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$decorations, _api$contextPanel3, _api$analytics4, _api$contextPanel4;
+  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _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
@@ -117,7 +117,8 @@ export const extensionPlugin = ({
       insertMacroFromMacroBrowser: insertMacroFromMacroBrowser(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
       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
+        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
       }),
       runMacroAutoConvert,
       forceAutoSave
@@ -126,13 +127,13 @@ export const extensionPlugin = ({
       floatingToolbar: 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$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,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
       }),
       contextPanel: getContextPanel(() => {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
+      })(api, options.allowAutoSave, featureFlags)
     }
   };
 };

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

@@ -44,20 +44,6 @@ export const createExtensionProviderHandler = view => async (name, provider) =>
     }
   }
 };
-export const createContextIdentifierProviderHandler = view => async (name, provider) => {
-  if (name === 'contextIdentifierProvider' && provider) {
-    try {
-      const contextIdentifierProvider = await provider;
-      updateState({
-        contextIdentifierProvider
-      })(view.state, view.dispatch);
-    } catch {
-      updateState({
-        contextIdentifierProvider: undefined
-      })(view.state, view.dispatch);
-    }
-  }
-};
 export const handleUpdate = ({
   view,
   prevState,
@@ -129,11 +115,9 @@ export const handleUpdate = ({
   return true;
 };
 const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi, useLongPressSelection = false, options = {}) => {
-  var _pluginInjectionApi$c, _pluginInjectionApi$c2;
   const state = createPluginState(dispatch, {
     showEditButton: false,
-    showContextPanel: false,
-    applyChangeToContextPanel: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.actions) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.applyChange
+    showContextPanel: false
   });
   const extensionNodeViewOptions = {
     appearance: options.appearance
@@ -143,23 +127,20 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
     view: editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);
       const extensionProviderHandler = createExtensionProviderHandler(editorView);
-      const contextIdentificationProviderHandler = createContextIdentifierProviderHandler(editorView);
       providerFactory.subscribe('extensionProvider', extensionProviderHandler);
-      providerFactory.subscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
       return {
         update: (view, prevState) => {
-          var _pluginInjectionApi$c3;
+          var _pluginInjectionApi$c;
           handleUpdate({
             view,
             prevState,
             domAtPos,
             extensionHandlers,
-            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.applyChange
+            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.applyChange
           });
         },
         destroy: () => {
           providerFactory.unsubscribe('extensionProvider', extensionProviderHandler);
-          providerFactory.unsubscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
         }
       };
     },
@@ -221,7 +202,7 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
         inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
-      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => !target.closest('.extension-content'), {
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension', 'multiBodiedExtension'], target => !target.closest('.extension-content'), {
         useLongPressSelection
       })
     }

package/dist/es2019/toolbar.js

@@ -183,8 +183,12 @@ export const getToolbarConfig = ({
          *
          */
         const frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
+        // MBE wrapper header height includes, top margin 8px + bottom margin 8px + Line height of 16px + padding top 8px
+        // Ref: platform/packages/editor/editor-common/src/extensibility/MultiBodiedExtension/styles.ts
+        const wrapperHeaderHeight = 40;
+        const toolbarTopPos = mbeNodeRect.top + frameheight + wrapperHeaderHeight + scrollWrapper.scrollTop;
         return {
-          top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
+          top: toolbarTopPos,
           left: nextPos.left
         };
       },