@atlaskit/editor-plugin-mentions/dist/esm/pm-plugins/mentionPlaceholder.js

Mentions plugin for @atlaskit/editor-core

import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
export var mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
export var 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: function init() {
        return {};
      },
      apply: function apply(tr, pluginState) {
        var 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: function decorations(state) {
        var pluginState = mentionPlaceholderPluginKey.getState(state);
        if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
          var selection = state.selection;
          var 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;
      }
    }
  });
}