@atlaskit/editor-plugin-media 0.10.4 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-media
 
+## 0.11.0
+
+### Minor Changes
+
+- [#61125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61125) [`9571e3502584`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9571e3502584) - ECA11Y-72 Update files toolbar to replace dropdown by buttons
+
 ## 0.10.4
 
 ### Patch Changes

package/dist/cjs/toolbar/commands.js

@@ -10,6 +10,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics2 = require("../utils/analytics");
 var _currentMediaNode = require("../utils/current-media-node");
 var _mediaCommon = require("../utils/media-common");
@@ -25,7 +26,7 @@ var getNodeType = function getNodeType(state) {
     mediaInline = _state$schema$nodes.mediaInline;
   return (0, _mediaCommon.isSelectionMediaSingleNode)(state) ? mediaSingle.name : mediaInline.name;
 };
-var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
+var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
     var _state$schema$nodes2 = state.schema.nodes,
       media = _state$schema$nodes2.media,
@@ -59,12 +60,18 @@ var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeI
           previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
+        var $endOfNode = tr.doc.resolve(nodePos + 1);
+        var newSelection = new _state.NodeSelection($endOfNode);
+        tr.setSelection(newSelection);
+        forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
+      }
       dispatch(tr);
     }
     return true;
   };
 };
-var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
+var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
     var _state$schema$nodes3 = state.schema.nodes,
       media = _state$schema$nodes3.media,
@@ -96,6 +103,11 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
           previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
         }
       })(tr);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
+        var newSelection = _state.NodeSelection.create(tr.doc, state.selection.anchor);
+        tr.setSelection(newSelection);
+        forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
+      }
       dispatch(tr);
     }
     return true;

package/dist/cjs/toolbar/index.js

@@ -65,30 +65,9 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
   }
   return true;
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(_mediaUi.messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(_messages.cardMessages.inline),
-      selected: false,
-      disabled: false,
-      onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI),
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -136,6 +115,54 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
+  (0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8') ?
+  // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+  items.unshift({
+    id: 'editor.media.view.switcher.inline',
+    type: 'button',
+    icon: _card.IconInline,
+    selected: false,
+    focusEditoronEnter: true,
+    disabled: false,
+    onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+    title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+    testId: 'inline-appearance',
+    className: 'inline-appearance' // a11y. uses to force focus on item
+  }, {
+    id: 'editor.media.view.switcher.thumbnail',
+    type: 'button',
+    icon: _card.IconCard,
+    selected: true,
+    disabled: false,
+    focusEditoronEnter: true,
+    onClick: function onClick() {
+      return true;
+    },
+    title: intl.formatMessage(_messages.cardMessages.blockTitle),
+    testId: 'thumbnail-appearance',
+    className: 'thumbnail-appearance' // a11y. uses to force focus on item
+  }) : items.unshift({
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(_mediaUi.messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(_messages.cardMessages.inline),
+      selected: false,
+      disabled: false,
+      onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+      selected: true,
+      disabled: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  });
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
@@ -503,14 +530,14 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a8;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/cjs/toolbar/mediaInline.js

@@ -14,6 +14,7 @@ var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaUi = require("@atlaskit/media-ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _linking = require("../commands/linking");
 var _linking2 = require("../pm-plugins/linking");
 var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
@@ -28,9 +29,10 @@ var _utils = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
-  var _pluginInjectionApi$a;
+  var _pluginInjectionApi$a, _pluginInjectionApi$f;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaType = state.selection instanceof _state2.NodeSelection && state.selection.node.attrs.type;
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
@@ -38,27 +40,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(_mediaUi.messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(_messages.cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -106,6 +87,57 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     onClick: _commands.removeInlineCard,
     testId: 'media-toolbar-remove-button'
   }];
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
+    // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+    items.unshift({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: _card.IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: _card.IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(_messages.cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    });
+  } else {
+    items.unshift({
+      id: 'editor.media.view.switcher',
+      type: 'dropdown',
+      title: intl.formatMessage(_mediaUi.messages.changeView),
+      options: [{
+        id: 'editor.media.view.switcher.inline',
+        title: intl.formatMessage(_messages.cardMessages.inline),
+        selected: true,
+        disabled: false,
+        onClick: function onClick() {
+          return true;
+        },
+        testId: 'inline-appearance'
+      }, {
+        id: 'editor.media.view.switcher.thumbnail',
+        title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+        selected: false,
+        disabled: false,
+        onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
+        testId: 'thumbnail-appearance'
+      }]
+    });
+  }
   return items;
 };
 var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {

package/dist/es2019/toolbar/commands.js

@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 import { isSelectionMediaSingleNode } from '../utils/media-common';
@@ -16,7 +17,7 @@ const getNodeType = state => {
   } = state.schema.nodes;
   return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
 };
