[javascript] Draft.js로 구현된 에디터를 이용한 백그라운드 멀티 탭 지원하기

24 Nov 2023

javascript

입력할 수 있는 텍스트 에디터는 여러 탭을 지원하는 것이 일반적입니다. 이 기능을 구현하기 위해 Draft.js를 사용한 에디터를 활용할 수 있습니다. 이제 백그라운드에서 여러 탭을 지원하는 에디터를 구현하는 방법에 대해 알아보겠습니다.

1. Draft.js 에디터 설정하기

먼저, Draft.js 에디터를 설정해야 합니다. 다음은 기본적인 구성 요소를 포함한 Draft.js 에디터의 설정 예시입니다.

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

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

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

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

export default MyEditor;

위의 코드는 Draft.js 에디터를 구현하는 간단한 예시입니다. 이제 이 에디터에 멀티 탭을 추가해 보겠습니다.

2. 멀티 탭 기능 추가하기

Draft.js 에디터에서 멀티 탭을 지원하기 위해 다음과 같이 수정할 수 있습니다.

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

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      tabs: [
        {
          id: 1,
          editorState: EditorState.createEmpty(),
        }
      ],
      activeTab: 1,
    };
    this.onChange = this.onChange.bind(this);
    this.onTabChange = this.onTabChange.bind(this);
    this.addTab = this.addTab.bind(this);
    this.handleTabClick = this.handleTabClick.bind(this);
    this.handleTabClose = this.handleTabClose.bind(this);
    this.handleTabKeyPress = this.handleTabKeyPress.bind(this);
  }

  onChange(editorState) {
    const { tabs, activeTab } = this.state;
    const currentTab = tabs.find(tab => tab.id === activeTab);
    const updatedTabs = tabs.map(tab => tab.id === activeTab ? { ...tab, editorState } : tab);
    this.setState({
      tabs: updatedTabs
    });
  }

  onTabChange(activeTab) {
    this.setState({
      activeTab
    });
  }

  addTab() {
    const { tabs } = this.state;
    const newTabId = tabs.length + 1;
    const newTab = {
      id: newTabId,
      editorState: EditorState.createEmpty(),
    };
    this.setState(prevState => ({
      tabs: [...prevState.tabs, newTab],
      activeTab: newTabId
    }));
  }

  handleTabClick(tabId) {
    this.setState({
      activeTab: tabId
    });
  }

  handleTabClose(tabId) {
    const { tabs, activeTab } = this.state;
    let newActiveTab;
    const updatedTabs = tabs.filter(tab => tab.id !== tabId);
    if (activeTab === tabId) {
      if (updatedTabs.length > 0) {
        newActiveTab = updatedTabs[0].id;
      } else {
        newActiveTab = null;
      }
    } else {
      newActiveTab = activeTab;
    }
    this.setState({
      tabs: updatedTabs,
      activeTab: newActiveTab
    });
  }

  handleTabKeyPress(event) {
    if (event.key === "Enter") {
      this.addTab();
    }
  }

  render() {
    const { tabs, activeTab } = this.state;
    const currentTab = tabs.find(tab => tab.id === activeTab);

    return (
      <div>
        <div className="tabs">
          {tabs.map(tab => (
            <div
              key={tab.id}
              className={`tab ${tab.id === activeTab ? 'active' : ''}`}
              onClick={() => this.handleTabClick(tab.id)}
            >
              Tab {tab.id}
              <span onClick={() => this.handleTabClose(tab.id)}>x</span>
            </div>
          ))}
          <div
            className="new-tab"
            onClick={this.addTab}
            onKeyPress={this.handleTabKeyPress}
            tabIndex={0}
          >
            +
          </div>
        </div>
        <Editor
          editorState={currentTab.editorState}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default MyEditor;

위의 코드는 Draft.js 에디터에 멀티 탭 기능을 추가한 예시입니다. tabs 배열은 탭의 목록을 저장하고, activeTab은 현재 선택된 탭의 ID를 저장합니다. 새로운 탭을 추가하려면 “+” 버튼을 클릭하거나 키보드에서 Enter 키를 누르면 됩니다. 각 탭을 클릭하면 해당 탭이 활성화되며, “x” 버튼을 클릭하면 해당 탭을 닫을 수 있습니다.

마무리

이제 Draft.js 에디터를 활용하여 백그라운드에서 멀티 탭을 지원하는 텍스트 에디터를 구현하는 방법에 대해 알아보았습니다. 이를 참고하여 웹 애플리케이션에서 더욱 향상된 텍스트 편집 환경을 제공할 수 있습니다.

참고: