@atlaskit/editor-plugin-media 2.3.7 → 2.3.9

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

@@ -0,0 +1,16 @@
+import { createCommand } from './index';
+export var openPixelEditor = function openPixelEditor() {
+  return createCommand({
+    type: 'openPixelEditor'
+  });
+};
+export var closePixelEditor = function closePixelEditor() {
+  return createCommand({
+    type: 'closePixelEditor'
+  });
+};
+export var closePixelEditorAndSave = function closePixelEditorAndSave(saveTransform) {
+  return createCommand({
+    type: 'closePixelEditor'
+  }, saveTransform);
+};

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

@@ -0,0 +1,25 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+var pluginKey = new PluginKey('mediaPixelResizingPlugin');
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+    onSelectionChanged: function onSelectionChanged() {
+      return {
+        isPixelEditorOpen: false
+      };
+    }
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export var createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch;
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      isPixelEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};
+export { createCommand, getPluginState };

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

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export default (function (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/esm/pm-plugins/pixel-resizing/ui/constants.js

@@ -0,0 +1,5 @@
+export var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';
+
+// pixel resizing toolbar width (with `platform_editor_controls` enabled)
+export var PIXEL_RESIZING_TOOLBAR_WIDTH = 240;
+export var PIXEL_VIEW_MODE_TOOLBAR_WIDTH = 204;

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

@@ -0,0 +1,120 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
+import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { Text } from '@atlaskit/primitives';
+import { updateMediaSingleWidthTr } from '../../../ui/toolbar/commands';
+import { getPixelWidthOfElement, calcNewLayout } from '../../../ui/toolbar/utils';
+import { isVideo } from '../../utils/media-single';
+import { closePixelEditorAndSave } from '../commands';
+import { PixelEntryComponent } from './pixel-entry';
+import { pixelSizingFullWidthLabelStyles } from './styles';
+export var 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) || 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 = hasParentNode(function (n) {
+    return n.type !== state.schema.nodes.doc;
+  })(state.selection);
+  var updateNodeWithTr = useCallback(function (width, validation) {
+    var _pluginInjectionApi$a;
+    var newLayout = calcNewLayout(width, layout, contentWidth, isEditorFullWidthEnabled, isNested);
+    return 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 || akEditorFullWidthLayoutWidth;
+  var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
+  var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
+  var hasPixelType = widthType === 'pixel';
+  var pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
+  // get pos of media node
+  mediaWidth || DEFAULT_IMAGE_WIDTH);
+  var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
+  return jsx(PixelEntryComponent, {
+    intl: intl,
+    width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+    showMigration: !pluginState.isResizing && !hasPixelType,
+    mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+    mediaHeight: mediaHeight || 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(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 closePixelEditorAndSave(function () {
+          return tr;
+        })(state, dispatch);
+      }
+    },
+    isViewMode: pluginState.isResizing
+  });
+};
+export var 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
+    jsx("div", {
+      css: pixelSizingFullWidthLabelStyles
+    }, jsx(Text, null, formatMessage(messages.fullWidthLabel)))
+  );
+};

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

