Skip to main content

Flat Task List

에디터에 할일 목록를 표현하기 위한 서식과 관련 플러그인을 제공합니다.

설치​

npm install @edybara/flat-task-list

스타일​

src/index.scss
@import "@edybara/flat-task-list/styles/flat-task-list.scss";

서식​

edybaraFlatTaskListNodes​

할일 목록을 표현하기 위한 서식을 제공합니다. 반드시 edybaraFlatTaskListItemNodes 와 함께 사용해야 합니다.

edybaraFlatTaskListItemNodes​

할일 목록의 항목을 표현하기 위한 서식을 제공합니다. 반드시 edybaraFlatTaskListNodes 와 함께 사용해야 합니다.

플러그인​

edybaraFlatTaskListPlugins​

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

edybaraFlatTaskListKeymapPlugins​

Flat List 내부에서 되는 기본 단축키를 제공합니다.

edybaraTaskListInputRulePlugins​

[] 또는 [x] 패턴의 문자를 입력하면 Flat Task List 노드로 전환하는 InputRule 을 제공합니다.

edybaraFlatTaskListMergePlugins​

동일한 인접 리스트 노드를 자동으로 병합하는 기능을 제공합니다.

사용 예시​

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 { edybaraMenubarPlugins } from '@edybara/menubar';
import { edybaraFlatTaskListNodes, edybaraFlatTaskListItemNodes, edybaraFlatTaskListPlugins } from '@edybara/flat-task-list';

const schema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
    ...edybaraFlatTaskListNodes({
      nodeName: 'task_list',
    }),
    ...edybaraFlatTaskListItemNodes({
      nodeName: 'task_list_item',
    }),
  },
});

const plugins: Plugin[] = [
  ...edybaraParagraphPlugins({
    nodeType: schema.nodes['paragraph'],
  }),
  ...edybaraFlatTaskListPlugins({
    taskListNodeType: schema.nodes['task_list'],
    taskListItemNodeType: schema.nodes['task_list_item'],
  }),
  ...edybaraMenubarPlugins({
    taskList: {
      taskListNodeType: schema.nodes['task_list'],
      taskListItemNodeType: schema.nodes['task_list_item'],
    },
    align: {},
  }),
  ...edybaraCorePlugins(),
];

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