@atlaskit/editor-plugin-media 1.34.7 → 1.34.9

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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 { 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';
-var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
 
 /**
  * Duplicate consts from `media-card`.
@@ -30,11 +30,15 @@ export var mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
   return _objectSpread(_objectSpread({}, media), {}, {
     toDOM: function toDOM(node) {
       var attrs = getMediaAttrs('media', node);
-      var styles = skeletonStyling;
       if (node.attrs.type === 'external') {
         return ['img', _objectSpread(_objectSpread({}, attrs), {}, {
           src: node.attrs.url,
-          styles: 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') {
@@ -47,11 +51,27 @@ export var mediaSpecWithFixedToDOM = function 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: "\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: 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: convertToInlineCss({
+          backgroundColor: "var(--ak-editor-media-card-background-color, ".concat("var(--ds-background-neutral, #091E420F)", ")"),
+          outline: 'none'
+        })
       })];
     }
   });

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

@@ -62,7 +62,7 @@ export var mediaGroupSpecWithFixedToDOM = function mediaGroupSpecWithFixedToDOM(
     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/esm/toDOM-fixes/mediaSingle.js

@@ -2,112 +2,204 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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 { mediaSingleSpec } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N20, N50 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
-var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
-export var 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.
- */
-export var 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';
+export var 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.
- */
-export 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;
+export var 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, ")");
+};
+export var 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);
+};
+export var 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';
   }
-}
+};
+export var 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: convertToInlineCss({
+      display: 'flex',
+      justifyContent: layoutStyleJustifyContent,
+      transform: 'unset',
+      marginLeft: '0'
+    })
+  }, dataAttrs), ['div', {
+    style: convertToInlineCss({
+      borderRadius: "var(--ds-border-radius, 3px)",
+      width: mediaWidthCalc,
+      minWidth: mediaWidthCalc,
+      color: "var(--ds-icon, ".concat(N50, ")")
+    })
+  }, ['figure', {
+    class: 'media-single-node',
+    style: convertToInlineCss({
+      '--ak-editor-media-padding-bottom': paddingBottom,
+      margin: '0px'
+    })
+  }, ['div', {}, ['div', {
+    class: 'media-content-wrap'
+  }, 0]]]]];
+};
+export var 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 = getAttrsFromNodeMediaSingle(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: 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: 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: 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(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
 export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDOM(mediaSingleOption) {
@@ -116,45 +208,6 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
     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 = 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/esm/ui/CaptionPlaceholder/index.js

@@ -4,23 +4,55 @@ var _templateObject;
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { captionMessages as messages } from '@atlaskit/editor-common/media';
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { Pressable, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 // 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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
-export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var placeholderButton = xcss({
+  width: '100%',
+  marginTop: 'space.100'
+});
+
+// platform_editor_typography_migration_ugc clean up
+// Remove this component
+export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
-  return jsx("span", {
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    jsx("span", {
+      ref: ref,
+      css: placeholder,
+      onClick: onClick,
+      "data-id": CAPTION_PLACEHOLDER_ID,
+      "data-testid": "caption-placeholder"
+    }, jsx(FormattedMessage, messages.placeholder))
+  );
+});
+export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var onClick = _ref2.onClick;
+  var handleMouseDown = 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 jsx(Pressable, {
     ref: ref,
-    css: placeholder,
+    backgroundColor: "color.background.neutral.subtle",
     onClick: onClick,
+    onMouseDown: handleMouseDown,
     "data-id": CAPTION_PLACEHOLDER_ID,
-    "data-testid": "caption-placeholder"
-  }, jsx(FormattedMessage, messages.placeholder));
+    testId: "caption-placeholder",
+    padding: "space.0",
+    xcss: placeholderButton
+  }, jsx(Text, {
+    color: "color.text.subtlest",
+    size: "large"
+  }, jsx(FormattedMessage, messages.placeholder)));
 });

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

@@ -10,11 +10,15 @@ import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
-import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+var pixelSizingLabel = xcss({
+  gridArea: 'label',
+  lineHeight: "var(--ds-space-300, 24px)"
+});
 export var PixelEntry = function PixelEntry(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
@@ -148,9 +152,10 @@ export var PixelEntry = function PixelEntry(_ref) {
             maxWidth: maxWidth
           })
         })));
