[javascript] Draft.js에서 텍스트 에디터의 툴팁(Tooltip) 기능 추가하기

24 Nov 2023

javascript

이번 글에서는 Draft.js 라이브러리를 사용하여 텍스트 에디터에 툴팁(Tooltip) 기능을 추가하는 방법을 알아보겠습니다. 툴팁은 특정 텍스트에 대한 부가 정보를 제공하거나 사용자에게 도움을 주기 위해 사용됩니다.

1. Draft.js 설치 및 초기화

먼저, Draft.js를 설치하고 초기화해야 합니다. 아래 명령어를 사용하여 Draft.js를 설치합니다.

npm install draft-js

다음으로, Draft.js를 초기화합니다.

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={this.onChange}
      />
    );
  }
}

2. 툴팁 컴포넌트 생성

툴팁 컴포넌트는 텍스트 에디터 내에 나타날 부가 정보를 담당합니다. 이 예제에서는 간단한 툴팁 컴포넌트를 만들어보겠습니다.

import React from 'react';

class Tooltip extends React.Component {
  render() {
    return (
      <div className="tooltip">
        {/* 툴팁 내용 */}
      </div>
    );
  }
}

3. 텍스트 에디터에 툴팁 기능 추가

이제 툴팁 기능을 텍스트 에디터에 추가해보겠습니다. compositeDecorator를 사용하여 특정 텍스트를 감지하고 해당 텍스트에 툴팁 컴포넌트를 삽입합니다.

import { CompositeDecorator } from 'draft-js';

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

    // compositeDecorator 생성
    const compositeDecorator = new CompositeDecorator([
      {
        strategy: this.tooltipStrategy,
        component: Tooltip
      }
    ]);

    this.editor = React.createRef();
    this.onChange = this.onChange.bind(this);
  }

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

  tooltipStrategy(contentBlock, callback, contentState) {
    // 특정 텍스트에 대한 툴팁을 추가하기 위한 로직을 작성합니다.
    // 예를 들어, contentBlock.getText() 등을 사용하여 특정 문자열을 감지하고 그에 해당하는 툴팁을 적용합니다.
  }

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

위의 코드에서 tooltipStrategy 메서드는 특정 텍스트를 감지하고 툴팁을 적용하는 로직을 작성하는 부분입니다. 여기에 필요한 로직을 구현하고, 각 텍스트에 툴팁을 적용하도록 컴포넌트를 수정해주세요.

4. 스타일링

마지막으로, 툴팁 컴포넌트를 스타일링해줍니다. 필요에 따라 CSS를 사용하여 툴팁을 디자인할 수 있습니다.

.tooltip {
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

마무리

이제 Draft.js를 사용하여 텍스트 에디터에 툴팁 기능을 추가하는 방법을 알아보았습니다. 툴팁을 통해 사용자에게 더 나은 사용자 경험을 제공하고 필요한 부가 정보를 제공할 수 있습니다. 관련 코드의 작성 방법과 스타일링하는 방법을 함께 구현하였으니, 이를 참고하여 자신의 프로젝트에 맞게 툴팁 기능을 추가해보세요.

참고 자료:

Draft.js 공식 문서