[React] Toast UI Editor 적용하기

1. Dependency 추가

# yarn
yarn add @toast-ui/react-editor @toast-ui/editor @toast-ui/editor-plugin-code-syntax-highlight prismjs


# npm
npm install @toast-ui/react-editor @toast-ui/editor @toast-ui/editor-plugin-code-syntax-highlight prismjs

여기서 PrismJS 는 소스코드 하이라이팅 라이브러리이다. Toast UI Editor에서 코드 블록을 하이라이팅하는 기능을 사용할 때, PrismJS를 함께 사용하여 다양한 프로그래밍 언어의 구문을 강조하기 위해 함께 추가해준다.

2. main.tsx에 스타일 import

// main.tsx

...
import '@toast-ui/editor/dist/toastui-editor.css'; // Toast UI Editor 기본 스타일
import 'prismjs/themes/prism.css'; // PrismJS 스타일
...

처음에 이 과정 없이 그냥 Toast Editor를 컴포넌트에 바로 사용했다가

이런 화면이 나왔다.

Toast UI의 css를 정상적으로 불러올 수 있도록 메인 컴포넌트에서 import 해주니 해결되었다.

3. ToastEditor 컴포넌트 만들기

// ToastUIFormEditor.tsx
import React, { useRef } from 'react';
import { Form, Button } from 'antd';
import { Editor as ToastEditor } from '@toast-ui/react-editor';

const ToastUIFormEditor: React.FC<{ name: string; label: string }> = ({ name, label }) => {
    const editorRef = useRef<ToastEditor>(null);

    const onFinish = (values: any) => {
        console.log('Form values:', values);
        console.log('Editor content:', editorRef.current?.getInstance().getMarkdown());
    };

    return (
        <Form onFinish={onFinish}>
            <Form.Item
                name={name}
                label={label}
                valuePropName="value"
                getValueFromEvent={() => editorRef.current?.getInstance().getMarkdown()}
                rules={[{ required: true, message: 'Please input content!' }]}
            >
                <ToastEditor
                    initialValue="Write here..."
                    previewStyle="vertical"
                    height="400px"
                    initialEditType="markdown"
                    useCommandShortcut={true}
                    ref={editorRef}
                />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

export default ToastUIFormEditor;

나는 Ant Design을 사용해 개발중이라 AntD의 Form 컴포넌트를 사용해 Toast Editor 컴포넌트를 생성했다.

4. Prism 코드 하이라이팅 추가

import React, { useRef } from 'react';
import { Form, Button } from 'antd';
import { Editor as ToastEditor } from '@toast-ui/react-editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import Prism from 'prismjs';

const ToastUIFormEditor: React.FC<{ name: string; label: string }> = ({ name, label }) => {
    const editorRef = useRef<ToastEditor>(null);

    const onFinish = (values: any) => {
        console.log('Form values:', values);
        console.log('Editor content:', editorRef.current?.getInstance().getMarkdown());
    };

    return (
        <Form onFinish={onFinish}>
            <Form.Item
                name={name}
                label={label}
                valuePropName="value"
                getValueFromEvent={() => editorRef.current?.getInstance().getMarkdown()}
                rules={[{ required: true, message: 'Please input content!' }]}
            >
                <ToastEditor
                    initialValue="Write here..."
                    previewStyle="vertical"
                    height="400px"
                    initialEditType="markdown"
                    useCommandShortcut={true}
                    plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
                    ref={editorRef}
                />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

1번에서 함께 설치한 Prism을 적용하면 소스코드 하이라이팅을 사용할 수 있다.