@atlaskit/editor-plugin-media 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-media
 
+## 0.6.0
+
+### Minor Changes
+
+- [#56827](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56827) [`9966463429c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9966463429c6) - ECA11Y-86: Added ability to resize media via keyboard and added announcer
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -145,16 +145,17 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin() {
+        plugin: function plugin(_ref5) {
           var _api$analytics2;
-          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
+          var getIntl = _ref5.getIntl;
+          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref5) {
-            var schema = _ref5.schema;
+          plugin: function plugin(_ref6) {
+            var schema = _ref6.schema;
             return (0, _keymapMediaSingle.default)(schema);
           }
         });
@@ -166,9 +167,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref6) {
+          plugin: function plugin(_ref7) {
             var _api$analytics3;
-            var schema = _ref6.schema;
+            var schema = _ref7.schema;
             return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
           }
         });
@@ -176,15 +177,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref7) {
-            var dispatch = _ref7.dispatch;
+          plugin: function plugin(_ref8) {
+            var dispatch = _ref8.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref8) {
-            var schema = _ref8.schema;
+          plugin: function plugin(_ref9) {
+            var schema = _ref9.schema;
             return (0, _keymap3.default)(schema);
           }
         });
@@ -220,19 +221,19 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref9) {
-      var editorView = _ref9.editorView,
-        appearance = _ref9.appearance;
+    contentComponent: function contentComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        appearance = _ref10.appearance;
       return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,
         api: api
       });
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        eventDispatcher = _ref10.eventDispatcher,
-        disabled = _ref10.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        eventDispatcher = _ref11.eventDispatcher,
+        disabled = _ref11.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -240,8 +241,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'media',
           title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),

package/dist/cjs/pm-plugins/keymap.js

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.keymapPlugin = keymapPlugin;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _selection = require("@atlaskit/editor-common/selection");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _captions = require("../commands/captions");
 var _pluginKey = require("../pm-plugins/plugin-key");
-function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+var _commands = require("../toolbar/commands");
+var _utils = require("../toolbar/utils");
+var _mediaResizeAnnouncerMess = require("./mediaResizeAnnouncerMess");
+function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.undo.common, ignoreLinksInSteps, list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
@@ -22,6 +28,12 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media-resizing_b5v0o')) {
+      (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+      (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+    }
+  }
   return (0, _keymap.keymap)(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -33,6 +45,101 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+var validationMaxMin = function validationMaxMin(newWidth, maxWidth, minWidth, validation) {
+  var newWidthValidated;
+  if (newWidth > maxWidth) {
+    newWidthValidated = maxWidth;
+    validation = 'greater-than-max';
+  } else if (newWidth < minWidth) {
+    newWidthValidated = minWidth;
+    validation = 'less-than-min';
+  } else {
+    newWidthValidated = newWidth;
+    validation = 'valid';
+  }
+  return {
+    newWidthValidated: newWidthValidated,
+    validation: validation
+  };
+};
+var createAnnouncer = function createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl) {
+  var announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
+  var intl = getIntl();
+  if (!announcerContainer.id) {
+    announcerContainer.id = 'media-announcer';
+    announcerContainer.setAttribute('role', 'status');
+    announcerContainer.setAttribute('aria-live', 'polite');
+    announcerContainer.setAttribute('aria-atomic', 'true');
+    var style = announcerContainer.style;
+    style.position = 'absolute';
+    style.width = '1px';
+    style.height = '1px';
+    style.marginTop = '-1px';
+    style.opacity = '0';
+    style.overflow = 'hidden';
+    document.body.appendChild(announcerContainer);
+  } else {
+    var newMediaWidth = mediaWidth + changeAmount;
+    if (validation === 'greater-than-max') {
+      announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.MediaWidthIsMax);
+    } else if (validation === 'less-than-min') {
+      announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.MediaWidthIsMin);
+    } else {
+      announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.DefaultMediaWidth, {
+        action: action,
+        newMediaWidth: newMediaWidth
+      });
+    }
+  }
+};
+var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) {
+  return function (state, dispatch) {
+    var _getSelectedMediaSing, _widthPlugin$sharedSt, _widthPlugin$sharedSt2, _getSelectedMediaSing2;
+    var selection = state.selection;
+    if (!(selection instanceof _state.NodeSelection && selection.node.type.name === 'mediaSingle')) {
+      return false;
+    }
+    var mediaWidth = (_getSelectedMediaSing = (0, _utils.getSelectedMediaSingle)(state)) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.node) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.attrs) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.width;
+    var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
+    var mediaPluginState = _pluginKey.stateKey.getState(state);
+    var maxWidthForNestedNode = mediaPluginState.currentMaxWidth;
+    var minWidth = _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+    var maxWidth = maxWidthForNestedNode;
+    var currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
+    if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
+      var _widthPlugin$sharedSt3;
+      maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth);
+    }
+    var validation = 'valid';
+    var newWidth = mediaWidth + changeAmount;
+    var intl = getIntl();
+    if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+      var _widthPlugin$sharedSt4;
+      maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
+    } else if (maxWidthForNestedNode === undefined) {
+      maxWidth = (0, _mediaSingle.calcMediaSingleMaxWidth)(currentMaxWidth);
+    }
+    var _validationMaxMin = validationMaxMin(newWidth, maxWidth, minWidth, validation),
+      newWidthValidated = _validationMaxMin.newWidthValidated,
+      validationResult = _validationMaxMin.validation;
+    var formattedAction = action;
+    if (action === 'increased') {
+      formattedAction = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.IncreasedAction);
+    } else if (action === 'decreased') {
+      formattedAction = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.DecreasedAction);
+    }
+    var newLayout = (0, _utils.calcNewLayout)(newWidthValidated, (_getSelectedMediaSing2 = (0, _utils.getSelectedMediaSingle)(state)) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.node) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.attrs) === null || _getSelectedMediaSing2 === void 0 ? void 0 : _getSelectedMediaSing2.layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+    (0, _commands.updateMediaSingleWidth)(editorAnalyticsAPI)(newWidthValidated, validationResult, 'keyboard', newLayout)(state, dispatch);
+    createAnnouncer(formattedAction, mediaWidth, changeAmount, validationResult, getIntl);
+    return true;
+  };
+};
+var handleMediaIncrease = function handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
+};
+var handleMediaDecrease = function handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
+};
 var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var selection = state.selection,

