@atlaskit/editor-common 74.34.2 → 74.34.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.34.4
+
+### Patch Changes
+
+- [`0d297244de3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d297244de3) - Add calcMediaSingleMaxWidth, move default image constants to /media-single
+
+## 74.34.3
+
+### Patch Changes
+
+- [`eeecb78b23f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eeecb78b23f) - Added media-single utils to editor-common and moved utils from editor-core/media to edtor-common/media-single.
+
 ## 74.34.2
 
 ### Patch Changes

package/dist/cjs/media-single/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = exports.MEDIA_SINGLE_HANDLE_MARGIN = exports.MEDIA_SINGLE_GUTTER_SIZE = exports.Layout = void 0;
+exports.wrappedLayouts = exports.MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = exports.MEDIA_SINGLE_HANDLE_MARGIN = exports.MEDIA_SINGLE_GUTTER_SIZE = exports.Layout = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
 var MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
 exports.MEDIA_SINGLE_MIN_PIXEL_WIDTH = MEDIA_SINGLE_MIN_PIXEL_WIDTH;
 var MEDIA_SINGLE_SNAP_GAP = 3;
@@ -14,6 +14,10 @@ var MEDIA_SINGLE_HANDLE_MARGIN = 12;
 exports.MEDIA_SINGLE_HANDLE_MARGIN = MEDIA_SINGLE_HANDLE_MARGIN;
 var MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
 exports.MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_GUTTER_SIZE;
+var DEFAULT_IMAGE_WIDTH = 250;
+exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
+var DEFAULT_IMAGE_HEIGHT = 200;
+exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
 var Layout = /*#__PURE__*/function (Layout) {
   Layout["FULL_WIDTH"] = "full-width";
   Layout["WIDE"] = "wide";
@@ -24,4 +28,6 @@ var Layout = /*#__PURE__*/function (Layout) {
   Layout["WRAP_LEFT"] = "wrap-left";
   return Layout;
 }({});
-exports.Layout = Layout;
+exports.Layout = Layout;
+var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+exports.wrappedLayouts = wrappedLayouts;

package/dist/cjs/media-single/index.js

@@ -3,6 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _constants.DEFAULT_IMAGE_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _constants.DEFAULT_IMAGE_WIDTH;
+  }
+});
+Object.defineProperty(exports, "MEDIA_SINGLE_GUTTER_SIZE", {
+  enumerable: true,
+  get: function get() {
+    return _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  }
+});
 Object.defineProperty(exports, "MEDIA_SINGLE_HIGHLIGHT_GAP", {
   enumerable: true,
   get: function get() {
@@ -27,11 +45,41 @@ Object.defineProperty(exports, "MediaSingleLayout", {
     return _constants.Layout;
   }
 });
+Object.defineProperty(exports, "calcMediaSingleMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _utils.calcMediaSingleMaxWidth;
+  }
+});
+Object.defineProperty(exports, "calcMediaSinglePixelWidth", {
+  enumerable: true,
+  get: function get() {
+    return _utils.calcMediaSinglePixelWidth;
+  }
+});
+Object.defineProperty(exports, "calculateOffsetLeft", {
+  enumerable: true,
+  get: function get() {
+    return _utils.calculateOffsetLeft;
+  }
+});
+Object.defineProperty(exports, "getMediaSingleInitialWidth", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getMediaSingleInitialWidth;
+  }
+});
 Object.defineProperty(exports, "getMediaSinglePixelWidth", {
   enumerable: true,
   get: function get() {
     return _utils.getMediaSinglePixelWidth;
   }
 });
+Object.defineProperty(exports, "wrappedLayouts", {
+  enumerable: true,
+  get: function get() {
+    return _constants.wrappedLayouts;
+  }
+});
 var _constants = require("./constants");
 var _utils = require("./utils");

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

