Feat/#116-BK: 에디터 공동 편집 블럭 (#117)

contentEditable p 태그 한개에 CRDT를 적용한 공동 편집 블럭

Co-authored-by: hodun <[email protected]>

Author: dohun31

client/src/utils/crdt/index.ts renamed to @wabinar-crdt/index.ts

@@ -1,27 +1,32 @@
 import LinkedList from './linked-list';
 import { Identifier, Node } from './node';
 
-interface RemoteInsertOperation {
+export interface RemoteInsertOperation {
   prevId: Identifier | null;
   node: Node;
 }
 
-interface RemoteRemoveOperation {
+export interface RemoteDeleteOperation {
   targetId: Identifier | null;
   clock: number;
 }
 
 class CRDT {
-  clock: number;
-  client: number;
+  private clock: number;
+  private client: number;
   private structure: LinkedList;
 
-  constructor(initialclock: number, client: number) {
+  constructor(initialclock: number = 1, client: number = 0) {
     this.clock = initialclock;
     this.client = client;
     this.structure = new LinkedList();
   }
 
+  setClientId(id: number) {
+    this.client = id;
+    Object.setPrototypeOf(this.structure, LinkedList.prototype);
+  }
+
   generateNode(letter: string) {
     const id = this.generateIdentifier();
     return new Node(letter, id);
@@ -38,7 +43,7 @@ class CRDT {
     return { prevId, node };
   }
 
-  localDelete(index: number): RemoteRemoveOperation {
+  localDelete(index: number): RemoteDeleteOperation {
     const targetId = this.structure.deleteByIndex(index);
 
     return { targetId, clock: this.clock };
@@ -54,7 +59,7 @@ class CRDT {
     return prevIndex;
   }
 
-  remoteDelete({ targetId, clock }: RemoteRemoveOperation) {
+  remoteDelete({ targetId, clock }: RemoteDeleteOperation) {
     const targetIndex = this.structure.deleteById(targetId);
 
     if (++this.clock < clock) {

client/src/utils/crdt/linked-list.ts renamed to @wabinar-crdt/linked-list.ts

@@ -5,7 +5,7 @@ type RemoteIdentifier = Identifier | null;
 type ModifiedIndex = number | null;
 
 export default class LinkedList {
-  head?: Node;
+  private head?: Node;
 
   insertByIndex(index: number, node: Node): RemoteIdentifier {
     try {

client/src/utils/crdt/node.ts renamed to @wabinar-crdt/node.ts

@@ -0,0 +1,6 @@
+{
+  "name": "@wabinar/crdt",
+  "version": "1.0.0",
+  "description": "CRDT for wabinar",
+  "license": "MIT"
+}

@wabinar-crdt/package.json

@@ -0,0 +1,169 @@
+import { useRef, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import io, { Socket } from 'socket.io-client';
+import env from 'src/config';
+import { useCRDT } from 'src/hooks/useCRDT';
+import { useOffset } from 'src/hooks/useOffset';
+
+import style from './style.module.scss';
+
+function Editor() {
+  const workspace = useParams();
+  const socket: Socket = io(
+    `${env.SERVER_PATH}/api/sc-workspace/${workspace.id}`,
+  );
+
+  const {
+    syncCRDT,
+    readCRDT,
+    localInsertCRDT,
+    localDeleteCRDT,
+    remoteInsertCRDT,
+    remoteDeleteCRDT,
+  } = useCRDT();
+
+  const { offsetRef, setOffset, clearOffset, offsetHandlers } = useOffset();
+
+  const blockRef = useRef<HTMLParagraphElement>(null);
+
+  // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
+  const onInput: React.FormEventHandler = (e) => {
+    setOffset();
+
+    if (offsetRef.current === null) return;
+
+    const event = e.nativeEvent as InputEvent;
+
+    if (event.isComposing) return; // 한글 입력 무시
+
+    if (event.inputType === 'deleteContentBackward') {
+      const remoteDeletion = localDeleteCRDT(offsetRef.current);
+
+      socket.emit('mom-deletion', remoteDeletion);
+      return;
+    }
+
+    const letter = event.data as string;
+
+    const previousLetterIndex = offsetRef.current - 2;
+
+    const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
+
+    socket.emit('mom-insertion', remoteInsertion);
+  };
+
+  // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
+  const updateCaretPosition = (updateOffset = 0) => {
+    if (!blockRef.current || offsetRef.current === null) return;
+
+    const selection = window.getSelection();
+
+    if (!selection) return;
+
+    selection.removeAllRanges();
+
+    const range = new Range();
+
+    // 우선 블럭의 첫번째 text node로 고정, text node가 없는 경우 clearOffset()
+    if (!blockRef.current.firstChild) {
+      clearOffset();
+      return;
+    }
+
+    // range start와 range end가 같은 경우만 가정
+    range.setStart(
+      blockRef.current.firstChild,
+      offsetRef.current + updateOffset,
+    );
+    range.collapse();
+    selection.addRange(range);
+
+    // 변경된 offset 반영
+    setOffset();
+  };
+
+  // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
+  useEffect(() => {
+    socket.on('mom-initialization', (crdt) => {
+      syncCRDT(crdt);
+
+      if (!blockRef.current) return;
+
+      blockRef.current.innerText = readCRDT();
+      blockRef.current.contentEditable = 'true';
+    });
+
+    socket.on('mom-insertion', (op) => {
+      const prevIndex = remoteInsertCRDT(op);
+
+      if (!blockRef.current) return;
+
+      blockRef.current.innerText = readCRDT();
+
+      if (prevIndex === null || offsetRef.current === null) return;
+
+      updateCaretPosition(Number(prevIndex < offsetRef.current));
+    });
+
+    socket.on('mom-deletion', (op) => {
+      const targetIndex = remoteDeleteCRDT(op);
+
+      if (!blockRef.current) return;
+
+      blockRef.current.innerText = readCRDT();
+
+      if (targetIndex === null || offsetRef.current === null) return;
+
+      updateCaretPosition(-Number(targetIndex <= offsetRef.current));
+    });
+
+    return () => {
+      socket.removeAllListeners();
+      socket.disconnect();
+    };
+  }, []);
+
+  // 한글 입력 핸들링
+  const onCompositionEnd: React.CompositionEventHandler = (e) => {
+    const event = e.nativeEvent as CompositionEvent;
+
+    // compositionend 이벤트가 공백 문자로 발생하는 경우가 있음
+    const letters = (event.data as string).split('');
+    const maxIndex = letters.length - 1;
+
+    letters.forEach((letter, idx) => {
+      if (offsetRef.current === null) return;
+
+      const previousLetterIndex = offsetRef.current - 2 - (maxIndex - idx);
+
+      const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
+
+      socket.emit('mom-insertion', remoteInsertion);
+    });
+  };
+
+  // 블럭 한개 가정을 위한 임시 핸들러
+  const onKeyDown: React.KeyboardEventHandler = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+
+      console.log('새 블럭이 생길거에요 ^^');
+    }
+  };
+
+  return (
+    <p
+      ref={blockRef}
+      onInput={onInput}
+      onCompositionEnd={onCompositionEnd}
+      {...offsetHandlers}
+      onKeyDown={onKeyDown}
+      className={style['editor-container']}
+      suppressContentEditableWarning={true}
+    >
+      {readCRDT()}
+    </p>
+  );
+}
+
+export default Editor;

client/src/components/Editor/index.tsx

@@ -0,0 +1,11 @@
+.editor-container {
+  box-sizing: border-box;
+  height: calc(100% - 70px);
+  padding: 20px;
+  background-color: white;
+  white-space: pre-wrap;
+
+  &:focus {
+    outline: none;
+  }
+}

client/src/components/Editor/style.module.scss

@@ -1,3 +1,4 @@
+import Editor from '../Editor';
 import style from './style.module.scss';
 
 function Mom() {
@@ -36,7 +37,7 @@ function Mom() {
           </h1>
           <span>{selectedMom.createdAt.toLocaleString()}</span>
         </div>
-        <div className={style['editor-container']}>회의록 내용</div>
+        <Editor />
       </div>
     </div>
   );

client/src/components/Mom/index.tsx

@@ -1,4 +1,4 @@
-@import 'styles/color.module.scss';
+@import 'styles/color.module';
 
 .mom-container {
   display: flex;
@@ -18,12 +18,12 @@
 
 .mom-header {
   display: flex;
+  box-sizing: border-box;
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
   height: 70px;
   padding: 0px 15px 20px 15px;
-  box-sizing: border-box;
   color: $gray-100;
 
   & > h1 {
@@ -35,10 +35,3 @@
     }
   }
 }
-
-.editor-container {
-  height: calc(100% - 70px);
-  padding: 20px;
-  box-sizing: border-box;
-  background-color: white;
-}

client/src/components/Mom/style.module.scss

@@ -0,0 +1,93 @@
+import CRDT, {
+  RemoteInsertOperation,
+  RemoteDeleteOperation,
+} from '@wabinar/crdt';
+import { useRef } from 'react';
+import { useUserContext } from 'src/hooks/useUserContext';
+
+enum OPERATION_TYPE {
+  INSERT,
+  DELETE,
+}
+
+interface RemoteOperation {
+  type: OPERATION_TYPE;
+  op: RemoteDeleteOperation | RemoteInsertOperation;
+}
+
+export function useCRDT() {
+  const crdtRef = useRef<CRDT>(new CRDT());
+  const userContext = useUserContext();
+
+  let initialized = false;
+  const operationSet: RemoteOperation[] = [];
+
+  const syncCRDT = (object: unknown) => {
+    Object.setPrototypeOf(object, CRDT.prototype);
+
+    crdtRef.current = object as CRDT;
+    crdtRef.current.setClientId(userContext.userInfo?.user.id);
+
+    initialized = true;
+    operationSet.forEach(({ type, op }) => {
+      switch (type) {
+        case OPERATION_TYPE.INSERT:
+          remoteInsertCRDT(op as RemoteInsertOperation);
+          break;
+        case OPERATION_TYPE.DELETE:
+          remoteDeleteCRDT(op as RemoteDeleteOperation);
+          break;
+        default:
+          break;
+      }
+    });
+  };
+
+  const readCRDT = (): string => {
+    if (!initialized) return '';
+    return crdtRef.current.read();
+  };
+
+  const localInsertCRDT = (index: number, letter: string) => {
+    const remoteInsertion = crdtRef.current.localInsert(index, letter);
+
+    return remoteInsertion;
+  };
+
+  const localDeleteCRDT = (index: number) => {
+    const targetIndex = crdtRef.current.localDelete(index);
+
+    return targetIndex;
+  };
+
+  const remoteInsertCRDT = (op: RemoteInsertOperation) => {
+    if (!initialized) {
+      operationSet.push({ type: OPERATION_TYPE.INSERT, op });
+      return null;
+    }
+
+    const prevIndex = crdtRef.current.remoteInsert(op);
+
+    return prevIndex;
+  };
+
+  const remoteDeleteCRDT = (op: RemoteDeleteOperation) => {
+    if (!initialized) {
+      operationSet.push({ type: OPERATION_TYPE.DELETE, op });
+      return null;
+    }
+
+    const targetIndex = crdtRef.current.remoteDelete(op);
+
+    return targetIndex;
+  };
+
+  return {
+    syncCRDT,
+    readCRDT,
+    localInsertCRDT,
+    localDeleteCRDT,
+    remoteInsertCRDT,
+    remoteDeleteCRDT,
+  };
+}