package/dist/cjs/pm-plugins/mediaResizeAnnouncerMess.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaResizeAnnouncerMess = void 0;
+var _reactIntlNext = require("react-intl-next");
+var mediaResizeAnnouncerMess = exports.mediaResizeAnnouncerMess = (0, _reactIntlNext.defineMessages)({
+  MediaWidthIsMax: {
+    id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
+    defaultMessage: 'Media increased to the maximum size',
+    description: 'The media has the maximum allowed width'
+  },
+  MediaWidthIsMin: {
+    id: 'fabric.editor.media.MediaWidthIsMin',
+    defaultMessage: 'Media decreased to the minimum size',
+    description: 'The media has the minimum allowed width'
+  },
+  DefaultMediaWidth: {
+    id: 'fabric.editor.media.DefaultMediaWidth',
+    defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
+    description: 'Media width {action} to {newMediaWidth} pixels.'
+  },
+  IncreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'increased',
+    description: 'Increased action'
+  },
+  DecreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'decreased',
+    description: 'Decreased action'
+  }
+});

package/dist/cjs/toolbar/commands.js

@@ -203,7 +203,7 @@ var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyti
   };
 };
 var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
-  return function (width, validation, layout) {
+  return function (width, validation, inputMethod, layout) {
     return function (state, dispatch) {
       var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
       if (!selectedMediaSingleNode) {
@@ -222,6 +222,7 @@ var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMed
         width: width,
         layout: layout,
         validation: validation,
+        inputMethod: inputMethod,
         parentNode: parentNodeType
       });
       if (payload) {

package/dist/cjs/toolbar/index.js

@@ -286,7 +286,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var width = _ref2.width,
                 validation = _ref2.validation;
               var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
+              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -252,7 +252,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           layout: newLayout,
           widthType: 'pixel',
           snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
-          parentNode: $pos ? $pos.parent.type.name : undefined
+          parentNode: $pos ? $pos.parent.type.name : undefined,
+          inputMethod: 'mouse'
         });
         if (event) {
           dispatchAnalyticsEvent(event);

package/dist/cjs/utils/analytics.js

@@ -13,7 +13,8 @@ var getMediaResizeAnalyticsEvent = exports.getMediaResizeAnalyticsEvent = functi
     widthType = attributes.widthType,
     layout = attributes.layout,
     snapType = attributes.snapType,
-    parentNode = attributes.parentNode;
+    parentNode = attributes.parentNode,
+    inputMethod = attributes.inputMethod;
   var actionSubject = type === 'embed' ? _analytics.ACTION_SUBJECT.EMBEDS : _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
   return {
     action: _analytics.ACTION.EDITED,
@@ -24,7 +25,8 @@ var getMediaResizeAnalyticsEvent = exports.getMediaResizeAnalyticsEvent = functi
       layout: layout,
       widthType: widthType,
       snapType: snapType,
-      parentNode: parentNode
+      parentNode: parentNode,
+      inputMethod: inputMethod
     },
     eventType: _analytics.EVENT_TYPE.UI
   };
@@ -36,7 +38,8 @@ var getMediaInputResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEven
   var width = attributes.width,
     layout = attributes.layout,
     validation = attributes.validation,
-    parentNode = attributes.parentNode;
+    parentNode = attributes.parentNode,
+    inputMethod = attributes.inputMethod;
   var actionSubject = type === 'embed' ? _analytics.ACTION_SUBJECT.EMBEDS : _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
   return {
     action: _analytics.ACTION.EDITED,
@@ -46,7 +49,8 @@ var getMediaInputResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEven
       width: width,
       layout: layout,
       validation: validation,
-      parentNode: parentNode
+      parentNode: parentNode,
+      inputMethod: inputMethod
     },
     eventType: _analytics.EVENT_TYPE.UI
   };

