표 ​

설명 ​

table() 은 table > tbody > tr > td|th 구조를 소유(claim)합니다.

• 버튼을 누르면 토글이 아니라 크기 격자(최대 8×8)가 뜹니다. 고른 크기로 제목 행이 있는 표를 캐럿(caret) 자리에 넣고 캐럿을 첫 칸으로 옮깁니다.
• 캐럿이 표 안에 있을 때만 상황 줄(context row)에 커맨드가 뜹니다. 행 위·아래 추가, 행 삭제, 열 왼쪽·오른쪽 추가, 열 삭제, 이 행을 제목으로, 이 열을 제목으로, 표 삭제 — 그리고 칸 병합·병합 취소입니다.
• 제목 행·열은 캐럿이 든 줄에 걸립니다(첫 행·첫 열 고정이 아닙니다). 칸을 골라 두었다면 그 사각형이 덮는 줄 전부가 대상이고, 다시 누르면 되돌아옵니다.
• 칸을 누른 채 다른 칸으로 끌면 직사각형으로 칸이 골라지고 배경이 물듭니다. 상황 줄의 칸 병합이 그 직사각형을 한 칸으로 합칩니다 — 내용은 줄바꿈으로 이어지고 빈 칸은 건너뜁니다. 병합된 칸에 캐럿을 두면 병합 취소가 떠서 빈 칸들로 되돌립니다. ㄱ자(직사각형이 아닌) 선택에서는 병합이 뜨지 않습니다.
• 키보드로도 칸을 고를 수 있습니다 — 엑셀과 같은 규칙입니다. Shift+방향키 는 사각형을 넓히고, Ctrl(맥은 Cmd)+방향키 는 표 끝으로 건너뛰며 고른 것을 걷고, Ctrl+Shift+방향키 는 표 끝까지 넓힙니다. 맥에서 Ctrl+방향키 는 운영체제가 가져가므로 Cmd 도 같은 것으로 받습니다. 이 키들은 표 칸 안에서만 걸리므로 본문에서는 평소대로 동작합니다.
• Tab 은 다음 칸, Shift+Tab 은 이전 칸으로 갑니다. 표 끝에서 누른 Tab 은 잡지 않습니다. 화살표는 격자를 기준으로 움직입니다. 화면 좌표를 따라가면 칸 폭이 다를 때 다른 열로 미끄러지기 때문입니다.
• 칸의 colspan 과 rowspan 은 살아남습니다 — 병합은 뜻이 정확히 같은 표준 속성으로 저장됩니다. 그 밖의 속성(border·width·class)은 전부 떨어집니다. 표 중첩은 지원하지 않습니다. 격자가 성하지 않은 표(칸 수가 어긋난 행, 격자를 넘는 span)는 빈 칸으로 채우고 span 을 조여 빈틈없는 격자로 되살리며, thead 와 tfoot 는 첫 tbody 로 모입니다.
• 제목 행과 제목 열은 그 줄의 칸을 th 로 바꾼 것입니다. thead 를 따로 두지 않습니다.
• 테두리·칸 여백·제목 배경은 저장값에 굳지 않습니다. 전부 시트(stylesheet)의 몫이라 호스트가 nabi.css 를 싣거나 자기 표 CSS 를 주어야 선이 보이는데, 선이 없어도 표는 표입니다.
• 표 자체는 물건 블록(object block)이지만 칸 안은 글입니다. 밖에서 캐럿이 닿으면 통째로 고르지 않고 그 줄의 첫 칸으로 들어갑니다 — 위에서 내려오면 첫 행, 아래에서 올라오면 마지막 행입니다(둘 다 왼쪽 끝). 칸 안에서는 툴바에 마크(mark)만 남습니다.
• 칸 안에 놓인 물건 블록(이미지·구분선·코드)은 필터(filter)가 표 밖으로 끌어냅니다.

표 정렬 — 보는 쪽에서 도는 기능 ​

상황 줄의 정렬 켜기/끄기는 표에 data-nabi-sortable 표식 하나를 답니다. 저장값에 남는 것은 그 표식뿐입니다 — 편집기에는 오른쪽 위 배지로 켜져 있다는 것만 보이고, 진짜 정렬 버튼은 보는 쪽에서 붙습니다: 미리보기, 그리고 nabiViewer 를 붙인 호스트 페이지입니다.

• 제목 행(첫 행)의 칸마다 버튼이 붙고 세 상태를 돕니다 — 원본(회색) → 내림차순(▼) → 오름차순(▲) → 다시 원본. 다른 열을 누르면 그 열이 내림차순으로 시작하고 이전 열은 원본으로 돌아갑니다.
• 숫자만 든 열은 숫자로 정렬됩니다 — 9 가 10 보다 앞에 옵니다. 쉼표(세 자리 묶음)와 소수점, 음수를 알아봅니다. 단위가 섞이면(1,234원) 글자 열입니다. 판정은 칸 쌍마다가 아니라 열 전체로 한 번 합니다. 쌍마다 재면 10·9·사과 가 섞인 열에서 순서가 한 바퀴 돌아 버립니다.
• 빈 칸은 방향과 무관하게 항상 아래로 갑니다. 값이 같은 행의 상대 순서는 흔들리지 않습니다(안정 정렬).
• 정렬 상태는 문서가 아니라 보는 쪽의 순간 상태입니다 — 새로 고치면 원본 순서로 돌아오고, getHtml() 에는 버튼도 순서 변화도 없습니다.
• 정렬과 칸 병합은 한 표에 같이 있을 수 없습니다. 병합하는 즉시 표식이 떨어지고, 병합이 든 HTML 이 들어오면 필터가 표식을 걷어내며, 그래도 남은 경우(직접 쓴 HTML) 보는 쪽이 버튼을 만들지 않습니다.
• 표식 이름은 SORTABLE_ATTR 상수로도 나갑니다.

데모 ​

npm install nabi-note

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

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