@atlaskit/editor-plugin-media 2.3.8 → 2.3.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.9
+
+### Patch Changes
+
+- [#128123](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128123)
+  [`ab71af4c9be90`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab71af4c9be90) -
+  [ux] [ED-26947] Implement media pixel resizing editor
+- Updated dependencies
+
 ## 2.3.8
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -32,6 +32,7 @@ var _keymapMedia = _interopRequireDefault(require("./pm-plugins/keymap-media"));
 var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
 var _keymap3 = _interopRequireDefault(require("./pm-plugins/linking/keymap"));
 var _main = require("./pm-plugins/main");
+var _pixelResizing = require("./pm-plugins/pixel-resizing");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaCommon2 = require("./pm-plugins/utils/media-common");
 var _mediaSingle2 = require("./pm-plugins/utils/media-single");
@@ -244,6 +245,12 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+        pmPlugins.push({
+          name: 'mediaPixelResizing',
+          plugin: _pixelResizing.createPlugin
+        });
+      }
       pmPlugins.push({
         name: 'mediaSelectionHandler',
         plugin: function plugin() {

package/dist/cjs/pm-plugins/pixel-resizing/commands.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openPixelEditor = exports.closePixelEditorAndSave = exports.closePixelEditor = void 0;
+var _index = require("./index");
+var openPixelEditor = exports.openPixelEditor = function openPixelEditor() {
+  return (0, _index.createCommand)({
+    type: 'openPixelEditor'
+  });
+};
+var closePixelEditor = exports.closePixelEditor = function closePixelEditor() {
+  return (0, _index.createCommand)({
+    type: 'closePixelEditor'
+  });
+};
+var closePixelEditorAndSave = exports.closePixelEditorAndSave = function closePixelEditorAndSave(saveTransform) {
+  return (0, _index.createCommand)({
+    type: 'closePixelEditor'
+  }, saveTransform);
+};

package/dist/cjs/pm-plugins/pixel-resizing/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPlugin = exports.createCommand = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _reducer = _interopRequireDefault(require("./reducer"));
+var pluginKey = new _state.PluginKey('mediaPixelResizingPlugin');
+var _pluginFactory = (0, _utils.pluginFactory)(pluginKey, _reducer.default, {
+    onSelectionChanged: function onSelectionChanged() {
+      return {
+        isPixelEditorOpen: false
+      };
+    }
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;
+var createPlugin = exports.createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch;
+  return new _safePlugin.SafePlugin({
+    state: createPluginState(dispatch, {
+      isPixelEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};

package/dist/cjs/pm-plugins/pixel-resizing/reducer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports.default = function _default(state, action) {
+  switch (action.type) {
+    case 'openPixelEditor':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isPixelEditorOpen: true
+        });
+      }
+    case 'closePixelEditor':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isPixelEditorOpen: false
+        });
+      }
+    default:
+      return state;
+  }
+};

package/dist/cjs/pm-plugins/pixel-resizing/ui/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIXEL_VIEW_MODE_TOOLBAR_WIDTH = exports.PIXEL_RESIZING_TOOLBAR_WIDTH = exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = void 0;
+var PIXELENTRY_MIGRATION_BUTTON_TESTID = exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';
+
+// pixel resizing toolbar width (with `platform_editor_controls` enabled)
+var PIXEL_RESIZING_TOOLBAR_WIDTH = exports.PIXEL_RESIZING_TOOLBAR_WIDTH = 240;
+var PIXEL_VIEW_MODE_TOOLBAR_WIDTH = exports.PIXEL_VIEW_MODE_TOOLBAR_WIDTH = 204;

package/dist/cjs/pm-plugins/pixel-resizing/ui/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PixelEntry = exports.FullWidthDisplay = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _media = require("@atlaskit/editor-common/media");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _primitives = require("@atlaskit/primitives");
+var _commands = require("../../../ui/toolbar/commands");
+var _utils2 = require("../../../ui/toolbar/utils");
+var _mediaSingle2 = require("../../utils/media-single");
+var _commands2 = require("../commands");
+var _pixelEntry = require("./pixel-entry");
+var _styles = require("./styles");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
+  var _pluginInjectionApi$w, _pluginInjectionApi$m;
+  var editorView = _ref.editorView,
+    selectedMediaSingleNode = _ref.selectedMediaSingleNode,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    intl = _ref.intl,
+    pluginState = _ref.pluginState,
+    hoverDecoration = _ref.hoverDecoration,
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  var contentWidth = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
+  var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
+    mediaSingleWidth = _selectedMediaSingleN.width,
+    widthType = _selectedMediaSingleN.widthType,
+    layout = _selectedMediaSingleN.layout;
+
+  // hasParentNode will return falsey value if selection depth === 0
+  var isNested = (0, _utils.hasParentNode)(function (n) {
+    return n.type !== state.schema.nodes.doc;
+  })(state.selection);
+  var updateNodeWithTr = (0, _react.useCallback)(function (width, validation) {
+    var _pluginInjectionApi$a;
+    var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, isEditorFullWidthEnabled, isNested);
+    return (0, _commands.updateMediaSingleWidthTr)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, state, width, validation, 'floatingToolBar', newLayout);
+  }, [layout, contentWidth, isEditorFullWidthEnabled, isNested, state, pluginInjectionApi]);
+  var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
+  if (!selectedMediaNode) {
+    return null;
+  }
+  var _selectedMediaNode$at = selectedMediaNode.attrs,
+    mediaWidth = _selectedMediaNode$at.width,
+    mediaHeight = _selectedMediaNode$at.height;
+  var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
+  var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  var isVideoFile = (0, _mediaSingle2.isVideo)(selectedMediaNode.attrs.__fileMimeType);
+  var minWidth = (0, _mediaSingle.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
+  var hasPixelType = widthType === 'pixel';
+  var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
+  // get pos of media node
+  mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
+  var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
+  return (0, _react2.jsx)(_pixelEntry.PixelEntryComponent, {
+    intl: intl,
+    width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+    showMigration: !pluginState.isResizing && !hasPixelType,
+    mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
+    mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    onChange: function onChange(valid) {
+      if (valid) {
+        hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
+      } else {
+        hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
+      }
+    },
+    onSubmit: function onSubmit(_ref2) {
+      var width = _ref2.width,
+        validation = _ref2.validation;
+      var tr = updateNodeWithTr(width, validation);
+      if (tr) {
+        dispatch(tr);
+      }
+    },
+    onMigrate: function onMigrate() {
+      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+        width: pixelWidthFromElement,
+        widthType: 'pixel'
+      }));
+      tr.setMeta('scrollIntoView', false);
+      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      dispatch(tr);
+    },
+    onCloseAndSave: function onCloseAndSave(_ref3) {
+      var width = _ref3.width,
+        validation = _ref3.validation;
+      var tr = updateNodeWithTr(width, validation);
+      if (tr) {
+        return (0, _commands2.closePixelEditorAndSave)(function () {
+          return tr;
+        })(state, dispatch);
+      }
+    },
+    isViewMode: pluginState.isResizing
+  });
+};
+var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref4) {
+  var formatMessage = _ref4.intl.formatMessage;
+  return (
+    // 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: _styles.pixelSizingFullWidthLabelStyles
+    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
+  );
+};

