@atlaskit/editor-plugin-media 0.4.10 → 0.5.1

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -25,7 +25,9 @@ var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/che
 var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
 var _colors = require("@atlaskit/theme/colors");
 var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
-var _templateObject, _templateObject2; // Common Translations will live here
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+// Common Translations will live here
 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 _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); }; }
@@ -97,21 +99,21 @@ var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$Pure
       var formatLinkAddressText = formatMessage(_mediaLinkingToolbarMessages.mediaLinkToolbarMessages.backLink);
       var formatUnlinkText = formatMessage(_messages.linkToolbarMessages.unlink);
       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);
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         className: "recent-list"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: [_link.container, !!activityProvider && _link.containerWithProvider]
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: _link.inputWrapper
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, (0, _react2.jsx)("span", {
         css: buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatLinkAddressText,
-        icon: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
           label: formatLinkAddressText
         }),
         onClick: function onClick() {
@@ -120,7 +122,7 @@ var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$Pure
             inputMethod: currentInputMethod
           });
         }
-      })), /*#__PURE__*/_react.default.createElement(_ui.PanelTextInput, {
+      })), (0, _react2.jsx)(_ui.PanelTextInput, {
         testId: "media-link-input",
         placeholder: getPlaceholder(!!activityProvider),
         autoFocus: true,
@@ -142,13 +144,13 @@ var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$Pure
           _onChange(value);
         },
         onKeyDown: onKeyDown
-      }), (0, _utils.normalizeUrl)(displayUrl) && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatUnlinkText,
-        icon: /*#__PURE__*/_react.default.createElement(_unlink.default, {
+        icon: (0, _react2.jsx)(_unlink.default, {
           label: formatUnlinkText
         }),
         onClick: _this.handleUnlink
-      }))), !!errorsList.length && /*#__PURE__*/_react.default.createElement("section", {
+      }))), !!errorsList.length && (0, _react2.jsx)("section", {
         css: validationWrapper
       }, errorsList), renderRecentList()));
     });
@@ -180,7 +182,7 @@ var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$Pure
       var _this$props2 = this.props,
         providerFactory = _this$props2.providerFactory,
         displayUrl = _this$props2.displayUrl;
-      return /*#__PURE__*/_react.default.createElement(_link.RecentSearch, {
+      return (0, _react2.jsx)(_link.RecentSearch, {
         defaultUrl: (0, _utils.normalizeUrl)(displayUrl),
         providerFactory: providerFactory,
         onSubmit: this.handleSubmit,

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

@@ -9,6 +9,7 @@ exports.PixelEntry = exports.FullWidthDisplay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
@@ -18,6 +19,8 @@ var _messages = require("./messages");
 var _styles = require("./styles");
 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; }
+/** @jsx jsx */
+
 var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
   var width = _ref.width,
     mediaWidth = _ref.mediaWidth,
@@ -109,36 +112,36 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
     };
   }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
-    return /*#__PURE__*/React.createElement(_tooltip.default, {
+    return (0, _react2.jsx)(_tooltip.default, {
       content: formatMessage(_messages.messages.migrationButtonTooltip)
-    }, /*#__PURE__*/React.createElement(_button.default, {
+    }, (0, _react2.jsx)(_button.default, {
       appearance: "warning",
       spacing: "compact",
       onClick: onMigrate,
       testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(_messages.messages.migrationButtonText)));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: _styles.pixelEntryForm
-  }, /*#__PURE__*/React.createElement(_form.default, {
+  }, (0, _react2.jsx)(_form.default, {
     onSubmit: handleOnSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps;
-    return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement("div", {
+    return (0, _react2.jsx)("form", formProps, (0, _react2.jsx)("div", {
       css: _styles.pixelSizingWrapper
-    }, /*#__PURE__*/React.createElement(_form.Field, {
+    }, (0, _react2.jsx)(_form.Field, {
       key: "inputWidth",
       name: "inputWidth",
       defaultValue: computedWidth
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;
-      return /*#__PURE__*/React.createElement(_tooltip.default, {
+      return (0, _react2.jsx)(_tooltip.default, {
         hideTooltipOnMouseDown: true,
         content: formatMessage(_messages.messages.inputWidthTooltip, {
           maxWidth: maxWidth
         }),
         position: "top"
-      }, /*#__PURE__*/React.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
         css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
         appearance: "none",
         isCompact: true,
@@ -148,19 +151,19 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
           maxWidth: maxWidth
         })
       })));
-    }), /*#__PURE__*/React.createElement("span", {
+    }), (0, _react2.jsx)("span", {
       css: _styles.pixelSizingLabel
-    }, "x"), /*#__PURE__*/React.createElement(_form.Field, {
+    }, "x"), (0, _react2.jsx)(_form.Field, {
       key: "inputHeight",
       name: "inputHeight",
       defaultValue: computedHeight
     }, function (_ref4) {
       var fieldProps = _ref4.fieldProps;
-      return /*#__PURE__*/React.createElement(_tooltip.default, {
+      return (0, _react2.jsx)(_tooltip.default, {
         hideTooltipOnMouseDown: true,
         content: formatMessage(_messages.messages.inputHeightTooltip),
         position: "top"
-      }, /*#__PURE__*/React.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
         css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
         appearance: "none",
         isCompact: true,
@@ -168,7 +171,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
         pattern: "\\d*",
         "aria-label": formatMessage(_messages.messages.inputHeightAriaLabel)
       })));
-    }), /*#__PURE__*/React.createElement(_button.default, {
+    }), (0, _react2.jsx)(_button.default, {
       css: _styles.pixelEntryHiddenSubmit,
       type: "submit"
     }, formatMessage(_messages.messages.submitButtonText))));
@@ -176,7 +179,7 @@ var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
 };
 var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref5) {
   var formatMessage = _ref5.intl.formatMessage;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: _styles.pixelSizingFullWidthLabelStyles
-  }, /*#__PURE__*/React.createElement("span", null, formatMessage(_messages.messages.fullWidthLabel)));
+  }, (0, _react2.jsx)("span", null, formatMessage(_messages.messages.fullWidthLabel)));
 };

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

