[javascript] Draft.js에서 텍스트 에디터의 링크 삽입 기능 구현하기

24 Nov 2023

javascript

Draft.js는 React를 기반으로 한 JavaScript 텍스트 에디터 라이브러리입니다. 이 텍스트 에디터에서는 사용자가 텍스트에 링크를 삽입할 수 있는 기능이 필요할 수 있습니다. 이번 블로그 포스트에서는 Draft.js에서 링크 삽입 기능을 구현하는 방법에 대해 알아보겠습니다.

Draft.js 링크 삽입 기능 구현 단계

에디터 컴포넌트 생성: 먼저 Draft.js 에디터 컴포넌트를 생성합니다. Editor와 EditorState를 import하여 사용할 준비를 해야 합니다.

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

링크 입력 팝업 컴포넌트 생성: 사용자가 링크를 삽입하려고 할 때 나타나는 링크 입력 팝업 컴포넌트를 생성합니다. 팝업 안에는 입력 필드와 삽입 버튼이 있어야 합니다.
링크 삽입 버튼과 동작 연결: 링크 입력 팝업 컴포넌트 안에 있는 삽입 버튼을 누르면 링크가 삽입되도록 동작을 연결해야 합니다. 이를 위해 삽입 버튼을 누르면 팝업이 닫히고 선택된 텍스트에 링크가 적용되는 함수를 작성합니다.
에디터에서 선택된 텍스트에 링크 적용: 앞서 작성한 함수를 호출하여 에디터에서 선택된 텍스트에 링크를 적용합니다.

예제 코드

아래는 Draft.js에서 링크 삽입 기능을 구현하기 위해 작성할 수 있는 예제 코드입니다.

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

const LinkInputPopup = ({ onLinkInsert }) => {
  const [inputValue, setInputValue] = useState('');

  const handleInsertLink = () => {
    onLinkInsert(inputValue);
    setInputValue('');
  }

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleInsertLink}>Insert</button>
    </div>
  );
}

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

  const handleLinkInsert = (url) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', { url });
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });

    setEditorState(RichUtils.toggleLink(
      newEditorState,
      newEditorState.getSelection(),
      entityKey
    ));
  }

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
      />
      <LinkInputPopup onLinkInsert={handleLinkInsert} />
    </div>
  );
}

export default App;

위의 예제 코드는 React를 사용해서 Draft.js 에디터 컴포넌트와 링크 입력 팝업 컴포넌트를 생성하고, 링크 삽입 기능을 구현하는 방법을 보여줍니다.

결론

이번 포스트에서는 Draft.js에서 텍스트 에디터에 링크 삽입 기능을 구현하는 방법에 대해 알아보았습니다. 링크 삽입은 사용자가 텍스트를 클릭하고 해당 URL로 이동할 수 있도록 하는 중요한 기능입니다. 위의 예제 코드를 기반으로 원하는 방식으로 커스터마이즈하여 자신만의 텍스트 에디터를 만들어 보세요.