@atlaskit/editor-plugin-media 0.4.9 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 0.5.0
+
+### Minor Changes
+
+- [#58884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58884) [`a149612dc46d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a149612dc46d) - [ux] Added support for Media Inline Image Card in Editor and Renderer
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#56822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56822) [`77f4fbf44e93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77f4fbf44e93) - ECA11Y-78: Added announce for the selected file
+
+## 0.4.10
+
+### Patch Changes
+
+- [#58567](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58567) [`5c0892098c84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c0892098c84) - add media inline image floating toolbar under FF
+- Updated dependencies
+
 ## 0.4.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -18,9 +18,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _mediaCard = require("@atlaskit/media-card");
+var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _styles = require("./styles");
@@ -157,7 +159,11 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
   }();
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
-    collection = _props$node$attrs.collection;
+    collection = _props$node$attrs.collection,
+    type = _props$node$attrs.type,
+    alt = _props$node$attrs.alt,
+    width = _props$node$attrs.width,
+    height = _props$node$attrs.height;
   var identifier = {
     id: id,
     mediaItemType: 'file',
@@ -177,6 +183,16 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
+  if ((0, _mediaInline.shouldShowInlineImage)(type)) {
+    return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
+      mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
+      identifier: identifier,
+      isSelected: props.isSelected,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,

package/dist/cjs/nodeviews/mediaSingle.js

@@ -18,6 +18,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -43,7 +44,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MediaSingleNode, _Component);
@@ -418,23 +419,23 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         }
       }
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
-      var MediaChildren = /*#__PURE__*/_react.default.createElement("figure", {
+      var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
         css: [_styles.figureWrapper],
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_CaptionPlaceholder.default, {
+      }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? /*#__PURE__*/_react.default.createElement(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
-      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         lineLength: contentWidthForLegacyExperience,
         pctWidth: mediaSingleWidthAttribute
-      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
+      }), MediaChildren) : (0, _react2.jsx)(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
         pctWidth: mediaSingleWidthAttribute
       }), MediaChildren);
     }
@@ -461,7 +462,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState;
-  return /*#__PURE__*/_react.default.createElement(MediaSingleNode, {
+  return (0, _react2.jsx)(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
     node: node,
@@ -591,13 +592,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref6) {
           var mediaProvider = _ref6.mediaProvider,
             contextIdentifierProvider = _ref6.contextIdentifierProvider;
-          return /*#__PURE__*/_react.default.createElement(MediaSingleNodeWrapper, {
+          return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,

package/dist/cjs/nodeviews/styles.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
 var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
 var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
 var figureWrapper = exports.figureWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
@@ -23,7 +24,7 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
     borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
     onContextMenu = _ref.onContextMenu;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": "media-card-wrapper",
     style: {
       borderColor: "var(--custom-palette-color)",
@@ -31,15 +32,15 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
     onContextMenuCapture: onContextMenu
-  }, borderWidth > 0 && /*#__PURE__*/_react.default.createElement(_ui.MediaBorderGapFiller, {
+  }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
     borderColor: "var(--custom-palette-color)"
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), (0, _react2.jsx)("div", {
     css: absoluteDiv
   }, children)));
 };

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -27,6 +27,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 var _messages = require("../messages");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
@@ -145,31 +146,31 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
       var formatMessage = this.props.intl.formatMessage;
       var showClearTextButton = this.state.showClearTextButton;
       var backButtonMessage = formatMessage(_messages.messages.back);
-      var backButtonMessageComponent = /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      var backButtonMessageComponent = (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: backButtonMessage,
         keymap: _keymaps.escape,
         shortcutOverride: "Esc"
       });
       var errorsList = (this.state.validationErrors || []).map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
+        return (0, _react2.jsx)(_ui.ErrorMessage, {
           key: index
         }, error);
       });
       var hasErrors = !!errorsList.length;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: container
-      }, /*#__PURE__*/_react.default.createElement("section", {
+      }, (0, _react2.jsx)("section", {
         css: inputWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatMessage(_messages.messages.back),
-        icon: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
           label: formatMessage(_messages.messages.back)
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu
-      })), /*#__PURE__*/_react.default.createElement(_ui.PanelTextInput, {
+      })), (0, _react2.jsx)(_ui.PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(_messages.messages.placeholder),
         describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
@@ -183,24 +184,24 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         ariaRequired: true,
         ariaInvalid: hasErrors,
         autoFocus: true
-      }), showClearTextButton && /*#__PURE__*/_react.default.createElement("div", {
+      }), showClearTextButton && (0, _react2.jsx)("div", {
         css: buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         testId: "alt-text-clear-button",
         title: formatMessage(_messages.messages.clear),
-        icon: /*#__PURE__*/_react.default.createElement("span", {
+        icon: (0, _react2.jsx)("span", {
           css: clearText
-        }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+        }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.messages.clear)
         })),
         tooltipContent: formatMessage(_messages.messages.clear),
         onClick: this.handleClearText
-      }))), hasErrors && /*#__PURE__*/_react.default.createElement("section", {
+      }))), hasErrors && (0, _react2.jsx)("section", {
         id: "errors-list",
         ref: this.errorsListRef,
         "aria-live": "assertive",
         css: validationWrapper
-      }, errorsList), /*#__PURE__*/_react.default.createElement("p", {
+      }, errorsList), (0, _react2.jsx)("p", {
         css: supportText,
         id: "support-text"
       }, formatMessage(_messages.messages.supportText)));

