@atlaskit/editor-core 187.10.6 → 187.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 187.11.0
+
+### Minor Changes
+
+- [`c6c3b7e43d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6c3b7e43d3) - [ED-19202] Remove direct dependency of editor-core code on text-formatting plugin
+
+### Patch Changes
+
+- Updated dependencies
+
+## 187.10.8
+
+### Patch Changes
+
+- [`7c8a9a4c0c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c8a9a4c0c1) - Update mediaSingleWidth props to render legacy media single with correct dimensions
+
 ## 187.10.6
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -344,7 +344,7 @@ Object.defineProperty(exports, "lightModeStatusColorPalette", {
 Object.defineProperty(exports, "listStateKey", {
   enumerable: true,
   get: function get() {
-    return _main3.pluginKey;
+    return _main2.pluginKey;
   }
 });
 Object.defineProperty(exports, "measurements", {
@@ -485,96 +485,6 @@ Object.defineProperty(exports, "textColorPluginKey", {
     return _textColor.textColorPluginKey;
   }
 });
-Object.defineProperty(exports, "textFormattingStateKey", {
-  enumerable: true,
-  get: function get() {
-    return _main2.pluginKey;
-  }
-});
-Object.defineProperty(exports, "toggleCode", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleCode;
-  }
-});
-Object.defineProperty(exports, "toggleCodeWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleCodeWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleEm", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleEm;
-  }
-});
-Object.defineProperty(exports, "toggleEmWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleEmWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleStrike", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleStrike;
-  }
-});
-Object.defineProperty(exports, "toggleStrikeWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleStrikeWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleStrong", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleStrong;
-  }
-});
-Object.defineProperty(exports, "toggleStrongWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleStrongWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleSubscript", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleSubscript;
-  }
-});
-Object.defineProperty(exports, "toggleSubscriptWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleSubscriptWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleSuperscript", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleSuperscript;
-  }
-});
-Object.defineProperty(exports, "toggleSuperscriptWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleSuperscriptWithAnalytics;
-  }
-});
-Object.defineProperty(exports, "toggleUnderline", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleUnderline;
-  }
-});
-Object.defineProperty(exports, "toggleUnderlineWithAnalytics", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.toggleUnderlineWithAnalytics;
-  }
-});
 Object.defineProperty(exports, "typeAheadPluginKey", {
   enumerable: true,
   get: function get() {
@@ -616,13 +526,11 @@ var _teamResource = require("@atlaskit/mention/team-resource");
 var _annotation = require("./plugins/annotation");
 var _main = require("./plugins/media/pm-plugins/main");
 var _mentions = require("./plugins/mentions");
-var _main2 = require("./plugins/text-formatting/pm-plugins/main");
 var _textColor = require("./plugins/text-color");
 var _changeColor = require("./plugins/text-color/commands/change-color");
 var _commands2 = require("./plugins/rule/commands");
 var _plugins = require("./plugins");
-var _main3 = require("./plugins/list/pm-plugins/main");
-var _textFormatting = require("./plugins/text-formatting/commands/text-formatting");
+var _main2 = require("./plugins/list/pm-plugins/main");
 var _toolbarAndPickerUpdates = require("./plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates");
 var _typeAheadUpdates = require("./plugins/view-update-subscription/subscribe/type-ahead-updates");
 var _commands3 = require("./plugins/block-type/commands");

package/dist/cjs/plugins/help-dialog/ui/index.js

@@ -24,12 +24,12 @@ var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _styles = require("./styles");
 var keymaps = _interopRequireWildcard(require("../../../keymaps"));
 var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton"));
-var _toolbarMessages = require("../../text-formatting/ui/Toolbar/toolbar-messages");
-var _messages = require("../../list/messages");
-var _messages2 = require("../../insert-block/ui/ToolbarInsertBlock/messages");
-var _messages3 = require("../../block-type/messages");
-var _messages4 = require("../../undo-redo/messages");
-var _messages5 = require("../../../ui/Alignment/messages");
+var _messages = require("@atlaskit/editor-common/messages");
+var _messages2 = require("../../list/messages");
+var _messages3 = require("../../insert-block/ui/ToolbarInsertBlock/messages");
+var _messages4 = require("../../block-type/messages");
+var _messages5 = require("../../undo-redo/messages");
+var _messages6 = require("../../../ui/Alignment/messages");
 var _commands = require("../commands");
 var _toolbar = require("../../annotation/toolbar");
 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); }
@@ -82,13 +82,13 @@ var messages = (0, _reactIntlNext.defineMessages)({
 var navigationKeymaps = function navigationKeymaps(_ref) {
   var formatMessage = _ref.formatMessage;
   return [{
-    name: formatMessage(_toolbarMessages.toolbarMessages.navigateToEditorToolbar),
+    name: formatMessage(_messages.toolbarMessages.navigateToEditorToolbar),
     type: 'navigation',
     keymap: function keymap() {
       return keymaps.navToEditorToolbar;
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.navigateToFloatingToolbar),
+    name: formatMessage(_messages.toolbarMessages.navigateToFloatingToolbar),
     type: 'navigation',
     keymap: function keymap() {
       return keymaps.navToFloatingToolbar;
@@ -98,7 +98,7 @@ var navigationKeymaps = function navigationKeymaps(_ref) {
 var formatting = function formatting(_ref2) {
   var formatMessage = _ref2.formatMessage;
   return [{
-    name: formatMessage(_toolbarMessages.toolbarMessages.bold),
+    name: formatMessage(_messages.toolbarMessages.bold),
     type: 'strong',
     keymap: function keymap() {
       return keymaps.toggleBold;
@@ -106,10 +106,10 @@ var formatting = function formatting(_ref2) {
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
         css: _styles.codeLg
-      }, "**", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.bold), "**"));
+      }, "**", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.bold), "**"));
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.italic),
+    name: formatMessage(_messages.toolbarMessages.italic),
     type: 'em',
     keymap: function keymap() {
       return keymaps.toggleItalic;
@@ -117,16 +117,16 @@ var formatting = function formatting(_ref2) {
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
         css: _styles.codeLg
-      }, "*", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.italic), "*"));
+      }, "*", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.italic), "*"));
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.underline),
+    name: formatMessage(_messages.toolbarMessages.underline),
     type: 'underline',
     keymap: function keymap() {
       return keymaps.toggleUnderline;
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.strike),
+    name: formatMessage(_messages.toolbarMessages.strike),
     type: 'strike',
     keymap: function keymap() {
       return keymaps.toggleStrikethrough;
@@ -134,22 +134,22 @@ var formatting = function formatting(_ref2) {
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
         css: _styles.codeLg
-      }, "~~", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.strike), "~~"));
+      }, "~~", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.strike), "~~"));
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.subscript),
+    name: formatMessage(_messages.toolbarMessages.subscript),
     type: 'subsup',
     keymap: function keymap() {
       return keymaps.toggleSubscript;
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.superscript),
+    name: formatMessage(_messages.toolbarMessages.superscript),
     type: 'subsup',
     keymap: function keymap() {
       return keymaps.toggleSuperscript;
     }
   }, {
-    name: formatMessage(_messages3.messages.heading1),
+    name: formatMessage(_messages4.messages.heading1),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading1;
@@ -162,7 +162,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.heading2),
+    name: formatMessage(_messages4.messages.heading2),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading2;
@@ -175,7 +175,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.heading3),
+    name: formatMessage(_messages4.messages.heading3),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading3;
@@ -188,7 +188,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.heading4),
+    name: formatMessage(_messages4.messages.heading4),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading4;
@@ -201,7 +201,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.heading5),
+    name: formatMessage(_messages4.messages.heading5),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading5;
@@ -214,7 +214,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.heading6),
+    name: formatMessage(_messages4.messages.heading6),
     type: 'heading',
     keymap: function keymap() {
       return keymaps.toggleHeading6;
@@ -227,13 +227,13 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.normal),
+    name: formatMessage(_messages4.messages.normal),
     type: 'paragraph',
     keymap: function keymap() {
       return keymaps.setNormalText;
     }
   }, {
-    name: formatMessage(_messages.messages.orderedList),
+    name: formatMessage(_messages2.messages.orderedList),
     type: 'orderedList',
     keymap: function keymap() {
       return keymaps.toggleOrderedList;
@@ -246,7 +246,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages.messages.unorderedList),
+    name: formatMessage(_messages2.messages.unorderedList),
     type: 'bulletList',
     keymap: function keymap() {
       return keymaps.toggleBulletList;
@@ -259,7 +259,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.blockquote),
+    name: formatMessage(_messages4.messages.blockquote),
     type: 'blockquote',
     keymap: function keymap() {
       return keymaps.toggleBlockQuote;
@@ -272,7 +272,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages3.messages.codeblock),
+    name: formatMessage(_messages4.messages.codeblock),
     type: 'codeBlock',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -280,7 +280,7 @@ var formatting = function formatting(_ref2) {
       }, "```"));
     }
   }, {
-    name: formatMessage(_messages2.messages.horizontalRule),
+    name: formatMessage(_messages3.messages.horizontalRule),
     type: 'rule',
     keymap: function keymap() {
       return keymaps.insertRule;
@@ -291,7 +291,7 @@ var formatting = function formatting(_ref2) {
       }, "---"));
     }
   }, {
-    name: formatMessage(_messages2.messages.link),
+    name: formatMessage(_messages3.messages.link),
     type: 'link',
     keymap: function keymap() {
       return keymaps.addLink;
@@ -299,10 +299,10 @@ var formatting = function formatting(_ref2) {
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
         css: _styles.codeLg
-      }, "[", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages2.messages.link), "](http://a.com)"));
+      }, "[", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.messages.link), "](http://a.com)"));
     }
   }, {
-    name: formatMessage(_toolbarMessages.toolbarMessages.code),
+    name: formatMessage(_messages.toolbarMessages.code),
     type: 'code',
     keymap: function keymap() {
       return keymaps.toggleCode;
@@ -310,10 +310,10 @@ var formatting = function formatting(_ref2) {
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
         css: _styles.codeLg
-      }, "`", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.code), "`"));
+      }, "`", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.code), "`"));
     }
   }, {
-    name: formatMessage(_messages2.messages.action),
+    name: formatMessage(_messages3.messages.action),
     type: 'taskItem',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -323,7 +323,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages2.messages.decision),
