@loword/loword-design-system 0.7.3 → 0.7.4

package/README.md

@@ -127,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;

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

@@ -1,4 +1,9 @@
 import type { Extensions } from '@tiptap/react';
+/**
+ * 이미지 너비(img의 width 속성). 숫자나 숫자 문자열(`671`, `'671'`, `'671px'`)은 고정(px), `'100%'`는 꽉 채움,
+ * null은 지정 없음(원본 크기, 컨테이너보다 크면 컨테이너 폭).
+ */
+export type EditorImageWidth = number | string | null;
 export interface EditorExtensionOptions {
     resizableImage?: boolean;
     resizableTable?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/extensions.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAsChD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,GAAI,sCAGpC,sBAA2B,KAAG,UA2ChC,CAAC"}
+{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/extensions.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AAyJtD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,GAAI,sCAGpC,sBAA2B,KAAG,UA0ChC,CAAC"}

package/dist/components/LDEditor/extensions.js

@@ -1,9 +1,43 @@
-import { mergeAttributes } from '@tiptap/core';
+import { mergeAttributes, ResizableNodeView } from '@tiptap/core';
 import Image from '@tiptap/extension-image';
 import { TableKit } from '@tiptap/extension-table';
 import TextAlign from '@tiptap/extension-text-align';
 import { Color, FontSize, TextStyle } from '@tiptap/extension-text-style';
 import StarterKit from '@tiptap/starter-kit';
+// width 속성 값을 편집 화면 너비로 바꾼다. 브라우저가 img의 width 속성을 읽는 방식처럼 앞의 숫자만 보고
+// 뒤가 %면 비율, 아니면 px이다('671'·671·'671px' → 671px, '100%' → 100%). 0 이하나 숫자가 아니면 지정 없음.
+const toWidthStyle = (width) => {
+    const match = /^\s*(\d*\.?\d+)\s*(%?)/.exec(String(width ?? ''));
+    if (!match || !(Number(match[1]) > 0))
+        return undefined;
+    return `${Number(match[1])}${match[2] ? '%' : 'px'}`;
+};
+// 리사이즈로 끌어 컨테이너 폭에 이 값(px) 이내로 닿으면 꽉 채움으로 본다.
+const FULL_WIDTH_TOLERANCE = 2;
+/**
+ * 편집 화면 img에 노드 속성을 반영한다. 리사이즈 노드뷰는 만들 때만 속성을 읽고 이후 갱신에는
+ * DOM을 건드리지 않으므로, 정렬·너비가 바뀔 때마다 직접 맞춰 줘야 한다.
+ * 꽉 채움은 래퍼도 100%여야 한다 — 래퍼가 내용 폭(fit-content)이면 img의 100%가 순환해 원본 크기가 된다.
+ */
+const syncImage = (view, node) => {
+    const img = view.element;
+    const attrs = node.attrs;
+    if (attrs.src && img.getAttribute('src') !== attrs.src) {
+        img.setAttribute('src', attrs.src);
+    }
+    ['alt', 'title'].forEach((name) => {
+        if (attrs[name])
+            img.setAttribute(name, attrs[name]);
+        else
+            img.removeAttribute(name);
+    });
+    img.style.textAlign = attrs.textAlign ?? '';
+    const width = toWidthStyle(attrs.width);
+    const percent = width?.endsWith('%');
+    view.wrapper.style.width = percent ? width : '';
+    img.style.width = percent ? '100%' : (width ?? '');
+    img.style.height = '';
+};
 /**
  * 링크를 걸 수 있는 이미지. 링크(mark)는 텍스트에만 붙고 블록 이미지는 받지 못하므로
  * 이미지 노드에 `href`를 두고 저장 시 `<a href><img></a>`로 감싼다.
@@ -13,6 +47,15 @@ const LinkableImage = Image.extend({
     addAttributes() {
         return {
             ...this.parent?.(),
+            // 넣기·리사이즈는 고정이면 px 정수, 꽉 채움이면 '100%'를 쓴다. 읽어 들인 값은 문자열 그대로 둬
+            // getJSON의 width가 기존과 같은 형태다(0·숫자가 아닌 값만 버린다). 기존 글의 px 너비는 고정으로 읽는다.
+            width: {
+                default: null,
+                parseHTML: (element) => {
+                    const width = element.getAttribute('width');
+                    return toWidthStyle(width) ? width : null;
+                },
+            },
             href: {
                 default: null,
                 // 붙여넣기·불러오기 때 이미지를 감싼 <a>의 주소를 읽는다
@@ -22,6 +65,68 @@ const LinkableImage = Image.extend({
             },
         };
     },
+    addNodeView() {
+        if (!this.options.resize || !this.options.resize.enabled)
+            return null;
+        if (typeof document === 'undefined')
+            return null;
+        const { directions, minWidth, minHeight, alwaysPreserveAspectRatio } = this.options.resize;
+        return ({ node, getPos, HTMLAttributes, editor }) => {
+            const el = document.createElement('img');
+            el.draggable = false;
+            Object.entries(mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)).forEach(([key, value]) => {
+                // 너비·높이는 syncImage가 정한다(속성이 아니라 스타일로)
+                if (value != null && key !== 'width' && key !== 'height') {
+                    el.setAttribute(key, value);
+                }
+            });
+            const view = new ResizableNodeView({
+                element: el,
+                editor,
+                node,
+                getPos,
+                // 끄는 동안 img가 px 너비로 바뀌므로 꽉 채움 래퍼를 풀어 핸들이 모서리에 붙게 한다
+                onResize: () => {
+                    view.wrapper.style.width = '';
+                },
+                // 내용 폭에 닿으면 꽉 채움, 아니면 그 px(고정). 높이는 저장하지 않고 항상 비율을 따른다.
+                onCommit: (width) => {
+                    const pos = getPos();
+                    if (pos === undefined)
+                        return;
+                    const full = Math.abs(width - view.dom.clientWidth) <= FULL_WIDTH_TOLERANCE;
+                    editor
+                        .chain()
+                        .setNodeSelection(pos)
+                        .updateAttributes(this.name, {
+                        width: full ? '100%' : Math.round(width),
+                        height: null,
+                    })
+                        .run();
+                },
+                onUpdate: (updatedNode) => {
+                    if (updatedNode.type !== node.type)
+                        return false;
+                    syncImage(view, updatedNode);
+                    return true;
+                },
+                options: {
+                    directions,
+                    min: { width: minWidth, height: minHeight },
+                    preserveAspectRatio: alwaysPreserveAspectRatio === true,
+                },
+            });
+            syncImage(view, node);
+            // 로드 전에는 숨겨 크기가 튀어 보이지 않게 한다. 깨진 이미지도 보이고 선택돼야 지울 수 있다.
+            view.dom.style.visibility = 'hidden';
+            view.dom.style.pointerEvents = 'none';
+            el.onload = el.onerror = () => {
+                view.dom.style.visibility = '';
+                view.dom.style.pointerEvents = '';
+            };
+            return view;
+        };
+    },
     renderHTML({ node, HTMLAttributes }) {
         const img = [
             'img',
@@ -49,12 +154,11 @@ export const createEditorExtensions = ({ resizableImage = true, resizableTable =
         link: {
             openOnClick: false,
             autolink: true,
-            HTMLAttributes: {
-                class: 'text-blue-500 underline cursor-pointer',
-            },
         },
     }),
-    TextStyle,
+    // 글자 색·크기 mark가 링크 mark(priority 1000)보다 바깥이어야 한다. 링크가 바깥이면 밑줄이 링크 요소의
+    // 색으로 그려져 안쪽 글자 색을 따르지 못한다.
+    TextStyle.extend({ priority: 1001 }),
     FontSize,
     Color,
     TextAlign.configure({

package/dist/index.css

@@ -1278,6 +1278,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-\[17px\] {
+    margin-left: 17px;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1682,6 +1685,9 @@
   .min-h-25 {
     min-height: calc(var(--spacing) * 25);
   }
+  .min-h-40 {
+    min-height: calc(var(--spacing) * 40);
+  }
   .min-h-100 {
     min-height: calc(var(--spacing) * 100);
   }
@@ -1818,6 +1824,9 @@
   .w-\[60px\] {
     width: 60px;
   }
+  .w-\[calc\(100\%-34px\)\] {
+    width: calc(100% - 34px);
+  }
   .w-auto {
     width: auto;
   }
@@ -1836,6 +1845,9 @@
   .max-w-160 {
     max-width: calc(var(--spacing) * 160);
   }
+  .max-w-180 {
+    max-width: calc(var(--spacing) * 180);
+  }
   .max-w-200 {
     max-width: calc(var(--spacing) * 200);
   }
@@ -2022,6 +2034,9 @@
   .resize {
     resize: both;
   }
+  .resize-y {
+    resize: vertical;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2420,6 +2435,9 @@
   .border-neutral200 {
     border-color: var(--color-neutral200);
   }
+  .border-neutral300 {
+    border-color: var(--color-neutral300);
+  }
   .border-neutral700 {
     border-color: var(--color-neutral700);
   }
@@ -3502,6 +3520,9 @@
   .\[outline-style\:solid\] {
     outline-style: solid;
   }
+  .\[scrollbar-gutter\:stable\] {
+    scrollbar-gutter: stable;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -5563,11 +5584,37 @@
     padding: 0 !important;
     line-height: calc(28 / 18) !important;
   }
+  .ld-editor-render .ProseMirror p:empty::before, .ProseMirror.ld-editor-render p:empty::before {
+    content: '\200B';
+  }
+  .ld-editor-render .ProseMirror a, .ProseMirror.ld-editor-render a {
+    color: inherit !important;
+    text-decoration-color: currentcolor !important;
+  }
+  .ld-editor-render .ProseMirror :is(a, u), .ProseMirror.ld-editor-render :is(a, u) {
+    text-underline-offset: 2px;
+  }
+  .ld-editor-render.prose, .ld-editor-render .prose {
+    --tw-prose-body: var(--color-neutral900);
+    letter-spacing: var(--tracking-display16);
+  }
   .prose h1, .prose h2, .prose h3 {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
+    margin-top: 1em !important;
+    margin-bottom: 1em !important;
     padding: 0 !important;
   }
+  .prose :is(h1, h2, h3):first-child {
+    margin-top: 0 !important;
+  }
+  .prose h1 {
+    line-height: calc(56 / 48) !important;
+  }
+  .prose h2 {
+    line-height: calc(36 / 30) !important;
+  }
+  .prose h3 {
+    line-height: calc(28 / 24) !important;
+  }
   .prose ul, .prose ol {
     margin-top: 0 !important;
     margin-bottom: 0.5rem !important;
@@ -5586,6 +5633,16 @@
     margin-bottom: 0;
   }
 }
+@layer components {
+  .ld-editor-render .ProseMirror, .ProseMirror.ld-editor-render {
+    white-space: pre-wrap;
+    white-space: break-spaces;
+  }
+  .ld-editor-render .ProseMirror:not([contenteditable='true']), .ProseMirror.ld-editor-render:not([contenteditable='true']) {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+}
 .ProseMirror img {
   max-width: 100%;
   height: auto !important;
@@ -5676,6 +5733,16 @@
 }
 .ProseMirror [data-resize-wrapper] {
   width: fit-content;
+  max-width: 100%;
+}
+.ProseMirror [data-resize-container] {
+  justify-content: center;
+}
+.ProseMirror [data-resize-container]:has(img[style*='text-align: left']) {
+  justify-content: flex-start;
+}
+.ProseMirror [data-resize-container]:has(img[style*='text-align: right']) {
+  justify-content: flex-end;
 }
 .ProseMirror .tableWrapper {
   overflow-x: auto;

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { default as LDFormDateRangePicker } from './components/LDDateRangePicker
 export { type LDDaumPostAddress, default as LDDaumPostButton, type LDDaumPostButtonProps, } from './components/LDDaumPostButton/LDDaumPostButton.js';
 export { default as LDDivider, type LDDividerProps, } from './components/LDDivider/LDDivider.js';
 export { type DrawerButton, default as LDDrawer, type LDDrawerBodyProps, type LDDrawerCloseProps, type LDDrawerContentProps, type LDDrawerDescriptionProps, type LDDrawerFooterProps, type LDDrawerHandleProps, type LDDrawerHeaderProps, type LDDrawerOverlayProps, type LDDrawerPanelProps, type LDDrawerProps, type LDDrawerRootProps, type LDDrawerTitleProps, type LDDrawerTriggerProps, } from './components/LDDrawer/LDDrawer.js';
-export { default as LDEditor } from './components/LDEditor/LDEditor.js';
+export { default as LDEditor, type LDEditorFontSize, } from './components/LDEditor/LDEditor.js';
 export { default as LDViewer } from './components/LDEditor/LDViewer.js';
 export { type EmptySize, default as LDEmpty, type LDEmptyProps, } from './components/LDEmpty/LDEmpty.js';
 export { type FileUploadAttachment as LDFileUploadAttachment, type FileUploadOptions as LDFileUploadOptions, } from './components/LDFileUpload/FileUploadBase.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -43,7 +43,7 @@ export { default as LDDivider, } from './components/LDDivider/LDDivider.js';
 // LDDrawer
 export { default as LDDrawer, } from './components/LDDrawer/LDDrawer.js';
 // LDEditor
-export { default as LDEditor } from './components/LDEditor/LDEditor.js';
+export { default as LDEditor, } from './components/LDEditor/LDEditor.js';
 export { default as LDViewer } from './components/LDEditor/LDViewer.js';
 // LDEmpty
 export { default as LDEmpty, } from './components/LDEmpty/LDEmpty.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -241,7 +241,6 @@
     "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-storybook": "10.5.7",
     "globals": "^16.3.0",
-    "lint-staged": "^17.3.0",
     "next": "15.5.18",
     "playwright": "latest",
     "prettier": "^3.9.6",
@@ -282,7 +281,7 @@
     "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
     "lint": "eslint --fix src .storybook --max-warnings 0",
     "lint:ci": "eslint src .storybook --max-warnings 0",
-    "prettier": "prettier --write src .storybook --log-level warn",
+    "prettier": "prettier --write . --log-level warn",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "pnpm run test:coverage:utils && pnpm run test:coverage:components",

package/src/styles/components/editor.css

@@ -11,14 +11,70 @@
     line-height: calc(28 / 18) !important;
   }
 
+  /* 정적 렌더 옵트인(.ld-editor-render, 렌더 루트나 그 조상에 붙인다). 클래스가 없으면 기존 렌더 그대로다.
+     getHTML()은 빈 문단을 <p></p>로 내보낸다. 편집 화면은 <p><br class="ProseMirror-trailingBreak"></p>라
+     한 줄 높이인데, 내용 없는 <p>는 높이 0이라 margin이 겹쳐 사라진다. 제로폭 문자로 한 줄 높이를 만든다.
+     :empty는 자식 노드가 없을 때만 맞으므로 <br>이 있는 편집 화면에는 영향이 없다. */
+  .ld-editor-render .ProseMirror p:empty::before,
+  .ProseMirror.ld-editor-render p:empty::before {
+    content: '\200B';
+  }
+
+  /* 링크 색(.ld-editor-render 옵트인, 편집 영역에도 붙는다): 링크 글자색은 주변 글자 색(색 mark 포함)을 따르고
+     밑줄도 그 글자색으로 그린다. 예전에 저장된 글의 링크에 박힌 파란색 클래스(text-blue-500)도 덮으려고 !important.
+     글자 색 mark가 링크 요소 바깥에 있어야 밑줄이 그 색을 따른다(extensions.ts의 TextStyle priority). */
+  .ld-editor-render .ProseMirror a,
+  .ProseMirror.ld-editor-render a {
+    color: inherit !important;
+    text-decoration-color: currentcolor !important;
+  }
+
+  /* 밑줄(링크·밑줄 서식)이 글자에 붙어 보이지 않게 2px 띄운다. 편집 영역·LDViewer·정적 렌더가 같은 값을 받는다. */
+  .ld-editor-render .ProseMirror :is(a, u),
+  .ProseMirror.ld-editor-render :is(a, u) {
+    text-underline-offset: 2px;
+  }
+
+  /* 글 기본 색(.ld-editor-render 옵트인, 편집 영역에도 붙는다): 툴바 글자 색 목록의 '검정'(neutral900)이다.
+     색 mark가 없는 글이 이 색으로 보이므로, 목록에서 '검정'을 고르면 mark를 걷어 낸다. */
+  .ld-editor-render.prose,
+  .ld-editor-render .prose {
+    --tw-prose-body: var(--color-neutral900);
+    /* 자간: LDS 타이포(display10~30) 토큰과 같은 -1px. 편집 영역·LDViewer·정적 렌더가 같은 값을 받아
+       줄바꿈 위치가 같다. 글자 크기와 상관없이 고정 px(시안 letterSpacing -1). */
+    letter-spacing: var(--tracking-display16);
+  }
+
+  /* 제목 위아래 여백은 제목 자기 글자 크기만큼(1em) 둔다. 제목이 클수록 앞뒤 본문과 더 벌어진다.
+     앞 문단의 아래 여백(0.8em)과는 겹쳐(margin collapse) 둘 중 큰 값만 남는다. */
   .prose h1,
   .prose h2,
   .prose h3 {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
+    margin-top: 1em !important;
+    margin-bottom: 1em !important;
     padding: 0 !important;
   }
 
+  /* 글 첫머리 제목은 위 여백 없이 시작한다(아래 .ProseMirror :first-child는 !important가 아니라 위 규칙에 진다). */
+  .prose :is(h1, h2, h3):first-child {
+    margin-top: 0 !important;
+  }
+
+  /* 제목 줄 높이는 같은 글자 크기의 display 토큰(typography.css)을 따른다. 제목 크기는 본문 기준 em이라
+     (본문 18px일 때 48·30·24px) px 대신 토큰의 비율로 둬 defaultFontSize가 바뀌어도 같은 비율이다.
+     제목 1(48px)은 같은 크기 토큰이 없어 display40·display64처럼 글자 크기 + 8px로 둔다. */
+  .prose h1 {
+    line-height: calc(56 / 48) !important;
+  }
+
+  .prose h2 {
+    line-height: calc(36 / 30) !important; /* display30 */
+  }
+
+  .prose h3 {
+    line-height: calc(28 / 24) !important; /* display24 */
+  }
+
   .prose ul,
   .prose ol {
     margin-top: 0 !important;
@@ -52,6 +108,27 @@
   }
 }
 
+/* 정적 렌더 옵트인(.ld-editor-render): 편집 화면과 같이 연속 공백·줄 구분 문자(U+2028 등)를 보존한다.
+   tiptap은 편집 가능한 에디터에만 같은 규칙을 주입한다. 클래스가 없는 정적 렌더는 기존 그대로다.
+   앞 줄은 break-spaces 미지원 브라우저용 폴백. */
+@layer components {
+  .ld-editor-render .ProseMirror,
+  .ProseMirror.ld-editor-render {
+    white-space: pre-wrap;
+    white-space: break-spaces;
+  }
+
+  /* 편집 영역은 고정 높이 + 내부 스크롤이라 스크롤바(classic 환경 15px)가 내용 폭을 줄인다.
+     편집 요소는 scrollbar-gutter: stable로 자리를 항상 확보하므로(LDEditor), 정적 렌더·LDViewer도
+     같은 거터를 확보해 줄바꿈이 같게 한다. 높이는 auto라 실제 스크롤은 생기지 않는다.
+     편집 요소(contenteditable="true")에도 ld-editor-render가 붙어 있어 제외한다. */
+  .ld-editor-render .ProseMirror:not([contenteditable='true']),
+  .ProseMirror.ld-editor-render:not([contenteditable='true']) {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+}
+
 /* 이미지 정렬 스타일 */
 /* height만 !important로 잠근다. 리사이즈 노드뷰가 width/height를 함께 인라인 px로
    쓰는데, 높이가 고정되면 컨테이너가 좁아질 때 max-width로 폭만 줄어 이미지가
@@ -180,6 +257,21 @@
    (래퍼는 부모가 block이면 기본값이 100%라 가만두면 벌어진다.) */
 .ProseMirror [data-resize-wrapper] {
   width: fit-content;
+  max-width: 100%;
+}
+
+/* 편집 화면의 리사이즈 노드뷰는 flex 컨테이너라 이미지가 왼쪽에 붙는다. 정적 렌더(위 img 규칙)와
+   같게 기본은 가운데, text-align이 지정된 이미지는 그쪽으로 둔다. */
+.ProseMirror [data-resize-container] {
+  justify-content: center;
+}
+
+.ProseMirror [data-resize-container]:has(img[style*='text-align: left']) {
+  justify-content: flex-start;
+}
+
+.ProseMirror [data-resize-container]:has(img[style*='text-align: right']) {
+  justify-content: flex-end;
 }
 
 /* 표