@@ -3,7 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.calcMediaSinglePixelWidth = exports.calcMediaSingleMaxWidth = void 0;
+exports.calculateOffsetLeft = calculateOffsetLeft;
+exports.getMediaSingleInitialWidth = void 0;
 exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("./constants");
 /**
  * Convert media node width to pixel
  *
@@ -23,4 +28,103 @@ function getMediaSinglePixelWidth(width, editorWidth) {
     return width;
   }
   return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}
+/**
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
+ * @param width node width attribute
+ * @param widthType node widthType attribute
+ * @param origWidth original media width
+ * @param layout node layout attribute
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ * @param gutterOffset gap between resizer handle and media
+ * @returns pixel width of the node
+ */
+var calcMediaSinglePixelWidth = function calcMediaSinglePixelWidth(_ref) {
+  var width = _ref.width,
+    _ref$widthType = _ref.widthType,
+    widthType = _ref$widthType === void 0 ? 'percentage' : _ref$widthType,
+    origWidth = _ref.origWidth,
+    layout = _ref.layout,
+    contentWidth = _ref.contentWidth,
+    containerWidth = _ref.containerWidth,
+    _ref$gutterOffset = _ref.gutterOffset,
+    gutterOffset = _ref$gutterOffset === void 0 ? 0 : _ref$gutterOffset;
+  if (widthType === 'pixel' && width) {
+    return width;
+  }
+  switch (layout) {
+    case 'wide':
+      return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
+    case 'full-width':
+      // legacy and new experience have different definitions of full-width,
+      // since it's for new experience, we convert to the new definition
+      return calcMediaSingleMaxWidth(containerWidth);
+    default:
+      if (width) {
+        return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
+      }
+  }
+
+  // Handle the case of not resized node with wrapped layout
+  // It's possible that the node is first inserted with align layout (e.g. jira)
+  // in which the legacy image would render the width as min(origWidth, halfContentWidth).
+  // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
+  // to make sure confluence legacy node is renderered correctly
+  if (_constants.wrappedLayouts.includes(layout)) {
+    return Math.ceil((contentWidth || containerWidth) / 2);
+  }
+
+  // set initial width for not resized legacy image
+  return getMediaSingleInitialWidth(origWidth,
+  // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
+  contentWidth || containerWidth || undefined);
+};
+
+/**
+ * Calculate pixel width for legacy media single
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ */
+exports.calcMediaSinglePixelWidth = calcMediaSinglePixelWidth;
+var calcLegacyWideWidth = function calcLegacyWideWidth(containerWidth, origWidth, contentWidth) {
+  if (contentWidth) {
+    var wideWidth = Math.ceil(contentWidth * _editorSharedStyles.breakoutWideScaleRatio);
+    return wideWidth > containerWidth ? contentWidth : wideWidth;
+  }
+  return origWidth;
+};
+
+/**
+ * Calculate maximum width allowed for media single in new experience
+ * @param containerWidth width of editor container
+ */
+var calcMediaSingleMaxWidth = function calcMediaSingleMaxWidth(containerWidth) {
+  var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
+  return Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth);
+};
+
+/**
+ * Calculate initial media single pixel width.
+ * Make it fall between max width and min width
+ * @param origWidth original width of image (media node width)
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
+ */
+exports.calcMediaSingleMaxWidth = calcMediaSingleMaxWidth;
+var getMediaSingleInitialWidth = function getMediaSingleInitialWidth() {
+  var origWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.DEFAULT_IMAGE_WIDTH;
+  var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorDefaultLayoutWidth;
+  var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.MEDIA_SINGLE_MIN_PIXEL_WIDTH;
+  return Math.max(Math.min(origWidth, maxWidth), minWidth);
+};
+exports.getMediaSingleInitialWidth = getMediaSingleInitialWidth;
+function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
+  var offsetLeft = 0;
+  if (wrapper && insideInlineLike && !insideLayout) {
+    var currentNode = wrapper;
+    var boundingRect = currentNode.getBoundingClientRect();
+    offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
+  }
+  return offsetLeft;
 }

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.34.2";
+var packageVersion = "74.34.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.34.2";
+var packageVersion = "74.34.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/MediaSingle/grid.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.calcColumnsFromPx = calcColumnsFromPx;
 exports.calcMediaPxWidth = void 0;
 exports.calcPctFromPx = calcPctFromPx;
+exports.calcPctWidth = void 0;
 exports.calcPxFromColumns = calcPxFromColumns;
 exports.calcPxFromPct = calcPxFromPct;
 exports.wrappedLayouts = exports.snapToGrid = exports.layoutSupportsWidth = void 0;
