Mention

@edybara/mention 에디터에 멘션을 표현하기 위한 서식과 관련 플러그인을 제공합니다.

설치

npm install @edybara/mention

스타일

src/index.scss

@import "@edybara/mention/styles/mention.scss";

서식

edybaraMentionMarks

멘션 서식을 제공합니다.

플러그인

edybaraMentionPlugins

하단의 모든 플러그인을 통합 제공합니다.

edybaraMentionCommandPlugins

@ 문자를 입력한 경우 멘션 검색 팝업을 표시하는 기능을 제공합니다.

edybaraMentionUnsetPlugins

멘션 서식이 적용된 텍스트가 일부 지워진 경우 멘션을 해제하는 기능을 제공합니다.

사용 예시

src/index.ts

import { EditorState, Plugin } from 'prosemirror-state';
import { Schema } from 'prosemirror-model';
import { EditorView } from 'prosemirror-view';
import { edybaraBaseNodes, edybaraCorePlugins, mac } from '@edybara/core';
import { edybaraParagraphNodes, edybaraParagraphPlugins, } from '@edybara/paragraph';
import { edybaraMenubarPlugins } from '@edybara/menubar';
import { EdybaraMentionView, edybaraMentionMarks, edybaraMentionPlugins } from '@edybara/mention';
import { faker } from '@faker-js/faker';

const persons = Array.from({ length: 200 }).map(() => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  icon: faker.image.avatar(),
}));

const schema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
  },
  marks: {
    ...edybaraMentionMarks({
      markName: 'mention',
    }),
  },
});

const plugins: Plugin[] = [
  ...edybaraParagraphPlugins({
    nodeType: schema.nodes['paragraph'],
  }),
  ...edybaraMentionPlugins({
    markType: schema.marks['mention'],
    commandView: (view, plugin) =>
      new EdybaraMentionView(view, plugin, (keyword) => {
        return persons.filter((person) => person.name.toLowerCase().includes(keyword.toLowerCase()));
      }),
  }),
  ...edybaraMenubarPlugins({
    mention: {
      mentionMarkType: schema.marks['mention'],
    },
  }),
  ...edybaraCorePlugins(),
];


const view = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    schema: schema,
    plugins: plugins,
  }),
});