@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -15,7 +15,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -29,5 +29,5 @@ var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;
 exports.LAYOUT_COLUMN_PADDING = LAYOUT_COLUMN_PADDING;
-var layoutStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _editorCommon.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

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

@@ -40,17 +40,16 @@ function indentList() {
     }
 
     var firstListItemSelectedAttributes = (0, _selection.getListItemAttributes)($from);
-
-    if (firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
-      // 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;
-    }
-
     var parentListNode = (0, _find.findFirstParentListNode)($from);
 
-    if (!parentListNode) {
-      // 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 (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
+      if ((0, _selection.isInsideTableCell)(state)) {
+        // dont consume tab, as table-keymap should move cursor to next cell
+        return false;
+      } else {
+        // 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;
+      }
     }
 
     var currentListNode = parentListNode.node;

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/input-rules/index.js

@@ -17,7 +17,10 @@ function inputRulePlugin(schema, featureFlags) {
 
   if (bulletList) {
     rules.push((0, _createListInputRule.createRuleForListType)({
-      expression: /^\s*([\*\-\•]) $/,
+      // Using UTF instead of • character
+      // because of issue where product converted the
+      // character into an escaped version.
+      expression: /^\s*([\*\-\u2022]) $/,
       listType: bulletList
     }));
   }

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/ui/ToolbarLists/index.js

@@ -180,26 +180,30 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           spacing: isReducedSpacing ? 'none' : 'default',
           onClick: this.handleBulletListClick,
           selected: bulletListActive,
+          "aria-pressed": bulletListActive,
+          "aria-label": labelUnorderedList,
           disabled: bulletListDisabled || disabled,
           title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
             description: labelUnorderedList,
             keymap: _keymaps.toggleBulletList
           }),
           iconBefore: /*#__PURE__*/_react.default.createElement(_bulletList.default, {
-            label: labelUnorderedList
+            label: ""
           })
         }), /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.ORDERED_LIST,
           spacing: isReducedSpacing ? 'none' : 'default',
           onClick: this.handleOrderedListClick,
           selected: orderedListActive,
+          "aria-pressed": orderedListActive,
+          "aria-label": labelOrderedList,
           disabled: orderedListDisabled || disabled,
           title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
             description: labelOrderedList,
             keymap: _keymaps.toggleOrderedList
           }),
           iconBefore: /*#__PURE__*/_react.default.createElement(_numberList.default, {
-            label: labelOrderedList
+            label: ""
           })
         }), isSeparator && /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
       } else {
@@ -218,10 +222,14 @@ var ToolbarLists = /*#__PURE__*/function (_PureComponent) {
           isOpen: isDropdownOpen,
           onOpenChange: this.onOpenChange,
           fitHeight: 188,
-          fitWidth: 175
+          fitWidth: 175,
+          shouldUseDefaultRole: true
         }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
           spacing: isReducedSpacing ? 'none' : 'default',
           selected: bulletListActive || orderedListActive,
+          "aria-expanded": isDropdownOpen,
+          "aria-haspopup": true,
+          "aria-label": labelLists,
           disabled: disabled,
           onClick: this.handleTriggerClick,
           title: labelLists,

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/actions.js

@@ -19,7 +19,7 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _validator = require("@atlaskit/editor-common/validator");
 
 var _utils = require("../../utils");
 
@@ -155,7 +155,7 @@ var resolveMacro = function resolveMacro(macro, state, optionalAttrs) {
 
   var schema = state.schema;
 
-  var _getValidNode = (0, _editorCommon.getValidNode)(macro, schema),
+  var _getValidNode = (0, _validator.getValidNode)(macro, schema),
       type = _getValidNode.type,
       attrs = _getValidNode.attrs;
 

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/commands/helpers.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMobileUploadCompleted = exports.findMediaSingleNode = exports.findMediaNode = exports.findAllMediaSingleNodes = void 0;
+exports.updateMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMobileUploadCompleted = exports.findMediaSingleNode = exports.findMediaNode = exports.findMediaInlineNode = exports.findAllMediaSingleNodes = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -34,9 +34,30 @@ var findMediaSingleNode = function findMediaSingleNode(mediaPluginState, id) {
     return memo;
   }, null);
 };
+/**
+ * Finds the media inline node with the given id.
+ * Media Inline is inserted like a media single node into the media plugin state.
+ * However it is not of type mediaSingle.
+ *
+ * @param mediaPluginState
+ * @param id
+ * @param isMediaSingle
+ * @returns {MediaNodeWithPosHandler | null}
+ */
+
 
 exports.findMediaSingleNode = findMediaSingleNode;
 
+var findMediaInlineNode = function findMediaInlineNode(mediaPluginState, id, isMediaSingle) {
+  if (!isMediaSingle) {
+    return findMediaSingleNode(mediaPluginState, id);
+  }
+
+  return null;
+};
+
+exports.findMediaInlineNode = findMediaInlineNode;
+
 var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState, id) {
   var mediaNodes = mediaPluginState.mediaNodes;
   return mediaNodes.filter(function (nodeWithHandler) {
@@ -47,7 +68,12 @@ var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState,
 exports.findAllMediaSingleNodes = findAllMediaSingleNodes;
 
 var findMediaNode = function findMediaNode(mediaPluginState, id, isMediaSingle) {
-  var mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id];
+  var mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id]; // Should attempt to find media inline node if media single node or media group node is not found
+
+  if (!mediaNodeWithPos) {
+    return findMediaInlineNode(mediaPluginState, id, isMediaSingle);
+  }
+
   return mediaNodeWithPos;
 };
 

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

@@ -25,7 +25,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 
@@ -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);
@@ -332,7 +338,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
       var providerFactory = props.providerFactory,
           mediaOptions = props.mediaOptions;
       var getPos = this.getPos;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref2) {
@@ -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,