@guodun/antdv 1.4.1 → 1.4.3

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

@@ -1,24 +1,29 @@
 import { SIGNING_PLACEMENT_MIME as e, canMutateSigningPlacements as t, getSigningPlacementDefaultSize as n, parseSigningPlacementDragPayload as r } from "./utils/signing-placement.mjs";
 import { CONTRACT_TEXT_STYLE_PRESETS as i } from "./constants.mjs";
-import { DEFAULT_FIELD_STYLE as a, resolvePageSize as o, splitPageContentByMeasurements as s } from "./composables/use-template-designer.mjs";
-import { buildTemplateVariableAttrs as c, insertTemplateVariableNode as l } from "./extensions/template-variable.mjs";
+import { CONTRACT_PAGE_BASE_PADDING as a, getPageDecorationSafePadding as o, hasEnabledPageFooter as s, hasEnabledPageHeader as c, normalizePageDecorations as l } from "./utils/page-decorations.mjs";
+import { DEFAULT_FIELD_STYLE as ee, resolvePageSize as te, splitPageContentByMeasurements as ne } from "./composables/use-template-designer.mjs";
+import { buildTemplateVariableAttrs as re, insertTemplateVariableNode as ie } from "./extensions/template-variable.mjs";
 import { normalizeContractImageDimension as u } from "./utils/content-image.mjs";
-import { createEditorExtensions as ee, runContractTemplateEditorCommand as d } from "./extensions/editor-extensions.mjs";
+import { createEditorExtensions as ae, runContractTemplateEditorCommand as d } from "./extensions/editor-extensions.mjs";
 import { resolveEditorContextMenuKind as f } from "./utils/context-variable.mjs";
-import te from "./SigningPlacementLayer.mjs";
-import { computed as p, createBlock as ne, createCommentVNode as re, createElementBlock as ie, createElementVNode as m, createVNode as ae, defineComponent as h, nextTick as oe, normalizeClass as se, normalizeStyle as g, onBeforeUnmount as ce, openBlock as _, ref as le, toDisplayString as v, unref as y, watch as b, withModifiers as ue } from "vue";
-import { EditorContent as de, useEditor as fe } from "@tiptap/vue-3";
-import { generateHTML as pe } from "@tiptap/core";
-import { CellSelection as x, deleteColumn as me, deleteRow as he, deleteTable as ge } from "@tiptap/pm/tables";
-import { NodeSelection as S } from "@tiptap/pm/state";
+import { applyContractTemplateBlockStyle as oe } from "./utils/block-style.mjs";
+import se from "./SigningPlacementLayer.mjs";
+import ce from "./ContractTemplatePageDecorations.mjs";
+import { computed as p, createBlock as le, createCommentVNode as ue, createElementBlock as de, createElementVNode as m, createVNode as h, defineComponent as g, nextTick as fe, normalizeClass as pe, normalizeStyle as _, onBeforeUnmount as me, openBlock as v, ref as he, toDisplayString as y, unref as b, watch as x, withModifiers as ge } from "vue";
+import { EditorContent as _e, useEditor as ve } from "@tiptap/vue-3";
+import { generateHTML as ye } from "@tiptap/core";
+import { CellSelection as S, deleteColumn as be, deleteRow as xe, deleteTable as Se } from "@tiptap/pm/tables";
+import { NodeSelection as C } from "@tiptap/pm/state";
 //#region src/components/pro-contract-template-designer/src/DesignerPage.vue?vue&type=script&setup=true&lang.ts
