@atlaskit/editor-plugin-media 1.37.0 → 1.37.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 1.37.2
+
+### Patch Changes
+
+- [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
+  [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
+  Upgrades editor packages to react 18
+- Updated dependencies
+
+## 1.37.1
+
+### Patch Changes
+
+- [#155195](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155195)
+  [`086e77aecf6e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/086e77aecf6e5) -
+  [ux] ED-25202 Support Preview in media files
+- Updated dependencies
+
 ## 1.37.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mediaPlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -35,7 +36,10 @@ var _toolbar = require("./toolbar");
 var _MediaPicker = require("./ui/MediaPicker");
 var _PortalWrapper = require("./ui/MediaViewer/PortalWrapper");
 var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
+var _mediaCommon2 = require("./utils/media-common");
 var _mediaSingle2 = require("./utils/media-single");
+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 && {}.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 MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
   var api = _ref.api,
     editorDomElement = _ref.editorDomElement,
@@ -53,10 +57,22 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
   });
 };
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
-  var api = _ref2.api;
+  var api = _ref2.api,
+    editorView = _ref2.editorView;
   var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media']),
     mediaState = _useSharedPluginState2.mediaState;
 
+  // Only traverse document once when media viewer is visible, media viewer items will not update
+  // when document changes are made while media viewer is open
+
+  var mediaItems = (0, _react.useMemo)(function () {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements')) {
+      var mediaNodes = (0, _mediaCommon2.extractMediaNodes)(editorView.state.doc);
+      return (0, _mediaCommon2.createMediaIdentifierArray)(mediaNodes);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+
   // 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;
@@ -68,7 +84,8 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   return /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    items: (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') ? mediaItems : undefined
   });
 };
 var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
@@ -259,7 +276,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       var editorView = _ref12.editorView,
         appearance = _ref12.appearance;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') && /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
-        api: api
+        api: api,
+        editorView: editorView
       }), /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

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

@@ -786,11 +786,12 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case _actions.ACTIONS.SHOW_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
-            pluginState.isMediaViewerVisible = true;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
           case _actions.ACTIONS.HIDE_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = undefined;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
         }

package/dist/cjs/ui/MediaViewer/PortalWrapper.js

@@ -30,13 +30,15 @@ var getIdentifier = function getIdentifier(attrs) {
 var RenderMediaViewer = exports.RenderMediaViewer = function RenderMediaViewer(_ref) {
   var mediaClientConfig = _ref.mediaClientConfig,
     onClose = _ref.onClose,
-    selectedNodeAttrs = _ref.selectedNodeAttrs;
+    selectedNodeAttrs = _ref.selectedNodeAttrs,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
   if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
     var _identifier = getIdentifier(selectedNodeAttrs);
     var collectionName = (0, _utils.isExternalMedia)(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
     return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
       collectionName: collectionName,
-      items: [],
+      items: items,
       mediaClientConfig: mediaClientConfig,
       selectedItem: _identifier,
       onClose: onClose

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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.getMediaFromSupportedMediaNodesFromSelection = 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.getIdentifier = exports.extractMediaNodes = exports.createMediaIdentifierArray = exports.copyOptionalAttrsFromMediaState = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
@@ -11,6 +13,8 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _mediaClient = require("@atlaskit/media-client");
 var _main = require("../pm-plugins/main");
+var _utils3 = require("../toolbar/utils");
+var _mediaSingle = require("./media-single");
 var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
@@ -218,4 +222,50 @@ var getMediaFromSupportedMediaNodesFromSelection = exports.getMediaFromSupported
     default:
       return null;
   }
+};
+var getIdentifier = exports.getIdentifier = function getIdentifier(attrs) {
+  if ((0, _utils3.isExternalMedia)(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    var id = attrs.id,
+      _attrs$collection = attrs.collection,
+      collection = _attrs$collection === void 0 ? '' : _attrs$collection;
+    return {
+      id: id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
+var extractMediaNodes = exports.extractMediaNodes = function extractMediaNodes(doc) {
+  var mediaNodes = [];
+  doc.descendants(function (node) {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      mediaNodes.push(node);
+    }
+  });
+  return mediaNodes;
+};
+var createMediaIdentifierArray = exports.createMediaIdentifierArray = function createMediaIdentifierArray(mediaNodes) {
+  var mediaIdentifierMap = new Map();
+  mediaNodes.forEach(function (item) {
+    var attrs = item.attrs;
+    if (!attrs) {
+      return;
+    }
+    if ((0, _mediaSingle.isVideo)(attrs.__fileMimeType)) {
+      return;
+    }
+    var identifier = getIdentifier(attrs);
+
+    // Add only if not already processed
+    var idKey = (0, _mediaClient.isExternalImageIdentifier)(identifier) ? identifier.dataURI : identifier.id;
+    if (!mediaIdentifierMap.has(idKey)) {
+      mediaIdentifierMap.set(idKey, identifier);
+    }
+  });
+  return (0, _toConsumableArray2.default)(mediaIdentifierMap.values());
 };

package/dist/es2019/plugin.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -28,6 +28,7 @@ import { floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import ToolbarMedia from './ui/ToolbarMedia';
+import { createMediaIdentifierArray, extractMediaNodes } from './utils/media-common';
 import { insertMediaAsMediaSingle } from './utils/media-single';
 const MediaPickerFunctionalComponent = ({
   api,
@@ -48,12 +49,24 @@ const MediaPickerFunctionalComponent = ({
   });
 };
 const MediaViewerFunctionalComponent = ({
-  api
+  api,
+  editorView
 }) => {
   const {
     mediaState
   } = useSharedPluginState(api, ['media']);
 
+  // Only traverse document once when media viewer is visible, media viewer items will not update
+  // when document changes are made while media viewer is open
+
+  const mediaItems = useMemo(() => {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && fg('platform_editor_media_interaction_improvements')) {
+      const mediaNodes = extractMediaNodes(editorView.state.doc);
+      return createMediaIdentifierArray(mediaNodes);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+
   // 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;
@@ -65,7 +78,8 @@ const MediaViewerFunctionalComponent = ({
   return /*#__PURE__*/React.createElement(RenderMediaViewer, {
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    items: fg('platform_editor_media_interaction_improvements') ? mediaItems : undefined
   });
 };
 export const mediaPlugin = ({
@@ -260,7 +274,8 @@ export const mediaPlugin = ({
       appearance
     }) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_media_previewer_bugfix') && /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
-        api: api
+        api: api,
+        editorView: editorView
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

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

@@ -673,11 +673,12 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, disp
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case ACTIONS.SHOW_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
-            pluginState.isMediaViewerVisible = true;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
           case ACTIONS.HIDE_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = undefined;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
         }

package/dist/es2019/ui/MediaViewer/PortalWrapper.js

@@ -24,14 +24,15 @@ const getIdentifier = attrs => {
 export const RenderMediaViewer = ({
   mediaClientConfig,
   onClose,
-  selectedNodeAttrs
+  selectedNodeAttrs,
+  items = []
 }) => {
   if (editorExperiment('add-media-from-url', true)) {
     const identifier = getIdentifier(selectedNodeAttrs);
     const collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
       collectionName: collectionName,
-      items: [],
+      items: items,
       mediaClientConfig: mediaClientConfig,
       selectedItem: identifier,
       onClose: onClose

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

@@ -3,8 +3,10 @@ import { createNewParagraphBelow, createParagraphNear } from '@atlaskit/editor-c
 import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
-import { isMediaBlobUrl } from '@atlaskit/media-client';
+import { isExternalImageIdentifier, isMediaBlobUrl } from '@atlaskit/media-client';
 import { getMediaPluginState } from '../pm-plugins/main';
+import { isExternalMedia } from '../toolbar/utils';
+import { isVideo } from './media-single';
 const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
 };
@@ -230,4 +232,51 @@ export const getMediaFromSupportedMediaNodesFromSelection = state => {
     default:
       return null;
   }
+};
+export const getIdentifier = attrs => {
+  if (isExternalMedia(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    const {
+      id,
+      collection = ''
+    } = attrs;
+    return {
+      id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
+export const extractMediaNodes = doc => {
+  const mediaNodes = [];
+  doc.descendants(node => {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      mediaNodes.push(node);
+    }
+  });
+  return mediaNodes;
+};
+export const createMediaIdentifierArray = mediaNodes => {
+  const mediaIdentifierMap = new Map();
+  mediaNodes.forEach(item => {
+    const attrs = item.attrs;
+    if (!attrs) {
+      return;
+    }
+    if (isVideo(attrs.__fileMimeType)) {
+      return;
+    }
+    const identifier = getIdentifier(attrs);
+
+    // Add only if not already processed
+    const idKey = isExternalImageIdentifier(identifier) ? identifier.dataURI : identifier.id;
+    if (!mediaIdentifierMap.has(idKey)) {
+      mediaIdentifierMap.set(idKey, identifier);
+    }
+  });
+  return [...mediaIdentifierMap.values()];
 };

package/dist/esm/plugin.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -28,6 +28,7 @@ import { floatingToolbar as _floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import ToolbarMedia from './ui/ToolbarMedia';
+import { createMediaIdentifierArray, extractMediaNodes } from './utils/media-common';
 import { insertMediaAsMediaSingle as _insertMediaAsMediaSingle } from './utils/media-single';
 var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
   var api = _ref.api,
@@ -46,10 +47,22 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
   });
 };
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
-  var api = _ref2.api;
+  var api = _ref2.api,
+    editorView = _ref2.editorView;
   var _useSharedPluginState2 = useSharedPluginState(api, ['media']),
     mediaState = _useSharedPluginState2.mediaState;
 
+  // Only traverse document once when media viewer is visible, media viewer items will not update
+  // when document changes are made while media viewer is open
+
+  var mediaItems = useMemo(function () {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && fg('platform_editor_media_interaction_improvements')) {
+      var mediaNodes = extractMediaNodes(editorView.state.doc);
+      return createMediaIdentifierArray(mediaNodes);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+
   // 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;
@@ -61,7 +74,8 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   return /*#__PURE__*/React.createElement(RenderMediaViewer, {
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    items: fg('platform_editor_media_interaction_improvements') ? mediaItems : undefined
   });
 };
 export var mediaPlugin = function mediaPlugin(_ref3) {
@@ -252,7 +266,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       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
+        api: api,
+        editorView: editorView
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

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

@@ -771,11 +771,12 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case ACTIONS.SHOW_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
-            pluginState.isMediaViewerVisible = true;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
           case ACTIONS.HIDE_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = undefined;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
         }

package/dist/esm/ui/MediaViewer/PortalWrapper.js

@@ -23,13 +23,15 @@ var getIdentifier = function getIdentifier(attrs) {
 export var RenderMediaViewer = function RenderMediaViewer(_ref) {
   var mediaClientConfig = _ref.mediaClientConfig,
     onClose = _ref.onClose,
-    selectedNodeAttrs = _ref.selectedNodeAttrs;
+    selectedNodeAttrs = _ref.selectedNodeAttrs,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
   if (editorExperiment('add-media-from-url', true)) {
     var _identifier = getIdentifier(selectedNodeAttrs);
     var collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
       collectionName: collectionName,
-      items: [],
+      items: items,
       mediaClientConfig: mediaClientConfig,
       selectedItem: _identifier,
       onClose: onClose

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

@@ -1,10 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, endPositionOfParent, GapCursorSelection, startPositionOfParent } from '@atlaskit/editor-common/selection';
 import { createNewParagraphBelow, createParagraphNear } from '@atlaskit/editor-common/utils';
 import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
-import { isMediaBlobUrl } from '@atlaskit/media-client';
+import { isExternalImageIdentifier, isMediaBlobUrl } from '@atlaskit/media-client';
 import { getMediaPluginState } from '../pm-plugins/main';
+import { isExternalMedia } from '../toolbar/utils';
+import { isVideo } from './media-single';
 var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
@@ -212,4 +215,50 @@ export var getMediaFromSupportedMediaNodesFromSelection = function getMediaFromS
     default:
       return null;
   }
+};
+export var getIdentifier = function getIdentifier(attrs) {
+  if (isExternalMedia(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    var id = attrs.id,
+      _attrs$collection = attrs.collection,
+      collection = _attrs$collection === void 0 ? '' : _attrs$collection;
+    return {
+      id: id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
+export var extractMediaNodes = function extractMediaNodes(doc) {
+  var mediaNodes = [];
+  doc.descendants(function (node) {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      mediaNodes.push(node);
+    }
+  });
+  return mediaNodes;
+};
+export var createMediaIdentifierArray = function createMediaIdentifierArray(mediaNodes) {
+  var mediaIdentifierMap = new Map();
+  mediaNodes.forEach(function (item) {
+    var attrs = item.attrs;
+    if (!attrs) {
+      return;
+    }
+    if (isVideo(attrs.__fileMimeType)) {
+      return;
+    }
+    var identifier = getIdentifier(attrs);
+
+    // Add only if not already processed
+    var idKey = isExternalImageIdentifier(identifier) ? identifier.dataURI : identifier.id;
+    if (!mediaIdentifierMap.has(idKey)) {
+      mediaIdentifierMap.set(idKey, identifier);
+    }
+  });
+  return _toConsumableArray(mediaIdentifierMap.values());
 };

package/dist/types/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
-import type { MediaClientConfig } from '@atlaskit/media-client';
+import type { Identifier, MediaClientConfig } from '@atlaskit/media-client';
 interface RenderMediaViewerProps {
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
     selectedNodeAttrs: MediaADFAttrs;
+    items?: Identifier[];
 }
-export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, }: RenderMediaViewerProps) => React.ReactPortal;
+export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

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

@@ -1,7 +1,9 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type Identifier } from '@atlaskit/media-client';
 import type { MediaState, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export declare const isMediaBlobUrlFromAttrs: (attrs: MediaADFAttrs) => boolean;
 export declare const posOfMediaGroupNearby: (state: EditorState) => number | undefined;
@@ -21,3 +23,6 @@ export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode |
 export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
 export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;
 export declare const getMediaFromSupportedMediaNodesFromSelection: (state: EditorState) => PMNode | null;
+export declare const getIdentifier: (attrs: MediaADFAttrs) => Identifier;
+export declare const extractMediaNodes: (doc: ProseMirrorNode) => PMNode[];
+export declare const createMediaIdentifierArray: (mediaNodes: ProseMirrorNode[]) => any[];

package/dist/types-ts4.5/ui/MediaViewer/PortalWrapper.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
-import type { MediaClientConfig } from '@atlaskit/media-client';
+import type { Identifier, MediaClientConfig } from '@atlaskit/media-client';
 interface RenderMediaViewerProps {
     mediaClientConfig: MediaClientConfig;
     onClose: () => void;
     selectedNodeAttrs: MediaADFAttrs;
+    items?: Identifier[];
 }
-export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, }: RenderMediaViewerProps) => React.ReactPortal;
+export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, items, }: RenderMediaViewerProps) => React.ReactPortal;
 export {};

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

@@ -1,7 +1,9 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type Identifier } from '@atlaskit/media-client';
 import type { MediaState, getPosHandler as ProsemirrorGetPosHandler } from '../types';
 export declare const isMediaBlobUrlFromAttrs: (attrs: MediaADFAttrs) => boolean;
 export declare const posOfMediaGroupNearby: (state: EditorState) => number | undefined;
@@ -21,3 +23,6 @@ export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode |
 export declare const isMediaSingleOrInlineNodeSelected: (state: EditorState) => boolean | undefined;
 export declare const getMediaSingleOrInlineNodeFromSelection: (state: EditorState) => PMNode | null;
 export declare const getMediaFromSupportedMediaNodesFromSelection: (state: EditorState) => PMNode | null;
+export declare const getIdentifier: (attrs: MediaADFAttrs) => Identifier;
+export declare const extractMediaNodes: (doc: ProseMirrorNode) => PMNode[];
+export declare const createMediaIdentifierArray: (mediaNodes: ProseMirrorNode[]) => any[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.37.0",
+	"version": "1.37.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,11 +35,11 @@
 		"@atlaskit/adf-schema": "^42.3.1",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^94.0.0",
-		"@atlaskit/editor-palette": "1.6.1",
+		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-palette": "1.6.2",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-annotation": "1.21.2",
+		"@atlaskit/editor-plugin-annotation": "1.21.3",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -53,8 +53,8 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.23.0",
-		"@atlaskit/media-card": "^78.7.0",
+		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/media-card": "^78.8.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.6.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.7.0",
+		"@atlaskit/tmp-editor-statsig": "^2.8.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,6 @@
 		"uuid": "^3.1.0"
 	},
 	"devDependencies": {
-		"react-dom": "^16.8.0",
 		"typescript": "~5.4.2"
 	},
 	"peerDependencies": {