@atlaskit/editor-core 154.0.0 → 155.0.0

package/dist/esm/plugins/list/commands/outdent-list.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
-import { isInsideListItem } from '../utils/selection';
+import { isInsideListItem, isInsideTableCell } from '../utils/selection';
 import { isBulletList } from '../utils/node';
 import { findFirstParentListNode } from '../utils/find';
 import { getCommonListAnalyticsAttributes } from '../utils/analytics';
@@ -31,7 +31,8 @@ export function outdentList() {
 
     if (!customTr || !customTr.docChanged) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
+      // If inside table cell and can't outdent list, then let it handle by table keymap
+      return !isInsideTableCell(state);
     }
 
     addAnalytics(state, customTr, {

package/dist/esm/plugins/list/pm-plugins/main.js

@@ -4,7 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { isWrappingPossible } from '../utils/selection';
@@ -107,7 +108,7 @@ var createInitialState = function createInitialState(state) {
 };
 
 export var createPlugin = function createPlugin(eventDispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(eventDispatch, createInitialState),
     key: listPluginKey,
     props: {

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

@@ -71,10 +71,16 @@ export var joinSiblingLists = function joinSiblingLists(_ref) {
 
     var index = resolvedPos.index();
     var positionPreviousNode = resolvedPos.posAtIndex(index - 1);
-    var positionCurrentNode = resolvedPos.posAtIndex(index);
+    var positionCurrentNode = resolvedPos.posAtIndex(index); // If the previous node is part of the selection, OR
+    // If the previous node is not part of the selection and the previous node has the same list type that we’re converting to
+
+    var joinBefore = positionPreviousNode >= from || nodeBefore.type === forceListType;
 
     if (forceListType) {
-      tr.setNodeMarkup(positionPreviousNode, forceListType);
+      if (joinBefore) {
+        tr.setNodeMarkup(positionPreviousNode, forceListType);
+      }
+
       tr.setNodeMarkup(positionCurrentNode, forceListType);
     }
 
@@ -83,7 +89,9 @@ export var joinSiblingLists = function joinSiblingLists(_ref) {
       tr.setNodeMarkup(positionPreviousNode, nodeType);
     }
 
-    joins.push(pos);
+    if (joinBefore) {
+      joins.push(pos);
+    }
   });
 
   if (selection.empty && rootListNode && isListNode(rootListNode)) {

package/dist/esm/plugins/list/utils/selection.js

@@ -1,6 +1,6 @@
 import { findWrapping } from 'prosemirror-transform';
 import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
-import { findParentNodeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
+import { findParentNodeClosestToPos, findParentNodeOfType, hasParentNodeOfType } from 'prosemirror-utils';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
 import { isListItemNode, isListNode, isParagraphNode } from './node';
 export var isPosInsideParagraph = function isPosInsideParagraph($pos) {
@@ -38,6 +38,12 @@ export var isInsideListItem = function isInsideListItem(state) {
 
   return hasParentNodeOfType(listItem)(state.selection) && isParagraphNode(parent);
 };
+export var isInsideTableCell = function isInsideTableCell(state) {
+  var _state$schema$nodes = state.schema.nodes,
+      tableCell = _state$schema$nodes.tableCell,
+      tableHeader = _state$schema$nodes.tableHeader;
+  return !!findParentNodeOfType([tableCell, tableHeader])(state.selection);
+};
 export var canJoinToPreviousListItem = function canJoinToPreviousListItem(state) {
   var $from = state.selection.$from;
   var $before = state.doc.resolve($from.pos - 1);

package/dist/esm/plugins/macro/index.js

@@ -4,12 +4,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setMacroProvider } from './actions';
 import { pluginKey } from './plugin-key';
 export { insertMacroFromMacroBrowser, resolveMacro, runMacroAutoConvert, setMacroProvider } from './actions';
 export var createPlugin = function createPlugin(dispatch, providerFactory) {
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init() {
         return {

package/dist/esm/plugins/max-content-size/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';
 export var pluginKey = new PluginKey('maxContentSizePlugin');
 export function createPlugin(dispatch, maxContentSize) {
   if (!maxContentSize) {
@@ -6,7 +7,7 @@ export function createPlugin(dispatch, maxContentSize) {
   }
 
   var maxContentSizeReached = false;
-  return new Plugin({
+  return new SafePlugin({
     filterTransaction: function filterTransaction(tr) {
       var result = tr.doc && tr.doc.nodeSize > maxContentSize;
 

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

@@ -72,6 +72,7 @@ var mediaPlugin = function mediaPlugin(options) {
         plugin: function plugin(_ref2) {
           var schema = _ref2.schema,
               dispatch = _ref2.dispatch,
+              getIntl = _ref2.getIntl,
               eventDispatcher = _ref2.eventDispatcher,
               providerFactory = _ref2.providerFactory,
               errorReporter = _ref2.errorReporter,
@@ -92,7 +93,7 @@ var mediaPlugin = function mediaPlugin(options) {
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, dispatch, options);
+          }, reactContext, getIntl, dispatch, options);
         }
       }, {
         name: 'mediaKeymap',

package/dist/esm/plugins/media/nodeviews/mediaGroup.js

@@ -29,6 +29,8 @@ import { pluginKey as editorDisabledPluginKey } from '../../editor-disabled';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { injectIntl } from 'react-intl-next';
+import { messages } from './messages';
 
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -147,7 +149,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
               actions: [{
                 handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
                 icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-                  label: "delete"
+                  label: _this.props.intl.formatMessage(messages.mediaGroupDeleteLabel)
                 })
               }]
             };
@@ -293,7 +295,8 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(MediaGroup, "displayName", 'MediaGroup');
 
-export { MediaGroup as default };
+var IntlMediaGroup = injectIntl(MediaGroup);
+export default IntlMediaGroup;
 
 var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(MediaGroupNodeView, _ReactNodeView);
@@ -328,7 +331,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               return null;
             }
 
-            return /*#__PURE__*/React.createElement(MediaGroup, {
+            return /*#__PURE__*/React.createElement(IntlMediaGroup, {
               node: _this3.node,
               getPos: getPos,
               view: _this3.view,

package/dist/esm/plugins/media/nodeviews/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  mediaGroupDeleteLabel: {
+    id: 'fabric.editor.mediaGroupDeleteLabel',
+    defaultMessage: 'delete',
+    description: 'a label for an icon that deletes media'
+  }
+});

package/dist/esm/plugins/media/pm-plugins/alt-text/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';
 import reducer from './reducer';
 import { pmHistoryPluginKey } from '../../../history/pm-history-types';
@@ -23,7 +24,7 @@ var _pluginFactory = pluginFactory(pluginKey, reducer, {
 export var createPlugin = function createPlugin(_ref) {
   var dispatch = _ref.dispatch,
       providerFactory = _ref.providerFactory;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, {
       isAltTextEditorOpen: false
     }),

package/dist/esm/plugins/media/pm-plugins/linking/index.js

@@ -5,7 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { pluginFactory } from '../../../../utils/plugin-state-factory';
-import { PluginKey, Plugin, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, NodeSelection } from 'prosemirror-state';
 import reducer from './reducer';
 export var mediaLinkingPluginKey = new PluginKey('mediaLinking');
 var initialState = {
@@ -64,7 +65,7 @@ var createMediaLinkingCommand = mediaLinkingPluginFactory.createCommand,
     getMediaLinkingState = mediaLinkingPluginFactory.getPluginState;
 export { createMediaLinkingCommand, getMediaLinkingState };
 export default (function (dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: mediaLinkingPluginKey,
     state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
   });

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

@@ -16,7 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
@@ -36,17 +37,23 @@ import { isInEmptyLine } from '../../../utils/document';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isInListItem } from '../../../utils';
 import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
+import { RawIntlProvider } from 'react-intl-next';
 export { stateKey } from './plugin-key';
 
-var createDropPlaceholder = function createDropPlaceholder(allowDropLine) {
+var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
+  var createElement = React.createElement;
 
   if (allowDropLine) {
-    ReactDOM.render( /*#__PURE__*/React.createElement(DropPlaceholder, {
+    ReactDOM.render(createElement(RawIntlProvider, {
+      value: intl
+    }, createElement(DropPlaceholder, {
       type: 'single'
-    }), dropPlaceholder);
+    })), dropPlaceholder);
   } else {
-    ReactDOM.render( /*#__PURE__*/React.createElement(DropPlaceholder), dropPlaceholder);
+    ReactDOM.render(createElement(RawIntlProvider, {
+      value: intl
+    }, createElement(DropPlaceholder)), dropPlaceholder);
   }
 
   return dropPlaceholder;
@@ -781,9 +788,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 export var getMediaPluginState = function getMediaPluginState(state) {
   return stateKey.getState(state);
 };
-export var createPlugin = function createPlugin(_schema, options, reactContext, dispatch, mediaOptions) {
-  var dropPlaceholder = createDropPlaceholder(mediaOptions && mediaOptions.allowDropzoneDropLine);
-  return new Plugin({
+export var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions) {
+  var intl = getIntl();
+  var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
+  return new SafePlugin({
     state: {
       init: function init(_config, state) {
         return new MediaPluginStateImplementation(state, options, reactContext, mediaOptions, dispatch);

package/dist/esm/plugins/media/pm-plugins/media-editor.js

@@ -1,6 +1,6 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setMediaClientConfig } from '../commands/media-editor';
 import { createPluginState, pluginKey } from './media-editor-plugin-factory'; // handle mapping changes to providers -> plugin state
 
@@ -82,7 +82,7 @@ var pluginView = function pluginView(providerFactory) {
 export var createPlugin = function createPlugin(_ref2) {
   var dispatch = _ref2.dispatch,
       providerFactory = _ref2.providerFactory;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, {}),
     key: pluginKey,
     view: pluginView(providerFactory)

package/dist/esm/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 var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch) {
   var _state$schema$nodes = state.schema.nodes,
       media = _state$schema$nodes.media,
@@ -27,6 +30,52 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(state, dis
   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 var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch) {
+  var _state$schema$nodes2 = state.schema.nodes,
+      media = _state$schema$nodes2.media,
+      mediaInline = _state$schema$nodes2.mediaInline,
+      paragraph = _state$schema$nodes2.paragraph;
+  var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  var mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  var space = state.schema.text(' ');
+  var content = Fragment.from([mediaInlineNode, space]);
+  var node = paragraph.createChecked({}, content);
+  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  var 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/esm/plugins/media/toolbar/index.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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';
@@ -27,8 +27,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';
 
 var remove = function remove(state, dispatch) {
@@ -49,41 +48,12 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
   return true;
 };
 
-var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch) {
-  var _state$schema$nodes = state.schema.nodes,
-      media = _state$schema$nodes.media,
-      mediaInline = _state$schema$nodes.mediaInline,
-      paragraph = _state$schema$nodes.paragraph;
-  var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-
-  if (!selectedNode || !selectedNode.type === media) {
-    return false;
-  }
-
-  var mediaInlineNode = mediaInline.create({
-    id: selectedNode.attrs.id,
-    collection: selectedNode.attrs.collection
-  });
-  var space = state.schema.text(' ');
-  var content = Fragment.from([mediaInlineNode, space]);
-  var node = paragraph.createChecked({}, content);
-  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
-  var tr = removeMediaGroupNode(state);
-  tr = safeInsert(node, nodePos, true)(tr);
-
-  if (dispatch) {
-    dispatch(tr);
-  }
-
-  return true;
-};
-
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState) {
   var mediaGroup = state.schema.nodes.mediaGroup;
   var 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),
@@ -147,7 +117,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   var 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),
@@ -305,11 +275,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
 export var floatingToolbar = function floatingToolbar(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _state$schema$nodes2 = state.schema.nodes,
-      media = _state$schema$nodes2.media,
-      mediaInline = _state$schema$nodes2.mediaInline,
-      mediaSingle = _state$schema$nodes2.mediaSingle,
-      mediaGroup = _state$schema$nodes2.mediaGroup;
+  var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaInline = _state$schema$nodes.mediaInline,
+      mediaSingle = _state$schema$nodes.mediaSingle,
+      mediaGroup = _state$schema$nodes.mediaGroup;
   var altTextValidator = options.altTextValidator,
       allowLinking = options.allowLinking,
       allowAltTextOnImages = options.allowAltTextOnImages,

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

@@ -8,14 +8,24 @@ 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';
 var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), hexToRgba(B400, 0.4) || B400, hexToRgba(B300, 0.6) || B300, borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
 var DropLine = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), B200, borderRadius());
+
+var IconWrapperComponent = function IconWrapperComponent(props) {
+  var intl = props.intl;
+  var dropPlaceholderLabel = dropPlaceholderMessages.dropPlaceholderLabel;
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+
+var IntlIconWrapper = injectIntl(IconWrapperComponent);
 export default (function (_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'group' : _ref$type;
-  return type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
-    label: "Document",
-    size: "medium"
-  }));
+  return type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IntlIconWrapper, null);
 });

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

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

package/dist/esm/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';
 
 var onClickMediaButton = function onClickMediaButton(pluginState) {
   return function () {
@@ -15,7 +17,8 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
       eventDispatcher = _ref.eventDispatcher,
       pluginKey = _ref.pluginKey,
       isDisabled = _ref.isDisabled,
-      isReducedSpacing = _ref.isReducedSpacing;
+      isReducedSpacing = _ref.isReducedSpacing,
+      intl = _ref.intl;
   return /*#__PURE__*/React.createElement(WithPluginState, {
     editorView: editorView,
     eventDispatcher: eventDispatcher,
@@ -29,18 +32,19 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
         return null;
       }
 
+      var toolbarMediaTitle = toolbarMediaMessages.toolbarMediaTitle;
       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/esm/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

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

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

@@ -240,7 +240,8 @@ 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
  */
 
@@ -275,11 +276,11 @@ export var unwrapNestedMediaElements = function 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/esm/plugins/mentions/messages.js

@@ -4,5 +4,15 @@ export var 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/esm/plugins/mentions/nodeviews/mention.js

@@ -13,7 +13,6 @@ import React from 'react';
 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 var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(MentionNodeView, _ReactNodeView);
 
@@ -28,10 +27,6 @@ export var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _createClass(MentionNodeView, [{
     key: "createDomRef",
     value: function createDomRef() {
-      if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-        return createMobileInlineDomRef();
-      }
-
       return _get(_getPrototypeOf(MentionNodeView.prototype), "createDomRef", this).call(this);
     }
   }, {
@@ -43,9 +38,7 @@ export var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
           id = _this$node$attrs.id,
           text = _this$node$attrs.text,
           accessLevel = _this$node$attrs.accessLevel;
-      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,
@@ -58,9 +51,10 @@ export var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
 }(ReactNodeView);
 export default function mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
   return function (node, view, getPos) {
+    var hasIntlContext = true;
     return new MentionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       options: options
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

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

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-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';
@@ -51,7 +51,7 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
     }
   };
 
-  return new Plugin({
+  return new SafePlugin({
     key: mentionPluginKey,
     state: {
       init: function init() {