-      }), jsx("span", {
-        css: pixelSizingLabel
-      }, "x"), jsx(Field, {
+      }), jsx(Box, {
+        as: "span",
+        xcss: pixelSizingLabel
+      }, "\xD7"), jsx(Field, {
         key: "inputHeight",
         name: "inputHeight",
         defaultValue: computedHeight

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

@@ -6,6 +6,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
 export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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
 export var pixelEntryForm = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -23,11 +24,7 @@ export var pixelSizingInput = css({
     textAlign: 'center'
   }
 });
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var pixelSizingLabel = 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
 export var pixelSizingWidthInput = css({
   gridArea: 'widthinput'

package/dist/types/nodeviews/mediaSingle.d.ts

@@ -34,7 +34,7 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     mediaNodeUpdater: MediaNodeUpdater | null;
     state: MediaSingleNodeState;
     mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
-    captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
+    captionPlaceHolderRef: React.RefObject<HTMLButtonElement | HTMLSpanElement>;
     createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
     UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
     setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;

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

@@ -1,30 +1,45 @@
-import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-export declare const wrappedLayouts: string[];
-/**
- * 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.
- */
-export declare const shouldAddDefaultWrappedWidth: (layout: string, width?: number, lineLength?: number) => boolean | 0 | undefined;
-/**
- * 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.
- */
-export declare function getMediaSinglePixelWidth(width: number, editorWidth: number, widthType?: string, gutterOffset?: number): number;
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema/schema';
+import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+type MediaWidthCSSCalcProps = {
+    layout: MediaSingleLayout;
+    mediaSingleDimensionWidth: number | undefined;
+    baseWidth: number | undefined;
+    isPixelWidth: boolean;
+    isExtendedResizeExperience: boolean;
+};
+export declare const mediaWidthCSSCalc: ({ mediaSingleDimensionWidth, layout, baseWidth, isPixelWidth, isExtendedResizeExperience, }: MediaWidthCSSCalcProps) => string;
+type MediaContentWrapperWidthCSSCalcProps = {
+    isMediaWrapped: boolean;
+    isExternalMedia: boolean;
+    isPixelWidth: boolean;
+    childMediaWidth: number | undefined;
+    mediaSingleDimensionWidth: number | undefined;
+};
+export declare const mediaContentWrapperWidthCSSCalc: ({ isMediaWrapped, isExternalMedia, isPixelWidth, childMediaWidth, mediaSingleDimensionWidth, }: MediaContentWrapperWidthCSSCalcProps) => string;
+type MediaProportionalWidthCSSCalcProps = {
+    isPixelWidth: boolean;
+    isExtendedResizeExperience: boolean;
+    isMediaWrapped: boolean;
+    mediaSingleDimensionWidth: number | undefined;
+};
+export declare const mediaProportionalWidthCSSCalc: ({ isPixelWidth, isExtendedResizeExperience, mediaSingleDimensionWidth, isMediaWrapped, }: MediaProportionalWidthCSSCalcProps) => string;
+type MediaJustifyContentCSSProps = {
+    layout: MediaSingleLayout;
+};
+export declare const mediaJustifyContentCSS: ({ layout }: MediaJustifyContentCSSProps) => string;
+type PrepareWrapperContentDOMProps = {
+    layout: MediaSingleLayout;
+    dataAttrs: Record<string, unknown>;
+    childMediaWidth: number;
+    childMediaHeight: number;
+    mediaSingleDimensionWidth: number;
+    isPixelWidth: boolean;
+    isExtendedResizeExperience: boolean;
+};
+export declare const prepareWrapperContentDOM: ({ layout, dataAttrs, childMediaWidth, childMediaHeight, mediaSingleDimensionWidth, isPixelWidth, isExtendedResizeExperience, }: PrepareWrapperContentDOMProps) => DOMOutputSpec;
+export declare const toDOM: (node: PMNode) => DOMOutputSpec;
 export declare const mediaSingleSpecWithFixedToDOM: (mediaSingleOption: {
     withCaption?: boolean;
     withExtendedWidthTypes: boolean;
 }) => NodeSpec;
+export {};

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

@@ -3,7 +3,9 @@
  * @jsx jsx
  */
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<{
+export declare const CaptionPlaceholder: React.ForwardRefExoticComponent<{
     onClick: () => void;
 } & React.RefAttributes<HTMLSpanElement>>;
-export default _default;
+export declare const CaptionPlaceholderButton: React.ForwardRefExoticComponent<{
+    onClick: () => void;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/PixelEntry/styles.d.ts

@@ -1,7 +1,6 @@
 export declare const pixelSizingWrapper: import("@emotion/react").SerializedStyles;
 export declare const pixelEntryForm: import("@emotion/react").SerializedStyles;
 export declare const pixelSizingInput: import("@emotion/react").SerializedStyles;
-export declare const pixelSizingLabel: import("@emotion/react").SerializedStyles;
 export declare const pixelSizingWidthInput: import("@emotion/react").SerializedStyles;
 export declare const pixelSizingHeightInput: import("@emotion/react").SerializedStyles;
 export declare const pixelEntryHiddenSubmit: import("@emotion/react").SerializedStyles;