@@ -37,6 +38,7 @@ exports.wrappedLayouts = wrappedLayouts;
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
   return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };
+exports.calcPctWidth = calcPctWidth;
 var calcMediaPxWidth = function calcMediaPxWidth(opts) {
   var origWidth = opts.origWidth,
     origHeight = opts.origHeight,

package/dist/cjs/ui/MediaSingle/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IMAGE_AND_BORDER_ADJUSTMENT = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
+exports.IMAGE_AND_BORDER_ADJUSTMENT = void 0;
 exports.default = MediaSingle;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,15 +17,10 @@ var _richMediaUtils = require("../../utils/rich-media-utils");
 var _styled = require("./styled");
 /** @jsx jsx */
 
-var DEFAULT_IMAGE_WIDTH = 250;
-exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
-var DEFAULT_IMAGE_HEIGHT = 200;
-
 /*
     This constant is used to proportionally adjust the image and its border to avoid any gaps. i.e. The value will simultaneously expand the width and height of the image by 2 pixels; and similarly contract the border by 2 pixels.
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481
 */
-exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
 var IMAGE_AND_BORDER_ADJUSTMENT = 2;
 exports.IMAGE_AND_BORDER_ADJUSTMENT = IMAGE_AND_BORDER_ADJUSTMENT;
 function MediaSingle(_ref) {

package/dist/cjs/ui/MediaSingle/styled.js

@@ -13,6 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _mediaSingle = require("../../media-single");
 var _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
@@ -92,9 +93,7 @@ var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullW
   if (fullWidthMode) {
     return '100%';
   }
-  // There is always padding for renderer, so we don't need padding for it
-  var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
-  return "".concat(Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px");
+  return "".concat((0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth), "px");
 };
 var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
   if (isNestedNode) {

package/dist/cjs/ui/index.js

@@ -47,18 +47,6 @@ Object.defineProperty(exports, "ContextPanelWidthProvider", {
     return _context.ContextPanelWidthProvider;
   }
 });
-Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
-  enumerable: true,
-  get: function get() {
-    return _MediaSingle.DEFAULT_IMAGE_HEIGHT;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
-  enumerable: true,
-  get: function get() {
-    return _MediaSingle.DEFAULT_IMAGE_WIDTH;
-  }
-});
 Object.defineProperty(exports, "EDIT_AREA_ID", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.34.2",
+	"version": "74.34.4",
 	"sideEffects": false
 }

package/dist/es2019/media-single/constants.js

@@ -3,6 +3,8 @@ export const MEDIA_SINGLE_SNAP_GAP = 3;
 export const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export const MEDIA_SINGLE_HANDLE_MARGIN = 12;
 export const MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
+export const DEFAULT_IMAGE_WIDTH = 250;
+export const DEFAULT_IMAGE_HEIGHT = 200;
 export let Layout = /*#__PURE__*/function (Layout) {
   Layout["FULL_WIDTH"] = "full-width";
   Layout["WIDE"] = "wide";
@@ -12,4 +14,5 @@ export let Layout = /*#__PURE__*/function (Layout) {
   Layout["WRAP_RIGHT"] = "wrap-right";
   Layout["WRAP_LEFT"] = "wrap-left";
   return Layout;
-}({});
+}({});
+export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];

package/dist/es2019/media-single/index.js

@@ -1,2 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout } from './constants';
-export { getMediaSinglePixelWidth } from './utils';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts } from './constants';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';

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

