[javascript] Draft.js에서 텍스트 에디터의 단어 간격 조절 기능 추가하기

24 Nov 2023

javascript

Draft.js는 JavaScript로 구현된 텍스트 에디팅 라이브러리입니다. 이 라이브러리를 사용하여 사용자가 웹 페이지에서 텍스트를 편집할 수 있는 강력한 기능을 제공할 수 있습니다. 이번 블로그 포스트에서는 Draft.js 에디터에 단어 간격을 조절할 수 있는 기능을 추가하는 방법에 대해 알아보겠습니다.

Draft.js 시작하기

먼저, Draft.js를 사용하기 위해 프로젝트에 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

npm install draft-js

다음으로, Draft.js 에디터의 컴포넌트를 생성하고 초기화하는 작업이 필요합니다. 아래의 코드는 Draft.js 에디터를 생성하는 예시입니다.

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

const TextEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const onChange = newEditorState => {
    setEditorState(newEditorState);
  };

  return (
    <Editor editorState={editorState} onChange={onChange} />
  );
};

단어 간격 조절 기능 추가하기

이제 Draft.js 에디터에 단어 간격 조절 기능을 추가해보겠습니다. Draft.js에서는 텍스트 스타일을 설정하는 InlineStyleRange 객체를 사용하여 스타일을 적용할 수 있습니다. 이를 활용하여 단어 간격을 조절하는 스타일을 정의할 수 있습니다.

const increaseWordSpacing = () => {
  const selection = editorState.getSelection();
  const currentContent = editorState.getCurrentContent();
  const block = currentContent.getBlockForKey(selection.getStartKey());

  const inlineStyleRanges = block.getInlineStyleAt(selection.getStartOffset());
  const newInlineStyleRanges = inlineStyleRanges.map(range => {
    const style = range.getStyle().add('WORD_SPACING_STYLE');
    return new InlineStyleRange(range.getOffset(), range.getLength(), style);
  });

  const newContentState = Modifier.setInlineStyleRange(
    currentContent,
    SelectionState.createEmpty(block.getKey()).merge(selection),
    newInlineStyleRanges
  );

  const newEditorState = EditorState.push(editorState, newContentState, 'change-inline-style');
  setEditorState(newEditorState);
};

위의 코드에서는 increaseWordSpacing 함수를 사용하여 단어 간격을 늘리는 기능을 구현했습니다. 이 함수는 현재 선택된 텍스트 블록의 인라인 스타일을 가져와 단어 간격 스타일을 추가한 후, 변경된 콘텐츠를 업데이트하는 작업을 수행합니다.

결과 확인하기

이제 단어 간격 조절 기능을 확인해보겠습니다. 위에서 구현한 TextEditor 컴포넌트를 사용하여 Draft.js 에디터를 렌더링합니다. 그리고 단어 간격 조절 버튼을 클릭할 때마다 increaseWordSpacing 함수를 호출하도록 설정합니다.

const App = () => {
  return (
    <div>
      <TextEditor />
      <button onClick={increaseWordSpacing}>단어 간격 늘리기</button>
    </div>
  );
};

이제 웹 페이지에서 Draft.js 에디터를 사용하고 버튼을 클릭하여 단어 간격을 늘릴 수 있습니다.

마무리

이번 블로그 포스트에서는 Draft.js 에디터에 단어 간격 조절 기능을 추가하는 방법을 알아보았습니다. Draft.js를 사용하면 사용자 정의 텍스트 에디터를 쉽게 구현할 수 있으며, 다양한 기능을 추가할 수 있습니다. 단어 간격 조절 외에도 다른 스타일 조절 기능을 구현하는 방법도 유사하게 적용할 수 있습니다.

더 자세한 내용은 Draft.js 공식 문서를 참조하시기 바랍니다.