@atlaskit/editor-common/dist/esm/ui/MediaSingle/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
import { getMediaSinglePixelWidth } from '../../media-single/utils';
import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
export default function MediaSingle(_ref) {
  var layout = _ref.layout,
    width = _ref.width,
    height = _ref.height,
    _ref$containerWidth = _ref.containerWidth,
    containerWidth = _ref$containerWidth === void 0 ? width : _ref$containerWidth,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    pctWidth = _ref.pctWidth,
    size = _ref.size,
    className = _ref.className,
    propsChildren = _ref.children,
    _ref$nodeType = _ref.nodeType,
    nodeType = _ref$nodeType === void 0 ? 'mediaSingle' : _ref$nodeType,
    fullWidthMode = _ref.fullWidthMode,
    editorWidth = _ref.lineLength,
    _ref$hasFallbackConta = _ref.hasFallbackContainer,
    hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
    handleMediaSingleRef = _ref.handleMediaSingleRef,
    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline,
    dataAttributes = _ref.dataAttributes;
  var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
  var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
  var children = React.Children.toArray(propsChildren);
  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
    // if width is not available, set to half of editor width
    mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
  }
  // When width is not set we have an absolute height for a given embed.
  // When both width and height are set we use them to determine ratio and use that to define
  // embed height in relation to whatever width of an dom element is in runtime.
  var isHeightOnly = width === undefined;
  if (mediaSingleWidth) {
    var pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, MEDIA_SINGLE_GUTTER_SIZE);
    if (isHeightOnly) {
      width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
    } else if (width !== undefined) {
      height = height / width * pxWidth;
      width = pxWidth;
    }
  } else if (isHeightOnly) {
    // No mediaSingleWidth can be found on already existing pages with existing embeds

    // It's ok to use Embed specific width, because width can be not set only in embed card.
    // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
    width = DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide;
  }

  // Media wrapper controls the height of the box.
  // We can define this height
  // - via height directly
  // - via paddingBottom (if we have both height and width) which is a css trick to represent a ratio
  var mediaWrapperHeight;
  var paddingBottom;
  if (isHeightOnly) {
    mediaWrapperHeight = height;
  } else if (width !== undefined) {
    var mediaWrapperRatio = height / width * 100;
    paddingBottom = "".concat(mediaWrapperRatio.toFixed(3), "%");
    if (nodeType === 'embedCard') {
      // we want to set ratio of whole box (including header) buy knowing ratio of iframe itself

      // For some reason importing `embedHeaderHeight` from '@atlaskit/smart-card' breaks
      // packages/editor/editor-core/src/plugins/table/__tests__/unit/toolbar.ts 🤷‍️, but we have a test
      // that uses imported value, so it's should be good.
      paddingBottom = "calc(".concat(paddingBottom, " + 32px)");
    }
  }
  var _children = _slicedToArray(children, 2),
    media = _children[0],
    caption = _children[1];
  return jsx("div", _extends({
    ref: handleMediaSingleRef
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    ,
    css: MediaSingleDimensionHelper({
      width: width,
      layout: layout,
      containerWidth: containerWidth,
      mediaSingleWidth: mediaSingleWidth,
      fullWidthMode: fullWidthMode,
      isExtendedResizeExperienceOn: isPixelWidth,
      isInsideOfInlineExtension: isInsideOfInlineExtension
    }),
    "data-layout": layout,
    "data-width": mediaSingleWidth,
    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
    "data-node-type": nodeType
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: classnames('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
      'is-loading': isLoading,
      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
    })
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, dataAttributes), jsx(MediaWrapper, {
    hasFallbackContainer: hasFallbackContainer,
    height: mediaWrapperHeight,
    paddingBottom: paddingBottom
  }, media), caption);
}