@atlaskit/editor-plugin-media 2.2.5 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.0
+
+### Minor Changes
+
+- [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
+  [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
+  ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
+
+### Patch Changes
+
+- [#121822](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121822)
+  [`2316af8fbe07d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2316af8fbe07d) -
+  [ux] Updates floating toolbar of the inline and media single by moving alt text option to the
+  overflow menu.
+- [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
+  [`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
+  Wire up the copy functionality in floating toolbar overflow menu
+- Updated dependencies
+
 ## 2.2.5
 
 ### Patch Changes

package/dist/cjs/ui/toolbar/index.js

@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
+var _media = require("@atlaskit/editor-common/media");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
@@ -26,6 +27,7 @@ var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inl
 var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
+var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -34,6 +36,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _styles = require("../../nodeviews/styles");
 var _altText = require("../../pm-plugins/alt-text");
+var _commands = require("../../pm-plugins/alt-text/commands");
 var _linking = require("../../pm-plugins/commands/linking");
 var _linking2 = require("../../pm-plugins/linking");
 var _pluginKey = require("../../pm-plugins/plugin-key");
@@ -42,7 +45,7 @@ var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
 var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
 var _PixelEntry = require("../../ui/PixelEntry");
 var _altText2 = require("./alt-text");
-var _commands = require("./commands");
+var _commands2 = require("./commands");
 var _comments = require("./comments");
 var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
@@ -100,7 +103,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     selected: false,
     focusEditoronEnter: true,
     disabled: false,
-    onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+    onClick: (0, _commands2.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
     title: intl.formatMessage(_messages.cardMessages.inlineTitle),
     testId: 'inline-appearance',
     className: 'inline-appearance' // a11y. uses to force focus on item
@@ -206,11 +209,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;
-            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
+            (0, _commands2.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a2;
-            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
+            (0, _commands2.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
           borderMark: borderMark,
           intl: intl
@@ -246,7 +249,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               // eslint-disable-next-line react/jsx-props-no-spreading
             }, props));
           },
-          width: 156,
+          width: 188,
           height: 32
         };
         var trigger = {
@@ -293,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 LEGACY_fallbackIcon: _card.IconInline
               });
             },
-            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+            onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
             testId: 'image-inline-appearance'
           }, {
             type: 'button',
@@ -321,7 +324,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _options2 = [{
             id: 'editor.media.convert.mediainline',
             title: inlineSwitcherTitle,
-            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
+            onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
             icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
               color: "currentColor",
               spacing: "spacious",
@@ -429,7 +432,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               var width = _ref3.width,
                 validation = _ref3.validation;
               var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
+              (0, _commands2.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -565,11 +568,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages) {
+  if (allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
     var _pluginInjectionApi$a8;
     toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
-      type: 'separator',
-      fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
+      type: 'separator'
     });
   }
   var removeButton = {
@@ -733,7 +735,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
-  if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    var _pluginInjectionApi$a10;
     if (items[items.length - 1].type === 'separator') {
       var separatorItem = items[items.length - 1];
       separatorItem.fullHeight = true;
@@ -743,9 +746,16 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
         fullHeight: true
       });
     }
+    var altTextTitle = intl.formatMessage(_media.altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
       options: [{
+        title: altTextTitle,
+        onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        icon: /*#__PURE__*/_react.default.createElement(_text.default, {
+          label: altTextTitle
+        })
+      }, {
         title: 'Resize',
         onClick: function onClick() {
           // TODO open resize dialog?
@@ -759,7 +769,9 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       }, {
         title: 'Copy',
         onClick: function onClick() {
-          // TODO replace with copy-button plugin
+          var _pluginInjectionApi$c, _pluginInjectionApi$f3;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
           return true;
         },
         icon: /*#__PURE__*/_react.default.createElement(_copy.default, {

package/dist/cjs/ui/toolbar/mediaInline.js

@@ -298,13 +298,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a5;
-    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
-      type: 'separator',
-      fullHeight: true
-    });
-  }
 
   //Image Preview
   if (options.allowImagePreview) {
@@ -346,8 +339,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     });
   }
   if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a6;
-    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a5;
+    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }

package/dist/es2019/ui/toolbar/index.js

@@ -2,6 +2,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, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { altTextMessages } from '@atlaskit/editor-common/media';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -16,6 +17,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
+import TextIcon from '@atlaskit/icon/core/text';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -24,6 +26,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MediaSingleNodeSelector } from '../../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
+import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { stateKey } from '../../pm-plugins/plugin-key';
@@ -240,7 +243,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               // eslint-disable-next-line react/jsx-props-no-spreading
             }, props));
           },
