@loword/loword-design-system 0.7.2 → 0.7.4

package/README.md

@@ -97,7 +97,26 @@ import LDButton from '@loword/loword-design-system/components/LDButton/LDButton'
 </Show>
 ```
 
-> barrel의 값 export는 `Show` · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` 셋 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
+`createCn` — LDS 토큰(커스텀 display·font-weight·spacing·icon-size·숫자 radius)을 아는 `clsx` + `tailwind-merge` 병합 함수 `cn`을 만듭니다. 등록할 토큰이 없으면 `createCn()`, 있으면 `extension`을 넘겨 LDS 설정 뒤에 얹습니다(`extend`는 LDS 값에 추가, `override`는 LDS가 등록한 것까지 교체). 커스텀 class group id는 타입 인자로 넘깁니다.
+
+```ts
+// 소비처 lib/cn.ts — 모듈 스코프에서 한 번만 만든다
+import { createCn } from '@loword/loword-design-system';
+
+export const cn = createCn<'elevation'>({
+  extend: {
+    // 자체 타이포 토큰 text-caption 을 font-size 로 인식시킨다(미등록 시 text-color 로 오인돼 text-red-500 을 지움)
+    theme: { text: ['caption', 'body1'] },
+    // 자체 유틸 elevation-* 를 새 그룹으로 등록하고 shadow-* 와 상충시킨다
+    classGroups: { elevation: [{ elevation: ['1', '2', '3'] }] },
+    conflictingClassGroups: { elevation: ['shadow'] },
+  },
+});
+```
+
+`createCn`은 호출마다 독립된 tailwind-merge 인스턴스(설정·캐시)를 만들므로 모듈 스코프에서 한 번만 만들어 재사용합니다.
+
+> barrel의 값 export는 `Show` · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` · `createCn` 넷 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
 
 ## 빠른 시작 (개발)
 
@@ -108,7 +127,7 @@ pnpm storybook        # Storybook 개발 서버 (port 6006)
 pnpm build            # 프로덕션 빌드
 pnpm check-types      # 타입 체크
 pnpm lint             # ESLint (--fix 포함, src + .storybook)
-pnpm prettier         # Prettier
+pnpm prettier         # Prettier (--write, 저장소 전체 — CI 포매팅 검사와 같은 범위)
 pnpm test             # vitest (utils 유닛 + 스토리 브라우저 실행 + a11y)
 pnpm test:coverage    # 커버리지 (utils / components 분리 측정)
 pnpm changeset        # .changes/{브랜치명}.md 생성

package/dist/components/LDEditor/EditorBase.d.ts

@@ -9,6 +9,8 @@ interface RootProps {
     content?: string;
     onChange?: (html: string) => void;
     className?: string;
+    /** prose 루트(편집 영역)에 인라인 font-size로 적용한다. 지정하지 않으면 prose-lg 기본(18px). */
+    defaultFontSize?: string;
     children?: ReactNode;
 }
 interface ContentProps {
@@ -39,15 +41,16 @@ interface LDViewerProps {
     extensions: Extensions;
     content: string;
     className?: string;
+    defaultFontSize?: string;
 }
 export declare const EditorBase: {
-    Root: ({ extensions, content, onChange, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ extensions, content, onChange, className, defaultFontSize, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Content: ({ className }: ContentProps) => import("react/jsx-runtime").JSX.Element;
     Toolbar: (({ className, children }: ToolbarProps) => import("react/jsx-runtime").JSX.Element | null) & {
         LDButton: ({ disabled, onClick, className, children, "aria-label": ariaLabel, }: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
         Dropdown: ({ trigger, className, children, }: ToolbarDropdownProps) => import("react/jsx-runtime").JSX.Element;
     };
-    LDViewer: ({ extensions, content, className }: LDViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+    LDViewer: ({ extensions, content, className, defaultFontSize, }: LDViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default EditorBase;
 //# sourceMappingURL=EditorBase.d.ts.map

package/dist/components/LDEditor/EditorBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/EditorBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAEX,KAAK,UAAU,EAEhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,yBAS5B,CAAC;AAGF,UAAU,SAAS;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2CD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;CACrE;AA4ED,UAAU,aAAa;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,eAAO,MAAM,UAAU;oEAnMpB,SAAS;6BAuCoB,YAAY;wCAWE,YAAY;yFA2BvD,kBAAkB;sDA4BlB,oBAAoB;;mDA4E+B,aAAa;CAmBlE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EditorBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/EditorBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAEX,KAAK,UAAU,EAEhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAKf,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,yBAS5B,CAAC;AAGF,UAAU,SAAS;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4DD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;CACrE;AA4ED,UAAU,aAAa;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2BD,eAAO,MAAM,UAAU;qFA7MpB,SAAS;6BAqCoB,YAAY;wCAWE,YAAY;yFA2BvD,kBAAkB;sDA4BlB,oBAAoB;;qEAkFpB,aAAa;CAyBf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDEditor/EditorBase.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EditorContent, useEditor, } from '@tiptap/react';
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import cn from '../../utils/cn.js';
 const EditorContext = createContext(null);
 export const useEditorContext = () => {
@@ -11,22 +11,30 @@ export const useEditorContext = () => {
     }
     return editorContext;
 };
-const Root = ({ extensions, content = '', onChange, className, children, }) => {
+const getEditorAttributes = ({ className, defaultFontSize, }) => ({
+    // role이 없는 div에는 aria-label이 허용되지 않아 스크린리더가 이름을 무시한다.
+    role: 'textbox',
+    'aria-multiline': 'true',
+    'aria-label': '본문 편집기',
+    ...(defaultFontSize && { style: `font-size: ${defaultFontSize}` }),
+    class: cn(
+    // ld-editor-render: 렌더(LDViewer·정적 렌더)와 같은 규칙(링크 색 등)을 공유한다.
+    // 높이는 처음 값만 정하고(소비처 h-*가 이긴다) 사용자가 오른쪽 아래 모서리를 끌어 바꾼다. min-h는 너무 줄어들지 않게 하는 하한.
+    'ld-editor-render prose prose-lg max-w-none rounded-b-md border-x border-b border-neutral200 px-4 py-3 outline-none focus:outline-none', 'h-204.5 min-h-40 resize-y overflow-y-auto [scrollbar-gutter:stable] mobile:h-[320px]', className),
+});
+const Root = ({ extensions, content = '', onChange, className, defaultFontSize, children, }) => {
+    const attributes = useMemo(() => getEditorAttributes({ className, defaultFontSize }), [className, defaultFontSize]);
     const editor = useEditor({
         extensions,
         content,
         onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
         immediatelyRender: false,
-        editorProps: {
-            attributes: {
-                // role이 없는 div에는 aria-label이 허용되지 않아 스크린리더가 이름을 무시한다.
-                role: 'textbox',
-                'aria-multiline': 'true',
-                'aria-label': '본문 편집기',
-                class: cn('prose prose-lg h-204.5 max-w-none overflow-y-auto rounded-b-md border-x border-b border-neutral200 px-4 py-3 outline-none focus:outline-none mobile:h-[320px]', className),
-            },
-        },
+        editorProps: { attributes },
     });
+    // 에디터는 한 번만 만들어지므로, 이후 바뀐 defaultFontSize·className을 반영한다.
+    useLayoutEffect(() => {
+        editor?.setOptions({ editorProps: { attributes } });
+    }, [editor, attributes]);
     useEffect(() => {
         if (!editor)
             return;
@@ -98,7 +106,7 @@ const Toolbar = Object.assign(ToolbarRoot, {
     LDButton: ToolbarButton,
     Dropdown: ToolbarDropdown,
 });
-const LDViewer = ({ extensions, content, className }) => {
+const LDViewer = ({ extensions, content, className, defaultFontSize, }) => {
     const editor = useEditor({
         extensions,
         content: content || '',
@@ -109,7 +117,7 @@ const LDViewer = ({ extensions, content, className }) => {
     });
     if (!editor)
         return null;
-    return _jsx(EditorContent, { editor: editor, className: className });
+    return (_jsx(EditorContent, { editor: editor, className: className, style: defaultFontSize ? { fontSize: defaultFontSize } : undefined }));
 };
 export const EditorBase = {
     Root,

package/dist/components/LDEditor/LDEditor.d.ts

@@ -1,8 +1,37 @@
 import { type TMimeType } from '../../constants/file.js';
+declare const FONT_SIZES: readonly ["12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", "40px"];
+/** 툴바 글자 크기 목록의 값 */
+export type LDEditorFontSize = (typeof FONT_SIZES)[number];
 export interface LDEditorProps {
     content: string;
     onChange?: (html: string) => void;
+    /**
+     * 편집 영역(`.ProseMirror`)에 붙는다. `h-*`는 편집 영역의 **처음 높이**다(기본 `h-204.5`, 모바일 320px).
+     * 사용자는 textarea처럼 오른쪽 아래 모서리를 끌어 세로 높이를 바꾸고, 내용이 넘치면 안쪽으로 스크롤된다.
+     * 너무 줄어들지 않게 최소 높이(`min-h-40`)가 있으며 `min-h-*`로 바꿀 수 있다.
+     */
     className?: string;
+    /**
+     * 툴바를 페이지 스크롤에 따라 위에 붙인다(`sticky`, 내용이 비치지 않게 흰 배경). 기본 `false`(툴바가 함께 스크롤됨).
+     * 붙는 위치와 쌓임 순서는 `toolbarClassName`의 `top-*`·`z-*`로 정한다(기본 `top-0`·`z-20`).
+     */
+    stickyToolbar?: boolean;
+    /**
+     * 툴바에 붙는다. `stickyToolbar`일 때 소비처 GNB 높이만큼 `top-*`을 주면 GNB 아래에 붙고,
+     * GNB가 툴바(`z-20`)보다 아래 쌓이면 `z-*`로 순서를 맞춘다.
+     */
+    toolbarClassName?: string;
+    /**
+     * 본문 기본 글자 크기(툴바 글자 크기 목록 중 하나). 기본 `'18px'`(prose-lg 기본과 같음).
+     * 편집 영역 prose 루트에 인라인 `font-size`로 적용하며 제목·여백은 em 비율로 같이 커지고 작아진다.
+     * 글자 크기 mark가 없는 글의 툴바 표시도 이 값을 보여 준다.
+     * 정적 렌더(`div.prose.prose-lg > div.ProseMirror`)는 **prose 루트(바깥 div)에 이 클래스(`ld-editor-render`)와 같은 `font-size`를 준다**.
+     * 정적 렌더 내용 폭 = 에디터 바깥 폭 − 34px(테두리 1 + 여백 16, 양쪽). 렌더 루트 바깥 폭을 그만큼 좁히면(또는 같은 inline 좌우 여백을 주면) 줄바꿈이 같다.
+     * 편집 영역은 스크롤바 자리를 항상 확보(`scrollbar-gutter: stable`)하고, `ld-editor-render`도 같은 거터를 확보한다(높이는 auto라 스크롤은 생기지 않음).
+     * `ld-editor-render`는 빈 문단(`<p></p>`)을 한 줄 높이로, 연속 공백·U+2028을 보존하고, 링크 글자·밑줄 색이 주변 글자 색을 따르게 해 편집 화면과 같게 그린다(붙이지 않으면 기존 렌더 그대로).
+     * `LDViewer`는 같은 이름의 prop을 받는다.
+     */
+    defaultFontSize?: LDEditorFontSize;
     /** 툴바 이미지 업로드와 이미지 붙여넣기에서 호출된다. 반환한 URL이 img의 src가 된다. */
     handleImageUpload?: (fileData: {
         filebase64: string;
@@ -24,6 +53,6 @@ export interface LDEditorProps {
         height: number;
     };
 }
-declare const LDEditor: ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDEditor: ({ content, onChange, className, stickyToolbar, toolbarClassName, defaultFontSize, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default LDEditor;
 //# sourceMappingURL=LDEditor.d.ts.map

package/dist/components/LDEditor/LDEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAqH1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD;AA+UD,QAAA,MAAM,QAAQ,GAAI,mHASf,aAAa,4CAsCf,CAAC;AAimBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAiDA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAW1B,QAAA,MAAM,UAAU,2FAWN,CAAC;AAEX,qBAAqB;AACrB,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AA2P3D,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD;AAuXD,QAAA,MAAM,QAAQ,GAAI,qKAYf,aAAa,4CA0Cf,CAAC;AA2lBF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDEditor.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, Slice, } from '@tiptap/pm/model';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Plugin, PluginKey, } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
 import { defaultBlockAt, Extension, useEditorState, } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Image as ImageIcon, Italic, Link2, List, ListOrdered, Redo, Strikethrough, Table as TableIcon, Underline, Undo, Unlink, } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import EditorBase, { useEditorContext } from '../../components/LDEditor/EditorBase.js';
-import { createEditorExtensions } from '../../components/LDEditor/extensions.js';
+import { createEditorExtensions, } from '../../components/LDEditor/extensions.js';
 import LDToast from '../../components/LDToast/LDToast.js';
 import { FILE_EXTENSIONS, TOOLBAR_ALLOWED_EXTENSIONS, TOOLBAR_MAX_SIZE, } from '../../constants/file.js';
 import cn from '../../utils/cn.js';
@@ -25,19 +25,121 @@ const FONT_SIZES = [
     '36px',
     '40px',
 ];
+// 글자 색 프리셋. 값은 LDS 팔레트(src/styles/color.css) 토큰의 hex이고, 저장 값도 hex(#rrggbb)다.
+// 목록과 툴바에는 hex가 아니라 label을 보여 준다.
+// 첫 항목(검정)이 글 기본 색이다(editor.css 의 .ld-editor-render 기본 글자 색). 고르면 색 mark를 걷어 낸다.
+// 무채색은 검정·회색 두 단계만 둔다 — 그 사이 값은 눈으로 구분되지 않는다.
+const DEFAULT_COLOR = { label: '검정', value: '#191f28' }; // neutral900
 const COLORS = [
-    { label: '검정', value: '#111827' },
-    { label: '빨강', value: '#ef4444' },
-    { label: '파랑', value: '#3b82f6' },
-    { label: '초록', value: '#16a34a' },
-    { label: '주황', value: '#f97316' },
+    DEFAULT_COLOR,
+    { label: '회색', value: '#848a92' }, // neutral500
+    { label: '빨강', value: '#c70000' }, // red800
+    { label: '주황', value: '#e64500' }, // orange700
+    { label: '노랑', value: '#c58e02' }, // yellow800 (흰 배경에서 읽히는 진한 값)
+    { label: '초록', value: '#008f2d' }, // green800
+    { label: '파랑', value: '#003fff' }, // blue500
+    { label: '남색', value: '#011960' }, // blue800
+    { label: '보라', value: '#7b40c7' }, // purple500
 ];
+// HTML을 읽어 들이면 색이 rgb()로 올 수 있어 hex로 맞춰 비교한다.
+const toHex = (color) => {
+    const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
+    return rgb
+        ? `#${[rgb[1], rgb[2], rgb[3]]
+            .map((channel) => Number(channel).toString(16).padStart(2, '0'))
+            .join('')}`
+        : color.toLowerCase();
+};
+const getColorLabel = (color) => {
+    if (!color)
+        return DEFAULT_COLOR.label;
+    const hex = toHex(color);
+    return COLORS.find((item) => item.value === hex)?.label ?? hex;
+};
+// '캡션' 프리셋: 문단 전체 텍스트에 글자 크기와 색 mark(textStyle)를 준다. 문단 노드는 그대로다.
+const CAPTION = { fontSize: '12px', color: '#848a92' }; // 색은 neutral500
 const HEADINGS = [
     { label: '본문', level: 0 },
     { label: '제목 1', level: 1 },
     { label: '제목 2', level: 2 },
     { label: '제목 3', level: 3 },
 ];
+const isCaptionMarks = (marks) => {
+    const attrs = marks.find((mark) => mark.type.name === 'textStyle')?.attrs;
+    return (attrs?.fontSize === CAPTION.fontSize &&
+        !!attrs.color &&
+        toHex(attrs.color) === CAPTION.color);
+};
+// 커서가 있는 문단이 캡션인지: 문단의 글자가 전부 캡션 값이다.
+// 빈 문단은 글자가 없어 커서에 걸어 둔 mark(storedMarks)로 본다.
+const isCaptionBlock = (editor) => {
+    const { state } = editor;
+    const block = state.selection.$from.parent;
+    if (block.type.name !== 'paragraph')
+        return false;
+    if (block.content.size === 0)
+        return isCaptionMarks(state.storedMarks ?? []);
+    let caption = block.textContent.length > 0;
+    block.forEach((node) => {
+        if (node.isText && !isCaptionMarks(node.marks))
+            caption = false;
+    });
+    return caption;
+};
+// 선택이 걸친 문단 전부에 텍스트 스타일을 준다. 캡션은 문단에 글자 크기·색 mark를 거는 것이라,
+// 캡션으로 바꾸면 mark를 걸고 캡션에서 다른 스타일로 바꾸면 걷는다(캡션이 아닌 글에 사용자가 준 크기·색은 둔다).
+// 선택은 건드리지 않고 한 트랜잭션으로 처리해 실행 취소도 한 번이다.
+const setTextStyle = (editor, value, wasCaption) => {
+    const chain = editor.chain().focus();
+    if (value === 0 || value === 'caption')
+        chain.setParagraph();
+    else
+        chain.setHeading({ level: value });
+    if (value !== 'caption' && !wasCaption) {
+        chain.run();
+        return;
+    }
+    chain
+        .command(({ tr }) => {
+        const { $from, $to, empty } = tr.selection;
+        // 이미지 등 블록을 선택했으면 걸 글자가 없다
+        if (!$from.parent.isTextblock)
+            return true;
+        // 글자 크기·색은 textStyle mark 하나에 담긴다. 걷은 뒤 캡션이면 캡션 값만 건다.
+        const textStyle = editor.schema.marks.textStyle;
+        tr.removeMark($from.start(), $to.end(), textStyle);
+        if (value === 'caption') {
+            tr.addMark($from.start(), $to.end(), textStyle.create(CAPTION));
+        }
+        // 빈 문단에는 mark가 붙을 글자가 없다. 이어 쓸 글자에 걸리도록 커서에 둔다.
+        if (empty) {
+            if (value === 'caption')
+                tr.addStoredMark(textStyle.create(CAPTION));
+            else
+                tr.removeStoredMark(textStyle);
+        }
+        return true;
+    })
+        .run();
+};
+// 툴바에 보일 글자 크기·색. 빈 커서는 이어 쓸 글자에 실제로 걸리는 mark를 본다 — 커서에 걸어 둔 mark(storedMarks)가
+// 있으면 그것만, 없으면 커서 앞 글자의 mark. tiptap getAttributes는 둘을 합쳐 보므로 빈 커서에서 색을 걷어도 앞 글자 색이 보인다.
+const getTextStyleAttrs = (editor) => {
+    const { storedMarks, selection } = editor.state;
+    const attrs = selection.empty
+        ? (storedMarks ?? selection.$head.marks()).find((mark) => mark.type.name === 'textStyle')?.attrs
+        : editor.getAttributes('textStyle');
+    return (attrs ?? {});
+};
+// tiptap의 removeEmptyTextStyle은 문서 속 mark만 걷는다. 빈 커서에서 색을 걷으면 속성 없는 textStyle이
+// 커서(storedMarks)에 남아 이어 쓴 글자가 빈 <span>으로 저장되므로 함께 걷는다.
+const removeEmptyStoredTextStyle = ({ tr }) => {
+    const mark = tr.storedMarks?.find((item) => item.type.name === 'textStyle');
+    if (mark && Object.values(mark.attrs).every((value) => value == null)) {
+        tr.removeStoredMark(mark);
+    }
+    return true;
+};
 const TABLE_GRID_MAX = 5;
 const TABLE_ACTIONS = [
     { label: '위에 행 추가', run: (e) => e.chain().focus().addRowBefore().run() },
@@ -75,6 +177,17 @@ const TableGridPicker = ({ onSelect, }) => {
 const iconBtn = 'p-0.5 rounded-lg cursor-pointer transition hover:bg-mono100 disabled:opacity-30 disabled:cursor-not-allowed';
 const activeBtn = 'bg-mono100';
 const LDDivider = () => _jsx("div", { className: "mx-1 h-6 w-px bg-neutral200" });
+// 색 점. 색 mark가 없으면(기본 색) 속이 빈 점.
+const ColorDot = ({ color }) => (_jsx("span", { className: cn('size-4 rounded-full', !color && 'border border-neutral300 bg-white'), style: color ? { backgroundColor: color } : undefined }));
+// 글자 색 목록: 색 이름과 색 점. 기본 색(검정)을 고르면 색 mark를 걷어 내 HTML에 색이 남지 않는다.
+const ColorOptions = ({ editor, close, }) => (_jsx(_Fragment, { children: COLORS.map(({ label, value }) => (_jsxs("button", { type: "button", onClick: (e) => {
+            e.preventDefault();
+            const chain = editor.chain().focus();
+            (value === DEFAULT_COLOR.value
+                ? chain.unsetColor().command(removeEmptyStoredTextStyle)
+                : chain.setColor(value)).run();
+            close();
+        }, className: "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: [_jsx(ColorDot, { color: value }), _jsx("span", { children: label })] }, value))) }));
 // 구분선으로 나뉜 버튼 묶음. 툴바가 flex-wrap이라 묶음 자체가 하나의 flex 아이템이
 // 되어, 폭이 모자라면 묶음 단위로 함께 다음 줄로 내려간다. 구분선은 묶음의 끝에
 // 두어 줄이 바뀌어도 새 줄이 구분선으로 시작하지 않게 한다.
@@ -105,15 +218,30 @@ const uploadImageFile = async (file, { handleImageUpload, allowedExtensions = TO
         throw new Error('이미지 업로드에 실패했습니다.');
     return src;
 };
-// 이미지를 넣을 본문 폭(px). CSS로 100%를 맞추려면 "크기를 정하지 않은 이미지"를
-// 선택자로 가려내야 하는데, 그 조건이 빗나가면 래퍼와 이미지 폭이 어긋나 리사이즈
-// 핸들이 이미지에서 떨어진다. 값으로 넣으면 구조와 무관하게 결과가 같다.
-// 폭을 못 재면(숨겨진 컨테이너 등) undefined를 돌려 원본 크기로 둔다.
+// 편집 영역 내용 폭(px). 폭을 못 재면(숨겨진 컨테이너 등) undefined.
 const getContentWidth = (dom) => {
     const { paddingLeft, paddingRight } = getComputedStyle(dom);
     const width = Math.round(dom.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight));
     return width > 0 ? width : undefined;
 };
+const getNaturalWidth = (src) => new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img.naturalWidth || undefined);
+    img.onerror = () => resolve(undefined);
+    img.src = src;
+});
+// 새로 넣는 이미지의 너비: 원래 너비가 내용 폭보다 작으면 원래 너비(px), 같거나 크면 꽉 채움('100%').
+// 원래 너비를 못 재면 null(지정 없음 — 원본 크기, 내용 폭보다 크면 내용 폭).
+const getInsertWidth = async (src, contentWidth) => {
+    const natural = await getNaturalWidth(src);
+    if (!natural)
+        return null;
+    return contentWidth !== undefined && natural >= contentWidth
+        ? '100%'
+        : natural;
+};
+// 업로드한 URL마다 너비를 정한다. 실패한 자리(null)는 그대로 둔다.
+const withInsertWidths = (srcs, contentWidth) => Promise.all(srcs.map(async (src) => src ? { src, width: await getInsertWidth(src, contentWidth) } : null));
 // ── 이미지 붙여넣기 ──
 const isDataUrl = (src) => typeof src === 'string' && src.startsWith('data:');
 // 상대 경로는 현재 페이지 기준으로 푼다. 주소로 읽을 수 없으면 허용하지 않는다.
@@ -153,7 +281,7 @@ const uploadAll = async (uploads) => {
         LDToast.error(failed.reason.message);
     return results.map((result) => result.status === 'fulfilled' ? result.value : null);
 };
-// urls에 있는 이미지의 src를 업로드 URL로 바꾸고, 값이 null(업로드 실패)인 이미지는 뺀다.
+// urls에 있는 이미지의 src를 업로드 URL로(너비도 새로 정해) 바꾸고, 값이 null(업로드 실패)인 이미지는 뺀다.
 const replaceImages = (fragment, urls) => {
     const nodes = [];
     fragment.forEach((node) => {
@@ -161,9 +289,10 @@ const replaceImages = (fragment, urls) => {
         if (node.type.name === 'image' &&
             typeof src === 'string' &&
             urls.has(src)) {
-            const url = urls.get(src);
-            if (url)
-                nodes.push(node.type.create({ ...node.attrs, src: url }));
+            const uploaded = urls.get(src);
+            if (uploaded) {
+                nodes.push(node.type.create({ ...node.attrs, ...uploaded }));
+            }
             return;
         }
         nodes.push(node.childCount ? node.copy(replaceImages(node.content, urls)) : node);
@@ -290,8 +419,9 @@ const ImagePaste = Extension.create({
                                 ? dataUrlToFile(src).then((file) => uploadImageFile(file, config))
                                 : (copiedImage
                                     ? Promise.resolve(copiedImage)
-                                    : urlToFile(src)).then((file) => uploadImageFile(file, config)))).then((srcs) => {
-                                const urls = new Map(list.map((src, index) => [src, srcs[index] ?? null]));
+                                    : urlToFile(src)).then((file) => uploadImageFile(file, config)))).then(async (srcs) => {
+                                const uploaded = await withInsertWidths(srcs, getContentWidth(view.dom));
+                                const urls = new Map(list.map((src, index) => [src, uploaded[index] ?? null]));
                                 return new Slice(replaceImages(slice.content, urls), slice.openStart, slice.openEnd);
                             }));
                             return true;
@@ -299,15 +429,15 @@ const ImagePaste = Extension.create({
                         // Office는 HTML과 함께 선택 영역을 찍은 PNG를 files에 넣는다. HTML이 있으면 파일은 무시한다.
                         if (html || !files.length)
                             return false;
-                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, config))).then((srcs) => {
+                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, config))).then(async (srcs) => {
+                            const uploaded = await withInsertWidths(srcs, getContentWidth(view.dom));
                             const nodes = files.flatMap((file, index) => {
-                                const src = srcs[index];
-                                return src
+                                const image = uploaded[index];
+                                return image
                                     ? [
                                         view.state.schema.node('image', {
-                                            src,
+                                            ...image,
                                             alt: file.name,
-                                            width: getContentWidth(view.dom),
                                         }),
                                     ]
                                     : [];
@@ -321,7 +451,7 @@ const ImagePaste = Extension.create({
         ];
     },
 });
-const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }) => {
+const LDEditor = ({ content, onChange, className, stickyToolbar, toolbarClassName, defaultFontSize, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }) => {
     // 에디터는 첫 렌더의 extensions로 한 번만 만들어진다. 붙여넣기는 최신 props를 ref로 읽는다.
     const pasteConfigRef = useRef({
         handleImageUpload,
@@ -342,9 +472,9 @@ const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImag
     return (_jsxs(EditorBase.Root, { extensions: [
             ...createEditorExtensions(),
             ImagePaste.configure({ getConfig: () => pasteConfigRef.current }),
-        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions, maxSize: maxSize, maxImageSize: maxImageSize }), _jsx(EditorBase.Content, {})] }));
+        ], content: content, onChange: onChange, className: className, defaultFontSize: defaultFontSize, children: [_jsx(EditorToolbar, { stickyToolbar: stickyToolbar, toolbarClassName: toolbarClassName, defaultFontSize: defaultFontSize, handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions, maxSize: maxSize, maxImageSize: maxImageSize }), _jsx(EditorBase.Content, {})] }));
 };
-const EditorToolbar = (uploadConfig) => {
+const EditorToolbar = ({ stickyToolbar = false, toolbarClassName, defaultFontSize = '18px', ...uploadConfig }) => {
     const [linkUrl, setLinkUrl] = useState('');
     const [isMobile, setIsMobile] = useState(false);
     const { editor } = useEditorContext();
@@ -361,9 +491,11 @@ const EditorToolbar = (uploadConfig) => {
         selector: ({ editor }) => {
             if (!editor)
                 return null;
+            const textStyle = getTextStyleAttrs(editor);
             return {
-                fontSize: editor.getAttributes('textStyle')?.fontSize || '18px',
-                color: editor.getAttributes('textStyle')?.color || '#111827',
+                fontSize: textStyle.fontSize || defaultFontSize,
+                color: textStyle.color ?? undefined,
+                isCaption: isCaptionBlock(editor),
                 headingLevel: [1, 2, 3].find((l) => editor.isActive('heading', { level: l })),
                 isBold: editor.isActive('bold'),
                 isItalic: editor.isActive('italic'),
@@ -392,12 +524,16 @@ const EditorToolbar = (uploadConfig) => {
         if (!files?.[0] || !editor)
             return;
         const file = files[0];
+        const contentWidth = getContentWidth(editor.view.dom);
         try {
             const src = await uploadImageFile(file, uploadConfig);
-            editor.commands.setImage({
-                src,
-                alt: file.name,
-                width: getContentWidth(editor.view.dom),
+            const width = await getInsertWidth(src, contentWidth);
+            // 업로드하는 사이 에디터가 사라졌으면(페이지 이동 등) 넣을 곳이 없다
+            if (editor.isDestroyed)
+                return;
+            editor.commands.insertContent({
+                type: 'image',
+                attrs: { src, alt: file.name, width },
             });
         }
         catch (error) {
@@ -426,26 +562,29 @@ const EditorToolbar = (uploadConfig) => {
         else
             chain.unsetLink().run();
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(EditorBase.Toolbar, { className: "gap-2 rounded-t-md border border-neutral200 px-4 py-3", children: [_jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-30 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (
+    return (_jsxs(_Fragment, { children: [_jsxs(EditorBase.Toolbar, { className: cn('gap-2 rounded-t-md border border-neutral200 px-4 py-3', 
+                // 이미지 리사이즈 핸들(z-10)보다 위, 내용이 비쳐 겹쳐 보이지 않게 배경을 채운다.
+                stickyToolbar && 'sticky top-0 z-20 bg-white', toolbarClassName), children: [_jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-30 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (
                                 // aria-label이 없으면 접근성 이름이 현재 선택값('본문'·'제목 1'…)이 되어,
                                 // 드롭다운이 열렸을 때 트리거와 옵션이 같은 이름을 갖는다.
                                 // 고정 라벨을 줘서 트리거를 항상 같은 이름으로 가리킬 수 있게 한다.
-                                _jsx(EditorBase.Toolbar.LDButton, { "aria-label": "\uC81C\uBAA9 \uC218\uC900", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-5 px-2'), children: _jsx("span", { className: "min-w-10 whitespace-nowrap", children: state.headingLevel ? `제목 ${state.headingLevel}` : '본문' }) })), children: ({ close }) => HEADINGS.map(({ label, level }) => (_jsx("button", { type: "button", onClick: (e) => {
-                                        e.preventDefault();
-                                        if (level === 0)
-                                            editor.chain().focus().setParagraph().run();
-                                        else
-                                            editor.chain().focus().toggleHeading({ level }).run();
-                                        close();
-                                    }, className: "w-full cursor-pointer px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: label }, level))) }), _jsx(LDDivider, {})] }), !isMobile && (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBold().run(), className: cn(iconBtn, state.isBold && activeBtn), "aria-label": "\uAD75\uAC8C", children: _jsx(Bold, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleItalic().run(), className: cn(iconBtn, state.isItalic && activeBtn), "aria-label": "\uAE30\uC6B8\uC784", children: _jsx(Italic, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), className: cn(iconBtn, state.isUnderline && activeBtn), "aria-label": "\uBC11\uC904", children: _jsx(Underline, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleStrike().run(), className: cn(iconBtn, state.isStrike && activeBtn), "aria-label": "\uCDE8\uC18C\uC120", children: _jsx(Strikethrough, { className: "size-5" }) }), _jsx(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-25 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { "aria-label": "\uAE00\uC790 \uD06C\uAE30", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-1 px-2'), children: [_jsx("span", { className: "text-sm whitespace-nowrap", children: state.fontSize }), _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => FONT_SIZES.map((size) => (_jsx("button", { type: "button", onClick: (e) => {
+                                _jsx(EditorBase.Toolbar.LDButton, { "aria-label": "\uC81C\uBAA9 \uC218\uC900", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-5 px-2'), children: _jsx("span", { className: "min-w-10 whitespace-nowrap", children: state.isCaption
+                                            ? '캡션'
+                                            : state.headingLevel
+                                                ? `제목 ${state.headingLevel}`
+                                                : '본문' }) })), children: ({ close }) => (_jsxs(_Fragment, { children: [HEADINGS.map(({ label, level }) => (_jsx("button", { type: "button", onClick: (e) => {
                                                 e.preventDefault();
-                                                editor.chain().focus().setFontSize(size).run();
+                                                setTextStyle(editor, level, state.isCaption);
                                                 close();
-                                            }, className: "w-full cursor-pointer px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: size }, size))) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-35 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { "aria-label": "\uAE00\uC790 \uC0C9", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-2 px-2'), children: [_jsx("span", { className: "size-4 rounded-full", style: { backgroundColor: state.color } }), state.color, _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => COLORS.map((color) => (_jsxs("button", { type: "button", onClick: (e) => {
+                                            }, className: "w-full cursor-pointer px-3 py-2 text-left text-sm first:rounded-t-lg hover:bg-mono100", children: label }, level))), _jsx("button", { type: "button", onClick: (e) => {
                                                 e.preventDefault();
-                                                editor.chain().focus().setColor(color.value).run();
+                                                setTextStyle(editor, 'caption', state.isCaption);
                                                 close();
-                                            }, className: "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: [_jsx("span", { className: "size-4 rounded-full", style: { backgroundColor: color.value } }), _jsx("span", { children: color.label })] }, color.value))) }), _jsx(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [['left', 'center', 'right', 'justify'].map((align) => {
+                                            }, className: "w-full cursor-pointer rounded-b-lg px-3 py-2 text-left text-sm hover:bg-mono100", children: "\uCEA1\uC158" })] })) }), _jsx(LDDivider, {})] }), !isMobile && (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBold().run(), className: cn(iconBtn, state.isBold && activeBtn), "aria-label": "\uAD75\uAC8C", children: _jsx(Bold, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleItalic().run(), className: cn(iconBtn, state.isItalic && activeBtn), "aria-label": "\uAE30\uC6B8\uC784", children: _jsx(Italic, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), className: cn(iconBtn, state.isUnderline && activeBtn), "aria-label": "\uBC11\uC904", children: _jsx(Underline, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleStrike().run(), className: cn(iconBtn, state.isStrike && activeBtn), "aria-label": "\uCDE8\uC18C\uC120", children: _jsx(Strikethrough, { className: "size-5" }) }), _jsx(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-25 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { "aria-label": "\uAE00\uC790 \uD06C\uAE30", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-1 px-2'), children: [_jsx("span", { className: "text-sm whitespace-nowrap", children: state.fontSize }), _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => FONT_SIZES.map((size) => (_jsx("button", { type: "button", onClick: (e) => {
+                                                e.preventDefault();
+                                                editor.chain().focus().setFontSize(size).run();
+                                                close();
+                                            }, className: "w-full cursor-pointer px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: size }, size))) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-35 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { "aria-label": "\uAE00\uC790 \uC0C9", onClick: toggle, className: cn(iconBtn, 'flex items-center gap-2 px-2'), children: [_jsx(ColorDot, { color: state.color || DEFAULT_COLOR.value }), getColorLabel(state.color), _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => _jsx(ColorOptions, { editor: editor, close: close }) }), _jsx(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [['left', 'center', 'right', 'justify'].map((align) => {
                                         const Icon = {
                                             left: AlignLeft,
                                             center: AlignCenter,
@@ -490,11 +629,7 @@ const EditorToolbar = (uploadConfig) => {
                                     } })) }), _jsxs("label", { className: cn(iconBtn, 'relative'), children: [_jsx(ImageIcon, { className: "size-5" }), _jsx("input", { type: "file", accept: "image/*", "aria-label": "\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC", className: "absolute inset-0 size-full cursor-pointer opacity-0", onChange: (e) => {
                                             handleImageUploadAction(e.target.files);
                                             e.target.value = '';
-                                        } })] })] })] }), isMobile && (_jsxs(BubbleMenu, { editor: editor, className: "flex items-center gap-1 rounded-lg border border-neutral200 bg-white p-1 shadow-lg", children: [_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBold().run(), className: cn(iconBtn, state.isBold && activeBtn), "aria-label": "\uAD75\uAC8C", children: _jsx(Bold, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleItalic().run(), className: cn(iconBtn, state.isItalic && activeBtn), "aria-label": "\uAE30\uC6B8\uC784", children: _jsx(Italic, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), className: cn(iconBtn, state.isUnderline && activeBtn), "aria-label": "\uBC11\uC904", children: _jsx(Underline, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleStrike().run(), className: cn(iconBtn, state.isStrike && activeBtn), "aria-label": "\uCDE8\uC18C\uC120", children: _jsx(Strikethrough, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-35 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { onClick: toggle, className: cn(iconBtn, 'flex items-center gap-1 px-2'), "aria-label": "\uAE00\uC790 \uC0C9", children: [_jsx("span", { className: "size-4 rounded-full", style: { backgroundColor: state.color } }), _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => COLORS.map((color) => (_jsxs("button", { type: "button", onClick: (e) => {
-                                e.preventDefault();
-                                editor.chain().focus().setColor(color.value).run();
-                                close();
-                            }, className: "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm first:rounded-t-lg last:rounded-b-lg hover:bg-mono100", children: [_jsx("span", { className: "size-4 rounded-full", style: { backgroundColor: color.value } }), _jsx("span", { children: color.label })] }, color.value))) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-60 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => {
+                                        } })] })] })] }), isMobile && (_jsxs(BubbleMenu, { editor: editor, className: "flex items-center gap-1 rounded-lg border border-neutral200 bg-white p-1 shadow-lg", children: [_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBold().run(), className: cn(iconBtn, state.isBold && activeBtn), "aria-label": "\uAD75\uAC8C", children: _jsx(Bold, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleItalic().run(), className: cn(iconBtn, state.isItalic && activeBtn), "aria-label": "\uAE30\uC6B8\uC784", children: _jsx(Italic, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), className: cn(iconBtn, state.isUnderline && activeBtn), "aria-label": "\uBC11\uC904", children: _jsx(Underline, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleStrike().run(), className: cn(iconBtn, state.isStrike && activeBtn), "aria-label": "\uCDE8\uC18C\uC120", children: _jsx(Strikethrough, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-35 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsxs(EditorBase.Toolbar.LDButton, { onClick: toggle, className: cn(iconBtn, 'flex items-center gap-1 px-2'), "aria-label": "\uAE00\uC790 \uC0C9", children: [_jsx(ColorDot, { color: state.color || DEFAULT_COLOR.value }), _jsx(ChevronDown, { className: "size-4" })] })), children: ({ close }) => _jsx(ColorOptions, { editor: editor, close: close }) }), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-60 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => {
                                 setLinkUrl(getLinkHref());
                                 toggle();
                             }, className: cn(iconBtn, state.isLink && activeBtn), "aria-label": "\uB9C1\uD06C", children: _jsx(Link2, { className: "size-5" }) })), children: ({ close }) => {

package/dist/components/LDEditor/LDViewer.d.ts

@@ -1,7 +1,13 @@
+import type { LDEditorFontSize } from '../../components/LDEditor/LDEditor.js';
 export interface LDViewerProps {
     content: string;
     className?: string;
+    /**
+     * 본문 기본 글자 크기. 기본 `'18px'`(prose-lg 기본과 같음). prose 루트에 인라인 `font-size`로
+     * 적용한다. 정적 렌더는 prose 루트(`div.prose.prose-lg`)에 `ld-editor-render` 클래스와 같은 `font-size`를 준다.
+     */
+    defaultFontSize?: LDEditorFontSize;
 }
-declare const LDViewer: ({ content, className }: LDViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDViewer: ({ content, className, defaultFontSize }: LDViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default LDViewer;
 //# sourceMappingURL=LDViewer.d.ts.map

package/dist/components/LDEditor/LDViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDViewer.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDViewer.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAWtD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDViewer.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,QAAA,MAAM,QAAQ,GAAI,yCAAyC,aAAa,4CAevE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDViewer.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import EditorBase from '../../components/LDEditor/EditorBase.js';
 import { createEditorExtensions } from '../../components/LDEditor/extensions.js';
 import cn from '../../utils/cn.js';
-const LDViewer = ({ content, className }) => {
+const LDViewer = ({ content, className, defaultFontSize }) => {
     return (_jsx(EditorBase.LDViewer, { extensions: createEditorExtensions({
             resizableImage: false,
             resizableTable: false,
-        }), content: content, className: cn('prose prose-lg w-full max-w-none', className) }));
+        }), content: content, defaultFontSize: defaultFontSize, className: cn('ld-editor-render prose prose-lg w-full max-w-none', className) }));
 };
 export default LDViewer;