@loword/loword-design-system 0.4.2 → 0.5.0

package/dist/components/LDDatePicker/LDDatePicker.js

@@ -16,7 +16,7 @@ const variantColorClasses = {
     filled: {
         neutral: 'bg-neutral50 text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:bg-tintBlue focus-within:outline-lb500',
         point: 'bg-tintBlue text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:outline-lb500',
-        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:outline-danger600',
+        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-danger600 outline-solid -outline-offset-2',
     },
     outline: {
         neutral: 'bg-transparent text-neutral900 border-none outline-2 outline-neutral100 outline-solid -outline-offset-2 focus-within:outline-lb500',

package/dist/components/LDDateRangePicker/LDDateRangePicker.js

@@ -23,7 +23,7 @@ const variantColorClasses = {
     filled: {
         neutral: 'bg-neutral50 text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:bg-tintBlue focus-within:outline-lb500',
         point: 'bg-tintBlue text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:outline-lb500',
-        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-transparent outline-solid -outline-offset-2 focus-within:outline-danger600',
+        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-danger600 outline-solid -outline-offset-2',
     },
     outline: {
         neutral: 'bg-transparent text-neutral900 border-none outline-2 outline-neutral100 outline-solid -outline-offset-2 focus-within:outline-lb500',

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":"AA4EA,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,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;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,sDAKf,aAAa,4CAYf,CAAC;AAyjBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AA8IA,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,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;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,sDAKf,aAAa,4CAYf,CAAC;AAwmBF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDEditor.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { 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 { 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, useState } from 'react';
 import EditorBase, { useEditorContext } from '../../components/LDEditor/EditorBase.js';
 import { createEditorExtensions } from '../../components/LDEditor/extensions.js';
@@ -35,6 +35,40 @@ const HEADINGS = [
     { label: '제목 2', level: 2 },
     { label: '제목 3', level: 3 },
 ];
+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-1 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" });
@@ -77,6 +111,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,
             };
         },
@@ -175,7 +210,18 @@ const EditorToolbar = ({ handleImageUpload, }) => {
                                                             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) => {
+                                } }), _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, {}), _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();
+                            } })) }), _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) => {

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/index.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -2018,6 +2019,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -2361,6 +2365,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
   .border-blue500 {
     border-color: var(--color-blue500);
   }
@@ -2439,6 +2446,9 @@
       background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
     }
   }
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -5611,6 +5621,51 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+.ProseMirror table {
+  width: 100%;
+  margin: 0;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.ProseMirror table td, .ProseMirror table th {
+  position: relative;
+  min-width: 1em;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-neutral200);
+  vertical-align: top;
+}
+.ProseMirror table th {
+  background: var(--color-mono100);
+  font-weight: 600;
+  text-align: left;
+}
+.ProseMirror table p {
+  margin: 0;
+}
+.ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(59, 130, 246, 0.15);
+  pointer-events: none;
+  z-index: 2;
+}
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background: #3b82f6;
+  pointer-events: none;
+}
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
 @layer components {
   .select-2xs {
     height: var(--control-height-2xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -63,6 +63,7 @@
     "@tiptap/extension-highlight": "^3.26.0",
     "@tiptap/extension-image": "^3.26.0",
     "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
     "@tiptap/extension-text-align": "^3.26.0",
     "@tiptap/extension-text-style": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",
@@ -131,6 +132,9 @@
     "@tiptap/extension-link": {
       "optional": true
     },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
     "@tiptap/extension-text-align": {
       "optional": true
     },
@@ -209,6 +213,7 @@
     "@tiptap/extension-highlight": "^3.26.0",
     "@tiptap/extension-image": "^3.26.0",
     "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
     "@tiptap/extension-text-align": "^3.26.0",
     "@tiptap/extension-text-style": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",

package/src/styles/components/editor.css

@@ -165,3 +165,65 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
+
+/* 표
+   prose 기본 표는 가로줄만 그어 에디터에서 셀 경계가 보이지 않는다. 격자 테두리로 덮는다.
+   @layer 밖(=무레이어)이라 utilities 레이어의 prose보다 우선한다. */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.ProseMirror table {
+  width: 100%;
+  margin: 0;
+  /* 열 너비 리사이즈(colgroup width)가 반영되려면 fixed여야 한다. */
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.ProseMirror table td,
+.ProseMirror table th {
+  /* 열 리사이즈 핸들의 위치 기준 */
+  position: relative;
+  min-width: 1em;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-neutral200);
+  vertical-align: top;
+}
+
+.ProseMirror table th {
+  background: var(--color-mono100);
+  font-weight: 600;
+  text-align: left;
+}
+
+/* 셀 안 문단은 prose의 블록 여백을 쓰지 않는다 — 셀 높이가 과하게 늘어난다. */
+.ProseMirror table p {
+  margin: 0;
+}
+
+/* 드래그로 여러 셀을 선택했을 때 */
+.ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(59, 130, 246, 0.15);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 열 너비 리사이즈 핸들 (셀 오른쪽 경계) */
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background: #3b82f6;
+  pointer-events: none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}