@atlaskit/editor-common 74.26.8 → 74.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.27.0
+
+### Minor Changes
+
+- [`0ae6f70038a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ae6f70038a) - [ED-17635] Add analytics event for table width resizing
+
+## 74.26.9
+
+### Patch Changes
+
+- [`3b01ce33502`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b01ce33502) - add getMediaSinglePixelWidth to support legacy and new media resize experience
+
 ## 74.26.8
 
 ### Patch Changes

package/dist/cjs/analytics/types/table-events.js

@@ -27,6 +27,7 @@ var TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["ATTEMPTED_TABLE_WIDTH_CHANGE"] = "attemptedTableWidthChange";
   TABLE_ACTION["DISTRIBUTED_COLUMNS_WIDTHS"] = "distributedColumnsWidths";
   TABLE_ACTION["FIXED"] = "fixed";
+  TABLE_ACTION["RESIZED"] = "resized";
   return TABLE_ACTION;
 }({});
 exports.TABLE_ACTION = TABLE_ACTION;

package/dist/cjs/guideline/dynamicGuideline.js

@@ -8,8 +8,8 @@ exports.generateDynamicGuidelines = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorUtils = require("prosemirror-utils");
+var _mediaSingle = require("../media-single");
 var _constants = require("./constants");
-var _types = require("./types");
 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) {
@@ -29,7 +29,7 @@ var generateDynamicGuidelines = function generateDynamicGuidelines(state, editor
       layout = _node$attrs.layout,
       width = _node$attrs.width,
       widthType = _node$attrs.widthType;
-    var pixelWidth = !widthType || widthType === _types.WidthTypes.PERCENTAGE ? width / 100 * editorWidth : width;
+    var pixelWidth = (0, _mediaSingle.getMediaSinglePixelWidth)(width, editorWidth, widthType);
     var commonStyles = {
       style: 'dashed',
       show: true

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

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = void 0;
+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 = 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;
 exports.MEDIA_SINGLE_SNAP_GAP = MEDIA_SINGLE_SNAP_GAP;
 var MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
-exports.MEDIA_SINGLE_HIGHLIGHT_GAP = MEDIA_SINGLE_HIGHLIGHT_GAP;
+exports.MEDIA_SINGLE_HIGHLIGHT_GAP = MEDIA_SINGLE_HIGHLIGHT_GAP;
+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;

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

@@ -21,4 +21,11 @@ Object.defineProperty(exports, "MEDIA_SINGLE_SNAP_GAP", {
     return _constants.MEDIA_SINGLE_SNAP_GAP;
   }
 });
-var _constants = require("./constants");
+Object.defineProperty(exports, "getMediaSinglePixelWidth", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getMediaSinglePixelWidth;
+  }
+});
+var _constants = require("./constants");
+var _utils = require("./utils");

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
+/**
+ * Convert media node width to pixel
+ *
+ * for legacy experience, image is aligned inside resize handle bar with a gap. So gutterOffset is used to for this use case.
+ * for new expereience, image is aligned with resize handle bar, so gutterOffset is 0
+ *
+ * @param width - media single node width
+ * @param editorWidth - width of editor
+ * @param widthType - width type is defined in the adf document for mediaSingle node, and it is assoicated with the `width`
+ * @param gutterOffset - resize handle bar offset, determines whether align with resize handle bar
+ * @returns pixel number for media single node
+ */
+function getMediaSinglePixelWidth(width, editorWidth) {
+  var widthType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'percentage';
+  var gutterOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  if (widthType === 'pixel') {
+    return width;
+  }
+  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}

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

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

@@ -10,28 +10,27 @@ exports.calcPxFromColumns = calcPxFromColumns;
 exports.calcPxFromPct = calcPxFromPct;
 exports.wrappedLayouts = exports.snapToGrid = exports.layoutSupportsWidth = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var handleMargin = 12;
-var gutterSize = handleMargin * 2;
+var _constants = require("../../media-single/constants");
 var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
 var layoutSupportsWidth = function layoutSupportsWidth(layout) {
   return validWidthModes.indexOf(layout) > -1;
 };
 exports.layoutSupportsWidth = layoutSupportsWidth;
 function calcPxFromColumns(columns, lineLength, gridSize) {
-  var maxWidth = lineLength + gutterSize;
-  return maxWidth / gridSize * columns - gutterSize;
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth / gridSize * columns - _constants.MEDIA_SINGLE_GUTTER_SIZE;
 }
 function calcColumnsFromPx(width, lineLength, gridSize) {
-  var maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) * gridSize / maxWidth;
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
 }
 function calcPxFromPct(pct, lineLength) {
-  var maxWidth = lineLength + gutterSize;
-  return maxWidth * pct - gutterSize;
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - _constants.MEDIA_SINGLE_GUTTER_SIZE;
 }
 function calcPctFromPx(width, lineLength) {
-  var maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) / maxWidth;
+  var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
 }
 var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 exports.wrappedLayouts = wrappedLayouts;

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

@@ -12,6 +12,8 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("../../media-single/constants");
+var _utils = require("../../media-single/utils");
 var _grid = require("./grid");
 var _styled = require("./styled");
 /** @jsx jsx */
@@ -46,22 +48,23 @@ function MediaSingle(_ref) {
     _ref$nodeType = _ref.nodeType,
     nodeType = _ref$nodeType === void 0 ? 'mediaSingle' : _ref$nodeType,
     fullWidthMode = _ref.fullWidthMode,
-    lineLength = _ref.lineLength,
+    editorWidth = _ref.lineLength,
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
+    // if width is not available, set to half of editor width
+    mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
   if (mediaSingleWidth) {
-    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil((0, _grid.calcPxFromPct)(mediaSingleWidth / 100, lineLength || containerWidth || 0));
+    var pxWidth = (0, _utils.getMediaSinglePixelWidth)(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, _constants.MEDIA_SINGLE_GUTTER_SIZE);
     if (isHeightOnly) {
       width = pxWidth - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {

package/dist/cjs/version.json

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

package/dist/es2019/analytics/types/table-events.js

@@ -21,6 +21,7 @@ export let TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["ATTEMPTED_TABLE_WIDTH_CHANGE"] = "attemptedTableWidthChange";
   TABLE_ACTION["DISTRIBUTED_COLUMNS_WIDTHS"] = "distributedColumnsWidths";
   TABLE_ACTION["FIXED"] = "fixed";
+  TABLE_ACTION["RESIZED"] = "resized";
   return TABLE_ACTION;
 }({});
 export let TABLE_BREAKOUT = /*#__PURE__*/function (TABLE_BREAKOUT) {

package/dist/es2019/guideline/dynamicGuideline.js

@@ -1,7 +1,7 @@
 import { NodeSelection } from 'prosemirror-state';
 import { findChildren } from 'prosemirror-utils';
+import { getMediaSinglePixelWidth } from '../media-single';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
-import { WidthTypes } from './types';
 export const generateDynamicGuidelines = (state, editorWidth) => {
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   const mediaSingleNode = findChildren(state.tr.doc, node => {
@@ -21,7 +21,7 @@ export const generateDynamicGuidelines = (state, editorWidth) => {
       width,
       widthType
     } = node.attrs;
-    const pixelWidth = !widthType || widthType === WidthTypes.PERCENTAGE ? width / 100 * editorWidth : width;
+    const pixelWidth = getMediaSinglePixelWidth(width, editorWidth, widthType);
     const commonStyles = {
       style: 'dashed',
       show: true

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

@@ -1,3 +1,5 @@
 export const MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
 export const MEDIA_SINGLE_SNAP_GAP = 3;
-export const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
+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;

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

@@ -1 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from './constants';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from './constants';
+export { getMediaSinglePixelWidth } from './utils';

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

@@ -0,0 +1,18 @@
+/**
+ * Convert media node width to pixel
+ *
+ * for legacy experience, image is aligned inside resize handle bar with a gap. So gutterOffset is used to for this use case.
+ * for new expereience, image is aligned with resize handle bar, so gutterOffset is 0
+ *
+ * @param width - media single node width
+ * @param editorWidth - width of editor
+ * @param widthType - width type is defined in the adf document for mediaSingle node, and it is assoicated with the `width`
+ * @param gutterOffset - resize handle bar offset, determines whether align with resize handle bar
+ * @returns pixel number for media single node
+ */
+export function getMediaSinglePixelWidth(width, editorWidth, widthType = 'percentage', gutterOffset = 0) {
+  if (widthType === 'pixel') {
+    return width;
+  }
+  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}

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

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

@@ -1,23 +1,22 @@
 import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-const handleMargin = 12;
-const gutterSize = handleMargin * 2;
+import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 const validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
 export const layoutSupportsWidth = layout => validWidthModes.indexOf(layout) > -1;
 export function calcPxFromColumns(columns, lineLength, gridSize) {
-  const maxWidth = lineLength + gutterSize;
-  return maxWidth / gridSize * columns - gutterSize;
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth / gridSize * columns - MEDIA_SINGLE_GUTTER_SIZE;
 }
 export function calcColumnsFromPx(width, lineLength, gridSize) {
-  const maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) * gridSize / maxWidth;
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
 }
 export function calcPxFromPct(pct, lineLength) {
-  const maxWidth = lineLength + gutterSize;
-  return maxWidth * pct - gutterSize;
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
 }
 export function calcPctFromPx(width, lineLength) {
-  const maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) / maxWidth;
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  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));

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

@@ -3,7 +3,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { calcPxFromPct, wrappedLayouts } from './grid';
+import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
+import { getMediaSinglePixelWidth } from '../../media-single/utils';
+import { wrappedLayouts } from './grid';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
@@ -28,22 +30,23 @@ export default function MediaSingle({
   children: propsChildren,
   nodeType = 'mediaSingle',
   fullWidthMode,
-  lineLength,
+  lineLength: editorWidth,
   hasFallbackContainer = true,
   handleMediaSingleRef
 }) {
   const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   const children = React.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
+    // if width is not available, set to half of editor width
+    mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   const isHeightOnly = width === undefined;
   if (mediaSingleWidth) {
-    const pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
+    const pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, MEDIA_SINGLE_GUTTER_SIZE);
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {

package/dist/es2019/version.json

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

package/dist/esm/analytics/types/table-events.js

@@ -21,6 +21,7 @@ export var TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["ATTEMPTED_TABLE_WIDTH_CHANGE"] = "attemptedTableWidthChange";
   TABLE_ACTION["DISTRIBUTED_COLUMNS_WIDTHS"] = "distributedColumnsWidths";
   TABLE_ACTION["FIXED"] = "fixed";
+  TABLE_ACTION["RESIZED"] = "resized";
   return TABLE_ACTION;
 }({});
 export var TABLE_BREAKOUT = /*#__PURE__*/function (TABLE_BREAKOUT) {

package/dist/esm/guideline/dynamicGuideline.js

@@ -3,8 +3,8 @@ 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 'prosemirror-state';
 import { findChildren } from 'prosemirror-utils';
+import { getMediaSinglePixelWidth } from '../media-single';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
-import { WidthTypes } from './types';
 export var generateDynamicGuidelines = function generateDynamicGuidelines(state, editorWidth) {
   var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   var mediaSingleNode = findChildren(state.tr.doc, function (node) {
@@ -22,7 +22,7 @@ export var generateDynamicGuidelines = function generateDynamicGuidelines(state,
       layout = _node$attrs.layout,
       width = _node$attrs.width,
       widthType = _node$attrs.widthType;
-    var pixelWidth = !widthType || widthType === WidthTypes.PERCENTAGE ? width / 100 * editorWidth : width;
+    var pixelWidth = getMediaSinglePixelWidth(width, editorWidth, widthType);
     var commonStyles = {
       style: 'dashed',
       show: true

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

@@ -1,3 +1,5 @@
 export var MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
 export var MEDIA_SINGLE_SNAP_GAP = 3;
-export var MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
+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;

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

@@ -1 +1,2 @@
-export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from './constants';
+export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from './constants';
+export { getMediaSinglePixelWidth } from './utils';

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

@@ -0,0 +1,20 @@
+/**
+ * Convert media node width to pixel
+ *
+ * for legacy experience, image is aligned inside resize handle bar with a gap. So gutterOffset is used to for this use case.
+ * for new expereience, image is aligned with resize handle bar, so gutterOffset is 0
+ *
+ * @param width - media single node width
+ * @param editorWidth - width of editor
+ * @param widthType - width type is defined in the adf document for mediaSingle node, and it is assoicated with the `width`
+ * @param gutterOffset - resize handle bar offset, determines whether align with resize handle bar
+ * @returns pixel number for media single node
+ */
+export function getMediaSinglePixelWidth(width, editorWidth) {
+  var widthType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'percentage';
+  var gutterOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  if (widthType === 'pixel') {
+    return width;
+  }
+  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
+}

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

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

@@ -1,25 +1,24 @@
 import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-var handleMargin = 12;
-var gutterSize = handleMargin * 2;
+import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
 export var layoutSupportsWidth = function layoutSupportsWidth(layout) {
   return validWidthModes.indexOf(layout) > -1;
 };
 export function calcPxFromColumns(columns, lineLength, gridSize) {
-  var maxWidth = lineLength + gutterSize;
-  return maxWidth / gridSize * columns - gutterSize;
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth / gridSize * columns - MEDIA_SINGLE_GUTTER_SIZE;
 }
 export function calcColumnsFromPx(width, lineLength, gridSize) {
-  var maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) * gridSize / maxWidth;
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
 }
 export function calcPxFromPct(pct, lineLength) {
-  var maxWidth = lineLength + gutterSize;
-  return maxWidth * pct - gutterSize;
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
 }
 export function calcPctFromPx(width, lineLength) {
-  var maxWidth = lineLength + gutterSize;
-  return (width + gutterSize) / maxWidth;
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  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) {

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

@@ -4,7 +4,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { calcPxFromPct, wrappedLayouts } from './grid';
+import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
+import { getMediaSinglePixelWidth } from '../../media-single/utils';
+import { wrappedLayouts } from './grid';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
@@ -32,22 +34,23 @@ export default function MediaSingle(_ref) {
     _ref$nodeType = _ref.nodeType,
     nodeType = _ref$nodeType === void 0 ? 'mediaSingle' : _ref$nodeType,
     fullWidthMode = _ref.fullWidthMode,
-    lineLength = _ref.lineLength,
+    editorWidth = _ref.lineLength,
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
     handleMediaSingleRef = _ref.handleMediaSingleRef;
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = React.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
-    mediaSingleWidth = isPixelWidth ? lineLength / 2 : 50;
+  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
+    // if width is not available, set to half of editor width
+    mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }
   // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
   var isHeightOnly = width === undefined;
   if (mediaSingleWidth) {
-    var pxWidth = isPixelWidth ? mediaSingleWidth : Math.ceil(calcPxFromPct(mediaSingleWidth / 100, lineLength || containerWidth || 0));
+    var pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, MEDIA_SINGLE_GUTTER_SIZE);
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {

package/dist/esm/version.json

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

package/dist/types/analytics/types/table-events.d.ts

@@ -22,7 +22,8 @@ export declare enum TABLE_ACTION {
     REPLACED = "replaced",
     ATTEMPTED_TABLE_WIDTH_CHANGE = "attemptedTableWidthChange",
     DISTRIBUTED_COLUMNS_WIDTHS = "distributedColumnsWidths",
-    FIXED = "fixed"
+    FIXED = "fixed",
+    RESIZED = "resized"
 }
 export declare enum TABLE_BREAKOUT {
     WIDE = "wide",
@@ -50,6 +51,12 @@ type AttemptedResizeInfo = {
     duration: number;
     delta: number;
 };
+type ResizedInfo = {
+    prevWidth: number | null;
+    newWidth: number;
+    totalTableWidth: number | null;
+    nodeSize: number;
+} & TotalRowAndColCount;
 type TableDeleteAEP = TableAEP<TABLE_ACTION.DELETED, {
     inputMethod: INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB;
 } & TotalRowAndColCount, undefined>;
@@ -98,5 +105,6 @@ type TableCollapsedAEP = TableAEP<TABLE_ACTION.COLLAPSED, TotalRowAndColCount, u
 type TableFixedAEP = TableAEP<TABLE_ACTION.FIXED, {
     reason: string;
 }, undefined>;
-export type TableEventPayload = TableDeleteAEP | TableClearAEP | TableMergeSplitAEP | TableColorAEP | TableToggleHeaderAEP | TableChangeBreakoutAEP | TableCopyAndCutAEP | TableAddRowOrColumnAEP | TableSortColumnAEP | TableDeleteRowOrColumnAEP | TableReplaceAEP | TableAttemptedResizeAEP | TableDistributeColumnsWidthsAEP | TableCollapsedAEP | TableFixedAEP;
+type TableResizedAEP = TableAEP<TABLE_ACTION.RESIZED, ResizedInfo, undefined>;
+export type TableEventPayload = TableDeleteAEP | TableClearAEP | TableMergeSplitAEP | TableColorAEP | TableToggleHeaderAEP | TableChangeBreakoutAEP | TableCopyAndCutAEP | TableAddRowOrColumnAEP | TableSortColumnAEP | TableDeleteRowOrColumnAEP | TableReplaceAEP | TableAttemptedResizeAEP | TableDistributeColumnsWidthsAEP | TableCollapsedAEP | TableFixedAEP | TableResizedAEP;
 export {};

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

@@ -1,3 +1,5 @@
 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;

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

@@ -1 +1,2 @@
 export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, } from './constants';
+export { getMediaSinglePixelWidth } from './utils';

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

@@ -0,0 +1,13 @@
+/**
+ * Convert media node width to pixel
+ *
+ * for legacy experience, image is aligned inside resize handle bar with a gap. So gutterOffset is used to for this use case.
+ * for new expereience, image is aligned with resize handle bar, so gutterOffset is 0
+ *
+ * @param width - media single node width
+ * @param editorWidth - width of editor
+ * @param widthType - width type is defined in the adf document for mediaSingle node, and it is assoicated with the `width`
+ * @param gutterOffset - resize handle bar offset, determines whether align with resize handle bar
+ * @returns pixel number for media single node
+ */
+export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;

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

@@ -29,4 +29,4 @@ export interface Props {
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export type { MediaSingleWidthType, MediaSingleSize };
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types-ts4.5/analytics/types/table-events.d.ts

@@ -22,7 +22,8 @@ export declare enum TABLE_ACTION {
     REPLACED = "replaced",
     ATTEMPTED_TABLE_WIDTH_CHANGE = "attemptedTableWidthChange",
     DISTRIBUTED_COLUMNS_WIDTHS = "distributedColumnsWidths",
-    FIXED = "fixed"
+    FIXED = "fixed",
+    RESIZED = "resized"
 }
 export declare enum TABLE_BREAKOUT {
     WIDE = "wide",
@@ -50,6 +51,12 @@ type AttemptedResizeInfo = {
     duration: number;
     delta: number;
 };
+type ResizedInfo = {
+    prevWidth: number | null;
+    newWidth: number;
+    totalTableWidth: number | null;
+    nodeSize: number;
+} & TotalRowAndColCount;
 type TableDeleteAEP = TableAEP<TABLE_ACTION.DELETED, {
     inputMethod: INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB;
 } & TotalRowAndColCount, undefined>;
@@ -98,5 +105,6 @@ type TableCollapsedAEP = TableAEP<TABLE_ACTION.COLLAPSED, TotalRowAndColCount, u
 type TableFixedAEP = TableAEP<TABLE_ACTION.FIXED, {
     reason: string;
 }, undefined>;
-export type TableEventPayload = TableDeleteAEP | TableClearAEP | TableMergeSplitAEP | TableColorAEP | TableToggleHeaderAEP | TableChangeBreakoutAEP | TableCopyAndCutAEP | TableAddRowOrColumnAEP | TableSortColumnAEP | TableDeleteRowOrColumnAEP | TableReplaceAEP | TableAttemptedResizeAEP | TableDistributeColumnsWidthsAEP | TableCollapsedAEP | TableFixedAEP;
+type TableResizedAEP = TableAEP<TABLE_ACTION.RESIZED, ResizedInfo, undefined>;
+export type TableEventPayload = TableDeleteAEP | TableClearAEP | TableMergeSplitAEP | TableColorAEP | TableToggleHeaderAEP | TableChangeBreakoutAEP | TableCopyAndCutAEP | TableAddRowOrColumnAEP | TableSortColumnAEP | TableDeleteRowOrColumnAEP | TableReplaceAEP | TableAttemptedResizeAEP | TableDistributeColumnsWidthsAEP | TableCollapsedAEP | TableFixedAEP | TableResizedAEP;
 export {};

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

@@ -1,3 +1,5 @@
 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;

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

@@ -1 +1,2 @@
 export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, } from './constants';
+export { getMediaSinglePixelWidth } from './utils';

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

@@ -0,0 +1,13 @@
+/**
+ * Convert media node width to pixel
+ *
+ * for legacy experience, image is aligned inside resize handle bar with a gap. So gutterOffset is used to for this use case.
+ * for new expereience, image is aligned with resize handle bar, so gutterOffset is 0
+ *
+ * @param width - media single node width
+ * @param editorWidth - width of editor
+ * @param widthType - width type is defined in the adf document for mediaSingle node, and it is assoicated with the `width`
+ * @param gutterOffset - resize handle bar offset, determines whether align with resize handle bar
+ * @returns pixel number for media single node
+ */
+export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;

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

@@ -29,4 +29,4 @@ export interface Props {
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export type { MediaSingleWidthType, MediaSingleSize };
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.26.8",
+  "version": "74.27.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -78,7 +78,7 @@
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.4.0",
-    "@atlaskit/adf-schema": "^26.2.0",
+    "@atlaskit/adf-schema": "^26.3.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",