@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
254 lines (252 loc) • 10.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
import rafSchedule from 'raf-schd';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
import { fg } from '@atlaskit/platform-feature-flags';
import { Card as SmartCard } from '@atlaskit/smart-card';
import { CardSSR } from '@atlaskit/smart-card/ssr';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { registerCard, removeCard } from '../pm-plugins/actions';
import { getAwarenessProps } from '../pm-plugins/utils';
import { visitCardLinkAnalytics } from '../ui/toolbar';
import { Card } from './genericCard';
import { InlineCardWithAwareness } from './inlineCardWithAwareness';
export const InlineCard = /*#__PURE__*/memo(({
node,
cardContext,
actionOptions,
useAlternativePreloader,
view,
getPos,
onClick: propsOnClick,
onResolve: onRes,
isHovered,
showHoverPreview,
hoverPreviewOptions,
isPageSSRed,
pluginInjectionApi,
disablePreviewPanel
}) => {
var _cardContext$value;
const {
url,
data
} = node.attrs;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
const refId = useRef(uuid());
const removeCardDispatched = useRef(false);
const {
getState: getSmartlinkState
} = (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store) || {};
const cardState = getSmartlinkState === null || getSmartlinkState === void 0 ? void 0 : getSmartlinkState()[url || ''];
useEffect(() => {
const id = refId.current;
removeCardDispatched.current = false;
return () => {
if (expValEquals('platform_editor_inline_card_dispatch_guard', 'isEnabled', true) && removeCardDispatched.current) {
return;
}
removeCardDispatched.current = true;
const {
tr
} = view.state;
removeCard({
id
})(tr);
view.dispatch(tr);
};
}, [getPos, view]);
const scrollContainer = useMemo(
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
() => findOverflowScrollParent(view.dom) || undefined, [view.dom]);
const onResolve = useCallback(data => {
if (!getPos || typeof getPos === 'boolean') {
return;
}
const {
title,
url
} = data;
// don't dispatch immediately since we might be in the middle of
// rendering a nodeview
rafSchedule(() => {
// prosemirror-bump-fix
const pos = getPos();
if (typeof pos !== 'number') {
return;
}
const tr = view.state.tr;
registerCard({
title,
url,
pos,
id: refId.current
})(tr);
onRes === null || onRes === void 0 ? void 0 : onRes(tr, title);
view.dispatch(tr);
})();
}, [getPos, view, onRes]);
const onError = useCallback(data => {
const {
url,
err
} = data;
if (err) {
throw err;
}
onResolve({
url
});
}, [onResolve]);
const handleOnClick = useCallback(event => {
if (event.metaKey || event.ctrlKey) {
var _pluginInjectionApi$a;
const {
actions: editorAnalyticsApi
} = (_pluginInjectionApi$a = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a !== void 0 ? _pluginInjectionApi$a : {};
visitCardLinkAnalytics(editorAnalyticsApi, INPUT_METHOD.META_CLICK)(view.state, view.dispatch);
window.open(url, '_blank');
} else {
// only trigger the provided onClick callback if the meta key or ctrl key is not pressed
propsOnClick === null || propsOnClick === void 0 ? void 0 : propsOnClick(event);
}
}, [propsOnClick, url, view, pluginInjectionApi]);
const onClick = editorExperiment('platform_editor_controls', 'variant1') ? handleOnClick : propsOnClick;
const card = useMemo(() => {
if ((isPageSSRed || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url) {
return /*#__PURE__*/React.createElement(CardSSR, {
key: url,
url: url,
appearance: "inline",
onClick: onClick,
container: scrollContainer,
onResolve: onResolve,
onError: onError,
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
actionOptions: actionOptions,
isHovered: isHovered,
showHoverPreview: showHoverPreview,
hoverPreviewOptions: hoverPreviewOptions,
disablePreviewPanel: disablePreviewPanel,
hideIconLoadingSkeleton: true
});
}
return /*#__PURE__*/React.createElement(SmartCard, {
key: url,
url: url !== null && url !== void 0 ? url : data.url,
appearance: "inline",
onClick: onClick,
container: scrollContainer,
onResolve: onResolve,
onError: onError,
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
actionOptions: actionOptions,
isHovered: isHovered,
showHoverPreview: showHoverPreview,
hoverPreviewOptions: hoverPreviewOptions,
disablePreviewPanel: disablePreviewPanel
});
}, [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, disablePreviewPanel, cardState]);
// [WS-2307]: we only render card wrapped into a Provider when the value is ready,
// otherwise if we got data, we can render the card directly since it doesn't need the Provider
return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
value: cardContext.value
}, card) : data ? card : null;
});
const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
const selectorWithCard = states => {
var _states$editorViewMod, _states$cardState;
return {
mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
resolvedInlineSmartLinks: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.resolvedInlineSmartLinks
};
};
const selectorWithoutCard = states => {
var _states$editorViewMod2;
return {
mode: (_states$editorViewMod2 = states.editorViewModeState) === null || _states$editorViewMod2 === void 0 ? void 0 : _states$editorViewMod2.mode,
resolvedInlineSmartLinks: undefined
};
};
/**
* Inline card node view component that renders a Smart Link inline card within the editor.
*
* @param props
* @example
*/
export function InlineCardNodeView(props) {
var _resolvedInlineSmartL;
const {
useAlternativePreloader,
node,
view,
getPos,
actionOptions,
allowEmbeds,
allowBlockCards,
enableInlineUpgradeFeatures,
pluginInjectionApi,
onClickCallback,
isPageSSRed,
provider,
CompetitorPrompt
} = props;
const {
mode,
resolvedInlineSmartLinks
} = useSharedPluginStateWithSelector(pluginInjectionApi, fg('cc_dnd_smart_link_changeboard_po_template_gate') ? ['editorViewMode', 'card'] : ['editorViewMode'], fg('cc_dnd_smart_link_changeboard_po_template_gate') ? selectorWithCard : selectorWithoutCard);
const url = node.attrs.url;
const CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
sourceUrl: url,
linkType: "inline"
}) : null;
useEffect(() => {
if (expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) {
// Refresh cache in the background
provider === null || provider === void 0 ? void 0 : provider.then(providerInstance => {
var _refreshCache, _ref;
(_refreshCache = (_ref = providerInstance).refreshCache) === null || _refreshCache === void 0 ? void 0 : _refreshCache.call(_ref, props.node);
});
}
}, [provider, props.node]);
const linkPosition = useMemo(() => {
if (!getPos || typeof getPos === 'boolean') {
return undefined;
}
const pos = getPos();
return typeof pos === 'number' ? pos : undefined;
}, [getPos]);
const isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 ? void 0 : (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
const inlineCardContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
node: node,
view: view,
getPos: getPos,
actionOptions: actionOptions,
useAlternativePreloader: useAlternativePreloader,
pluginInjectionApi: pluginInjectionApi,
onClickCallback: onClickCallback,
isPageSSRed: isPageSSRed,
provider: provider,
appearance: "inline"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
url: url,
appearance: SMART_LINK_APPEARANCE.INLINE,
source: SMART_LINK_DRAG_TYPES.EDITOR,
isChangeboardTarget: isChangeboardTarget
}, inlineCardContent);
}
export const inlineCardNodeView = ({
inlineCardViewProducer
}) => (node, view, getPos, decorations) => {
return inlineCardViewProducer(node, view, getPos, decorations);
};