Skip to main content

커스터마이징

Edybara의 통합 패키지인 @edybara/preset 을 사용하지 않고, 각각의 구성요소를 개별 설치하여 사용하는 방법을 안내합니다.

Edybara 을 사용하기 위해서는 기본 동작을 위한 @edybara/core, @edybara/ui 패키지를 필수적으로 설치해야 합니다. 이후 요구사항에 따라 @edybara/* 패키지 중 추가로 설치합니다.

각 하위 패키지는 ProseMirror 에서 사용할 수 있는 서식(Node, Mark)과 플러그인(Plugin) 그리고 명령(Command) 함수를 제공하며, 필요한 경우 스타일시트를 포함합니다. 아래는 필수 패키지와 문단 서식인 @edybara/paragraph 패키지를 사용해 최소한의 기능으로 에디터를 구현하는 코드 예시입니다.

src/global.scss
@import '@edybara/core/styles/core.scss';
@import '@edybara/ui/styles/ui.scss';
@import '@edybara/paragraph/styles/paragraph.scss';
info

Edybara 의 모든 패키지에서 스타일은 css 와 scss 파일을 동시에 지원합니다.

src/index.ts
import { Plugin } from 'prosemirror-state';
import { Schema } from 'prosemirror-model';
import { EditorView } from 'prosemirror-view';
import {
  edybaraBaseNodes,
  edybaraCorePlugins,
} from '@edybara/core';
import {
  edybaraParagraphNodes,
} from '@edybara/paragraph';

const view = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    schema: new Schema({
      nodes: {
        ...edybaraBaseNodes(),
        ...edybaraParagraphNodes(),
      },
    }),
    plugins: [
      ...edybaraCorePlugins()
    ],
  }),
});

위와 같이 코드를 작성한 경우, 실행된 에디터의 모습은 아래와 같습니다.

info

툴바는 @edybara/menubar 패키지를 통해 제공됩니다. 필요한 경우 툴바 플러그인을 직접 구현하여 자신만의 에디터 UI 를 구성할 수 있습니다.

Edybara 의 모든 기능은 각각의 패키지로 모듈화되어 있으며, 원하는 기능만을 사용하거나 직접 서식을 추가할 수 있습니다. 각 패키지의 사용법은 패키지 목록를 참고하세요. 필요한 경우, ProseMirror 생태계의 다른 라이브러리와 함께 사용할 수 있습니다.

Edybara 의 모든 패키지를 사용하여 설정한 경우 아래의 모습이 됩니다. @edybara/preset 를 사용한 것과 동일한 결과를 가집니다.

src/global.scss
// core
@import '@edybara/ui/styles/ui.scss';
@import '@edybara/core/styles/core.scss';
@import '@edybara/menubar/styles/menubar.scss';

// nodes
@import '@edybara/paragraph/styles/paragraph.scss';
@import '@edybara/heading/styles/heading.scss';
@import '@edybara/flat-list/styles/flat-list.scss';
@import '@edybara/flat-task-list/styles/flat-task-list.scss';
@import '@edybara/blockquote/styles/blockquote.scss';
@import '@edybara/hr/styles/hr.scss';
@import '@edybara/codeblock/styles/codeblock.scss';
@import '@edybara/tables/styles/tables.scss';

// marks
@import '@edybara/bold/styles/bold.scss';
@import '@edybara/italic/styles/italic.scss';
@import '@edybara/underline/styles/underline.scss';
@import '@edybara/strikethrough/styles/strikethrough.scss';
@import '@edybara/code/styles/code.scss';
@import '@edybara/subscript/styles/subscript.scss';
@import '@edybara/superscript/styles/superscript.scss';
@import '@edybara/font-family/styles/font-family.scss';
@import '@edybara/text-color/styles/text-color.scss';
@import '@edybara/link/styles/link.scss';
src/index.ts
import { Schema } from 'prosemirror-model';
import { edybaraBaseNodes, edybaraCorePlugins } from '@edybara/core';
import { edybaraHeadingNodes, edybaraHeadingPlugins } from '@edybara/heading';
import { edybaraParagraphNodes, edybaraParagraphPlugins } from '@edybara/paragraph';
import { edybaraFlatBulletListNodes, edybaraFlatListItemNodes, edybaraFlatListPlugins, edybaraFlatOrderedListNodes } from '@edybara/flat-list';
import { edybaraFlatTaskListNodes, edybaraFlatTaskListItemNodes, edybaraFlatTaskListPlugins } from '@edybara/flat-task-list';
import { edybaraHorizontalRuleNodes, edybaraHorizontalRulePlugins } from '@edybara/hr';
import { edybaraLinkMarks } from '@edybara/link';
import { edybaraBoldMarks, edybaraBoldPlugins } from '@edybara/bold';
import { edybaraCodeMarks, edybaraCodePlugins } from '@edybara/code';
import { edybaraFontFamilyMarks } from '@edybara/font-family';
import { edybaraItalicMarks, edybaraItalicPlugins } from '@edybara/italic';
import { edybaraStrikeThroughMarks, edybaraStrikethroughPlugins } from '@edybara/strikethrough';
import { edybaraSubscriptMarks, edybaraSubscriptPlugins } from '@edybara/subscript';
import { edybaraSuperscriptMarks, edybaraSuperscriptPlugins } from '@edybara/superscript';
import { edybaraTextColorMarks } from '@edybara/text-color';
import { edybaraUnderlineMarks, edybaraUnderlinePlugins } from '@edybara/underline';
import { edybaraBlockQuotePlugins, edybaraBlockquoteNodes } from '@edybara/blockquote';
import { edybaraCodeBlockNodes, edybaraCodeBlockPlugins } from '@edybara/codeblock';
import { edybaraTableEditingPlugins, edybaraTableNodes, edybaraTablePlugins } from '@edybara/tables';
import { edybaraMenubarPlugins } from '@edybara/menubar';

export const allSchema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
    ...edybaraFlatBulletListNodes(),
    ...edybaraFlatOrderedListNodes(),
    ...edybaraFlatListItemNodes(),
    ...edybaraFlatTaskListNodes(),
    ...edybaraFlatTaskListItemNodes(),
    ...edybaraBlockquoteNodes(),
    ...edybaraHorizontalRuleNodes(),
    ...edybaraHeadingNodes(),
    ...edybaraCodeBlockNodes(),
    ...edybaraTableNodes(),
  },
  marks: {
    ...edybaraBoldMarks(),
    ...edybaraItalicMarks(),
    ...edybaraUnderlineMarks(),
    ...edybaraStrikeThroughMarks(),
    ...edybaraCodeMarks(),
    ...edybaraSubscriptMarks(),
    ...edybaraSuperscriptMarks(),
    ...edybaraFontFamilyMarks(),
    ...edybaraTextColorMarks(),
    ...edybaraLinkMarks(),
  },
});

export const allPlugins = [
  ...edybaraParagraphPlugins(),
  ...edybaraFlatListPlugins(),
  ...edybaraFlatTaskListPlugins(),
  ...edybaraBlockQuotePlugins(),
  ...edybaraHorizontalRulePlugins(),
  ...edybaraHeadingPlugins(),
  ...edybaraCodeBlockPlugins(),
  ...edybaraItalicPlugins(),
  ...edybaraBoldPlugins(),
  ...edybaraCodePlugins(),
  ...edybaraTablePlugins(),
  ...edybaraTableEditingPlugins(),
  ...edybaraCorePlugins(),
  ...edybaraUnderlinePlugins(),
  ...edybaraStrikethroughPlugins(),
  ...edybaraSubscriptPlugins(),
  ...edybaraSuperscriptPlugins(),
  ...edybaraMenubarPlugins(),
];

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

ProseMirror 의 동작 특성 상 플러그인의 순서가 중요합니다.