@atlaskit/editor-plugin-media 1.34.8 → 1.34.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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

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/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'

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/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, {

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

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.34.8",
+	"version": "1.34.9",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.21.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
@@ -61,12 +61,12 @@
 		"@atlaskit/media-filmstrip": "^47.4.0",
 		"@atlaskit/media-picker": "^66.7.0",
 		"@atlaskit/media-ui": "^25.15.0",
-		"@atlaskit/media-viewer": "^48.10.0",
+		"@atlaskit/media-viewer": "^49.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.2.0",
+		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -128,10 +128,6 @@
 			"type": "boolean",
 			"referenceOnly": "true"
 		},
-		"platform.media-experience.media-viewer-v2_hgsii": {
-			"type": "boolean",
-			"referenceOnly": "true"
-		},
 		"platform-editor-a11y-image-border-options-dropdown": {
 			"type": "boolean"
 		},