@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
164 lines • 10.2 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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 var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
function LinkToolbarAppearance() {
var _this;
_classCallCheck(this, LinkToolbarAppearance);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, LinkToolbarAppearance, [].concat(args));
_defineProperty(_this, "renderDropdown", function (view, cardContext) {
var _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3, _cardContext$store2;
var _this$props = _this.props,
url = _this$props.url,
intl = _this$props.intl,
currentAppearance = _this$props.currentAppearance,
editorState = _this$props.editorState,
allowEmbeds = _this$props.allowEmbeds,
_this$props$allowBloc = _this$props.allowBlockCards,
allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
editorAnalyticsApi = _this$props.editorAnalyticsApi,
_this$props$showUpgra = _this$props.showUpgradeDiscoverability,
showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra,
isDatasourceView = _this$props.isDatasourceView,
areAnyNewToolbarFlagsEnabled = _this$props.areAnyNewToolbarFlagsEnabled;
var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, 'web');
var defaultCommand = function defaultCommand() {
return false;
};
if (url) {
var _cardContext$store, _urlState$error;
var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.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 ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
var isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
var 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)
};
var 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)
};
var 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'
}];
var dispatchCommand = function 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);
}
var LinkToolbarButtons = /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
key: "link-toolbar-button-group",
options: options.map(function (option) {
return getButtonGroupOption(intl, areAnyNewToolbarFlagsEnabled, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
onClick: commandWithMetadata(option.onClick, {
inputMethod: INPUT_METHOD.FLOATING_TB
})
}));
})
});
var status = url ? cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 || (_cardContext$store2 = _cardContext$store2.getState()[url]) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.status : '';
var embedEnabled = embedOption ? !embedOption.disabled : false;
if (shouldRenderToolbarPulse(embedEnabled, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : '', status !== null && status !== void 0 ? status : '', showUpgradeDiscoverability)) {
var 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: _objectSpread({}, resolvedAnalyticsAttributes)
}
}, /*#__PURE__*/React.createElement(DiscoveryPulse, {
localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
testId: "toolbar-discovery-pulse"
}, LinkToolbarButtons))
);
}
return LinkToolbarButtons;
});
return _this;
}
_inherits(LinkToolbarAppearance, _React$Component);
return _createClass(LinkToolbarAppearance, [{
key: "render",
value: function render() {
var _this2 = this;
var editorView = this.props.editorView;
return /*#__PURE__*/React.createElement(WithCardContext, null, function (cardContext) {
return _this2.renderDropdown(editorView, cardContext && cardContext.value);
});
}
}]);
}(React.Component);
export var getUnavailableMessage = function getUnavailableMessage(state, intl) {
try {
var parentNode = state.selection.$from.node(1);
var parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
var 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)
});
}
};