@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
311 lines (306 loc) • 14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.stateKey = exports.plugin = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _uuid = require("uuid");
var _isSafeUrl = require("@atlaskit/adf-schema/is-safe-url");
var _link3 = require("@atlaskit/editor-common/link");
var _utils = require("@atlaskit/editor-common/link/utils");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _utils2 = require("@atlaskit/editor-common/utils");
var _state = require("@atlaskit/editor-prosemirror/state");
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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var mapTransactionToState = function mapTransactionToState(state, tr) {
if (!state) {
return undefined;
} else if (state.type === _link3.InsertStatus.EDIT_LINK_TOOLBAR || state.type === _link3.InsertStatus.EDIT_INSERTED_TOOLBAR) {
var _tr$mapping$mapResult = tr.mapping.mapResult(state.pos, 1),
pos = _tr$mapping$mapResult.pos,
deleted = _tr$mapping$mapResult.deleted;
var node = tr.doc.nodeAt(pos);
// If the position was not deleted & it is still a link
if (!deleted && !!node.type.schema.marks.link.isInSet(node.marks)) {
if (node === state.node && pos === state.pos) {
return state;
}
return _objectSpread(_objectSpread({}, state), {}, {
pos: pos,
node: node
});
}
// If the position has been deleted, then require a navigation to show the toolbar again
return;
} else if (state.type === _link3.InsertStatus.INSERT_LINK_TOOLBAR) {
return _objectSpread(_objectSpread({}, state), {}, {
from: tr.mapping.map(state.from),
to: tr.mapping.map(state.to)
});
}
return;
};
var toState = function toState(state, action, editorState) {
// Show insert or edit toolbar
if (!state) {
switch (action) {
case _link3.LinkAction.SHOW_INSERT_TOOLBAR:
{
var _editorState$selectio = editorState.selection,
from = _editorState$selectio.from,
to = _editorState$selectio.to;
if ((0, _utils2.canLinkBeCreatedInRange)(from, to)(editorState)) {
return {
type: _link3.InsertStatus.INSERT_LINK_TOOLBAR,
from: from,
to: to
};
}
return undefined;
}
case _link3.LinkAction.SELECTION_CHANGE:
// If the user has moved their cursor, see if they're in a link
var link = (0, _utils.getActiveLinkMark)(editorState);
if (link) {
return _objectSpread(_objectSpread({}, link), {}, {
type: _link3.InsertStatus.EDIT_LINK_TOOLBAR
});
}
return undefined;
default:
return undefined;
}
}
// Update toolbar state if selection changes, or if toolbar is hidden
if (state.type === _link3.InsertStatus.EDIT_LINK_TOOLBAR) {
switch (action) {
case _link3.LinkAction.EDIT_INSERTED_TOOLBAR:
{
var _link = (0, _utils.getActiveLinkMark)(editorState);
if (_link) {
if (_link.pos === state.pos && _link.node === state.node) {
return _objectSpread(_objectSpread({}, state), {}, {
type: _link3.InsertStatus.EDIT_INSERTED_TOOLBAR
});
}
return _objectSpread(_objectSpread({}, _link), {}, {
type: _link3.InsertStatus.EDIT_INSERTED_TOOLBAR
});
}
return undefined;
}
case _link3.LinkAction.SELECTION_CHANGE:
var _link2 = (0, _utils.getActiveLinkMark)(editorState);
if (_link2) {
if (_link2.pos === state.pos && _link2.node === state.node) {
// Make sure we return the same object, if it's the same link
return state;
}
return _objectSpread(_objectSpread({}, _link2), {}, {
type: _link3.InsertStatus.EDIT_LINK_TOOLBAR
});
}
return undefined;
case _link3.LinkAction.HIDE_TOOLBAR:
return undefined;
default:
return state;
}
}
// Remove toolbar if user changes selection or toolbar is hidden
if (state.type === _link3.InsertStatus.INSERT_LINK_TOOLBAR) {
switch (action) {
case _link3.LinkAction.SELECTION_CHANGE:
case _link3.LinkAction.HIDE_TOOLBAR:
return undefined;
default:
return state;
}
}
return;
};
var getActiveText = function getActiveText(selection) {
var currentSlice = selection.content();
if (currentSlice.size === 0) {
return;
}
if (currentSlice.content.childCount === 1 && currentSlice.content.firstChild && selection instanceof _state.TextSelection) {
return currentSlice.content.firstChild.textContent;
}
return;
};
var stateKey = exports.stateKey = new _state.PluginKey('hyperlinkPlugin');
var plugin = exports.plugin = function plugin(dispatch, intl, editorAppearance, _pluginInjectionApi, _onClickCallback, __livePage) {
return new _safePlugin.SafePlugin({
state: {
init: function init(_, state) {
var canInsertLink = (0, _utils2.canLinkBeCreatedInRange)(state.selection.from, state.selection.to)(state);
return {
activeText: getActiveText(state.selection),
canInsertLink: canInsertLink,
timesViewed: 0,
activeLinkMark: toState(undefined, _link3.LinkAction.SELECTION_CHANGE, state),
editorAppearance: editorAppearance
};
},
apply: function apply(tr, pluginState, oldState, newState) {
var state = pluginState;
var action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
var inputMethod = tr.getMeta(stateKey) && tr.getMeta(stateKey).inputMethod;
if (tr.docChanged) {
state = {
activeText: state.activeText,
canInsertLink: (0, _utils2.canLinkBeCreatedInRange)(newState.selection.from, newState.selection.to)(newState),
timesViewed: state.timesViewed,
inputMethod: inputMethod,
activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
editorAppearance: editorAppearance
};
}
if (action) {
var stateForAnalytics = [_link3.LinkAction.SHOW_INSERT_TOOLBAR, _link3.LinkAction.EDIT_INSERTED_TOOLBAR].includes(action) ? {
timesViewed: ++state.timesViewed,
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
searchSessionId: (0, _uuid.v4)()
} : {
timesViewed: state.timesViewed,
searchSessionId: state.searchSessionId
};
state = _objectSpread({
activeText: state.activeText,
canInsertLink: state.canInsertLink,
inputMethod: inputMethod,
activeLinkMark: toState(state.activeLinkMark, action, newState),
editorAppearance: editorAppearance
}, stateForAnalytics);
}
var hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
if (tr.selectionSet && hasPositionChanged) {
state = {
activeText: getActiveText(newState.selection),
canInsertLink: (0, _utils2.canLinkBeCreatedInRange)(newState.selection.from, newState.selection.to)(newState),
activeLinkMark: toState(state.activeLinkMark, _link3.LinkAction.SELECTION_CHANGE, newState),
timesViewed: state.timesViewed,
searchSessionId: state.searchSessionId,
inputMethod: inputMethod,
editorAppearance: editorAppearance
};
}
if (!(0, _utils2.shallowEqual)(state, pluginState)) {
dispatch(stateKey, state);
}
return state;
}
},
key: stateKey,
props: {
handleDOMEvents: {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
auxclick: function auxclick(_, event) {
if (event.button !== 1) {
return false;
}
var anchor = getLinkAnchor(event);
if (!anchor) {
return false;
}
// Browsers do not follow a link clicked inside contenteditable, so a link in
// editable text never opens on middle-click and has to be opened here. Cards
// render their anchor inside a contenteditable="false" node view, and a
// read-only editor is itself contenteditable="false" — in both cases the
// browser opens the tab, so doing it again here would open two.
if (anchor.closest('[contenteditable="false"]')) {
return false;
}
var href = anchor.getAttribute('href');
if (!href || !(0, _isSafeUrl.isSafeUrl)(href)) {
return false;
}
window.open(href, '_blank', 'noopener,noreferrer');
return true;
},
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
mouseup: function mouseup(_, event) {
// this prevents redundant selection transaction when clicking on link
// link state will be update on slection change which happens on mousedown
if (isLinkDirectTarget(event)) {
// Leave middle-click alone so the browser can still open the link in a new tab.
if (event.button === 1) {
return false;
}
event.preventDefault();
return true;
}
return false;
},
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
mousedown: function mousedown(view, event) {
// Middle-click on a link: skip ProseMirror's own handling so it does not move
// the selection into the link or select the card node, which is what opens
// the toolbar.
var middleClickAnchor = event.button === 1 ? getLinkAnchor(event) : null;
if (middleClickAnchor) {
// Returning true only stops ProseMirror. The browser still places a caret
// at the click point inside contenteditable, and a caret inside the link is
// itself enough to open the toolbar, so the default has to be suppressed
// too. The auxclick handler above opens the tab for these links.
//
// Anchors inside a contenteditable="false" node view (cards, and read-only
// editors) are deliberately left alone: they get no caret, and it is the
// browser's default that opens their new tab.
if (!middleClickAnchor.closest('[contenteditable="false"]')) {
event.preventDefault();
}
return true;
}
// since link clicks are disallowed by browsers inside contenteditable
// so we need to handle shift+click selection ourselves in this case
if (!event.shiftKey || !isLinkDirectTarget(event)) {
return false;
}
var state = view.state;
var $anchor = state.selection.$anchor;
var newPosition = view.posAtCoords({
left: event.clientX,
top: event.clientY
});
if ((newPosition === null || newPosition === void 0 ? void 0 : newPosition.pos) != null && newPosition.pos !== $anchor.pos) {
var tr = state.tr.setSelection(_state.TextSelection.create(state.doc, $anchor.pos, newPosition.pos));
view.dispatch(tr);
return true;
}
return false;
}
}
}
});
};
function isLinkDirectTarget(event) {
return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
}
/**
* Whether the event happened anywhere inside a link, rather than on the anchor itself.
*
* Matching on the anchor alone is not enough. Every smart link variant renders its anchor
* with nested content inside it — inline cards nest icon, title and lozenge spans, block
* and embed cards render anchors via the flexible card `base-link-element` and
* `ExpandedFrame` — so the direct target of a real click is almost never the anchor.
*
* Being DOM based rather than node based, this covers every variant that renders a real
* anchor: link marks, inline cards, block cards, embed card headers and datasource cell
* links. None of the card node views swallow `mousedown` (their `stopEvent` only returns
* true for `dragstart`, or for form elements in the datasource case), so the event does
* reach this handler in all of those cases. The exception is content inside an embed
* card's iframe, which is a separate document we cannot observe.
*
* `isLinkDirectTarget` is deliberately left alone: widening it would also change
* shift+click and mouseup handling for every nested element inside a link.
*/
function getLinkAnchor(event) {
return (event === null || event === void 0 ? void 0 : event.target) instanceof Element ? event.target.closest('a[href]') : null;
}