@atlaskit/editor-core 187.10.6 → 187.10.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 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/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;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.10.6";
+var version = "187.10.8";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.10.6",
+	"version": "187.10.8",
 	"sideEffects": false
 }

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getMediaClient, isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { replaceExternalMedia, updateAllMediaSingleNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaSingleNodeAttrs } from '../commands/helpers';

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import React from 'react';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import MediaNode from './media';

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
@@ -22,7 +22,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -270,16 +270,25 @@ export default class MediaSingleNode extends Component {
       height = DEFAULT_IMAGE_HEIGHT;
     }
     const isSelected = selected();
+    const contentWidth = this.getLineLength(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,
       height,
       containerWidth: containerWidth,
-      lineLength: this.getLineLength(view, getPos()) || lineLength,
+      lineLength: contentWidth,
       pctWidth: mediaSingleWidthAttribute,
       fullWidthMode,
       hasFallbackContainer: false,
-      mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+      mediaSingleWidth: calcMediaSinglePixelWidth({
+        width: mediaSingleWidthAttribute,
+        widthType,
+        origWidth: width,
+        layout,
+        contentWidth,
+        containerWidth,
+        gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+      })
     };
     const ResizableMediaSingleProps = {
       view: view,

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
@@ -15,9 +15,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { generateDefaultGuidelines, generateDynamicGuidelines } from './guidelines';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
+import { generateDefaultGuidelines } from './guidelines';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
   if (wrapper && insideInlineLike && !insideLayout) {
@@ -119,7 +119,7 @@ class ResizableMediaSingleNext extends React.Component {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
-    const initialWidth = props.mediaSingleWidth || this.calcInitialWidth();
+    const initialWidth = props.mediaSingleWidth || 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
@@ -165,10 +165,10 @@ class ResizableMediaSingleNext extends React.Component {
       const 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
-      const initialWidth = this.calcInitialWidth();
+      const initialWidth = this.props.mediaSingleWidth;
       this.setState({
         size: {
           width: initialWidth,
@@ -198,14 +198,15 @@ class ResizableMediaSingleNext extends React.Component {
   // TODO:  refactor this later, maybe use state to hold snaps array
   getSnaps() {
     const {
-      view
+      view,
+      lineLength
     } = this.props;
     const {
       dom
     } = view;
     const defaultGuidelines = this.getDefaultGuidelines();
     // disable guidelines for nested media single node
-    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view);
+    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength);
     const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
     const mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
     const {

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

@@ -2,18 +2,16 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics } from '../../analytics';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -97,7 +95,9 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   // 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
   const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  const node = createMediaSingleNode(state.schema, collection, contentWidth, undefined, alignLeftOnInsert)(mediaState);
+  const node = createMediaSingleNode(state.schema, collection, contentWidth,
+  // pass undefined to use default min width
+  undefined, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
     const extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -130,7 +130,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   }
   return true;
 };
-export const createMediaSingleNode = (schema, collection, maxWidth = akEditorDefaultLayoutWidth, minWidth = MEDIA_SINGLE_MIN_PIXEL_WIDTH, alignLeftOnInsert) => mediaState => {
+export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, alignLeftOnInsert) => mediaState => {
   const {
     id,
     dimensions,
@@ -162,8 +162,7 @@ export const createMediaSingleNode = (schema, collection, maxWidth = akEditorDef
   } : {};
   const extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
     ...mediaSingleAttrs,
-    // constrain initial width between max width (editor content width) and min width (default to 24)
-    width: Math.max(Math.min(scaledWidth || DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+    width: getMediaSingleInitialWidth(scaledWidth, maxWidth, minWidth),
     // TODO: change to use enum
     widthType: 'pixel'
   } : mediaSingleAttrs;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.10.6";
+export const version = "187.10.8";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.10.6",
+	"version": "187.10.8",
 	"sideEffects": false
 }

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

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getMediaClient, isMediaBlobUrl as _isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { replaceExternalMedia, updateAllMediaSingleNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaSingleNodeAttrs } from '../commands/helpers';

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

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import React from 'react';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import MediaNode from './media';

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

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
@@ -35,7 +35,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
@@ -354,16 +354,25 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = 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 && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+        mediaSingleWidth: calcMediaSinglePixelWidth({
+          width: mediaSingleWidthAttribute,
+          widthType: widthType,
+          origWidth: width,
+          layout: layout,
+          contentWidth: contentWidth,
+          containerWidth: containerWidth,
+          gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+        })
       };
       var ResizableMediaSingleProps = _objectSpread({
         view: view,

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

@@ -15,7 +15,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
@@ -26,9 +26,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { generateDefaultGuidelines, generateDynamicGuidelines } from './guidelines';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
+import { generateDefaultGuidelines } from './guidelines';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
   if (wrapper && insideInlineLike && !insideLayout) {
@@ -128,7 +128,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 || 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
@@ -178,10 +178,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,
@@ -215,11 +215,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() ? [] : generateDynamicGuidelines(view);
+      var dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength);
       var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
       var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
       var _dom$getBoundingClien = dom.getBoundingClientRect(),
@@ -406,15 +408,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/esm/plugins/media/utils/media-single.js

@@ -5,18 +5,16 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics } from '../../analytics';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
   return {
     action: ACTION.INSERTED,
@@ -94,7 +92,9 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   // 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('.');
@@ -127,10 +127,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   }
   return true;
 };
-export var createMediaSingleNode = function createMediaSingleNode(schema, collection) {
-  var maxWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : akEditorDefaultLayoutWidth;
-  var minWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MEDIA_SINGLE_MIN_PIXEL_WIDTH;
-  var alignLeftOnInsert = arguments.length > 4 ? arguments[4] : undefined;
+export var createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
   return function (mediaState) {
     var id = mediaState.id,
       dimensions = mediaState.dimensions,
@@ -159,8 +156,7 @@ export var createMediaSingleNode = function createMediaSingleNode(schema, collec
       layout: 'align-start'
     } : {};
     var extendedMediaSingleAttrs = 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 || DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+      width: getMediaSingleInitialWidth(scaledWidth, maxWidth, minWidth),
       // TODO: change to use enum
       widthType: 'pixel'
     }) : mediaSingleAttrs;

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.10.6";
+export var version = "187.10.8";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.10.6",
+	"version": "187.10.8",
 	"sideEffects": false
 }

package/dist/types/plugins/media/nodeviews/mediaNodeUpdater.d.ts

@@ -1,8 +1,7 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
-import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider, ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaOptions } from '../types';
 import type { ProsemirrorGetPosHandler } from '../../../nodeviews';

package/dist/types-ts4.5/plugins/media/nodeviews/mediaNodeUpdater.d.ts

@@ -1,8 +1,7 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
-import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider, ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaOptions } from '../types';
 import type { ProsemirrorGetPosHandler } from '../../../nodeviews';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.10.6",
+  "version": "187.10.8",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -86,7 +86,7 @@
     "@atlaskit/media-common": "^8.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.1.0",
-    "@atlaskit/media-ui": "^23.2.0",
+    "@atlaskit/media-ui": "^23.3.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/mention": "^22.1.0",
     "@atlaskit/menu": "^1.9.0",