Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 0 additions & 17 deletions client/src/features/editor/components/block/Block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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;

Expand Down
5 changes: 3 additions & 2 deletions client/src/features/editor/utils/domSyncUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!
&nbsp; 는 “Non-breaking Space”를 의미하는 HTML entity 인데요. 한국말로 번역을 해보자면 “줄바꿈이 일으키지 않는 공백이라고 하는군요..!
위 replace요소가 추가되고, span 태그로 바꾸는 전처리 과정을 빼니, 안정적으로 탐지할 수 있게 되었군요.

};
return escapeMap[match] || match;
});
Expand Down
Loading