@atlaskit/editor-core 154.0.0 → 155.0.0

package/dist/cjs/plugins/image-upload/pm-plugins/main.js

@@ -13,7 +13,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _clipboard = require("../../../utils/clipboard");
 
@@ -58,7 +58,7 @@ var createPlugin = function createPlugin(_ref) {
   var dispatch = _ref.dispatch,
       providerFactory = _ref.providerFactory;
   var uploadHandler;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
         return {

package/dist/cjs/plugins/jira-issue/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = exports.default = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -21,7 +23,7 @@ exports.pluginKey = pluginKey;
 var createPlugin = function createPlugin(_ref) {
   var portalProviderAPI = _ref.portalProviderAPI,
       eventDispatcher = _ref.eventDispatcher;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

package/dist/cjs/plugins/layout/pm-plugins/main.js

@@ -9,6 +9,8 @@ exports.default = exports.DEFAULT_LAYOUT = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorView = require("prosemirror-view");
@@ -89,7 +91,7 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
 };
 
 var _default = function _default(options) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
     state: {
       init: function init(_, state) {

package/dist/cjs/plugins/layout/toolbar.js

@@ -75,7 +75,8 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout) {
     testId: item.title.id,
     title: intl.formatMessage(item.title),
     onClick: (0, _actions.setPresetLayout)(item.type),
-    selected: !!currentLayout && currentLayout === item.type
+    selected: !!currentLayout && currentLayout === item.type,
+    tabIndex: null
   };
 };
 
@@ -102,7 +103,8 @@ var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSi
       onMouseEnter: (0, _decoration.hoverDecoration)(nodeType, true),
       onMouseLeave: (0, _decoration.hoverDecoration)(nodeType, false),
       onFocus: (0, _decoration.hoverDecoration)(nodeType, true),
-      onBlur: (0, _decoration.hoverDecoration)(nodeType, false)
+      onBlur: (0, _decoration.hoverDecoration)(nodeType, false),
+      tabIndex: null
     };
     var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {

package/dist/cjs/plugins/list/commands/indent-list.js

@@ -9,8 +9,6 @@ exports.indentList = indentList;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorUtils = require("prosemirror-utils");
-
 var _analytics = require("../../analytics");
 
 var _indentation = require("../utils/indentation");
@@ -41,15 +39,11 @@ function indentList() {
       return false;
     }
 
-    var _state$schema$nodes = state.schema.nodes,
-        tableCell = _state$schema$nodes.tableCell,
-        tableHeader = _state$schema$nodes.tableHeader;
-    var cell = (0, _prosemirrorUtils.findParentNodeOfType)([tableCell, tableHeader])(state.selection);
     var firstListItemSelectedAttributes = (0, _selection.getListItemAttributes)($from);
     var parentListNode = (0, _find.findFirstParentListNode)($from);
 
     if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
-      if (cell) {
+      if ((0, _selection.isInsideTableCell)(state)) {
         // dont consume tab, as table-keymap should move cursor to next cell
         return false;
       } else {

package/dist/cjs/plugins/list/commands/index.js

@@ -158,7 +158,7 @@ function toggleList(inputMethod, listType) {
       var toNode = selection.$to.node(selection.$to.depth - 2);
       var transformedFrom = listInsideSelection.type.name === 'bulletList' ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
-      if (fromNode.type.name === listType && toNode.type.name === listType) {
+      if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {
         var tr = state.tr;
         untoggleSelectedList(tr);
         (0, _analytics.addAnalytics)(state, tr, {

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

@@ -46,7 +46,8 @@ 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 !(0, _selection.isInsideTableCell)(state);
     }
 
     (0, _analytics.addAnalytics)(state, customTr, {

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

@@ -9,6 +9,8 @@ exports.pluginKey = exports.getDecorations = exports.createPlugin = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorView = require("prosemirror-view");
@@ -126,7 +128,7 @@ var createInitialState = function createInitialState(state) {
 };
 
 var createPlugin = function createPlugin(eventDispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: createPluginState(eventDispatch, createInitialState),
     key: listPluginKey,
     props: {

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

@@ -94,10 +94,16 @@ 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);
     }
 
@@ -106,7 +112,9 @@ 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/cjs/plugins/list/utils/selection.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectionContainsList = exports.resolvePositionToStartOfListItem = exports.resolvePositionToEndOfListItem = exports.numberNestedLists = exports.normalizeListItemsSelection = exports.isWrappingPossible = exports.isPosInsideParagraph = exports.isPosInsideList = exports.isInsideListItem = exports.getListItemAttributes = exports.createListNodeRange = exports.createListItemNodeRange = exports.canJoinToPreviousListItem = void 0;
+exports.selectionContainsList = exports.resolvePositionToStartOfListItem = exports.resolvePositionToEndOfListItem = exports.numberNestedLists = exports.normalizeListItemsSelection = exports.isWrappingPossible = exports.isPosInsideParagraph = exports.isPosInsideList = exports.isInsideTableCell = exports.isInsideListItem = exports.getListItemAttributes = exports.createListNodeRange = exports.createListItemNodeRange = exports.canJoinToPreviousListItem = void 0;
 
 var _prosemirrorTransform = require("prosemirror-transform");
 
@@ -62,6 +62,15 @@ var isInsideListItem = function isInsideListItem(state) {
 
 exports.isInsideListItem = isInsideListItem;
 
+var isInsideTableCell = function isInsideTableCell(state) {
+  var _state$schema$nodes = state.schema.nodes,
+      tableCell = _state$schema$nodes.tableCell,
+      tableHeader = _state$schema$nodes.tableHeader;
+  return !!(0, _prosemirrorUtils.findParentNodeOfType)([tableCell, tableHeader])(state.selection);
+};
+
+exports.isInsideTableCell = isInsideTableCell;
+
 var canJoinToPreviousListItem = function canJoinToPreviousListItem(state) {
   var $from = state.selection.$from;
   var $before = state.doc.resolve($from.pos - 1);

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

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "setMacroProvider", {
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _actions = require("./actions");
 
@@ -44,7 +44,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) { (0, _defineProperty2.default)(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; }
 
 var createPlugin = function createPlugin(dispatch, providerFactory) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
         return {

package/dist/cjs/plugins/max-content-size/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = createPlugin;
 exports.pluginKey = exports.default = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var pluginKey = new _prosemirrorState.PluginKey('maxContentSizePlugin');
@@ -17,7 +19,7 @@ function createPlugin(dispatch, maxContentSize) {
   }
 
   var maxContentSizeReached = false;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     filterTransaction: function filterTransaction(tr) {
       var result = tr.doc && tr.doc.nodeSize > maxContentSize;
 

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

@@ -111,6 +111,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,
@@ -131,7 +132,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/cjs/plugins/media/nodeviews/mediaGroup.js

@@ -51,6 +51,10 @@ var _mediaNodeUpdater = require("./mediaNodeUpdater");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("./messages");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -169,7 +173,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
               actions: [{
                 handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
                 icon: /*#__PURE__*/_react.default.createElement(_close.default, {
-                  label: "delete"
+                  label: _this.props.intl.formatMessage(_messages.messages.mediaGroupDeleteLabel)
                 })
               }]
             };
@@ -311,8 +315,10 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
   return MediaGroup;
 }(_react.default.Component);
 
-exports.default = MediaGroup;
 (0, _defineProperty2.default)(MediaGroup, "displayName", 'MediaGroup');
+var IntlMediaGroup = (0, _reactIntlNext.injectIntl)(MediaGroup);
+var _default = IntlMediaGroup;
+exports.default = _default;
 
 var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(MediaGroupNodeView, _ReactNodeView);
@@ -346,7 +352,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               return null;
             }
 
-            return /*#__PURE__*/_react.default.createElement(MediaGroup, {
+            return /*#__PURE__*/_react.default.createElement(IntlMediaGroup, {
               node: _this3.node,
               getPos: getPos,
               view: _this3.view,

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  mediaGroupDeleteLabel: {
+    id: 'fabric.editor.mediaGroupDeleteLabel',
+    defaultMessage: 'delete',
+    description: 'a label for an icon that deletes media'
+  }
+});
+exports.messages = messages;

package/dist/cjs/plugins/media/pm-plugins/alt-text/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = exports.getPluginState = exports.createPlugin = exports.createCommand = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _pluginStateFactory = require("../../../../utils/plugin-state-factory");
@@ -40,7 +42,7 @@ exports.createCommand = createCommand;
 var createPlugin = function createPlugin(_ref) {
   var dispatch = _ref.dispatch,
       providerFactory = _ref.providerFactory;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: createPluginState(dispatch, {
       isAltTextEditorOpen: false
     }),

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

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _pluginStateFactory = require("../../../../utils/plugin-state-factory");
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _reducer = _interopRequireDefault(require("./reducer"));
@@ -79,7 +81,7 @@ exports.getMediaLinkingState = getMediaLinkingState;
 exports.createMediaLinkingCommand = createMediaLinkingCommand;
 
 var _default = function _default(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: mediaLinkingPluginKey,
     state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
   });

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

@@ -29,6 +29,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorTransform = require("prosemirror-transform");
@@ -67,6 +69,8 @@ var _utils2 = require("../../../utils");
 
 var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
 
+var _reactIntlNext = require("react-intl-next");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -81,15 +85,20 @@ 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) { (0, _defineProperty2.default)(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; }
 
-var createDropPlaceholder = function createDropPlaceholder(allowDropLine) {
+var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
+  var createElement = _react.default.createElement;
 
   if (allowDropLine) {
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DropPlaceholder.default, {
+    _reactDom.default.render(createElement(_reactIntlNext.RawIntlProvider, {
+      value: intl
+    }, createElement(_DropPlaceholder.default, {
       type: 'single'
-    }), dropPlaceholder);
+    })), dropPlaceholder);
   } else {
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DropPlaceholder.default), dropPlaceholder);
+    _reactDom.default.render(createElement(_reactIntlNext.RawIntlProvider, {
+      value: intl
+    }, createElement(_DropPlaceholder.default)), dropPlaceholder);
   }
 
   return dropPlaceholder;
@@ -786,9 +795,10 @@ var getMediaPluginState = function getMediaPluginState(state) {
 
 exports.getMediaPluginState = getMediaPluginState;
 
-var createPlugin = function createPlugin(_schema, options, reactContext, dispatch, mediaOptions) {
-  var dropPlaceholder = createDropPlaceholder(mediaOptions && mediaOptions.allowDropzoneDropLine);
-  return new _prosemirrorState.Plugin({
+var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions) {
+  var intl = getIntl();
+  var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
         return new MediaPluginStateImplementation(state, options, reactContext, mediaOptions, dispatch);

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

@@ -11,7 +11,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _mediaEditor = require("../commands/media-editor");
 
@@ -96,7 +96,7 @@ var pluginView = function pluginView(providerFactory) {
 var createPlugin = function createPlugin(_ref2) {
   var dispatch = _ref2.dispatch,
       providerFactory = _ref2.providerFactory;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: (0, _mediaEditorPluginFactory.createPluginState)(dispatch, {}),
     key: _mediaEditorPluginFactory.pluginKey,
     view: pluginView(providerFactory)

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

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeInlineCard = exports.changeInlineToMediaCard = void 0;
+exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = void 0;
+
+var _prosemirrorModel = require("prosemirror-model");
 
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
+var _analytics = require("../../analytics");
+
+var _utils = require("./utils");
+
 var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch) {
   var _state$schema$nodes = state.schema.nodes,
       media = _state$schema$nodes.media,
@@ -36,6 +42,15 @@ var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch)
   tr = (0, _prosemirrorUtils.safeInsert)(group, nodePos, true)(tr);
 
   if (dispatch) {
+    (0, _analytics.addAnalytics)(state, tr, {
+      action: _analytics.ACTION.CHANGED_TYPE,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
+        previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
+      }
+    });
     dispatch(tr);
   }
 
@@ -44,6 +59,48 @@ var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch)
 
 exports.changeInlineToMediaCard = changeInlineToMediaCard;
 
+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 _prosemirrorState.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 = _prosemirrorModel.Fragment.from([mediaInlineNode, space]);
+
+  var node = paragraph.createChecked({}, content);
+  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  var tr = (0, _utils.removeMediaGroupNode)(state);
+  tr = (0, _prosemirrorUtils.safeInsert)(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    (0, _analytics.addAnalytics)(state, tr, {
+      action: _analytics.ACTION.CHANGED_TYPE,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
+        previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
+      }
+    });
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+exports.changeMediaCardToInline = changeMediaCardToInline;
+
 var removeInlineCard = function removeInlineCard(state, dispatch) {
   if ((0, _prosemirrorUtils.isNodeSelection)(state.selection)) {
     if (dispatch) {

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

@@ -55,8 +55,6 @@ var _filePreviewItem = require("./filePreviewItem");
 
 var _utils = require("./utils");
 
-var _prosemirrorModel = require("prosemirror-model");
-
 var _commands = require("./commands");
 
 var _styles = require("../nodeviews/styles");
@@ -83,49 +81,18 @@ 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 _prosemirrorState.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 = _prosemirrorModel.Fragment.from([mediaInlineNode, space]);
-
-  var node = paragraph.createChecked({}, content);
-  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
-  var tr = (0, _utils.removeMediaGroupNode)(state);
-  tr = (0, _prosemirrorUtils.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(_mediaUi.messages.displayThumbnail),
+    title: intl.formatMessage(_mediaUi.messages.changeView),
     options: [{
       id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(_messages2.messages.inline),
       selected: false,
       disabled: false,
-      onClick: changeMediaCardToInline,
+      onClick: _commands.changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       id: 'editor.media.view.switcher.thumbnail',
@@ -183,7 +150,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   var items = [{
     id: 'editor.media.view.switcher',
     type: 'dropdown',
-    title: intl.formatMessage(_messages2.messages.inline),
+    title: intl.formatMessage(_mediaUi.messages.changeView),
     options: [{
       id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(_messages2.messages.inline),
@@ -341,11 +308,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
 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/cjs/plugins/media/ui/Media/DropPlaceholder.js

@@ -21,6 +21,10 @@ var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/docum
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _dropPlaceholderMessages = require("./drop-placeholder-messages");
+
 var _media = require("../../nodeviews/mediaNodeView/media");
 
 var _templateObject, _templateObject2;
@@ -29,13 +33,21 @@ var IconWrapper = _styledComponents.default.div(_templateObject || (_templateObj
 
 var DropLine = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), _colors.B200, (0, _constants.borderRadius)());
 
+var IconWrapperComponent = function IconWrapperComponent(props) {
+  var intl = props.intl;
+  var dropPlaceholderLabel = _dropPlaceholderMessages.dropPlaceholderMessages.dropPlaceholderLabel;
+  return /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_documentFilled.default, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+
+var IntlIconWrapper = (0, _reactIntlNext.injectIntl)(IconWrapperComponent);
+
 var _default = function _default(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'group' : _ref$type;
-  return type === 'single' ? /*#__PURE__*/_react.default.createElement(DropLine, null) : /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_documentFilled.default, {
-    label: "Document",
-    size: "medium"
-  }));
+  return type === 'single' ? /*#__PURE__*/_react.default.createElement(DropLine, null) : /*#__PURE__*/_react.default.createElement(IntlIconWrapper, null);
 };
 
 exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dropPlaceholderMessages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var dropPlaceholderMessages = (0, _reactIntlNext.defineMessages)({
+  dropPlaceholderLabel: {
+    id: 'fabric.editor.dropPlaceholderLabel',
+    defaultMessage: 'Document',
+    description: 'document label for an media icon'
+  }
+});
+exports.dropPlaceholderMessages = dropPlaceholderMessages;