From e0215b488f6d1156c333e408ad115abe90f74b6f Mon Sep 17 00:00:00 2001
From: Ludovico7 <hailid3111@gmail.com>
Date: Wed, 4 Dec 2024 18:17:01 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=EB=90=9C=20=ED=83=9C=EA=B7=B8=EC=97=90=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=A7=8C=20=EB=82=A8=EC=95=84?=
 =?UTF-8?q?=EC=9E=88=EC=9D=84=20=EB=95=8C=20=EC=97=90=EB=9F=AC=EB=82=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/editor/components/block/Block.tsx  | 17 -----------------
 .../src/features/editor/utils/domSyncUtils.ts   |  5 +++--
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
index 5d39879..635181f 100644
--- a/client/src/features/editor/components/block/Block.tsx
+++ b/client/src/features/editor/components/block/Block.tsx
@@ -117,7 +117,6 @@ export const Block: React.FC<BlockProps> = memo(
     const [slashModalPosition, setSlashModalPosition] = useState({ top: 0, left: 0 });
 
     const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
-      const currentElement = e.currentTarget;
       // 텍스트를 삭제하면 <br> 태그가 생김
       // 이를 방지하기 위해 <br> 태그 찾아서 모두 삭제
       const brElements = e.currentTarget.getElementsByTagName("br");
@@ -126,22 +125,6 @@ export const Block: React.FC<BlockProps> = memo(
         Array.from(brElements).forEach((br) => br.remove());
       }
 
-      // 빈 span 태그 제거
-      const cleanEmptySpans = (element: HTMLElement) => {
-        const spans = element.getElementsByTagName("span");
-        Array.from(spans).forEach((span) => {
-          // 텍스트 컨텐츠가 없거나 공백만 있는 경우
-          // 텍스트 컨텐츠가 없거나 공백만 있는 경우
-          if (!span.textContent || span.textContent.trim() === "") {
-            if (span.parentNode) {
-              span.parentNode.removeChild(span);
-            }
-          }
-        });
-      };
-
-      cleanEmptySpans(currentElement);
-
       const caretPosition = getAbsoluteCaretPosition(e.currentTarget);
       block.crdt.currentCaret = caretPosition;
 
diff --git a/client/src/features/editor/utils/domSyncUtils.ts b/client/src/features/editor/utils/domSyncUtils.ts
index bc65cdc..524f928 100644
--- a/client/src/features/editor/utils/domSyncUtils.ts
+++ b/client/src/features/editor/utils/domSyncUtils.ts
@@ -106,7 +106,7 @@ export const setInnerHTML = ({ element, block }: SetInnerHTMLProps): void => {
     // 새로운 스타일 조합으로 span 태그 열기
     if (styleChanged) {
       const className = getClassNames(targetState);
-      html += `<span class="${className}">`;
+      html += `<span class="${className}" style="white-space: pre;">`;
       spanOpen = true;
     }
 
@@ -139,13 +139,14 @@ const setsEqual = (a: Set<string>, b: Set<string>): boolean => {
 };
 
 const sanitizeText = (text: string): string => {
-  return text.replace(/<br>/g, "\u00A0").replace(/[<>&"']/g, (match) => {
+  return text.replace(/<br>/g, "\u00A0").replace(/[<>&"'\s]/g, (match) => {
     const escapeMap: Record<string, string> = {
       "<": "&lt;",
       ">": "&gt;",
       "&": "&amp;",
       '"': "&quot;",
       "'": "&#x27;",
+      " ": "&nbsp;",
     };
     return escapeMap[match] || match;
   });