@atlaskit/editor-core 187.19.1 → 187.20.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-core
 
+## 187.20.1
+
+### Patch Changes
+
+- [`24f092238be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24f092238be) - NO-ISSUE Switch collab type imports in editor-core to editor-common
+- [`469b5c12303`](https://bitbucket.org/atlassian/atlassian-frontend/commits/469b5c12303) - NO-ISSUE Move CollabEventLocalStepData to editor-common
+- [`c2cd174b721`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2cd174b721) - - Add layout calculation in full width editor
+  - Prevent scroll bar for wrapped layout in small viewport
+  - Limit resizing for nested node with wrapped layout
+  - Update size state for full-width layout to avoid flicker when first resizing
+- [`da58165fe10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da58165fe10) - [ux] ED-19440 - Adds dark mode icons for bullet list, numbered list, quote, status and table
+
+## 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

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/nodeviews/mediaSingle.js

@@ -24,6 +24,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
+var _mediaSingle = require("../utils/media-single");
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
@@ -39,7 +40,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
@@ -254,13 +255,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
      * Get parent width for a nested media single node
      * @param view Editor view
      * @param pos node position
-     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos, includeMoreParentNodeTypes)) {
+      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -272,6 +272,21 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       return null;
     });
+    /**
+     * Get parent width for a nested media single node for new experience
+     * @param view Editor view
+     * @param pos node position
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLengthNext", function (view, pos) {
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $pos = view.state.doc.resolve(pos);
+      if ($pos && $pos.parent.type.name !== 'doc') {
+        return (0, _mediaSingle.getParentWidthForNestedMediaSingleNode)($pos, view);
+      }
+      return null;
+    });
     return _this;
   }
   (0, _createClass2.default)(MediaSingleNode, [{
@@ -361,19 +376,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           stateWidth = _this$state.width,
           stateHeight = _this$state.height;
         if (width === null) {
-          width = stateWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
         }
         if (height === null) {
-          height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
         }
       }
       if (!width || !height) {
-        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
-        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        width = _mediaSingle2.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
       var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
+      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -383,7 +398,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
+        mediaSingleWidth: (0, _mediaSingle2.calcMediaSinglePixelWidth)({
           width: mediaSingleWidthAttribute,
           widthType: widthType,
           origWidth: width,
@@ -392,7 +407,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           // thus we use the legecy value (exclude table as container node)
           contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
-          gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+          gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
         })
       };
       var resizableMediaSingleProps = _objectSpread({
@@ -510,6 +525,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
+        domRef.classList.add('media-extended-resize-experience');
+      }
       return domRef;
     }
   }, {

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() {
@@ -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 () {});
@@ -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/styles.js

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

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

@@ -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({
@@ -406,7 +419,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   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];

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';
@@ -77,12 +79,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         layout = _this$props2.layout,
         state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
-        lineLength = _this$props2.lineLength;
+        lineLength = _this$props2.lineLength,
+        fullWidthMode = _this$props2.fullWidthMode;
       var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
@@ -98,7 +101,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         };
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -137,7 +146,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 +208,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 +233,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,
@@ -278,6 +297,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -303,6 +323,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
+        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
+        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
+        this.setState(function (prevState) {
+          return {
+            size: {
+              width: (0, _mediaSingle.calcMediaSingleMaxWidth)(_this2.props.containerWidth),
+              height: prevState.size.height
+            }
+          };
+        });
+      }
       return true;
     }
 
@@ -462,7 +494,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -479,7 +511,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this2.insideInlineLike) {
+        if (side === 'left' && _this3.insideInlineLike) {
           enable[side] = false;
         }
       });