@x-plat/design-system 0.11.0 → 0.12.0

package/guidelines/components/editor.md

@@ -28,10 +28,20 @@ const [html, setHtml] = useState("");
 
 ## 툴바
 
-기본은 13종 전부다. `toolbar` 로 골라서 줄일 수 있다.
+기본은 전부 켜져 있다. `toolbar` 로 골라서 줄일 수 있다.
 
-`bold` `italic` `underline` `strikethrough` `code` `heading` `list` `ordered-list`
-`blockquote` `code-block` `link` `image` `divider`
+| 갈래 | 항목 |
+|---|---|
+| 인라인 | `bold` `italic` `underline` `strikethrough` `code` `highlight` `superscript` `subscript` |
+| 블록 | `heading-1` `heading-2` `heading-3` `list` `ordered-list` `checklist` `blockquote` `code-block` |
+| 삽입 | `link` `image` `table` `divider` |
+| 정렬 | `align-left` `align-center` `align-right` |
+| 기타 | `clear-format` `undo` `redo` |
+
+- **제목은 세 단계가 따로다.** 같은 레벨을 다시 누르면 단락으로 돌아간다.
+- **정렬은 `style` 이 아니라 클래스**(`align-center` 등)로 들어간다. `style` 속성을
+  허용하면 붙여넣기로 아무 CSS 나 들어올 수 있다.
+- `highlight` 는 `<mark>` 로 감싼다.
 
 ## 마크다운 단축키
 
@@ -54,12 +64,38 @@ const [html, setHtml] = useState("");
 여러 줄을 선택하고 코드 블록을 누르면 **하나의** `<pre><code>` 가 된다.
 블록마다 따로 만들어지지 않는다.
 
+### 문법 강조
+
+캐럿이 코드 블록 안에 있으면 툴바 오른쪽에 **언어 선택**이 나타난다.
+`plain` `javascript` `typescript` `json` `html` `css` `python` `sql` `bash` 9종.
+
+외부 라이브러리를 쓰지 않는 **자체 토크나이저**다. 문자열·주석·숫자·키워드를
+구분하는 수준이고, 중첩 템플릿 리터럴이나 정규식 리터럴 같은 까다로운 것은
+일부러 다루지 않는다 — 틀리게 칠하느니 안 칠하는 쪽이 낫다.
+
+언어는 `<pre class="lang-javascript">` 로 저장되어 `value` 에 함께 나간다.
+
 ```
 Enter   코드 블록 안에서 줄바꿈 (블록이 쪼개지지 않는다)
 Tab     공백 2칸 들여쓰기 (포커스가 밖으로 나가지 않는다)
 Enter × 빈 줄 둘이 이어지면 코드 블록을 빠져나온다
 ```
 
+## 표 · 목록 · 체크리스트
+
+```
+목록에서   Tab / Shift+Tab   들여쓰기 / 내어쓰기
+표 안에서  Tab / Shift+Tab   다음 칸 / 이전 칸
+표 마지막 칸에서 Tab          행 추가
+```
+
+체크리스트는 항목 **왼쪽 체크박스 영역**을 눌러 토글한다. 실제 `<input>` 이 아니라
+가상 요소로 그린다 — contentEditable 안에 input 을 넣으면 캐럿이 그 안으로 들어간다.
+
+## 평문으로 붙여넣기
+
+`⌘⇧V` (`⌃⇧V`) 는 서식 없이 글자만 넣는다. 코드 블록 안에서는 항상 평문이다.
+
 코드 블록 안에서 다시 코드 블록을 누르면 **해제**되어 일반 단락으로 돌아간다.
 
 ## 코드 블록 안에서는
@@ -69,6 +105,25 @@ Enter × 빈 줄 둘이 이어지면 코드 블록을 빠져나온다
 - **마크다운 단축키와 슬래시 메뉴가 뜨지 않는다.** 코드에 `# ` 이나 `/` 는 흔하다.
 - **붙여넣기는 순수 텍스트로만** 들어간다.
 
+## 되돌리기 / 다시하기
+
+```
+⌘Z   ⌃Z          되돌리기
+⌘⇧Z  ⌃⇧Z  ⌃Y     다시하기
+```
+
+툴바에도 `undo` / `redo` 버튼이 있다. 기본 툴바에 포함되어 있고, `toolbar` 를
+직접 지정할 때는 넣어야 나온다.
+
+- **브라우저 기본 undo 를 쓰지 않는다.** 이 에디터는 코드블럭·인라인코드·마크다운
+  단축키·슬래시 명령을 DOM 직접 조작으로 처리하는데, 그런 작업은 브라우저 undo
+  스택에 올라가지 않는다. 그대로 두면 ⌘Z 가 그 작업을 건너뛰고 엉뚱한 지점으로 간다.
+- **연속 입력은 한 덩어리**로 묶인다(500ms). 한 글자씩 되돌아가지 않는다.
+- **블록을 만드는 작업**(코드블럭·구분선)은 따로 경계를 만든다. 코드블럭을 넣은 뒤
+  ⌘Z 한 번이면 정확히 그것만 취소된다.
+- 되돌린 뒤 새로 입력하면 앞쪽(redo) 기록은 버려진다.
+- `value` 가 **밖에서** 바뀌면(폼 리셋 등) 그 지점이 새 기준이 되어 이전 기록은 사라진다.
+
 ## 붙여넣기
 
 붙여넣는 HTML 은 항상 정화된다. 허용 태그 밖은 자식을 살려 벗겨내고,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",