@atlaskit/editor-plugin-media 1.12.4 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-media
 
+## 1.13.0
+
+### Minor Changes
+
+- [#84964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84964) [`be8d48da5d54`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be8d48da5d54) - [ux] MediaGroup should show MediaViewer when Editor in 'view' mode
+
 ## 1.12.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -136,7 +136,8 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props.getPos,
         allowLazyLoading = _this$props.allowLazyLoading,
         disabled = _this$props.disabled,
-        mediaOptions = _this$props.mediaOptions;
+        mediaOptions = _this$props.mediaOptions,
+        editorViewMode = _this$props.editorViewMode;
       var items = _this.mediaNodes.map(function (item, idx) {
         // We declared this to get a fresh position every time
         var getNodePos = function getNodePos() {
@@ -179,7 +180,8 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {
         items: items,
         mediaClientConfig: viewMediaClientConfig,
-        featureFlags: mediaOptions.featureFlags
+        featureFlags: mediaOptions.featureFlags,
+        shouldOpenMediaViewer: editorViewMode
       });
     });
     _this.mediaNodes = [];
@@ -305,10 +307,12 @@ var _default = exports.default = IntlMediaGroup;
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled']),
-    editorDisabledPlugin = _useSharedPluginState.editorDisabledState;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
+    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
   return renderFn({
-    editorDisabledPlugin: editorDisabledPlugin
+    editorDisabledPlugin: editorDisabledPlugin,
+    editorViewModePlugin: editorViewModePlugin
   });
 }
 var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
@@ -333,7 +337,8 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
           var mediaProvider = _ref4.mediaProvider,
             contextIdentifierProvider = _ref4.contextIdentifierProvider;
           var renderFn = function renderFn(_ref5) {
-            var editorDisabledPlugin = _ref5.editorDisabledPlugin;
+            var editorDisabledPlugin = _ref5.editorDisabledPlugin,
+              editorViewModePlugin = _ref5.editorViewModePlugin;
             if (!mediaProvider) {
               return null;
             }
@@ -349,7 +354,8 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
               anchorPos: _this3.view.state.selection.$anchor.pos,
               headPos: _this3.view.state.selection.$head.pos,
-              mediaOptions: mediaOptions
+              mediaOptions: mediaOptions,
+              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
             });
           };
           return /*#__PURE__*/_react.default.createElement(MediaGroupNodeViewInternal, {

package/dist/es2019/nodeviews/mediaGroup.js

@@ -118,7 +118,8 @@ class MediaGroup extends React.Component {
         getPos,
         allowLazyLoading,
         disabled,
-        mediaOptions
+        mediaOptions,
+        editorViewMode
       } = this.props;
       const items = this.mediaNodes.map((item, idx) => {
         // We declared this to get a fresh position every time
@@ -162,7 +163,8 @@ class MediaGroup extends React.Component {
       return /*#__PURE__*/React.createElement(Filmstrip, {
         items: items,
         mediaClientConfig: viewMediaClientConfig,
-        featureFlags: mediaOptions.featureFlags
+        featureFlags: mediaOptions.featureFlags,
+        shouldOpenMediaViewer: editorViewMode
       });
     });
     this.mediaNodes = [];
@@ -254,10 +256,12 @@ function MediaGroupNodeViewInternal({
   pluginInjectionApi
 }) {
   const {
-    editorDisabledState: editorDisabledPlugin
-  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
+    editorDisabledState: editorDisabledPlugin,
+    editorViewModeState: editorViewModePlugin
+  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']);
   return renderFn({
-    editorDisabledPlugin
+    editorDisabledPlugin,
+    editorViewModePlugin
   });
 }
 class MediaGroupNodeView extends ReactNodeView {
@@ -276,7 +280,8 @@ class MediaGroupNodeView extends ReactNodeView {
         contextIdentifierProvider
       }) => {
         const renderFn = ({
-          editorDisabledPlugin
+          editorDisabledPlugin,
+          editorViewModePlugin
         }) => {
           if (!mediaProvider) {
             return null;
@@ -293,7 +298,8 @@ class MediaGroupNodeView extends ReactNodeView {
             isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
             anchorPos: this.view.state.selection.$anchor.pos,
             headPos: this.view.state.selection.$head.pos,
-            mediaOptions: mediaOptions
+            mediaOptions: mediaOptions,
+            editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
           });
         };
         return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {

package/dist/esm/nodeviews/mediaGroup.js

@@ -129,7 +129,8 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props.getPos,
         allowLazyLoading = _this$props.allowLazyLoading,
         disabled = _this$props.disabled,
-        mediaOptions = _this$props.mediaOptions;
+        mediaOptions = _this$props.mediaOptions,
+        editorViewMode = _this$props.editorViewMode;
       var items = _this.mediaNodes.map(function (item, idx) {
         // We declared this to get a fresh position every time
         var getNodePos = function getNodePos() {
@@ -172,7 +173,8 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Filmstrip, {
         items: items,
         mediaClientConfig: viewMediaClientConfig,
-        featureFlags: mediaOptions.featureFlags
+        featureFlags: mediaOptions.featureFlags,
+        shouldOpenMediaViewer: editorViewMode
       });
     });
     _this.mediaNodes = [];
@@ -298,10 +300,12 @@ export default IntlMediaGroup;
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
-    editorDisabledPlugin = _useSharedPluginState.editorDisabledState;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
+    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
   return renderFn({
-    editorDisabledPlugin: editorDisabledPlugin
+    editorDisabledPlugin: editorDisabledPlugin,
+    editorViewModePlugin: editorViewModePlugin
   });
 }
 var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
@@ -326,7 +330,8 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
           var mediaProvider = _ref4.mediaProvider,
             contextIdentifierProvider = _ref4.contextIdentifierProvider;
           var renderFn = function renderFn(_ref5) {
-            var editorDisabledPlugin = _ref5.editorDisabledPlugin;
+            var editorDisabledPlugin = _ref5.editorDisabledPlugin,
+              editorViewModePlugin = _ref5.editorViewModePlugin;
             if (!mediaProvider) {
               return null;
             }
@@ -342,7 +347,8 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
               anchorPos: _this3.view.state.selection.$anchor.pos,
               headPos: _this3.view.state.selection.$head.pos,
-              mediaOptions: mediaOptions
+              mediaOptions: mediaOptions,
+              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
             });
           };
           return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {

package/dist/types/nodeviews/mediaGroup.d.ts

@@ -15,6 +15,7 @@ export type MediaGroupProps = {
     view: EditorView;
     getPos: () => number | undefined;
     disabled?: boolean;
+    editorViewMode?: boolean;
     allowLazyLoading?: boolean;
     mediaProvider: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;

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

@@ -15,6 +15,7 @@ export type MediaGroupProps = {
     view: EditorView;
     getPos: () => number | undefined;
     disabled?: boolean;
+    editorViewMode?: boolean;
     allowLazyLoading?: boolean;
     mediaProvider: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,13 +36,14 @@
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/editor-common": "^78.21.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-annotation": "1.5.3",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
+    "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^1.2.0",
     "@atlaskit/editor-plugin-focus": "^1.1.0",
     "@atlaskit/editor-plugin-grid": "^1.0.0",