@atlaskit/editor-core 187.19.0 → 187.20.0

package/dist/es2019/plugins/emoji/commands/insert-emoji.js

@@ -3,34 +3,38 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
-  return (state, dispatch) => {
+  return ({
+    tr
+  }) => {
+    const {
+      doc,
+      selection
+    } = tr;
     const {
       emoji
-    } = state.schema.nodes;
+    } = tr.doc.type.schema.nodes;
     if (emoji && emojiId) {
       const node = emoji.createChecked({
         ...emojiId,
         text: emojiId.fallback || emojiId.shortName
       });
-      const textNode = state.schema.text(' ');
-      if (dispatch) {
-        const fragment = Fragment.fromArray([node, textNode]);
-        const tr = safeInsert(fragment)(state.tr);
-        if (inputMethod) {
-          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
-            attributes: {
-              inputMethod
-            },
-            eventType: EVENT_TYPE.TRACK
-          })(tr);
-        }
-        dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+      const textNode = doc.type.schema.text(' ');
+      const fragment = Fragment.fromArray([node, textNode]);
+      const newTr = safeInsert(fragment)(tr);
+      if (inputMethod) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
+          attributes: {
+            inputMethod
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(newTr);
       }
-      return true;
+      newTr.setSelection(Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+      return newTr;
     }
-    return false;
+    return null;
   };
 };

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

@@ -12,6 +12,7 @@ import { IconEmoji } from '@atlaskit/editor-common/quick-insert';
 import { EmojiNodeView } from './nodeviews/emoji';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openTypeAheadAtCursor } from '../type-ahead/transforms/open-typeahead-at-cursor';
+import { insertEmoji } from './commands/insert-emoji';
 export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
   title: emoji.shortName || '',
   key: emoji.id || emoji.shortName,
@@ -54,7 +55,8 @@ const memoizedToItem = memoize(emojiToTypeaheadItem);
 export const defaultListLimit = 50;
 const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 const TRIGGER = ':';
-const emojiPlugin = (options, api) => {
+export const emojiPlugin = (options, api) => {
+  var _api$dependencies$ana9;
   const typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -175,6 +177,15 @@ const emojiPlugin = (options, api) => {
         }
       }];
     },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return emojiPluginKey.getState(editorState);
