@pdfme/schemas 6.1.0 → 6.1.1-dev.11

package/dist/index.js

@@ -1,11 +1,16 @@
-import { B as VERTICAL_ALIGN_MIDDLE, C as DEFAULT_ALIGNMENT, F as SYNTHETIC_BOLD_CSS_TEXT_SHADOW, T as DEFAULT_FONT_COLOR, a as getColumnStylesPropPanelSchema, c as createSingleTable, i as getCellPropPanelSchema, n as getBody, o as getDefaultCellStyles, p as getFontKitFont, r as getBodyWithRange, s as HEX_COLOR_PATTERN, t as getDynamicHeightsForTable, x as CODE_BACKGROUND_COLOR } from "./dynamicTemplate-Dsrw11aL.js";
-import { a as mapVerticalAlignToFlex, c as Formatter, d as isInlineMarkdownTextSchema, f as resolveFontVariant, i as makeElementPlainTextContentEditable, l as getExtraFormatterSchema, m as parseInlineMarkdown, n as textSchema, o as uiRender$3, p as escapeInlineMarkdown, r as buildStyledTextContainer, s as propPanel$2, t as builtInPlugins, u as pdfRender$3 } from "./builtins-C0BvXHWr.js";
+import { E as DEFAULT_ALIGNMENT, K as VERTICAL_ALIGN_MIDDLE, O as DEFAULT_FONT_COLOR, R as PLACEHOLDER_FONT_COLOR, a as createListItemSplitRange, c as getListItemRange, h as getFontKitFont, i as TEXT_LINE_SPLIT_UNIT, l as getTableBodyRange, n as LIST_ITEM_SPLIT_UNIT, o as createTableBodySplitRange, r as TABLE_BODY_SPLIT_UNIT, s as createTextLineSplitRange, t as BUILT_IN_DYNAMIC_LAYOUT_SPLIT_UNITS, u as getTextLineRange, w as CODE_BACKGROUND_COLOR, z as SYNTHETIC_BOLD_CSS_TEXT_SHADOW } from "./splitRange-CpXivbmJ.js";
+import { d as resolveFontVariant, l as isInlineMarkdownTextSchema, m as parseInlineMarkdown } from "./measure-Bjmh9Ro3.js";
+import { a as mapVerticalAlignToFlex, c as Formatter, i as makeElementPlainTextContentEditable, l as getExtraFormatterSchema, n as textSchema, o as uiRender$4, r as buildStyledTextContainer, s as propPanel$3, t as builtInPlugins, u as pdfRender$4 } from "./builtins-Clh58o_b.js";
+import { a as getCellPropPanelSchema, c as HEX_COLOR_PATTERN, i as getBodyWithSchemaRange, l as createSingleTable, n as getDynamicLayoutForTable, o as getColumnStylesPropPanelSchema, r as getBody, s as getDefaultCellStyles, t as getDynamicHeightsForTable } from "./dynamicTemplate-CjbGepw4.js";
 import { addAlphaToHex, convertForPdfLayoutProps, createErrorElm, createSvgStr, hex2PrintingColor, isEditable, readFile, rotatePoint } from "./utils.js";
+import { a as normalizeListItems, c as LIST_STYLE_BULLET, i as normalizeListItemEntries, l as LIST_STYLE_ORDERED, n as calculateListLayout, o as serializeListItems, s as DEFAULT_LIST_STYLE, t as getDynamicLayoutForList } from "./dynamicTemplate-Fn7mpUsu.js";
+import { n as substituteVariablesAsInlineMarkdownLiterals, r as validateVariables, t as substituteVariables } from "./helper-BJzBqIT4.js";
 import "./tables.js";
+import "./lists.js";
 import { DEFAULT_FONT_NAME, ZOOM, b64toUint8Array, getDefaultFont, getFallbackFontName, mm2pt, px2mm } from "@pdfme/common";
 import { Buffer as Buffer$1 } from "buffer";
 import { toRadians } from "@pdfme/pdf-lib";
-import { Barcode, Calendar, CalendarClock, ChevronDown, Circle, CircleDot, Clock, Image, Minus, QrCode, Route, Square, SquareCheck, Table, Type } from "lucide";
+import { Barcode, Calendar, CalendarClock, ChevronDown, Circle, CircleDot, Clock, Image, List, Minus, QrCode, Route, Square, SquareCheck, Table, Type } from "lucide";
 import DOMPurify from "dompurify";
 import bwipjs from "bwip-js";
 import AirDatepicker from "air-datepicker";
@@ -34,47 +39,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-//#region src/multiVariableText/helper.ts
-var substituteVariables = (text, variablesIn, valueMapper = (value) => value) => {
-	if (!text) return "";
-	let substitutedText = text;
-	if (variablesIn) {
-		let variables;
-		try {
-			variables = typeof variablesIn === "string" ? JSON.parse(variablesIn || "{}") : variablesIn;
-		} catch {
-			throw new SyntaxError(`[@pdfme/schemas] MVT: invalid JSON string '${variablesIn}'`);
-		}
-		Object.keys(variables).forEach((variableName) => {
-			const variableForRegex = variableName.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
-			const regex = new RegExp("\\{" + variableForRegex + "\\}", "g");
-			substitutedText = substitutedText.replace(regex, valueMapper(variables[variableName], variableName));
-		});
-	}
-	substitutedText = substitutedText.replace(/{[^{}]+}/g, "");
-	return substitutedText;
-};
-var substituteVariablesAsInlineMarkdownLiterals = (text, variablesIn) => substituteVariables(text, variablesIn, escapeInlineMarkdown);
-var validateVariables = (value, schema) => {
-	if (schema.variables.length === 0) return true;
-	let values;
-	try {
-		values = value ? JSON.parse(value) : {};
-	} catch {
-		throw new SyntaxError(`[@pdfme/generator] invalid JSON string '${value}' for variables in field ${schema.name}`);
-	}
-	for (const variable of schema.variables) if (!values[variable]) {
-		if (schema.required) throw new Error(`[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`);
-		return false;
-	}
-	return true;
-};
-//#endregion
 //#region src/multiVariableText/pdfRender.ts
