@atlaskit/renderer
Version:
Renderer component
290 lines (285 loc) • 12.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable jsdoc/check-tag-names */
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import { useContext, useState, useRef } from 'react';
import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
import { CardSSR } from '@atlaskit/smart-card/ssr';
import { SmartCardContext } from '@atlaskit/link-provider';
import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { CardErrorBoundary } from './fallback';
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
import { RendererCssClassName } from '../../consts';
import { FullPagePadding } from '../../ui/Renderer/style';
import { getCardClickHandler } from '../utils/getCardClickHandler';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { usePortal } from '../../ui/Renderer/PortalContext';
import BlockCard from './blockCard';
var embedCardWrapperStyles = css({
width: '100%',
height: '100%',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'> div': {
height: '100%'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.loader-wrapper': {
height: '100%'
},
margin: '0 auto'
});
var embedCardCenterWrapperStyles = css({
// Match MediaSingle calcMargin(layout) default for wide/full-width: 24px top/bottom (so wrapper participates in collapse)
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- Matches editor-common MediaSingle calcMargin
margin: '24px 0'
});
// Legacy centering when platform_editor_flex_based_centering is off.
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var uIMediaSingleLayoutStylesLegacy = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
transform: 'translateX(-50%)'
});
function EmbedCardInternal(props) {
var _smartLinks$frameStyl;
var url = props.url,
data = props.data,
eventHandlers = props.eventHandlers,
layout = props.layout,
width = props.width,
isInsideOfBlockNode = props.isInsideOfBlockNode,
rendererAppearance = props.rendererAppearance,
smartLinks = props.smartLinks,
isInsideOfInlineExtension = props.isInsideOfInlineExtension,
onSetLinkTarget = props.onSetLinkTarget;
var portal = usePortal(props);
var embedIframeRef = useRef(null);
var onClick = getCardClickHandler(eventHandlers, url);
var _ref = smartLinks || {},
actionOptions = _ref.actionOptions;
var platform = 'web';
var cardProps = {
url: url,
onClick: onClick,
container: portal,
platform: platform,
frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : 'show',
actionOptions: actionOptions,
CompetitorPrompt: smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.CompetitorPrompt
};
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
liveHeight = _useState2[0],
setLiveHeight = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
aspectRatio = _useState4[0],
setAspectRatio = _useState4[1];
var height = liveHeight || props.originalHeight;
// We start with height and width defined with default values
var originalHeight = DEFAULT_EMBED_CARD_HEIGHT;
var originalWidth = DEFAULT_EMBED_CARD_WIDTH;
// Then can override height and width with values from ADF if available
if (props.originalHeight && props.originalWidth) {
originalHeight = props.originalHeight;
originalWidth = props.originalWidth;
}
// Then we can override it with aspectRatio that is comming from iframely via `resolve()`
if (aspectRatio) {
originalHeight = 1;
originalWidth = aspectRatio;
}
// And finally if iframe sends live `height` events we use that as most precise measure.
var isHeightOnlyMode = !(props.originalHeight && props.originalWidth) || liveHeight;
if (height && isHeightOnlyMode) {
originalHeight = height;
originalWidth = undefined;
}
var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
var _useState5 = useState(true),
_useState6 = _slicedToArray(_useState5, 2),
hasPreview = _useState6[0],
setPreviewAvailableState = _useState6[1];
var cardContext = useContext(SmartCardContext);
var onResolve = function onResolve(_ref2) {
var resolvedAspectRatio = _ref2.aspectRatio;
var hasPreviewOnResolve = !!(cardContext && url && cardContext.extractors.getPreview(url, platform));
if (!hasPreviewOnResolve) {
setPreviewAvailableState(false);
}
setAspectRatio(resolvedAspectRatio);
};
var analyticsData = {
attributes: {
location: 'renderer'
},
// Below is added for the future implementation of Linking Platform namespaced analytic context
location: 'renderer'
};
return jsx(AnalyticsContext, {
data: analyticsData
}, jsx(WidthConsumer, null, function (_ref3) {
var documentWidth = _ref3.width;
var isFullWidth = rendererAppearance === 'full-width';
var containerWidth = documentWidth;
if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && !containerWidth) {
// EDM-8114: When we are rendering on SSR, we have no idea what the width is.
containerWidth = isFullWidth ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
}
var nonFullWidthSize = containerWidth;
if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= akEditorDefaultLayoutWidth;
if (isContainerSizeGreaterThanMaxFullPageWidth) {
nonFullWidthSize = akEditorDefaultLayoutWidth;
} else {
nonFullWidthSize = containerWidth - padding;
}
}
var lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? useStickySafeCentering ? undefined : uIMediaSingleLayoutStylesLegacy : '';
var onError = function onError(_ref4) {
var err = _ref4.err;
if (err) {
throw err;
}
};
var cardComponent;
if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url && (fg('platform_ssr_smartlink_embeds') || fg('jfp-magma-ssr-iv-editor-links'))) {
var _smartLinks$frameStyl2;
var ssrCardProps = {
url: url,
onClick: onClick,
container: portal,
platform: platform,
frameStyle: (_smartLinks$frameStyl2 = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl2 !== void 0 ? _smartLinks$frameStyl2 : 'show',
actionOptions: actionOptions
};
cardComponent = jsx(CardSSR, _extends({
appearance: "embed"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, ssrCardProps, {
onResolve: onResolve,
inheritDimensions: true,
embedIframeRef: embedIframeRef,
onError: onError
}));
} else {
cardComponent = jsx(Card, _extends({
appearance: "embed"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps, {
onResolve: onResolve,
inheritDimensions: true,
embedIframeRef: embedIframeRef,
onError: onError
}));
}
return (
// Ignored via go/ees005
jsx(SmartLinkDraggable, {
url: url || '',
appearance: SMART_LINK_APPEARANCE.EMBED,
source: SMART_LINK_DRAG_TYPES.RENDERER
}, jsx(CardErrorBoundary, _extends({
unsupportedComponent: UnsupportedBlock,
onSetLinkTarget: onSetLinkTarget
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), jsx(EmbedResizeMessageListener, {
embedIframeRef: embedIframeRef,
onHeightUpdate: setLiveHeight
}, function () {
var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
var mediaSingle = jsx(UIMediaSingle, {
css: uiMediaSingleStyles,
layout: layout,
width: originalWidth,
containerWidth: containerWidth,
pctWidth: width,
height: originalHeight,
fullWidthMode: isFullWidth,
nodeType: "embedCard",
lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
hasFallbackContainer: hasPreview,
isInsideOfInlineExtension: isInsideOfInlineExtension
}, jsx("div", {
css: embedCardWrapperStyles
}, jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "embedCardView-content-wrap",
"data-embed-card": true,
"data-layout": layout,
"data-width": width,
"data-card-data": data ? JSON.stringify(data) : undefined,
"data-card-url": url,
"data-card-original-height": originalHeight
}, cardComponent)));
return useCenterWrapper ? jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
css: embedCardCenterWrapperStyles
}, mediaSingle) : mediaSingle;
}())))
);
}));
}
export var EmbedOrBlockCardInternal = function EmbedOrBlockCardInternal(_ref5) {
var url = _ref5.url,
data = _ref5.data,
eventHandlers = _ref5.eventHandlers,
portal = _ref5.portal,
originalHeight = _ref5.originalHeight,
originalWidth = _ref5.originalWidth,
embedWidth = _ref5.width,
layout = _ref5.layout,
rendererAppearance = _ref5.rendererAppearance,
isInsideOfBlockNode = _ref5.isInsideOfBlockNode,
smartLinks = _ref5.smartLinks,
isInsideOfInlineExtension = _ref5.isInsideOfInlineExtension,
onSetLinkTarget = _ref5.onSetLinkTarget;
var _useContext = useContext(WidthContext),
width = _useContext.width;
var viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
return viewAsBlockCard ? jsx(BlockCard, {
url: url,
data: data,
eventHandlers: eventHandlers,
portal: portal,
layout: layout,
rendererAppearance: rendererAppearance,
smartLinks: smartLinks,
onSetLinkTarget: onSetLinkTarget
}) : jsx(EmbedCardInternal, {
url: url,
data: data,
eventHandlers: eventHandlers,
portal: portal,
originalHeight: originalHeight,
originalWidth: originalWidth,
width: embedWidth,
layout: layout,
rendererAppearance: rendererAppearance,
isInsideOfBlockNode: isInsideOfBlockNode,
smartLinks: smartLinks,
isInsideOfInlineExtension: isInsideOfInlineExtension,
onSetLinkTarget: onSetLinkTarget
});
};
var EmbedCardWithCondition = componentWithCondition(function () {
return editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
});
}, EmbedOrBlockCardInternal, EmbedCardInternal);
export default EmbedCardWithCondition;