@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
214 lines (211 loc) • 9.79 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EditLinkToolbar = void 0;
exports.HyperlinkAddToolbarWithState = HyperlinkAddToolbarWithState;
exports.getEditLinkCallback = exports.editLinkToolbarConfig = exports.buildEditLinkToolbar = 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 _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _link = require("@atlaskit/editor-common/link");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _state = require("@atlaskit/editor-prosemirror/state");
var _actions = require("../pm-plugins/actions");
var _doc = require("../pm-plugins/doc");
var _utils = require("../pm-plugins/utils");
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; })(); }
function HyperlinkAddToolbarWithState(_ref) {
var _ref$linkPickerOption = _ref.linkPickerOptions,
linkPickerOptions = _ref$linkPickerOption === void 0 ? {} : _ref$linkPickerOption,
onSubmit = _ref.onSubmit,
displayText = _ref.displayText,
displayUrl = _ref.displayUrl,
providerFactory = _ref.providerFactory,
view = _ref.view,
onCancel = _ref.onCancel,
invokeMethod = _ref.invokeMethod,
lpLinkPicker = _ref.lpLinkPicker,
onClose = _ref.onClose,
onEscapeCallback = _ref.onEscapeCallback,
onClickAwayCallback = _ref.onClickAwayCallback;
return /*#__PURE__*/_react.default.createElement(_link.HyperlinkAddToolbar, {
linkPickerOptions: linkPickerOptions,
onSubmit: onSubmit,
displayText: displayText,
displayUrl: displayUrl,
providerFactory: providerFactory,
view: view,
onCancel: onCancel,
invokeMethod: invokeMethod,
lpLinkPicker: lpLinkPicker,
onClose: onClose,
onEscapeCallback: onEscapeCallback,
onClickAwayCallback: onClickAwayCallback
});
}
// eslint-disable-next-line @repo/internal/react/no-class-components
var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
function EditLinkToolbar() {
(0, _classCallCheck2.default)(this, EditLinkToolbar);
return _callSuper(this, EditLinkToolbar, arguments);
}
(0, _inherits2.default)(EditLinkToolbar, _React$Component);
return (0, _createClass2.default)(EditLinkToolbar, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.node !== this.props.node) {
this.hideLinkToolbar();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.hideLinkToolbar();
}
}, {
key: "hideLinkToolbar",
value: function hideLinkToolbar() {
var view = this.props.view;
view.dispatch((0, _actions.hideLinkToolbar)(view.state.tr));
}
}, {
key: "render",
value: function render() {
var _this = this;
var _this$props = this.props,
linkPickerOptions = _this$props.linkPickerOptions,
providerFactory = _this$props.providerFactory,
url = _this$props.url,
text = _this$props.text,
view = _this$props.view,
_onSubmit = _this$props.onSubmit,
forceFocusSelector = _this$props.forceFocusSelector,
lpLinkPicker = _this$props.lpLinkPicker;
return /*#__PURE__*/_react.default.createElement(HyperlinkAddToolbarWithState, {
view: view,
linkPickerOptions: linkPickerOptions,
providerFactory: providerFactory,
displayUrl: url,
displayText: text
// Assumes that the smart card link picker can only ever be invoked by clicking "edit"
// via the floating toolbar
,
invokeMethod: _analytics.INPUT_METHOD.FLOATING_TB,
lpLinkPicker: lpLinkPicker
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(href, title, displayText, inputMethod, analytic) {
_this.hideLinkToolbar();
if (_onSubmit) {
_onSubmit(href, displayText || title, inputMethod, analytic);
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onEscapeCallback: function onEscapeCallback(state, dispatch) {
var tr = state.tr;
(0, _actions.hideLinkToolbar)(tr);
forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector("[aria-label=\"".concat(_messages.linkToolbarMessages.editLink.defaultMessage, "\"]"))(tr);
if (dispatch) {
dispatch(tr);
return true;
}
return false;
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClickAwayCallback: function onClickAwayCallback(state, dispatch) {
var tr = state.tr;
if (dispatch) {
dispatch(tr);
return true;
}
return false;
}
});
}
}]);
}(_react.default.Component);
var getEditLinkCallback = exports.getEditLinkCallback = function getEditLinkCallback(editorAnalyticsApi, scrollIntoView) {
return function (state, dispatch) {
var type = 'hyperlink';
if (state.selection instanceof _state.NodeSelection) {
type = state.selection.node.type.name;
}
if (dispatch) {
var tr = state.tr;
(0, _actions.showLinkToolbar)(tr);
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent((0, _analytics.buildEditLinkPayload)(type))(tr);
tr.setMeta('scrollIntoView', scrollIntoView);
dispatch(tr);
return true;
}
return false;
};
};
var buildEditLinkToolbar = exports.buildEditLinkToolbar = function buildEditLinkToolbar(_ref2) {
var providerFactory = _ref2.providerFactory,
node = _ref2.node,
pluginInjectionApi = _ref2.pluginInjectionApi,
linkPicker = _ref2.linkPicker,
lpLinkPicker = _ref2.lpLinkPicker;
return {
type: 'custom',
disableArrowNavigation: true,
fallback: [],
render: function render(view, idx) {
var _pluginInjectionApi$f;
if (!view || !providerFactory) {
return null;
}
var displayInfo = (0, _utils.displayInfoForCard)(node, (0, _utils.findCardInfo)(view.state));
return /*#__PURE__*/_react.default.createElement(EditLinkToolbar, {
key: idx,
view: view,
linkPickerOptions: linkPicker,
providerFactory: providerFactory,
url: displayInfo.url,
text: displayInfo.title || '',
node: node,
lpLinkPicker: lpLinkPicker,
forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(newHref, newText, inputMethod, analytic) {
var urlChanged = newHref !== displayInfo.url;
var titleChanged = newText !== displayInfo.title;
// If the title is changed in a smartlink, convert to standard blue hyperlink
// (even if the url was also changed) - we don't want to lose the custom title.
if (titleChanged) {
var _pluginInjectionApi$a;
return (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToLink)(newText, newHref, undefined, undefined, undefined, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions), {
action: _analytics.ACTION.UPDATED,
inputMethod: inputMethod,
sourceEvent: analytic
})(view.state, view.dispatch);
}
if (urlChanged) {
// If *only* the url is changed in a smart link, reresolve
return (0, _doc.updateCard)(newHref, analytic)(view.state, view.dispatch);
}
}
});
}
};
};
var editLinkToolbarConfig = exports.editLinkToolbarConfig = function editLinkToolbarConfig(showLinkingToolbar, lpLinkPicker) {
return showLinkingToolbar ? {
height: lpLinkPicker ? _ui.LINKPICKER_HEIGHT_IN_PX : _ui.RECENT_SEARCH_HEIGHT_IN_PX,
width: _ui.RECENT_SEARCH_WIDTH_IN_PX,
forcePlacement: true
} : {};
};