package/dist/es2019/plugin.js

@@ -136,9 +136,11 @@ export const mediaPlugin = ({
         }
       }, {
         name: 'mediaKeymap',
-        plugin: () => {
+        plugin: ({
+          getIntl
+        }) => {
           var _api$analytics2;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {

package/dist/es2019/pm-plugins/keymap.js

@@ -1,10 +1,16 @@
-import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
 import { stateKey } from '../pm-plugins/plugin-key';
-export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+import { updateMediaSingleWidth } from '../toolbar/commands';
+import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
+import { mediaResizeAnnouncerMess } from './mediaResizeAnnouncerMess';
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   const list = {};
   bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
   bindKeymapWithCommand(enter.common, splitMediaGroup, list);
@@ -15,6 +21,12 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+    if (getBooleanFF('platform.editor.a11y-media-resizing_b5v0o')) {
+      bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+      bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+    }
+  }
   return keymap(list);
 }
 const ignoreLinksInSteps = state => {
@@ -26,6 +38,98 @@ const splitMediaGroup = state => {
   const mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+const validationMaxMin = (newWidth, maxWidth, minWidth, validation) => {
+  let newWidthValidated;
+  if (newWidth > maxWidth) {
+    newWidthValidated = maxWidth;
+    validation = 'greater-than-max';
+  } else if (newWidth < minWidth) {
+    newWidthValidated = minWidth;
+    validation = 'less-than-min';
+  } else {
+    newWidthValidated = newWidth;
+    validation = 'valid';
+  }
+  return {
+    newWidthValidated,
+    validation
+  };
+};
+const createAnnouncer = (action, mediaWidth, changeAmount, validation, getIntl) => {
+  let announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
+  const intl = getIntl();
+  if (!announcerContainer.id) {
+    announcerContainer.id = 'media-announcer';
+    announcerContainer.setAttribute('role', 'status');
+    announcerContainer.setAttribute('aria-live', 'polite');
+    announcerContainer.setAttribute('aria-atomic', 'true');
+    const style = announcerContainer.style;
+    style.position = 'absolute';
+    style.width = '1px';
+    style.height = '1px';
+    style.marginTop = '-1px';
+    style.opacity = '0';
+    style.overflow = 'hidden';
+    document.body.appendChild(announcerContainer);
+  } else {
+    const newMediaWidth = mediaWidth + changeAmount;
+    if (validation === 'greater-than-max') {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMax);
+    } else if (validation === 'less-than-min') {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMin);
+    } else {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.DefaultMediaWidth, {
+        action: action,
+        newMediaWidth: newMediaWidth
+      });
+    }
+  }
+};
+const handleMediaSizeChange = (editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) => (state, dispatch) => {
+  var _getSelectedMediaSing, _getSelectedMediaSing2, _getSelectedMediaSing3, _widthPlugin$sharedSt, _widthPlugin$sharedSt2, _getSelectedMediaSing4, _getSelectedMediaSing5, _getSelectedMediaSing6;
+  const {
+    selection
+  } = state;
+  if (!(selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle')) {
+    return false;
+  }
+  const mediaWidth = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : (_getSelectedMediaSing2 = _getSelectedMediaSing.node) === null || _getSelectedMediaSing2 === void 0 ? void 0 : (_getSelectedMediaSing3 = _getSelectedMediaSing2.attrs) === null || _getSelectedMediaSing3 === void 0 ? void 0 : _getSelectedMediaSing3.width;
+  const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
+  const mediaPluginState = stateKey.getState(state);
+  const maxWidthForNestedNode = mediaPluginState.currentMaxWidth;
+  const minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+  let maxWidth = maxWidthForNestedNode;
+  const currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
+  if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
+    var _widthPlugin$sharedSt3;
+    maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth);
+  }
+  let validation = 'valid';
+  let newWidth = mediaWidth + changeAmount;
+  const intl = getIntl();
+  if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+    var _widthPlugin$sharedSt4;
+    maxWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
+  } else if (maxWidthForNestedNode === undefined) {
+    maxWidth = calcMediaSingleMaxWidth(currentMaxWidth);
+  }
+  const {
+    newWidthValidated,
+    validation: validationResult
+  } = validationMaxMin(newWidth, maxWidth, minWidth, validation);
+  let formattedAction = action;
+  if (action === 'increased') {
+    formattedAction = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
+  } else if (action === 'decreased') {
+    formattedAction = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
+  }
+  const newLayout = calcNewLayout(newWidthValidated, (_getSelectedMediaSing4 = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing4 === void 0 ? void 0 : (_getSelectedMediaSing5 = _getSelectedMediaSing4.node) === null || _getSelectedMediaSing5 === void 0 ? void 0 : (_getSelectedMediaSing6 = _getSelectedMediaSing5.attrs) === null || _getSelectedMediaSing6 === void 0 ? void 0 : _getSelectedMediaSing6.layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+  updateMediaSingleWidth(editorAnalyticsAPI)(newWidthValidated, validationResult, 'keyboard', newLayout)(state, dispatch);
+  createAnnouncer(formattedAction, mediaWidth, changeAmount, validationResult, getIntl);
+  return true;
+};
+const handleMediaIncrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
+const handleMediaDecrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
 const insertAndSelectCaption = editorAnalyticsAPI => (state, dispatch) => {
   const {
     selection,

package/dist/es2019/pm-plugins/mediaResizeAnnouncerMess.js

@@ -0,0 +1,28 @@
+import { defineMessages } from 'react-intl-next';
+export const mediaResizeAnnouncerMess = defineMessages({
+  MediaWidthIsMax: {
+    id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
+    defaultMessage: 'Media increased to the maximum size',
+    description: 'The media has the maximum allowed width'
+  },
+  MediaWidthIsMin: {
+    id: 'fabric.editor.media.MediaWidthIsMin',
+    defaultMessage: 'Media decreased to the minimum size',
+    description: 'The media has the minimum allowed width'
+  },
+  DefaultMediaWidth: {
+    id: 'fabric.editor.media.DefaultMediaWidth',
+    defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
+    description: 'Media width {action} to {newMediaWidth} pixels.'
+  },
+  IncreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'increased',
+    description: 'Increased action'
+  },
+  DecreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'decreased',
+    description: 'Decreased action'
+  }
+});

package/dist/es2019/toolbar/commands.js

@@ -181,7 +181,7 @@ export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) =>
   }
   return true;
 };
