@guodun/antdv 1.2.5 → 1.3.1

package/dist/es/components/pro-contract-template-designer/src/DesignerPage.vue.mjs

@@ -1,12 +1,18 @@
 import { CONTRACT_TEXT_STYLE_PRESETS as e } from "./constants.mjs";
-import { buildTemplateVariableAttrs as t } from "./extensions/template-variable.mjs";
-import { createEditorExtensions as n } from "./extensions/editor-extensions.mjs";
-import { DEFAULT_FIELD_STYLE as r, resolvePageSize as i, splitPageContentByMeasurements as a } from "./composables/use-template-designer.mjs";
-import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, toDisplayString as v, unref as y, watch as b, withModifiers as x } from "vue";
-import { EditorContent as S, useEditor as ee } from "@tiptap/vue-3";
-import { generateHTML as C } from "@tiptap/core";
+import { buildTemplateVariableAttrs as t, insertTemplateVariableNode as n } from "./extensions/template-variable.mjs";
+import { normalizeContractImageDimension as r } from "./utils/content-image.mjs";
+import { createEditorExtensions as i, runContractTemplateEditorCommand as a } from "./extensions/editor-extensions.mjs";
+import { resolveEditorContextMenuKind as o } from "./utils/context-variable.mjs";
+import { SIGNING_PLACEMENT_MIME as s, canMutateSigningPlacements as c, getSigningPlacementDefaultSize as ee, parseSigningPlacementDragPayload as te } from "./utils/signing-placement.mjs";
+import { DEFAULT_FIELD_STYLE as ne, resolvePageSize as re, splitPageContentByMeasurements as l } from "./composables/use-template-designer.mjs";
+import ie from "./SigningPlacementLayer.mjs";
+import { computed as u, createBlock as ae, createCommentVNode as oe, createElementBlock as se, createElementVNode as d, createVNode as ce, defineComponent as f, nextTick as le, normalizeClass as ue, normalizeStyle as p, onBeforeUnmount as de, openBlock as m, ref as fe, toDisplayString as h, unref as g, watch as _, withModifiers as pe } from "vue";
+import { EditorContent as me, useEditor as he } from "@tiptap/vue-3";
+import { generateHTML as ge } from "@tiptap/core";
+import { CellSelection as v, deleteColumn as _e, deleteRow as ve, deleteTable as ye } from "@tiptap/pm/tables";
+import { NodeSelection as y } from "@tiptap/pm/state";
 //#region src/components/pro-contract-template-designer/src/DesignerPage.vue?vue&type=script&setup=true&lang.ts
