@atlaskit/editor-common 74.59.0 → 75.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 75.0.1
+
+### Patch Changes
+
+- [`1c085549bd9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c085549bd9) - clean up pctWidth used in new image resize experience
+
+## 75.0.0
+
+### Major Changes
+
+- [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
+
+### Patch Changes
+
+- [`9d3236f1b2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d3236f1b2d) - Add comments for getParentWidthForNestedMediaSingleNode function
+- Updated dependencies
+
 ## 74.59.0
 
 ### Minor Changes

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

@@ -199,6 +199,13 @@ var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(view, p
   }
   return null;
 };
+
+/**
+ * Get parent content width for nested media single node
+ * @param resolvedPos resolved Position of the node
+ * @param view editor view
+ * @returns parent content width for nested node
+ */
 exports.getMaxWidthForNestedNodeNext = getMaxWidthForNestedNodeNext;
 var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);

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

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

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

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaWrapper = exports.MediaSingleDimensionHelper = void 0;
+exports.MediaWrapper = exports.MediaSingleDimensionHelper = exports.MediaBorderGapFiller = void 0;
 exports.calcLegacyWidth = calcLegacyWidth;
 exports.calcResizedWidth = calcResizedWidth;
 exports.mediaWrapperStyle = void 0;
@@ -118,13 +118,12 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     fullWidthMode = _ref.fullWidthMode,
     isResized = _ref.isResized,
     layout = _ref.layout,
-    pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width,
     isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
     _ref$isNestedNode = _ref.isNestedNode,
     isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */
@@ -149,4 +148,24 @@ var MediaWrapper = function MediaWrapper(_ref3) {
   }, children);
 };
 exports.MediaWrapper = MediaWrapper;
-MediaWrapper.displayName = 'WrapperMediaSingle';
+MediaWrapper.displayName = 'WrapperMediaSingle';
+
+/*
+  There was an issue with a small, intermittent white gap appearing between the images due to a small pixel difference in browser rendering.
+
+  The solution implemented below was adapted from: https://stackoverflow.com/a/68885576
+  It suggests adding an absolute div on top which matches the width and height and setting the border on that div.
+*/
+
+var MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
+  var borderColor = _ref4.borderColor;
+  return (0, _react2.jsx)("div", {
+    style: {
+      position: 'absolute',
+      inset: '0px',
+      border: "0.5px solid ".concat(borderColor),
+      borderRadius: '1px'
+    }
+  });
+};
+exports.MediaBorderGapFiller = MediaBorderGapFiller;

package/dist/cjs/ui/index.js

@@ -89,12 +89,6 @@ Object.defineProperty(exports, "HelperMessage", {
     return _Messages.HelperMessage;
   }
 });