-export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, layout) => (state, dispatch) => {
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, inputMethod, layout) => (state, dispatch) => {
   const selectedMediaSingleNode = getSelectedMediaSingle(state);
   if (!selectedMediaSingleNode) {
     return false;
@@ -200,6 +200,7 @@ export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation,
     width,
     layout,
     validation,
+    inputMethod,
     parentNode: parentNodeType
   });
   if (payload) {

package/dist/es2019/toolbar/index.js

@@ -286,7 +286,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             }) => {
               var _pluginInjectionApi$a4;
               const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -236,7 +236,8 @@ class ResizableMediaSingleNext extends React.Component {
           layout: newLayout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
-          parentNode: $pos ? $pos.parent.type.name : undefined
+          parentNode: $pos ? $pos.parent.type.name : undefined,
+          inputMethod: 'mouse'
         });
         if (event) {
           dispatchAnalyticsEvent(event);

package/dist/es2019/utils/analytics.js

@@ -8,7 +8,8 @@ export const getMediaResizeAnalyticsEvent = (type, attributes) => {
     widthType,
     layout,
     snapType,
-    parentNode
+    parentNode,
+    inputMethod
   } = attributes;
   const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {
@@ -20,7 +21,8 @@ export const getMediaResizeAnalyticsEvent = (type, attributes) => {
       layout,
       widthType,
       snapType,
-      parentNode
+      parentNode,
+      inputMethod
     },
     eventType: EVENT_TYPE.UI
   };
@@ -33,7 +35,8 @@ export const getMediaInputResizeAnalyticsEvent = (type, attributes) => {
     width,
     layout,
     validation,
-    parentNode
+    parentNode,
+    inputMethod
   } = attributes;
   const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {
@@ -44,7 +47,8 @@ export const getMediaInputResizeAnalyticsEvent = (type, attributes) => {
       width,
       layout,
       validation,
-      parentNode
+      parentNode,
+      inputMethod
     },
     eventType: EVENT_TYPE.UI
   };

package/dist/esm/plugin.js

@@ -134,16 +134,17 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin() {
+        plugin: function plugin(_ref5) {
           var _api$analytics2;
-          return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
+          var getIntl = _ref5.getIntl;
+          return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref5) {
-            var schema = _ref5.schema;
+          plugin: function plugin(_ref6) {
+            var schema = _ref6.schema;
             return keymapMediaSinglePlugin(schema);
           }
         });
@@ -155,9 +156,9 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref6) {
+          plugin: function plugin(_ref7) {
             var _api$analytics3;
-            var schema = _ref6.schema;
+            var schema = _ref7.schema;
             return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
           }
         });
