@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
159 lines (153 loc) • 7.45 kB
JavaScript
"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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _vcMedia = require("@atlaskit/react-ufo/vc-media");
var _constants = require("../../media-single/constants");
var _utils = require("../../media-single/utils");
var _richMediaUtils = require("../../utils/rich-media-utils");
var _styled = require("./styled");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
/**
* MediaSingle
* @param root0
* @param root0.layout
* @param root0.width
* @param root0.height
* @param root0.containerWidth
* @param root0.isLoading
* @param root0.pctWidth
* @param root0.size
* @param root0.className
* @param root0.children
* @param root0.nodeType
* @param root0.fullWidthMode
* @param root0.lineLength
* @param root0.hasFallbackContainer
* @param root0.handleMediaSingleRef
* @param root0.isInsideOfInlineExtension
* @param root0.dataAttributes
* @param root0.isInRenderer
* @example
*/
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,
_ref$isInRenderer = _ref.isInRenderer,
isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
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
// 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: (0, _styled.MediaSingleDimensionHelper)({
width: width,
layout: layout,
containerWidth: containerWidth,
mediaSingleWidth: mediaSingleWidth,
fullWidthMode: fullWidthMode,
isExtendedResizeExperienceOn: isPixelWidth,
isInsideOfInlineExtension: isInsideOfInlineExtension,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
isInRenderer: isInRenderer && (0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')
})
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/platform/no-preconditioning
}, !(0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') ? {} : {
'data-layout': layout
}, {
"data-width": mediaSingleWidth,
"data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
"data-node-type": nodeType,
"data-vc": "media-single"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
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'
})
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, dataAttributes, _vcMedia.VcMediaWrapperProps), (0, _react2.jsx)(_styled.MediaWrapper, {
hasFallbackContainer: hasFallbackContainer,
height: mediaWrapperHeight,
paddingBottom: paddingBottom
}, media), caption);
}