@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
126 lines (124 loc) • 6.52 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
import InlineCardOverlay from '../InlineCardOverlay';
import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
import { DiscoveryPulse } from '../Pulse';
// editor adds a standard line-height that is bigger than an inline smart link
// due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
var loaderWrapperStyles = css({
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.loader-wrapper': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 'normal'
}
});
export var AwarenessWrapper = function AwarenessWrapper(_ref) {
var _cardContext$value2;
var cardContext = _ref.cardContext,
children = _ref.children,
getPos = _ref.getPos,
isInserted = _ref.isInserted,
isOverlayEnabled = _ref.isOverlayEnabled,
isSelected = _ref.isSelected,
isResolvedViewRendered = _ref.isResolvedViewRendered,
isPulseEnabled = _ref.isPulseEnabled,
markMostRecentlyInsertedLink = _ref.markMostRecentlyInsertedLink,
pluginInjectionApi = _ref.pluginInjectionApi,
setOverlayHoveredStyles = _ref.setOverlayHoveredStyles,
url = _ref.url,
appearance = _ref.appearance;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isHovered = _useState2[0],
setIsHovered = _useState2[1];
var linkPosition = useMemo(function () {
if (!getPos || typeof getPos === 'boolean') {
return undefined;
}
var pos = getPos();
return typeof pos === 'number' ? pos : undefined;
}, [getPos]);
var _useLinkUpgradeDiscov = useLinkUpgradeDiscoverability({
url: url,
linkPosition: linkPosition || -1,
cardContext: cardContext === null || cardContext === void 0 ? void 0 : cardContext.value,
pluginInjectionApi: pluginInjectionApi,
isOverlayEnabled: isOverlayEnabled,
isPulseEnabled: isPulseEnabled
}),
shouldShowLinkPulse = _useLinkUpgradeDiscov.shouldShowLinkPulse,
shouldShowToolbarPulse = _useLinkUpgradeDiscov.shouldShowToolbarPulse,
shouldShowLinkOverlay = _useLinkUpgradeDiscov.shouldShowLinkOverlay,
isLinkMostRecentlyInserted = _useLinkUpgradeDiscov.isLinkMostRecentlyInserted;
// If the toolbar pulse has not yet been invalidated and this is a case where we will be showing it,
// we need to invalidate the link pulse too. Toolbar pulse will be invalidated in the corresponding component.
if (isSelected && shouldShowToolbarPulse && !isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR)) {
markLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
}
useEffect(function () {
if (shouldShowLinkOverlay && isLinkMostRecentlyInserted) {
markMostRecentlyInsertedLink(true);
}
}, [isLinkMostRecentlyInserted, markMostRecentlyInsertedLink, shouldShowLinkOverlay]);
var handleOverlayChange = useCallback(function (isHovered) {
setIsHovered(isHovered);
setOverlayHoveredStyles(isHovered);
}, [setOverlayHoveredStyles]);
var cardWithOverlay = useMemo(function () {
if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1') && !editorExperiment('platform_editor_preview_panel_linking_exp', true)) {
return jsx(InlineCardOverlay, {
isSelected: isSelected,
isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseEnter: function onMouseEnter() {
return handleOverlayChange(true);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseLeave: function onMouseLeave() {
return handleOverlayChange(false);
},
url: url
}, children);
}
return children;
}, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
var isInline = appearance === 'inline';
var placeholderUniqId = linkPosition || 0;
return useMemo(function () {
var _cardContext$value;
return jsx("span", {
css: shouldShowLinkPulse && loaderWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "card",
"data-vc": "awareness-wrapper",
"data-ssr-placeholder": "awareness-wrapper-".concat(placeholderUniqId),
"data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
}, jsx(AnalyticsContext
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
data: {
attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
}
}, jsx(DiscoveryPulse, {
localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
discoveryMode: "start",
shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
testId: "link-discovery-pulse",
isInline: isInline
}, cardWithOverlay)));
}, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
};