문제

텍스트 에디터에서 여러 태그를 반환해주는데 dangerouslySetInnerHTML 로 렌더링할 경우 폰트의 사이즈나 굵기가 적용이 안되는 문제가 있었다.

function InputContent({ value, onChange, readonly = false }: InputContentProps) {
  return (
    <div className="flex items-center mb-4">
      <span className="w-[120px] font-bold flex-shrink-0">내용</span>
      {readonly ? (
        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(value) }} className="w-full h-full prose" />
      ) : (
        <TextEditor value={value} onChange={onChange} />
      )}
    </div>
  );
}

CSS를 뜯어고치다 해당 스타일을 체크아웃하니까 원래대로 돌아오는 것을 확인할 수 있었다.

해결

현재 CSS프레임워크로 tailwind CSS를 쓰고 있는데 기본적으로 모든 태그의 스타일을 리셋시키면서 발생한 문제다.

이를 해결하기 위해 @tailwindcss/typography 플러그인을 설치하여 prose 클래스를 덧붙이기로 했다.

@tailwindcss/typography 플러그인

해당 플러그인은 에디터에서 생성된 HTML 컨텐츠의 타이포그래피 스타일을 자동으로 적용해주는 CSS 플러그인이다.

prose를 사용하면 해당 요소와 그 하위 요소들에 대해 타이포그래피 스타일을 다시 적용해준다.

prose 클래스 사용

1. @tailwindcss/typography 플러그인 설치

npm install -D @tailwindcss/typography

2. tailwind.config.js 에 플러그인 추가

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

3. prose className 추가

function InputContent({ value, onChange, readonly = false }: InputContentProps) {
  return (
    <div className="flex items-center mb-4">
      <span className="w-[120px] font-bold flex-shrink-0">내용</span>
      {readonly ? (
        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(value) }} 
          className="w-full h-full prose" />
      ) : (
        <TextEditor value={value} onChange={onChange} />
      )}
    </div>
  );
}

위와 같이 적용해주면 기존의 스타일이 제대로 반영되는 것을 확인할 수 있다!