@atlaskit/editor-core 185.2.25 → 185.2.27

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection } from 'prosemirror-state';
+import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
@@ -23,6 +23,7 @@ import { isInListItem } from '../../../utils';
 import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 import { RawIntlProvider } from 'react-intl-next';
 import { MediaTaskManager } from './mediaTaskManager';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 const createDropPlaceholder = (intl, allowDropLine) => {
@@ -522,7 +523,6 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
           // we shift it to the media single parent as other code is opinionated about
           // the selection landing there. In particular the caption insertion and selection
           // action.
-
           return newState.tr.setSelection(NodeSelection.create(newState.doc, transaction.selection.$from.pos - 1));
         }
       }
@@ -541,17 +541,34 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
     },
     props: {
       decorations: state => {
-        const pluginState = getMediaPluginState(state);
-        if (!pluginState.showDropzone) {
-          return;
-        }
+        // Use this to indicate that the media node is selected
+        const mediaNodes = [];
         const {
           schema,
           selection: {
             $anchor
-          }
+          },
+          doc
         } = state;
 
+        // Find any media nodes in the current selection
+        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
+          doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
+            if (node.type === schema.nodes.media) {
+              mediaNodes.push(Decoration.node(pos, pos + node.nodeSize, {}, {
+                type: 'media',
+                selected: true
+              }));
+              return false;
+            }
+            return true;
+          });
+        }
+        const pluginState = getMediaPluginState(state);
+        if (!pluginState.showDropzone) {
+          return DecorationSet.create(state.doc, mediaNodes);
+        }
+
         // When a media is already selected
         if (state.selection instanceof NodeSelection) {
           const node = state.selection.node;
@@ -559,20 +576,20 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
             const deco = Decoration.node(state.selection.from, state.selection.to, {
               class: 'richMedia-selected'
             });
-            return DecorationSet.create(state.doc, [deco]);
+            return DecorationSet.create(state.doc, [deco, ...mediaNodes]);
           }
-          return;
+          return DecorationSet.create(state.doc, mediaNodes);
         }
         let pos = $anchor.pos;
         if ($anchor.parent.type !== schema.nodes.paragraph && $anchor.parent.type !== schema.nodes.codeBlock) {
           pos = insertPoint(state.doc, pos, schema.nodes.mediaGroup);
         }
         if (pos === null || pos === undefined) {
-          return;
+          return DecorationSet.create(state.doc, mediaNodes);
         }
         const dropPlaceholders = [Decoration.widget(pos, dropPlaceholder, {
           key: 'drop-placeholder'
-        })];
+        }), ...mediaNodes];
         return DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/decisionItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactNodeView } from '../../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import DecisionItem from '../ui/Decision';
 import { isTypeAheadOpen } from '../../type-ahead/utils';
 class Decision extends ReactNodeView {

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { AnalyticsListener } from '@atlaskit/analytics-next';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { ReactNodeView } from '../../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import WithPluginState from '../../../ui/WithPluginState';
 import { stateKey as taskPluginKey } from '../pm-plugins/plugin-key';
 import TaskItem from '../ui/Task';

package/dist/es2019/plugins/unsupported-content/index.js

@@ -3,7 +3,7 @@ import { PluginKey } from 'prosemirror-state';
 import { confluenceUnsupportedBlock, confluenceUnsupportedInline, unsupportedBlock, unsupportedInline, unsupportedMark, unsupportedNodeAttribute } from '@atlaskit/adf-schema';
 import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { UnsupportedInlineNodeView } from './unsupported-inline-node-view';
-import { ReactNodeView } from '../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 export const pluginKey = new PluginKey('unsupportedContentPlugin');
 const createPlugin = pmPluginFactoryParams => {

package/dist/es2019/test-utils.js

@@ -78,7 +78,6 @@ export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()
     editorConfig
   };
 };
-export { PortalProviderAPI } from './ui/PortalProvider';
 export { EventDispatcher } from './event-dispatcher';
 export { GapCursorSelection, Side as GapCursorSide } from './plugins/selection/gap-cursor/selection';
 export function setTextSelection(view, anchor, head) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.2.25";
+export const version = "185.2.27";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.25",
+	"version": "185.2.27",
 	"sideEffects": false
 }

package/dist/esm/editor-next/editor-internal.js

@@ -13,7 +13,7 @@ import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from
 import { ContextAdapter } from '../nodeviews/context-adapter';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import EditorContext from '../ui/EditorContext';
-import { PortalProviderWithThemeProviders, PortalRenderer } from '../ui/PortalProvider';
+import { PortalProviderWithThemeProviders, PortalRenderer } from '@atlaskit/editor-common/portal-provider';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { getBaseFontSize } from './utils/getBaseFontSize';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';

package/dist/esm/index.js

