@atlaskit/editor-plugin-media 1.34.7 → 1.34.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 1.34.8
+
+### Patch Changes
+
+- [#149178](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149178)
+  [`f3c027c1f8373`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3c027c1f8373) -
+  [ED-24859] Improve LazyNodeView toDOM implementation to avoid LayoutShifts
+
 ## 1.34.7
 
 ### Patch Changes

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

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.mediaSpecWithFixedToDOM = exports.defaultImageCardDimensions = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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`
@@ -37,11 +36,15 @@ var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSp
   return _objectSpread(_objectSpread({}, _adfSchema.media), {}, {
     toDOM: function toDOM(node) {
       var attrs = (0, _toDOMAttrs.getMediaAttrs)('media', node);
-      var styles = skeletonStyling;
       if (node.attrs.type === 'external') {
         return ['img', _objectSpread(_objectSpread({}, attrs), {}, {
           src: node.attrs.url,
-          styles: styles
+          style: (0, _lazyNodeView.convertToInlineCss)({
+            backgroundColor: "var(--ds-background-neutral, #091E420F)",
+            outline: 'none',
+            width: "var(--ak-editor-media-card-width, 100%)",
+            height: "var(--ak-editor-media-card-height, 100%)"
+          })
         })];
       }
       if (node.attrs.type === 'file') {
@@ -54,11 +57,27 @@ var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSp
         }, 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: 3px;\n\t\t\t\t\t\toutline: none;\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);\n\t\t\t\t\t\twidth: var(--media-card-width, ").concat(node.attrs.width || width, "px);\n\t\t\t\t\t\theight: var(--media-card-height, ").concat(node.attrs.height || height, "px);\n\t\t\t\t\t\t")
+
+          style: (0, _lazyNodeView.convertToInlineCss)({
+            display: 'var(--ak-editor-media-card-display, inline-block)',
+            backgroundImage: "url(\"".concat(dataUrl, "\")"),
+            marginLeft: '0',
+            marginRight: 'var(--ak-editor-media-margin-right, 4px)',
+            borderRadius: '3px',
+            outline: 'none',
+            flexBasis: "".concat(defaultImageCardDimensions.width, "px"),
+            backgroundColor: 'var(--ak-editor-media-card-background-color)',
+            width: "var(--ak-editor-media-card-width, 100%)",
+            height: "var(--ak-editor-media-card-height, 0)",
+            paddingBottom: "var(--ak-editor-media-padding-bottom, 0)"
+          })
         })];
       }
       return ['div', _objectSpread(_objectSpread({}, attrs), {}, {
-        styles: styles
+        styles: (0, _lazyNodeView.convertToInlineCss)({
+          backgroundColor: "var(--ak-editor-media-card-background-color, ".concat("var(--ds-background-neutral, #091E420F)", ")"),
+          outline: 'none'
+        })
       })];
     }
   });

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

@@ -68,7 +68,7 @@ var mediaGroupSpecWithFixedToDOM = exports.mediaGroupSpecWithFixedToDOM = functi
     toDOM: function toDOM(node) {
       // Margin margin that consolidates the margin in the
       return ['div', {
-        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"),
+        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--ak-editor-media-card-background-color: #EBECF0;\n\t\t\t\t\t\t--ak-editor-media-card-width: ".concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\t--ak-editor-media-card-height: ").concat(defaultImageCardDimensions.height, "px;\n\t\t\t\t\t"),
         'data-node-type': 'mediaGroup'
       }, 0];
     }

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

@@ -4,118 +4,209 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
-exports.wrappedLayouts = exports.shouldAddDefaultWrappedWidth = exports.mediaSingleSpecWithFixedToDOM = void 0;
+exports.toDOM = exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSingleSpecWithFixedToDOM = exports.mediaProportionalWidthCSSCalc = exports.mediaJustifyContentCSS = exports.mediaContentWrapperWidthCSSCalc = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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;");
-var wrappedLayouts = exports.wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
-
-/**
- * Duplicate of method from `@atlaskit/editor-common/utils`.
- * `packages/editor/editor-common/src/utils/rich-media-utils.ts`
- *
- * WHY?
- * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
- * `@atlaskit/editor-common` 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 shouldAddDefaultWrappedWidth = exports.shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+var WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
+var ALIGNED_LAYOUTS = ['align-end', 'align-start'];
+var LEGACY_LAYOUTS = ['full-width', 'wide'];
+var DEFAULT_IMAGE_WIDTH = 250;
+var DEFAULT_IMAGE_HEIGHT = 200;
+var GUTTER_SIZE = '24px';
+var HALF_GUTTER_SIZE = '12px';
+var mediaWidthCSSCalc = exports.mediaWidthCSSCalc = function mediaWidthCSSCalc(_ref) {
+  var mediaSingleDimensionWidth = _ref.mediaSingleDimensionWidth,
+    layout = _ref.layout,
+    baseWidth = _ref.baseWidth,
+    isPixelWidth = _ref.isPixelWidth,
+    isExtendedResizeExperience = _ref.isExtendedResizeExperience;
+  var hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
+  var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
+  var isMediaAligned = ALIGNED_LAYOUTS.includes(layout);
+  var isMediaLegacyLayout = LEGACY_LAYOUTS.includes(layout);
+  var shouldUseAlignedLayoutCalc = isMediaAligned && !hasMediaDimensionWidth;
+  var shouldUseWrappedLayoutCalc = isMediaWrapped && !hasMediaDimensionWidth;
+  var shouldUseBreakoutWideLogic = layout === 'wide';
+  var shouldUseBreakoutFullWidthLogic = layout === 'full-width';
+  var shouldUseProportionalCalc = !isExtendedResizeExperience && !isPixelWidth && hasMediaDimensionWidth && !isMediaLegacyLayout && !isMediaWrapped;
+  var shouldUseHalfContainerCalc = shouldUseProportionalCalc && isMediaAligned && mediaSingleDimensionWidth >= 100;
+  var shouldHardCodePixelWidth = isExtendedResizeExperience && isPixelWidth && hasMediaDimensionWidth;
+  var containerWidthPlusGutter = "(min(100cqw, 100%) + ".concat(GUTTER_SIZE, ")");
+  var fullContainerWidth = 'var(--ak-editor-max-container-width, 100cqw)';
+  var applyContainerWidthBoundaries = function applyContainerWidthBoundaries(calc) {
+    // Safe measure to avoid bleeding
+    return "min(".concat(calc, ", ").concat(fullContainerWidth, ")");
+  };
+  var cssCalc = '';
+  if (shouldUseAlignedLayoutCalc) {
+    cssCalc = "min(calc(".concat(containerWidthPlusGutter, " * 0.5 - ").concat(GUTTER_SIZE, "), ").concat(baseWidth, "px)");
+  } else if (shouldUseWrappedLayoutCalc) {
+    cssCalc = "100%";
+  } else if (shouldUseHalfContainerCalc) {
+    cssCalc = "min(min(".concat(baseWidth, "px, calc(50cqw - ").concat(HALF_GUTTER_SIZE, ")), 100%)");
+  } else if (shouldUseProportionalCalc) {
+    cssCalc = "calc(".concat(containerWidthPlusGutter, " * var(--ak-editor-media-single--proportion, 1px) - ").concat(GUTTER_SIZE, ")");
+  } else if (shouldHardCodePixelWidth) {
+    cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
+  } else if (shouldUseBreakoutWideLogic) {
+    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+  } else if (shouldUseBreakoutFullWidthLogic) {
+    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+  } else {
+    cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
+  }
+  return applyContainerWidthBoundaries(cssCalc);
 };
-var MEDIA_SINGLE_GUTTER_SIZE = 24;
-var DEFAULT_EMBED_CARD_WIDTH = 680;
-var akEditorMediaResizeHandlerPaddingWide = 12;
-
-/**
- * Duplicate of method from `@atlaskit/editor-common/media-single`.
- * `packages/editor/editor-common/src/media-single/utils.ts`
- *
- * WHY?
- * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
- * `@atlaskit/editor-common` 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.
- */
-function getMediaSinglePixelWidth(width, editorWidth) {
-  var widthType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'percentage';
-  var gutterOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  if (widthType === 'pixel') {
-    return width;
+var mediaContentWrapperWidthCSSCalc = exports.mediaContentWrapperWidthCSSCalc = function mediaContentWrapperWidthCSSCalc(_ref2) {
+  var isMediaWrapped = _ref2.isMediaWrapped,
+    isExternalMedia = _ref2.isExternalMedia,
+    isPixelWidth = _ref2.isPixelWidth,
+    childMediaWidth = _ref2.childMediaWidth,
+    mediaSingleDimensionWidth = _ref2.mediaSingleDimensionWidth;
+  if (isExternalMedia || !isMediaWrapped) {
+    return 'unset';
   }
-  return Math.ceil((editorWidth + gutterOffset) * (width / 100) - gutterOffset);
-}
-
-/**
- * Duplicate logic from `@atlaskit/editor-common/ui` for MediaSingle.
- * `packages/editor/editor-common/src/ui/MediaSingle/index.tsx`
- *
- * WHY?
- * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
- * `@atlaskit/editor-common` 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.
- */
-function computeMediaSingleDimensions(_ref) {
-  var childNode = _ref.childNode,
-    mediaSingleWidth = _ref.mediaSingleWidth,
-    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)) {
-    mediaSingleWidth = widthType === 'pixel' ? editorWidth / 2 : 50;
+  var hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
+  if (!hasMediaDimensionWidth) {
+    return "calc((100% / 2) - ".concat(HALF_GUTTER_SIZE, ")");
   }
-  var isHeightOnly = width === undefined;
-  if (mediaSingleWidth) {
-    var pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, widthType, MEDIA_SINGLE_GUTTER_SIZE);
-    if (isHeightOnly) {
-      return {
-        width: pxWidth - akEditorMediaResizeHandlerPaddingWide,
-        height: height
-      };
-    } else {
-      return {
-        width: pxWidth,
-        height: height / width * pxWidth
-      };
-    }
-  } else if (isHeightOnly) {
-    return {
-      width: DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide,
-      height: height
-    };
+  if (isPixelWidth) {
+    return "min(calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(HALF_GUTTER_SIZE, "), ").concat(mediaSingleDimensionWidth, "px)");
   }
-  return {
-    height: height,
-    width: width
-  };
-}
-function computeLayoutStyles(width, layout) {
+  var hasChildMediaWidth = typeof childMediaWidth === 'number';
+  if (hasChildMediaWidth) {
+    return "min(calc(100% * (".concat(mediaSingleDimensionWidth, " / 100) - ").concat(HALF_GUTTER_SIZE, "), ").concat(childMediaWidth, "px)");
+  }
+  return "calc(100% * (".concat(mediaSingleDimensionWidth, " / 100) - ").concat(HALF_GUTTER_SIZE, ")");
+};
+var mediaProportionalWidthCSSCalc = exports.mediaProportionalWidthCSSCalc = function mediaProportionalWidthCSSCalc(_ref3) {
+  var isPixelWidth = _ref3.isPixelWidth,
+    isExtendedResizeExperience = _ref3.isExtendedResizeExperience,
+    mediaSingleDimensionWidth = _ref3.mediaSingleDimensionWidth,
+    isMediaWrapped = _ref3.isMediaWrapped;
+  var hasMediaWidth = typeof mediaSingleDimensionWidth === 'number';
+  if (isPixelWidth || isExtendedResizeExperience || !hasMediaWidth) {
+    return 'unset';
+  }
+  if (isMediaWrapped) {
+    return mediaSingleDimensionWidth >= 50 ? '1' : "".concat(1 - mediaSingleDimensionWidth / 100);
+  }
+  return "".concat(mediaSingleDimensionWidth / 100);
+};
+var mediaJustifyContentCSS = exports.mediaJustifyContentCSS = function mediaJustifyContentCSS(_ref4) {
+  var layout = _ref4.layout;
   switch (layout) {
     case 'align-end':
-      return "margin-left: auto; margin-right: 0; width: ".concat(width, "px;");
+    case 'wrap-right':
+      return 'end';
     case 'align-start':
-      return "margin-left: 0; margin-right: auto; width: ".concat(width, "px;");
-    case 'center':
-      return 'margin-left: auto; margin-right: auto;';
-    case 'full-width':
-    case 'wide':
-      return 'width: 100%; margin-top: 56px; margin-bottom: 56px;';
     case 'wrap-left':
-      return 'float: left;';
-    case 'wrap-right':
-      return 'float: right;';
+      return 'start';
+    default:
+      return 'center';
   }
-}
+};
+var prepareWrapperContentDOM = exports.prepareWrapperContentDOM = function prepareWrapperContentDOM(_ref5) {
+  var layout = _ref5.layout,
+    dataAttrs = _ref5.dataAttrs,
+    childMediaWidth = _ref5.childMediaWidth,
+    childMediaHeight = _ref5.childMediaHeight,
+    mediaSingleDimensionWidth = _ref5.mediaSingleDimensionWidth,
+    isPixelWidth = _ref5.isPixelWidth,
+    isExtendedResizeExperience = _ref5.isExtendedResizeExperience;
+  var layoutStyleJustifyContent = mediaJustifyContentCSS({
+    layout: layout
+  });
+  var mediaWidthCalc = mediaWidthCSSCalc({
+    layout: layout,
+    mediaSingleDimensionWidth: mediaSingleDimensionWidth,
+    baseWidth: childMediaWidth,
+    isPixelWidth: isPixelWidth,
+    isExtendedResizeExperience: isExtendedResizeExperience
+  });
+  var paddingBottom = "calc((".concat(childMediaHeight, " / ").concat(childMediaWidth, ") * 100%)");
+  return ['div', _objectSpread({
+    class: "rich-media-item mediaSingleView-content-wrap image-".concat(layout),
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      display: 'flex',
+      justifyContent: layoutStyleJustifyContent,
+      transform: 'unset',
+      marginLeft: '0'
+    })
+  }, dataAttrs), ['div', {
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      borderRadius: "var(--ds-border-radius, 3px)",
+      width: mediaWidthCalc,
+      minWidth: mediaWidthCalc,
+      color: "var(--ds-icon, ".concat(_colors.N50, ")")
+    })
+  }, ['figure', {
+    class: 'media-single-node',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      '--ak-editor-media-padding-bottom': paddingBottom,
+      margin: '0px'
+    })
+  }, ['div', {}, ['div', {
+    class: 'media-content-wrap'
+  }, 0]]]]];
+};
+var toDOM = exports.toDOM = function toDOM(node) {
+  var _mediaSingleAttrs$lay;
+  var mediaSingleAttrs = node.attrs;
+  var isPixelWidth = (mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType) === 'pixel';
+  var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
+  var childNode = node.firstChild;
+  var isExternalMedia = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external';
+  var childMediaWidth = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width) || DEFAULT_IMAGE_WIDTH;
+  var childMediaHeight = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height) || DEFAULT_IMAGE_HEIGHT;
+  var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)((0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience'), node);
+  var content = prepareWrapperContentDOM({
+    layout: layout,
+    dataAttrs: dataAttrs,
+    childMediaWidth: childMediaWidth,
+    childMediaHeight: childMediaHeight,
+    mediaSingleDimensionWidth: mediaSingleAttrs.width,
+    isPixelWidth: isPixelWidth,
+    isExtendedResizeExperience: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')
+  });
+  var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
+  var proportionCalc = mediaProportionalWidthCSSCalc({
+    isPixelWidth: isPixelWidth,
+    isMediaWrapped: isMediaWrapped,
+    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width,
+    isExtendedResizeExperience: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')
+  });
+  var contentWrapperWidth = mediaContentWrapperWidthCSSCalc({
+    isMediaWrapped: isMediaWrapped,
+    isExternalMedia: isExternalMedia,
+    isPixelWidth: isPixelWidth,
+    childMediaWidth: childMediaWidth,
+    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width
+  });
+  return ['div', {
+    class: 'mediaSingleView-content-wrap',
+    layout: layout,
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      '--ak-editor-media-single--proportion': proportionCalc,
+      '--ak-editor-media-card-display': 'block',
+      '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
+      '--ak-editor-media-margin-right': '0',
+      '--ak-editor-media-card-background-color': "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+      marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
+      marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
+      marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,
+      marginLeft: isMediaWrapped ? layout === 'wrap-left' ? 'auto' : HALF_GUTTER_SIZE : 0,
+      width: contentWrapperWidth
+    })
+  }, content];
+};
 
 // @nodeSpecException:toDOM patch
 var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDOM(mediaSingleOption) {
@@ -124,45 +215,6 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
     return mediaSingleNode;
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
-    toDOM: function toDOM(node, lazyNodeViewOptions) {
-      var _mediaSingleAttrs$lay;
-      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,
-          editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
-        }),
-        width = _computeMediaSingleDi.width,
-        height = _computeMediaSingleDi.height;
-      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 ".concat(layoutClass)
-      }, dataAttrs), ['div', {
-        // Transparent image workaround to control styling
-        style: "".concat(sizes, "; ").concat(style, "; max-width: 100%; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(layoutStyle)
-      }, ['figure', {
-        class: 'media-single-node',
-        style: 'margin: 0px'
-      }, ['div', {}, ['div', {
-        class: 'media-content-wrap'
-      }, 0]]]]];
-      return ['div', {
-        class: 'mediaSingleView-content-wrap',
-        layout: layout
-      }, content];
-    }
+    toDOM: toDOM
   });
 };

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

@@ -1,7 +1,7 @@
 import { media } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getMediaAttrs } from './toDOMAttrs';
-const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
 
 /**
  * Duplicate consts from `media-card`.
@@ -28,12 +28,16 @@ export const mediaSpecWithFixedToDOM = () => {
     ...media,
     toDOM: node => {
       const attrs = getMediaAttrs('media', node);
-      const styles = skeletonStyling;
       if (node.attrs.type === 'external') {
         return ['img', {
           ...attrs,
           src: node.attrs.url,
-          styles
+          style: convertToInlineCss({
+            backgroundColor: `${"var(--ds-background-neutral, #091E420F)"}`,
+            outline: 'none',
+            width: `var(--ak-editor-media-card-width, 100%)`,
+            height: `var(--ak-editor-media-card-height, 100%)`
+          })
         }];
       }
       if (node.attrs.type === 'file') {
@@ -46,24 +50,28 @@ export const mediaSpecWithFixedToDOM = () => {
           ...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: 3px;
-						outline: none;
 
-						flex-basis: ${defaultImageCardDimensions.width}px;
-						background-color: var(--media-card-background-color);
-						width: var(--media-card-width, ${node.attrs.width || width}px);
-						height: var(--media-card-height, ${node.attrs.height || height}px);
-						`
+          style: convertToInlineCss({
+            display: 'var(--ak-editor-media-card-display, inline-block)',
+            backgroundImage: `url("${dataUrl}")`,
+            marginLeft: '0',
+            marginRight: 'var(--ak-editor-media-margin-right, 4px)',
+            borderRadius: '3px',
+            outline: 'none',
+            flexBasis: `${defaultImageCardDimensions.width}px`,
+            backgroundColor: 'var(--ak-editor-media-card-background-color)',
+            width: `var(--ak-editor-media-card-width, 100%)`,
+            height: `var(--ak-editor-media-card-height, 0)`,
+            paddingBottom: `var(--ak-editor-media-padding-bottom, 0)`
+          })
         }];
       }
       return ['div', {
         ...attrs,
-        styles
+        styles: convertToInlineCss({
+          backgroundColor: `var(--ak-editor-media-card-background-color, ${"var(--ds-background-neutral, #091E420F)"})`,
+          outline: 'none'
+        })
       }];
     }
   };

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

@@ -63,9 +63,9 @@ export const mediaGroupSpecWithFixedToDOM = () => {
 						margin: 3px 5px;
 						display: flex;
 						gap: 8px;
-						--media-card-background-color: #EBECF0;
-						--media-card-width: ${defaultImageCardDimensions.width}px;
-						--media-card-height: ${defaultImageCardDimensions.height}px;
+						--ak-editor-media-card-background-color: #EBECF0;
+						--ak-editor-media-card-width: ${defaultImageCardDimensions.width}px;
+						--ak-editor-media-card-height: ${defaultImageCardDimensions.height}px;
 					`,
         'data-node-type': 'mediaGroup'
       }, 0];