package/dist/cjs/toolbar/index.js

@@ -38,11 +38,20 @@ var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
 var _linking3 = require("./linking");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
+var _mediaInline = require("./mediaInline");
 var _utils2 = 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; }
 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 mediaTypeMessages = {
+  image: _mediaUi.messages.file_image_is_selected,
+  video: _mediaUi.messages.file_video_is_selected,
+  audio: _mediaUi.messages.file_audio_is_selected,
+  doc: _mediaUi.messages.file_doc_is_selected,
+  archive: _mediaUi.messages.file_archive_is_selected,
+  unknown: _mediaUi.messages.file_unknown_is_selected
+};
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch((0, _utils.removeSelectedNode)(state.tr));
@@ -129,79 +138,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }];
   return items;
 };
-var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
-  var mediaInline = state.schema.nodes.mediaInline;
-  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',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: _download.default,
-    onClick: function onClick() {
-      (0, _utils2.downloadMedia)(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(_mediaUi.messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: _commands.removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
   var _pluginInjectionApi$d;
   var mediaSingle = state.schema.nodes.mediaSingle;
@@ -465,6 +401,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }, removeButton]);
   return items;
 };
+var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
+  var mediaType = Object.keys(mediaTypeMessages).find(function (key) {
+    return selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key);
+  });
+  return mediaType ? mediaTypeMessages[mediaType] : _mediaUi.messages.file_unknown_is_selected;
+};
 var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
   var _pluginInjectionApi$d2;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -534,7 +476,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;
@@ -543,9 +485,22 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
+  var assistiveMessage = '';
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media_er96o')) {
+    var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+    if (selectedMediaSingleNode) {
+      var selectedMediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
+      var selectedNodeTypeSingle = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.__fileMimeType;
+      var selectedMediaAlt = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.alt;
+      assistiveMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(getMediaTypeMessage(selectedNodeTypeSingle), {
+        name: selectedMediaAlt
+      });
+    }
+  }
   var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,
-    scrollable: true
+    scrollable: true,
+    mediaAssistiveMessage: assistiveMessage
   });
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
     return _objectSpread(_objectSpread({}, toolbarConfig), {}, {

package/dist/cjs/toolbar/layout-group.js

@@ -7,6 +7,8 @@ exports.LayoutGroup = void 0;
 var _react = require("@emotion/react");
 var _button = require("@atlaskit/button");
 var _ui = require("@atlaskit/editor-common/ui");
+/** @jsx jsx */
+
 var containerStyles = (0, _react.css)({
   marginLeft: "var(--ds-space-100, 8px)"
 });
@@ -14,19 +16,19 @@ var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
   var layoutButtons = _ref.layoutButtons,
     dispatchCommand = _ref.dispatchCommand,
     hide = _ref.hide;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: containerStyles
-  }, /*#__PURE__*/React.createElement(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
+  }, (0, _react.jsx)(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
     switch (item.type) {
       case 'separator':
-        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarSeparator, {
+        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
           key: idx
         });
       case 'button':
         var ButtonIcon = item.icon;
-        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+        return (0, _react.jsx)(_ui.FloatingToolbarButton, {
           key: idx,
-          icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+          icon: item.icon ? (0, _react.jsx)(ButtonIcon, {
             label: item.title
           }) : undefined,
           title: item.title,

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -20,6 +20,7 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 var _checkMediaType = require("../utils/check-media-type");
 var _currentMediaNode = require("../utils/current-media-node");
 var _templateObject;
+/** @jsx jsx */
 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; }
 // need this wrapper, need to have 4px between items.
@@ -58,42 +59,42 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
     var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
     var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
       css: wrapper
-    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       onClick: onEditLink,
       title: title,
-      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: title,
         keymap: _keymaps.addLink
       }),
       testId: "edit-link-button"
-    }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    }, title)), (0, _react2.jsx)("div", {
       css: wrapper
-    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null)), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+      icon: (0, _react2.jsx)(_shortcut.default, {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   } else {
     var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: _title,
-      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: _title,
         keymap: _keymaps.addLink
       }),
-      icon: /*#__PURE__*/_react.default.createElement(_link.default, {
+      icon: (0, _react2.jsx)(_link.default, {
         label: _title
       })
-    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   }
 };

package/dist/cjs/toolbar/mediaInline.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaInlineImageToolbar = exports.generateMediaInlineFloatingToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _state = 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 _commands = require("./commands");
+var _filePreviewItem = require("./filePreviewItem");
+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, editorAnalyticsAPI) {
+  var mediaInline = state.schema.nodes.mediaInline;
+  var mediaType = state.selection instanceof _state.NodeSelection && state.selection.node.attrs.type;
+  if ((0, _mediaInline.shouldShowInlineImage)(mediaType)) {
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI);
+  }
+  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',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: _download.default,
+    onClick: function onClick() {
+      (0, _utils.downloadMedia)(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(_mediaUi.messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: _remove.default,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: _commands.removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+  var mediaInline = state.schema.nodes.mediaInline;
+  // if type is image, return inline image floating toolbar items
+  var inlineImageItems = [
+  // TODO: border marks, media single switcher, link, alt text, etc
+  {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: _remove.default,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: _commands.removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return inlineImageItems;
+};