@atlaskit/editor-plugin-media 1.28.4 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 1.29.0
+
+### Minor Changes
+
+- [#130065](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130065)
+  [`e71a357ea40dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e71a357ea40dd) -
+  [ux] [ED-24323] Add external image badge for externally hosted images
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.28.5
+
+### Patch Changes
+
+- [#129804](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129804)
+  [`790a6fe6bc9e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/790a6fe6bc9e8) -
+  [ED-24516] Fix VR test helpers for fallback LazyNodeViews
+- Updated dependencies
+
 ## 1.28.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -72,6 +72,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
       var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -331,7 +332,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
+      var _mediaOptions$getEdit,
+        _pluginInjectionApi$m,
+        _node$firstChild,
+        _this2 = this,
+        _mediaOptions$getEdit3,
+        _mediaOptions$getEdit4;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -448,6 +454,34 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
       }
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
+      var insertMediaPluginPhaseOneFeatureFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
+      var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
+      var commentBadgeOffset = function commentBadgeOffset() {
+        if (_this2.commentBadgeRef.current) {
+          var _mediaOptions$getEdit2;
+          var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
+          var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
+          var isMediaInsideTable = function isMediaInsideTable() {
+            var pos = getPos();
+            if (pos !== undefined) {
+              var _$pos2 = view.state.doc.resolve(pos);
+              var _table2 = view.state.schema.nodes.table;
+              var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)(_$pos2, [_table2]);
+              return Boolean(foundTableNode);
+            }
+            return false;
+          };
+          if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
+            return commentBadgeWidth + 2;
+          }
+          return commentBadgeWidth + 14;
+        }
+        return 0;
+      };
+      var currentMediaElement = function currentMediaElement() {
+        var pos = getPos();
+        return view.domAtPos(pos + 1).node;
+      };
       var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
         css: figureWrapperStyles
