@atlaskit/editor-core 162.0.1 → 163.0.0

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/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

@@ -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;
 
@@ -257,11 +255,7 @@ export class MediaPluginStateImplementation {
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", () => {
-      if (!this.mediaOptions || this.mediaOptions && this.mediaOptions.useMediaPickerPopup === undefined) {
-        return this.hasUserAuthProvider();
-      }
-
-      return !!this.mediaOptions.useMediaPickerPopup;
+      return false;
     });
 
     _defineProperty(this, "showMediaPicker", () => {

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 */

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

@@ -7,7 +7,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import commonMessages from '../../../messages';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { hoverDecoration } from '../../base/pm-plugins/decoration';
-import { renderAnnotationButton } from './annotation';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import buildLayoutButtons from '../../../ui/MediaAndEmbedsToolbar';
 import { getMediaLinkingState } from '../pm-plugins/linking';
@@ -179,7 +178,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   } = state.schema.nodes;
   const {
     allowResizing,
-    allowAnnotation,
     allowLinking,
     allowAdvancedToolBarOptions,
     allowResizingInTables,
@@ -190,16 +188,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
 
-    if (toolbarButtons.length) {
-      if (allowAnnotation) {
-        toolbarButtons.push({
-          type: 'custom',
-          fallback: [],
-          render: renderAnnotationButton(pluginState, intl)
-        });
-      }
-    }
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -16,7 +16,6 @@ import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
 const ValidationWrapper = styled.section`
-  display: flex;
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;

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

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Wrapper } from './styled';
+import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../utils/media-single';
@@ -323,13 +326,15 @@ export default class ResizableMediaSingle extends React.Component {
       offsetLeft: this.state.offsetLeft,
       wrappedLayout: this.wrappedLayout
     };
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      layout: layout,
-      isResized: !!pctWidth,
-      containerWidth: containerWidth || origWidth,
-      innerRef: this.saveWrapper,
-      fullWidthMode: fullWidthMode
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    return jsx("div", {
+      ref: this.saveWrapper,
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || origWidth,
+        fullWidthMode
+      })
+    }, jsx(Resizer, _extends({}, this.props, {
       ratio: ratio,
       width: initialWidth,
       selected: selected,
@@ -347,7 +352,7 @@ export default class ResizableMediaSingle extends React.Component {
       // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
       // This workaround adds an empty div inside the resize handler to prevent the issue.
       ,
-      handleComponentFunc: () => /*#__PURE__*/React.createElement("div", {
+      handleComponentFunc: () => jsx("div", {
         contentEditable: false
       })
     }), children));

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -1,10 +1,9 @@
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const wrapperStyle = props => css`
   & > div {
-    ${MediaSingleDimensionHelper};
+    ${MediaSingleDimensionHelper(props)};
     position: relative;
     clear: both;
   }
-`;
-Wrapper.displayName = 'ResizerWrapper';
+`;

package/dist/es2019/plugins/media/utils/media-single.js

@@ -6,7 +6,7 @@ import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-import { safeInsert } from '../../../utils/insert';
+import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
@@ -90,6 +90,8 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
 export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert) => {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
@@ -98,17 +100,19 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     state,
     dispatch
   } = view;
-  const grandParent = state.selection.$from.node(-1);
+  const grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  const parentType = state.selection.$from.parent.type;
   const node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  const shouldSplit = grandParent && grandParent.type.validContent(Fragment.from(node));
   let fileExtension;
 
   if (mediaState.fileName) {
     const extensionIdx = mediaState.fileName.lastIndexOf('.');
     fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
-  }
+  } // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+
 
-  if (shouldSplit) {
+  if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension,
       inputMethod

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';

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

@@ -1,7 +1,7 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export const panelStyles = css`
+export const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
       cursor: pointer;
@@ -33,7 +33,7 @@ export const panelStyles = css`
       }
     }
 
-    ${panelSharedStyles};
+    ${panelSharedStyles(props)};
   }
 
   .${PanelSharedCssClassName.prefix}.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 export const placeHolderClassName = 'placeholder-decoration';
 export const placeholderStyles = css`

package/dist/es2019/plugins/placeholder-text/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const placeholderTextStyles = css`

package/dist/es2019/plugins/rule/pm-plugins/input-rule.js

@@ -10,6 +10,9 @@ export const createHorizontalRule = (state, start, end, inputMethod) => {
   }
 
   let tr = null;
+  const {
+    rule
+  } = state.schema.nodes;
   const {
     newInsertionBehaviour
   } = getFeatureFlags(state);
@@ -21,7 +24,7 @@ export const createHorizontalRule = (state, start, end, inputMethod) => {
      * without considering the extra text after the `/` command.
      **/
     tr = state.tr.replaceWith(start, end, Fragment.empty);
-    tr = safeInsert(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
+    tr = safeInsert(rule.createChecked(), tr.selection.from)(tr);
   }
 
   if (!tr) {

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

@@ -1,9 +1,9 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export const ruleStyles = css`
+export const ruleStyles = props => css`
   .ProseMirror {
-    ${ruleSharedStyles};
+    ${ruleSharedStyles(props)};
 
     hr {
       cursor: pointer;

package/dist/es2019/plugins/selection/gap-cursor/styles.js

@@ -1,4 +1,4 @@
-import { keyframes } from 'styled-components';
+import { css, keyframes } from '@emotion/react';
 const gapCursorBlink = keyframes`
   from, to {
     opacity: 0;
@@ -12,7 +12,7 @@ const gapCursor = '.ProseMirror-gapcursor';
 const prosemirrorwidget = '.ProseMirror-widget';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
-export const gapCursorStyles = `
+export const gapCursorStyles = css`
   /* =============== GAP CURSOR ================== */
   .ProseMirror {
     &.${hideCaretModifier} {

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

@@ -1,6 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common/utils';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
 import { getDecorations, shouldRecalcDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../utils';
@@ -117,29 +116,14 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           return false;
         },
         keydown: (editorView, event) => {
-          const {
-            state
-          } = editorView; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
-          // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
-          // On keypress, if the head of cursor selection touches a node with contenteditable="false",
-          // we temporarily remove the attribute, wait one tick, then restore it with its original value.
-
-          if (browser.gecko) {
-            const node = editorView.nodeDOM(editorView.state.selection.head);
-
-            if (node instanceof HTMLElement && node.getAttribute('contenteditable') === 'false') {
-              node.removeAttribute('contenteditable');
-              requestAnimationFrame(() => {
-                node.setAttribute('contenteditable', 'false');
-              });
-            }
-          } // Bugfix for block ReactNodeViews like table and extension
+          // Bugfix for block ReactNodeViews like table and extension
           // They could not be selected with Shift + ArrowDown/ArrowUp
           // Fixed when contenteditable = false, but then you couldn't edit their contents
           // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
-
-
           if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            const {
+              state
+            } = editorView;
             let pos;
 
             if (event.key === 'ArrowDown') {

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

@@ -24,11 +24,7 @@ const baseStatusPlugin = options => ({
   pmPlugins() {
     return [{
       name: 'status',
-      plugin: ({
-        dispatch,
-        portalProviderAPI,
-        eventDispatcher
-      }) => createStatusPlugin(dispatch, portalProviderAPI, eventDispatcher, options)
+      plugin: pmPluginFactoryParams => createStatusPlugin(pmPluginFactoryParams, options)
     }, {
       name: 'statusKeymap',
       plugin: keymapPlugin