@atlaskit/editor-common 74.36.1 → 74.36.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 74.36.2
+
+### Patch Changes
+
+- [`62d6f381722`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62d6f381722) - ED-18969 preliminaary refactor for relative guideline.
+
 ## 74.36.1
 
 ### Patch Changes

package/dist/cjs/guideline/dynamicGuideline.js

@@ -13,6 +13,7 @@ var _constants = require("./constants");
 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 generateDynamicGuidelines = function generateDynamicGuidelines(state, editorWidth) {
+  var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node;
   var mediaSingleNode = (0, _utils.findChildren)(state.tr.doc, function (node) {
     return node.type === state.schema.nodes.mediaSingle;
@@ -30,40 +31,36 @@ var generateDynamicGuidelines = function generateDynamicGuidelines(state, editor
       width = _node$attrs.width,
       widthType = _node$attrs.widthType;
     var pixelWidth = (0, _mediaSingle.getMediaSinglePixelWidth)(width, editorWidth, widthType);
-    var commonStyles = {
-      style: 'dashed',
-      show: true
-    };
     var key = "".concat(_constants.MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(index);
     switch (layout) {
       case 'align-start':
       case 'wrap-left':
         return _objectSpread({
           position: {
-            x: pixelWidth - offset
+            x: (0, _mediaSingle.roundToNearest)(pixelWidth - offset)
           },
           key: key
-        }, commonStyles);
+        }, styles);
       case 'align-end':
       case 'wrap-right':
         return _objectSpread({
           position: {
-            x: editorWidth - pixelWidth - offset
+            x: (0, _mediaSingle.roundToNearest)(offset - pixelWidth)
           },
           key: key
-        }, commonStyles);
+        }, styles);
       case 'center':
         return [_objectSpread({
           position: {
-            x: pixelWidth / 2
+            x: (0, _mediaSingle.roundToNearest)(pixelWidth / 2)
           },
           key: "".concat(key, "_right")
-        }, commonStyles), _objectSpread({
+        }, styles), _objectSpread({
           position: {
-            x: -pixelWidth / 2
+            x: -(0, _mediaSingle.roundToNearest)(pixelWidth / 2)
           },
           key: "".concat(key, "_left")
-        }, commonStyles)];
+        }, styles)];
       // we ignore full-width and wide
       default:
         return [];

package/dist/cjs/guideline/utils.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVerticalPosition = exports.isNumber = exports.getContainerWidthOrFullEditorWidth = void 0;
+exports.isVerticalPosition = exports.isNumber = exports.getMediaSingleDimensions = exports.getContainerWidthOrFullEditorWidth = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _mediaSingle = require("../media-single");
 var isNumber = function isNumber(x) {
   return typeof x === 'number' && !isNaN(x) && isFinite(x);
 };
@@ -21,4 +22,45 @@ exports.isVerticalPosition = isVerticalPosition;
 var getContainerWidthOrFullEditorWidth = function getContainerWidthOrFullEditorWidth(containerWidth) {
   return Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) / 2;
 };
-exports.getContainerWidthOrFullEditorWidth = getContainerWidthOrFullEditorWidth;
+
+/**
+ *
+ * @param mediaSingle the mediaSingle node
+ * @param editorWidth default 760, only use default if the mediaSingle is using pixel width
+ * @returns null or dimensions info
+ */
+exports.getContainerWidthOrFullEditorWidth = getContainerWidthOrFullEditorWidth;
+var getMediaSingleDimensions = function getMediaSingleDimensions(mediaSingle) {
+  var editorWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorDefaultLayoutWidth;
+  if (mediaSingle.type !== mediaSingle.type.schema.nodes.mediaSingle) {
+    return null;
+  }
+  var mediaNode = mediaSingle.firstChild;
+  var _ref = (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs) || {},
+    width = _ref.width,
+    height = _ref.height;
+
+  // e.g. external image
+  if (!width || !height) {
+    return null;
+  }
+  var ratio = parseFloat((height / width).toFixed(2));
+  if (!mediaSingle.attrs.width) {
+    return {
+      width: width,
+      height: height,
+      originalWidth: width,
+      originalHeight: height,
+      ratio: ratio
+    };
+  }
+  var pixelWidth = (0, _mediaSingle.getMediaSinglePixelWidth)(mediaSingle.attrs.width, editorWidth, mediaSingle.attrs.widthType);
+  return {
+    width: (0, _mediaSingle.roundToNearest)(pixelWidth),
+    height: (0, _mediaSingle.roundToNearest)(pixelWidth * ratio),
+    originalWidth: width,
+    originalHeight: height,
+    ratio: ratio
+  };
+};
+exports.getMediaSingleDimensions = getMediaSingleDimensions;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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_ROUNDING_INTERVAL = 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;
@@ -30,4 +30,6 @@ var Layout = /*#__PURE__*/function (Layout) {
 }({});
 exports.Layout = Layout;
 var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
