@atlaskit/editor-plugin-media-insert/dist/es2019/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';
const maxDimensions = {
  width: '100%',
  height: '100%'
};
export const MediaCard = ({
  attrs,
  mediaProvider
}) => {
  const intl = useIntl();
  const mediaAlt = intl.formatMessage(mediaInsertMessages.mediaAlt);
  const dimensions = React.useMemo(() => {
    return {
      width: attrs.dimensions.width,
      height: attrs.dimensions.height
    };
  }, [attrs.dimensions.width, attrs.dimensions.height]);
  const identifier = React.useMemo(() => ({
    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
  });
};