Text Color

에디터에 텍스트 색상을 표현하기 위한 서식과 관련 플러그인을 제공합니다.

설치

npm install @edybara/text-color

스타일

src/index.scss

@import "@edybara/text-color/styles/text-color.scss";

서식

edybaraTextColorMarks

텍스트 색상 서식을 제공합니다.

사용 예시

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 { edybaraTextColorMarks } from '@edybara/text-color';

const schema = new Schema({
  nodes: {
    ...edybaraBaseNodes(),
    ...edybaraParagraphNodes(),
  },
  marks: {
    ...edybaraTextColorMarks({
      markName: 'text_color',
      colors: [
        '#182B4D',
        '#0055CC',
        '#206A83',
        '#216E4E',
        '#E56910',
        '#AE2E24',
        '#5E4DB2',
      ].map((color) => ({
        color: color,
      })),
    }),
  },
});

const plugins: Plugin[] = [
  ...edybaraParagraphPlugins({
    nodeType: schema.nodes['paragraph'],
  }),
  ...edybaraMenubarPlugins({
    textColor: {
      textColorMarkType: schema.marks['text_color'],
    },
  }),
  ...edybaraCorePlugins(),
];

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