@atlaskit/renderer
Version:
Renderer component
298 lines (291 loc) • 13.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.EmbedOrBlockCardInternal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("@emotion/react");
var _react2 = require("react");
var _smartCard = require("@atlaskit/smart-card");
var _ssr = require("@atlaskit/smart-card/ssr");
var _linkProvider = require("@atlaskit/link-provider");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _fallback = require("./fallback");
var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
var _consts = require("../../consts");
var _style = require("../../ui/Renderer/style");
var _getCardClickHandler = require("../utils/getCardClickHandler");
var _analyticsNext = require("@atlaskit/analytics-next");
var _PortalContext = require("../../ui/Renderer/PortalContext");
var _blockCard = _interopRequireDefault(require("./blockCard"));
/**
* @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 */
var embedCardWrapperStyles = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _PortalContext.usePortal)(props);
var embedIframeRef = (0, _react2.useRef)(null);
var onClick = (0, _getCardClickHandler.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 = (0, _react2.useState)(null),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
liveHeight = _useState2[0],
setLiveHeight = _useState2[1];
var _useState3 = (0, _react2.useState)(),
_useState4 = (0, _slicedToArray2.default)(_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 = _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT;
var originalWidth = _editorSharedStyles.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' ? _style.FullPagePadding * 2 : 0;
var _useState5 = (0, _react2.useState)(true),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
hasPreview = _useState6[0],
setPreviewAvailableState = _useState6[1];
var cardContext = (0, _react2.useContext)(_linkProvider.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 (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
data: analyticsData
}, (0, _react.jsx)(_ui.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 ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
}
var nonFullWidthSize = containerWidth;
if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
if (isContainerSizeGreaterThanMaxFullPageWidth) {
nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
} else {
nonFullWidthSize = containerWidth - padding;
}
}
var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
var useStickySafeCentering = (0, _expValEquals.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 && ((0, _platformFeatureFlags.fg)('platform_ssr_smartlink_embeds') || (0, _platformFeatureFlags.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 = (0, _react.jsx)(_ssr.CardSSR, (0, _extends2.default)({
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 = (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
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
(0, _react.jsx)(_editorSmartLinkDraggable.SmartLinkDraggable, {
url: url || '',
appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.EMBED,
source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.RENDERER
}, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
unsupportedComponent: _ui.UnsupportedBlock,
onSetLinkTarget: onSetLinkTarget
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
embedIframeRef: embedIframeRef,
onHeightUpdate: setLiveHeight
}, function () {
var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
var mediaSingle = (0, _react.jsx)(_ui.MediaSingle, {
css: uiMediaSingleStyles,
layout: layout,
width: originalWidth,
containerWidth: containerWidth,
pctWidth: width,
height: originalHeight,
fullWidthMode: isFullWidth,
nodeType: "embedCard",
lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
hasFallbackContainer: hasPreview,
isInsideOfInlineExtension: isInsideOfInlineExtension
}, (0, _react.jsx)("div", {
css: embedCardWrapperStyles
}, (0, _react.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 ? (0, _react.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: _consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
css: embedCardCenterWrapperStyles
}, mediaSingle) : mediaSingle;
}())))
);
}));
}
var EmbedOrBlockCardInternal = exports.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 = (0, _react2.useContext)(_ui.WidthContext),
width = _useContext.width;
var viewAsBlockCard = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout;
return viewAsBlockCard ? (0, _react.jsx)(_blockCard.default, {
url: url,
data: data,
eventHandlers: eventHandlers,
portal: portal,
layout: layout,
rendererAppearance: rendererAppearance,
smartLinks: smartLinks,
onSetLinkTarget: onSetLinkTarget
}) : (0, _react.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 = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
return (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
});
}, EmbedOrBlockCardInternal, EmbedCardInternal);
var _default = exports.default = EmbedCardWithCondition;