+    },
+    commands: {
+      insertEmoji: insertEmoji(api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions)
+    },
     pluginsOptions: {
       quickInsert: ({
         formatMessage
@@ -186,13 +197,13 @@ const emojiPlugin = (options, api) => {
         keyshortcut: ':',
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert, state) {
-          var _api$dependencies$ana9;
+          var _api$dependencies$ana10;
           const tr = insert(undefined);
           openTypeAheadAtCursor({
             triggerHandler: typeAhead,
             inputMethod: INPUT_METHOD.QUICK_INSERT
           })(tr);
-          api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$dependencies$ana10 = api.dependencies.analytics) === null || _api$dependencies$ana10 === void 0 ? void 0 : _api$dependencies$ana10.actions.attachAnalyticsEvent({
             action: ACTION.INVOKED,
             actionSubject: ACTION_SUBJECT.TYPEAHEAD,
             actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,
@@ -208,7 +219,6 @@ const emojiPlugin = (options, api) => {
     }
   };
 };
-export default emojiPlugin;
 
 /**
  * Actions

package/dist/es2019/plugins/index.js

@@ -6,7 +6,7 @@ export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-mark
 export { default as codeBlockPlugin } from './code-block';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as datePlugin } from './date';
-export { default as emojiPlugin } from './emoji';
+export { emojiPlugin } from './emoji';
 export { default as extensionPlugin } from './extension';
 export { default as fakeTextCursorPlugin } from './fake-text-cursor';
 export { default as helpDialogPlugin } from './help-dialog';

package/dist/es2019/plugins/insert-block/index.js

@@ -5,7 +5,6 @@ import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { isTypeAheadAllowed } from '../type-ahead/utils';
 import { pluginKey as layoutStateKey } from '../layout';
 import { insertMacroFromMacroBrowser } from '../macro';
-import { emojiPluginKey } from '../emoji';
 import WithPluginState from '../../ui/WithPluginState';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/key';
@@ -62,7 +61,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeStateKey,
             mediaState: mediaStateKey,
             macroState: macroStateKey,
-            emojiState: emojiPluginKey,
             placeholderTextState: placeholderTextStateKey,
             layoutState: layoutStateKey
           },
@@ -70,7 +68,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState,
             mediaState,
             macroState = {},
-            emojiState,
             placeholderTextState,
             layoutState
           }) => /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -90,7 +87,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeState,
             mediaState: mediaState,
             macroState: macroState,
-            emojiState: emojiState,
             placeholderTextState: placeholderTextState,
             layoutState: layoutState,
             providers: providers,
@@ -124,7 +120,6 @@ function ToolbarInsertBlockWithInjectionApi({
   blockTypeState,
   mediaState,
   macroState,
-  emojiState,
   placeholderTextState,
   layoutState,
   featureFlags
@@ -135,8 +130,9 @@ function ToolbarInsertBlockWithInjectionApi({
     dateState,
     hyperlinkState,
     imageUploadState,
-    mentionState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']);
+    mentionState,
+    emojiState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -16,8 +16,7 @@ import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands
 import { insertExpand } from '../../../expand/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { updateStatusWithAnalytics } from '../../../status/actions';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
-import { insertEmoji } from '../../../emoji/commands/insert-emoji';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from './messages';
 import { createItems } from './create-items';
 import { BlockInsertMenu } from './block-insert-menu';
@@ -283,8 +282,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
+      var _pluginInjectionApi$d8;
+      const {
+        pluginInjectionApi
+      } = this.props;
       this.props.editorView.focus();
-      insertEmoji(this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.executeCommand((_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.emoji) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       this.toggleEmojiPicker();
       return true;
     });

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

@@ -130,7 +130,10 @@ const mediaPlugin = (options = {}, api) => {
           name: 'mediaAltTextKeymap',
           plugin: ({
             schema
-          }) => keymapMediaAltTextPlugin(schema)
+          }) => {
+            var _api$dependencies$ana2;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions);
+          }
         });
       }
       if (options && options.allowLinking) {
@@ -226,11 +229,11 @@ const mediaPlugin = (options = {}, api) => {
         keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert, state) {
-          var _api$dependencies$ana2;
+          var _api$dependencies$ana3;
           const pluginState = pluginKey.getState(state);
           pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
           const tr = insert('');
-          api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$dependencies$ana3 = api.dependencies.analytics) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.actions.attachAnalyticsEvent({
             action: ACTION.OPENED,
             actionSubject: ACTION_SUBJECT.PICKER,
             actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,

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

@@ -1,8 +1,9 @@
 import { createCommand } from '.';
 import { isSelectionMediaSingleNode, getMediaNodeFromSelection } from '../../utils/media-common';
-import { ACTION_SUBJECT, EVENT_TYPE, withAnalytics, ACTION_SUBJECT_ID, ACTION } from '../../../analytics';
+import { ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, ACTION } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 const createCommandWithAnalytics = (actionType, action, transform) => {
-  return withAnalytics({
+  return editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
     action: actionType,
     actionSubject: ACTION_SUBJECT.MEDIA,
     actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,

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

@@ -1,9 +1,9 @@
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import * as keymaps from '../../../../keymaps';
 import { openMediaAltTextMenu, closeMediaAltTextMenu } from './commands';
-export default function keymapPlugin(schema) {
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
   const list = {};
-  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, openMediaAltTextMenu, list);
+  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, openMediaAltTextMenu(editorAnalyticsAPI), list);
   keymaps.bindKeymapWithCommand(keymaps.escape.common, closeMediaAltTextMenu, list);
   return keymap(list);
 }

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

@@ -16,7 +16,7 @@ import * as helpers from '../commands/helpers';
 import { updateMediaSingleNodeAttrs } from '../commands/helpers';
 import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
-import { INPUT_METHOD } from '../../analytics/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { isInEmptyLine } from '../../../utils/document';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isInListItem } from '../../../utils';
@@ -27,6 +27,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export const MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
+export const MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 const createDropPlaceholder = (intl, allowDropLine) => {
   const dropPlaceholder = document.createElement('div');
   const createElement = React.createElement;
@@ -55,6 +56,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "layout", 'center');
     _defineProperty(this, "mediaNodes", []);
     _defineProperty(this, "isResizing", false);
+    _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", () => {});
     _defineProperty(this, "onPopupToggleCallback", () => {});
@@ -170,16 +172,16 @@ export class MediaPluginStateImplementation {
         });
       }
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection;
+        var _this$pluginInjection, _pluginInjectionApi$d, _pluginInjectionApi$d2;
         // read width state right before inserting to get up-to-date and define values
         const widthPluginState = (_this$pluginInjection = this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.dependencies.width.sharedState.currentState();
-        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState);
+        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions);
       } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
-        var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-        insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
-      } else {
         var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-        insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
+        insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
+      } else {
+        var _pluginInjectionApi$d5, _pluginInjectionApi$d6;
+        insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : (_pluginInjectionApi$d6 = _pluginInjectionApi$d5.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
       }
 
       // do events when media state changes
@@ -428,6 +430,9 @@ export class MediaPluginStateImplementation {
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
   }
+  setResizingWidth(width) {
+    this.resizingWidth = width;
+  }
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
@@ -530,9 +535,13 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
       },
       apply(tr, pluginState) {
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        const resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
         }
+        if (resizingWidth) {
+          pluginState.setResizingWidth(resizingWidth);
+        }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -6,7 +6,7 @@ import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/Al
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
 const testId = 'alt-text-edit-button';
-export const altTextButton = (intl, state) => {
+export const altTextButton = (intl, state, editorAnalyticsAPI) => {
   const mediaNode = getMediaNodeFromSelection(state);
   const message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
   const title = intl.formatMessage(message);
@@ -14,7 +14,7 @@ export const altTextButton = (intl, state) => {
     title,
     id: 'editor.media.altText',
     type: 'button',
-    onClick: openMediaAltTextMenu,
+    onClick: openMediaAltTextMenu(editorAnalyticsAPI),
     showTitle: true,
     testId,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

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

@@ -25,8 +25,8 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -191,7 +191,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hover
   return items;
 };
 const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) => {
-  var _pluginInjectionApi$d7;
+  var _pluginInjectionApi$d8;
   const {
     mediaSingle
   } = state.schema.nodes;
@@ -266,6 +266,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'custom',
         fallback: [],
         render: editorView => {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
@@ -274,6 +275,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             dispatch
           } = editorView;
           const selectedMediaSingleNode = getSelectedMediaSingle(state);
+          const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
+          const containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -282,15 +285,26 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             return null;
           }
           const {
-            width: singleMediaWidth
+            width: singleMediaWidth,
+            widthType,
+            layout
           } = selectedMediaSingleNode.node.attrs;
           const {
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const pixelWidth = calcMediaSinglePixelWidth({
+            width: singleMediaWidth,
+            widthType,
+            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            layout,
+            contentWidth,
+            containerWidth,
+            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: value => {
@@ -312,11 +326,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
@@ -368,13 +380,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    toolbarButtons.push(altTextButton(intl, state), {
+    var _pluginInjectionApi$d7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions), {
       type: 'separator'
     });
   }
   const {
     hoverDecoration
-  } = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {};
+  } = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {};
   const removeButton = {
     id: 'editor.media.delete',
     type: 'button',
@@ -402,7 +415,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   return items;
 };
 export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) => {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d9;
   const {
     media,
     mediaInline,
@@ -421,8 +434,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const mediaLinkingState = getMediaLinkingState(state);
   const {
     hoverDecoration
-  } = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {};
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  } = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {};
+  if (!mediaPluginState) {
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
@@ -440,10 +453,10 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   if (allowAltTextOnImages) {
     const mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$d9;
+      var _pluginInjectionApi$d10;
       return getAltTextToolbar(baseToolbar, {
         altTextValidator,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.forceFocusSelector
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.forceFocusSelector
       });
     }
   }
@@ -454,22 +467,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d10, _pluginInjectionApi$d11;
+    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : (_pluginInjectionApi$d11 = _pluginInjectionApi$d10.analytics) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : _pluginInjectionApi$d11.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d12, _pluginInjectionApi$d13;
+    var _pluginInjectionApi$d13, _pluginInjectionApi$d14;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d12 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : (_pluginInjectionApi$d13 = _pluginInjectionApi$d12.analytics) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : _pluginInjectionApi$d13.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d13 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : (_pluginInjectionApi$d14 = _pluginInjectionApi$d13.analytics) === null || _pluginInjectionApi$d14 === void 0 ? void 0 : _pluginInjectionApi$d14.actions);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -12,9 +12,11 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
+import throttle from 'lodash/throttle';
+import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -122,7 +124,16 @@ class ResizableMediaSingleNext extends React.Component {
         dispatch
       } = this.props.view;
       const tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    _defineProperty(this, "updateSizeInPluginState", width => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const tr = state.tr;
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
@@ -167,11 +178,12 @@ class ResizableMediaSingleNext extends React.Component {
       });
       this.selectCurrentMediaNode();
       this.setIsResizing(true);
+      this.updateSizeInPluginState(this.state.size.width);
       // re-calucate guidelines
       this.guidelines = this.getAllGuidelines();
       return 0;
     });
-    _defineProperty(this, "handleResize", (size, delta) => {
+    _defineProperty(this, "handleResize", throttle((size, delta) => {
       const {
         width: originalWidth,
         height: originalHeight,
@@ -193,10 +205,11 @@ class ResizableMediaSingleNext extends React.Component {
         },
         snaps: guidelineSnaps.snaps
       });
+      this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
         width: originalWidth,

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

@@ -5,7 +5,6 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
-import { addAnalytics } from '../../analytics';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
@@ -26,7 +25,7 @@ const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
 function shouldAddParagraph(state) {
   return atTheBeginningOfBlock(state) && !checkNodeDown(state.selection, state.doc, isEmptyParagraph);
 }
-function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}) {
+function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}, editorAnalyticsAPI) {
   return function (state, dispatch) {
     const {
       tr,
@@ -46,7 +45,7 @@ function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}) {
     }
     tr.replaceSelection(new Slice(Fragment.from(nodes), 0, openEnd));
     if (inputMethod) {
-      addAnalytics(state, tr, getInsertMediaAnalytics(inputMethod, fileExtension));
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
     if (dispatch) {
       dispatch(tr);
@@ -55,7 +54,7 @@ function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}) {
   };
 }
 export const isMediaSingle = (schema, fileMimeType) => !!schema.nodes.mediaSingle && isImage(fileMimeType);
-export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
+export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalyticsAPI) => {
   const {
     state,
     dispatch
@@ -78,9 +77,9 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
     inputMethod,
     fileExtension: node.attrs.__fileMimeType
   };
-  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
+  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
 };
-export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState) => {
+export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) => {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -113,7 +112,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     insertNodesWithOptionalParagraph([node], {
       fileExtension,
       inputMethod
-    })(state, dispatch);
+    }, editorAnalyticsAPI)(state, dispatch);
   } else {
     let tr = null;
     if (newInsertionBehaviour) {
@@ -124,7 +123,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
       tr = pmSafeInsert(content, undefined, true)(state.tr);
     }
     if (inputMethod) {
-      tr = addAnalytics(state, tr, getInsertMediaAnalytics(inputMethod, fileExtension));
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
     dispatch(tr);
   }