@atlaskit/editor-plugin-media 1.28.3 → 1.28.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 1.28.5
+
+### Patch Changes
+
+- [#129804](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129804)
+  [`790a6fe6bc9e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/790a6fe6bc9e8) -
+  [ED-24516] Fix VR test helpers for fallback LazyNodeViews
+- Updated dependencies
+
+## 1.28.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.28.3
 
 ### Patch Changes

package/dist/cjs/toDOM-fixes/media.js

@@ -4,13 +4,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaSpecWithFixedToDOM = void 0;
+exports.mediaSpecWithFixedToDOM = exports.defaultImageCardDimensions = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _toDOMAttrs = require("./toDOMAttrs");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+var defaultImageCardDimensions = exports.defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
+
 // @nodeSpecException:toDOM patch
 var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
@@ -19,7 +37,29 @@ var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSp
   return _objectSpread(_objectSpread({}, _adfSchema.media), {}, {
     toDOM: function toDOM(node) {
       var attrs = (0, _toDOMAttrs.getMediaAttrs)('media', node);
-      return ['div', attrs];
+      var styles = skeletonStyling;
+      if (node.attrs.type === 'external') {
+        return ['img', _objectSpread(_objectSpread({}, attrs), {}, {
+          src: node.attrs.url,
+          styles: styles
+        })];
+      }
+      if (node.attrs.type === 'file') {
+        var dataUrl = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        var width = defaultImageCardDimensions.width;
+        var height = defaultImageCardDimensions.height;
+        return ['div', _objectSpread(_objectSpread({
+          width: width,
+          height: height
+        }, attrs), {}, {
+          // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+          // rectangle that provides an affordance for media.
+          style: "\n\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\tbackground-image: url(\"".concat(dataUrl, "\");\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\tmargin-right: 4px;\n\t\t\t\t\t\tborder-radius: ").concat(skeletonStyling, ";\n\n\t\t\t\t\t\tflex-basis: ").concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\tbackground-color: var(--media-card-background-color, unset);\n\t\t\t\t\t\twidth: var(--media-card-width, 0);\n\t\t\t\t\t\theight: var(--media-card-height, 0);\n\t\t\t\t\t\t")
+        })];
+      }
+      return ['div', _objectSpread(_objectSpread({}, attrs), {}, {
+        styles: styles
+      })];
     }
   });
 };

package/dist/cjs/toDOM-fixes/mediaGroup.js

@@ -10,8 +10,6 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", ";");
-
 /**
  * Duplicate consts from `media-card`.
  * `packages/media/media-card/src/utils/cardDimensions.ts`
@@ -68,27 +66,11 @@ var mediaGroupSpecWithFixedToDOM = exports.mediaGroupSpecWithFixedToDOM = functi
   }
   return _objectSpread(_objectSpread({}, _adfSchema.mediaGroup), {}, {
     toDOM: function toDOM(node) {
-      var childNodes = [];
-      for (var i = 0; i < node.childCount; i++) {
-        var _getDefaultCardDimens = getDefaultCardDimensions(),
-          width = _getDefaultCardDimens.width,
-          height = _getDefaultCardDimens.height;
-        var nodeHolder = ['img', {
-          width: width,
-          height: height,
-          // Transparent image workaround to control styling
-          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-          style: "margin-left: ".concat(i !== 0 ? "4px" : '0', "; margin-right: 4px; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(skeletonStyling)
-        }];
-        childNodes.push(nodeHolder);
-      }
-
       // Margin margin that consolidates the margin in the
       return ['div', {
-        style: 'margin: "3px 5px";',
-        // From adf-schema
+        style: "\n\t\t\t\t\t\tmargin: 3px 5px;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\t--media-card-background-color: #EBECF0;\n\t\t\t\t\t\t--media-card-width: ".concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\t--media-card-height: ").concat(defaultImageCardDimensions.height, "px;\n\t\t\t\t\t"),
         'data-node-type': 'mediaGroup'
-      }].concat(childNodes);
+      }, 0];
     }
   });
 };

package/dist/cjs/toDOM-fixes/mediaSingle.js

@@ -67,11 +67,8 @@ function getMediaSinglePixelWidth(width, editorWidth) {
 function computeMediaSingleDimensions(_ref) {
   var childNode = _ref.childNode,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    widthType = _ref.widthType;
-  // TODO: We can't retrieve the editor width from here easily.
-  // For now we're using the default line length here, but this will be
-  // incorrect on smaller devices.
-  var editorWidth = 760;
+    widthType = _ref.widthType,
+    editorWidth = _ref.editorWidth;
   var width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
   var height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
   if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
@@ -127,36 +124,44 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
     return mediaSingleNode;
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
-    toDOM: function toDOM(node) {
+    toDOM: function toDOM(node, lazyNodeViewOptions) {
       var _mediaSingleAttrs$lay;
-      var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      var childNode = node.firstChild;
       var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(mediaSingleOption.withExtendedWidthTypes, node);
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
-          mediaSingleWidth: mediaSingleWidth
+          mediaSingleWidth: mediaSingleWidth,
+          editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
         }),
         width = _computeMediaSingleDi.width,
         height = _computeMediaSingleDi.height;
-      var layoutStyles = computeLayoutStyles(width, layout);
+      var sizes = width && height ? "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(skeletonStyling) : '';
+      var layoutStyles = computeLayoutStyles(mediaSingleWidth, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
+      var layoutClass = "image-".concat(layout);
+      var centerLayout = "display: flex; justify-content: center;";
+      var endLayout = "display: flex; justify-content: end;";
+      var startLayout = "display: flex; justify-content: start;";
+      var layoutStyle = layout === 'align-end' ? endLayout : layout === 'align-start' ? startLayout : centerLayout;
       var content = ['div', _objectSpread({
-        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+        class: "rich-media-item mediaSingleView-content-wrap ".concat(layoutClass)
       }, dataAttrs), ['div', {
-        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
-        style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
+        style: "".concat(sizes, "; ").concat(style, "; max-width: 100%; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(layoutStyle)
       }, ['figure', {
-        class: 'media-single-node'
+        class: 'media-single-node',
+        style: 'margin: 0px'
       }, ['div', {}, ['div', {
         class: 'media-content-wrap'
       }, 0]]]]];
       return ['div', {
-        class: 'mediaSingleView-content-wrap'
+        class: 'mediaSingleView-content-wrap',
+        layout: layout
       }, content];
     }
   });

package/dist/es2019/toDOM-fixes/media.js

@@ -1,6 +1,23 @@
 import { media } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getMediaAttrs } from './toDOMAttrs';
+const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export const defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
 
 // @nodeSpecException:toDOM patch
 export const mediaSpecWithFixedToDOM = () => {
@@ -11,7 +28,42 @@ export const mediaSpecWithFixedToDOM = () => {
     ...media,
     toDOM: node => {
       const attrs = getMediaAttrs('media', node);
-      return ['div', attrs];
+      const styles = skeletonStyling;
+      if (node.attrs.type === 'external') {
+        return ['img', {
+          ...attrs,
+          src: node.attrs.url,
+          styles
+        }];
+      }
+      if (node.attrs.type === 'file') {
+        const dataUrl = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        const width = defaultImageCardDimensions.width;
+        const height = defaultImageCardDimensions.height;
+        return ['div', {
+          width,
+          height,
+          ...attrs,
+          // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+          // rectangle that provides an affordance for media.
+          style: `
+						display: inline-block;
+						background-image: url("${dataUrl}");
+						margin-left: 0;
+						margin-right: 4px;
+						border-radius: ${skeletonStyling};
+
+						flex-basis: ${defaultImageCardDimensions.width}px;
+						background-color: var(--media-card-background-color, unset);
+						width: var(--media-card-width, 0);
+						height: var(--media-card-height, 0);
+						`
+        }];
+      }
+      return ['div', {
+        ...attrs,
+        styles
+      }];
     }
   };
 };

package/dist/es2019/toDOM-fixes/mediaGroup.js

@@ -1,6 +1,5 @@
 import { mediaGroup } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"};`;
 
 /**
  * Duplicate consts from `media-card`.
@@ -58,28 +57,18 @@ export const mediaGroupSpecWithFixedToDOM = () => {
   return {
     ...mediaGroup,
     toDOM: node => {
-      const childNodes = [];
-      for (let i = 0; i < node.childCount; i++) {
-        const {
-          width,
-          height
-        } = getDefaultCardDimensions();
-        const nodeHolder = ['img', {
-          width,
-          height,
-          // Transparent image workaround to control styling
-          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-          style: `margin-left: ${i !== 0 ? `4px` : '0'}; margin-right: 4px; border-radius: ${"var(--ds-border-radius, 3px)"}; ${skeletonStyling}`
-        }];
-        childNodes.push(nodeHolder);
-      }
-
       // Margin margin that consolidates the margin in the
       return ['div', {
-        style: 'margin: "3px 5px";',
-        // From adf-schema
+        style: `
+						margin: 3px 5px;
+						display: flex;
+						gap: 8px;
+						--media-card-background-color: #EBECF0;
+						--media-card-width: ${defaultImageCardDimensions.width}px;
+						--media-card-height: ${defaultImageCardDimensions.height}px;
+					`,
         'data-node-type': 'mediaGroup'
-      }, ...childNodes];
+      }, 0];
     }
   };
 };

package/dist/es2019/toDOM-fixes/mediaSingle.js

@@ -54,12 +54,9 @@ export function getMediaSinglePixelWidth(width, editorWidth, widthType = 'percen
 function computeMediaSingleDimensions({
   childNode,
   mediaSingleWidth,
-  widthType
+  widthType,
+  editorWidth
 }) {
-  // TODO: We can't retrieve the editor width from here easily.
-  // For now we're using the default line length here, but this will be
-  // incorrect on smaller devices.
-  const editorWidth = 760;
   const width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
   const height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
   if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
@@ -116,13 +113,13 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
   }
   return {
     ...mediaSingleNode,
-    toDOM: node => {
+    toDOM: (node, lazyNodeViewOptions) => {
       var _mediaSingleAttrs$lay;
-      const childNode = node.firstChild;
       const mediaSingleAttrs = node.attrs;
       const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       const mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       const widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      const childNode = node.firstChild;
       const dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
       const {
         width,
@@ -130,24 +127,32 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
       } = computeMediaSingleDimensions({
         childNode,
         widthType,
-        mediaSingleWidth
+        mediaSingleWidth,
+        editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
       });
-      const layoutStyles = computeLayoutStyles(width, layout);
+      const sizes = width && height ? `width: ${width}px; height: ${height}px; ${skeletonStyling}` : '';
+      const layoutStyles = computeLayoutStyles(mediaSingleWidth, layout);
       const style = `display: block; margin-top: ${"var(--ds-space-300, 24px)"}; margin-bottom: ${"var(--ds-space-300, 24px)"}; ${layoutStyles}`;
+      const layoutClass = `image-${layout}`;
+      const centerLayout = `display: flex; justify-content: center;`;
+      const endLayout = `display: flex; justify-content: end;`;
+      const startLayout = `display: flex; justify-content: start;`;
+      const layoutStyle = layout === 'align-end' ? endLayout : layout === 'align-start' ? startLayout : centerLayout;
       const content = ['div', {
-        class: 'rich-media-item mediaSingleView-content-wrap image-center',
+        class: `rich-media-item mediaSingleView-content-wrap ${layoutClass}`,
         ...dataAttrs
       }, ['div', {
-        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
-        style: `width: ${width}px; height: ${height}px; ${style} ${skeletonStyling} border-radius: ${"var(--ds-border-radius, 3px)"};`
+        style: `${sizes}; ${style}; max-width: 100%; border-radius: ${"var(--ds-border-radius, 3px)"}; ${layoutStyle}`
       }, ['figure', {
-        class: 'media-single-node'
+        class: 'media-single-node',
+        style: 'margin: 0px'
       }, ['div', {}, ['div', {
         class: 'media-content-wrap'
       }, 0]]]]];
       return ['div', {
-        class: 'mediaSingleView-content-wrap'
+        class: 'mediaSingleView-content-wrap',
+        layout
       }, content];
     }
   };

package/dist/esm/toDOM-fixes/media.js

@@ -4,6 +4,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { media } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getMediaAttrs } from './toDOMAttrs';
+var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export var defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
 
 // @nodeSpecException:toDOM patch
 export var mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
@@ -13,7 +30,29 @@ export var mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
   return _objectSpread(_objectSpread({}, media), {}, {
     toDOM: function toDOM(node) {
       var attrs = getMediaAttrs('media', node);
-      return ['div', attrs];
+      var styles = skeletonStyling;
+      if (node.attrs.type === 'external') {
+        return ['img', _objectSpread(_objectSpread({}, attrs), {}, {
+          src: node.attrs.url,
+          styles: styles
+        })];
+      }
+      if (node.attrs.type === 'file') {
+        var dataUrl = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        var width = defaultImageCardDimensions.width;
+        var height = defaultImageCardDimensions.height;
+        return ['div', _objectSpread(_objectSpread({
+          width: width,
+          height: height
+        }, attrs), {}, {
+          // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+          // rectangle that provides an affordance for media.
+          style: "\n\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\tbackground-image: url(\"".concat(dataUrl, "\");\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\tmargin-right: 4px;\n\t\t\t\t\t\tborder-radius: ").concat(skeletonStyling, ";\n\n\t\t\t\t\t\tflex-basis: ").concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\tbackground-color: var(--media-card-background-color, unset);\n\t\t\t\t\t\twidth: var(--media-card-width, 0);\n\t\t\t\t\t\theight: var(--media-card-height, 0);\n\t\t\t\t\t\t")
+        })];
+      }
+      return ['div', _objectSpread(_objectSpread({}, attrs), {}, {
+        styles: styles
+      })];
     }
   });
 };

package/dist/esm/toDOM-fixes/mediaGroup.js

@@ -3,7 +3,6 @@ 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; }
 import { mediaGroup } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", ";");
 
 /**
  * Duplicate consts from `media-card`.
@@ -61,27 +60,11 @@ export var mediaGroupSpecWithFixedToDOM = function mediaGroupSpecWithFixedToDOM(
   }
   return _objectSpread(_objectSpread({}, mediaGroup), {}, {
     toDOM: function toDOM(node) {
-      var childNodes = [];
-      for (var i = 0; i < node.childCount; i++) {
-        var _getDefaultCardDimens = getDefaultCardDimensions(),
-          width = _getDefaultCardDimens.width,
-          height = _getDefaultCardDimens.height;
-        var nodeHolder = ['img', {
-          width: width,
-          height: height,
-          // Transparent image workaround to control styling
-          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-          style: "margin-left: ".concat(i !== 0 ? "4px" : '0', "; margin-right: 4px; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(skeletonStyling)
-        }];
-        childNodes.push(nodeHolder);
-      }
-
       // Margin margin that consolidates the margin in the
       return ['div', {
-        style: 'margin: "3px 5px";',
-        // From adf-schema
+        style: "\n\t\t\t\t\t\tmargin: 3px 5px;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\t--media-card-background-color: #EBECF0;\n\t\t\t\t\t\t--media-card-width: ".concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\t--media-card-height: ").concat(defaultImageCardDimensions.height, "px;\n\t\t\t\t\t"),
         'data-node-type': 'mediaGroup'
-      }].concat(childNodes);
+      }, 0];
     }
   });
 };

package/dist/esm/toDOM-fixes/mediaSingle.js

@@ -59,11 +59,8 @@ export function getMediaSinglePixelWidth(width, editorWidth) {
 function computeMediaSingleDimensions(_ref) {
   var childNode = _ref.childNode,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    widthType = _ref.widthType;
-  // TODO: We can't retrieve the editor width from here easily.
-  // For now we're using the default line length here, but this will be
-  // incorrect on smaller devices.
-  var editorWidth = 760;
+    widthType = _ref.widthType,
+    editorWidth = _ref.editorWidth;
   var width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
   var height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
   if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
@@ -119,36 +116,44 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
     return mediaSingleNode;
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
-    toDOM: function toDOM(node) {
+    toDOM: function toDOM(node, lazyNodeViewOptions) {
       var _mediaSingleAttrs$lay;
-      var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      var childNode = node.firstChild;
       var dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
-          mediaSingleWidth: mediaSingleWidth
+          mediaSingleWidth: mediaSingleWidth,
+          editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
         }),
         width = _computeMediaSingleDi.width,
         height = _computeMediaSingleDi.height;
-      var layoutStyles = computeLayoutStyles(width, layout);
+      var sizes = width && height ? "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(skeletonStyling) : '';
+      var layoutStyles = computeLayoutStyles(mediaSingleWidth, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
+      var layoutClass = "image-".concat(layout);
+      var centerLayout = "display: flex; justify-content: center;";
+      var endLayout = "display: flex; justify-content: end;";
+      var startLayout = "display: flex; justify-content: start;";
+      var layoutStyle = layout === 'align-end' ? endLayout : layout === 'align-start' ? startLayout : centerLayout;
       var content = ['div', _objectSpread({
-        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+        class: "rich-media-item mediaSingleView-content-wrap ".concat(layoutClass)
       }, dataAttrs), ['div', {
-        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
-        style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
+        style: "".concat(sizes, "; ").concat(style, "; max-width: 100%; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(layoutStyle)
       }, ['figure', {
-        class: 'media-single-node'
+        class: 'media-single-node',
+        style: 'margin: 0px'
       }, ['div', {}, ['div', {
         class: 'media-content-wrap'
       }, 0]]]]];
       return ['div', {
-        class: 'mediaSingleView-content-wrap'
+        class: 'mediaSingleView-content-wrap',
+        layout: layout
       }, content];
     }
   });

package/dist/types/toDOM-fixes/media.d.ts

@@ -1 +1,16 @@
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export declare const defaultImageCardDimensions: {
+    width: number;
+    height: number;
+};
 export declare const mediaSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types/toDOM-fixes/mediaSingle.d.ts

@@ -1,3 +1,4 @@
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
 export declare const wrappedLayouts: string[];
 /**
  * Duplicate of method from `@atlaskit/editor-common/utils`.
@@ -26,4 +27,4 @@ export declare function getMediaSinglePixelWidth(width: number, editorWidth: num
 export declare const mediaSingleSpecWithFixedToDOM: (mediaSingleOption: {
     withCaption?: boolean;
     withExtendedWidthTypes: boolean;
-}) => import("prosemirror-model").NodeSpec;
+}) => NodeSpec;

package/dist/types-ts4.5/toDOM-fixes/media.d.ts

@@ -1 +1,16 @@
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export declare const defaultImageCardDimensions: {
+    width: number;
+    height: number;
+};
 export declare const mediaSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/toDOM-fixes/mediaSingle.d.ts

@@ -1,3 +1,4 @@
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
 export declare const wrappedLayouts: string[];
 /**
  * Duplicate of method from `@atlaskit/editor-common/utils`.
@@ -26,4 +27,4 @@ export declare function getMediaSinglePixelWidth(width: number, editorWidth: num
 export declare const mediaSingleSpecWithFixedToDOM: (mediaSingleOption: {
     withCaption?: boolean;
     withExtendedWidthTypes: boolean;
-}) => import("prosemirror-model").NodeSpec;
+}) => NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.28.3",
+	"version": "1.28.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,8 @@
 		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/analytics-namespaced-context": "^6.11.0",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/editor-common": "^87.10.0",
+		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/editor-common": "^87.11.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-annotation": "1.19.0",
@@ -54,14 +54,14 @@
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
 		"@atlaskit/media-common": "^11.3.0",
 		"@atlaskit/media-filmstrip": "^47.2.0",
-		"@atlaskit/media-picker": "^66.4.0",
-		"@atlaskit/media-ui": "^25.10.0",
+		"@atlaskit/media-picker": "^66.5.0",
+		"@atlaskit/media-ui": "^25.11.0",
 		"@atlaskit/media-viewer": "^48.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.0.0",