글자색 ​

설명 ​

textColor() 는 span[data-nabi-color] 의 소유자(claim)입니다. 형광펜과 같은 갈래로, 값을 가진 인라인 마크(mark)라 켜고 끄는 것이 아니라 색을 고릅니다.

• 툴바나 @ 메뉴에서 고르면 토글 대신 견본판(palette)이 뜹니다.
• 견본판은 캐럿(caret) 곁에, 글자를 골라 두었다면 그 글자 옆에 섭니다. 자리를 잴 수 없을 때만 누른 버튼에 붙습니다.
• 방향키로 고릅니다. ←→ 는 한 칸, ↑↓ 는 한 줄, Home·End 는 그 줄의 양 끝, Enter·Space 는 확정, Escape 는 닫기입니다. 짚은 칸은 aria-selected 로도 표시됩니다.
• 칠할 글자가 없으면 아무 일도 하지 않습니다. 캐럿만 두고 색을 고르면 빈 <span> 을 만들지 않습니다.
• 이미 색이 걸린 글자 안이라면 색만 갈아 끼웁니다. 마크가 겹쳐 쌓이지 않습니다.
• 색이 걸린 글자 안에 캐럿을 두면 상황 줄(context row)에 글자색 지우기가 뜹니다. 껍데기만 벗기고 글자는 남깁니다.
• 저장값에는 색 이름만 남습니다 — data-nabi-color="green". 이름이면 필터(filter)가 화이트리스트로 거를 수 있고, 테마가 색을 쥘 수 있습니다.
• 형광펜과는 서로 다른 마크라 같은 글자에 함께 걸립니다.
• 색 하나가 전부입니다. 밑줄은 링크의 표식이라 함께 걸지 않고, blue 는 링크 색과 비슷하므로 링크와 섞어 쓰지 않습니다.
• 다섯 색은 라이트와 다크에서 값이 같습니다. 그러려고 고른 색들입니다.

코어는 등록되지 않은 <span> 을 전부 벗깁니다 — 코드 블록의 색칠 토큰이 문서의 실체에 남지 않는 것도 그 규칙 때문입니다. 그래서 이 wing 은 태그만 보지 않고 태그와 값을 함께 봅니다 (형광펜은 태그만 봅니다).

• data-nabi-color 가 위 목록의 값일 때만 이 wing 의 것입니다. 그 밖의 <span> 은 벗겨집니다.
• 낯선 값은 조이지 않고 버립니다. 형광펜은 색을 몰라도 노랑으로 조이지만, <span> 은 <mark> 와 달리 그 자체로 아무 뜻이 없어 색을 모르면 남길 것이 없습니다. 껍데기가 벗겨져 평문(plain text)이 됩니다.
• class·id·style 은 전부 떨어집니다.

인라인 style 은 나가지 않습니다. 색은 시트(stylesheet)의 몫이라 저장된 HTML 을 그리는 쪽에도 nabi.css 가 필요합니다. 시트가 없으면 색이 없는 평범한 글자로 보입니다 — 형광펜은 브라우저 기본 <mark> 의 노란 배경이라도 남지만 글자색은 그렇지 않습니다.

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

데모 ​

npm install nabi-note

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

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