@@ -1,3 +1,6 @@
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
+
 /**
  * Convert media node width to pixel
  *
@@ -15,4 +18,96 @@ export function getMediaSinglePixelWidth(width, editorWidth, widthType = 'percen
     return width;
   }
   return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}
+/**
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
+ * @param width node width attribute
+ * @param widthType node widthType attribute
+ * @param origWidth original media width
+ * @param layout node layout attribute
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ * @param gutterOffset gap between resizer handle and media
+ * @returns pixel width of the node
+ */
+export const calcMediaSinglePixelWidth = ({
+  width,
+  widthType = 'percentage',
+  origWidth,
+  layout,
+  contentWidth,
+  containerWidth,
+  gutterOffset = 0
+}) => {
+  if (widthType === 'pixel' && width) {
+    return width;
+  }
+  switch (layout) {
+    case 'wide':
+      return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
+    case 'full-width':
+      // legacy and new experience have different definitions of full-width,
+      // since it's for new experience, we convert to the new definition
+      return calcMediaSingleMaxWidth(containerWidth);
+    default:
+      if (width) {
+        return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
+      }
+  }
+
+  // Handle the case of not resized node with wrapped layout
+  // It's possible that the node is first inserted with align layout (e.g. jira)
+  // in which the legacy image would render the width as min(origWidth, halfContentWidth).
+  // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
+  // to make sure confluence legacy node is renderered correctly
+  if (wrappedLayouts.includes(layout)) {
+    return Math.ceil((contentWidth || containerWidth) / 2);
+  }
+
+  // set initial width for not resized legacy image
+  return getMediaSingleInitialWidth(origWidth,
+  // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
+  contentWidth || containerWidth || undefined);
+};
+
+/**
+ * Calculate pixel width for legacy media single
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ */
+const calcLegacyWideWidth = (containerWidth, origWidth, contentWidth) => {
+  if (contentWidth) {
+    const wideWidth = Math.ceil(contentWidth * breakoutWideScaleRatio);
+    return wideWidth > containerWidth ? contentWidth : wideWidth;
+  }
+  return origWidth;
+};
+
+/**
+ * Calculate maximum width allowed for media single in new experience
+ * @param containerWidth width of editor container
+ */
+export const calcMediaSingleMaxWidth = containerWidth => {
+  const fullWidthPadding = akEditorGutterPadding * 2;
+  return Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth);
+};
+
+/**
+ * Calculate initial media single pixel width.
+ * Make it fall between max width and min width
+ * @param origWidth original width of image (media node width)
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
+ */
+export const getMediaSingleInitialWidth = (origWidth = DEFAULT_IMAGE_WIDTH, maxWidth = akEditorDefaultLayoutWidth, minWidth = MEDIA_SINGLE_MIN_PIXEL_WIDTH) => {
+  return Math.max(Math.min(origWidth, maxWidth), minWidth);
+};
+export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
+  let offsetLeft = 0;
+  if (wrapper && insideInlineLike && !insideLayout) {
+    const currentNode = wrapper;
+    const boundingRect = currentNode.getBoundingClientRect();
+    offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
+  }
+  return offsetLeft;
 }

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.34.2";
+const packageVersion = "74.34.4";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.34.2";
+const packageVersion = "74.34.4";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/MediaSingle/grid.js

@@ -19,7 +19,7 @@ export function calcPctFromPx(width, lineLength) {
   return (width + MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
 }
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
-const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+export const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 export const calcMediaPxWidth = opts => {
   const {
     origWidth,

package/dist/es2019/ui/MediaSingle/index.js

@@ -7,9 +7,6 @@ import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
 import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
-export const DEFAULT_IMAGE_WIDTH = 250;
-export const DEFAULT_IMAGE_HEIGHT = 200;
-
 /*
     This constant is used to proportionally adjust the image and its border to avoid any gaps. i.e. The value will simultaneously expand the width and height of the image by 2 pixels; and similarly contract the border by 2 pixels.
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481

package/dist/es2019/ui/MediaSingle/styled.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { calcMediaSingleMaxWidth } from '../../media-single';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -74,9 +75,7 @@ const getEffectiveFullWidth = (containerWidth, fullWidthMode) => {
   if (fullWidthMode) {
     return '100%';
   }
-  // There is always padding for renderer, so we don't need padding for it
-  const fullWidthPadding = akEditorGutterPadding * 2;
-  return `${Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth)}px`;
+  return `${calcMediaSingleMaxWidth(containerWidth)}px`;
 };
 const calcMaxWidthWhenResizing = (containerWidth, fullWidthMode, isNestedNode) => {
   if (isNestedNode) {

package/dist/es2019/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
+export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.34.2",
+	"version": "74.34.4",
 	"sideEffects": false
 }

package/dist/esm/media-single/constants.js

@@ -3,6 +3,8 @@ export var MEDIA_SINGLE_SNAP_GAP = 3;
 export var MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export var MEDIA_SINGLE_HANDLE_MARGIN = 12;
 export var MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
+export var DEFAULT_IMAGE_WIDTH = 250;
+export var DEFAULT_IMAGE_HEIGHT = 200;
 export var Layout = /*#__PURE__*/function (Layout) {
   Layout["FULL_WIDTH"] = "full-width";
   Layout["WIDE"] = "wide";
@@ -12,4 +14,5 @@ export var Layout = /*#__PURE__*/function (Layout) {
   Layout["WRAP_RIGHT"] = "wrap-right";
   Layout["WRAP_LEFT"] = "wrap-left";
   return Layout;
-}({});
+}({});
+export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];

package/dist/esm/media-single/index.js

@@ -1,2 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout } from './constants';
-export { getMediaSinglePixelWidth } from './utils';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts } from './constants';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';

