@gusun/design-system 0.1.0 → 0.1.1

package/dist-lib/editor.js

@@ -1,2 +1,716 @@
-import { a as e, n as t, t as n } from "./Editor-wECQz1CV.js";
-export { n as Editor, e as EditorToolbar, t as MergeFieldNode };
+import { C as e, F as t, I as n, P as r, T as i, _ as a, a as o, i as s, n as c, s as l } from "./Tabs-C_N6MDdv.js";
+import { o as u, s as d } from "./tokens-CbcaxhkP.js";
+import { Fragment as f, useEffect as p, useLayoutEffect as m, useReducer as h, useRef as g, useState as _ } from "react";
+import { AlignCenter as v, AlignJustify as y, AlignLeft as b, AlignRight as x, Baseline as S, Bold as C, Braces as w, Highlighter as T, Image as E, Italic as D, Link as O, Minus as k, Paperclip as A, Plus as j, Redo2 as M, Strikethrough as N, Table as P, Type as F, Underline as I, Undo2 as L } from "lucide-react";
+import { jsx as R, jsxs as z } from "react/jsx-runtime";
+import { EditorContent as B, useEditor as V } from "@tiptap/react";
+import { StarterKit as H } from "@tiptap/starter-kit";
+import { TextStyle as U } from "@tiptap/extension-text-style";
+import { Color as W } from "@tiptap/extension-color";
+import { Highlight as G } from "@tiptap/extension-highlight";
+import { TextAlign as ee } from "@tiptap/extension-text-align";
+import { Image as te } from "@tiptap/extension-image";
+import { Table as ne, TableCell as re, TableHeader as ie, TableRow as ae } from "@tiptap/extension-table";
+import { Node as oe, mergeAttributes as se } from "@tiptap/core";
+//#region src/components/EditorToolbar.tsx
+var K = (e) => e.preventDefault();
+function q({ icon: e, label: t, active: r = !1, disabled: i = !1, onClick: a }) {
+	return /* @__PURE__ */ R(n, {
+		variant: "ghost",
+		size: "24",
+		icon: e,
+		disabled: i,
+		onClick: a,
+		onMouseDown: K,
+		"aria-label": t,
+		"aria-pressed": r
+	});
+}
+function J({ icon: e, label: t, ariaLabel: r }) {
+	return t ? /* @__PURE__ */ R(n, {
+		variant: "ghost",
+		size: "24",
+		leftIcon: e,
+		onMouseDown: K,
+		children: t
+	}) : /* @__PURE__ */ R(n, {
+		variant: "ghost",
+		size: "24",
+		icon: e,
+		onMouseDown: K,
+		title: r,
+		"aria-label": r
+	});
+}
+function ce() {
+	return /* @__PURE__ */ R("span", { className: "mx-spacing-2 self-stretch border-l border-editor-divider" });
+}
+var Y = [
+	{
+		key: "paragraph",
+		label: "본문"
+	},
+	{
+		key: "h1",
+		label: "제목 1"
+	},
+	{
+		key: "h2",
+		label: "제목 2"
+	},
+	{
+		key: "h3",
+		label: "제목 3"
+	}
+];
+function X({ palette: e, current: t, onPick: n }) {
+	return /* @__PURE__ */ R(i, {
+		width: 80,
+		children: /* @__PURE__ */ R("div", {
+			className: "bg-list-group-bg py-spacing-4",
+			children: e.map((e) => {
+				let r = t === e.value || e.value === null && !t, i = e.swatch ?? e.value;
+				return /* @__PURE__ */ z("button", {
+					type: "button",
+					onMouseDown: K,
+					onClick: () => n(e.value),
+					className: `flex w-full cursor-pointer items-center gap-spacing-4 px-spacing-6 py-spacing-3 text-14 transition-colors hover:bg-list-hover-bg focus:outline-none focus-visible:bg-list-hover-bg ${r ? "text-list-selected-text" : "text-list-default-text"}`,
+					children: [/* @__PURE__ */ R("span", {
+						className: "inline-block h-[14px] w-[14px] shrink-0 rounded-round-00",
+						style: i ? { backgroundColor: i } : void 0
+					}), e.label]
+				}, e.label);
+			})
+		})
+	});
+}
+function Z({ initialUrl: e = "", placeholder: t, submitLabel: n, onSubmit: r, onRemove: a, removeLabel: o = "해제" }) {
+	let [s, c] = _(e), l = () => r(s.trim());
+	return /* @__PURE__ */ R(i, {
+		width: 300,
+		topArea: "input",
+		inputValue: s,
+		onInputChange: (e) => c(e.target.value),
+		inputPlaceholder: t,
+		inputProps: {
+			autoFocus: !0,
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.preventDefault(), l());
+			}
+		},
+		footer: !0,
+		footerButtonsFill: !0,
+		showCancel: !!a,
+		cancelText: o,
+		onCancel: a,
+		confirmText: n,
+		onConfirm: l
+	});
+}
+function le({ editor: e, close: t }) {
+	return /* @__PURE__ */ R(Z, {
+		initialUrl: e.getAttributes("link").href ?? "",
+		placeholder: "https://example.com",
+		submitLabel: "적용",
+		onSubmit: (n) => {
+			let r = e.chain().focus().extendMarkRange("link");
+			n ? r.setLink({ href: n }).run() : r.unsetLink().run(), t();
+		},
+		onRemove: () => {
+			e.chain().focus().extendMarkRange("link").unsetLink().run(), t();
+		}
+	});
+}
+function ue({ editor: e, close: t }) {
+	return /* @__PURE__ */ R(Z, {
+		placeholder: "이미지 주소(URL)",
+		submitLabel: "삽입",
+		onSubmit: (n) => {
+			n && e.chain().focus().setImage({ src: n }).run(), t();
+		}
+	});
+}
+function de({ editor: t, mergeFields: n, close: r }) {
+	let [o, s] = _(""), c = n.map((e) => typeof e == "string" ? {
+		label: e,
+		value: e
+	} : e).filter((e) => !o || e.label.toLowerCase().includes(o.toLowerCase())), l = (e) => {
+		t.chain().focus().insertContent({
+			type: "mergeField",
+			attrs: { value: e }
+		}).run(), r();
+	};
+	return /* @__PURE__ */ R(i, {
+		width: 180,
+		topArea: "search",
+		searchValue: o,
+		onSearchChange: (e) => s(e.target.value),
+		searchPlaceholder: "필드명 검색",
+		searchInputProps: { autoFocus: !0 },
+		children: /* @__PURE__ */ R(e, {
+			empty: c.length === 0,
+			emptyMessage: "검색 결과 없음",
+			children: c.map((e) => /* @__PURE__ */ R(a, {
+				icon: j,
+				title: e.label,
+				onClick: () => l(e.value)
+			}, e.value))
+		})
+	});
+}
+function Q({ editor: t, toolbar: n, mergeFields: r = [] }) {
+	if (!t) return null;
+	let o = (e) => !n || n.includes(e), s = (e) => e(t.chain().focus()).run(), c = t.isActive("heading", { level: 1 }) ? "h1" : t.isActive("heading", { level: 2 }) ? "h2" : t.isActive("heading", { level: 3 }) ? "h3" : "paragraph", p = (e, t) => {
+		s(e === "paragraph" ? (e) => e.setParagraph() : (t) => t.toggleHeading({ level: Number(e[1]) })), t();
+	}, m = t.getAttributes("textStyle").color ?? null, h = t.getAttributes("highlight").color ?? null, g = (e) => s(e ? (t) => t.setColor(e) : (e) => e.unsetColor()), _ = (e) => s(e ? (t) => t.setHighlight({ color: e }) : (e) => e.unsetHighlight()), A = t.isActive("table");
+	return /* @__PURE__ */ R("div", {
+		className: "flex min-w-0 flex-1 flex-wrap items-center gap-spacing-2",
+		children: [
+			[o("undo") && /* @__PURE__ */ R(q, {
+				icon: L,
+				label: "실행 취소",
+				disabled: !t.can().undo(),
+				onClick: () => s((e) => e.undo())
+			}, "undo"), o("redo") && /* @__PURE__ */ R(q, {
+				icon: M,
+				label: "다시 실행",
+				disabled: !t.can().redo(),
+				onClick: () => s((e) => e.redo())
+			}, "redo")],
+			[o("mergefield") && r.length > 0 && /* @__PURE__ */ R(l, {
+				placement: "auto-left",
+				menuWidth: 180,
+				trigger: /* @__PURE__ */ R(J, {
+					icon: w,
+					label: "머지필드"
+				}),
+				children: (e) => /* @__PURE__ */ R(de, {
+					editor: t,
+					mergeFields: r,
+					close: e
+				})
+			}, "mergefield")],
+			[o("block") && /* @__PURE__ */ R(l, {
+				placement: "auto-left",
+				menuWidth: 80,
+				trigger: /* @__PURE__ */ R(J, {
+					icon: F,
+					label: Y.find((e) => e.key === c)?.label
+				}),
+				children: (t) => /* @__PURE__ */ R(i, {
+					width: 80,
+					children: /* @__PURE__ */ R(e, { children: Y.map((e) => /* @__PURE__ */ R(a, {
+						title: e.label,
+						selected: c === e.key,
+						onClick: () => p(e.key, t)
+					}, e.key)) })
+				})
+			}, "block")],
+			[
+				o("bold") && /* @__PURE__ */ R(q, {
+					icon: C,
+					label: "굵게",
+					active: t.isActive("bold"),
+					onClick: () => s((e) => e.toggleBold())
+				}, "bold"),
+				o("italic") && /* @__PURE__ */ R(q, {
+					icon: D,
+					label: "기울임",
+					active: t.isActive("italic"),
+					onClick: () => s((e) => e.toggleItalic())
+				}, "italic"),
+				o("underline") && /* @__PURE__ */ R(q, {
+					icon: I,
+					label: "밑줄",
+					active: t.isActive("underline"),
+					onClick: () => s((e) => e.toggleUnderline())
+				}, "underline"),
+				o("strike") && /* @__PURE__ */ R(q, {
+					icon: N,
+					label: "취소선",
+					active: t.isActive("strike"),
+					onClick: () => s((e) => e.toggleStrike())
+				}, "strike")
+			],
+			[o("color") && /* @__PURE__ */ R(l, {
+				placement: "auto-left",
+				menuWidth: 80,
+				trigger: /* @__PURE__ */ R(J, {
+					icon: S,
+					ariaLabel: "글자 색"
+				}),
+				children: () => /* @__PURE__ */ R(X, {
+					palette: d,
+					current: m,
+					onPick: g
+				})
+			}, "color"), o("highlight") && /* @__PURE__ */ R(l, {
+				placement: "auto-left",
+				menuWidth: 80,
+				trigger: /* @__PURE__ */ R(J, {
+					icon: T,
+					ariaLabel: "형광펜"
+				}),
+				children: () => /* @__PURE__ */ R(X, {
+					palette: u,
+					current: h,
+					onPick: _
+				})
+			}, "highlight")],
+			[
+				o("align") && /* @__PURE__ */ R(q, {
+					icon: b,
+					label: "왼쪽 정렬",
+					active: t.isActive({ textAlign: "left" }),
+					onClick: () => s((e) => e.setTextAlign("left"))
+				}, "al"),
+				o("align") && /* @__PURE__ */ R(q, {
+					icon: v,
+					label: "가운데 정렬",
+					active: t.isActive({ textAlign: "center" }),
+					onClick: () => s((e) => e.setTextAlign("center"))
+				}, "ac"),
+				o("align") && /* @__PURE__ */ R(q, {
+					icon: x,
+					label: "오른쪽 정렬",
+					active: t.isActive({ textAlign: "right" }),
+					onClick: () => s((e) => e.setTextAlign("right"))
+				}, "ar"),
+				o("align") && /* @__PURE__ */ R(q, {
+					icon: y,
+					label: "양쪽 정렬",
+					active: t.isActive({ textAlign: "justify" }),
+					onClick: () => s((e) => e.setTextAlign("justify"))
+				}, "aj")
+			],
+			[
+				o("link") && /* @__PURE__ */ R(l, {
+					placement: "auto-left",
+					menuWidth: 300,
+					trigger: /* @__PURE__ */ R(J, {
+						icon: O,
+						ariaLabel: "링크"
+					}),
+					children: (e) => /* @__PURE__ */ R(le, {
+						editor: t,
+						close: e
+					})
+				}, "link"),
+				o("table") && /* @__PURE__ */ R(l, {
+					placement: "auto-left",
+					menuWidth: 140,
+					trigger: /* @__PURE__ */ R(J, {
+						icon: P,
+						ariaLabel: "표"
+					}),
+					children: (t) => /* @__PURE__ */ R(i, {
+						width: 140,
+						children: /* @__PURE__ */ z(e, { children: [
+							/* @__PURE__ */ R(a, {
+								title: "표 삽입 (3×3)",
+								onClick: () => {
+									s((e) => e.insertTable({
+										rows: 3,
+										cols: 3,
+										withHeaderRow: !0
+									})), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "위에 행 추가",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.addRowBefore()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "아래에 행 추가",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.addRowAfter()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "행 삭제",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.deleteRow()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "왼쪽에 열 추가",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.addColumnBefore()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "오른쪽에 열 추가",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.addColumnAfter()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "열 삭제",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.deleteColumn()), t();
+								}
+							}),
+							/* @__PURE__ */ R(a, {
+								title: "표 삭제",
+								disabled: !A,
+								onClick: () => {
+									s((e) => e.deleteTable()), t();
+								}
+							})
+						] })
+					})
+				}, "table"),
+				o("image") && /* @__PURE__ */ R(l, {
+					placement: "auto-left",
+					menuWidth: 300,
+					trigger: /* @__PURE__ */ R(J, {
+						icon: E,
+						ariaLabel: "이미지"
+					}),
+					children: (e) => /* @__PURE__ */ R(ue, {
+						editor: t,
+						close: e
+					})
+				}, "image"),
+				o("hr") && /* @__PURE__ */ R(q, {
+					icon: k,
+					label: "구분선",
+					onClick: () => s((e) => e.setHorizontalRule())
+				}, "hr")
+			]
+		].map((e) => e.filter(Boolean)).filter((e) => e.length).map((e, t) => /* @__PURE__ */ z(f, { children: [t > 0 && /* @__PURE__ */ R(ce, {}), e] }, t))
+	});
+}
+//#endregion
+//#region src/components/MergeFieldNode.ts
+var fe = "inline-flex items-center gap-spacing-3 rounded-round-4 border border-chip-blue-default-line bg-chip-blue-default-bg pl-spacing-4 pr-spacing-3 py-spacing-1 align-middle font-pretendard text-12 text-chip-blue-default-text transition-colors hover:border-chip-blue-hover-line hover:bg-chip-blue-hover-bg", pe = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>", me = oe.create({
+	name: "mergeField",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	selectable: !0,
+	addAttributes() {
+		return { value: {
+			default: "",
+			parseHTML: (e) => e.getAttribute("data-merge-field") || e.textContent || "",
+			renderHTML: (e) => ({ "data-merge-field": e.value })
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "span[data-merge-field]" }];
+	},
+	renderHTML({ HTMLAttributes: e, node: t }) {
+		return [
+			"span",
+			se(e),
+			t.attrs.value
+		];
+	},
+	addNodeView() {
+		return ({ node: e, editor: t, getPos: n }) => {
+			let r = document.createElement("span");
+			r.className = fe, r.contentEditable = "false";
+			let i = document.createElement("span");
+			i.className = "whitespace-nowrap", i.textContent = e.attrs.value, r.appendChild(i);
+			let a = document.createElement("button");
+			return a.type = "button", a.className = "flex shrink-0 items-center justify-center", a.setAttribute("aria-label", "머지필드 삭제"), a.innerHTML = pe, a.addEventListener("mousedown", (e) => e.preventDefault()), a.addEventListener("click", (r) => {
+				if (r.preventDefault(), r.stopPropagation(), typeof n != "function") return;
+				let i = n();
+				i != null && t.chain().focus().deleteRange({
+					from: i,
+					to: i + e.nodeSize
+				}).run();
+			}), r.appendChild(a), { dom: r };
+		};
+	}
+}), he = [
+	{
+		value: "edit",
+		label: "편집"
+	},
+	{
+		value: "source",
+		label: "HTML"
+	},
+	{
+		value: "preview",
+		label: "미리보기"
+	}
+];
+function ge() {
+	return [
+		H.configure({ link: {
+			openOnClick: !1,
+			HTMLAttributes: { rel: "noopener noreferrer nofollow" }
+		} }),
+		U,
+		W,
+		G.configure({ multicolor: !0 }),
+		ee.configure({ types: ["heading", "paragraph"] }),
+		te,
+		ne.configure({ resizable: !1 }),
+		ae,
+		ie,
+		re,
+		me
+	];
+}
+function _e({ mode: e, onChange: t, readOnly: n, showSource: r }) {
+	let i = n ? he.filter((e) => e.value !== "edit") : he;
+	return r || (i = i.filter((e) => e.value !== "source")), /* @__PURE__ */ R(s, {
+		size: "24",
+		gap: "4",
+		value: e,
+		onChange: (e) => t?.(e),
+		items: i
+	});
+}
+function ve({ value: e, defaultValue: t = "", onChange: n, mode: i, onModeChange: a, toolbar: o, mergeFields: s = [], readOnly: c = !1, showSource: l = !0, placeholder: u = "내용을 입력하세요.", minHeight: d = 240, maxHeight: f, width: v = "fill", allowSourceEdit: y = !0, className: b = "", ...x }) {
+	let S = e !== void 0, C = i !== void 0, [w, T] = _(() => c ? "preview" : "edit"), E = C ? i : w, [, D] = h((e) => e + 1, 0), [O, k] = _(""), A = g(null), j = g(n);
+	p(() => {
+		j.current = n;
+	}, [n]);
+	let M = V({
+		editable: !c,
+		content: S ? e : t,
+		extensions: ge(),
+		immediatelyRender: !1,
+		shouldRerenderOnTransaction: !0
+	});
+	p(() => {
+		if (!M) return;
+		let e = () => j.current?.(M.getHTML());
+		return M.on("update", e), () => {
+			M.off("update", e);
+		};
+	}, [M]), p(() => {
+		M?.setEditable(!c);
+	}, [M, c]), p(() => {
+		c && !C && w === "edit" && T("preview");
+	}, [
+		c,
+		C,
+		w
+	]), p(() => {
+		!l && !C && w === "source" && T("edit");
+	}, [
+		l,
+		C,
+		w
+	]), m(() => {
+		!M || !S || e !== M.getHTML() && (M.commands.setContent(e, { emitUpdate: !1 }), E === "source" && k((t) => t === e ? t : e), D());
+	}, [
+		M,
+		e,
+		S,
+		E
+	]);
+	let N = (e) => {
+		e !== E && (M && (E === "source" && (M.commands.setContent(O, { emitUpdate: !1 }), j.current?.(M.getHTML())), e === "source" && k(M.getHTML())), C || T(e), a?.(e));
+	}, P = (e) => {
+		let t = e.target.value;
+		k(t), j.current?.(t);
+	};
+	m(() => {
+		if (E !== "source") return;
+		let e = A.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}, [E, O]);
+	let F = y && !c, I = E === "preview" && M ? M.getHTML() : "", L = typeof d == "number" ? `${d}px` : d, H = v === "fill" ? "100%" : typeof v == "number" ? `${v}px` : v, U = (e) => f == null ? e : /* @__PURE__ */ R(r, {
+		maxHeight: f,
+		children: e
+	}), W;
+	return E === "source" ? (W = /* @__PURE__ */ R("textarea", {
+		ref: A,
+		value: O,
+		onChange: P,
+		readOnly: !F,
+		spellCheck: !1,
+		className: "block w-full resize-none overflow-hidden bg-editor-source-bg px-spacing-7 py-spacing-6 font-mono text-13 text-editor-source-text outline-none",
+		style: { minHeight: L }
+	}), W = f == null ? W : /* @__PURE__ */ R(r, {
+		maxHeight: f,
+		variant: "light",
+		children: W
+	})) : W = U(E === "preview" ? /* @__PURE__ */ R("div", {
+		className: "tiptap-prose px-spacing-7 py-spacing-6",
+		style: { minHeight: L },
+		dangerouslySetInnerHTML: { __html: I }
+	}) : /* @__PURE__ */ z("div", {
+		className: "relative tiptap-prose cursor-text px-spacing-7 py-spacing-6",
+		style: { minHeight: L },
+		onMouseDown: (e) => {
+			M && !e.target.closest(".tiptap") && (e.preventDefault(), M.commands.focus("end"));
+		},
+		children: [M?.isEmpty && /* @__PURE__ */ R("p", {
+			className: "pointer-events-none absolute left-spacing-7 top-spacing-6 text-14 leading-30 text-editor-placeholder",
+			children: u
+		}), /* @__PURE__ */ R(B, { editor: M })]
+	})), /* @__PURE__ */ z("div", {
+		className: `overflow-hidden rounded-round-4 border border-editor-outline bg-white ${b}`,
+		style: { width: H },
+		...x,
+		children: [/* @__PURE__ */ R("div", {
+			className: "border-b border-editor-divider bg-editor-toolbar-bg",
+			children: /* @__PURE__ */ z("div", {
+				className: "flex items-center justify-between gap-spacing-5 px-spacing-5 py-spacing-3",
+				children: [E === "edit" && !c ? /* @__PURE__ */ R(Q, {
+					editor: M,
+					toolbar: o,
+					mergeFields: s
+				}) : /* @__PURE__ */ R("span", {
+					className: "text-12 text-font-icon-5",
+					children: E === "source" ? "HTML 소스" : E === "preview" ? "미리보기" : ""
+				}), /* @__PURE__ */ R("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ R(_e, {
+						mode: E,
+						onChange: N,
+						readOnly: c,
+						showSource: l
+					})
+				})]
+			})
+		}), W]
+	});
+}
+//#endregion
+//#region src/components/NoticeWritingTemplate.tsx
+var $ = [
+	{
+		value: "site",
+		label: "채용사이트 안내문",
+		titlePlaceholder: "채용 사이트안내문 제목을 입력하세요"
+	},
+	{
+		value: "email",
+		label: "이메일 안내문",
+		titlePlaceholder: "이메일 안내문 제목을 입력하세요"
+	},
+	{
+		value: "sms",
+		label: "SMS 안내문"
+	}
+], ye = "90byte를 초과(한글 45자)하면 멀티 문자로 전환되며, 발송 비용이 변경될 수 있습니다.", be = [
+	"undo",
+	"redo",
+	"mergefield"
+], xe = () => ({
+	site: [],
+	email: [],
+	sms: []
+});
+function Se({ channel: e, defaultChannel: n = "site", onChannelChange: r, onChange: i, showTabs: a = !0, tabVariant: s = "fill", enabledChannels: l, mergeFields: u = [], defaultBodies: d, showAttach: f = !0, maxAttachments: p = 5, attachGuide: m = "파일을 첨부하세요 (파일당 최대 10MB).", attachAccept: h, editorMinHeight: g = 360, editorMaxHeight: v, editorReadOnly: y = !1, editorPlaceholder: b, className: x = "", ...S }) {
+	let C = e !== void 0, [w, T] = _(n), E = (e) => !l || l.includes(e), D = C ? e : w, O = E(D) ? D : $.find((e) => E(e.value))?.value ?? D, k = (e) => {
+		C || T(e), r?.(e);
+	}, [j, M] = _({
+		site: "",
+		email: "",
+		sms: ""
+	}), [N, P] = _(() => ({
+		site: "",
+		email: "",
+		sms: "",
+		...d || {}
+	})), [F, I] = _(xe), L = (e) => i?.({
+		channel: O,
+		titles: j,
+		bodies: N,
+		attachments: F,
+		...e
+	}), B = $.find((e) => e.value === O) ?? $[0], V = O === "sms", H = (e) => {
+		let t = {
+			...j,
+			[O]: e
+		};
+		M(t), L({ titles: t });
+	}, U = (e) => {
+		let t = {
+			...N,
+			[O]: e
+		};
+		P(t), L({ bodies: t });
+	}, W = (e) => {
+		let t = {
+			...F,
+			[O]: [...F[O], ...Array.from(e).map((e) => ({
+				name: e.name,
+				size: Math.max(.1, Math.round(e.size / 1048576 * 10) / 10),
+				id: `${e.name}-${e.size}-${Date.now()}`,
+				file: e
+			}))].slice(0, p)
+		};
+		I(t), L({ attachments: t });
+	}, G = (e, t) => {
+		let n = {
+			...F,
+			[O]: F[O].filter((e, n) => n !== t)
+		};
+		I(n), L({ attachments: n });
+	};
+	return /* @__PURE__ */ z("div", {
+		className: `flex w-full flex-col gap-spacing-6 ${x}`,
+		...S,
+		children: [
+			a && /* @__PURE__ */ R(c, {
+				items: $.map(({ value: e, label: t }) => ({
+					value: e,
+					label: t,
+					disabled: !E(e)
+				})),
+				value: O,
+				onChange: k,
+				variant: s
+			}),
+			V ? /* @__PURE__ */ R("p", {
+				className: "text-12 text-font-icon-4",
+				children: ye
+			}) : /* @__PURE__ */ z("div", {
+				className: "flex items-start gap-spacing-6",
+				children: [/* @__PURE__ */ R("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ R(t, {
+						width: "100%",
+						placeholder: B.titlePlaceholder,
+						value: j[O],
+						onChange: (e) => H(e.target.value)
+					})
+				}), f && /* @__PURE__ */ R(o, {
+					triggerText: "첨부파일",
+					buttonProps: { leftIcon: A },
+					placement: "auto-right",
+					menuWidth: 320,
+					files: F[O],
+					guide: m,
+					accept: h,
+					maxCount: p,
+					onAdd: W,
+					onDelete: G
+				})]
+			}),
+			/* @__PURE__ */ R(ve, {
+				value: N[O],
+				onChange: U,
+				mergeFields: u,
+				toolbar: V ? be : void 0,
+				showSource: !V,
+				minHeight: g,
+				maxHeight: v,
+				readOnly: y,
+				...b ? { placeholder: b } : {}
+			})
+		]
+	});
+}
+//#endregion
+export { ve as Editor, Q as EditorToolbar, me as MergeFieldNode, Se as NoticeWritingTemplate };
+
+//# sourceMappingURL=editor.js.map