@atlaskit/editor-plugin-media 1.9.5 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 1.10.1
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+- Updated dependencies
+
+## 1.10.0
+
+### Minor Changes
+
+- [#82250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82250) [`5d7f76f71b82`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d7f76f71b82) - Stop media viewer from closing when clicking on image
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.9.5
 
 ### Patch Changes

package/dist/cjs/toolbar/filePreviewItem.js

@@ -16,9 +16,29 @@ var _mediaViewer = require("@atlaskit/media-viewer");
 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 && Object.prototype.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; }
-var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
-  var mediaPluginState = _ref.mediaPluginState,
-    intl = _ref.intl;
+var RenderMediaViewer = function RenderMediaViewer(_ref) {
+  var mediaClientConfig = _ref.mediaClientConfig,
+    onClose = _ref.onClose,
+    selectedNodeAttrs = _ref.selectedNodeAttrs;
+  var id = selectedNodeAttrs.id,
+    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};
+var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref2) {
+  var mediaPluginState = _ref2.mediaPluginState,
+    intl = _ref2.intl;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMediaViewerVisible = _useState2[0],
@@ -29,30 +49,8 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
   var onMediaViewerClose = function onMediaViewerClose() {
     setMediaViewerVisible(false);
   };
-  var renderMediaViewer = function renderMediaViewer() {
-    if (isMediaViewerVisible) {
-      var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
-      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
-        var id = selectedNodeAttrs.id,
-          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
-        var identifier = {
-          id: id,
-          mediaItemType: 'file',
-          collectionName: collection
-        };
-        return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
-          collectionName: collection,
-          items: [],
-          mediaClientConfig: mediaPluginState.mediaClientConfig,
-          selectedItem: identifier,
-          onClose: onMediaViewerClose
-        }), document.body);
-      }
-    }
-    return null;
-  };
-  var mediaViewer = renderMediaViewer();
+  var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
+  var shouldRenderMediaViewer = selectedNodeAttrs && mediaPluginState.mediaClientConfig && isMediaViewerVisible;
   var tooltipContent = intl.formatMessage(_mediaUi.messages.preview);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     testId: "file-preview-toolbar-button",
@@ -62,5 +60,9 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
       label: "file preview"
     }),
     tooltipContent: tooltipContent
-  }), mediaViewer);
+  }), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(RenderMediaViewer, {
+    mediaClientConfig: mediaPluginState.mediaClientConfig,
+    onClose: onMediaViewerClose,
+    selectedNodeAttrs: selectedNodeAttrs
+  }));
 };

package/dist/es2019/toolbar/filePreviewItem.js

@@ -5,6 +5,28 @@ import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
+const RenderMediaViewer = ({
+  mediaClientConfig,
+  onClose,
+  selectedNodeAttrs
+}) => {
+  const {
+    id,
+    collection = ''
+  } = selectedNodeAttrs;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};
 export const FilePreviewItem = ({
   mediaPluginState,
   intl
@@ -16,31 +38,8 @@ export const FilePreviewItem = ({
   const onMediaViewerClose = () => {
     setMediaViewerVisible(false);
   };
-  const renderMediaViewer = () => {
-    if (isMediaViewerVisible) {
-      const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
-      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
-        const {
-          id,
-          collection = ''
-        } = selectedNodeAttrs;
-        const identifier = {
-          id,
-          mediaItemType: 'file',
-          collectionName: collection
-        };
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-          collectionName: collection,
-          items: [],
-          mediaClientConfig: mediaPluginState.mediaClientConfig,
-          selectedItem: identifier,
-          onClose: onMediaViewerClose
-        }), document.body);
-      }
-    }
-    return null;
-  };
-  const mediaViewer = renderMediaViewer();
+  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  const shouldRenderMediaViewer = selectedNodeAttrs && mediaPluginState.mediaClientConfig && isMediaViewerVisible;
   const tooltipContent = intl.formatMessage(messages.preview);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
@@ -50,5 +49,9 @@ export const FilePreviewItem = ({
       label: "file preview"
     }),
     tooltipContent: tooltipContent
-  }), mediaViewer);
+  }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {
+    mediaClientConfig: mediaPluginState.mediaClientConfig,
+    onClose: onMediaViewerClose,
+    selectedNodeAttrs: selectedNodeAttrs
+  }));
 };

package/dist/esm/toolbar/filePreviewItem.js

