@atlaskit/editor-core 187.31.6 → 187.32.0

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

@@ -37,11 +37,12 @@ var _mediaInline = require("./nodeviews/mediaInline");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaSingle2 = require("./utils/media-single");
-var mediaPlugin = function mediaPlugin() {
-  var _api$dependencies, _api$dependencies$fea;
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var api = arguments.length > 1 ? arguments[1] : undefined;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
+var mediaPlugin = function mediaPlugin(_ref) {
+  var _api$featureFlags;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
+  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -51,12 +52,12 @@ var mediaPlugin = function mediaPlugin() {
       return _pluginKey.stateKey.getState(editorState) || null;
     },
     nodes: function nodes() {
-      var _ref = options || {},
-        _ref$allowMediaGroup = _ref.allowMediaGroup,
-        allowMediaGroup = _ref$allowMediaGroup === void 0 ? true : _ref$allowMediaGroup,
-        _ref$allowMediaSingle = _ref.allowMediaSingle,
-        allowMediaSingle = _ref$allowMediaSingle === void 0 ? false : _ref$allowMediaSingle,
-        mediaFeatureFlags = _ref.featureFlags;
+      var _ref2 = options || {},
+        _ref2$allowMediaGroup = _ref2.allowMediaGroup,
+        allowMediaGroup = _ref2$allowMediaGroup === void 0 ? true : _ref2$allowMediaGroup,
+        _ref2$allowMediaSingl = _ref2.allowMediaSingle,
+        allowMediaSingle = _ref2$allowMediaSingl === void 0 ? false : _ref2$allowMediaSingl,
+        mediaFeatureFlags = _ref2.featureFlags;
       var captions = (0, _mediaCommon.getMediaFeatureFlag)('captions', mediaFeatureFlags);
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
@@ -95,16 +96,16 @@ var mediaPlugin = function mediaPlugin() {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref2) {
-          var schema = _ref2.schema,
-            dispatch = _ref2.dispatch,
-            getIntl = _ref2.getIntl,
-            eventDispatcher = _ref2.eventDispatcher,
-            providerFactory = _ref2.providerFactory,
-            errorReporter = _ref2.errorReporter,
-            portalProviderAPI = _ref2.portalProviderAPI,
-            reactContext = _ref2.reactContext,
-            dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref3) {
+          var schema = _ref3.schema,
+            dispatch = _ref3.dispatch,
+            getIntl = _ref3.getIntl,
+            eventDispatcher = _ref3.eventDispatcher,
+            providerFactory = _ref3.providerFactory,
+            errorReporter = _ref3.errorReporter,
+            portalProviderAPI = _ref3.portalProviderAPI,
+            reactContext = _ref3.reactContext,
+            dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -124,15 +125,15 @@ var mediaPlugin = function mediaPlugin() {
       }, {
         name: 'mediaKeymap',
         plugin: function plugin() {
-          var _api$dependencies$ana;
-          return (0, _keymap3.default)(options, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
+          var _api$analytics;
+          return (0, _keymap3.default)(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref3) {
-            var schema = _ref3.schema;
+          plugin: function plugin(_ref4) {
+            var schema = _ref4.schema;
             return (0, _keymapMediaSingle.default)(schema);
           }
         });
@@ -144,25 +145,25 @@ 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, 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);
+          plugin: function plugin(_ref5) {
+            var _api$analytics2;
+            var schema = _ref5.schema;
+            return (0, _keymap.default)(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
           }
         });
       }
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref5) {
-            var dispatch = _ref5.dispatch;
+          plugin: function plugin(_ref6) {
+            var dispatch = _ref6.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref6) {
-            var schema = _ref6.schema;
+          plugin: function plugin(_ref7) {
+            var schema = _ref7.schema;
             return (0, _keymap2.default)(schema);
           }
         });
@@ -198,16 +199,16 @@ var mediaPlugin = function mediaPlugin() {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        appearance = _ref7.appearance;
+    contentComponent: function contentComponent(_ref8) {
+      var editorView = _ref8.editorView,
+        appearance = _ref8.appearance;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         editorView: editorView,
         plugins: {
           mediaState: _main.stateKey
         },
-        render: function render(_ref8) {
-          var mediaState = _ref8.mediaState;
+        render: function render(_ref9) {
+          var mediaState = _ref9.mediaState;
           return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
             editorDomElement: editorView.dom,
             mediaState: mediaState,
@@ -217,10 +218,10 @@ var mediaPlugin = function mediaPlugin() {
         }
       }));
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref9) {
-      var editorView = _ref9.editorView,
-        eventDispatcher = _ref9.eventDispatcher,
-        disabled = _ref9.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        eventDispatcher = _ref10.eventDispatcher,
+        disabled = _ref10.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         editorView: editorView,
         eventDispatcher: eventDispatcher,
@@ -230,8 +231,8 @@ var mediaPlugin = function mediaPlugin() {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref10) {
-        var formatMessage = _ref10.formatMessage;
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
         return [{
           id: 'media',
           title: formatMessage(_messages.messages.mediaFiles),
@@ -242,11 +243,11 @@ var mediaPlugin = function mediaPlugin() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconImages, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana3;
+            var _api$analytics3;
             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$ana3 = api.dependencies.analytics) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.actions.attachAnalyticsEvent({
+            api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
               action: _analytics.ACTION.OPENED,
               actionSubject: _analytics.ACTION_SUBJECT.PICKER,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
@@ -268,7 +269,8 @@ var mediaPlugin = function mediaPlugin() {
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
-          altTextValidator: options && options.altTextValidator
+          altTextValidator: options && options.altTextValidator,
+          fullWidthEnabled: options && options.fullWidthEnabled
         }, api);
       }
     }

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -239,7 +239,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       (_this$captionPlaceHol = _this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clickPlaceholder", function () {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$a;
       var _this$props = _this.props,
         view = _this$props.view,
         getPos = _this$props.getPos,
@@ -248,7 +248,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       if (typeof getPos === 'boolean') {
         return;
       }
-      (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(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)(getPos(), node)(view.state, view.dispatch);
+      (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(getPos(), node)(view.state, view.dispatch);
     });
     return _this;
   }

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

@@ -243,16 +243,16 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection, _pluginInjectionApi$d, _pluginInjectionApi$d2;
+        var _this$pluginInjection, _pluginInjectionApi$a;
         // 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, 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);
+        var widthPluginState = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.width.sharedState.currentState();
+        (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$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.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$d3, _pluginInjectionApi$d4;
-        (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));
+        var _pluginInjectionApi$a2;
+        (0, _mediaFiles.insertMediaInlineNode)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.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));
+        var _pluginInjectionApi$a3;
+        (0, _mediaFiles.insertMediaGroupNode)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       }
 
       // do events when media state changes

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

@@ -207,7 +207,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowResizingInTables = options.allowResizingInTables,
     allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
-  var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+  var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref.hoverDecoration;
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     toolbarButtons.push({
@@ -222,12 +222,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var borderMark = (0, _currentMediaNode.currentMediaNodeBorderMark)(state);
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
-            var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions)(state, dispatch);
+            var _pluginInjectionApi$a;
+            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
-            var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
-            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions)(attrs)(state, dispatch);
+            var _pluginInjectionApi$a2;
+            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
           showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
@@ -240,8 +240,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$d6;
-    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    var _pluginInjectionApi$a3;
+    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     var isChangingLayoutDisabled = false;
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
       var _widthPlugin$sharedSt;
@@ -254,7 +254,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       }
     }
-    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
+    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -280,7 +280,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           if (!selectedMediaNode) {
             return null;
           }
-          var widthType = selectedMediaSingleNode.node.attrs.widthType;
+          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
+            mediaSingleWidth = _selectedMediaSingleN.width,
+            widthType = _selectedMediaSingleN.widthType,
+            layout = _selectedMediaSingleN.layout;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
@@ -289,9 +292,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var isVideoFile = (0, _mediaSingle.isVideo)(selectedMediaNode.attrs.__fileMimeType);
           var minWidth = (0, _mediaSingle2.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
           var isLegacy = widthType !== 'pixel';
-          var pixelWidth = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
+          var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
           // get pos of media node
           mediaWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH);
+          var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -318,7 +322,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var width = _ref2.width;
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
                 width: width,
-                widthType: 'pixel'
+                widthType: 'pixel',
+                layout: (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled)
               }));
               tr.setMeta('scrollIntoView', false);
               tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
@@ -326,7 +331,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
-                width: pixelWidth,
+                width: pixelWidthFromElement,
                 widthType: 'pixel'
               }));
               tr.setMeta('scrollIntoView', false);
@@ -377,10 +382,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$d7;
+                var _pluginInjectionApi$a4;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -406,8 +411,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$d8;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.actions), {
+    var _pluginInjectionApi$a5;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }
@@ -438,7 +443,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   return items;
 };
 var floatingToolbar = function floatingToolbar(state, intl) {
-  var _pluginInjectionApi$d9;
+  var _pluginInjectionApi$d2;
   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,
@@ -454,7 +459,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   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 : {},
+  var _ref3 = (_pluginInjectionApi$d2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d2 !== void 0 ? _pluginInjectionApi$d2 : {},
     hoverDecoration = _ref3.hoverDecoration;
   if (!mediaPluginState) {
     return;
@@ -476,10 +481,10 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$d10;
+      var _pluginInjectionApi$f;
       return (0, _altText2.getAltTextToolbar)(baseToolbar, {
         altTextValidator: altTextValidator,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.forceFocusSelector
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector
       });
     }
   }
@@ -490,22 +495,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$d11, _pluginInjectionApi$d12;
+    var _pluginInjectionApi$a6;
     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$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);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d13, _pluginInjectionApi$d14;
