@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common';
+import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';

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

@@ -1,5 +1,8 @@
+import { Fragment } from 'prosemirror-model';
 import { NodeSelection } from 'prosemirror-state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } from '../../analytics';
+import { removeMediaGroupNode } from './utils';
 export const changeInlineToMediaCard = (state, dispatch) => {
   const {
     media,
@@ -29,6 +32,53 @@ export const changeInlineToMediaCard = (state, dispatch) => {
   tr = safeInsert(group, nodePos, true)(tr);
 
   if (dispatch) {
+    addAnalytics(state, tr, {
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
+        previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
+      }
+    });
+    dispatch(tr);
+  }
+
+  return true;
+};
+export const changeMediaCardToInline = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  const mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  const space = state.schema.text(' ');
+  let content = Fragment.from([mediaInlineNode, space]);
+  const node = paragraph.createChecked({}, content);
+  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  let tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    addAnalytics(state, tr, {
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
+        previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
+      }
+    });
     dispatch(tr);
   }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NodeSelection } from 'prosemirror-state';
-import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -20,8 +20,7 @@ import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
-import { Fragment } from 'prosemirror-model';
-import { changeInlineToMediaCard, removeInlineCard } from './commands';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 
 const remove = (state, dispatch) => {
@@ -42,36 +41,6 @@ const handleRemoveMediaGroup = (state, dispatch) => {
   return true;
 };
 
-const changeMediaCardToInline = (state, dispatch) => {
-  const {
-    media,
-    mediaInline,
-    paragraph
-  } = state.schema.nodes;
-  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-
-  if (!selectedNode || !selectedNode.type === media) {
-    return false;
-  }
-
-  const mediaInlineNode = mediaInline.create({
-    id: selectedNode.attrs.id,
-    collection: selectedNode.attrs.collection
-  });
-  const space = state.schema.text(' ');
-  let content = Fragment.from([mediaInlineNode, space]);
-  const node = paragraph.createChecked({}, content);
-  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
-  let tr = removeMediaGroupNode(state);
-  tr = safeInsert(node, nodePos, true)(tr);
-
-  if (dispatch) {
-    dispatch(tr);
-  }
-
-  return true;
-};
-
 const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
   const {
     mediaGroup
@@ -79,15 +48,19 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
   const items = [{
     id: 'editor.media.view.switcher',
     type: 'dropdown',
-    title: intl.formatMessage(messages.displayThumbnail),
+    title: intl.formatMessage(messages.changeView),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
+      disabled: false,
       onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: true,
+      disabled: false,
       onClick: () => {
         return true;
       },
@@ -141,17 +114,21 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
   const items = [{
     id: 'editor.media.view.switcher',
     type: 'dropdown',
-    title: intl.formatMessage(cardMessages.inline),
+    title: intl.formatMessage(messages.changeView),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: true,
+      disabled: false,
       onClick: () => {
         return true;
       },
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: false,
+      disabled: false,
       onClick: changeInlineToMediaCard,
       testId: 'thumbnail-appearance'
     }]

package/dist/es2019/plugins/media/ui/Media/DropPlaceholder.js

@@ -4,6 +4,8 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import { B400, B300, B200 } from '@atlaskit/theme/colors';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
+import { injectIntl } from 'react-intl-next';
+import { dropPlaceholderMessages } from './drop-placeholder-messages';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const IconWrapper = styled.div`
   color: ${hexToRgba(B400, 0.4) || B400};
@@ -23,9 +25,21 @@ const DropLine = styled.div`
   width: 100%;
   height: 2px;
 `;
+
+const IconWrapperComponent = props => {
+  const {
+    intl
+  } = props;
+  const {
+    dropPlaceholderLabel
+  } = dropPlaceholderMessages;
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+
+const IntlIconWrapper = injectIntl(IconWrapperComponent);
 export default (({
   type = 'group'
-}) => type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
-  label: "Document",
-  size: "medium"
-})));
+}) => type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IntlIconWrapper, null));

package/dist/es2019/plugins/media/ui/Media/drop-placeholder-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const dropPlaceholderMessages = defineMessages({
+  dropPlaceholderLabel: {
+    id: 'fabric.editor.dropPlaceholderLabel',
+    defaultMessage: 'Document',
+    description: 'document label for an media icon'
+  }
+});

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { ErrorMessage } from '@atlaskit/editor-common';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink'; // Common Translations will live here
 

package/dist/es2019/plugins/media/ui/MediaPicker/DropzoneWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export const DropzoneWrapper = ({
   mediaState,
   isActive,

package/dist/es2019/plugins/media/ui/MediaPicker/PickerFacadeProvider.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { MediaPicker } from '@atlaskit/media-picker';
-import { ErrorReporter } from '@atlaskit/editor-common';
+import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../picker-facade';
 const dummyMediaPickerObject = {
   on: () => {},

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { Wrapper } from './styled';
 import Resizer from '../../../../ui/Resizer';

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

@@ -1,4 +1,4 @@
-import { MediaSingleDimensionHelper } from '@atlaskit/editor-common';
+import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
 import styled from 'styled-components';
 export const Wrapper = styled.div`
   & > div {

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

@@ -2,6 +2,8 @@ import React from 'react';
 import AttachmentIcon from '@atlaskit/icon/glyph/editor/attachment';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import WithPluginState from '../../../../ui/WithPluginState';
+import { toolbarMediaMessages } from './toolbar-media-messages';
+import { injectIntl } from 'react-intl-next';
 
 const onClickMediaButton = pluginState => () => {
   pluginState.showMediaPicker();
@@ -13,7 +15,8 @@ const ToolbarMedia = ({
   eventDispatcher,
   pluginKey,
   isDisabled,
-  isReducedSpacing
+  isReducedSpacing,
+  intl
 }) => /*#__PURE__*/React.createElement(WithPluginState, {
   editorView: editorView,
   eventDispatcher: eventDispatcher,
@@ -27,17 +30,20 @@ const ToolbarMedia = ({
       return null;
     }
 
+    const {
+      toolbarMediaTitle
+    } = toolbarMediaMessages;
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.MEDIA,
       onClick: onClickMediaButton(mediaPlugin),
       disabled: isDisabled,
-      title: "Files & images",
+      title: intl.formatMessage(toolbarMediaTitle),
       spacing: isReducedSpacing ? 'none' : 'default',
       iconBefore: /*#__PURE__*/React.createElement(AttachmentIcon, {
-        label: "Files & images"
+        label: intl.formatMessage(toolbarMediaTitle)
       })
     });
   }
 });
 
-export default ToolbarMedia;
+export default injectIntl(ToolbarMedia);

package/dist/es2019/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const toolbarMediaMessages = defineMessages({
+  toolbarMediaTitle: {
+    id: 'fabric.editor.toolbarMediaTitle',
+    defaultMessage: 'Files & images',
+    description: 'a label for an icon that describes files and images'
+  }
+});

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

@@ -257,14 +257,15 @@ function canContainImage(element) {
 }
 /**
  * Given a html string, we attempt to hoist any nested `<img>` tags,
- * not wrapped by a `<div>` as ProseMirror no-op's on those scenarios.
+ * not directly wrapped by a `<div>` as ProseMirror no-op's
+ * on those scenarios.
  * @param html
  */
 
 
 export const unwrapNestedMediaElements = html => {
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  let doc = parser.parseFromString(html, 'text/html');
   const wrapper = doc.body; // Remove Google Doc's wrapper <b> el
 
   const docsWrapper = wrapper.querySelector('b[id^="docs-internal-guid-"]');
@@ -292,11 +293,11 @@ export const unwrapNestedMediaElements = html => {
     if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {
       mediaParent.removeChild(imageTag);
       return;
-    } // If its wrapped by a div we assume its safe to bypass.
-    // ProseMirror should handle this case properly.
+    } // If its wrapped by a valid container we assume its safe to bypass.
+    // ProseMirror should handle these cases properly.
 
 
-    if (mediaParent instanceof HTMLDivElement || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
+    if (canContainImage(mediaParent) || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
       return;
     } // Find the top most element that the parent has a valid container for the image.
     // Stop just before found the wrapper

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

@@ -1,6 +1,6 @@
 import { Fragment, Slice } from 'prosemirror-model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from 'prosemirror-utils';
-import { calcPxFromPct, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcPxFromPct, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';

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

@@ -4,5 +4,15 @@ export const messages = defineMessages({
     id: 'fabric.editor.inviteItem.title',
     defaultMessage: '{userRole, select, admin {Invite} trusted {Invite} other {Add}} teammate to {productName}',
     description: 'Title of the invite teammate item in typeahead plugin'
+  },
+  mentionsAddLabel: {
+    id: 'fabric.editor.mentionsAddLabel',
+    defaultMessage: 'add-icon',
+    description: 'icon label to describe adding a new mention'
+  },
+  mentionsIconLabel: {
+    id: 'fabric.editor.mentionsIconLabel',
+    defaultMessage: 'Mention',
+    description: 'icon label to describe the mention icon'
   }
 });

package/dist/es2019/plugins/mentions/nodeviews/mention.js

@@ -1,14 +1,9 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Mention from '../ui/Mention';
 import { ReactNodeView } from '../../../nodeviews';
-import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
 export class MentionNodeView extends ReactNodeView {
   createDomRef() {
-    if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-      return createMobileInlineDomRef();
-    }
-
     return super.createDomRef();
   }
 
@@ -22,9 +17,7 @@ export class MentionNodeView extends ReactNodeView {
       text,
       accessLevel
     } = this.node.attrs;
-    return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
-      useInlineWrapper: options && options.useInlineWrapper
-    }, /*#__PURE__*/React.createElement(Mention, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Mention, {
       id: id,
       text: text,
       accessLevel: accessLevel,
@@ -34,8 +27,11 @@ export class MentionNodeView extends ReactNodeView {
 
 }
 export default function mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
-  return (node, view, getPos) => new MentionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory,
-    options
-  }).init();
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new MentionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory,
+      options
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
 }

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SLI_EVENT_TYPE, SMART_EVENT_TYPE, buildSliPayload } from '@atlaskit/mention/resource';
 import mentionNodeView from '../nodeviews/mention';
 import { mentionPluginKey } from './key';
@@ -41,7 +41,7 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
     }
   };
 
-  return new Plugin({
+  return new SafePlugin({
     key: mentionPluginKey,
     state: {
       init() {

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { MentionSharedCssClassName } from '@atlaskit/editor-common';
+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';
 export const mentionsStyles = css`

package/dist/es2019/plugins/mentions/ui/InviteItem/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT } from './styles';
 import { messages } from '../../messages';
 export const INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
@@ -20,7 +20,8 @@ const InviteItem = ({
   onMouseEnter,
   onSelection,
   selected,
-  userRole
+  userRole,
+  intl
 }) => {
   const onSelected = useCallback(event => {
     if (leftClick(event) && onSelection) {
@@ -44,7 +45,7 @@ const InviteItem = ({
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
   }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AddIcon, {
-    label: "add-icon",
+    label: intl.formatMessage(messages.mentionsAddLabel),
     primaryColor: N300
   })), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.inviteItemTitle, {
     values: {
@@ -54,4 +55,4 @@ const InviteItem = ({
   })))));
 };
 
-export default InviteItem;
+export default injectIntl(InviteItem);

package/dist/es2019/plugins/mentions/ui/Mention/index.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 export default class Mention extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/plugins/mentions/ui/ToolbarMention/index.js

@@ -5,7 +5,10 @@ import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { INPUT_METHOD } from '../../../analytics';
 import { createTypeAheadTools } from '../../../type-ahead/api';
-export default class ToolbarMention extends PureComponent {
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../../messages';
+
+class ToolbarMention extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -20,17 +23,20 @@ export default class ToolbarMention extends PureComponent {
   }
 
   render() {
+    const mentionStringTranslated = this.props.intl.formatMessage(messages.mentionsIconLabel);
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       testId: this.props.testId,
       buttonId: TOOLBAR_BUTTON.MENTION,
       spacing: "none",
       onClick: this.handleInsertMention,
       disabled: this.props.isDisabled,
-      title: "Mention @",
+      title: mentionStringTranslated + '@',
       iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
-        label: "Mention"
+        label: mentionStringTranslated
       })
     });
   }
 
-}
+}
+
+export default injectIntl(ToolbarMention);

package/dist/es2019/plugins/mobile-dimensions/actions.js

@@ -4,4 +4,5 @@ export let MobileDimensionsActionTypes;
   MobileDimensionsActionTypes["SET_KEYBOARD_HEIGHT"] = "SET_KEYBOARD_HEIGHT";
   MobileDimensionsActionTypes["SET_WINDOW_HEIGHT"] = "SET_WINDOW_HEIGHT";
   MobileDimensionsActionTypes["SET_MOBILE_PADDING_TOP"] = "SET_MOBILE_PADDING_TOP";
+  MobileDimensionsActionTypes["SET_IS_EXPANDED"] = "SET_IS_EXPANDED";
 })(MobileDimensionsActionTypes || (MobileDimensionsActionTypes = {}));

package/dist/es2019/plugins/mobile-dimensions/commands.js

@@ -11,4 +11,8 @@ export const setWindowHeight = windowHeight => createCommand({
 export const setMobilePaddingTop = paddingTop => createCommand({
   type: MobileDimensionsActionTypes.SET_MOBILE_PADDING_TOP,
   paddingTop
+});
+export const setIsExpanded = isExpanded => createCommand({
+  type: MobileDimensionsActionTypes.SET_IS_EXPANDED,
+  isExpanded
 });

package/dist/es2019/plugins/mobile-dimensions/index.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setWindowHeight } from './commands';
 import { createPluginState, mobileDimensionsPluginKey } from './plugin-factory'; // 44 pixels squared is the minimum size for a tap target as per Apple's UX design guidelines
 
@@ -7,7 +7,8 @@ export const MIN_TAP_SIZE_PX = 44;
 const getInitialState = () => ({
   keyboardHeight: -1,
   mobilePaddingTop: 0,
-  windowHeight: window.innerHeight
+  windowHeight: window.innerHeight,
+  isExpanded: false
 });
 /**
  * Plugin to store the dimensions of the mobile such as keyboard height and window size
@@ -16,12 +17,30 @@ const getInitialState = () => ({
 
 const createPlugin = dispatch => {
   let rafId;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, getInitialState),
     key: mobileDimensionsPluginKey,
+    props: {
+      scrollThreshold: {
+        top: 12,
+        left: 0,
+        right: 0,
+        bottom: 12
+      },
+      scrollMargin: {
+        top: 12,
+        bottom: 12,
+        left: 0,
+        right: 0
+      }
+    },
 
     view(editorView) {
       const handleResize = () => {
+        if (rafId) {
+          window.cancelAnimationFrame(rafId);
+        }
+
         let windowInnerHeight = window.innerHeight;
         let count = 0;
 
@@ -37,7 +56,11 @@ const createPlugin = dispatch => {
             } else {
               rafId = requestAnimationFrame(checkWindowHeight);
             }
+          } else {
+            rafId = requestAnimationFrame(checkWindowHeight);
           }
+
+          windowInnerHeight = window.innerHeight;
         };
 
         rafId = requestAnimationFrame(checkWindowHeight);

package/dist/es2019/plugins/mobile-dimensions/reducer.js

@@ -15,6 +15,11 @@ export default function (state, action) {
       return { ...state,
         mobilePaddingTop: action.paddingTop
       };
+
+    case MobileDimensionsActionTypes.SET_IS_EXPANDED:
+      return { ...state,
+        isExpanded: action.isExpanded
+      };
   }
 
   return state;

package/dist/es2019/plugins/mobile-selection/content-in-selection.js

@@ -3,11 +3,11 @@ export const contentInSelection = ({
   selection,
   doc
 }) => {
-  const nodes = new Set();
-  const marks = new Set();
+  const nodes = new Array();
+  const marks = new Array();
   doc.nodesBetween(selection.from, selection.to, node => {
-    nodes.add(node.type.name);
-    node.marks.forEach(mark => marks.add(mark.type.name));
+    nodes.push(node.type.name);
+    node.marks.forEach(mark => marks.push(mark.type.name));
     return true;
   });
   return {

package/dist/es2019/plugins/mobile-selection/mobile-selection-plugin.js

@@ -1,9 +1,10 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { contentInSelection } from './content-in-selection';
 export const selectionPluginKey = new PluginKey('mobile-selection');
 export const createProseMirrorPlugin = dispatch => {
-  return new Plugin({
+  return new SafePlugin({
     view: editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);
       return {