@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
44 lines • 1.74 kB
JavaScript
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
export const mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
export const MENTION_PLACEHOLDER_ACTIONS = {
SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
};
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export function createMentionPlaceholderPlugin() {
return new SafePlugin({
key: mentionPlaceholderPluginKey,
state: {
init: () => ({}),
apply(tr, pluginState) {
const meta = tr.getMeta(mentionPlaceholderPluginKey);
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
return {
placeholder: meta.placeholder
};
}
if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
return {};
}
return pluginState;
}
},
props: {
decorations: state => {
const pluginState = mentionPlaceholderPluginKey.getState(state);
if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
const {
selection
} = state;
const span = document.createElement('span');
span.textContent = pluginState.placeholder;
span.style.setProperty('color', "var(--ds-text-accent-blue, #1558BC)");
return DecorationSet.create(state.doc, [Decoration.widget(selection.from, span)]);
}
return null;
}
}
});
}