형광펜 ​

설명 ​

highlight() 는 <mark> 의 소유자(claim)입니다. 값을 가진 인라인 마크(mark)라 켜고 끄는 것이 아니라 색을 고릅니다 — 링크와 같은 갈래입니다.

• 툴바나 @ 메뉴에서 고르면 토글 대신 견본판(palette)이 뜹니다.
• 견본판은 캐럿(caret) 곁에, 글자를 골라 두었다면 그 글자 옆에 섭니다. 자리를 잴 수 없을 때만 누른 버튼에 붙습니다.
• 방향키로 고릅니다. ←→ 는 한 칸, ↑↓ 는 한 줄, Home·End 는 그 줄의 양 끝, Enter·Space 는 확정, Escape 는 닫기입니다. 짚은 칸은 aria-selected 로도 표시되고 색마다 이름표가 있어, 색만으로 뜻을 전하지 않습니다.
• 칠할 글자가 없으면 아무 일도 하지 않습니다. 캐럿만 두고 색을 고르면 빈 <mark> 를 만들지 않습니다.
• 자국 안에 캐럿을 두면 상황 줄(context row)에 형광펜 지우기가 뜹니다. 껍데기만 벗기고 글자는 남깁니다.
• 저장값에는 색 이름만 남습니다 — data-nabi-hl="yellow". 이름이면 필터(filter)가 화이트리스트로 거를 수 있고, 테마가 색을 쥘 수 있습니다.
• <mark> 는 전부 이 wing 의 것입니다. 색이 없거나 낯선 값이면 벗기지 않고 노랑으로 조입니다 — 강조했다는 뜻은 태그가 이미 들고 있어 버릴 것이 아닙니다.

색은 반투명이라 글자가 아래로 비쳐 보입니다. 칠한 네모가 아니라 형광펜으로 읽히는 것이 그 때문입니다.

인라인 style 은 나가지 않습니다. 색은 시트(stylesheet)의 몫이라 저장된 HTML 을 그리는 쪽에도 nabi.css 가 필요합니다. 시트가 없으면 브라우저 기본 <mark> 의 노란 배경으로 보입니다. 손으로 그은 듯한 자국도 시트가 만들며 저장값에는 들어가지 않습니다.

색 목록과 속성 이름은 상수로도 나갑니다 — HIGHLIGHT_COLORS · HIGHLIGHT_ATTR.

데모 ​

npm install nabi-note

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

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