링크 ​

설명 ​

link() 는 <a href> 의 소유자(claim)입니다. 이 wing 이 없으면 문서의 링크는 전부 평문(plain text)으로 떨어집니다.

• 툴바나 @ 메뉴에서 고르면 주소 상자가 뜹니다. 고른 글자가 있으면 그 글자에 걸고, 캐럿(caret)만 있으면 주소 자체를 글자로 넣습니다. 상자는 주소가 유효할 때만 확인이 열립니다.
• 이미 링크 안이라면 주소만 갈아 끼웁니다. 링크가 겹쳐 쌓이지 않습니다.
• 캐럿이 링크 안일 때 상황 줄(context row)에 뜨는 링크 해제는 껍데기만 벗기고 글자는 남깁니다. Escape 는 마크를 꺼서, 링크 끝에 이어 치는 글자가 링크에 딸려 들어가지 않게 합니다.
• 살아남는 속성은 href 와 data-nabi-file 둘입니다. target·rel·title·class 는 떨어지고, 주소는 검증을 통과한 것만 다시 조립해 담습니다. javascript: 나 주소가 없는 <a> 는 껍데기가 벗겨져 평문이 됩니다.
• 인라인 마크(mark)라 문장 속, 표 칸, 제목 안 어디에나 놓입니다. 블록이었다면 필터가 문장 밖으로 끌어내 문단에 구멍이 남습니다.
• 업로드가 만든 첨부도 소유자가 하나이므로 같은 마크업입니다 — data-nabi-file="pdf". 값은 소문자 확장자로 다듬고, 낯선 모양이면 빈 문자열이 되지만 첨부라는 사실은 남습니다.
• 클립 표식과 상자 모양은 시트(stylesheet)의 몫이라 저장값에 굳지 않습니다. 이미지 폭·정렬은 인라인 style 로 굳지만, 링크는 시트가 없어도 링크로 읽히기 때문입니다.
• link({ allowLocalUrls: true }) 를 켜면 blob: 과 data:image/… 도 받습니다. 업로드 설정과 짝이어야 합니다 — 한쪽만 켜면 그 주소의 첨부가 다시 열 때 평문이 됩니다.
• 태그와 첨부 표식 이름은 상수로도 나갑니다 — LINK_TAG · LINK_FILE_ATTR.

데모 ​

npm install nabi-note

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

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