sellmate-design-system-react 9.0.0-beta.22 → 9.0.0-beta.24

package/dist/index.cjs

@@ -3743,7 +3743,11 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
     const normalizedDepth = Math.max(1, Math.floor(depth));
     const depthOffset = (normalizedDepth - 1) * 20;
-    const depthStyle = depthOffset === 0 ? style : {
+    const depthStyle = depthOffset === 0 ? style : bordered ? {
+      ...style,
+      marginLeft: depthOffset,
+      width: `calc(100% - ${depthOffset}px)`
+    } : {
       ...style,
       paddingLeft: `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`
     };
@@ -4218,6 +4222,10 @@ function getSubtreeEnd(items, startIndex, getDepth) {
   }
   return endIndex;
 }
+function isDescendant(items, index, ancestorIndex, getDepth) {
+  if (ancestorIndex == null || getDepth == null || index <= ancestorIndex) return false;
+  return index < getSubtreeEnd(items, ancestorIndex, getDepth);
+}
 function getInsertionIndex(items, target, getDepth) {
   if (target.intent === "before") return target.index;
   if (target.intent === "inside") return target.index + 1;
@@ -4273,6 +4281,8 @@ function SDraggableListInner({
   const fromIndexRef = react.useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
   const usesDepth = getDepth != null;
+  const groupDragging = dragContext?.dragging;
+  const draggedSubtreeStart = dragContext ? groupDragging?.listId === listId ? groupDragging?.index ?? null : null : draggingIndex;
   const startDrag = react.useCallback((event, index) => {
     event.preventDefault();
     fromIndexRef.current = index;
@@ -4404,7 +4414,7 @@ function SDraggableListInner({
       "data-draggable-list-id": dragContext ? listId : void 0,
       children: items.map((item, index) => {
         const itemKey = getKey(item, index);
-        const disabled = getDisabled?.(item, index) ?? false;
+        const disabled = (getDisabled?.(item, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, usesDepth ? readDepth : void 0);
         const depth = readDepth(item, index);
         const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
         const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
@@ -4437,6 +4447,7 @@ function SDraggableListInner({
                 } else startDrag(event, index);
               },
               selected: currentSelectedKey === itemKey,
+              disabled,
               depth
             })
           },
@@ -10432,7 +10443,11 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                 "div",
                 {
                   className: cn(
-                    "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
+                    "relative box-border flex min-w-0 items-stretch border border-solid border-(--field-bc)",
+                    // 둘 다 넘친 것을 잘라 내지만 clip 은 스크롤 상자를 만들지 않는다. hidden 이면
+                    // 이 상자가 스크롤포트가 되어 안쪽의 position:sticky 가 페이지 스크롤을 따라가지
+                    // 못한다 (SEditor 의 고정 툴바). 여러 줄 필드에서만 바꿔 파급을 좁힌다.
+                    multiline ? "overflow-clip" : "overflow-hidden",
                     interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
                     disabled && "cursor-not-allowed"
                   ),
@@ -10468,7 +10483,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1", children })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
                   ]
                 }
               ),
@@ -15212,66 +15227,6 @@ var IconBlockquote = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, child
     }
   )
 ] });
-var IconHighlight = (p) => /* @__PURE__ */ jsxRuntime.jsx(Frame, { ...p, children: /* @__PURE__ */ jsxRuntime.jsx(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
-  }
-) });
-var IconSuperscript = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z"
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z"
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M17.405 1.40657C18.0246 1.05456 18.7463 0.92634 19.4492 1.04344C20.1521 1.16054 20.7933 1.51583 21.2652 2.0497L21.2697 2.05469L21.2696 2.05471C21.7431 2.5975 22 3.28922 22 4.00203C22 5.08579 21.3952 5.84326 20.7727 6.34289C20.1966 6.80531 19.4941 7.13675 18.9941 7.37261C18.9714 7.38332 18.9491 7.39383 18.9273 7.40415C18.4487 7.63034 18.2814 7.78152 18.1927 7.91844C18.1778 7.94155 18.1625 7.96834 18.1473 8.00003H21C21.5523 8.00003 22 8.44774 22 9.00003C22 9.55231 21.5523 10 21 10H17C16.4477 10 16 9.55231 16 9.00003C16 8.17007 16.1183 7.44255 16.5138 6.83161C16.9107 6.21854 17.4934 5.86971 18.0728 5.59591C18.6281 5.33347 19.1376 5.09075 19.5208 4.78316C19.8838 4.49179 20 4.25026 20 4.00203C20 3.77192 19.9178 3.54865 19.7646 3.37182C19.5968 3.18324 19.3696 3.05774 19.1205 3.01625C18.8705 2.97459 18.6137 3.02017 18.3933 3.14533C18.1762 3.26898 18.0191 3.45826 17.9406 3.67557C17.7531 4.19504 17.18 4.46414 16.6605 4.27662C16.141 4.0891 15.8719 3.51596 16.0594 2.99649C16.303 2.3219 16.7817 1.76125 17.4045 1.40689L17.405 1.40657Z"
-    }
-  )
-] });
-var IconSubscript = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z"
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z"
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M17.4079 14.3995C18.0284 14.0487 18.7506 13.9217 19.4536 14.0397C20.1566 14.1578 20.7977 14.5138 21.2696 15.0481L21.2779 15.0574L21.2778 15.0575C21.7439 15.5988 22 16.2903 22 17C22 18.0823 21.3962 18.8401 20.7744 19.3404C20.194 19.8073 19.4858 20.141 18.9828 20.378C18.9638 20.387 18.9451 20.3958 18.9266 20.4045C18.4473 20.6306 18.2804 20.7817 18.1922 20.918C18.1773 20.9412 18.1619 20.9681 18.1467 21H21C21.5523 21 22 21.4477 22 22C22 22.5523 21.5523 23 21 23H17C16.4477 23 16 22.5523 16 22C16 21.1708 16.1176 20.4431 16.5128 19.832C16.9096 19.2184 17.4928 18.8695 18.0734 18.5956C18.6279 18.334 19.138 18.0901 19.5207 17.7821C19.8838 17.49 20 17.2477 20 17C20 16.7718 19.9176 16.5452 19.7663 16.3672C19.5983 16.1792 19.3712 16.0539 19.1224 16.0121C18.8722 15.9701 18.6152 16.015 18.3942 16.1394C18.1794 16.2628 18.0205 16.4549 17.9422 16.675C17.7572 17.1954 17.1854 17.4673 16.665 17.2822C16.1446 17.0972 15.8728 16.5254 16.0578 16.005C16.2993 15.3259 16.7797 14.7584 17.4039 14.4018L17.4079 14.3995L17.4079 14.3995Z"
-    }
-  )
-] });
 var IconAlignLeft = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -15563,6 +15518,14 @@ var IconTextColor = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, childr
     }
   )
 ] });
