@atlaskit/editor-plugin-media 1.34.7 → 1.34.9

package/dist/es2019/nodeviews/mediaSingle.js

@@ -24,7 +24,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
-import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
 import { CommentBadge, CommentBadgeNextWrapper } from '../ui/CommentBadge';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -47,6 +47,8 @@ export default class MediaSingleNode extends Component {
       isCopying: false
     });
     _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
+    // platform_editor_typography_migration_ugc clean up
+    // remove HTMLSpanElement type
     _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "createOrUpdateMediaNodeUpdater", props => {
       const node = this.props.node.firstChild;
@@ -422,10 +424,16 @@ export default class MediaSingleNode extends Component {
       isDrafting: isCurrentNodeDrafting
     }), jsx("div", {
       ref: this.props.forwardRef
-    }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
+    }), shouldShowPlaceholder && (editorExperiment('typography_migration_ugc', true) ? jsx(CaptionPlaceholderButton
+    // platform_editor_typography_migration_ugc clean up
+    // remove typecasting
+    , {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
-    }));
+    }) : jsx(CaptionPlaceholder, {
+      ref: this.captionPlaceHolderRef,
+      onClick: this.clickPlaceholder
+    })));
     return jsx(Fragment, null, canResize ? fg('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
       showLegacyNotification: widthType !== 'pixel'
     }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {

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];

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

@@ -1,109 +1,208 @@
 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';
-const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
-export const 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 const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+const WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
+const ALIGNED_LAYOUTS = ['align-end', 'align-start'];
+const LEGACY_LAYOUTS = ['full-width', 'wide'];
+const DEFAULT_IMAGE_WIDTH = 250;
+const DEFAULT_IMAGE_HEIGHT = 200;
+const GUTTER_SIZE = '24px';
+const HALF_GUTTER_SIZE = '12px';
+export const mediaWidthCSSCalc = ({
+  mediaSingleDimensionWidth,
+  layout,
+  baseWidth,
+  isPixelWidth,
+  isExtendedResizeExperience
+}) => {
+  const hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
+  const isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
+  const isMediaAligned = ALIGNED_LAYOUTS.includes(layout);
+  const isMediaLegacyLayout = LEGACY_LAYOUTS.includes(layout);
+  const shouldUseAlignedLayoutCalc = isMediaAligned && !hasMediaDimensionWidth;
+  const shouldUseWrappedLayoutCalc = isMediaWrapped && !hasMediaDimensionWidth;
+  const shouldUseBreakoutWideLogic = layout === 'wide';
+  const shouldUseBreakoutFullWidthLogic = layout === 'full-width';
+  const shouldUseProportionalCalc = !isExtendedResizeExperience && !isPixelWidth && hasMediaDimensionWidth && !isMediaLegacyLayout && !isMediaWrapped;
+  const shouldUseHalfContainerCalc = shouldUseProportionalCalc && isMediaAligned && mediaSingleDimensionWidth >= 100;
+  const shouldHardCodePixelWidth = isExtendedResizeExperience && isPixelWidth && hasMediaDimensionWidth;
+  const containerWidthPlusGutter = `(min(100cqw, 100%) + ${GUTTER_SIZE})`;
+  const fullContainerWidth = 'var(--ak-editor-max-container-width, 100cqw)';
+  const applyContainerWidthBoundaries = calc => {
+    // Safe measure to avoid bleeding
+    return `min(${calc}, ${fullContainerWidth})`;
+  };
+  let cssCalc = '';
+  if (shouldUseAlignedLayoutCalc) {
+    cssCalc = `min(calc(${containerWidthPlusGutter} * 0.5 - ${GUTTER_SIZE}), ${baseWidth}px)`;
+  } else if (shouldUseWrappedLayoutCalc) {
+    cssCalc = `100%`;
+  } else if (shouldUseHalfContainerCalc) {
+    cssCalc = `min(min(${baseWidth}px, calc(50cqw - ${HALF_GUTTER_SIZE})), 100%)`;
+  } else if (shouldUseProportionalCalc) {
+    cssCalc = `calc(${containerWidthPlusGutter} * var(--ak-editor-media-single--proportion, 1px) - ${GUTTER_SIZE})`;
+  } else if (shouldHardCodePixelWidth) {
+    cssCalc = `min(${mediaSingleDimensionWidth}px, ${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(${baseWidth}px, min(100cqw, 100%)), ${GUTTER_SIZE})`;
+  }
+  return applyContainerWidthBoundaries(cssCalc);
 };
-const MEDIA_SINGLE_GUTTER_SIZE = 24;
-const DEFAULT_EMBED_CARD_WIDTH = 680;
-const 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, widthType = 'percentage', gutterOffset = 0) {
-  if (widthType === 'pixel') {
-    return width;
+export const mediaContentWrapperWidthCSSCalc = ({
+  isMediaWrapped,
+  isExternalMedia,
+  isPixelWidth,
+  childMediaWidth,
+  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({
-  childNode,
-  mediaSingleWidth,
-  widthType,
-  editorWidth
-}) {
-  const width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
-  const height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
-    mediaSingleWidth = widthType === 'pixel' ? editorWidth / 2 : 50;
+  const hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
+  if (!hasMediaDimensionWidth) {
+    return `calc((100% / 2) - ${HALF_GUTTER_SIZE})`;
   }
-  const isHeightOnly = width === undefined;
-  if (mediaSingleWidth) {
-    const pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, widthType, MEDIA_SINGLE_GUTTER_SIZE);
-    if (isHeightOnly) {
-      return {
-        width: pxWidth - akEditorMediaResizeHandlerPaddingWide,
-        height
-      };
-    } else {
-      return {
-        width: pxWidth,
-        height: height / width * pxWidth
-      };
-    }
-  } else if (isHeightOnly) {
-    return {
-      width: DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide,
-      height
-    };
+  if (isPixelWidth) {
+    return `min(calc((var(--ak-editor-max-container-width, 100%) / 2) - ${HALF_GUTTER_SIZE}), ${mediaSingleDimensionWidth}px)`;
   }
-  return {
-    height,
-    width
-  };
-}
-function computeLayoutStyles(width, layout) {
+  const hasChildMediaWidth = typeof childMediaWidth === 'number';
+  if (hasChildMediaWidth) {
+    return `min(calc(100% * (${mediaSingleDimensionWidth} / 100) - ${HALF_GUTTER_SIZE}), ${childMediaWidth}px)`;
+  }
+  return `calc(100% * (${mediaSingleDimensionWidth} / 100) - ${HALF_GUTTER_SIZE})`;
+};
+export const mediaProportionalWidthCSSCalc = ({
+  isPixelWidth,
+  isExtendedResizeExperience,
+  mediaSingleDimensionWidth,
+  isMediaWrapped
+}) => {
+  const hasMediaWidth = typeof mediaSingleDimensionWidth === 'number';
+  if (isPixelWidth || isExtendedResizeExperience || !hasMediaWidth) {
+    return 'unset';
+  }
+  if (isMediaWrapped) {
+    return mediaSingleDimensionWidth >= 50 ? '1' : `${1 - mediaSingleDimensionWidth / 100}`;
+  }
+  return `${mediaSingleDimensionWidth / 100}`;
+};
+export const mediaJustifyContentCSS = ({
+  layout
+}) => {
   switch (layout) {
     case 'align-end':
-      return `margin-left: auto; margin-right: 0; width: ${width}px;`;
+    case 'wrap-right':
+      return 'end';
     case 'align-start':
-      return `margin-left: 0; margin-right: auto; width: ${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 const prepareWrapperContentDOM = ({
+  layout,
+  dataAttrs,
+  childMediaWidth,
+  childMediaHeight,
+  mediaSingleDimensionWidth,
+  isPixelWidth,
+  isExtendedResizeExperience
+}) => {
+  const layoutStyleJustifyContent = mediaJustifyContentCSS({
+    layout
+  });
+  const mediaWidthCalc = mediaWidthCSSCalc({
+    layout,
+    mediaSingleDimensionWidth,
+    baseWidth: childMediaWidth,
+    isPixelWidth,
+    isExtendedResizeExperience
+  });
+  const paddingBottom = `calc((${childMediaHeight} / ${childMediaWidth}) * 100%)`;
+  return ['div', {
+    class: `rich-media-item mediaSingleView-content-wrap image-${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, ${N50})`
+    })
+  }, ['figure', {
+    class: 'media-single-node',
+    style: convertToInlineCss({
+      '--ak-editor-media-padding-bottom': paddingBottom,
+      margin: '0px'
+    })
+  }, ['div', {}, ['div', {
+    class: 'media-content-wrap'
+  }, 0]]]]];
+};
+export const toDOM = node => {
+  var _mediaSingleAttrs$lay;
+  const mediaSingleAttrs = node.attrs;
+  const isPixelWidth = (mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType) === 'pixel';
+  const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
+  const childNode = node.firstChild;
+  const isExternalMedia = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external';
+  const childMediaWidth = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width) || DEFAULT_IMAGE_WIDTH;
+  const childMediaHeight = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height) || DEFAULT_IMAGE_HEIGHT;
+  const dataAttrs = getAttrsFromNodeMediaSingle(fg('platform.editor.media.extended-resize-experience'), node);
+  const content = prepareWrapperContentDOM({
+    layout,
+    dataAttrs,
+    childMediaWidth,
+    childMediaHeight,
+    mediaSingleDimensionWidth: mediaSingleAttrs.width,
+    isPixelWidth,
+    isExtendedResizeExperience: fg('platform.editor.media.extended-resize-experience')
+  });
+  const isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
+  const proportionCalc = mediaProportionalWidthCSSCalc({
+    isPixelWidth,
+    isMediaWrapped,
+    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width,
+    isExtendedResizeExperience: fg('platform.editor.media.extended-resize-experience')
+  });
+  const contentWrapperWidth = mediaContentWrapperWidthCSSCalc({
+    isMediaWrapped,
+    isExternalMedia,
+    isPixelWidth,
+    childMediaWidth,
+    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width
+  });
+  return ['div', {
+    class: 'mediaSingleView-content-wrap',
+    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, ${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 const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
@@ -113,47 +212,6 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
   }
   return {
     ...mediaSingleNode,
-    toDOM: (node, lazyNodeViewOptions) => {
-      var _mediaSingleAttrs$lay;
-      const mediaSingleAttrs = node.attrs;
-      const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
-      const mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
-      const widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
-      const childNode = node.firstChild;
-      const dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
-      const {
-        width,
-        height
-      } = computeMediaSingleDimensions({
-        childNode,
-        widthType,
-        mediaSingleWidth,
-        editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
-      });
-      const sizes = width && height ? `width: ${width}px; height: ${height}px; ${skeletonStyling}` : '';
-      const layoutStyles = computeLayoutStyles(mediaSingleWidth, layout);
-      const style = `display: block; margin-top: ${"var(--ds-space-300, 24px)"}; margin-bottom: ${"var(--ds-space-300, 24px)"}; ${layoutStyles}`;
-      const layoutClass = `image-${layout}`;
-      const centerLayout = `display: flex; justify-content: center;`;
-      const endLayout = `display: flex; justify-content: end;`;
-      const startLayout = `display: flex; justify-content: start;`;
-      const layoutStyle = layout === 'align-end' ? endLayout : layout === 'align-start' ? startLayout : centerLayout;
-      const content = ['div', {
-        class: `rich-media-item mediaSingleView-content-wrap ${layoutClass}`,
-        ...dataAttrs
-      }, ['div', {
-        // Transparent image workaround to control styling
-        style: `${sizes}; ${style}; max-width: 100%; border-radius: ${"var(--ds-border-radius, 3px)"}; ${layoutStyle}`
-      }, ['figure', {
-        class: 'media-single-node',
-        style: 'margin: 0px'
-      }, ['div', {}, ['div', {
-        class: 'media-content-wrap'
-      }, 0]]]]];
-      return ['div', {
-        class: 'mediaSingleView-content-wrap',
-        layout
-      }, content];
-    }
+    toDOM
   };
 };

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

@@ -2,13 +2,14 @@
  * @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
 const placeholder = css`
@@ -18,14 +19,46 @@ const placeholder = css`
 	margin-top: ${"var(--ds-space-100, 8px)"} !important;
 	display: block;
 `;
-export default /*#__PURE__*/React.forwardRef(({
+const placeholderButton = xcss({
+  width: '100%',
+  marginTop: 'space.100'
+});
+
+// platform_editor_typography_migration_ugc clean up
+// Remove this component
+export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
+  onClick
+}, ref) => {
+  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 const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
   onClick
 }, ref) => {
-  return jsx("span", {
+  const handleMouseDown = useCallback(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/es2019/ui/PixelEntry/index.js

@@ -9,11 +9,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';
+const pixelSizingLabel = xcss({
+  gridArea: 'label',
+  lineHeight: "var(--ds-space-300, 24px)"
+});
 export const PixelEntry = ({
   width,
   mediaWidth,
@@ -142,9 +146,10 @@ export const PixelEntry = ({
         "aria-label": formatMessage(messages.inputWidthAriaLabel, {
           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/es2019/ui/PixelEntry/styles.js

@@ -17,6 +17,7 @@ export const pixelSizingWrapper = css`
 		margin-top: 0 !important;
 	}
 `;
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const pixelEntryForm = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -34,11 +35,7 @@ export const pixelSizingInput = css({
     textAlign: 'center'
   }
 });
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const 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 const pixelSizingWidthInput = css({
   gridArea: 'widthinput'

package/dist/esm/nodeviews/mediaSingle.js

@@ -37,7 +37,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
-import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
 import { CommentBadge, CommentBadgeNextWrapper } from '../ui/CommentBadge';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -67,6 +67,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       isCopying: false
     });
     _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
+    // platform_editor_typography_migration_ugc clean up
+    // remove HTMLSpanElement type
     _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
@@ -499,10 +501,16 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         isDrafting: isCurrentNodeDrafting
       }), jsx("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
+      }), shouldShowPlaceholder && (editorExperiment('typography_migration_ugc', true) ? jsx(CaptionPlaceholderButton
+      // platform_editor_typography_migration_ugc clean up
+      // remove typecasting
+      , {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
-      }));
+      }) : jsx(CaptionPlaceholder, {
+        ref: this.captionPlaceHolderRef,
+        onClick: this.clickPlaceholder
+      })));
       return jsx(Fragment, null, canResize ? fg('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
       }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {