@atlaskit/editor-plugin-media 1.39.3 → 1.40.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 1.40.0
+
+### Minor Changes
+
+- [#161860](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161860)
+  [`a147e2be38608`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a147e2be38608) -
+  [ux] ED-25319 Support forced media resize handle positions in media options
+- [#161860](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161860)
+  [`4b8000830cac4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b8000830cac4) -
+  [ux] ED-25319 support new forceHandlePositioning media option for chromeless editors
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.39.4
+
+### Patch Changes
+
+- [#160815](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160815)
+  [`40198d061572a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40198d061572a) -
+  migrate inline media preview icon
+
 ## 1.39.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -439,7 +439,8 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
         selected: isSelected,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
       }, mediaSingleProps);
       var canResize = !!this.props.mediaOptions.allowResizing && !editorDisabled && !editorViewMode;
       if (!this.props.mediaOptions.allowResizingInTables) {

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -544,7 +544,8 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     hasFallbackContainer: false,
     mediaSingleWidth: mediaSingleWidth,
     editorAppearance: editorAppearance,
-    showLegacyNotification: widthType !== 'pixel'
+    showLegacyNotification: widthType !== 'pixel',
+    forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
   }, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
     view: view,
     getPos: getPos,

package/dist/cjs/toolbar/mediaInline.js

@@ -12,6 +12,7 @@ var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _expand = _interopRequireDefault(require("@atlaskit/icon/core/expand"));
 var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
 var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
@@ -76,7 +77,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: _filePreview.default,
+    icon: _expand.default,
+    iconFallback: _filePreview.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -247,7 +249,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       id: 'editor.media.viewer',
       testId: 'file-preview-toolbar-button',
       type: 'button',
-      icon: _filePreview.default,
+      icon: _expand.default,
+      iconFallback: _filePreview.default,
       title: intl.formatMessage(_mediaUi.messages.preview),
       onClick: function onClick() {
         var _handleShowMediaViewe2;

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

@@ -69,7 +69,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         dynamicGuides = _generateDynamicGuide.dynamicGuides;
 
       // disable guidelines for nested media single node
-      var dynamicGuidelines = _this.isNestedNode() ? [] : dynamicGuides;
+      var dynamicGuidelines = _this.isAdjacentMode() ? [] : dynamicGuides;
       _this.setState({
         relativeGuides: relativeGuides,
         guidelines: [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines))
@@ -87,7 +87,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           return layout;
         }
       }
-      return _this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, _this.isNestedNode());
+      return _this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, _this.isAdjacentMode());
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
       if (isNestedNode) {
@@ -144,7 +144,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return dispatch(tr);
     }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
-      if (_this.isNestedNode() || fullWidthMode) {
+      if (_this.isAdjacentMode() || fullWidthMode) {
         return contentWidth;
       }
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth, _this.props.editorAppearance);
@@ -287,6 +287,21 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         updateSize(newWidth, newLayout);
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxWidth", function () {
+      var _this$props6 = _this.props,
+        lineLength = _this$props6.lineLength,
+        containerWidth = _this$props6.containerWidth,
+        fullWidthMode = _this$props6.fullWidthMode,
+        editorAppearance = _this$props6.editorAppearance,
+        forceHandlePositioning = _this$props6.forceHandlePositioning;
+      var isResizing = _this.state.isResizing;
+      if (editorAppearance === 'chromeless' && forceHandlePositioning === 'adjacent' && (0, _platformFeatureFlags.fg)('platform_editor_inline_resize_media_to_edge')) {
+        return containerWidth - _mediaSingle.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN * 2;
+      }
+      return !isResizing && _this.isAdjacentMode() ?
+      // set undefined to fall back to 100%
+      undefined : _this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+    });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
       isVideoFile: true,
@@ -377,9 +392,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "aspectRatio",
     get: function get() {
-      var _this$props6 = this.props,
-        width = _this$props6.width,
-        height = _this$props6.height;
+      var _this$props7 = this.props,
+        width = _this$props7.width,
+        height = _this$props7.height;
       if (width) {
         return width / height;
       }
@@ -421,16 +436,34 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var $pos = this.$pos;
       return !!($pos && $pos.depth !== 0);
     }