@@ -4,9 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizableMediaMigrationNotification = void 0;
+var _react = require("@emotion/react");
 var _styles = require("./styles");
+/** @jsx jsx */
+
 var ResizableMediaMigrationNotification = exports.ResizableMediaMigrationNotification = function ResizableMediaMigrationNotification() {
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": "resizable-media-migration-notification",
     css: [_styles.resizableMediaMigrationNotificationStyle]
   });

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -16,6 +16,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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -33,7 +34,7 @@ var _checkMediaType = require("../../utils/check-media-type");
 var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
 var _styled = require("./styled");
 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 */
 var resizerNextTestId = exports.resizerNextTestId = 'mediaSingle.resizerNext.testid';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
@@ -506,7 +507,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
 
       // while is not resizing, we take 100% as min-width if the container width is less than the min-width
       var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: (0, _styled.wrapperStyle)({
           layout: layout,
           containerWidth: containerWidth || origWidth,
@@ -515,7 +516,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           isNestedNode: isNestedNode,
           isExtendedResizeExperienceOn: true
         })
-      }, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
+      }, (0, _react2.jsx)(_resizer.ResizerNext, {
         minWidth: minViewWidth,
         maxWidth: maxWidth,
         className: resizerNextClassName,
@@ -531,7 +532,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         isHandleVisible: selected,
         handlePositioning: isNestedNode ? 'adjacent' : undefined,
         handleHighlight: "full-height"
-      }, children, showLegacyNotification && /*#__PURE__*/_react.default.createElement(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
+      }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
     }
   }]);
   return ResizableMediaSingleNext;

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

@@ -16,6 +16,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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -24,7 +25,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _checkMediaType = require("../../utils/check-media-type");
 var _styled = require("./styled");
 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 ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableMediaSingle, _React$Component);
@@ -384,7 +385,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
           }
         };
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
           layout: layout,
@@ -392,7 +393,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode
         })