package/dist/cjs/{ui/PixelEntry/index.js → pm-plugins/pixel-resizing/ui/pixel-entry.js}

@@ -5,16 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PixelEntry = exports.FullWidthDisplay = void 0;
+exports.PixelEntryComponentNext = exports.PixelEntryComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
 var _media = require("@atlaskit/editor-common/media");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
 var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
 var _styles = require("./styles");
@@ -31,7 +34,7 @@ var pixelSizingLabel = (0, _primitives.xcss)({
   gridArea: 'label',
   lineHeight: "var(--ds-space-300, 24px)"
 });
-var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
+var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryComponent(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
@@ -41,7 +44,9 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
     onChange = _ref.onChange,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
-    onMigrate = _ref.onMigrate;
+    onMigrate = _ref.onMigrate,
+    onCloseAndSave = _ref.onCloseAndSave,
+    isViewMode = _ref.isViewMode;
   var ratioWidth = (0, _react.useMemo)(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -94,6 +99,37 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
     }
   };
 
+  // Handle submit when user presses enter or click close button in PixelEntryComponentNext
+  var handleCloseAndSave = (0, _react.useCallback)(function (data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
+    if (onCloseAndSave) {
+      var widthToBeSubmitted = data.inputWidth;
+      var validation = 'valid';
+      if (data.inputWidth < minWidth) {
+        widthToBeSubmitted = minWidth;
+        validation = 'less-than-min';
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSubmitted = maxWidth;
+        validation = 'greater-than-max';
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (validation !== 'valid') {
+        setComputedWidth(widthToBeSubmitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSubmitted));
+      }
+      onCloseAndSave({
+        width: widthToBeSubmitted,
+        validation: validation
+      });
+    }
+  }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
+
   // Handle updating computed fields based on
   var handleOnChange = (0, _react.useCallback)(function (type) {
     return function (event) {
@@ -131,6 +167,17 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
       testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(_media.pixelEntryMessages.migrationButtonText)));
   }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    return (0, _react2.jsx)(PixelEntryComponentNext, {
+      maxWidth: maxWidth,
+      formatMessage: formatMessage,
+      handleFieldChange: handleOnChange,
+      computedWidth: computedWidth,
+      computedHeight: computedHeight,
+      handleCloseAndSave: handleCloseAndSave,
+      isViewMode: isViewMode
+    });
+  }
   return (
     // 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", {
@@ -160,7 +207,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , (0, _extends2.default)({}, fieldProps, {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
             css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -187,7 +234,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , (0, _extends2.default)({}, fieldProps, {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
             css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -203,12 +250,120 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
     }))
   );
 };
