@atlaskit/editor-core 154.0.0 → 155.0.0

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

@@ -1,4 +1,5 @@
-import { Plugin, TextSelection, Selection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection, Selection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { keydownHandler } from 'prosemirror-keymap';
 import { findParentNodeOfType, findSelectedNodeOfType } from 'prosemirror-utils';
@@ -68,7 +69,7 @@ const getInitialPluginState = (options, state) => {
   };
 };
 
-export default (options => new Plugin({
+export default (options => new SafePlugin({
   key: pluginKey,
   state: {
     init: (_, state) => getInitialPluginState(options, state),

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

@@ -51,7 +51,8 @@ const buildLayoutButton = (intl, item, currentLayout) => ({
   testId: item.title.id,
   title: intl.formatMessage(item.title),
   onClick: setPresetLayout(item.type),
-  selected: !!currentLayout && currentLayout === item.type
+  selected: !!currentLayout && currentLayout === item.type,
+  tabIndex: null
 });
 
 export const layoutToolbarTitle = 'Layout floating controls';
@@ -75,7 +76,8 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onMouseEnter: hoverDecoration(nodeType, true),
       onMouseLeave: hoverDecoration(nodeType, false),
       onFocus: hoverDecoration(nodeType, true),
-      onBlur: hoverDecoration(nodeType, false)
+      onBlur: hoverDecoration(nodeType, false),
+      tabIndex: null
     };
     const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {

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

@@ -1,12 +1,10 @@
-import { findParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, addAnalytics } from '../../analytics';
 import { hasValidListIndentationLevel } from '../utils/indentation';
 import { indentListItemsSelected as indentListAction } from '../actions/indent-list-items-selected';
 import { isBulletList } from '../utils/node';
 import { findFirstParentListNode } from '../utils/find';
 import { MAX_NESTED_LIST_INDENTATION } from '../types';
-import { isInsideListItem } from '../utils/selection';
-import { getListItemAttributes } from '../utils/selection';
+import { isInsideListItem, isInsideTableCell, getListItemAttributes } from '../utils/selection';
 import { getCommonListAnalyticsAttributes } from '../utils/analytics';
 export function indentList(inputMethod = INPUT_METHOD.KEYBOARD) {
   return function (state, dispatch) {
@@ -21,16 +19,11 @@ export function indentList(inputMethod = INPUT_METHOD.KEYBOARD) {
       return false;
     }
 
-    const {
-      tableCell,
-      tableHeader
-    } = state.schema.nodes;
-    const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
     const firstListItemSelectedAttributes = getListItemAttributes($from);
     const parentListNode = findFirstParentListNode($from);
 
     if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
-      if (cell) {
+      if (isInsideTableCell(state)) {
         // dont consume tab, as table-keymap should move cursor to next cell
         return false;
       } else {

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

@@ -104,7 +104,7 @@ export function toggleList(inputMethod, listType) {
       const toNode = selection.$to.node(selection.$to.depth - 2);
       const transformedFrom = listInsideSelection.type.name === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : 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) {
         let tr = state.tr;
         untoggleSelectedList(tr);
         addAnalytics(state, tr, {

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

@@ -1,5 +1,5 @@
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
-import { isInsideListItem } from '../utils/selection';
+import { isInsideListItem, isInsideTableCell } from '../utils/selection';
 import { isBulletList } from '../utils/node';
 import { findFirstParentListNode } from '../utils/find';
 import { getCommonListAnalyticsAttributes } from '../utils/analytics';
@@ -26,7 +26,8 @@ export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
 
     if (!customTr || !customTr.docChanged) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
+      // If inside table cell and can't outdent list, then let it handle by table keymap
+      return !isInsideTableCell(state);
     }
 
     addAnalytics(state, customTr, {

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

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { isWrappingPossible } from '../utils/selection';
@@ -99,7 +100,7 @@ const createInitialState = state => {
   };
 };
 
-export const createPlugin = eventDispatch => new Plugin({
+export const createPlugin = eventDispatch => new SafePlugin({
   state: createPluginState(eventDispatch, createInitialState),
   key: listPluginKey,
   props: {

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

@@ -79,10 +79,16 @@ export const joinSiblingLists = ({
 
     const index = resolvedPos.index();
     const positionPreviousNode = resolvedPos.posAtIndex(index - 1);
-    const positionCurrentNode = resolvedPos.posAtIndex(index);
+    const 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
+
+    const joinBefore = positionPreviousNode >= from || nodeBefore.type === forceListType;
 
     if (forceListType) {
-      tr.setNodeMarkup(positionPreviousNode, forceListType);
+      if (joinBefore) {
+        tr.setNodeMarkup(positionPreviousNode, forceListType);
+      }
+
       tr.setNodeMarkup(positionCurrentNode, forceListType);
     }
 
@@ -91,7 +97,9 @@ export const joinSiblingLists = ({
       tr.setNodeMarkup(positionPreviousNode, nodeType);
     }
 
-    joins.push(pos);
+    if (joinBefore) {
+      joins.push(pos);
+    }
   });
 
   if (selection.empty && rootListNode && isListNode(rootListNode)) {

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

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

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

@@ -1,8 +1,8 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setMacroProvider } from './actions';
 import { pluginKey } from './plugin-key';
 export { insertMacroFromMacroBrowser, resolveMacro, runMacroAutoConvert, setMacroProvider } from './actions';
-export const createPlugin = (dispatch, providerFactory) => new Plugin({
+export const createPlugin = (dispatch, providerFactory) => new SafePlugin({
   state: {
     init: () => ({
       macroProvider: null

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

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('maxContentSizePlugin');
 export function createPlugin(dispatch, maxContentSize) {
   if (!maxContentSize) {
@@ -6,7 +7,7 @@ export function createPlugin(dispatch, maxContentSize) {
   }
 
   let maxContentSizeReached = false;
-  return new Plugin({
+  return new SafePlugin({
     filterTransaction(tr) {
       const result = tr.doc && tr.doc.nodeSize > maxContentSize;
 

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

@@ -71,6 +71,7 @@ const mediaPlugin = options => ({
       plugin: ({
         schema,
         dispatch,
+        getIntl,
         eventDispatcher,
         providerFactory,
         errorReporter,
@@ -92,7 +93,7 @@ const 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/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -12,6 +12,8 @@ import { pluginKey as editorDisabledPluginKey } from '../../editor-disabled';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { injectIntl } from 'react-intl-next';
+import { messages } from './messages';
 
 const isMediaGroupSelectedFromProps = props => {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -29,7 +31,7 @@ const hasSelectionChanged = (oldProps, newProps) => {
   return false;
 };
 
-export default class MediaGroup extends React.Component {
+class MediaGroup extends React.Component {
   constructor(_props) {
     super(_props);
 
@@ -122,7 +124,7 @@ export default class MediaGroup extends React.Component {
               actions: [{
                 handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
                 icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-                  label: "delete"
+                  label: this.props.intl.formatMessage(messages.mediaGroupDeleteLabel)
                 })
               }]
             };
@@ -227,6 +229,9 @@ export default class MediaGroup extends React.Component {
 
 _defineProperty(MediaGroup, "displayName", 'MediaGroup');
 
+const IntlMediaGroup = injectIntl(MediaGroup);
+export default IntlMediaGroup;
+
 class MediaGroupNodeView extends ReactNodeView {
   render(props, forwardRef) {
     const {
@@ -248,7 +253,7 @@ class MediaGroupNodeView extends ReactNodeView {
             return null;
           }
 
-          return /*#__PURE__*/React.createElement(MediaGroup, {
+          return /*#__PURE__*/React.createElement(IntlMediaGroup, {
             node: this.node,
             getPos: getPos,
             view: this.view,

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

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

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

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { pluginFactory } from '../../../../utils/plugin-state-factory';
 import reducer from './reducer';
 import { pmHistoryPluginKey } from '../../../history/pm-history-types';
@@ -23,7 +24,7 @@ export const createPlugin = ({
   dispatch,
   providerFactory
 }) => {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, {
       isAltTextEditorOpen: false
     }),

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

@@ -1,5 +1,6 @@
 import { pluginFactory } from '../../../../utils/plugin-state-factory';
-import { PluginKey, Plugin, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, NodeSelection } from 'prosemirror-state';
 import reducer from './reducer';
 export const mediaLinkingPluginKey = new PluginKey('mediaLinking');
 const initialState = {
@@ -56,7 +57,7 @@ export const {
   createCommand: createMediaLinkingCommand,
   getPluginState: getMediaLinkingState
 } = mediaLinkingPluginFactory;
-export default (dispatch => new Plugin({
+export default (dispatch => new SafePlugin({
   key: mediaLinkingPluginKey,
   state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
 }));

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
@@ -21,17 +22,23 @@ import { isInEmptyLine } from '../../../utils/document';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isInListItem } from '../../../utils';
 import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
+import { RawIntlProvider } from 'react-intl-next';
 export { stateKey } from './plugin-key';
 
-const createDropPlaceholder = allowDropLine => {
+const createDropPlaceholder = (intl, allowDropLine) => {
   const dropPlaceholder = document.createElement('div');
+  const createElement = React.createElement;
 
   if (allowDropLine) {
-    ReactDOM.render( /*#__PURE__*/React.createElement(DropPlaceholder, {
+    ReactDOM.render(createElement(RawIntlProvider, {
+      value: intl
+    }, createElement(DropPlaceholder, {
       type: 'single'
-    }), dropPlaceholder);
+    })), dropPlaceholder);
   } else {
-    ReactDOM.render( /*#__PURE__*/React.createElement(DropPlaceholder), dropPlaceholder);
+    ReactDOM.render(createElement(RawIntlProvider, {
+      value: intl
+    }, createElement(DropPlaceholder)), dropPlaceholder);
   }
 
   return dropPlaceholder;
@@ -614,9 +621,10 @@ export class MediaPluginStateImplementation {
 
 }
 export const getMediaPluginState = state => stateKey.getState(state);
-export const createPlugin = (_schema, options, reactContext, dispatch, mediaOptions) => {
-  const dropPlaceholder = createDropPlaceholder(mediaOptions && mediaOptions.allowDropzoneDropLine);
-  return new Plugin({
+export const createPlugin = (_schema, options, reactContext, getIntl, dispatch, mediaOptions) => {
+  const intl = getIntl();
+  const dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
+  return new SafePlugin({
     state: {
       init(_config, state) {
         return new MediaPluginStateImplementation(state, options, reactContext, mediaOptions, dispatch);

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setMediaClientConfig } from '../commands/media-editor';
 import { createPluginState, pluginKey } from './media-editor-plugin-factory'; // handle mapping changes to providers -> plugin state
 
@@ -35,7 +35,7 @@ export const createPlugin = ({
   dispatch,
   providerFactory
 }) => {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, {}),
     key: pluginKey,
     view: pluginView(providerFactory)

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

@@ -1,5 +1,8 @@
+import { Fragment } from 'prosemirror-model';
 import { NodeSelection } from 'prosemirror-state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } from '../../analytics';
+import { removeMediaGroupNode } from './utils';
 export const changeInlineToMediaCard = (state, dispatch) => {
   const {
     media,
@@ -29,6 +32,53 @@ export const changeInlineToMediaCard = (state, dispatch) => {
   tr = safeInsert(group, nodePos, true)(tr);
 
   if (dispatch) {
+    addAnalytics(state, tr, {
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
+        previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
+      }
+    });
+    dispatch(tr);
+  }
+
+  return true;
+};
+export const changeMediaCardToInline = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  const mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  const space = state.schema.text(' ');
+  let content = Fragment.from([mediaInlineNode, space]);
+  const node = paragraph.createChecked({}, content);
+  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  let tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    addAnalytics(state, tr, {
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
+        previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
+      }
+    });
     dispatch(tr);
   }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NodeSelection } from 'prosemirror-state';
-import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -20,8 +20,7 @@ import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
-import { Fragment } from 'prosemirror-model';
-import { changeInlineToMediaCard, removeInlineCard } from './commands';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 
 const remove = (state, dispatch) => {
@@ -42,36 +41,6 @@ const handleRemoveMediaGroup = (state, dispatch) => {
   return true;
 };
 
-const changeMediaCardToInline = (state, dispatch) => {
-  const {
-    media,
-    mediaInline,
-    paragraph
-  } = state.schema.nodes;
-  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-
-  if (!selectedNode || !selectedNode.type === media) {
-    return false;
-  }
-
-  const mediaInlineNode = mediaInline.create({
-    id: selectedNode.attrs.id,
-    collection: selectedNode.attrs.collection
-  });
-  const space = state.schema.text(' ');
-  let content = Fragment.from([mediaInlineNode, space]);
-  const node = paragraph.createChecked({}, content);
-  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
-  let tr = removeMediaGroupNode(state);
-  tr = safeInsert(node, nodePos, true)(tr);
-
-  if (dispatch) {
-    dispatch(tr);
-  }
-
-  return true;
-};
-
 const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
   const {
     mediaGroup
@@ -79,7 +48,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
   const items = [{
     id: 'editor.media.view.switcher',
     type: 'dropdown',
-    title: intl.formatMessage(messages.displayThumbnail),
+    title: intl.formatMessage(messages.changeView),
     options: [{
       id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
@@ -145,7 +114,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
   const items = [{
     id: 'editor.media.view.switcher',
     type: 'dropdown',
-    title: intl.formatMessage(cardMessages.inline),
+    title: intl.formatMessage(messages.changeView),
     options: [{
       id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),

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

@@ -4,6 +4,8 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import { B400, B300, B200 } from '@atlaskit/theme/colors';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
+import { injectIntl } from 'react-intl-next';
+import { dropPlaceholderMessages } from './drop-placeholder-messages';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const IconWrapper = styled.div`
   color: ${hexToRgba(B400, 0.4) || B400};
@@ -23,9 +25,21 @@ const DropLine = styled.div`
   width: 100%;
   height: 2px;
 `;
+
+const IconWrapperComponent = props => {
+  const {
+    intl
+  } = props;
+  const {
+    dropPlaceholderLabel
+  } = dropPlaceholderMessages;
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+
+const IntlIconWrapper = injectIntl(IconWrapperComponent);
 export default (({
   type = 'group'
-}) => type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
-  label: "Document",
-  size: "medium"
-})));
+}) => type === 'single' ? /*#__PURE__*/React.createElement(DropLine, null) : /*#__PURE__*/React.createElement(IntlIconWrapper, null));

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

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

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

@@ -2,6 +2,8 @@ import React from 'react';
 import AttachmentIcon from '@atlaskit/icon/glyph/editor/attachment';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import WithPluginState from '../../../../ui/WithPluginState';
+import { toolbarMediaMessages } from './toolbar-media-messages';
+import { injectIntl } from 'react-intl-next';
 
 const onClickMediaButton = pluginState => () => {
   pluginState.showMediaPicker();
@@ -13,7 +15,8 @@ const ToolbarMedia = ({
   eventDispatcher,
   pluginKey,
   isDisabled,
-  isReducedSpacing
+  isReducedSpacing,
+  intl
 }) => /*#__PURE__*/React.createElement(WithPluginState, {
   editorView: editorView,
   eventDispatcher: eventDispatcher,
@@ -27,17 +30,20 @@ const ToolbarMedia = ({
       return null;
     }
 
+    const {
+      toolbarMediaTitle
+    } = toolbarMediaMessages;
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.MEDIA,
       onClick: onClickMediaButton(mediaPlugin),
       disabled: isDisabled,
-      title: "Files & images",
+      title: intl.formatMessage(toolbarMediaTitle),
       spacing: isReducedSpacing ? 'none' : 'default',
       iconBefore: /*#__PURE__*/React.createElement(AttachmentIcon, {
-        label: "Files & images"
+        label: intl.formatMessage(toolbarMediaTitle)
       })
     });
   }
 });
 
-export default ToolbarMedia;
+export default injectIntl(ToolbarMedia);

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

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

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

@@ -257,14 +257,15 @@ 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
  */
 
 
 export const unwrapNestedMediaElements = html => {
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  let doc = parser.parseFromString(html, 'text/html');
   const wrapper = doc.body; // Remove Google Doc's wrapper <b> el
 
   const docsWrapper = wrapper.querySelector('b[id^="docs-internal-guid-"]');
@@ -292,11 +293,11 @@ export const 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/es2019/plugins/mentions/messages.js

@@ -4,5 +4,15 @@ export const messages = defineMessages({
     id: 'fabric.editor.inviteItem.title',
     defaultMessage: '{userRole, select, admin {Invite} trusted {Invite} other {Add}} teammate to {productName}',
     description: 'Title of the invite teammate item in typeahead plugin'
+  },
+  mentionsAddLabel: {
+    id: 'fabric.editor.mentionsAddLabel',
+    defaultMessage: 'add-icon',
+    description: 'icon label to describe adding a new mention'
+  },
+  mentionsIconLabel: {
+    id: 'fabric.editor.mentionsIconLabel',
+    defaultMessage: 'Mention',
+    description: 'icon label to describe the mention icon'
   }
 });