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 = memo( const [slashModalPosition, setSlashModalPosition] = useState({ top: 0, left: 0 }); const handleInput = (e: React.FormEvent) => { - const currentElement = e.currentTarget; // 텍스트를 삭제하면
태그가 생김 // 이를 방지하기 위해
태그 찾아서 모두 삭제 const brElements = e.currentTarget.getElementsByTagName("br"); @@ -126,22 +125,6 @@ export const Block: React.FC = 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 += ``; + html += ``; spanOpen = true; } @@ -139,13 +139,14 @@ const setsEqual = (a: Set, b: Set): boolean => { }; const sanitizeText = (text: string): string => { - return text.replace(/
/g, "\u00A0").replace(/[<>&"']/g, (match) => { + return text.replace(/
/g, "\u00A0").replace(/[<>&"'\s]/g, (match) => { const escapeMap: Record = { "<": "<", ">": ">", "&": "&", '"': """, "'": "'", + " ": " ", }; return escapeMap[match] || match; });