@atlaskit/editor-core 187.41.0 → 187.41.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 187.41.1
+
+### Patch Changes
+
+- [`9c76ed81343`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c76ed81343) - [ED-16733] Purge WithPluginState from media plugin
+
 ## 187.41.0
 
 ### Minor Changes

package/dist/cjs/plugins/media/index.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "insertMediaSingleNode", {
   }
 });
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -29,19 +30,34 @@ var _mediaSingle = require("./nodeviews/mediaSingle");
 var _toolbar = require("./toolbar");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _MediaPicker = require("./ui/MediaPicker");
-var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
+var _messages = require("@atlaskit/editor-common/messages");
 var _mediaNodeView = require("./nodeviews/mediaNodeView");
 var _mediaInline = require("./nodeviews/mediaInline");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaSingle2 = require("./utils/media-single");
-var mediaPlugin = function mediaPlugin(_ref) {
+var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
+  var api = _ref.api,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
+var mediaPlugin = function mediaPlugin(_ref2) {
   var _api$featureFlags;
-  var _ref$config = _ref.config,
-    options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
+  var _ref2$config = _ref2.config,
+    options = _ref2$config === void 0 ? {} : _ref2$config,
+    api = _ref2.api;
   var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'media',
@@ -52,12 +68,12 @@ var mediaPlugin = function mediaPlugin(_ref) {
       return _pluginKey.stateKey.getState(editorState) || null;
     },
     nodes: function nodes() {
-      var _ref2 = options || {},
-        _ref2$allowMediaGroup = _ref2.allowMediaGroup,
-        allowMediaGroup = _ref2$allowMediaGroup === void 0 ? true : _ref2$allowMediaGroup,
-        _ref2$allowMediaSingl = _ref2.allowMediaSingle,
-        allowMediaSingle = _ref2$allowMediaSingl === void 0 ? false : _ref2$allowMediaSingl,
-        mediaFeatureFlags = _ref2.featureFlags;
+      var _ref3 = options || {},
+        _ref3$allowMediaGroup = _ref3.allowMediaGroup,
+        allowMediaGroup = _ref3$allowMediaGroup === void 0 ? true : _ref3$allowMediaGroup,
+        _ref3$allowMediaSingl = _ref3.allowMediaSingle,
+        allowMediaSingle = _ref3$allowMediaSingl === void 0 ? false : _ref3$allowMediaSingl,
+        mediaFeatureFlags = _ref3.featureFlags;
       var captions = (0, _mediaCommon.getMediaFeatureFlag)('captions', mediaFeatureFlags);
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
@@ -96,22 +112,23 @@ var mediaPlugin = function mediaPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref3) {
-          var schema = _ref3.schema,
-            dispatch = _ref3.dispatch,
-            getIntl = _ref3.getIntl,
-            eventDispatcher = _ref3.eventDispatcher,
-            providerFactory = _ref3.providerFactory,
-            errorReporter = _ref3.errorReporter,
-            portalProviderAPI = _ref3.portalProviderAPI,
-            reactContext = _ref3.reactContext,
-            dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema,
+            dispatch = _ref4.dispatch,
+            getIntl = _ref4.getIntl,
+            eventDispatcher = _ref4.eventDispatcher,
+            providerFactory = _ref4.providerFactory,
+            errorReporter = _ref4.errorReporter,
+            portalProviderAPI = _ref4.portalProviderAPI,
+            reactContext = _ref4.reactContext,
+            dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
               mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              // @ts-expect-error
               mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter: errorReporter,
@@ -132,8 +149,8 @@ var mediaPlugin = function mediaPlugin(_ref) {
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref4) {
-            var schema = _ref4.schema;
+          plugin: function plugin(_ref5) {
+            var schema = _ref5.schema;
             return (0, _keymapMediaSingle.default)(schema);
           }
         });
@@ -145,9 +162,9 @@ var mediaPlugin = function mediaPlugin(_ref) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref5) {
+          plugin: function plugin(_ref6) {
             var _api$analytics2;
-            var schema = _ref5.schema;
+            var schema = _ref6.schema;
             return (0, _keymap.default)(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
           }
         });
@@ -155,15 +172,15 @@ var mediaPlugin = function mediaPlugin(_ref) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref6) {
-            var dispatch = _ref6.dispatch;
+          plugin: function plugin(_ref7) {
+            var dispatch = _ref7.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref7) {
-            var schema = _ref7.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return (0, _keymap2.default)(schema);
           }
         });
@@ -199,35 +216,23 @@ var mediaPlugin = function mediaPlugin(_ref) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        appearance = _ref8.appearance;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        editorView: editorView,
-        plugins: {
-          mediaState: _main.stateKey
-        },
-        render: function render(_ref9) {
-          var mediaState = _ref9.mediaState;
-          return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
-            editorDomElement: editorView.dom,
-            mediaState: mediaState,
-            appearance: appearance,
-            api: api
-          });
-        }
-      }));
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        appearance = _ref9.appearance;
+      return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
     },
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
       var editorView = _ref10.editorView,
         eventDispatcher = _ref10.eventDispatcher,
         disabled = _ref10.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        pluginKey: _main.stateKey,
         isDisabled: disabled,
