Colin's Blog
[javascript] Draft.js를 이용한 텍스트 에디터의 협업 기능 구현하기

소개

텍스트 에디터는 협업 작업에 중요한 역할을 합니다. 여러 사용자가 동시에 문서를 편집하고 변경 사항을 실시간으로 반영할 수 있는 기능이 필요합니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 협업 기능을 구현하는 방법을 알아보겠습니다.

기술 스택

이번 예제에서는 다음과 같은 기술 스택을 사용하겠습니다:

구현 과정

1. 프로젝트 설정

먼저, 새로운 리액트 프로젝트를 생성하고 필요한 라이브러리를 설치합니다:

npx create-react-app text-editor
cd text-editor
npm install draft-js firebase

2. Draft.js 컴포넌트 생성

Draft.js를 사용하여 기본 텍스트 에디터 컴포넌트를 생성합니다. 다음과 같이 파일을 수정합니다:

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

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

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

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

export default TextEditor;

3. Firebase 설정

Firebase 프로젝트를 생성하고, Firestore 데이터베이스를 설정합니다. Firebase 콘솔에서 프로젝트 설정을 완료한 후, Firebase 구성 정보를 프로젝트에 추가합니다:

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // Firebase 프로젝트 구성 정보
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

4. 협업 기능 구현

이제 Firebase를 사용하여 텍스트 에디터의 협업 기능을 구현할 차례입니다. 다음과 같이 파일을 수정합니다:

import React, { useEffect, useState } from 'react';
import { Editor, EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import firebase from 'firebase/app';
import 'firebase/firestore';

const TextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [docId, setDocId] = useState('');
  const [collaborators, setCollaborators] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const doc = await db.collection('documents').add({
        content: convertToRaw(editorState.getCurrentContent()),
      });
      setDocId(doc.id);

      const listener = db.collection('documents').doc(doc.id).onSnapshot((snapshot) => {
        const data = snapshot.data();
        if (data && data.content) {
          setEditorState(EditorState.createWithContent(convertFromRaw(data.content)));
        }
      });

      return () => listener();
    };

    fetchData();
  }, []);

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);

    db.collection('documents').doc(docId).update({
      content: convertToRaw(newEditorState.getCurrentContent()),
    });
  };

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

export default TextEditor;

5. 협업자 목록 표시

마지막으로, 현재 편집 중인 문서에 참여중인 협업자 목록을 표시합니다. 다음과 같이 파일을 수정합니다:

import React, { useEffect, useState } from 'react';
import { Editor, EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import firebase from 'firebase/app';
import 'firebase/firestore';

const TextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [docId, setDocId] = useState('');
  const [collaborators, setCollaborators] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const doc = await db.collection('documents').add({
        content: convertToRaw(editorState.getCurrentContent()),
        collaborators: [],
      });
      setDocId(doc.id);

      const listener = db.collection('documents').doc(doc.id).onSnapshot((snapshot) => {
        const data = snapshot.data();
        if (data && data.content) {
          setEditorState(EditorState.createWithContent(convertFromRaw(data.content)));
        }
        if (data && data.collaborators) {
          setCollaborators(data.collaborators);
        }
      });

      return () => listener();
    };

    fetchData();
  }, []);

  // ...

  return (
    <div>
      <h2>협업자 목록</h2>
      <ul>
        {collaborators.map((collaborator) => (
          <li key={collaborator}>{collaborator}</li>
        ))}
      </ul>
      <Editor editorState={editorState} onChange={handleEditorChange} />
    </div>
  );
};

export default TextEditor;

결론

이제 Draft.js와 Firebase를 사용하여 텍스트 에디터에 협업 기능을 구현할 수 있습니다. 이를 통해 여러 사용자가 동시에 문서를 편집하고 변경 사항을 실시간으로 반영할 수 있습니다. 따라서, 효율적이고 원활한 협업 작업을 할 수 있습니다.

참고 문서

© 2018 Colin. All rights reserved.