@atlaskit/editor-common 74.34.3 → 74.34.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/media-single/constants.js +8 -2
  3. package/dist/cjs/media-single/index.js +42 -0
  4. package/dist/cjs/media-single/utils.js +94 -0
  5. package/dist/cjs/monitoring/error.js +1 -1
  6. package/dist/cjs/ui/DropList/index.js +1 -1
  7. package/dist/cjs/ui/MediaSingle/index.js +1 -6
  8. package/dist/cjs/ui/MediaSingle/styled.js +2 -3
  9. package/dist/cjs/ui/index.js +0 -12
  10. package/dist/cjs/version.json +1 -1
  11. package/dist/es2019/media-single/constants.js +4 -1
  12. package/dist/es2019/media-single/index.js +2 -2
  13. package/dist/es2019/media-single/utils.js +86 -0
  14. package/dist/es2019/monitoring/error.js +1 -1
  15. package/dist/es2019/ui/DropList/index.js +1 -1
  16. package/dist/es2019/ui/MediaSingle/index.js +0 -3
  17. package/dist/es2019/ui/MediaSingle/styled.js +2 -3
  18. package/dist/es2019/ui/index.js +1 -1
  19. package/dist/es2019/version.json +1 -1
  20. package/dist/esm/media-single/constants.js +4 -1
  21. package/dist/esm/media-single/index.js +2 -2
  22. package/dist/esm/media-single/utils.js +90 -0
  23. package/dist/esm/monitoring/error.js +1 -1
  24. package/dist/esm/ui/DropList/index.js +1 -1
  25. package/dist/esm/ui/MediaSingle/index.js +0 -3
  26. package/dist/esm/ui/MediaSingle/styled.js +2 -3
  27. package/dist/esm/ui/index.js +1 -1
  28. package/dist/esm/version.json +1 -1
  29. package/dist/types/media-single/constants.d.ts +4 -0
  30. package/dist/types/media-single/index.d.ts +2 -2
  31. package/dist/types/media-single/utils.d.ts +35 -0
  32. package/dist/types/ui/MediaSingle/grid.d.ts +1 -1
  33. package/dist/types/ui/MediaSingle/index.d.ts +0 -2
  34. package/dist/types/ui/index.d.ts +1 -1
  35. package/dist/types-ts4.5/media-single/constants.d.ts +4 -0
  36. package/dist/types-ts4.5/media-single/index.d.ts +2 -2
  37. package/dist/types-ts4.5/media-single/utils.d.ts +35 -0
  38. package/dist/types-ts4.5/ui/MediaSingle/grid.d.ts +1 -1
  39. package/dist/types-ts4.5/ui/MediaSingle/index.d.ts +0 -2
  40. package/dist/types-ts4.5/ui/index.d.ts +1 -1
  41. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 74.34.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0d297244de3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d297244de3) - Add calcMediaSingleMaxWidth, move default image constants to /media-single
8
+
3
9
  ## 74.34.3
4
10
 
5
11
  ### Patch Changes
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- 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;
6
+ 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;
7
7
  var MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
8
8
  exports.MEDIA_SINGLE_MIN_PIXEL_WIDTH = MEDIA_SINGLE_MIN_PIXEL_WIDTH;
9
9
  var MEDIA_SINGLE_SNAP_GAP = 3;
@@ -14,6 +14,10 @@ var MEDIA_SINGLE_HANDLE_MARGIN = 12;
14
14
  exports.MEDIA_SINGLE_HANDLE_MARGIN = MEDIA_SINGLE_HANDLE_MARGIN;
15
15
  var MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
16
16
  exports.MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_GUTTER_SIZE;