+var IconTable = (p) => /* @__PURE__ */ jsxRuntime.jsx(Frame, { ...p, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 5C3 4.44772 3.44772 4 4 4H20C20.5523 4 21 4.44772 21 5V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V5ZM5 6V9H19V6H5ZM19 11H13V13H19V11ZM19 15H13V18H19V15ZM11 18V15H5V18H11ZM5 13H11V11H5V13Z"
+  }
+) });
 var IconHorizontalRule = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 3, y: 5, width: 18, height: 2, rx: 1 }),
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 2, y: 11, width: 20, height: 2, rx: 1 }),
@@ -15570,39 +15533,12 @@ var IconHorizontalRule = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Frame, { ...p, c
 ] });
 
 // src/components/SEditor/editor.config.ts
-var SEDITOR_TOOLBAR_ITEMS = [
-  "heading",
-  "fontSize",
-  "bold",
-  "italic",
-  "underline",
-  "strike",
-  "code",
-  "color",
-  "highlight",
-  "superscript",
-  "subscript",
-  "alignLeft",
-  "alignCenter",
-  "alignRight",
-  "alignJustify",
-  "bulletList",
-  "orderedList",
-  "taskList",
-  "list",
-  "blockquote",
-  "codeBlock",
-  "horizontalRule",
-  "link",
-  "image",
-  "undo",
-  "redo"
-];
 var SEDITOR_DEFAULT_TOOLBAR = [
   "undo",
   "redo",
   "|",
   "heading",
+  "fontSize",
   "list",
   "blockquote",
   "codeBlock",
@@ -15613,18 +15549,29 @@ var SEDITOR_DEFAULT_TOOLBAR = [
   "code",
   "underline",
   "color",
-  "highlight",
   "link",
   "|",
-  "superscript",
-  "subscript",
-  "|",
   "alignLeft",
   "alignCenter",
   "alignRight",
   "alignJustify",
   "|",
-  "image"
+  "table",
+  "image",
+  "horizontalRule"
+];
+var SEDITOR_SIMPLE_TOOLBAR = [
+  "undo",
+  "redo",
+  "|",
+  "heading",
+  "fontSize",
+  "|",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "color"
 ];
 var SEDITOR_DEFAULT_BUBBLE_MENU = [
   "bold",
@@ -15634,9 +15581,16 @@ var SEDITOR_DEFAULT_BUBBLE_MENU = [
   "underline",
   "|",
   "color",
-  "highlight",
   "link"
 ];
+var SEDITOR_SIMPLE_BUBBLE_MENU = [
+  "bold",
+  "italic",
+  "strike",
+  "underline",
+  "|",
+  "color"
+];
 var SEDITOR_HEADING_LEVELS = [1, 2, 3];
 var SEDITOR_HEADING_LABELS = {
   0: "\uBCF8\uBB38",
@@ -15644,7 +15598,7 @@ var SEDITOR_HEADING_LABELS = {
   2: "\uC81C\uBAA9 2",
   3: "\uC81C\uBAA9 3"
 };
-var SEDITOR_FONT_SIZES = [11, 12, 14, 16, 18];
+var SEDITOR_FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72];
 var SEDITOR_DEFAULT_FONT_SIZE = 12;
 var SEDITOR_DEFAULT_COLORS = [
   { label: "\uAE30\uBCF8", color: "var(--color-fg-primary)" },
@@ -15656,17 +15610,13 @@ var SEDITOR_DEFAULT_COLORS = [
   { label: "\uC8FC\uC758", color: "var(--color-fg-warning)" },
   { label: "\uC704\uD5D8", color: "var(--color-fg-danger)" }
 ];
-var SEDITOR_DEFAULT_HIGHLIGHTS = [
-  { label: "\uB178\uB791", color: "yellow_25" },
-  { label: "\uCD08\uB85D", color: "green_25" },
-  { label: "\uD30C\uB791", color: "brilliantblue_25" },
-  { label: "\uBE68\uAC15", color: "red_20" },
-  { label: "\uC8FC\uD669", color: "orange_20" },
-  { label: "\uD68C\uC0C9", color: "grey_20" }
-];
 var TASK_LIST_CLASS = "sd-editor-task-list";
 var TASK_ITEM_CLASS = "sd-editor-task-item";
 var IMAGE_CLASS = "sd-editor-image";
+var TABLE_CLASS = "sd-editor-table";
+var TABLE_ROW_CLASS = "sd-editor-table-row";
+var TABLE_HEADER_CLASS = "sd-editor-table-header";
+var TABLE_CELL_CLASS = "sd-editor-table-cell";
 var SEDITOR_CONTENT_CLASS = [
   "[&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none [&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words",
   // placeholder — Placeholder 확장이 빈 첫 문단에 data-placeholder 와 클래스를 붙인다
@@ -15679,23 +15629,38 @@ var SEDITOR_CONTENT_CLASS = [
   "[&_ol]:my-[4px] [&_ol]:list-decimal [&_ol]:pl-[20px]",
   "[&_li]:my-0 [&_li>p]:my-0",
   // 체크목록 — 마커를 지우고 체크박스와 본문을 가로로 세운다
-  `[&_.${TASK_LIST_CLASS}]:my-[4px] [&_.${TASK_LIST_CLASS}]:list-none [&_.${TASK_LIST_CLASS}]:pl-0`,
-  `[&_.${TASK_ITEM_CLASS}]:flex [&_.${TASK_ITEM_CLASS}]:items-start [&_.${TASK_ITEM_CLASS}]:gap-[6px]`,
-  `[&_.${TASK_ITEM_CLASS}>label]:mt-[3px] [&_.${TASK_ITEM_CLASS}>label]:shrink-0 [&_.${TASK_ITEM_CLASS}>label]:leading-none`,
-  `[&_.${TASK_ITEM_CLASS}>div]:min-w-0 [&_.${TASK_ITEM_CLASS}>div]:flex-1`,
-  `[&_.${TASK_ITEM_CLASS}_input]:m-0 [&_.${TASK_ITEM_CLASS}_input]:h-[13px] [&_.${TASK_ITEM_CLASS}_input]:w-[13px] [&_.${TASK_ITEM_CLASS}_input]:cursor-pointer [&_.${TASK_ITEM_CLASS}_input]:accent-[var(--color-fg-accent)]`,
-  `[&_.${TASK_ITEM_CLASS}[data-checked=true]>div]:text-[color:var(--color-fg-tertiary)] [&_.${TASK_ITEM_CLASS}[data-checked=true]>div]:line-through`,
+  "[&_.sd-editor-task-list]:my-[4px] [&_.sd-editor-task-list]:list-none [&_.sd-editor-task-list]:pl-0",
+  "[&_.sd-editor-task-item]:flex [&_.sd-editor-task-item]:items-start [&_.sd-editor-task-item]:gap-[6px]",
+  "[&_.sd-editor-task-item>label]:mt-[3px] [&_.sd-editor-task-item>label]:shrink-0 [&_.sd-editor-task-item>label]:leading-none",
+  "[&_.sd-editor-task-item>div]:min-w-0 [&_.sd-editor-task-item>div]:flex-1",
+  "[&_.sd-editor-task-item_input]:m-0 [&_.sd-editor-task-item_input]:h-[13px] [&_.sd-editor-task-item_input]:w-[13px] [&_.sd-editor-task-item_input]:cursor-pointer [&_.sd-editor-task-item_input]:accent-[var(--color-fg-accent)]",
+  "[&_.sd-editor-task-item[data-checked=true]>div]:text-[color:var(--color-fg-tertiary)] [&_.sd-editor-task-item[data-checked=true]>div]:line-through",
   "[&_blockquote]:my-[8px] [&_blockquote]:border-l-[3px] [&_blockquote]:border-solid [&_blockquote]:border-l-[color:var(--color-border-default)] [&_blockquote]:pl-[12px] [&_blockquote]:text-[color:var(--color-fg-tertiary)]",
   "[&_a]:cursor-pointer [&_a]:text-[color:var(--color-fg-accent)] [&_a]:underline",
   "[&_hr]:my-[12px] [&_hr]:border-t [&_hr]:border-[color:var(--color-border-default)]",
   "[&_code]:rounded-[3px] [&_code]:bg-[var(--color-bg-neutralLight)] [&_code]:px-[4px] [&_code]:py-[1px]",
   "[&_pre]:my-[8px] [&_pre]:rounded-[4px] [&_pre]:bg-[var(--color-bg-neutralLight)] [&_pre]:p-[12px]",
   "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
-  `[&_.${IMAGE_CLASS}]:my-[8px] [&_.${IMAGE_CLASS}]:h-auto [&_.${IMAGE_CLASS}]:max-w-full [&_.${IMAGE_CLASS}]:rounded-[4px]`,
+  "[&_.sd-editor-image]:my-[8px] [&_.sd-editor-image]:h-auto [&_.sd-editor-image]:max-w-full [&_.sd-editor-image]:rounded-[4px]",
+  /**
+   * 표 — `table-layout: fixed` 로 열을 균등하게 나눈다.
+   *
+   * 열 너비를 저장하지 않기로 했으므로(tiptap-api.ts 의 Table 주석) 폭은 언제나 여기서
+   * 정해진다. auto 로 두면 글자 많은 열이 넓어져 같은 표가 화면마다 다르게 보이고, 긴
+   * 단어 하나가 상자 밖으로 표를 밀어낸다.
+   */
+  "[&_.sd-editor-table]:my-[8px] [&_.sd-editor-table]:w-full [&_.sd-editor-table]:table-fixed [&_.sd-editor-table]:border-collapse",
+  "[&_.sd-editor-table-header]:border [&_.sd-editor-table-header]:border-solid [&_.sd-editor-table-header]:border-[color:var(--color-border-default)] [&_.sd-editor-table-header]:bg-[var(--color-bg-neutralLight)] [&_.sd-editor-table-header]:px-[8px] [&_.sd-editor-table-header]:py-[4px] [&_.sd-editor-table-header]:text-left [&_.sd-editor-table-header]:align-top [&_.sd-editor-table-header]:font-bold",
+  "[&_.sd-editor-table-cell]:border [&_.sd-editor-table-cell]:border-solid [&_.sd-editor-table-cell]:border-[color:var(--color-border-default)] [&_.sd-editor-table-cell]:px-[8px] [&_.sd-editor-table-cell]:py-[4px] [&_.sd-editor-table-cell]:align-top",
+  // 칸 안의 문단은 표 밖과 달리 위아래 여백을 갖지 않는다 — 한 줄짜리 칸이 대부분이다
+  "[&_.sd-editor-table-header>p]:my-0 [&_.sd-editor-table-cell>p]:my-0",
+  /*
+    고른 칸 표시 — ProseMirror 표 플러그인이 `.selectedCell` 을 붙인다. 배경을 직접 칠하면
+    칸이 자기 배경(헤더의 회색)을 잃으므로 덧대는 판을 하나 얹는다.
+  */
+  "[&_.selectedCell]:relative [&_.selectedCell]:after:pointer-events-none [&_.selectedCell]:after:absolute [&_.selectedCell]:after:inset-0 [&_.selectedCell]:after:bg-[var(--color-bg-accentFaint)]",
   "[&_.ProseMirror-selectednode]:outline [&_.ProseMirror-selectednode]:outline-2 [&_.ProseMirror-selectednode]:outline-[var(--color-border-accent)]",
-  "[&_strong]:font-bold [&_em]:italic [&_u]:underline [&_s]:line-through",
-  "[&_sup]:align-super [&_sup]:text-[0.75em] [&_sub]:align-sub [&_sub]:text-[0.75em]",
-  "[&_mark]:rounded-[2px] [&_mark]:bg-transparent [&_mark]:px-[1px]"
+  "[&_strong]:font-bold [&_em]:italic [&_u]:underline [&_s]:line-through"
 ].join(" ");
 var BODY = { fontSize: 12, lineHeight: "20px", paddingX: 12, paddingY: 8 };
 var cssLen3 = (v) => typeof v === "number" ? `${v}px` : v;
@@ -15764,22 +15729,28 @@ var ToolbarButton = /* @__PURE__ */ react.forwardRef(function ToolbarButton2({ l
     }
   );
 });
-var Separator = () => /* @__PURE__ */ jsxRuntime.jsx(
+var Separator2 = () => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     "aria-hidden": true,
-    className: "mx-[2px] h-[16px] w-[1px] shrink-0",
-    style: { background: "var(--sys-color-field-border-default)" }
+    className: "mx-[4px] h-[16px] w-[1px] shrink-0",
+    style: { background: "var(--sys-color-border-default)" }
   }
 );
 var ColorIndicator = ({ color, children }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-center gap-[1px]", children: [
   children,
   /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-[3px] w-[16px] rounded-[1px]", style: { background: color } })
 ] });
