@atlaskit/editor-core 183.1.6 → 184.0.0

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

@@ -3,13 +3,12 @@ import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
 import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
-import WithPluginState from '../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
 import { BreakoutCssClassName } from './constants';
 import { pluginKey } from './plugin-key';
 import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 class BreakoutView {
   constructor(
   /**
@@ -17,12 +16,12 @@ class BreakoutView {
    * of the prosemirror and prosemirror types mean using PMNode
    * is not problematic.
    */
-  mark, view, eventDispatcher) {
+  mark, view, pluginInjectionApi) {
     _defineProperty(this, "updateWidth", widthState => {
       // we skip updating the width of breakout nodes if the editorView dom
       // element was hidden (to avoid breakout width and button thrashing
       // when an editor is hidden, re-rendered and unhidden).
-      if (widthState.width === 0) {
+      if (widthState === undefined || widthState.width === 0) {
         return;
       }
       let containerStyle = ``;
@@ -81,14 +80,16 @@ class BreakoutView {
     this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
-    this.eventDispatcher = eventDispatcher;
-    eventDispatcher.on(widthPluginKey.key, this.updateWidth);
-    this.updateWidth(widthPluginKey.getState(this.view.state));
+    this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width.sharedState.onChange(({
+      nextSharedState
+    }) => this.updateWidth(nextSharedState));
+    this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width.sharedState.currentState());
   }
   // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
   // @see https://github.com/ProseMirror/prosemirror/issues/1082
   destroy() {
-    this.eventDispatcher.off(widthPluginKey.key, this.updateWidth);
+    var _this$unsubscribe;
+    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
   }
 }
 function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
@@ -97,9 +98,8 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin({
-  dispatch,
-  eventDispatcher
+function createPlugin(pluginInjectionApi, {
+  dispatch
 }) {
   return new SafePlugin({
     state: {
@@ -130,18 +130,38 @@ function createPlugin({
         // See the following link for more details:
         // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
         breakout: (mark, view) => {
-          return new BreakoutView(mark, view, eventDispatcher);
+          return new BreakoutView(mark, view, pluginInjectionApi);
         }
       }
     }
   });
 }
-const breakoutPlugin = options => ({
+const LayoutButtonWrapper = ({
+  api,
+  editorView,
+  boundariesElement,
+  scrollableElement,
+  mountPoint
+}) => {
+  var _breakoutState$breako;
+  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
+  const {
+    breakoutState
+  } = useSharedPluginState(api, ['width', 'breakout']);
+  return /*#__PURE__*/React.createElement(LayoutButton, {
+    editorView: editorView,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
+  });
+};
+const breakoutPlugin = (options, api) => ({
   name: 'breakout',
   pmPlugins() {
     return [{
       name: 'breakout',
-      plugin: createPlugin
+      plugin: props => createPlugin(api, props)
     }];
   },
   marks() {
@@ -150,6 +170,14 @@ const breakoutPlugin = options => ({
       mark: breakout
     }];
   },
+  getSharedState(editorState) {
+    if (!editorState) {
+      return {
+        breakoutNode: undefined
+      };
+    }
+    return pluginKey.getState(editorState);
+  },
   contentComponent({
     editorView,
     popupsMountPoint,
@@ -160,23 +188,12 @@ const breakoutPlugin = options => ({
     if (options && !options.allowBreakoutButton) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        breakoutPluginState: pluginKey,
-        widthPluginState: widthPluginKey
-      },
-      render: ({
-        breakoutPluginState
-      }) => {
-        var _breakoutPluginState$;
-        return /*#__PURE__*/React.createElement(LayoutButton, {
-          editorView: editorView,
-          mountPoint: popupsMountPoint,
-          boundariesElement: popupsBoundariesElement,
-          scrollableElement: popupsScrollableElement,
-          node: (_breakoutPluginState$ = breakoutPluginState === null || breakoutPluginState === void 0 ? void 0 : breakoutPluginState.breakoutNode) !== null && _breakoutPluginState$ !== void 0 ? _breakoutPluginState$ : null
-        });
-      }
+    return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
+      api: api,
+      mountPoint: popupsMountPoint,
+      editorView: editorView,
+      boundariesElement: popupsBoundariesElement,
+      scrollableElement: popupsScrollableElement
     });
   }
 });

package/dist/es2019/plugins/card/toolbar.js

@@ -158,8 +158,8 @@ const unlinkCard = (node, state, editorAnalyticsApi) => {
   }
   return () => false;
 };
-const buildAlignmentOptions = (state, intl, cardOptions) => {
-  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
+const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, cardOptions) => {
+  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
 };
 const withToolbarMetadata = command => commandWithMetadata(command, {
   inputMethod: INPUT_METHOD.FLOATING_TB
@@ -245,7 +245,8 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
     }];
     if (currentAppearance === 'embed') {
-      const alignmentOptions = buildAlignmentOptions(state, intl, cardOptions);
+      var _pluginInjectionApi$d5;
+      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.width, cardOptions);
       if (alignmentOptions.length) {
         alignmentOptions.push({
           type: 'separator'

package/dist/es2019/plugins/collab-edit/plugin-state.js

@@ -89,10 +89,8 @@ export class PluginState {
           remove = remove.concat(oldPointers);
         }
         const endOfDocPos = tr.doc.nodeSize - 2;
-        const {
-          anchor,
-          head
-        } = telepointerData.selection;
+        const anchor = telepointerData.selection.anchor;
+        const head = telepointerData.selection.head;
         let rawFrom = anchor < head ? anchor : head;
         let rawTo = anchor >= head ? anchor : head;
         if (rawFrom > endOfDocPos) {

package/dist/es2019/plugins/copy-button/commands.js

@@ -1,9 +1,11 @@
 import { copyButtonPluginKey } from './pm-plugins/plugin-key';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
-import { copyHTMLToClipboard } from '../../utils/clipboard';
+import { NodeSelection } from 'prosemirror-state';
+import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill } from '../../utils/clipboard';
 import { getSelectedNodeOrNodeParentByNodeType, toDOM } from './utils';
 import { addAnalytics, ACTION, INPUT_METHOD } from '../analytics';
 import { getAnalyticsPayload } from '../clipboard/pm-plugins/main';
+import { browser } from '@atlaskit/editor-common/utils';
 export function createToolbarCopyCommandForMark(markType) {
   function command(state, dispatch) {
     const textNode = state.tr.selection.$head.parent.maybeChild(state.tr.selection.$head.index());
@@ -121,7 +123,12 @@ export const createToolbarCopyCommandForNode = nodeType => (state, dispatch) =>
         // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
         div.firstChild.setAttribute('data-pm-slice', '0 0 []');
       }
-      copyHTMLToClipboard(div);
+      // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
+      if (browser.safari && state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.extension) {
+        copyHTMLToClipboardPolyfill(div);
+      } else {
+        copyHTMLToClipboard(div);
+      }
     }
     copyToClipboardTr.setMeta('scrollIntoView', false);
     dispatch(copyToClipboardTr);

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

@@ -31,7 +31,7 @@ const extensionPlugin = (options = {}, api) => {
           eventDispatcher
         }) => {
           const extensionHandlers = options.extensionHandlers || {};
-          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, options.useLongPressSelection, {
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }

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

@@ -43,17 +43,19 @@ export class ExtensionNode extends ReactNodeView {
       providerFactory: props.providerFactory,
       handleContentDOMRef: forwardRef,
       extensionHandlers: props.extensionHandlers,
-      editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance
+      editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
+      pluginInjectionApi: props.pluginInjectionApi
     }));
   }
 }
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
   return (node, view, getPos) => {
     const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory,
       extensionHandlers,
-      extensionNodeViewOptions
+      extensionNodeViewOptions,
+      pluginInjectionApi
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

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

@@ -125,7 +125,7 @@ export const handleUpdate = ({
   }
   return true;
 };
-const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, useLongPressSelection = false, options = {}) => {
+const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi, useLongPressSelection = false, options = {}) => {
   const state = createPluginState(dispatch, {
     showEditButton: false,
     showContextPanel: false
@@ -160,11 +160,11 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
     props: {
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
+        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
       handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => !target.closest('.extension-content'), {
         useLongPressSelection

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -7,9 +7,8 @@ import { calculateBreakoutStyles } from '@atlaskit/editor-common/utils';
 import { wrapperStyle, header, content, contentWrapper, widerLayoutClassName } from './styles';
 import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
-import { pluginKey as widthPluginKey } from '../../../../width';
-import WithPluginState from '../../../../../ui/WithPluginState';
 import classnames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 function ExtensionWithPluginState(props) {
   const {
     node,
@@ -92,6 +91,39 @@ function ExtensionWithPluginState(props) {
   }))));
 }
 const Extension = props => {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  const {
+    pluginInjectionApi
+  } = props;
+  return pluginInjectionApi === undefined ? jsx(ExtensionDeprecated, props) : jsx(ExtensionWithSharedState, props);
+};
+const ExtensionWithSharedState = props => {
+  const {
+    pluginInjectionApi
+  } = props;
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return jsx(ExtensionWithPluginState, _extends({
+    widthState: widthState
+  }, props));
+};
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    return state['widthPlugin$'];
+  }
+};
+const ExtensionDeprecated = props => {
   return jsx(WithPluginState, {
     editorView: props.view,
     plugins: {
@@ -104,6 +136,10 @@ const Extension = props => {
     }, props))
   });
 };
+/**
+ * End workaround
+ */
+
 export default overflowShadow(Extension, {
   overflowSelector: '.extension-overflow-wrapper'
 });

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -134,7 +134,8 @@ export default class ExtensionComponent extends Component {
       handleContentDOMRef,
       editorView,
       references,
-      editorAppearance
+      editorAppearance,
+      pluginInjectionApi
     } = this.props;
     const extensionHandlerResult = this.tryExtensionHandler();
     switch (node.type.name) {
@@ -148,7 +149,8 @@ export default class ExtensionComponent extends Component {
           handleContentDOMRef: handleContentDOMRef,
           view: editorView,
           editorAppearance: editorAppearance,
-          hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame
+          hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+          pluginInjectionApi: pluginInjectionApi
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/es2019/plugins/extension/ui/Extension/index.js

@@ -16,7 +16,8 @@ export default class Extension extends Component {
         handleContentDOMRef,
         extensionHandlers,
         references,
-        editorAppearance
+        editorAppearance,
+        pluginInjectionApi
       } = this.props;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
@@ -26,7 +27,8 @@ export default class Extension extends Component {
         extensionProvider: extensionProvider,
         handleContentDOMRef: handleContentDOMRef,
         extensionHandlers: extensionHandlers,
-        editorAppearance: editorAppearance
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi
       });
     });
     this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/es2019/plugins/help-dialog/index.js

@@ -6,7 +6,7 @@ import { openHelp, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
 import { HelpDialogLoader } from './ui/HelpDialogLoader';
 import { pluginKey as quickInsertPluginKey } from '../quick-insert';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../plugins/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openHelpCommand } from './commands';
@@ -37,7 +37,7 @@ export function createPlugin(dispatch, imageEnabled) {
     }
   });
 }
-const helpDialog = (imageUploadProviderExists = false) => ({
+const helpDialog = (imageUploadProviderExists = false, api) => ({
   name: 'helpDialog',
   pmPlugins() {
     return [{
@@ -47,7 +47,10 @@ const helpDialog = (imageUploadProviderExists = false) => ({
       }) => createPlugin(dispatch, imageUploadProviderExists)
     }, {
       name: 'helpDialogKeymap',
-      plugin: () => keymapPlugin()
+      plugin: () => {
+        var _api$dependencies$ana;
+        return keymapPlugin(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);
+      }
     }];
   },
   pluginsOptions: {
@@ -63,10 +66,11 @@ const helpDialog = (imageUploadProviderExists = false) => ({
       icon: () => /*#__PURE__*/React.createElement(QuestionCircleIcon, {
         label: ""
       }),
-      action(insert, state) {
+      action(insert) {
+        var _api$dependencies$ana2;
         const tr = insert('');
         openHelpCommand(tr);
-        return addAnalytics(state, tr, {
+        api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions.attachAnalyticsEvent({
           action: ACTION.HELP_OPENED,
           actionSubject: ACTION_SUBJECT.HELP,
           actionSubjectId: ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
@@ -74,7 +78,8 @@ const helpDialog = (imageUploadProviderExists = false) => ({
             inputMethod: INPUT_METHOD.QUICK_INSERT
           },
           eventType: EVENT_TYPE.UI
-        });
+        })(tr);
+        return tr;
       }
     }]
   },
@@ -98,7 +103,7 @@ const helpDialog = (imageUploadProviderExists = false) => ({
     });
   }
 });
-const keymapPlugin = () => {
+const keymapPlugin = editorAnalyticsAPI => {
   const list = {};
   keymaps.bindKeymapWithCommand(keymaps.openHelp.common, (state, dispatch) => {
     let {
@@ -106,7 +111,7 @@ const keymapPlugin = () => {
     } = state;
     const isVisible = tr.getMeta(pluginKey);
     if (!isVisible) {
-      tr = addAnalytics(state, tr, {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BUTTON,
         actionSubjectId: ACTION_SUBJECT_ID.BUTTON_HELP,
@@ -114,7 +119,7 @@ const keymapPlugin = () => {
           inputMethod: INPUT_METHOD.SHORTCUT
         },
         eventType: EVENT_TYPE.UI
-      });
+      })(tr);
       openHelpCommand(tr, dispatch);
     }
     return true;

package/dist/es2019/plugins/index.js

@@ -33,11 +33,9 @@ export { default as textColorPlugin } from './text-color';
 export { default as textFormattingPlugin } from './text-formatting';
 export { default as typeAheadPlugin } from './type-ahead';
 export { default as unsupportedContentPlugin } from './unsupported-content';
-export { default as widthPlugin } from './width';
 export { default as cardPlugin } from './card';
 export { default as floatingToolbarPlugin } from './floating-toolbar';
 export { default as statusPlugin } from './status';
-export { default as gridPlugin } from './grid';
 export { default as breakoutPlugin } from './breakout';
 export { default as alignmentPlugin } from './alignment';
 export { default as dataConsumerMarkPlugin } from './data-consumer';

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

@@ -134,7 +134,6 @@ export default (options => new SafePlugin({
       tr = fixColumnStructure(newState) || tr;
       if (tr.docChanged) {
         tr.setSelection(Selection.fromJSON(tr.doc, selection));
-        tr.setMeta('addToHistory', false);
         return tr;
       }
     }

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

@@ -14,19 +14,26 @@ import ToolbarMedia from './ui/ToolbarMedia';
 import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
 import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar } from './toolbar';
-import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '../quick-insert/assets';
 import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
+import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
 const mediaPlugin = (options = {}, api) => {
   var _api$dependencies, _api$dependencies$fea;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'media',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return stateKey.getState(editorState);
+    },
     nodes() {
       const {
         allowMediaGroup = true,
@@ -80,7 +87,7 @@ const mediaPlugin = (options = {}, api) => {
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
             },
             errorReporter,
@@ -207,9 +214,11 @@ const mediaPlugin = (options = {}, api) => {
         keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert, state) {
+          var _api$dependencies$ana;
           const pluginState = pluginKey.getState(state);
           pluginState.showMediaPicker();
-          return addAnalytics(state, insert(''), {
+          const tr = insert('');
+          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.attachAnalyticsEvent({
             action: ACTION.OPENED,
             actionSubject: ACTION_SUBJECT.PICKER,
             actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
@@ -217,7 +226,8 @@ const mediaPlugin = (options = {}, api) => {
               inputMethod: INPUT_METHOD.QUICK_INSERT
             },
             eventType: EVENT_TYPE.UI
-          });
+          })(tr);
+          return tr;
         }
       }],
       floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
@@ -229,7 +239,7 @@ const mediaPlugin = (options = {}, api) => {
         allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
         allowAltTextOnImages: options && options.allowAltTextOnImages,
         altTextValidator: options && options.altTextValidator
-      })
+      }, api)
     }
   };
 };

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

@@ -4,11 +4,21 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { SelectionBasedNodeView } from '../../../../nodeviews';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../../../width';
 import MediaNode from './media';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+const MediaNodeWithProviders = ({
+  pluginInjectionApi,
+  innerComponent
+}) => {
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return innerComponent({
+    width: widthState
+  });
+};
 class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
@@ -69,12 +79,12 @@ class MediaNodeView extends SelectionBasedNodeView {
       mediaProvider,
       contextIdentifierProvider
     }) => {
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: this.view,
-        plugins: {
-          width: widthPluginKey
-        },
-        render: this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+      const {
+        pluginInjectionApi
+      } = this.reactComponentProps;
+      return /*#__PURE__*/React.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
       });
     });
   }
@@ -124,11 +134,12 @@ class MediaNodeView extends SelectionBasedNodeView {
     });
   }
 }
-export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}) => (node, view, getPos) => {
+export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
   const hasIntlContext = true;
   return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,
     providerFactory,
-    mediaOptions
+    mediaOptions,
+    pluginInjectionApi
   }, undefined, undefined, undefined, hasIntlContext).init();
 };