17
+ var DEFAULT_IMAGE_WIDTH = 250;
18
+ exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
19
+ var DEFAULT_IMAGE_HEIGHT = 200;
20
+ exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
17
21
  var Layout = /*#__PURE__*/function (Layout) {
18
22
  Layout["FULL_WIDTH"] = "full-width";
19
23
  Layout["WIDE"] = "wide";
@@ -24,4 +28,6 @@ var Layout = /*#__PURE__*/function (Layout) {
24
28
  Layout["WRAP_LEFT"] = "wrap-left";
25
29
  return Layout;
26
30
  }({});
27
- exports.Layout = Layout;
31
+ exports.Layout = Layout;
32
+ var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
33
+ exports.wrappedLayouts = wrappedLayouts;
@@ -3,6 +3,24 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _constants.DEFAULT_IMAGE_HEIGHT;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _constants.DEFAULT_IMAGE_WIDTH;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "MEDIA_SINGLE_GUTTER_SIZE", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _constants.MEDIA_SINGLE_GUTTER_SIZE;
22
+ }
23
+ });
6
24
  Object.defineProperty(exports, "MEDIA_SINGLE_HIGHLIGHT_GAP", {
7
25
  enumerable: true,
8
26
  get: function get() {
@@ -27,17 +45,41 @@ Object.defineProperty(exports, "MediaSingleLayout", {
27
45
  return _constants.Layout;
28
46
  }
29
47
  });
48
+ Object.defineProperty(exports, "calcMediaSingleMaxWidth", {
49
+ enumerable: true,
50
+ get: function get() {
51
+ return _utils.calcMediaSingleMaxWidth;
52
+ }
53
+ });
54
+ Object.defineProperty(exports, "calcMediaSinglePixelWidth", {
55
+ enumerable: true,
56
+ get: function get() {
57
+ return _utils.calcMediaSinglePixelWidth;
58
+ }
59
+ });
30
60
  Object.defineProperty(exports, "calculateOffsetLeft", {
31
61
  enumerable: true,
32
62
  get: function get() {
33
63
  return _utils.calculateOffsetLeft;
34
64
  }
35
65
  });
66
+ Object.defineProperty(exports, "getMediaSingleInitialWidth", {
67
+ enumerable: true,
68
+ get: function get() {
69
+ return _utils.getMediaSingleInitialWidth;
70
+ }
71
+ });
36
72
  Object.defineProperty(exports, "getMediaSinglePixelWidth", {
37
73
  enumerable: true,
38
74
  get: function get() {
39
75
  return _utils.getMediaSinglePixelWidth;
40
76
  }
41
77
  });
78
+ Object.defineProperty(exports, "wrappedLayouts", {
79
+ enumerable: true,
80
+ get: function get() {
81
+ return _constants.wrappedLayouts;
82
+ }
83
+ });
42
84
  var _constants = require("./constants");
43
85
  var _utils = require("./utils");
@@ -3,8 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.calcMediaSinglePixelWidth = exports.calcMediaSingleMaxWidth = void 0;
6
7
  exports.calculateOffsetLeft = calculateOffsetLeft;
8
+ exports.getMediaSingleInitialWidth = void 0;
7
9
  exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
10
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
+ var _constants = require("./constants");
8
12
  /**
9
13
  * Convert media node width to pixel
10
14
  *
@@ -25,6 +29,96 @@ function getMediaSinglePixelWidth(width, editorWidth) {
25
29
  }
26
30
  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
27
31
  }
32
+ /**
33
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
34
+ * @param width node width attribute
35
+ * @param widthType node widthType attribute
36
+ * @param origWidth original media width
37
+ * @param layout node layout attribute
38
+ * @param contentWidth editor content width
39
+ * @param containerWidth editor container width
40
+ * @param gutterOffset gap between resizer handle and media
41
+ * @returns pixel width of the node
42
+ */
43
+ var calcMediaSinglePixelWidth = function calcMediaSinglePixelWidth(_ref) {
44
+ var width = _ref.width,
45
+ _ref$widthType = _ref.widthType,
46
+ widthType = _ref$widthType === void 0 ? 'percentage' : _ref$widthType,
47
+ origWidth = _ref.origWidth,
48
+ layout = _ref.layout,
49
+ contentWidth = _ref.contentWidth,
50
+ containerWidth = _ref.containerWidth,
51
+ _ref$gutterOffset = _ref.gutterOffset,
52
+ gutterOffset = _ref$gutterOffset === void 0 ? 0 : _ref$gutterOffset;
53
+ if (widthType === 'pixel' && width) {
54
+ return width;
55
+ }
56
+ switch (layout) {
57
+ case 'wide':
58
+ return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
59
+ case 'full-width':
60
+ // legacy and new experience have different definitions of full-width,
61
+ // since it's for new experience, we convert to the new definition
62
+ return calcMediaSingleMaxWidth(containerWidth);
63
+ default:
64
+ if (width) {
65
+ return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
66
+ }
67
+ }
68
+
69
+ // Handle the case of not resized node with wrapped layout
70
+ // It's possible that the node is first inserted with align layout (e.g. jira)
71
+ // in which the legacy image would render the width as min(origWidth, halfContentWidth).
72
+ // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
73
+ // to make sure confluence legacy node is renderered correctly
74
+ if (_constants.wrappedLayouts.includes(layout)) {
75
+ return Math.ceil((contentWidth || containerWidth) / 2);
76
+ }
77
+
78
+ // set initial width for not resized legacy image
79
+ return getMediaSingleInitialWidth(origWidth,
80
+ // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
81
+ contentWidth || containerWidth || undefined);
82
+ };
83
+
84
+ /**
85
+ * Calculate pixel width for legacy media single
86
+ * @param contentWidth editor content width
87
+ * @param containerWidth editor container width
88
+ */
89
+ exports.calcMediaSinglePixelWidth = calcMediaSinglePixelWidth;
90
+ var calcLegacyWideWidth = function calcLegacyWideWidth(containerWidth, origWidth, contentWidth) {
91
+ if (contentWidth) {
92
+ var wideWidth = Math.ceil(contentWidth * _editorSharedStyles.breakoutWideScaleRatio);
93
+ return wideWidth > containerWidth ? contentWidth : wideWidth;
94
+ }
95
+ return origWidth;
96
+ };
97
+
98
+ /**
99
+ * Calculate maximum width allowed for media single in new experience
100
+ * @param containerWidth width of editor container
101
+ */
102
+ var calcMediaSingleMaxWidth = function calcMediaSingleMaxWidth(containerWidth) {
103
+ var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
104
+ return Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth);
105
+ };
106
+
107
+ /**
108
+ * Calculate initial media single pixel width.
109
+ * Make it fall between max width and min width
110
+ * @param origWidth original width of image (media node width)
111
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
112
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
113
+ */
114
+ exports.calcMediaSingleMaxWidth = calcMediaSingleMaxWidth;
115
+ var getMediaSingleInitialWidth = function getMediaSingleInitialWidth() {
116
+ var origWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.DEFAULT_IMAGE_WIDTH;
117
+ var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorDefaultLayoutWidth;
118
+ var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.MEDIA_SINGLE_MIN_PIXEL_WIDTH;
119
+ return Math.max(Math.min(origWidth, maxWidth), minWidth);
120
+ };
121
+ exports.getMediaSingleInitialWidth = getMediaSingleInitialWidth;
28
122
  function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
29
123
  var offsetLeft = 0;
30
124
  if (wrapper && insideInlineLike && !insideLayout) {
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  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; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "74.34.3";
19
+ var packageVersion = "74.34.4";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
24
24
  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); }; }