-var menuClass = cn(
-  "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[4px] shadow-normal-sm",
-  FLOATING_SLIDE_ANIM
+var MENU_BASE_CLASS = "z-50 rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[4px] shadow-normal-sm";
+var menuClass = cn(MENU_BASE_CLASS, "overflow-hidden", FLOATING_SLIDE_ANIM);
+var scrollMenuClass = cn(
+  MENU_BASE_CLASS,
+  "overflow-x-hidden overflow-y-auto",
+  FLOATING_SLIDE_ANIM,
+  SCROLLBAR_CLASS
 );
+var FONT_SIZE_DEFAULT_LABEL = "\uAE30\uBCF8";
+var FONT_SIZE_MENU_MAX_HEIGHT = "min(280px, var(--radix-dropdown-menu-content-available-height))";
 var swatchClass = cn(
   "flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded-[4px] outline-none",
   "hover:bg-[var(--color-bg-neutralLight)] data-[highlighted]:bg-[var(--color-bg-neutralLight)]"
@@ -15794,6 +15765,9 @@ var menuItemClass = cn(
   "text-[color:var(--sys-color-fg-secondary)]",
   "data-[highlighted]:bg-[var(--sys-color-bg-accent)] data-[highlighted]:text-[color:var(--sys-color-fg-inverse)]"
 );
+var menuItemSelectedClass = "bg-[var(--cmp-listItem-bg-selected)] text-[color:var(--cmp-listItem-text-selected)]";
+var menuItemDisabledClass = "data-[disabled]:cursor-not-allowed data-[disabled]:bg-transparent data-[disabled]:text-[color:var(--cmp-ghostButton-icon-disabled)]";
+var menuSeparatorClass = "my-[4px] h-[1px] bg-[var(--sys-color-border-default)]";
 var PaletteItem = ({
   asMenu,
   label,
@@ -15835,6 +15809,111 @@ var ColorPalette = ({
   ),
   /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { asMenu, className: cn(menuItemClass, "w-full"), onSelect: onClear, children: clearLabel })
 ] });
+var TABLE_PICKER_ROWS = 8;
+var TABLE_PICKER_COLS = 8;
+var TABLE_PICKER_CELL = 16;
+var TABLE_PICKER_GAP = 4;
+var TableSizePicker = ({
+  disabled,
+  onPick
+}) => {
+  const [size, setSize] = react.useState({ rows: 1, cols: 1 });
+  const gridRef = react.useRef(null);
+  react.useEffect(() => {
+    if (disabled) return void 0;
+    const id = setTimeout(() => gridRef.current?.focus(), 0);
+    return () => clearTimeout(id);
+  }, [disabled]);
+  const clamp4 = (v, max) => Math.min(Math.max(v, 1), max);
+  const move = (dRow, dCol) => setSize((p) => ({
+    rows: clamp4(p.rows + dRow, TABLE_PICKER_ROWS),
+    cols: clamp4(p.cols + dCol, TABLE_PICKER_COLS)
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[4px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: gridRef,
+        role: "grid",
+        "aria-label": "\uD45C \uD06C\uAE30",
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        className: cn("flex flex-col outline-none", disabled && "pointer-events-none opacity-40"),
+        style: { gap: TABLE_PICKER_GAP },
+        onKeyDown: (e) => {
+          const step = {
+            ArrowUp: [-1, 0],
+            ArrowDown: [1, 0],
+            ArrowLeft: [0, -1],
+            ArrowRight: [0, 1]
+          };
+          const d = step[e.key];
+          if (d) {
+            e.preventDefault();
+            e.stopPropagation();
+            move(d[0], d[1]);
+            return;
+          }
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            onPick(size.rows, size.cols);
+          }
+        },
+        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
+          const on = r < size.rows && c < size.cols;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-label": `${r + 1}\uD589 ${c + 1}\uC5F4`,
+              "aria-selected": on,
+              tabIndex: -1,
+              className: "box-border cursor-pointer rounded-[3px] border border-solid p-0 outline-none",
+              style: {
+                width: TABLE_PICKER_CELL,
+                height: TABLE_PICKER_CELL,
+                borderColor: on ? "var(--sys-color-bg-accent)" : "var(--sys-color-border-default)",
+                background: on ? "var(--color-bg-accentFaint)" : "transparent"
+              },
+              onMouseEnter: () => setSize({ rows: r + 1, cols: c + 1 }),
+              onFocus: () => setSize({ rows: r + 1, cols: c + 1 }),
+              onClick: () => onPick(r + 1, c + 1)
+            },
+            c
+          );
+        }) }, r))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-live": "polite",
+        className: "mt-[6px] text-center text-[12px] leading-[20px] text-[color:var(--sys-color-fg-secondary)]",
+        children: [
+          size.rows,
+          "\uD589 \xD7 ",
+          size.cols,
+          "\uC5F4"
+        ]
+      }
+    )
+  ] });
+};
+var TableMenuItem = ({
+  label,
+  disabled,
+  onSelect
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  RDropdown2__namespace.Item,
+  {
+    className: cn(menuItemClass, menuItemDisabledClass),
+    disabled,
+    onSelect,
+    children: label
+  }
+);
 var LinkEditor = ({
   href,
   onHrefChange,
@@ -15862,8 +15941,8 @@ var LinkEditor = ({
   /* @__PURE__ */ jsxRuntime.jsx(SButton, { size: "sm", label: "\uC801\uC6A9", onClick: onApply }),
   hasLink && /* @__PURE__ */ jsxRuntime.jsx(SButton, { size: "sm", color: "neutral", outline: true, label: "\uC81C\uAC70", onClick: onRemove })
 ] });
-var TOOLBAR_BAR_CLASS = "flex flex-wrap items-center gap-[2px] border-b border-solid px-[8px] py-[4px]";
-var TOOLBAR_BAR_STYLE = { borderBottomColor: "var(--sys-color-field-border-default)" };
+var TOOLBAR_BAR_CLASS = "sticky top-0 z-[1] flex flex-wrap items-center gap-[2px] border-b border-solid bg-inherit px-[8px] py-[4px]";
+var TOOLBAR_BAR_STYLE = { borderBottomColor: "var(--sys-color-border-default)" };
 var BUBBLE_BAR_CLASS = cn(
   "flex max-w-[calc(100vw-32px)] items-center gap-[2px] overflow-x-auto rounded-[var(--cmp-listBox-radius)]",
   "bg-[var(--cmp-listBox-bg)] px-[6px] py-[4px] shadow-normal-sm"
@@ -15875,8 +15954,6 @@ var readEditorState = (e) => ({
   underline: e.isActive("underline"),
   strike: e.isActive("strike"),
   code: e.isActive("code"),
-  superscript: e.isActive("superscript"),
-  subscript: e.isActive("subscript"),
   alignLeft: e.isActive({ textAlign: "left" }),
   alignCenter: e.isActive({ textAlign: "center" }),
   alignRight: e.isActive({ textAlign: "right" }),
@@ -15887,9 +15964,11 @@ var readEditorState = (e) => ({
   blockquote: e.isActive("blockquote"),
   codeBlock: e.isActive("codeBlock"),
   link: e.isActive("link"),
+  inTable: e.isActive("table"),
+  canMergeCells: e.can().mergeCells(),
+  canSplitCell: e.can().splitCell(),
   linkHref: e.getAttributes("link").href ?? "",
   color: e.getAttributes("textStyle").color ?? "",
-  highlight: e.getAttributes("highlight").color ?? "",
   fontSize: e.getAttributes("textStyle").fontSize ?? "",
   canUndo: e.can().undo(),
   canRedo: e.can().redo()
@@ -15901,8 +15980,6 @@ var IDLE_TOOLBAR_STATE = {
   underline: false,
   strike: false,
   code: false,
-  superscript: false,
-  subscript: false,
   alignLeft: false,
   alignCenter: false,
   alignRight: false,
@@ -15914,8 +15991,10 @@ var IDLE_TOOLBAR_STATE = {
   codeBlock: false,
   link: false,
   linkHref: "",
+  inTable: false,
+  canMergeCells: false,
+  canSplitCell: false,
   color: "",
-  highlight: "",
   fontSize: "",
   canUndo: false,
   canRedo: false
@@ -15924,9 +16003,6 @@ function EditorToolbarBar({
   state: state2,
   editor,
   items,
-  fontSizes,
-  colors,
-  highlights,
   onImageUpload,
   disabled,
   variant = "bar"
@@ -15935,6 +16011,7 @@ function EditorToolbarBar({
   const insideModal = useInsideModal();
   const isMobile = useIsMobile();
   const [linkOpen, setLinkOpen] = react.useState(false);
+  const [tableOpen, setTableOpen] = react.useState(false);
   const [linkHref, setLinkHref] = react.useState("");
   const [uploading, setUploading] = react.useState(false);
   const [mobileView, setMobileView] = react.useState("main");
@@ -15949,9 +16026,8 @@ function EditorToolbarBar({
   const chain = () => editor?.chain()?.focus();
   const off = disabled;
   const currentFontSize = Number.parseInt(state2.fontSize, 10);
-  const activeFontSize = Number.isNaN(currentFontSize) ? SEDITOR_DEFAULT_FONT_SIZE : currentFontSize;
+  const activeFontSize = Number.isNaN(currentFontSize) ? null : currentFontSize;
   const activeColor = resolveColor(state2.color) ?? "currentColor";
-  const activeHighlight = resolveColor(state2.highlight) ?? "currentColor";
   const pickImage = async (e) => {
     const file = e.target.files?.[0];
     e.target.value = "";
@@ -15968,8 +16044,6 @@ function EditorToolbarBar({
   };
   const applyColor = (color) => chain()?.setColor(resolveColor(color) ?? "inherit").run();
   const clearColor = () => chain()?.unsetColor().run();
-  const applyHighlight = (color) => chain()?.setHighlight({ color: resolveColor(color) ?? "transparent" }).run();
-  const clearHighlight = () => chain()?.unsetHighlight().run();
   const closeLinkEditor = () => {
     setLinkOpen(false);
     setMobileView("main");
@@ -16036,18 +16110,41 @@ function EditorToolbarBar({
       case "fontSize":
         return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-[20px]", children: activeFontSize }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-[20px]", children: activeFontSize ?? FONT_SIZE_DEFAULT_LABEL }),
             /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12 })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: fontSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
-            RDropdown2__namespace.Item,
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            RDropdown2__namespace.Content,
             {
-              className: menuItemClass,
-              onSelect: () => size === SEDITOR_DEFAULT_FONT_SIZE ? chain()?.unsetFontSize().run() : chain()?.setFontSize(`${size}px`).run(),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: size, lineHeight: "20px" }, children: size })
-            },
-            size
-          )) }) })
+              sideOffset: 4,
+              align: "start",
+              className: cn(scrollMenuClass, "min-w-[72px]"),
+              style: { maxHeight: FONT_SIZE_MENU_MAX_HEIGHT },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RDropdown2__namespace.Item,
+                  {
+                    className: cn(menuItemClass, activeFontSize === null && menuItemSelectedClass),
+                    title: `${FONT_SIZE_DEFAULT_LABEL} (\uBCF8\uBB38 ${SEDITOR_DEFAULT_FONT_SIZE}px)`,
+                    onSelect: () => chain()?.unsetFontSize().run(),
+                    children: FONT_SIZE_DEFAULT_LABEL
+                  }
+                ),
+                SEDITOR_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
+                  RDropdown2__namespace.Item,
+                  {
+                    ref: activeFontSize === size ? (el) => {
+                      el?.scrollIntoView({ block: "nearest" });
+                    } : void 0,
+                    className: cn(menuItemClass, activeFontSize === size && menuItemSelectedClass),
+                    onSelect: () => chain()?.setFontSize(`${size}px`).run(),
+                    children: size
+                  },
+                  size
+                ))
+              ]
+            }
+          ) })
         ] }, item);
       case "bold":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16132,7 +16229,7 @@ function EditorToolbarBar({
             ColorPalette,
             {
               asMenu: true,
-              colors,
+              colors: SEDITOR_DEFAULT_COLORS,
               columns: 4,
               clearLabel: "\uC0C9 \uC9C0\uC6B0\uAE30",
               onPick: applyColor,
@@ -16140,58 +16237,6 @@ function EditorToolbarBar({
             }
           ) }) })
         ] }, item);
