@loword/loword-design-system 0.4.2 → 0.5.1

package/dist/components/LDEditor/LDEditor.js

@@ -1,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEditorState } from '@tiptap/react';
+import { Fragment, Slice, } from '@tiptap/pm/model';
+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, Underline, Undo, Unlink, } from 'lucide-react';
-import { useEffect, useState } from 'react';
+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 LDToast from '../../components/LDToast/LDToast.js';
@@ -35,11 +38,296 @@ const HEADINGS = [
     { label: '제목 2', level: 2 },
     { label: '제목 3', level: 3 },
 ];
-const iconBtn = 'p-1 rounded-lg cursor-pointer transition hover:bg-mono100 disabled:opacity-30 disabled:cursor-not-allowed';
+const TABLE_GRID_MAX = 5;
+const TABLE_ACTIONS = [
+    { label: '위에 행 추가', run: (e) => e.chain().focus().addRowBefore().run() },
+    { label: '아래 행 추가', run: (e) => e.chain().focus().addRowAfter().run() },
+    {
+        label: '왼쪽 열 추가',
+        run: (e) => e.chain().focus().addColumnBefore().run(),
+    },
+    {
+        label: '오른쪽 열 추가',
+        run: (e) => e.chain().focus().addColumnAfter().run(),
+    },
+    { label: '행 삭제', run: (e) => e.chain().focus().deleteRow().run() },
+    { label: '열 삭제', run: (e) => e.chain().focus().deleteColumn().run() },
+    {
+        label: '헤더 행 토글',
+        run: (e) => e.chain().focus().toggleHeaderRow().run(),
+    },
+    { label: '표 삭제', run: (e) => e.chain().focus().deleteTable().run() },
+];
+// 삽입할 표 크기를 호버(키보드는 포커스)로 고르는 5x5 그리드.
+// Dropdown의 children은 렌더 콜백이라 훅을 쓸 수 없어 별도 컴포넌트로 뺀다.
+const TableGridPicker = ({ onSelect, }) => {
+    const [size, setSize] = useState({ rows: 0, cols: 0 });
+    return (_jsxs("div", { className: "p-2", children: [_jsx("div", { className: "grid grid-cols-5 gap-1", children: Array.from({ length: TABLE_GRID_MAX * TABLE_GRID_MAX }, (_, index) => {
+                    const rows = Math.floor(index / TABLE_GRID_MAX) + 1;
+                    const cols = (index % TABLE_GRID_MAX) + 1;
+                    const filled = rows <= size.rows && cols <= size.cols;
+                    return (_jsx("button", { type: "button", "aria-label": `${rows}행 ${cols}열 표 삽입`, onMouseEnter: () => setSize({ rows, cols }), onFocus: () => setSize({ rows, cols }), onClick: (event) => {
+                            event.preventDefault();
+                            onSelect(rows, cols);
+                        }, className: cn('size-5 cursor-pointer rounded-xs border border-neutral200', filled && 'border-blue-500 bg-blue-100') }, index));
+                }) }), _jsx("p", { className: "mt-2 text-center text-sm", children: size.rows ? `${size.rows} x ${size.cols}` : '크기 선택' })] }));
+};
+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" });
-const LDEditor = ({ content, onChange, className, handleImageUpload, }) => {
-    return (_jsxs(EditorBase.Root, { extensions: createEditorExtensions(), content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload }), _jsx(EditorBase.Content, {})] }));
+// 구분선으로 나뉜 버튼 묶음. 툴바가 flex-wrap이라 묶음 자체가 하나의 flex 아이템이
+// 되어, 폭이 모자라면 묶음 단위로 함께 다음 줄로 내려간다. 구분선은 묶음의 끝에
+// 두어 줄이 바뀌어도 새 줄이 구분선으로 시작하지 않게 한다.
+const ToolbarGroup = ({ children }) => (_jsx("div", { className: "flex items-center gap-2", children: children }));
+// 검증을 통과하면 업로드한 URL을 반환하고, 실패하면 토스트에 띄울 사유를 담아 throw한다.
+const uploadImageFile = async (file, handleImageUpload) => {
+    if (!validAllowedExtensions(file, TOOLBAR_ALLOWED_EXTENSIONS)) {
+        const allowedFiles = TOOLBAR_ALLOWED_EXTENSIONS.map((item) => FILE_EXTENSIONS[item].toUpperCase()).join(', ');
+        throw new Error(`지원하지 않는 파일 형식입니다. ${allowedFiles} 파일만 업로드 가능합니다.`);
+    }
+    if (!validFileSize(file, TOOLBAR_MAX_SIZE)) {
+        throw new Error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(TOOLBAR_MAX_SIZE)} 이하 파일을 선택해주세요.`);
+    }
+    if (isImage(file.name) && !(await validImageSize(file))) {
+        throw new Error('이미지 해상도가 너무 큽니다. 더 작은 이미지를 선택해주세요.');
+    }
+    let src;
+    try {
+        const { fileBase64, fileName } = await fileToBase64(file);
+        src = await handleImageUpload?.({ filebase64: fileBase64, fileName });
+    }
+    catch {
+        throw new Error('파일 업로드 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
+    }
+    if (!src)
+        throw new Error('이미지 업로드에 실패했습니다.');
+    return src;
+};
+// 이미지를 넣을 본문 폭(px). CSS로 100%를 맞추려면 "크기를 정하지 않은 이미지"를
+// 선택자로 가려내야 하는데, 그 조건이 빗나가면 래퍼와 이미지 폭이 어긋나 리사이즈
+// 핸들이 이미지에서 떨어진다. 값으로 넣으면 구조와 무관하게 결과가 같다.
+// 폭을 못 재면(숨겨진 컨테이너 등) 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 isDataUrl = (src) => typeof src === 'string' && src.startsWith('data:');
+// 상대 경로는 현재 페이지 기준으로 푼다. 주소로 읽을 수 없으면 허용하지 않는다.
+const isAllowedHost = (src, hosts) => {
+    try {
+        return hosts.includes(new URL(src, window.location.href).hostname);
+    }
+    catch {
+        return false;
+    }
+};
+// 다른 호스트의 이미지를 받아 File로 만든다. 화면에 보여주는 것과 달리 내용을 읽는 건
+// CORS를 허용하는 서버만 되므로, 대부분의 외부 사이트에서는 여기서 실패한다.
+const urlToFile = async (url) => {
+    const response = await fetch(url).catch(() => null);
+    if (!response?.ok) {
+        throw new Error('다른 사이트의 이미지를 가져오지 못해 제외했습니다. 이미지를 저장한 뒤 직접 올려주세요.');
+    }
+    const blob = await response.blob();
+    return new File([blob], `image.${blob.type.slice('image/'.length)}`, {
+        type: blob.type,
+    });
+};
+// 툴바와 같은 검증을 태우려고 data URL을 File로 되돌린다.
+const dataUrlToFile = async (dataUrl) => {
+    const [meta = '', base64 = ''] = dataUrl.split(',');
+    const type = /^data:(image\/[\w.+-]+);base64$/.exec(meta)?.[1];
+    if (!type)
+        throw new Error('이미지를 읽을 수 없습니다.');
+    return new File([Uint8Array.from(atob(base64), (char) => char.charCodeAt(0))], `image.${type.slice('image/'.length)}`, { type });
+};
+// 여러 장을 한 번에 올린다. 실패한 자리는 null이고, 사유는 첫 번째 것만 토스트로 알린다.
+const uploadAll = async (uploads) => {
+    const results = await Promise.allSettled(uploads);
+    const failed = results.find((result) => result.status === 'rejected');
+    if (failed)
+        LDToast.error(failed.reason.message);
+    return results.map((result) => result.status === 'fulfilled' ? result.value : null);
+};
+// urls에 있는 이미지의 src를 업로드 URL로 바꾸고, 값이 null(업로드 실패)인 이미지는 뺀다.
+const replaceImages = (fragment, urls) => {
+    const nodes = [];
+    fragment.forEach((node) => {
+        const src = node.attrs.src;
+        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 }));
+            return;
+        }
+        nodes.push(node.childCount ? node.copy(replaceImages(node.content, urls)) : node);
+    });
+    return Fragment.from(nodes);
+};
+// 업로드 스켈레톤은 문서가 아닌 decoration이라 getHTML·onChange·실행취소 기록에 남지 않는다.
+// meta에 pos가 있으면 추가, 없으면 id로 제거한다.
+const placeholderKey = new PluginKey('imagePastePlaceholder');
+const createSkeleton = () => {
+    const skeleton = document.createElement('span');
+    skeleton.setAttribute('role', 'status');
+    skeleton.setAttribute('aria-busy', 'true');
+    skeleton.setAttribute('aria-label', '이미지 업로드 중');
+    skeleton.className =
+        'block h-40 w-60 max-w-full animate-pulse rounded-md bg-mono200';
+    return skeleton;
+};
+const findPlaceholder = (state, id) => placeholderKey
+    .getState(state)
+    ?.find(undefined, undefined, (spec) => spec.id === id)[0]
+    ?.from;
+// 업로드하는 동안 붙여넣은 자리에 스켈레톤을 띄우고, 끝나면 그 자리에 slice를 넣는다.
+// 스켈레톤은 이미지 블록이 들어갈 자리라 블록 사이에 두고, 커서는 그 아래 블록으로 보내
+// 업로드 중에도 아래에 이어 쓸 수 있게 한다. 편집으로 자리가 옮겨져도 따라가며,
+// 스켈레톤 자리가 지워지면(아래 줄 맨 앞에서 Backspace 등) 결과를 버린다.
+const pasteAfterUpload = (view, upload) => {
+    const id = {};
+    const tr = view.state.tr.deleteSelection();
+    const { $from } = tr.selection;
+    // 줄 중간·끝이면 Enter처럼 블록을 나눈다. 끝에서 나눌 땐 제목이 이어지지 않게 기본 블록(문단)으로 만든다.
+    if ($from.parent.isTextblock && $from.parentOffset > 0) {
+        const atEnd = $from.parentOffset === $from.parent.content.size;
+        const type = atEnd
+            ? defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)))
+            : null;
+        tr.split($from.pos, 1, type ? [{ type }] : undefined);
+    }
+    const $cursor = tr.selection.$from;
+    const pos = $cursor.depth ? $cursor.before() : $cursor.pos;
+    view.dispatch(tr.setMeta(placeholderKey, { id, pos }).scrollIntoView());
+    void upload.then((slice) => {
+        if (view.isDestroyed)
+            return;
+        const pos = findPlaceholder(view.state, id);
+        if (pos === undefined)
+            return;
+        const tr = view.state.tr.setMeta(placeholderKey, { id });
+        if (slice.content.size) {
+            tr.replaceRange(pos, pos, slice)
+                .scrollIntoView()
+                .setMeta('paste', true)
+                .setMeta('uiEvent', 'paste');
+        }
+        view.dispatch(tr);
+    });
+};
+/**
+ * 붙여넣은 이미지 바이너리를 handleImageUpload가 반환한 URL로 바꿔 넣는다.
+ * - HTML 속 `data:` 이미지: 업로드 URL로 src를 교체한다.
+ * - allowedImageHosts를 지정했다면 HTML 속 그 밖의 호스트 이미지: 받아서 업로드하고 src를
+ *   교체한다. 받지 못하거나 업로드에 실패하면 뺀다.
+ * - HTML 없이 이미지 파일만 온 경우(스크린샷 등): 업로드 URL로 이미지를 넣는다.
+ * 업로드가 끝난 뒤 삽입해 base64가 onChange로 나가지 않게 하고, 그동안은 스켈레톤을 띄운다.
+ */
+const ImagePaste = Extension.create({
+    name: 'imagePaste',
+    addOptions() {
+        return { getConfig: () => ({}) };
+    },
+    addProseMirrorPlugins() {
+        const { getConfig } = this.options;
+        return [
+            new Plugin({
+                key: placeholderKey,
+                state: {
+                    init: () => DecorationSet.empty,
+                    apply: (tr, set) => {
+                        const mapped = set.map(tr.mapping, tr.doc);
+                        const action = tr.getMeta(placeholderKey);
+                        if (!action)
+                            return mapped;
+                        if (action.pos !== undefined) {
+                            return mapped.add(tr.doc, [
+                                Decoration.widget(action.pos, createSkeleton, {
+                                    id: action.id,
+                                }),
+                            ]);
+                        }
+                        return mapped.remove(mapped.find(undefined, undefined, (spec) => spec.id === action.id));
+                    },
+                },
+                props: {
+                    decorations: (state) => placeholderKey.getState(state),
+                    handlePaste: (view, event, slice) => {
+                        const { handleImageUpload, allowedImageHosts } = getConfig();
+                        if (!handleImageUpload)
+                            return false;
+                        const html = event.clipboardData?.getData('text/html') ?? '';
+                        const files = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith('image/'));
+                        // data: 이미지는 항상, 허용 호스트를 지정했다면 그 밖의 호스트 이미지도 업로드 대상이다.
+                        // 에디터에서 복사한 이미지는 이미 허용 호스트에 있으므로 다시 올리지 않는다.
+                        const sources = new Set();
+                        slice.content.descendants((node) => {
+                            const src = node.attrs.src;
+                            if (node.type.name !== 'image' || typeof src !== 'string')
+                                return;
+                            if (isDataUrl(src) ||
+                                (allowedImageHosts && !isAllowedHost(src, allowedImageHosts))) {
+                                sources.add(src);
+                            }
+                        });
+                        if (sources.size) {
+                            const list = [...sources];
+                            // 웹에서 "이미지 복사"하면 img 하나뿐인 HTML과 그 이미지 파일이 함께 온다.
+                            // CORS와 무관하게 읽을 수 있는 파일 쪽을 쓴다.
+                            const copiedImage = slice.content.childCount === 1 &&
+                                slice.content.firstChild?.type.name === 'image' &&
+                                files.length === 1
+                                ? files[0]
+                                : undefined;
+                            pasteAfterUpload(view, uploadAll(list.map((src) => isDataUrl(src)
+                                ? dataUrlToFile(src).then((file) => uploadImageFile(file, handleImageUpload))
+                                : (copiedImage
+                                    ? Promise.resolve(copiedImage)
+                                    : urlToFile(src)).then((file) => uploadImageFile(file, handleImageUpload)))).then((srcs) => {
+                                const urls = new Map(list.map((src, index) => [src, srcs[index] ?? null]));
+                                return new Slice(replaceImages(slice.content, urls), slice.openStart, slice.openEnd);
+                            }));
+                            return true;
+                        }
+                        // Office는 HTML과 함께 선택 영역을 찍은 PNG를 files에 넣는다. HTML이 있으면 파일은 무시한다.
+                        if (html || !files.length)
+                            return false;
+                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, handleImageUpload))).then((srcs) => {
+                            const nodes = files.flatMap((file, index) => {
+                                const src = srcs[index];
+                                return src
+                                    ? [
+                                        view.state.schema.node('image', {
+                                            src,
+                                            alt: file.name,
+                                            width: getContentWidth(view.dom),
+                                        }),
+                                    ]
+                                    : [];
+                            });
+                            return new Slice(Fragment.from(nodes), 0, 0);
+                        }));
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});
+const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, }) => {
+    // 에디터는 첫 렌더의 extensions로 한 번만 만들어진다. 붙여넣기는 최신 props를 ref로 읽는다.
+    const pasteConfigRef = useRef({ handleImageUpload, allowedImageHosts });
+    useEffect(() => {
+        pasteConfigRef.current = { handleImageUpload, allowedImageHosts };
+    });
+    return (_jsxs(EditorBase.Root, { extensions: [
+            ...createEditorExtensions(),
+            ImagePaste.configure({ getConfig: () => pasteConfigRef.current }),
+        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload }), _jsx(EditorBase.Content, {})] }));
 };
 const EditorToolbar = ({ handleImageUpload, }) => {
     const [linkUrl, setLinkUrl] = useState('');
@@ -77,6 +365,7 @@ const EditorToolbar = ({ handleImageUpload, }) => {
                 canUndo: editor.can().undo(),
                 canRedo: editor.can().redo(),
                 isLink: editor.isActive('link'),
+                isTable: editor.isActive('table'),
                 hasSelection: !editor.state.selection.empty,
             };
         },
@@ -85,100 +374,97 @@ const EditorToolbar = ({ handleImageUpload, }) => {
         if (!files?.[0] || !editor)
             return;
         const file = files[0];
-        if (!validAllowedExtensions(file, TOOLBAR_ALLOWED_EXTENSIONS)) {
-            const allowedFiles = TOOLBAR_ALLOWED_EXTENSIONS.map((item) => FILE_EXTENSIONS[item].toUpperCase()).join(', ');
-            LDToast.error(`지원하지 않는 파일 형식입니다. ${allowedFiles} 파일만 업로드 가능합니다.`);
-            return;
-        }
-        if (!validFileSize(file, TOOLBAR_MAX_SIZE)) {
-            LDToast.error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(TOOLBAR_MAX_SIZE)} 이하 파일을 선택해주세요.`);
-            return;
-        }
-        if (isImage(file.name) && !(await validImageSize(file))) {
-            LDToast.error('이미지 해상도가 너무 큽니다. 더 작은 이미지를 선택해주세요.');
-            return;
-        }
         try {
-            const { fileBase64, fileName } = await fileToBase64(file);
-            const res = await handleImageUpload?.({
-                filebase64: fileBase64,
-                fileName,
+            const src = await uploadImageFile(file, handleImageUpload);
+            editor.commands.setImage({
+                src,
+                alt: file.name,
+                width: getContentWidth(editor.view.dom),
             });
-            if (!res) {
-                LDToast.error('이미지 업로드에 실패했습니다.');
-                return;
-            }
-            editor.commands.setImage({ src: res, alt: fileName });
         }
-        catch {
-            LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
+        catch (error) {
+            LDToast.error(error.message);
         }
     };
     if (!editor || !state)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs(EditorBase.Toolbar, { className: "gap-5 rounded-t-md border border-neutral200 px-4 py-3", 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))) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(LDDivider, {}), _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, {}), _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("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) => {
+    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 }) => (
+                                // 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();
-                                        editor.chain().focus().setColor(color.value).run();
+                                        if (level === 0)
+                                            editor.chain().focus().setParagraph().run();
+                                        else
+                                            editor.chain().focus().toggleHeading({ level }).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(LDDivider, {}), ['left', 'center', 'right', 'justify'].map((align) => {
-                                const Icon = {
-                                    left: AlignLeft,
-                                    center: AlignCenter,
-                                    right: AlignRight,
-                                    justify: AlignJustify,
-                                }[align];
-                                const alignLabel = {
-                                    left: '왼쪽 정렬',
-                                    center: '가운데 정렬',
-                                    right: '오른쪽 정렬',
-                                    justify: '양쪽 정렬',
-                                }[align];
-                                return (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().setTextAlign(align).run(), className: cn(iconBtn, state.align[align] && activeBtn), "aria-label": alignLabel, children: _jsx(Icon, { className: "size-5" }) }, align));
-                            })] })), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), className: cn(iconBtn, state.isBulletList && activeBtn), "aria-label": "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", children: _jsx(List, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), className: cn(iconBtn, state.isOrderedList && activeBtn), "aria-label": "\uBC88\uD638 \uBAA9\uB85D", children: _jsx(ListOrdered, { className: "size-5" }) }), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), className: iconBtn, "aria-label": "\uB418\uB3CC\uB9AC\uAE30", children: _jsx(Undo, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), className: iconBtn, "aria-label": "\uB2E4\uC2DC \uC2E4\uD589", children: _jsx(Redo, { className: "size-5" }) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-70 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { disabled: !state.hasSelection, onClick: () => {
-                                        setLinkUrl(editor.getAttributes('link').href || '');
-                                        toggle();
-                                    }, className: cn(iconBtn, state.isLink && activeBtn), "aria-label": "\uB9C1\uD06C", children: _jsx(Link2, { className: "size-5" }) })), children: ({ close }) => {
-                                    const applyLink = () => {
-                                        const chain = editor.chain().focus().extendMarkRange('link');
-                                        if (linkUrl === '') {
-                                            chain.unsetLink().run();
-                                        }
-                                        else {
-                                            const url = /^https?:\/\//.test(linkUrl)
-                                                ? linkUrl
-                                                : `https://${linkUrl}`;
-                                            chain.setLink({ href: url }).run();
-                                        }
-                                        setLinkUrl('');
+                                    }, 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) => {
+                                                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("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) => {
+                                                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(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [['left', 'center', 'right', 'justify'].map((align) => {
+                                        const Icon = {
+                                            left: AlignLeft,
+                                            center: AlignCenter,
+                                            right: AlignRight,
+                                            justify: AlignJustify,
+                                        }[align];
+                                        const alignLabel = {
+                                            left: '왼쪽 정렬',
+                                            center: '가운데 정렬',
+                                            right: '오른쪽 정렬',
+                                            justify: '양쪽 정렬',
+                                        }[align];
+                                        return (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().setTextAlign(align).run(), className: cn(iconBtn, state.align[align] && activeBtn), "aria-label": alignLabel, children: _jsx(Icon, { className: "size-5" }) }, align));
+                                    }), _jsx(LDDivider, {})] })] })), _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), className: cn(iconBtn, state.isBulletList && activeBtn), "aria-label": "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", children: _jsx(List, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), className: cn(iconBtn, state.isOrderedList && activeBtn), "aria-label": "\uBC88\uD638 \uBAA9\uB85D", children: _jsx(ListOrdered, { className: "size-5" }) }), _jsx(LDDivider, {})] }), _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), className: iconBtn, "aria-label": "\uB418\uB3CC\uB9AC\uAE30", children: _jsx(Undo, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), className: iconBtn, "aria-label": "\uB2E4\uC2DC \uC2E4\uD589", children: _jsx(Redo, { className: "size-5" }) }), _jsx(LDDivider, {})] }), !isMobile && (_jsx(_Fragment, { children: _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-70 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { disabled: !state.hasSelection, onClick: () => {
+                                            setLinkUrl(editor.getAttributes('link').href || '');
+                                            toggle();
+                                        }, className: cn(iconBtn, state.isLink && activeBtn), "aria-label": "\uB9C1\uD06C", children: _jsx(Link2, { className: "size-5" }) })), children: ({ close }) => {
+                                        const applyLink = () => {
+                                            const chain = editor
+                                                .chain()
+                                                .focus()
+                                                .extendMarkRange('link');
+                                            if (linkUrl === '') {
+                                                chain.unsetLink().run();
+                                            }
+                                            else {
+                                                const url = /^https?:\/\//.test(linkUrl)
+                                                    ? linkUrl
+                                                    : `https://${linkUrl}`;
+                                                chain.setLink({ href: url }).run();
+                                            }
+                                            setLinkUrl('');
+                                            close();
+                                        };
+                                        return (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", autoFocus: true, placeholder: "URL\uC744 \uC785\uB825\uD558\uC138\uC694", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => e.key === 'Enter' && applyLink(), className: "w-full rounded-lg border border-neutral200 px-3 py-2 text-sm transition duration-300 outline-none focus:border-blue-500" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { type: "button", onClick: (e) => {
+                                                                e.preventDefault();
+                                                                applyLink();
+                                                            }, className: "flex-1 rounded-lg bg-blue-500 px-3 py-1.5 text-sm text-white transition duration-300 hover:bg-blue-600", children: "\uC801\uC6A9" }), _jsx("button", { type: "button", onClick: (e) => {
+                                                                e.preventDefault();
+                                                                setLinkUrl('');
+                                                                close();
+                                                            }, className: "rounded-lg border border-neutral200 px-3 py-1.5 text-sm transition duration-300 hover:bg-mono100", children: "\uCDE8\uC18C" })] })] }));
+                                    } }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.isLink, onClick: () => editor.chain().focus().unsetLink().run(), className: iconBtn, "aria-label": "\uB9C1\uD06C \uD574\uC81C", children: _jsx(Unlink, { className: "size-5" }) }), _jsx(LDDivider, {})] }) })), _jsxs(ToolbarGroup, { children: [_jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-40 rounded-lg border border-neutral200 bg-white shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { "aria-label": "\uD45C", onClick: toggle, className: cn(iconBtn, state.isTable && activeBtn), children: _jsx(TableIcon, { className: "size-5" }) })), children: ({ close }) => state.isTable ? (_jsx("div", { children: TABLE_ACTIONS.map(({ label, run }) => (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.preventDefault();
+                                            run(editor);
+                                            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 }, label))) })) : (_jsx(TableGridPicker, { onSelect: (rows, cols) => {
+                                        editor
+                                            .chain()
+                                            .focus()
+                                            .insertTable({ rows, cols, withHeaderRow: true })
+                                            .run();
                                         close();
-                                    };
-                                    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", autoFocus: true, placeholder: "URL\uC744 \uC785\uB825\uD558\uC138\uC694", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => e.key === 'Enter' && applyLink(), className: "w-full rounded-lg border border-neutral200 px-3 py-2 text-sm transition duration-300 outline-none focus:border-blue-500" }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { type: "button", onClick: (e) => {
-                                                            e.preventDefault();
-                                                            applyLink();
-                                                        }, className: "flex-1 rounded-lg bg-blue-500 px-3 py-1.5 text-sm text-white transition duration-300 hover:bg-blue-600", children: "\uC801\uC6A9" }), _jsx("button", { type: "button", onClick: (e) => {
-                                                            e.preventDefault();
-                                                            setLinkUrl('');
-                                                            close();
-                                                        }, className: "rounded-lg border border-neutral200 px-3 py-1.5 text-sm transition duration-300 hover:bg-mono100", children: "\uCDE8\uC18C" })] })] }));
-                                } }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.isLink, onClick: () => editor.chain().focus().unsetLink().run(), className: iconBtn, "aria-label": "\uB9C1\uD06C \uD574\uC81C", children: _jsx(Unlink, { className: "size-5" }) })] })), _jsx(LDDivider, {}), _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) => {
+                                    } })) }), _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();

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,4CAQtD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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"}

