@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/list/utils/node.js

@@ -116,10 +116,11 @@ export const joinSiblingLists = ({
 
   for (let i = joins.length - 1; i >= 0; i--) {
     const listNode = tr.doc.nodeAt(joins[i]);
+    const listName = listNode === null || listNode === void 0 ? void 0 : listNode.type.name;
 
-    if (listNode) {
-      const amount = result[listNode.type.name] || 0;
-      result[listNode.type.name] = amount + 1;
+    if (listName && (listName === 'orderedList' || listName === 'bulletList')) {
+      const amount = result[listName] || 0;
+      result[listName] = amount + 1;
     }
 
     tr.join(joins[i]);

package/dist/es2019/plugins/media/commands/helpers.js

@@ -65,33 +65,35 @@ export const updateAllMediaNodesAttrs = (id, attrs, isMediaSingle) => (state, di
   } else {
     const mediaGroupNode = findMediaNode(mediaPluginState, id, isMediaSingle);
     mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
-  } // TODO: ED-7784 Clean media plugin state from having media that were previously removed.
-  // Sanity check
+  }
 
+  const isMediaNode = pos => {
+    const node = state.doc.nodeAt(pos);
+    return node && node.type.name === 'media';
+  };
 
-  const mediaType = state.schema.nodes.media;
-  mediaNodes = mediaNodes.filter(nodeWithPos => {
-    let node;
+  const validMediaNodePositions = mediaNodes.reduce((acc, {
+    getPos
+  }) => {
+    const pos = getPos();
 
-    try {
-      node = state.doc.nodeAt(nodeWithPos.getPos());
-    } catch (e) {
-      return false;
+    if (typeof pos === 'number' && !isMediaNode(pos)) {
+      return acc;
     }
 
-    return node && node.type === mediaType;
-  });
+    acc.push(pos);
+    return acc;
+  }, []);
 
-  if (mediaNodes.length === 0) {
+  if (validMediaNodePositions.length === 0) {
     return false;
   }
 
+  const tr = state.tr;
+  validMediaNodePositions.forEach(pos => tr.step(new SetAttrsStep(pos, attrs)));
+  tr.setMeta('addToHistory', false);
+
   if (dispatch) {
-    const tr = state.tr;
-    mediaNodes.forEach(({
-      getPos
-    }) => tr.step(new SetAttrsStep(getPos(), attrs)));
-    tr.setMeta('addToHistory', false);
     dispatch(tr);
   }
 
@@ -105,21 +107,39 @@ export const updateMediaNodeAttrs = (id, attrs, isMediaSingle) => (state, dispat
     return false;
   }
 
+  const tr = state.tr;
+  const pos = mediaNodeWithPos.getPos();
+  const node = tr.doc.nodeAt(pos);
+
+  if (!node || node.type.name !== 'media') {
+    return false;
+  }
+
+  tr.step(new SetAttrsStep(pos, attrs)).setMeta('addToHistory', false);
+
   if (dispatch) {
-    dispatch(state.tr.step(new SetAttrsStep(mediaNodeWithPos.getPos(), attrs)).setMeta('addToHistory', false));
+    dispatch(tr);
   }
 
   return true;
 };
 export const replaceExternalMedia = (pos, attrs) => (state, dispatch) => {
+  const tr = state.tr;
+  const node = tr.doc.nodeAt(pos);
+
+  if (!node || node.type.name !== 'media') {
+    return false;
+  }
+
+  tr.step(new SetAttrsStep(pos, {
+    type: 'file',
+    url: null,
+    ...attrs
+  })).setMeta('addToHistory', false);
+
   if (dispatch) {
-    dispatch(state.tr.step(new SetAttrsStep(pos, {
-      type: 'file',
-      url: null,
-      ...attrs
-    })).setMeta('addToHistory', false));
-    return true;
+    dispatch(tr);
   }
 
-  return false;
+  return true;
 };

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { createPlugin as createMediaEditorPlugin } from './pm-plugins/media-editor';
-import { pluginKey as mediaEditorPluginKey } from './pm-plugins/media-editor-plugin-factory';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
@@ -17,7 +15,6 @@ import { floatingToolbar } from './toolbar';
 import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
 import { IconImages } from '../quick-insert/assets';
 import WithPluginState from '../../ui/WithPluginState';
-import MediaEditor from './ui/MediaEditor';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
@@ -109,13 +106,6 @@ const mediaPlugin = options => ({
       });
     }
 
-    if (options && options.allowAnnotation) {
-      pmPlugins.push({
-        name: 'mediaEditor',
-        plugin: createMediaEditorPlugin
-      });
-    }
-
     if (options && options.allowAltTextOnImages) {
       pmPlugins.push({
         name: 'mediaAltText',
@@ -149,24 +139,8 @@ const mediaPlugin = options => ({
 
   contentComponent({
     editorView,
-    eventDispatcher,
     appearance
   }) {
-    // render MediaEditor separately because it doesn't depend on media plugin state
-    // so we can utilise EventDispatcher-based rerendering
-    const mediaEditor = options && options.allowAnnotation ? /*#__PURE__*/React.createElement(WithPluginState, {
-      editorView: editorView,
-      plugins: {
-        mediaEditorState: mediaEditorPluginKey
-      },
-      eventDispatcher: eventDispatcher,
-      render: ({
-        mediaEditorState
-      }) => /*#__PURE__*/React.createElement(MediaEditor, {
-        mediaEditorState: mediaEditorState,
-        view: editorView
-      })
-    }) : null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithPluginState, {
       editorView: editorView,
       plugins: {
@@ -179,7 +153,7 @@ const mediaPlugin = options => ({
         mediaState: mediaState,
         appearance: appearance
       })
-    }), mediaEditor);
+    }));
   },
 
   secondaryToolbarComponent({
@@ -227,7 +201,6 @@ const mediaPlugin = options => ({
       allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
       allowResizing: options && options.allowResizing,
       allowResizingInTables: options && options.allowResizingInTables,
-      allowAnnotation: options && options.allowAnnotation,
       allowLinking: options && options.allowLinking,
       allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
       allowAltTextOnImages: options && options.allowAltTextOnImages,

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
@@ -15,7 +17,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { FigureWrapper, MediaSingleNodeSelector } from './styles';
+import { figureWrapper, MediaSingleNodeSelector } from './styles';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -291,14 +293,15 @@ export default class MediaSingleNode extends Component {
     const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
     const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+    const MediaChildren = jsx("figure", {
+      css: figureWrapper,
       className: MediaSingleNodeSelector
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       ref: this.props.forwardRef
-    }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
+    }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       onClick: this.clickPlaceholder
     }));
-    return canResize ? /*#__PURE__*/React.createElement(ResizableMediaSingle, _extends({}, mediaSingleProps, {
+    return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
       lineLength: lineLength,
       view: this.props.view,
       getPos: getPos,
@@ -309,7 +312,7 @@ export default class MediaSingleNode extends Component {
       allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
       selected: isSelected,
       dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
-    }), MediaChildren) : /*#__PURE__*/React.createElement(MediaSingle, mediaSingleProps, MediaChildren);
+    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
   }
 
 }
@@ -413,14 +416,14 @@ class MediaSingleNodeView extends ReactNodeView {
     } = this.reactComponentProps; // getPos is a boolean for marks, since this is a node we know it must be a function
 
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
         mediaProvider,
         contextIdentifierProvider
       }) => {
-        return /*#__PURE__*/React.createElement(WithPluginState, {
+        return jsx(WithPluginState, {
           editorView: this.view,
           plugins: {
             width: widthPluginKey,
@@ -430,7 +433,7 @@ class MediaSingleNodeView extends ReactNodeView {
             width,
             mediaPluginState
           }) => {
-            return /*#__PURE__*/React.createElement(MediaSingleNode, {
+            return jsx(MediaSingleNode, {
               width: width.width,
               lineLength: width.lineLength,
               node: this.node,

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

@@ -1,28 +1,32 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
-export const FigureWrapper = styled.figure`
+export const figureWrapper = css`
   margin: 0;
 `;
-FigureWrapper.displayName = 'FigureWrapper';
-const AbsoluteDiv = styled.div`
+const absoluteDiv = css`
   position: absolute;
   width: 100%;
   height: 100%;
 `;
-const ForcedDimensions = styled.div`
+const forcedDimensions = css`
   width: 100%;
   position: relative;
-  padding-bottom: ${props => props.dimensions.height / props.dimensions.width * 100}%;
 `;
 export const MediaCardWrapper = ({
   dimensions,
   children,
   onContextMenu
 }) => {
-  return /*#__PURE__*/React.createElement(ForcedDimensions, {
-    dimensions: dimensions,
+  return jsx("div", {
+    css: forcedDimensions,
+    style: {
+      paddingBottom: `${dimensions.height / dimensions.width * 100}%`
+    },
     onContextMenuCapture: onContextMenu
-  }, /*#__PURE__*/React.createElement(AbsoluteDiv, null, children));
+  }, jsx("div", {
+    css: absoluteDiv
+  }, children));
 };

package/dist/es2019/plugins/media/picker-facade.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { MediaPicker, isImagePreview } from '@atlaskit/media-picker';
+import { isImagePreview } from '@atlaskit/media-picker';
 export default class PickerFacade {
-  constructor(pickerType, config, pickerConfig, mediaPickerFactoryClass = MediaPicker, analyticsName) {
+  constructor(pickerType, config, pickerConfig, analyticsName) {
     _defineProperty(this, "onDragListeners", []);
 
     _defineProperty(this, "onStartListeners", []);
@@ -107,9 +107,7 @@ export default class PickerFacade {
 
     this.config = config;
     this.pickerConfig = pickerConfig;
-    this.mediaPickerFactoryClass = mediaPickerFactoryClass;
     this.pickerType = pickerType;
-    this.errorReporter = config.errorReporter;
     this.analyticsName = analyticsName;
     this.erroredFiles = new Set();
   }
@@ -119,8 +117,6 @@ export default class PickerFacade {
 
     if (this.pickerType === 'customMediaPicker') {
       picker = this.picker = this.pickerConfig;
-    } else if (this.pickerType === 'popup') {
-      picker = this.picker = await this.mediaPickerFactoryClass(this.config.mediaClientConfig, this.pickerConfig);
     }
 
     if (!picker) {
@@ -156,14 +152,6 @@ export default class PickerFacade {
     picker.removeAllListeners('upload-error');
     this.onStartListeners = [];
     this.onDragListeners = [];
-
-    try {
-      if (this.pickerType === 'popup') {
-        picker.teardown();
-      }
-    } catch (ex) {
-      this.errorReporter.captureException(ex);
-    }
   }
 
   setUploadParams(params) {
@@ -172,36 +160,6 @@ export default class PickerFacade {
     }
   }
 
-  onClose(cb) {
-    const {
-      picker
-    } = this;
-
-    if (this.pickerType === 'popup') {
-      const popupPicker = picker;
-      popupPicker.on('closed', cb);
-      return () => popupPicker.off('closed', cb);
-    }
-
-    return () => {};
-  }
-
-  show() {
-    if (this.pickerType === 'popup') {
-      try {
-        this.picker.show();
-      } catch (ex) {
-        this.errorReporter.captureException(ex);
-      }
-    }
-  }
-
-  hide() {
-    if (this.pickerType === 'popup') {
-      this.picker.hide();
-    }
-  }
-
   onNewMedia(cb) {
     this.onStartListeners.push(cb);
   }

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N100, N30, R400, N80 } from '@atlaskit/theme/colors';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
@@ -19,7 +21,7 @@ import { ErrorMessage } from '@atlaskit/editor-common/ui';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-const SupportText = styled.p`
+const supportText = css`
   color: ${N100};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: 12px 40px;
@@ -27,34 +29,33 @@ const SupportText = styled.p`
   border-top: 1px solid ${N30};
   margin: 0;
 `;
-const Container = styled.div`
+const container = css`
   width: ${CONTAINER_WIDTH_IN_PX}px;
   display: flex;
   flex-direction: column;
   overflow: auto;
   line-height: 2;
 `;
-const InputWrapper = styled.section`
+const inputWrapper = css`
   display: flex;
   line-height: 0;
   padding: 5px 0;
   align-items: center;
 `;
-const ValidationWrapper = styled.section`
+const validationWrapper = css`
   display: flex;
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 12px 0 40px;
   border-top: 1px solid ${R400};
   align-items: start;
-  display: flex;
   flex-direction: column;
 `;
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   display: flex;
   padding: 4px 8px;
 `;
-const ClearText = styled.span`
+const clearText = css`
   color: ${N80};
 `;
 export class AltTextEditComponent extends React.Component {
@@ -167,24 +168,30 @@ export class AltTextEditComponent extends React.Component {
       showClearTextButton
     } = this.state;
     const backButtonMessage = formatMessage(messages.back);
-    const backButtonMessageComponent = /*#__PURE__*/React.createElement(ToolTipContent, {
+    const backButtonMessageComponent = jsx(ToolTipContent, {
       description: backButtonMessage,
       keymap: keymaps.escape,
       shortcutOverride: "Esc"
     });
     const errorsList = (this.state.validationErrors || []).map(function (error, index) {
-      return /*#__PURE__*/React.createElement(ErrorMessage, {
+      return jsx(ErrorMessage, {
         key: index
       }, error);
     });
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    return jsx("div", {
+      css: container
+    }, jsx("section", {
+      css: inputWrapper
+    }, jsx("div", {
+      css: buttonWrapper
+    }, jsx(Button, {
       title: formatMessage(messages.back),
-      icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+      icon: jsx(ChevronLeftLargeIcon, {
         label: formatMessage(messages.back)
       }),
       tooltipContent: backButtonMessageComponent,
       onClick: this.closeMediaAltTextMenu
-    })), /*#__PURE__*/React.createElement(PanelTextInput, {
+    })), jsx(PanelTextInput, {
       testId: "alt-text-input",
       ariaLabel: formatMessage(messages.placeholder),
       describedById: "support-text",
@@ -196,15 +203,22 @@ export class AltTextEditComponent extends React.Component {
       onSubmit: this.closeMediaAltTextMenu,
       maxLength: MAX_ALT_TEXT_LENGTH,
       autoFocus: true
-    }), showClearTextButton && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    }), showClearTextButton && jsx("div", {
+      css: buttonWrapper
+    }, jsx(Button, {
       testId: "alt-text-clear-button",
       title: formatMessage(messages.clear),
-      icon: /*#__PURE__*/React.createElement(ClearText, null, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      icon: jsx("span", {
+        css: clearText
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clear)
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText
-    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, {
+    }))), !!errorsList.length && jsx("section", {
+      css: validationWrapper
+    }, errorsList), jsx("p", {
+      css: supportText,
       id: "support-text"
     }, formatMessage(messages.supportText)));
   }

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

@@ -46,7 +46,7 @@ const createDropPlaceholder = (intl, allowDropLine) => {
 
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
-  constructor(_state, options, reactContext, mediaOptions, _dispatch) {
+  constructor(_state, options, mediaOptions, _dispatch) {
     _defineProperty(this, "allowsUploads", false);
 
     _defineProperty(this, "ignoreLinks", false);
@@ -145,7 +145,7 @@ export class MediaPluginStateImplementation {
         this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
 
         if (this.mediaProvider.uploadParams && this.uploadMediaClientConfig) {
-          await this.initPickers(this.mediaProvider.uploadParams, PickerFacade, this.reactContext);
+          await this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
         } else {
           this.destroyPickers();
         }
@@ -174,8 +174,6 @@ export class MediaPluginStateImplementation {
       return type === mediaSingle;
     });
 
-    _defineProperty(this, "hasUserAuthProvider", () => !!this.uploadMediaClientConfig && !!this.uploadMediaClientConfig.userAuthProvider);
-
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
       var _this$mediaOptions2;
 
@@ -256,24 +254,11 @@ export class MediaPluginStateImplementation {
       this.onPopupToggleCallback(false);
     });
 
-    _defineProperty(this, "shouldUseMediaPickerPopup", () => {
-      if (!this.mediaOptions || this.mediaOptions && this.mediaOptions.useMediaPickerPopup === undefined) {
-        return this.hasUserAuthProvider();
-      }
-
-      return !!this.mediaOptions.useMediaPickerPopup;
-    });
-
     _defineProperty(this, "showMediaPicker", () => {
-      if (this.openMediaPickerBrowser && !this.shouldUseMediaPickerPopup()) {
+      if (this.openMediaPickerBrowser) {
         return this.openMediaPickerBrowser();
       }
 
-      if (!this.popupPicker) {
-        return;
-      }
-
-      this.popupPicker.show();
       this.onPopupToggleCallback(true);
     });
 
@@ -354,15 +339,11 @@ export class MediaPluginStateImplementation {
         Promise.all(pickerPromises).then(resolvedPickers => this.destroyAllPickers(resolvedPickers));
       }
 
-      this.popupPicker = undefined;
       this.customPicker = undefined;
     });
 
     _defineProperty(this, "getInputMethod", pickerType => {
       switch (pickerType) {
-        case 'popup':
-          return INPUT_METHOD.PICKER_CLOUD;
-
         case 'clipboard':
           return INPUT_METHOD.CLIPBOARD;
 
@@ -473,7 +454,6 @@ export class MediaPluginStateImplementation {
       dispatch(state.tr);
     });
 
-    this.reactContext = reactContext;
     this.options = options;
     this.mediaOptions = mediaOptions;
     this.dispatch = _dispatch;
@@ -555,7 +535,7 @@ export class MediaPluginStateImplementation {
     this.destroyPickers();
   }
 
-  async initPickers(uploadParams, Picker, reactContext) {
+  async initPickers(uploadParams, Picker) {
     if (this.destroyed || !this.uploadMediaClientConfig) {
       return;
     }
@@ -571,22 +551,11 @@ export class MediaPluginStateImplementation {
         mediaClientConfig: this.uploadMediaClientConfig,
         errorReporter
       };
-      const defaultPickerConfig = {
-        uploadParams,
-        proxyReactContext: reactContext(),
-        useForgePlugins: this.mediaOptions && this.mediaOptions.useForgePlugins || false,
-        featureFlags: this.mediaOptions && this.mediaOptions.featureFlags
-      };
 
       if (this.options.customMediaPicker) {
         const customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
         pickerPromises.push(customPicker);
         pickers.push(this.customPicker = await customPicker);
-      } else if (this.shouldUseMediaPickerPopup()) {
-        const popupPicker = new Picker('popup', pickerFacadeConfig, defaultPickerConfig).init();
-        pickerPromises.push(popupPicker);
-        pickers.push(this.popupPicker = await popupPicker);
-        this.removeOnCloseListener = this.popupPicker.onClose(this.onPopupPickerClose);
       }
 
       pickers.forEach(picker => {
@@ -627,7 +596,7 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
   return new SafePlugin({
     state: {
       init(_config, state) {
-        return new MediaPluginStateImplementation(state, options, reactContext, mediaOptions, dispatch);
+        return new MediaPluginStateImplementation(state, options, mediaOptions, dispatch);
       },
 
       apply(tr, pluginState) {

package/dist/es2019/plugins/media/pm-plugins/media-editor-plugin-factory.js

@@ -1,50 +1,2 @@
 import { PluginKey } from 'prosemirror-state';
-import { pluginFactory } from '../../../utils/plugin-state-factory';
-export const pluginKey = new PluginKey('mediaEditorPlugin');
-export const reducer = (state, action) => {
-  switch (action.type) {
-    case 'open':
-      return { ...state,
-        editor: {
-          identifier: action.identifier,
-          pos: action.pos
-        }
-      };
-
-    case 'close':
-      return { ...state,
-        editor: undefined
-      };
-
-    case 'upload':
-      return { ...state,
-        editor: undefined
-      };
-
-    case 'setMediaClientConfig':
-      return { ...state,
-        mediaClientConfig: action.mediaClientConfig
-      };
-
-    default:
-      return state;
-  }
-};
-export const {
-  createPluginState,
-  createCommand,
-  getPluginState
-} = pluginFactory(pluginKey, reducer, {
-  mapping: (tr, state) => {
-    if (!state.editor) {
-      return state;
-    } // remap the position of the editing media inside the state
-
-
-    return { ...state,
-      editor: { ...state.editor,
-        pos: tr.mapping.map(state.editor.pos)
-      }
-    };
-  }
-});
+export const pluginKey = new PluginKey('mediaEditorPlugin');

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

@@ -118,8 +118,7 @@ export const mediaStyles = css`
     background-color: ${akEditorDeleteBackground};
     box-shadow: 0px 0px 0px ${akEditorSelectedBorderBoldSize}px
       ${akEditorDeleteBorder};
-    transition: background-color 0s;
-    transition: box-shadow 0s;
+    transition: background-color 0s, box-shadow 0s;
   }
   .mediaGroupView-content-wrap.danger {
     /* Media inline */