25
25
  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 */
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "74.34.3";
27
+ var packageVersion = "74.34.4";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.IMAGE_AND_BORDER_ADJUSTMENT = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
7
+ exports.IMAGE_AND_BORDER_ADJUSTMENT = void 0;
8
8
  exports.default = MediaSingle;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireDefault(require("react"));
@@ -17,15 +17,10 @@ var _richMediaUtils = require("../../utils/rich-media-utils");
17
17
  var _styled = require("./styled");
18
18
  /** @jsx jsx */
19
19
 
20
- var DEFAULT_IMAGE_WIDTH = 250;
21
- exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
22
- var DEFAULT_IMAGE_HEIGHT = 200;
23
-
24
20
  /*
25
21
  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.
26
22
  Read more: https://product-fabric.atlassian.net/browse/MEX-2481
27
23
  */
28
- exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
29
24
  var IMAGE_AND_BORDER_ADJUSTMENT = 2;
30
25
  exports.IMAGE_AND_BORDER_ADJUSTMENT = IMAGE_AND_BORDER_ADJUSTMENT;
31
26
  function MediaSingle(_ref) {
@@ -13,6 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
13
13
  var _react = _interopRequireDefault(require("react"));
14
14
  var _react2 = require("@emotion/react");
15
15
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
+ var _mediaSingle = require("../../media-single");
16
17
  var _utils = require("../../utils");
17
18
  var _breakout = require("../../utils/breakout");
18
19
  var _excluded = ["children"];
@@ -92,9 +93,7 @@ var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullW
92
93
  if (fullWidthMode) {
93
94
  return '100%';
94
95
  }
95
- // There is always padding for renderer, so we don't need padding for it
96
- var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
97
- return "".concat(Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px");
96
+ return "".concat((0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth), "px");
98
97
  };
99
98
  var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
100
99
  if (isNestedNode) {
@@ -47,18 +47,6 @@ Object.defineProperty(exports, "ContextPanelWidthProvider", {
47
47
  return _context.ContextPanelWidthProvider;
48
48
  }
49
49
  });
50
- Object.defineProperty(exports, "DEFAULT_IMAGE_HEIGHT", {
51
- enumerable: true,
52
- get: function get() {
53
- return _MediaSingle.DEFAULT_IMAGE_HEIGHT;
54
- }
55
- });
56
- Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
57
- enumerable: true,
58
- get: function get() {
59
- return _MediaSingle.DEFAULT_IMAGE_WIDTH;
60
- }
61
- });
62
50
  Object.defineProperty(exports, "EDIT_AREA_ID", {
63
51
  enumerable: true,
64
52
  get: function get() {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.34.3",
3
+ "version": "74.34.4",
4
4
  "sideEffects": false
5
5
  }
@@ -3,6 +3,8 @@ export const MEDIA_SINGLE_SNAP_GAP = 3;
3
3
  export const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
4
4
  export const MEDIA_SINGLE_HANDLE_MARGIN = 12;
5
5
  export const MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
6
+ export const DEFAULT_IMAGE_WIDTH = 250;
7
+ export const DEFAULT_IMAGE_HEIGHT = 200;
6
8
  export let Layout = /*#__PURE__*/function (Layout) {
7
9
  Layout["FULL_WIDTH"] = "full-width";
8
10
  Layout["WIDE"] = "wide";
@@ -12,4 +14,5 @@ export let Layout = /*#__PURE__*/function (Layout) {
12
14
  Layout["WRAP_RIGHT"] = "wrap-right";
13
15
  Layout["WRAP_LEFT"] = "wrap-left";
14
16
  return Layout;
15
- }({});
17
+ }({});
18
+ export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -1,2 +1,2 @@
1
- export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout } from './constants';
2
- export { getMediaSinglePixelWidth, calculateOffsetLeft } from './utils';
1
+ 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';
2
+ export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';
@@ -1,3 +1,6 @@
1
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
2
+ import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
3
+
1
4
  /**
2
5
  * Convert media node width to pixel
3
6
  *
@@ -16,6 +19,89 @@ export function getMediaSinglePixelWidth(width, editorWidth, widthType = 'percen
16
19
  }
17
20
  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
18
21
  }
22
+ /**
23
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
24
+ * @param width node width attribute
25
+ * @param widthType node widthType attribute
26
+ * @param origWidth original media width
27
+ * @param layout node layout attribute
28
+ * @param contentWidth editor content width
29
+ * @param containerWidth editor container width
30
+ * @param gutterOffset gap between resizer handle and media
31
+ * @returns pixel width of the node
32
+ */
33
+ export const calcMediaSinglePixelWidth = ({
34
+ width,
35
+ widthType = 'percentage',
36
+ origWidth,
37
+ layout,
38
+ contentWidth,
39
+ containerWidth,
40
+ gutterOffset = 0
41
+ }) => {
42
+ if (widthType === 'pixel' && width) {
43
+ return width;
44
+ }
45
+ switch (layout) {
46
+ case 'wide':
47
+ return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
48
+ case 'full-width':
49
+ // legacy and new experience have different definitions of full-width,
50
+ // since it's for new experience, we convert to the new definition
51
+ return calcMediaSingleMaxWidth(containerWidth);
52
+ default:
53
+ if (width) {
54
+ return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
55
+ }
56
+ }
57
+
58
+ // Handle the case of not resized node with wrapped layout
59
+ // It's possible that the node is first inserted with align layout (e.g. jira)
60
+ // in which the legacy image would render the width as min(origWidth, halfContentWidth).
61
+ // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
62
+ // to make sure confluence legacy node is renderered correctly
63
+ if (wrappedLayouts.includes(layout)) {
64
+ return Math.ceil((contentWidth || containerWidth) / 2);
65
+ }
66
+
67
+ // set initial width for not resized legacy image
68
+ return getMediaSingleInitialWidth(origWidth,
69
+ // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
70
+ contentWidth || containerWidth || undefined);
71
+ };
72
+
73
+ /**
74
+ * Calculate pixel width for legacy media single
75
+ * @param contentWidth editor content width
76
+ * @param containerWidth editor container width
77
+ */
78
+ const calcLegacyWideWidth = (containerWidth, origWidth, contentWidth) => {
79
+ if (contentWidth) {
80
+ const wideWidth = Math.ceil(contentWidth * breakoutWideScaleRatio);
81
+ return wideWidth > containerWidth ? contentWidth : wideWidth;
82
+ }
83
+ return origWidth;
84
+ };
85
+
86
+ /**
87
+ * Calculate maximum width allowed for media single in new experience
88
+ * @param containerWidth width of editor container
89
+ */
90
+ export const calcMediaSingleMaxWidth = containerWidth => {
91
+ const fullWidthPadding = akEditorGutterPadding * 2;
92
+ return Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth);
93
+ };
94
+
95
+ /**
96
+ * Calculate initial media single pixel width.
97
+ * Make it fall between max width and min width
98
+ * @param origWidth original width of image (media node width)
99
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
100
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
101
+ */
102
+ export const getMediaSingleInitialWidth = (origWidth = DEFAULT_IMAGE_WIDTH, maxWidth = akEditorDefaultLayoutWidth, minWidth = MEDIA_SINGLE_MIN_PIXEL_WIDTH) => {
103
+ return Math.max(Math.min(origWidth, maxWidth), minWidth);
104
+ };
19
105
  export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
