@atlaskit/editor-plugin-media 1.38.6 → 1.39.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 1.39.0
+
+### Minor Changes
+
+- [#158723](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158723)
+  [`8ff5b01b0d37f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ff5b01b0d37f) -
+  [ED-24682] Cleanup feature flag for commenting on media in the renderer
+
+  **@atlaskit/editor-plugin-media**: Add optional checks for the api in Comment Badges on media
+
+### Patch Changes
+
+- [`ccf61c525278a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ccf61c525278a) -
+  fix floating toolbar spacing and legacy icon issues
+- Updated dependencies
+
 ## 1.38.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -353,7 +353,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild;
+      var _pluginInjectionApi$m, _node$firstChild;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -370,13 +370,10 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         editorDisabled = _this$props2.editorDisabled,
         annotationPluginState = _this$props2.annotationPluginState,
         editorAppearance = _this$props2.editorAppearance;
-      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
-        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
-        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
-      var _ref5 = node.attrs,
-        layout = _ref5.layout,
-        widthType = _ref5.widthType,
-        mediaSingleWidthAttribute = _ref5.width;
+      var _ref4 = node.attrs,
+        layout = _ref4.layout,
+        widthType = _ref4.widthType,
+        mediaSingleWidthAttribute = _ref4.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -490,11 +487,11 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         mediaHeight: height,
         mediaWidth: width,
         extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') && !isInsideTable
-      }, function (_ref6) {
-        var badgeSize = _ref6.badgeSize;
+      }, function (_ref5) {
+        var badgeSize = _ref5.badgeSize;
         return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
           badgeSize: badgeSize
-        }), commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
+        }), mediaOptions.allowCommentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
           view: view,
           api: pluginInjectionApi,
           mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
@@ -502,7 +499,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
           isDrafting: isCurrentNodeDrafting,
           badgeSize: badgeSize
         }));
-      }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+      }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
@@ -541,19 +538,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
-  var pluginInjectionApi = _ref7.pluginInjectionApi,
-    contextIdentifierProvider = _ref7.contextIdentifierProvider,
-    node = _ref7.node,
-    getPos = _ref7.getPos,
-    mediaOptions = _ref7.mediaOptions,
-    view = _ref7.view,
-    fullWidthMode = _ref7.fullWidthMode,
-    selected = _ref7.selected,
-    eventDispatcher = _ref7.eventDispatcher,
-    dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
-    forwardRef = _ref7.forwardRef,
-    editorAppearance = _ref7.editorAppearance;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef,
+    editorAppearance = _ref6.editorAppearance;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -735,8 +732,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref8) {
-          var contextIdentifierProvider = _ref8.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -287,7 +287,7 @@ var useUpdateSizeCallback = function useUpdateSizeCallback(_ref5) {
  */
 var FALLBACK_MOST_COMMON_WIDTH = 760;
 var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNextProps) {
-  var _mediaOptions$getEdit, _pluginInjectionApi$m, _mediaNode$firstChild2;
+  var _pluginInjectionApi$m, _mediaNode$firstChild2;
   var selected = mediaSingleNodeNextProps.selected,
     getPos = mediaSingleNodeNextProps.getPos,
     nextMediaNode = mediaSingleNodeNextProps.node,
@@ -306,9 +306,6 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     forwardRef = mediaSingleNodeNextProps.forwardRef,
     contextIdentifierProviderPromise = mediaSingleNodeNextProps.contextIdentifierProvider,
     mediaPluginState = mediaSingleNodeNextProps.mediaPluginState;
-  var _ref6 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
-    _ref6$commentsOnMedia = _ref6.commentsOnMedia,
-    commentsOnMedia = _ref6$commentsOnMedia === void 0 ? false : _ref6$commentsOnMedia;
   var _React$useState3 = _react.default.useState(null),
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     mediaProvider = _React$useState4[0],
@@ -382,10 +379,10 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
       }
     }
   }, [mediaNode]);
-  var _ref7 = mediaNode.attrs,
-    layout = _ref7.layout,
-    widthType = _ref7.widthType,
-    mediaSingleWidthAttribute = _ref7.width;
+  var _ref6 = mediaNode.attrs,
+    layout = _ref6.layout,
+    widthType = _ref6.widthType,
+    mediaSingleWidthAttribute = _ref6.width;
   var childNode = mediaNode.firstChild;
   var childMediaNodeAttrs = _react.default.useMemo(function () {
     return (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
@@ -497,11 +494,11 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     mediaHeight: height,
     mediaWidth: width,
     extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') && !isInsideTable
-  }, function (_ref8) {
-    var badgeSize = _ref8.badgeSize;
+  }, function (_ref7) {
+    var badgeSize = _ref7.badgeSize;
     return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
       badgeSize: badgeSize
-    }), commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
+    }), mediaOptions.allowCommentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
       view: view,
       api: pluginInjectionApi,
       mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