package/dist/components/LDEditor/LDViewer.js

@@ -4,6 +4,9 @@ import EditorBase from '../../components/LDEditor/EditorBase.js';
 import { createEditorExtensions } from '../../components/LDEditor/extensions.js';
 import cn from '../../utils/cn.js';
 const LDViewer = ({ content, className }) => {
-    return (_jsx(EditorBase.LDViewer, { extensions: createEditorExtensions({ resizableImage: false }), content: content, className: cn('prose prose-lg w-full max-w-none', className) }));
+    return (_jsx(EditorBase.LDViewer, { extensions: createEditorExtensions({
+            resizableImage: false,
+            resizableTable: false,
+        }), content: content, className: cn('prose prose-lg w-full max-w-none', className) }));
 };
 export default LDViewer;

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

@@ -1,6 +1,7 @@
 import type { Extensions } from '@tiptap/react';
 export interface EditorExtensionOptions {
     resizableImage?: boolean;
+    resizableTable?: boolean;
 }
-export declare const createEditorExtensions: ({ resizableImage, }?: EditorExtensionOptions) => Extensions;
+export declare const createEditorExtensions: ({ resizableImage, resizableTable, }?: EditorExtensionOptions) => Extensions;
 //# sourceMappingURL=extensions.d.ts.map

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":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,GAAI,sBAEpC,sBAA2B,KAAG,UA+BhC,CAAC"}
+{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/extensions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,GAAI,sCAGpC,sBAA2B,KAAG,UAwChC,CAAC"}

package/dist/components/LDEditor/extensions.js

@@ -1,8 +1,9 @@
 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';
-export const createEditorExtensions = ({ resizableImage = true, } = {}) => [
+export const createEditorExtensions = ({ resizableImage = true, resizableTable = true, } = {}) => [
     // link·underline은 StarterKit에 포함돼 있다. 따로 등록하면 중복 경고가 난다.
     StarterKit.configure({
         heading: {
@@ -33,4 +34,13 @@ export const createEditorExtensions = ({ resizableImage = true, } = {}) => [
             }
             : false,
     }),
+    TableKit.configure({
+        table: {
+            resizable: resizableTable,
+            // 리사이즈로 표가 컨테이너보다 넓어질 수 있다. 래퍼가 있어야 가로 스크롤을
+            // 표에만 줄 수 있다. 편집 모드에서는 TableView가 항상 래퍼를 만들지만
+            // 읽기 전용(LDViewer)에서는 이 옵션이 있어야 생긴다.
+            renderWrapper: true,
+        },
+    }),
 ];

package/dist/components/LDModal/LDModal.d.ts

@@ -24,6 +24,8 @@ export interface LDModalOptions<T = undefined> {
     scrollBehavior?: 'inside' | 'outside';
     /** 오버레이(모달 바깥) 클릭으로 닫기 허용 여부 */
     closeOnOverlayClick?: boolean;
+    /** ESC 키로 닫기 허용 여부 */
+    closeOnEsc?: boolean;
     /** 모달 패널에 적용할 추가 CSS 클래스 */
     className?: string;
     /** 모달 패널 인라인 스타일 (자유 width/height 등) */

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

@@ -1 +1 @@
-{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAG7E,OAAoB,EAElB,KAAK,SAAS,EACd,gBAAgB,EACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,SAAS;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9E,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;QACzD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;QACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;KAC1D,EAAE,CAAC;IACJ,eAAe;IACf,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,gCAAgC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,GAAG,SAAS,EAC5B,SAAS,cAAc,CAAC,CAAC,CAAC,KACzB,OAAO,CAAC,CAAC,GAAG,SAAS,CA4EvB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAG7E,OAAoB,EAElB,KAAK,SAAS,EACd,gBAAgB,EACjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,SAAS;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9E,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;QACzD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;QACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;KAC1D,EAAE,CAAC;IACJ,eAAe;IACf,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,gCAAgC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,GAAG,SAAS,EAC5B,SAAS,cAAc,CAAC,CAAC,CAAC,KACzB,OAAO,CAAC,CAAC,GAAG,SAAS,CA6EvB,CAAC;AAEF,eAAe,OAAO,CAAC"}