@atlaskit/editor-core 187.31.7 → 187.32.1

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -22,7 +22,7 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import ScrollButtons from './ScrollButtons';
+import { ScrollButtons } from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 const ToolbarItems = /*#__PURE__*/React.memo(({
@@ -49,7 +49,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
     useSomewhatSemanticTextColorNames: false
   };
   return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
-    var _api$dependencies$con;
+    var _api$contextPanel;
     switch (item.type) {
       case 'button':
         const ButtonIcon = item.icon;
@@ -206,7 +206,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$dependencies$con = api.dependencies.contextPanel) === null || _api$dependencies$con === void 0 ? void 0 : _api$dependencies$con.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
         });
       case 'separator':
         return jsx(Separator, {
@@ -373,7 +373,7 @@ class Toolbar extends Component {
       if (table) {
         return clearHoverSelection()(state, dispatch);
       }
-      (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.dependencies.decorations.actions.removeDecoration(state, dispatch);
+      (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.decorations.actions.removeDecoration(state, dispatch);
     }
   }
   setDisableScroll(disabled) {

package/dist/es2019/plugins/help-dialog/index.js

@@ -35,7 +35,10 @@ export function createPlugin(dispatch, imageEnabled) {
     }
   });
 }
-const helpDialog = (imageUploadProviderExists = false, api) => ({
+const helpDialog = ({
+  config: imageUploadProviderExists = false,
+  api
+}) => ({
   name: 'helpDialog',
   pmPlugins() {
     return [{
@@ -46,8 +49,8 @@ const helpDialog = (imageUploadProviderExists = false, api) => ({
     }, {
       name: 'helpDialogKeymap',
       plugin: () => {
-        var _api$dependencies$ana;
-        return keymapPlugin(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 keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
       }
     }];
   },
@@ -65,10 +68,10 @@ const helpDialog = (imageUploadProviderExists = false, api) => ({
         label: ""
       }),
       action(insert) {
-        var _api$dependencies$ana2;
+        var _api$analytics2;
         const tr = insert('');
         openHelpCommand(tr);
-        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$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
           action: ACTION.HELP_OPENED,
           actionSubject: ACTION_SUBJECT.HELP,
           actionSubjectId: ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
@@ -93,7 +96,7 @@ const helpDialog = (imageUploadProviderExists = false, api) => ({
       }) => /*#__PURE__*/React.createElement(HelpDialogLoader, {
         editorView: editorView,
         isVisible: helpDialog.isVisible,
-        quickInsertEnabled: !!(api !== null && api !== void 0 && api.dependencies.quickInsert),
+        quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert),
         imageEnabled: helpDialog.imageEnabled
       })
     });

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

@@ -27,9 +27,12 @@ const toolbarSizeToButtons = toolbarSize => {
       return 0;
   }
 };
-const insertBlockPlugin = (options = {}, api) => {
-  var _api$dependencies, _api$dependencies$fea;
-  const 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()) || {};
+const insertBlockPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$featureFlags;
+  const 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: 'insertBlock',
     primaryToolbarComponent({
@@ -118,7 +121,7 @@ function ToolbarInsertBlockWithInjectionApi({
   layoutState,
   featureFlags
 }) {
-  var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+  var _pluginInjectionApi$a2, _pluginInjectionApi$i;
   const buttons = toolbarSizeToButtons(toolbarSize);
   const {
     dateState,
@@ -133,9 +136,9 @@ function ToolbarInsertBlockWithInjectionApi({
    * @param name Block name
    */
   const handleInsertBlockType = React.useCallback(name => {
-    var _pluginInjectionApi$d;
-    return insertBlockTypesWithAnalytics(name, INPUT_METHOD.TOOLBAR, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions);
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions]);
+    var _pluginInjectionApi$a;
+    return insertBlockTypesWithAnalytics(name, INPUT_METHOD.TOOLBAR, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions]);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -155,9 +158,9 @@ function ToolbarInsertBlockWithInjectionApi({
     mediaUploadsEnabled: mediaState && mediaState.allowsUploads,
     onShowMediaPicker: mediaState && mediaState.showMediaPicker,
     mediaSupported: !!mediaState,
-    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.dependencies.imageUpload),
+    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
-    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions.startUpload,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,

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

@@ -150,14 +150,14 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
     });
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+      var _pluginInjectionApi$c, _pluginInjectionApi$h;
       const {
         pluginInjectionApi
       } = this.props;
-      return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.hyperlink) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
     });
     _defineProperty(this, "insertMention", inputMethod => {
-      var _pluginInjectionApi$d4;
+      var _pluginInjectionApi$m;
       const {
         editorView,
         pluginInjectionApi
@@ -165,7 +165,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       if (!editorView) {
         return true;
       }
-      const pluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies.mention) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.sharedState.currentState();
+      const pluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mention) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.sharedState.currentState();
       if (pluginState && pluginState.canInsertMention === false) {
         return false;
       }
@@ -173,7 +173,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "insertTable", inputMethod => {
-      var _pluginInjectionApi$d5, _pluginInjectionApi$d6, _pluginInjectionApi$d7, _pluginInjectionApi$d8;
+      var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3, _pluginInjectionApi$t4;
       const {
         pluginInjectionApi,
         editorView
@@ -182,7 +182,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         state,
         dispatch
       } = editorView;
-      return (_pluginInjectionApi$d5 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.table) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : (_pluginInjectionApi$d7 = (_pluginInjectionApi$d8 = _pluginInjectionApi$d6.actions).insertTable) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.call(_pluginInjectionApi$d8, {
+      return (_pluginInjectionApi$t = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t2 = pluginInjectionApi.table) === null || _pluginInjectionApi$t2 === void 0 ? void 0 : (_pluginInjectionApi$t3 = (_pluginInjectionApi$t4 = _pluginInjectionApi$t2.actions).insertTable) === null || _pluginInjectionApi$t3 === void 0 ? void 0 : _pluginInjectionApi$t3.call(_pluginInjectionApi$t4, {
         action: ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -190,7 +190,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
           inputMethod
         },
         eventType: EVENT_TYPE.TRACK
-      })(state, dispatch)) !== null && _pluginInjectionApi$d5 !== void 0 ? _pluginInjectionApi$d5 : false;
+      })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
     });
     _defineProperty(this, "createDate", inputMethod => {
       const {
@@ -281,21 +281,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
-      var _pluginInjectionApi$d9;
+      var _pluginInjectionApi$e;
       const {
         pluginInjectionApi
       } = this.props;
       this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.core.actions.execute((_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.emoji) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       this.toggleEmojiPicker();
       return true;
     });
     _defineProperty(this, "openElementBrowser", () => {
-      var _pluginInjectionApi$d10;
+      var _pluginInjectionApi$q;
       const {
         pluginInjectionApi
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies.quickInsert) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.commands.openElementBrowserModal);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
     _defineProperty(this, "onItemActivated", ({
       item,

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

@@ -8,7 +8,10 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { pluginKey } from './pm-plugins/plugin-key';
 export { pluginKey };
-const layoutPlugin = (options = {}, api) => ({
+const layoutPlugin = ({
+  config: options = {},
+  api
+}) => ({
   name: 'layout',
   nodes() {
     return [{
@@ -34,8 +37,8 @@ const layoutPlugin = (options = {}, api) => ({
         allowSingleColumnLayout
       } = pluginKey.getState(state);
       if (pos !== null) {
-        var _api$dependencies$dec;
-        return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api === null || api === void 0 ? void 0 : (_api$dependencies$dec = api.dependencies.decorations.actions) === null || _api$dependencies$dec === void 0 ? void 0 : _api$dependencies$dec.hoverDecoration);
+        var _api$decorations$acti;
+        return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api === null || api === void 0 ? void 0 : (_api$decorations$acti = api.decorations.actions) === null || _api$decorations$acti === void 0 ? void 0 : _api$decorations$acti.hoverDecoration);
       }
       return undefined;
     },
@@ -49,9 +52,9 @@ const layoutPlugin = (options = {}, api) => ({
       priority: 1100,
       icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
       action(insert, state) {
-        var _api$dependencies$ana, _api$dependencies$ana2;
+        var _api$analytics, _api$analytics$action;
         const tr = insert(createDefaultLayoutSection(state));
-        api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : (_api$dependencies$ana2 = _api$dependencies$ana.actions) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.attachAnalyticsEvent({
+        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,
           actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,

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

@@ -19,7 +19,9 @@ export function createPlugin(dispatch, maxContentSize) {
     }
   });
 }
-const maxContentSizePlugin = maxContentSize => ({
+const maxContentSizePlugin = ({
+  config: maxContentSize
+}) => ({
   name: 'maxContentSize',
   pmPlugins() {
     return [{

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

@@ -24,9 +24,12 @@ import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
-const mediaPlugin = (options = {}, api) => {
-  var _api$dependencies, _api$dependencies$fea;
-  const 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()) || {};
+const mediaPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$featureFlags;
+  const 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(editorState) {
@@ -109,8 +112,8 @@ const mediaPlugin = (options = {}, api) => {
       }, {
         name: 'mediaKeymap',
         plugin: () => {
-          var _api$dependencies$ana;
-          return keymapPlugin(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 keymapPlugin(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) {
@@ -131,8 +134,8 @@ const mediaPlugin = (options = {}, api) => {
           plugin: ({
             schema
           }) => {
-            var _api$dependencies$ana2;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions);
+            var _api$analytics2;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
           }
         });
       }
@@ -229,11 +232,11 @@ const mediaPlugin = (options = {}, api) => {
         keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert, state) {
-          var _api$dependencies$ana3;
+          var _api$analytics3;
           const pluginState = pluginKey.getState(state);
           pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
           const tr = insert('');
-          api === null || api === void 0 ? void 0 : (_api$dependencies$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: ACTION.OPENED,
             actionSubject: ACTION_SUBJECT.PICKER,
             actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
@@ -253,7 +256,8 @@ const mediaPlugin = (options = {}, api) => {
         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/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -164,7 +164,7 @@ export default class MediaSingleNode extends Component {
       (_this$captionPlaceHol = this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
     });
     _defineProperty(this, "clickPlaceholder", () => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$a;
       const {
         view,
         getPos,
@@ -174,7 +174,7 @@ export default class MediaSingleNode extends Component {
       if (typeof getPos === 'boolean') {
         return;
       }
-      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);
+      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);
     });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {

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

@@ -172,16 +172,16 @@ export class MediaPluginStateImplementation {
         });
       }
       if (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
-        const widthPluginState = (_this$pluginInjection = this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.dependencies.width.sharedState.currentState();
-        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, 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);
+        const widthPluginState = (_this$pluginInjection = this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.width.sharedState.currentState();
+        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 (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
-        var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-        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;
+        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;
-        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;
+        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/es2019/plugins/media/toolbar/index.js

@@ -18,7 +18,7 @@ import { messages } from '@atlaskit/media-ui';
 import { cardMessages } from '@atlaskit/editor-common/messages';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout } from './utils';
 import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
@@ -206,7 +206,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   let toolbarButtons = [];
   const {
     hoverDecoration
-  } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
+  } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -222,12 +222,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         const borderMark = currentMediaNodeBorderMark(state);
         return /*#__PURE__*/React.createElement(ImageBorderItem, {
           toggleBorder: () => {
-            var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-            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;
+            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: attrs => {
-            var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
-            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;
+            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 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
   }
   if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$d6;
-    const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    var _pluginInjectionApi$a3;
+    const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     let isChangingLayoutDisabled = false;
     if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
       var _widthPlugin$sharedSt;
@@ -256,7 +256,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
       }
     }
-    const layoutButtons = 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);
+    const layoutButtons = 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 = [...toolbarButtons, ...layoutButtons];
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -285,7 +285,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             return null;
           }
           const {
-            widthType
+            width: mediaSingleWidth,
+            widthType,
+            layout
           } = selectedMediaSingleNode.node.attrs;
           const {
             width: mediaWidth,
@@ -296,9 +298,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           const isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
           const minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
           const isLegacy = widthType !== 'pixel';
-          const pixelWidth = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
+          const pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
           // get pos of media node
           mediaWidth || DEFAULT_IMAGE_WIDTH);
+          const pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
@@ -327,7 +330,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
                 ...selectedMediaSingleNode.node.attrs,
                 width,
-                widthType: 'pixel'
+                widthType: 'pixel',
+                layout: calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled)
               });
               tr.setMeta('scrollIntoView', false);
               tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
@@ -336,7 +340,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
                 ...selectedMediaSingleNode.node.attrs,
-                width: pixelWidth,
+                width: pixelWidthFromElement,
                 widthType: 'pixel'
               });
               tr.setMeta('scrollIntoView', false);
@@ -391,14 +395,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$d7;
+                var _pluginInjectionApi$a4;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                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: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -424,8 +428,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$d8;
-    toolbarButtons.push(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(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'
     });
   }
@@ -456,7 +460,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   return items;
 };
 export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) => {
-  var _pluginInjectionApi$d9;
+  var _pluginInjectionApi$d2;
   const {
     media,
     mediaInline,
@@ -475,7 +479,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const mediaLinkingState = getMediaLinkingState(state);
   const {
     hoverDecoration
-  } = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {};
+  } = (_pluginInjectionApi$d2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d2 !== void 0 ? _pluginInjectionApi$d2 : {};
   if (!mediaPluginState) {
     return;
   }
@@ -494,10 +498,10 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   if (allowAltTextOnImages) {
     const mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$d10;
+      var _pluginInjectionApi$f;
       return getAltTextToolbar(baseToolbar, {
         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
       });
     }
   }
@@ -508,22 +512,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
+    var _pluginInjectionApi$a6;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$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 = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$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 = () => {
       var _mediaPluginState$ele3;

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

@@ -56,8 +56,8 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
               intl: intl,
               editing: editing,
               onUnlink: () => {
-                var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-                return 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 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: (href, meta) => {
                 if (href.trim() && meta.inputMethod) {
@@ -66,7 +66,7 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },
               onCancel: () => {
-                var _pluginInjectionApi$d3;
+                var _pluginInjectionApi$f;
                 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.
@@ -77,7 +77,7 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                   },
                   dispatch
                 } = view;
-                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: (href, meta) => {

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

@@ -1,5 +1,7 @@
 import { getMediaClient } from '@atlaskit/media-client';
 import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -53,4 +55,20 @@ export const getPixelWidthOfElement = (editorView, pos, mediaWidth) => {
     return domNode.offsetWidth;
   }
   return mediaWidth;
+};
+export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false) => {
+  const isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+  if (width >= 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';
 };