+    var _pluginInjectionApi$a7;
     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$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);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

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

@@ -58,8 +58,8 @@ var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinki
               intl: intl,
               editing: editing,
               onUnlink: function onUnlink() {
-                var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-                return (0, _linking.unlink)(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)(view.state, view.dispatch, view);
+                var _pluginInjectionApi$a;
+                return (0, _linking.unlink)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
               },
               onBack: function onBack(href, meta) {
                 if (href.trim() && meta.inputMethod) {
@@ -68,14 +68,14 @@ var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinki
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
               },
               onCancel: function onCancel() {
-                var _pluginInjectionApi$d3;
+                var _pluginInjectionApi$f;
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view, true);
                 /** Focus should move to the 'Add link' button when the toolbar closes
                  * and not close the floating toolbar.
                  */
                 var tr = view.state.tr,
                   dispatch = view.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
                 dispatch(tr);
               },
               onSubmit: function onSubmit(href, meta) {

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

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.downloadMedia = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.downloadMedia = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -81,4 +83,22 @@ var getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, me
   }
   return mediaWidth;
 };
-exports.getPixelWidthOfElement = getPixelWidthOfElement;
+exports.getPixelWidthOfElement = getPixelWidthOfElement;
+var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
+  var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isWrappedLayout = _mediaSingle.wrappedLayouts.indexOf(layout) > -1;
+  if (width >= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
+    // If width is greater than or equal to full editor width
+    return 'full-width';
+  }
+  if (fullWidthMode) {
+    // If under editor full width mode
+    return isWrappedLayout ? layout : 'center';
+  }
+  if (width > contentWidth) {
+    // If width is greater than content length and not nested
+    return 'wide';
+  }
+  return isWrappedLayout && width !== contentWidth ? layout : 'center';
+};
+exports.calcNewLayout = calcNewLayout;

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

@@ -132,8 +132,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return _this.wrapper = wrapper;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
-      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3, _this$props$pluginInj4;
-      return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.dependencies) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.actions) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.displayGuideline(_this.props.view)({
+      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
+      return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(_this.props.view)({
         guidelines: guidelines
       });
     });