-var w = { class: "gd-contract-template-designer__page-title" }, T = /* @__PURE__ */ d({
+var be = { class: "gd-contract-template-designer__page-title" }, b = "application/x-gd-contract-variable-move", xe = 8, x = /* @__PURE__ */ f({
 	name: "ProContractTemplateDesignerPage",
 	__name: "DesignerPage",
 	props: {
@@ -27,162 +33,413 @@ var w = { class: "gd-contract-template-designer__page-title" }, T = /* @__PURE__
 			type: Boolean,
 			default: !1
 		},
-		zoom: { default: 1 }
+		zoom: { default: 1 },
+		signingPlacements: { default: () => [] },
+		selectedSigningPlacementId: { default: "" },
+		processImageFile: {
+			type: Function,
+			default: void 0
+		}
 	},
 	emits: [
 		"page-update",
 		"variable-drop",
+		"signing-placement-drop",
+		"signing-placement-select",
+		"signing-placement-move",
+		"signing-placement-remove",
 		"variable-select",
+		"variable-move-blocked",
 		"editor-focus",
 		"editor-state-change",
 		"editor-context-menu"
 	],
-	setup(d, { expose: T, emit: te }) {
-		let E = d, D = te, O = o(() => E.readonly || E.disabled), k = _(), A = n("请输入合同正文，或从 WPS / Word 粘贴合同内容");
-		function j(e) {
-			if (typeof window > "u") return e;
-			let t = new DOMParser().parseFromString(e, "text/html");
-			return t.querySelectorAll("script,style,meta,link").forEach((e) => e.remove()), t.querySelectorAll("*").forEach((e) => {
-				e.removeAttribute("class"), e.removeAttribute("lang"), e.removeAttribute("width"), e.removeAttribute("height"), e.removeAttribute("onload"), e.removeAttribute("onclick");
-				let t = [
-					"font-weight",
-					"font-style",
-					"text-decoration",
-					"text-align",
-					"color",
-					"font-size",
-					"font-family"
-				].map((t) => {
-					let n = e.style.getPropertyValue(t);
-					return n ? `${t}:${n}` : "";
-				}).filter(Boolean).join(";");
-				t ? e.setAttribute("style", t) : e.removeAttribute("style");
-			}), t.body.innerHTML;
-		}
-		let M = ee({
-			content: E.page.contentHtml,
-			editable: !O.value,
-			extensions: A,
+	setup(f, { expose: x, emit: Se }) {
+		let S = f, C = Se, w = u(() => S.readonly || S.disabled), T = fe(), E = i("请输入合同正文，或从 WPS / Word 粘贴合同内容", {
+			processImageFile: S.processImageFile,
+			getZoom: () => Math.max(.1, S.zoom || 1)
+		}), D = he({
+			content: S.page.contentHtml,
+			editable: !w.value,
+			extensions: E,
 			editorProps: {
 				attributes: { class: "gd-contract-template-designer__editor-prose" },
-				transformPastedHTML: j,
 				handleClick: (e, t, n) => {
 					let r = (n.target instanceof HTMLElement ? n.target.closest("[data-template-variable]") : void 0)?.dataset.key;
 					if (!r) return !1;
-					let i = E.variables.find((e) => e.key === r);
-					return i ? (D("variable-select", i.key), !0) : !1;
+					let i = S.variables.find((e) => e.key === r);
+					return i && C("variable-select", i.key), !1;
+				},
+				handleDOMEvents: {
+					contextmenu: (e, t) => {
+						if (w.value) return !1;
+						let n = Oe(e, t.target);
+						if (n) return t.preventDefault(), L({
+							pageId: S.page.id,
+							clientX: t.clientX,
+							clientY: t.clientY
+						}, n), !0;
+						let r = D.value?.state.selection, i = r instanceof v, a = t.target instanceof HTMLElement ? !!t.target.closest("td, th") : !1, s = o({
+							isCellSelection: i,
+							selectionEmpty: !r || r.empty,
+							inTable: a
+						});
+						return t.preventDefault(), s === "table" && (i || Ee(t.clientX, t.clientY, t.target)) ? (B({
+							pageId: S.page.id,
+							clientX: t.clientX,
+							clientY: t.clientY
+						}), !0) : (I({
+							pageId: S.page.id,
+							clientX: t.clientX,
+							clientY: t.clientY
+						}), !0);
+					},
+					dragstart: (e, t) => w.value ? (t.preventDefault(), !0) : (t.target instanceof HTMLElement ? t.target : null)?.closest("[data-template-variable]") ? (t.dataTransfer?.setData(b, S.page.id), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"), T.value?.classList.add("is-variable-dragging"), !1) : !1,
+					dragend: () => (T.value?.classList.remove("is-variable-dragging"), !1),
+					drop: (e, t) => {
+						if (w.value) return t.preventDefault(), t.stopPropagation(), !0;
+						let n = t.dataTransfer?.getData(b);
+						return !n || n === S.page.id ? !1 : (t.preventDefault(), C("variable-move-blocked", S.page.id), !0);
+					}
 				},
-				handleDOMEvents: { contextmenu: (e, t) => O.value || (t.target instanceof HTMLElement ? t.target : null)?.closest("[data-template-variable]") || !P().trim() ? !1 : (t.preventDefault(), D("editor-context-menu", {
-					pageId: E.page.id,
-					clientX: t.clientX,
-					clientY: t.clientY
-				}), !0) }
+				handleKeyDown: (e, t) => {
+					if (w.value || !Ce(t)) return !1;
+					let n = D.value;
+					if (!n) return !1;
+					t.preventDefault();
+					let r = n.state.selection, i = z();
+					if (i) {
+						let e = n.view.coordsAtPos(r.from);
+						return L({
+							pageId: S.page.id,
+							clientX: e.left,
+							clientY: e.bottom
+						}, i), !0;
+					}
+					let a = r instanceof v;
+					if (o({
+						isCellSelection: a,
+						selectionEmpty: r.empty,
+						inTable: n.isActive("table")
+					}) === "table") {
+						if (!a) {
+							let e = Te();
+							typeof e == "number" && n.view.dispatch(n.state.tr.setSelection(v.create(n.state.doc, e)));
+						}
+						let e = n.view.coordsAtPos(n.state.selection.from);
+						return B({
+							pageId: S.page.id,
+							clientX: e.left,
+							clientY: e.bottom
+						}), !0;
+					}
+					let s = n.view.coordsAtPos(n.state.selection.from);
+					return I({
+						pageId: S.page.id,
+						clientX: s.left,
+						clientY: s.bottom
+					}), !0;
+				}
 			},
 			onUpdate: ({ editor: e }) => {
-				D("page-update", {
-					...E.page,
+				C("page-update", {
+					...S.page,
 					contentHtml: e.getHTML(),
 					contentJson: e.getJSON()
-				}), R();
+				}), H();
 			},
 			onFocus: () => {
-				D("editor-focus", E.page.id), R();
+				C("editor-focus", S.page.id), H();
 			},
-			onBlur: R,
-			onSelectionUpdate: R,
-			onCreate: R
+			onBlur: H,
+			onSelectionUpdate: H,
+			onCreate: H
 		});
-		function N(e) {
+		function O(e) {
 			if (typeof e == "number" && Number.isFinite(e)) return e;
 			let t = String(e || "").match(/(\d+(\.\d+)?)/);
 			return t ? Number(t[1]) : void 0;
 		}
-		function P() {
-			if (!M.value) return "";
-			let { from: e, to: t } = M.value.state.selection;
-			return M.value.state.doc.textBetween(e, t, "\n");
+		function k() {
+			if (!D.value) return "";
+			let { from: e, to: t } = D.value.state.selection;
+			return D.value.state.doc.textBetween(e, t, "\n");
+		}
+		function A() {
+			let e = D.value, t = e?.state.selection;
+			if (!(!e || !t || t.empty)) try {
+				let n = e.view.coordsAtPos(t.from), r = e.view.coordsAtPos(t.to, -1);
+				if (Math.abs(r.top - n.top) > xe) return;
+				let i = Math.abs(r.left - n.left) / U.value;
+				return Number.isFinite(i) && i > 0 ? i : void 0;
+			} catch {
+				return;
+			}
+		}
+		function j() {
+			let e = D.value;
+			if (!e) return "";
+			let t = e.state.selection.$from, n = t.pos;
+			for (let e = t.depth; e > 0; --e) {
+				let r = t.node(e).type.name;
+				if (r === "paragraph" || r === "heading") {
+					n = t.start(e);
+					break;
+				}
+			}
+			return e.state.doc.textBetween(n, e.state.selection.from, "");
+		}
+		function Ce(e) {
+			return e.key === "ContextMenu" || e.shiftKey && e.key === "F10";
+		}
+		function M(e) {
+			for (let t = e.depth; t > 0; --t) {
+				let n = e.node(t).type.spec.tableRole;
+				if (n === "cell" || n === "header_cell") return e.before(t);
+			}
+		}
+		function we(e, t) {
+			let n = D.value, r = n?.view.posAtCoords({
+				left: e,
+				top: t
+			})?.pos;
+			if (!(!n || typeof r != "number")) return M(n.state.doc.resolve(r));
+		}
+		function Te() {
+			let e = D.value;
+			if (e) return M(e.state.selection.$from);
+		}
+		function Ee(e, t, n) {
+			let r = D.value, i = n instanceof HTMLElement ? n : null;
+			if (!r || !i?.closest("td,th")) return !1;
+			if (r.state.selection instanceof v && i.closest("td.selectedCell,th.selectedCell")) return !0;
+			let a = we(e, t);
+			return typeof a == "number" ? (r.view.dispatch(r.state.tr.setSelection(v.create(r.state.doc, a))), !0) : !1;
+		}
+		function N() {
+			let e = D.value, t = e?.isActive("table") ? e.can() : void 0, n = (e) => !!(t && e(t));
+			return {
+				addRowBefore: n((e) => e.addRowBefore()),
+				addRowAfter: n((e) => e.addRowAfter()),
+				deleteRow: n((e) => e.deleteRow()),
+				addColumnBefore: n((e) => e.addColumnBefore()),
+				addColumnAfter: n((e) => e.addColumnAfter()),
+				deleteColumn: n((e) => e.deleteColumn()),
+				mergeCells: n((e) => e.mergeCells()),
+				splitCell: n((e) => e.splitCell()),
+				alignLeft: n((e) => e.setCellAttribute("textAlign", "left")),
+				alignCenter: n((e) => e.setCellAttribute("textAlign", "center")),
+				alignRight: n((e) => e.setCellAttribute("textAlign", "right")),
+				toggleHeaderRow: n((e) => e.toggleHeaderRow()),
+				toggleHeaderColumn: n((e) => e.toggleHeaderColumn()),
+				deleteTable: n((e) => e.deleteTable())
+			};
+		}
+		function De() {
+			let e = D.value, t = e?.state.selection;
+			if (!e || !(t instanceof v)) return "left";
+			let n = /* @__PURE__ */ new Set();
+			return t.forEachCell((e) => {
+				let t = e.attrs.textAlign;
+				n.add(t === "center" || t === "right" ? t : "left");
+			}), n.size === 1 ? n.values().next().value ?? "left" : "mixed";
+		}
+		function P(e = D.value?.state.doc) {
+			let t = 0;
+			return e?.descendants((e) => {
+				e.type.name === "templateVariable" && (t += 1);
+			}), t;
+		}
+		function F(e) {
+			let t = D.value;
+			if (!t) return 0;
+			let n = P(t.state.doc), r = n, i = (e) => {
+				r = P(e.doc);
+			};
+			return e === "delete-table-row" ? ve(t.state, i) : e === "delete-table-column" ? _e(t.state, i) : ye(t.state, i), Math.max(0, n - r);
+		}
+		function I(e) {
+			let t = D.value?.state.selection, n = !!(t && !t.empty);
+			C("editor-context-menu", {
+				type: "text",
+				...e,
+				hasSelection: n,
+				selectionWidth: n ? A() : void 0,
+				leadingText: j()
+			});
+		}
+		function L(e, t) {
+			C("editor-context-menu", {
+				type: "image",
+				...e,
+				image: t
+			});
+		}
+		function R(e, t) {
+			if (!(e.type.name !== "image" || typeof e.attrs.src != "string" || !e.attrs.src)) return {
+				position: t,
+				src: e.attrs.src,
+				alt: typeof e.attrs.alt == "string" ? e.attrs.alt : void 0,
+				title: typeof e.attrs.title == "string" ? e.attrs.title : void 0,
+				width: r(e.attrs.width),
+				height: r(e.attrs.height)
+			};
+		}
+		function z() {
+			let e = D.value?.state.selection;
+			if (e instanceof y) return R(e.node, e.from);
+		}
+		function Oe(e, t) {
+			let n = t instanceof HTMLElement ? t.closest("[data-template-variable], img[src]") : null;
+			if (n) try {
+				let t = e.posAtDOM(n, 0), r = e.state.doc.nodeAt(t);
+				return !r || r.type.name !== "templateVariable" && r.type.name !== "image" ? void 0 : (r.type.name === "templateVariable" && typeof r.attrs.key == "string" && C("variable-select", r.attrs.key), (!(e.state.selection instanceof y) || e.state.selection.from !== t) && e.dispatch(e.state.tr.setSelection(y.create(e.state.doc, t))), R(r, t));
+			} catch {
+				return;
+			}
+		}
+		function B(e) {
+			C("editor-context-menu", {
+				type: "table",
+				...e,
+				capabilities: N(),
+				activeAlignment: De(),
+				affectedVariableCounts: {
+					deleteRow: F("delete-table-row"),
+					deleteColumn: F("delete-table-column"),
+					deleteTable: F("delete-table")
+				}
+			});
 		}
-		function F() {
-			return M.value ? [
+		function ke() {
+			return D.value ? [
 				1,
 				2,
 				3,
 				4,
 				5,
 				6
-			].find((e) => M.value?.isActive("heading", { level: e })) : void 0;
-		}
-		function I() {
-			return M.value?.isActive("heading", { textAlign: "center" }) || M.value?.isActive("paragraph", { textAlign: "center" }) ? "center" : M.value?.isActive("heading", { textAlign: "right" }) || M.value?.isActive("paragraph", { textAlign: "right" }) ? "right" : "left";
-		}
-		function L() {
-			let e = M.value;
-			if (!e) return {
-				isFocused: !1,
-				canUndo: !1,
-				canRedo: !1,
-				isBold: !1,
-				isItalic: !1,
-				isUnderline: !1,
-				isBulletList: !1,
-				isOrderedList: !1,
-				isTableActive: !1,
-				textAlign: "left"
-			};
-			let t = e.getAttributes("textStyle");
+			].find((e) => D.value?.isActive("heading", { level: e })) : void 0;
+		}
+		function Ae() {
+			return ["center", "right"].find((e) => D.value?.isActive("heading", { textAlign: e }) || D.value?.isActive("paragraph", { textAlign: e })) ?? "left";
+		}
+		function V() {
+			let e = D.value, t = (t) => !!e?.isActive(t), n = e?.getAttributes("textStyle") ?? {};
 			return {
-				isFocused: e.isFocused,
-				canUndo: e.can().undo(),
-				canRedo: e.can().redo(),
-				isBold: e.isActive("bold"),
-				isItalic: e.isActive("italic"),
-				isUnderline: e.isActive("underline"),
-				isBulletList: e.isActive("bulletList"),
-				isOrderedList: e.isActive("orderedList"),
-				isTableActive: e.isActive("table"),
-				currentHeadingLevel: F(),
-				textAlign: I(),
-				fontFamily: typeof t.fontFamily == "string" ? t.fontFamily : void 0,
-				fontSize: N(t.fontSize),
-				textColor: typeof t.color == "string" ? t.color : void 0,
-				selectionText: P()
+				isFocused: !!e?.isFocused,
+				canUndo: !!e?.can().undo(),
+				canRedo: !!e?.can().redo(),
+				isBold: t("bold"),
+				isItalic: t("italic"),
+				isUnderline: t("underline"),
+				isBulletList: t("bulletList"),
+				isOrderedList: t("orderedList"),
+				isTableActive: t("table"),
+				currentHeadingLevel: ke(),
+				textAlign: Ae(),
+				fontFamily: typeof n.fontFamily == "string" ? n.fontFamily : void 0,
+				fontSize: O(n.fontSize),
+				textColor: typeof n.color == "string" ? n.color : void 0,
+				selectionText: k(),
+				selectedContentImage: z()
 			};
 		}
-		function R() {
-			D("editor-state-change", E.page.id, L());
+		function H() {
+			C("editor-state-change", S.page.id, V());
 		}
-		b(O, (e) => {
-			M.value?.setEditable(!e), R();
-		}), b(() => E.page.contentHtml, (e) => {
-			!M.value || e === M.value.getHTML() || (M.value.commands.setContent(e || "<p></p>", { emitUpdate: !1 }), R());
+		_(w, (e) => {
+			D.value?.setEditable(!e), H();
+		}), _(() => S.page.contentHtml, (e) => {
+			!D.value || e === D.value.getHTML() || (D.value.commands.setContent(e || "<p></p>", { emitUpdate: !1 }), H());
 		});
-		let z = o(() => ({
-			width: `${E.pageSize.width}px`,
-			height: `${E.pageSize.height}px`,
-			"--gd-contract-page-content-height": `${Y()}px`
-		})), B = o(() => Math.max(.1, E.zoom || 1)), V = o(() => ({
-			width: `${Math.ceil((E.pageSize.width + 10) * B.value)}px`,
-			height: `${Math.ceil((E.pageSize.height + 40) * B.value)}px`
-		})), H = o(() => ({ "--gd-contract-page-zoom": String(B.value) })), U = o(() => i(E.pageSize));
-		function W(e) {
-			if (e.preventDefault(), e.stopPropagation(), O.value) return;
-			let t = e.dataTransfer?.getData("application/x-gd-contract-variable");
-			t && D("variable-drop", E.page.id, t, e.clientX, e.clientY);
-		}
-		function ne(e, n) {
-			if (!M.value) return;
-			let r = {
-				type: "templateVariable",
-				attrs: t(e)
-			}, i = n ? M.value.view.posAtCoords(n)?.pos : void 0;
-			return typeof i == "number" ? (M.value.chain().focus().insertContentAt(i, r).run(), $(), G()) : (M.value?.chain().focus().insertContent(r).run(), $(), G());
+		let je = u(() => ({
+			width: `${S.pageSize.width}px`,
+			height: `${S.pageSize.height}px`,
+			"--gd-contract-page-content-height": `${q()}px`
+		})), U = u(() => Math.max(.1, S.zoom || 1)), Me = u(() => ({
+			width: `${Math.ceil((S.pageSize.width + 10) * U.value)}px`,
+			height: `${Math.ceil((S.pageSize.height + 40) * U.value)}px`
+		})), Ne = u(() => ({ "--gd-contract-page-zoom": String(U.value) })), Pe = u(() => re(S.pageSize));
+		function W(e, t) {
+			let n = T.value?.getBoundingClientRect();
+			return n ? {
+				x: Math.min(S.pageSize.width, Math.max(0, (e - n.left) / U.value)),
+				y: Math.min(S.pageSize.height, Math.max(0, (t - n.top) / U.value))
+			} : {
+				x: S.pageSize.width / 2,
+				y: S.pageSize.height / 2
+			};
+		}
+		function Fe(e) {
+			let t = T.value?.getBoundingClientRect(), n = T.value?.closest(".gd-contract-template-designer__canvas")?.getBoundingClientRect(), r = ee(e);
+			if (!t || !n) return {
+				x: Math.max(0, (S.pageSize.width - r.width) / 2),
+				y: Math.max(0, (S.pageSize.height - r.height) / 2)
+			};
+			let i = Math.max(t.left, n.left), a = Math.max(t.top, n.top), o = Math.min(t.right, n.right), s = Math.min(t.bottom, n.bottom), c = W(o > i ? (i + o) / 2 : (t.left + t.right) / 2, s > a ? (a + s) / 2 : (t.top + t.bottom) / 2);
+			return {
+				x: c.x - r.width / 2,
+				y: c.y - r.height / 2
+			};
+		}
+		function Ie(e) {
+			if (!c(S.readonly, S.disabled)) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			let t = te(e.dataTransfer?.getData(s));
+			if (t) {
+				e.preventDefault(), e.stopPropagation();
+				let n = W(e.clientX, e.clientY);
+				C("signing-placement-drop", S.page.id, t, n.x, n.y);
+				return;
+			}
+			let n = e.dataTransfer?.getData("application/x-gd-contract-variable");
+			if (n) {
+				e.preventDefault(), e.stopPropagation(), C("variable-drop", S.page.id, n, e.clientX, e.clientY);
+				return;
+			}
+			let r = e.dataTransfer?.getData(b);
+			r && r !== S.page.id && (e.preventDefault(), e.stopPropagation(), C("variable-move-blocked", S.page.id));
+		}
+		function Le(e, t) {
+			let r = D.value;
+			return r ? (n(r, e, t ? r.view.posAtCoords(t)?.pos : void 0), $(), G()) : void 0;
+		}
+		function Re(e, t) {
+			let n = D.value;
+			if (n) return a(n, {
+				type: "insert-content-image",
+				image: e,
+				position: t
+			}), G();
+		}
+		function ze(e) {
+			let t = D.value, n = t?.state.selection;
+			if (!t || !(n instanceof y) || n.node.type.name !== "image") return;
+			let i = { ...n.node.attrs }, a = !1;
+			if (["width", "height"].forEach((t) => {
+				if (!Object.prototype.hasOwnProperty.call(e, t)) return;
+				let n = e[t] === void 0 ? null : r(e[t]) ?? null;
+				i[t] !== n && (i[t] = n, a = !0);
+			}), !a) return;
+			let o = t.state.tr.setNodeMarkup(n.from, void 0, i);
+			return o.setSelection(y.create(o.doc, n.from)), t.view.dispatch(o), G();
+		}
+		function Be() {
+			let e = D.value?.state.selection;
+			return e ? {
+				from: e.from,
+				to: e.to
+			} : void 0;
 		}
 		function G() {
 			return {
-				...E.page,
-				pageSize: U.value,
-				contentHtml: M.value?.getHTML() ?? E.page.contentHtml,
-				contentJson: M.value?.getJSON() ?? E.page.contentJson
+				...S.page,
+				pageSize: Pe.value,
+				contentHtml: D.value?.getHTML() ?? S.page.contentHtml,
+				contentJson: D.value?.getJSON() ?? S.page.contentJson
 			};
 		}
 		function K(e) {
@@ -191,22 +448,22 @@ var w = { class: "gd-contract-template-designer__page-title" }, T = /* @__PURE__
 				content: e.length ? e : [{ type: "paragraph" }]
 			};
 		}
-		function q(e) {
+		function Ve(e) {
 			return e?.length ? e.length === 1 && e[0].type === "paragraph" && !e[0].content?.length : !0;
 		}
-		function J(e) {
-			return C(K(e), A);
+		function He(e) {
+			return ge(K(e), E);
 		}
-		function Y() {
-			let e = k.value;
-			if (!e) return E.pageSize.height - 108;
+		function q() {
+			let e = T.value;
+			if (!e) return S.pageSize.height - 108;
 			let t = window.getComputedStyle(e), n = Number.parseFloat(t.paddingTop) || 0, r = Number.parseFloat(t.paddingBottom) || 0;
-			return Math.max(120, E.pageSize.height - n - r);
+			return Math.max(120, S.pageSize.height - n - r);
 		}
-		function X() {
-			let e = k.value?.querySelector(".gd-contract-template-designer__editor-prose");
+		function Ue() {
+			let e = T.value?.querySelector(".gd-contract-template-designer__editor-prose");
 			if (!e) return [];
-			let t = e.getBoundingClientRect(), n = B.value;
+			let t = e.getBoundingClientRect(), n = U.value;
 			return Array.from(e.children).map((e) => {
 				let r = e.getBoundingClientRect();
 				return {
@@ -215,233 +472,180 @@ var w = { class: "gd-contract-template-designer__page-title" }, T = /* @__PURE__
 				};
 			});
 		}
-		function Z() {
-			if (!M.value) return;
-			let e = a(M.value.getJSON().content, X(), Y());
-			if (e) return M.value.commands.setContent(K(e.currentContent), { emitUpdate: !1 }), {
+		function J() {
+			return D.value ? l(D.value.getJSON().content, Ue(), q()) : void 0;
+		}
+		function We() {
+			return !!J();
+		}
+		function Ge() {
+			if (!D.value) return;
+			let e = J();
+			if (e) return D.value.commands.setContent(K(e.currentContent), { emitUpdate: !1 }), {
 				page: G(),
 				overflowContent: e.overflowContent,
-				overflowHtml: J(e.overflowContent)
+				overflowHtml: He(e.overflowContent)
 			};
 		}
-		function re(e) {
-			if (!M.value || !e.length) return;
-			let t = M.value.getJSON().content, n = [...e, ...q(t) ? [] : t ?? []];
-			return M.value.commands.setContent(K(n), { emitUpdate: !1 }), G();
+		function Y(e) {
+			if (!D.value || !e.length) return;
+			let t = D.value.getJSON().content, n = [...e, ...Ve(t) ? [] : t ?? []];
+			return D.value.commands.setContent(K(n), { emitUpdate: !1 }), G();
+		}
+		function X(e, t) {
+			let n = [];
+			return e.descendants((e, r) => {
+				e.type.name === "templateVariable" && e.attrs.key === t && n.push({
+					node: e,
+					pos: r
+				});
+			}), n;
 		}
-		function ie(e, n = e.key) {
-			if (!M.value) return;
+		function Ke(e, n = e.key) {
+			if (!D.value) return;
 			let r = t(e), i = !1;
-			return M.value.commands.command(({ tr: e, state: t, dispatch: a }) => (t.doc.descendants((t, a) => {
-				t.type.name !== "templateVariable" && t.type.name !== "templateField" || t.attrs.key !== n || (e.setNodeMarkup(a, void 0, {
+			return D.value.commands.command(({ tr: e, state: t, dispatch: a }) => (X(t.doc, n).forEach(({ node: t, pos: n }) => {
+				e.setNodeMarkup(n, void 0, {
 					...t.attrs,
 					...r
-				}), i = !0);
+				}), i = !0;
 			}), i && a?.(e), i)), $(), i ? G() : void 0;
 		}
-		function ae(e) {
-			if (!M.value) return;
-			let t = [];
-			return M.value.commands.command(({ tr: n, state: r, dispatch: i }) => {
-				r.doc.descendants((n, r) => {
-					n.type.name !== "templateVariable" && n.type.name !== "templateField" || n.attrs.key !== e || t.push({
-						from: r,
-						to: r + n.nodeSize
-					});
-				}), t.sort((e, t) => t.from - e.from).forEach((e) => n.delete(e.from, e.to));
-				let a = t.length > 0;
-				return a && i?.(n), a;
-			}), t.length ? G() : void 0;
-		}
-		function Q() {
-			k.value?.querySelectorAll(".gd-contract-template-variable.is-active").forEach((e) => e.classList.remove("is-active"));
-		}
-		function oe(e) {
-			Q();
-			let t = Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((t) => t.dataset.key === e);
+		function qe(e) {
+			if (!D.value) return;
+			let t = 0;
+			return D.value.commands.command(({ tr: n, state: r, dispatch: i }) => {
+				let a = X(r.doc, e).map(({ node: e, pos: t }) => ({
+					from: t,
+					to: t + e.nodeSize
+				})).sort((e, t) => t.from - e.from);
+				return a.forEach((e) => n.delete(e.from, e.to)), t = a.length, t && i?.(n), t > 0;
+			}), t ? G() : void 0;
+		}
+		function Z() {
+			T.value?.querySelectorAll(".gd-contract-template-variable.is-active").forEach((e) => e.classList.remove("is-active"));
+		}
+		function Q(e) {
+			if (e) return Array.from(T.value?.querySelectorAll("[data-template-variable]") ?? []).find((t) => t.dataset.key === e);
+		}
+		function Je(e) {
+			Z();
+			let t = Q(e);
 			return t ? (t.classList.add("is-active"), t.scrollIntoView({
 				behavior: "smooth",
 				block: "center",
 				inline: "center"
-			}), M.value?.commands.focus(), !0) : !1;
+			}), D.value?.commands.focus(), !0) : !1;
 		}
-		function $() {
-			Q(), E.selectedVariableKey && Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((e) => e.dataset.key === E.selectedVariableKey)?.classList.add("is-active");
+		function Ye(e) {
+			let t = Array.from(T.value?.querySelectorAll("[data-signing-placement-id]") ?? []).find((t) => t.dataset.signingPlacementId === e);
+			return t?.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+				inline: "center"
+			}), !!t;
 		}
-		function se(t) {
-			return e.find((e) => e.key === t);
+		function $() {
+			Z(), Q(S.selectedVariableKey)?.classList.add("is-active");
 		}
-		function ce(e) {
-			let t = se(e), n = M.value;
-			if (!t || !n) return;
-			let i = n.chain().focus().clearNodes();
-			t.headingLevel ? i.setHeading({ level: t.headingLevel }) : i.setParagraph(), i.unsetAllMarks().unsetTextAlign().unsetFontSize().unsetFontFamily().unsetColor().setTextAlign(t.textAlign).setFontSize(`${t.fontSize}px`).setFontFamily(t.fontFamily || "Noto Serif SC, Source Han Serif SC, Songti SC, STSong, SimSun, serif").setColor(r.color || "#1f2937"), t.bold ? i.setBold() : i.unsetBold(), t.italic ? i.setItalic() : i.unsetItalic(), t.underline ? i.setUnderline() : i.unsetUnderline(), i.run();
+		function Xe(t) {
+			let n = e.find((e) => e.key === t), r = D.value;
+			if (!n || !r) return;
+			let i = r.chain().focus().clearNodes();
+			n.headingLevel ? i.setHeading({ level: n.headingLevel }) : i.setParagraph(), i.unsetAllMarks().unsetTextAlign().unsetFontSize().unsetFontFamily().unsetColor().setTextAlign(n.textAlign).setFontSize(`${n.fontSize}px`).setFontFamily(n.fontFamily || "Noto Serif SC, Source Han Serif SC, Songti SC, STSong, SimSun, serif").setColor(ne.color || "#1f2937"), n.bold ? i.setBold() : i.unsetBold(), n.italic ? i.setItalic() : i.unsetItalic(), n.underline ? i.setUnderline() : i.unsetUnderline(), i.run();
 		}
-		b([() => E.selectedVariableKey, () => E.variables], () => {
-			f($);
+		_([() => S.selectedVariableKey, () => S.variables], () => {
+			le($);
 		}, {
 			deep: !0,
 			flush: "post"
 		});
-		function le(e) {
-			let t = M.value?.chain().focus();
-			if (t) {
-				switch (e.type) {
-					case "undo":
-						t.undo().run();
-						break;
-					case "redo":
-						t.redo().run();
-						break;
-					case "set-paragraph":
-						t.setParagraph().run();
-						break;
-					case "set-heading":
-						t.setHeading({ level: e.level }).run();
-						break;
-					case "toggle-heading":
-						t.toggleHeading({ level: e.level }).run();
-						break;
-					case "toggle-bold":
-						t.toggleBold().run();
-						break;
-					case "toggle-italic":
-						t.toggleItalic().run();
-						break;
-					case "toggle-underline":
-						t.toggleUnderline().run();
-						break;
-					case "toggle-bullet-list":
-						t.toggleBulletList().run();
-						break;
-					case "toggle-ordered-list":
-						t.toggleOrderedList().run();
-						break;
-					case "set-text-align":
-						t.setTextAlign(e.value).run();
-						break;
-					case "unset-text-align":
-						t.unsetTextAlign().run();
-						break;
-					case "set-color":
-						t.setColor(e.value || "#1f2937").run();
-						break;
-					case "set-font-size":
-						t.setFontSize(`${e.value || 14}px`).run();
-						break;
-					case "unset-font-size":
-						t.unsetFontSize().run();
-						break;
-					case "set-font-family":
-						t.setFontFamily(e.value || "Noto Serif SC, Source Han Serif SC, Songti SC, STSong, SimSun, serif").run();
-						break;
-					case "unset-font-family":
-						t.unsetFontFamily().run();
-						break;
-					case "clear-text-format":
-						t.unsetAllMarks().unsetColor().unsetFontSize().unsetFontFamily().run();
-						break;
-					case "clear-block-format":
-						t.clearNodes().unsetTextAlign().run();
-						break;
-					case "apply-text-style-preset":
-						ce(e.preset);
-						break;
-					case "insert-table":
-						t.insertTable(e.options).run();
-						break;
-					case "add-table-row-before":
-						t.addRowBefore().run();
-						break;
-					case "add-table-row-after":
-						t.addRowAfter().run();
-						break;
-					case "delete-table-row":
-						t.deleteRow().run();
-						break;
-					case "add-table-column-before":
-						t.addColumnBefore().run();
-						break;
-					case "add-table-column-after":
-						t.addColumnAfter().run();
-						break;
-					case "delete-table-column":
-						t.deleteColumn().run();
-						break;
-					case "toggle-table-header-row":
-						t.toggleHeaderRow().run();
-						break;
-					case "toggle-table-header-column":
-						t.toggleHeaderColumn().run();
-						break;
-					case "toggle-table-header-cell":
-						t.toggleHeaderCell().run();
-						break;
-					case "delete-table":
-						t.deleteTable().run();
-						break;
-				}
-				R();
-			}
+		function Ze(e) {
+			e.type === "apply-text-style-preset" ? Xe(e.preset) : a(D.value, e), H();
 		}
-		function ue() {
-			M.value?.commands.focus();
+		function Qe() {
+			D.value?.commands.focus();
 		}
-		function de() {
-			return M.value?.getJSON();
+		function $e() {
+			return D.value?.getJSON();
 		}
-		function fe() {
-			return M.value?.getHTML() ?? E.page.contentHtml;
+		function et() {
+			return D.value?.getHTML() ?? S.page.contentHtml;
 		}
-		function pe(e) {
-			let t = E.variables.find((t) => t.id === e || t.key === e), n = t ? Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((e) => e.dataset.key === t.key) : void 0;
+		function tt(e) {
+			let t = S.variables.find((t) => t.id === e || t.key === e), n = t ? Q(t.key) : void 0;
 			$(), n?.scrollIntoView({
 				behavior: "smooth",
 				block: "center"
 			});
 		}
-		function me() {
-			k.value?.scrollIntoView({
+		function nt() {
+			T.value?.scrollIntoView({
 				behavior: "smooth",
 				block: "start",
 				inline: "center"
 			});
 		}
-		return h(() => {
-			M.value?.destroy();
-		}), T({
-			focus: ue,
-			getHTML: fe,
-			getJSON: de,
-			getEditorState: L,
-			insertVariable: ne,
-			updateVariable: ie,
-			removeVariable: ae,
-			splitOverflowContent: Z,
-			prependContent: re,
-			runCommand: le,
-			scrollIntoField: pe,
-			scrollIntoVariable: oe,
-			scrollIntoPage: me
-		}), (e, t) => (g(), l("section", {
+		return de(() => {
+			D.value?.destroy();
+		}), x({
+			focus: Qe,
+			getHTML: et,
+			getJSON: $e,
+			getEditorState: V,
+			getTableCommandCapabilities: N,
+			getAffectedVariableCount: F,
+			getVisibleSigningPlacementPosition: Fe,
+			insertVariable: Le,
+			insertContentImage: Re,
+			updateSelectedContentImage: ze,
+			getSelectionRange: Be,
+			hasOverflowContent: We,
+			updateVariable: Ke,
+			removeVariable: qe,
+			splitOverflowContent: Ge,
+			prependContent: Y,
+			runCommand: Ze,
+			scrollIntoField: tt,
+			scrollIntoVariable: Je,
+			scrollIntoSigningPlacement: Ye,
+			scrollIntoPage: nt
+		}), (e, t) => (m(), se("section", {
 			class: "gd-contract-template-designer__page-shell",
-			style: m(V.value)
-		}, [u("div", {
-			class: p(["gd-contract-template-designer__page-zoom", { "is-active": d.active }]),
-			style: m(H.value)
-		}, [u("header", w, [u("span", null, v(d.page.title || `第 ${d.pageIndex + 1} 页`), 1), u("span", null, "第 " + v(d.pageIndex + 1) + " 页 · " + v(d.pageSize.label || "A4") + " · " + v(d.pageSize.width) + " × " + v(d.pageSize.height), 1)]), u("div", {
+			style: p(Me.value)
+		}, [d("div", {
+			class: ue(["gd-contract-template-designer__page-zoom", { "is-active": f.active }]),
+			style: p(Ne.value)
+		}, [d("header", be, [d("span", null, h(f.page.title || `第 ${f.pageIndex + 1} 页`), 1), d("span", null, "第 " + h(f.pageIndex + 1) + " 页 · " + h(f.pageSize.label || "A4") + " · " + h(f.pageSize.width) + " × " + h(f.pageSize.height), 1)]), d("div", {
 			ref_key: "pageElement",
-			ref: k,
+			ref: T,
 			class: "gd-contract-template-designer__page",
-			style: m(z.value),
-			onDragover: t[0] ||= x(() => {}, ["prevent"]),
-			onDrop: W,
-			onClick: t[1] ||= (e) => D("editor-focus", d.page.id)
-		}, [y(M) ? (g(), s(y(S), {
+			style: p(je.value),
+			onDragover: t[3] ||= pe(() => {}, ["prevent"]),
+			onDrop: Ie,
+			onClick: t[4] ||= (e) => C("editor-focus", f.page.id)
+		}, [g(D) ? (m(), ae(g(me), {
 			key: 0,
-			editor: y(M)
-		}, null, 8, ["editor"])) : c("", !0)], 36)], 6)], 4));
+			editor: g(D)
+		}, null, 8, ["editor"])) : oe("", !0), ce(ie, {
+			"page-size": f.pageSize,
+			placements: f.signingPlacements,
+			"selected-id": f.selectedSigningPlacementId,
+			zoom: U.value,
+			readonly: f.readonly,
+			disabled: f.disabled,
+			onSelect: t[0] ||= (e) => C("signing-placement-select", e),
+			onMove: t[1] ||= (e) => C("signing-placement-move", e),
+			onRemove: t[2] ||= (e) => C("signing-placement-remove", e)
+		}, null, 8, [
+			"page-size",
+			"placements",
+			"selected-id",
+			"zoom",
+			"readonly",
+			"disabled"
+		])], 36)], 6)], 4));
 	}
 });
 //#endregion
-export { T as default };
+export { x as default };