package/dist/esm/media-single/utils.js

@@ -1,3 +1,6 @@
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
+
 /**
  * Convert media node width to pixel
  *
@@ -17,4 +20,100 @@ export function getMediaSinglePixelWidth(width, editorWidth) {
     return width;
   }
   return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}
+/**
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
+ * @param width node width attribute
+ * @param widthType node widthType attribute
+ * @param origWidth original media width
+ * @param layout node layout attribute
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ * @param gutterOffset gap between resizer handle and media
+ * @returns pixel width of the node
+ */
+export var calcMediaSinglePixelWidth = function calcMediaSinglePixelWidth(_ref) {
+  var width = _ref.width,
+    _ref$widthType = _ref.widthType,
+    widthType = _ref$widthType === void 0 ? 'percentage' : _ref$widthType,
+    origWidth = _ref.origWidth,
+    layout = _ref.layout,
+    contentWidth = _ref.contentWidth,
+    containerWidth = _ref.containerWidth,
+    _ref$gutterOffset = _ref.gutterOffset,
+    gutterOffset = _ref$gutterOffset === void 0 ? 0 : _ref$gutterOffset;
+  if (widthType === 'pixel' && width) {
+    return width;
+  }
+  switch (layout) {
+    case 'wide':
+      return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
+    case 'full-width':
+      // legacy and new experience have different definitions of full-width,
+      // since it's for new experience, we convert to the new definition
+      return calcMediaSingleMaxWidth(containerWidth);
+    default:
+      if (width) {
+        return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
+      }
+  }
+
+  // Handle the case of not resized node with wrapped layout
+  // It's possible that the node is first inserted with align layout (e.g. jira)
+  // in which the legacy image would render the width as min(origWidth, halfContentWidth).
+  // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
+  // to make sure confluence legacy node is renderered correctly
+  if (wrappedLayouts.includes(layout)) {
+    return Math.ceil((contentWidth || containerWidth) / 2);
+  }
+
+  // set initial width for not resized legacy image
+  return getMediaSingleInitialWidth(origWidth,
+  // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
+  contentWidth || containerWidth || undefined);
+};
+
+/**
+ * Calculate pixel width for legacy media single
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ */
+var calcLegacyWideWidth = function calcLegacyWideWidth(containerWidth, origWidth, contentWidth) {
+  if (contentWidth) {
+    var wideWidth = Math.ceil(contentWidth * breakoutWideScaleRatio);
+    return wideWidth > containerWidth ? contentWidth : wideWidth;
+  }
+  return origWidth;
+};
+
+/**
+ * Calculate maximum width allowed for media single in new experience
+ * @param containerWidth width of editor container
+ */
+export var calcMediaSingleMaxWidth = function calcMediaSingleMaxWidth(containerWidth) {
+  var fullWidthPadding = akEditorGutterPadding * 2;
+  return Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth);
+};
+
+/**
+ * Calculate initial media single pixel width.
+ * Make it fall between max width and min width
+ * @param origWidth original width of image (media node width)
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
+ */
+export var getMediaSingleInitialWidth = function getMediaSingleInitialWidth() {
+  var origWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_IMAGE_WIDTH;
+  var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorDefaultLayoutWidth;
+  var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MEDIA_SINGLE_MIN_PIXEL_WIDTH;
+  return Math.max(Math.min(origWidth, maxWidth), minWidth);
+};
+export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
+  var offsetLeft = 0;
+  if (wrapper && insideInlineLike && !insideLayout) {
+    var currentNode = wrapper;
+    var boundingRect = currentNode.getBoundingClientRect();
+    offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
+  }
+  return offsetLeft;
 }

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.34.2";
+var packageVersion = "74.34.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.34.2";
+var packageVersion = "74.34.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/grid.js