-var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref5) {
-  var formatMessage = _ref5.intl.formatMessage;
-  return (
-    // 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: _styles.pixelSizingFullWidthLabelStyles
-    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
-  );
+var pixelEntryWrapperStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: "".concat(_constants.PIXEL_RESIZING_TOOLBAR_WIDTH, "px")
+});
+var pixelEntryWrapperViewModeStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: "".concat(_constants.PIXEL_VIEW_MODE_TOOLBAR_WIDTH, "px")
+});
+var fieldStyles = (0, _react2.css)({
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-ds--text-field--input]': {
+    paddingBlock: "var(--ds-space-0, 0px)",
+    paddingInline: "var(--ds-space-100, 8px)"
+  },
+  flex: '1'
+});
+var dividerStyles = (0, _primitives.xcss)({
+  width: '1px',
+  height: "var(--ds-space-500, 40px)",
+  background: "var(--ds-border, #091E4224)",
+  marginInlineEnd: 'space.050'
+});
+var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
+  var maxWidth = _ref5.maxWidth,
+    formatMessage = _ref5.formatMessage,
+    handleFieldChange = _ref5.handleFieldChange,
+    computedWidth = _ref5.computedWidth,
+    computedHeight = _ref5.computedHeight,
+    handleCloseAndSave = _ref5.handleCloseAndSave,
+    isViewMode = _ref5.isViewMode;
+  var widthInputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (widthInputRef.current) {
+      if (isViewMode) {
+        widthInputRef.current.blur();
+      } else {
+        widthInputRef.current.focus();
+      }
+    }
+  }, [isViewMode, widthInputRef]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  return (0, _react2.jsx)(_primitives.Box, {
+    xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
+  }, (0, _react2.jsx)(_primitives.Inline, {
+    alignBlock: "center",
+    spread: "space-between"
+  }, (0, _react2.jsx)(_primitives.Box, {
+    paddingInlineStart: "space.100"
+  }, (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(_media.pixelEntryMessages.inputWidthLabel))), (0, _react2.jsx)("div", {
+    css: fieldStyles
+  }, (0, _react2.jsx)(_tooltip.default, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    position: "top",
+    content: formatMessage(_media.pixelEntryMessages.inputWidthTooltip, {
+      maxWidth: maxWidth
+    })
+  }, (0, _react2.jsx)(_textfield.default, {
+    name: "inputWidth",
+    value: computedWidth,
+    ref: widthInputRef,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(_media.pixelEntryMessages.inputWidthAriaLabel, {
+      maxWidth: maxWidth
+    }),
+    onChange: handleFieldChange('inputWidth'),
+    onKeyDown: handleKeyDown
+  }))), (0, _react2.jsx)(_primitives.Box, {
+    paddingInlineStart: "space.100"
+  }, (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(_media.pixelEntryMessages.inputHeightTooltip))), (0, _react2.jsx)("div", {
+    css: fieldStyles
+  }, (0, _react2.jsx)(_tooltip.default, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    content: formatMessage(_media.pixelEntryMessages.inputHeightTooltip),
+    position: "top"
+  }, (0, _react2.jsx)(_textfield.default, {
+    name: "inputHeight",
+    value: computedHeight,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(_media.pixelEntryMessages.inputHeightAriaLabel),
+    onChange: handleFieldChange('inputHeight'),
+    onKeyDown: handleKeyDown
+  }))), !isViewMode && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
+    xcss: dividerStyles
+  }), (0, _react2.jsx)(_new.IconButton, {
+    icon: function icon() {
+      return (0, _react2.jsx)(_close.default, {
+        label: "",
+        color: "var(--ds-icon-subtlest, #626F86)"
+      });
+    },
+    label: formatMessage(_media.pixelEntryMessages.closePixelEntry),
+    appearance: "subtle",
+    onClick: function onClick() {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }))));
 };

package/dist/cjs/ui/toolbar/commands.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidthTr = exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
@@ -259,32 +259,39 @@ var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyti
     };
   };
 };
+var updateMediaSingleWidthTr = exports.updateMediaSingleWidthTr = function updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout) {
+  var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+  if (!selectedMediaSingleNode) {
+    return null;
+  }
+  var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+    width: width,
+    widthType: 'pixel',
+    layout: layout
+  }));
+  tr.setMeta('scrollIntoView', false);
+  tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+  var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+  var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+  var payload = (0, _analytics2.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
+    width: width,
+    layout: layout,
+    validation: validation,
+    inputMethod: inputMethod,
+    parentNode: parentNodeType
+  });
+  if (payload) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+  }
+  return tr;
+};
 var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
   return function (width, validation, inputMethod, layout) {
     return function (state, dispatch) {
-      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
-      if (!selectedMediaSingleNode) {
+      var tr = updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout);
+      if (!tr) {
         return false;
       }
-      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
-        width: width,
-        widthType: 'pixel',
-        layout: layout
-      }));
-      tr.setMeta('scrollIntoView', false);
-      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
-      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
-      var payload = (0, _analytics2.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
-        width: width,
-        layout: layout,
-        validation: validation,
-        inputMethod: inputMethod,
-        parentNode: parentNodeType
-      });
-      if (payload) {
-        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
-      }
       if (dispatch) {
         dispatch(tr);
       }