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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = MediaSingle;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _constants = require("../../media-single/constants");
var _utils = require("../../media-single/utils");
var _richMediaUtils = require("../../utils/rich-media-utils");
var _styled = require("./styled");
/** @jsx jsx */

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.default.Children.toArray(propsChildren);
  if (!mediaSingleWidth && (0, _richMediaUtils.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 = (0, _utils.getMediaSinglePixelWidth)(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, _constants.MEDIA_SINGLE_GUTTER_SIZE);
    if (isHeightOnly) {
      width = pxWidth - _editorSharedStyles.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 = _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH - _editorSharedStyles.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 = (0, _slicedToArray2.default)(children, 2),
    media = _children[0],
    caption = _children[1];
  return (0, _react2.jsx)("div", (0, _extends2.default)({
    ref: handleMediaSingleRef,
    css: (0, _styled.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,
    className: (0, _classnames.default)('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
      'is-loading': isLoading,
      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
    })
  }, dataAttributes), (0, _react2.jsx)(_styled.MediaWrapper, {
    hasFallbackContainer: hasFallbackContainer,
    height: mediaWrapperHeight,
    paddingBottom: paddingBottom
  }, media), caption);
}