@@ -455,15 +489,29 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         ,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
+      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        mediaElement: currentMediaElement(),
+        mediaHeight: height,
+        mediaWidth: width
+      }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? (0, _react2.jsx)(_CommentBadge.CommentBadgeWithRef, {
+        ref: this.commentBadgeRef,
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
         badgeOffsetRight: badgeOffsetRight,
         getPos: getPos,
         isDrafting: isCurrentNodeDrafting
-      }), (0, _react2.jsx)("div", {
+      }) : (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
+        view: view,
+        api: pluginInjectionApi,
+        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        badgeOffsetRight: badgeOffsetRight,
+        getPos: getPos,
+        isDrafting: isCurrentNodeDrafting
+      })), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
@@ -538,18 +586,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
   function MediaSingleNodeView() {
-    var _this2;
+    var _this3;
     (0, _classCallCheck2.default)(this, MediaSingleNodeView);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "lastOffsetLeft", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "forceViewUpdate", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "selectionType", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkAndUpdateSelectionType", function () {
-      var getPos = _this2.getPos;
-      var selection = _this2.view.state.selection;
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "lastOffsetLeft", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "forceViewUpdate", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "selectionType", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "checkAndUpdateSelectionType", function () {
+      var getPos = _this3.getPos;
+      var selection = _this3.view.state.selection;
 
       /**
        *  ED-19831
@@ -562,15 +610,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       } catch (e) {
         pos = undefined;
       }
-      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
-      _this2.selectionType = isNodeSelected;
+      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
+      _this3.selectionType = isNodeSelected;
       return isNodeSelected;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "isNodeSelected", function () {
-      _this2.checkAndUpdateSelectionType();
-      return _this2.selectionType !== null;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "isNodeSelected", function () {
+      _this3.checkAndUpdateSelectionType();
+      return _this3.selectionType !== null;
     });
-    return _this2;
+    return _this3;
   }
   (0, _createClass2.default)(MediaSingleNodeView, [{
     key: "createDomRef",
@@ -635,10 +683,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this3 = this;
+      var _this4 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
+          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
         };
       }
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -646,7 +694,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
+      var _this5 = this;
       var _this$reactComponentP = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP.eventDispatcher,
         fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -671,12 +719,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this4.node,
+            node: _this5.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this4.view,
+            view: _this5.view,
             fullWidthMode: fullWidthMode,
-            selected: _this4.isNodeSelected,
+            selected: _this5.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,

package/dist/cjs/toDOM-fixes/media.js

@@ -4,13 +4,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaSpecWithFixedToDOM = void 0;
+exports.mediaSpecWithFixedToDOM = exports.defaultImageCardDimensions = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _toDOMAttrs = require("./toDOMAttrs");
 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 skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+var defaultImageCardDimensions = exports.defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
+
 // @nodeSpecException:toDOM patch
 var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
@@ -19,7 +37,29 @@ var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSp
   return _objectSpread(_objectSpread({}, _adfSchema.media), {}, {
     toDOM: function toDOM(node) {
       var attrs = (0, _toDOMAttrs.getMediaAttrs)('media', node);
-      return ['div', attrs];
+      var styles = skeletonStyling;
+      if (node.attrs.type === 'external') {
+        return ['img', _objectSpread(_objectSpread({}, attrs), {}, {
+          src: node.attrs.url,
+          styles: styles
+        })];
+      }
+      if (node.attrs.type === 'file') {
+        var dataUrl = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        var width = defaultImageCardDimensions.width;
+        var height = defaultImageCardDimensions.height;
+        return ['div', _objectSpread(_objectSpread({
+          width: width,
+          height: height
+        }, attrs), {}, {
+          // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+          // rectangle that provides an affordance for media.
+          style: "\n\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\tbackground-image: url(\"".concat(dataUrl, "\");\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\tmargin-right: 4px;\n\t\t\t\t\t\tborder-radius: ").concat(skeletonStyling, ";\n\n\t\t\t\t\t\tflex-basis: ").concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\tbackground-color: var(--media-card-background-color, unset);\n\t\t\t\t\t\twidth: var(--media-card-width, 0);\n\t\t\t\t\t\theight: var(--media-card-height, 0);\n\t\t\t\t\t\t")
+        })];
+      }
+      return ['div', _objectSpread(_objectSpread({}, attrs), {}, {
+        styles: styles
+      })];
     }
   });
 };

package/dist/cjs/toDOM-fixes/mediaGroup.js

@@ -10,8 +10,6 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", ";");
-
 /**
  * Duplicate consts from `media-card`.
  * `packages/media/media-card/src/utils/cardDimensions.ts`
@@ -68,27 +66,11 @@ var mediaGroupSpecWithFixedToDOM = exports.mediaGroupSpecWithFixedToDOM = functi
   }
   return _objectSpread(_objectSpread({}, _adfSchema.mediaGroup), {}, {
     toDOM: function toDOM(node) {
-      var childNodes = [];
-      for (var i = 0; i < node.childCount; i++) {
-        var _getDefaultCardDimens = getDefaultCardDimensions(),
-          width = _getDefaultCardDimens.width,
-          height = _getDefaultCardDimens.height;
-        var nodeHolder = ['img', {
-          width: width,
-          height: height,
-          // Transparent image workaround to control styling
-          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-          style: "margin-left: ".concat(i !== 0 ? "4px" : '0', "; margin-right: 4px; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(skeletonStyling)
-        }];
-        childNodes.push(nodeHolder);
-      }
-
       // Margin margin that consolidates the margin in the
       return ['div', {
-        style: 'margin: "3px 5px";',
-        // From adf-schema
+        style: "\n\t\t\t\t\t\tmargin: 3px 5px;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\t--media-card-background-color: #EBECF0;\n\t\t\t\t\t\t--media-card-width: ".concat(defaultImageCardDimensions.width, "px;\n\t\t\t\t\t\t--media-card-height: ").concat(defaultImageCardDimensions.height, "px;\n\t\t\t\t\t"),
         'data-node-type': 'mediaGroup'
-      }].concat(childNodes);
+      }, 0];
     }
   });
 };

package/dist/cjs/toDOM-fixes/mediaSingle.js

@@ -67,11 +67,8 @@ function getMediaSinglePixelWidth(width, editorWidth) {
 function computeMediaSingleDimensions(_ref) {
   var childNode = _ref.childNode,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    widthType = _ref.widthType;
-  // TODO: We can't retrieve the editor width from here easily.
-  // For now we're using the default line length here, but this will be
-  // incorrect on smaller devices.
-  var editorWidth = 760;
+    widthType = _ref.widthType,
+    editorWidth = _ref.editorWidth;
   var width = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width;
   var height = childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height;
   if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(childNode === null || childNode === void 0 ? void 0 : childNode.attrs.layout, width, editorWidth)) {
@@ -127,36 +124,44 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
     return mediaSingleNode;
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
-    toDOM: function toDOM(node) {
+    toDOM: function toDOM(node, lazyNodeViewOptions) {
       var _mediaSingleAttrs$lay;
-      var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
+      var childNode = node.firstChild;
       var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(mediaSingleOption.withExtendedWidthTypes, node);
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
-          mediaSingleWidth: mediaSingleWidth
+          mediaSingleWidth: mediaSingleWidth,
+          editorWidth: (lazyNodeViewOptions === null || lazyNodeViewOptions === void 0 ? void 0 : lazyNodeViewOptions.editorLineWidth) || 760
         }),
         width = _computeMediaSingleDi.width,
         height = _computeMediaSingleDi.height;
-      var layoutStyles = computeLayoutStyles(width, layout);
+      var sizes = width && height ? "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(skeletonStyling) : '';
+      var layoutStyles = computeLayoutStyles(mediaSingleWidth, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
+      var layoutClass = "image-".concat(layout);
+      var centerLayout = "display: flex; justify-content: center;";
+      var endLayout = "display: flex; justify-content: end;";
+      var startLayout = "display: flex; justify-content: start;";
+      var layoutStyle = layout === 'align-end' ? endLayout : layout === 'align-start' ? startLayout : centerLayout;
       var content = ['div', _objectSpread({
-        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+        class: "rich-media-item mediaSingleView-content-wrap ".concat(layoutClass)
       }, dataAttrs), ['div', {
-        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
-        style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
+        style: "".concat(sizes, "; ").concat(style, "; max-width: 100%; border-radius: ", "var(--ds-border-radius, 3px)", "; ").concat(layoutStyle)
       }, ['figure', {
-        class: 'media-single-node'
+        class: 'media-single-node',
+        style: 'margin: 0px'
       }, ['div', {}, ['div', {
         class: 'media-content-wrap'
       }, 0]]]]];
       return ['div', {
-        class: 'mediaSingleView-content-wrap'
+        class: 'mediaSingleView-content-wrap',
+        layout: layout
       }, content];
     }
   });

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommentBadge = void 0;
+exports.CommentBadgeWithRef = exports.CommentBadge = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -75,4 +75,69 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     }
   });
 };
-var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
+var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
+
+// This is a copy of above component with adding forwardRef.
+// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
+var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var api = _ref2.api,
+    mediaNode = _ref2.mediaNode,
+    view = _ref2.view,
+    getPos = _ref2.getPos,
+    isDrafting = _ref2.isDrafting,
+    badgeOffsetRight = _ref2.badgeOffsetRight,
+    commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    entered = _useState4[0],
+    setEntered = _useState4[1];
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    annotationState = _useSharedPluginState2.annotationState;
+  var _view$state$schema2 = view.state.schema,
+    media = _view$state$schema2.nodes.media,
+    annotation = _view$state$schema2.marks.annotation,
+    state = view.state,
+    dispatch = view.dispatch;
+  var status = (0, _react.useMemo)(function () {
+    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+      return 'default';
+    }
+    return annotationState.selectedAnnotations.some(function (annotation) {
+      return !!mediaNode.marks.find(function (mark) {
+        return mark.attrs.id === annotation.id;
+      });
+    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
+  }, [annotationState, mediaNode]);
+  var onClick = (0, _react.useCallback)(function () {
+    if (api.annotation && mediaNode) {
+      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
+      showCommentForBlockNode(mediaNode, _analytics.VIEW_METHOD.BADGE)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  var pos = getPos();
+  var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  });
+  if (!isDrafting && hasNoComments || !mediaNode) {
+    return null;
+  }
+  var mediaSingleElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
+    ref: ref,
+    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
+    badgeOffsetRight: badgeOffsetRight,
+    width: mediaNode.attrs.width,
+    height: mediaNode.attrs.height,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement,
+    intl: intl,
+    status: entered ? 'entered' : status,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    }
+  });
+});

package/dist/es2019/nodeviews/mediaSingle.js

@@ -11,6 +11,7 @@ import React, { Component, Fragment, useMemo } from 'react';
 import { css, 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 { ExternalImageBadge } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
@@ -23,7 +24,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
-import { CommentBadge } from '../ui/CommentBadge';
+import { CommentBadge, CommentBadgeWithRef } from '../ui/CommentBadge';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -46,6 +47,7 @@ export default class MediaSingleNode extends Component {
     });
     _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "createOrUpdateMediaNodeUpdater", props => {
       const node = this.props.node.firstChild;
       const updaterProps = {
@@ -234,7 +236,7 @@ export default class MediaSingleNode extends Component {
     });
   }
   render() {
-    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit2, _mediaOptions$getEdit3;
+    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit4, _mediaOptions$getEdit5, _mediaOptions$getEdit6, _mediaOptions$getEdit7;
     const {
       selected,
       getPos,
@@ -365,6 +367,36 @@ export default class MediaSingleNode extends Component {
       shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
     }
     const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
+    const insertMediaPluginPhaseOneFeatureFlag = fg('platform_editor_insert_media_plugin_phase_one');
+    const shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
+    const commentBadgeOffset = () => {
+      if (this.commentBadgeRef.current) {
+        var _mediaOptions$getEdit2, _mediaOptions$getEdit3;
+        const commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix;
+        const commentBadgeWidth = this.commentBadgeRef.current.offsetWidth;
+        const isMediaInsideTable = () => {
+          const pos = getPos();
+          if (pos !== undefined) {
+            const $pos = view.state.doc.resolve(pos);
+            const {
+              table
+            } = view.state.schema.nodes;
+            const foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
+            return Boolean(foundTableNode);
+          }
+          return false;
+        };
+        if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
+          return commentBadgeWidth + 2;
+        }
+        return commentBadgeWidth + 14;
+      }
+      return 0;
+    };
+    const currentMediaElement = () => {
+      const pos = getPos();
+      return view.domAtPos(pos + 1).node;
+    };
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
       css: figureWrapperStyles
@@ -372,15 +404,29 @@ export default class MediaSingleNode extends Component {
       ,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
-    }, commentsOnMedia && jsx(CommentBadge, {
-      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
+    }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+      commentBadgeRightOffset: commentBadgeOffset(),
+      mediaElement: currentMediaElement(),
+      mediaHeight: height,
+      mediaWidth: width
+    }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? jsx(CommentBadgeWithRef, {
+      ref: this.commentBadgeRef,
+      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : (_mediaOptions$getEdit5 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit5 === void 0 ? void 0 : _mediaOptions$getEdit5.commentsOnMediaBugFix,
+      view: view,
+      api: pluginInjectionApi,
+      mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+      badgeOffsetRight: badgeOffsetRight,
+      getPos: getPos,
+      isDrafting: isCurrentNodeDrafting
+    }) : jsx(CommentBadge, {
+      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit6 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit6 === void 0 ? void 0 : (_mediaOptions$getEdit7 = _mediaOptions$getEdit6.call(mediaOptions)) === null || _mediaOptions$getEdit7 === void 0 ? void 0 : _mediaOptions$getEdit7.commentsOnMediaBugFix,
       view: view,
       api: pluginInjectionApi,
       mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
       badgeOffsetRight: badgeOffsetRight,
       getPos: getPos,
       isDrafting: isCurrentNodeDrafting
-    }), jsx("div", {
+    })), jsx("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,

package/dist/es2019/toDOM-fixes/media.js

@@ -1,6 +1,23 @@
 import { media } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getMediaAttrs } from './toDOMAttrs';
+const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
+
+/**
+ * Duplicate consts from `media-card`.
+ * `packages/media/media-card/src/utils/cardDimensions.ts`
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `media-card` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+export const defaultImageCardDimensions = {
+  width: 156,
+  height: 125
+};
 
 // @nodeSpecException:toDOM patch
 export const mediaSpecWithFixedToDOM = () => {
@@ -11,7 +28,42 @@ export const mediaSpecWithFixedToDOM = () => {
     ...media,
     toDOM: node => {
       const attrs = getMediaAttrs('media', node);
-      return ['div', attrs];
+      const styles = skeletonStyling;
+      if (node.attrs.type === 'external') {
+        return ['img', {
+          ...attrs,
+          src: node.attrs.url,
+          styles
+        }];
+      }
+      if (node.attrs.type === 'file') {
+        const dataUrl = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        const width = defaultImageCardDimensions.width;
+        const height = defaultImageCardDimensions.height;
+        return ['div', {
+          width,
+          height,
+          ...attrs,
+          // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+          // rectangle that provides an affordance for media.
+          style: `
+						display: inline-block;
+						background-image: url("${dataUrl}");
+						margin-left: 0;
+						margin-right: 4px;
+						border-radius: ${skeletonStyling};
+
+						flex-basis: ${defaultImageCardDimensions.width}px;
+						background-color: var(--media-card-background-color, unset);
+						width: var(--media-card-width, 0);
+						height: var(--media-card-height, 0);
+						`
+        }];
+      }
+      return ['div', {
+        ...attrs,
+        styles
+      }];
     }
   };
 };