Core

@edybara/core 패키지는 에디터의 기초 서식과 스타일, 그리고 기본 동작을 위한 플러그인을 제공합니다. Edybara 을 사용하기 위해선 필수로 설치해야 합니다.

설치

npm install @edybara/core

스타일

src/index.scss

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

서식

edybaraBaseNodes

문서 루트에 해당하는 doc 노드와 인라인 텍스트에 해당하는 text 노드를 제공합니다. ProseMirror 가 동작하기 위해선 doc, text 노드와 최소한 한개의 블록 노드를 함께 선언해 사용해야 합니다.

플러그인

edybaraCorePlugins

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

edybaraBasicKeymapPlugins

에디터에서 서식에 의존하지 않는 기본 단축키(Enter, Backspace 등) 기능을 제공합니다.

edybaraHistoryPlugins

에디터의 기본적인 히스토리 기능과 단축키(Mod-z, Shift-Mod-Z) 기능을 제공합니다. 자세한 사항은 prosemirror-history를 참고하세요.

edybaraVirtualCursorPlugins

Mark 사이를 키보드의 방향키를 통해 이동할 때 가상의 커서를 제공합니다.

edybaraResetMarkPlugins

Mark 가 적용된 텍스트가 모두 지워지면 Mark 를 자동으로 해제하는 기능을 제공합니다.

edybaraDropCursorPlugins

에디터의 콘텐츠를 드래그&드롭 할 때 드롭되는 위치에 가상의 커서를 표시합니다. 자세한 사항은 prosemirror-dropcursor를 참고하세요.

edybaraGapCursorPlugins

일반적으로 커서가 위치할 수 없는 블록 노드 사이에 가상의 커서를 생성합니다. 자세한 사항은 prosemirror-gapcursor를 참고하세요.

edybaraMergeAdjacentNodePlugins

인접한 블록 레벨의 노드를 자동으로 병합하는 기능을 제공합니다. edybaraCorePlugins 에 포함되어 있지 않습니다.

사용 예시

src/index.ts

import { EditorState, Plugin } from 'prosemirror-state';
import { Schema } from 'prosemirror-model';
import { EditorView } from 'prosemirror-view';
import { edybaraBaseNodes, edybaraCorePlugins } from '@edybara/core';
import { edybaraParagraphNodes, edybaraParagraphPlugins, } from '@edybara/paragraph';
import { edybaraBaseNodes, edybaraCorePlugins, edybaraBasicKeymapPlugins, edybaraDropCursorPlugins, edybaraGapCursorPlugins, edybaraHistoryPlugins, edybaraVirtualCursorPlugins } from '@edybara/core';
import { edybaraParagraphNodes, edybaraParagraphPlugins } from '@edybara/paragraph';

const schema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
  },
});

const plugins: Plugin[] = [
  ...edybaraParagraphPlugins({
    nodeType: schema.nodes['paragraph'],
  }),
  ...edybaraCorePlugins(),
  // ...edybaraBasicKeymapPlugins(),
  // ...edybaraHistoryPlugins(),
  // ...edybaraVirtualCursorPlugins(),
  // ...edybaraDropCursorPlugins(),
  // ...edybaraGapCursorPlugins(),
];

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