sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.80

package/dist/components/SDraggableItem/README.md

@@ -12,6 +12,7 @@
 | `supportingText?` | `SDraggableItemSlot` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SDraggableItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
 | `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `depth?` | `number` | `1` | 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부 |
@@ -29,6 +30,42 @@
 |-------|------|-------------|
 | `onDragHandleMouseDown` | `(event: MouseEvent<HTMLDivElement>) => void` | 드래그 핸들 mouse down 이벤트 |
 
+## Types
+
+### SDraggableItemSlot
+
+```ts
+export type SDraggableItemSlot = ReactNode | SDraggableItemRenderProp;
+```
+
+### SDraggableItemSupportingTextPosition
+
+```ts
+export type SDraggableItemSupportingTextPosition = 'right' | 'bottom';
+```
+
+### SDraggableItemSize
+
+```ts
+export type SDraggableItemSize = 'sm' | 'md';
+```
+
+### SDraggableItemRenderProp
+
+```ts
+export type SDraggableItemRenderProp = (state: SDraggableItemRenderState) => ReactNode;
+```
+
+### SDraggableItemRenderState
+
+```ts
+export interface SDraggableItemRenderState {
+  hovered: boolean;
+  dragging: boolean;
+  disabled: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableItem/SDraggableItem.d.ts

@@ -17,6 +17,8 @@ export interface SDraggableItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     supportingTextPosition?: SDraggableItemSupportingTextPosition;
     /** 타이틀 뒤에 표시할 태그/콘텐츠 */
     trailing?: SDraggableItemSlot;
+    /** 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 */
+    depth?: number;
     /** 아이템 왼쪽 accent stripe 표시 여부 */
     accentStripe?: boolean;
     /** 외곽 테두리 사용 여부 */

package/dist/components/SDraggableItem/index.d.ts

@@ -1 +1 @@
-export { SDraggableItem, type SDraggableItemProps, type SDraggableItemRenderProp, type SDraggableItemRenderState, type SDraggableItemSlot, type SDraggableItemSupportingTextPosition, } from './SDraggableItem';
+export { SDraggableItem, type SDraggableItemProps, type SDraggableItemRenderProp, type SDraggableItemRenderState, type SDraggableItemSize, type SDraggableItemSlot, type SDraggableItemSupportingTextPosition, } from './SDraggableItem';

package/dist/components/SDraggableList/README.md

@@ -25,9 +25,13 @@
 | `items` | `T[]` | — | 현재 순서대로 렌더링할 아이템 목록 |
 | `getKey` | `(item: T, index: number) => string` | — | 아이템을 식별할 안정적인 key |
 | `renderItem` | `(item: T, index: number, state: SDraggableListRenderState) => ReactNode` | — | 아이템 렌더링 함수 |
-| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
-| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
+| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key. 이 셋(`selectedKey`·`defaultSelectedKey`·`onSelectedKeyChange`) 중 하나라도 주면 **행 선택이 켜진다** — 행이 `role="button"` 이 되어 클릭·Enter·Space 로 선택된다. 아무것도 주지 않으면 행은 아무 상호작용도 갖지 않는다. |
+| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key. 주면 행 선택이 켜진다 (`selectedKey` 참조) |
 | `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
+| `getDepth?` | `(item: T, index: number) => number` | — | 아이템의 중첩 단계. 기본값은 1 |
+| `setDepth?` | `(item: T, depth: number) => T` | — | depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 |
+| `getCanHaveChildren?` | `(item: T, index: number) => boolean` | — | 하위 depth 를 가질 수 있는 아이템인지 판정 |
+| `maxDepth?` | `number` | `3` | 허용할 최대 depth |
 | `listId?` | `string` | — | Provider 안에서 사용할 리스트 식별자 |
 | `group?` | `string` | — | 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 |
 
@@ -36,7 +40,7 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onChange` | `(items: T[]) => void` | 단독 리스트에서 드래그가 끝난 뒤 변경된 순서 |
-| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출 |
+| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출. 주면 행 선택이 켜진다 (`selectedKey` 참조) |
 
 ### SDraggableProvider
 
@@ -46,6 +50,32 @@
 |------|------|---------|-------------|
 | `children` | `ReactNode` | — |  |
 
+## Types
+
+### SDraggableGroupMoveEvent
+
+```ts
+export interface SDraggableGroupMoveEvent {
+  group: string;
+  itemKey: string;
+  fromListId: string;
+  fromIndex: number;
+  toListId: string;
+  toIndex: number;
+}
+```
+
+### SDraggableListRenderState
+
+```ts
+export interface SDraggableListRenderState {
+  onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+  selected: boolean;
+  disabled: boolean;
+  depth: number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableList/SDraggableList.d.ts

@@ -3,7 +3,10 @@ import { type SListProps } from '../SList';
 export interface SDraggableListRenderState {
     onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     selected: boolean;
+    disabled: boolean;
+    depth: number;
 }
+export type SDraggableListDropIntent = 'before' | 'inside' | 'after';
 export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
     /** 현재 순서대로 렌더링할 아이템 목록 */
     items: T[];
@@ -13,14 +16,26 @@ export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'o
     renderItem: (item: T, index: number, state: SDraggableListRenderState) => ReactNode;
     /** 단독 리스트에서 드래그가 끝난 뒤 변경된 순서 */
     onChange?: (items: T[]) => void;
-    /** 외부에서 제어하는 selected 아이템 key */
+    /**
+     * 외부에서 제어하는 selected 아이템 key.
+     * 이 셋(`selectedKey`·`defaultSelectedKey`·`onSelectedKeyChange`) 중 하나라도 주면 **행 선택이 켜진다** —
+     * 행이 `role="button"` 이 되어 클릭·Enter·Space 로 선택된다. 아무것도 주지 않으면 행은 아무 상호작용도 갖지 않는다.
+     */
     selectedKey?: string;
-    /** 초기 selected 아이템 key */
+    /** 초기 selected 아이템 key. 주면 행 선택이 켜진다 (`selectedKey` 참조) */
     defaultSelectedKey?: string;
-    /** selected 아이템이 변경될 때 호출 */
+    /** selected 아이템이 변경될 때 호출. 주면 행 선택이 켜진다 (`selectedKey` 참조) */
     onSelectedKeyChange?: (key: string) => void;
     /** disabled 아이템은 선택 및 드래그에서 제외 */
     getDisabled?: (item: T, index: number) => boolean;
+    /** 아이템의 중첩 단계. 기본값은 1 */
+    getDepth?: (item: T, index: number) => number;
+    /** depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 */
+    setDepth?: (item: T, depth: number) => T;
+    /** 하위 depth 를 가질 수 있는 아이템인지 판정 */
+    getCanHaveChildren?: (item: T, index: number) => boolean;
+    /** 허용할 최대 depth */
+    maxDepth?: number;
     /** Provider 안에서 사용할 리스트 식별자 */
     listId?: string;
     /** 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 */

package/dist/components/SDraggableList/index.d.ts

@@ -1,2 +1,2 @@
-export { SDraggableList, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
+export { SDraggableList, type SDraggableListDropIntent, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
 export { SDraggableProvider, SDraggableGroup, type SDraggableGroupMoveEvent, type SDraggableGroupProps, type SDraggableProviderProps, } from './SDraggableGroup';

package/dist/components/SDrawer/README.md

@@ -29,6 +29,14 @@
 | `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 | `onWidthChange` | `(width: number) => void` | 너비가 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
+## Types
+
+### SDrawerButton
+
+```ts
+export type SDrawerButton = SFooterButton;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDropdownButton/README.md

@@ -33,6 +33,25 @@
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 | `close` | `() => void` | 드롭다운 닫기 (sdClose) |
 
+## Types
+
+### SDropdownButtonSize
+
+```ts
+export type SDropdownButtonSize = 'xs' | 'sm' | 'md';
+```
+
+### SDropdownButtonItem
+
+```ts
+export interface SDropdownButtonItem {
+  value: string | number;
+  label: string;
+  icon?: SIconName;
+  disabled?: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SEditor/EditorBody.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type SEditorToolbarItem } from './editor.config';
+import type { SEditorHandle } from './SEditor';
+import type { TiptapApi } from './tiptap-api';
+export interface EditorBodyProps {
+    /** 다 불러온 tiptap — 이 컴포넌트는 준비된 뒤에만 마운트된다 */
+    api: TiptapApi;
+    value?: string;
+    defaultValue?: string;
+    /** 지금 화면에 있는 HTML. 껍데기(SEditor)가 규칙 검증·폼 제출에 쓴다 */
+    htmlRef: RefObject<string>;
+    /** 사용자가 고쳐서 값이 바뀌었다 (setHTML·clear 같은 프로그램 조작은 제외) */
+    onInput: (html: string) => void;
+    onFocusChange: (focused: boolean) => void;
+    /** 에디터 인스턴스가 생겼다 — 껍데기가 밀린 focus() 를 흘려보낸다 */
+    onReady: () => void;
+    placeholder: string;
+    editable: boolean;
+    disabled: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    toolbar: SEditorToolbarItem[];
+    /** 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) */
+    bubbleMenu: SEditorToolbarItem[];
+    onImageUpload?: (file: File) => Promise<string>;
+    editorClassName?: string;
+    editorStyle?: CSSProperties;
+}
+/**
+ * SEditor 의 편집 영역 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 실제로 부리는 곳은 여기뿐이고, 그 tiptap 조차 `api` prop 으로 받는다.
+ * 이 파일이 `@tiptap/*` 을 정적으로 import 하면 그 순간 SEditor 를 쓰지 않는 소비 앱까지
+ * tiptap 이 번들에 남는다 (tiptap-api.ts 주석 참고) — 타입만 가져온다.
+ */
+export declare const EditorBody: import("react").ForwardRefExoticComponent<EditorBodyProps & import("react").RefAttributes<SEditorHandle>>;

package/dist/components/SEditor/EditorToolbar.d.ts

@@ -0,0 +1,93 @@
+import type { Editor } from '@tiptap/core';
+import { type SEditorHeadingLevel, type SEditorToolbarItem } from './editor.config';
+import type { TiptapApi } from './tiptap-api';
+/**
+ * 툴바 막대 — 엔진을 불러오는 동안 SEditor 가 같은 높이를 잡아 두는 데도 쓴다.
+ *
+ * **자리를 고정한다.** 긴 글을 쓰는 동안 막대가 화면 밖으로 나가면 서식을 걸 때마다 위로
+ * 되돌아가야 한다. 편집 영역이 자기 안에서 스크롤할 때(`maxHeight`)는 막대가 그 위에 있어
+ * 이미 남아 있고, 상한 없이 자라 페이지가 스크롤할 때는 `sticky` 가 화면 위쪽에 붙여 둔다.
+ *
+ * 글이 막대 아래로 지나가므로 배경을 칠해야 한다 — 필드가 상태(읽기전용·비활성)마다 다른
+ * 색을 쓰므로 값을 다시 적지 않고 `bg-inherit` 로 테두리 박스의 색을 그대로 받는다.
+ */
+export declare const TOOLBAR_BAR_CLASS = "sticky top-0 z-[1] flex flex-wrap items-center gap-[2px] border-b border-solid bg-inherit px-[8px] py-[4px]";
+export declare const TOOLBAR_BAR_STYLE: {
+    borderBottomColor: string;
+};
+/** 버튼의 눌림 표시에 필요한 것만 추린 에디터 상태 */
+declare const readEditorState: (e: Editor) => {
+    heading: SEditorHeadingLevel | 0;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    taskList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    link: boolean;
+    inTable: boolean;
+    canMergeCells: boolean;
+    canSplitCell: boolean;
+    linkHref: string;
+    color: string;
+    fontSize: string;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+/** 에디터가 아직 없을 때의 상태 — 아무것도 켜져 있지 않고 되돌릴 것도 없다 */
+export declare const IDLE_TOOLBAR_STATE: EditorToolbarState;
+export interface EditorToolbarBarProps {
+    /** 눌림 표시 — 에디터가 아직 없으면 `IDLE_TOOLBAR_STATE` */
+    state: EditorToolbarState;
+    /** 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) */
+    editor: Editor | null;
+    items: SEditorToolbarItem[];
+    /** 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 */
+    disabled: boolean;
+    /**
+     * `'bar'` 는 편집 영역 위에 붙는 막대, `'bubble'` 은 선택 영역 위에 뜨는 판이다.
+     * 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다.
+     */
+    variant?: 'bar' | 'bubble';
+}
+interface EditorToolbarProps extends Omit<EditorToolbarBarProps, 'state'> {
+    /** 동적으로 불러온 tiptap (useEditorState) */
+    api: TiptapApi;
+}
+/**
+ * 툴바 막대 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 모른다 — 눌림 상태는 `state` 로 받고 명령은 `editor` 가 있을 때만 나간다.
+ * 그래서 엔진을 불러오는 동안에도 SEditor 가 같은 막대를 그려 자리를 지킬 수 있다.
+ * 버튼 개수·아이콘이 같아야 줄바꿈까지 같아, 엔진이 붙는 순간 화면이 밀리지 않는다.
+ */
+export declare function EditorToolbarBar({ state, editor, items, onImageUpload, disabled, variant, }: EditorToolbarBarProps): import("react").JSX.Element;
+/**
+ * 버블 메뉴 — 글을 선택하면 그 위에 서식 판이 뜬다.
+ *
+ * tiptap Simple Editor 에는 없는 것이다(템플릿은 막대 하나뿐이다). 막대와 같은 버튼을
+ * 같은 코드로 그리고 담는 상자만 바꾼다 — 두 곳의 눌림 표시가 어긋날 일이 없다.
+ *
+ * 판은 `appendTo` 로 소속 모달(없으면 `body`)에 붙인다. 그대로 두면 tiptap 이 편집 영역의
+ * 부모에 붙이는데, 그 부모는 `maxHeight` 를 받으면 스크롤 상자가 되어 판 위쪽이 잘린다.
+ */
+export declare function EditorBubbleMenu({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element | null;
+/**
+ * SEditor 툴바 — 눌림 상태를 tiptap 에서 구독해 막대에 넘긴다.
+ *
+ * `useEditorState` 를 거치는 이유: tiptap v3 는 트랜잭션마다 리렌더하지 않으므로, 이걸
+ * 거치지 않으면 커서를 굵은 글자 위로 옮겨도 B 버튼이 켜지지 않는다.
+ */
+export declare function EditorToolbar({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element;
+export {};

package/dist/components/SEditor/README.md

@@ -0,0 +1,205 @@
+# SEditor
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### EditorBody
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `api` | `TiptapApi` | — | 다 불러온 tiptap — 이 컴포넌트는 준비된 뒤에만 마운트된다 |
+| `value?` | `string` | — |  |
+| `defaultValue?` | `string` | — |  |
+| `htmlRef` | `RefObject<string>` | — | 지금 화면에 있는 HTML. 껍데기(SEditor)가 규칙 검증·폼 제출에 쓴다 |
+| `placeholder` | `string` | — |  |
+| `editable` | `boolean` | — |  |
+| `disabled` | `boolean` | — |  |
+| `minHeight?` | `number \| string` | — |  |
+| `maxHeight?` | `number \| string` | — |  |
+| `toolbar` | `SEditorToolbarItem[]` | — |  |
+| `bubbleMenu` | `SEditorToolbarItem[]` | — | 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) |
+| `editorClassName?` | `string` | — |  |
+| `editorStyle?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onInput` | `(html: string) => void` | 사용자가 고쳐서 값이 바뀌었다 (setHTML·clear 같은 프로그램 조작은 제외) |
+| `onFocusChange` | `(focused: boolean) => void` |  |
+| `onReady` | `() => void` | 에디터 인스턴스가 생겼다 — 껍데기가 밀린 focus() 를 흘려보낸다 |
+| `onImageUpload` | `(file: File) => Promise<string>` |  |
+
+### EditorToolbarBar
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `state` | `EditorToolbarState` | — | 눌림 표시 — 에디터가 아직 없으면 `IDLE_TOOLBAR_STATE` |
+| `editor` | `Editor \| null` | — | 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) |
+| `items` | `SEditorToolbarItem[]` | — |  |
+| `disabled` | `boolean` | — | 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 |
+| `variant?` | `'bar' \| 'bubble'` | `'bar'` | `'bar'` 는 편집 영역 위에 붙는 막대, `'bubble'` 은 선택 영역 위에 뜨는 판이다. 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onImageUpload` | `(file: File) => Promise<string>` | 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 |
+
+### SEditor
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string` | — | 값 (제어) — HTML 문자열 |
+| `defaultValue?` | `string` | — | 초기값 (비제어) — HTML 문자열 |
+| `placeholder?` | `string` | `'내용을 입력해 주세요.'` | 빈 문서에 보일 안내 문구 |
+| `minHeight?` | `number \| string` | `200` | 편집 영역 최소 높이 (숫자=px) |
+| `maxHeight?` | `number \| string` | — | 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 |
+| `simple?` | `boolean` | `false` | **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다. 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다). 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다. |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `name?` | `string` | — | 폼 전송용 name |
+| `editorClassName?` | `string` | — | 편집 영역 className |
+| `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
+| `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
+| `addonLabel?` | `string` | — | 우측 어드온 레이블 |
+| `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `SFieldWidth` | `'100%'` | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 본문 길이에 상한이 없으므로 기본은 `"100%"`(행 전체)다. |
+| `disabled?` | `boolean` | `false` |  |
+| `readOnly?` | `boolean` | `false` |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(html: string) => void` | 값 변경 (sdUpdate) — 빈 문서면 빈 문자열을 준다 |
+| `onImageUpload` | `(file: File) => Promise<string>` | 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.** 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다). |
+| `onFocus` | `() => void` | 포커스 진입 |
+| `onBlur` | `() => void` | 포커스 이탈 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 편집 영역에 포커스 |
+| `blur` | `() => void` | 포커스 해제 |
+| `getHTML` | `() => string` | 현재 내용을 HTML 로 반환 (빈 문서면 빈 문자열) |
+| `getText` | `() => string` | 현재 내용을 서식 없는 텍스트로 반환 |
+| `setHTML` | `(html: string) => void` | 내용을 HTML 로 교체 (onValueChange 를 발생시키지 않는다) |
+| `clear` | `() => void` | 내용을 비운다 |
+| `editor` | `Editor \| null` | tiptap 에디터 인스턴스 — 확장 명령이 필요할 때만 쓴다 |
+
+## Types
+
+### TiptapApi
+
+```ts
+/** 동적으로 불러온 tiptap — 이 객체를 거치지 않고는 에디터 코드가 tiptap 을 만지지 않는다. */
+export interface TiptapApi {
+  useEditor: TiptapReact['useEditor'];
+  useEditorState: TiptapReact['useEditorState'];
+  EditorContent: TiptapReact['EditorContent'];
+  /** 선택 영역 위에 뜨는 판 — 자리는 floating-ui 가 잡는다 */
+  BubbleMenu: TiptapMenus['BubbleMenu'];
+  /** tiptap 확장 구성 — 아래 createExtensions 주석 참고 */
+  createExtensions: (options: SEditorExtensionOptions) => AnyExtension[];
+}
+```
+
+### SEditorToolbarItem
+
+```ts
+export type SEditorToolbarItem = SEditorToolbarAction | '|';
+```
+
+### EditorToolbarState
+
+```ts
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+```
+
+### SEditorExtensionOptions
+
+```ts
+export interface SEditorExtensionOptions {
+  /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
+  getPlaceholder: () => string;
+}
+```
+
+### SEditorToolbarAction
+
+```ts
+export type SEditorToolbarAction = (typeof SEDITOR_TOOLBAR_ITEMS)[number];
+```
+
+### SEDITOR_TOOLBAR_ITEMS
+
+```ts
+/** 툴바에 놓을 수 있는 항목. `'|'` 는 구분선이다. */
+export const SEDITOR_TOOLBAR_ITEMS = [
+  'heading',
+  'fontSize',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'code',
+  'color',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'bulletList',
+  'orderedList',
+  'taskList',
+  'list',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  'link',
+  'image',
+  'table',
+  'undo',
+  'redo',
+] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SField](../SField)
+- [SIcon](../SIcon)
+- [SInput](../SInput)
+
+### Graph
+
+```mermaid
+graph TD;
+  SEditor --> SButton
+  SEditor --> SField
+  SEditor --> SIcon
+  SEditor --> SInput
+  style SEditor fill:#f9f,stroke:#333,stroke-width:4px
+```