Merge pull request #265 from boostcampwm-2024/Feature/#264_단축키로_텍스트_스…

…타일_변경 Feature/#264 단축키로 텍스트 스타일 변경
boostcampwm-2024 · Dec 2, 2024 · 4c4b302 · 4c4b302
2 parents 427b4d4 + 3f44e4f
commit 4c4b302
Showing 1 changed file with 34 additions and 1 deletion.
diff --git 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)}