@atlaskit/editor-plugin-media 1.35.1 → 1.36.0

package/dist/es2019/toolbar/index.js

@@ -9,6 +9,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
@@ -31,7 +32,7 @@ import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
 const mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -67,7 +68,17 @@ export const generateFilePreviewItem = (mediaPluginState, intl) => {
     supportsViewMode: true
   };
 };
-const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
+export const handleShowMediaViewer = ({
+  api,
+  mediaPluginState
+}) => {
+  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  if (!selectedNodeAttrs) {
+    return false;
+  }
+  api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
+};
+const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
   if (isViewOnly) {
     return [];
   }
@@ -98,7 +109,19 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, generateFilePreviewItem(mediaPluginState, intl), {
+  }, fg('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    type: 'button',
+    icon: FilePreviewIcon,
+    title: intl.formatMessage(messages.preview),
+    onClick: () => {
+      var _handleShowMediaViewe;
+      return (_handleShowMediaViewe = handleShowMediaViewer({
+        mediaPluginState,
+        api: pluginInjectionApi
+      })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
+    }
+  } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -447,7 +470,19 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       const selectedMediaSingleNode = getSelectedMediaSingle(state);
       const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
       if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
-        toolbarButtons.push(generateFilePreviewItem(pluginState, intl), {
+        toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
+          id: 'editor.media.viewer',
+          type: 'button',
+          icon: FilePreviewIcon,
+          title: intl.formatMessage(messages.preview),
+          onClick: () => {
+            var _handleShowMediaViewe2;
+            return (_handleShowMediaViewe2 = handleShowMediaViewer({
+              api: pluginInjectionApi,
+              mediaPluginState: pluginState
+            })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
+          }
+        } : generateFilePreviewItem(pluginState, intl), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -572,7 +607,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       const selector = 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 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {

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 DownloadIcon from '@atlaskit/icon/glyph/download';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -18,7 +19,7 @@ import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
-import { generateFilePreviewItem } from './index';
+import { generateFilePreviewItem, handleShowMediaViewer } from './index';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
   var _pluginInjectionApi$a, _pluginInjectionApi$f, _pluginInjectionApi$f2;
   const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
@@ -221,7 +222,19 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
 
   //Image Preview
   if (options.allowImagePreview) {
-    inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
+    inlineImageItems.push(fg('platform_editor_media_previewer_bugfix') ? {
+      id: 'editor.media.viewer',
+      type: 'button',
+      icon: FilePreviewIcon,
+      title: intl.formatMessage(messages.preview),
+      onClick: () => {
+        var _handleShowMediaViewe;
+        return (_handleShowMediaViewe = handleShowMediaViewer({
+          mediaPluginState,
+          api: pluginInjectionApi
+        })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
+      }
+    } : generateFilePreviewItem(mediaPluginState, intl), {
       type: 'separator',
       supportsViewMode: true
     });

package/dist/esm/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 as _floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
+import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import ToolbarMedia from './ui/ToolbarMedia';
 import { insertMediaAsMediaSingle as _insertMediaAsMediaSingle } from './utils/media-single';
 var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
@@ -43,10 +45,29 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
     api: api
   });
 };
-export var 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 = 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.createElement(RenderMediaViewer, {
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    onClose: handleOnClose,
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+  });
+};
+export var mediaPlugin = function mediaPlugin(_ref3) {
+  var _ref3$config = _ref3.config,
+    options = _ref3$config === void 0 ? {} : _ref3$config,
+    api = _ref3.api;
   var previousMediaProvider;
   return {
     name: 'media',
@@ -68,22 +89,26 @@ export var 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(stateKey, {
             mediaProvider: provider
           });
         })) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       }
     },
+    commands: {
+      showMediaViewer: showMediaViewer,
+      hideMediaViewer: 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 = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = fg('platform.editor.media.extended-resize-experience') ? {
         withCaption: allowCaptions,
@@ -120,15 +145,15 @@ export var 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 createPlugin(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -147,17 +172,17 @@ export var 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 keymapPlugin(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 keymapMediaSinglePlugin(schema);
           }
         });
@@ -169,9 +194,9 @@ export var 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 keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
           }
         });
@@ -179,15 +204,15 @@ export var 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 linkingPlugin(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref10) {
-            var schema = _ref10.schema;
+          plugin: function plugin(_ref11) {
+            var schema = _ref11.schema;
             return keymapLinkingPlugin(schema);
           }
         });
