드롭캡

문서 첫 문단의 첫 글자를 장식하는 드롭캡 플러그인입니다. 책의 첫 장처럼 문서 시작을 강조하고, 설치된 테마의 강조색(Primary) 을 그대로 따라가 따로 색을 고르지 않아도 테마와 완벽하게 어울립니다.

sample-plugin 스타터 템플릿과 동일한 구조(manifest.json + src/main.ts + vite.config.ts)로 작성되었고, 타이머 플러그인의 설정·라이프사이클 패턴을 따릅니다.

핵심 특징

• 첫 문단 기본 — 기본값은 문서의 첫 문단에만 드롭캡이 적용됩니다. 모든 문단에 적용하려면 설정에서 변경하세요.
• 테마 적응형 색상 — 기본은 hsl(var(--primary))로 테마의 강조색을 그대로 사용합니다. 라이트/다크 모드나 사용자가 설치한 테마를 바꾸면 드롭캡 색도 함께 변합니다. 원하는 경우 테마 강조색 사용을 끄고 직접 색을 지정할 수 있습니다.
• 모든 UI 한국어 — 설정, 명령어, 토스트가 100% 한국어입니다.

사용법

1. 플러그인 설치 후 문서를 열면 첫 문단 첫 글자가 크게 표시됩니다.
2. 설정 → 플러그인 → 드롭캡에서:
   • 테마 강조색 사용을 끄면 컬러 피커가 나타나 원하는 색으로 바꿀 수 있습니다.
   • **어디에 적용할까요?**에서 모든 문단을 선택하면 각 문단마다 드롭캡이 생깁니다.
   • 크기·글꼴·두께·줄 높이를 조절하면 즉시 미리보기처럼 반영됩니다.
3. 문서 헤더의 드롭캡 버튼이나 커맨드 팔레트 드롭캡: 켜기/끄기로 빠르게 켜고 끌 수 있습니다.

설정 항목

그룹	항목	기본값
기본 설정	드롭캡 사용	켜짐
	어디에 적용할까요?	문서의 첫 문단만
	테마 강조색 사용	켜짐
	첫 글자 색상 (테마색 끔일 때만)	#c41e3a
모양 설정	첫 글자 크기	3.4배
	글꼴	명조(세리프)
	글자 두께	700
	줄 높이 보정	0.82
고급	인용문에도 적용	꺼짐

디자인 노트 (테마 적응)

• 호스트가 제공하는 디자인 토큰(--primary, --foreground, --background, --radius, --shadow-*)을 사용하므로, 플러그인이 별도 색을 하드코딩하지 않습니다.
• JS는 --pnsv-dropcap-color에 hsl(var(--primary))라는 참조 값을 넣습니다. CSS 변수가 토큰을 참조하므로, 테마 변경 시 JS를 다시 실행하지 않아도 브라우저가 자동으로 색을 갱신합니다.
• styles.css의 .pnsv-dropcap-scope-first p ~ p::first-letter 규칙이 기본 범위를 구현합니다. all 모드에서는 이 해제 규칙이 붙지 않아 모든 문단에 드롭캡이 유지됩니다.
• 다크 모드 별도 필터를 두지 않습니다 — hsl(var(--primary)) 자체가 테마가 정의한 라이트/다크 값으로 바뀌기 때문입니다.

개발

npm install
npm run build      # dist/main.js + dist/styles.css
npm run typecheck  # tsc -p tsconfig.json

@pensiv/plugin-sdk와 react는 호스트가 제공해 번들에 포함되지 않습니다 (@pensiv/build-config가 external 처리).

라이선스

MIT