용어
이 사이트와 저장소가 쓰는 말입니다. 다른 에디터와 이름이 겹치는 말도 뜻이 다를 수 있어 여기 적힌 뜻으로만 씁니다.
날개(wing)
다른 에디터에서 "플러그인" 이라고 부르는 단위입니다. 코어는 몸통이고 굵게·제목·표·업로드 같은 모든 서식과 기능은 날개입니다.
코어가 직접 아는 마크업은 문단(p)과 줄바꿈(br), 그리고 평문(plain text)뿐입니다. 등록하지 않은 마크업은 껍데기가 벗겨져 평문으로 떨어집니다. 그래서 "이 에디터로 무엇을 쓸 수 있는가" 의 답은 곧 등록한 날개 목록입니다.
코드에서도 같은 이름을 씁니다 — 타입은 NabiWing, 옵션은 wings: 입니다.
HTML 은 있는 자리마다 이름이 다릅니다
같은 문서라도 어디에 있느냐에 따라 부르는 이름과 담기는 어휘가 다릅니다. 이 넷 말고 다른 말로는 부르지 않습니다.
| 이름 | 무엇입니까 | 담기는 어휘 | 누가 봅니까 |
|---|---|---|---|
| sourceHtml | 밖에서 들어오는 HTML 문자열 | 무엇이든 | 호스트가 줍니다 |
| soul | 필터를 통과한 정규 HTML. 문서의 실체입니다 | data-nabi-* 만. style 없음 | 에디터 자신 |
| flutter | 편집 영역 안에서 살아 있는 DOM | soul + 화면 전용 표식 | 사용자 |
| outputHtml | 밖으로 나가는 HTML 문자열 | 뜻이 걸린 모양은 style 로 | 호스트·DB·클립보드 |
sourceHtml ─(필터)─▶ soul ─▶ flutter
flutter ─(필터)─▶ soul ─▶ outputHtmlsourceHtml
밖에서 들어오는 HTML 입니다. html 옵션, setHtml(), 붙여넣기가 그 문입니다. 우리가 내보낸 값일 수도, 남의 마크업일 수도, 공격일 수도 있어 하나로 믿지 않습니다.
soul
필터를 지나 정규화된 HTML 문자열이고 문서의 실체(정본) 입니다. data-nabi-* 속성만 남고 style 은 없습니다. 어디에도 저장해 두지 않고 필요할 때마다 flutter 에서 다시 뽑습니다 — 브라우저나 호스트가 DOM 을 언제든 직접 더럽힐 수 있기 때문입니다.
flutter
contenteditable 안에서 실제로 고쳐지는 살아 있는 DOM 입니다. soul 위에 화면 전용 표식이 얹혀 있습니다 — 물건 선택 표시, 업로드 자리표시자, 코드 색칠 span, 빈 블록의 캐럿 자리용 <br>. 이것들은 저장값에 나가지 않습니다.
outputHtml
onChange 와 getHtml(), 클립보드로 나가는 HTML 입니다. nabi.css 없이 혼자 서도록 뜻이 걸린 모양만 인라인 style 로 굳습니다.
기준은 "그것이 없으면 뜻이 바뀌는가" 입니다. 가운데 정렬이 풀리면 다른 문서지만, 표 테두리가 없어도 표는 표입니다. 그래서 정렬·이미지 폭·체크 상태는 굳고, 제목 크기·표 테두리·구분선 모양은 굳지 않습니다.
저장한 HTML 을 다시 그릴 때
getHtml() 이 돌려준 값이 안전하다는 것은 방금 만든 그 문자열 이야기입니다. 저장했다 꺼낸 HTML 을 화면에 그릴 때는 호스트 쪽 sanitize 가 여전히 필요합니다.
문서를 이루는 것
| 말 | 뜻 |
|---|---|
| 마크(mark) | 글자에 씌우는 서식입니다 — <b> · <i> · <a>. 문장 속·표 칸·제목 안 어디에나 삽니다 |
| 블록(block) | 문단 자리를 차지하는 덩어리입니다 — 문단·제목·리스트·표·이미지 |
| 블록 속성(block attribute) | 태그는 그대로 두고 블록의 성질만 바꾸는 표시입니다 — 정렬·드롭 캡 |
| 글 블록(text block) | 속이 인라인 내용이라 캐럿이 글자 사이에 사는 블록입니다 — 문단·제목·리스트 항목 |
| 물건 블록(object block) | 블록 하나가 통째로 물건인 것입니다 — 이미지·구분선·표·코드·접기 상자 |
| 정규 태그(canonical tag) | 입력이 <strong> 이든 <b> 든 필터를 지나면 모이는 하나의 태그입니다. 뜻이 같으면 짧은 쪽을 씁니다 |
| 소유(claim) | 어떤 마크업이 어느 날개의 것인지 가리는 판정입니다. 아무도 가져가지 않으면 껍데기가 벗겨집니다 |
물건 블록이라고 해서 속을 못 고치는 것은 아닙니다. 표와 코드는 안에서는 글처럼 쓰고 경계에서만 물건으로 다뤄집니다.
편집 화면에만 있는 말
| 말 | 뜻 |
|---|---|
| 캐럿(caret) | 글자가 들어갈 자리를 가리키는 깜빡이는 막대입니다 |
| 틈(gap) | 블록과 블록 사이의 자리입니다. 글자 자리가 아니라 루트 층의 사이라, 물건 블록 옆에서 생깁니다 |
| 통째 선택(whole selection) | 물건을 글자 범위가 아니라 덩어리 하나로 고른 상태입니다. 캐럿은 숨고 테두리가 붙습니다 |
| 상황 줄(context row) | 지금 캐럿이 놓인 자리에서만 할 수 있는 일이 뜨는 줄입니다 — 표의 행·열 커맨드, 코드의 언어 입력창, 링크 해제 |
| 예약 마크(pending mark) | 선택 없이 버튼을 눌러 다음에 입력할 글자부터 걸리도록 예약해 둔 마크입니다 |
| 자리표시자(placeholder) | 업로드가 도는 동안만 서 있는 임시 자리입니다. 값에는 절대 스미지 않습니다 |
만드는 쪽에서 쓰는 말
| 말 | 뜻 |
|---|---|
| 꽃(flower) | 날개가 코어 기능을 얻는 유일한 문입니다. 몸통이 날개를 위해 피워 둔 자리라 이 이름입니다 |
| 자동 변환(input rule) | 글자를 치는 것만으로 일어나는 변환입니다 — 하이픈과 공백은 목록으로, # 과 공백은 제목으로 |
| 필터(filter) | 드나드는 모든 값이 지나는 허용 목록(allow-list)입니다. 목록에 없는 것은 살아남지 못합니다 |
| 멱등(idempotent) | 두 번 지나도 결과가 같다는 뜻입니다. onChange 로 받은 값을 그대로 setHtml() 에 되돌려도 아무 일도 일어나지 않습니다 |
다음 문서
- 동작 원리 — 값이 드나드는 길
- 커스텀 날개 만들기 — 없는 서식을 직접 만들기