-      }, /*#__PURE__*/_react.default.createElement(_ui.Resizer, (0, _extends2.default)({}, this.props, {
+      }, (0, _react2.jsx)(_ui.Resizer, (0, _extends2.default)({}, this.props, {
         displayGrid: this.displayGrid,
         ratio: ratio,
         width: initialWidth,
@@ -409,7 +410,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
         // This workaround adds an empty div inside the resize handler to prevent the issue.
         ,
         handleComponentFunc: function handleComponentFunc() {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _react2.jsx)("div", {
             contentEditable: false
           });
         },

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.insertMediaInlineNode = exports.insertMediaGroupNode = exports.getPosInList = exports.canInsertMediaInline = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _isType = require("./is-type");
 var _mediaCommon = require("./media-common");
 var canInsertMediaInline = exports.canInsertMediaInline = function canInsertMediaInline(state) {
   var node = state.schema.nodes.mediaInline.create({});
@@ -88,11 +91,29 @@ var insertMediaInlineNode = exports.insertMediaInlineNode = function insertMedia
     if (!mediaInline || !mediaState || collection === undefined) {
       return false;
     }
-    var id = mediaState.id;
-    var mediaInlineNode = mediaInline.create({
+    var id = mediaState.id,
+      dimensions = mediaState.dimensions,
+      _mediaState$scaleFact = mediaState.scaleFactor,
+      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
+    var mediaInlineAttrs = {
       id: id,
       collection: collection
-    });
+    };
+    if (
+    // TODO: replace it with new shouldShowInlineImage
+    (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support') && (0, _isType.isImage)(mediaState.fileMimeType)) {
+      var _ref = dimensions || {
+          width: undefined,
+          height: undefined
+        },
+        width = _ref.width,
+        height = _ref.height;
+      var scaledWidth = width ? Math.round(width / scaleFactor) : _mediaInline.DEFAULT_IMAGE_WIDTH;
+      var scaledHeight = height ? Math.round(height / scaleFactor) : _mediaInline.DEFAULT_IMAGE_HEIGHT;
+      mediaInlineAttrs.width = scaledWidth;
+      mediaInlineAttrs.height = scaledHeight;
+    }
+    var mediaInlineNode = mediaInline.create(mediaInlineAttrs);
     var space = state.schema.text(' ');
     var pos = state.selection.$to.pos;
 

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

@@ -138,7 +138,8 @@ var createMediaSingleNode = exports.createMediaSingleNode = function createMedia
       dimensions = mediaState.dimensions,
       contextId = mediaState.contextId,
       _mediaState$scaleFact = mediaState.scaleFactor,
-      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
+      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
+      fileName = mediaState.fileName;
     var _ref = dimensions || {
         height: undefined,
         width: undefined
@@ -149,14 +150,16 @@ var createMediaSingleNode = exports.createMediaSingleNode = function createMedia
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;
     var scaledWidth = width && Math.round(width / scaleFactor);
-    var mediaNode = media.create({
+    var mediaNode = media.create(_objectSpread({
       id: id,
       type: 'file',
       collection: collection,
       contextId: contextId,
       width: scaledWidth,
       height: height && Math.round(height / scaleFactor)
-    });
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media_er96o') && fileName && {
+      alt: fileName
+    }));
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};

package/dist/es2019/nodeviews/mediaInline.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { MediaInlineCard } from '@atlaskit/media-card';
+import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineNodeSelector } from './styles';
@@ -83,7 +85,11 @@ export const MediaInline = props => {
   };
   const {
     id,
-    collection
+    collection,
+    type,
+    alt,
+    width,
+    height
   } = props.node.attrs;
   const identifier = {
     id,
@@ -104,6 +110,16 @@ export const MediaInline = props => {
       isSelected: false
     });
   }
+  if (shouldShowInlineImage(type)) {
+    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+      mediaClient: getMediaClient(viewMediaClientConfig),
+      identifier: identifier,
+      isSelected: props.isSelected,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,

package/dist/es2019/nodeviews/mediaSingle.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import React, { Component } from 'react';
+import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -329,23 +332,23 @@ export default class MediaSingleNode extends Component {
       }
     }
     const shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-    const MediaChildren = /*#__PURE__*/React.createElement("figure", {
+    const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
       css: [figureWrapper],
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       ref: this.props.forwardRef
-    }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
+    }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? /*#__PURE__*/React.createElement(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
+    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
       showLegacyNotification: widthType !== 'pixel'
-    }), MediaChildren) : /*#__PURE__*/React.createElement(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
+    }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
       lineLength: contentWidthForLegacyExperience,
       pctWidth: mediaSingleWidthAttribute
-    }), MediaChildren) : /*#__PURE__*/React.createElement(MediaSingle, _extends({}, mediaSingleProps, {
+    }), MediaChildren) : jsx(MediaSingle, _extends({}, mediaSingleProps, {
       pctWidth: mediaSingleWidthAttribute
     }), MediaChildren);
   }
