드롭 캡 ​

설명 ​

dropCap() 은 문단의 첫 글자를 여러 줄 높이로 키우고 글이 그 옆으로 흐르게 합니다. 기본은 세 줄입니다.

• 태그가 아니라 블록 속성(block attribute) data-nabi-dropcap="on" 입니다. 정렬과 같은 자리이고, 다시 누르면 속성이 떨어집니다.
• 문단에만 걸립니다. 제목과 리스트에서는 툴바에도 @ 메뉴에도 버튼이 뜨지 않고, 붙어 들어온 속성은 필터(filter)가 떼어 냅니다. 표 칸과 리스트 항목에도 남지 않으므로 문서 뿌리의 직계 문단이 걸리는 자리 전부입니다.
• 줄 수는 호스트가 시트(stylesheet) 변수로 바꿉니다 — .nabi { --nabi-dropcap-lines: 2; }. wing 옵션으로 두면 시트가 문서 전역이라, 설정이 다른 에디터 둘이 한 페이지에 있을 때 나중에 실린 시트가 둘 다 이깁니다.
• 속성은 저장값에 그대로 남습니다. 호스트가 그린 화면에서 드롭 캡으로 보이려면 nabi.css 와 컨테이너의 class="nabi-note" 가 필요합니다.
• 짧은 문단도 감쌀 줄만큼 자리를 잡아 두므로 첫 글자가 다음 블록으로 흘러내리지 않습니다.
• 빈 문단은 속성만 남고 아무것도 그리지 않습니다. 글자를 입력하면 그때 드롭 캡이 됩니다.
• ::first-letter 규정에 따라 앞의 구두점이 함께 커집니다("따옴표 는 " 와 따 가 둘 다 커집니다). 첫 글자가 마크(mark) 안에 있으면 그 마크와 함께 걸려 굵은 드롭 캡이 됩니다.
• 정렬·서체와 함께 걸 수 있습니다.
• 속성 이름은 DROPCAP_ATTR 상수로도 나갑니다.

데모 ​

npm install nabi-note

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})