[javascript] Draft.js의 목록 기능 활용하기

24 Nov 2023

javascript

Draft.js는 JavaScript로 작성된 리액트 기반의 텍스트 에디터 라이브러리입니다. 이 라이브러리를 활용하면 웹 애플리케이션에서 강력한 텍스트 편집 기능을 구현할 수 있습니다.

이번 포스트에서는 Draft.js의 목록 기능을 활용하는 방법에 대해 알아보겠습니다.

목록 기능 구현

Draft.js에서 목록 기능을 구현하기 위해서는 목록에 해당하는 부분의 스타일과 구조를 정의해야 합니다. 이를 위해 Draft.js에서 제공하는 ContentBlock과 BlockRenderMap을 사용하면 목록 요소를 자유롭게 커스텀할 수 있습니다.

아래는 순서가 있는 목록을 생성하는 예제 코드입니다.

import { Editor, EditorState, RichUtils, ContentBlock } from 'draft-js';

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

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

  handleKeyCommand(command) {
    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }

  getBlockStyle(contentBlock) {
    const type = contentBlock.getType();
    if (type === 'ordered-list-item') {
      return 'my-ordered-list-item';
    }
    return null;
  }

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

위 코드에서 my-ordered-list-item 스타일을 지정한 getBlockStyle 함수를 통해 순서가 있는 목록 형식을 정의했습니다. 이 함수에서는 contentBlock.getType()을 사용하여 현재 블록의 타입을 확인하고, 그에 따라 스타일을 지정할 수 있습니다.

결과 확인하기

위 예제 코드를 실행하면 에디터에 순서가 있는 목록을 입력할 수 있는 기능이 추가됩니다. 사용자는 목록 기능을 활용하여 순서가 있는 목록을 편집하고 스타일을 지정할 수 있습니다.

마무리

이번 포스트에서는 Draft.js의 목록 기능을 활용하는 방법에 대해 알아보았습니다. 목록 기능을 통해 웹 애플리케이션에서 텍스트 편집을 더욱 효율적으로 구현할 수 있습니다. 자세한 내용은 Draft.js 공식 문서를 참고하여 실제로 적용해보시기 바랍니다.