@@ -165,15 +166,15 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref7) {
-            var dispatch = _ref7.dispatch;
+          plugin: function plugin(_ref8) {
+            var dispatch = _ref8.dispatch;
             return linkingPlugin(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref8) {
-            var schema = _ref8.schema;
+          plugin: function plugin(_ref9) {
+            var schema = _ref9.schema;
             return keymapLinkingPlugin(schema);
           }
         });
@@ -209,19 +210,19 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref9) {
-      var editorView = _ref9.editorView,
-        appearance = _ref9.appearance;
+    contentComponent: function contentComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        appearance = _ref10.appearance;
       return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,
         api: api
       });
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        eventDispatcher = _ref10.eventDispatcher,
-        disabled = _ref10.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        eventDispatcher = _ref11.eventDispatcher,
+        disabled = _ref11.disabled;
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -229,8 +230,8 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'media',
           title: formatMessage(messages.mediaFiles),

package/dist/esm/pm-plugins/keymap.js

@@ -1,10 +1,16 @@
-import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
 import { stateKey } from '../pm-plugins/plugin-key';
-export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+import { updateMediaSingleWidth } from '../toolbar/commands';
+import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
+import { mediaResizeAnnouncerMess } from './mediaResizeAnnouncerMess';
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   var list = {};
   bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
   bindKeymapWithCommand(enter.common, splitMediaGroup, list);
