@atlaskit/editor-plugin-media 1.36.3 → 1.36.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-media
 
+## 1.36.5
+
+### Patch Changes
+
+- [#154581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154581)
+  [`27d560bd2b6b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/27d560bd2b6b6) -
+  [ux] ED-25201 Enable double click to open media viewer in editor
+
+## 1.36.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.36.3
 
 ### Patch Changes

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

@@ -924,6 +924,24 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         }
         return false;
       },
+      handleDoubleClickOn: function handleDoubleClickOn(view) {
+        var _pluginInjectionApi$e;
+        if (!(0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') || !(0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') || (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view') {
+          return;
+        }
+
+        // Double Click support for Media Viewer Nodes
+        var maybeMediaNode = (0, _mediaCommon2.getMediaFromSupportedMediaNodesFromSelection)(view.state);
+        if (maybeMediaNode) {
+          // If media type is video, do not open media viewer
+          if ((0, _mediaSingle2.isVideo)(maybeMediaNode.attrs.__fileMimeType)) {
+            return false;
+          }
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.media.commands.showMediaViewer(maybeMediaNode.attrs));
+          return true;
+        }
+        return false;
+      },
       handleDOMEvents: {
         keydown: function keydown(view, event) {
           var selection = view.state.selection;

package/dist/cjs/toolbar/index.js

@@ -128,6 +128,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'separator'
   }, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: _maximize.default,
     iconFallback: _filePreview.default,
@@ -138,7 +139,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
         mediaPluginState: mediaPluginState,
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-    }
+    },
+    supportsViewMode: true
   } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
@@ -480,6 +482,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       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((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
+          testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: _maximize.default,
           iconFallback: _filePreview.default,
@@ -490,7 +493,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               api: pluginInjectionApi,
               mediaPluginState: pluginState
             })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
-          }
+          },
+          supportsViewMode: true
         } : generateFilePreviewItem(pluginState, intl), {
           type: 'separator',
           supportsViewMode: true

package/dist/cjs/toolbar/mediaInline.js

@@ -27,7 +27,6 @@ var _currentMediaNode = require("../utils/current-media-node");
 var _isType = require("../utils/is-type");
 var _altText = require("./alt-text");
 var _commands = require("./commands");
-var _filePreviewItem = require("./filePreviewItem");
 var _imageBorder = require("./imageBorder");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _utils = require("./utils");
@@ -73,17 +72,20 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
-        key: "editor.media.card.preview",
+  }, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
+    type: 'button',
+    icon: _filePreview.default,
+    title: intl.formatMessage(_mediaUi.messages.preview),
+    onClick: function onClick() {
+      var _handleShowMediaViewe;
+      return (_handleShowMediaViewe = (0, _index.handleShowMediaViewer)({
         mediaPluginState: mediaPluginState,
-        intl: intl
-      });
+        api: pluginInjectionApi
+      })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, {
+  } : (0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -243,16 +245,18 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   if (options.allowImagePreview) {
     inlineImageItems.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
       id: 'editor.media.viewer',
+      testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: _filePreview.default,
       title: intl.formatMessage(_mediaUi.messages.preview),
       onClick: function onClick() {
-        var _handleShowMediaViewe;
-        return (_handleShowMediaViewe = (0, _index.handleShowMediaViewer)({
+        var _handleShowMediaViewe2;
+        return (_handleShowMediaViewe2 = (0, _index.handleShowMediaViewer)({
           mediaPluginState: mediaPluginState,
           api: pluginInjectionApi
-        })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-      }
+        })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
+      },
+      supportsViewMode: true
     } : (0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
       type: 'separator',
       supportsViewMode: true

package/dist/cjs/utils/media-common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.splitMediaGroup = exports.removeMediaNode = exports.posOfPrecedingMediaGroup = exports.posOfParentMediaGroup = exports.posOfMediaGroupNearby = exports.isSelectionNonMediaBlockNode = exports.isSelectionMediaSingleNode = exports.isMediaSingleOrInlineNodeSelected = exports.isMediaBlobUrlFromAttrs = exports.isInsidePotentialEmptyParagraph = exports.getMediaSingleOrInlineNodeFromSelection = exports.getMediaNodeFromSelection = exports.copyOptionalAttrsFromMediaState = void 0;
+exports.splitMediaGroup = exports.removeMediaNode = exports.posOfPrecedingMediaGroup = exports.posOfParentMediaGroup = exports.posOfMediaGroupNearby = exports.isSelectionNonMediaBlockNode = exports.isSelectionMediaSingleNode = exports.isMediaSingleOrInlineNodeSelected = exports.isMediaBlobUrlFromAttrs = exports.isInsidePotentialEmptyParagraph = exports.getMediaSingleOrInlineNodeFromSelection = exports.getMediaNodeFromSelection = exports.getMediaFromSupportedMediaNodesFromSelection = exports.copyOptionalAttrsFromMediaState = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
@@ -204,4 +204,18 @@ var getMediaSingleOrInlineNodeFromSelection = exports.getMediaSingleOrInlineNode
     allowInlineImages = _getMediaPluginState2.allowInlineImages;
   var mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
   return mediaNode || null;
+};
+var getMediaFromSupportedMediaNodesFromSelection = exports.getMediaFromSupportedMediaNodesFromSelection = function getMediaFromSupportedMediaNodesFromSelection(state) {
+  var _ref4 = state.selection,
+    node = _ref4.node;
+  switch (node.type) {
+    case node.type.schema.nodes.media:
+    case node.type.schema.nodes.mediaInline:
+      return node;
+    case node.type.schema.nodes.mediaSingle:
+    case node.type.schema.nodes.mediaGroup:
+      return node.firstChild;
+    default:
+      return null;
+  }
 };

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

@@ -20,10 +20,10 @@ import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import PickerFacade from '../picker-facade';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { getMediaFromSupportedMediaNodesFromSelection, 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 { insertMediaSingleNode, isVideo } from '../utils/media-single';
 import { ACTIONS } from './actions';
 import { MediaTaskManager } from './mediaTaskManager';
 import { stateKey } from './plugin-key';
@@ -808,6 +808,24 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, disp
         }
         return false;
       },
+      handleDoubleClickOn: view => {
+        var _pluginInjectionApi$e, _pluginInjectionApi$e2;
+        if (!fg('platform_editor_media_previewer_bugfix') || !fg('platform_editor_media_interaction_improvements') || (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 ? void 0 : (_pluginInjectionApi$e2 = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) === 'view') {
+          return;
+        }
+
+        // Double Click support for Media Viewer Nodes
+        const maybeMediaNode = getMediaFromSupportedMediaNodesFromSelection(view.state);
+        if (maybeMediaNode) {
+          // If media type is video, do not open media viewer
+          if (isVideo(maybeMediaNode.attrs.__fileMimeType)) {
+            return false;
+          }
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.media.commands.showMediaViewer(maybeMediaNode.attrs));
+          return true;
+        }
+        return false;
+      },
       handleDOMEvents: {
         keydown: (view, event) => {
           const {

package/dist/es2019/toolbar/index.js

@@ -115,6 +115,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     type: 'separator'
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: MaximizeIcon,
     iconFallback: FilePreviewIcon,
@@ -125,7 +126,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
         mediaPluginState,
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-    }
+    },
+    supportsViewMode: true
   } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
@@ -484,6 +486,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       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(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
+          testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: MaximizeIcon,
           iconFallback: FilePreviewIcon,
@@ -494,7 +497,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               api: pluginInjectionApi,
               mediaPluginState: pluginState
             })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
-          }
+          },
+          supportsViewMode: true
         } : generateFilePreviewItem(pluginState, intl), {
           type: 'separator',
           supportsViewMode: true

package/dist/es2019/toolbar/mediaInline.js

@@ -19,7 +19,6 @@ import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node'
 import { isImage } from '../utils/is-type';
 import { altTextButton } from './alt-text';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
-import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
@@ -62,17 +61,20 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: () => {
-      return /*#__PURE__*/React.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
+  }, fg('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
+    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',
@@ -237,16 +239,18 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
   if (options.allowImagePreview) {
     inlineImageItems.push(fg('platform_editor_media_previewer_bugfix') ? {
       id: 'editor.media.viewer',
+      testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: FilePreviewIcon,
       title: intl.formatMessage(messages.preview),
       onClick: () => {
-        var _handleShowMediaViewe;
-        return (_handleShowMediaViewe = handleShowMediaViewer({
+        var _handleShowMediaViewe2;
+        return (_handleShowMediaViewe2 = handleShowMediaViewer({
           mediaPluginState,
           api: pluginInjectionApi
-        })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-      }
+        })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
+      },
+      supportsViewMode: true
     } : generateFilePreviewItem(mediaPluginState, intl), {
       type: 'separator',
       supportsViewMode: true

package/dist/es2019/utils/media-common.js

@@ -215,4 +215,19 @@ export const getMediaSingleOrInlineNodeFromSelection = state => {
   } = getMediaPluginState(state);
   const mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
   return mediaNode || null;
+};
+export const getMediaFromSupportedMediaNodesFromSelection = state => {
+  const {
+    node
+  } = state.selection;
+  switch (node.type) {
+    case node.type.schema.nodes.media:
+    case node.type.schema.nodes.mediaInline:
+      return node;
+    case node.type.schema.nodes.mediaSingle:
+    case node.type.schema.nodes.mediaGroup:
+      return node.firstChild;
+    default:
+      return null;
+  }
 };

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

@@ -29,10 +29,10 @@ import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import PickerFacade from '../picker-facade';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { getMediaFromSupportedMediaNodesFromSelection, 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 { insertMediaSingleNode, isVideo } from '../utils/media-single';
 import { ACTIONS } from './actions';
 import { MediaTaskManager } from './mediaTaskManager';
 import { stateKey } from './plugin-key';
@@ -909,6 +909,24 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         }
         return false;
       },
+      handleDoubleClickOn: function handleDoubleClickOn(view) {
+        var _pluginInjectionApi$e;
+        if (!fg('platform_editor_media_previewer_bugfix') || !fg('platform_editor_media_interaction_improvements') || (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view') {
+          return;
+        }
+
+        // Double Click support for Media Viewer Nodes
+        var maybeMediaNode = getMediaFromSupportedMediaNodesFromSelection(view.state);
+        if (maybeMediaNode) {
+          // If media type is video, do not open media viewer
+          if (isVideo(maybeMediaNode.attrs.__fileMimeType)) {
+            return false;
+          }
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.media.commands.showMediaViewer(maybeMediaNode.attrs));
+          return true;
+        }
+        return false;
+      },
       handleDOMEvents: {
         keydown: function keydown(view, event) {
           var selection = view.state.selection;

package/dist/esm/toolbar/index.js

@@ -118,6 +118,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'separator'
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: MaximizeIcon,
     iconFallback: FilePreviewIcon,
@@ -128,7 +129,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
         mediaPluginState: mediaPluginState,
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-    }
+    },
+    supportsViewMode: true
   } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
@@ -470,6 +472,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
         toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
+          testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: MaximizeIcon,
           iconFallback: FilePreviewIcon,
@@ -480,7 +483,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               api: pluginInjectionApi,
               mediaPluginState: pluginState
             })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
-          }
+          },
+          supportsViewMode: true
         } : generateFilePreviewItem(pluginState, intl), {
           type: 'separator',
           supportsViewMode: true

package/dist/esm/toolbar/mediaInline.js

@@ -19,7 +19,6 @@ import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node'
 import { isImage } from '../utils/is-type';
 import { altTextButton } from './alt-text';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
-import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
@@ -63,17 +62,20 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     className: 'thumbnail-appearance' // a11y. uses to force focus on item
   }, {
     type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/React.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
+  }, fg('platform_editor_media_previewer_bugfix') ? {
+    id: 'editor.media.viewer',
+    testId: 'file-preview-toolbar-button',
+    type: 'button',
+    icon: FilePreviewIcon,
+    title: intl.formatMessage(messages.preview),
+    onClick: function onClick() {
+      var _handleShowMediaViewe;
+      return (_handleShowMediaViewe = handleShowMediaViewer({
         mediaPluginState: mediaPluginState,
-        intl: intl
-      });
+        api: pluginInjectionApi
+      })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, {
+  } : generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -233,16 +235,18 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   if (options.allowImagePreview) {
     inlineImageItems.push(fg('platform_editor_media_previewer_bugfix') ? {
       id: 'editor.media.viewer',
+      testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: FilePreviewIcon,
       title: intl.formatMessage(messages.preview),
       onClick: function onClick() {
-        var _handleShowMediaViewe;
-        return (_handleShowMediaViewe = handleShowMediaViewer({
+        var _handleShowMediaViewe2;
+        return (_handleShowMediaViewe2 = handleShowMediaViewer({
           mediaPluginState: mediaPluginState,
           api: pluginInjectionApi
-        })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
-      }
+        })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
+      },
+      supportsViewMode: true
     } : generateFilePreviewItem(mediaPluginState, intl), {
       type: 'separator',
       supportsViewMode: true

package/dist/esm/utils/media-common.js

@@ -198,4 +198,18 @@ export var getMediaSingleOrInlineNodeFromSelection = function getMediaSingleOrIn
     allowInlineImages = _getMediaPluginState2.allowInlineImages;
   var mediaNode = getMediaNodeFromSelection(state) || allowInlineImages && getMediaInlineNodeFromSelection(state);
   return mediaNode || null;
+};
+export var getMediaFromSupportedMediaNodesFromSelection = function getMediaFromSupportedMediaNodesFromSelection(state) {
+  var _ref4 = state.selection,
+    node = _ref4.node;
+  switch (node.type) {
+    case node.type.schema.nodes.media:
+    case node.type.schema.nodes.mediaInline:
+      return node;
+    case node.type.schema.nodes.mediaSingle:
+    case node.type.schema.nodes.mediaGroup:
+      return node.firstChild;
+    default:
+      return null;
+  }
 };

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

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
-import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
+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';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';

package/dist/types/utils/media-common.d.ts

@@ -20,3 +20,4 @@ export declare const copyOptionalAttrsFromMediaState: (mediaState: MediaState, n
 export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode | null;
 export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
 export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const getMediaFromSupportedMediaNodesFromSelection: (state: EditorState) => PMNode | null;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
-import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
+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';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';

package/dist/types-ts4.5/utils/media-common.d.ts

@@ -20,3 +20,4 @@ export declare const copyOptionalAttrsFromMediaState: (mediaState: MediaState, n
 export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode | null;
 export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
 export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;
+export declare const getMediaFromSupportedMediaNodesFromSelection: (state: EditorState) => PMNode | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.36.3",
+	"version": "1.36.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^93.5.0",
+		"@atlaskit/editor-common": "^93.6.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-annotation": "1.21.1",
@@ -65,8 +65,8 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/theme": "^13.1.0",
-		"@atlaskit/tmp-editor-statsig": "^2.5.0",
+		"@atlaskit/theme": "^14.0.0",
+		"@atlaskit/tmp-editor-statsig": "^2.7.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -137,6 +137,9 @@
 		"platform_editor_media_previewer_bugfix": {
 			"type": "boolean"
 		},
+		"platform_editor_media_interaction_improvements": {
+			"type": "boolean"
+		},
 		"editor_nest_media_and_codeblock_in_quotes_jira": {
 			"type": "boolean"
 		},