@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
186 lines (182 loc) • 8.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 _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, { useCallback } from 'react';
import { isSafeUrl } from '@atlaskit/adf-schema';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
import Link from '@atlaskit/link';
import { fg } from '@atlaskit/platform-feature-flags';
import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
import { getPluginState } from '../pm-plugins/util/state';
import { titleUrlPairFromNode } from '../pm-plugins/utils';
import { WithCardContext } from '../ui/WithCardContext';
var fatalErrorPositionMap = new Map();
var WithClickHandler = function WithClickHandler(_ref) {
var pluginInjectionApi = _ref.pluginInjectionApi,
url = _ref.url,
onClickCallback = _ref.onClickCallback,
children = _ref.children;
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], function (states) {
var _states$editorViewMod;
return {
mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
};
}),
mode = _useSharedPluginState.mode;
var onClick = useCallback(function (event) {
if (typeof onClickCallback === 'function') {
try {
onClickCallback({
event: event,
url: url
});
} catch (_unused) {}
}
}, [url, onClickCallback]);
// Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
// If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
var allowNavigation = mode === 'view' && !onClickCallback;
return /*#__PURE__*/React.createElement(React.Fragment, null, children({
onClick: allowNavigation ? undefined : onClick
}));
};
/**
*
* @param SmartCardComponent
* @param UnsupportedComponent
* @example
*/
export function Card(SmartCardComponent, UnsupportedComponent) {
return /*#__PURE__*/function (_React$Component) {
function _class() {
var _this;
_classCallCheck(this, _class);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, _class, [].concat(args));
_defineProperty(_this, "state", {
isError: false
});
return _this;
}
_inherits(_class, _React$Component);
return _createClass(_class, [{
key: "render",
value: function render() {
var _getPluginState,
_this2 = this;
var _this$props = this.props,
pluginInjectionApi = _this$props.pluginInjectionApi,
onClickCallback = _this$props.onClickCallback;
var _titleUrlPairFromNode = titleUrlPairFromNode(this.props.node),
url = _titleUrlPairFromNode.url;
if (url && !isSafeUrl(url)) {
return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
}
if (this.state.isError) {
if (url) {
return fg('dst-a11y__replace-anchor-with-link__linking-platfo') ? /*#__PURE__*/React.createElement(Link, {
href: url
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick(e) {
e.preventDefault();
}
}, url) :
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/design-system/no-html-anchor
React.createElement("a", {
href: url,
onClick: function onClick(e) {
e.preventDefault();
}
}, url);
} else {
return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
}
}
var editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
var analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
return /*#__PURE__*/React.createElement(AnalyticsContext
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
data: {
attributes: {
location: analyticsEditorAppearance
},
// Below is added for the future implementation of Linking Platform namespaced analytics context
location: analyticsEditorAppearance
}
}, /*#__PURE__*/React.createElement(WithClickHandler, {
pluginInjectionApi: pluginInjectionApi,
onClickCallback: onClickCallback,
url: url
}, function (_ref2) {
var onClick = _ref2.onClick;
return /*#__PURE__*/React.createElement(WithCardContext, null, function (cardContext) {
return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
key: url,
cardContext: cardContext
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, _this2.props, {
onClick: onClick
}));
});
}));
}
}, {
key: "componentDidCatch",
value: function componentDidCatch(error) {
var maybeAPIError = error;
// NB: errors received in this component are propagated by the `@atlaskit/smart-card` component.
// Depending on the kind of error, the expectation for this component is to either:
// (1) Render a blue link whilst retaining `inlineCard` in the ADF (non-fatal errs);
// (2) Render a blue link whilst downgrading to `link` in the ADF (fatal errs).
if (maybeAPIError.kind && maybeAPIError.kind === 'fatal') {
var _pluginInjectionApi$a;
this.setState({
isError: true
});
var _this$props2 = this.props,
view = _this$props2.view,
node = _this$props2.node,
getPos = _this$props2.getPos,
pluginInjectionApi = _this$props2.pluginInjectionApi;
var _titleUrlPairFromNode2 = titleUrlPairFromNode(node),
url = _titleUrlPairFromNode2.url;
if (!getPos || typeof getPos === 'boolean') {
return;
}
var pos = getPos();
/**
* We cache fatal errors by position to avoid retrying the same errors
* on the same links at the same position.
*/
if (url && pos && fatalErrorPositionMap.get(url) === pos) {
return null;
}
changeSelectedCardToLinkFallback(undefined, url, true, node, getPos(), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch);
if (url && pos) {
fatalErrorPositionMap.set(url, pos);
}
return null;
} else {
// Otherwise, render a blue link as fallback (above in render()).
this.setState({
isError: true
});
}
}
}]);
}(React.Component);
}