@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -21,7 +21,7 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _templateObject;
 
-var mediaStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s;\n    transition: box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _editorCommon.mediaSingleSharedStyle, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _colors.B200, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorSelectedBorderBoldSize, _editorSharedStyles.akEditorDeleteBorder, _mediaCard.fileCardImageViewSelectedSelector, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.fileCardImageViewSelector, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.inlinePlayerClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.newFileExperienceClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorSharedStyles.akEditorDeleteIconColor);
+var mediaStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s;\n    transition: box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _colors.B200, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorSelectedBorderBoldSize, _editorSharedStyles.akEditorDeleteBorder, _mediaCard.fileCardImageViewSelectedSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorSharedStyles.akEditorDeleteIconColor);
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

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,51 +81,24 @@ 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,
-      onClick: changeMediaCardToInline,
+      disabled: false,
+      onClick: _commands.changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
       selected: true,
+      disabled: false,
       onClick: function onClick() {
         return true;
       },
@@ -179,17 +150,21 @@ 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),
       selected: true,
+      disabled: false,
       onClick: function onClick() {
         return true;
       },
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
       selected: false,
+      disabled: false,
       onClick: _commands.changeInlineToMediaCard,
       testId: 'thumbnail-appearance'
     }]
@@ -333,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;

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 
@@ -138,7 +138,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
       var formatUnlinkText = formatMessage(_messages.linkToolbarMessages.unlink);
 
       var errorsList = _this.state.validationErrors.map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_editorCommon.ErrorMessage, {
+        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
           key: index
         }, error);
       });

package/dist/cjs/plugins/media/ui/MediaPicker/DropzoneWrapper.js

@@ -15,7 +15,7 @@ var _mediaPicker = require("@atlaskit/media-picker");
 
 var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvider"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 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; }
 
