sellmate-design-system-react 9.0.0-beta.22 → 9.0.0-beta.24

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

@@ -6,7 +6,6 @@ import { type Rule } from '../../lib/form';
 import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
-import { type SEditorColorOption, type SEditorToolbarItem } from './editor.config';
 /** ref 로 노출되는 조작 메서드 */
 export interface SEditorHandle {
     /** 편집 영역에 포커스 */
@@ -37,33 +36,20 @@ export interface SEditorProps {
     minHeight?: number | string;
     /** 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 */
     maxHeight?: number | string;
-    /** 툴바 구성. `false` 면 툴바 없이 본문만 (읽기 화면·간단 메모용) */
-    toolbar?: SEditorToolbarItem[] | false;
     /**
-     * 글을 선택했을 때 그 위에 뜨는 서식 판의 구성. `false` 면 뜨지 않는다.
+     * **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다.
+     * 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다).
      *
-     * 읽기 전용·비활성일 때는 어차피 뜨지 않는다. 좁은 칸에 놓인 에디터라면 판이 필드 밖으로
-     * 넘칠 수 있으니 항목을 줄이거나 `false` 로 끈다.
+     * 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은
+     * 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다.
      */
-    bubbleMenu?: SEditorToolbarItem[] | false;
-    /** 글자 크기 드롭다운 선택지 (px) */
-    fontSizes?: number[];
-    /** 글자색 팔레트 */
-    colors?: SEditorColorOption[];
-    /** 형광펜(배경색) 팔레트 */
-    highlights?: SEditorColorOption[];
+    simple?: boolean;
     /**
      * 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.**
      * 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서
      * 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다).
      */
     onImageUpload?: (file: File) => Promise<string>;
-    /**
-     * 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`).
-     * 상품 코드·규격 문자열이 입력한 그대로 남아야 하는 화면이 많아 기본은 끔이다.
-     * **마운트 시점에만 반영된다** — 값이 바뀌어도 이미 만들어진 에디터에는 적용되지 않는다.
-     */
-    typography?: boolean;
     /** 유효성 규칙 — blur 시 자동 검증 */
     rules?: Rule[];
     /** 필드 상태 ('default' | 'pass' | 'error') */
@@ -116,6 +102,10 @@ export interface SEditorProps {
  * 테두리 박스·라벨·에러 표시는 `SField`(multiline) 가 소유하고, 이 컴포넌트는 그 안에
  * 툴바와 편집 영역만 세로로 쌓는다.
  *
+ * 글을 선택했을 때 그 위에 뜨는 서식 판(버블 메뉴)은 **끄고 켜는 것이 아니다** — 편집할 수
+ * 있으면 언제나 뜬다. 툴바까지 커서를 옮기지 않고 바로 서식을 거는 길이라 화면마다 있고
+ * 없고가 달라지면 그 자체가 학습 비용이 된다. 구성은 `simple` 이 툴바와 함께 정한다.
+ *
  * tiptap 은 **마운트한 뒤에 불러온다** — 정적으로 묶으면 SEditor 를 한 번도 쓰지 않는 소비
  * 앱까지 tiptap·prosemirror 를 번들에 지고 간다 (`tiptap-api.ts` 주석 참고). 불러오는 동안은
  * 같은 크기의 빈 편집 영역이 자리를 지키므로 화면이 튀지 않고, 그 사이 `ref` 의 메서드는

package/dist/components/SEditor/editor-icons.d.ts

@@ -11,7 +11,8 @@ import type { SVGProps } from 'react';
  * 24×24 격자에 획 굵기 2 의 면(fill) 도형이고 색은 전부 `currentColor` 를 따른다 — 버튼이
  * 토큰으로 정한 색이 그대로 내려온다. 새 아이콘을 더할 때도 이 격자·굵기를 지킨다.
  *
- * 템플릿에 없어 직접 그린 것은 `IconTextColor`·`IconHorizontalRule` 둘뿐이다 (아래 주석 참고).
+ * 템플릿에 없어 직접 그린 것은 `IconTextColor`·`IconHorizontalRule`·`IconTable` 뿐이다
+ * (각 주석 참고).
  */
 export type SEditorIconProps = {
     size?: number | string;
@@ -28,10 +29,6 @@ export declare const IconStrike: (p: SEditorIconProps) => import("react").JSX.El
 export declare const IconCode: (p: SEditorIconProps) => import("react").JSX.Element;
 export declare const IconCodeBlock: (p: SEditorIconProps) => import("react").JSX.Element;
 export declare const IconBlockquote: (p: SEditorIconProps) => import("react").JSX.Element;
-/** 형광펜 — 지금 고른 색은 툴바 버튼이 아이콘 아래 막대로 따로 보여 준다 */
-export declare const IconHighlight: (p: SEditorIconProps) => import("react").JSX.Element;
-export declare const IconSuperscript: (p: SEditorIconProps) => import("react").JSX.Element;
-export declare const IconSubscript: (p: SEditorIconProps) => import("react").JSX.Element;
 export declare const IconAlignLeft: (p: SEditorIconProps) => import("react").JSX.Element;
 export declare const IconAlignCenter: (p: SEditorIconProps) => import("react").JSX.Element;
 export declare const IconAlignRight: (p: SEditorIconProps) => import("react").JSX.Element;
@@ -48,10 +45,17 @@ export declare const IconRedo: (p: SEditorIconProps) => import("react").JSX.Elem
  * 글자색 — 템플릿에 없어 직접 그렸다 (Simple Editor 에는 글자색 항목이 없다).
  *
  * 나머지 아이콘이 면 도형이라 A 도 같은 굵기(2)로 보이도록 획으로 긋고 끝을 둥글렸다 —
- * 템플릿의 막대(`rx=1` 인 2px 사각형)와 같은 인상이다. 지금 고른 색은 형광펜과 마찬가지로
- * 툴바 버튼이 아이콘 아래 막대로 보여 준다.
+ * 템플릿의 막대(`rx=1` 인 2px 사각형)와 같은 인상이다. 지금 고른 색은 툴바 버튼이 아이콘
+ * 아래 막대로 따로 보여 준다.
  */
 export declare const IconTextColor: (p: SEditorIconProps) => import("react").JSX.Element;
+/**
+ * 표 — 템플릿에 없어 직접 그렸다 (Simple Editor 에는 표가 없다).
+ *
+ * 테두리를 획으로 긋지 않고 **칸 네 개를 면으로 찍는다** — 다른 아이콘이 모두 면 도형이라
+ * 16px 에서 획으로 그린 격자만 유독 흐려 보인다. 첫 줄이 헤더라 한 덩어리로 이어 붙였다.
+ */
+export declare const IconTable: (p: SEditorIconProps) => import("react").JSX.Element;
 /**
  * 구분선 — 템플릿에 없어 직접 그렸다 (Simple Editor 는 구분선 노드는 있지만 툴바 항목이 없다).
  * 막대는 템플릿의 정렬 아이콘과 같은 규격(높이 2, `rx=1`)이다.

package/dist/components/SEditor/editor.config.d.ts

@@ -1,22 +1,32 @@
 import type { CSSProperties } from 'react';
 import type { SColor } from '../../lib/color';
 /** 툴바에 놓을 수 있는 항목. `'|'` 는 구분선이다. */
-export declare const SEDITOR_TOOLBAR_ITEMS: readonly ["heading", "fontSize", "bold", "italic", "underline", "strike", "code", "color", "highlight", "superscript", "subscript", "alignLeft", "alignCenter", "alignRight", "alignJustify", "bulletList", "orderedList", "taskList", "list", "blockquote", "codeBlock", "horizontalRule", "link", "image", "undo", "redo"];
+export declare const SEDITOR_TOOLBAR_ITEMS: readonly ["heading", "fontSize", "bold", "italic", "underline", "strike", "code", "color", "alignLeft", "alignCenter", "alignRight", "alignJustify", "bulletList", "orderedList", "taskList", "list", "blockquote", "codeBlock", "horizontalRule", "link", "image", "table", "undo", "redo"];
 export type SEditorToolbarAction = (typeof SEDITOR_TOOLBAR_ITEMS)[number];
 export type SEditorToolbarItem = SEditorToolbarAction | '|';
 /**
- * 기본 툴바 — tiptap Simple Editor 템플릿과 같은 순서다.
+ * 기본 툴바 — 쓸 수 있는 것을 **모두** 보인다. 순서는 tiptap Simple Editor 템플릿을 따른다.
  *
- * 이력 → 블록(제목·목록·인용·코드블록) → 서식 → 첨자 → 정렬 → 삽입. 목록 셋은 `list`
- * 드롭다운 하나로 묶여 있다(개별 버튼으로 펼치려면 `bulletList`·`orderedList`·`taskList`).
+ * 이력 → 블록(제목·글자 크기·목록·인용·코드블록) → 서식 → 정렬 → 삽입.
  *
- * 전체 항목(`SEDITOR_TOOLBAR_ITEMS`) 중 `fontSize`·`horizontalRule` 만 기본에서 빠져 있다 —
- * 필요한 화면에서 `toolbar` 로 켠다. 글자색(`color`)은 템플릿에 없지만 공지·안내문에서
- * 자주 쓰여 형광펜 옆에 함께 둔다.
+ * 빠진 것은 `bulletList`·`orderedList`·`taskList` 뿐인데, 이 셋은 `list` 드롭다운 하나로
+ * 이미 들어와 있다 — 함께 놓으면 같은 명령이 툴바에 두 번 나온다. 목록을 드롭다운이 아니라
+ * 버튼 셋으로 펼치고 싶은 화면만 `toolbar` 로 직접 조합한다.
  *
  * `image` 는 `onImageUpload` 를 받았을 때만 그려진다 (훅이 없으면 저장할 곳이 없다).
  */
 export declare const SEDITOR_DEFAULT_TOOLBAR: SEditorToolbarItem[];
+/**
+ * 간단 툴바 (`simple`) — **글자에 거는 서식만** 남긴다.
+ *
+ * 목록·정렬·인용·코드·링크·이미지·구분선처럼 **글의 구조를 바꾸는** 항목을 뺀 구성이다.
+ * 받은 글이 다시 화면에 그려질 때 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸에
+ * 놓인 메모·사유·짧은 안내문 — 를 위한 것이다.
+ *
+ * 제목·글자 크기는 남긴다. 둘 다 글의 뼈대가 아니라 **글자의 크기**를 정하는 항목이라
+ * 강조를 거는 데 쓰이고, 이것까지 빼면 남는 것이 굵게·색뿐이라 `STextarea` 와 다를 바 없다.
+ */
+export declare const SEDITOR_SIMPLE_TOOLBAR: SEditorToolbarItem[];
 /**
  * 기본 버블 메뉴 — 글을 선택했을 때 그 위에 뜨는 판의 구성.
  *
@@ -27,16 +37,33 @@ export declare const SEDITOR_DEFAULT_TOOLBAR: SEditorToolbarItem[];
  * 판은 선택 영역 위에 뜨는 한 줄이라 줄바꿈하지 않는다 — 항목을 늘릴 때 폭을 함께 본다.
  */
 export declare const SEDITOR_DEFAULT_BUBBLE_MENU: SEditorToolbarItem[];
+/**
+ * 간단 모드(`simple`)의 버블 메뉴 — 막대와 같은 범위로 맞춘다.
+ *
+ * 막대에서 링크·코드를 뺐는데 판에는 남아 있으면 간단 모드가 아무것도 막지 못한다.
+ * 선택한 글에 걸 수 있는 것은 두 곳이 같아야 한다.
+ */
+export declare const SEDITOR_SIMPLE_BUBBLE_MENU: SEditorToolbarItem[];
 /** 제목 단계 — 본문 12px 위로 14 / 16 / 18 (DS 타이포 heading sm·md·lg) */
 export declare const SEDITOR_HEADING_LEVELS: readonly [1, 2, 3];
 export type SEditorHeadingLevel = (typeof SEDITOR_HEADING_LEVELS)[number];
 export declare const SEDITOR_HEADING_LABELS: Record<SEditorHeadingLevel | 0, string>;
 /**
- * 글자 크기 선택지 (px). DS 타이포 스케일(`--text-*`)에서 본문에 쓰이는 단계만 추렸다.
- * 이 서비스는 정보 밀도가 높아 본문이 12px 다 (AGENTS.md §2-1).
+ * 글자 크기 선택지 (px) — 워드프로세서의 눈금과 같은 단계다.
+ *
+ * 화면의 본문 리듬은 DS 타이포 스케일(`--text-*`)이 잡는다. 이 목록은 그 리듬이 아니라
+ * **작성자가 글 안에서 직접 크기를 지정할 때** 쓰는 눈금이라 훨씬 넓다 — 24 이상은 안내문
+ * 표지·행사 배너처럼 본문이 아닌 글을 위한 것이다.
+ *
+ * **눈금을 좁히는 prop 은 없다** — 화면마다 고를 수 있는 크기가 다르면 같은 글이 어디에
+ * 붙느냐에 따라 다르게 보인다. 작성자가 리듬(AGENTS.md §2-1: 본문 12px)을 벗어나면 곤란한
+ * 자리라면 애초에 `SEditor` 가 아니라 `STextarea` 가 맞는 자리인지 먼저 본다.
+ */
+export declare const SEDITOR_FONT_SIZES: readonly [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72];
+/**
+ * 크기를 지정하지 않은 문단이 실제로 보이는 크기 — 드롭다운의 `기본` 항목이 되돌리는 자리다.
+ * 제목(h1~h3)은 자기 크기를 따로 가지므로 이 값과 무관하다.
  */
-export declare const SEDITOR_FONT_SIZES: readonly [11, 12, 14, 16, 18];
-/** 크기를 지정하지 않은 문단이 실제로 보이는 크기 — 드롭다운의 선택 표시 기준이다. */
 export declare const SEDITOR_DEFAULT_FONT_SIZE = 12;
 export interface SEditorColorOption {
     /** 팔레트 칸의 접근성 레이블·툴팁 */
@@ -45,24 +72,31 @@ export interface SEditorColorOption {
     color: SColor;
 }
 /**
- * 기본 글자색 팔레트 — 역할 토큰(`--color-fg-*`)을 그대로 쓴다.
+ * 글자색 팔레트 — 역할 토큰(`--color-fg-*`)을 그대로 쓴다. 바꾸는 prop 은 없다.
  *
  * 저장되는 HTML 에 `style="color: var(--color-fg-danger)"` 형태로 남으므로 토큰이 바뀌면
  * 이미 저장된 글도 따라간다. 대신 **DS `theme.css` 가 없는 환경(메일 본문 등)으로 그대로
- * 내보내면 색이 풀린다** — 그런 용도라면 `colors` 에 hex 를 직접 넘긴다.
+ * 내보내면 색이 풀린다** — 그런 반출이 필요하면 내보내는 쪽에서 토큰을 실제 색으로 푼다.
  */
 export declare const SEDITOR_DEFAULT_COLORS: SEditorColorOption[];
-/** 기본 형광펜 팔레트 — 글자가 그 위에서 읽혀야 하므로 팔레트의 밝은 단계만 쓴다. */
-export declare const SEDITOR_DEFAULT_HIGHLIGHTS: SEditorColorOption[];
-/** ProseMirror 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다. */
+/**
+ * ProseMirror 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다.
+ *
+ * **아래 `SEDITOR_CONTENT_CLASS` 에서는 이 상수를 끼워 넣지 말고 이름을 그대로 적는다.**
+ * Tailwind 는 소스를 글자로 훑을 뿐 코드를 돌려 보지 않아 `` `[&_.${TASK_LIST_CLASS}]:pl-0` ``
+ * 같은 문자열에서는 클래스 후보를 찾지 못하고, 그 규칙이 통째로 CSS 에서 빠진다 — 화면에는
+ * 아무 에러 없이 스타일만 사라진다 (표 테두리가 통째로 없던 실제 사고).
+ */
 export declare const TASK_LIST_CLASS = "sd-editor-task-list";
 export declare const TASK_ITEM_CLASS = "sd-editor-task-item";
 export declare const IMAGE_CLASS = "sd-editor-image";
+export declare const TABLE_CLASS = "sd-editor-table";
+export declare const TABLE_ROW_CLASS = "sd-editor-table-row";
+export declare const TABLE_HEADER_CLASS = "sd-editor-table-header";
+export declare const TABLE_CELL_CLASS = "sd-editor-table-cell";
 export interface SEditorExtensionOptions {
     /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
     getPlaceholder: () => string;
-    /** 따옴표·하이픈·화살표 자동 치환 (Typography) */
-    typography: boolean;
 }
 /**
  * 편집 영역 안쪽 서식 스타일.

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

@@ -1,2 +1,8 @@
 export { SEditor, type SEditorProps, type SEditorHandle } from './SEditor';
-export { SEDITOR_TOOLBAR_ITEMS, SEDITOR_DEFAULT_TOOLBAR, SEDITOR_DEFAULT_BUBBLE_MENU, SEDITOR_HEADING_LEVELS, SEDITOR_HEADING_LABELS, SEDITOR_FONT_SIZES, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_DEFAULT_COLORS, SEDITOR_DEFAULT_HIGHLIGHTS, type SEditorToolbarAction, type SEditorToolbarItem, type SEditorHeadingLevel, type SEditorColorOption, } from './editor.config';
+/**
+ * 여기 남은 것은 **저장된 HTML 이 어떻게 보이는지**를 알려 주는 값뿐이다 — 읽기 화면을
+ * 직접 그릴 때 쓴다. 툴바 구성(`SEDITOR_*_TOOLBAR`·`SEditorToolbarItem` …)·글자색
+ * 팔레트·글자 크기 눈금처럼 **에디터에 넘기던 값**은 그것을 바꾸는 prop 이 모두 없어져
+ * 내보내지 않는다. 툴바 구성은 `simple` 로만 고른다.
+ */
+export { SEDITOR_HEADING_LEVELS, SEDITOR_HEADING_LABELS, SEDITOR_DEFAULT_FONT_SIZE, type SEditorHeadingLevel, } from './editor.config';

package/dist/components/SEditor/use-is-mobile.d.ts

@@ -2,7 +2,7 @@
  * 좁은 화면인가 (SEditor 전용 — 다른 컴포넌트에서 import 하지 않는다).
  *
  * 이 DS 에는 브레이크포인트 개념이 없다. 여기에 필요한 이유는 하나뿐이라서 — 손가락으로
- * 쓰는 좁은 화면에서는 툴바 위에 뜨는 팝오버(형광펜 팔레트·링크 입력)가 화면 밖으로
+ * 쓰는 좁은 화면에서는 툴바 위에 뜨는 팝오버(글자색 팔레트·링크 입력)가 화면 밖으로
  * 밀리거나 소프트 키보드에 가린다 — 공용 `lib/` 로 올리지 않고 이 폴더에 둔다. 나중에
  * DS 차원의 브레이크포인트가 생기면 그걸로 갈아끼운다.
  *