@@ -509,7 +506,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
       isDrafting: isCurrentNodeDrafting,
       badgeSize: badgeSize
     }));
-  }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+  }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
     view: view,
     api: pluginInjectionApi,
     mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,

package/dist/cjs/plugin.js

@@ -339,7 +339,6 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          getEditorFeatureFlags: options && options.getEditorFeatureFlags,
           isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view'
         }, api);
       }

package/dist/cjs/toolbar/comments.js

@@ -33,7 +33,7 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        _analytics.INPUT_METHOD.FLOATING_TB, 'block', true, (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        _analytics.INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
       }
     }
     return true;

package/dist/cjs/toolbar/index.js

@@ -23,6 +23,7 @@ var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image
 var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
 var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
+var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -103,7 +104,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   var items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: _card.IconInline,
+    icon: _imageInline.default,
+    iconFallback: _card.IconInline,
     selected: false,
     focusEditoronEnter: true,
     disabled: false,
@@ -114,7 +116,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: _card.IconCard,
+    icon: _smartLinkCard.default,
+    iconFallback: _card.IconCard,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -193,9 +196,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
     allowImagePreview = options.allowImagePreview,
-    getEditorFeatureFlags = options.getEditorFeatureFlags,
     isViewOnly = options.isViewOnly;
-  var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -424,7 +425,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'separator'
       });
     }
-    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia) {
+    if (allowCommentsOnMedia) {
       toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi), {
         type: 'separator',
         supportsViewMode: true
@@ -529,7 +530,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: _remove.default,
+    icon: _delete.default,
+    iconFallback: _remove.default,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),

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

@@ -106,7 +106,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       }),
       icon: (0, _react2.jsx)(_link.default, {
         color: "currentColor",
-        label: _title
+        label: _title,
+        spacing: "spacious"
       })
     }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;
   }

package/dist/es2019/nodeviews/mediaSingle.js

@@ -257,7 +257,7 @@ export default class MediaSingleNode extends Component {
     }
   }
   render() {
-    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild;
+    var _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild;
     const {
       selected,
       getPos,
@@ -277,9 +277,6 @@ export default class MediaSingleNode extends Component {
       annotationPluginState,
       editorAppearance
     } = this.props;
-    const {
-      commentsOnMedia = false
-    } = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
     const {
       layout,
       widthType,
@@ -412,14 +409,14 @@ export default class MediaSingleNode extends Component {
       badgeSize
     }) => jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
       badgeSize: badgeSize
-    }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+    }), mediaOptions.allowCommentsOnMedia && jsx(CommentBadgeNextWrapper, {
       view: view,
       api: pluginInjectionApi,
       mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
       getPos: getPos,
       isDrafting: isCurrentNodeDrafting,
       badgeSize: badgeSize
-    }))), !editorExperiment('add-media-from-url', true) && commentsOnMedia && jsx(CommentBadge, {
+    }))), !editorExperiment('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && jsx(CommentBadge, {
       view: view,
       api: pluginInjectionApi,
       mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -247,7 +247,7 @@ const useUpdateSizeCallback = ({
  */
 const FALLBACK_MOST_COMMON_WIDTH = 760;
 export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
-  var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _mediaNode$firstChild2;
+  var _pluginInjectionApi$m, _pluginInjectionApi$m2, _mediaNode$firstChild2;
   const {
     selected,
     getPos,
@@ -268,9 +268,6 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     contextIdentifierProvider: contextIdentifierProviderPromise,
     mediaPluginState
   } = mediaSingleNodeNextProps;
-  const {
-    commentsOnMedia = false
-  } = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
   const [mediaProvider, setMediaProvider] = React.useState(null);
   const [_contextIdentifierProvider, setContextIdentifierProvider] = React.useState(null);
   const [viewMediaClientConfig, setViewMediaClientConfig] = React.useState();
@@ -462,14 +459,14 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     badgeSize
   }) => jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
     badgeSize: badgeSize
-  }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+  }), mediaOptions.allowCommentsOnMedia && jsx(CommentBadgeNextWrapper, {
     view: view,
     api: pluginInjectionApi,
     mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
     getPos: getPos,
     isDrafting: isCurrentNodeDrafting,
     badgeSize: badgeSize
-  }))), !editorExperiment('add-media-from-url', true) && commentsOnMedia && jsx(CommentBadge, {
+  }))), !editorExperiment('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && jsx(CommentBadge, {
     view: view,
     api: pluginInjectionApi,
     mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,

package/dist/es2019/plugin.js

@@ -335,7 +335,6 @@ export const mediaPlugin = ({
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          getEditorFeatureFlags: options && options.getEditorFeatureFlags,
           isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view'
         }, api);
       }

