[javascript] Draft.js를 이용한 텍스트 에디터에서 키보드 단축키 사용하기

24 Nov 2023

javascript

텍스트 에디터를 개발할 때 유저가 편리하게 사용할 수 있는 기능 중 하나는 키보드 단축키입니다. Draft.js는 키보드 이벤트를 처리하는 기능을 갖추고 있어 텍스트 에디터에서 키보드 단축키를 구현하는 것이 가능합니다.

Draft.js 소개

Draft.js는 React 기반의 재사용 가능한 텍스트 에디터 라이브러리입니다. Facebook에서 개발하여 오픈소스로 공개한 이 라이브러리는 많은 기능들을 갖추고 있어 편리한 텍스트 편집 환경을 제공합니다.

키보드 이벤트 처리하기

Draft.js에서 키보드 이벤트를 처리하기 위해서는 handleKeyCommand 메소드를 사용합니다. 이 메소드는 사용자의 키보드 입력에 따라 원하는 동작을 수행할 수 있도록 해줍니다.

handleKeyCommand = (command, editorState) => {
  if (command === 'my-custom-shortcut') {
    // 키보드 단축키에 대한 동작 구현
    // return 'handled'을 통해 이벤트 처리 완료를 알림
    return 'handled';
  }
  
  // 기본 동작 수행
  return 'not-handled';
}

위의 코드에서는 my-custom-shortcut이라는 사용자 정의 단축키를 처리하는 예시입니다. 이벤트 처리 후에는 반드시 return 구문을 통해 이벤트 처리 상태를 알려주어야 합니다.

단축키 등록하기

키보드 단축키를 등록하기 위해서는 KeyBindingUtil을 사용할 수 있습니다. 이를 이용해 사용자가 원하는 키 조합에 단축키를 등록할 수 있습니다.

import { KeyBindingUtil } from 'draft-js';

const { hasCommandModifier } = KeyBindingUtil;

const keyBindingFn = (e) => {
  // Ctrl + B 를 단축키로 등록
  if (hasCommandModifier(e) && e.key === 'b') {
    return 'my-custom-shortcut';
  }
  
  return getDefaultKeyBinding(e);
}

위의 예시에서는 Ctrl + B를 단축키로 등록하는 방법을 보여줍니다. hasCommandModifier 함수를 통해 커맨드 역할을 하는 키 (예: Ctrl, Command)가 눌려있는지 확인하고, key 속성을 통해 단축키로 사용할 키를 지정합니다.

사용자 정의 단축키 구현하기

텍스트 에디터에서 자주 사용할 수 있는 사용자 정의 단축키를 구현하는 예시를 보여드립니다.

import React, { useState } from 'react';

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

const { hasCommandModifier } = KeyBindingUtil;

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

  const handleKeyCommand = (command, editorState) => {
    if (command === 'bold-shortcut') {
      // 선택된 텍스트를 볼드체로 변환
      setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
      return 'handled';
    }

    return 'not-handled';
  }

  const keyBindingFn = (e) => {
    // Ctrl + B를 볼드체 단축키로 등록
    if (hasCommandModifier(e) && e.key === 'b') {
      return 'bold-shortcut';
    }

    return getDefaultKeyBinding(e);
  }

  return (
    <div>
      <h2>My Text Editor</h2>
      <Editor
        editorState={editorState}
        handleKeyCommand={handleKeyCommand}
        keyBindingFn={keyBindingFn}
      />
    </div>
  );
}

export default MyEditor;

위의 예시는 볼드체를 적용하기 위한 Ctrl + B 단축키를 구현한 것입니다. toggleInlineStyle 함수를 사용하여 선택된 텍스트를 볼드체로 변환할 수 있습니다.

마무리

이제 Draft.js를 이용하여 텍스트 에디터에서 키보드 단축키를 사용하는 방법에 대해 알아보았습니다. 이를 활용하면 텍스트 편집 작업을 더욱 효율적으로 수행할 수 있을 것입니다.

참고 자료: