@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
142 lines • 7.67 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { commandWithMetadata, getButtonGroupOption, LinkToolbarButtonGroup } from '@atlaskit/editor-common/card';
import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
import { isSupportedInParent } from '@atlaskit/editor-common/utils';
import { Fragment } from '@atlaskit/editor-prosemirror/model';
import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
import { getResolvedAttributesFromStore } from '../pm-plugins/utils';
import { LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR } from './local-storage';
import { DiscoveryPulse } from './Pulse';
import { shouldRenderToolbarPulse } from './toolbar';
import { WithCardContext } from './WithCardContext';
// eslint-disable-next-line @repo/internal/react/no-class-components
export class LinkToolbarAppearance extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "renderDropdown", (view, cardContext) => {
var _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3, _cardContext$store2, _cardContext$store2$g;
const {
url,
intl,
currentAppearance,
editorState,
allowEmbeds,
allowBlockCards = true,
editorAnalyticsApi,
showUpgradeDiscoverability = true,
isDatasourceView,
areAnyNewToolbarFlagsEnabled
} = this.props;
const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, 'web');
const defaultCommand = () => false;
if (url) {
var _cardContext$store, _urlState$error;
const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
return null;
}
}
const isBlockCardLinkSupportedInParent = allowBlockCards ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
const isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
const embedOption = allowEmbeds && preview && {
appearance: 'embed',
title: intl.formatMessage(messages.embed),
onClick: (_setSelectedCardAppea = setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
selected: currentAppearance === 'embed',
hidden: false,
testId: 'embed-appearance',
disabled: !isEmbedCardLinkSupportedInParent,
tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
};
const blockCardOption = allowBlockCards && {
appearance: 'block',
title: intl.formatMessage(messages.block),
onClick: (_setSelectedCardAppea2 = setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
selected: currentAppearance === 'block' && !isDatasourceView,
testId: 'block-appearance',
disabled: !isBlockCardLinkSupportedInParent,
tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
};
const options = [{
title: intl.formatMessage(messages.url),
onClick: commandWithMetadata((_changeSelectedCardTo = changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
action: ACTION.CHANGED_TYPE
}),
selected: !currentAppearance && !isDatasourceView,
testId: 'url-appearance'
}, {
appearance: 'inline',
title: intl.formatMessage(messages.inline),
onClick: (_setSelectedCardAppea3 = setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
selected: currentAppearance === 'inline',
testId: 'inline-appearance'
}];
const dispatchCommand = fn => {
fn && fn(editorState, view && view.dispatch);
// Refocus the view to ensure the editor has focus
if (view && !view.hasFocus()) {
view.focus();
}
};
if (blockCardOption) {
options.push(blockCardOption);
}
if (embedOption) {
options.push(embedOption);
}
const LinkToolbarButtons = /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
key: "link-toolbar-button-group",
options: options.map(option => getButtonGroupOption(intl, areAnyNewToolbarFlagsEnabled, dispatchCommand, {
...option,
onClick: commandWithMetadata(option.onClick, {
inputMethod: INPUT_METHOD.FLOATING_TB
})
}))
});
const status = url ? cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : (_cardContext$store2$g = _cardContext$store2.getState()[url]) === null || _cardContext$store2$g === void 0 ? void 0 : _cardContext$store2$g.status : '';
const embedEnabled = embedOption ? !embedOption.disabled : false;
if (shouldRenderToolbarPulse(embedEnabled, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : '', status !== null && status !== void 0 ? status : '', showUpgradeDiscoverability)) {
const resolvedAnalyticsAttributes = getResolvedAttributesFromStore(url || '', currentAppearance || null, cardContext === null || cardContext === void 0 ? void 0 : cardContext.store);
return (
/*#__PURE__*/
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
React.createElement(AnalyticsContext, {
data: {
attributes: {
...resolvedAnalyticsAttributes
}
}
}, /*#__PURE__*/React.createElement(DiscoveryPulse, {
localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
testId: "toolbar-discovery-pulse"
}, LinkToolbarButtons))
);
}
return LinkToolbarButtons;
});
}
render() {
const {
editorView
} = this.props;
return /*#__PURE__*/React.createElement(WithCardContext, null, cardContext => this.renderDropdown(editorView, cardContext && cardContext.value));
}
}
export const getUnavailableMessage = (state, intl) => {
try {
const parentNode = state.selection.$from.node(1);
const parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
const tooltip = intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
node: parentName
});
return tooltip;
} catch (e) {
// eslint-disable-line no-unused-vars
return intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
node: intl.formatMessage(nodeNames.defaultBlockNode)
});
}
};