@@ -37,7 +37,7 @@ var DropzoneWrapper = function DropzoneWrapper(_ref) {
     var customDropzoneContainer = mediaState.options.customDropzoneContainer,
         handleDrag = mediaState.handleDrag;
     var editorHtmlElement = editorDomElement;
-    var scrollParent = appearance === 'full-page' && (0, _editorCommon.findOverflowScrollParent)(editorHtmlElement);
+    var scrollParent = appearance === 'full-page' && (0, _ui.findOverflowScrollParent)(editorHtmlElement);
     var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
 
     var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {

package/dist/cjs/plugins/media/ui/MediaPicker/PickerFacadeProvider.js

@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mediaPicker = require("@atlaskit/media-picker");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
 
@@ -114,7 +114,7 @@ var PickerFacadeProvider = /*#__PURE__*/function (_React$Component) {
               case 16:
                 pickerFacadeConfig = {
                   mediaClientConfig: resolvedMediaClientConfig,
-                  errorReporter: mediaState.options.errorReporter || new _editorCommon.ErrorReporter(),
+                  errorReporter: mediaState.options.errorReporter || new _utils.ErrorReporter(),
                   featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
                 };
                 /**

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

@@ -34,7 +34,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -78,7 +78,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           layout = _this$props.layout,
           state = _this$props.view.state;
-      var newPct = (0, _editorCommon.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
 
       _this.setState({
         resizedPctWidth: newPct
@@ -115,7 +115,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcColumnLeftOffset", function () {
       var offsetLeft = _this.state.offsetLeft;
-      return _this.insideInlineLike ? (0, _editorCommon.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
+      return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxWidth", function (useLayout) {
       var _this$props2 = _this.props,
@@ -164,7 +164,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           layout = _this$props3.layout,
           lineLength = _this$props3.lineLength,
           gridSize = _this$props3.gridSize;
-      var columns = (0, _editorCommon.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
+      var columns = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
 
@@ -202,7 +202,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "wrappedLayout",
     get: function get() {
-      return _editorCommon.wrappedLayouts.indexOf(this.props.layout) > -1;
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
     }
   }, {
     key: "componentDidMount",
@@ -327,7 +327,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     value: function checkLayout(oldLayout, newLayout) {
       var resizedPctWidth = this.state.resizedPctWidth;
 
-      if (_editorCommon.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+      if (_ui.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
         var layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
         this.props.updateSize(resizedPctWidth, layout);
       }

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -9,13 +9,13 @@ exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _editorCommon.MediaSingleDimensionHelper);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _ui.MediaSingleDimensionHelper);
 
 exports.Wrapper = Wrapper;
 Wrapper.displayName = 'ResizerWrapper';

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

@@ -17,6 +17,10 @@ var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButt
 
 var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
 
+var _toolbarMediaMessages = require("./toolbar-media-messages");
+
+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; }
@@ -33,7 +37,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.default.createElement(_WithPluginState.default, {
     editorView: editorView,
     eventDispatcher: eventDispatcher,
@@ -47,19 +52,21 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
         return null;
       }
 
+      var toolbarMediaTitle = _toolbarMediaMessages.toolbarMediaMessages.toolbarMediaTitle;
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.MEDIA,
         onClick: onClickMediaButton(mediaPlugin),
         disabled: isDisabled,
-        title: "Files & images",
+        title: intl.formatMessage(toolbarMediaTitle),
         spacing: isReducedSpacing ? 'none' : 'default',
         iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
-          label: "Files & images"
+          label: intl.formatMessage(toolbarMediaTitle)
         })
       });
     }
   });
 };
 
-var _default = ToolbarMedia;
+var _default = (0, _reactIntlNext.injectIntl)(ToolbarMedia);
+
 exports.default = _default;

package/dist/cjs/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolbarMediaMessages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var toolbarMediaMessages = (0, _reactIntlNext.defineMessages)({
+  toolbarMediaTitle: {
+    id: 'fabric.editor.toolbarMediaTitle',
+    defaultMessage: 'Files & images',
+    description: 'a label for an icon that describes files and images'
+  }
+});
+exports.toolbarMediaMessages = toolbarMediaMessages;

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

@@ -296,7 +296,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
  */
 
@@ -331,11 +332,11 @@ 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/cjs/plugins/media/utils/media-single.js

@@ -14,7 +14,7 @@ var _prosemirrorModel = require("prosemirror-model");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -253,7 +253,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
   } else if (layout === 'full-width') {
     return width - _editorSharedStyles.akEditorBreakoutPadding;
   } else if (calculatedPctWidth) {
-    if (_editorCommon.wrappedLayouts.indexOf(layout) > -1) {
+    if (_ui.wrappedLayouts.indexOf(layout) > -1) {
       if (calculatedResizedPctWidth) {
         if (resizedPctWidth < 50) {
           return calculatedResizedPctWidth;
@@ -276,7 +276,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
     }
 
     return Math.min(origWidth, lineLength || width);
-  } else if (layout && _editorCommon.wrappedLayouts.indexOf(layout) !== -1) {
+  } else if (layout && _ui.wrappedLayouts.indexOf(layout) !== -1) {
     var halfLineLength = Math.ceil((lineLength || width) / 2);
     return origWidth <= halfLineLength ? origWidth : halfLineLength;
   }
@@ -287,5 +287,5 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
 exports.calcMediaPxWidth = calcMediaPxWidth;
 
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
-  return pctWidth && origWidth && origHeight && Math.ceil((0, _editorCommon.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+  return pctWidth && origWidth && origHeight && Math.ceil((0, _ui.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };

package/dist/cjs/plugins/mentions/messages.js

@@ -12,6 +12,16 @@ var messages = (0, _reactIntlNext.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'
   }
 });
 exports.messages = messages;

package/dist/cjs/plugins/mentions/nodeviews/mention.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -24,18 +22,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
 
 var _nodeviews = require("../../../nodeviews");
 
-var _InlineNodeWrapper = _interopRequireWildcard(require("../../../ui/InlineNodeWrapper"));
-
-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; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -53,10 +45,6 @@ var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _createClass2.default)(MentionNodeView, [{
     key: "createDomRef",
     value: function createDomRef() {
-      if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-        return (0, _InlineNodeWrapper.createMobileInlineDomRef)();
-      }
-
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MentionNodeView.prototype), "createDomRef", this).call(this);
     }
   }, {
@@ -68,14 +56,12 @@ var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
           id = _this$node$attrs.id,
           text = _this$node$attrs.text,
           accessLevel = _this$node$attrs.accessLevel;
-      return /*#__PURE__*/_react.default.createElement(_InlineNodeWrapper.default, {
-        useInlineWrapper: options && options.useInlineWrapper
-      }, /*#__PURE__*/_react.default.createElement(_Mention.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Mention.default, {
         id: id,
         text: text,
         accessLevel: accessLevel,
         providers: providerFactory
-      }), options && options.allowZeroWidthSpaceAfter && _editorCommon.ZERO_WIDTH_SPACE);
+      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
     }
   }]);
   return MentionNodeView;
@@ -85,9 +71,10 @@ exports.MentionNodeView = MentionNodeView;
 
 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/cjs/plugins/mentions/pm-plugins/main.js

@@ -10,7 +10,7 @@ exports.setContext = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _resource = require("@atlaskit/mention/resource");
 
@@ -68,7 +68,7 @@ function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, event
     }
   };
 
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _key.mentionPluginKey,
     state: {
       init: function init() {