Merge branch 'release/1.0.3'

boostcampwm-2024 · Dec 5, 2024 · 6c2581c · 6c2581c
2 parents 2688668 + be88b84
commit 6c2581c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 42 deletions.
diff --git a/client/src/features/editor/hooks/useCopyAndPaste.ts b/client/src/features/editor/hooks/useCopyAndPaste.ts
@@ -73,6 +73,14 @@ export const useCopyAndPaste = ({
     [],
   );
 
+  const indentChecker = (text: string) => {
+    const indent = text.match(/^(?:( {3})|( {6})|( {9}))/);
+    if (indent) {
+      return indent[0].length / 3;
+    }
+    return 0;
+  };
+
   const handlePaste = useCallback(
     (e: React.ClipboardEvent<HTMLDivElement>, blockRef: HTMLDivElement | null, block: Block) => {
       e.preventDefault();
@@ -128,7 +136,7 @@ export const useCopyAndPaste = ({
 
         editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + metadata.length;
       } else {
-        const text = e.clipboardData.getData("text/plain");
+        let text = e.clipboardData.getData("text/plain");
         if (!block || text.length === 0) return;
 
         const caretPosition = block.crdt.currentCaret;
@@ -138,52 +146,49 @@ export const useCopyAndPaste = ({
             (b) => b.id === block.id,
           );
           const textList = text.split("\n");
-          textList.forEach((line, index) => {
-            if (index === 0) {
-              line.split("").forEach((char, index) => {
-                const charNode = block.crdt.localInsert(index, char, block.id, pageId);
-                sendCharInsertOperation({
-                  type: "charInsert",
-                  node: charNode.node,
-                  blockId: block.id,
-                  pageId,
-                });
-              });
-              const isMarkdownGrammer = checkMarkdownPattern(line);
-              if (isMarkdownGrammer && block.type === "p") {
-                block.type = isMarkdownGrammer.type;
-                sendBlockUpdateOperation(editorCRDT.localUpdate(block, pageId));
-                for (let i = 0; i < isMarkdownGrammer.length; i++) {
-                  sendCharDeleteOperation(block.crdt.localDelete(0, block.id, pageId));
-                }
+          textList.forEach((line) => {
+            if (line.length === 0) return;
+            let currentLine = line;
+            const newBlock = editorCRDT.localInsert(currentBlockIndex, "");
+            if (currentLine.startsWith("- [ ]")) {
+              currentLine = currentLine.slice(2);
+            }
+            if (indentChecker(currentLine) > 0) {
+              newBlock.node.indent = indentChecker(currentLine);
+              currentLine = currentLine.slice(indentChecker(currentLine) * 3 + 1);
+            }
+            sendBlockInsertOperation({
+              type: "blockInsert",
+              node: newBlock.node,
+              pageId,
+            });
+            currentLine.split("").forEach((char, index) => {
+              sendCharInsertOperation(
+                newBlock.node.crdt.localInsert(index, char, newBlock.node.id, pageId),
+              );
+            });
+            const isMarkdownGrammer = checkMarkdownPattern(currentLine);
+            if (isMarkdownGrammer && newBlock.node.type === "p") {
+              let markdownText = isMarkdownGrammer.length;
+              if (isMarkdownGrammer.type === "checkbox" && currentLine.startsWith("[ ]")) {
+                markdownText += 1;
               }
-            } else {
-              const newBlock = editorCRDT.localInsert(currentBlockIndex, "");
-              sendBlockInsertOperation({
-                type: "blockInsert",
-                node: newBlock.node,
-                pageId,
-              });
-              line.split("").forEach((char, index) => {
-                sendCharInsertOperation(
-                  newBlock.node.crdt.localInsert(index, char, newBlock.node.id, pageId),
+              newBlock.node.type = isMarkdownGrammer.type;
+              sendBlockUpdateOperation(editorCRDT.localUpdate(newBlock.node, pageId));
+              for (let i = 0; i <= markdownText; i++) {
+                sendCharDeleteOperation(
+                  newBlock.node.crdt.localDelete(0, newBlock.node.id, pageId),
                 );
-              });
-              const isMarkdownGrammer = checkMarkdownPattern(line);
-              if (isMarkdownGrammer && newBlock.node.type === "p") {
-                newBlock.node.type = isMarkdownGrammer.type;
-                sendBlockUpdateOperation(editorCRDT.localUpdate(newBlock.node, pageId));
-                for (let i = 0; i < isMarkdownGrammer.length; i++) {
-                  sendCharDeleteOperation(
-                    newBlock.node.crdt.localDelete(0, newBlock.node.id, pageId),
-                  );
-                }
               }
             }
             currentBlockIndex += 1;
           });
           editorCRDT.LinkedList.updateAllOrderedListIndices();
         } else {
+          let grammarCount = 0;
+          if (text.startsWith("- [ ]")) {
+            text = text.slice(2);
+          }
           // 텍스트를 한 글자씩 순차적으로 삽입
           text.split("").forEach((char, index) => {
             const insertPosition = caretPosition + index;
@@ -195,8 +200,21 @@ export const useCopyAndPaste = ({
               pageId,
             });
           });
+          const isMarkdownGrammer = checkMarkdownPattern(text);
+          if (isMarkdownGrammer && block.type === "p") {
+            block.type = isMarkdownGrammer.type;
+            let markdownText = isMarkdownGrammer.length;
+            sendBlockUpdateOperation(editorCRDT.localUpdate(block, pageId));
+            if (isMarkdownGrammer.type === "checkbox" && text.startsWith("[ ]")) {
+              markdownText += 1;
+            }
+            for (let i = 0; i < markdownText; i++) {
+              sendCharDeleteOperation(block.crdt.localDelete(0, block.id, pageId));
+              grammarCount += 1;
+            }
+          }
           // 캐럿 위치 업데이트
-          editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + text.length;
+          editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + text.length - grammarCount;
         }
       }
 

diff --git a/client/src/features/workSpace/hooks/usePagesManage.ts b/client/src/features/workSpace/hooks/usePagesManage.ts
@@ -7,10 +7,10 @@ import {
 import { Page as CRDTPage } from "@noctaCrdt/Page";
 import { WorkSpace } from "@noctaCrdt/WorkSpace";
 import { useEffect, useState, useRef, useCallback } from "react";
+import { PAGE, SIDE_BAR } from "@src/constants/size";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { useToastStore } from "@src/stores/useToastStore";
 import { Page } from "@src/types/page";
-import { PAGE, SIDE_BAR } from "@src/constants/size";
 
 const PAGE_OFFSET = 60;
 
@@ -242,6 +242,11 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
         page.id === pageId ? { ...page, isVisible: false, isLoaded: false } : page,
       ),
     );
+    // Socket.IO를 통해 서버에 페이지 퇴장 알림
+    const socketStore = useSocketStore.getState();
+    if (socketStore.socket) {
+      socketStore.socket.emit("leave/page", { pageId });
+    }
   };
   const updatePage = (
     pageId: string,

diff --git a/client/src/utils/caretUtils.ts b/client/src/utils/caretUtils.ts
@@ -142,7 +142,19 @@ export const setCaretPosition = ({
     }
 
     const range = document.createRange();
-    range.setStart(targetNode, targetOffset);
+    try {
+      range.setStart(targetNode, targetOffset);
+    } catch (rangeError) {
+      // setStart에 실패한 경우, 첫 번째 텍스트 노드를 찾아서 position 위치에 캐럿 설정
+      const firstTextNode = walker.firstChild();
+      if (firstTextNode) {
+        const textLength = firstTextNode.textContent?.length || 0;
+        range.setStart(firstTextNode, Math.min(position, textLength));
+      } else {
+        // 텍스트 노드가 없는 경우 편집 가능한 div의 시작점에 설정
+        range.setStart(editableDiv, 0);
+      }
+    }
     range.collapse(true);
 
     selection.removeAllRanges();