[javascript] Draft.js를 이용한 텍스트 에디터의 스티커(Sticker) 추가 기능 구현하기

24 Nov 2023

javascript

텍스트 에디터는 웹 애플리케이션에서 사용자가 텍스트를 작성하고 편집할 수 있는 기능을 제공합니다. 하지만 텍스트만을 작성하는 것이 아니라, 스티커와 같은 그래픽 요소를 추가할 수 있는 기능도 필요할 때가 있습니다. 이번 기사에서는 Draft.js를 사용하여 텍스트 에디터에 스티커 추가 기능을 구현하는 방법을 알아보겠습니다.

Draft.js 개요

Draft.js는 Facebook에서 개발한 React 기반의 JavaScript 라이브러리로, 텍스트 에디터를 만들기 위한 강력한 도구입니다. Draft.js는 텍스트 입력, 편집, 서식 지정과 같은 기능을 제공하며, 커스터마이징이 용이하고 확장성이 높은 특징이 있습니다.

스티커 추가 기능 구현하기

Draft.js 설치하기
```
npm install draft-js
```

Draft.js 에디터 컴포넌트 만들기

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

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

  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';
  }

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

export default TextEditor;

스티커 컴포넌트 만들기

import React from 'react';

class StickerComponent extends React.Component {
  render() {
    return (
      <div className="sticker">
        <img src={this.props.imageUrl} alt="sticker" />
      </div>
    );
  }
}

export default StickerComponent;

스티커 버튼 추가하기

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

class TextEditor extends React.Component {
  // ...

  insertSticker = (imageUrl) => {
    const contentState = this.state.editorState.getCurrentContent();
    const contentStateWithSticker = Modifier.insertText(contentState, this.state.editorState.getSelection(), ' ');
    const newContentState = Modifier.insertInlineStyle(contentStateWithSticker, contentStateWithSticker.getSelection(), 'STICKER', imageUrl);
    const newEditorState = EditorState.push(this.state.editorState, newContentState, 'insert-sticker');
    this.onChange(newEditorState);
  }

  handleKeyCommand = (command) => {
    // ...

    if (command === 'insert-sticker') {
      this.insertSticker('https://example.com/sticker.png');
      return 'handled';
    }

    return 'not-handled';
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleKeyCommand('insert-sticker')}>Add Sticker</button>
        <Editor
          editorState={this.state.editorState}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default TextEditor;

스티커 스타일 추가하기

.sticker {
  display: inline-block;
  margin: 0.5em;
}

.sticker img {
  width: 100px;
  height: 100px;
}

정리

이제 Draft.js를 사용하여 텍스트 에디터에 스티커 추가 기능을 구현하는 방법을 배웠습니다. Draft.js는 강력한 편집 기능과 커스터마이징 가능성을 제공함으로써 다양한 요구사항에 대응할 수 있습니다. 다양한 컴포넌트와 기능을 활용하여 웹 애플리케이션에서 보다 풍부한 텍스트 편집 환경을 구성할 수 있습니다.

Draft.js 개요

스티커 추가 기능 구현하기

정리

참고 자료