@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
63 lines • 2.32 kB
JavaScript
import { InsertStatus } from '@atlaskit/editor-common/link';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
import { fakeCursorForToolbarPluginKey } from './fake-curor-for-toolbar-plugin-key';
import { stateKey as hyperlinkStateKey } from './main';
const createTextCursor = pos => {
const node = document.createElement('div');
node.className = 'ProseMirror-fake-text-cursor';
return Decoration.widget(pos, node, {
key: 'hyperlink-text-cursor'
});
};
const createTextSelection = (from, to) => Decoration.inline(from, to, {
class: 'ProseMirror-fake-text-selection'
});
const getInsertLinkToolbarState = editorState => {
const state = hyperlinkStateKey.getState(editorState);
if (state && state.activeLinkMark) {
if (state.activeLinkMark.type === InsertStatus.INSERT_LINK_TOOLBAR) {
return state.activeLinkMark;
}
}
return undefined;
};
const fakeCursorToolbarPlugin = new SafePlugin({
key: fakeCursorForToolbarPluginKey,
state: {
init() {
return DecorationSet.empty;
},
apply(tr, pluginState, oldState, newState) {
const oldInsertToolbarState = getInsertLinkToolbarState(oldState);
const insertToolbarState = getInsertLinkToolbarState(newState);
// Map DecorationSet if it still refers to the same position in the document
if (oldInsertToolbarState && insertToolbarState) {
const {
from,
to
} = insertToolbarState;
const oldFrom = tr.mapping.map(oldInsertToolbarState.from);
const oldTo = tr.mapping.map(oldInsertToolbarState.to);
if (oldFrom === from && oldTo === to) {
return pluginState.map(tr.mapping, tr.doc);
}
}
// Update DecorationSet if new insert toolbar, or if we have moved to a different position in the doc
if (insertToolbarState) {
const {
from,
to
} = insertToolbarState;
return DecorationSet.create(tr.doc, [from === to ? createTextCursor(from) : createTextSelection(from, to)]);
}
return DecorationSet.empty;
}
},
props: {
decorations(state) {
return fakeCursorForToolbarPluginKey.getState(state);
}
}
});
export default fakeCursorToolbarPlugin;