legal-doc-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 legal-doc-editor contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# legal-doc-editor
+
+계약서·합의서 같은 **법률문서를 만드는 React 에디터**입니다.
+
+- **조·항·호 자동 번호**: 조를 넣거나 옮기면 제1조, ①, 1. 번호가 알아서 다시 매겨져요
+- **`{{변수}}` 채우기**: 본문에 `{{갑}}`을 입력하면 입력칸이 생기고, 값을 넣으면 문서에 반영돼요
+- **한글(.hwp·.hwpx)·Word(.docx) 열기·저장**: 일반 문단으로 쓴 계약서도 "제N조", "①", "1." 패턴을 인식해서 조·항·호 구조로 바꿔요
+  - 저장은 `.docx`와 `.hwpx`예요. `.hwpx`는 한글 2014 이상에서 열리고, 한글에서 `.hwp`로 다시 저장할 수 있어요
+  - 파일 변환 라이브러리는 필요할 때만 불러와서 에디터 본체 번들은 가벼워요
+- **인쇄·PDF**: 비어 있는 변수는 손으로 쓰는 밑줄 칸으로 인쇄돼요
+
+에디터 엔진은 [Tiptap](https://tiptap.dev)(ProseMirror)을, 파일 변환은 [docx](https://github.com/dolanmiu/docx)·[mammoth](https://github.com/mwilliamson/mammoth.js)·[hwp-convert](https://www.npmjs.com/package/hwp-convert)를 씁니다.
+
+## 설치
+
+```bash
+npm i legal-doc-editor
+```
+
+## 사용
+
+```tsx
+import { LegalEditor } from 'legal-doc-editor'
+import 'legal-doc-editor/style.css'
+
+const template = `
+<h1>비밀유지계약서</h1>
+<p>{{갑}}과 {{을}}은 다음과 같이 계약을 체결한다.</p>
+<h2>(목적)</h2>
+<ol><li><p>첫째 항</p></li><li><p>둘째 항</p></li></ol>
+`
+
+export default function Page() {
+  return <LegalEditor content={template} onChange={(html) => save(html)} />
+}
+```
+
+### 문서 구조
+
+| 요소 | 의미 | 표시 |
+| --- | --- | --- |
+| `h1` | 문서 제목 | 가운데 정렬 |
+| `h2` | 조 | 제N조 |
+| `h3` | 소제목 (청구취지·고소이유 등) | 가운데 정렬 |
+| `p[data-num="1"~"4"]` | 번호 문단 (소장식) | 1. → 가. → (1) → (가), 제목·조·소제목마다 1부터 |
+| `table` | 표 | 표 |
+| `ol > li` | 항 | ①, ② |
+| `ol ol > li` | 호 | 1., 2. |
+| `span[data-var]` 또는 `{{이름}}` | 변수 | 입력값 |
+
+## API
+
+| 이름 | 설명 |
+| --- | --- |
+| `<LegalEditor content values onChange onValuesChange editable />` | 에디터 컴포넌트 |
+| `fillTemplate(html, values)` | 변수를 채운 완성본 HTML. `.legal-doc` 안에서 렌더하면 번호가 붙어요 |
+| `toDocx(editor.getJSON(), values)` | `.docx` Blob 생성 |
+| `toHwpx(editor.getJSON(), values)` | `.hwpx` Blob 생성 |
+| `toPlainHtml(editor.getJSON(), values)` | 번호가 텍스트로 들어간 독립 HTML |
+| `fromFile(file)` | `.docx` / `.hwp` / `.hwpx`를 에디터용 HTML로 변환 (`fromDocx`, `fromHwp`도 있음) |
+| `normalizeLegalHtml(html)` | "제N조 / ① / 1." 문단을 조·항·호 구조로 변환 |
+| `Variable` | 다른 Tiptap 에디터에 넣어 쓸 수 있는 변수 확장 |
+| `Numbering` | 번호 문단 확장 (`setNumbering(1~4 \| null)`, Tab·Shift+Tab 단계 변경, 맨 앞 Backspace 해제) |
+
+## 로드맵
+
+- [x] HWP / HWPX 열기, HWPX 저장
+- [ ] `.hwp` 바이너리로 바로 저장 ([rhwp](https://github.com/edwardkim/rhwp) 검토)
+- [ ] 옛 Word `.doc` 열기
+- [ ] 표
+- [ ] 조항 라이브러리(자주 쓰는 조항 끼워 넣기)
+
+## 개발
+
+```bash
+npm i
+npm run dev    # 데모: http://localhost:5173
+npm run build  # dist/
+```
+
+## 라이선스
+
+MIT

package/dist/LegalEditor.d.ts

@@ -0,0 +1,12 @@
+import { type Values } from './variable';
+import './legal.css';
+export interface LegalEditorProps {
+    /** 템플릿 HTML. {{변수}} 텍스트는 변수로 바뀜 */
+    content?: string;
+    /** 초기 입력값 */
+    values?: Values;
+    onChange?: (html: string) => void;
+    onValuesChange?: (values: Values) => void;
+    editable?: boolean;
+}
+export declare function LegalEditor({ content, values: initial, onChange, onValuesChange, editable }: LegalEditorProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { LegalEditor } from './LegalEditor';
+export type { LegalEditorProps } from './LegalEditor';
+export { Variable, fillTemplate, toChips } from './variable';
+export { Numbering } from './numbering';
+export type { Values } from './variable';
+export { toDocx, toHwpx, toPlainHtml, fromDocx, fromHwp, fromFile, normalizeLegalHtml } from './io';

package/dist/index.js

@@ -0,0 +1,543 @@
+import { useEffect as e, useState as t } from "react";
+import { EditorContent as n, useEditor as r } from "@tiptap/react";
+import i from "@tiptap/starter-kit";
+import { TableKit as a } from "@tiptap/extension-table";
+import { Extension as o, Node as s, nodeInputRule as c, nodePasteRule as l } from "@tiptap/core";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/variable.ts
+var f = s.create({
+	name: "variable",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	addAttributes() {
+		return { name: {
+			default: "",
+			parseHTML: (e) => e.getAttribute("data-var"),
+			renderHTML: (e) => ({ "data-var": e.name })
+		} };
+	},
+	addStorage() {
+		return {
+			values: {},
+			views: /* @__PURE__ */ new Set()
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-var]" }];
+	},
+	renderHTML({ node: e, HTMLAttributes: t }) {
+		return [
+			"span",
+			t,
+			e.attrs.name
+		];
+	},
+	addNodeView() {
+		return ({ node: e }) => {
+			let t = document.createElement("span"), n = () => {
+				let n = this.storage.values[e.attrs.name];
+				t.textContent = n || e.attrs.name, t.className = n ? "le-var" : "le-var le-var--empty";
+			};
+			return n(), this.storage.views.add(n), {
+				dom: t,
+				destroy: () => this.storage.views.delete(n)
+			};
+		};
+	},
+	addInputRules() {
+		return [c({
+			find: /\{\{[^{}<>"]+\}\}$/,
+			type: this.type,
+			getAttributes: (e) => ({ name: e[0].slice(2, -2).trim() })
+		})];
+	},
+	addPasteRules() {
+		return [l({
+			find: /\{\{[^{}<>"]+\}\}/g,
+			type: this.type,
+			getAttributes: (e) => ({ name: e[0].slice(2, -2).trim() })
+		})];
+	}
+}), p = (e) => e.replace(/\{\{([^{}<>"]+)\}\}/g, (e, t) => `<span data-var="${t.trim().replace(/&/g, "&amp;")}"></span>`);
+function m(e, t) {
+	let n = new DOMParser().parseFromString(p(e), "text/html");
+	return n.querySelectorAll("span[data-var]").forEach((e) => {
+		let n = e.getAttribute("data-var");
+		e.replaceWith(t[n] || `[${n}]`);
+	}), n.body.innerHTML;
+}
+//#endregion
+//#region src/numbering.ts
+var h = 4, g = o.create({
+	name: "numbering",
+	priority: 1e3,
+	addGlobalAttributes() {
+		return [{
+			types: ["paragraph"],
+			attributes: { num: {
+				default: null,
+				parseHTML: (e) => {
+					let t = Number(e.getAttribute("data-num"));
+					return t >= 1 && t <= h ? t : null;
+				},
+				renderHTML: (e) => e.num ? { "data-num": e.num } : {}
+			} }
+		}];
+	},
+	addCommands() {
+		return { setNumbering: (e) => ({ commands: t }) => t.updateAttributes("paragraph", { num: e }) };
+	},
+	addKeyboardShortcuts() {
+		let e = () => this.editor.getAttributes("paragraph").num, t = (t) => () => {
+			let n = e();
+			return !!n && this.editor.commands.setNumbering(Math.min(h, Math.max(1, n + t)));
+		};
+		return {
+			Tab: t(1),
+			"Shift-Tab": t(-1),
+			Backspace: () => {
+				let { empty: t, $from: n } = this.editor.state.selection;
+				return !!e() && t && n.parentOffset === 0 && this.editor.commands.setNumbering(null);
+			},
+			Enter: () => !!e() && this.editor.state.selection.$from.parent.content.size === 0 && this.editor.commands.setNumbering(null)
+		};
+	}
+}), _ = (e) => e < 20 ? String.fromCharCode(9312 + e) : `${e + 1}.`, v = "가나다라마바사아자차카타파하", y = (e) => {
+	let t = "";
+	for (; e > 0; e = Math.floor(e / 14)) t = v[--e % 14] + t;
+	return t;
+}, b = (e, t) => [
+	`${t}.`,
+	`${y(t)}.`,
+	`(${t})`,
+	`(${y(t)})`
+][e - 1];
+function x(e, t) {
+	let n = [], r = 0, i = (e = []) => e.map((e) => {
+		if (e.type === "hardBreak") return {
+			text: "",
+			br: !0
+		};
+		if (e.type === "variable") return { text: t[e.attrs.name] || `[${e.attrs.name}]` };
+		let n = new Set(e.marks?.map((e) => e.type));
+		return {
+			text: e.text ?? "",
+			bold: n.has("bold"),
+			italics: n.has("italic"),
+			strike: n.has("strike"),
+			underline: n.has("underline")
+		};
+	}), a = (e) => e.map((e) => ({
+		...e,
+		bold: !0
+	})), o = (e, t) => e.content?.forEach((r, a) => r.content?.forEach((r, s) => {
+		if (r.type === "orderedList" || r.type === "bulletList") return o(r, t + 1);
+		let c = a + (e.attrs?.start ?? 1), l = s > 0 ? "" : e.type === "bulletList" ? "•" : t === 0 ? _(c - 1) : `${c}.`;
+		n.push({
+			kind: "para",
+			label: l,
+			depth: t + 1,
+			runs: i(r.content)
+		});
+	})), s = [
+		0,
+		0,
+		0,
+		0,
+		0
+	], c = (e = []) => {
+		for (let t of e) {
+			let e = t.type === "heading" ? t.attrs?.level : 0, l = t.type === "paragraph" ? t.attrs?.num : void 0;
+			e && s.fill(0), e === 1 ? n.push({
+				kind: "title",
+				label: "",
+				depth: 0,
+				runs: i(t.content)
+			}) : e === 2 ? n.push({
+				kind: "article",
+				label: `제${++r}조`,
+				depth: 0,
+				runs: a(i(t.content))
+			}) : e === 3 ? n.push({
+				kind: "section",
+				label: "",
+				depth: 0,
+				runs: a(i(t.content))
+			}) : t.type === "orderedList" || t.type === "bulletList" ? o(t, 0) : l ? (s[l]++, s.fill(0, l + 1), n.push({
+				kind: "para",
+				label: b(l, s[l]),
+				depth: l,
+				runs: i(t.content)
+			})) : t.type === "paragraph" ? n.push({
+				kind: "para",
+				label: "",
+				depth: 0,
+				runs: i(t.content)
+			}) : t.type === "table" ? n.push({
+				kind: "table",
+				rows: (t.content ?? []).map((e) => (e.content ?? []).map((e) => ({
+					runs: (e.content ?? []).flatMap((e, t) => [...t ? [{
+						text: "",
+						br: !0
+					}] : [], ...i(e.content)]),
+					colspan: e.attrs?.colspan ?? 1,
+					rowspan: e.attrs?.rowspan ?? 1
+				})))
+			}) : c(t.content);
+		}
+	};
+	return c(e.content), n;
+}
+var S = (e) => e.replace(/[&<>"]/g, (e) => `&#${e.charCodeAt(0)};`), C = (e) => e.map((e) => {
+	if (e.br) return "<br>";
+	let t = S(e.text);
+	return e.bold && (t = `<b>${t}</b>`), e.italics && (t = `<i>${t}</i>`), e.underline && (t = `<u>${t}</u>`), e.strike && (t = `<s>${t}</s>`), t;
+}).join("");
+function w(e, t) {
+	return x(e, t).map((e) => {
+		if (e.kind === "table") {
+			let t = (e) => `<td${e.colspan > 1 ? ` colspan="${e.colspan}"` : ""}${e.rowspan > 1 ? ` rowspan="${e.rowspan}"` : ""}>${C(e.runs)}</td>`;
+			return `<table>${e.rows.map((e) => `<tr>${e.map(t).join("")}</tr>`).join("")}</table>`;
+		}
+		let t = (e.label ? e.kind === "article" ? `<b>${e.label}</b> ` : `${e.label} ` : "") + C(e.runs);
+		if (e.kind === "title") return `<h1>${t}</h1>`;
+		if (e.kind === "section") return `<h3>${t}</h3>`;
+		let n = e.label ? e.depth - 1 : e.depth;
+		return n > 0 ? `<p style="margin-left:${n * 2}em">${t}</p>` : `<p>${t}</p>`;
+	}).join("\n");
+}
+function T(e, t) {
+	for (let n of x(e, t)) if (n.kind === "title") return n.runs.map((e) => e.text).join("").trim() || "문서";
+	return "문서";
+}
+async function E(e, t) {
+	let { AlignmentType: n, Document: r, HeadingLevel: i, Packer: a, Paragraph: o, Table: s, TableCell: c, TableRow: l, TextRun: u, WidthType: d } = await import("docx"), f = (e) => new u({
+		text: e.text,
+		break: e.br ? 1 : void 0,
+		bold: e.bold,
+		italics: e.italics,
+		strike: e.strike,
+		underline: e.underline ? {} : void 0
+	}), p = x(e, t).map((e) => e.kind === "table" ? new s({
+		width: {
+			size: 100,
+			type: d.PERCENTAGE
+		},
+		rows: e.rows.map((e) => new l({ children: e.map((e) => new c({
+			columnSpan: e.colspan,
+			rowSpan: e.rowspan,
+			children: [new o({ children: e.runs.map(f) })]
+		})) }))
+	}) : new o({
+		heading: e.kind === "title" ? i.HEADING_1 : void 0,
+		alignment: e.kind === "section" ? n.CENTER : void 0,
+		spacing: e.kind === "article" || e.kind === "section" ? { before: 240 } : void 0,
+		indent: e.depth ? {
+			left: 400 * e.depth,
+			hanging: e.label ? 400 : 0
+		} : void 0,
+		children: [...e.label ? [new u({
+			text: `${e.label} `,
+			bold: e.kind === "article"
+		})] : [], ...e.runs.map(f)]
+	}));
+	return a.toBlob(new r({
+		title: T(e, t),
+		styles: {
+			default: { document: { run: {
+				font: "바탕",
+				size: 22
+			} } },
+			paragraphStyles: [{
+				id: "Heading1",
+				name: "Heading 1",
+				basedOn: "Normal",
+				next: "Normal",
+				run: {
+					bold: !0,
+					size: 32,
+					color: "000000"
+				},
+				paragraph: {
+					alignment: n.CENTER,
+					spacing: { after: 400 }
+				}
+			}]
+		},
+		sections: [{ children: p }]
+	}));
+}
+async function D(e, t) {
+	let { htmlToHwpx: n } = await import("hwp-convert"), r = await n(w(e, t), { title: T(e, t) });
+	return new Blob([r], { type: "application/hwp+zip" });
+}
+var O = /^\s*제\s*\d+\s*조(?:의\s*\d+)?\s*/, k = /^\s*[①-⑳]\s*/, A = /^\s*(\d+)\.\s*/, j = /^(청구취지|청구원인|신청취지|신청이유|고소취지|고소이유|고발취지|고발이유|입증방법|증명방법|증거방법|증거서류|첨부서류|당사자관계|사건개요)$/, M = (e) => e.length <= 20 && (/^[가-힣](\s+[가-힣]){3,7}$/.test(e) || j.test(e.replace(/\s/g, ""))), N = /\[\s*([^[\]{}<>"\d=]{1,20}?)\s*\]/g, P = [
+	[/^\s*(\d{1,2})\.(?!\d)\s*/, Number],
+	[/^\s*([가나다라마바사아자차카타파하])\.\s*/, (e) => v.indexOf(e) + 1],
+	[/^\s*\((\d{1,2})\)\s*/, Number],
+	[/^\s*\(([가나다라마바사아자차카타파하])\)\s*/, (e) => v.indexOf(e) + 1]
+];
+function F(e) {
+	for (let [t, [n, r]] of P.entries()) {
+		let i = e.match(n);
+		if (i) return {
+			level: t + 1,
+			n: r(i[1]),
+			length: i[0].length
+		};
+	}
+	return null;
+}
+function I(e, t) {
+	let n = typeof t == "number" ? t : e.textContent.match(t)[0].length, r = e.ownerDocument.createTreeWalker(e, NodeFilter.SHOW_TEXT);
+	for (let e = r.nextNode(); e && n > 0; e = r.nextNode()) {
+		let t = Math.min(n, e.data.length);
+		e.data = e.data.slice(t), n -= t;
+	}
+}
+function L(e) {
+	let t = new DOMParser().parseFromString(e, "text/html");
+	for (let e of [...t.body.children]) e.tagName === "P" && !e.textContent.trim() && !e.querySelector("img") && e.remove();
+	let n = t.createTreeWalker(t.body, NodeFilter.SHOW_TEXT);
+	for (let e = n.nextNode(); e; e = n.nextNode()) {
+		let t = e.parentElement?.closest("p,li,td,th,h1,h2,h3")?.textContent?.trim();
+		e.data = e.data.replace(N, (e, n) => e.trim() === t ? e : `{{${n.trim()}}}`);
+	}
+	let r = t.body.firstElementChild, i = r?.textContent.trim() ?? "";
+	if (!t.querySelector("h1") && r?.tagName === "P" && i.length <= 30 && !/[.다]$/.test(i) && !O.test(i)) {
+		let e = t.createElement("h1");
+		e.textContent = i, r.replaceWith(e);
+	}
+	let a = null, o = [
+		0,
+		0,
+		0,
+		0,
+		0
+	], s = [
+		0,
+		0,
+		0,
+		0,
+		0
+	];
+	for (let e of [...t.body.children]) {
+		let n = e.textContent ?? "", r = n.replace(/\s+/g, " ").trim();
+		if (e.tagName === "P" && M(r)) {
+			let n = t.createElement("h3");
+			n.textContent = r, e.replaceWith(n), a = null, o.fill(0), s.fill(0);
+		} else if (e.tagName === "P" && O.test(n)) {
+			let n = t.createElement("h2");
+			n.innerHTML = e.innerHTML, I(n, O), e.replaceWith(n), a = null, o.fill(0), s.fill(0);
+		} else if (e.tagName === "P" && k.test(n)) {
+			let r = n.trim().charCodeAt(0) - 9311;
+			(!a || a.children.length + Number(a.getAttribute("start") ?? 1) !== r) && (e.before(a = t.createElement("ol")), r > 1 && a.setAttribute("start", String(r))), I(e, k);
+			let i = t.createElement("li");
+			i.append(e), a.append(i);
+		} else if (e.tagName === "P" && a && A.test(n) && Number(n.match(A)[1]) === (a.lastElementChild.querySelector(":scope > ol")?.children.length ?? 0) + 1) {
+			let n = a.lastElementChild, r = n.querySelector(":scope > ol") ?? n.appendChild(t.createElement("ol"));
+			I(e, A);
+			let i = t.createElement("li");
+			i.append(e), r.append(i);
+		} else {
+			a = null;
+			let t = e.tagName === "P" ? F(n) : null;
+			if (!t) continue;
+			s[t.level] && t.n === s[t.level] + 1 ? s[t.level]++ : t.n === o[t.level] + 1 ? (o[t.level]++, o.fill(0, t.level + 1), s.fill(0), I(e, t.length), e.setAttribute("data-num", String(t.level))) : s[t.level] = +(t.n === 1);
+		}
+	}
+	return t.body.innerHTML;
+}
+async function R(e) {
+	let { default: t } = await import("mammoth"), { value: n } = await t.convertToHtml({ arrayBuffer: await e.arrayBuffer() });
+	return L(n);
+}
+async function z(e) {
+	let { detectFormat: t, hwpToHwpx: n, HwpxReader: r } = await import("hwp-convert"), i = new Uint8Array(await e.arrayBuffer());
+	t(i) === "hwp" && (i = new Uint8Array(await n(i)));
+	let a = new r();
+	return await a.loadFromArrayBuffer(i.buffer), L(await a.extractHtml());
+}
+function B(e) {
+	return /\.docx$/i.test(e.name) ? R(e) : /\.hwpx?$/i.test(e.name) ? z(e) : Promise.reject(/* @__PURE__ */ Error(".docx, .hwp, .hwpx 파일만 열 수 있어요"));
+}
+//#endregion
+//#region src/LegalEditor.tsx
+function V(e) {
+	let t = /* @__PURE__ */ new Set();
+	return e.state.doc.descendants((e) => {
+		e.type.name === "variable" && t.add(e.attrs.name);
+	}), [...t];
+}
+function H() {
+	let e = document.documentElement;
+	e.classList.add("le-printing"), window.addEventListener("afterprint", () => e.classList.remove("le-printing"), { once: !0 }), window.print();
+}
+function U(e, t) {
+	let n = document.createElement("a");
+	n.href = URL.createObjectURL(e), n.download = t, n.click(), setTimeout(() => URL.revokeObjectURL(n.href), 1e3);
+}
+function W({ content: o = "", values: s = {}, onChange: c, onValuesChange: l, editable: m = !0 }) {
+	let [h, _] = t(s), [v, y] = t([]), b = r({
+		extensions: [
+			i.configure({ heading: { levels: [
+				1,
+				2,
+				3
+			] } }),
+			a,
+			f,
+			g
+		],
+		content: p(o),
+		editable: m,
+		immediatelyRender: !1,
+		editorProps: { attributes: { class: "legal-doc" } },
+		onCreate: ({ editor: e }) => y(V(e)),
+		onUpdate: ({ editor: e }) => {
+			y(V(e)), c?.(e.getHTML());
+		}
+	});
+	e(() => {
+		b && (b.storage.variable.values = h, b.storage.variable.views.forEach((e) => e()));
+	}, [b, h]);
+	let x = (e, t) => {
+		let n = {
+			...h,
+			[e]: t
+		};
+		_(n), l?.(n);
+	}, S = () => {
+		let e = window.prompt("변수 이름 (예: 갑, 계약일)")?.replace(/[{}<>"]/g, "").trim();
+		e && b?.chain().focus().insertContent({
+			type: "variable",
+			attrs: { name: e }
+		}).run();
+	}, C = async (e) => {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", t && b) try {
+			b.commands.setContent(p(await B(t)), { emitUpdate: !0 });
+		} catch (e) {
+			window.alert(`파일을 열 수 없어요: ${e.message}`);
+		}
+	}, w = async (e, t) => {
+		let n = b.state.doc.firstChild?.textContent.trim() || "문서";
+		U(await e(b.getJSON(), h), `${n}.${t}`);
+	}, T = () => b.chain().focus(), O = (e) => T().setNumbering(b.getAttributes("paragraph").num === e ? null : e).run();
+	return /* @__PURE__ */ d("div", {
+		className: "le-root",
+		children: [/* @__PURE__ */ d("div", {
+			className: "le-main",
+			children: [m && b && /* @__PURE__ */ d("div", {
+				className: "le-toolbar",
+				children: [
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().toggleHeading({ level: 1 }).run(),
+						children: "제목"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().toggleHeading({ level: 3 }).run(),
+						children: "소제목"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().toggleHeading({ level: 2 }).run(),
+						children: "조"
+					}),
+					[
+						"1.",
+						"가.",
+						"(1)",
+						"(가)"
+					].map((e, t) => /* @__PURE__ */ u("button", {
+						type: "button",
+						title: "번호 문단 — Tab·Shift+Tab 단계 변경, 맨 앞 Backspace 해제",
+						onClick: () => O(t + 1),
+						children: e
+					}, e)),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().toggleOrderedList().run(),
+						children: "항"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().sinkListItem("listItem").run(),
+						children: "호 →"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().liftListItem("listItem").run(),
+						children: "← 내어쓰기"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().toggleBold().run(),
+						children: /* @__PURE__ */ u("b", { children: "B" })
+					}),
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: S,
+						children: ["{{ }}", " 변수"]
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => T().insertTable({
+							rows: 3,
+							cols: 3,
+							withHeaderRow: !1
+						}).run(),
+						children: "표"
+					}),
+					/* @__PURE__ */ u("span", { className: "le-spacer" }),
+					/* @__PURE__ */ d("label", {
+						className: "le-btn",
+						children: ["열기", /* @__PURE__ */ u("input", {
+							type: "file",
+							accept: ".docx,.hwp,.hwpx",
+							hidden: !0,
+							onChange: C
+						})]
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => w(E, "docx"),
+						children: "Word 저장"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => w(D, "hwpx"),
+						children: "한글 저장"
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: H,
+						children: "인쇄 · PDF"
+					})
+				]
+			}), /* @__PURE__ */ u(n, { editor: b })]
+		}), /* @__PURE__ */ d("aside", {
+			className: "le-panel",
+			children: [
+				/* @__PURE__ */ u("h3", { children: "입력값" }),
+				v.length === 0 && /* @__PURE__ */ d("p", {
+					className: "le-hint",
+					children: [
+						"본문에 ",
+						"{{당사자}}",
+						"처럼 입력하면 변수가 생겨요."
+					]
+				}),
+				v.map((e) => /* @__PURE__ */ d("label", { children: [e, /* @__PURE__ */ u("input", {
+					value: h[e] ?? "",
+					onChange: (t) => x(e, t.target.value)
+				})] }, e))
+			]
+		})]
+	});
+}
+//#endregion
+export { W as LegalEditor, g as Numbering, f as Variable, m as fillTemplate, R as fromDocx, B as fromFile, z as fromHwp, L as normalizeLegalHtml, p as toChips, E as toDocx, D as toHwpx, w as toPlainHtml };

package/dist/io.d.ts

@@ -0,0 +1,23 @@
+import type { JSONContent } from '@tiptap/core';
+import type { Values } from './variable';
+/** 번호가 텍스트로 박힌 독립 HTML — CSS 없이도 조·항·호가 보여서 메일·다른 변환기에 넘기기 좋음 */
+export declare function toPlainHtml(doc: JSONContent, values: Values): string;
+/** 에디터 JSON(editor.getJSON()) + 입력값 → .docx Blob */
+export declare function toDocx(doc: JSONContent, values: Values): Promise<Blob>;
+/** 에디터 JSON + 입력값 → .hwpx Blob (한글 2014 이상에서 열림) */
+export declare function toHwpx(doc: JSONContent, values: Values): Promise<Blob>;
+/**
+ * 문단으로만 된 법률문서 HTML(한글·워드에서 온 것)을 에디터 구조로 정리.
+ * - 빈 줄 문단 제거, 짧은 첫 줄 → 제목(h1), "청 구 취 지" 같은 소제목 → h3, [빈칸] → {{변수}}
+ * - "제N조…" → 조(h2), 연속된 "①…" → 항(ol), 항 바로 뒤 "1. …" → 호(중첩 ol)
+ * - 소장식 "1. / 가. / (1) / (가)" → 번호 문단(p[data-num]). 원문 번호가 자동 번호와 같을 때만 바꿈
+ * ponytail: 원문 조 번호는 버리고 자동 번호로 다시 매김 (제3조의2 같은 가지번호는 순번으로 바뀜).
+ *           "1)·가)" 형식은 아직 글자로 둠
+ */
+export declare function normalizeLegalHtml(html: string): string;
+/** .docx → 에디터용 HTML (서식은 문단·굵게·목록·표 수준으로 단순화됨) */
+export declare function fromDocx(file: Blob): Promise<string>;
+/** .hwp / .hwpx → 에디터용 HTML. .hwp는 hwpx로 바꾼 뒤 읽음 (암호화·배포용·HWP 3.0은 에러) */
+export declare function fromHwp(file: Blob): Promise<string>;
+/** 확장자로 골라 여는 헬퍼: .docx / .hwp / .hwpx */
+export declare function fromFile(file: File): Promise<string>;

package/dist/numbering.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        numbering: {
+            /** 선택한 문단을 번호 문단으로 (1: 1. / 2: 가. / 3: (1) / 4: (가)), null이면 해제 */
+            setNumbering: (level: number | null) => ReturnType;
+        };
+    }
+}
+export declare const Numbering: Extension<any, any>;

package/dist/style.css

@@ -0,0 +1,2 @@
+@counter-style le-circled{system:fixed;symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";suffix:" "}.legal-doc{counter-reset:le-article le-n1 le-n2 le-n3 le-n4;color:#111;background:#fff;outline:none;max-width:760px;margin:0 auto;padding:56px 64px;font-family:Noto Serif KR,Nanum Myeongjo,Batang,serif;font-size:15px;line-height:1.85}.legal-doc h1{text-align:center;letter-spacing:.25em;margin:0 0 1.6em;font-size:1.6em}.legal-doc h2{counter-increment:le-article;margin:1.6em 0 .3em;font-size:1em}.legal-doc h2:before{content:"제" counter(le-article) "조 "}.legal-doc p{margin:0 0 .4em}.legal-doc ol{margin:0 0 .4em;padding-left:1.8em;list-style:le-circled}.legal-doc ol ol{list-style:decimal}.legal-doc li p{margin:0}.legal-doc h3{text-align:center;letter-spacing:.3em;margin:1.8em 0 .8em;font-size:1.05em}.legal-doc>h1,.legal-doc>h2,.legal-doc>h3{counter-set:le-n1 le-n2 le-n3 le-n4}.legal-doc>p[data-num]{padding-left:calc(var(--le-num-indent,0em) + 2em);text-indent:-2em}.legal-doc>p[data-num]:before{text-indent:0;min-width:2em;display:inline-block}.legal-doc>p[data-num="1"]{counter-increment:le-n1;counter-set:le-n2 le-n3 le-n4}.legal-doc>p[data-num="2"]{counter-increment:le-n2;counter-set:le-n3 le-n4;--le-num-indent:1.2em}.legal-doc>p[data-num="3"]{counter-increment:le-n3;counter-set:le-n4;--le-num-indent:2.4em}.legal-doc>p[data-num="4"]{counter-increment:le-n4;--le-num-indent:3.6em}.legal-doc>p[data-num="1"]:before{content:counter(le-n1) "."}.legal-doc>p[data-num="2"]:before{content:counter(le-n2, hangul) "."}.legal-doc>p[data-num="3"]:before{content:"(" counter(le-n3) ")"}.legal-doc>p[data-num="4"]:before{content:"(" counter(le-n4, hangul) ")"}.legal-doc .tableWrapper{overflow-x:auto}.legal-doc table{border-collapse:collapse;width:100%;margin:.6em 0;font-size:.93em}.legal-doc td,.legal-doc th{vertical-align:top;border:1px solid #555;padding:3px 6px}.legal-doc td p,.legal-doc th p{margin:0}.legal-doc .selectedCell{background:#e5edff}.le-root{background:#eef0f3;grid-template-columns:minmax(0,1fr) 260px;gap:16px;padding:16px;font:14px/1.5 system-ui,sans-serif;display:grid}.le-main{min-width:0}.le-toolbar{z-index:1;background:#fff;border-radius:8px;flex-wrap:wrap;gap:4px;max-width:760px;margin:0 auto 8px;padding:6px;display:flex;position:sticky;top:0;box-shadow:0 1px 2px #0001}.le-toolbar button,.le-toolbar .le-btn{cursor:pointer;font:inherit;background:#fff;border:1px solid #d0d4da;border-radius:6px;padding:4px 10px}.le-toolbar button:hover{background:#f3f5f8}.le-spacer{flex:1}.le-main .legal-doc{min-height:900px;box-shadow:0 1px 4px #0002}.le-var{color:#1d3f94;background:#e5edff;border-radius:3px;padding:0 3px}.le-var--empty{color:#8a5a00;background:#fff1c2}.le-panel{background:#fff;border-radius:8px;align-self:start;padding:14px;position:sticky;top:16px;box-shadow:0 1px 2px #0001}.le-panel h3{margin:0 0 10px;font-size:14px}.le-panel label{color:#444;gap:3px;margin-bottom:10px;font-size:13px;display:grid}.le-panel input{font:inherit;border:1px solid #d0d4da;border-radius:6px;padding:6px 8px}.le-hint{color:#777;margin:0;font-size:13px}@media (width<=800px){.le-root{grid-template-columns:1fr}.legal-doc{padding:32px 24px}}@media print{.le-printing body *{visibility:hidden}.le-printing .legal-doc,.le-printing .legal-doc *{visibility:visible}.le-printing .legal-doc{width:100%;max-width:none;box-shadow:none;padding:0;position:absolute;top:0;left:0}.le-printing .le-var{color:inherit;background:0 0;padding:0}.le-printing .le-var--empty{color:#0000;border-bottom:1px solid #000}}
+/*$vite$:1*/

package/dist/variable.d.ts

@@ -0,0 +1,16 @@
+import { Node } from '@tiptap/core';
+export type Values = Record<string, string>;
+export interface VariableStorage {
+    values: Values;
+    views: Set<() => void>;
+}
+declare module '@tiptap/core' {
+    interface Storage {
+        variable: VariableStorage;
+    }
+}
+export declare const Variable: Node<object, VariableStorage>;
+/** 원문 HTML의 {{이름}} 텍스트를 변수 노드로 바꿈 */
+export declare const toChips: (html: string) => string;
+/** 에디터 HTML + 입력값 → 완성 문서 HTML. 비어 있는 값은 [이름]으로 남김. .legal-doc 안에서 렌더하면 조항 번호가 붙음 */
+export declare function fillTemplate(html: string, values: Values): string;

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "legal-doc-editor",
+  "version": "0.1.0",
+  "description": "법률문서(계약서·소장·고소장) 생성용 React 에디터 — 조항·번호 자동 매김, {{변수}} 채우기, 한글(hwp·hwpx)·Word(docx) 열기·저장",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hwondev/legal-doc-editor.git"
+  },
+  "homepage": "https://github.com/hwondev/legal-doc-editor#readme",
+  "bugs": "https://github.com/hwondev/legal-doc-editor/issues",
+  "keywords": ["react", "editor", "legal", "contract", "korean", "hwp", "hwpx", "docx", "tiptap", "법률문서", "계약서", "소장"],
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "check": "node scripts/check.ts",
+    "prepublishOnly": "npm run check && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-table": "^3.31.3",
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "docx": "^9.7.1",
+    "hwp-convert": "^1.13.0",
+    "mammoth": "^1.12.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.0"
+  }
+}