@pdfme/ui 6.1.2-dev.3 → 6.1.2-dev.32

package/dist/Designer.d.ts

@@ -1,10 +1,14 @@
 import { Template, DesignerProps } from '@pdfme/common';
 import { BaseUIClass } from './class.js';
+import { type DesignerSelectSchemasOptions, type DesignerSchemaSelectionTarget, type DesignerSelectedSchema, type DesignerSelection, type DesignerSelectionChangeCallback } from './designerSelection.js';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;
     private onPageChangeCallback?;
+    private onChangeSelectionCallback?;
     private pageCursor;
+    private selection;
+    private selectSchemasHandler;
     constructor(props: DesignerProps);
     saveTemplate(): void;
     updateTemplate(template: Template): void;
@@ -14,6 +18,10 @@ declare class Designer extends BaseUIClass {
         currentPage: number;
         totalPages: number;
     }) => void): void;
+    onChangeSelection(cb: DesignerSelectionChangeCallback): void;
+    getSelection(): DesignerSelection;
+    getSelectedSchemas(): DesignerSelectedSchema[];
+    selectSchemas(targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[], options?: DesignerSelectSchemasOptions): void;
     getPageCursor(): number;
     getTotalPages(): number;
     protected render(): void;

package/dist/components/Designer/RightSidebar/DetailView/schemaChangeHelpers.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeSchemaItem, SchemaForUI } from '@pdfme/common';
+export declare const getSameTypeBulkUpdateSchemas: ({ activeSchema, activeSchemas, }: {
+    activeSchema: SchemaForUI;
+    activeSchemas: SchemaForUI[];
+}) => SchemaForUI[];
+export declare const isSingleSchemaOnlyChange: (key: string) => boolean;
+export declare const expandSameTypeBulkUpdateChanges: ({ activeSchema, activeSchemas, changes, }: {
+    activeSchema: SchemaForUI;
+    activeSchemas: SchemaForUI[];
+    changes: ChangeSchemaItem[];
+}) => ChangeSchemaItem[];

