Heading

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

설치

npm install @edybara/heading

스타일

src/index.scss

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

서식

edybaraHeadingNodes

제목 서식을 제공합니다.

플러그인

edybaraHeadingPlugins

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

edybaraHeadingKeymapPlugins

현재 선택 영역의 블록 노드를 Heading 노드로 전환하는 단축키를 제공합니다.

edybaraHeadingInputRulePlugins

#N 패턴의 문자를 입력하면 Heading 노드로 전환하는 InputRule 을 제공합니다.

사용 예시

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 { edybaraHeadingInputRulePlugins, edybaraHeadingKeymapPlugins, edybaraHeadingNodes, edybaraHeadingPlugins } from '@edybara/heading';

const schema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
    ...edybaraHeadingNodes({
      nodeName: 'heading',
      allowAlign: true,
      levels: [2, 4, 6],
    }),
  },
});

const plugins: Plugin[] = [
  ...edybaraParagraphPlugins({
    nodeType: schema.nodes['paragraph'],
  }),
  ...edybaraHeadingPlugins({
    nodeType: schema.nodes['heading'],
  }),
  // ...edybaraHeadingKeymapPlugins({
  //   nodeType: schema.nodes['heading'],
  //   level: 6,
  // }),
  // ...edybaraHeadingInputRulePlugins({
  //   nodeType: schema.nodes['heading'],
  //   level: 6,
  // }),
  ...edybaraMenubarPlugins({
    textType: {
      headingNodeType: schema.nodes['heading'],
      paragraphNodeType: schema.nodes['paragraph'],
    },
    align: {},
  }),
  ...edybaraCorePlugins(),
];

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