[javascript] Draft.js를 이용한 텍스트 에디터의 마크다운(Markdown) 기능 구현하기

24 Nov 2023

javascript

마크다운(Markdown)은 간단하고 가독성이 좋은 일반 텍스트 형식으로, 주로 문서 작성에 사용됩니다. 이번 글에서는 Draft.js 라이브러리를 사용하여 텍스트 에디터에 마크다운 기능을 구현하는 방법을 알아보겠습니다.

1. Draft.js 소개

Draft.js는 Facebook에서 개발한 React 기반의 라이브러리로, 텍스트 에디터를 구현하기 위한 다양한 기능과 도구를 제공합니다. 기본적인 텍스트 편집 기능부터 커스텀 에디터 및 플러그인 개발까지 다양한 기능을 지원하며, 확장성과 유연성이 뛰어나다는 특징이 있습니다.

2. Draft.js로 마크다운 기능 구현하기

Draft.js를 사용하여 텍스트 에디터에 마크다운 기능을 구현하려면 다음 단계를 따르면 됩니다.

2.1 Draft.js 설치하기

먼저, Draft.js를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install draft-js

2.2 Draft.js 에디터 구성하기

Draft.js의 기본 컴포넌트인 Editor를 사용하여 텍스트 에디터를 생성합니다. 필요한 라이브러리를 가져온 후, 아래와 같이 코드를 작성합니다.

import React from 'react';
import { Editor, EditorState } from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
  }

  onChange(editorState) {
    this.setState({ editorState });
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={(editorState) => this.onChange(editorState)}
      />
    );
  }
}

export default MyEditor;

위 코드에서 MyEditor 컴포넌트는 Draft.js의 EditorState를 사용하여 에디터의 상태를 관리하고, onChange 메서드를 통해 사용자의 입력에 따라 상태를 업데이트합니다.

2.3 마크다운 변환 기능 추가하기

Draft.js에서 작성한 내용을 마크다운 형식으로 변환하기 위해서는 외부 라이브러리가 필요합니다. 여기서는 draft-js-export-markdown 라이브러리를 사용하여 변환을 수행합니다. 먼저, 해당 라이브러리를 설치합니다.

npm install draft-js-export-markdown

변환 기능을 추가하기 위해 MyEditor 컴포넌트를 아래와 같이 수정합니다.

import React from 'react';
import { Editor, EditorState, convertToRaw } from 'draft-js';
import { stateToMarkdown } from 'draft-js-export-markdown';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
  }

  onChange(editorState) {
    this.setState({ editorState });
  }

  getMarkdownContent() {
    const content = this.state.editorState.getCurrentContent();
    const markdownText = stateToMarkdown(convertToRaw(content));
    return markdownText;
  }

  render() {
    return (
      <div>
        <Editor
          editorState={this.state.editorState}
          onChange={(editorState) => this.onChange(editorState)}
        />
        <div>
          마크다운 형식으로 변환된 내용:
          <pre>{this.getMarkdownContent()}</pre>
        </div>
      </div>
    );
  }
}

export default MyEditor;

getMarkdownContent 메서드를 통해 현재 편집 중인 내용을 마크다운 형식으로 변환합니다. 변환된 내용은 pre 태그를 사용하여 출력합니다.

마무리

이제 Draft.js를 사용하여 텍스트 에디터에 마크다운 기능을 구현하는 방법에 대해 알아보았습니다. Draft.js의 다양한 기능과 유연성을 활용하여 원하는 에디터를 구현해보세요.

참고 문서: