@atlaskit/editor-plugin-media 0.3.17 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-media
 
+## 0.4.0
+
+### Minor Changes
+
+- [#43108](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43108) [`b779a47b799`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b779a47b799) - ECA11Y-86: Added ability to resize media via keyboard and added announcer
+
+### Patch Changes
+
+- [#43379](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43379) [`482c025520d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/482c025520d) - ED-20763 Upgrade ADF schema version to 33.2.3 for MBE nodes.
+- Updated dependencies
+
 ## 0.3.17
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -58,6 +58,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
     options = _ref2$config === void 0 ? {} : _ref2$config,
     api = _ref2.api;
   var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var apiWidth = api === null || api === void 0 ? void 0 : api.width;
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -145,16 +146,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, apiWidth, 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 +168,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 +178,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 +222,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 +242,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,17 @@ 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 _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 +27,10 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
   return (0, _keymap.keymap)(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -33,6 +42,92 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+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 _selectedNode$node, _selectedNode$node2, _widthPlugin$sharedSt;
+    var selectedNode = (0, _utils.getSelectedMediaSingle)(state);
+    var layout = selectedNode === null || selectedNode === void 0 || (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 || (_selectedNode$node = _selectedNode$node.attrs) === null || _selectedNode$node === void 0 ? void 0 : _selectedNode$node.layout;
+    var mediaWidth = selectedNode === null || selectedNode === void 0 || (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 || (_selectedNode$node2 = _selectedNode$node2.attrs) === null || _selectedNode$node2 === void 0 ? void 0 : _selectedNode$node2.width;
+    var contentWidth =
+    // @ts-ignore readonly sharedState
+    (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
+    var minWidth = _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+    var maxWidth;
+    var validation = 'valid';
+    var newWidth = mediaWidth + changeAmount;
+    var intl = getIntl();
+    if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+      var _widthPlugin$sharedSt2;
+      // @ts-ignore readonly sharedState
+      maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
+    } else {
+      var _widthPlugin$sharedSt3;
+      maxWidth = (0, _mediaSingle.calcMediaSingleMaxWidth)( // @ts-ignore readonly sharedState
+      widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
+    }
+    if (newWidth > maxWidth) {
+      newWidth = maxWidth;
+      validation = 'greater-than-max';
+    } else if (newWidth < minWidth) {
+      newWidth = minWidth;
+      validation = 'less-than-min';
+    } else {
+      newWidth;
+      validation = 'valid';
+    }
+    if (action === 'increased') {
+      action = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.IncreasedAction);
+    } else if (action === 'decreased') {
+      action = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.DecreasedAction);
+    }
+    var newLayout = (0, _utils.calcNewLayout)(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+    (0, _commands.updateMediaSingleWidth)(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
+    createAnnouncer(action, mediaWidth, changeAmount, validation, 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 handleMediaQuickIncrease = function handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
+};
+var handleMediaQuickDecrease = function handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, '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, input, layout) {
     return function (state, dispatch) {
       var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
       if (!selectedMediaSingleNode) {

package/dist/cjs/toolbar/index.js

@@ -322,7 +322,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/es2019/plugin.js

@@ -49,6 +49,7 @@ export const mediaPlugin = ({
 }) => {
   var _api$featureFlags;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  const apiWidth = api === null || api === void 0 ? void 0 : api.width;
   return {
     name: 'media',
     getSharedState(editorState) {
@@ -136,9 +137,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, apiWidth, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {

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

@@ -1,10 +1,15 @@
-import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, quickDecreaseMediaSize, quickIncreaseMediaSize, 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 { 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 +20,10 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
   return keymap(list);
 }
 const ignoreLinksInSteps = state => {
@@ -26,6 +35,82 @@ const splitMediaGroup = state => {
   const mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+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 _selectedNode$node, _selectedNode$node$at, _selectedNode$node2, _selectedNode$node2$a, _widthPlugin$sharedSt;
+  const selectedNode = getSelectedMediaSingle(state);
+  const layout = selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 ? void 0 : (_selectedNode$node$at = _selectedNode$node.attrs) === null || _selectedNode$node$at === void 0 ? void 0 : _selectedNode$node$at.layout;
+  const mediaWidth = selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 ? void 0 : (_selectedNode$node2$a = _selectedNode$node2.attrs) === null || _selectedNode$node2$a === void 0 ? void 0 : _selectedNode$node2$a.width;
+  const contentWidth =
+  // @ts-ignore readonly sharedState
+  (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
+  const minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+  let maxWidth;
+  let validation = 'valid';
+  let newWidth = mediaWidth + changeAmount;
+  const intl = getIntl();
+  if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+    var _widthPlugin$sharedSt2;
+    // @ts-ignore readonly sharedState
+    maxWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
+  } else {
+    var _widthPlugin$sharedSt3;
+    maxWidth = calcMediaSingleMaxWidth( // @ts-ignore readonly sharedState
+    widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
+  }
+  if (newWidth > maxWidth) {
+    newWidth = maxWidth;
+    validation = 'greater-than-max';
+  } else if (newWidth < minWidth) {
+    newWidth = minWidth;
+    validation = 'less-than-min';
+  } else {
+    newWidth;
+    validation = 'valid';
+  }
+  if (action === 'increased') {
+    action = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
+  } else if (action === 'decreased') {
+    action = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
+  }
+  const newLayout = calcNewLayout(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+  updateMediaSingleWidth(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
+  createAnnouncer(action, mediaWidth, changeAmount, validation, 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 handleMediaQuickIncrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
+const handleMediaQuickDecrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, '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, input, layout) => (state, dispatch) => {
   const selectedMediaSingleNode = getSelectedMediaSingle(state);
   if (!selectedMediaSingleNode) {
     return false;

package/dist/es2019/toolbar/index.js

@@ -324,7 +324,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/esm/plugin.js

@@ -47,6 +47,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
     options = _ref2$config === void 0 ? {} : _ref2$config,
     api = _ref2.api;
   var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var apiWidth = api === null || api === void 0 ? void 0 : api.width;
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -134,16 +135,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, apiWidth, 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 +157,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 +167,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 +211,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 +231,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,15 @@
-import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, quickDecreaseMediaSize, quickIncreaseMediaSize, 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 { 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 +20,10 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
+  bindKeymapWithCommand(quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
   return keymap(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -26,6 +35,92 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+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 _selectedNode$node, _selectedNode$node2, _widthPlugin$sharedSt;
+    var selectedNode = getSelectedMediaSingle(state);
+    var layout = selectedNode === null || selectedNode === void 0 || (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 || (_selectedNode$node = _selectedNode$node.attrs) === null || _selectedNode$node === void 0 ? void 0 : _selectedNode$node.layout;
+    var mediaWidth = selectedNode === null || selectedNode === void 0 || (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 || (_selectedNode$node2 = _selectedNode$node2.attrs) === null || _selectedNode$node2 === void 0 ? void 0 : _selectedNode$node2.width;
+    var contentWidth =
+    // @ts-ignore readonly sharedState
+    (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
+    var minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
+    var maxWidth;
+    var validation = 'valid';
+    var newWidth = mediaWidth + changeAmount;
+    var intl = getIntl();
+    if (options !== null && options !== void 0 && options.fullWidthEnabled) {
+      var _widthPlugin$sharedSt2;
+      // @ts-ignore readonly sharedState
+      maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
+    } else {
+      var _widthPlugin$sharedSt3;
+      maxWidth = calcMediaSingleMaxWidth( // @ts-ignore readonly sharedState
+      widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
+    }
+    if (newWidth > maxWidth) {
+      newWidth = maxWidth;
+      validation = 'greater-than-max';
+    } else if (newWidth < minWidth) {
+      newWidth = minWidth;
+      validation = 'less-than-min';
+    } else {
+      newWidth;
+      validation = 'valid';
+    }
+    if (action === 'increased') {
+      action = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
+    } else if (action === 'decreased') {
+      action = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
+    }
+    var newLayout = calcNewLayout(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
+    updateMediaSingleWidth(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
+    createAnnouncer(action, mediaWidth, changeAmount, validation, 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 handleMediaQuickIncrease = function handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
+};
+var handleMediaQuickDecrease = function handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
+  return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, '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, input, layout) {
     return function (state, dispatch) {
       var selectedMediaSingleNode = getSelectedMediaSingle(state);
       if (!selectedMediaSingleNode) {

package/dist/esm/toolbar/index.js

@@ -312,7 +312,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/types/pm-plugins/keymap.d.ts

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined, widthPlugin: WidthPlugin | undefined, getIntl: any): 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, input: EventInput, layout: RichMediaLayout) => Command;

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

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaOptions } from '../types';
-export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
+export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined, widthPlugin: WidthPlugin | undefined, getIntl: any): 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, input: EventInput, layout: RichMediaLayout) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,11 +32,11 @@
     "./types": "./src/types.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^32.0.0",
+    "@atlaskit/adf-schema": "^33.2.3",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.16.0",
-    "@atlaskit/editor-common": "^76.20.0",
+    "@atlaskit/editor-common": "^76.22.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",