+    name: formatMessage(_messages3.messages.decision),
     type: 'decisionItem',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -333,7 +333,7 @@ var formatting = function formatting(_ref2) {
       }, "Space"));
     }
   }, {
-    name: formatMessage(_messages2.messages.emoji),
+    name: formatMessage(_messages3.messages.emoji),
     type: 'emoji',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -341,7 +341,7 @@ var formatting = function formatting(_ref2) {
       }, ":"));
     }
   }, {
-    name: formatMessage(_messages2.messages.mention),
+    name: formatMessage(_messages3.messages.mention),
     type: 'mention',
     autoFormatting: function autoFormatting() {
       return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
@@ -349,13 +349,13 @@ var formatting = function formatting(_ref2) {
       }, "@"));
     }
   }, {
-    name: formatMessage(_messages5.alignmentMessages.alignLeft),
+    name: formatMessage(_messages6.alignmentMessages.alignLeft),
     type: 'alignment',
     keymap: function keymap() {
       return keymaps.alignLeft;
     }
   }, {
-    name: formatMessage(_messages5.alignmentMessages.alignRight),
+    name: formatMessage(_messages6.alignmentMessages.alignRight),
     type: 'alignment'
   }];
 };
@@ -364,19 +364,19 @@ var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
 var otherFormatting = function otherFormatting(_ref3) {
   var formatMessage = _ref3.formatMessage;
   return [{
-    name: formatMessage(_toolbarMessages.toolbarMessages.clearFormatting),
+    name: formatMessage(_messages.toolbarMessages.clearFormatting),
     type: 'clearFormatting',
     keymap: function keymap() {
       return keymaps.clearFormatting;
     }
   }, {
-    name: formatMessage(_messages4.messages.undo),
+    name: formatMessage(_messages5.messages.undo),
     type: 'undo',
     keymap: function keymap() {
       return keymaps.undo;
     }
   }, {
-    name: formatMessage(_messages4.messages.redo),
+    name: formatMessage(_messages5.messages.redo),
     type: 'redo',
     keymap: function keymap() {
       return keymaps.redo;

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

@@ -11,7 +11,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _v = _interopRequireDefault(require("uuid/v4"));
-var _ui = require("@atlaskit/editor-common/ui");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _mediaClient = require("@atlaskit/media-client");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _helpers = require("../commands/helpers");
@@ -646,8 +646,8 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
               }
               return _context14.abrupt("return", {
                 id: id,
-                height: _ui.DEFAULT_IMAGE_HEIGHT,
-                width: _ui.DEFAULT_IMAGE_WIDTH
+                height: _mediaSingle.DEFAULT_IMAGE_HEIGHT,
+                width: _mediaSingle.DEFAULT_IMAGE_WIDTH
               });
             case 15:
               viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
@@ -678,8 +678,8 @@ var MediaNodeUpdater = /*#__PURE__*/function () {
             case 27:
               return _context14.abrupt("return", {
                 id: id,
-                height: imageMetadata.original.height || _ui.DEFAULT_IMAGE_HEIGHT,
-                width: imageMetadata.original.width || _ui.DEFAULT_IMAGE_WIDTH
+                height: imageMetadata.original.height || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
+                width: imageMetadata.original.width || _mediaSingle.DEFAULT_IMAGE_WIDTH
               });
             case 28:
             case "end":

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

@@ -14,7 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _ui = require("@atlaskit/editor-common/ui");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _react = _interopRequireDefault(require("react"));
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _media = _interopRequireDefault(require("./media"));
@@ -64,8 +64,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
             height = height || urlHeight;
           }
         }
-        width = width || _ui.DEFAULT_IMAGE_WIDTH;
-        height = height || _ui.DEFAULT_IMAGE_HEIGHT;
+        width = width || _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = height || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
         var maxDimensions = {
           width: "".concat(editorWidth.width, "px"),
           height: "".concat(height / width * editorWidth.width, "px")

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

@@ -352,27 +352,36 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           stateWidth = _this$state.width,
           stateHeight = _this$state.height;
         if (width === null) {
-          width = stateWidth || _ui.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         }
         if (height === null) {
-          height = stateHeight || _ui.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
         }
       }
       if (!width || !height) {
-        width = _ui.DEFAULT_IMAGE_WIDTH;
-        height = _ui.DEFAULT_IMAGE_HEIGHT;
+        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
+      var contentWidth = this.getLineLength(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
         height: height,
         containerWidth: containerWidth,
-        lineLength: this.getLineLength(view, getPos()) || lineLength,
+        lineLength: contentWidth,
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: mediaSingleWidthAttribute && (0, _mediaSingle.getMediaSinglePixelWidth)(mediaSingleWidthAttribute, lineLength, widthType)
+        mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
+          width: mediaSingleWidthAttribute,
+          widthType: widthType,
+          origWidth: width,
+          layout: layout,
+          contentWidth: contentWidth,
+          containerWidth: containerWidth,
+          gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+        })
       };
       var ResizableMediaSingleProps = _objectSpread({
         view: view,

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

@@ -137,7 +137,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
-    var initialWidth = props.mediaSingleWidth || _this.calcInitialWidth();
+    var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
       offsetLeft: calcOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
       // We default to true until we resolve the file type
@@ -164,7 +164,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         origWidth = _this$props3.width,
         contentWidth = _this$props3.lineLength,
         containerWidth = _this$props3.containerWidth;
-      return Math.max(Math.min(origWidth || _ui.DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || _editorSharedStyles.akEditorDefaultLayoutWidth), _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH);
+      return Math.max(Math.min(origWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || _editorSharedStyles.akEditorDefaultLayoutWidth), _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH);
     }
   }, {
     key: "componentDidUpdate",
@@ -187,10 +187,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         var guidelines = this.getDefaultGuidelines();
         this.displayGuideline(guidelines);
       }
-      if (prevProps.lineLength === undefined && this.props.lineLength !== undefined && this.props.mediaSingleWidth === null) {
-        // re-initalises size when lineLength becomes defined later
+      if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
+        // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
-        var initialWidth = this.calcInitialWidth();
+        var initialWidth = this.props.mediaSingleWidth;
         this.setState({
           size: {
             width: initialWidth,
@@ -224,11 +224,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getSnaps",
     value: function getSnaps() {
-      var view = this.props.view;
+      var _this$props5 = this.props,
+        view = _this$props5.view,
+        lineLength = _this$props5.lineLength;
       var dom = view.dom;
       var defaultGuidelines = this.getDefaultGuidelines();
       // disable guidelines for nested media single node
-      var dynamicGuidelines = this.isNestedNode() ? [] : (0, _guidelines.generateDynamicGuidelines)(view);
+      var dynamicGuidelines = this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength);
       var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
       var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
       var _dom$getBoundingClien = dom.getBoundingClientRect(),
@@ -415,15 +417,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props5 = this.props,
-        origWidth = _this$props5.width,
-        layout = _this$props5.layout,
-        pctWidth = _this$props5.pctWidth,
-        containerWidth = _this$props5.containerWidth,
-        fullWidthMode = _this$props5.fullWidthMode,
-        selected = _this$props5.selected,
-        children = _this$props5.children,
-        intl = _this$props5.intl;
+      var _this$props6 = this.props,
+        origWidth = _this$props6.width,
+        layout = _this$props6.layout,
+        pctWidth = _this$props6.pctWidth,
+        containerWidth = _this$props6.containerWidth,
+        fullWidthMode = _this$props6.fullWidthMode,
+        selected = _this$props6.selected,
+        children = _this$props6.children,
+        intl = _this$props6.intl;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;

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

@@ -17,14 +17,12 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _mediaCommon = require("../utils/media-common");
 var _slice = require("../../../utils/slice");
 var _analytics = require("../../analytics");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _analytics2 = require("@atlaskit/editor-common/analytics");
 var _insert = require("@atlaskit/editor-common/insert");
 var _isImage = require("./is-image");
 var _position = require("../../../utils/prosemirror/position");
 var _mediaCommon2 = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _ui = require("@atlaskit/editor-common/ui");
 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 getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
@@ -106,7 +104,9 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  var node = createMediaSingleNode(state.schema, collection, contentWidth, undefined, alignLeftOnInsert)(mediaState);
+  var node = createMediaSingleNode(state.schema, collection, contentWidth,
+  // pass undefined to use default min width
+  undefined, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -140,10 +140,7 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
   return true;
 };
 exports.insertMediaSingleNode = insertMediaSingleNode;
-var createMediaSingleNode = function createMediaSingleNode(schema, collection) {
-  var maxWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _editorSharedStyles.akEditorDefaultLayoutWidth;
-  var minWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH;
-  var alignLeftOnInsert = arguments.length > 4 ? arguments[4] : undefined;
+var createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
   return function (mediaState) {
     var id = mediaState.id,
       dimensions = mediaState.dimensions,
@@ -172,8 +169,7 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection) {
       layout: 'align-start'
     } : {};
     var extendedMediaSingleAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
-      // constrain initial width between max width (editor content width) and min width (default to 24)
-      width: Math.max(Math.min(scaledWidth || _ui.DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+      width: (0, _mediaSingle.getMediaSingleInitialWidth)(scaledWidth, maxWidth, minWidth),
       // TODO: change to use enum
       widthType: 'pixel'
     }) : mediaSingleAttrs;