@atlaskit/editor-plugin-media 0.3.17 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 0.4.1
+
+### Patch Changes
+
+- [#43145](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43145) [`999af31b6ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/999af31b6ad) - [ux] [ED-20776] Change mediaInline node insertion logic behind 'platform.editor.media.inline-image.base-support' feature flag. With the flag on, Adding an image to a non-empty paragraph and list node inserts an media inline node, instead of media single node.
+- Updated dependencies
+
+## 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/main.js

@@ -38,6 +38,7 @@ var _pickerFacade = _interopRequireDefault(require("../picker-facade"));
 var _DropPlaceholder = _interopRequireDefault(require("../ui/Media/DropPlaceholder"));
 var _mediaCommon2 = require("../utils/media-common");
 var _mediaFiles = require("../utils/media-files");
+var _mediaInline = require("../utils/media-inline");
 var _mediaSingle2 = require("../utils/media-single");
 var _mediaTaskManager = require("./mediaTaskManager");
 var _pluginKey = require("./plugin-key");
@@ -224,7 +225,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
     (0, _defineProperty2.default)(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
-      var _this$pluginInjection, _mediaState$collectio, _this$mediaOptions2;
+      var _this$pluginInjection, _mediaState$collectio, _this$mediaOptions2, _this$pluginInjection2;
       var state = _this.view.state;
       var editorAnalyticsAPI = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 || (_this$pluginInjection = _this$pluginInjection.analytics) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.actions;
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
@@ -241,15 +242,18 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
           allUploadsFinished: false
         });
       }
-      if ((0, _mediaSingle2.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection2;
-        // read width state right before inserting to get up-to-date and define values
-        var widthPluginState = (_this$pluginInjection2 = _this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.width.sharedState.currentState();
-        (0, _mediaSingle2.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
-      } else if ((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _utils.isInEmptyLine)(state) && (!(0, _mediaCommon2.isInsidePotentialEmptyParagraph)(state) || (0, _utils.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
-        (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
-      } else {
-        (0, _mediaFiles.insertMediaGroupNode)(editorAnalyticsAPI)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
+      switch ((0, _mediaInline.getMediaNodeInsertionType)(state, (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
+        case 'inline':
+          (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
+          break;
+        case 'block':
+          // read width state right before inserting to get up-to-date and define values
+          var widthPluginState = (_this$pluginInjection2 = _this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.width.sharedState.currentState();
+          (0, _mediaSingle2.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
+          break;
+        case 'group':
+          (0, _mediaFiles.insertMediaGroupNode)(editorAnalyticsAPI)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
+          break;
       }
 
       // do events when media state changes

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/cjs/utils/{is-image.js → is-type.js}

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isImage = void 0;
+exports.isVideo = exports.isImage = void 0;
 var isImage = exports.isImage = function isImage(fileType) {
   return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+};
+var isVideo = exports.isVideo = function isVideo(fileType) {
+  return !!fileType && fileType.includes('video/');
 };

package/dist/cjs/utils/media-inline.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaNodeInsertionType = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _mediaCommon = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaFiles = require("../utils/media-files");
+var _mediaSingle = require("../utils/media-single");
+var _isType = require("./is-type");
+var _mediaCommon2 = require("./media-common");
+var getMediaNodeInsertionType = exports.getMediaNodeInsertionType = function getMediaNodeInsertionType(state, mediaFeatureFlags, fileMimeType) {
+  var canInsertInlineNode = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags) && !(0, _utils.isInEmptyLine)(state) && (!(0, _mediaCommon2.isInsidePotentialEmptyParagraph)(state) || (0, _utils.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support')) {
+    if (canInsertInlineNode && !(0, _isType.isVideo)(fileMimeType)) {
+      return 'inline';
+    }
+  }
+  if ((0, _mediaSingle.isMediaSingle)(state.schema, fileMimeType)) {
+    return 'block';
+  } else if (canInsertInlineNode) {
+    return 'inline';
+  }
+  return 'group';
+};

package/dist/cjs/utils/media-single.js

@@ -18,7 +18,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCommon = require("../utils/media-common");
-var _isImage = require("./is-image");
+var _isType = require("./is-type");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
@@ -62,7 +62,7 @@ function insertNodesWithOptionalParagraph(nodes) {
   };
 }
 var isMediaSingle = exports.isMediaSingle = function isMediaSingle(schema, fileMimeType) {
-  return !!schema.nodes.mediaSingle && (0, _isImage.isImage)(fileMimeType);
+  return !!schema.nodes.mediaSingle && (0, _isType.isImage)(fileMimeType);
 };
 var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI) {
   var state = view.state,
@@ -75,7 +75,7 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   }
 
   // if not an image type media node
-  if (node.type !== media || !(0, _isImage.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
+  if (node.type !== media || !(0, _isType.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
   var mediaSingleNode = mediaSingle.create({}, node);

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/main.js

@@ -6,7 +6,7 @@ import { RawIntlProvider } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { CAPTION_PLACEHOLDER_ID, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser, ErrorReporter, isInEmptyLine, isInListItem } from '@atlaskit/editor-common/utils';
+import { browser, ErrorReporter } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertPoint } from '@atlaskit/editor-prosemirror/transform';
 import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSelection } from '@atlaskit/editor-prosemirror/utils';
@@ -18,9 +18,10 @@ import * as helpers from '../commands/helpers';
 import { updateMediaSingleNodeAttrs } from '../commands/helpers';
 import PickerFacade from '../picker-facade';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
-import { canInsertMediaInline, insertMediaGroupNode, insertMediaInlineNode } from '../utils/media-files';
-import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
+import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { insertMediaGroupNode, insertMediaInlineNode } from '../utils/media-files';
+import { getMediaNodeInsertionType } from '../utils/media-inline';
+import { insertMediaSingleNode } from '../utils/media-single';
 import { MediaTaskManager } from './mediaTaskManager';
 import { stateKey } from './plugin-key';
 export { stateKey } from './plugin-key';
@@ -152,7 +153,7 @@ export class MediaPluginStateImplementation {
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
-      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$mediaOptions2;
+      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$mediaOptions2, _this$pluginInjection3;
       const {
         state
       } = this.view;
@@ -172,15 +173,18 @@ export class MediaPluginStateImplementation {
           allUploadsFinished: false
         });
       }
-      if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection3;
-        // read width state right before inserting to get up-to-date and define values
-        const widthPluginState = (_this$pluginInjection3 = this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.width.sharedState.currentState();
-        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
-      } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
-        insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
-      } else {
-        insertMediaGroupNode(editorAnalyticsAPI)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
+      switch (getMediaNodeInsertionType(state, (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
+        case 'inline':
+          insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
+          break;
+        case 'block':
+          // read width state right before inserting to get up-to-date and define values
+          const widthPluginState = (_this$pluginInjection3 = this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.width.sharedState.currentState();
+          insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
+          break;
+        case 'group':
+          insertMediaGroupNode(editorAnalyticsAPI)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
+          break;
       }
 
       // do events when media state changes