20
106
  let offsetLeft = 0;
21
107
  if (wrapper && insideInlineLike && !insideLayout) {
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "74.34.3";
3
+ const packageVersion = "74.34.4";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import Layer from '../Layer';
10
10
  const packageName = "@atlaskit/editor-common";
11
- const packageVersion = "74.34.3";
11
+ const packageVersion = "74.34.4";
12
12
  const halfFocusRing = 1;
13
13
  const dropOffset = '0, 8';
14
14
  class DropList extends Component {
@@ -7,9 +7,6 @@ import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
7
7
  import { getMediaSinglePixelWidth } from '../../media-single/utils';
8
8
  import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
9
9
  import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
10
- export const DEFAULT_IMAGE_WIDTH = 250;
11
- export const DEFAULT_IMAGE_HEIGHT = 200;
12
-
13
10
  /*
14
11
  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.
15
12
  Read more: https://product-fabric.atlassian.net/browse/MEX-2481
@@ -2,6 +2,7 @@
2
2
  import React from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
5
+ import { calcMediaSingleMaxWidth } from '../../media-single';
5
6
  import { nonWrappedLayouts } from '../../utils';
6
7
  import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
7
8
  function float(layout) {
@@ -74,9 +75,7 @@ const getEffectiveFullWidth = (containerWidth, fullWidthMode) => {
74
75
  if (fullWidthMode) {
75
76
  return '100%';
76
77
  }
77
- // There is always padding for renderer, so we don't need padding for it
78
- const fullWidthPadding = akEditorGutterPadding * 2;
79
- return `${Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth)}px`;
78
+ return `${calcMediaSingleMaxWidth(containerWidth)}px`;
80
79
  };
81
80
  const calcMaxWidthWhenResizing = (containerWidth, fullWidthMode, isNestedNode) => {
82
81
  if (isNestedNode) {
@@ -1,5 +1,5 @@
1
1
  export { default as Caption } from './Caption';
2
- export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
2
+ export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
3
3
  export { MediaSingleDimensionHelper } from './MediaSingle/styled';
4
4
  export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
5
5
  export { mediaLinkStyle } from './MediaSingle/link';
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.34.3",
3
+ "version": "74.34.4",
4
4
  "sideEffects": false
5
5
  }
@@ -3,6 +3,8 @@ export var MEDIA_SINGLE_SNAP_GAP = 3;
3
3
  export var MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
4
4
  export var MEDIA_SINGLE_HANDLE_MARGIN = 12;
5
5
  export var MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
6
+ export var DEFAULT_IMAGE_WIDTH = 250;
7
+ export var DEFAULT_IMAGE_HEIGHT = 200;
6
8
  export var Layout = /*#__PURE__*/function (Layout) {
7
9
  Layout["FULL_WIDTH"] = "full-width";
8
10
  Layout["WIDE"] = "wide";
@@ -12,4 +14,5 @@ export var Layout = /*#__PURE__*/function (Layout) {
12
14
  Layout["WRAP_RIGHT"] = "wrap-right";
13
15
  Layout["WRAP_LEFT"] = "wrap-left";
14
16
  return Layout;
15
- }({});
17
+ }({});
18
+ export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -1,2 +1,2 @@
1
- export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout } from './constants';
2
- export { getMediaSinglePixelWidth, calculateOffsetLeft } from './utils';
1
+ 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';
2
+ export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft } from './utils';
@@ -1,3 +1,6 @@
1
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
2
+ import { DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_MIN_PIXEL_WIDTH, wrappedLayouts } from './constants';
3
+
1
4
  /**
2
5
  * Convert media node width to pixel
3
6
  *
@@ -18,6 +21,93 @@ export function getMediaSinglePixelWidth(width, editorWidth) {
18
21
  }
19
22
  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
20
23
  }
24
+ /**
25
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
26
+ * @param width node width attribute
27
+ * @param widthType node widthType attribute
28
+ * @param origWidth original media width
29
+ * @param layout node layout attribute
30
+ * @param contentWidth editor content width
31
+ * @param containerWidth editor container width
32
+ * @param gutterOffset gap between resizer handle and media
33
+ * @returns pixel width of the node
34
+ */
35
+ export var calcMediaSinglePixelWidth = function calcMediaSinglePixelWidth(_ref) {
36
+ var width = _ref.width,
37
+ _ref$widthType = _ref.widthType,
38
+ widthType = _ref$widthType === void 0 ? 'percentage' : _ref$widthType,
39
+ origWidth = _ref.origWidth,
40
+ layout = _ref.layout,
41
+ contentWidth = _ref.contentWidth,
42
+ containerWidth = _ref.containerWidth,
43
+ _ref$gutterOffset = _ref.gutterOffset,
44
+ gutterOffset = _ref$gutterOffset === void 0 ? 0 : _ref$gutterOffset;
45
+ if (widthType === 'pixel' && width) {
46
+ return width;
47
+ }
48
+ switch (layout) {
49
+ case 'wide':
50
+ return calcLegacyWideWidth(containerWidth, origWidth, contentWidth);
51
+ case 'full-width':
52
+ // legacy and new experience have different definitions of full-width,
53
+ // since it's for new experience, we convert to the new definition
54
+ return calcMediaSingleMaxWidth(containerWidth);
55
+ default:
56
+ if (width) {
57
+ return Math.ceil(((contentWidth || containerWidth) + gutterOffset) * (width / 100) - gutterOffset);
58
+ }
59
+ }
60
+
61
+ // Handle the case of not resized node with wrapped layout
62
+ // It's possible that the node is first inserted with align layout (e.g. jira)
63
+ // in which the legacy image would render the width as min(origWidth, halfContentWidth).
64
+ // However, new experience won't be able to distinguish the two. Thus, we render halfContentWidth
65
+ // to make sure confluence legacy node is renderered correctly
66
+ if (wrappedLayouts.includes(layout)) {
67
+ return Math.ceil((contentWidth || containerWidth) / 2);
68
+ }
69
+
70
+ // set initial width for not resized legacy image
71
+ return getMediaSingleInitialWidth(origWidth,
72
+ // in case containerWidth is 0, we fallback to undefined to use akEditorDefaultLayoutWidth
73
+ contentWidth || containerWidth || undefined);
74
+ };
75
+
76
+ /**
77
+ * Calculate pixel width for legacy media single
78
+ * @param contentWidth editor content width
79
+ * @param containerWidth editor container width
80
+ */
81
+ var calcLegacyWideWidth = function calcLegacyWideWidth(containerWidth, origWidth, contentWidth) {
82
+ if (contentWidth) {
83
+ var wideWidth = Math.ceil(contentWidth * breakoutWideScaleRatio);
84
+ return wideWidth > containerWidth ? contentWidth : wideWidth;
85
+ }
86
+ return origWidth;
87
+ };
88
+
89
+ /**
90
+ * Calculate maximum width allowed for media single in new experience
91
+ * @param containerWidth width of editor container
92
+ */
93
+ export var calcMediaSingleMaxWidth = function calcMediaSingleMaxWidth(containerWidth) {
94
+ var fullWidthPadding = akEditorGutterPadding * 2;
95
+ return Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth);
96
+ };
97
+
98
+ /**
99
+ * Calculate initial media single pixel width.
100
+ * Make it fall between max width and min width
101
+ * @param origWidth original width of image (media node width)
102
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
103
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
104
+ */
105
+ export var getMediaSingleInitialWidth = function getMediaSingleInitialWidth() {
106
+ var origWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_IMAGE_WIDTH;
107
+ var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorDefaultLayoutWidth;
108
+ var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MEDIA_SINGLE_MIN_PIXEL_WIDTH;
109
+ return Math.max(Math.min(origWidth, maxWidth), minWidth);
110
+ };
21
111
  export function calculateOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