@@ -6,9 +6,29 @@ import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
-export var FilePreviewItem = function FilePreviewItem(_ref) {
-  var mediaPluginState = _ref.mediaPluginState,
-    intl = _ref.intl;
+var RenderMediaViewer = function RenderMediaViewer(_ref) {
+  var mediaClientConfig = _ref.mediaClientConfig,
+    onClose = _ref.onClose,
+    selectedNodeAttrs = _ref.selectedNodeAttrs;
+  var id = selectedNodeAttrs.id,
+    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};
+export var FilePreviewItem = function FilePreviewItem(_ref2) {
+  var mediaPluginState = _ref2.mediaPluginState,
+    intl = _ref2.intl;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMediaViewerVisible = _useState2[0],
@@ -19,30 +39,8 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
   var onMediaViewerClose = function onMediaViewerClose() {
     setMediaViewerVisible(false);
   };
-  var renderMediaViewer = function renderMediaViewer() {
-    if (isMediaViewerVisible) {
-      var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
-      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
-        var id = selectedNodeAttrs.id,
-          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
-        var identifier = {
-          id: id,
-          mediaItemType: 'file',
-          collectionName: collection
-        };
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-          collectionName: collection,
-          items: [],
-          mediaClientConfig: mediaPluginState.mediaClientConfig,
-          selectedItem: identifier,
-          onClose: onMediaViewerClose
-        }), document.body);
-      }
-    }
-    return null;
-  };
-  var mediaViewer = renderMediaViewer();
+  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  var shouldRenderMediaViewer = selectedNodeAttrs && mediaPluginState.mediaClientConfig && isMediaViewerVisible;
   var tooltipContent = intl.formatMessage(messages.preview);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
@@ -52,5 +50,9 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
       label: "file preview"
     }),
     tooltipContent: tooltipContent
-  }), mediaViewer);
+  }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {
+    mediaClientConfig: mediaPluginState.mediaClientConfig,
+    onClose: onMediaViewerClose,
+    selectedNodeAttrs: selectedNodeAttrs
+  }));
 };

package/dist/types/nodeviews/mediaNodeView/index.d.ts

@@ -23,7 +23,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
     }) => void;
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
-        width?: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+        width?: WidthPluginState | undefined;
     }) => JSX.Element;
     renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider, }: Providers) => JSX.Element;
     render(): JSX.Element;

package/dist/types/ui/ToolbarMedia/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     isReducedSpacing?: boolean;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/utils/analytics.d.ts

@@ -1,6 +1,6 @@
 import type { MediaEventPayload, MediaInputResizeTrackAction, MediaResizeTrackAction, MediaSwitchType } from '@atlaskit/editor-common/analytics';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
-export declare const getMediaInputResizeAnalyticsEvent: <T extends MediaInputResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
+export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T['attributes']) => MediaEventPayload | void;
+export declare const getMediaInputResizeAnalyticsEvent: <T extends MediaInputResizeTrackAction>(type: string, attributes: T['attributes']) => MediaEventPayload | void;
 export declare const getChangeMediaAnalytics: (previousType: MediaSwitchType, newType: MediaSwitchType, changeFromLocation?: string) => MediaEventPayload;
 export declare function findChangeFromLocation(selection: Selection): string;

package/dist/types-ts4.5/nodeviews/mediaNodeView/index.d.ts

@@ -23,7 +23,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
     }) => void;
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
-        width?: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+        width?: WidthPluginState | undefined;
     }) => JSX.Element;
     renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider, }: Providers) => JSX.Element;
     render(): JSX.Element;

package/dist/types-ts4.5/ui/ToolbarMedia/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     isReducedSpacing?: boolean;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types-ts4.5/utils/analytics.d.ts

@@ -1,6 +1,6 @@
 import type { MediaEventPayload, MediaInputResizeTrackAction, MediaResizeTrackAction, MediaSwitchType } from '@atlaskit/editor-common/analytics';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
-export declare const getMediaInputResizeAnalyticsEvent: <T extends MediaInputResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
+export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T['attributes']) => MediaEventPayload | void;
+export declare const getMediaInputResizeAnalyticsEvent: <T extends MediaInputResizeTrackAction>(type: string, attributes: T['attributes']) => MediaEventPayload | void;
 export declare const getChangeMediaAnalytics: (previousType: MediaSwitchType, newType: MediaSwitchType, changeFromLocation?: string) => MediaEventPayload;
 export declare function findChangeFromLocation(selection: Selection): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.9.5",
+  "version": "1.10.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,10 +37,10 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.7.0",
-    "@atlaskit/editor-common": "^78.14.0",
-    "@atlaskit/editor-palette": "1.5.2",
+    "@atlaskit/editor-common": "^78.17.0",
+    "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.4.0",
+    "@atlaskit/editor-plugin-annotation": "1.4.1",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^1.2.0",
@@ -61,12 +61,12 @@
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.3.0",
     "@atlaskit/media-ui": "^25.4.0",
-    "@atlaskit/media-viewer": "^48.3.0",
+    "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^5.0.0",
+    "@atlaskit/primitives": "^5.1.0",
     "@atlaskit/textfield": "^6.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.4.2"
   },
   "peerDependencies": {
     "@atlaskit/media-core": "^34.2.0",

package/types/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/types.d.ts"
       ]