sellmate-design-system-react 9.0.0-beta.19 → 9.0.0-beta.20

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

@@ -0,0 +1,85 @@
+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 type SEditorToolbarAction = (typeof SEDITOR_TOOLBAR_ITEMS)[number];
+export type SEditorToolbarItem = SEditorToolbarAction | '|';
+/**
+ * 기본 툴바 — tiptap Simple Editor 템플릿과 같은 순서다.
+ *
+ * 이력 → 블록(제목·목록·인용·코드블록) → 서식 → 첨자 → 정렬 → 삽입. 목록 셋은 `list`
+ * 드롭다운 하나로 묶여 있다(개별 버튼으로 펼치려면 `bulletList`·`orderedList`·`taskList`).
+ *
+ * 전체 항목(`SEDITOR_TOOLBAR_ITEMS`) 중 `fontSize`·`horizontalRule` 만 기본에서 빠져 있다 —
+ * 필요한 화면에서 `toolbar` 로 켠다. 글자색(`color`)은 템플릿에 없지만 공지·안내문에서
+ * 자주 쓰여 형광펜 옆에 함께 둔다.
+ *
+ * `image` 는 `onImageUpload` 를 받았을 때만 그려진다 (훅이 없으면 저장할 곳이 없다).
+ */
+export declare const SEDITOR_DEFAULT_TOOLBAR: SEditorToolbarItem[];
+/**
+ * 기본 버블 메뉴 — 글을 선택했을 때 그 위에 뜨는 판의 구성.
+ *
+ * tiptap Simple Editor 에는 버블 메뉴가 없다. 그래서 구성은 템플릿 툴바의 **서식 묶음**을
+ * 그대로 가져왔다 — 선택한 글에 바로 걸 수 있는 것만 남기고 블록(제목·목록·인용)·정렬·
+ * 삽입은 뺐다. 그것들은 커서만 있어도 되므로 막대에서 누르는 편이 낫다.
+ *
+ * 판은 선택 영역 위에 뜨는 한 줄이라 줄바꿈하지 않는다 — 항목을 늘릴 때 폭을 함께 본다.
+ */
+export declare const SEDITOR_DEFAULT_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).
+ */
+export declare const SEDITOR_FONT_SIZES: readonly [11, 12, 14, 16, 18];
+/** 크기를 지정하지 않은 문단이 실제로 보이는 크기 — 드롭다운의 선택 표시 기준이다. */
+export declare const SEDITOR_DEFAULT_FONT_SIZE = 12;
+export interface SEditorColorOption {
+    /** 팔레트 칸의 접근성 레이블·툴팁 */
+    label: string;
+    /** 팔레트 키(`red_75` …) 또는 CSS 색상 문자열 */
+    color: SColor;
+}
+/**
+ * 기본 글자색 팔레트 — 역할 토큰(`--color-fg-*`)을 그대로 쓴다.
+ *
+ * 저장되는 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 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다. */
+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 interface SEditorExtensionOptions {
+    /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
+    getPlaceholder: () => string;
+    /** 따옴표·하이픈·화살표 자동 치환 (Typography) */
+    typography: boolean;
+}
+/**
+ * 편집 영역 안쪽 서식 스타일.
+ *
+ * ProseMirror 가 만드는 자식 요소(h1·ul·blockquote …)는 JSX 에 없어 클래스를 달 수 없고,
+ * Tailwind preflight 가 목록·제목의 기본 스타일을 지워 버린다. 이 패키지에는 컴포넌트 CSS
+ * 파일이 없으므로 arbitrary variant 로 자식 선택자를 직접 쓴다.
+ */
+export declare const SEDITOR_CONTENT_CLASS: string;
+export interface SEditorContentStyleOptions {
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    disabled?: boolean;
+}
+/**
+ * 편집 영역(그리고 엔진을 불러오는 동안 그 자리를 대신하는 빈 영역)의 상자·타이포.
+ *
+ * 두 곳이 같은 값을 써야 로딩이 끝나는 순간 글이 튀지 않는다.
+ */
+export declare const editorContentStyle: ({ minHeight, maxHeight, disabled, }: SEditorContentStyleOptions) => CSSProperties;

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

