@atlaskit/editor-plugin-media 1.34.8 → 1.34.10

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-media
 
+## 1.34.10
+
+### Patch Changes
+
+- [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
+  [`79a44707fe935`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/79a44707fe935) -
+  [ED-24001] This change is cleaning up the feature gate for the image border options dropdown a11y
+  fix.
+
+## 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/ImageBorder/index.js

@@ -16,7 +16,6 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
@@ -79,36 +78,32 @@ var ImageBorder = function ImageBorder(_ref) {
     }
   };
   var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
-    if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        callback();
-        setIsOpenedByKeyboard(true);
-      }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      callback();
+      setIsOpenedByKeyboard(true);
     }
   };
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-      var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
-        if (!isOpenByKeyboard) {
+    var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
+      if (!isOpenByKeyboard) {
+        return;
+      }
+      if (isOpen && submenuRef.current) {
+        var firstOption = submenuRef.current.querySelector('button');
+        if (!firstOption) {
           return;
         }
-        if (isOpen && submenuRef.current) {
-          var firstOption = submenuRef.current.querySelector('button');
-          if (!firstOption) {
-            return;
-          }
-          firstOption.focus();
-          var keyboardEvent = new KeyboardEvent('keydown', {
-            key: 'ArrowDown',
-            bubbles: true
-          });
-          firstOption.dispatchEvent(keyboardEvent);
-        }
-      };
-      focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
-      focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
-    }
+        firstOption.focus();
+        var keyboardEvent = new KeyboardEvent('keydown', {
+          key: 'ArrowDown',
+          bubbles: true
+        });
+        firstOption.dispatchEvent(keyboardEvent);
+      }
+    };
+    focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
+    focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
@@ -120,7 +115,7 @@ var ImageBorder = function ImageBorder(_ref) {
     name: formatMessage(_media.imageBorderMessages.borderSizeBold),
     value: 3
   }];
-  var items = (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? [{
+  var items = [{
     content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
       ref: dropDownColorOptionButton,
       type: "button",
@@ -266,83 +261,8 @@ var ImageBorder = function ImageBorder(_ref) {
     },
     'aria-label': '',
     wrapperTabIndex: null
-  }] : [{
-    content: formatMessage(_media.imageBorderMessages.borderColor),
-    value: {
-      name: 'color'
-    },
-    elemAfter:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-    }, (0, _react2.jsx)("div", {
-      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
-    }), isColorSubmenuOpen &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: (0, _styles2.contextualSubMenu)(0),
-      ref: handleSubMenuRef
-    }, (0, _react2.jsx)(_uiColor.ColorPalette, {
-      onClick: function onClick(color) {
-        setBorder({
-          color: color
-        });
-        setIsOpen(!isOpen);
-      },
-      selectedColor: color !== null && color !== void 0 ? color : null,
-      paletteOptions: {
-        palette: _uiColor.borderColorPalette,
-        paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
-        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
-      }
-    })))
-  }, {
-    content: formatMessage(_media.imageBorderMessages.borderSize),
-    value: {
-      name: 'size'
-    },
-    elemAfter:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-    }, (0, _react2.jsx)("div", {
-      css: _styles2.contextualMenuArrow
-    }), isSizeSubmenuOpen &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: (0, _styles2.contextualSubMenu)(1),
-      ref: handleSubMenuRef
-    }, borderSizeOptions.map(function (_ref3, idx) {
-      var name = _ref3.name,
-        value = _ref3.value;
-      return (0, _react2.jsx)(_tooltip.default, {
-        key: idx,
-        content: name
-      }, (0, _react2.jsx)("span", {
-        css: _styles2.buttonWrapperStyle
-      }, (0, _react2.jsx)("button", {
-        type: "button"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        ,
-        css: (0, _styles2.buttonStyle)(value === size),
-        "aria-label": name,
-        role: "radio",
-        "aria-checked": value === size,
-        onClick: function onClick() {
-          setBorder({
-            size: value
-          });
-          setIsOpen(false);
-        },
-        onMouseDown: function onMouseDown(e) {
-          e.preventDefault();
-        }
-      }, (0, _react2.jsx)("div", {
-        css: (0, _styles2.line)(value, value === size),
-        role: "presentation"
-      }))));
-    })))
   }];
+
   /**
    * We want to change direction of our dropdowns a bit early,
    * not exactly when it hits the boundary.
@@ -377,7 +297,7 @@ var ImageBorder = function ImageBorder(_ref) {
     className: "image-border-toolbar-dropdown",
     ref: openDropdownButtonRef,
     selected: enabled || isOpen,
-    "aria-expanded": (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
+    "aria-expanded": isOpen,
     "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
     title: formatMessage(_media.imageBorderMessages.borderOptions),
     spacing: "compact",
@@ -386,15 +306,13 @@ var ImageBorder = function ImageBorder(_ref) {
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);
-      if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-        setIsOpenedByKeyboard(false);
-      }
+      setIsOpenedByKeyboard(false);
     },
-    onKeyDown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function (e) {
+    onKeyDown: function onKeyDown(e) {
       return handleTriggerByKeyboard(e, function () {
         return setIsOpen(!isOpen);
       });
-    } : undefined
+    }
   }))), (0, _react2.jsx)(_ui.Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
@@ -405,9 +323,9 @@ var ImageBorder = function ImageBorder(_ref) {
     onMouseLeave: function onMouseLeave() {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
-    },
-    css: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    _styles2.dropdownWrapper : undefined
+    }
+    /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
+    css: _styles2.dropdownWrapper
   }, (0, _react2.jsx)(_uiMenu.DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
@@ -415,32 +333,30 @@ var ImageBorder = function ImageBorder(_ref) {
   , {
     arrowKeyNavigationProviderOptions: {
       type: _uiMenu.ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
+      disableArrowKeyNavigation: isAnySubMenuOpen
     },
-    allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
-    handleEscapeKeydown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? function () {
+    allowEnterDefaultBehavior: isAnySubMenuOpen,
+    handleEscapeKeydown: isAnySubMenuOpen ? function () {
       return;
     } : function () {
       var _openDropdownButtonRe3;
       (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
-    } : undefined,
+    },
     items: [{
       items: items
     }],
     isOpen: isOpen,
-    shouldFocusFirstItem: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function () {
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
       return isOpenByKeyboard;
-    } : undefined,
+    },
     onOpenChange: function onOpenChange() {
       setIsOpen(false);
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
-      if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-        setIsOpenedByKeyboard(false);
-      }
+      setIsOpenedByKeyboard(false);
     },
-    onItemActivated: function onItemActivated(_ref4) {
-      var item = _ref4.item;
+    onItemActivated: function onItemActivated(_ref3) {
+      var item = _ref3.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(!isColorSubmenuOpen);
       }
@@ -448,23 +364,19 @@ var ImageBorder = function ImageBorder(_ref) {
         setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
       }
     },
-    onMouseEnter: function onMouseEnter(_ref5) {
-      var item = _ref5.item;
+    onMouseEnter: function onMouseEnter(_ref4) {
+      var item = _ref4.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(true);
-        if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-          setIsOpenedByKeyboard(false);
-        }
+        setIsOpenedByKeyboard(false);
       }
       if (item.value.name === 'size') {
         setIsSizeSubmenuOpen(true);
-        if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
-          setIsOpenedByKeyboard(false);
-        }
+        setIsOpenedByKeyboard(false);
       }
     },
-    onMouseLeave: function onMouseLeave(_ref6) {
-      var item = _ref6.item;
+    onMouseLeave: function onMouseLeave(_ref5) {
+      var item = _ref5.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(false);
       }

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)));
 });