-      case "highlight":
-        if (mobile)
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ToolbarButton,
-            {
-              label: "\uD615\uAD11\uD39C",
-              disabled: off,
-              onClick: () => setMobileView("highlight"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeHighlight, children: /* @__PURE__ */ jsxRuntime.jsx(IconHighlight, { size: ICON_SIZE }) })
-            },
-            item
-          );
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uD615\uAD11\uD39C", disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeHighlight, children: /* @__PURE__ */ jsxRuntime.jsx(IconHighlight, { size: ICON_SIZE }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsxRuntime.jsx(
-            ColorPalette,
-            {
-              asMenu: true,
-              colors: highlights,
-              columns: 3,
-              clearLabel: "\uD615\uAD11\uD39C \uC9C0\uC6B0\uAE30",
-              onPick: applyHighlight,
-              onClear: clearHighlight
-            }
-          ) }) })
-        ] }, item);
-      case "superscript":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            label: "\uC704 \uCCA8\uC790",
-            active: state2.superscript,
-            "aria-pressed": state2.superscript,
-            disabled: off,
-            onClick: () => chain()?.toggleSuperscript().run(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconSuperscript, { size: ICON_SIZE })
-          },
-          item
-        );
-      case "subscript":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            label: "\uC544\uB798 \uCCA8\uC790",
-            active: state2.subscript,
-            "aria-pressed": state2.subscript,
-            disabled: off,
-            onClick: () => chain()?.toggleSubscript().run(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconSubscript, { size: ICON_SIZE })
-          },
-          item
-        );
       case "alignLeft":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16417,6 +16462,127 @@ function EditorToolbarBar({
           },
           item
         );
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          RDropdown2__namespace.Root,
+          {
+            open: tableOpen,
+            onOpenChange: setTableOpen,
+            modal: !insideModal,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uD45C", active: state2.inTable, disabled: off, className: "px-[6px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconTable, { size: ICON_SIZE }),
+                /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: CARET_SIZE })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+                !state2.inTable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    TableSizePicker,
+                    {
+                      disabled: state2.inTable,
+                      onPick: (rows, cols) => {
+                        chain()?.insertTable({ rows, cols, withHeaderRow: true }).run();
+                        setTableOpen(false);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC704\uC5D0 \uD589 \uCD94\uAC00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.addRowBefore().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC544\uB798\uC5D0 \uD589 \uCD94\uAC00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.addRowAfter().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC67C\uCABD\uC5D0 \uC5F4 \uCD94\uAC00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.addColumnBefore().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC624\uB978\uCABD\uC5D0 \uC5F4 \uCD94\uAC00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.addColumnAfter().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC140 \uBCD1\uD569",
+                    disabled: !state2.canMergeCells,
+                    onSelect: () => chain()?.mergeCells().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uBCD1\uD569 \uD574\uC81C",
+                    disabled: !state2.canSplitCell,
+                    onSelect: () => chain()?.splitCell().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uD5E4\uB354 \uD589 \uD1A0\uAE00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.toggleHeaderRow().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uD5E4\uB354 \uC5F4 \uD1A0\uAE00",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.toggleHeaderColumn().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uD589 \uC0AD\uC81C",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.deleteRow().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uC5F4 \uC0AD\uC81C",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.deleteColumn().run()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableMenuItem,
+                  {
+                    label: "\uD45C \uC0AD\uC81C",
+                    disabled: !state2.inTable,
+                    onSelect: () => chain()?.deleteTable().run()
+                  }
+                )
+              ] }) })
+            ]
+          },
+          item
+        );
       case "undo":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16453,7 +16619,6 @@ function EditorToolbarBar({
   if (mobileView !== "main") {
     const editing = {
       color: { icon: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }), label: "\uAE00\uC790\uC0C9" },
-      highlight: { icon: /* @__PURE__ */ jsxRuntime.jsx(IconHighlight, { size: ICON_SIZE }), label: "\uD615\uAD11\uD39C" },
       link: { icon: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }), label: "\uB9C1\uD06C" }
     }[mobileView];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...shell, children: [
@@ -16469,7 +16634,7 @@ function EditorToolbarBar({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Separator2, {}),
       mobileView === "link" ? /* @__PURE__ */ jsxRuntime.jsx(
         LinkEditor,
         {
@@ -16482,18 +16647,18 @@ function EditorToolbarBar({
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         ColorPalette,
         {
-          colors: mobileView === "color" ? colors : highlights,
-          columns: mobileView === "color" ? 4 : 3,
-          clearLabel: mobileView === "color" ? "\uC0C9 \uC9C0\uC6B0\uAE30" : "\uD615\uAD11\uD39C \uC9C0\uC6B0\uAE30",
-          onPick: mobileView === "color" ? applyColor : applyHighlight,
-          onClear: mobileView === "color" ? clearColor : clearHighlight
+          colors: SEDITOR_DEFAULT_COLORS,
+          columns: 4,
+          clearLabel: "\uC0C9 \uC9C0\uC6B0\uAE30",
+          onPick: applyColor,
+          onClear: clearColor
         }
       )
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...shell, children: [
     groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator2, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -16566,16 +16731,12 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
   onFocusChange,
   onReady,
   placeholder,
-  typography,
   editable,
   disabled,
   minHeight,
   maxHeight,
   toolbar,
   bubbleMenu,
-  fontSizes,
-  colors,
-  highlights,
   onImageUpload,
   editorClass,
   editorStyle
@@ -16584,12 +16745,8 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
   placeholderRef.current = placeholder;
   const handlers = react.useRef({ onInput, onFocusChange });
   handlers.current = { onInput, onFocusChange };
-  const typographyRef = react.useRef(typography);
   const extensions = react.useMemo(
-    () => api.createExtensions({
-      getPlaceholder: () => placeholderRef.current,
-      typography: typographyRef.current
-    }),
+    () => api.createExtensions({ getPlaceholder: () => placeholderRef.current }),
     [api]
   );
   const editor = api.useEditor({
@@ -16637,28 +16794,22 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
     [editor, htmlRef]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    toolbar !== false && toolbar.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    toolbar.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       EditorToolbar,
       {
         api,
         editor,
         items: toolbar,
-        fontSizes,
-        colors,
-        highlights,
         onImageUpload,
         disabled: !editable
       }
     ),
-    bubbleMenu !== false && bubbleMenu.length > 0 && editable && /* @__PURE__ */ jsxRuntime.jsx(
+    bubbleMenu.length > 0 && editable && /* @__PURE__ */ jsxRuntime.jsx(
       EditorBubbleMenu,
       {
         api,
         editor,
         items: bubbleMenu,
-        fontSizes,
-        colors,
-        highlights,
         onImageUpload,
         disabled: false
       }
@@ -16687,10 +16838,8 @@ var importTiptap = async () => {
     textAlign,
     textStyle,
     list,
-    highlight,
     image,
-    superscript,
-    subscript,
+    table,
     typography,
     extensions
   ] = await Promise.all([
@@ -16700,17 +16849,12 @@ var importTiptap = async () => {
     import('@tiptap/extension-text-align'),
     import('@tiptap/extension-text-style'),
     import('@tiptap/extension-list'),
-    import('@tiptap/extension-highlight'),
     import('@tiptap/extension-image'),
-    import('@tiptap/extension-superscript'),
-    import('@tiptap/extension-subscript'),
+    import('@tiptap/extension-table'),
     import('@tiptap/extension-typography'),
     import('@tiptap/extensions')
   ]);
-  const createExtensions = ({
-    getPlaceholder,
-    typography: withTypography
-  }) => [
+  const createExtensions = ({ getPlaceholder }) => [
     starterKit.default.configure({
       heading: { levels: [...SEDITOR_HEADING_LEVELS] },
       link: {
@@ -16727,14 +16871,24 @@ var importTiptap = async () => {
     textAlign.default.configure({ types: ["heading", "paragraph"] }),
     list.TaskList.configure({ HTMLAttributes: { class: TASK_LIST_CLASS } }),
     list.TaskItem.configure({ nested: true, HTMLAttributes: { class: TASK_ITEM_CLASS } }),
-    highlight.default.configure({ multicolor: true }),
     // base64 를 막는다 — 본문 HTML 에 수 MB 짜리 data URI 가 박히면 그대로 DB·API 로 실려 간다.
     // 이미지는 onImageUpload 가 돌려준 URL 로만 들어온다.
     image.default.configure({ allowBase64: false, HTMLAttributes: { class: IMAGE_CLASS } }),
-    superscript.default,
-    subscript.default,
+    /**
+     * 표 — 열 너비는 **고정(균등)** 이다.
+     *
+     * `resizable` 을 켜면 열 경계를 끌어 폭을 정할 수 있지만 그 값이 저장 HTML 에
+     * `colwidth` 로 px 단위로 박힌다. 작성한 화면보다 좁은 곳에서 다시 보여 줄 때 표가
+     * 넘치고, 화면 폭이 제각각인 소비 앱에서는 되돌릴 방법이 없다. 대신 본문 스타일이
+     * `table-layout: fixed` 로 열을 균등하게 나눠 어떤 폭에서도 표가 상자 안에 남는다.
+     */
+    table.Table.configure({ resizable: false, HTMLAttributes: { class: TABLE_CLASS } }),
+    table.TableRow.configure({ HTMLAttributes: { class: TABLE_ROW_CLASS } }),
+    table.TableHeader.configure({ HTMLAttributes: { class: TABLE_HEADER_CLASS } }),
+    table.TableCell.configure({ HTMLAttributes: { class: TABLE_CELL_CLASS } }),
     extensions.Placeholder.configure({ placeholder: () => getPlaceholder() }),
-    ...withTypography ? [typography.default] : []
+    // 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`)
+    typography.default
   ];
   return {
     useEditor: react.useEditor,
@@ -16787,13 +16941,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   placeholder = "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694.",
   minHeight = 200,
   maxHeight,
-  toolbar = SEDITOR_DEFAULT_TOOLBAR,
-  bubbleMenu = SEDITOR_DEFAULT_BUBBLE_MENU,
-  fontSizes = [...SEDITOR_FONT_SIZES],
-  colors = SEDITOR_DEFAULT_COLORS,
-  highlights = SEDITOR_DEFAULT_HIGHLIGHTS,
+  simple = false,
   onImageUpload,
-  typography = false,
   rules,
   status,
   focused,
@@ -16885,7 +17034,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const hasToolbar = toolbar !== false && toolbar.length > 0;
+  const resolvedToolbar = simple ? SEDITOR_SIMPLE_TOOLBAR : SEDITOR_DEFAULT_TOOLBAR;
+  const resolvedBubbleMenu = simple ? SEDITOR_SIMPLE_BUBBLE_MENU : SEDITOR_DEFAULT_BUBBLE_MENU;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -16910,19 +17060,15 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
       multiline: true,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: api === null ? (
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col bg-inherit", children: api === null ? (
         // 엔진을 불러오는 동안의 자리 — 툴바 높이와 본문 상자를 그대로 잡아 둔다
         /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          hasToolbar && // 진짜 툴바를 잠긴 채로 그린다 — 버튼 개수·줄바꿈이 같아야 엔진이 붙어도 안 밀린다
           /* @__PURE__ */ jsxRuntime.jsx(
             EditorToolbarBar,
             {
               state: IDLE_TOOLBAR_STATE,
               editor: null,
-              items: toolbar,
-              fontSizes,
-              colors,
-              highlights,
+              items: resolvedToolbar,
               onImageUpload,
               disabled: true
             }
@@ -16949,16 +17095,12 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
           onFocusChange: handleFocusChange,
           onReady: handleReady,
           placeholder,
-          typography,
           editable,
           disabled,
           minHeight,
           maxHeight,
-          toolbar,
-          bubbleMenu,
-          fontSizes,
-          colors,
-          highlights,
+          toolbar: resolvedToolbar,
+          bubbleMenu: resolvedBubbleMenu,
           onImageUpload,
           editorClass,
           editorStyle
@@ -17040,9 +17182,9 @@ var todayIso = () => {
   const pad = (n) => String(n).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
-var isInlineDateField = (field) => field.type === "date" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
+var isInlineDateField = (field) => field.type === "datepicker-range" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
 var getFieldPresets = (field) => {
-  if (field.type === "period") return field.presets ?? DEFAULT_PERIOD_PRESETS;
+  if (field.type === "datepicker-statistics") return field.presets ?? DEFAULT_PERIOD_PRESETS;
   return field.presets ?? [];
 };
 var getDefaultPeriodInputValue = (unit) => {
@@ -17059,12 +17201,16 @@ var createPeriodValue = (unit) => ({
   value: getDefaultPeriodInputValue(unit)
 });
 var resolveFieldDefault = (field) => {
-  if (field.defaultValue !== void 0) return field.defaultValue;
-  if (field.type === "date")
-    return isInlineDateField(field) || field.required ? todayIso() : void 0;
+  if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
+  if (field.type === "datepicker-range") {
+    if (!isInlineDateField(field) && !field.required) return void 0;
+    const today = todayIso();
+    return [today, today];
+  }
   if (!field.required) return void 0;
-  if (field.type === "single") return field.options?.[0]?.value;
-  if (field.type === "period") {
+  if (field.type === "datepicker-day") return todayIso();
+  if (field.type === "select") return field.options?.[0]?.value;
+  if (field.type === "datepicker-statistics") {
     const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
     return unit ? createPeriodValue(unit) : void 0;
   }
@@ -17086,9 +17232,10 @@ var valuesMapEqual = (a, b) => {
   }
   return true;
 };
+var fieldValuesEqual = (field, a, b) => field.type === "datepicker-range" ? sameDateValue(a, b) : valuesEqual(a, b);
 var isAtDefaultValue = (field, value) => {
   const def = resolveFieldDefault(field);
-  return def !== void 0 && valuesEqual(value, def);
+  return def !== void 0 && fieldValuesEqual(field, value, def);
 };
 var resetTargetValue = (field) => {
   const def = resolveFieldDefault(field);
@@ -17097,7 +17244,7 @@ var resetTargetValue = (field) => {
 var isAtResetTarget = (field, value) => {
   const target = resetTargetValue(field);
   if (isEmptyValue(value) && isEmptyValue(target)) return true;
-  return valuesEqual(value, target);
+  return fieldValuesEqual(field, value, target);
 };
 var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
 var isFixedField = (field) => field.fixed === true || field.required === true;
@@ -17125,17 +17272,19 @@ var defaultGroupTooltipMessage = (rule, fields) => {
   const label = fields.find((f) => f.key === rule.key)?.label ?? "\uD56D\uBAA9";
   return `${label}${koreanParticle(label, "\uC744", "\uB97C")} \uC120\uD0DD\uD574 \uC8FC\uC138\uC694.`;
 };
+var toDateRange = (value) => Array.isArray(value) ? [value[0], value[1]] : [value, value];
+var sameDateValue = (a, b) => {
+  const [aStart, aEnd] = toDateRange(a);
+  const [bStart, bEnd] = toDateRange(b);
+  return aStart === bStart && aEnd === bEnd;
+};
 var matchPresetId = (presets, value) => {
   if (isEmptyValue(value)) return null;
   if (isPeriodValue(value)) return value.unit;
   for (const preset of presets) {
     if (preset.custom) continue;
     const resolved = preset.resolve ? preset.resolve() : preset.value;
-    if (Array.isArray(resolved) && Array.isArray(value)) {
-      if (resolved[0] === value[0] && resolved[1] === value[1]) return preset.value;
-    } else if (!Array.isArray(resolved) && !Array.isArray(value) && resolved === value) {
-      return preset.value;
-    }
+    if (sameDateValue(resolved, value)) return preset.value;
   }
   return presets.find((preset) => preset.custom)?.value ?? null;
 };
@@ -17146,7 +17295,7 @@ var formatValueList = (labels) => {
 };
 var displayValue = (field, value) => {
   if (isEmptyValue(value)) return "";
-  if (field.type === "multi") {
+  if (field.type === "select-multi") {
     const values = toArrayValue(value);
     const selectableValues = (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value);
     if (selectableValues.length > 0 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
@@ -17154,10 +17303,12 @@ var displayValue = (field, value) => {
     }
     return formatValueList(values.map((v) => optionLabel(field, v)));
   }
-  if (field.type === "single") return optionLabel(field, value);
-  if (field.type === "date")
-    return Array.isArray(value) ? `${value[0]} ~ ${value[1]}` : String(value);
-  if (field.type === "period") {
+  if (field.type === "select") return optionLabel(field, value);
+  if (field.type === "datepicker-day" || field.type === "datepicker-range") {
+    if (!Array.isArray(value)) return String(value);
+    return value[0] === value[1] ? String(value[0]) : `${value[0]} ~ ${value[1]}`;
+  }
+  if (field.type === "datepicker-statistics") {
     if (!isPeriodValue(value)) {
       const preset2 = getFieldPresets(field).find((p) => p.value === value);
       return preset2?.label ?? String(value);
@@ -17174,7 +17325,7 @@ var displayValue = (field, value) => {
 };
 var chipDisplayValue = (field, value) => {
   const text = displayValue(field, value);
-  if (field.type !== "date" || isEmptyValue(value)) return text;
+  if (field.type !== "datepicker-range" || isEmptyValue(value)) return text;
   const presets = getFieldPresets(field);
   if (presets.length === 0) return text;
   const preset = presets.find((p) => p.value === matchPresetId(presets, value));
@@ -17265,6 +17416,14 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
+  if (typeof console !== "undefined") {
+    const misused = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f));
+    if (misused.length > 0) {
+      console.warn(
+        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misused.map((f) => f.key).join(", ")})`
+      );
+    }
+  }
   const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
   const resolvedActiveKeys = Array.from(
     /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
@@ -17286,7 +17445,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     if (currentOpenField?.type === "keyword") {
       return { width: CHIPFILTER_LISTBOX_WIDTH };
     }
-    if ((currentOpenField?.type === "date" || currentOpenField?.type === "period") && getFieldPresets(currentOpenField).length > 0) {
+    if ((currentOpenField?.type === "datepicker-range" || currentOpenField?.type === "datepicker-statistics") && getFieldPresets(currentOpenField).length > 0) {
       return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
     }
     return { width: CHIPFILTER_LISTBOX_WIDTH };
@@ -17422,7 +17581,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 }
                 clearValue(field.key);
               };
-              const node = field.type === "date" && isInlineDateField(field) ? /* @__PURE__ */ jsxRuntime.jsx(
+              const node = field.type === "datepicker-range" && isInlineDateField(field) ? /* @__PURE__ */ jsxRuntime.jsx(
                 InlineDatePresetFilter,
                 {
                   field,
@@ -17733,8 +17892,8 @@ function EditorPanel({
   onValueCommit,
   onClose
 }) {
-  const wrapsInPaddedTop = field.type === "date" || field.type === "period";
-  const isMulti = field.type === "multi";
+  const wrapsInPaddedTop = field.type === "datepicker-day" || field.type === "datepicker-range" || field.type === "datepicker-statistics";
+  const isMulti = field.type === "select-multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
   const allSelected = isMulti && selectableValues.length > 0 && selectableValues.every((v) => selectedValues.includes(v));
@@ -17815,7 +17974,7 @@ function FilterEditor({
   onValueChange,
   onValueCommit
 }) {
-  if (field.type === "period") {
+  if (field.type === "datepicker-statistics") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       PeriodPresetEditor,
       {
@@ -17826,7 +17985,21 @@ function FilterEditor({
       }
     );
   }
-  if (field.type === "date") {
+  if (field.type === "datepicker-day") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SDatePicker,
+      {
+        value: typeof value === "string" ? value : null,
+        onValueChange,
+        selectable: field.selectable,
+        disabled,
+        placeholder: field.placeholder,
+        width: "100%",
+        maxWidth: "100%"
+      }
+    );
+  }
+  if (field.type === "datepicker-range") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DatePresetEditor,
       {
@@ -17853,8 +18026,8 @@ function FilterEditor({
     OptionList,
     {
       field,
-      value: field.type === "multi" ? toArrayValue(value) : value,
-      multiple: field.type === "multi",
+      value: field.type === "select-multi" ? toArrayValue(value) : value,
+      multiple: field.type === "select-multi",
       disabled,
       onValueChange
     }
@@ -17879,17 +18052,16 @@ function DatePresetEditor({
     setSelectedId(preset.value);
     if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
   };
-  if (field.type === "date" && presets.length === 0) {
+  if (presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      SDatePicker,
+      SDateRangePicker,
       {
-        value: typeof value === "string" ? value : null,
+        value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
+        maxRange: field.maxRange,
         disabled,
-        placeholder: field.placeholder,
-        width: "100%",
-        maxWidth: "100%"
+        width: "100%"
       }
     );
   }
@@ -20036,15 +20208,9 @@ exports.SDraggableList = SDraggableList;
 exports.SDraggableProvider = SDraggableProvider;
 exports.SDrawer = SDrawer;
 exports.SDropdownButton = SDropdownButton2;
-exports.SEDITOR_DEFAULT_BUBBLE_MENU = SEDITOR_DEFAULT_BUBBLE_MENU;
-exports.SEDITOR_DEFAULT_COLORS = SEDITOR_DEFAULT_COLORS;
 exports.SEDITOR_DEFAULT_FONT_SIZE = SEDITOR_DEFAULT_FONT_SIZE;
-exports.SEDITOR_DEFAULT_HIGHLIGHTS = SEDITOR_DEFAULT_HIGHLIGHTS;
-exports.SEDITOR_DEFAULT_TOOLBAR = SEDITOR_DEFAULT_TOOLBAR;
-exports.SEDITOR_FONT_SIZES = SEDITOR_FONT_SIZES;
 exports.SEDITOR_HEADING_LABELS = SEDITOR_HEADING_LABELS;
 exports.SEDITOR_HEADING_LEVELS = SEDITOR_HEADING_LEVELS;
-exports.SEDITOR_TOOLBAR_ITEMS = SEDITOR_TOOLBAR_ITEMS;
 exports.SEditor = SEditor;
 exports.SExpansionItem = SExpansionItem;
 exports.SExpansionList = SExpansionList2;