@atlaskit/editor-plugin-media/dist/esm/ui/MediaViewer/PortalWrapper.js

Media plugin for @atlaskit/editor-core

import React from 'react';
import ReactDOM from 'react-dom';
import { MediaViewer } from '@atlaskit/media-viewer';
import { isExternalMedia } from '../../ui/toolbar/utils';
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 RenderMediaViewer = function RenderMediaViewer(_ref) {
  var mediaClientConfig = _ref.mediaClientConfig,
    onClose = _ref.onClose,
    selectedNodeAttrs = _ref.selectedNodeAttrs,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    extensions = _ref.extensions;
  var identifier = getIdentifier(selectedNodeAttrs);
  var collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
    collectionName: collectionName,
    items: items
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    mediaClientConfig: mediaClientConfig,
    selectedItem: identifier,
    onClose: onClose,
    extensions: extensions
  }), document.body);
};