@atlaskit/editor-core 185.2.24 → 185.2.26

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

@@ -3,17 +3,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';
 const isMediaGroupSelectedFromProps = props => {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
 };
@@ -202,11 +200,23 @@ class MediaGroup extends React.Component {
 _defineProperty(MediaGroup, "displayName", 'MediaGroup');
 const IntlMediaGroup = injectIntl(MediaGroup);
 export default IntlMediaGroup;
+function MediaGroupNodeViewInternal({
+  renderFn,
+  pluginInjectionApi
+}) {
+  const {
+    editorDisabledState: editorDisabledPlugin
+  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
+  return renderFn({
+    editorDisabledPlugin
+  });
+}
 class MediaGroupNodeView extends ReactNodeView {
   render(props, forwardRef) {
     const {
       providerFactory,
-      mediaOptions
+      mediaOptions,
+      pluginInjectionApi
     } = props;
     const getPos = this.getPos;
     return /*#__PURE__*/React.createElement(WithProviders, {
@@ -237,22 +247,19 @@ class MediaGroupNodeView extends ReactNodeView {
             mediaOptions: mediaOptions
           });
         };
-        return /*#__PURE__*/React.createElement(WithPluginState, {
-          editorView: this.view,
-          plugins: {
-            reactNodeViewState: reactNodeViewStateKey,
-            editorDisabledPlugin: editorDisabledPluginKey
-          },
-          render: renderFn
+        return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {
+          renderFn: renderFn,
+          pluginInjectionApi: pluginInjectionApi
         });
       }
     });
   }
 }
-export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}) => (node, view, getPos) => {
+export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
   const hasIntlContext = true;
   return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
-    mediaOptions
+    mediaOptions,
+    pluginInjectionApi
   }, undefined, undefined, undefined, hasIntlContext).init();
 };

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

@@ -1,5 +1,5 @@
 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';
@@ -175,7 +175,7 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
     });
   }
 }
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) => (node, view, getPos) => {
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) => (node, view, getPos) => {
   return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
     dispatchAnalyticsEvent

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

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -19,9 +18,13 @@ const MediaNodeWithProviders = ({
     width: widthState
   });
 };
+function isMediaDecorationSpec(decoration) {
+  return decoration.spec.type !== undefined && decoration.spec.selected !== undefined;
+}
 class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "isSelected", false);
     _defineProperty(this, "renderMediaNodeWithState", (mediaProvider, contextIdentifierProvider) => {
       return ({
         width: editorWidth
@@ -30,10 +33,6 @@ class MediaNodeView extends SelectionBasedNodeView {
         const {
           mediaOptions
         } = this.reactComponentProps;
-        const {
-          selection
-        } = this.view.state;
-        const isSelected = () => this.isNodeInsideSelection(selection.from, selection.to) || selection instanceof NodeSelection && selection.from === getPos();
         const attrs = this.getAttrs();
         const url = attrs.type === 'external' ? attrs.url : '';
         let {
@@ -65,7 +64,7 @@ class MediaNodeView extends SelectionBasedNodeView {
           view: this.view,
           node: this.node,
           getPos: getPos,
-          selected: isSelected(),
+          selected: this.nodeInsideSelection(),
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
@@ -97,11 +96,16 @@ class MediaNodeView extends SelectionBasedNodeView {
     }
     return domRef;
   }
-  viewShouldUpdate(nextNode) {
+  viewShouldUpdate(nextNode, decorations) {
+    const hasMediaNodeSelectedDecoration = decorations.some(decoration => 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 super.viewShouldUpdate(nextNode);
+    return super.viewShouldUpdate(nextNode, decorations);
   }
   stopEvent(event) {
     // Don't trap right click events on media node

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

@@ -18,7 +18,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';

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/ui/ContextPanel/index.js

@@ -8,7 +8,6 @@ import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import WithPluginState from '../WithPluginState';
-import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
 import { WidthContext } from '@atlaskit/editor-common/ui';
@@ -167,6 +166,14 @@ const widthPluginKey = {
     return state['widthPlugin$'];
   }
 };
+
+// @ts-ignore
+const contextPanelPluginKey = {
+  key: 'contextPanelPluginKey$',
+  getState: state => {
+    return state['contextPanelPluginKey$'];
+  }
+};
 function ContextPanelWithActions({
   actions,
   ...props

package/dist/es2019/utils/action.js

@@ -6,7 +6,7 @@ export async function __temporaryFixForConfigPanel(editorView) {
   const extensionPluginState = editorView.state && extensionPluginKey.getState(editorView.state);
   if (extensionPluginState && extensionPluginState.showContextPanel) {
     await new Promise(resolve => {
-      forceAutoSave(resolve)(editorView.state, editorView.dispatch);
+      forceAutoSave(extensionPluginState.applyChangeToContextPanel)(resolve)(editorView.state, editorView.dispatch);
     });
   }
 }

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.2.24";
+export const version = "185.2.26";
 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.24",
+	"version": "185.2.26",
 	"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/labs/next/presets/universal.js

@@ -2,7 +2,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import cardPlugin from '../../../plugins/card';
 import { tablesPlugin } from '@atlaskit/editor-plugin-table';
@@ -225,6 +226,11 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       }]);
     }
     return builder;
+  }).maybeAdd(contextPanelPlugin, function (plugin, builder) {
+    if (isFullPage) {
+      return builder.add(contextPanelPlugin);
+    }
+    return builder;
   }).maybeAdd(extensionPlugin, function (plugin, builder) {
     if (props.allowExtension) {
       var extensionConfig = _typeof(props.allowExtension) === 'object' ? props.allowExtension : {};
@@ -300,11 +306,6 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       return builder.add(plugin);
     }
     return builder;
-  }).maybeAdd(contextPanelPlugin, function (plugin, builder) {
-    if (isFullPage) {
-      return builder.add(contextPanelPlugin);
-    }
-    return builder;
   }).maybeAdd(scrollIntoViewPlugin, function (plugin, builder) {
     if (props.autoScrollIntoView !== false) {
       return builder.add(scrollIntoViewPlugin);

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/actions.js

@@ -150,10 +150,11 @@ export var updateExtensionParams = function updateExtensionParams(updateExtensio
 export var editSelectedExtension = function editSelectedExtension(editorActions) {
   var editorView = editorActions._privateGetEditorView();
   var _getPluginState = getPluginState(editorView.state),
-    updateExtension = _getPluginState.updateExtension;
-  return editExtension(null, updateExtension)(editorView.state, editorView.dispatch, editorView);
+    updateExtension = _getPluginState.updateExtension,
+    applyChangeToContextPanel = _getPluginState.applyChangeToContextPanel;
+  return editExtension(null, applyChangeToContextPanel, updateExtension)(editorView.state, editorView.dispatch, editorView);
 };
-export var editExtension = function editExtension(macroProvider, updateExtension) {
+export var editExtension = function editExtension(macroProvider, applyChangeToContextPanel, updateExtension) {
   return function (state, dispatch, view) {
     if (!view) {
       return false;
@@ -173,7 +174,8 @@ export var editExtension = function editExtension(macroProvider, updateExtension
         if (updateMethod && view) {
           var actions = createExtensionAPI({
             editorView: view,
-            editInLegacyMacroBrowser: editInLegacyMacroBrowser
+            editInLegacyMacroBrowser: editInLegacyMacroBrowser,
+            applyChange: applyChangeToContextPanel
           });
           updateExtensionParams(updateMethod, nodeWithPos, actions)(state, dispatch, view);
           return;