@atlaskit/editor-plugin-media 1.35.1 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media
 
+## 1.36.0
+
+### Minor Changes
+
+- [#151938](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151938)
+  [`91b5768ef0c7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91b5768ef0c7c) -
+  [ux] ED-25203 refactor image previewer outside of floating toolbar
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.35.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -21,6 +21,7 @@ var _lazyMediaInline = require("./nodeviews/lazy-media-inline");
 var _lazyMediaSingle = require("./nodeviews/lazy-media-single");
 var _altText = require("./pm-plugins/alt-text");
 var _keymap = _interopRequireDefault(require("./pm-plugins/alt-text/keymap"));
+var _commands = require("./pm-plugins/commands");
 var _keymap2 = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _keymapMedia = _interopRequireDefault(require("./pm-plugins/keymap-media"));
 var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
@@ -32,6 +33,7 @@ var _mediaInline = require("./toDOM-fixes/mediaInline");
 var _mediaSingle = require("./toDOM-fixes/mediaSingle");
 var _toolbar = require("./toolbar");
 var _MediaPicker = require("./ui/MediaPicker");
+var _PortalWrapper = require("./ui/MediaViewer/PortalWrapper");
 var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
 var _mediaSingle2 = require("./utils/media-single");
 var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
@@ -50,10 +52,29 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
     api: api
   });
 };
-var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
-  var _ref2$config = _ref2.config,
-    options = _ref2$config === void 0 ? {} : _ref2$config,
-    api = _ref2.api;
+var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
+  var api = _ref2.api;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
+
+  // Viewer does not have required attributes to render the media viewer
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaViewerSelectedMedia) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaClientConfig)) {
+    return null;
+  }
+  var handleOnClose = function handleOnClose() {
+    // Run Command to hide the media viewer
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideMediaViewer);
+  };
+  return /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    onClose: handleOnClose,
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+  });
+};
+var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
+  var _ref3$config = _ref3.config,
+    options = _ref3$config === void 0 ? {} : _ref3$config,
+    api = _ref3.api;
   var previousMediaProvider;
   return {
     name: 'media',
@@ -75,22 +96,26 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
           return false;
         }
         previousMediaProvider = provider;
-        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref3) {
-          var tr = _ref3.tr;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(_main.stateKey, {
             mediaProvider: provider
           });
         })) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       }
     },
+    commands: {
+      showMediaViewer: _commands.showMediaViewer,
+      hideMediaViewer: _commands.hideMediaViewer
+    },
     nodes: function nodes() {
-      var _ref4 = options || {},
-        _ref4$allowMediaGroup = _ref4.allowMediaGroup,
-        allowMediaGroup = _ref4$allowMediaGroup === void 0 ? true : _ref4$allowMediaGroup,
-        _ref4$allowMediaSingl = _ref4.allowMediaSingle,
-        allowMediaSingle = _ref4$allowMediaSingl === void 0 ? false : _ref4$allowMediaSingl,
-        allowCaptions = _ref4.allowCaptions,
-        mediaFeatureFlags = _ref4.featureFlags;
+      var _ref5 = options || {},
+        _ref5$allowMediaGroup = _ref5.allowMediaGroup,
+        allowMediaGroup = _ref5$allowMediaGroup === void 0 ? true : _ref5$allowMediaGroup,
+        _ref5$allowMediaSingl = _ref5.allowMediaSingle,
+        allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
+        allowCaptions = _ref5.allowCaptions,
+        mediaFeatureFlags = _ref5.featureFlags;
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? {
         withCaption: allowCaptions,
@@ -127,15 +152,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref5) {
-          var schema = _ref5.schema,
-            dispatch = _ref5.dispatch,
-            getIntl = _ref5.getIntl,
-            eventDispatcher = _ref5.eventDispatcher,
-            providerFactory = _ref5.providerFactory,
-            errorReporter = _ref5.errorReporter,
-            portalProviderAPI = _ref5.portalProviderAPI,
-            dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref6) {
+          var schema = _ref6.schema,
+            dispatch = _ref6.dispatch,
+            getIntl = _ref6.getIntl,
+            eventDispatcher = _ref6.eventDispatcher,
+            providerFactory = _ref6.providerFactory,
+            errorReporter = _ref6.errorReporter,
+            portalProviderAPI = _ref6.portalProviderAPI,
+            dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -154,17 +179,17 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin(_ref6) {
+        plugin: function plugin(_ref7) {
           var _api$analytics2, _api$selection;
-          var getIntl = _ref6.getIntl;
+          var getIntl = _ref7.getIntl;
           return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref7) {
-            var schema = _ref7.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return (0, _keymapMedia.default)(schema);
           }
         });
@@ -176,9 +201,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref8) {
+          plugin: function plugin(_ref9) {
             var _api$analytics3;
-            var schema = _ref8.schema;
+            var schema = _ref9.schema;
             return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
           }
         });
@@ -186,15 +211,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref9) {
-            var dispatch = _ref9.dispatch;
+          plugin: function plugin(_ref10) {
+            var dispatch = _ref10.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref10) {
-            var schema = _ref10.schema;
+          plugin: function plugin(_ref11) {
+            var schema = _ref11.schema;
             return (0, _keymap3.default)(schema);
           }
         });
@@ -230,19 +255,21 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        appearance = _ref11.appearance;
-      return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
+    contentComponent: function contentComponent(_ref12) {
+      var editorView = _ref12.editorView,
+        appearance = _ref12.appearance;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') && /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
+        api: api
+      }), /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,
         api: api
-      });
+      }));
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref12) {
-      var editorView = _ref12.editorView,
-        eventDispatcher = _ref12.eventDispatcher,
-        disabled = _ref12.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref13) {
+      var editorView = _ref13.editorView,
+        eventDispatcher = _ref13.eventDispatcher,
+        disabled = _ref13.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -250,8 +277,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref13) {
-        var formatMessage = _ref13.formatMessage;
+      quickInsert: function quickInsert(_ref14) {
+        var formatMessage = _ref14.formatMessage;
         return (0, _experiments.editorExperiment)('add-media-from-url', true) ? [] : [{
           id: 'media',
           title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),

package/dist/cjs/pm-plugins/actions.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTIONS = void 0;
+var ACTIONS = exports.ACTIONS = {
+  SHOW_MEDIA_VIEWER: 'SHOW_MEDIA_VIEWER',
+  HIDE_MEDIA_VIEWER: 'HIDE_MEDIA_VIEWER'
+};

package/dist/cjs/pm-plugins/commands.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showMediaViewer = exports.hideMediaViewer = void 0;
+var _actions = require("../pm-plugins/actions");
+var _pluginKey = require("../pm-plugins/plugin-key");
+var showMediaViewer = exports.showMediaViewer = function showMediaViewer(media) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    tr.setMeta(_pluginKey.stateKey, {
+      type: _actions.ACTIONS.SHOW_MEDIA_VIEWER,
+      mediaViewerSelectedMedia: media,
+      isMediaViewerVisible: true
+    });
+    return tr;
+  };
+};
+var hideMediaViewer = exports.hideMediaViewer = function hideMediaViewer(_ref2) {
+  var tr = _ref2.tr;
+  tr.setMeta(_pluginKey.stateKey, {
+    type: _actions.ACTIONS.HIDE_MEDIA_VIEWER,
+    mediaViewerSelectedMedia: null,
+    isMediaViewerVisible: false
+  });
+  return tr;
+};

package/dist/cjs/pm-plugins/main.js

@@ -42,6 +42,7 @@ var _mediaCommon2 = require("../utils/media-common");
 var _mediaFiles = require("../utils/media-files");
 var _mediaInline2 = require("../utils/media-inline");
 var _mediaSingle2 = require("../utils/media-single");
+var _actions = require("./actions");
 var _mediaTaskManager = require("./mediaTaskManager");
 var _pluginKey = require("./plugin-key");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -781,6 +782,19 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           nextPluginState = nextPluginState.clone();
         }
 
+        // ACTIONS
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case _actions.ACTIONS.SHOW_MEDIA_VIEWER:
+            pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
+            pluginState.isMediaViewerVisible = true;
+            nextPluginState = nextPluginState.clone();
+            break;
+          case _actions.ACTIONS.HIDE_MEDIA_VIEWER:
+            pluginState.mediaViewerSelectedMedia = undefined;
+            nextPluginState = nextPluginState.clone();
+            break;
+        }
+
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference
         //       throughout the lifetime of view. We injected the view into the plugin state, because we dispatch()
         //       transformations from within the plugin state (i.e. when adding a new file).

package/dist/cjs/toolbar/filePreviewItem.js

@@ -15,6 +15,7 @@ var _PortalWrapper = require("../ui/MediaViewer/PortalWrapper");
 var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// This function will eventially be removed when platform_editor_media_previewer_bugfix is cleaned up
 var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
   var mediaPluginState = _ref.mediaPluginState,
     intl = _ref.intl;
@@ -22,7 +23,7 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMediaViewerVisible = _useState2[0],
     setMediaViewerVisible = _useState2[1];
-  var openMediaViewer = function openMediaViewer() {
+  var showMediaViewer = function showMediaViewer() {
     setMediaViewerVisible(true);
   };
   var onMediaViewerClose = function onMediaViewerClose() {
@@ -34,7 +35,7 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
-    onClick: openMediaViewer,
+    onClick: showMediaViewer,
     icon: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
       label: "file preview"
     }),

package/dist/cjs/toolbar/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateFilePreviewItem = exports.floatingToolbar = void 0;
+exports.handleShowMediaViewer = exports.generateFilePreviewItem = exports.floatingToolbar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -19,6 +19,7 @@ var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+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");
 var _mediaUi = require("@atlaskit/media-ui");
@@ -81,7 +82,16 @@ var generateFilePreviewItem = exports.generateFilePreviewItem = function generat
     supportsViewMode: true
   };
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
+var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowMediaViewer(_ref) {
+  var api = _ref.api,
+    mediaPluginState = _ref.mediaPluginState;
+  var selectedNodeAttrs = (0, _utils2.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
+  if (!selectedNodeAttrs) {
+    return false;
+  }
+  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
+};
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   if (isViewOnly) {
     return [];
   }
@@ -112,7 +122,19 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, generateFilePreviewItem(mediaPluginState, intl), {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    type: 'button',
+    icon: _filePreview.default,
+    title: intl.formatMessage(_mediaUi.messages.preview),
+    onClick: function onClick() {
+      var _handleShowMediaViewe;
+      return (_handleShowMediaViewe = handleShowMediaViewer({
+        mediaPluginState: mediaPluginState,
+        api: pluginInjectionApi
+      })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
+    }
+  } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -167,8 +189,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     isViewOnly = options.isViewOnly;
   var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
-  var _ref = (_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 = _ref.hoverDecoration;
+  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;
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -343,10 +365,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
               }
             },
-            onSubmit: function onSubmit(_ref2) {
+            onSubmit: function onSubmit(_ref3) {
               var _pluginInjectionApi$a5;
-              var width = _ref2.width,
-                validation = _ref2.validation;
+              var width = _ref3.width,
+                validation = _ref3.validation;
               var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
               (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
@@ -444,7 +466,19 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
       var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
       if (!(0, _mediaSingle2.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
-        toolbarButtons.push(generateFilePreviewItem(pluginState, intl), {
+        toolbarButtons.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
+          id: 'editor.media.viewer',
+          type: 'button',
+          icon: _filePreview.default,
+          title: intl.formatMessage(_mediaUi.messages.preview),
+          onClick: function onClick() {
+            var _handleShowMediaViewe2;
+            return (_handleShowMediaViewe2 = handleShowMediaViewer({
+              api: pluginInjectionApi,
+              mediaPluginState: pluginState
+            })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
+          }
+        } : generateFilePreviewItem(pluginState, intl), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -528,8 +562,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     isViewOnly = options.isViewOnly;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
-    hoverDecoration = _ref3.hoverDecoration;
+  var _ref4 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
+    hoverDecoration = _ref4.hoverDecoration;
   if (!mediaPluginState) {
     return;
   }
@@ -571,7 +605,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {

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 _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -227,7 +228,19 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
 
   //Image Preview
   if (options.allowImagePreview) {
-    inlineImageItems.push((0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
+    inlineImageItems.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
+      id: 'editor.media.viewer',
+      type: 'button',
+      icon: _filePreview.default,
+      title: intl.formatMessage(_mediaUi.messages.preview),
+      onClick: function onClick() {
+        var _handleShowMediaViewe;
+        return (_handleShowMediaViewe = (0, _index.handleShowMediaViewer)({
+          mediaPluginState: mediaPluginState,
+          api: pluginInjectionApi
+        })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
+      }
+    } : (0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
       type: 'separator',
       supportsViewMode: true
     });

package/dist/es2019/plugin.js

@@ -14,6 +14,7 @@ import { lazyMediaInlineView } from './nodeviews/lazy-media-inline';
 import { lazyMediaSingleView } from './nodeviews/lazy-media-single';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
+import { hideMediaViewer, showMediaViewer } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -25,6 +26,7 @@ import { mediaInlineSpecWithFixedToDOM } from './toDOM-fixes/mediaInline';
 import { mediaSingleSpecWithFixedToDOM } from './toDOM-fixes/mediaSingle';
 import { floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
+import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import ToolbarMedia from './ui/ToolbarMedia';
 import { insertMediaAsMediaSingle } from './utils/media-single';
 const MediaPickerFunctionalComponent = ({
@@ -45,6 +47,27 @@ const MediaPickerFunctionalComponent = ({
     api: api
   });
 };
+const MediaViewerFunctionalComponent = ({
+  api
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+
+  // Viewer does not have required attributes to render the media viewer
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaViewerSelectedMedia) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaClientConfig)) {
+    return null;
+  }
+  const handleOnClose = () => {
+    // Run Command to hide the media viewer
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideMediaViewer);
+  };
+  return /*#__PURE__*/React.createElement(RenderMediaViewer, {
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    onClose: handleOnClose,
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+  });
+};
 export const mediaPlugin = ({
   config: options = {},
   api
@@ -77,6 +100,10 @@ export const mediaPlugin = ({
         }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       }
     },
+    commands: {
+      showMediaViewer,
+      hideMediaViewer
+    },
     nodes() {
       const {
         allowMediaGroup = true,
@@ -232,11 +259,13 @@ export const mediaPlugin = ({
       editorView,
       appearance
     }) {
-      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_media_previewer_bugfix') && /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
+        api: api
+      }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,
         api: api
-      });
+      }));
     },
     secondaryToolbarComponent({
       editorView,

package/dist/es2019/pm-plugins/actions.js

@@ -0,0 +1,4 @@
+export const ACTIONS = {
+  SHOW_MEDIA_VIEWER: 'SHOW_MEDIA_VIEWER',
+  HIDE_MEDIA_VIEWER: 'HIDE_MEDIA_VIEWER'
+};

package/dist/es2019/pm-plugins/commands.js

@@ -0,0 +1,22 @@
+import { ACTIONS } from '../pm-plugins/actions';
+import { stateKey } from '../pm-plugins/plugin-key';
+export const showMediaViewer = media => ({
+  tr
+}) => {
+  tr.setMeta(stateKey, {
+    type: ACTIONS.SHOW_MEDIA_VIEWER,
+    mediaViewerSelectedMedia: media,
+    isMediaViewerVisible: true
+  });
+  return tr;
+};
+export const hideMediaViewer = ({
+  tr
+}) => {
+  tr.setMeta(stateKey, {
+    type: ACTIONS.HIDE_MEDIA_VIEWER,
+    mediaViewerSelectedMedia: null,
+    isMediaViewerVisible: false
+  });
+  return tr;
+};

package/dist/es2019/pm-plugins/main.js

@@ -24,6 +24,7 @@ import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
 import { insertMediaGroupNode, insertMediaInlineNode } from '../utils/media-files';
 import { getMediaNodeInsertionType } from '../utils/media-inline';
 import { insertMediaSingleNode } from '../utils/media-single';
+import { ACTIONS } from './actions';
 import { MediaTaskManager } from './mediaTaskManager';
 import { stateKey } from './plugin-key';
 export { stateKey } from './plugin-key';
@@ -668,6 +669,19 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, disp
           nextPluginState = nextPluginState.clone();
         }
 
+        // ACTIONS
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case ACTIONS.SHOW_MEDIA_VIEWER:
+            pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
+            pluginState.isMediaViewerVisible = true;
+            nextPluginState = nextPluginState.clone();
+            break;
+          case ACTIONS.HIDE_MEDIA_VIEWER:
+            pluginState.mediaViewerSelectedMedia = undefined;
+            nextPluginState = nextPluginState.clone();
+            break;
+        }
+
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference
         //       throughout the lifetime of view. We injected the view into the plugin state, because we dispatch()
         //       transformations from within the plugin state (i.e. when adding a new file).

package/dist/es2019/toolbar/filePreviewItem.js

@@ -4,12 +4,13 @@ import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
 import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
+// This function will eventially be removed when platform_editor_media_previewer_bugfix is cleaned up
 export const FilePreviewItem = ({
   mediaPluginState,
   intl
 }) => {
   const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
-  const openMediaViewer = () => {
+  const showMediaViewer = () => {
     setMediaViewerVisible(true);
   };
   const onMediaViewerClose = () => {
@@ -21,7 +22,7 @@ export const FilePreviewItem = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
-    onClick: openMediaViewer,
+    onClick: showMediaViewer,
     icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
       label: "file preview"
     }),