@@ -223,19 +248,21 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        appearance = _ref11.appearance;
-      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+    contentComponent: function contentComponent(_ref12) {
+      var editorView = _ref12.editorView,
+        appearance = _ref12.appearance;
+      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: 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.createElement(ToolbarMedia, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -243,8 +270,8 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref13) {
-        var formatMessage = _ref13.formatMessage;
+      quickInsert: function quickInsert(_ref14) {
+        var formatMessage = _ref14.formatMessage;
         return editorExperiment('add-media-from-url', true) ? [] : [{
           id: 'media',
           title: formatMessage(messages.mediaFiles),

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

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

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

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

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

@@ -33,6 +33,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';
@@ -766,6 +767,19 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
           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/esm/toolbar/filePreviewItem.js

@@ -5,6 +5,7 @@ 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 var FilePreviewItem = function FilePreviewItem(_ref) {
   var mediaPluginState = _ref.mediaPluginState,
     intl = _ref.intl;
@@ -12,7 +13,7 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isMediaViewerVisible = _useState2[0],
     setMediaViewerVisible = _useState2[1];
-  var openMediaViewer = function openMediaViewer() {
+  var showMediaViewer = function showMediaViewer() {
     setMediaViewerVisible(true);
   };
   var onMediaViewerClose = function onMediaViewerClose() {
@@ -24,7 +25,7 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
   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"
     }),

package/dist/esm/toolbar/index.js

@@ -13,6 +13,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
@@ -35,7 +36,7 @@ import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
 var mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -71,7 +72,16 @@ export var generateFilePreviewItem = function generateFilePreviewItem(mediaPlugi
     supportsViewMode: true
   };
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
+export var handleShowMediaViewer = function handleShowMediaViewer(_ref) {
+  var api = _ref.api,
+    mediaPluginState = _ref.mediaPluginState;
+  var selectedNodeAttrs = 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 [];
   }
@@ -102,7 +112,19 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, generateFilePreviewItem(mediaPluginState, intl), {
+  }, fg('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    type: 'button',
+    icon: FilePreviewIcon,
+    title: intl.formatMessage(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',
@@ -157,8 +179,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 (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -333,10 +355,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 = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
               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);
             },
@@ -434,7 +456,19 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var _selectedMediaSingleNode = getSelectedMediaSingle(state);
       var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
       if (!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(fg('platform_editor_media_previewer_bugfix') ? {
+          id: 'editor.media.viewer',
+          type: 'button',
+          icon: FilePreviewIcon,
+          title: intl.formatMessage(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
         });
@@ -518,8 +552,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     isViewOnly = options.isViewOnly;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = 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;
   }
@@ -561,7 +595,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       var selector = 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 = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {

package/dist/esm/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 DownloadIcon from '@atlaskit/icon/glyph/download';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -18,7 +19,7 @@ import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
-import { generateFilePreviewItem } from './index';
+import { generateFilePreviewItem, handleShowMediaViewer } from './index';
 export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
   var _pluginInjectionApi$a, _pluginInjectionApi$f;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
@@ -217,7 +218,19 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
 
   //Image Preview
   if (options.allowImagePreview) {
-    inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
+    inlineImageItems.push(fg('platform_editor_media_previewer_bugfix') ? {
+      id: 'editor.media.viewer',
+      type: 'button',
+      icon: FilePreviewIcon,
+      title: intl.formatMessage(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',
       supportsViewMode: true
     });

package/dist/types/next-plugin-type.d.ts

@@ -1,5 +1,6 @@
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -47,4 +48,8 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
          */
         setProvider: (provider: Promise<MediaProvider>) => boolean;
     };
+    commands: {
+        showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
+        hideMediaViewer: EditorCommand;
+    };
 }>;

package/dist/types/pm-plugins/actions.d.ts

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

package/dist/types/pm-plugins/commands.d.ts

@@ -0,0 +1,4 @@
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
+export declare const hideMediaViewer: EditorCommand;

package/dist/types/pm-plugins/types.d.ts

@@ -1,4 +1,4 @@
-import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaADFAttrs, RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
@@ -69,5 +69,7 @@ export interface MediaPluginState {
     clone(): MediaPluginState;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
+    isMediaViewerVisible?: boolean;
+    mediaViewerSelectedMedia?: MediaADFAttrs;
 }
 export type EventInput = 'keyboard' | 'mouse' | 'floatingToolBar';

package/dist/types/toolbar/index.d.ts

@@ -5,4 +5,8 @@ import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaPluginState } from '../pm-plugins/types';
 import type { MediaFloatingToolbarOptions } from '../types';
 export declare const generateFilePreviewItem: (mediaPluginState: MediaPluginState, intl: IntlShape) => FloatingToolbarItem<Command>;
+export declare const handleShowMediaViewer: ({ api, mediaPluginState, }: {
+    api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    mediaPluginState: MediaPluginState;
+}) => false | undefined;
 export declare const floatingToolbar: (state: EditorState, intl: IntlShape, options: MediaFloatingToolbarOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarConfig | undefined;