1.7 KiB
1.7 KiB
snap 답변의 ASCII 다이어그램이 말풍선 밖으로 튀어나감
증상
- 챗봇 답변에 든 ASCII 다이어그램(
┌───┐박스 라인)이 회색 인라인 코드 배경으로 줄줄이 렌더되면서 말풍선 오른쪽 밖으로 넘침
원인
Message.tsx가pre를 fragment 로 언랩(pre: ({children}) => <>{children}</>)하고, 코드펜스는code컴포넌트의language-*className 매칭으로만 CodeBlock 처리하고 있었음- 언어 라벨 없는 코드펜스(LLM 이 ``` 만 쓰고 다이어그램 넣는 경우)는 className 이 없어서 인라인
code분기로 떨어짐 →<pre>없는 인라인 코드가 됨 - 인라인은 공백에서만 줄바꿈되는데
─────연속 문자는 줄바꿈 지점이 없어서 그대로 overflow - react-markdown v10 은 v8 의
inlineprop 이 없어짐 — className 만으로 블록/인라인 구분하면 이 케이스가 샘
수정
Message.tsx: 블록 코드 판별을pre컴포넌트로 이동 — 펜스는 언어 유무와 무관하게 전부CodeBlock(overflow-auto 스크롤 컨테이너)으로.code는 순수 인라인만 담당- 재현 테스트:
Message.test.tsx(언어 없는 펜스 → CodeBlock, 언어 있는 펜스 유지, 인라인 유지) StreamingText.tsx는pre를 살려두고overflow-x-auto도 있어서 무관 — 안 건드림
교훈
- react-markdown 에서 "블록 코드 = pre 의 자식" 이 유일하게 안전한 구분 기준.
language-*className 은 언어 없는 펜스에서 빠짐 pre를 언랩할 거면 언어 없는 펜스가 어디로 떨어지는지 반드시 확인