@@ -21,7 +21,7 @@ export function calcPctFromPx(width, lineLength) {
   return (width + MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
 }
 export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
-var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
+export var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
   return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };
 export var calcMediaPxWidth = function calcMediaPxWidth(opts) {

package/dist/esm/ui/MediaSingle/index.js

@@ -8,9 +8,6 @@ import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
 import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
-export var DEFAULT_IMAGE_WIDTH = 250;
-export var DEFAULT_IMAGE_HEIGHT = 200;
-
 /*
     This constant is used to proportionally adjust the image and its border to avoid any gaps. i.e. The value will simultaneously expand the width and height of the image by 2 pixels; and similarly contract the border by 2 pixels.
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481

package/dist/esm/ui/MediaSingle/styled.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { calcMediaSingleMaxWidth } from '../../media-single';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -82,9 +83,7 @@ var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullW
   if (fullWidthMode) {
     return '100%';
   }
-  // There is always padding for renderer, so we don't need padding for it
-  var fullWidthPadding = akEditorGutterPadding * 2;
-  return "".concat(Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth), "px");
+  return "".concat(calcMediaSingleMaxWidth(containerWidth), "px");
 };
 var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
   if (isNestedNode) {

package/dist/esm/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
+export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.34.2",
+	"version": "74.34.4",
 	"sideEffects": false
 }

package/dist/types/media-single/constants.d.ts

@@ -1,8 +1,11 @@
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
 export declare const MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
 export declare const MEDIA_SINGLE_SNAP_GAP = 3;
 export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
 export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
+export declare const DEFAULT_IMAGE_WIDTH = 250;
+export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare enum Layout {
     FULL_WIDTH = "full-width",
     WIDE = "wide",
@@ -12,3 +15,4 @@ export declare enum Layout {
     WRAP_RIGHT = "wrap-right",
     WRAP_LEFT = "wrap-left"
 }
+export declare const wrappedLayouts: RichMediaLayout[];

package/dist/types/media-single/index.d.ts

@@ -1,2 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout, } from './constants';
-export { getMediaSinglePixelWidth } from './utils';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';

package/dist/types/media-single/utils.d.ts

@@ -1,3 +1,4 @@
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
 /**
  * Convert media node width to pixel
  *
@@ -11,3 +12,38 @@
  * @returns pixel number for media single node
  */
 export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;
+export interface calcMediaSinglePixelWidthProps {
+    width?: number;
+    widthType?: 'percentage' | 'pixel';
+    origWidth: number;
+    layout: RichMediaLayout;
+    contentWidth?: number;
+    containerWidth: number;
+    gutterOffset: number;
+}
+/**
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
+ * @param width node width attribute
+ * @param widthType node widthType attribute
+ * @param origWidth original media width
+ * @param layout node layout attribute
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ * @param gutterOffset gap between resizer handle and media
+ * @returns pixel width of the node
+ */
+export declare const calcMediaSinglePixelWidth: ({ width, widthType, origWidth, layout, contentWidth, containerWidth, gutterOffset, }: calcMediaSinglePixelWidthProps) => number;
+/**
+ * Calculate maximum width allowed for media single in new experience
+ * @param containerWidth width of editor container
+ */
+export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number;
+/**
+ * Calculate initial media single pixel width.
+ * Make it fall between max width and min width
+ * @param origWidth original width of image (media node width)
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
+ */
+export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
+export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;

package/dist/types/ui/MediaSingle/grid.d.ts

@@ -7,10 +7,11 @@ export declare function calcColumnsFromPx(width: number, lineLength: number, gri
 export declare function calcPxFromPct(pct: number, lineLength: number): number;
 export declare function calcPctFromPx(width: number, lineLength: number): number;
 export declare const wrappedLayouts: MediaSingleLayout[];
+export declare const calcPctWidth: (containerWidth: EditorContainerWidth, pctWidth?: number, origWidth?: number, origHeight?: number) => number | undefined;
 export declare const calcMediaPxWidth: (opts: {
     origWidth: number;
     origHeight: number;
-    state: EditorState;
+    state?: EditorState | undefined;
     containerWidth: EditorContainerWidth;
     layout?: MediaSingleLayout | undefined;
     pctWidth?: number | undefined;

package/dist/types/ui/MediaSingle/index.d.ts

@@ -3,8 +3,6 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaSingleSize, MediaSingleWidthType } from './types';
-export declare const DEFAULT_IMAGE_WIDTH = 250;
-export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
 export interface Props {
     children: React.ReactNode;

package/dist/types/ui/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
+export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';

package/dist/types-ts4.5/media-single/constants.d.ts

@@ -1,8 +1,11 @@
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
 export declare const MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
 export declare const MEDIA_SINGLE_SNAP_GAP = 3;
 export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
 export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
+export declare const DEFAULT_IMAGE_WIDTH = 250;
+export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare enum Layout {
     FULL_WIDTH = "full-width",
     WIDE = "wide",
@@ -12,3 +15,4 @@ export declare enum Layout {
     WRAP_RIGHT = "wrap-right",
     WRAP_LEFT = "wrap-left"
 }
+export declare const wrappedLayouts: RichMediaLayout[];

package/dist/types-ts4.5/media-single/index.d.ts

@@ -1,2 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout, } from './constants';
-export { getMediaSinglePixelWidth } from './utils';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';

package/dist/types-ts4.5/media-single/utils.d.ts

@@ -1,3 +1,4 @@
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
 /**
  * Convert media node width to pixel
  *
@@ -11,3 +12,38 @@
  * @returns pixel number for media single node
  */
 export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;
+export interface calcMediaSinglePixelWidthProps {
+    width?: number;
+    widthType?: 'percentage' | 'pixel';
+    origWidth: number;
+    layout: RichMediaLayout;
+    contentWidth?: number;
+    containerWidth: number;
+    gutterOffset: number;
+}
+/**
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
+ * @param width node width attribute
+ * @param widthType node widthType attribute
+ * @param origWidth original media width
+ * @param layout node layout attribute
+ * @param contentWidth editor content width
+ * @param containerWidth editor container width
+ * @param gutterOffset gap between resizer handle and media
+ * @returns pixel width of the node
+ */
+export declare const calcMediaSinglePixelWidth: ({ width, widthType, origWidth, layout, contentWidth, containerWidth, gutterOffset, }: calcMediaSinglePixelWidthProps) => number;
+/**
+ * Calculate maximum width allowed for media single in new experience
+ * @param containerWidth width of editor container
+ */
+export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number;
+/**
+ * Calculate initial media single pixel width.
+ * Make it fall between max width and min width
+ * @param origWidth original width of image (media node width)
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
+ */
+export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
+export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;

package/dist/types-ts4.5/ui/MediaSingle/grid.d.ts

@@ -7,10 +7,11 @@ export declare function calcColumnsFromPx(width: number, lineLength: number, gri
 export declare function calcPxFromPct(pct: number, lineLength: number): number;
 export declare function calcPctFromPx(width: number, lineLength: number): number;
 export declare const wrappedLayouts: MediaSingleLayout[];
+export declare const calcPctWidth: (containerWidth: EditorContainerWidth, pctWidth?: number, origWidth?: number, origHeight?: number) => number | undefined;
 export declare const calcMediaPxWidth: (opts: {
     origWidth: number;
     origHeight: number;
-    state: EditorState;
+    state?: EditorState | undefined;
     containerWidth: EditorContainerWidth;
     layout?: MediaSingleLayout | undefined;
     pctWidth?: number | undefined;

package/dist/types-ts4.5/ui/MediaSingle/index.d.ts

@@ -3,8 +3,6 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaSingleSize, MediaSingleWidthType } from './types';
-export declare const DEFAULT_IMAGE_WIDTH = 250;
-export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
 export interface Props {
     children: React.ReactNode;

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
+export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.34.2",
+  "version": "74.34.4",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"