-exports.wrappedLayouts = wrappedLayouts;
+exports.wrappedLayouts = wrappedLayouts;
+var DEFAULT_ROUNDING_INTERVAL = 0.5;
+exports.DEFAULT_ROUNDING_INTERVAL = DEFAULT_ROUNDING_INTERVAL;

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

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "getMediaSinglePixelWidth", {
     return _utils.getMediaSinglePixelWidth;
   }
 });
+Object.defineProperty(exports, "roundToNearest", {
+  enumerable: true,
+  get: function get() {
+    return _utils.roundToNearest;
+  }
+});
 Object.defineProperty(exports, "wrappedLayouts", {
   enumerable: true,
   get: function get() {

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

@@ -7,6 +7,7 @@ exports.calcMediaSinglePixelWidth = exports.calcMediaSingleMaxWidth = void 0;
 exports.calculateOffsetLeft = calculateOffsetLeft;
 exports.getMediaSingleInitialWidth = void 0;
 exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
+exports.roundToNearest = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("./constants");
 /**
@@ -127,4 +128,16 @@ function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper)
     offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
   }
   return offsetLeft;
-}
+}
+
+/**
+ * Returns the number rounded to the nearest interval.
+ * @param {number} value    The number to round
+ * @param {number} interval The numeric interval to round to, default to 0.5
+ * @return {number} the rounded number
+ */
+var roundToNearest = function roundToNearest(value) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.DEFAULT_ROUNDING_INTERVAL;
+  return Math.round(value / interval) * interval;
+};
+exports.roundToNearest = roundToNearest;

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.36.1";
+var packageVersion = "74.36.2";
 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.36.1";
+var packageVersion = "74.36.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/version.json

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

package/dist/es2019/guideline/dynamicGuideline.js

@@ -1,8 +1,8 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildren } from '@atlaskit/editor-prosemirror/utils';
-import { getMediaSinglePixelWidth } from '../media-single';
+import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
-export const generateDynamicGuidelines = (state, editorWidth) => {
+export const generateDynamicGuidelines = (state, editorWidth, styles = {}) => {
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   const mediaSingleNode = findChildren(state.tr.doc, node => {
     return node.type === state.schema.nodes.mediaSingle;
@@ -22,43 +22,39 @@ export const generateDynamicGuidelines = (state, editorWidth) => {
       widthType
     } = node.attrs;
     const pixelWidth = getMediaSinglePixelWidth(width, editorWidth, widthType);
-    const commonStyles = {
-      style: 'dashed',
-      show: true
-    };
     const key = `${MEDIA_DYNAMIC_GUIDELINE_PREFIX}${index}`;
     switch (layout) {
       case 'align-start':
       case 'wrap-left':
         return {
           position: {
-            x: pixelWidth - offset
+            x: roundToNearest(pixelWidth - offset)
           },
           key,
-          ...commonStyles
+          ...styles
         };
       case 'align-end':
       case 'wrap-right':
         return {
           position: {
-            x: editorWidth - pixelWidth - offset
+            x: roundToNearest(offset - pixelWidth)
           },
           key,
-          ...commonStyles
+          ...styles
         };
       case 'center':
         return [{
           position: {
-            x: pixelWidth / 2
+            x: roundToNearest(pixelWidth / 2)
           },
           key: `${key}_right`,
-          ...commonStyles
+          ...styles
         }, {
           position: {
-            x: -pixelWidth / 2
+            x: -roundToNearest(pixelWidth / 2)
           },
           key: `${key}_left`,
-          ...commonStyles
+          ...styles
         }];
       // we ignore full-width and wide
       default:

package/dist/es2019/guideline/utils.js

@@ -1,11 +1,50 @@
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
 export const isNumber = x => typeof x === 'number' && !isNaN(x) && isFinite(x);
-export const isVerticalPosition = pos => {
-  return isNumber(pos.x);
-};
+export const isVerticalPosition = pos => isNumber(pos.x);
 
 /**
  * Calculates container or full editor width taking in account editor full width layout
  * width and editor gutter padding.
  */
-export const getContainerWidthOrFullEditorWidth = containerWidth => Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
+export const getContainerWidthOrFullEditorWidth = containerWidth => Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
+
+/**
+ *
+ * @param mediaSingle the mediaSingle node
+ * @param editorWidth default 760, only use default if the mediaSingle is using pixel width
+ * @returns null or dimensions info
+ */
+export const getMediaSingleDimensions = (mediaSingle, editorWidth = akEditorDefaultLayoutWidth) => {
+  if (mediaSingle.type !== mediaSingle.type.schema.nodes.mediaSingle) {
+    return null;
+  }
+  const mediaNode = mediaSingle.firstChild;
+  const {
+    width,
+    height
+  } = (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs) || {};
+
+  // e.g. external image
+  if (!width || !height) {
+    return null;
+  }
+  const ratio = parseFloat((height / width).toFixed(2));
+  if (!mediaSingle.attrs.width) {
+    return {
+      width,
+      height,
+      originalWidth: width,
+      originalHeight: height,
+      ratio
+    };
+  }
+  const pixelWidth = getMediaSinglePixelWidth(mediaSingle.attrs.width, editorWidth, mediaSingle.attrs.widthType);
+  return {
+    width: roundToNearest(pixelWidth),
+    height: roundToNearest(pixelWidth * ratio),
+    originalWidth: width,
+    originalHeight: height,
+    ratio
+  };
+};

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

@@ -15,4 +15,5 @@ export let Layout = /*#__PURE__*/function (Layout) {
   Layout["WRAP_LEFT"] = "wrap-left";
   return Layout;
 }({});
-export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+export const DEFAULT_ROUNDING_INTERVAL = 0.5;

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, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest } from './utils';

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

@@ -1,5 +1,5 @@
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_ROUNDING_INTERVAL, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
 
 /**
  * Convert media node width to pixel
@@ -110,4 +110,12 @@ export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, w
     offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
   }
   return offsetLeft;
-}
+}
+
+/**
+ * Returns the number rounded to the nearest interval.
+ * @param {number} value    The number to round
+ * @param {number} interval The numeric interval to round to, default to 0.5
+ * @return {number} the rounded number
+ */
+export const roundToNearest = (value, interval = DEFAULT_ROUNDING_INTERVAL) => Math.round(value / interval) * interval;

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.36.1";
+const packageVersion = "74.36.2";
 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.36.1";
+const packageVersion = "74.36.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/version.json

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

package/dist/esm/guideline/dynamicGuideline.js

@@ -3,9 +3,10 @@ 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; }
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildren } from '@atlaskit/editor-prosemirror/utils';
-import { getMediaSinglePixelWidth } from '../media-single';
+import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
 export var generateDynamicGuidelines = function generateDynamicGuidelines(state, editorWidth) {
+  var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   var mediaSingleNode = findChildren(state.tr.doc, function (node) {
     return node.type === state.schema.nodes.mediaSingle;
@@ -23,40 +24,36 @@ export var generateDynamicGuidelines = function generateDynamicGuidelines(state,
       width = _node$attrs.width,
       widthType = _node$attrs.widthType;
     var pixelWidth = getMediaSinglePixelWidth(width, editorWidth, widthType);
-    var commonStyles = {
-      style: 'dashed',
-      show: true
-    };
     var key = "".concat(MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(index);
     switch (layout) {
       case 'align-start':
       case 'wrap-left':
         return _objectSpread({
           position: {
-            x: pixelWidth - offset
+            x: roundToNearest(pixelWidth - offset)
           },
           key: key
-        }, commonStyles);
+        }, styles);
       case 'align-end':
       case 'wrap-right':
         return _objectSpread({
           position: {
-            x: editorWidth - pixelWidth - offset
+            x: roundToNearest(offset - pixelWidth)
           },
           key: key
-        }, commonStyles);
+        }, styles);
       case 'center':
         return [_objectSpread({
           position: {
-            x: pixelWidth / 2
+            x: roundToNearest(pixelWidth / 2)
           },
           key: "".concat(key, "_right")
-        }, commonStyles), _objectSpread({
+        }, styles), _objectSpread({
           position: {
-            x: -pixelWidth / 2
+            x: -roundToNearest(pixelWidth / 2)
           },
           key: "".concat(key, "_left")
-        }, commonStyles)];
+        }, styles)];
       // we ignore full-width and wide
       default:
         return [];

package/dist/esm/guideline/utils.js

@@ -1,4 +1,5 @@
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
 export var isNumber = function isNumber(x) {
   return typeof x === 'number' && !isNaN(x) && isFinite(x);
 };
@@ -12,4 +13,44 @@ export var isVerticalPosition = function isVerticalPosition(pos) {
  */
 export var getContainerWidthOrFullEditorWidth = function getContainerWidthOrFullEditorWidth(containerWidth) {
   return Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
+};
+
+/**
+ *
+ * @param mediaSingle the mediaSingle node
+ * @param editorWidth default 760, only use default if the mediaSingle is using pixel width
+ * @returns null or dimensions info
+ */
+export var getMediaSingleDimensions = function getMediaSingleDimensions(mediaSingle) {
+  var editorWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorDefaultLayoutWidth;
+  if (mediaSingle.type !== mediaSingle.type.schema.nodes.mediaSingle) {
+    return null;
+  }
+  var mediaNode = mediaSingle.firstChild;
+  var _ref = (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs) || {},
+    width = _ref.width,
+    height = _ref.height;
+
+  // e.g. external image
+  if (!width || !height) {
+    return null;
+  }
+  var ratio = parseFloat((height / width).toFixed(2));
+  if (!mediaSingle.attrs.width) {
+    return {
+      width: width,
+      height: height,
+      originalWidth: width,
+      originalHeight: height,
+      ratio: ratio
+    };
+  }
+  var pixelWidth = getMediaSinglePixelWidth(mediaSingle.attrs.width, editorWidth, mediaSingle.attrs.widthType);
+  return {
+    width: roundToNearest(pixelWidth),
+    height: roundToNearest(pixelWidth * ratio),
+    originalWidth: width,
+    originalHeight: height,
+    ratio: ratio
+  };
 };

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

@@ -15,4 +15,5 @@ export var Layout = /*#__PURE__*/function (Layout) {
   Layout["WRAP_LEFT"] = "wrap-left";
   return Layout;
 }({});
-export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+export var DEFAULT_ROUNDING_INTERVAL = 0.5;

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, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest } from './utils';

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

@@ -1,5 +1,5 @@
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_ROUNDING_INTERVAL, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
 
 /**
  * Convert media node width to pixel
@@ -116,4 +116,15 @@ export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, w
     offsetLeft = boundingRect.left - pmViewDom.getBoundingClientRect().left;
   }
   return offsetLeft;
-}
+}
+
+/**
+ * Returns the number rounded to the nearest interval.
+ * @param {number} value    The number to round
+ * @param {number} interval The numeric interval to round to, default to 0.5
+ * @return {number} the rounded number
+ */
+export var roundToNearest = function roundToNearest(value) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_ROUNDING_INTERVAL;
+  return Math.round(value / interval) * interval;
+};

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.36.1";
+var packageVersion = "74.36.2";
 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.36.1";
+var packageVersion = "74.36.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/version.json

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

package/dist/types/guideline/dynamicGuideline.d.ts

@@ -1,14 +1,25 @@
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number) => ({
-    style: string;
-    show: boolean;
+import type { GuidelineConfig } from './types';
+export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: Omit<GuidelineConfig, 'key' | 'position'>) => ({
+    styles?: {
+        capStyle?: "line" | undefined;
+        lineStyle?: "dashed" | "solid" | undefined;
+        color?: import("@atlaskit/tokens").CSSToken | undefined;
+    } | undefined;
+    show?: boolean | undefined;
+    active?: boolean | undefined;
     position: {
         x: number;
     };
     key: string;
 } | {
-    style: string;
-    show: boolean;
+    styles?: {
+        capStyle?: "line" | undefined;
+        lineStyle?: "dashed" | "solid" | undefined;
+        color?: import("@atlaskit/tokens").CSSToken | undefined;
+    } | undefined;
+    show?: boolean | undefined;
+    active?: boolean | undefined;
     position: {
         x: number;
     };

package/dist/types/guideline/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Position, VerticalPosition } from './types';
 export declare const isNumber: (x: unknown) => x is number;
 export declare const isVerticalPosition: (pos: Position) => pos is VerticalPosition;
@@ -6,3 +7,16 @@ export declare const isVerticalPosition: (pos: Position) => pos is VerticalPosit
  * width and editor gutter padding.
  */
 export declare const getContainerWidthOrFullEditorWidth: (containerWidth: number) => number;
+/**
+ *
+ * @param mediaSingle the mediaSingle node
+ * @param editorWidth default 760, only use default if the mediaSingle is using pixel width
+ * @returns null or dimensions info
+ */
+export declare const getMediaSingleDimensions: (mediaSingle: PMNode, editorWidth?: number) => {
+    width: number;
+    height: number;
+    originalWidth: number;
+    originalHeight: number;
+    ratio: number;
+} | null;

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

@@ -16,3 +16,4 @@ export declare enum Layout {
     WRAP_LEFT = "wrap-left"
 }
 export declare const wrappedLayouts: RichMediaLayout[];
+export declare const DEFAULT_ROUNDING_INTERVAL = 0.5;

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, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, } from './utils';

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

@@ -47,3 +47,10 @@ export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number
  */
 export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
 export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
+/**
+ * Returns the number rounded to the nearest interval.
+ * @param {number} value    The number to round
+ * @param {number} interval The numeric interval to round to, default to 0.5
+ * @return {number} the rounded number
+ */
+export declare const roundToNearest: (value: number, interval?: number) => number;

package/dist/types-ts4.5/guideline/dynamicGuideline.d.ts

@@ -1,14 +1,25 @@
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number) => ({
-    style: string;
-    show: boolean;
+import type { GuidelineConfig } from './types';
+export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: Omit<GuidelineConfig, 'key' | 'position'>) => ({
+    styles?: {
+        capStyle?: "line" | undefined;
+        lineStyle?: "dashed" | "solid" | undefined;
+        color?: import("@atlaskit/tokens").CSSToken | undefined;
+    } | undefined;
+    show?: boolean | undefined;
+    active?: boolean | undefined;
     position: {
         x: number;
     };
     key: string;
 } | {
-    style: string;
-    show: boolean;
+    styles?: {
+        capStyle?: "line" | undefined;
+        lineStyle?: "dashed" | "solid" | undefined;
+        color?: import("@atlaskit/tokens").CSSToken | undefined;
+    } | undefined;
+    show?: boolean | undefined;
+    active?: boolean | undefined;
     position: {
         x: number;
     };

package/dist/types-ts4.5/guideline/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Position, VerticalPosition } from './types';
 export declare const isNumber: (x: unknown) => x is number;
 export declare const isVerticalPosition: (pos: Position) => pos is VerticalPosition;
@@ -6,3 +7,16 @@ export declare const isVerticalPosition: (pos: Position) => pos is VerticalPosit
  * width and editor gutter padding.
  */
 export declare const getContainerWidthOrFullEditorWidth: (containerWidth: number) => number;
+/**
+ *
+ * @param mediaSingle the mediaSingle node
+ * @param editorWidth default 760, only use default if the mediaSingle is using pixel width
+ * @returns null or dimensions info
+ */
+export declare const getMediaSingleDimensions: (mediaSingle: PMNode, editorWidth?: number) => {
+    width: number;
+    height: number;
+    originalWidth: number;
+    originalHeight: number;
+    ratio: number;
+} | null;

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

@@ -16,3 +16,4 @@ export declare enum Layout {
     WRAP_LEFT = "wrap-left"
 }
 export declare const wrappedLayouts: RichMediaLayout[];
+export declare const DEFAULT_ROUNDING_INTERVAL = 0.5;

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, MEDIA_SINGLE_GUTTER_SIZE, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, } from './utils';

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

@@ -47,3 +47,10 @@ export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number
  */
 export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
 export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
+/**
+ * Returns the number rounded to the nearest interval.
+ * @param {number} value    The number to round
+ * @param {number} interval The numeric interval to round to, default to 0.5
+ * @return {number} the rounded number
+ */
+export declare const roundToNearest: (value: number, interval?: number) => number;

package/package.json

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