-var _e = { class: "gd-contract-template-designer__page-title" }, C = "application/x-gd-contract-variable-move", ve = 8, w = /* @__PURE__ */ h({
+var Ce = { class: "gd-contract-template-designer__page-title" }, w = "application/x-gd-contract-variable-move", we = 8, T = /* @__PURE__ */ g({
 	name: "ProContractTemplateDesignerPage",
 	__name: "DesignerPage",
 	props: {
 		page: {},
 		pageIndex: {},
 		pageSize: {},
+		pageDecorations: { default: void 0 },
+		totalPages: { default: 1 },
 		variables: {},
 		selectedVariableKey: { default: "" },
 		active: {
@@ -54,130 +59,144 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 		"editor-state-change",
 		"editor-context-menu"
 	],
-	setup(h, { expose: w, emit: ye }) {
-		let T = h, E = ye, D = p(() => T.readonly || T.disabled), O = le(), k = ee("请输入合同正文，或从 WPS / Word 粘贴合同内容", {
-			processImageFile: T.processImageFile,
-			getZoom: () => Math.max(.1, T.zoom || 1)
-		}), A = fe({
-			content: T.page.contentHtml,
-			editable: !D.value,
-			extensions: k,
+	setup(g, { expose: T, emit: Te }) {
+		let E = g, D = Te, O = p(() => E.readonly || E.disabled), k = he(), A = ae("请输入合同正文，或从 WPS / Word 粘贴合同内容", {
+			processImageFile: E.processImageFile,
+			getZoom: () => Math.max(.1, E.zoom || 1)
+		}), j = ve({
+			content: E.page.contentHtml,
+			editable: !O.value,
+			extensions: A,
 			editorProps: {
 				attributes: { class: "gd-contract-template-designer__editor-prose" },
 				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 = T.variables.find((e) => e.key === r);
-					return i && E("variable-select", i.key), !1;
+					let i = E.variables.find((e) => e.key === r);
+					return i && D("variable-select", i.key), !1;
 				},
 				handleDOMEvents: {
 					contextmenu: (e, t) => {
-						if (D.value) return !1;
-						let n = Oe(e, t.target);
+						if (O.value) return !1;
+						let n = Le(e, t.target);
 						if (n) return t.preventDefault(), L({
-							pageId: T.page.id,
+							pageId: E.page.id,
 							clientX: t.clientX,
 							clientY: t.clientY
 						}, n), !0;
-						let r = A.value?.state.selection, i = r instanceof x, a = t.target instanceof HTMLElement ? !!t.target.closest("td, th") : !1, o = f({
+						let r = j.value?.state.selection, i = r instanceof S, a = t.target instanceof HTMLElement ? !!t.target.closest("td, th") : !1, o = f({
 							isCellSelection: i,
 							selectionEmpty: !r || r.empty,
 							inTable: a
 						});
-						return t.preventDefault(), o === "table" && (i || Ee(t.clientX, t.clientY, t.target)) ? (B({
-							pageId: T.page.id,
+						return t.preventDefault(), o === "table" && (i || Pe(t.clientX, t.clientY, t.target)) ? (B({
+							pageId: E.page.id,
 							clientX: t.clientX,
 							clientY: t.clientY
 						}), !0) : (I({
-							pageId: T.page.id,
+							pageId: E.page.id,
 							clientX: t.clientX,
 							clientY: t.clientY
 						}), !0);
 					},
-					dragstart: (e, t) => D.value ? (t.preventDefault(), !0) : (t.target instanceof HTMLElement ? t.target : null)?.closest("[data-template-variable]") ? (t.dataTransfer?.setData(C, T.page.id), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"), O.value?.classList.add("is-variable-dragging"), !1) : !1,
-					dragend: () => (O.value?.classList.remove("is-variable-dragging"), !1),
+					dragstart: (e, t) => O.value ? (t.preventDefault(), !0) : (t.target instanceof HTMLElement ? t.target : null)?.closest("[data-template-variable]") ? (t.dataTransfer?.setData(w, E.page.id), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"), k.value?.classList.add("is-variable-dragging"), !1) : !1,
+					dragend: () => (k.value?.classList.remove("is-variable-dragging"), !1),
 					drop: (e, t) => {
-						if (D.value) return t.preventDefault(), t.stopPropagation(), !0;
-						let n = t.dataTransfer?.getData(C);
-						return !n || n === T.page.id ? !1 : (t.preventDefault(), E("variable-move-blocked", T.page.id), !0);
+						if (O.value) return t.preventDefault(), t.stopPropagation(), !0;
+						let n = t.dataTransfer?.getData(w);
+						return !n || n === E.page.id ? !1 : (t.preventDefault(), D("variable-move-blocked", E.page.id), !0);
 					}
 				},
 				handleKeyDown: (e, t) => {
-					if (D.value || !Ce(t)) return !1;
-					let n = A.value;
+					if (O.value || !je(t)) return !1;
+					let n = j.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: T.page.id,
+							pageId: E.page.id,
 							clientX: e.left,
 							clientY: e.bottom
 						}, i), !0;
 					}
-					let a = r instanceof x;
+					let a = r instanceof S;
 					if (f({
 						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(x.create(n.state.doc, e)));
+							let e = Ne();
+							typeof e == "number" && n.view.dispatch(n.state.tr.setSelection(S.create(n.state.doc, e)));
 						}
 						let e = n.view.coordsAtPos(n.state.selection.from);
 						return B({
-							pageId: T.page.id,
+							pageId: E.page.id,
 							clientX: e.left,
 							clientY: e.bottom
 						}), !0;
 					}
 					let o = n.view.coordsAtPos(n.state.selection.from);
 					return I({
-						pageId: T.page.id,
+						pageId: E.page.id,
 						clientX: o.left,
 						clientY: o.bottom
 					}), !0;
 				}
 			},
 			onUpdate: ({ editor: e }) => {
-				E("page-update", {
-					...T.page,
+				D("page-update", {
+					...E.page,
 					contentHtml: e.getHTML(),
 					contentJson: e.getJSON()
-				}), H();
+				}), U();
 			},
 			onFocus: () => {
-				E("editor-focus", T.page.id), H();
+				D("editor-focus", E.page.id), U();
 			},
-			onBlur: H,
-			onSelectionUpdate: H,
-			onCreate: H
+			onBlur: U,
+			onSelectionUpdate: U,
+			onCreate: U
 		});
-		function be(e) {
+		function Ee(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 xe() {
-			if (!A.value) return "";
-			let { from: e, to: t } = A.value.state.selection;
-			return A.value.state.doc.textBetween(e, t, "\n");
+		function De() {
+			if (!j.value) return "";
+			let { from: e, to: t } = j.value.state.selection;
+			return j.value.state.doc.textBetween(e, t, "\n");
 		}
-		function Se() {
-			let e = A.value, t = e?.state.selection;
+		function Oe() {
+			let e = j.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) > ve) return;
-				let i = Math.abs(r.left - n.left) / U.value;
+				if (Math.abs(r.top - n.top) > we) return;
+				let i = Math.abs(r.left - n.left) / W.value;
 				return Number.isFinite(i) && i > 0 ? i : void 0;
 			} catch {
 				return;
 			}
 		}
-		function j() {
-			let e = A.value;
+		function ke() {
+			let e = j.value, t = e?.state.selection;
+			if (!(!e || !t || t.empty) && !(t instanceof S || t instanceof C)) try {
+				let n = e.view.coordsAtPos(t.from), r = e.view.coordsAtPos(t.to, -1);
+				return {
+					top: Math.min(n.top, r.top),
+					bottom: Math.max(n.bottom, r.bottom),
+					left: Math.min(n.left, r.left),
+					right: Math.max(n.left, r.right)
+				};
+			} catch {
+				return;
+			}
+		}
+		function Ae() {
+			let e = j.value;
 			if (!e) return "";
 			let t = e.state.selection.$from, n = t.pos;
 			for (let e = t.depth; e > 0; --e) {
@@ -189,7 +208,7 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 			}
 			return e.state.doc.textBetween(n, e.state.selection.from, "");
 		}
-		function Ce(e) {
+		function je(e) {
 			return e.key === "ContextMenu" || e.shiftKey && e.key === "F10";
 		}
 		function M(e) {
@@ -198,26 +217,26 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				if (n === "cell" || n === "header_cell") return e.before(t);
 			}
 		}
-		function we(e, t) {
-			let n = A.value, r = n?.view.posAtCoords({
+		function Me(e, t) {
+			let n = j.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 = A.value;
+		function Ne() {
+			let e = j.value;
 			if (e) return M(e.state.selection.$from);
 		}
-		function Ee(e, t, n) {
-			let r = A.value, i = n instanceof HTMLElement ? n : null;
+		function Pe(e, t, n) {
+			let r = j.value, i = n instanceof HTMLElement ? n : null;
 			if (!r || !i?.closest("td,th")) return !1;
-			if (r.state.selection instanceof x && i.closest("td.selectedCell,th.selectedCell")) return !0;
-			let a = we(e, t);
-			return typeof a == "number" ? (r.view.dispatch(r.state.tr.setSelection(x.create(r.state.doc, a))), !0) : !1;
+			if (r.state.selection instanceof S && i.closest("td.selectedCell,th.selectedCell")) return !0;
+			let a = Me(e, t);
+			return typeof a == "number" ? (r.view.dispatch(r.state.tr.setSelection(S.create(r.state.doc, a))), !0) : !1;
 		}
 		function N() {
-			let e = A.value, t = e?.isActive("table") ? e.can() : void 0, n = (e) => !!(t && e(t));
+			let e = j.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()),
@@ -235,41 +254,48 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				deleteTable: n((e) => e.deleteTable())
 			};
 		}
-		function De() {
-			let e = A.value, t = e?.state.selection;
-			if (!e || !(t instanceof x)) return "left";
+		function Fe() {
+			let e = j.value, t = e?.state.selection;
+			if (!e || !(t instanceof S)) 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 = A.value?.state.doc) {
+		function P(e = j.value?.state.doc) {
 			let t = 0;
 			return e?.descendants((e) => {
 				e.type.name === "templateVariable" && (t += 1);
 			}), t;
 		}
 		function F(e) {
-			let t = A.value;
+			let t = j.value;
 			if (!t) return 0;
 			let n = P(t.state.doc), r = n, i = (e) => {
 				r = P(e.doc);
 			};
-			return e === "delete-table-row" ? he(t.state, i) : e === "delete-table-column" ? me(t.state, i) : ge(t.state, i), Math.max(0, n - r);
+			return e === "delete-table-row" ? xe(t.state, i) : e === "delete-table-column" ? be(t.state, i) : Se(t.state, i), Math.max(0, n - r);
 		}
 		function I(e) {
-			let t = A.value?.state.selection, n = !!(t && !t.empty);
-			E("editor-context-menu", {
+			let t = j.value?.state.selection, n = !!(t && !t.empty);
+			D("editor-context-menu", {
 				type: "text",
 				...e,
 				hasSelection: n,
-				selectionWidth: n ? Se() : void 0,
-				leadingText: j()
+				selectionWidth: n ? Oe() : void 0,
+				leadingText: Ae()
+			});
+		}
+		function Ie(e, t) {
+			I({
+				pageId: E.page.id,
+				clientX: e,
+				clientY: t
 			});
 		}
 		function L(e, t) {
-			E("editor-context-menu", {
+			D("editor-context-menu", {
 				type: "image",
 				...e,
 				image: t
@@ -286,24 +312,24 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 			};
 		}
 		function z() {
-			let e = A.value?.state.selection;
-			if (e instanceof S) return R(e.node, e.from);
+			let e = j.value?.state.selection;
+			if (e instanceof C) return R(e.node, e.from);
 		}
-		function Oe(e, t) {
+		function Le(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" && E("variable-select", r.attrs.key), (!(e.state.selection instanceof S) || e.state.selection.from !== t) && e.dispatch(e.state.tr.setSelection(S.create(e.state.doc, t))), R(r, t));
+				return !r || r.type.name !== "templateVariable" && r.type.name !== "image" ? void 0 : (r.type.name === "templateVariable" && typeof r.attrs.key == "string" && D("variable-select", r.attrs.key), (!(e.state.selection instanceof C) || e.state.selection.from !== t) && e.dispatch(e.state.tr.setSelection(C.create(e.state.doc, t))), R(r, t));
 			} catch {
 				return;
 			}
 		}
 		function B(e) {
-			E("editor-context-menu", {
+			D("editor-context-menu", {
 				type: "table",
 				...e,
 				capabilities: N(),
-				activeAlignment: De(),
+				activeAlignment: Fe(),
 				affectedVariableCounts: {
 					deleteRow: F("delete-table-row"),
 					deleteColumn: F("delete-table-column"),
@@ -311,21 +337,37 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				}
 			});
 		}
-		function ke() {
-			return A.value ? [
-				1,
-				2,
-				3,
-				4,
-				5,
-				6
-			].find((e) => A.value?.isActive("heading", { level: e })) : void 0;
-		}
-		function Ae() {
-			return ["center", "right"].find((e) => A.value?.isActive("heading", { textAlign: e }) || A.value?.isActive("paragraph", { textAlign: e })) ?? "left";
+		function Re(e) {
+			return typeof e == "number" && Number.isInteger(e) && e >= 1 && e <= 6;
 		}
 		function V() {
-			let e = A.value, t = (t) => !!e?.isActive(t), n = e?.getAttributes("textStyle") ?? {};
+			let e = j.value;
+			if (!e) return [];
+			let { doc: t, selection: n } = e.state, r = [], i = (e) => {
+				e.type.name === "paragraph" ? r.push("paragraph") : e.type.name === "heading" && Re(e.attrs.level) && r.push(e.attrs.level);
+			};
+			if (n.empty) for (let e = n.$from.depth; e > 0; e--) {
+				let t = n.$from.node(e);
+				if (t.type.name === "paragraph" || t.type.name === "heading") {
+					i(t);
+					break;
+				}
+			}
+			else t.nodesBetween(n.from, n.to, (e) => (i(e), !0));
+			return Array.from(new Set(r));
+		}
+		function ze() {
+			let e = V();
+			return e.length === 1 && e[0] !== "paragraph" ? e[0] : void 0;
+		}
+		function Be() {
+			return V().length > 1;
+		}
+		function Ve() {
+			return ["center", "right"].find((e) => j.value?.isActive("heading", { textAlign: e }) || j.value?.isActive("paragraph", { textAlign: e })) ?? "left";
+		}
+		function H() {
+			let e = j.value, t = (t) => !!e?.isActive(t), n = e?.getAttributes("textStyle") ?? {};
 			return {
 				isFocused: !!e?.isFocused,
 				canUndo: !!e?.can().undo(),
@@ -336,88 +378,94 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				isBulletList: t("bulletList"),
 				isOrderedList: t("orderedList"),
 				isTableActive: t("table"),
-				currentHeadingLevel: ke(),
-				textAlign: Ae(),
+				currentHeadingLevel: ze(),
+				hasMixedBlockFormats: Be(),
+				textAlign: Ve(),
 				fontFamily: typeof n.fontFamily == "string" ? n.fontFamily : void 0,
-				fontSize: be(n.fontSize),
+				fontSize: Ee(n.fontSize),
 				textColor: typeof n.color == "string" ? n.color : void 0,
-				selectionText: xe(),
+				selectionText: De(),
 				selectedContentImage: z()
 			};
 		}
-		function H() {
-			E("editor-state-change", T.page.id, V());
+		function U() {
+			D("editor-state-change", E.page.id, H());
 		}
-		b(D, (e) => {
-			A.value?.setEditable(!e), H();
-		}), b(() => T.page.contentHtml, (e) => {
-			!A.value || e === A.value.getHTML() || (A.value.commands.setContent(e || "<p></p>", { emitUpdate: !1 }), H());
+		x(O, (e) => {
+			j.value?.setEditable(!e), U();
+		}), x(() => E.page.contentHtml, (e) => {
+			!j.value || e === j.value.getHTML() || (j.value.commands.setContent(e || "<p></p>", { emitUpdate: !1 }), U());
 		});
-		let je = p(() => ({
-			width: `${T.pageSize.width}px`,
-			height: `${T.pageSize.height}px`,
-			"--gd-contract-page-content-height": `${q()}px`
-		})), U = p(() => Math.max(.1, T.zoom || 1)), Me = p(() => ({
-			width: `${Math.ceil((T.pageSize.width + 10) * U.value)}px`,
-			height: `${Math.ceil((T.pageSize.height + 40) * U.value)}px`
-		})), Ne = p(() => ({ "--gd-contract-page-zoom": String(U.value) })), Pe = p(() => o(T.pageSize));
-		function W(e, t) {
-			let n = O.value?.getBoundingClientRect();
+		let He = p(() => {
+			let e = l(E.pageDecorations), t = E.pageIndex + 1, n = c(e, t) ? o(e.header) : a.top, r = s(e, t) ? o(e.footer) : a.bottom;
+			return {
+				width: `${E.pageSize.width}px`,
+				height: `${E.pageSize.height}px`,
+				paddingTop: `${n}px`,
+				paddingBottom: `${r}px`,
+				"--gd-contract-page-content-height": `${Math.max(120, E.pageSize.height - n - r)}px`
+			};
+		}), W = p(() => Math.max(.1, E.zoom || 1)), Ue = p(() => ({
+			width: `${Math.ceil((E.pageSize.width + 10) * W.value)}px`,
+			height: `${Math.ceil((E.pageSize.height + 40) * W.value)}px`
+		})), We = p(() => ({ "--gd-contract-page-zoom": String(W.value) })), Ge = p(() => te(E.pageSize));
+		function G(e, t) {
+			let n = k.value?.getBoundingClientRect();
 			return n ? {
-				x: Math.min(T.pageSize.width, Math.max(0, (e - n.left) / U.value)),
-				y: Math.min(T.pageSize.height, Math.max(0, (t - n.top) / U.value))
+				x: Math.min(E.pageSize.width, Math.max(0, (e - n.left) / W.value)),
+				y: Math.min(E.pageSize.height, Math.max(0, (t - n.top) / W.value))
 			} : {
-				x: T.pageSize.width / 2,
-				y: T.pageSize.height / 2
+				x: E.pageSize.width / 2,
+				y: E.pageSize.height / 2
 			};
 		}
-		function Fe(e) {
-			let t = O.value?.getBoundingClientRect(), r = O.value?.closest(".gd-contract-template-designer__canvas")?.getBoundingClientRect(), i = n(e);
+		function Ke(e) {
+			let t = k.value?.getBoundingClientRect(), r = k.value?.closest(".gd-contract-template-designer__canvas")?.getBoundingClientRect(), i = n(e);
 			if (!t || !r) return {
-				x: Math.max(0, (T.pageSize.width - i.width) / 2),
-				y: Math.max(0, (T.pageSize.height - i.height) / 2)
+				x: Math.max(0, (E.pageSize.width - i.width) / 2),
+				y: Math.max(0, (E.pageSize.height - i.height) / 2)
 			};
-			let a = Math.max(t.left, r.left), o = Math.max(t.top, r.top), s = Math.min(t.right, r.right), c = Math.min(t.bottom, r.bottom), l = W(s > a ? (a + s) / 2 : (t.left + t.right) / 2, c > o ? (o + c) / 2 : (t.top + t.bottom) / 2);
+			let a = Math.max(t.left, r.left), o = Math.max(t.top, r.top), s = Math.min(t.right, r.right), c = Math.min(t.bottom, r.bottom), l = G(s > a ? (a + s) / 2 : (t.left + t.right) / 2, c > o ? (o + c) / 2 : (t.top + t.bottom) / 2);
 			return {
 				x: l.x - i.width / 2,
 				y: l.y - i.height / 2
 			};
 		}
-		function Ie(n) {
-			if (!t(T.readonly, T.disabled)) {
+		function qe(n) {
+			if (!t(E.readonly, E.disabled)) {
 				n.preventDefault(), n.stopPropagation();
 				return;
 			}
 			let i = r(n.dataTransfer?.getData(e));
 			if (i) {
 				n.preventDefault(), n.stopPropagation();
-				let e = W(n.clientX, n.clientY);
-				E("signing-placement-drop", T.page.id, i, e.x, e.y);
+				let e = G(n.clientX, n.clientY);
+				D("signing-placement-drop", E.page.id, i, e.x, e.y);
 				return;
 			}
 			let a = n.dataTransfer?.getData("application/x-gd-contract-variable");
 			if (a) {
-				n.preventDefault(), n.stopPropagation(), E("variable-drop", T.page.id, a, n.clientX, n.clientY);
+				n.preventDefault(), n.stopPropagation(), D("variable-drop", E.page.id, a, n.clientX, n.clientY);
 				return;
 			}
-			let o = n.dataTransfer?.getData(C);
-			o && o !== T.page.id && (n.preventDefault(), n.stopPropagation(), E("variable-move-blocked", T.page.id));
+			let o = n.dataTransfer?.getData(w);
+			o && o !== E.page.id && (n.preventDefault(), n.stopPropagation(), D("variable-move-blocked", E.page.id));
 		}
-		function Le(e, t) {
-			let n = A.value;
-			return n ? (l(n, e, t ? n.view.posAtCoords(t)?.pos : void 0), $(), G()) : void 0;
+		function Je(e, t) {
+			let n = j.value;
+			return n ? (ie(n, e, t ? n.view.posAtCoords(t)?.pos : void 0), $(), K()) : void 0;
 		}
-		function Re(e, t) {
-			let n = A.value;
+		function Ye(e, t) {
+			let n = j.value;
 			if (n) return d(n, {
 				type: "insert-content-image",
 				image: e,
 				position: t
-			}), G();
+			}), K();
 		}
-		function ze(e) {
-			let t = A.value, n = t?.state.selection;
-			if (!t || !(n instanceof S) || n.node.type.name !== "image") return;
+		function Xe(e) {
+			let t = j.value, n = t?.state.selection;
+			if (!t || !(n instanceof C) || n.node.type.name !== "image") return;
 			let r = { ...n.node.attrs }, i = !1;
 			if (["width", "height"].forEach((t) => {
 				if (!Object.prototype.hasOwnProperty.call(e, t)) return;
@@ -425,45 +473,49 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				r[t] !== n && (r[t] = n, i = !0);
 			}), !i) return;
 			let a = t.state.tr.setNodeMarkup(n.from, void 0, r);
-			return a.setSelection(S.create(a.doc, n.from)), t.view.dispatch(a), G();
+			return a.setSelection(C.create(a.doc, n.from)), t.view.dispatch(a), K();
 		}
-		function Be() {
-			let e = A.value?.state.selection;
+		function Ze() {
+			let e = j.value?.state.selection;
 			return e ? {
 				from: e.from,
 				to: e.to
 			} : void 0;
 		}
-		function G() {
+		function K() {
 			return {
-				...T.page,
-				pageSize: Pe.value,
-				contentHtml: A.value?.getHTML() ?? T.page.contentHtml,
-				contentJson: A.value?.getJSON() ?? T.page.contentJson
+				...E.page,
+				pageSize: Ge.value,
+				contentHtml: j.value?.getHTML() ?? E.page.contentHtml,
+				contentJson: j.value?.getJSON() ?? E.page.contentJson
 			};
 		}
-		function K(e) {
+		function q(e) {
 			return {
 				type: "doc",
 				content: e.length ? e : [{ type: "paragraph" }]
 			};
 		}
-		function Ve(e) {
+		function Qe(e) {
 			return e?.length ? e.length === 1 && e[0].type === "paragraph" && !e[0].content?.length : !0;
 		}
-		function He(e) {
-			return pe(K(e), k);
+		function $e(e) {
+			return ye(q(e), A);
 		}
-		function q() {
-			let e = O.value;
-			if (!e) return T.pageSize.height - 108;
+		function et() {
+			if (E.pageDecorations) {
+				let e = l(E.pageDecorations), t = E.pageIndex + 1, n = c(e, t) ? o(e.header) : a.top, r = s(e, t) ? o(e.footer) : a.bottom;
+				return Math.max(120, E.pageSize.height - n - r);
+			}
+			let e = k.value;
+			if (!e) return E.pageSize.height - 108;
 			let t = window.getComputedStyle(e), n = Number.parseFloat(t.paddingTop) || 0, r = Number.parseFloat(t.paddingBottom) || 0;
-			return Math.max(120, T.pageSize.height - n - r);
+			return Math.max(120, E.pageSize.height - n - r);
 		}
-		function Ue() {
-			let e = O.value?.querySelector(".gd-contract-template-designer__editor-prose");
+		function tt() {
+			let e = k.value?.querySelector(".gd-contract-template-designer__editor-prose");
 			if (!e) return [];
-			let t = e.getBoundingClientRect(), n = U.value;
+			let t = e.getBoundingClientRect(), n = W.value;
 			return Array.from(e.children).map((e) => {
 				let r = e.getBoundingClientRect();
 				return {
@@ -473,26 +525,26 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 			});
 		}
 		function J() {
-			return A.value ? s(A.value.getJSON().content, Ue(), q()) : void 0;
+			return j.value ? ne(j.value.getJSON().content, tt(), et()) : void 0;
 		}
-		function We() {
+		function nt() {
 			return !!J();
 		}
-		function Ge() {
-			if (!A.value) return;
+		function rt() {
+			if (!j.value) return;
 			let e = J();
-			if (e) return A.value.commands.setContent(K(e.currentContent), { emitUpdate: !1 }), {
-				page: G(),
+			if (e) return j.value.commands.setContent(q(e.currentContent), { emitUpdate: !1 }), {
+				page: K(),
 				overflowContent: e.overflowContent,
-				overflowHtml: He(e.overflowContent)
+				overflowHtml: $e(e.overflowContent)
 			};
 		}
-		function Y(e) {
-			if (!A.value || !e.length) return;
-			let t = A.value.getJSON().content, n = [...e, ...Ve(t) ? [] : t ?? []];
-			return A.value.commands.setContent(K(n), { emitUpdate: !1 }), G();
+		function it(e) {
+			if (!j.value || !e.length) return;
+			let t = j.value.getJSON().content, n = [...e, ...Qe(t) ? [] : t ?? []];
+			return j.value.commands.setContent(q(n), { emitUpdate: !1 }), K();
 		}
-		function X(e, t) {
+		function Y(e, t) {
 			let n = [];
 			return e.descendants((e, r) => {
 				e.type.name === "templateVariable" && e.attrs.key === t && n.push({
@@ -501,44 +553,44 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 				});
 			}), n;
 		}
-		function Ke(e, t = e.key) {
-			if (!A.value) return;
-			let n = c(e), r = !1;
-			return A.value.commands.command(({ tr: e, state: i, dispatch: a }) => (X(i.doc, t).forEach(({ node: t, pos: i }) => {
+		function X(e, t = e.key) {
+			if (!j.value) return;
+			let n = re(e), r = !1;
+			return j.value.commands.command(({ tr: e, state: i, dispatch: a }) => (Y(i.doc, t).forEach(({ node: t, pos: i }) => {
 				e.setNodeMarkup(i, void 0, {
 					...t.attrs,
 					...n
 				}), r = !0;
-			}), r && a?.(e), r)), $(), r ? G() : void 0;
+			}), r && a?.(e), r)), $(), r ? K() : void 0;
 		}
-		function qe(e) {
-			if (!A.value) return;
+		function at(e) {
+			if (!j.value) return;
 			let t = 0;
-			return A.value.commands.command(({ tr: n, state: r, dispatch: i }) => {
-				let a = X(r.doc, e).map(({ node: e, pos: t }) => ({
+			return j.value.commands.command(({ tr: n, state: r, dispatch: i }) => {
+				let a = Y(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;
+			}), t ? K() : void 0;
 		}
 		function Z() {
-			O.value?.querySelectorAll(".gd-contract-template-variable.is-active").forEach((e) => e.classList.remove("is-active"));
+			k.value?.querySelectorAll(".gd-contract-template-variable.is-active").forEach((e) => e.classList.remove("is-active"));
 		}
 		function Q(e) {
-			if (e) return Array.from(O.value?.querySelectorAll("[data-template-variable]") ?? []).find((t) => t.dataset.key === e);
+			if (e) return Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((t) => t.dataset.key === e);
 		}
-		function Je(e) {
+		function ot(e) {
 			Z();
 			let t = Q(e);
 			return t ? (t.classList.add("is-active"), t.scrollIntoView({
 				behavior: "smooth",
 				block: "center",
 				inline: "center"
-			}), A.value?.commands.focus(), !0) : !1;
+			}), j.value?.commands.focus(), !0) : !1;
 		}
-		function Ye(e) {
-			let t = Array.from(O.value?.querySelectorAll("[data-signing-placement-id]") ?? []).find((t) => t.dataset.signingPlacementId === e);
+		function st(e) {
+			let t = Array.from(k.value?.querySelectorAll("[data-signing-placement-id]") ?? []).find((t) => t.dataset.signingPlacementId === e);
 			return t?.scrollIntoView({
 				behavior: "smooth",
 				block: "center",
@@ -546,106 +598,123 @@ var _e = { class: "gd-contract-template-designer__page-title" }, C = "applicatio
 			}), !!t;
 		}
 		function $() {
-			Z(), Q(T.selectedVariableKey)?.classList.add("is-active");
+			Z(), Q(E.selectedVariableKey)?.classList.add("is-active");
 		}
-		function Xe(e) {
-			let t = i.find((t) => t.key === e), n = A.value;
+		function ct(e) {
+			let t = i.find((t) => t.key === e), n = j.value;
 			if (!t || !n) return;
 			let r = n.chain().focus().clearNodes();
-			t.headingLevel ? r.setHeading({ level: t.headingLevel }) : r.setParagraph(), r.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(a.color || "#1f2937"), t.bold ? r.setBold() : r.unsetBold(), t.italic ? r.setItalic() : r.unsetItalic(), t.underline ? r.setUnderline() : r.unsetUnderline(), r.run();
+			t.headingLevel ? r.setHeading({ level: t.headingLevel }) : r.setParagraph(), r.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(ee.color || "#1f2937"), t.bold ? r.setBold() : r.unsetBold(), t.italic ? r.setItalic() : r.unsetItalic(), t.underline ? r.setUnderline() : r.unsetUnderline(), r.run();
 		}
-		b([() => T.selectedVariableKey, () => T.variables], () => {
-			oe($);
+		x([() => E.selectedVariableKey, () => E.variables], () => {
+			fe($);
 		}, {
 			deep: !0,
 			flush: "post"
 		});
-		function Ze(e) {
-			e.type === "apply-text-style-preset" ? Xe(e.preset) : d(A.value, e), H();
+		function lt(e) {
+			e.type === "apply-block-style" ? j.value && oe(j.value, e.format) : e.type === "apply-text-style-preset" ? ct(e.preset) : d(j.value, e), U();
 		}
-		function Qe() {
-			A.value?.commands.focus();
+		function ut() {
+			j.value?.commands.focus();
 		}
-		function $e() {
-			return A.value?.getJSON();
+		function dt() {
+			return j.value?.getJSON();
 		}
-		function et() {
-			return A.value?.getHTML() ?? T.page.contentHtml;
+		function ft() {
+			return j.value?.getHTML() ?? E.page.contentHtml;
 		}
-		function tt(e) {
-			let t = T.variables.find((t) => t.id === e || t.key === e), n = t ? Q(t.key) : void 0;
+		function pt(e) {
+			let t = E.variables.find((t) => t.id === e || t.key === e), n = t ? Q(t.key) : void 0;
 			$(), n?.scrollIntoView({
 				behavior: "smooth",
 				block: "center"
 			});
 		}
-		function nt() {
-			O.value?.scrollIntoView({
+		function mt() {
+			k.value?.scrollIntoView({
 				behavior: "smooth",
 				block: "start",
 				inline: "center"
 			});
 		}
-		return ce(() => {
-			A.value?.destroy();
-		}), w({
-			focus: Qe,
-			getHTML: et,
-			getJSON: $e,
-			getEditorState: V,
+		return me(() => {
+			j.value?.destroy();
+		}), T({
+			focus: ut,
+			getHTML: ft,
+			getJSON: dt,
+			getEditorState: H,
 			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) => (_(), ie("section", {
+			getVisibleSigningPlacementPosition: Ke,
+			insertVariable: Je,
+			insertContentImage: Ye,
+			updateSelectedContentImage: Xe,
+			getSelectionRange: Ze,
+			getSelectionViewportRect: ke,
+			requestTextContextMenu: Ie,
+			hasOverflowContent: nt,
+			updateVariable: X,
+			removeVariable: at,
+			splitOverflowContent: rt,
+			prependContent: it,
+			runCommand: lt,
+			scrollIntoField: pt,
+			scrollIntoVariable: ot,
+			scrollIntoSigningPlacement: st,
+			scrollIntoPage: mt
+		}), (e, t) => (v(), de("section", {
 			class: "gd-contract-template-designer__page-shell",
-			style: g(Me.value)
+			style: _(Ue.value)
 		}, [m("div", {
-			class: se(["gd-contract-template-designer__page-zoom", { "is-active": h.active }]),
-			style: g(Ne.value)
-		}, [m("header", _e, [m("span", null, v(h.page.title || `第 ${h.pageIndex + 1} 页`), 1), m("span", null, "第 " + v(h.pageIndex + 1) + " 页 · " + v(h.pageSize.label || "A4") + " · " + v(h.pageSize.width) + " × " + v(h.pageSize.height), 1)]), m("div", {
+			class: pe(["gd-contract-template-designer__page-zoom", { "is-active": g.active }]),
+			style: _(We.value)
+		}, [m("header", Ce, [m("span", null, y(g.page.title || `第 ${g.pageIndex + 1} 页`), 1), m("span", null, "第 " + y(g.pageIndex + 1) + " 页 · " + y(g.pageSize.label || "A4") + " · " + y(g.pageSize.width) + " × " + y(g.pageSize.height), 1)]), m("div", {
 			ref_key: "pageElement",
-			ref: O,
+			ref: k,
 			class: "gd-contract-template-designer__page",
-			style: g(je.value),
-			onDragover: t[3] ||= ue(() => {}, ["prevent"]),
-			onDrop: Ie,
-			onClick: t[4] ||= (e) => E("editor-focus", h.page.id)
-		}, [y(A) ? (_(), ne(y(de), {
-			key: 0,
-			editor: y(A)
-		}, null, 8, ["editor"])) : re("", !0), ae(te, {
-			"page-size": h.pageSize,
-			placements: h.signingPlacements,
-			"selected-id": h.selectedSigningPlacementId,
-			zoom: U.value,
-			readonly: h.readonly,
-			disabled: h.disabled,
-			onSelect: t[0] ||= (e) => E("signing-placement-select", e),
-			onMove: t[1] ||= (e) => E("signing-placement-move", e),
-			onRemove: t[2] ||= (e) => E("signing-placement-remove", e)
-		}, null, 8, [
-			"page-size",
-			"placements",
-			"selected-id",
-			"zoom",
-			"readonly",
-			"disabled"
-		])], 36)], 6)], 4));
+			style: _(He.value),
+			onDragover: t[3] ||= ge(() => {}, ["prevent"]),
+			onDrop: qe,
+			onClick: t[4] ||= (e) => D("editor-focus", g.page.id)
+		}, [
+			h(ce, {
+				decorations: g.pageDecorations,
+				"page-number": g.pageIndex + 1,
+				"total-pages": g.totalPages,
+				variables: g.variables
+			}, null, 8, [
+				"decorations",
+				"page-number",
+				"total-pages",
+				"variables"
+			]),
+			b(j) ? (v(), le(b(_e), {
+				key: 0,
+				class: "gd-contract-template-page__content",
+				editor: b(j)
+			}, null, 8, ["editor"])) : ue("", !0),
+			h(se, {
+				"page-size": g.pageSize,
+				placements: g.signingPlacements,
+				"selected-id": g.selectedSigningPlacementId,
+				zoom: W.value,
+				readonly: g.readonly,
+				disabled: g.disabled,
+				onSelect: t[0] ||= (e) => D("signing-placement-select", e),
+				onMove: t[1] ||= (e) => D("signing-placement-move", e),
+				onRemove: t[2] ||= (e) => D("signing-placement-remove", e)
+			}, null, 8, [
+				"page-size",
+				"placements",
+				"selected-id",
+				"zoom",
+				"readonly",
+				"disabled"
+			])
+		], 36)], 6)], 4));
 	}
 });
 //#endregion
-export { w as default };
+export { T as default };