-          width: 156,
+          width: 188,
           height: 32
         };
         const trigger = {
@@ -567,11 +570,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages) {
+  if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
     var _pluginInjectionApi$a8;
     toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
-      type: 'separator',
-      fullHeight: editorExperiment('platform_editor_controls', 'variant1')
+      type: 'separator'
     });
   }
   const removeButton = {
@@ -733,7 +735,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
-  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    var _pluginInjectionApi$a10;
     if (items[items.length - 1].type === 'separator') {
       const separatorItem = items[items.length - 1];
       separatorItem.fullHeight = true;
@@ -743,9 +746,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
         fullHeight: true
       });
     }
+    const altTextTitle = intl.formatMessage(altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
       options: [{
+        title: altTextTitle,
+        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        icon: /*#__PURE__*/React.createElement(TextIcon, {
+          label: altTextTitle
+        })
+      }, {
         title: 'Resize',
         onClick: () => {
           // TODO open resize dialog?
@@ -759,7 +769,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       }, {
         title: 'Copy',
         onClick: () => {
-          // TODO replace with copy-button plugin
+          var _pluginInjectionApi$c, _pluginInjectionApi$f5;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f5 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f5 === void 0 ? void 0 : _pluginInjectionApi$f5.commands.copyNode(nodeType));
           return true;
         },
         icon: /*#__PURE__*/React.createElement(CopyIcon, {

package/dist/es2019/ui/toolbar/mediaInline.js

@@ -290,13 +290,6 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a5;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
-      type: 'separator',
-      fullHeight: true
-    });
-  }
 
   //Image Preview
   if (options.allowImagePreview) {
@@ -338,8 +331,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
     });
   }
   if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a6;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a5;
+    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }

package/dist/esm/ui/toolbar/index.js

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { altTextMessages } from '@atlaskit/editor-common/media';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -20,6 +21,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
+import TextIcon from '@atlaskit/icon/core/text';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -28,6 +30,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MediaSingleNodeSelector } from '../../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
+import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { stateKey } from '../../pm-plugins/plugin-key';
@@ -236,7 +239,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               // eslint-disable-next-line react/jsx-props-no-spreading
             }, props));
           },
-          width: 156,
+          width: 188,
           height: 32
         };
         var trigger = {
@@ -555,11 +558,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages) {
+  if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
     var _pluginInjectionApi$a8;
     toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
-      type: 'separator',
-      fullHeight: editorExperiment('platform_editor_controls', 'variant1')
+      type: 'separator'
     });
   }
   var removeButton = {
@@ -723,7 +725,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
-  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    var _pluginInjectionApi$a10;
     if (items[items.length - 1].type === 'separator') {
       var separatorItem = items[items.length - 1];
       separatorItem.fullHeight = true;
@@ -733,9 +736,16 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
         fullHeight: true
       });
     }
+    var altTextTitle = intl.formatMessage(altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
       options: [{
+        title: altTextTitle,
+        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        icon: /*#__PURE__*/React.createElement(TextIcon, {
+          label: altTextTitle
+        })
+      }, {
         title: 'Resize',
         onClick: function onClick() {
           // TODO open resize dialog?
@@ -749,7 +759,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       }, {
         title: 'Copy',
         onClick: function onClick() {
-          // TODO replace with copy-button plugin
+          var _pluginInjectionApi$c, _pluginInjectionApi$f3;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
           return true;
         },
         icon: /*#__PURE__*/React.createElement(CopyIcon, {

package/dist/esm/ui/toolbar/mediaInline.js

@@ -288,13 +288,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a5;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
-      type: 'separator',
-      fullHeight: true
-    });
-  }
 
   //Image Preview
   if (options.allowImagePreview) {
@@ -336,8 +329,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     });
   }
   if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a6;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a5;
+    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.2.5",
+	"version": "2.3.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,19 +34,19 @@
 		"./types": "./src/types/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^47.2.1",
+		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/editor-common": "^100.4.0",
+		"@atlaskit/editor-common": "^101.0.0",
 		"@atlaskit/editor-palette": "2.0.0",
-		"@atlaskit/editor-plugin-analytics": "^2.0.0",
-		"@atlaskit/editor-plugin-annotation": "2.0.2",
+		"@atlaskit/editor-plugin-analytics": "^2.1.0",
+		"@atlaskit/editor-plugin-annotation": "2.1.1",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^3.0.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^3.1.0",
 		"@atlaskit/editor-plugin-focus": "^1.5.0",
 		"@atlaskit/editor-plugin-grid": "^2.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -69,7 +69,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.3.0",
+		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",