@atlaskit/editor-plugin-media 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 0.4.2
+
+### Patch Changes
+
+- [#43436](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43436) [`6bf14e25965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bf14e25965) - Revert "Resize media for the keyboard users"
+
+## 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

package/dist/cjs/plugin.js

@@ -58,7 +58,6 @@ 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) {
@@ -146,17 +145,16 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin(_ref5) {
+        plugin: function plugin() {
           var _api$analytics2;
-          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);
+          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);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref6) {
-            var schema = _ref6.schema;
+          plugin: function plugin(_ref5) {
+            var schema = _ref5.schema;
             return (0, _keymapMediaSingle.default)(schema);
           }
         });
@@ -168,9 +166,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref7) {
+          plugin: function plugin(_ref6) {
             var _api$analytics3;
-            var schema = _ref7.schema;
+            var schema = _ref6.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);
           }
         });
@@ -178,15 +176,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref8) {
-            var dispatch = _ref8.dispatch;
+          plugin: function plugin(_ref7) {
+            var dispatch = _ref7.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref9) {
-            var schema = _ref9.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return (0, _keymap3.default)(schema);
           }
         });
@@ -222,19 +220,19 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        appearance = _ref10.appearance;
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        appearance = _ref9.appearance;
       return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,
         api: api
       });
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        eventDispatcher = _ref11.eventDispatcher,
-        disabled = _ref11.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        eventDispatcher = _ref10.eventDispatcher,
+        disabled = _ref10.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -242,8 +240,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref12) {
-        var formatMessage = _ref12.formatMessage;
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
         return [{
           id: 'media',
           title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),

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

@@ -6,17 +6,12 @@ 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");
-var _commands = require("../toolbar/commands");
-var _utils = require("../toolbar/utils");
-var _mediaResizeAnnouncerMess = require("./mediaResizeAnnouncerMess");
-function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
+function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.undo.common, ignoreLinksInSteps, list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
@@ -27,10 +22,6 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
     (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) {
@@ -42,92 +33,6 @@ 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/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, input, layout) {
+  return function (width, validation, 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, 'floatingToolBar', 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, 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,7 +49,6 @@ 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) {
@@ -137,11 +136,9 @@ export const mediaPlugin = ({
         }
       }, {
         name: 'mediaKeymap',
-        plugin: ({
-          getIntl
-        }) => {
+        plugin: () => {
           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, apiWidth, getIntl);
+          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);
         }
       }];
       if (options && options.allowMediaSingle) {

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

@@ -1,15 +1,10 @@
-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 { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
 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';
-import { updateMediaSingleWidth } from '../toolbar/commands';
-import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
-import { mediaResizeAnnouncerMess } from './mediaResizeAnnouncerMess';
-export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
   const list = {};
   bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
   bindKeymapWithCommand(enter.common, splitMediaGroup, list);
@@ -20,10 +15,6 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
     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 => {
@@ -35,82 +26,6 @@ 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

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, input, layout) => (state, dispatch) => {
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, 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, 'floatingToolBar', 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, newLayout)(state, dispatch);
             },
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {

package/dist/es2019/utils/{is-image.js → is-type.js}

@@ -1,3 +1,6 @@
 export const isImage = fileType => {
   return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+};
+export const isVideo = fileType => {
+  return !!fileType && fileType.includes('video/');
 };

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

@@ -0,0 +1,21 @@
+import { isInEmptyLine, isInListItem } from '@atlaskit/editor-common/utils';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { canInsertMediaInline } from '../utils/media-files';
+import { isMediaSingle } from '../utils/media-single';
+import { isVideo } from './is-type';
+import { isInsidePotentialEmptyParagraph } from './media-common';
+export const getMediaNodeInsertionType = (state, mediaFeatureFlags, fileMimeType) => {
+  const canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaFeatureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state);
+  if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
+    if (canInsertInlineNode && !isVideo(fileMimeType)) {
+      return 'inline';
+    }
+  }
+  if (isMediaSingle(state.schema, fileMimeType)) {
+    return 'block';
+  } else if (canInsertInlineNode) {
+    return 'inline';
+  }
+  return 'group';
+};