package/dist/es2019/toolbar/comments.js

@@ -25,7 +25,7 @@ export const commentButton = (intl, state, api) => {
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        INPUT_METHOD.FLOATING_TB, 'block', true, (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
       }
     }
     return true;

package/dist/es2019/toolbar/index.js

@@ -13,6 +13,7 @@ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -92,7 +93,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
   const items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: IconInline,
+    icon: ImageInlineIcon,
+    iconFallback: IconInline,
     selected: false,
     focusEditoronEnter: true,
     disabled: false,
@@ -103,7 +105,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: IconCard,
+    icon: SmartLinkCardIcon,
+    iconFallback: IconCard,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -183,10 +186,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowMediaInline,
     allowMediaInlineImages,
     allowImagePreview,
-    getEditorFeatureFlags,
     isViewOnly
   } = options;
-  const editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   let toolbarButtons = [];
   const {
     hoverDecoration
@@ -422,7 +423,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'separator'
       });
     }
-    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia) {
+    if (allowCommentsOnMedia) {
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
         type: 'separator',
         supportsViewMode: true
@@ -533,7 +534,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),

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

@@ -92,7 +92,8 @@ export const LinkToolbarAppearance = ({
       }),
       icon: jsx(LinkIcon, {
         color: "currentColor",
-        label: title
+        label: title,
+        spacing: "spacious"
       })
     }), jsx(Separator, null)) : null;
   }

package/dist/esm/nodeviews/mediaSingle.js

@@ -347,7 +347,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild;
+      var _pluginInjectionApi$m, _node$firstChild;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -364,13 +364,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         editorDisabled = _this$props2.editorDisabled,
         annotationPluginState = _this$props2.annotationPluginState,
         editorAppearance = _this$props2.editorAppearance;
-      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
-        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
-        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
-      var _ref5 = node.attrs,
-        layout = _ref5.layout,
-        widthType = _ref5.widthType,
-        mediaSingleWidthAttribute = _ref5.width;
+      var _ref4 = node.attrs,
+        layout = _ref4.layout,
+        widthType = _ref4.widthType,
+        mediaSingleWidthAttribute = _ref4.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -484,11 +481,11 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         mediaHeight: height,
         mediaWidth: width,
         extendedResizeOffset: fg('platform.editor.media.extended-resize-experience') && !isInsideTable
-      }, function (_ref6) {
-        var badgeSize = _ref6.badgeSize;
+      }, function (_ref5) {
+        var badgeSize = _ref5.badgeSize;
         return jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
           badgeSize: badgeSize
-        }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+        }), mediaOptions.allowCommentsOnMedia && jsx(CommentBadgeNextWrapper, {
           view: view,
           api: pluginInjectionApi,
           mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
@@ -496,7 +493,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           isDrafting: isCurrentNodeDrafting,
           badgeSize: badgeSize
         }));
-      }), !editorExperiment('add-media-from-url', true) && commentsOnMedia && jsx(CommentBadge, {
+      }), !editorExperiment('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && jsx(CommentBadge, {
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
@@ -536,19 +533,19 @@ _defineProperty(MediaSingleNode, "defaultProps", {
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
 export { MediaSingleNode as default };
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
-  var pluginInjectionApi = _ref7.pluginInjectionApi,
-    contextIdentifierProvider = _ref7.contextIdentifierProvider,
-    node = _ref7.node,
-    getPos = _ref7.getPos,
-    mediaOptions = _ref7.mediaOptions,
-    view = _ref7.view,
-    fullWidthMode = _ref7.fullWidthMode,
-    selected = _ref7.selected,
-    eventDispatcher = _ref7.eventDispatcher,
-    dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
-    forwardRef = _ref7.forwardRef,
-    editorAppearance = _ref7.editorAppearance;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef,
+    editorAppearance = _ref6.editorAppearance;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -730,8 +727,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return jsx(WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref8) {
-          var contextIdentifierProvider = _ref8.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -280,7 +280,7 @@ var useUpdateSizeCallback = function useUpdateSizeCallback(_ref5) {
  */
 var FALLBACK_MOST_COMMON_WIDTH = 760;
 export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNextProps) {
-  var _mediaOptions$getEdit, _pluginInjectionApi$m, _mediaNode$firstChild2;
+  var _pluginInjectionApi$m, _mediaNode$firstChild2;
   var selected = mediaSingleNodeNextProps.selected,
     getPos = mediaSingleNodeNextProps.getPos,
     nextMediaNode = mediaSingleNodeNextProps.node,
@@ -299,9 +299,6 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     forwardRef = mediaSingleNodeNextProps.forwardRef,
     contextIdentifierProviderPromise = mediaSingleNodeNextProps.contextIdentifierProvider,
     mediaPluginState = mediaSingleNodeNextProps.mediaPluginState;
-  var _ref6 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
-    _ref6$commentsOnMedia = _ref6.commentsOnMedia,
-    commentsOnMedia = _ref6$commentsOnMedia === void 0 ? false : _ref6$commentsOnMedia;
   var _React$useState3 = React.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     mediaProvider = _React$useState4[0],
@@ -375,10 +372,10 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
       }
     }
   }, [mediaNode]);
-  var _ref7 = mediaNode.attrs,
-    layout = _ref7.layout,
-    widthType = _ref7.widthType,
-    mediaSingleWidthAttribute = _ref7.width;
+  var _ref6 = mediaNode.attrs,
+    layout = _ref6.layout,
+    widthType = _ref6.widthType,
+    mediaSingleWidthAttribute = _ref6.width;
   var childNode = mediaNode.firstChild;
   var childMediaNodeAttrs = React.useMemo(function () {
     return (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
@@ -490,11 +487,11 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     mediaHeight: height,
     mediaWidth: width,
     extendedResizeOffset: fg('platform.editor.media.extended-resize-experience') && !isInsideTable
-  }, function (_ref8) {
-    var badgeSize = _ref8.badgeSize;
+  }, function (_ref7) {
+    var badgeSize = _ref7.badgeSize;
     return jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
       badgeSize: badgeSize
-    }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+    }), mediaOptions.allowCommentsOnMedia && jsx(CommentBadgeNextWrapper, {
       view: view,
       api: pluginInjectionApi,
       mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
@@ -502,7 +499,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
       isDrafting: isCurrentNodeDrafting,
       badgeSize: badgeSize
     }));
