@atlaskit/editor-plugin-media 1.18.0 → 1.19.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 1.19.1
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 1.19.0
+
+### Minor Changes
+
+-   [#96502](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96502)
+    [`6d16f58c771d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d16f58c771d) -
+    [ux] Add floating toolbar to inline images in view mode, remove media preview on click
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -189,13 +189,7 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     return mark.type.name === 'border';
   });
   if (allowInlineImages && (0, _isType.isImage)(type)) {
-    return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
-      mediaNode: props.node,
-      mediaPluginState: props.mediaPluginState,
-      isEditorViewMode: props.editorViewMode,
-      isSelected: props.isSelected,
-      isInline: true
-    }, (0, _react2.jsx)(_mediaInline.MediaInlineImageCard, {
+    return (0, _react2.jsx)(_mediaInline.MediaInlineImageCard, {
       mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
       identifier: identifier,
       isSelected: props.isSelected,
@@ -206,7 +200,7 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
       }
-    }));
+    });
   }
   return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
     mediaNode: props.node,

package/dist/cjs/toolbar/mediaInline.js

@@ -241,17 +241,36 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
           onAddLink: editLink,
           onEditLink: editLink,
           onOpenLink: openLink,
-          isInlineNode: true
+          isInlineNode: true,
+          isViewOnly: options.isViewOnly
         });
       }
       return null;
-    }
+    },
+    supportsViewMode: true
   });
 
   //Image Preview
-  if (!options.isViewOnly && options.allowImagePreview) {
+  if (options.allowImagePreview) {
     inlineImageItems.push((0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
-      type: 'separator'
+      type: 'separator',
+      supportsViewMode: true
+    });
+  }
+  if (options.isViewOnly) {
+    inlineImageItems.push({
+      id: 'editor.media.image.download',
+      type: 'button',
+      icon: _download.default,
+      onClick: function onClick() {
+        (0, _utils.downloadMedia)(mediaPluginState, options.isViewOnly);
+        return true;
+      },
+      title: intl.formatMessage(_mediaUi.messages.download),
+      supportsViewMode: true
+    }, {
+      type: 'separator',
+      supportsViewMode: true
     });
   }
   if (options.allowAltTextOnImages) {
@@ -266,10 +285,13 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
+    }],
+    supportsViewMode: true
+  });
+  inlineImageItems.push({
+    type: 'separator'
+  });
+  inlineImageItems.push({
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',

package/dist/es2019/nodeviews/mediaInline.js

@@ -120,13 +120,7 @@ export const MediaInline = props => {
   } = props.mediaPluginState;
   const borderMark = (_props$node = props.node) === null || _props$node === void 0 ? void 0 : (_props$node$marks = _props$node.marks) === null || _props$node$marks === void 0 ? void 0 : _props$node$marks.find(mark => mark.type.name === 'border');
   if (allowInlineImages && isImage(type)) {
-    return jsx(MediaViewerContainer, {
-      mediaNode: props.node,
-      mediaPluginState: props.mediaPluginState,
-      isEditorViewMode: props.editorViewMode,
-      isSelected: props.isSelected,
-      isInline: true
-    }, jsx(MediaInlineImageCard, {
+    return jsx(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
       identifier: identifier,
       isSelected: props.isSelected,
@@ -137,7 +131,7 @@ export const MediaInline = props => {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
       }
-    }));
+    });
   }
   return jsx(MediaViewerContainer, {
     mediaNode: props.node,

package/dist/es2019/toolbar/mediaInline.js

@@ -235,17 +235,36 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
           onAddLink: editLink,
           onEditLink: editLink,
           onOpenLink: openLink,
-          isInlineNode: true
+          isInlineNode: true,
+          isViewOnly: options.isViewOnly
         });
       }
       return null;
-    }
+    },
+    supportsViewMode: true
   });
 
   //Image Preview
-  if (!options.isViewOnly && options.allowImagePreview) {
+  if (options.allowImagePreview) {
     inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
-      type: 'separator'
+      type: 'separator',
+      supportsViewMode: true
+    });
+  }
+  if (options.isViewOnly) {
+    inlineImageItems.push({
+      id: 'editor.media.image.download',
+      type: 'button',
+      icon: DownloadIcon,
+      onClick: () => {
+        downloadMedia(mediaPluginState, options.isViewOnly);
+        return true;
+      },
+      title: intl.formatMessage(messages.download),
+      supportsViewMode: true
+    }, {
+      type: 'separator',
+      supportsViewMode: true
     });
   }
   if (options.allowAltTextOnImages) {
@@ -260,10 +279,13 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
       state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
+    }],
+    supportsViewMode: true
+  });
+  inlineImageItems.push({
+    type: 'separator'
+  });
+  inlineImageItems.push({
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',

package/dist/esm/nodeviews/mediaInline.js

@@ -183,13 +183,7 @@ export var MediaInline = function MediaInline(props) {
     return mark.type.name === 'border';
   });
   if (allowInlineImages && isImage(type)) {
-    return jsx(MediaViewerContainer, {
-      mediaNode: props.node,
-      mediaPluginState: props.mediaPluginState,
-      isEditorViewMode: props.editorViewMode,
-      isSelected: props.isSelected,
-      isInline: true
-    }, jsx(MediaInlineImageCard, {
+    return jsx(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
       identifier: identifier,
       isSelected: props.isSelected,
@@ -200,7 +194,7 @@ export var MediaInline = function MediaInline(props) {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
       }
-    }));
+    });
   }
   return jsx(MediaViewerContainer, {
     mediaNode: props.node,

package/dist/esm/toolbar/mediaInline.js

@@ -231,17 +231,36 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
           onAddLink: editLink,
           onEditLink: editLink,
           onOpenLink: openLink,
-          isInlineNode: true
+          isInlineNode: true,
+          isViewOnly: options.isViewOnly
         });
       }
       return null;
-    }
+    },
+    supportsViewMode: true
   });
 
   //Image Preview
-  if (!options.isViewOnly && options.allowImagePreview) {
+  if (options.allowImagePreview) {
     inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
-      type: 'separator'
+      type: 'separator',
+      supportsViewMode: true
+    });
+  }
+  if (options.isViewOnly) {
+    inlineImageItems.push({
+      id: 'editor.media.image.download',
+      type: 'button',
+      icon: DownloadIcon,
+      onClick: function onClick() {
+        downloadMedia(mediaPluginState, options.isViewOnly);
+        return true;
+      },
+      title: intl.formatMessage(messages.download),
+      supportsViewMode: true
+    }, {
+      type: 'separator',
+      supportsViewMode: true
     });
   }
   if (options.allowAltTextOnImages) {
@@ -256,10 +275,13 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
+    }],
+    supportsViewMode: true
+  });
+  inlineImageItems.push({
+    type: 'separator'
+  });
+  inlineImageItems.push({
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -61,10 +61,10 @@
     "@atlaskit/media-common": "^11.2.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.4.0",
-    "@atlaskit/media-ui": "^25.9.0",
+    "@atlaskit/media-ui": "^25.10.0",
     "@atlaskit/media-viewer": "^48.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^5.7.0",
+    "@atlaskit/primitives": "^6.0.0",
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.45.0",