@@ -0,0 +1,2 @@
+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';

package/dist/components/SEditor/tiptap-api.d.ts

@@ -0,0 +1,29 @@
+import type { AnyExtension } from '@tiptap/core';
+import { type SEditorExtensionOptions } from './editor.config';
+type TiptapReact = typeof import('@tiptap/react');
+type TiptapMenus = typeof import('@tiptap/react/menus');
+/** 동적으로 불러온 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[];
+}
+/**
+ * tiptap 을 불러온다 (이미 불러왔으면 같은 약속을 돌려준다).
+ *
+ * 실패하면 캐시를 비워 다음 마운트가 다시 시도하게 한다 — 잠깐의 네트워크 문제로
+ * 그 세션 내내 에디터가 뜨지 않는 일을 막는다.
+ */
+export declare const loadTiptapApi: () => Promise<TiptapApi>;
+/**
+ * 불러온 tiptap. 아직 준비되지 않았으면 `null`.
+ *
+ * 두 번째 마운트부터는 첫 렌더에 바로 값이 있어 빈 자리가 보이지 않는다.
+ * 서버 렌더에서는 언제나 `null` 이라 하이드레이션이 어긋나지 않는다.
+ */
+export declare const useTiptapApi: () => TiptapApi | null;
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * 좁은 화면인가 (SEditor 전용 — 다른 컴포넌트에서 import 하지 않는다).
+ *
+ * 이 DS 에는 브레이크포인트 개념이 없다. 여기에 필요한 이유는 하나뿐이라서 — 손가락으로
+ * 쓰는 좁은 화면에서는 툴바 위에 뜨는 팝오버(형광펜 팔레트·링크 입력)가 화면 밖으로
+ * 밀리거나 소프트 키보드에 가린다 — 공용 `lib/` 로 올리지 않고 이 폴더에 둔다. 나중에
+ * DS 차원의 브레이크포인트가 생기면 그걸로 갈아끼운다.
+ *
+ * **뷰포트 폭**을 본다. 필드 자신의 폭이 아니다 — 넓은 화면에서 좁은 칸에 놓인 에디터는
+ * 팝오버를 띄울 자리가 옆에 얼마든지 있으므로 하위 뷰로 바꿀 이유가 없다.
+ *
+ * 서버 렌더와 첫 렌더에서는 언제나 `false` 다 (하이드레이션이 어긋나지 않게).
+ */
+export declare const useIsMobile: () => boolean;

package/dist/components/SField/README.md

@@ -78,6 +78,7 @@ export type SFieldStatus = 'default' | 'pass' | 'error';
  - [SChipInput](../SChipInput)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SEditor](../SEditor)
  - [SFilePicker](../SFilePicker)
  - [SInput](../SInput)
  - [SNumberInput](../SNumberInput)
@@ -102,6 +103,7 @@ graph TD;
   SChipInput --> SField
   SDatePicker --> SField
   SDateRangePicker --> SField
+  SEditor --> SField
   SFilePicker --> SField
   SInput --> SField
   SNumberInput --> SField

package/dist/components/SIcon/README.md

@@ -30,6 +30,7 @@
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
  - [SDropdownButton](../SDropdownButton)
+ - [SEditor](../SEditor)
  - [SExpansionItem](../SExpansionItem)
  - [SField](../SField)
  - [SFilePicker](../SFilePicker)
@@ -69,6 +70,7 @@ graph TD;
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon
   SDropdownButton --> SIcon
+  SEditor --> SIcon
   SExpansionItem --> SIcon
   SField --> SIcon
   SFilePicker --> SIcon

package/dist/components/SInput/README.md

@@ -48,6 +48,7 @@
 
 ### Used by
 
+ - [SEditor](../SEditor)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Depends on
@@ -61,6 +62,7 @@
 graph TD;
   SInput --> SField
   SInput --> SGhostButton
+  SEditor --> SInput
   SKeyValueTable --> SInput
   style SInput fill:#f9f,stroke:#333,stroke-width:4px
 ```