@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
256 lines (252 loc) • 12.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InlineCard = void 0;
exports.InlineCardNodeView = InlineCardNodeView;
exports.inlineCardNodeView = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _rafSchd = _interopRequireDefault(require("raf-schd"));
var _v = _interopRequireDefault(require("uuid/v4"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _smartCard = require("@atlaskit/smart-card");
var _ssr = require("@atlaskit/smart-card/ssr");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _actions = require("../pm-plugins/actions");
var _utils = require("../pm-plugins/utils");
var _toolbar = require("../ui/toolbar");
var _genericCard = require("./genericCard");
var _inlineCardWithAwareness = require("./inlineCardWithAwareness");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var _cardContext$value;
var node = _ref.node,
cardContext = _ref.cardContext,
actionOptions = _ref.actionOptions,
useAlternativePreloader = _ref.useAlternativePreloader,
view = _ref.view,
getPos = _ref.getPos,
propsOnClick = _ref.onClick,
onRes = _ref.onResolve,
isHovered = _ref.isHovered,
showHoverPreview = _ref.showHoverPreview,
hoverPreviewOptions = _ref.hoverPreviewOptions,
isPageSSRed = _ref.isPageSSRed,
pluginInjectionApi = _ref.pluginInjectionApi,
disablePreviewPanel = _ref.disablePreviewPanel;
var _node$attrs = node.attrs,
url = _node$attrs.url,
data = _node$attrs.data;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var refId = (0, _react.useRef)((0, _v.default)());
var removeCardDispatched = (0, _react.useRef)(false);
var _ref2 = (cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store) || {},
getSmartlinkState = _ref2.getState;
var cardState = getSmartlinkState === null || getSmartlinkState === void 0 ? void 0 : getSmartlinkState()[url || ''];
(0, _react.useEffect)(function () {
var id = refId.current;
removeCardDispatched.current = false;
return function () {
if ((0, _expValEquals.expValEquals)('platform_editor_inline_card_dispatch_guard', 'isEnabled', true) && removeCardDispatched.current) {
return;
}
removeCardDispatched.current = true;
var tr = view.state.tr;
(0, _actions.removeCard)({
id: id
})(tr);
view.dispatch(tr);
};
}, [getPos, view]);
var scrollContainer = (0, _react.useMemo)(
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
function () {
return (0, _ui.findOverflowScrollParent)(view.dom) || undefined;
}, [view.dom]);
var onResolve = (0, _react.useCallback)(function (data) {
if (!getPos || typeof getPos === 'boolean') {
return;
}
var title = data.title,
url = data.url;
// don't dispatch immediately since we might be in the middle of
// rendering a nodeview
(0, _rafSchd.default)(function () {
// prosemirror-bump-fix
var pos = getPos();
if (typeof pos !== 'number') {
return;
}
var tr = view.state.tr;
(0, _actions.registerCard)({
title: title,
url: url,
pos: pos,
id: refId.current
})(tr);
onRes === null || onRes === void 0 || onRes(tr, title);
view.dispatch(tr);
})();
}, [getPos, view, onRes]);
var onError = (0, _react.useCallback)(function (data) {
var url = data.url,
err = data.err;
if (err) {
throw err;
}
onResolve({
url: url
});
}, [onResolve]);
var handleOnClick = (0, _react.useCallback)(function (event) {
if (event.metaKey || event.ctrlKey) {
var _pluginInjectionApi$a;
var _ref3 = (_pluginInjectionApi$a = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a !== void 0 ? _pluginInjectionApi$a : {},
editorAnalyticsApi = _ref3.actions;
(0, _toolbar.visitCardLinkAnalytics)(editorAnalyticsApi, _analytics.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 || propsOnClick(event);
}
}, [propsOnClick, url, view, pluginInjectionApi]);
var onClick = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? handleOnClick : propsOnClick;
var card = (0, _react.useMemo)(function () {
if ((isPageSSRed || cardState && (0, _expValEquals.expValEquals)('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url) {
return /*#__PURE__*/_react.default.createElement(_ssr.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.default.createElement(_smartCard.Card, {
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.default.createElement(cardContext.Provider, {
value: cardContext.value
}, card) : data ? card : null;
});
var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
var selectorWithCard = function 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
};
};
var selectorWithoutCard = function 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
*/
function InlineCardNodeView(props) {
var _resolvedInlineSmartL;
var useAlternativePreloader = props.useAlternativePreloader,
node = props.node,
view = props.view,
getPos = props.getPos,
actionOptions = props.actionOptions,
allowEmbeds = props.allowEmbeds,
allowBlockCards = props.allowBlockCards,
enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
pluginInjectionApi = props.pluginInjectionApi,
onClickCallback = props.onClickCallback,
isPageSSRed = props.isPageSSRed,
provider = props.provider,
CompetitorPrompt = props.CompetitorPrompt;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, (0, _platformFeatureFlags.fg)('cc_dnd_smart_link_changeboard_po_template_gate') ? ['editorViewMode', 'card'] : ['editorViewMode'], (0, _platformFeatureFlags.fg)('cc_dnd_smart_link_changeboard_po_template_gate') ? selectorWithCard : selectorWithoutCard),
mode = _useSharedPluginState.mode,
resolvedInlineSmartLinks = _useSharedPluginState.resolvedInlineSmartLinks;
var url = node.attrs.url;
var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/_react.default.createElement(CompetitorPrompt, {
sourceUrl: url,
linkType: "inline"
}) : null;
(0, _react.useEffect)(function () {
if ((0, _expValEquals.expValEquals)('platform_editor_smartlink_local_cache', 'isEnabled', true)) {
// Refresh cache in the background
provider === null || provider === void 0 || provider.then(function (providerInstance) {
var _refreshCache, _ref4;
(_refreshCache = (_ref4 = providerInstance).refreshCache) === null || _refreshCache === void 0 || _refreshCache.call(_ref4, props.node);
});
}
}, [provider, props.node]);
var linkPosition = (0, _react.useMemo)(function () {
if (!getPos || typeof getPos === 'boolean') {
return undefined;
}
var pos = getPos();
return typeof pos === 'number' ? pos : undefined;
}, [getPos]);
var isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 || (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
var inlineCardContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
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 && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
return /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
url: url,
appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.INLINE,
source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR,
isChangeboardTarget: isChangeboardTarget
}, inlineCardContent);
}
var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref5) {
var inlineCardViewProducer = _ref5.inlineCardViewProducer;
return function (node, view, getPos, decorations) {
return inlineCardViewProducer(node, view, getPos, decorations);
};
};