+
+    // Check if adjacement mode should be activated;
+  }, {
+    key: "isAdjacentMode",
+    value: function isAdjacentMode() {
+      var _this$isNestedNode;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_inline_resize_media_to_edge')) {
+        if (this.props.forceHandlePositioning === 'adjacent') {
+          return true;
+        }
+      }
+      return (_this$isNestedNode = this.isNestedNode()) !== null && _this$isNestedNode !== void 0 ? _this$isNestedNode : false;
+    }
+  }, {
+    key: "getHandlePositioning",
+    value: function getHandlePositioning() {
+      return this.isAdjacentMode() ? 'adjacent' : undefined;
+    }
   }, {
     key: "getDefaultGuidelines",
     value: function getDefaultGuidelines() {
-      var _this$props7 = this.props,
-        lineLength = _this$props7.lineLength,
-        containerWidth = _this$props7.containerWidth,
-        fullWidthMode = _this$props7.fullWidthMode;
+      var _this$props8 = this.props,
+        lineLength = _this$props8.lineLength,
+        containerWidth = _this$props8.containerWidth,
+        fullWidthMode = _this$props8.fullWidthMode;
 
       // disable guidelines for nested media single node
-      return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth || 0, fullWidthMode);
+      return this.isAdjacentMode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth || 0, fullWidthMode);
     }
   }, {
     key: "checkVideoFile",
@@ -482,15 +515,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        origWidth = _this$props8.width,
-        layout = _this$props8.layout,
-        containerWidth = _this$props8.containerWidth,
-        fullWidthMode = _this$props8.fullWidthMode,
-        selected = _this$props8.selected,
-        children = _this$props8.children,
-        lineLength = _this$props8.lineLength,
-        showLegacyNotification = _this$props8.showLegacyNotification;
+      var _this$props9 = this.props,
+        origWidth = _this$props9.width,
+        layout = _this$props9.layout,
+        containerWidth = _this$props9.containerWidth,
+        fullWidthMode = _this$props9.fullWidthMode,
+        selected = _this$props9.selected,
+        children = _this$props9.children,
+        lineLength = _this$props9.lineLength,
+        showLegacyNotification = _this$props9.showLegacyNotification;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size,
@@ -510,10 +543,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
-      var isNestedNode = this.isNestedNode();
-      var maxWidth = !isResizing && isNestedNode ?
-      // set undefined to fall back to 100%
-      undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var isNestedNode = this.isAdjacentMode();
+      var handlePositioning = this.getHandlePositioning();
+      var maxWidth = this.getMaxWidth();
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
 
       // while is not resizing, we take 100% as min-width if the container width is less than the min-width
@@ -544,7 +576,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
         "data-testid": resizerNextTestId,
         isHandleVisible: selected,
-        handlePositioning: isNestedNode ? 'adjacent' : undefined,
+        handlePositioning: handlePositioning,
         handleHighlight: "full-height"
       }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
     }
@@ -679,7 +711,8 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     pluginInjectionApi = props.pluginInjectionApi,
     updateSize = props.updateSize,
     view = props.view,
-    viewMediaClientConfig = props.viewMediaClientConfig;
+    viewMediaClientConfig = props.viewMediaClientConfig,
+    forceHandlePositioning = props.forceHandlePositioning;
   var initialWidth = (0, _react.useMemo)(function () {
     return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
   }, [mediaSingleWidth]);
@@ -725,6 +758,14 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     var $pos = view.state.doc.resolve(nodePosition);
     return !!($pos && $pos.depth !== 0);
   }, [nodePosition, view]);
+  var isAdjacentMode = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_inline_resize_media_to_edge')) {
+      if (forceHandlePositioning === 'adjacent') {
+        return true;
+      }
+    }
+    return isNestedNode;
+  }, [isNestedNode, forceHandlePositioning]);
   var maybeContainerWidth = containerWidth || origWidth;
   var memoizedCss = (0, _react.useMemo)(function () {
     return (0, _styled.wrapperStyle)({
@@ -732,22 +773,25 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       containerWidth: maybeContainerWidth,
       fullWidthMode: fullWidthMode,
       mediaSingleWidth: dimensions.width,
-      isNestedNode: isNestedNode,
+      isNestedNode: isAdjacentMode,
       isExtendedResizeExperienceOn: true
     });
-  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isNestedNode]);
+  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isAdjacentMode]);
   var maxWidth = (0, _react.useMemo)(function () {
-    if (!isResizing && isNestedNode) {
+    if (editorAppearance === 'chromeless' && forceHandlePositioning === 'adjacent' && (0, _platformFeatureFlags.fg)('platform_editor_inline_resize_media_to_edge')) {
+      return containerWidth - _mediaSingle.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN * 2;
+    }
+    if (!isResizing && isAdjacentMode) {
       return undefined;
     }
-    if (isNestedNode || fullWidthMode) {
+    if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
     return calcMaxWidth({
       containerWidth: containerWidth,
       editorAppearance: editorAppearance
     });
-  }, [isNestedNode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing]);
+  }, [isAdjacentMode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing, forceHandlePositioning]);
   var minWidth = calcMinWidth({
     isVideoFile: isVideoFile,
     contentWidth: lineLength
@@ -782,11 +826,11 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     }, {});
   }, [layout, isInsideInlineLike]);
   var defaultGuidelines = (0, _react.useMemo)(function () {
-    if (isNestedNode) {
+    if (isAdjacentMode) {
       return [];
     }
     return (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
-  }, [isNestedNode, lineLength, containerWidth, fullWidthMode]);
+  }, [isAdjacentMode, lineLength, containerWidth, fullWidthMode]);
   var relativeGuidesRef = (0, _react.useRef)({});
   var guidelinesRef = (0, _react.useRef)([]);
   var updateGuidelines = (0, _react.useCallback)(function () {
@@ -800,10 +844,10 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       dynamicGuides = _generateDynamicGuide2.dynamicGuides;
 
     // disable guidelines for nested media single node
-    var dynamicGuidelines = isNestedNode ? [] : dynamicGuides;
+    var dynamicGuidelines = isAdjacentMode ? [] : dynamicGuides;
     relativeGuidesRef.current = relativeGuides;
     guidelinesRef.current = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
-  }, [view, lineLength, defaultGuidelines, isNestedNode]);
+  }, [view, lineLength, defaultGuidelines, isAdjacentMode]);
   var isGuidelineEnabled = (0, _react.useMemo)(function () {
     return !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.guideline);
   }, [pluginInjectionApi]);
