From 3f44e4fc2e3c8bec800af62c8809281a5014a63b Mon Sep 17 00:00:00 2001
From: Ludovico7 <hailid3111@gmail.com>
Date: Mon, 2 Dec 2024 18:02:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8B=A8=EC=B6=95=ED=82=A4=EB=A1=9C=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: hyonun <hyonun321@users.noreply.github.com>
Co-authored-by: Jang seo yun <pipisebastian@users.noreply.github.com>
---
 .../editor/components/block/Block.tsx         | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
index ed5ddac..6d0300e 100644
--- a/client/src/features/editor/components/block/Block.tsx
+++ b/client/src/features/editor/components/block/Block.tsx
@@ -158,6 +158,39 @@ export const Block: React.FC<BlockProps> = memo(
       }
     };
 
+    const handleKeyDown = (
+      e: React.KeyboardEvent<HTMLDivElement>,
+      blockRef: HTMLDivElement | null,
+      block: CRDTBlock,
+    ) => {
+      switch (e.key) {
+        case e.metaKey && "b": {
+          e.preventDefault();
+          onTextStyleUpdate("bold", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "i": {
+          e.preventDefault();
+          onTextStyleUpdate("italic", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "u": {
+          e.preventDefault();
+          onTextStyleUpdate("underline", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "Shift" && "s": {
+          onTextStyleUpdate("strikethrough", block.id, selectedNodes);
+          e.preventDefault();
+          break;
+        }
+        default: {
+          onKeyDown(e, blockRef, block);
+          break;
+        }
+      }
+    };
+
     const handleAnimationSelect = (animation: AnimationType) => {
       onAnimationSelect(block.id, animation);
     };
@@ -276,7 +309,7 @@ export const Block: React.FC<BlockProps> = memo(
             <IconBlock type={block.type} index={block.listIndex} indent={block.indent} />
             <div
               ref={blockRef}
-              onKeyDown={(e) => onKeyDown(e, blockRef.current, block)}
+              onKeyDown={(e) => handleKeyDown(e, blockRef.current, block)}
               onInput={handleInput}
               onClick={(e) => onClick(block.id, e)}
               onCopy={(e) => onCopy(e, blockRef.current, block)}