@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
183 lines (181 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getLinkAppearanceDropdown = exports.LinkAppearanceMenu = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _messages = require("@atlaskit/editor-common/messages");
var _utils = require("@atlaskit/editor-common/utils");
var _model = require("@atlaskit/editor-prosemirror/model");
var _linkProvider = require("@atlaskit/link-provider");
var _menu = require("@atlaskit/menu");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _doc = require("../pm-plugins/doc");
var _DatasourceDropdownOption = require("./DatasourceDropdownOption");
var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
var url = _ref.url,
intl = _ref.intl,
currentAppearance = _ref.currentAppearance,
editorState = _ref.editorState,
allowEmbeds = _ref.allowEmbeds,
_ref$allowBlockCards = _ref.allowBlockCards,
allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
allowDatasource = _ref.allowDatasource,
editorAnalyticsApi = _ref.editorAnalyticsApi,
isDatasourceView = _ref.isDatasourceView,
dispatchCommand = _ref.dispatchCommand,
settingsConfig = _ref.settingsConfig;
var cardContext = (0, _linkProvider.useSmartCardContext)();
var preview = allowEmbeds && cardContext && url && ((_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.extractors.getPreview(url, 'web'));
var defaultCommand = function defaultCommand() {
return false;
};
if (url) {
var _cardContext$value2, _urlState$error;
var urlState = (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2 = _cardContext$value2.store) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.getState()[url];
if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
return null;
}
}
var isBlockCardLinkSupportedInParent = allowBlockCards ? (0, _utils.isSupportedInParent)(editorState, _model.Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
var isEmbedCardLinkSupportedInParent = allowEmbeds ? (0, _utils.isSupportedInParent)(editorState, _model.Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
var embedOption = allowEmbeds && preview && {
appearance: 'embed',
title: intl.formatMessage(_messages.cardMessages.embed),
onClick: (_setSelectedCardAppea = (0, _doc.setSelectedCardAppearance)('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
selected: currentAppearance === 'embed',
hidden: false,
testId: 'embed-appearance',
disabled: !isEmbedCardLinkSupportedInParent,
tooltip: isEmbedCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl),
description: (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? intl.formatMessage(_messages.cardMessages.embedToBlockCardWarning) : undefined
};
var blockCardOption = allowBlockCards && {
appearance: 'block',
title: intl.formatMessage(_messages.cardMessages.block),
onClick: (_setSelectedCardAppea2 = (0, _doc.setSelectedCardAppearance)('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
selected: currentAppearance === 'block' && !isDatasourceView,
testId: 'block-appearance',
disabled: !isBlockCardLinkSupportedInParent,
tooltip: isBlockCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl)
};
var options = [{
title: intl.formatMessage(_messages.cardMessages.url),
onClick: (0, _card.commandWithMetadata)((_changeSelectedCardTo = (0, _doc.changeSelectedCardToLink)(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
action: _analytics.ACTION.CHANGED_TYPE
}),
selected: !currentAppearance && !isDatasourceView,
testId: 'url-appearance'
}, {
appearance: 'inline',
title: intl.formatMessage(_messages.cardMessages.inline),
onClick: (_setSelectedCardAppea3 = (0, _doc.setSelectedCardAppearance)('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
selected: currentAppearance === 'inline',
testId: 'inline-appearance'
}];
if (blockCardOption) {
options.push(blockCardOption);
}
if (embedOption) {
options.push(embedOption);
}
var finalOptions = options.map(function (option) {
return (0, _card.getDropdownOption)(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
onClick: (0, _card.commandWithMetadata)(option.onClick, {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
})
}));
});
var Icon;
if ('icon' in settingsConfig && settingsConfig.icon !== undefined) {
Icon = settingsConfig.icon;
}
// TODO: ED-26961 - packages/editor/editor-plugin-card/src/ui/LinkToolbarAppearance.tsx supports change boarding via pulse
// this implementation doesn't
return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.Section, null, finalOptions.map(function (option) {
return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
key: option.title,
iconBefore: option.icon
// eslint-disable-next-line @atlassian/perf-linting/detect-unnecessary-rerenders, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return option.onClick();
},
isSelected: option.selected,
description: option.description,
shouldDescriptionWrap: true
}, option.title);
}), /*#__PURE__*/_react.default.createElement(_DatasourceDropdownOption.DatasourceDropdownOption, {
allowDatasource: allowDatasource,
intl: intl,
url: url !== null && url !== void 0 ? url : '',
selected: Boolean(isDatasourceView),
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
dispatchCommand: dispatchCommand
})), 'href' in settingsConfig && settingsConfig.href && /*#__PURE__*/_react.default.createElement(_menu.Section, {
hasSeparator: true
}, /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
iconBefore: Icon && /*#__PURE__*/_react.default.createElement(Icon, {
label: "Settings"
}),
href: settingsConfig.href,
target: 'target' in settingsConfig ? settingsConfig.target : undefined
}, intl.formatMessage(_messages.linkToolbarMessages.preferencesLink))));
};
var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2) {
var url = _ref2.url,
intl = _ref2.intl,
currentAppearance = _ref2.currentAppearance,
editorState = _ref2.editorState,
allowEmbeds = _ref2.allowEmbeds,
_ref2$allowBlockCards = _ref2.allowBlockCards,
allowBlockCards = _ref2$allowBlockCards === void 0 ? true : _ref2$allowBlockCards,
allowDatasource = _ref2.allowDatasource,
editorAnalyticsApi = _ref2.editorAnalyticsApi,
_ref2$showUpgradeDisc = _ref2.showUpgradeDiscoverability,
showUpgradeDiscoverability = _ref2$showUpgradeDisc === void 0 ? true : _ref2$showUpgradeDisc,
isDatasourceView = _ref2.isDatasourceView,
settingsConfig = _ref2.settingsConfig,
areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
var alignmentItemOptions = {
render: function render(props) {
return /*#__PURE__*/_react.default.createElement(LinkAppearanceMenu, {
url: url,
intl: intl,
currentAppearance: currentAppearance,
editorState: editorState,
allowEmbeds: allowEmbeds,
allowBlockCards: allowBlockCards,
editorAnalyticsApi: editorAnalyticsApi,
showUpgradeDiscoverability: showUpgradeDiscoverability,
isDatasourceView: isDatasourceView,
allowDatasource: allowDatasource,
dispatchCommand: props.dispatchCommand,
settingsConfig: settingsConfig,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
},
width: 200,
height: 400
};
var currentAppearanceDisplayInformation = isDatasourceView ? _DatasourceDropdownOption.datasourceDisplayInformation : _card.appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
var alignmentToolbarItem = {
id: 'card-appearance',
testId: 'card-appearance-dropdown',
type: 'dropdown',
options: alignmentItemOptions,
title: intl.formatMessage(currentAppearanceDisplayInformation.title),
iconBefore: currentAppearanceDisplayInformation.icon
};
return alignmentToolbarItem;
};