@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
246 lines (245 loc) • 8.49 kB
JavaScript
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid';
import { InsertStatus, LinkAction, getActiveLinkMark } from '@atlaskit/editor-common/link';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
const mapTransactionToState = (state, tr) => {
if (!state) {
return undefined;
} else if (state.type === InsertStatus.EDIT_LINK_TOOLBAR || state.type === InsertStatus.EDIT_INSERTED_TOOLBAR) {
const {
pos,
deleted
} = tr.mapping.mapResult(state.pos, 1);
const 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 {
...state,
pos,
node
};
}
// If the position has been deleted, then require a navigation to show the toolbar again
return;
} else if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
return {
...state,
from: tr.mapping.map(state.from),
to: tr.mapping.map(state.to)
};
}
return;
};
const toState = (state, action, editorState) => {
// Show insert or edit toolbar
if (!state) {
switch (action) {
case LinkAction.SHOW_INSERT_TOOLBAR:
{
const {
from,
to
} = editorState.selection;
if (canLinkBeCreatedInRange(from, to)(editorState)) {
return {
type: InsertStatus.INSERT_LINK_TOOLBAR,
from,
to
};
}
return undefined;
}
case LinkAction.SELECTION_CHANGE:
// If the user has moved their cursor, see if they're in a link
const link = getActiveLinkMark(editorState);
if (link) {
return {
...link,
type: InsertStatus.EDIT_LINK_TOOLBAR
};
}
return undefined;
default:
return undefined;
}
}
// Update toolbar state if selection changes, or if toolbar is hidden
if (state.type === InsertStatus.EDIT_LINK_TOOLBAR) {
switch (action) {
case LinkAction.EDIT_INSERTED_TOOLBAR:
{
const link = getActiveLinkMark(editorState);
if (link) {
if (link.pos === state.pos && link.node === state.node) {
return {
...state,
type: InsertStatus.EDIT_INSERTED_TOOLBAR
};
}
return {
...link,
type: InsertStatus.EDIT_INSERTED_TOOLBAR
};
}
return undefined;
}
case LinkAction.SELECTION_CHANGE:
const link = getActiveLinkMark(editorState);
if (link) {
if (link.pos === state.pos && link.node === state.node) {
// Make sure we return the same object, if it's the same link
return state;
}
return {
...link,
type: InsertStatus.EDIT_LINK_TOOLBAR
};
}
return undefined;
case LinkAction.HIDE_TOOLBAR:
return undefined;
default:
return state;
}
}
// Remove toolbar if user changes selection or toolbar is hidden
if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
switch (action) {
case LinkAction.SELECTION_CHANGE:
case LinkAction.HIDE_TOOLBAR:
return undefined;
default:
return state;
}
}
return;
};
const getActiveText = selection => {
const currentSlice = selection.content();
if (currentSlice.size === 0) {
return;
}
if (currentSlice.content.childCount === 1 && currentSlice.content.firstChild && selection instanceof TextSelection) {
return currentSlice.content.firstChild.textContent;
}
return;
};
export const stateKey = new PluginKey('hyperlinkPlugin');
export const plugin = (dispatch, intl, editorAppearance, _pluginInjectionApi, _onClickCallback, __livePage) => new SafePlugin({
state: {
init(_, state) {
const canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
return {
activeText: getActiveText(state.selection),
canInsertLink,
timesViewed: 0,
activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state),
editorAppearance
};
},
apply(tr, pluginState, oldState, newState) {
let state = pluginState;
const action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
const inputMethod = tr.getMeta(stateKey) && tr.getMeta(stateKey).inputMethod;
if (tr.docChanged) {
state = {
activeText: state.activeText,
canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
timesViewed: state.timesViewed,
inputMethod,
activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
editorAppearance
};
}
if (action) {
const stateForAnalytics = [LinkAction.SHOW_INSERT_TOOLBAR, LinkAction.EDIT_INSERTED_TOOLBAR].includes(action) ? {
timesViewed: ++state.timesViewed,
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
searchSessionId: uuid()
} : {
timesViewed: state.timesViewed,
searchSessionId: state.searchSessionId
};
state = {
activeText: state.activeText,
canInsertLink: state.canInsertLink,
inputMethod,
activeLinkMark: toState(state.activeLinkMark, action, newState),
editorAppearance,
...stateForAnalytics
};
}
const hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
if (tr.selectionSet && hasPositionChanged) {
state = {
activeText: getActiveText(newState.selection),
canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState),
timesViewed: state.timesViewed,
searchSessionId: state.searchSessionId,
inputMethod,
editorAppearance
};
}
if (!shallowEqual(state, pluginState)) {
dispatch(stateKey, state);
}
return state;
}
},
key: stateKey,
props: {
decorations: () => {
return DecorationSet.empty;
},
handleDOMEvents: {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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)) {
event.preventDefault();
return true;
}
return false;
},
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
mousedown: (view, event) => {
// 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;
}
const {
state
} = view;
const {
selection: {
$anchor
}
} = state;
const newPosition = view.posAtCoords({
left: event.clientX,
top: event.clientY
});
if ((newPosition === null || newPosition === void 0 ? void 0 : newPosition.pos) != null && newPosition.pos !== $anchor.pos) {
const tr = state.tr.setSelection(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';
}