이미지 ​

설명 ​

image() 은 <img> 블록(block)을 소유(claim)합니다. 붙여넣기든 업로드든 주소 입력이든, 문서에 남는 이미지 모양은 하나뿐입니다.

• 툴바나 @ 메뉴에서 고르면 주소 상자가 뜨고, 검증을 통과한 주소만 기본 모양(50% · 가운데)으로 캐럿(caret) 자리에 들어갑니다. 이미지 확장자로 끝나는 평문(plain text) 주소를 붙여넣어도 이미지가 됩니다.
• 편집 중에 이미지를 클릭하면 상자가 뜹니다. 폭 6단계(50·60·70·80·90·100)와 정렬 세 가지, 크게 보기가 있습니다. 상자를 열어 둔 채 눌러 가며 맞출 수 있고, 값이 바뀔 때마다 문서에 반영됩니다.
• 넣은 뒤에는 주소를 고칠 수 없습니다. 바꾸려면 지우고 다시 넣어야 합니다.
• 살아남는 속성은 src·alt·data-nabi-width·data-nabi-align 넷이고 전부 다시 조립됩니다(width·height·srcset·loading·class 는 떨어집니다). 폭은 가장 가까운 허용 단계로, 정렬은 목록에 없는 값이면 가운데로 조입니다.
• 나갈 때 폭은 인라인 style 로 굳습니다. max-width:70% 이므로 원본이 그보다 작으면 원본 크기 그대로 보입니다. 폭과 정렬이 풀리면 다른 문서가 되기 때문에 시트 없이도 서게 굳히는 자리입니다. 정렬 마진은 align wing 이 이어 붙입니다.
• 모서리 둥글기는 시트(stylesheet)의 몫이라 저장값에 굳지 않습니다.
• 속이 없는 물건 블록(object block)이라 캐럿이 안으로 들어가지 않습니다. 틈(gap)에 닿으면 통째로 선택(whole selection)되고, 화살표로 이웃 줄로 빠져나가며, 이웃이 없으면 빈 문단이 생깁니다.
• 저장된 HTML 쪽에서도 같은 라이트박스를 열려면 호스트가 nabiViewer에 image() 를 등록합니다. 등록한 날개(wing)만 도는 것이 규칙이라, image() 를 빼면 확대도 없습니다.
• image({ allowLocalUrls: true }) 는 blob: 과 data: 주소를 값에 남기는 옵션입니다. 그 페이지를 벗어나면 죽는 주소이므로 데모 구성에서만 켭니다.
• 속성 이름과 허용 단계는 상수로도 나갑니다 — IMAGE_WIDTH_ATTR · IMAGE_WIDTHS · IMAGE_ALIGN_ATTR · IMAGE_ALIGNS(기본값은 IMAGE_DEFAULT_WIDTH · IMAGE_DEFAULT_ALIGN).

데모 ​

npm install nabi-note

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

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