Novel 스타일링 문제

Novel에 대한 짧은 설명

Novel은 StarterKit이라는 Extension을 이용하여 스타일을 적용할 수 있다.

const starterKit = StarterKit.configure({
  bulletList: {
    HTMLAttributes: {
      class: cx("list-disc list-outside leading-3 -mt-2"),
    },
  },
  orderedList: {
    HTMLAttributes: {
      class: cx("list-decimal list-outside leading-3 -mt-2"),
    },
  },
  listItem: {
    HTMLAttributes: {
      class: cx("leading-normal -mb-2"),
    },
  },
  ...
})

위와 같이 StarterKit의 configure 메서드를 이용하면 어떤 Node에 대한 스타일링 tailwind로 수정할 수 있다.

문제 상황

[novel.sh]

Novel의 예시 페이지에서는 아래와 같이 heading에 기본 설정이 적용되어 있다.

하지만 Novel의 깃허브 소스코드를 아무리 찾아봐도 StarterKit Extension에 스타일링에 관한 것이 작성되어 있지 않았다.

그러면 Novel은 이런 설정을 어디서 한 것일까?

[StarterKit 설정이 동일한 우리 프로젝트]

문제 해결 과정

개발자 도구로부터 역추적 해보기로했다.

https://github.com/steven-tey/novel/blob/main/apps/web/styles/globals.css

이 css 속성은 global.css로부터 스타일이 적용됨을 볼 수 있다.

이 파일과 line을 따라가보니 아래와 같이 되어있었다.

@tailwind components;

@tailwind components는 Tailwind CSS에서 미리 정의된 UI 컴포넌트와 관련된 유틸리티를 포함하도록 하는 지시어이다.

즉, 그냥 tailwindcss에서 제공하는 공용 컴포넌트 ui다.

아직까지는 잘 모르겠어서 아래와 같은 내용을 구글에 검색해보았다.

.prose-lg :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *))

검색 결과에 tailwindcss-typography 라는 라이브러리가 나왔다.

https://github.com/tailwindlabs/tailwindcss-typography

이 tailwindcss-typography 플러그인은 Markdown에서 렌더링한 HTML와 같이 제어할 수 없는 일반적인 HTML에 아름다운 Typography 기본 설정을 추가해준다.

이 플러그인을 사용하려면 상위 HTML 요소에 prose 클래스를 추가하면 된다.

그리고나서 Novel Editor의 div 요소를 살펴봤는데 prose 클래스가 들어가 있는 것을 볼 수 있었다.

(또한 package.json을 보니 tailwindcss-typography 가 설치 되어있었다)

즉, 이 tailwindcss-typography를 사용하여 기본 스타일링을 하고 있던 것이었다.

플러그인 설치 및 적용

$ yarn add -D @tailwindcss/typography

@tailwindcss/typography를 설치하고 tailwind.config.js에 plugins에 추가 했다.

plugins: [require("@tailwindcss/typography")],

이 플러그인을 이용하니 기본 typography의 스타일링이 설정됐다.

[설치전]

[설치후]

느낀점

• 일단 이런 플러그인이 있을 줄은 몰랐다.
• 페어 프로그래밍을 하면서 이 문제를 같이 고민했었는데, 그냥 플러그인을 이용해서 그랬었다니… 약간 허무함이 느껴지지만, 그래도 간편하게 기본 에디터 스타일링을 할 수 있을 거 같아서 다행이다.