@atlaskit/editor-core 187.19.0 → 187.20.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-core
 
+## 187.20.0
+
+### Minor Changes
+
+- [`644c7942b34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/644c7942b34) - [ux] support updating pixel entry in media toolbar when resize media single
+- [`43c51e0a282`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43c51e0a282) - [ED-19431] Migrate all text-formatting plugin actions over to plugin commands
+- [`a867b562d62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a867b562d62) - Add insertEmoji command and sharedState to emoji plugin.
+
+### Patch Changes
+
+- [`8375e041861`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8375e041861) - [ED-16733] Extract common functions used by media plugin to editor-common
+- Updated dependencies
+
+## 187.19.1
+
+### Patch Changes
+
+- [`f284dd4d761`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f284dd4d761) - updated withAnalytics usage to new EditorAnalyticsAPI
+- [`442d9be406d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/442d9be406d) - [ux] [ED-19027] Fixed gap cursor for nodes with fixed width
+
 ## 187.19.0
 
 ### Minor Changes

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

@@ -14,32 +14,33 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
   return function (emojiId, inputMethod) {
-    return function (state, dispatch) {
-      var emoji = state.schema.nodes.emoji;
+    return function (_ref) {
+      var tr = _ref.tr;
+      var doc = tr.doc,
+        selection = tr.selection;
+      var emoji = tr.doc.type.schema.nodes.emoji;
       if (emoji && emojiId) {
         var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
           text: emojiId.fallback || emojiId.shortName
         }));
-        var textNode = state.schema.text(' ');
-        if (dispatch) {
-          var fragment = _model.Fragment.fromArray([node, textNode]);
-          var tr = (0, _utils.safeInsert)(fragment)(state.tr);
-          if (inputMethod) {
-            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-              action: _analytics.ACTION.INSERTED,
-              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-              actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
-              attributes: {
-                inputMethod: inputMethod
-              },
-              eventType: _analytics.EVENT_TYPE.TRACK
-            })(tr);
-          }
-          dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        var textNode = doc.type.schema.text(' ');
+        var fragment = _model.Fragment.fromArray([node, textNode]);
+        var newTr = (0, _utils.safeInsert)(fragment)(tr);
+        if (inputMethod) {
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+            action: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: _analytics.EVENT_TYPE.TRACK
+          })(newTr);
         }
-        return true;
+        newTr.setSelection(_state.Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+        return newTr;
       }
-      return false;
+      return null;
     };
   };
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 exports.createEmojiPlugin = createEmojiPlugin;
-exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.defaultListLimit = exports.default = void 0;
+exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.emojiPlugin = exports.defaultListLimit = void 0;
 exports.getEmojiPluginState = getEmojiPluginState;
 exports.memoize = memoize;
 exports.setProvider = void 0;
@@ -25,6 +25,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _emoji3 = require("./nodeviews/emoji");
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _openTypeaheadAtCursor = require("../type-ahead/transforms/open-typeahead-at-cursor");
+var _insertEmoji = require("./commands/insert-emoji");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
@@ -75,6 +76,7 @@ var isFullShortName = function isFullShortName(query) {
 };
 var TRIGGER = ':';
 var emojiPlugin = function emojiPlugin(options, api) {
+  var _api$dependencies$ana9;
   var typeAhead = {
     id: _typeAhead.TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -196,6 +198,15 @@ var emojiPlugin = function emojiPlugin(options, api) {
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return emojiPluginKey.getState(editorState);
+    },
+    commands: {
+      insertEmoji: (0, _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: function quickInsert(_ref7) {
         var formatMessage = _ref7.formatMessage;
@@ -209,13 +220,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana9;
+            var _api$dependencies$ana10;
             var tr = insert(undefined);
             (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
               triggerHandler: typeAhead,
               inputMethod: _analytics.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: _analytics.ACTION.INVOKED,
               actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,
@@ -232,11 +243,11 @@ var emojiPlugin = function emojiPlugin(options, api) {
     }
   };
 };
-var _default = emojiPlugin;
+
 /**
  * Actions
  */
-exports.default = _default;
+exports.emojiPlugin = emojiPlugin;
 var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
   SET_RESULTS: 'SET_RESULTS',

package/dist/cjs/plugins/index.js

@@ -134,7 +134,7 @@ Object.defineProperty(exports, "datePlugin", {
 Object.defineProperty(exports, "emojiPlugin", {
   enumerable: true,
   get: function get() {
-    return _emoji.default;
+    return _emoji.emojiPlugin;
   }
 });
 Object.defineProperty(exports, "expandPlugin", {
@@ -378,7 +378,7 @@ var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("./clear
 var _codeBlock = _interopRequireDefault(require("./code-block"));
 var _collabEdit = _interopRequireDefault(require("./collab-edit"));
 var _date = _interopRequireDefault(require("./date"));
-var _emoji = _interopRequireDefault(require("./emoji"));
+var _emoji = require("./emoji");
 var _extension = _interopRequireDefault(require("./extension"));
 var _fakeTextCursor = _interopRequireDefault(require("./fake-text-cursor"));
 var _helpDialog = _interopRequireDefault(require("./help-dialog"));

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

@@ -12,7 +12,6 @@ var _pluginKey = require("../media/pm-plugins/plugin-key");
 var _utils = require("../type-ahead/utils");
 var _layout = require("../layout");
 var _macro = require("../macro");
-var _emoji = require("../emoji");
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _key = require("../type-ahead/pm-plugins/key");
@@ -72,7 +71,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
             blockTypeState: _main.pluginKey,
             mediaState: _pluginKey.stateKey,
             macroState: _pluginKey3.pluginKey,
-            emojiState: _emoji.emojiPluginKey,
             placeholderTextState: _pluginKey2.pluginKey,
             layoutState: _layout.pluginKey
           },
@@ -81,7 +79,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               mediaState = _ref2.mediaState,
               _ref2$macroState = _ref2.macroState,
               macroState = _ref2$macroState === void 0 ? {} : _ref2$macroState,
-              emojiState = _ref2.emojiState,
               placeholderTextState = _ref2.placeholderTextState,
               layoutState = _ref2.layoutState;
             return /*#__PURE__*/_react.default.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -101,7 +98,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               blockTypeState: blockTypeState,
               mediaState: mediaState,
               macroState: macroState,
-              emojiState: emojiState,
               placeholderTextState: placeholderTextState,
               layoutState: layoutState,
               providers: providers,
@@ -137,16 +133,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     blockTypeState = _ref3.blockTypeState,
     mediaState = _ref3.mediaState,
     macroState = _ref3.macroState,
-    emojiState = _ref3.emojiState,
     placeholderTextState = _ref3.placeholderTextState,
     layoutState = _ref3.layoutState,
     featureFlags = _ref3.featureFlags;
   var buttons = toolbarSizeToButtons(toolbarSize);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
-    mentionState = _useSharedPluginState.mentionState;
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState;
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

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

@@ -29,8 +29,7 @@ var _commands2 = require("../../../tasks-and-decisions/commands");
 var _commands3 = require("../../../expand/commands");
 var _api = require("../../../type-ahead/api");
 var _actions4 = require("../../../status/actions");
-var _analytics = require("../../../analytics");
-var _insertEmoji = require("../../../emoji/commands/insert-emoji");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("./messages");
 var _createItems3 = require("./create-items");
 var _blockInsertMenu = require("./block-insert-menu");
@@ -282,8 +281,10 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
+      var _pluginInjectionApi$d8;
+      var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      (0, _insertEmoji.insertEmoji)(_this.editorAnalyticsAPI)(emojiId, _analytics.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, _analytics.INPUT_METHOD.PICKER));
       _this.toggleEmojiPicker();
       return true;
     });

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

@@ -145,8 +145,9 @@ var mediaPlugin = function mediaPlugin() {
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
           plugin: function plugin(_ref4) {
+            var _api$dependencies$ana2;
             var schema = _ref4.schema;
-            return (0, _keymap.default)(schema);
+            return (0, _keymap.default)(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);
           }
         });
       }
@@ -241,11 +242,11 @@ var mediaPlugin = function mediaPlugin() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconImages, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana2;
+            var _api$dependencies$ana3;
             var pluginState = _main.stateKey.getState(state);
             pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
             var 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: _analytics.ACTION.OPENED,
               actionSubject: _analytics.ACTION_SUBJECT.PICKER,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,

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

@@ -8,16 +8,19 @@ exports.updateAltText = exports.openMediaAltTextMenu = exports.closeMediaAltText
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ = require(".");
 var _mediaCommon = require("../../utils/media-common");
-var _analytics = require("../../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
-  return (0, _analytics.withAnalytics)({
-    action: actionType,
-    actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
-    eventType: _analytics.EVENT_TYPE.TRACK
-  })((0, _.createCommand)(action, transform));
+  return function (editorAnalyticsAPI) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: actionType,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })((0, _.createCommand)(action, transform));
+  };
 };
 var closeMediaAltTextMenu = (0, _.createCommand)(function (state) {
   if ((0, _mediaCommon.isSelectionMediaSingleNode)(state)) {

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

@@ -10,9 +10,9 @@ var keymaps = _interopRequireWildcard(require("../../../../keymaps"));
 var _commands = require("./commands");
 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 keymapPlugin(schema) {
+function keymapPlugin(schema, editorAnalyticsAPI) {
   var list = {};
-  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, _commands.openMediaAltTextMenu, list);
+  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI), list);
   keymaps.bindKeymapWithCommand(keymaps.escape.common, _commands.closeMediaAltTextMenu, list);
   return (0, _keymap.keymap)(list);
 }

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaPluginState = exports.createPlugin = exports.MediaPluginStateImplementation = exports.MEDIA_PLUGIN_IS_RESIZING_KEY = exports.MEDIA_CONTENT_WRAP_CLASS_NAME = void 0;
+exports.getMediaPluginState = exports.createPlugin = exports.MediaPluginStateImplementation = exports.MEDIA_PLUGIN_RESIZING_WIDTH_KEY = exports.MEDIA_PLUGIN_IS_RESIZING_KEY = exports.MEDIA_CONTENT_WRAP_CLASS_NAME = void 0;
 Object.defineProperty(exports, "stateKey", {
   enumerable: true,
   get: function get() {
@@ -33,7 +33,7 @@ var _mediaCommon = require("../utils/media-common");
 var helpers = _interopRequireWildcard(require("../commands/helpers"));
 var _pluginKey = require("./plugin-key");
 var _pickerFacade = _interopRequireDefault(require("../picker-facade"));
-var _types = require("../../analytics/types");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _document = require("../../../utils/document");
 var _mediaCommon2 = require("@atlaskit/media-common");
 var _utils3 = require("../../../utils");
@@ -52,6 +52,8 @@ var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 exports.MEDIA_CONTENT_WRAP_CLASS_NAME = MEDIA_CONTENT_WRAP_CLASS_NAME;
 var MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
 exports.MEDIA_PLUGIN_IS_RESIZING_KEY = MEDIA_PLUGIN_IS_RESIZING_KEY;
+var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
+exports.MEDIA_PLUGIN_RESIZING_WIDTH_KEY = MEDIA_PLUGIN_RESIZING_WIDTH_KEY;
 var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
   var createElement = _react.default.createElement;
@@ -82,6 +84,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "layout", 'center');
     (0, _defineProperty2.default)(this, "mediaNodes", []);
     (0, _defineProperty2.default)(this, "isResizing", false);
+    (0, _defineProperty2.default)(this, "resizingWidth", 0);
     (0, _defineProperty2.default)(this, "destroyed", false);
     (0, _defineProperty2.default)(this, "removeOnCloseListener", function () {});
     (0, _defineProperty2.default)(this, "onPopupToggleCallback", function () {});
@@ -240,16 +243,16 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if ((0, _mediaSingle.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
         var widthPluginState = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.dependencies.width.sharedState.currentState();
-        (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState);
+        (0, _mediaSingle.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 ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils3.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
-        var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-        (0, _mediaFiles.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;
-        (0, _mediaFiles.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));
+        (0, _mediaFiles.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;
+        (0, _mediaFiles.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
@@ -409,9 +412,9 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "getInputMethod", function (pickerType) {
       switch (pickerType) {
         case 'clipboard':
-          return _types.INPUT_METHOD.CLIPBOARD;
+          return _analytics.INPUT_METHOD.CLIPBOARD;
         case 'dropzone':
-          return _types.INPUT_METHOD.DRAG_AND_DROP;
+          return _analytics.INPUT_METHOD.DRAG_AND_DROP;
       }
       return;
     });
@@ -501,6 +504,11 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function setIsResizing(isResizing) {
       this.isResizing = isResizing;
     }
+  }, {
+    key: "setResizingWidth",
+    value: function setResizingWidth(width) {
+      this.resizingWidth = width;
+    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -644,9 +652,13 @@ var createPlugin = function createPlugin(_schema, options, reactContext, getIntl
       },
       apply: function apply(tr, pluginState) {
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        var 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/cjs/plugins/media/toolbar/alt-text.js

@@ -19,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var testId = 'alt-text-edit-button';
-var altTextButton = function altTextButton(intl, state) {
+var altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
   var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(state);
   var message = mediaNode && mediaNode.attrs.alt ? _messages.messages.editAltText : _messages.messages.altText;
   var title = intl.formatMessage(message);
@@ -27,7 +27,7 @@ var altTextButton = function altTextButton(intl, state) {
     title: title,
     id: 'editor.media.altText',
     type: 'button',
-    onClick: _commands.openMediaAltTextMenu,
+    onClick: (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI),
     showTitle: true,
     testId: testId,
     tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {

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

@@ -198,7 +198,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
-  var _pluginInjectionApi$d7;
+  var _pluginInjectionApi$d8;
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -265,12 +265,15 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
           var state = editorView.state,
             dispatch = editorView.dispatch;
           var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+          var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
+          var containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -278,13 +281,25 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           if (!selectedMediaNode) {
             return null;
           }
-          var singleMediaWidth = selectedMediaSingleNode.node.attrs.width;
+          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
+            singleMediaWidth = _selectedMediaSingleN.width,
+            widthType = _selectedMediaSingleN.widthType,
+            layout = _selectedMediaSingleN.layout;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var pixelWidth = (0, _mediaSingle.calcMediaSinglePixelWidth)({
+            width: singleMediaWidth,
+            widthType: widthType,
+            origWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
+            layout: layout,
+            contentWidth: contentWidth,
+            containerWidth: containerWidth,
+            gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -304,11 +319,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && (0, _linking.shouldShowMediaLinkToolbar)(state)) {
       toolbarButtons.push({
@@ -354,11 +367,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state), {
+    var _pluginInjectionApi$d7;
+    toolbarButtons.push((0, _altText2.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'
     });
   }
-  var _ref2 = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
+  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
     hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
@@ -387,7 +401,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   return items;
 };
 var floatingToolbar = function floatingToolbar(state, intl) {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d9;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
   var _state$schema$nodes = state.schema.nodes,
@@ -403,9 +417,9 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref3 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
+  var _ref3 = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {},
     hoverDecoration = _ref3.hoverDecoration;
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  if (!mediaPluginState) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
@@ -425,10 +439,10 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$d9;
+      var _pluginInjectionApi$d10;
       return (0, _altText2.getAltTextToolbar)(baseToolbar, {
         altTextValidator: 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
       });
     }
   }
@@ -439,22 +453,22 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     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;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.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 = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.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 = function () {
       var _mediaPluginState$ele3;

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

@@ -30,6 +30,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _main = require("../../pm-plugins/main");
 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; } } /** @jsx jsx */
 var resizerNextTestId = 'mediaSingle.resizerNext.testid';
@@ -137,7 +139,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         state = _this$props$view.state,
         dispatch = _this$props$view.dispatch;
       var tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSizeInPluginState", function (width) {
+      var _this$props$view2 = _this.props.view,
+        state = _this$props$view2.state,
+        dispatch = _this$props$view2.dispatch;
+      var tr = state.tr;
+      tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
@@ -191,11 +201,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       });
       _this.selectCurrentMediaNode();
       _this.setIsResizing(true);
+      _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
       _this.guidelines = _this.getAllGuidelines();
       return 0;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", (0, _throttle.default)(function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -215,10 +226,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         },
         snaps: guidelineSnaps.snaps
       });
+      _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,