Yorkie와 Novel editor 연동

Yorkie란?

Yorkie는 Google Docs 및 Figma와 같은 실시간 협업 애플리케이션을 구축하기 위한 도구 모음을 제공하는 오픈 소스 문서 저장소입니다.

실시간 동시 편집이 가능하도록 내부적으로 CRDT 알고리즘을 사용합니다.

Novel Editor란?

아래 학습 정리를 참고해주시길 바랍니다. https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/Novel%EC%9D%B4%EB%9E%80%3F

AutoMerge나 Yjs와 같은 다른 라이브러리와 달리 Yorkie에는 SDK, 클라우드 또는 자체 호스팅 서버가 포함된 풀스택 솔루션이 포함되어 있어 애플리케이션에서 공동 편집 기능을 구현하기가 더 쉽습니다.

Yorkie 사용법

Yorkie 사용법은 공식 문서에 자세히 설명되어 있습니다. https://yorkie.dev/docs/js-sdk

자세한 내용은 공식 문서를 참고해주시고 지금은 가장 기본적인 사용법 위주로 설명드리겠습니다.

Yorkie를 사용하는 방법은 크게 두 가지가 있습니다.

Yorkie에서 제공해주는 서버를 사용하는 방식과 자체적으로 띄운 서버에서 사용하는 방식이 있습니다.

Yorkie에서 제공해주는 서버를 사용하기 위해서는 아래 링크에서 API Key를 발급받아야 합니다. https://yorkie.dev/dashboard/login

Yorkie 클라이언트를 생성할 때 주소는 https://api.yorkie.dev**로 하고 발급받은 APIKey**를 사용하면 됩니다.

async function main() {
  // 01. create a new client instance and connect to the yorkie server.
  const client = new yorkie.Client('https://api.yorkie.dev', {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
  });
  await client.activate();
  // ...
}

만약 자체적으로 띄운 서버를 사용하고 싶다면 yorkie cli를 설치하여 사용할 수 있습니다.

CLI 설치 방법 https://yorkie.dev/docs/cli

아니면 docker를 통해 간단하게 yorkie 서버를 띄울 수 있습니다.

docker run -p 8080:8080 yorkieteam/yorkie server

자체적으로 서버를 띄웠다면 서버 url을 통해 yorkie를 연동할 수 있습니다.

async function main() {
  // 01. create a new client instance and connect to the yorkie server.
  const client = new yorkie.Client('localhost:8080');
  await client.activate();
  // ...
}

Novel과 Yorkie 연동

우선 yorkie를 설치합니다.

yarn add yorkie-js-sdk

yorkie 서버와 연결합니다.

    const client = new yorkie.Client("http://localhost:8080");
    await client.activate();

동시에 편집할 문서를 초기화 합니다.

    doc = new yorkie.Document("my-text-doc");
    await client.attach(doc);

다른 사람이 변경한 정보를 확인하려면 document의 root에 접근하여 확인할 수 있습니다.

이 값을 가져와서 novel Editor의 값을 변경해주면 실시간 동시 편집이 될 겁니다. (아마도...)

    doc.subscribe((event: any) => {
      console.log(JSON.parse(doc.getRoot().hello));
      if (event.type === "remote-changed") {
      }
    });

Novel 에디터의 변경 사항을 저장하려면 다음과 같은 함수를 생성합니다.

editor의 JSON을 가져와서 string으로 바꾼다음 root 안의 값을 변경하는 함수입니다.

  const updateEditor = ({editor}: any) => {
    doc.update((root: any) => {
      root.hello = JSON.stringify(editor.getJSON());
    });
    client.sync();
  };

현재는 string으로 바꾸어 저장하고 있는데 나중에는 JSON 자체를 저장하는 방식으로 변경하는 것이 좋을 것 같습니다.

EditorContent의 onUpdate의 props 값으로 넣어줍니다.

    <EditorRoot>
      <EditorContent
        ref={ref}
        initialContent={initialValue2}
        className="w-[520px] rounded-xl border bg-white p-2"
        {...(initialValue && { initialContent: initialValue })}
        extensions={extensions}
        editorProps={{
          handleDOMEvents: {
            keydown: (_view, event) => handleCommandNavigation(event),
          },
          attributes: {
            class: `prose prose-lg prose-headings:font-title font-default focus:outline-none max-w-full`,
          },
        }}
        slotAfter={<ImageResizer />}
        onUpdate={updateEditor}
      ></EditorContent>
    </EditorRoot>