@@ -51,7 +51,7 @@ export { getDefaultPresetOptionsFromEditorProps } from './create-editor';
 export { default as EditorActions } from './actions';
 // Re-export from provider factory to not cause a breaking change
 
-export { PortalProvider, PortalProviderAPI, PortalRenderer } from './ui/PortalProvider';
+export { PortalProvider, PortalProviderAPI, PortalRenderer } from '@atlaskit/editor-common/portal-provider';
 export { GapCursorSelection, Side as GapCursorSide } from './plugins/selection/gap-cursor-selection';
 export { selectionPluginKey } from './plugins/mobile-selection';
 export { insertExpand } from './plugins/expand/commands';

package/dist/esm/labs/next/Editor.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IntlProvider } from 'react-intl-next';
-import { PortalRenderer, PortalProvider } from '../../ui/PortalProvider';
+import { PortalRenderer, PortalProvider } from '@atlaskit/editor-common/portal-provider';
 import { EditorInternal } from './internal/components/EditorInternal';
 import { usePresetContext, PresetProvider } from './internal/context/preset-context';
 import { EditorSharedConfigConsumer, useEditorSharedConfig } from './internal/context/shared-config';

package/dist/esm/nodeviews/index.js

@@ -1,2 +1 @@
-export { default as ReactNodeView } from './ReactNodeView';
-export { SelectionBasedNodeView } from './SelectionBasedNodeView';
+export {};

package/dist/esm/plugins/annotation/index.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { annotation } from '@atlaskit/adf-schema';
-import WithPluginState from '../../ui/WithPluginState';
-import { stateKey as reactPluginKey } from '../../plugins/base/pm-plugins/react-nodeview';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { inlineCommentPlugin } from './pm-plugins/inline-comment';
 import { AnnotationUpdateEmitter } from './update-provider';
-import { getPluginState, inlineCommentPluginKey } from './utils';
+import { getPluginState } from './utils';
 import { buildToolbar } from './toolbar';
 import { InlineCommentView } from './ui/InlineCommentView';