-  }), !editorExperiment('add-media-from-url', true) && commentsOnMedia && jsx(CommentBadge, {
+  }), !editorExperiment('add-media-from-url', true) && mediaOptions.allowCommentsOnMedia && jsx(CommentBadge, {
     view: view,
     api: pluginInjectionApi,
     mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,

package/dist/esm/plugin.js

@@ -329,7 +329,6 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          getEditorFeatureFlags: options && options.getEditorFeatureFlags,
           isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view'
         }, api);
       }

package/dist/esm/toolbar/comments.js

@@ -26,7 +26,7 @@ export var commentButton = function commentButton(intl, state, api) {
         var _selectMediaNode$attr;
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
-        INPUT_METHOD.FLOATING_TB, 'block', true, (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
+        INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id)(state, dispatch);
       }
     }
     return true;

package/dist/esm/toolbar/index.js

@@ -17,6 +17,7 @@ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -93,7 +94,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   var items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: IconInline,
+    icon: ImageInlineIcon,
+    iconFallback: IconInline,
     selected: false,
     focusEditoronEnter: true,
     disabled: false,
@@ -104,7 +106,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: IconCard,
+    icon: SmartLinkCardIcon,
+    iconFallback: IconCard,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -183,9 +186,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
     allowImagePreview = options.allowImagePreview,
-    getEditorFeatureFlags = options.getEditorFeatureFlags,
     isViewOnly = options.isViewOnly;
-  var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -414,7 +415,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'separator'
       });
     }
-    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia) {
+    if (allowCommentsOnMedia) {
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
         type: 'separator',
         supportsViewMode: true
@@ -519,7 +520,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),

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

@@ -95,7 +95,8 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       }),
       icon: jsx(LinkIcon, {
         color: "currentColor",
-        label: _title
+        label: _title,
+        spacing: "spacious"
       })
     }), jsx(Separator, null)) : null;
   }

package/dist/types/types.d.ts

@@ -112,7 +112,6 @@ export type MediaFloatingToolbarOptions = {
     allowAltTextOnImages?: boolean;
     allowImagePreview?: boolean;
     altTextValidator?: (value: string) => string[];
-    getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
     isViewOnly?: boolean;

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

@@ -112,7 +112,6 @@ export type MediaFloatingToolbarOptions = {
     allowAltTextOnImages?: boolean;
     allowImagePreview?: boolean;
     altTextValidator?: (value: string) => string[];
-    getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
     isViewOnly?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.38.6",
+	"version": "1.39.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-common": "^94.9.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-annotation": "1.23.2",
+		"@atlaskit/editor-plugin-annotation": "1.23.3",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/media-card": "^78.10.0",
 		"@atlaskit/media-client": "^28.0.0",
-		"@atlaskit/media-client-react": "^2.2.0",
+		"@atlaskit/media-client-react": "^2.3.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-filmstrip": "^47.4.0",
 		"@atlaskit/media-picker": "^67.0.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.10.0",
+		"@atlaskit/tmp-editor-statsig": "^2.11.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",