@@ -15,6 +21,12 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+    if (getBooleanFF('platform.editor.a11y-media-resizing_b5v0o')) {
+      bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+      bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+    }
+  }
   return keymap(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -26,6 +38,101 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+var validationMaxMin = function validationMaxMin(newWidth, maxWidth, minWidth, validation) {
+  var newWidthValidated;
+  if (newWidth > maxWidth) {
+    newWidthValidated = maxWidth;
+    validation = 'greater-than-max';
+  } else if (newWidth < minWidth) {
+    newWidthValidated = minWidth;
+    validation = 'less-than-min';
+  } else {
+    newWidthValidated = newWidth;
+    validation = 'valid';
+  }
+  return {
+    newWidthValidated: newWidthValidated,
+    validation: validation
+  };
+};
+var createAnnouncer = function createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl) {
+  var announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
+  var intl = getIntl();
+  if (!announcerContainer.id) {
+    announcerContainer.id = 'media-announcer';
+    announcerContainer.setAttribute('role', 'status');
+    announcerContainer.setAttribute('aria-live', 'polite');
+    announcerContainer.setAttribute('aria-atomic', 'true');
+    var style = announcerContainer.style;
+    style.position = 'absolute';
+    style.width = '1px';
+    style.height = '1px';
+    style.marginTop = '-1px';
+    style.opacity = '0';
+    style.overflow = 'hidden';
+    document.body.appendChild(announcerContainer);
+  } else {
+    var newMediaWidth = mediaWidth + changeAmount;
+    if (validation === 'greater-than-max') {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMax);
+    } else if (validation === 'less-than-min') {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMin);
+    } else {
+      announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.DefaultMediaWidth, {
+        action: action,
+        newMediaWidth: newMediaWidth
+      });
+    }
+  }
+};
+var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) {
+  return function (state, dispatch) {
+    var _getSelectedMediaSing, _widthPlugin$sharedSt, _widthPlugin$sharedSt2, _getSelectedMediaSing2;
+    var selection = state.selection;
+    if (!(selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle')) {
+      return false;
+    }
+    var mediaWidth = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.node) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.attrs) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.width;
+    var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
+    var mediaPluginState = stateKey.getState(state);
+    var maxWidthForNestedNode = mediaPluginState.currentMaxWidth;
+    var minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+    var maxWidth = maxWidthForNestedNode;
+    var currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
+    if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
+      var _widthPlugin$sharedSt3;
+      maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth);
+    }
+    var validation = 'valid';
+    var newWidth = mediaWidth + changeAmount;
+    var intl = getIntl();
+    if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+      var _widthPlugin$sharedSt4;
+      maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
+    } else if (maxWidthForNestedNode === undefined) {
+      maxWidth = calcMediaSingleMaxWidth(currentMaxWidth);
+    }
+    var _validationMaxMin = validationMaxMin(newWidth, maxWidth, minWidth, validation),
+      newWidthValidated = _validationMaxMin.newWidthValidated,
+      validationResult = _validationMaxMin.validation;
+    var formattedAction = action;
+    if (action === 'increased') {
+      formattedAction = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
+    } else if (action === 'decreased') {
+      formattedAction = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
+    }
+    var newLayout = calcNewLayout(newWidthValidated, (_getSelectedMediaSing2 = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.node) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.attrs) === null || _getSelectedMediaSing2 === void 0 ? void 0 : _getSelectedMediaSing2.layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+    updateMediaSingleWidth(editorAnalyticsAPI)(newWidthValidated, validationResult, 'keyboard', newLayout)(state, dispatch);
+    createAnnouncer(formattedAction, mediaWidth, changeAmount, validationResult, getIntl);
+    return true;
+  };
+};
+var handleMediaIncrease = function handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
+};
+var handleMediaDecrease = function handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
+};
 var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var selection = state.selection,

package/dist/esm/pm-plugins/mediaResizeAnnouncerMess.js

@@ -0,0 +1,28 @@
+import { defineMessages } from 'react-intl-next';
+export var mediaResizeAnnouncerMess = defineMessages({
+  MediaWidthIsMax: {
+    id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
+    defaultMessage: 'Media increased to the maximum size',
+    description: 'The media has the maximum allowed width'
+  },
+  MediaWidthIsMin: {
+    id: 'fabric.editor.media.MediaWidthIsMin',
+    defaultMessage: 'Media decreased to the minimum size',
+    description: 'The media has the minimum allowed width'
+  },
+  DefaultMediaWidth: {
+    id: 'fabric.editor.media.DefaultMediaWidth',
+    defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
+    description: 'Media width {action} to {newMediaWidth} pixels.'
+  },
+  IncreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'increased',
+    description: 'Increased action'
+  },
+  DecreasedAction: {
+    id: 'fabric.editor.media.decreased',
+    defaultMessage: 'decreased',
+    description: 'Decreased action'
+  }
+});

package/dist/esm/toolbar/commands.js

@@ -196,7 +196,7 @@ export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
   };
 };
 export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
