@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
229 lines (227 loc) • 12.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.hyperlinkPlugin = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _link = require("@atlaskit/editor-common/link");
var _messages = require("@atlaskit/editor-common/messages");
var _preset = require("@atlaskit/editor-common/preset");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _utils = require("@atlaskit/editor-common/utils");
var _link2 = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _commands = require("./editor-commands/commands");
var _fakeCursorForToolbar = _interopRequireDefault(require("./pm-plugins/fake-cursor-for-toolbar"));
var _inputRule = require("./pm-plugins/input-rule");
var _keymap = require("./pm-plugins/keymap");
var _main = require("./pm-plugins/main");
var _toolbarButtons = require("./pm-plugins/toolbar-buttons");
var _toolbarComponents = require("./ui/toolbar-components");
var _Toolbar = require("./ui/toolbar/Toolbar");
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 getPosFromActiveLinkMark = function getPosFromActiveLinkMark(state) {
if (state === undefined) {
return undefined;
}
switch (state.type) {
case 'EDIT':
case 'EDIT_INSERTED':
return state.pos;
case 'INSERT':
return undefined;
}
};
var selectionToolbarLinkButtonTestId = 'ak-editor-selection-toolbar-link-button';
/**
* Hyperlink plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
var hyperlinkPlugin = exports.hyperlinkPlugin = function hyperlinkPlugin(_ref) {
var _ref$config = _ref.config,
options = _ref$config === void 0 ? {} : _ref$config,
api = _ref.api;
var primaryToolbarComponent;
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
if (isToolbarAIFCEnabled) {
var _api$toolbar;
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
}
return {
name: 'hyperlink',
marks: function marks() {
return [{
name: 'link',
mark: _adfSchema.link
}];
},
commands: {
showLinkToolbar: function showLinkToolbar() {
var _api$analytics;
var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.TOOLBAR;
return (0, _commands.showLinkToolbar)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
},
updateLink: function updateLink(href, text) {
var _api$hyperlink;
var linkMark = api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 || (_api$hyperlink = _api$hyperlink.sharedState.currentState()) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.activeLinkMark;
var pos = getPosFromActiveLinkMark(linkMark);
if (pos === undefined) {
return function () {
return null;
};
}
return (0, _commands.updateLinkEditorCommand)(href, text, pos);
},
removeLink: function removeLink() {
var _api$hyperlink2, _api$analytics2;
var linkMark = api === null || api === void 0 || (_api$hyperlink2 = api.hyperlink) === null || _api$hyperlink2 === void 0 || (_api$hyperlink2 = _api$hyperlink2.sharedState.currentState()) === null || _api$hyperlink2 === void 0 ? void 0 : _api$hyperlink2.activeLinkMark;
var pos = getPosFromActiveLinkMark(linkMark);
if (pos === undefined) {
return function () {
return null;
};
}
return (0, _commands.removeLinkEditorCommand)(pos, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
}
},
actions: {
hideLinkToolbar: _commands.hideLinkToolbarSetMeta,
insertLink: function insertLink(inputMethod, from, to, href, title, displayText) {
var _api$card, _api$analytics3;
var cardsAvailable = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
var sourceEvent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : undefined;
var appearance = arguments.length > 8 ? arguments[8] : undefined;
return (0, _commands.insertLinkWithAnalytics)(inputMethod, from, to, href, api === null || api === void 0 || (_api$card = api.card) === null || _api$card === void 0 ? void 0 : _api$card.actions, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, title, displayText, cardsAvailable, sourceEvent, appearance);
},
updateLink: _commands.updateLink
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
return _main.stateKey.getState(editorState);
},
pmPlugins: function pmPlugins() {
return [{
name: 'hyperlink',
plugin: function plugin(_ref2) {
var dispatch = _ref2.dispatch,
getIntl = _ref2.getIntl;
return (0, _main.plugin)(dispatch, getIntl(), options === null || options === void 0 ? void 0 : options.editorAppearance, api, options === null || options === void 0 ? void 0 : options.onClickCallback,
// @ts-ignore Temporary solution to check for Live Page editor.
options.__livePage);
}
}, {
name: 'fakeCursorToolbarPlugin',
plugin: function plugin() {
return _fakeCursorForToolbar.default;
}
}, {
name: 'hyperlinkInputRule',
plugin: function plugin(_ref3) {
var _api$analytics4;
var schema = _ref3.schema;
return (0, _inputRule.createInputRulePlugin)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, options.autoLinkOnBlur);
}
}, {
name: 'hyperlinkKeymap',
plugin: function plugin() {
var _api$analytics5;
return (0, _keymap.createKeymapPlugin)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
}
}, {
name: 'hyperlinkToolbarButtons',
plugin: function plugin() {
var _api$card2;
var hasCard = !!(api !== null && api !== void 0 && (_api$card2 = api.card) !== null && _api$card2 !== void 0 && _api$card2.actions);
return (0, _toolbarButtons.toolbarButtonsPlugin)(hasCard ? {
skipAnalytics: true
} : undefined);
}
}];
},
pluginsOptions: _objectSpread(_objectSpread({
quickInsert: function quickInsert(_ref4) {
var formatMessage = _ref4.formatMessage;
return [{
id: 'hyperlink',
title: formatMessage(_messages.toolbarInsertBlockMessages.link),
description: formatMessage(_messages.toolbarInsertBlockMessages.linkDescription),
keywords: ['hyperlink', 'url'],
priority: 1200,
keyshortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLink, null);
},
action: function action(insert, state) {
var _api$analytics6, _api$analytics6$attac;
var tr = insert(undefined);
tr.setMeta(_main.stateKey, {
type: _link.LinkAction.SHOW_INSERT_TOOLBAR,
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
});
var analyticsAttached = api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || (_api$analytics6 = _api$analytics6.actions) === null || _api$analytics6 === void 0 || (_api$analytics6$attac = _api$analytics6.attachAnalyticsEvent) === null || _api$analytics6$attac === void 0 ? void 0 : _api$analytics6$attac.call(_api$analytics6, {
action: _analytics.ACTION.INVOKED,
actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_LINK,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
},
eventType: _analytics.EVENT_TYPE.UI
})(tr);
return analyticsAttached !== false ? tr : false;
}
}];
},
floatingToolbar: (0, _Toolbar.getToolbarConfig)(options, api)
}, !isToolbarAIFCEnabled && {
selectionToolbar: function selectionToolbar(state, _ref5) {
var _api$userPreferences, _api$selectionToolbar;
var formatMessage = _ref5.formatMessage;
var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.preferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
if (toolbarDocking === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
exposure: true
})) {
var toolbarButton = function toolbarButton() {
var _state$selection = state.selection,
from = _state$selection.from,
to = _state$selection.to;
var isEnabled = (0, _utils.canLinkBeCreatedInRange)(from, to)(state);
var title = formatMessage(_messages.toolbarInsertBlockMessages.link);
return {
type: 'button',
disabled: !isEnabled,
testId: "".concat(selectionToolbarLinkButtonTestId),
icon: _link2.default,
title: title,
tooltipContent: (0, _keymaps.tooltip)(_keymaps.addLink, title),
showTitle: false,
onClick: function onClick(state, dispatch) {
var _api$analytics7;
return (0, _preset.editorCommandToPMCommand)((0, _commands.showLinkToolbar)(_analytics.INPUT_METHOD.FLOATING_TB, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions))(state, dispatch);
}
};
};
return {
isToolbarAbove: true,
items: [toolbarButton()],
rank: 2
};
} else {
return undefined;
}
}
}), !isToolbarAIFCEnabled && {
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
exposure: true
}) ? primaryToolbarComponent : undefined
})
};
};