@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/es2019/plugins/code-block/pm-plugins/ide-ux.js

@@ -1,4 +1,5 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from 'prosemirror-state';
 import { keydownHandler } from 'prosemirror-keymap';
 import { setTextSelection } from 'prosemirror-utils';
 import { getCursor } from '../../../utils';
@@ -8,7 +9,7 @@ import { getAutoClosingBracketInfo, shouldAutoCloseBracket } from '../ide-ux/bra
 import { getAutoClosingQuoteInfo, shouldAutoCloseQuote } from '../ide-ux/quote-handling';
 import { getEndOfCurrentLine, getStartOfCurrentLine, isCursorInsideCodeBlock, isSelectionEntirelyInsideCodeBlock, getLineInfo } from '../ide-ux/line-handling';
 import { insertIndent, outdent, indent, insertNewlineWithIndent } from '../ide-ux/commands';
-export default new Plugin({
+export default new SafePlugin({
   props: {
     handleTextInput(view, from, to, text) {
       const {

package/dist/es2019/plugins/code-block/pm-plugins/keymaps.js

@@ -4,7 +4,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirr
 import { getCursor, isEmptyNode, pipe } from '../../../utils';
 
 const deleteCurrentItem = $from => tr => {
-  return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
+  return tr.delete($from.before($from.depth), $from.after($from.depth));
 };
 
 const setTextSelection = pos => tr => {

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -1,4 +1,5 @@
-import { Plugin, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-block';
@@ -11,11 +12,27 @@ import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
-  appearance
+  appearance,
+  allowCompositionInputOverride = false
 }) => {
   const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
-  return new Plugin({
+  const handleDOMEvents = {}; // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
+  // incorrecly and lose content when pressing enter in the middle of a code block line.
+
+  if (allowCompositionInputOverride) {
+    handleDOMEvents.beforeinput = (view, event) => {
+      if (event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      event.inputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
+        event.preventDefault();
+        return true;
+      }
+
+      return false;
+    };
+  }
+
+  return new SafePlugin({
     state: {
       init(_, state) {
         const node = findCodeBlock(state, state.selection);
@@ -70,7 +87,8 @@ export const createPlugin = ({
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection
-      })
+      }),
+      handleDOMEvents
     }
   });
 };

package/dist/es2019/plugins/code-block/refresh-browser-selection.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key'; // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 

package/dist/es2019/plugins/code-block/toolbar.js

@@ -64,7 +64,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     title: formatMessage(codeBlockState.contentCopied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
     onMouseLeave: resetCopiedState,
     hideTooltipOnClick: false,
-    disabled: codeBlockState.isNodeSelected
+    disabled: codeBlockState.isNodeSelected,
+    tabIndex: null
   }, separator];
   const deleteButton = {
     id: 'editor.codeBlock.delete',
@@ -76,7 +77,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     onFocus: hoverDecoration(nodeType, true),
     onBlur: hoverDecoration(nodeType, false),
     onClick: removeCodeBlock,
-    title: formatMessage(commonMessages.remove)
+    title: formatMessage(commonMessages.remove),
+    tabIndex: null
   };
   return {
     title: 'CodeBlock floating controls',

package/dist/es2019/plugins/collab-edit/actions.js

@@ -76,12 +76,22 @@ export const applyRemoteSteps = (json, userIds, view, options) => {
       to
     } = state.selection;
     const [firstStep] = json;
+    /*
+     * Persist marks across transactions. Fixes an issue where
+     * marks are lost if remote transactions are dispatched
+     * between a user creating the mark and typing.
+     */
+
+    if (state.tr.storedMarks) {
+      tr.setStoredMarks(state.tr.storedMarks);
+    }
     /**
      * If the cursor is a the same position as the first step in
      * the remote data, we need to manually set it back again
      * in order to prevent the cursor from moving.
      */
 
+
     if (from === firstStep.from && to === firstStep.to) {
       tr.setSelection(state.selection.map(tr.doc, tr.mapping));
     }

package/dist/es2019/plugins/collab-edit/analytics.js

@@ -1,7 +1,7 @@
 import { addAnalytics, ACTION, EVENT_TYPE, ACTION_SUBJECT } from '../analytics';
 import { getFeatureFlags } from '../feature-flags-context';
 import { getDocStructure } from '../../utils/document-logger';
-import { sniffUserBrowserExtensions } from '@atlaskit/editor-common';
+import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 export const addSynchronyErrorAnalytics = (state, tr) => {
   return error => {
     const browserExtensions = sniffUserBrowserExtensions({

package/dist/es2019/plugins/collab-edit/events/initialize.js

@@ -4,7 +4,16 @@ import { subscribe } from './handlers';
 import { pluginKey } from '../plugin-key';
 
 const initCollab = (collabEditProvider, view) => {
-  collabEditProvider.initialize(() => view.state, json => Step.fromJSON(view.state.schema, json));
+  if (collabEditProvider.initialize) {
+    collabEditProvider.initialize(() => view.state, json => Step.fromJSON(view.state.schema, json));
+  }
+};
+
+const initNewCollab = (collabEditProvider, view, onSyncUpError) => {
+  collabEditProvider.setup({
+    getState: () => view.state,
+    onSyncUpError
+  });
 };
 
 const initCollabMemo = memoizeOne(initCollab);
@@ -22,11 +31,17 @@ export const initialize = ({
 
   cleanup = subscribe(view, provider, options, providerFactory); // Initialize provider
 
-  /**
-   * We only want to initialise once, if we reload/reconfigure this plugin
-   * We dont want to re-init collab, it would break existing sessions
-   */
+  if (options.useNativePlugin) {
+    // ED-13912 For NCS we don't want to use memoizeOne because it causes
+    // infinite text while changing page-width
+    initNewCollab(provider, view, options.onSyncUpError);
+  } else {
+    /**
+     * We only want to initialise once, if we reload/reconfigure this plugin
+     * We dont want to re-init collab, it would break existing sessions
+     */
+    initCollabMemo(provider, view);
+  }
 
-  initCollabMemo(provider, view);
   return cleanup;
 };

package/dist/es2019/plugins/collab-edit/index.js

@@ -1,8 +1,8 @@
 import { collab } from 'prosemirror-collab';
 import { createPlugin, pluginKey } from './plugin';
-export { CollabProvider } from './provider';
 import { sendTransaction } from './events/send-transaction';
 import { addSynchronyErrorAnalytics } from './analytics';
+import { nativeCollabProviderPlugin } from './native-collab-provider-plugin';
 export { pluginKey };
 
 const providerBuilder = collabEditProviderPromise => async (codeToExecute, onError) => {
@@ -42,6 +42,11 @@ const collabEditPlugin = options => {
         plugin: () => collab({
           clientID: userId
         })
+      }, {
+        name: 'nativeCollabProviderPlugin',
+        plugin: () => nativeCollabProviderPlugin({
+          providerPromise: collabEditProviderPromise
+        })
       }] : []), {
         name: 'collab',
         plugin: ({

package/dist/es2019/plugins/collab-edit/native-collab-provider-plugin.js

@@ -0,0 +1,32 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+const nativeCollabProviderPluginKey = new PluginKey('nativeCollabProviderPlugin');
+export const nativeCollabProviderPlugin = ({
+  providerPromise
+}) => {
+  return new SafePlugin({
+    key: nativeCollabProviderPluginKey,
+    state: {
+      init: () => null,
+      apply: (tr, currentPluginState) => {
+        const provider = tr.getMeta(nativeCollabProviderPluginKey);
+        return provider ? provider : currentPluginState;
+      }
+    },
+    view: editorView => {
+      providerPromise.then(provider => {
+        const {
+          dispatch,
+          state
+        } = editorView;
+        const tr = state.tr;
+        tr.setMeta(nativeCollabProviderPluginKey, provider);
+        dispatch(tr);
+      });
+      return {};
+    }
+  });
+};
+export const getCollabProvider = editorState => {
+  return nativeCollabProviderPluginKey.getState(editorState);
+};

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

@@ -1,11 +1,14 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { initialize } from './events/initialize';
 import { PluginState } from './plugin-state';
 import { pluginKey } from './plugin-key';
 import { addSynchronyErrorAnalytics } from './analytics';
+import { fireAnalyticsEvent } from '../analytics/fire-analytics-event';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 export { PluginState, pluginKey };
 export const createPlugin = (dispatch, providerFactory, collabProviderCallback, options) => {
-  return new Plugin({
+  const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init(config) {
@@ -44,6 +47,19 @@ export const createPlugin = (dispatch, providerFactory, collabProviderCallback,
 
     view(view) {
       const addErrorAnalytics = addSynchronyErrorAnalytics(view.state, view.state.tr);
+
+      const onSyncUpError = attributes => {
+        fireAnalyticsCallback({
+          payload: {
+            action: ACTION.NEW_COLLAB_SYNC_UP_ERROR_NO_STEPS,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes
+          }
+        });
+      };
+
+      options.onSyncUpError = onSyncUpError;
       const cleanup = collabProviderCallback(initialize({
         view,
         options,

package/dist/es2019/plugins/collab-edit/provider/index.js

@@ -1,2 +1 @@
-export { PubSubSpecialEventType } from './types';
-export { CollabProvider } from './collab-provider';
+export { PubSubSpecialEventType } from './types';

package/dist/es2019/plugins/collab-edit/utils.js

@@ -2,7 +2,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { Decoration } from 'prosemirror-view';
 import * as themeColors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { addAnalytics } from '../analytics/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT } from '../analytics/types';
 export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(solid => ({

package/dist/es2019/plugins/context-panel/index.js

@@ -1,11 +1,12 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('contextPanelPluginKey');
 export function getPluginState(state) {
   return pluginKey.getState(state);
 }
 
 function contextPanelPluginFactory(contextPanels, dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init(_config, state) {

package/dist/es2019/plugins/custom-autoformat/index.js

@@ -1,4 +1,4 @@
-import { Plugin as PMPlugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keydownHandler } from 'prosemirror-keymap';
 import reducers from './reducers';
 import { triggerInputRule } from './input-rules';
@@ -8,7 +8,7 @@ export const createPMPlugin = ({
   providerFactory
 }) => {
   const rules = [];
-  return new PMPlugin({
+  return new SafePlugin({
     state: {
       init() {
         return {

package/dist/es2019/plugins/date/actions.js

@@ -1,6 +1,6 @@
 import { NodeSelection, Selection } from 'prosemirror-state';
 import { Fragment } from 'prosemirror-model';
-import { todayTimestampInUTC } from '@atlaskit/editor-common';
+import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { withAnalytics, addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { isToday } from './utils/internal';

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { injectIntl } from 'react-intl-next';
-import { timestampToString, timestampToTaskContext, isPastDate, DateSharedCssClassName } from '@atlaskit/editor-common';
+import { timestampToString, timestampToTaskContext, isPastDate } from '@atlaskit/editor-common/utils';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';
 

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import DateNodeView from '../nodeviews/date';
 import { ReactNodeView } from '../../../nodeviews';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
@@ -24,7 +24,7 @@ const createPlugin = ({
     focusDateInput: false
   };
   const hasIntlContext = true;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, newPluginState),
     key: pluginKey,
     props: {

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { DateSharedCssClassName } from '@atlaskit/editor-common';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Popup, timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/plugins/editor-disabled/index.js

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { pluginFactory } from '../../utils/plugin-state-factory';
 export const pluginKey = new PluginKey('editorDisabledPlugin');
 
@@ -17,7 +18,7 @@ won't re-render when it changes.
 */
 
 export function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
       editorDisabled: false

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { emoji } from '@atlaskit/adf-schema';
 import { Fragment } from 'prosemirror-model';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
@@ -271,7 +272,7 @@ export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
 export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventDispatcher, options) {
-  return new Plugin({
+  return new SafePlugin({
     key: emojiPluginKey,
     state: {
       init() {

package/dist/es2019/plugins/emoji/nodeviews/emoji-next.js

@@ -1,10 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { DOMSerializer } from 'prosemirror-model';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
-import { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 export class EmojiNodeView {
   constructor(node, _, context) {
-    var _this$options, _this$options2, _this$options3;
+    var _this$options;
 
     _defineProperty(this, "hasProvider", false);
 
@@ -18,17 +17,10 @@ export class EmojiNodeView {
     this.providers = context.providerFactory;
     this.options = context.options;
     this.dom = EmojiNodeView.toDom(node);
-
-    if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.useInlineWrapper) {
-      const dom = createMobileInlineDomRef();
-      dom.appendChild(this.dom);
-      this.dom = dom;
-    }
-
-    this.el = (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.useInlineWrapper ? this.dom.firstElementChild : this.dom;
+    this.el = this.dom;
     this.providers.subscribe('emojiProvider', this.subscribe);
 
-    if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.allowZeroWidthSpaceAfter) {
+    if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.allowZeroWidthSpaceAfter) {
       this.el.after(document.createTextNode(ZERO_WIDTH_SPACE));
     }
 

package/dist/es2019/plugins/emoji/nodeviews/emoji.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 Emoji from '../ui/Emoji';
 import { ReactNodeView } from '../../../nodeviews';
-import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
 export class EmojiNodeView extends ReactNodeView {
   createDomRef() {
-    if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-      return createMobileInlineDomRef();
-    }
-
     return super.createDomRef();
   }
 
@@ -22,9 +17,7 @@ export class EmojiNodeView extends ReactNodeView {
       id,
       text
     } = this.node.attrs;
-    return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
-      useInlineWrapper: options && options.useInlineWrapper
-    }, /*#__PURE__*/React.createElement(Emoji, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Emoji, {
       providers: providerFactory,
       id: id,
       shortName: shortName,

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

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { N0, N20, N900 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { EmojiSharedCssClassName } from '@atlaskit/editor-common';
+import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const emojiStyles = css`
   .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
@@ -18,8 +18,7 @@ export const emojiStyles = css`
 
     &.${akEditorSelectedNodeClassName} {
       .${EmojiSharedCssClassName.EMOJI_SPRITE},
-        .${EmojiSharedCssClassName.EMOJI_IMAGE}
-        > span {
+        .${EmojiSharedCssClassName.EMOJI_IMAGE} {
         border-radius: 2px;
         ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
       }

package/dist/es2019/plugins/emoji/ui/Emoji/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClickSelectWrapper } from '../../../../ui/styles';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 export default function EmojiNode(props) {
   return /*#__PURE__*/React.createElement(ClickSelectWrapper, null, /*#__PURE__*/React.createElement(Emoji, props));
 }

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

@@ -28,7 +28,7 @@ const expandPlugin = (options = {}) => ({
         dispatch,
         getIntl
       }) => {
-        return createPlugin(dispatch, getIntl, options.useLongPressSelection);
+        return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection);
       }
     }, {
       name: 'expandKeymap',

package/dist/es2019/plugins/expand/nodeviews/index.js

@@ -5,7 +5,7 @@ import { Selection, NodeSelection } from 'prosemirror-state';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 import { keyName } from 'w3c-keyname';
 import { DOMSerializer } from 'prosemirror-model';
-import { expandMessages } from '@atlaskit/editor-common';
+import { expandMessages } from '@atlaskit/editor-common/ui';
 import { isEmptyNode } from '../../../utils';
 import { updateExpandTitle, toggleExpandExpanded, deleteExpandAtPos, setSelectionInsideExpand } from '../commands';
 import { expandClassNames } from '../ui/class-names';
@@ -51,9 +51,11 @@ const toDOM = (node, intl) => ['div', {
 }, 0]];
 
 export class ExpandNodeView {
-  constructor(node, view, getPos, getIntl) {
+  constructor(node, view, getPos, getIntl, isMobile) {
     _defineProperty(this, "allowInteractiveExpand", true);
 
+    _defineProperty(this, "isMobile", false);
+
     _defineProperty(this, "focusTitle", () => {
       if (this.input) {
         const {
@@ -343,6 +345,7 @@ export class ExpandNodeView {
     this.node = node;
     this.dom = dom;
     this.contentDOM = contentDOM;
+    this.isMobile = isMobile;
     this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
@@ -393,6 +396,12 @@ export class ExpandNodeView {
   }
 
   ignoreMutation(mutationRecord) {
+    // ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
+    // does not recognise the changes and reverts them.
+    if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
+      return false;
+    }
+
     if (mutationRecord.type === 'selection') {
       return false;
     }
@@ -459,6 +468,9 @@ export class ExpandNodeView {
   }
 
 }
-export default function (getIntl) {
-  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, getIntl);
+export default function ({
+  getIntl,
+  isMobile
+}) {
+  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, getIntl, isMobile);
 }

package/dist/es2019/plugins/expand/pm-plugins/keymap.js

@@ -9,7 +9,11 @@ import { deleteExpand, focusTitle } from '../commands';
 import { getPluginState as getSelectionPluginState } from '../../selection/plugin-factory';
 import { RelativeSelectionPos } from '../../selection/types';
 
-const isExpandSelected = selection => selection instanceof NodeSelection && (selection.node.type.name === 'expand' || selection.node.type.name === 'nestedExpand');
+const isExpandNode = node => {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
+};
+
+const isExpandSelected = selection => selection instanceof NodeSelection && isExpandNode(selection.node);
 
 export function expandKeymap() {
   const list = {};
@@ -172,6 +176,9 @@ export function expandKeymap() {
     const {
       selection
     } = state;
+    const {
+      $from
+    } = selection;
 
     if (!editorView || !selection.empty) {
       return false;
@@ -195,6 +202,13 @@ export function expandKeymap() {
       return false;
     }
 
+    const parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1))); // ED-10012 catch cases where the expand has another node nested within it and
+    // the backspace should be applied only to the inner node instead of the expand
+
+    if (parentNode && !isExpandNode(parentNode)) {
+      return false;
+    }
+
     const textSel = Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
 
     if (textSel && selection.$from.pos === textSel.$from.pos && isEmptyNode(state.schema)(expandNode.node) && dispatch) {

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { createSelectionClickHandler } from '../../selection/utils';
 import ExpandNodeView from '../nodeviews';
@@ -11,15 +11,22 @@ function containsClass(element, className) {
   return !!element && element.classList.contains(className);
 }
 
-export const createPlugin = (dispatch, getIntl, useLongPressSelection = false) => {
+export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false) => {
   const state = createPluginState(dispatch, {});
-  return new Plugin({
+  const isMobile = appearance === 'mobile';
+  return new SafePlugin({
     state: state,
     key: pluginKey,
     props: {
       nodeViews: {
-        expand: ExpandNodeView(getIntl),
-        nestedExpand: ExpandNodeView(getIntl)
+        expand: ExpandNodeView({
+          getIntl,
+          isMobile
+        }),
+        nestedExpand: ExpandNodeView({
+          getIntl,
+          isMobile
+        })
       },
 
       handleKeyDown(_view, event) {

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

@@ -30,7 +30,8 @@ export const getToolbarConfig = (state, {
         onMouseLeave: hoverDecoration([nestedExpand, expand], false),
         onFocus: hoverDecoration([nestedExpand, expand], true),
         onBlur: hoverDecoration([nestedExpand, expand], false),
-        title: formatMessage(commonMessages.remove)
+        title: formatMessage(commonMessages.remove),
+        tabIndex: null
       }]
     };
   }