-var pdfRender$2 = async (arg) => {
+var pdfRender$3 = async (arg) => {
 	const { value, schema, ...rest } = arg;
+	if (schema.readOnly) {
+		await pdfRender$4({
+			value,
+			schema,
+			...rest
+		});
+		return;
+	}
 	if (!validateVariables(value, schema)) return;
-	await pdfRender$3({
+	await pdfRender$4({
 		value: isInlineMarkdownTextSchema(schema) ? substituteVariablesAsInlineMarkdownLiterals(schema.text || "", value) : substituteVariables(schema.text || "", value),
 		schema,
 		...rest
@@ -184,10 +161,10 @@ var mapDynamicVariables = (props) => {
 		rootElement.appendChild(para);
 	}
 };
-var propPanel$1 = {
+var propPanel$2 = {
 	schema: (propPanelProps) => {
-		if (typeof propPanel$2.schema !== "function") throw new Error("Oops, is text schema no longer a function?");
-		const parentSchema = typeof propPanel$2.schema === "function" ? propPanel$2.schema(propPanelProps) : {};
+		if (typeof propPanel$3.schema !== "function") throw new Error("Oops, is text schema no longer a function?");
+		const parentSchema = typeof propPanel$3.schema === "function" ? propPanel$3.schema(propPanelProps) : {};
 		const i18n = propPanelProps.i18n;
 		return {
 			...parentSchema,
@@ -225,11 +202,11 @@ var propPanel$1 = {
 		};
 	},
 	widgets: {
-		...propPanel$2.widgets,
+		...propPanel$3.widgets,
 		mapDynamicVariables
 	},
 	defaultSchema: {
-		...propPanel$2.defaultSchema,
+		...propPanel$3.defaultSchema,
 		readOnly: false,
 		type: "multiVariableText",
 		text: "Add text here using {} for variables ",
@@ -262,16 +239,27 @@ var updateVariablesFromText = (text, variables) => {
 };
 //#endregion
 //#region src/multiVariableText/uiRender.ts
-var uiRender$2 = async (arg) => {
+var uiRender$3 = async (arg) => {
 	const { value, schema, rootElement, mode, onChange, ...rest } = arg;
 	let text = schema.text;
 	let numVariables = schema.variables.length;
-	if (mode === "form" && numVariables > 0) {
+	const renderResolvedValue = schema.readOnly === true && mode !== "designer";
+	const renderValue = renderResolvedValue ? value : isInlineMarkdownTextSchema(schema) ? substituteVariablesAsInlineMarkdownLiterals(text, value) : substituteVariables(text, value);
+	if (mode === "form" && numVariables > 0 && !renderResolvedValue) {
+		if (getTextLineRange(schema)) {
+			await uiRender$4({
+				value: renderValue,
+				schema,
+				mode: "viewer",
+				rootElement,
+				...rest
+			});
+			return;
+		}
 		await formUiRender(arg);
 		return;
 	}
-	const renderValue = isInlineMarkdownTextSchema(schema) ? substituteVariablesAsInlineMarkdownLiterals(text, value) : substituteVariables(text, value);
-	await uiRender$3({
+	await uiRender$4({
 		value: isEditable(mode, schema) ? text : renderValue,
 		schema,
 		mode: mode === "form" ? "viewer" : mode,
@@ -373,7 +361,9 @@ var applyInlineMarkdownStyle = (arg) => {
 		element.style.textShadow = SYNTHETIC_BOLD_CSS_TEXT_SHADOW;
 	}
 	if (resolvedFont.syntheticItalic) element.style.fontStyle = "italic";
-	if (run.strikethrough) element.style.textDecoration = "line-through";
+	const textDecorations = [];
+	if (run.strikethrough) textDecorations.push("line-through");
+	if (textDecorations.length > 0) element.style.textDecoration = textDecorations.join(" ");
 	if (run.code) {
 		element.style.backgroundColor = CODE_BACKGROUND_COLOR;
 		element.style.borderRadius = "2px";
@@ -470,11 +460,775 @@ var keyPressShouldBeChecked = (event) => {
 //#endregion
 //#region src/multiVariableText/index.ts
 var schema$1 = {
+	pdf: pdfRender$3,
+	ui: uiRender$3,
+	propPanel: propPanel$2,
+	icon: createSvgStr(Type),
+	uninterruptedEditMode: true
+};
+//#endregion
+//#region src/shapes/rectAndEllipse.ts
+var shape = {
+	ui: (arg) => {
+		const { schema, rootElement } = arg;
+		const div = document.createElement("div");
+		div.style.width = "100%";
+		div.style.height = "100%";
+		div.style.boxSizing = "border-box";
+		if (schema.type === "ellipse") div.style.borderRadius = "50%";
+		else if (schema.radius && schema.radius > 0) div.style.borderRadius = `${schema.radius}mm`;
+		div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
+		div.style.borderStyle = schema.borderWidth && schema.borderColor ? "solid" : "none";
+		div.style.borderColor = schema.borderColor ?? "transparent";
+		div.style.backgroundColor = schema.color ?? "transparent";
+		rootElement.appendChild(div);
+	},
+	pdf: (arg) => {
+		const { schema, page, options } = arg;
+		if (!schema.color && !schema.borderColor) return;
+		const { colorType } = options;
+		const cArg = {
+			schema,
+			pageHeight: page.getHeight()
+		};
+		const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
+		const { position: { x: x4Ellipse, y: y4Ellipse } } = convertForPdfLayoutProps({
+			...cArg,
+			applyRotateTranslate: false
+		});
+		const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
+		const drawOptions = {
+			rotate,
+			borderWidth,
+			borderColor: hex2PrintingColor(schema.borderColor, colorType),
+			color: hex2PrintingColor(schema.color, colorType),
+			opacity,
+			borderOpacity: opacity
+		};
+		if (schema.type === "ellipse") page.drawEllipse({
+			x: x4Ellipse + width / 2,
+			y: y4Ellipse + height / 2,
+			xScale: width / 2 - borderWidth / 2,
+			yScale: height / 2 - borderWidth / 2,
+			...drawOptions
+		});
+		else if (schema.type === "rectangle") {
+			const radius = schema.radius ?? 0;
+			page.drawRectangle({
+				x: position.x + borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * Math.PI ** 2,
+				y: position.y + borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * Math.PI ** 2,
+				width: width - borderWidth,
+				height: height - borderWidth,
+				...radius ? { radius: mm2pt(radius) } : {},
+				...drawOptions
+			});
+		}
+	},
+	propPanel: {
+		schema: ({ i18n }) => ({
+			borderWidth: {
+				title: i18n("schemas.borderWidth"),
+				type: "number",
+				widget: "inputNumber",
+				props: {
+					min: 0,
+					step: 1
+				},
+				span: 12
+			},
+			borderColor: {
+				title: i18n("schemas.borderColor"),
+				type: "string",
+				widget: "color",
+				props: { disabledAlpha: true },
+				rules: [{
+					pattern: HEX_COLOR_PATTERN,
+					message: i18n("validation.hexColor")
+				}],
+				span: 12
+			},
+			color: {
+				title: i18n("schemas.color"),
+				type: "string",
+				widget: "color",
+				props: { disabledAlpha: true },
+				rules: [{
+					pattern: HEX_COLOR_PATTERN,
+					message: i18n("validation.hexColor")
+				}]
+			},
+			radius: {
+				title: i18n("schemas.radius"),
+				type: "number",
+				widget: "inputNumber",
+				props: {
+					min: 0,
+					step: 1
+				},
+				span: 12
+			}
+		}),
+		defaultSchema: {
+			name: "",
+			type: "rectangle",
+			position: {
+				x: 0,
+				y: 0
+			},
+			width: 62.5,
+			height: 37.5,
+			rotate: 0,
+			opacity: 1,
+			borderWidth: 1,
+			borderColor: "#000000",
+			color: "",
+			readOnly: true,
+			radius: 0
+		}
+	}
+};
+var getPropPanelSchema = (type) => ({
+	...shape.propPanel,
+	defaultSchema: {
+		...shape.propPanel.defaultSchema,
+		type
+	}
+});
+var rectangle = {
+	...shape,
+	propPanel: getPropPanelSchema("rectangle"),
+	icon: createSvgStr(Square)
+};
+var ellipse = {
+	...shape,
+	propPanel: getPropPanelSchema("ellipse"),
+	icon: createSvgStr(Circle)
+};
+//#endregion
+//#region src/list/pdfRender.ts
+var rectanglePdfRender$2 = rectangle.pdf;
+var pdfRender$2 = async (arg) => {
+	const { schema, value } = arg;
+	const items = normalizeListItems(value);
+	const range = getListItemRange(schema) ?? {
+		start: 0,
+		end: items.length
+	};
+	const visibleItems = items.slice(range.start, range.end);
+	if (visibleItems.length === 0) return;
+	const layout = await calculateListLayout({
+		schema,
+		items: visibleItems,
+		markerItems: items,
+		startIndex: range.start,
+		options: arg.options,
+		_cache: arg._cache
+	});
+	if (schema.backgroundColor) await rectanglePdfRender$2({
+		...arg,
+		schema: {
+			...schema,
+			type: "rectangle",
+			borderWidth: 0,
+			borderColor: "",
+			color: schema.backgroundColor
+		}
+	});
+	let y = schema.position.y;
+	for (const item of layout.items) {
+		await pdfRender$4({
+			...arg,
+			value: item.marker,
+			schema: {
+				...schema,
+				type: "text",
+				position: {
+					x: schema.position.x + item.markerX,
+					y
+				},
+				width: layout.markerWidth,
+				height: item.height,
+				backgroundColor: "",
+				alignment: "right",
+				verticalAlignment: "top",
+				dynamicFontSize: void 0
+			}
+		});
+		await pdfRender$4({
+			...arg,
+			value: item.item,
+			schema: {
+				...schema,
+				type: "text",
+				position: {
+					x: schema.position.x + item.bodyX,
+					y
+				},
+				width: item.bodyWidth,
+				height: item.height,
+				backgroundColor: "",
+				verticalAlignment: "top",
+				dynamicFontSize: void 0
+			}
+		});
+		y += item.height;
+	}
+};
+//#endregion
+//#region src/list/propPanel.ts
+var propPanel$1 = {
+	schema: (propPanelProps) => {
+		if (typeof propPanel$3.schema !== "function") throw new Error("Oops, is text schema no longer a function?");
+		const parentSchema = propPanel$3.schema(propPanelProps);
+		const i18n = propPanelProps.i18n;
+		const listSchema = { ...parentSchema };
+		delete listSchema.useDynamicFontSize;
+		delete listSchema.dynamicFontSize;
+		return {
+			...listSchema,
+			"-------": {
+				type: "void",
+				widget: "Divider"
+			},
+			listStyle: {
+				title: i18n("schemas.list.listStyle"),
+				type: "string",
+				widget: "select",
+				props: { options: [{
+					label: i18n("schemas.list.bullet"),
+					value: LIST_STYLE_BULLET
+				}, {
+					label: i18n("schemas.list.ordered"),
+					value: LIST_STYLE_ORDERED
+				}] },
+				span: 24
+			},
+			markerWidth: {
+				title: i18n("schemas.list.markerWidth"),
+				type: "number",
+				widget: "inputNumber",
+				props: { min: 0 },
+				span: 6
+			},
+			markerGap: {
+				title: i18n("schemas.list.markerGap"),
+				type: "number",
+				widget: "inputNumber",
+				props: { min: 0 },
+				span: 6
+			},
+			indentSize: {
+				title: i18n("schemas.list.indentSize"),
+				type: "number",
+				widget: "inputNumber",
+				props: { min: 0 },
+				span: 6
+			},
+			itemSpacing: {
+				title: i18n("schemas.list.itemSpacing"),
+				type: "number",
+				widget: "inputNumber",
+				props: { min: 0 },
+				span: 6
+			}
+		};
+	},
+	widgets: propPanel$3.widgets,
+	defaultSchema: {
+		...propPanel$3.defaultSchema,
+		type: "list",
+		content: JSON.stringify(["First item", "Second item"]),
+		width: 80,
+		height: 20,
+		listStyle: DEFAULT_LIST_STYLE,
+		markerWidth: 6,
+		markerGap: 2,
+		indentSize: 6,
+		itemSpacing: 1,
+		dynamicFontSize: void 0,
+		verticalAlignment: "top"
+	}
+};
+//#endregion
+//#region src/list/uiRender.ts
+var focusDataKey = "pdfmeListFocusIndex";
+var actionDataKey = "pdfmeListAction";
+var internalFocusDataKey = "pdfmeListInternalFocus";
+var caretMarker = "​";
+var pendingFocusIndexes = /* @__PURE__ */ new Map();
+var getListFocusKey = (schema) => schema.id || schema.name;
+var isComposingKeyboardEvent = (event) => event.isComposing || event.keyCode === 229;
+var getText = (element) => {
+	const rawText = element.innerText;
+	const hasCaretMarker = rawText.includes(caretMarker);
+	let text = rawText.replace(/\u200B/g, "");
+	if (!hasCaretMarker && text.endsWith("\n")) text = text.slice(0, -1);
+	return text;
+};
+var setStyles = (element, styles) => {
+	Object.assign(element.style, styles);
+};
+var focusBody = (body) => {
+	body.focus();
+	const selection = window.getSelection();
+	const range = document.createRange();
+	if (selection && range) {
+		range.selectNodeContents(body);
+		range.collapse(false);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+};
+var getCaretRangeFromPoint = (x, y) => {
+	const documentWithCaret = document;
+	if (documentWithCaret.caretRangeFromPoint) return documentWithCaret.caretRangeFromPoint(x, y);
+	const caretPosition = documentWithCaret.caretPositionFromPoint?.(x, y);
+	if (!caretPosition) return null;
+	const range = document.createRange();
+	range.setStart(caretPosition.offsetNode, caretPosition.offset);
+	range.collapse(true);
+	return range;
+};
+var focusBodyFromMouseEvent = (body, event) => {
+	body.focus();
+	const range = getCaretRangeFromPoint(event.clientX, event.clientY);
+	if (!range || !body.contains(range.startContainer)) return;
+	const selection = window.getSelection();
+	if (!selection) return;
+	selection.removeAllRanges();
+	selection.addRange(range);
+};
+var getBodyEditor = (body) => body.querySelector("[contenteditable], [tabindex]");
+var insertLineBreakAtSelection = (element) => {
+	const fallbackText = getText(element);
+	const selection = window.getSelection();
+	if (!selection?.rangeCount) {
+		element.innerText = `${fallbackText}\n${caretMarker}`;
+		focusBody(element);
+		return true;
+	}
+	const range = selection.getRangeAt(0);
+	if (!element.contains(range.commonAncestorContainer)) {
+		element.innerText = `${fallbackText}\n${caretMarker}`;
+		focusBody(element);
+		return true;
+	}
+	selection.deleteFromDocument();
+	const fragment = document.createDocumentFragment();
+	const lineBreak = document.createElement("br");
+	const marker = document.createTextNode(caretMarker);
+	fragment.append(lineBreak, marker);
+	range.insertNode(fragment);
+	range.setStart(marker, marker.length);
+	range.collapse(true);
+	selection.removeAllRanges();
+	selection.addRange(range);
+	if (!element.innerText.includes(caretMarker)) {
+		element.innerText = `${fallbackText}\n${caretMarker}`;
+		focusBody(element);
+	}
+	return true;
+};
+var createActionButton = (arg) => {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.innerText = arg.label;
+	button.setAttribute("aria-label", arg.ariaLabel);
+	button.disabled = Boolean(arg.disabled);
+	setStyles(button, {
+		width: "18px",
+		height: "18px",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: "0",
+		border: "1px solid #d9d9d9",
+		borderRadius: "3px",
+		background: "#ffffff",
+		color: "#333333",
+		fontSize: "11px",
+		lineHeight: "1",
+		cursor: arg.disabled ? "not-allowed" : "pointer",
+		opacity: arg.disabled ? .45 : 1
+	});
+	button.addEventListener("pointerdown", (event) => {
+		arg.onPressStart?.();
+		event.stopPropagation();
+	});
+	button.addEventListener("mousedown", (event) => {
+		arg.onPressStart?.();
+		event.preventDefault();
+		event.stopPropagation();
+	});
+	button.addEventListener("click", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!arg.disabled) arg.onClick();
+	});
+	return button;
+};
+var uiRender$2 = async (arg) => {
+	const { rootElement, schema, value, mode, onChange, stopEditing, tabIndex, placeholder } = arg;
+	const focusKey = getListFocusKey(schema);
+	const editable = isEditable(mode, schema);
+	const showControls = editable && (mode === "form" || mode === "designer");
+	const usePlaceholder = editable && !value && Boolean(placeholder);
+	const items = normalizeListItems(usePlaceholder ? placeholder || "" : value);
+	const originalItems = normalizeListItemEntries(value);
+	const range = getListItemRange(schema) ?? {
+		start: 0,
+		end: items.length
+	};
+	const visibleItems = items.slice(range.start, range.end);
+	const renderItems = visibleItems;
+	rootElement.innerHTML = "";
+	setStyles(rootElement, {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		backgroundColor: schema.backgroundColor || "transparent",
+		overflow: "visible"
+	});
+	const layout = await calculateListLayout({
+		schema,
+		items: renderItems,
+		markerItems: items,
+		startIndex: range.start,
+		options: arg.options,
+		_cache: arg._cache
+	});
+	const bodyElements = [];
+	const getEditedItems = () => layout.items.map((item, index) => ({
+		level: item.level,
+		text: getText(bodyElements[index])
+	}));
+	const getNextItems = () => {
+		const editedItems = getEditedItems();
+		if (usePlaceholder) return editedItems;
+		const nextItems = [...originalItems];
+		nextItems.splice(range.start, visibleItems.length, ...editedItems);
+		return nextItems;
+	};
+	const commitItems = (nextItems, focusIndex) => {
+		if (!onChange) return;
+		if (focusIndex !== void 0) {
+			rootElement.dataset[focusDataKey] = String(focusIndex);
+			pendingFocusIndexes.set(focusKey, focusIndex);
+		}
+		onChange({
+			key: "content",
+			value: serializeListItems(nextItems)
+		});
+	};
+	const commitHeight = async (focusIndex) => {
+		if (!onChange) return;
+		if (focusIndex !== void 0) {
+			rootElement.dataset[focusDataKey] = String(focusIndex);
+			pendingFocusIndexes.set(focusKey, focusIndex);
+		}
+		const rawItems = normalizeListItems(serializeListItems(getNextItems()));
+		const nextLayout = await calculateListLayout({
+			schema,
+			items: rawItems.slice(range.start, range.end),
+			markerItems: rawItems,
+			startIndex: range.start,
+			options: arg.options,
+			_cache: arg._cache
+		});
+		if (schema.height !== nextLayout.totalHeight) onChange({
+			key: "height",
+			value: nextLayout.totalHeight
+		});
+	};
+	const preserveEditingForAction = () => {
+		rootElement.dataset[actionDataKey] = "true";
+	};
+	const updateItems = (rowIndex, mutate) => {
+		const nextItems = getNextItems();
+		if (nextItems.length === 0) nextItems.push({
+			level: 0,
+			text: ""
+		});
+		const focusIndex = mutate(nextItems, Math.min(Math.max(range.start + rowIndex, 0), nextItems.length - 1));
+		preserveEditingForAction();
+		commitItems(nextItems, focusIndex);
+	};
+	const preserveEditingForInternalFocus = () => {
+		rootElement.dataset[internalFocusDataKey] = "true";
+	};
+	const preserveEditingForKeyboardCommit = () => {
+		preserveEditingForInternalFocus();
+		setTimeout(() => {
+			if (rootElement.dataset[internalFocusDataKey] === "true") delete rootElement.dataset[internalFocusDataKey];
+		});
+	};
+	const handleInternalFocusPointer = (event) => {
+		preserveEditingForInternalFocus();
+		event.stopPropagation();
+	};
+	const handleBodyMouseDown = (body, event) => {
+		handleInternalFocusPointer(event);
+		focusBodyFromMouseEvent(body, event);
+	};
+	const appendEmptyListControls = () => {
+		const controls = document.createElement("div");
+		controls.addEventListener("pointerdown", preserveEditingForAction);
+		controls.addEventListener("mousedown", preserveEditingForAction);
+		setStyles(controls, {
+			position: "absolute",
+			top: "0mm",
+			right: "-20px",
+			display: "flex",
+			gap: "2px"
+		});
+		controls.appendChild(createActionButton({
+			label: "+",
+			ariaLabel: arg.i18n("schemas.list.addItem"),
+			onPressStart: preserveEditingForAction,
+			onClick: () => {
+				const nextItems = [...originalItems];
+				nextItems.splice(range.start, 0, {
+					level: 0,
+					text: ""
+				});
+				commitItems(nextItems, range.start);
+			}
+		}));
+		rootElement.appendChild(controls);
+	};
+	let offsetY = 0;
+	for (let index = 0; index < layout.items.length; index += 1) {
+		const item = layout.items[index];
+		const row = document.createElement("div");
+		setStyles(row, {
+			position: "absolute",
+			top: `${offsetY}mm`,
+			left: "0mm",
+			width: `${schema.width}mm`,
+			height: `${item.height}mm`
+		});
+		const marker = document.createElement("div");
+		setStyles(marker, {
+			position: "absolute",
+			top: "0mm",
+			left: `${item.markerX}mm`,
+			width: `${layout.markerWidth}mm`,
+			height: "100%",
+			backgroundColor: "transparent",
+			cursor: "default"
+		});
+		const body = document.createElement("div");
+		setStyles(body, {
+			position: "absolute",
+			top: "0mm",
+			left: `${item.bodyX}mm`,
+			width: `${item.bodyWidth}mm`,
+			height: `${item.height}mm`,
+			backgroundColor: "transparent",
+			cursor: editable ? "text" : "default"
+		});
+		const schemaForUI = schema;
+		const textSchema = {
+			...schema,
+			id: `${schemaForUI.id || schema.name}-list-item-${item.itemIndex}`,
+			name: `${schema.name}-list-item-${item.itemIndex}`,
+			type: "text",
+			content: item.item,
+			position: {
+				x: 0,
+				y: 0
+			},
+			width: item.bodyWidth,
+			height: item.height,
+			alignment: schema.alignment ?? "left",
+			fontSize: schema.fontSize ?? 13,
+			lineHeight: schema.lineHeight ?? 1,
+			characterSpacing: schema.characterSpacing ?? 0,
+			fontColor: usePlaceholder ? PLACEHOLDER_FONT_COLOR : schema.fontColor || "#000000",
+			backgroundColor: ""
+		};
+		const markerTextSchema = {
+			...textSchema,
+			id: `${schemaForUI.id || schema.name}-list-marker-${item.itemIndex}`,
+			name: `${schema.name}-list-marker-${item.itemIndex}`,
+			content: item.marker,
+			width: layout.markerWidth,
+			height: item.height,
+			alignment: "right",
+			fontColor: schema.fontColor || "#000000"
+		};
+		await uiRender$4({
+			...arg,
+			rootElement: marker,
+			schema: markerTextSchema,
+			value: item.marker,
+			mode: "viewer",
+			placeholder: "",
+			onChange: void 0,
+			stopEditing: void 0
+		});
+		await uiRender$4({
+			...arg,
+			rootElement: body,
+			schema: textSchema,
+			value: item.item,
+			placeholder: "",
+			onChange: void 0,
+			stopEditing: void 0
+		});
+		if (editable) {
+			const editor = getBodyEditor(body);
+			if (!editor) throw new Error("Unable to find list item text editor");
+			editor.tabIndex = tabIndex || 0;
+			body.addEventListener("pointerdown", handleInternalFocusPointer);
+			body.addEventListener("mousedown", (event) => {
+				handleBodyMouseDown(editor, event);
+			});
+			body.addEventListener("click", (event) => {
+				event.stopPropagation();
+				focusBodyFromMouseEvent(editor, event);
+			});
+			editor.addEventListener("focus", () => {
+				if (usePlaceholder) {
+					editor.innerText = "";
+					editor.style.color = schema.fontColor || "#000000";
+				}
+			});
+			body.addEventListener("blur", (event) => {
+				const isListAction = rootElement.dataset[actionDataKey] === "true";
+				const relatedTarget = event.relatedTarget;
+				const isInternalFocus = rootElement.dataset[internalFocusDataKey] === "true" || relatedTarget instanceof Node && rootElement.contains(relatedTarget);
+				delete rootElement.dataset[internalFocusDataKey];
+				if (isListAction || isInternalFocus) return;
+				if (!onChange) return;
+				commitItems(getNextItems());
+				if (stopEditing) stopEditing();
+			}, true);
+			editor.addEventListener("keydown", (event) => {
+				if (event.key === "Enter") {
+					if (isComposingKeyboardEvent(event)) return;
+					event.preventDefault();
+					if (insertLineBreakAtSelection(editor)) {
+						preserveEditingForKeyboardCommit();
+						if (mode === "form") commitHeight(range.start + index);
+						else commitItems(getNextItems(), range.start + index);
+					}
+				} else if (event.key === "Tab") {
+					event.preventDefault();
+					updateItems(index, (nextItems, itemIndex) => {
+						const itemToUpdate = nextItems[itemIndex];
+						itemToUpdate.level = event.shiftKey ? Math.max(itemToUpdate.level - 1, 0) : Math.min(itemToUpdate.level + 1, 8);
+						return itemIndex;
+					});
+				} else if (event.key === "Backspace" && getText(editor) === "") {
+					event.preventDefault();
+					updateItems(index, (nextItems, itemIndex) => {
+						if (nextItems.length <= 1) {
+							nextItems.splice(0);
+							return;
+						}
+						nextItems.splice(itemIndex, 1);
+						return Math.min(itemIndex, nextItems.length - 1);
+					});
+				}
+			});
+			bodyElements.push(editor);
+		}
+		row.appendChild(marker);
+		row.appendChild(body);
+		if (showControls) {
+			const controls = document.createElement("div");
+			controls.addEventListener("pointerdown", preserveEditingForAction);
+			controls.addEventListener("mousedown", preserveEditingForAction);
+			setStyles(controls, {
+				position: "absolute",
+				top: "0mm",
+				right: "-82px",
+				display: "flex",
+				gap: "2px"
+			});
+			controls.appendChild(createActionButton({
+				label: "+",
+				ariaLabel: arg.i18n("schemas.list.addItem"),
+				onPressStart: preserveEditingForAction,
+				onClick: () => {
+					updateItems(index, (nextItems, itemIndex) => {
+						nextItems.splice(itemIndex + 1, 0, {
+							level: nextItems[itemIndex]?.level ?? 0,
+							text: ""
+						});
+						return itemIndex + 1;
+					});
+				}
+			}));
+			controls.appendChild(createActionButton({
+				label: "-",
+				ariaLabel: arg.i18n("schemas.list.removeItem"),
+				onPressStart: preserveEditingForAction,
+				onClick: () => {
+					updateItems(index, (nextItems, itemIndex) => {
+						if (nextItems.length <= 1) {
+							nextItems.splice(0);
+							return;
+						}
+						nextItems.splice(itemIndex, 1);
+						return Math.min(itemIndex, nextItems.length - 1);
+					});
+				}
+			}));
+			controls.appendChild(createActionButton({
+				label: "<",
+				ariaLabel: arg.i18n("schemas.list.outdentItem"),
+				disabled: item.level === 0,
+				onPressStart: preserveEditingForAction,
+				onClick: () => {
+					updateItems(index, (nextItems, itemIndex) => {
+						nextItems[itemIndex].level = Math.max(nextItems[itemIndex].level - 1, 0);
+						return itemIndex;
+					});
+				}
+			}));
+			controls.appendChild(createActionButton({
+				label: ">",
+				ariaLabel: arg.i18n("schemas.list.indentItem"),
+				disabled: item.level >= 8,
+				onPressStart: preserveEditingForAction,
+				onClick: () => {
+					updateItems(index, (nextItems, itemIndex) => {
+						nextItems[itemIndex].level = Math.min(nextItems[itemIndex].level + 1, 8);
+						return itemIndex;
+					});
+				}
+			}));
+			row.appendChild(controls);
+		}
+		rootElement.appendChild(row);
+		offsetY += item.height;
+	}
+	if (showControls && visibleItems.length === 0) appendEmptyListControls();
+	const pendingFocusIndex = pendingFocusIndexes.get(focusKey);
+	if (pendingFocusIndex !== void 0) pendingFocusIndexes.delete(focusKey);
+	const requestedFocusIndex = Number(rootElement.dataset[focusDataKey] ?? pendingFocusIndex);
+	delete rootElement.dataset[focusDataKey];
+	delete rootElement.dataset[actionDataKey];
+	delete rootElement.dataset[internalFocusDataKey];
+	const relativeFocusIndex = requestedFocusIndex - range.start;
+	if (editable && Number.isFinite(requestedFocusIndex) && bodyElements[relativeFocusIndex]) setTimeout(() => focusBody(bodyElements[relativeFocusIndex]));
+	else if (editable && mode === "designer" && bodyElements[0]) setTimeout(() => {
+		if (!rootElement.contains(document.activeElement)) focusBody(bodyElements[0]);
+	});
+	if (schema.height !== layout.totalHeight && onChange) onChange({
+		key: "height",
+		value: layout.totalHeight
+	});
+};
+//#endregion
+//#region src/list/index.ts
+var listSchema = {
 	pdf: pdfRender$2,
 	ui: uiRender$2,
 	propPanel: propPanel$1,
-	icon: createSvgStr(Type),
-	uninterruptedEditMode: true
+	icon: createSvgStr(List)
 };
 //#endregion
 //#region src/graphics/imagehelper.ts
@@ -1534,144 +2288,6 @@ var lineSchema = {
 	icon: createSvgStr(Minus)
 };
 //#endregion
-//#region src/shapes/rectAndEllipse.ts
-var shape = {
-	ui: (arg) => {
-		const { schema, rootElement } = arg;
-		const div = document.createElement("div");
-		div.style.width = "100%";
-		div.style.height = "100%";
-		div.style.boxSizing = "border-box";
-		if (schema.type === "ellipse") div.style.borderRadius = "50%";
-		else if (schema.radius && schema.radius > 0) div.style.borderRadius = `${schema.radius}mm`;
-		div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
-		div.style.borderStyle = schema.borderWidth && schema.borderColor ? "solid" : "none";
-		div.style.borderColor = schema.borderColor ?? "transparent";
-		div.style.backgroundColor = schema.color ?? "transparent";
-		rootElement.appendChild(div);
-	},
-	pdf: (arg) => {
-		const { schema, page, options } = arg;
-		if (!schema.color && !schema.borderColor) return;
-		const { colorType } = options;
-		const cArg = {
-			schema,
-			pageHeight: page.getHeight()
-		};
-		const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
-		const { position: { x: x4Ellipse, y: y4Ellipse } } = convertForPdfLayoutProps({
-			...cArg,
-			applyRotateTranslate: false
-		});
-		const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
-		const drawOptions = {
-			rotate,
-			borderWidth,
-			borderColor: hex2PrintingColor(schema.borderColor, colorType),
-			color: hex2PrintingColor(schema.color, colorType),
-			opacity,
-			borderOpacity: opacity
-		};
-		if (schema.type === "ellipse") page.drawEllipse({
-			x: x4Ellipse + width / 2,
-			y: y4Ellipse + height / 2,
-			xScale: width / 2 - borderWidth / 2,
-			yScale: height / 2 - borderWidth / 2,
-			...drawOptions
-		});
-		else if (schema.type === "rectangle") {
-			const radius = schema.radius ?? 0;
-			page.drawRectangle({
-				x: position.x + borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * Math.PI ** 2,
-				y: position.y + borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * Math.PI ** 2,
-				width: width - borderWidth,
-				height: height - borderWidth,
-				...radius ? { radius: mm2pt(radius) } : {},
-				...drawOptions
-			});
-		}
-	},
-	propPanel: {
-		schema: ({ i18n }) => ({
-			borderWidth: {
-				title: i18n("schemas.borderWidth"),
-				type: "number",
-				widget: "inputNumber",
-				props: {
-					min: 0,
-					step: 1
-				},
-				span: 12
-			},
-			borderColor: {
-				title: i18n("schemas.borderColor"),
-				type: "string",
-				widget: "color",
-				props: { disabledAlpha: true },
-				rules: [{
-					pattern: HEX_COLOR_PATTERN,
-					message: i18n("validation.hexColor")
-				}],
-				span: 12
-			},
-			color: {
-				title: i18n("schemas.color"),
-				type: "string",
-				widget: "color",
-				props: { disabledAlpha: true },
-				rules: [{
-					pattern: HEX_COLOR_PATTERN,
-					message: i18n("validation.hexColor")
-				}]
-			},
-			radius: {
-				title: i18n("schemas.radius"),
-				type: "number",
-				widget: "inputNumber",
-				props: {
-					min: 0,
-					step: 1
-				},
-				span: 12
-			}
-		}),
-		defaultSchema: {
-			name: "",
-			type: "rectangle",
-			position: {
-				x: 0,
-				y: 0
-			},
-			width: 62.5,
-			height: 37.5,
-			rotate: 0,
-			opacity: 1,
-			borderWidth: 1,
-			borderColor: "#000000",
-			color: "",
-			readOnly: true,
-			radius: 0
-		}
-	}
-};
-var getPropPanelSchema = (type) => ({
-	...shape.propPanel,
-	defaultSchema: {
-		...shape.propPanel.defaultSchema,
-		type
-	}
-});
-var rectangle = {
-	...shape,
-	propPanel: getPropPanelSchema("rectangle"),
-	icon: createSvgStr(Square)
-};
-var ellipse = {
-	...shape,
-	propPanel: getPropPanelSchema("ellipse"),
-	icon: createSvgStr(Circle)
-};
-//#endregion
 //#region src/tables/cell.ts
 var linePdfRender = lineSchema.pdf;
 var rectanglePdfRender$1 = rectangle.pdf;
@@ -1743,7 +2359,7 @@ var cellSchema = {
 				y: position.y
 			}, borderWidth.left, height)
 		]);
-		await pdfRender$3({
+		await pdfRender$4({
 			...arg,
 			schema: {
 				...schema,
@@ -1763,7 +2379,7 @@ var cellSchema = {
 		const { borderWidth, width, height, borderColor, backgroundColor } = schema;
 		rootElement.style.backgroundColor = backgroundColor;
 		const textDiv = createTextDiv(schema);
-		await uiRender$3({
+		await uiRender$4({
 			...arg,
 			schema: {
 				...schema,
@@ -1887,7 +2503,7 @@ async function drawTable(arg, table) {
 }
 var pdfRender = async (arg) => {
 	const { value, schema, basePdf, options, _cache } = arg;
-	const body = getBodyWithRange(typeof value !== "string" ? JSON.stringify(value || "[]") : value, schema.__bodyRange);
+	const body = getBodyWithSchemaRange(typeof value !== "string" ? JSON.stringify(value || "[]") : value, schema);
 	const createTableArgs = {
 		schema,
 		basePdf,
@@ -1898,17 +2514,38 @@ var pdfRender = async (arg) => {
 };
 //#endregion
 //#region src/tables/uiRender.ts
-var buttonSize = 30;
+var buttonSize = 18;
 function createButton(options) {
 	const button = document.createElement("button");
+	button.type = "button";
+	button.innerText = options.text;
+	if (options.ariaLabel) button.setAttribute("aria-label", options.ariaLabel);
 	button.style.width = `${options.width}px`;
 	button.style.height = `${options.height}px`;
 	button.style.position = "absolute";
 	button.style.top = options.top;
+	button.style.display = "inline-flex";
+	button.style.alignItems = "center";
+	button.style.justifyContent = "center";
+	button.style.padding = "0";
+	button.style.border = "1px solid #d9d9d9";
+	button.style.borderRadius = "3px";
+	button.style.background = "#ffffff";
+	button.style.color = "#333333";
+	button.style.fontSize = "11px";
+	button.style.lineHeight = "1";
+	button.style.cursor = "pointer";
+	button.style.zIndex = "20";
 	if (options.left !== void 0) button.style.left = options.left;
 	if (options.right !== void 0) button.style.right = options.right;
-	button.innerText = options.text;
-	button.onclick = options.onClick;
+	button.addEventListener("mousedown", (event) => {
+		event.preventDefault();
+	});
+	button.addEventListener("click", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		options.onClick(event);
+	});
 	return button;
 }
 var cellUiRender = cellSchema.ui;
@@ -1993,7 +2630,7 @@ var renderRowUi = (args) => {
 					if (!arg.onChange) return;
 					const newValue = Array.isArray(v) ? v[0].value : v.value;
 					if (section === "body") {
-						const startRange = arg.schema.__bodyRange?.start ?? 0;
+						const startRange = getTableBodyRange(arg.schema)?.start ?? 0;
 						value[rowIndex + startRange][colIndex] = newValue;
 						arg.onChange({
 							key: "content",
@@ -2046,7 +2683,8 @@ var resetEditingPosition = () => {
 var uiRender = async (arg) => {
 	const { rootElement, onChange, schema, value, mode, scale } = arg;
 	const body = getBody(value);
-	const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
+	const bodyRange = getTableBodyRange(schema);
+	const bodyWidthRange = getBodyWithSchemaRange(value, schema, bodyRange);
 	const table = await createSingleTable(bodyWidthRange, arg);
 	const showHead = table.settings.showHead;
 	rootElement.innerHTML = "";
@@ -2078,6 +2716,7 @@ var uiRender = async (arg) => {
 		top: `${table.getHeight()}mm`,
 		left: `calc(50% - ${buttonSize / 2}px)`,
 		text: "+",
+		ariaLabel: "Add row",
 		onClick: () => {
 			const newRow = Array(schema.head.length).fill("");
 			if (onChange) onChange({
@@ -2096,8 +2735,9 @@ var uiRender = async (arg) => {
 				top: `${offsetY - px2mm(buttonSize)}mm`,
 				right: `-${buttonSize}px`,
 				text: "-",
+				ariaLabel: "Remove row",
 				onClick: () => {
-					const newTableBody = body.filter((_, j) => j !== i + (schema.__bodyRange?.start ?? 0));
+					const newTableBody = body.filter((_, j) => j !== i + (bodyRange?.start ?? 0));
 					if (onChange) onChange({
 						key: "content",
 						value: JSON.stringify(newTableBody)
@@ -2107,7 +2747,7 @@ var uiRender = async (arg) => {
 		});
 	};
 	if (mode === "form" && onChange && !schema.readOnly) {
-		if (schema.__bodyRange?.end === void 0 || schema.__bodyRange.end >= JSON.parse(value || "[]").length) rootElement.appendChild(createAddRowButton());
+		if (bodyRange?.end === void 0 || bodyRange.end >= JSON.parse(value || "[]").length) rootElement.appendChild(createAddRowButton());
 		createRemoveRowButtons().forEach((button) => rootElement.appendChild(button));
 	}
 	if (mode === "designer" && onChange) {
@@ -2117,6 +2757,7 @@ var uiRender = async (arg) => {
 			top: `${(showHead ? table.getHeadHeight() : 0) - px2mm(buttonSize)}mm`,
 			right: `-${buttonSize}px`,
 			text: "+",
+			ariaLabel: "Add column",
 			onClick: (e) => {
 				e.preventDefault();
 				const newColumnWidthPercentage = 25;
@@ -2152,6 +2793,7 @@ var uiRender = async (arg) => {
 				top: `${-buttonSize}px`,
 				left: `${offsetX - px2mm(buttonSize)}mm`,
 				text: "-",
+				ariaLabel: "Remove column",
 				onClick: () => {
 					const totalWidthMinusRemoved = schema.headWidthPercentages.reduce((sum, width, j) => j !== i ? sum + width : sum, 0);
 					onChange([
@@ -5318,13 +5960,13 @@ var schema$3 = {
 	propPanel: {
 		...textSchema.propPanel,
 		widgets: {
-			...propPanel$2.widgets,
+			...propPanel$3.widgets,
 			addOptions
 		},
 		schema: (propPanelProps) => {
-			if (typeof propPanel$2.schema !== "function") throw Error("Oops, is text schema no longer a function?");
+			if (typeof propPanel$3.schema !== "function") throw Error("Oops, is text schema no longer a function?");
 			return {
-				...propPanel$2.schema(propPanelProps),
+				...propPanel$3.schema(propPanelProps),
 				"-------": {
 					type: "void",
 					widget: "Divider"
@@ -5506,6 +6148,6 @@ var schema = {
 	icon: getCheckedIcon()
 };
 //#endregion
-export { barcodes, builtInPlugins, schema as checkbox, date_default as date, dateTime_default as dateTime, ellipse, getDynamicHeightsForTable, imageSchema as image, lineSchema as line, schema$1 as multiVariableText, schema$2 as radioGroup, rectangle, schema$3 as select, signature, svgSchema as svg, tableSchema as table, textSchema as text, time_default as time };
+export { BUILT_IN_DYNAMIC_LAYOUT_SPLIT_UNITS, LIST_ITEM_SPLIT_UNIT, TABLE_BODY_SPLIT_UNIT, TEXT_LINE_SPLIT_UNIT, barcodes, builtInPlugins, schema as checkbox, createListItemSplitRange, createTableBodySplitRange, createTextLineSplitRange, date_default as date, dateTime_default as dateTime, ellipse, getDynamicHeightsForTable, getDynamicLayoutForList, getDynamicLayoutForTable, getListItemRange, getTableBodyRange, getTextLineRange, imageSchema as image, lineSchema as line, listSchema as list, schema$1 as multiVariableText, schema$2 as radioGroup, rectangle, schema$3 as select, signature, svgSchema as svg, tableSchema as table, textSchema as text, time_default as time };
 
 //# sourceMappingURL=index.js.map