@atlaskit/editor-plugin-media-insert/dist/esm/ui/MediaCard.js

Media Insert plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
import { Card, CardLoading } from '@atlaskit/media-card';
var maxDimensions = {
  width: '100%',
  height: '100%'
};
export var MediaCard = function MediaCard(_ref) {
  var attrs = _ref.attrs,
    mediaProvider = _ref.mediaProvider;
  var intl = useIntl();
  var mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
  var dimensions = React.useMemo(function () {
    return {
      width: attrs.dimensions.width,
      height: attrs.dimensions.height
    };
  }, [attrs.dimensions.width, attrs.dimensions.height]);
  var identifier = React.useMemo(function () {
    return {
      id: attrs.id,
      mediaItemType: 'file',
      collectionName: attrs.collection
    };
  }, [attrs.collection, attrs.id]);
  if (!mediaProvider) {
    return /*#__PURE__*/React.createElement(CardLoading, {
      dimensions: dimensions,
      interactionName: "editor-media-insert-card-loading"
    });
  }
  return /*#__PURE__*/React.createElement(Card, {
    mediaClientConfig: mediaProvider.viewMediaClientConfig,
    resizeMode: "stretchy-fit",
    dimensions: maxDimensions,
    originalDimensions: dimensions,
    identifier: identifier,
    alt: mediaAlt,
    disableOverlay: true
  });
};