22
112
  var offsetLeft = 0;
23
113
  if (wrapper && insideInlineLike && !insideLayout) {
@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
6
6
  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; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "74.34.3";
9
+ var packageVersion = "74.34.4";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
18
18
  import { borderRadius } from '@atlaskit/theme/constants';
19
19
  import Layer from '../Layer';
20
20
  var packageName = "@atlaskit/editor-common";
21
- var packageVersion = "74.34.3";
21
+ var packageVersion = "74.34.4";
22
22
  var halfFocusRing = 1;
23
23
  var dropOffset = '0, 8';
24
24
  var DropList = /*#__PURE__*/function (_Component) {
@@ -8,9 +8,6 @@ import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
8
8
  import { getMediaSinglePixelWidth } from '../../media-single/utils';
9
9
  import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
10
10
  import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
11
- export var DEFAULT_IMAGE_WIDTH = 250;
12
- export var DEFAULT_IMAGE_HEIGHT = 200;
13
-
14
11
  /*
15
12
  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.
16
13
  Read more: https://product-fabric.atlassian.net/browse/MEX-2481
@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
6
6
  import React from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
9
+ import { calcMediaSingleMaxWidth } from '../../media-single';
9
10
  import { nonWrappedLayouts } from '../../utils';
10
11
  import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
11
12
  function float(layout) {
@@ -82,9 +83,7 @@ var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullW
82
83
  if (fullWidthMode) {
83
84
  return '100%';
84
85
  }
85
- // There is always padding for renderer, so we don't need padding for it
86
- var fullWidthPadding = akEditorGutterPadding * 2;
87
- return "".concat(Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth), "px");
86
+ return "".concat(calcMediaSingleMaxWidth(containerWidth), "px");
88
87
  };
89
88
  var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
90
89
  if (isNestedNode) {
@@ -1,5 +1,5 @@
1
1
  export { default as Caption } from './Caption';
2
- export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
2
+ export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
3
3
  export { MediaSingleDimensionHelper } from './MediaSingle/styled';
4
4
  export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
5
5
  export { mediaLinkStyle } from './MediaSingle/link';
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.34.3",
3
+ "version": "74.34.4",
4
4
  "sideEffects": false
5
5
  }
@@ -1,8 +1,11 @@
1
+ import type { RichMediaLayout } from '@atlaskit/adf-schema';
1
2
  export declare const MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
2
3
  export declare const MEDIA_SINGLE_SNAP_GAP = 3;
3
4
  export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
4
5
  export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
5
6
  export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
7
+ export declare const DEFAULT_IMAGE_WIDTH = 250;
8
+ export declare const DEFAULT_IMAGE_HEIGHT = 200;
6
9
  export declare enum Layout {
7
10
  FULL_WIDTH = "full-width",
8
11
  WIDE = "wide",
@@ -12,3 +15,4 @@ export declare enum Layout {
12
15
  WRAP_RIGHT = "wrap-right",
13
16
  WRAP_LEFT = "wrap-left"
14
17
  }
18
+ export declare const wrappedLayouts: RichMediaLayout[];
@@ -1,2 +1,2 @@
1
- export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout, } from './constants';
2
- export { getMediaSinglePixelWidth, calculateOffsetLeft } from './utils';
1
+ 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';
2
+ export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';
@@ -1,3 +1,4 @@
1
+ import type { RichMediaLayout } from '@atlaskit/adf-schema';
1
2
  /**
2
3
  * Convert media node width to pixel
3
4
  *
@@ -11,4 +12,38 @@
11
12
  * @returns pixel number for media single node
12
13
  */
13
14
  export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;
15
+ export interface calcMediaSinglePixelWidthProps {
16
+ width?: number;
17
+ widthType?: 'percentage' | 'pixel';
18
+ origWidth: number;
19
+ layout: RichMediaLayout;
20
+ contentWidth?: number;
21
+ containerWidth: number;
22
+ gutterOffset: number;
23
+ }
24
+ /**
25
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
26
+ * @param width node width attribute
27
+ * @param widthType node widthType attribute
28
+ * @param origWidth original media width
29
+ * @param layout node layout attribute
30
+ * @param contentWidth editor content width
31
+ * @param containerWidth editor container width
32
+ * @param gutterOffset gap between resizer handle and media
33
+ * @returns pixel width of the node
34
+ */
35
+ export declare const calcMediaSinglePixelWidth: ({ width, widthType, origWidth, layout, contentWidth, containerWidth, gutterOffset, }: calcMediaSinglePixelWidthProps) => number;
36
+ /**
37
+ * Calculate maximum width allowed for media single in new experience
38
+ * @param containerWidth width of editor container
39
+ */
40
+ export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number;
41
+ /**
42
+ * Calculate initial media single pixel width.
43
+ * Make it fall between max width and min width
44
+ * @param origWidth original width of image (media node width)
45
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
46
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
47
+ */
48
+ export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
14
49
  export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
@@ -11,7 +11,7 @@ export declare const calcPctWidth: (containerWidth: EditorContainerWidth, pctWid
11
11
  export declare const calcMediaPxWidth: (opts: {
12
12
  origWidth: number;
13
13
  origHeight: number;
14
- state: EditorState;
14
+ state?: EditorState | undefined;
15
15
  containerWidth: EditorContainerWidth;
16
16
  layout?: MediaSingleLayout | undefined;
17
17
  pctWidth?: number | undefined;
@@ -3,8 +3,6 @@ import React from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
5
5
  import type { MediaSingleSize, MediaSingleWidthType } from './types';
6
- export declare const DEFAULT_IMAGE_WIDTH = 250;
7
- export declare const DEFAULT_IMAGE_HEIGHT = 200;
8
6
  export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
9
7
  export interface Props {
10
8
  children: React.ReactNode;
@@ -1,5 +1,5 @@
1
1
  export { default as Caption } from './Caption';
2
- export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
2
+ export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
3
3
  export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
4
4
  export { MediaSingleDimensionHelper } from './MediaSingle/styled';
5
5
  export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
@@ -1,8 +1,11 @@
1
+ import type { RichMediaLayout } from '@atlaskit/adf-schema';
1
2
  export declare const MEDIA_SINGLE_MIN_PIXEL_WIDTH = 24;
2
3
  export declare const MEDIA_SINGLE_SNAP_GAP = 3;
3
4
  export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
4
5
  export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
5
6
  export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
7
+ export declare const DEFAULT_IMAGE_WIDTH = 250;
8
+ export declare const DEFAULT_IMAGE_HEIGHT = 200;
6
9
  export declare enum Layout {
7
10
  FULL_WIDTH = "full-width",
8
11
  WIDE = "wide",
@@ -12,3 +15,4 @@ export declare enum Layout {
12
15
  WRAP_RIGHT = "wrap-right",
13
16
  WRAP_LEFT = "wrap-left"
14
17
  }
18
+ export declare const wrappedLayouts: RichMediaLayout[];
@@ -1,2 +1,2 @@
1
- export { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, Layout as MediaSingleLayout, } from './constants';
2
- export { getMediaSinglePixelWidth, calculateOffsetLeft } from './utils';
1
+ 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';
2
+ export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, } from './utils';
@@ -1,3 +1,4 @@
1
+ import type { RichMediaLayout } from '@atlaskit/adf-schema';
1
2
  /**
2
3
  * Convert media node width to pixel
3
4
  *
@@ -11,4 +12,38 @@
11
12
  * @returns pixel number for media single node
12
13
  */
13
14
  export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;
15
+ export interface calcMediaSinglePixelWidthProps {
16
+ width?: number;
17
+ widthType?: 'percentage' | 'pixel';
18
+ origWidth: number;
19
+ layout: RichMediaLayout;
20
+ contentWidth?: number;
21
+ containerWidth: number;
22
+ gutterOffset: number;
23
+ }
24
+ /**
25
+ * Convert width attribute to pixel value for legacy (resized or not resisized) and new media single node for new experience
26
+ * @param width node width attribute
27
+ * @param widthType node widthType attribute
28
+ * @param origWidth original media width
29
+ * @param layout node layout attribute
30
+ * @param contentWidth editor content width
31
+ * @param containerWidth editor container width
32
+ * @param gutterOffset gap between resizer handle and media
33
+ * @returns pixel width of the node
34
+ */
35
+ export declare const calcMediaSinglePixelWidth: ({ width, widthType, origWidth, layout, contentWidth, containerWidth, gutterOffset, }: calcMediaSinglePixelWidthProps) => number;
36
+ /**
37
+ * Calculate maximum width allowed for media single in new experience
38
+ * @param containerWidth width of editor container
39
+ */
40
+ export declare const calcMediaSingleMaxWidth: (containerWidth: number) => number;
41
+ /**
42
+ * Calculate initial media single pixel width.
43
+ * Make it fall between max width and min width
44
+ * @param origWidth original width of image (media node width)
45
+ * @param maxWidth default to akEditorDefaultLayoutWidth (760)
46
+ * @param minWidth default to MEDIA_SINGLE_MIN_PIXEL_WIDTH (24)
47
+ */
48
+ export declare const getMediaSingleInitialWidth: (origWidth?: number, maxWidth?: number, minWidth?: number) => number;
14
49
  export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
@@ -11,7 +11,7 @@ export declare const calcPctWidth: (containerWidth: EditorContainerWidth, pctWid
11
11
  export declare const calcMediaPxWidth: (opts: {
12
12
  origWidth: number;
13
13
  origHeight: number;
14
- state: EditorState;
14
+ state?: EditorState | undefined;
15
15
  containerWidth: EditorContainerWidth;
16
16
  layout?: MediaSingleLayout | undefined;
17
17
  pctWidth?: number | undefined;
@@ -3,8 +3,6 @@ import React from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
5
5
  import type { MediaSingleSize, MediaSingleWidthType } from './types';
6
- export declare const DEFAULT_IMAGE_WIDTH = 250;
7
- export declare const DEFAULT_IMAGE_HEIGHT = 200;
8
6
  export declare const IMAGE_AND_BORDER_ADJUSTMENT = 2;
9
7
  export interface Props {
10
8
  children: React.ReactNode;
@@ -1,5 +1,5 @@
1
1
  export { default as Caption } from './Caption';
2
- export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
2
+ export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
3
3
  export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
4
4
  export { MediaSingleDimensionHelper } from './MediaSingle/styled';
5
5
  export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.34.3",
3
+ "version": "74.34.4",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"