Merge pull request #289 from boostcampwm-2024/Hotfix/#288_스페이스만_있을때_캐…

…럿_튀는_문제

Hotfix/#288 스타일 적용된 태그에 스페이스만 남아있을 때 에러나는 문제

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;
 

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;
   });