-var annotationPlugin = function annotationPlugin(annotationProviders) {
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+var annotationPlugin = function annotationPlugin(annotationProviders, api) {
   return {
     name: 'annotation',
     marks: function marks() {
@@ -17,6 +16,12 @@ var annotationPlugin = function annotationPlugin(annotationProviders) {
         mark: annotation
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return getPluginState(editorState);
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'annotation',
@@ -62,27 +67,32 @@ var annotationPlugin = function annotationPlugin(annotationProviders) {
       if (!annotationProviders) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          selectionState: reactPluginKey,
-          inlineCommentState: inlineCommentPluginKey
-        },
-        render: function render(_ref3) {
-          var inlineCommentState = _ref3.inlineCommentState;
-          if (inlineCommentState && !inlineCommentState.isVisible) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement("div", {
-            "data-editor-popup": "true"
-          }, /*#__PURE__*/React.createElement(InlineCommentView, {
-            providers: annotationProviders,
-            editorView: editorView,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          }));
-        }
+      return /*#__PURE__*/React.createElement(AnnotationContentComponent, {
+        api: api,
+        editorView: editorView,
+        annotationProviders: annotationProviders,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
       });
     }
   };
 };
+function AnnotationContentComponent(_ref3) {
+  var api = _ref3.api,
+    editorView = _ref3.editorView,
+    annotationProviders = _ref3.annotationProviders,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+    inlineCommentState = _useSharedPluginState.annotationState;
+  if (inlineCommentState && !inlineCommentState.isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-editor-popup": "true"
+  }, /*#__PURE__*/React.createElement(InlineCommentView, {
+    providers: annotationProviders,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  }));
+}
 export default annotationPlugin;
 export { AnnotationUpdateEmitter };

package/dist/esm/plugins/annotation/nodeviews/index.js

@@ -7,7 +7,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
 import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
-import { ReactNodeView } from '../../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(AnnotationNodeView, _ReactNodeView);
   var _super = _createSuper(AnnotationNodeView);

package/dist/esm/plugins/base/index.js

@@ -13,7 +13,6 @@ import contextIdentifierPlugin from './pm-plugins/context-identifier';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
 import betterTypeHistoryPlugin from './pm-plugins/better-type-history';
-import { plugin as reactNodeView } from './pm-plugins/react-nodeview';
 import scrollGutter from './pm-plugins/scroll-gutter';
 import { keymap } from '../../utils/keymap';
 import frozenEditor from './pm-plugins/frozen-editor';
@@ -57,11 +56,6 @@ var basePlugin = function basePlugin(options, api) {
       }, {
         name: 'newlinePreserveMarksPlugin',
         plugin: newlinePreserveMarksPlugin
-      }, {
-        name: 'reactNodeView',
-        plugin: function plugin() {
-          return reactNodeView;
-        }
       }, {
         name: 'frozenEditor',
         plugin: function plugin(_ref3) {

package/dist/esm/plugins/caption/index.js

@@ -14,12 +14,11 @@ var captionPlugin = function captionPlugin(_, api) {
       return [{
         name: 'caption',
         plugin: function plugin(_ref) {
-          var _api$dependencies$ana;
           var portalProviderAPI = _ref.portalProviderAPI,
             providerFactory = _ref.providerFactory,
             eventDispatcher = _ref.eventDispatcher,
             dispatch = _ref.dispatch;
-          return createCaptionPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
+          return createCaptionPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api);
         }
       }, {
         name: 'captionKeymap',

package/dist/esm/plugins/caption/nodeviews/index.js

@@ -9,7 +9,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
 import { Caption } from '@atlaskit/editor-common/ui';
-import { SelectionBasedNodeView } from '../../../nodeviews/';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 export var CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   _inherits(CaptionNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(CaptionNodeView);
@@ -65,7 +65,7 @@ export var CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }]);
   return CaptionNodeView;
 }(SelectionBasedNodeView);
-export default function captionNodeView(portalProviderAPI, eventDispatcher) {
+export default function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();

package/dist/esm/plugins/caption/pm-plugins/main.js

@@ -11,7 +11,9 @@ var fireAnalytics = function fireAnalytics(tr, action, analyticsApi) {
     actionSubjectId: ACTION_SUBJECT_ID.CAPTION
   })(tr);
 };
-export default (function (portalProviderAPI, eventDispatcher, providerFactory, dispatch, analyticsApi) {
+export default (function (portalProviderAPI, eventDispatcher, providerFactory, dispatch, pluginInjectionApi) {
+  var _pluginInjectionApi$d;
+  var analyticsApi = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions;
   return new SafePlugin({
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       // only run for transactions that change selection
@@ -41,7 +43,7 @@ export default (function (portalProviderAPI, eventDispatcher, providerFactory, d
     key: pluginKey,
     props: {
       nodeViews: {
-        caption: captionNodeView(portalProviderAPI, eventDispatcher)
+        caption: captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi)
       }
     }
   });

package/dist/esm/plugins/card/nodeviews/embedCard.js

@@ -18,7 +18,7 @@ import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
 import { UnsupportedBlock, MediaSingle as RichMediaWrapper, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { SelectionBasedNodeView } from '../../../nodeviews/';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { registerCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
@@ -333,8 +333,8 @@ _defineProperty(EmbedCardComponent, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 var WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
-export var EmbedCard = /*#__PURE__*/function (_SelectionBasedNodeVi) {
-  _inherits(EmbedCard, _SelectionBasedNodeVi);
+export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(EmbedCard, _ReactNodeView);
   var _super2 = _createSuper(EmbedCard);
   function EmbedCard() {
     _classCallCheck(this, EmbedCard);
@@ -384,4 +384,4 @@ export var EmbedCard = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
   }]);
   return EmbedCard;
-}(SelectionBasedNodeView);
+}(ReactNodeView);

package/dist/esm/plugins/extension/nodeviews/extension.js

@@ -6,7 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
-import { ReactNodeView } from '../../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import Extension from '../ui/Extension';
 import ExtensionNodeWrapper from '../ui/Extension/ExtensionNodeWrapper';
 // getInlineNodeViewProducer is a new api to use instead of ReactNodeView

package/dist/esm/plugins/jira-issue/index.js

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import { confluenceJiraIssue } from '@atlaskit/adf-schema';
-import { ReactNodeView } from '../../nodeviews';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import ReactJIRAIssueNode from './nodeviews/jira-issue';
 export var pluginKey = new PluginKey('jiraIssuePlugin');
 var createPlugin = function createPlugin(_ref) {

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

@@ -87,10 +87,10 @@ var mediaPlugin = function mediaPlugin() {
           return createPlugin(schema, {
             providerFactory: providerFactory,
             nodeViews: {
-              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
               media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
+              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter: errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,

package/dist/esm/plugins/media/nodeviews/mediaGroup.js

@@ -15,17 +15,15 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
 import React from 'react';
-import ReactNodeView from '../../../nodeviews/ReactNodeView';
-import { stateKey as reactNodeViewStateKey } from '../../../plugins/base/pm-plugins/react-nodeview';
-import WithPluginState from '../../../ui/WithPluginState';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { setNodeSelection } from '../../../utils';
 import { isNodeSelectedOrInRange, SelectedState } from '../../../utils/nodes';
-import { pluginKey as editorDisabledPluginKey } from '../../editor-disabled';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { injectIntl } from 'react-intl-next';
 import { messages } from './messages';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
 };
@@ -251,6 +249,15 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
 _defineProperty(MediaGroup, "displayName", 'MediaGroup');
 var IntlMediaGroup = injectIntl(MediaGroup);
 export default IntlMediaGroup;
+function MediaGroupNodeViewInternal(_ref2) {
+  var renderFn = _ref2.renderFn,
+    pluginInjectionApi = _ref2.pluginInjectionApi;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState;
+  return renderFn({
+    editorDisabledPlugin: editorDisabledPlugin
+  });
+}
 var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(MediaGroupNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaGroupNodeView);
@@ -263,16 +270,17 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function render(props, forwardRef) {
       var _this3 = this;
       var providerFactory = props.providerFactory,
-        mediaOptions = props.mediaOptions;
+        mediaOptions = props.mediaOptions,
+        pluginInjectionApi = props.pluginInjectionApi;
       var getPos = this.getPos;
       return /*#__PURE__*/React.createElement(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref2) {
-          var mediaProvider = _ref2.mediaProvider,
-            contextIdentifierProvider = _ref2.contextIdentifierProvider;
-          var renderFn = function renderFn(_ref3) {
-            var editorDisabledPlugin = _ref3.editorDisabledPlugin;
+        renderNode: function renderNode(_ref3) {
+          var mediaProvider = _ref3.mediaProvider,
+            contextIdentifierProvider = _ref3.contextIdentifierProvider;
+          var renderFn = function renderFn(_ref4) {
+            var editorDisabledPlugin = _ref4.editorDisabledPlugin;
             if (!mediaProvider) {
               return null;
             }
@@ -291,13 +299,9 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               mediaOptions: mediaOptions
             });
           };
-          return /*#__PURE__*/React.createElement(WithPluginState, {
-            editorView: _this3.view,
-            plugins: {
-              reactNodeViewState: reactNodeViewStateKey,
-              editorDisabledPlugin: editorDisabledPluginKey
-            },
-            render: renderFn
+          return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {
+            renderFn: renderFn,
+            pluginInjectionApi: pluginInjectionApi
           });
         }
       });
@@ -307,11 +311,13 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
 }(ReactNodeView);
 export var ReactMediaGroupNode = function ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory) {
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
-      mediaOptions: mediaOptions
+      mediaOptions: mediaOptions,
+      pluginInjectionApi: pluginInjectionApi
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

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

@@ -13,7 +13,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useState } from 'react';
-import { SelectionBasedNodeView } from '../../../nodeviews/';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import WithPluginState from '../../../ui/WithPluginState';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -253,7 +253,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }]);
   return MediaInlineNodeView;
 }(SelectionBasedNodeView);
-export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) {
+export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,

package/dist/esm/plugins/media/nodeviews/mediaNodeView/index.js

@@ -10,9 +10,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
-import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { SelectionBasedNodeView } from '../../../../nodeviews';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import MediaNode from './media';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
@@ -26,6 +25,9 @@ var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
     width: widthState
   });
 };
+function isMediaDecorationSpec(decoration) {
+  return decoration.spec.type !== undefined && decoration.spec.selected !== undefined;
+}
 var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   _inherits(MediaNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(MediaNodeView);
@@ -36,15 +38,12 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "isSelected", false);
     _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
       return function (_ref2) {
         var editorWidth = _ref2.width;
         var getPos = _this.getPos;
         var mediaOptions = _this.reactComponentProps.mediaOptions;
-        var selection = _this.view.state.selection;
-        var isSelected = function isSelected() {
-          return _this.isNodeInsideSelection(selection.from, selection.to) || selection instanceof NodeSelection && selection.from === getPos();
-        };
         var attrs = _this.getAttrs();
         var url = attrs.type === 'external' ? attrs.url : '';
         var width = attrs.width,
@@ -72,7 +71,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           view: _this.view,
           node: _this.node,
           getPos: getPos,
-          selected: isSelected(),
+          selected: _this.nodeInsideSelection(),
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
@@ -106,11 +105,18 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
   }, {
     key: "viewShouldUpdate",
-    value: function viewShouldUpdate(nextNode) {
+    value: function viewShouldUpdate(nextNode, decorations) {
+      var hasMediaNodeSelectedDecoration = decorations.some(function (decoration) {
+        return isMediaDecorationSpec(decoration) && decoration.spec.type === 'media' && decoration.spec.selected;
+      });
+      if (this.isSelected !== hasMediaNodeSelectedDecoration) {
+        this.isSelected = hasMediaNodeSelectedDecoration;
+        return true;
+      }
       if (this.node.attrs !== nextNode.attrs) {
         return true;
       }
-      return _get(_getPrototypeOf(MediaNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
+      return _get(_getPrototypeOf(MediaNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode, decorations);
     }
   }, {
     key: "stopEvent",

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -31,7 +31,7 @@ import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import ReactNodeView from '../../../nodeviews/ReactNodeView';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from 'prosemirror-state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';