-        isReducedSpacing: true
+        isReducedSpacing: true,
+        api: api
       });
     },
     pluginsOptions: {
@@ -235,8 +240,8 @@ var mediaPlugin = function mediaPlugin(_ref) {
         var formatMessage = _ref11.formatMessage;
         return [{
           id: 'media',
-          title: formatMessage(_messages.messages.mediaFiles),
-          description: formatMessage(_messages.messages.mediaFilesDescription),
+          title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
           priority: 400,
           keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
           icon: function icon() {

package/dist/cjs/plugins/media/nodeviews/mediaInline.js

@@ -18,11 +18,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
-var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginState"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaCard = require("@atlaskit/media-card");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _styles = require("./styles");
-var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _mediaUi = require("@atlaskit/media-ui");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -188,6 +187,31 @@ var MediaInline = function MediaInline(props) {
   });
 };
 exports.MediaInline = MediaInline;
+var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
+  var identifier = _ref3.identifier,
+    mediaProvider = _ref3.mediaProvider,
+    node = _ref3.node,
+    isSelected = _ref3.isSelected,
+    getPos = _ref3.getPos,
+    contextIdentifierProvider = _ref3.contextIdentifierProvider,
+    api = _ref3.api,
+    view = _ref3.view;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(MediaInline, {
+    identifier: identifier,
+    mediaProvider: mediaProvider,
+    mediaPluginState: mediaState,
+    node: node,
+    isSelected: isSelected,
+    view: view,
+    getPos: getPos,
+    contextIdentifierProvider: contextIdentifierProvider
+  });
+};
 var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   (0, _inherits2.default)(MediaInlineNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(MediaInlineNodeView);
@@ -228,38 +252,28 @@ var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     key: "render",
     value: function render(props) {
       var _this = this;
-      var providerFactory = props.providerFactory;
+      var providerFactory = props.providerFactory,
+        api = props.api;
+      var view = this.view;
       var getPos = this.getPos;
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref3) {
-          var mediaProvider = _ref3.mediaProvider,
-            contextIdentifierProvider = _ref3.contextIdentifierProvider;
+        renderNode: function renderNode(_ref4) {
+          var mediaProvider = _ref4.mediaProvider,
+            contextIdentifierProvider = _ref4.contextIdentifierProvider;
           if (!mediaProvider) {
             return null;
           }
-          return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-            editorView: _this.view,
-            plugins: {
-              mediaPluginState: _pluginKey.stateKey
-            },
-            render: function render(_ref4) {
-              var mediaPluginState = _ref4.mediaPluginState;
-              if (!mediaPluginState) {
-                return null;
-              }
-              return /*#__PURE__*/_react.default.createElement(MediaInline, {
-                identifier: _this.node.attrs.id,
-                mediaProvider: mediaProvider,
-                mediaPluginState: mediaPluginState,
-                node: _this.node,
-                isSelected: _this.nodeInsideSelection(),
-                view: _this.view,
-                getPos: getPos,
-                contextIdentifierProvider: contextIdentifierProvider
-              });
-            }
+          return /*#__PURE__*/_react.default.createElement(MediaInlineSharedState, {
+            identifier: _this.node.attrs.id,
+            mediaProvider: mediaProvider,
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection(),
+            view: view,
+            getPos: getPos,
+            contextIdentifierProvider: contextIdentifierProvider,
+            api: api
           });
         }
       });
@@ -268,11 +282,12 @@ var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   return MediaInlineNodeView;
 }(_selectionBasedNodeView.SelectionBasedNodeView);
 exports.MediaInlineNodeView = MediaInlineNodeView;
-var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) {
+var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      api: api
     }).init();
   };
 };

package/dist/cjs/plugins/media/ui/ToolbarMedia/index.js