-Object.defineProperty(exports, "IMAGE_AND_BORDER_ADJUSTMENT", {
-  enumerable: true,
-  get: function get() {
-    return _MediaSingle.IMAGE_AND_BORDER_ADJUSTMENT;
-  }
-});
 Object.defineProperty(exports, "IntlErrorBoundary", {
   enumerable: true,
   get: function get() {
@@ -113,6 +107,12 @@ Object.defineProperty(exports, "LINKPICKER_HEIGHT_IN_PX", {
     return _const.LINKPICKER_HEIGHT_IN_PX;
   }
 });
+Object.defineProperty(exports, "MediaBorderGapFiller", {
+  enumerable: true,
+  get: function get() {
+    return _styled.MediaBorderGapFiller;
+  }
+});
 Object.defineProperty(exports, "MediaSingle", {
   enumerable: true,
   get: function get() {
@@ -372,7 +372,7 @@ Object.defineProperty(exports, "wrapperStyle", {
   }
 });
 var _Caption = _interopRequireDefault(require("./Caption"));
-var _MediaSingle = _interopRequireWildcard(require("./MediaSingle"));
+var _MediaSingle = _interopRequireDefault(require("./MediaSingle"));
 var _styled = require("./MediaSingle/styled");
 var _grid = require("./MediaSingle/grid");
 var _link = require("./MediaSingle/link");

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

@@ -176,6 +176,13 @@ export const getMaxWidthForNestedNodeNext = (view, pos, forInsertion) => {
   }
   return null;
 };
+
+/**
+ * Get parent content width for nested media single node
+ * @param resolvedPos resolved Position of the node
+ * @param view editor view
+ * @returns parent content width for nested node
+ */
 export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
   const domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {

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.59.0";
+const packageVersion = "75.0.1";
 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

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

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

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

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

@@ -100,7 +100,6 @@ export const MediaSingleDimensionHelper = ({
   fullWidthMode,
   isResized,
   layout,
-  pctWidth,
   mediaSingleWidth,
   width,
   // original media width
@@ -115,7 +114,7 @@ export const MediaSingleDimensionHelper = ({
     max-width: 100%;
   }
 
-  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
   ${layout === 'full-width' &&
 /* This causes issues for new experience where we don't strip layout attributes
  when copying top-level node and pasting into a table/layout,
@@ -203,4 +202,24 @@ export const MediaWrapper = ({
 }) => jsx("div", {
   css: mediaWrapperStyle(rest)
 }, children);
-MediaWrapper.displayName = 'WrapperMediaSingle';
+MediaWrapper.displayName = 'WrapperMediaSingle';
+
+/*
+  There was an issue with a small, intermittent white gap appearing between the images due to a small pixel difference in browser rendering.
+
+  The solution implemented below was adapted from: https://stackoverflow.com/a/68885576
+  It suggests adding an absolute div on top which matches the width and height and setting the border on that div.
+*/
+
+export const MediaBorderGapFiller = ({
+  borderColor
+}) => {
+  return jsx("div", {
+    style: {
+      position: 'absolute',
+      inset: '0px',
+      border: `0.5px solid ${borderColor}`,
+      borderRadius: '1px'
+    }
+  });
+};

package/dist/es2019/ui/index.js

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

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

@@ -184,6 +184,13 @@ export var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(
   }
   return null;
 };
+
+/**
+ * Get parent content width for nested media single node
+ * @param resolvedPos resolved Position of the node
+ * @param view editor view
+ * @returns parent content width for nested node
+ */
 export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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.59.0";
+var packageVersion = "75.0.1";
 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

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

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

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

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

@@ -109,13 +109,12 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     fullWidthMode = _ref.fullWidthMode,
     isResized = _ref.isResized,
     layout = _ref.layout,
-    pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
     width = _ref.width,
     isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
     _ref$isNestedNode = _ref.isNestedNode,
     isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */
@@ -137,4 +136,23 @@ export var MediaWrapper = function MediaWrapper(_ref3) {
     css: mediaWrapperStyle(rest)
   }, children);
 };
-MediaWrapper.displayName = 'WrapperMediaSingle';
+MediaWrapper.displayName = 'WrapperMediaSingle';
+
+/*
+  There was an issue with a small, intermittent white gap appearing between the images due to a small pixel difference in browser rendering.
+
+  The solution implemented below was adapted from: https://stackoverflow.com/a/68885576
+  It suggests adding an absolute div on top which matches the width and height and setting the border on that div.
+*/
+
+export var MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
+  var borderColor = _ref4.borderColor;
+  return jsx("div", {
+    style: {
+      position: 'absolute',
+      inset: '0px',
+      border: "0.5px solid ".concat(borderColor),
+      borderRadius: '1px'
+    }
+  });
+};

package/dist/esm/ui/index.js

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

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

@@ -74,5 +74,11 @@ export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number |
  * @param pos node position
  */
 export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined, forInsertion?: boolean) => number | null;
+/**
+ * Get parent content width for nested media single node
+ * @param resolvedPos resolved Position of the node
+ * @param view editor view
+ * @returns parent content width for nested node
+ */
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
 export declare const getParentWidthForNestedMediaSingleNodeForInsertion: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

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

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

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

@@ -39,7 +39,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;
@@ -50,3 +50,8 @@ export declare const MediaWrapper: {
     ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & MediaWrapperProps): jsx.JSX.Element;
     displayName: string;
 };
+type MediaBorderGapFillerProps = {
+    borderColor: string;
+};
+export declare const MediaBorderGapFiller: React.FC<MediaBorderGapFillerProps>;
+export {};

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

@@ -1,7 +1,7 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
+export { default as MediaSingle } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
-export { MediaSingleDimensionHelper } from './MediaSingle/styled';
+export { MediaSingleDimensionHelper, MediaBorderGapFiller, } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

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

@@ -74,5 +74,11 @@ export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number |
  * @param pos node position
  */
 export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined, forInsertion?: boolean) => number | null;
+/**
+ * Get parent content width for nested media single node
+ * @param resolvedPos resolved Position of the node
+ * @param view editor view
+ * @returns parent content width for nested node
+ */
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
 export declare const getParentWidthForNestedMediaSingleNodeForInsertion: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

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

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

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

@@ -39,7 +39,7 @@ export interface MediaSingleWrapperProps {
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;
@@ -50,3 +50,8 @@ export declare const MediaWrapper: {
     ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & MediaWrapperProps): jsx.JSX.Element;
     displayName: string;
 };
+type MediaBorderGapFillerProps = {
+    borderColor: string;
+};
+export declare const MediaBorderGapFiller: React.FC<MediaBorderGapFillerProps>;
+export {};

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

@@ -1,7 +1,7 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
+export { default as MediaSingle } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
-export { MediaSingleDimensionHelper } from './MediaSingle/styled';
+export { MediaSingleDimensionHelper, MediaBorderGapFiller, } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts, } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.59.0",
+  "version": "75.0.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -102,7 +102,7 @@
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-datasource": "^1.1.0",
     "@atlaskit/link-picker": "^1.29.0",
-    "@atlaskit/media-card": "^76.2.0",
+    "@atlaskit/media-card": "^77.0.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-picker": "^66.2.0",
     "@atlaskit/mention": "^22.1.0",