Feat/#221-B: 회의록 붙여넣기 기능 구현 (#233)

Author: dohun31

client/src/components/Mom/Block/index.tsx

@@ -127,11 +127,13 @@ function Block({ id, onKeyDown, index }: BlockProps) {
     };
 
     ee.on(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
+    ee.on(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
     ee.on(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
     ee.on(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
 
     return () => {
       ee.off(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
+      ee.off(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
       ee.off(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
       ee.off(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
     };
@@ -158,6 +160,26 @@ function Block({ id, onKeyDown, index }: BlockProps) {
 
   const onPaste: React.ClipboardEventHandler<HTMLParagraphElement> = (e) => {
     e.preventDefault();
+
+    setOffset();
+    if (offsetRef.current === null || !blockRef.current) return;
+
+    let previousLetterIndex = offsetRef.current - 1;
+    const previousText = blockRef.current.innerText.slice(
+      0,
+      previousLetterIndex + 1,
+    );
+    const nextText = blockRef.current.innerText.slice(previousLetterIndex + 1);
+
+    const pastedText = e.clipboardData.getData('text/plain').replace('\n', '');
+    const remoteInsertions = pastedText
+      .split('')
+      .map((letter) => localInsertCRDT(previousLetterIndex++, letter));
+
+    socket.emit(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, id, remoteInsertions);
+
+    blockRef.current.innerText = previousText + pastedText + nextText;
+    updateCaretPosition(pastedText.length);
   };
 
   const onKeyDownComposite: React.KeyboardEventHandler<HTMLParagraphElement> = (

client/src/components/Mom/index.tsx

@@ -108,6 +108,10 @@ function Mom() {
       ee.emit(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, op);
     });
 
+    socket.on(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, (id, crdt) => {
+      ee.emit(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, crdt);
+    });
+
     return () => {
       [
         SOCKET_MESSAGE.MOM.INIT,

client/src/constants/socket-message.ts

@@ -15,6 +15,7 @@ const SOCKET_MESSAGE = {
     INIT: 'init-block',
     INSERT_TEXT: 'insert-text',
     DELETE_TEXT: 'delete-text',
+    UPDATE_TEXT: 'update-text',
   },
   WORKSPACE: {
     START_MEETING: 'start-meeting',

server/constants/socket-message.ts

@@ -15,6 +15,7 @@ const SOCKET_MESSAGE = {
     INIT: 'init-block',
     INSERT_TEXT: 'insert-text',
     DELETE_TEXT: 'delete-text',
+    UPDATE_TEXT: 'update-text',
   },
   WORKSPACE: {
     START_MEETING: 'start-meeting',

server/socket/mom.ts

@@ -103,6 +103,20 @@ async function momSocketServer(io: Server) {
       socket.to(momId).emit(SOCKET_MESSAGE.BLOCK.DELETE_TEXT, blockId, op);
     });
 
+    socket.on(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, async (blockId, ops) => {
+      const momId = socket.data.momId;
+
+      for await (const op of ops) {
+        await crdtManager.onInsertText(blockId, op);
+      }
+
+      const blockCrdt = await crdtManager.getBlockCRDT(blockId);
+
+      socket
+        .to(momId)
+        .emit(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, blockId, blockCrdt.data);
+    });
+
     addEventHandlersForQuestionBlock(workspace, socket);
 
     /* 투표 관련 이벤트 */