-export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) => {
+export const changeInlineToMediaCard = (editorAnalyticsAPI, forceFocusSelector) => (state, dispatch) => {
   const {
     media,
     mediaInline,
@@ -51,11 +52,17 @@ export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) =
         previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
       }
     })(tr);
+    if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+      const $endOfNode = tr.doc.resolve(nodePos + 1);
+      const newSelection = new NodeSelection($endOfNode);
+      tr.setSelection(newSelection);
+      forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector(`.thumbnail-appearance`)(tr);
+    }
     dispatch(tr);
   }
   return true;
 };
-export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) => {
+export const changeMediaCardToInline = (editorAnalyticsAPI, forceFocusSelector) => (state, dispatch) => {
   const {
     media,
     mediaInline,
@@ -87,6 +94,11 @@ export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) =
         previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
       }
     })(tr);
+    if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+      const newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
+      tr.setSelection(newSelection);
+      forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector(`.inline-appearance`)(tr);
+    }
     dispatch(tr);
   }
   return true;

package/dist/es2019/toolbar/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -51,32 +51,11 @@ const handleRemoveMediaGroup = (state, dispatch) => {
   }
   return true;
 };
-const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
+const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) => {
   const {
     mediaGroup
   } = state.schema.nodes;
   const items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: false,
-      disabled: false,
-      onClick: changeMediaCardToInline(editorAnalyticsAPI),
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: true,
-      disabled: false,
-      onClick: () => {
-        return true;
-      },
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -124,6 +103,52 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
+  getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8') ?
+  // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+  items.unshift({
+    id: 'editor.media.view.switcher.inline',
+    type: 'button',
+    icon: IconInline,
+    selected: false,
+    focusEditoronEnter: true,
+    disabled: false,
+    onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+    title: intl.formatMessage(cardMessages.inlineTitle),
+    testId: 'inline-appearance',
+    className: 'inline-appearance' // a11y. uses to force focus on item
+  }, {
+    id: 'editor.media.view.switcher.thumbnail',
+    type: 'button',
+    icon: IconCard,
+    selected: true,
+    disabled: false,
+    focusEditoronEnter: true,
+    onClick: () => true,
+    title: intl.formatMessage(cardMessages.blockTitle),
+    testId: 'thumbnail-appearance',
+    className: 'thumbnail-appearance' // a11y. uses to force focus on item
+  }) : items.unshift({
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inline),
+      selected: false,
+      disabled: false,
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: true,
+      disabled: false,
+      onClick: () => {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  });
   return items;
 };
 const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) => {
@@ -506,14 +531,14 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a8;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2, _pluginInjectionApi$f3;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : (_pluginInjectionApi$f3 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;

package/dist/es2019/toolbar/mediaInline.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
+import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { showLinkingToolbar } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -18,8 +19,9 @@ import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
-  var _pluginInjectionApi$a;
+  var _pluginInjectionApi$a, _pluginInjectionApi$f, _pluginInjectionApi$f2;
   const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  const forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : (_pluginInjectionApi$f2 = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector;
   const {
     mediaInline
   } = state.schema.nodes;
@@ -29,27 +31,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   const items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: () => {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -97,6 +78,55 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     onClick: removeInlineCard,
     testId: 'media-toolbar-remove-button'
   }];
+  if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+    // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+    items.unshift({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: () => true,
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    });
+  } else {
+    items.unshift({
+      id: 'editor.media.view.switcher',
+      type: 'dropdown',
+      title: intl.formatMessage(messages.changeView),
+      options: [{
+        id: 'editor.media.view.switcher.inline',
+        title: intl.formatMessage(cardMessages.inline),
+        selected: true,
+        disabled: false,
+        onClick: () => {
+          return true;
+        },
+        testId: 'inline-appearance'
+      }, {
+        id: 'editor.media.view.switcher.thumbnail',
+        title: intl.formatMessage(messages.displayThumbnail),
+        selected: false,
+        disabled: false,
+        onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+        testId: 'thumbnail-appearance'
+      }]
+    });
+  }
   return items;
 };
 export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options = {}) => {

package/dist/esm/toolbar/commands.js

@@ -5,6 +5,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 import { isSelectionMediaSingleNode } from '../utils/media-common';
@@ -18,7 +19,7 @@ var getNodeType = function getNodeType(state) {
     mediaInline = _state$schema$nodes.mediaInline;
   return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
 };
-export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
+export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
     var _state$schema$nodes2 = state.schema.nodes,
       media = _state$schema$nodes2.media,
@@ -52,12 +53,18 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnal
           previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
+      if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+        var $endOfNode = tr.doc.resolve(nodePos + 1);
+        var newSelection = new NodeSelection($endOfNode);
+        tr.setSelection(newSelection);
+        forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
+      }
       dispatch(tr);
     }
     return true;
   };
 };
