Merge branch 'release/0.1.2'

boostcampwm-2024 · Nov 28, 2024 · 608a8a4 · 608a8a4
2 parents 6a6e268 + 314e673
commit 608a8a4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx b/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx
@@ -40,7 +40,6 @@ export const TypeOptionModal = ({
       case "Enter":
         e.preventDefault();
         onTypeSelect(options[selectedIndex].id);
-
         onClose();
         break;
 
@@ -60,35 +59,50 @@ export const TypeOptionModal = ({
   if (!isOpen) return null;
 
   return createPortal(
-    <motion.div
-      ref={modalRef}
-      tabIndex={0}
-      className={optionModal}
-      style={{
-        left: `${position.left}px`,
-        top: `${position.top}px`,
-        outline: "none",
-      }}
-      initial={modal.initial}
-      animate={modal.animate}
-      onKeyDown={handleKeyDown}
-    >
-      <div className={modalContainer}>
-        {options.map((option, index) => (
-          <button
-            key={option.id}
-            className={`${optionTypeButton} ${index === selectedIndex && "selected"}`}
-            onClick={() => {
-              onTypeSelect(option.id);
-              onClose();
-            }}
-            onMouseEnter={() => setSelectedIndex(index)}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
-    </motion.div>,
+    <>
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "transparent",
+          zIndex: 999,
+        }}
+        onClick={onClose}
+      />
+      <motion.div
+        ref={modalRef}
+        tabIndex={0}
+        className={optionModal}
+        style={{
+          left: `${position.left}px`,
+          top: `${position.top}px`,
+          outline: "none",
+          zIndex: 1000,
+        }}
+        initial={modal.initial}
+        animate={modal.animate}
+        onKeyDown={handleKeyDown}
+      >
+        <div className={modalContainer}>
+          {options.map((option, index) => (
+            <button
+              key={option.id}
+              className={`${optionTypeButton} ${index === selectedIndex && "selected"}`}
+              onClick={() => {
+                onTypeSelect(option.id);
+                onClose();
+              }}
+              onMouseEnter={() => setSelectedIndex(index)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </motion.div>
+    </>,
     document.body,
   );
 };
diff --git a/client/src/features/editor/hooks/useMarkdownGrammer.ts b/client/src/features/editor/hooks/useMarkdownGrammer.ts
@@ -395,8 +395,13 @@ export const useMarkdownGrammer = ({
           const selection = window.getSelection();
           if (!selection) return;
           const currentContent = currentBlock.crdt.read();
+          const currentCaret = getAbsoluteCaretPosition(e.currentTarget);
           const markdownElement = checkMarkdownPattern(currentContent);
-          if (markdownElement && currentBlock.type === "p") {
+          if (
+            markdownElement &&
+            currentCaret === markdownElement.length &&
+            currentBlock.type === "p"
+          ) {
             e.preventDefault();
             // 마크다운 패턴 매칭 시 타입 변경하고 내용 비우기
             currentBlock.type = markdownElement.type;

diff --git a/client/src/features/editor/utils/domSyncUtils.ts b/client/src/features/editor/utils/domSyncUtils.ts
@@ -139,7 +139,11 @@ const setsEqual = (a: Set<string>, b: Set<string>): boolean => {
 };
 
 const sanitizeText = (text: string): string => {
-  return text.replace(/<br>/g, "\u00A0");
+  return text
+    .replace(/<br>/g, "\u00A0")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/&/g, "&amp;");
 };
 
 // 배열 비교 헬퍼 함수