@@ -163,8 +163,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
-      var _this$props$pluginInj5, _this$props$pluginInj6, _this$props$pluginInj7, _this$props$pluginInj8;
-      var guidelinePluginState = (_this$props$pluginInj5 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.dependencies) === null || _this$props$pluginInj6 === void 0 ? void 0 : (_this$props$pluginInj7 = _this$props$pluginInj6.guideline) === null || _this$props$pluginInj7 === void 0 ? void 0 : (_this$props$pluginInj8 = _this$props$pluginInj7.sharedState) === null || _this$props$pluginInj8 === void 0 ? void 0 : _this$props$pluginInj8.currentState();
+      var _this$props$pluginInj4, _this$props$pluginInj5, _this$props$pluginInj6;
+      var guidelinePluginState = (_this$props$pluginInj4 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 ? void 0 : (_this$props$pluginInj5 = _this$props$pluginInj4.guideline) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.sharedState) === null || _this$props$pluginInj6 === void 0 ? void 0 : _this$props$pluginInj6.currentState();
       var _ref = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
           top: 0,
           left: 0

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

@@ -42,11 +42,11 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       isVideoFile: true
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGrid", function (visible, gridType, highlight) {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+      var _pluginInjectionApi$g, _pluginInjectionApi$g2;
       var _this$props = _this.props,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         view = _this$props.view;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGrid(view)({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g = pluginInjectionApi.grid) === null || _pluginInjectionApi$g === void 0 ? void 0 : (_pluginInjectionApi$g2 = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGrid(view)({
         visible: visible,
         gridType: gridType,
         highlight: highlight

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

@@ -30,12 +30,14 @@ var getSharedState = function getSharedState(editorState) {
   }
   return _key.mentionPluginKey.getState(editorState);
 };
-var mentionsPlugin = function mentionsPlugin(options, api) {
+var mentionsPlugin = function mentionsPlugin(_ref) {
+  var options = _ref.config,
+    api = _ref.api;
   var sessionId = (0, _uuid.default)();
   var fireEvent = function fireEvent(payload) {
-    var _api$dependencies$ana, _api$dependencies$ana2;
-    var _ref = (_api$dependencies$ana = api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.sharedState.currentState()) !== null && _api$dependencies$ana !== void 0 ? _api$dependencies$ana : {},
-      createAnalyticsEvent = _ref.createAnalyticsEvent;
+    var _api$analytics$shared, _api$analytics;
+    var _ref2 = (_api$analytics$shared = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.sharedState.currentState()) !== null && _api$analytics$shared !== void 0 ? _api$analytics$shared : {},
+      createAnalyticsEvent = _ref2.createAnalyticsEvent;
     if (!createAnalyticsEvent) {
       return;
     }
@@ -66,17 +68,17 @@ var mentionsPlugin = function mentionsPlugin(options, api) {
         }
       }];
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref2) {
-      var editorView = _ref2.editorView,
-        disabled = _ref2.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        disabled = _ref3.disabled;
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         editorView: editorView,
         plugins: {
           mentionState: _key.mentionPluginKey
         },
-        render: function render(_ref3) {
-          var _ref3$mentionState = _ref3.mentionState,
-            mentionState = _ref3$mentionState === void 0 ? {} : _ref3$mentionState;
+        render: function render(_ref4) {
+          var _ref4$mentionState = _ref4.mentionState,
+            mentionState = _ref4$mentionState === void 0 ? {} : _ref4$mentionState;
           return !mentionState.mentionProvider ? null : /*#__PURE__*/_react.default.createElement(_ToolbarMention.default, {
             editorView: editorView,
             isDisabled: disabled || (0, _utils.isTypeAheadAllowed)(editorView.state)
@@ -86,8 +88,8 @@ var mentionsPlugin = function mentionsPlugin(options, api) {
     },
     getSharedState: getSharedState,
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref5) {
+        var formatMessage = _ref5.formatMessage;
         return [{
           id: 'mention',
           title: formatMessage(_messages.messages.mention),
@@ -99,19 +101,19 @@ var mentionsPlugin = function mentionsPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconMention, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana3;
+            var _api$analytics2;
             var tr = insert(undefined);
             var pluginState = getSharedState(state);
             if (pluginState && pluginState.canInsertMention === false) {
               return false;
             }
-            api === null || api === void 0 ? void 0 : api.dependencies.typeAhead.commands.openTypeAheadAtCursor({
+            api === null || api === void 0 ? void 0 : api.typeAhead.commands.openTypeAheadAtCursor({
               triggerHandler: typeAhead,
               inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
             })({
               tr: tr
             });
-            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({
+            api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
               action: _analytics.ACTION.INVOKED,
               actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_MENTION,