@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
96 lines • 4 kB
JavaScript
import React from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { linkMessages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
import PanelRightIcon from '@atlaskit/icon/core/panel-right';
import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
import { useSmartLinkContext } from '@atlaskit/link-provider';
import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
import { appearanceForLink } from '../analytics/utils';
export const OpenPreviewPanelToolbarButton = ({
node,
intl,
areAnyNewToolbarFlagsEnabled,
editorAnalyticsApi,
editorView
}) => {
const {
store,
isPreviewPanelAvailable,
openPreviewPanel
} = useSmartLinkContext();
const url = node.attrs.url;
const display = appearanceForLink(node);
const cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
if (cardState) {
const ari = getObjectAri(cardState.details);
const name = getObjectName(cardState.details);
const iconUrl = getObjectIconUrl(cardState.details);
const isPanelAvailable = ari && (isPreviewPanelAvailable === null || isPreviewPanelAvailable === void 0 ? void 0 : isPreviewPanelAvailable({
ari
}));
const handleOpenGlancePanelClick = () => {
if (openPreviewPanel && isPanelAvailable) {
var _extractSmartLinkEmbe;
openPreviewPanel({
url,
ari,
name: name || '',
iconUrl,
panelData: {
embedUrl: expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') ? (_extractSmartLinkEmbe = extractSmartLinkEmbed(cardState === null || cardState === void 0 ? void 0 : cardState.details)) === null || _extractSmartLinkEmbe === void 0 ? void 0 : _extractSmartLinkEmbe.src : undefined
}
});
}
editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.SMART_LINK,
actionSubjectId: ACTION_SUBJECT_ID.TOOLBAR_PREVIEW,
attributes: {
previewType: 'panel',
...getResolvedAttributesFromStore(url, display, store)
},
eventType: EVENT_TYPE.UI
});
};
const title = intl.formatMessage(linkMessages.openPreviewPanel);
const icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/React.createElement(PanelRightIcon, {
label: "",
spacing: "spacious"
}) :
/*#__PURE__*/
// This is a hack required for Jira until areToolbarFlagsEnabled are enabled to ensure the icon has padding
// Padding is removed when areToolbarFlagsEnabled for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
React.createElement(Inline, {
as: "span",
space: "space.050",
alignBlock: "center"
}, /*#__PURE__*/React.createElement(Box, {
as: "span",
"aria-hidden": true,
role: "presentation"
}), /*#__PURE__*/React.createElement(PanelRightIcon, {
label: "",
spacing: "spacious"
}), /*#__PURE__*/React.createElement(Box, {
as: "span",
"aria-hidden": true,
role: "presentation"
}));
if (openPreviewPanel && isPanelAvailable) {
return /*#__PURE__*/React.createElement(Flex, {
gap: "space.050"
}, /*#__PURE__*/React.createElement(Button, {
testId: "open-preview-panel-floating-toolbar-button",
onClick: handleOpenGlancePanelClick,
icon: icon,
title: title,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}
}
return null;
};