Preset

Edybara 의 모든 서식과 플러그인을 통합 제공하는 단일 패키지입니다.

설치

npm install @edybara/preset

스타일

src/index.scss

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

서식

edybaraPresetSchema

Edybara 의 모든 서식(Node, Mark)를 사용한 Schema 를 제공합니다.

플러그인

edybaraPresetPlugins

Edybara 의 모든 서식의 플러그인을 제공합니다.

사용 예시

src/index.ts

import { EditorState, Plugin } from 'prosemirror-state';
import { Schema } from 'prosemirror-model';
import { EditorView } from 'prosemirror-view';
import { Node } from 'prosemirror-model';
import { edybaraPresetSchema, edybaraPresetPlugins } from '@edybara/preset';
import { EdybaraMentionView } 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 = edybaraPresetSchema();
const plugins = edybaraPresetPlugins({
  schema,
  mention: {
    markType: schema.marks['mention'],
    commandView: (view, plugin) =>
      new EdybaraMentionView(view, plugin, (keyword) => {
        return persons.filter((person) =>
          person.name.toLowerCase().includes(keyword.toLowerCase()),
        );
      }),
  },
});

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