@@ -372,7 +375,7 @@ const MediaSingleNodeWrapper = ({
     widthState,
     mediaState
   } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
-  return /*#__PURE__*/React.createElement(MediaSingleNode, {
+  return jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
     node: node,
@@ -481,14 +484,14 @@ class MediaSingleNodeView extends ReactNodeView {
 
     // getPos is a boolean for marks, since this is a node we know it must be a function
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
         mediaProvider,
         contextIdentifierProvider
       }) => {
-        return /*#__PURE__*/React.createElement(MediaSingleNodeWrapper, {
+        return jsx(MediaSingleNodeWrapper, {
           pluginInjectionApi: pluginInjectionApi,
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,

package/dist/es2019/nodeviews/styles.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
@@ -23,7 +24,7 @@ export const MediaCardWrapper = ({
   onContextMenu
 }) => {
   const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": "media-card-wrapper",
     style: {
       borderColor: `var(--custom-palette-color)`,
@@ -31,15 +32,15 @@ export const MediaCardWrapper = ({
       borderStyle: 'solid',
       borderRadius: `${calculatedBorderWidth * 2}px`
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: `${dimensions.height / dimensions.width * 100}%`
     },
     onContextMenuCapture: onContextMenu
-  }, borderWidth > 0 && /*#__PURE__*/React.createElement(MediaBorderGapFiller, {
+  }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
     borderColor: `var(--custom-palette-color)`
-  }), /*#__PURE__*/React.createElement("div", {
+  }), jsx("div", {
     css: absoluteDiv
   }, children)));
 };

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
@@ -165,31 +167,31 @@ export class AltTextEditComponent extends React.Component {
       showClearTextButton
     } = this.state;
     const backButtonMessage = formatMessage(messages.back);
-    const backButtonMessageComponent = /*#__PURE__*/React.createElement(ToolTipContent, {
+    const backButtonMessageComponent = jsx(ToolTipContent, {
       description: backButtonMessage,
       keymap: escape,
       shortcutOverride: "Esc"
     });
     const errorsList = (this.state.validationErrors || []).map(function (error, index) {
-      return /*#__PURE__*/React.createElement(ErrorMessage, {
+      return jsx(ErrorMessage, {
         key: index
       }, error);
     });
     const hasErrors = !!errorsList.length;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: container
-    }, /*#__PURE__*/React.createElement("section", {
+    }, jsx("section", {
       css: inputWrapper
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: buttonWrapper
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       title: formatMessage(messages.back),
-      icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+      icon: jsx(ChevronLeftLargeIcon, {
         label: formatMessage(messages.back)
       }),
       tooltipContent: backButtonMessageComponent,
       onClick: this.closeMediaAltTextMenu
-    })), /*#__PURE__*/React.createElement(PanelTextInput, {
+    })), jsx(PanelTextInput, {
       testId: "alt-text-input",
       ariaLabel: formatMessage(messages.placeholder),
       describedById: `${hasErrors ? 'errors-list' : ''} support-text`,
@@ -203,24 +205,24 @@ export class AltTextEditComponent extends React.Component {
       ariaRequired: true,
       ariaInvalid: hasErrors,
       autoFocus: true
-    }), showClearTextButton && /*#__PURE__*/React.createElement("div", {
+    }), showClearTextButton && jsx("div", {
       css: buttonWrapper
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       testId: "alt-text-clear-button",
       title: formatMessage(messages.clear),
-      icon: /*#__PURE__*/React.createElement("span", {
+      icon: jsx("span", {
         css: clearText
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clear)
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText
-    }))), hasErrors && /*#__PURE__*/React.createElement("section", {
+    }))), hasErrors && jsx("section", {
       id: "errors-list",
       ref: this.errorsListRef,
       "aria-live": "assertive",
       css: validationWrapper
-    }, errorsList), /*#__PURE__*/React.createElement("p", {
+    }, errorsList), jsx("p", {
       css: supportText,
       id: "support-text"
     }, formatMessage(messages.supportText)));

package/dist/es2019/toolbar/index.js

@@ -30,6 +30,14 @@ import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
 import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+const mediaTypeMessages = {
+  image: messages.file_image_is_selected,
+  video: messages.file_video_is_selected,
+  audio: messages.file_audio_is_selected,
+  doc: messages.file_doc_is_selected,
+  archive: messages.file_archive_is_selected,
+  unknown: messages.file_unknown_is_selected
+};
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -402,6 +410,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   }, removeButton];
   return items;
 };
+const getMediaTypeMessage = selectedNodeTypeSingle => {
+  const mediaType = Object.keys(mediaTypeMessages).find(key => selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key));
+  return mediaType ? mediaTypeMessages[mediaType] : messages.file_unknown_is_selected;
+};
 export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) => {
   var _pluginInjectionApi$d2;
   const {
@@ -480,10 +492,23 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
+  var assistiveMessage = '';
+  if (getBooleanFF('platform.editor.a11y-media_er96o')) {
+    const selectedMediaSingleNode = getSelectedMediaSingle(state);
+    if (selectedMediaSingleNode) {
+      const selectedMediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
+      const selectedNodeTypeSingle = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.__fileMimeType;
+      const 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
+      });
+    }
+  }
   const toolbarConfig = {
     ...baseToolbar,
     items,
-    scrollable: true
+    scrollable: true,
+    mediaAssistiveMessage: assistiveMessage
   };
   if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
     return {