@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
173 lines (172 loc) • 11.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getUnavailableMessage = exports.LinkToolbarAppearance = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _analyticsNext = require("@atlaskit/analytics-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _utils = require("@atlaskit/editor-common/utils");
var _model = require("@atlaskit/editor-prosemirror/model");
var _doc = require("../pm-plugins/doc");
var _utils2 = require("../pm-plugins/utils");
var _localStorage = require("./local-storage");
var _Pulse = require("./Pulse");
var _toolbar = require("./toolbar");
var _WithCardContext = require("./WithCardContext");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
// eslint-disable-next-line @repo/internal/react/no-class-components
var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
function LinkToolbarAppearance() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_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 ? (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 : getUnavailableMessage(editorState, intl)
};
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 : 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'
}];
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.default.createElement(_card.LinkToolbarButtonGroup, {
key: "link-toolbar-button-group",
options: options.map(function (option) {
return (0, _card.getButtonGroupOption)(intl, areAnyNewToolbarFlagsEnabled, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
onClick: (0, _card.commandWithMetadata)(option.onClick, {
inputMethod: _analytics.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 ((0, _toolbar.shouldRenderToolbarPulse)(embedEnabled, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : '', status !== null && status !== void 0 ? status : '', showUpgradeDiscoverability)) {
var resolvedAnalyticsAttributes = (0, _utils2.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.default.createElement(_analyticsNext.AnalyticsContext, {
data: {
attributes: _objectSpread({}, resolvedAnalyticsAttributes)
}
}, /*#__PURE__*/_react.default.createElement(_Pulse.DiscoveryPulse, {
localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
testId: "toolbar-discovery-pulse"
}, LinkToolbarButtons))
);
}
return LinkToolbarButtons;
});
return _this;
}
(0, _inherits2.default)(LinkToolbarAppearance, _React$Component);
return (0, _createClass2.default)(LinkToolbarAppearance, [{
key: "render",
value: function render() {
var _this2 = this;
var editorView = this.props.editorView;
return /*#__PURE__*/_react.default.createElement(_WithCardContext.WithCardContext, null, function (cardContext) {
return _this2.renderDropdown(editorView, cardContext && cardContext.value);
});
}
}]);
}(_react.default.Component);
var getUnavailableMessage = exports.getUnavailableMessage = function getUnavailableMessage(state, intl) {
try {
var parentNode = state.selection.$from.node(1);
var parentName = intl.formatMessage(_messages.default[parentNode.type.name]);
var tooltip = intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
node: parentName
});
return tooltip;
} catch (e) {
// eslint-disable-line no-unused-vars
return intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
node: intl.formatMessage(_messages.default.defaultBlockNode)
});
}
};