@@ -1,19 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _attachment = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/attachment"));
-var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButton"));
-var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _toolbarMediaMessages = require("./toolbar-media-messages");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactIntlNext = require("react-intl-next");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var onClickMediaButton = function onClickMediaButton(pluginState) {
   return function () {
     pluginState.showMediaPicker();
@@ -21,35 +18,25 @@ var onClickMediaButton = function onClickMediaButton(pluginState) {
   };
 };
 var ToolbarMedia = function ToolbarMedia(_ref) {
-  var editorView = _ref.editorView,
-    eventDispatcher = _ref.eventDispatcher,
-    pluginKey = _ref.pluginKey,
-    isDisabled = _ref.isDisabled,
+  var isDisabled = _ref.isDisabled,
     isReducedSpacing = _ref.isReducedSpacing,
-    intl = _ref.intl;
-  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-    editorView: editorView,
-    eventDispatcher: eventDispatcher,
-    plugins: {
-      mediaPlugin: pluginKey
-    },
-    render: function render(_ref2) {
-      var mediaPlugin = _ref2.mediaPlugin;
-      if (!(mediaPlugin !== null && mediaPlugin !== void 0 && mediaPlugin.allowsUploads)) {
-        return null;
-      }
-      var toolbarMediaTitle = _toolbarMediaMessages.toolbarMediaMessages.toolbarMediaTitle;
-      return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
-        buttonId: _ToolbarButton.TOOLBAR_BUTTON.MEDIA,
-        onClick: onClickMediaButton(mediaPlugin),
-        disabled: isDisabled,
-        title: intl.formatMessage(toolbarMediaTitle),
-        spacing: isReducedSpacing ? 'none' : 'default',
-        iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
-          label: intl.formatMessage(toolbarMediaTitle)
-        })
-      });
-    }
+    intl = _ref.intl,
+    api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+    return null;
+  }
+  var toolbarMediaTitle = _toolbarMediaMessages.toolbarMediaMessages.toolbarMediaTitle;
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    buttonId: _uiMenu.TOOLBAR_BUTTON.MEDIA,
+    onClick: onClickMediaButton(mediaState),
+    disabled: isDisabled,
+    title: intl.formatMessage(toolbarMediaTitle),
+    spacing: isReducedSpacing ? 'none' : 'default',
+    iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
+      label: intl.formatMessage(toolbarMediaTitle)
+    })
   });
 };
 var _default = (0, _reactIntlNext.injectIntl)(ToolbarMedia);

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.41.0";
+var version = "187.41.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/media/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { PluginKey, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
@@ -16,14 +17,31 @@ import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar } from './toolbar';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
-import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
+const MediaPickerFunctionalComponent = ({
+  api,
+  editorDomElement,
+  appearance
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
 const mediaPlugin = ({
   config: options = {},
   api
@@ -99,6 +117,7 @@ const mediaPlugin = ({
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              // @ts-expect-error
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter,
@@ -193,20 +212,11 @@ const mediaPlugin = ({
       editorView,
       appearance
     }) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: editorView,
-        plugins: {
-          mediaState: pluginKey
-        },
-        render: ({
-          mediaState
-        }) => /*#__PURE__*/React.createElement(MediaPickerComponents, {
-          editorDomElement: editorView.dom,
-          mediaState: mediaState,
-          appearance: appearance,
-          api: api
-        })
-      }));
+      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
     },
     secondaryToolbarComponent({
       editorView,
@@ -214,11 +224,9 @@ const mediaPlugin = ({
       disabled
     }) {
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        pluginKey: pluginKey,
         isDisabled: disabled,
-        isReducedSpacing: true
+        isReducedSpacing: true,
+        api: api
       });
     },
     pluginsOptions: {

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import WithPluginState from '../../../ui/WithPluginState';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
-import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 export const createMediaNodeUpdater = props => {
@@ -111,6 +110,33 @@ export const MediaInline = props => {
     mediaClientConfig: viewMediaClientConfig
   });
 };
+const MediaInlineSharedState = ({
+  identifier,
+  mediaProvider,
+  node,
+  isSelected,
+  getPos,
+  contextIdentifierProvider,
+  api,
+  view
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaInline, {
+    identifier: identifier,
+    mediaProvider: mediaProvider,
+    mediaPluginState: mediaState,
+    node: node,
+    isSelected: isSelected,
+    view: view,
+    getPos: getPos,
+    contextIdentifierProvider: contextIdentifierProvider
+  });
+};
 export class MediaInlineNodeView extends SelectionBasedNodeView {
   createDomRef() {
     const domRef = document.createElement('span');
@@ -135,8 +161,12 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
   }
   render(props) {
     const {
-      providerFactory
+      providerFactory,
+      api
     } = props;
+    const {
+      view
+    } = this;
     const getPos = this.getPos;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
@@ -148,36 +178,24 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
         if (!mediaProvider) {
           return null;
         }
-        return /*#__PURE__*/React.createElement(WithPluginState, {
-          editorView: this.view,
-          plugins: {
-            mediaPluginState: mediaStateKey
-          },
-          render: ({
-            mediaPluginState
-          }) => {
-            if (!mediaPluginState) {
-              return null;
-            }
-            return /*#__PURE__*/React.createElement(MediaInline, {
-              identifier: this.node.attrs.id,
-              mediaProvider: mediaProvider,
-              mediaPluginState: mediaPluginState,
-              node: this.node,
-              isSelected: this.nodeInsideSelection(),
-              view: this.view,
-              getPos: getPos,
-              contextIdentifierProvider: contextIdentifierProvider
-            });
-          }
+        return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
+          identifier: this.node.attrs.id,
+          mediaProvider: mediaProvider,
+          node: this.node,
+          isSelected: this.nodeInsideSelection(),
+          view: view,
+          getPos: getPos,
+          contextIdentifierProvider: contextIdentifierProvider,
+          api: api
         });
       }
     });
   }
 }
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) => (node, view, getPos) => {
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) => (node, view, getPos) => {
   return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
-    dispatchAnalyticsEvent
+    dispatchAnalyticsEvent,
+    api
   }).init();
 };