@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
222 lines (221 loc) • 12.2 kB
JavaScript
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; }
import React from 'react';
import { link } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { addLink, tooltip } from '@atlaskit/editor-common/keymaps';
import { LinkAction } from '@atlaskit/editor-common/link';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
import { IconLink } from '@atlaskit/editor-common/quick-insert';
import { canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
import LinkIcon from '@atlaskit/icon/core/link';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { hideLinkToolbarSetMeta, insertLinkWithAnalytics, removeLinkEditorCommand, showLinkToolbar as _showLinkToolbar, updateLink, updateLinkEditorCommand } from './editor-commands/commands';
import fakeCursorToolbarPlugin from './pm-plugins/fake-cursor-for-toolbar';
import { createInputRulePlugin } from './pm-plugins/input-rule';
import { createKeymapPlugin } from './pm-plugins/keymap';
import { plugin as _plugin, stateKey } from './pm-plugins/main';
import { toolbarButtonsPlugin } from './pm-plugins/toolbar-buttons';
import { getToolbarComponents } from './ui/toolbar-components';
import { getToolbarConfig } from './ui/toolbar/Toolbar';
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`.
*/
export var 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(getToolbarComponents(api));
}
return {
name: 'hyperlink',
marks: function marks() {
return [{
name: 'link',
mark: link
}];
},
commands: {
showLinkToolbar: function showLinkToolbar() {
var _api$analytics;
var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.TOOLBAR;
return _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 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 removeLinkEditorCommand(pos, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
}
},
actions: {
hideLinkToolbar: 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 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: updateLink
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
return stateKey.getState(editorState);
},
pmPlugins: function pmPlugins() {
return [{
name: 'hyperlink',
plugin: function plugin(_ref2) {
var dispatch = _ref2.dispatch,
getIntl = _ref2.getIntl;
return _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 fakeCursorToolbarPlugin;
}
}, {
name: 'hyperlinkInputRule',
plugin: function plugin(_ref3) {
var _api$analytics4;
var schema = _ref3.schema;
return 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 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 toolbarButtonsPlugin(hasCard ? {
skipAnalytics: true
} : undefined);
}
}];
},
pluginsOptions: _objectSpread(_objectSpread({
quickInsert: function quickInsert(_ref4) {
var formatMessage = _ref4.formatMessage;
return [{
id: 'hyperlink',
title: formatMessage(messages.link),
description: formatMessage(messages.linkDescription),
keywords: ['hyperlink', 'url'],
priority: 1200,
keyshortcut: tooltip(addLink),
icon: function icon() {
return /*#__PURE__*/React.createElement(IconLink, null);
},
action: function action(insert, state) {
var _api$analytics6, _api$analytics6$attac;
var tr = insert(undefined);
tr.setMeta(stateKey, {
type: LinkAction.SHOW_INSERT_TOOLBAR,
inputMethod: 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: ACTION.INVOKED,
actionSubject: ACTION_SUBJECT.TYPEAHEAD,
actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_LINK,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT
},
eventType: EVENT_TYPE.UI
})(tr);
return analyticsAttached !== false ? tr : false;
}
}];
},
floatingToolbar: getToolbarConfig(options, api)
}, !isToolbarAIFCEnabled && {
selectionToolbar: function selectionToolbar(state, _ref5) {
var _api$userPreferences, _api$selectionToolbar;
var formatMessage = _ref5.formatMessage;
var toolbarDocking = 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' && 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 = canLinkBeCreatedInRange(from, to)(state);
var title = formatMessage(messages.link);
return {
type: 'button',
disabled: !isEnabled,
testId: "".concat(selectionToolbarLinkButtonTestId),
icon: LinkIcon,
title: title,
tooltipContent: tooltip(addLink, title),
showTitle: false,
onClick: function onClick(state, dispatch) {
var _api$analytics7;
return editorCommandToPMCommand(_showLinkToolbar(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) && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
}) ? primaryToolbarComponent : undefined
})
};
};