@iyulab/editor-components 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.6.4] - 2026-10-06
+
+### Documentation
+
+- **Keyboard exit** (WCAG 2.1.2) is now stated and tested: in `u-text-editor` Tab moves on to the next control; in `u-code-editor` Tab indents and **`Ctrl+M`** (macOS: `Ctrl+Shift+M`) switches Tab to moving the focus — the method a screen hosting a code editor should tell its users. README accessibility table and the skill references (`code-editor.md` · `text-editor.md`).
+
+## [0.6.3] - 2026-10-06
+
+### Documentation
+
+- README **Quick Start** — a first page with `u-text-editor` (its module only, so Monaco stays out of the bundle) that
+  reads the typed `change` detail. Checked against the published package in a clean Vite consumer: build, strict `tsc`
+  and a headless render.
+
 ## [0.6.2] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -21,6 +21,33 @@ React 래퍼는 `/react` 서브패스로 제공됩니다:
 import { UCodeEditor, UTextEditor } from '@iyulab/editor-components/react';
 ```
 
+## Quick Start
+
+첫 페이지 — 리치 텍스트 에디터 하나와 그 내용 읽기(Vite 기준, `index.html` 이 `src/main.ts` 를 모듈로 싣는다).
+`u-text-editor` 만 쓰면 그 모듈만 불러 Monaco 를 번들에 넣지 않는다.
+
+```bash
+npm install @iyulab/editor-components @iyulab/components
+```
+
+```ts
+// src/main.ts
+import '@iyulab/components/styles/tokens.css';
+import '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
+
+const editor = document.createElement('u-text-editor');
+editor.label = 'Note';
+editor.value = '<p>Hello <strong>editor</strong>.</p>';
+editor.style.height = '320px'; // 호스트 상자가 높이를 정한다 — 아래 「크기」
+
+const preview = document.createElement('pre');
+editor.addEventListener('change', (e) => {
+  preview.textContent = e.detail.text; // e.detail: { html, text, delta } — 타입이 붙는다
+});
+
+document.body.append(editor, preview);
+```
+
 ## 포함된 컴포넌트
 
 ### `u-code-editor` (UCodeEditor)
@@ -104,6 +131,7 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 | 성공 기준 | 보장 | 어디서 재는가 |
 |---|---|---|
 | SC 2.5.8 타깃 크기(최소) | `u-text-editor` 의 포인터 타깃이 24×24 CSS px 이상이거나 간격 예외(중심 간 24px)를 충족하고, 그 좌표에서 실제로 눌린다 — Quill 이 그리는 툴바(선택기가 열린 상태·색 견본·링크 툴팁 포함)도 잰다 | `tests/browser/target-size.browser.test.ts`(실제 크로미움) |
+| SC 2.1.2 키보드 함정 없음 | `u-text-editor` 안의 `Tab` 은 다음 컨트롤로 나간다(탭 문자를 넣지 않는다). `u-code-editor` 안의 `Tab` 은 들여쓰기이고, **`Ctrl+M`(macOS: `Ctrl+Shift+M`)** 이 Monaco 의 «Tab 으로 포커스 이동» 을 켜고 끈다 — 그 뒤의 `Tab` 은 편집기를 떠난다. 코드 편집기를 쓰는 화면은 이 방법을 사용자에게 알릴 것(SC 2.1.2 의 조건) | `tests/browser/keyboard-exit.browser.test.ts` |
 | SC 2.1.1 키보드(포인터 커서 검사) | 포인터 커서를 보이면서 상호작용 요소가 아닌 것이 없다 — Quill 이 `href` 없는 앵커로 그리는 링크 툴팁의 편집·제거도 버튼 역할로 포커스를 받고 Enter/Space 로 눌린다 | `tests/browser/target-size.browser.test.ts` · `tests/browser/text-editor-link-tooltip-keyboard.browser.test.ts` |
 
 `u-code-editor` 는 스스로 렌더하는 조작부가 없어(액션은 소비자가 `header-actions` 슬롯으로 넣는다) 이 게이트의 대상이 아닙니다 — 슬롯에 넣는 버튼의 크기는 넣는 쪽이 정합니다.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "keywords": [
     "iyulab",
     "web-components",

package/skills/iyulab-editor-components/references/components/code-editor.md

@@ -64,6 +64,14 @@ other unchanged.
 |-------|--------|--------------|
 | `change` | none (plain `Event`) | Fired on user edits (`Monaco.onDidChangeModelContent`). Not fired for programmatic `value` assignment while Monaco already holds that value. Read the new content from `value` |
 
+## Keyboard
+
+`Tab` inside the editor indents — a code editor needs it — so `Tab` does not move the focus on its own.
+**`Ctrl+M`** (macOS: `Ctrl+Shift+M`) toggles Monaco's "Tab moves focus" mode; after it, `Tab` / `Shift+Tab`
+leave the editor. That is the keyboard way out (WCAG 2.1.2 allows a non-standard exit when the user is told
+the method), so a screen that hosts a code editor should say it near the editor — for example in its help text.
+`Tab` from the control before the editor enters it.
+
 ## CSS Custom Properties
 
 None. Layout is plain flexbox — the header keeps its own height and the editing area takes the rest — so there is no layout variable to override (see [Sizing](#sizing) for how the element is sized), and colours come from Monaco's own theme (`vs-light`/`vs-dark`) rather than this library's `--u-*` design tokens.

package/skills/iyulab-editor-components/references/components/text-editor.md

@@ -78,6 +78,11 @@ with 0.5.0 — see the CHANGELOG.
 |-------|--------|--------------|
 | `change` | `{ html: string, text: string, delta: QuillDelta }` | Fired only for user edits (Quill `source === 'user'`) — composed so it crosses the shadow boundary |
 
+## Keyboard
+
+`Tab` inside the editor moves on to the next control — it does not insert a tab character, so the
+keyboard is never trapped in the editor (WCAG 2.1.2).
+
 ## CSS Custom Properties
 
 `UTextEditor` doesn't declare any custom properties of its own — its styles read the shared