package/dist/components/Designer/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Template, DesignerProps, Size } from '@pdfme/common';
-declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, }: Omit<DesignerProps, "domContainer"> & {
+import { type DesignerSelectSchemas, type DesignerSelection } from '../../designerSelection.js';
+declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, onChangeSelection, onRegisterSchemaSelectionHandler, }: Omit<DesignerProps, "domContainer"> & {
     size: Size;
     onSaveTemplate: (t: Template) => void;
     onChangeTemplate: (t: Template) => void;
+    onChangeSelection?: (selection: DesignerSelection) => void;
+    onRegisterSchemaSelectionHandler?: (handler: DesignerSelectSchemas | null) => void;
 } & {
     onChangeTemplate: (t: Template) => void;
     onPageCursorChange: (newPageCursor: number, totalPages: number) => void;

package/dist/designerSelection.d.ts

@@ -0,0 +1,45 @@
+import { type Schema, type SchemaForUI } from '@pdfme/common';
+export type DesignerSelectionBounds = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
+export type DesignerSelectedSchema = {
+    name: string;
+    pageIndex: number;
+    schema: Schema;
+    schemaId: string;
+    schemaIndex: number;
+    type: string;
+};
+export type DesignerSelection = {
+    bounds: DesignerSelectionBounds | null;
+    pageIndex: number;
+    schemas: DesignerSelectedSchema[];
+};
+export type DesignerSelectionChangeCallback = (selection: DesignerSelection) => void;
+export type DesignerSchemaSelectionTarget = string | {
+    name?: string;
+    pageIndex?: number;
+    schemaId?: string;
+    schemaIndex?: number;
+};
+export type DesignerSelectSchemasOptions = {
+    pageIndex?: number;
+    scroll?: boolean;
+};
+export type DesignerSelectSchemas = (targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[], options?: DesignerSelectSchemasOptions) => void;
+export declare const EMPTY_DESIGNER_SELECTION: DesignerSelection;
+export declare const createDesignerSelection: ({ activeSchemaIds, pageIndex, schemasList, }: {
+    activeSchemaIds: string[];
+    pageIndex: number;
+    schemasList: SchemaForUI[][];
+}) => DesignerSelection;
+export declare const normalizeDesignerSchemaSelectionTargets: (targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[]) => DesignerSchemaSelectionTarget[];
+export declare const getDesignerSelectionPageIndex: (targets: DesignerSchemaSelectionTarget[], fallbackPageIndex: number, options?: DesignerSelectSchemasOptions) => number;
+export declare const getSelectedSchemaIds: ({ pageIndex, schemas, targets, }: {
+    pageIndex: number;
+    schemas: SchemaForUI[];
+    targets: DesignerSchemaSelectionTarget[];
+}) => string[];

package/dist/index.d.ts

@@ -2,3 +2,4 @@ import Designer from './Designer.js';
 import Form from './Form.js';
 import Viewer from './Viewer.js';
 export { Designer, Viewer, Form };
+export type { DesignerSchemaSelectionTarget, DesignerSelectSchemas, DesignerSelectSchemasOptions, DesignerSelectedSchema, DesignerSelection, DesignerSelectionBounds, DesignerSelectionChangeCallback, } from './designerSelection.js';

package/dist/index.js

@@ -45966,7 +45966,7 @@ var UIProps = CommonProps.extend({
 });
 var PreviewProps = UIProps.extend({ inputs: Inputs }).strict();
 var DesignerProps = UIProps.extend({}).strict();
-var cloneDeep$1 = structuredClone;
+var cloneDeep$1 = (value) => structuredClone(value);
 var uniq = (array) => Array.from(new Set(array));
 var getFallbackFontName = (font) => {
 	const initial = "";
@@ -46665,6 +46665,10 @@ var getDynamicTemplate = async (arg) => {
 	const PARALLEL_LIMIT = 10;
 	for (let pageIndex = 0; pageIndex < template.schemas.length; pageIndex++) {
 		const pageSchemas = template.schemas[pageIndex];
+		if (pageSchemas.length === 0) {
+			resultPages.push([]);
+			continue;
+		}
 		const { items, orderMap } = normalizePageSchemas(pageSchemas, paddingTop);
 		for (let i = 0; i < items.length; i += PARALLEL_LIMIT) {
 			const chunk = items.slice(i, i + PARALLEL_LIMIT);
@@ -46681,7 +46685,6 @@ var getDynamicTemplate = async (arg) => {
 		const processedPages = processDynamicPage(items, orderMap, contentHeight, paddingTop);
 		resultPages.push(...processedPages);
 	}
-	removeTrailingEmptyPages(resultPages);
 	if (resultPages.length === template.schemas.length) {
 		let unchanged = true;
 		for (let i = 0; i < resultPages.length && unchanged; i++) {
@@ -100555,7 +100558,7 @@ var Underline = [["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }], ["line", {
 	y2: "20"
 }]];
 //#endregion
-//#region ../schemas/dist/builtins-BB2DHceW.js
+//#region ../schemas/dist/builtins-D9sJvrz9.js
 var addUriLinkAnnotation = (arg) => {
 	const { pdfDoc, page, uri, rect, borderWidth = 0 } = arg;
 	const safeUri = normalizeSafeLinkUri(uri);
@@ -101738,6 +101741,8 @@ var getRangedPlainTextValue = (arg) => {
 var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize) => {
 	const { schema, rootElement, mode } = arg;
 	let dynamicFontSize = resolvedDynamicFontSize;
+	const characterSpacing = schema.characterSpacing ?? 0;
+	const editable = isEditable(mode, schema);
 	if (dynamicFontSize === void 0 && shouldUseDynamicFontSize(schema, arg.basePdf) && value) dynamicFontSize = calculateDynamicFontSize({
 		textSchema: schema,
 		fontKitFont,
@@ -101772,7 +101777,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		justifyContent: mapVerticalAlignToFlex(verticalAlignment),
 		width: "100%",
 		height: "100%",
-		cursor: isEditable(mode, schema) ? "text" : "default"
+		cursor: editable ? "text" : "default"
 	};
 	Object.assign(container.style, containerStyle);
 	rootElement.innerHTML = "";
@@ -101784,7 +101789,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		fontFamily: schema.fontName ? `'${schema.fontName}'` : "inherit",
 		color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
 		fontSize: `${dynamicFontSize ?? schema.fontSize ?? 13}pt`,
-		letterSpacing: `${schema.characterSpacing ?? 0}pt`,
+		letterSpacing: `${characterSpacing}pt`,
 		lineHeight: `${schema.lineHeight ?? 1}em`,
 		textAlign: schema.alignment ?? "left",
 		whiteSpace: "pre-wrap",
@@ -101796,6 +101801,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		paddingTop: `${topAdjustment}px`,
 		backgroundColor: "transparent",
 		textDecoration: textDecorations.join(" "),
+		...editable && characterSpacing > 0 ? { width: `calc(100% + ${characterSpacing}pt)` } : {},
 		...isTopAligned ? { height: "100%" } : {}
 	};
 	const textBlock = document.createElement("div");
@@ -213907,7 +213913,7 @@ withProvider(FormCore, { Html: html });
 //#region ../../node_modules/form-render/es/index.js
 var es_default = withProvider(FormCore, widgets_exports);
 //#endregion
-//#region ../schemas/dist/helper-CEme39Uo.js
+//#region ../schemas/dist/helper-Doen9Okh.js
 var substituteVariables = (text, variablesIn, valueMapper = (value) => value) => {
 	if (!text) return "";
 	let substitutedText = text;
@@ -213936,14 +213942,14 @@ var validateVariables = (value, schema) => {
 	} 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]) {
+	for (const variable of schema.variables) if (!Object.prototype.hasOwnProperty.call(values, variable) || values[variable] === null || values[variable] === void 0) {
 		if (schema.required) throw new Error(`[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`);
 		return false;
 	}
 	return true;
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-C7MdZxPm.js
+//#region ../schemas/dist/dynamicTemplate-CRjx4Mjc.js
 var getDynamicLayoutForMultiVariableText = async (value, args) => {
 	if (args.schema.type !== "multiVariableText") return { heights: [args.schema.height] };
 	const schema = args.schema;
@@ -214177,34 +214183,70 @@ var WidgetRenderer = (props) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref });
 };
 //#endregion
+//#region src/components/Designer/RightSidebar/DetailView/schemaChangeHelpers.ts
+var singleSchemaOnlyChangeKeys = new Set([
+	"id",
+	"name",
+	"type",
+	"content",
+	"position"
+]);
+var getSameTypeBulkUpdateSchemas = ({ activeSchema, activeSchemas }) => {
+	if (activeSchemas.length > 1 && activeSchemas.every((schema) => schema.type === activeSchema.type)) return activeSchemas;
+	return [activeSchema];
+};
+var isSingleSchemaOnlyChange = (key) => singleSchemaOnlyChangeKeys.has(key) || key.startsWith("position.");
+var expandSameTypeBulkUpdateChanges = ({ activeSchema, activeSchemas, changes }) => {
+	const targetSchemas = getSameTypeBulkUpdateSchemas({
+		activeSchema,
+		activeSchemas
+	});
+	if (targetSchemas.length <= 1) return changes;
+	if (!changes.every((change) => change.schemaId === activeSchema.id)) return changes;
+	if (changes.some((change) => isSingleSchemaOnlyChange(change.key))) return changes;
+	return changes.flatMap((change) => {
+		return targetSchemas.map((schema) => ({
+			...change,
+			schemaId: schema.id
+		}));
+	});
+};
+//#endregion
 //#region src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx
 var ButtonGroupWidget = (props) => {
-	const { activeElements, changeSchemas, schemas, schema } = props;
+	const { activeElements, activeSchema, changeSchemas, schemas, schema } = props;
 	const { token } = theme_default.useToken();
 	const buttons = Array.isArray(schema?.buttons) ? schema.buttons : [];
-	const apply = (btn) => {
-		const key = btn.key;
-		const type = btn.type;
+	const getSelectedSchemas = () => {
 		const ids = activeElements.map((ae) => ae.id);
-		changeSchemas(schemas.filter((s) => ids.includes(s.id)).map((s) => {
-			const oldValue = Boolean(s[key] ?? false);
-			return {
-				key,
-				value: type === "boolean" ? !oldValue : btn.value,
-				schemaId: s.id
-			};
-		}));
+		return schemas.filter((s) => ids.includes(s.id));
+	};
+	const getTargetSchemas = () => getSameTypeBulkUpdateSchemas({
+		activeSchema,
+		activeSchemas: getSelectedSchemas()
+	});
+	const getButtonValue = (btn, targetSchemas) => {
+		if (btn.type !== "boolean") return btn.value;
+		return !targetSchemas.every((s) => Boolean(s[btn.key] ?? false));
+	};
+	const apply = (btn) => {
+		const targetSchemas = getTargetSchemas();
+		const value = getButtonValue(btn, targetSchemas);
+		changeSchemas(targetSchemas.map((s) => ({
+			key: btn.key,
+			value,
+			schemaId: s.id
+		})));
 	};
 	const isActive = (btn) => {
 		const key = btn.key;
 		const type = btn.type;
-		let active = false;
-		const ids = activeElements.map((ae) => ae.id);
-		schemas.filter((s) => ids.includes(s.id)).forEach((s) => {
+		const targetSchemas = getTargetSchemas();
+		if (targetSchemas.length === 0) return false;
+		return targetSchemas.every((s) => {
 			const schemaRecord = s;
-			active = type === "boolean" ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
+			return type === "boolean" ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
 		});
-		return active;
 	};
 	const replaceCurrentColor = (svgString, color) => color ? svgString.replace(/="currentColor"/g, `="${color}"`) : svgString;
 	const svgIcon = (svgString) => {
@@ -214233,6 +214275,7 @@ var ButtonGroupWidget = (props) => {
 //#region src/components/Designer/RightSidebar/DetailView/index.tsx
 var { Text: Text$2 } = Typography;
 var TEXT_OVERFLOW_EXPAND_SCHEMA_TYPES = new Set(["text", "multiVariableText"]);
+var getElementIds = (elements) => elements.map(({ id }) => id);
 var DetailView = (props) => {
 	const { token } = theme_default.useToken();
 	const { schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } = props;
@@ -214240,6 +214283,19 @@ var DetailView = (props) => {
 	const i18n = (0, import_react$9.useContext)(I18nContext);
 	const pluginsRegistry = (0, import_react$9.useContext)(PluginsRegistry);
 	const options = (0, import_react$9.useContext)(OptionsContext);
+	const activeSchemas = (0, import_react$9.useMemo)(() => {
+		const ids = new Set(props.activeElements.map((element) => element.id));
+		return props.schemas.filter((schema) => ids.has(schema.id));
+	}, [props.activeElements, props.schemas]);
+	const changeSchemasWithSameTypeSelection = (0, import_react$9.useCallback)((changes) => changeSchemas(expandSameTypeBulkUpdateChanges({
+		activeSchema,
+		activeSchemas,
+		changes
+	})), [
+		activeSchema,
+		activeSchemas,
+		changeSchemas
+	]);
 	const typedI18n = (0, import_react$9.useCallback)((key) => {
 		return typeof i18n === "function" ? i18n(key) : key;
 	}, [i18n]);
@@ -214248,6 +214304,7 @@ var DetailView = (props) => {
 			AlignWidget: (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignWidget, {
 				...p,
 				...props,
+				changeSchemas: changeSchemasWithSameTypeSelection,
 				options
 			}),
 			Divider: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider$2, { style: {
@@ -214257,6 +214314,7 @@ var DetailView = (props) => {
 			ButtonGroup: (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupWidget, {
 				...p,
 				...props,
+				changeSchemas: changeSchemasWithSameTypeSelection,
 				options
 			})
 		};
@@ -214266,6 +214324,7 @@ var DetailView = (props) => {
 				newWidgets[widgetKey] = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetRenderer, {
 					...p,
 					...props,
+					changeSchemas: changeSchemasWithSameTypeSelection,
 					options,
 					theme: token,
 					i18n: typedI18n,
@@ -214275,6 +214334,7 @@ var DetailView = (props) => {
 		}
 		return newWidgets;
 	}, [
+		changeSchemasWithSameTypeSelection,
 		options,
 		pluginsRegistry,
 		props,
@@ -214378,9 +214438,9 @@ var DetailView = (props) => {
 				});
 			}
 		}
-		if (changes.length) form.validateFields().then(() => changeSchemas(changes)).catch((reason) => {
+		if (changes.length) form.validateFields().then(() => changeSchemasWithSameTypeSelection(changes)).catch((reason) => {
 			if (reason.errorFields.length) changes = changes.filter((change) => !reason.errorFields.find((field) => field.name.includes(change.key)));
-			if (changes.length) changeSchemas(changes);
+			if (changes.length) changeSchemasWithSameTypeSelection(changes);
 		});
 	}, 100);
 	const activePlugin = pluginsRegistry.findByType(activeSchema.type);
@@ -214531,7 +214591,7 @@ var DetailView = (props) => {
 	};
 	const safeProperties = { ...propPanelSchema.properties };
 	if (typeof activePropPanelSchema === "function") {
-		const { size, schemas, pageSize, basePdf, changeSchemas, activeElements, deselectSchema, activeSchema } = props;
+		const { size, schemas, pageSize, basePdf, activeElements, deselectSchema, activeSchema } = props;
 		const functionResult = activePropPanelSchema({
 			size,
 			schemas,
@@ -214604,7 +214664,7 @@ var DetailView = (props) => {
 	});
 };
 var propsAreUnchanged = (prevProps, nextProps) => {
-	return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema);
+	return JSON.stringify(prevProps.activeSchema) === JSON.stringify(nextProps.activeSchema) && JSON.stringify(getElementIds(prevProps.activeElements)) === JSON.stringify(getElementIds(nextProps.activeElements));
 };
 var DetailView_default = import_react$9.memo(DetailView, propsAreUnchanged);
 //#endregion
@@ -235266,6 +235326,81 @@ var Canvas = (props, ref) => {
 };
 var Canvas_default = (0, import_react$9.forwardRef)(Canvas);
 //#endregion
+//#region src/designerSelection.ts
+var EMPTY_DESIGNER_SELECTION = {
+	bounds: null,
+	pageIndex: 0,
+	schemas: []
+};
+var toPersistedSchema = (schema) => {
+	const cloned = cloneDeep$1(schema);
+	delete cloned.id;
+	return cloned;
+};
+var getSelectionBounds = (schemas) => {
+	if (schemas.length === 0) return null;
+	const left = Math.min(...schemas.map(({ schema }) => schema.position.x));
+	const top = Math.min(...schemas.map(({ schema }) => schema.position.y));
+	const right = Math.max(...schemas.map(({ schema }) => schema.position.x + schema.width));
+	return {
+		height: Math.max(...schemas.map(({ schema }) => schema.position.y + schema.height)) - top,
+		width: right - left,
+		x: left,
+		y: top
+	};
+};
+var createDesignerSelection = ({ activeSchemaIds, pageIndex, schemasList }) => {
+	const pageSchemas = schemasList[pageIndex] ?? [];
+	const selectedSchemas = activeSchemaIds.flatMap((schemaId) => {
+		const schemaIndex = pageSchemas.findIndex((schema) => schema.id === schemaId);
+		const schema = pageSchemas[schemaIndex];
+		if (schemaIndex === -1 || !schema) return [];
+		return [{
+			name: schema.name,
+			pageIndex,
+			schema: toPersistedSchema(schema),
+			schemaId: schema.id,
+			schemaIndex,
+			type: schema.type
+		}];
+	});
+	return {
+		bounds: getSelectionBounds(selectedSchemas),
+		pageIndex,
+		schemas: selectedSchemas
+	};
+};
+var normalizeDesignerSchemaSelectionTargets = (targets) => Array.isArray(targets) ? targets : [targets];
+var getDesignerSelectionPageIndex = (targets, fallbackPageIndex, options = {}) => {
+	const optionPageIndex = options.pageIndex;
+	if (Number.isInteger(optionPageIndex) && optionPageIndex !== void 0 && optionPageIndex >= 0) return optionPageIndex;
+	const targetPageIndex = targets.find((target) => typeof target === "object" && target !== null)?.pageIndex;
+	return Number.isInteger(targetPageIndex) && targetPageIndex !== void 0 && targetPageIndex >= 0 ? targetPageIndex : fallbackPageIndex;
+};
+var getSelectedSchemaIds = ({ pageIndex, schemas, targets }) => {
+	const selectedIds = /* @__PURE__ */ new Set();
+	targets.forEach((target) => {
+		schemas.forEach((schema, schemaIndex) => {
+			if (typeof target === "string") {
+				if (schema.id === target || schema.name === target) selectedIds.add(schema.id);
+				return;
+			}
+			if (Number.isInteger(target.pageIndex) && target.pageIndex !== void 0 && target.pageIndex !== pageIndex) return;
+			if (!(target.schemaId !== void 0 || target.schemaIndex !== void 0 || target.name !== void 0)) return;
+			if (target.schemaId !== void 0 && target.schemaId === schema.id) {
+				selectedIds.add(schema.id);
+				return;
+			}
+			if (target.schemaIndex !== void 0 && target.schemaIndex === schemaIndex) {
+				selectedIds.add(schema.id);
+				return;
+			}
+			if (target.name !== void 0 && target.name === schema.name) selectedIds.add(schema.id);
+		});
+	});
+	return [...selectedIds];
+};
+//#endregion
 //#region src/components/Spinner.tsx
 var Spinner = () => {
 	const { token } = theme_default.useToken();
@@ -235541,7 +235676,7 @@ var scaleDragPosAdjustment = (adjustment, scale) => {
 	if (scale < 1) return adjustment * -(1 - scale);
 	return 0;
 };
-var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange }) => {
+var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, onChangeSelection, onRegisterSchemaSelectionHandler }) => {
 	const past = (0, import_react$9.useRef)([]);
 	const future = (0, import_react$9.useRef)([]);
 	const canvasRef = (0, import_react$9.useRef)(null);
@@ -235564,10 +235699,59 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		zoomLevel,
 		maxZoom
 	});
+	const getElementsByIds = (ids) => ids.map((id) => document.getElementById(id)).filter((element) => element instanceof HTMLElement);
 	const onEdit = (targets) => {
 		setActiveElements(targets.filter((target) => target instanceof HTMLElement));
 		setHoveringSchemaId(null);
 	};
+	const selectSchemas = (0, import_react$9.useCallback)((targets, options = {}) => {
+		const normalizedTargets = normalizeDesignerSchemaSelectionTargets(targets);
+		if (normalizedTargets.length === 0) {
+			onEditEnd();
+			return;
+		}
+		const targetPageIndex = getDesignerSelectionPageIndex(normalizedTargets, pageCursor, options);
+		const selectedSchemaIds = getSelectedSchemaIds({
+			pageIndex: targetPageIndex,
+			schemas: schemasList[targetPageIndex] ?? [],
+			targets: normalizedTargets
+		});
+		const editSelectedSchemas = () => onEdit(getElementsByIds(selectedSchemaIds));
+		if (selectedSchemaIds.length === 0) {
+			onEditEnd();
+			return;
+		}
+		if (targetPageIndex !== pageCursor) {
+			setPageCursor(targetPageIndex);
+			onPageCursorChange(targetPageIndex, schemasList.length);
+			if (options.scroll !== false && canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, targetPageIndex, scale);
+			setTimeout(editSelectedSchemas);
+			return;
+		}
+		editSelectedSchemas();
+	}, [
+		pageCursor,
+		pageSizes,
+		scale,
+		schemasList,
+		onPageCursorChange
+	]);
+	(0, import_react$9.useEffect)(() => {
+		onRegisterSchemaSelectionHandler?.(selectSchemas);
+		return () => onRegisterSchemaSelectionHandler?.(null);
+	}, [onRegisterSchemaSelectionHandler, selectSchemas]);
+	(0, import_react$9.useEffect)(() => {
+		onChangeSelection?.(createDesignerSelection({
+			activeSchemaIds: activeElements.map((element) => element.id),
+			pageIndex: pageCursor,
+			schemasList
+		}));
+	}, [
+		activeElements,
+		onChangeSelection,
+		pageCursor,
+		schemasList
+	]);
 	const onEditEnd = () => {
 		setActiveElements([]);
 		setHoveringSchemaId(null);
@@ -235913,7 +236097,10 @@ var Designer = class extends BaseUIClass {
 		_defineProperty$14(this, "onSaveTemplateCallback", void 0);
 		_defineProperty$14(this, "onChangeTemplateCallback", void 0);
 		_defineProperty$14(this, "onPageChangeCallback", void 0);
+		_defineProperty$14(this, "onChangeSelectionCallback", void 0);
 		_defineProperty$14(this, "pageCursor", 0);
+		_defineProperty$14(this, "selection", EMPTY_DESIGNER_SELECTION);
+		_defineProperty$14(this, "selectSchemasHandler", null);
 		checkDesignerProps(props);
 	}
 	saveTemplate() {
@@ -235936,6 +236123,20 @@ var Designer = class extends BaseUIClass {
 	onPageChange(cb) {
 		this.onPageChangeCallback = cb;
 	}
+	onChangeSelection(cb) {
+		this.onChangeSelectionCallback = cb;
+	}
+	getSelection() {
+		if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+		return cloneDeep$1(this.selection);
+	}
+	getSelectedSchemas() {
+		return this.getSelection().schemas;
+	}
+	selectSchemas(targets, options) {
+		if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+		this.selectSchemasHandler?.(targets, options);
+	}
 	getPageCursor() {
 		return this.pageCursor;
 	}
@@ -235969,6 +236170,13 @@ var Designer = class extends BaseUIClass {
 						totalPages
 					});
 				},
+				onChangeSelection: (selection) => {
+					this.selection = cloneDeep$1(selection);
+					if (this.onChangeSelectionCallback) this.onChangeSelectionCallback(cloneDeep$1(selection));
+				},
+				onRegisterSchemaSelectionHandler: (handler) => {
+					this.selectSchemasHandler = handler;
+				},
 				size: this.size
 			})
 		}));