접기 ​

설명 ​

details() 은 접기 상자(<details> + <summary>)를 소유(claim)합니다. 편집 중에도 접고 펼칠 수 있고, 그 상태에서 제목과 내용을 모두 고칠 수 있습니다.

• 툴바나 @ 메뉴에서 고르면 펼친 빈 상자가 들어가고 캐럿(caret)이 제목 칸에 섭니다. 태그만 갈아 끼우는 토글로는 요약 칸이 없는 상자가 되어 버리므로 직접 만듭니다.
• 표식(삼각형)을 누르면 접힙니다. 요약의 글자 자리를 누른 것은 캐럿을 놓는 동작입니다 — 제목을 고치려고 누를 때마다 상자가 접히면 글을 쓸 수 없기 때문입니다. 상황 줄(context row)의 접기·펼치기 커맨드가 같은 일을 하므로, 표식을 찾지 못했거나 키보드만 쓰는 경우에도 길이 있습니다.
• 접는 것은 편집입니다. 되돌리기(undo) 지점이 생기고 onChange 가 나갑니다. 상태가 문서에 저장되므로 글쓴이가 접어 둔 대로 읽는 사람이 봅니다.
• 상태는 표준 속성 open 하나입니다 — data-nabi-* 를 새로 만들지 않았습니다. 뜻이 정확히 같은 표준 속성이라 화면·정본(soul)·저장값에서 값이 하나이고, 접기 자체는 nabi.css 없이도 동작합니다. 브라우저가 <details> 를 알기 때문입니다.
• open·open="open"·open="true"·open="false" 가 들어오면 전부 open="" 하나로 다시 조립됩니다. 불리언 속성이라 있으면 펼침입니다.
• 제목에서 누른 Enter 는 내용으로 들어갑니다. 코어의 문단 나누기에 맡기면 요약이 둘로 쪼개집니다. 내용 안의 Enter 는 상자 안에서 줄을 늘리며, 상자를 나가는 길은 화살표입니다.
• 접을 때 캐럿이 내용 안에 있으면 제목으로 옮깁니다. 접힌 내용은 화면에서 사라지므로 그 안에 캐럿을 두면 어디에 쓰고 있는지 알 수 없습니다. 밖에서 캐럿이 닿을 때도 접혀 있으면 제목으로 들어갑니다.
• 속에는 문단만 들어갑니다. 제목·리스트·표를 넣으면 문단으로 내려앉습니다(표 칸과 같은 제약입니다).
• 요약이 없는 남의 <details> 가 들어오면 만들어 줍니다. 등록하지 않으면 껍데기가 벗겨져 <p>제목</p><p>내용</p> 가 됩니다.
• 속성 이름은 DETAILS_OPEN_ATTR 상수로도 나갑니다.

데모 ​

npm install nabi-note

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

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