-export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
+export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
     var _state$schema$nodes3 = state.schema.nodes,
       media = _state$schema$nodes3.media,
@@ -89,6 +96,11 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
           previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
         }
       })(tr);
+      if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+        var newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
+        tr.setSelection(newSelection);
+        forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
+      }
       dispatch(tr);
     }
     return true;

package/dist/esm/toolbar/index.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -55,30 +55,9 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
   }
   return true;
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: false,
-      disabled: false,
-      onClick: changeMediaCardToInline(editorAnalyticsAPI),
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -126,6 +105,54 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
+  getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8') ?
+  // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+  items.unshift({
+    id: 'editor.media.view.switcher.inline',
+    type: 'button',
+    icon: IconInline,
+    selected: false,
+    focusEditoronEnter: true,
+    disabled: false,
+    onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+    title: intl.formatMessage(cardMessages.inlineTitle),
+    testId: 'inline-appearance',
+    className: 'inline-appearance' // a11y. uses to force focus on item
+  }, {
+    id: 'editor.media.view.switcher.thumbnail',
+    type: 'button',
+    icon: IconCard,
+    selected: true,
+    disabled: false,
+    focusEditoronEnter: true,
+    onClick: function onClick() {
+      return true;
+    },
+    title: intl.formatMessage(cardMessages.blockTitle),
+    testId: 'thumbnail-appearance',
+    className: 'thumbnail-appearance' // a11y. uses to force focus on item
+  }) : items.unshift({
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inline),
+      selected: false,
+      disabled: false,
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: true,
+      disabled: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  });
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
@@ -493,14 +520,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a8;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/esm/toolbar/mediaInline.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
+import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { showLinkingToolbar } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -18,9 +19,10 @@ import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
-  var _pluginInjectionApi$a;
+  var _pluginInjectionApi$a, _pluginInjectionApi$f;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
   var mediaLinkingState = getMediaLinkingState(state);
@@ -28,27 +30,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
     type: 'separator'
   }, {
     type: 'custom',
@@ -96,6 +77,57 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     onClick: removeInlineCard,
     testId: 'media-toolbar-remove-button'
   }];
+  if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
+    // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
+    items.unshift({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    });
+  } else {
+    items.unshift({
+      id: 'editor.media.view.switcher',
+      type: 'dropdown',
+      title: intl.formatMessage(messages.changeView),
+      options: [{
+        id: 'editor.media.view.switcher.inline',
+        title: intl.formatMessage(cardMessages.inline),
+        selected: true,
+        disabled: false,
+        onClick: function onClick() {
+          return true;
+        },
+        testId: 'inline-appearance'
+      }, {
+        id: 'editor.media.view.switcher.thumbnail',
+        title: intl.formatMessage(messages.displayThumbnail),
+        selected: false,
+        disabled: false,
+        onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+        testId: 'thumbnail-appearance'
+      }]
+    });
+  }
   return items;
 };
 export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {

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

@@ -1,13 +1,14 @@
 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 { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 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;
-export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
-export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
+export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

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

@@ -1,13 +1,14 @@
 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 { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 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;
-export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
-export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
+export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -147,6 +147,9 @@
     },
     "platform.editor.a11y-media-resizing_b5v0o": {
       "type": "boolean"
+    },
+    "platform.editor.ally-media-file-dropdown_1kxo8": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"