[javascript] Draft.js로 구현된 에디터를 이용한 라인 넘버(Line number) 기능 구현하기

24 Nov 2023

javascript

이번 글에서는 Draft.js라는 JavaScript 라이브러리를 사용하여 구현된 에디터에 라인 넘버(Line number) 기능을 추가하는 방법에 대해 알아보겠습니다.

Draft.js는 Facebook에서 개발한 리액트 기반의 웹 에디터 라이브러리로, 강력한 텍스트 편집 기능을 제공합니다. 에디터의 기본적인 기능 외에도 사용자 정의 기능을 추가할 수 있어 매우 유연하게 활용할 수 있습니다.

1. 에디터 컴포넌트 생성하기

먼저, Draft.js 에디터를 사용하기 위해 컴포넌트를 생성합니다. 다음은 간단한 에디터 컴포넌트의 예시입니다.

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

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

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

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

export default MyEditor;

2. 라인 넘버 생성하기

라인 넘버를 생성하기 위해서는 에디터 컴포넌트의 내용을 파싱하여 줄 바꿈 문자를 기준으로 라인 수를 계산해야 합니다.

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

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

  useEffect(() => {
    const contentState = editorState.getCurrentContent();
    const blockMap = contentState.getBlockMap();
    const lineNumbers = [];

    blockMap.forEach((block) => {
      const text = block.getText();
      const lineCount = text.split('\n').length;

      for (let i = 0; i < lineCount; i++) {
        lineNumbers.push(i + 1);
      }
    });

    setLineNumbers(lineNumbers);
  }, [editorState]);

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

  return (
    <div>
      <div className="line-numbers">
        {lineNumbers.map((lineNumber) => (
          <div key={lineNumber} className="line-number">
            {lineNumber}
          </div>
        ))}
      </div>
      <div className="editor">
        <Editor
          editorState={editorState}
          onChange={handleChange}
        />
      </div>
    </div>
  );
}

export default MyEditor;

위의 코드에서 lineNumbers 상태를 추가하고 useEffect 훅을 이용하여 에디터 내용이 변경될 때마다 라인 넘버를 계산하도록 했습니다. 계산된 라인 넘버는 lineNumbers 상태로 저장되며, 이를 화면에 렌더링하여 사용자에게 보여줍니다.

3. 스타일링하기

라인 넘버를 보여주기 위해 적절한 스타일링을 적용해야 합니다. 각 라인 넘버는 숫자를 갖는 <div> 요소로 구성되며, 이를 수직으로 정렬해주는 CSS 속성을 설정해야 합니다.

.line-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 30px;
  background-color: #f5f5f5;
  padding: 8px;
}

.line-number {
  text-align: right;
  font-size: 12px;
  color: #888888;
  margin-bottom: 2px;
}

마무리

이렇게 Draft.js 에디터에 라인 넘버 기능을 추가하는 방법을 알아보았습니다. 라인 넘버를 통해 사용자는 에디터 내의 텍스트의 라인 순서를 쉽게 확인할 수 있게 됩니다.

더 많은 Draft.js 의 기능과 사용법을 알아보고 싶다면 공식 문서를 참고해보세요.

Draft.js 공식 문서: https://draftjs.org/