@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
143 lines (139 loc) • 5.98 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// 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
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
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';
/**
* 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
*/
export default function MediaSingle({
layout,
width,
height,
containerWidth = width,
isLoading = false,
pctWidth,
size,
className,
children: propsChildren,
nodeType = 'mediaSingle',
fullWidthMode,
lineLength: editorWidth,
hasFallbackContainer = true,
handleMediaSingleRef,
isInsideOfInlineExtension = false,
dataAttributes,
isInRenderer = false
}) {
const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
const 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.
const isHeightOnly = width === undefined;
if (mediaSingleWidth) {
const 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
let mediaWrapperHeight;
let paddingBottom;
if (isHeightOnly) {
mediaWrapperHeight = height;
} else if (width !== undefined) {
const mediaWrapperRatio = height / width * 100;
paddingBottom = `${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(${paddingBottom} + 32px)`;
}
}
const [media, caption] = children;
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,
layout,
containerWidth,
mediaSingleWidth,
fullWidthMode,
isExtendedResizeExperienceOn: isPixelWidth,
isInsideOfInlineExtension,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
isInRenderer: isInRenderer && fg('media-perf-uplift-mutation-fix')
})
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/platform/no-preconditioning
}, !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: classnames('rich-media-item mediaSingleView-content-wrap', `image-${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, VcMediaWrapperProps), jsx(MediaWrapper, {
hasFallbackContainer: hasFallbackContainer,
height: mediaWrapperHeight,
paddingBottom: paddingBottom
}, media), caption);
}