@atlaskit/editor-common/dist/es2019/media-single/ExternalImageBadge.js

A package that contains common classes and components for editor and renderer

import React from 'react';
import { useIntl } from 'react-intl-next';
import InfoIcon from '@atlaskit/icon/glyph/info';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, xcss } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
import { externalMediaMessages } from '../media';
const baseStyles = xcss({
  borderRadius: 'border.radius',
  backgroundColor: 'elevation.surface',
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: "var(--ds-space-200, 16px)",
  cursor: 'pointer'
});

// On cleanup of 'platform_editor_hide_external_media_badge', make types non-optional

const NO_EXTERNAL_BADGE_HOSTS = ['atlassian.com'];
export const isUnbadgedUrl = url => {
  let hostname;
  try {
    ({
      hostname
    } = new URL(url || ''));
  } catch (e) {
    // If the URL is invalid (or empty), just carry on showing the badge
    return false;
  }
  return Boolean(hostname &&
  // Do not show badge for atlassian domains and subdomains
  NO_EXTERNAL_BADGE_HOSTS.some(host => hostname === host || hostname.endsWith(`.${host}`)));
};
export const ExternalImageBadge = ({
  badgeSize,
  type,
  url
}) => {
  const intl = useIntl();
  const message = intl.formatMessage(externalMediaMessages.externalMediaFile);
  if (fg('platform_editor_hide_external_media_badge')) {
    if (type !== 'external' || isUnbadgedUrl(url)) {
      return null;
    }
  }
  return /*#__PURE__*/React.createElement(Box, {
    padding: badgeSize === 'medium' ? 'space.050' : 'space.0',
    xcss: baseStyles,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement(Tooltip, {
    content: message,
    position: "top"
  }, /*#__PURE__*/React.createElement(InfoIcon, {
    size: "small",
    label: message
  })));
};