-  return function (width, validation, layout) {
+  return function (width, validation, inputMethod, layout) {
     return function (state, dispatch) {
       var selectedMediaSingleNode = getSelectedMediaSingle(state);
       if (!selectedMediaSingleNode) {
@@ -215,6 +215,7 @@ export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyt
         width: width,
         layout: layout,
         validation: validation,
+        inputMethod: inputMethod,
         parentNode: parentNodeType
       });
       if (payload) {

package/dist/esm/toolbar/index.js

@@ -276,7 +276,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var width = _ref2.width,
                 validation = _ref2.validation;
               var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -246,7 +246,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           layout: newLayout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
-          parentNode: $pos ? $pos.parent.type.name : undefined
+          parentNode: $pos ? $pos.parent.type.name : undefined,
+          inputMethod: 'mouse'
         });
         if (event) {
           dispatchAnalyticsEvent(event);

package/dist/esm/utils/analytics.js

@@ -7,7 +7,8 @@ export var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(
     widthType = attributes.widthType,
     layout = attributes.layout,
     snapType = attributes.snapType,
-    parentNode = attributes.parentNode;
+    parentNode = attributes.parentNode,
+    inputMethod = attributes.inputMethod;
   var actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {
     action: ACTION.EDITED,
@@ -18,7 +19,8 @@ export var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(
       layout: layout,
       widthType: widthType,
       snapType: snapType,
-      parentNode: parentNode
+      parentNode: parentNode,
+      inputMethod: inputMethod
     },
     eventType: EVENT_TYPE.UI
   };
@@ -30,7 +32,8 @@ export var getMediaInputResizeAnalyticsEvent = function getMediaInputResizeAnaly
   var width = attributes.width,
     layout = attributes.layout,
     validation = attributes.validation,
-    parentNode = attributes.parentNode;
+    parentNode = attributes.parentNode,
+    inputMethod = attributes.inputMethod;
   var actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {
     action: ACTION.EDITED,
@@ -40,7 +43,8 @@ export var getMediaInputResizeAnalyticsEvent = function getMediaInputResizeAnaly
       width: width,
       layout: layout,
       validation: validation,
-      parentNode: parentNode
+      parentNode: parentNode,
+      inputMethod: inputMethod
     },
     eventType: EVENT_TYPE.UI
   };

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,6 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
+type WidthPlugin = ExtractInjectionAPI<MediaNextEditorPluginType>['width'];
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined, widthPlugin: WidthPlugin | undefined, getIntl: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types/pm-plugins/mediaResizeAnnouncerMess.d.ts

@@ -0,0 +1,27 @@
+export declare const mediaResizeAnnouncerMess: {
+    MediaWidthIsMax: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    MediaWidthIsMin: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    DefaultMediaWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    IncreasedAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    DecreasedAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/pm-plugins/types.d.ts

@@ -63,3 +63,4 @@ export interface MediaPluginState {
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
     clone(): MediaPluginState;
 }
+export type EventInput = 'keyboard' | 'mouse' | 'floatingToolBar';

package/dist/types/toolbar/commands.d.ts

@@ -1,6 +1,7 @@
 import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
@@ -9,4 +10,4 @@ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyti
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
-export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, layout: RichMediaLayout) => Command;
+export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,6 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
+type WidthPlugin = ExtractInjectionAPI<MediaNextEditorPluginType>['width'];
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined, widthPlugin: WidthPlugin | undefined, getIntl: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/mediaResizeAnnouncerMess.d.ts

@@ -0,0 +1,27 @@
+export declare const mediaResizeAnnouncerMess: {
+    MediaWidthIsMax: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    MediaWidthIsMin: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    DefaultMediaWidth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    IncreasedAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    DecreasedAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -63,3 +63,4 @@ export interface MediaPluginState {
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
     clone(): MediaPluginState;
 }
+export type EventInput = 'keyboard' | 'mouse' | 'floatingToolBar';

package/dist/types-ts4.5/toolbar/commands.d.ts

@@ -1,6 +1,7 @@
 import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
@@ -9,4 +10,4 @@ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyti
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
-export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, layout: RichMediaLayout) => Command;
+export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^16.18.0",
     "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
@@ -143,6 +143,9 @@
     },
     "platform.editor.a11y-media_er96o": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-media-resizing_b5v0o": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"