@atlaskit/editor-plugin-media 1.34.7 → 1.34.9

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-media
 
+## 1.34.9
+
+### Patch Changes
+
+- [#149558](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149558)
+  [`5e8619ac0f6e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e8619ac0f6e4) -
+  [ux] [ED-25085] Migrate typography \
+
+  editor-plugin-media:
+
+  - replace caption placeholder span with button
+  - replace x between width and height pixel entry with symbol × \
+
+  tmp-editor-statsig:
+
+  - Add experiment `platform_editor_typography_migration_ugc`
+
+- Updated dependencies
+
+## 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/nodeviews/mediaSingle.js

@@ -33,7 +33,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _captions = require("../commands/captions");
 var _main = require("../pm-plugins/main");
-var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
+var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
 var _CommentBadge = require("../ui/CommentBadge");
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
@@ -73,6 +73,8 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       isCopying: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
+    // platform_editor_typography_migration_ugc clean up
+    // remove HTMLSpanElement type
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
@@ -505,10 +507,16 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         isDrafting: isCurrentNodeDrafting
       }), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
+      }), shouldShowPlaceholder && ((0, _experiments.editorExperiment)('typography_migration_ugc', true) ? (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholderButton
+      // platform_editor_typography_migration_ugc clean up
+      // remove typecasting
+      , {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
-      }));
+      }) : (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholder, {
+        ref: this.captionPlaceHolderRef,
+        onClick: this.clickPlaceholder
+      })));
       return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
       }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {

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/cjs/ui/CaptionPlaceholder/index.js

@@ -1,16 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CaptionPlaceholderButton = exports.CaptionPlaceholder = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 /**
@@ -18,15 +20,48 @@ var _templateObject;
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
-var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var placeholderButton = (0, _primitives.xcss)({
+  width: '100%',
+  marginTop: 'space.100'
+});
+
+// platform_editor_typography_migration_ugc clean up
+// Remove this component
+var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
-  return (0, _react2.jsx)("span", {
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    (0, _react2.jsx)("span", {
+      ref: ref,
+      css: placeholder,
+      onClick: onClick,
+      "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
+      "data-testid": "caption-placeholder"
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _media.captionMessages.placeholder))
+  );
+});
+var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+  var onClick = _ref2.onClick;
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    // In firefox, button is focused when mouse down, which make editor lose focus
+    // Hence we want to disabled it so that user can type in caption directly after click
+    e.preventDefault();
+  }, []);
+  return (0, _react2.jsx)(_primitives.Pressable, {
     ref: ref,
-    css: placeholder,
+    backgroundColor: "color.background.neutral.subtle",
     onClick: onClick,
+    onMouseDown: handleMouseDown,
     "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
-    "data-testid": "caption-placeholder"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _media.captionMessages.placeholder));
+    testId: "caption-placeholder",
+    padding: "space.0",
+    xcss: placeholderButton
+  }, (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    size: "large"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _media.captionMessages.placeholder)));
 });

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

@@ -27,6 +27,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var pixelSizingLabel = (0, _primitives.xcss)({
+  gridArea: 'label',
+  lineHeight: "var(--ds-space-300, 24px)"
+});
 var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
@@ -160,9 +164,10 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
             maxWidth: maxWidth
           })
         })));
-      }), (0, _react2.jsx)("span", {
-        css: _styles.pixelSizingLabel
-      }, "x"), (0, _react2.jsx)(_form.Field, {
+      }), (0, _react2.jsx)(_primitives.Box, {
+        as: "span",
+        xcss: pixelSizingLabel
+      }, "\xD7"), (0, _react2.jsx)(_form.Field, {
         key: "inputHeight",
         name: "inputHeight",
         defaultValue: computedHeight

package/dist/cjs/ui/PixelEntry/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelSizingFullWidthLabelStyles = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
+exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelSizingFullWidthLabelStyles = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -12,6 +12,7 @@ var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var pixelSizingWrapper = exports.pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1em 1fr 0;\n\tgrid-template-rows: auto;\n\tgrid-template-areas: 'widthinput label heightinput submit';\n\twidth: ", "px;\n\ttext-align: center;\n\theight: ", ";\n\n\t// Atlaskit fieldset does not allow style override\n\t& > * {\n\t\tmargin-top: 0 !important;\n\t}\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var pixelEntryForm = exports.pixelEntryForm = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -29,11 +30,7 @@ var pixelSizingInput = exports.pixelSizingInput = (0, _react.css)({
     textAlign: 'center'
   }
 });
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var pixelSizingLabel = exports.pixelSizingLabel = (0, _react.css)({
-  gridArea: 'label',
-  lineHeight: "var(--ds-space-300, 24px)"
-});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var pixelSizingWidthInput = exports.pixelSizingWidthInput = (0, _react.css)({
   gridArea: 'widthinput'