@@ -4,22 +4,25 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef, Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import CloseIcon from '@atlaskit/icon/core/close';
+import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
-import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
-import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+import { PIXEL_RESIZING_TOOLBAR_WIDTH, PIXEL_VIEW_MODE_TOOLBAR_WIDTH, PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
+import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
 var pixelSizingLabel = xcss({
   gridArea: 'label',
   lineHeight: "var(--ds-space-300, 24px)"
 });
-export var PixelEntry = function PixelEntry(_ref) {
+export var PixelEntryComponent = function PixelEntryComponent(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
@@ -29,7 +32,9 @@ export var 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 = useMemo(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -82,6 +87,37 @@ export var PixelEntry = function PixelEntry(_ref) {
     }
   };
 
+  // Handle submit when user presses enter or click close button in PixelEntryComponentNext
+  var handleCloseAndSave = 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 = useCallback(function (type) {
     return function (event) {
@@ -119,6 +155,17 @@ export var PixelEntry = function PixelEntry(_ref) {
       testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(messages.migrationButtonText)));
   }
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    return 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
     jsx("div", {
@@ -148,7 +195,7 @@ export var PixelEntry = function PixelEntry(_ref) {
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , _extends({}, 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: [pixelSizingWidthInput, pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -175,7 +222,7 @@ export var PixelEntry = function PixelEntry(_ref) {
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , _extends({}, 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: [pixelSizingHeightInput, pixelSizingInput],
             appearance: "none",
             isCompact: true,
@@ -191,12 +238,120 @@ export var PixelEntry = function PixelEntry(_ref) {
     }))
   );
 };
-export var 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
-    jsx("div", {
-      css: pixelSizingFullWidthLabelStyles
-    }, jsx(Text, null, formatMessage(messages.fullWidthLabel)))
-  );
+var pixelEntryWrapperStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: "".concat(PIXEL_RESIZING_TOOLBAR_WIDTH, "px")
+});
+var pixelEntryWrapperViewModeStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: "".concat(PIXEL_VIEW_MODE_TOOLBAR_WIDTH, "px")
+});
+var fieldStyles = 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 = xcss({
+  width: '1px',
+  height: "var(--ds-space-500, 40px)",
+  background: "var(--ds-border, #091E4224)",
+  marginInlineEnd: 'space.050'
+});
+export var 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 = useRef(null);
+  useEffect(function () {
+    if (widthInputRef.current) {
+      if (isViewMode) {
+        widthInputRef.current.blur();
+      } else {
+        widthInputRef.current.focus();
+      }
+    }
+  }, [isViewMode, widthInputRef]);
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter') {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  return jsx(Box, {
+    xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
+  }, jsx(Inline, {
+    alignBlock: "center",
+    spread: "space-between"
+  }, jsx(Box, {
+    paddingInlineStart: "space.100"
+  }, jsx(Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(messages.inputWidthLabel))), jsx("div", {
+    css: fieldStyles
+  }, jsx(Tooltip, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    position: "top",
+    content: formatMessage(messages.inputWidthTooltip, {
+      maxWidth: maxWidth
+    })
+  }, jsx(Textfield, {
+    name: "inputWidth",
+    value: computedWidth,
+    ref: widthInputRef,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+      maxWidth: maxWidth
+    }),
+    onChange: handleFieldChange('inputWidth'),
+    onKeyDown: handleKeyDown
+  }))), jsx(Box, {
+    paddingInlineStart: "space.100"
+  }, jsx(Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(messages.inputHeightTooltip))), jsx("div", {
+    css: fieldStyles
+  }, jsx(Tooltip, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    content: formatMessage(messages.inputHeightTooltip),
+    position: "top"
+  }, jsx(Textfield, {
+    name: "inputHeight",
+    value: computedHeight,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(messages.inputHeightAriaLabel),
+    onChange: handleFieldChange('inputHeight'),
+    onKeyDown: handleKeyDown
+  }))), !isViewMode && jsx(Fragment, null, jsx(Box, {
+    xcss: dividerStyles
+  }), jsx(IconButton, {
+    icon: function icon() {
+      return jsx(CloseIcon, {
+        label: "",
+        color: "var(--ds-icon-subtlest, #626F86)"
+      });
+    },
+    label: formatMessage(messages.closePixelEntry),
+    appearance: "subtle",
+    onClick: function onClick() {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }))));
 };

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

@@ -252,32 +252,39 @@ export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
     };
   };
 };
+export var updateMediaSingleWidthTr = function updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout) {
+  var selectedMediaSingleNode = 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(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+  var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+  var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+  var payload = 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;
+};
 export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
   return function (width, validation, inputMethod, layout) {
     return function (state, dispatch) {
-      var selectedMediaSingleNode = 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(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
-      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
-      var payload = 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);
       }