@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/es2019/plugins/card/ui/assets/embed.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconEmbedGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
+    fill: "#42526E"
+  }));
+};
+
+export const IconEmbed = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconEmbedGlyph
+  }, props));
+};

package/dist/es2019/plugins/card/ui/assets/inline.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconInlineGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
+    fill: "#42526E"
+  }));
+};
+
+export const IconInline = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconInlineGlyph
+  }, props));
+};

package/dist/es2019/plugins/card/ui/assets/url.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconUrlGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "15",
+    width: "20",
+    height: "2",
+    rx: "1",
+    fill: "#42526E"
+  }));
+};
+
+export const IconUrl = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconUrlGlyph
+  }, props));
+};

package/dist/es2019/plugins/card/ui/styled.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 export const embedCardStyles = css`
   .ProseMirror {
     .embedCardView-content-wrap[layout^='wrap-'] {
@@ -18,4 +18,7 @@ export const embedCardStyles = css`
       clear: both;
     }
   }
+`;
+export const EmbedSpacing = styled.div`
+  margin: 0 10px;
 `;

package/dist/es2019/plugins/clear-marks-on-change-to-empty-document/index.js

@@ -1,8 +1,9 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { isEmptyDocument } from '../../utils';
 export const pluginKey = new PluginKey('clearMarksOnChangeToEmptyDocumentPlugin');
 export function createPlugin() {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     appendTransaction: (_transactions, oldState, newState) => {
       // ED-2973: When a user clears the editor's content, remove the current active marks

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

@@ -1,10 +1,11 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from 'prosemirror-state';
 import { clipboardPluginKey } from '../plugin-key';
 import { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../../selection/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../analytics/types/enums';
 export const createPlugin = ({
   dispatchAnalyticsEvent
-}) => new Plugin({
+}) => new SafePlugin({
   key: clipboardPluginKey,
   props: {
     handleDOMEvents: {

package/dist/es2019/plugins/code-bidi-warning/pm-plugins/main.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBidiWarningPluginKey } from '../plugin-key';
 import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
@@ -10,7 +10,7 @@ export const createPlugin = ({
 }) => {
   const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
-  return new Plugin({
+  return new SafePlugin({
     key: codeBidiWarningPluginKey,
     state: createPluginState(dispatch, state => {
       // The appearance being mobile indicates we are in an editor being

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

@@ -24,8 +24,7 @@ const codeBlockPlugin = options => ({
       name: 'codeBlock',
       plugin: ({
         getIntl
-      }) => createPlugin({
-        useLongPressSelection: options.useLongPressSelection,
+      }) => createPlugin({ ...options,
         getIntl,
         appearance: options.appearance
       })

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])}
       }