@@ -866,7 +910,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
         containerWidth: containerWidth,
         lineLength: lineLength,
         fullWidthMode: fullWidthMode,
-        isNestedNode: isNestedNode
+        isNestedNode: isAdjacentMode
       })(size, delta, false, aspectRatioRef.current),
       width = _calculateSizeState.width,
       height = _calculateSizeState.height,
@@ -890,7 +934,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     if (newLayout !== layout) {
       updateSize(width, newLayout);
     }
-  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isNestedNode, updateActiveGuidelines]);
+  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isAdjacentMode, updateActiveGuidelines]);
   var handleResizeStop = (0, _react.useCallback)(function (size, delta) {
     var _pluginInjectionApi$g3;
     if (typeof nodePosition !== 'number') {
@@ -901,7 +945,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
         containerWidth: containerWidth,
         lineLength: lineLength,
         fullWidthMode: fullWidthMode,
-        isNestedNode: isNestedNode
+        isNestedNode: isAdjacentMode
       })(size, delta, false, aspectRatioRef.current),
       width = _calculateSizeState2.width,
       height = _calculateSizeState2.height,
@@ -938,7 +982,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       height: height
     });
     updateSize(newWidth, newLayout);
-  }, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isNestedNode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
+  }, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isAdjacentMode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
   var mountedRef = _react.default.useRef(true);
   (0, _react.useLayoutEffect)(function () {
     mountedRef.current = true;
@@ -974,6 +1018,12 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       }
     });
   }, [view, viewMediaClientConfig, nodePosition]);
+  var handlePositioning = (0, _react.useMemo)(function () {
+    if (forceHandlePositioning) {
+      return forceHandlePositioning;
+    }
+    return isAdjacentMode ? 'adjacent' : undefined;
+  }, [forceHandlePositioning, isAdjacentMode]);
   return (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: memoizedCss
@@ -993,7 +1043,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
     isHandleVisible: selected,
-    handlePositioning: isNestedNode ? 'adjacent' : undefined,
+    handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
 };
@@ -1026,7 +1076,8 @@ var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
     updateSize = _ref9.updateSize,
     view = _ref9.view,
     viewMediaClientConfig = _ref9.viewMediaClientConfig,
-    width = _ref9.width;
+    width = _ref9.width,
+    forceHandlePositioning = _ref9.forceHandlePositioning;
   if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
     return (0, _react2.jsx)(ResizableMediaSingleNextFunctional, {
       allowBreakoutSnapPoints: allowBreakoutSnapPoints,
@@ -1059,7 +1110,8 @@ var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
       updateSize: updateSize,
       view: view,
       viewMediaClientConfig: viewMediaClientConfig,
-      width: width
+      width: width,
+      forceHandlePositioning: forceHandlePositioning
     });
   }
   return (0, _react2.jsx)(ResizableMediaSingleNext, {
@@ -1093,7 +1145,8 @@ var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
     updateSize: updateSize,
     view: view,
     viewMediaClientConfig: viewMediaClientConfig,
-    width: width
+    width: width,
+    forceHandlePositioning: forceHandlePositioning
   });
 };
 var _default = exports.default = ResizableMediaSingleToggle;

package/dist/es2019/nodeviews/mediaSingle.js

@@ -353,6 +353,7 @@ export default class MediaSingleNode extends Component {
       selected: isSelected,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       pluginInjectionApi: pluginInjectionApi,
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
       ...mediaSingleProps
     };
     let canResize = !!this.props.mediaOptions.allowResizing && !editorDisabled && !editorViewMode;

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -504,7 +504,8 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     hasFallbackContainer: false,
     mediaSingleWidth: mediaSingleWidth,
     editorAppearance: editorAppearance,
-    showLegacyNotification: widthType !== 'pixel'
+    showLegacyNotification: widthType !== 'pixel',
+    forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
   }, MediaChildren) : jsx(ResizableMediaSingle, {
     view: view,
     getPos: getPos,

package/dist/es2019/toolbar/mediaInline.js

@@ -4,6 +4,7 @@ import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import ExpandIcon from '@atlaskit/icon/core/expand';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
@@ -65,7 +66,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: FilePreviewIcon,
+    icon: ExpandIcon,
+    iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -241,7 +243,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       id: 'editor.media.viewer',
       testId: 'file-preview-toolbar-button',
       type: 'button',
-      icon: FilePreviewIcon,
+      icon: ExpandIcon,
+      iconFallback: FilePreviewIcon,
       title: intl.formatMessage(messages.preview),
       onClick: () => {
         var _handleShowMediaViewe2;