fabricjs-document-engine 1.1.0 → 1.3.0

package/dist/history/create-history.js

@@ -1,6 +1,6 @@
+import { createSnapshot, diffSnapshots } from "./snapshot.js";
 import { applyStateChange } from "./apply-state.js";
 import { createHistoryStack } from "./history-stack.js";
-import { createSnapshot, diffSnapshots } from "./snapshot.js";
 //#region src/history/create-history.ts
 const verbsByAction = {
 	drag: "Move",
@@ -24,18 +24,23 @@ function describePendingChanges(changes) {
 	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
 }
 function createHistory(options) {
-	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const { canvas, serializeState, onChange, onContentChange, onLiveChange } = options;
+	const takeSnapshot = () => {
+		const { objects, page } = serializeState();
+		return createSnapshot(objects, page);
+	};
 	const stack = createHistoryStack({
 		steps: Math.max(1, options.limit ?? 100),
 		bytes: Math.max(0, options.maxBytes ?? 67108864)
 	});
-	let snapshot = createSnapshot(serializeObjects());
+	let snapshot = takeSnapshot();
 	let pendingChanges = [];
 	let flushScheduled = false;
 	let transactionDepth = 0;
 	let pausedDepth = 0;
 	let applying = false;
 	let queue = Promise.resolve();
+	let epoch = 0;
 	function state() {
 		const undoLabels = stack.undoLabels();
 		const redoLabels = stack.redoLabels();
@@ -48,7 +53,7 @@ function createHistory(options) {
 	}
 	function commit(label) {
 		pendingChanges = [];
-		const nextSnapshot = createSnapshot(serializeObjects());
+		const nextSnapshot = takeSnapshot();
 		const difference = diffSnapshots(snapshot, nextSnapshot);
 		snapshot = nextSnapshot;
 		if (difference === null) return false;
@@ -86,26 +91,56 @@ function createHistory(options) {
 		notice(verbsByAction[action] ?? "Transform", event.target);
 	};
 	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const handleTextChanged = () => {
+		if (!applying && pausedDepth === 0) onLiveChange?.();
+	};
 	const listeners = [
 		["object:added", handleAdded],
 		["object:removed", handleRemoved],
 		["object:modified", handleModified],
-		["text:editing:exited", handleTextEdited]
+		["text:editing:exited", handleTextEdited],
+		["text:changed", handleTextChanged]
 	];
 	const eventTarget = canvas;
 	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
-	function transaction(label, work) {
+	/**
+	* Puts the canvas back to the last recorded snapshot. The snapshot is the
+	* state before the transaction, so the difference to undo is exactly what
+	* the transaction changed: one serialization, then only the changed
+	* objects are rebuilt.
+	*/
+	function rollBack() {
+		const difference = diffSnapshots(snapshot, takeSnapshot());
+		pendingChanges = [];
+		if (difference === null) return Promise.resolve();
+		applying = true;
+		return runInOrder(async () => {
+			try {
+				await applyStateChange(canvas, difference.before);
+			} finally {
+				applying = false;
+			}
+		});
+	}
+	function transaction(label, work, transactionOptions = {}) {
 		if (transactionDepth === 0) commitPendingChanges();
+		const outermost = transactionDepth === 0;
 		transactionDepth += 1;
 		const finish = () => {
 			transactionDepth -= 1;
 			if (transactionDepth === 0) commit(label);
 		};
+		const fail = () => {
+			transactionDepth -= 1;
+			if (transactionDepth > 0) return void 0;
+			if (outermost && transactionOptions.rollback) return rollBack();
+			commit(label);
+		};
 		let result;
 		try {
 			result = work();
 		} catch (error) {
-			finish();
+			fail()?.catch(() => void 0);
 			throw error;
 		}
 		if (!isPromiseLike(result)) {
@@ -115,8 +150,8 @@ function createHistory(options) {
 		return Promise.resolve(result).then((value) => {
 			finish();
 			return value;
-		}, (error) => {
-			finish();
+		}, async (error) => {
+			await fail();
 			throw error;
 		});
 	}
@@ -148,16 +183,19 @@ function createHistory(options) {
 			commitPendingChanges();
 			const step = takeStep();
 			if (step === void 0) return false;
+			const startedIn = epoch;
 			applying = true;
+			let applied;
 			try {
-				await applyStateChange(canvas, pickChange(step));
+				applied = await applyStateChange(canvas, pickChange(step), () => epoch !== startedIn);
 			} catch (error) {
-				putBack(step);
+				if (epoch === startedIn) putBack(step);
 				throw error;
 			} finally {
 				applying = false;
 			}
-			snapshot = createSnapshot(serializeObjects());
+			if (!applied) return false;
+			snapshot = takeSnapshot();
 			moveTo(step);
 			onContentChange();
 			onChange(state());
@@ -170,6 +208,7 @@ function createHistory(options) {
 			return commit(label);
 		},
 		transaction,
+		settled: () => queue.then(() => void 0),
 		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
 		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
 		state,
@@ -182,7 +221,8 @@ function createHistory(options) {
 		reset() {
 			pendingChanges = [];
 			stack.clear();
-			snapshot = createSnapshot(serializeObjects());
+			epoch += 1;
+			snapshot = takeSnapshot();
 			onChange(state());
 		},
 		destroy() {

package/dist/history/snapshot.cjs

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,5 +51,6 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
+exports.PAGE_KEY = PAGE_KEY;
 exports.createSnapshot = createSnapshot;
 exports.diffSnapshots = diffSnapshots;

package/dist/history/snapshot.js

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,4 +51,4 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
-export { createSnapshot, diffSnapshots };
+export { PAGE_KEY, createSnapshot, diffSnapshots };

package/dist/import/svg-import.cjs

@@ -127,12 +127,110 @@ function contentBounds(objects) {
 		height: 0
 	};
 }
+function dropBrokenUses(document) {
+	for (const use of Array.from(document.getElementsByTagName("use"))) {
+		const link = (use.getAttribute("href") ?? use.getAttributeNS(XLINK, "href") ?? "").trim();
+		if (!link.startsWith("#") || link.length === 1 || document.getElementById(link.slice(1)) === null) use.remove();
+	}
+}
+const GROUP_MARK = "data-fde-svg-group";
+function markGroups(document) {
+	for (const name of ["g", "a"]) for (const element of Array.from(document.documentElement.getElementsByTagName(name))) element.setAttribute(GROUP_MARK, "");
+}
+function svgMetadata(element) {
+	const metadata = {};
+	const id = element.getAttribute("id");
+	if (id) metadata.svgId = id;
+	const className = element.getAttribute("class");
+	if (className) metadata.svgClass = className;
+	for (const attribute of Array.from(element.attributes)) {
+		if (!attribute.name.startsWith("data-") || attribute.name === GROUP_MARK) continue;
+		(metadata.svgData ?? (metadata.svgData = {}))[attribute.name.slice(5)] = attribute.value;
+	}
+	return metadata;
+}
+function ownOpacity(element) {
+	const fromStyle = /(?:^|;)\s*opacity\s*:\s*([0-9.]+)/.exec(element.getAttribute("style") ?? "")?.[1];
+	const value = Number.parseFloat(fromStyle ?? element.getAttribute("opacity") ?? "1");
+	return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+function rebuildGroups(objects, elements, root) {
+	const top = [];
+	const nodes = /* @__PURE__ */ new Map();
+	const groupNodes = /* @__PURE__ */ new Set();
+	const chains = /* @__PURE__ */ new Map();
+	const elementOf = /* @__PURE__ */ new Map();
+	objects.forEach((object, index) => {
+		const element = elements[index];
+		elementOf.set(object, element);
+		const chain = [];
+		for (let parent = element.parentElement; parent && parent !== root; parent = parent.parentElement) if (parent.hasAttribute(GROUP_MARK)) chain.push(parent);
+		chains.set(object, chain);
+		let children = top;
+		for (let level = chain.length - 1; level >= 0; level -= 1) {
+			const groupElement = chain[level];
+			let node = nodes.get(groupElement);
+			if (!node) {
+				node = {
+					element: groupElement,
+					children: []
+				};
+				nodes.set(groupElement, node);
+				groupNodes.add(node);
+				children.push(node);
+			}
+			children = node.children;
+		}
+		children.push(object);
+		const own = element.getAttribute("id");
+		const leaf = object;
+		if (!own && chain.length > 0 && leaf.id !== void 0) delete leaf.id;
+		const inherited = chain.reduce((product, groupElement) => product * ownOpacity(groupElement), 1);
+		if (inherited > 0) object.opacity = Math.min(1, object.opacity / inherited);
+		object.set(svgMetadata(element));
+	});
+	const hoistClip = (node, group) => {
+		if (!node.element.hasAttribute("clip-path")) return;
+		let clip;
+		for (const object of objects) {
+			const chain = chains.get(object);
+			const at = chain.indexOf(node.element);
+			if (at === -1) continue;
+			if (elementOf.get(object).hasAttribute("clip-path") || chain.slice(0, at).some((between) => between.hasAttribute("clip-path")) || !object.clipPath) continue;
+			if (!clip) {
+				const absolute = fabric.util.multiplyTransformMatrices(object.calcTransformMatrix(), object.clipPath.calcTransformMatrix());
+				clip = object.clipPath;
+				fabric.util.applyTransformToObject(clip, fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(group.calcTransformMatrix()), absolute));
+			}
+			object.clipPath = void 0;
+			object.set("dirty", true);
+		}
+		if (clip) group.clipPath = clip;
+	};
+	const build = (item) => {
+		if (!groupNodes.has(item)) return item;
+		const node = item;
+		const group = new fabric.Group(node.children.map(build));
+		group.set({
+			opacity: ownOpacity(node.element),
+			...svgMetadata(node.element)
+		});
+		const id = node.element.getAttribute("id");
+		if (id) group.id = id;
+		hoistClip(node, group);
+		group.setCoords();
+		return group;
+	};
+	return top.map(build);
+}
 /** Parses and places an SVG. Adding the result to a canvas is up to the caller. */
 async function readSvg(svg, options = {}, limits = {}) {
 	if (typeof svg !== "string" || svg.trim().length === 0) refuse("The SVG is empty");
 	const warnings = [];
 	const document = parse(svg);
 	sanitize(document, limits, warnings);
+	dropBrokenUses(document);
+	if (options.preserveGroups) markGroups(document);
 	let parsed;
 	try {
 		parsed = await (0, fabric.parseSVGDocument)(document, void 0, {
@@ -145,6 +243,10 @@ async function readSvg(svg, options = {}, limits = {}) {
 	}
 	if (options.signal?.aborted) throw new require_errors.DocumentEngineError("LOAD_ABORTED", "The SVG import was cancelled");
 	let objects = parsed.objects.filter((object) => object !== null && object !== void 0);
+	if (options.preserveGroups) {
+		const elements = parsed.elements.filter((_, index) => parsed.objects[index] !== null && parsed.objects[index] !== void 0);
+		objects = rebuildGroups(objects, elements, document.documentElement);
+	}
 	const declared = {
 		width: parsed.options.width ?? 0,
 		height: parsed.options.height ?? 0

package/dist/import/svg-import.d.cts

@@ -19,6 +19,7 @@ export interface SvgImportOptions {
   offscreen?: "keep" | "drop" | "clip";
   /** One group (the default), or separate objects. */
   as?: "group" | "objects";
+  preserveGroups?: boolean;
   /** Where the viewport's top-left corner lands on the canvas. Default 0, 0. */
   left?: number;
   top?: number;

package/dist/import/svg-import.d.ts

@@ -19,6 +19,7 @@ export interface SvgImportOptions {
   offscreen?: "keep" | "drop" | "clip";
   /** One group (the default), or separate objects. */
   as?: "group" | "objects";
+  preserveGroups?: boolean;
   /** Where the viewport's top-left corner lands on the canvas. Default 0, 0. */
   left?: number;
   top?: number;

package/dist/import/svg-import.js

@@ -1,6 +1,6 @@
 import { DocumentEngineError, isDocumentEngineError } from "../engine/errors.js";
 import { isSafeImageUrl } from "../security/content-limits.js";
-import { FixedLayout, Group, LayoutManager, Rect, parseSVGDocument } from "fabric";
+import { FixedLayout, Group, LayoutManager, Rect, parseSVGDocument, util } from "fabric";
 //#region src/import/svg-import.ts
 const XLINK = "http://www.w3.org/1999/xlink";
 const REMOVED_ELEMENTS = [
@@ -127,12 +127,110 @@ function contentBounds(objects) {
 		height: 0
 	};
 }
+function dropBrokenUses(document) {
+	for (const use of Array.from(document.getElementsByTagName("use"))) {
+		const link = (use.getAttribute("href") ?? use.getAttributeNS(XLINK, "href") ?? "").trim();
+		if (!link.startsWith("#") || link.length === 1 || document.getElementById(link.slice(1)) === null) use.remove();
+	}
+}
+const GROUP_MARK = "data-fde-svg-group";
+function markGroups(document) {
+	for (const name of ["g", "a"]) for (const element of Array.from(document.documentElement.getElementsByTagName(name))) element.setAttribute(GROUP_MARK, "");
+}
+function svgMetadata(element) {
+	const metadata = {};
+	const id = element.getAttribute("id");
+	if (id) metadata.svgId = id;
+	const className = element.getAttribute("class");
+	if (className) metadata.svgClass = className;
+	for (const attribute of Array.from(element.attributes)) {
+		if (!attribute.name.startsWith("data-") || attribute.name === GROUP_MARK) continue;
+		(metadata.svgData ?? (metadata.svgData = {}))[attribute.name.slice(5)] = attribute.value;
+	}
+	return metadata;
+}
+function ownOpacity(element) {
+	const fromStyle = /(?:^|;)\s*opacity\s*:\s*([0-9.]+)/.exec(element.getAttribute("style") ?? "")?.[1];
+	const value = Number.parseFloat(fromStyle ?? element.getAttribute("opacity") ?? "1");
+	return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+function rebuildGroups(objects, elements, root) {
+	const top = [];
+	const nodes = /* @__PURE__ */ new Map();
+	const groupNodes = /* @__PURE__ */ new Set();
+	const chains = /* @__PURE__ */ new Map();
+	const elementOf = /* @__PURE__ */ new Map();
+	objects.forEach((object, index) => {
+		const element = elements[index];
+		elementOf.set(object, element);
+		const chain = [];
+		for (let parent = element.parentElement; parent && parent !== root; parent = parent.parentElement) if (parent.hasAttribute(GROUP_MARK)) chain.push(parent);
+		chains.set(object, chain);
+		let children = top;
+		for (let level = chain.length - 1; level >= 0; level -= 1) {
+			const groupElement = chain[level];
+			let node = nodes.get(groupElement);
+			if (!node) {
+				node = {
+					element: groupElement,
+					children: []
+				};
+				nodes.set(groupElement, node);
+				groupNodes.add(node);
+				children.push(node);
+			}
+			children = node.children;
+		}
+		children.push(object);
+		const own = element.getAttribute("id");
+		const leaf = object;
+		if (!own && chain.length > 0 && leaf.id !== void 0) delete leaf.id;
+		const inherited = chain.reduce((product, groupElement) => product * ownOpacity(groupElement), 1);
+		if (inherited > 0) object.opacity = Math.min(1, object.opacity / inherited);
+		object.set(svgMetadata(element));
+	});
+	const hoistClip = (node, group) => {
+		if (!node.element.hasAttribute("clip-path")) return;
+		let clip;
+		for (const object of objects) {
+			const chain = chains.get(object);
+			const at = chain.indexOf(node.element);
+			if (at === -1) continue;
+			if (elementOf.get(object).hasAttribute("clip-path") || chain.slice(0, at).some((between) => between.hasAttribute("clip-path")) || !object.clipPath) continue;
+			if (!clip) {
+				const absolute = util.multiplyTransformMatrices(object.calcTransformMatrix(), object.clipPath.calcTransformMatrix());
+				clip = object.clipPath;
+				util.applyTransformToObject(clip, util.multiplyTransformMatrices(util.invertTransform(group.calcTransformMatrix()), absolute));
+			}
+			object.clipPath = void 0;
+			object.set("dirty", true);
+		}
+		if (clip) group.clipPath = clip;
+	};
+	const build = (item) => {
+		if (!groupNodes.has(item)) return item;
+		const node = item;
+		const group = new Group(node.children.map(build));
+		group.set({
+			opacity: ownOpacity(node.element),
+			...svgMetadata(node.element)
+		});
+		const id = node.element.getAttribute("id");
+		if (id) group.id = id;
+		hoistClip(node, group);
+		group.setCoords();
+		return group;
+	};
+	return top.map(build);
+}
 /** Parses and places an SVG. Adding the result to a canvas is up to the caller. */
 async function readSvg(svg, options = {}, limits = {}) {
 	if (typeof svg !== "string" || svg.trim().length === 0) refuse("The SVG is empty");
 	const warnings = [];
 	const document = parse(svg);
 	sanitize(document, limits, warnings);
+	dropBrokenUses(document);
+	if (options.preserveGroups) markGroups(document);
 	let parsed;
 	try {
 		parsed = await parseSVGDocument(document, void 0, {
@@ -145,6 +243,10 @@ async function readSvg(svg, options = {}, limits = {}) {
 	}
 	if (options.signal?.aborted) throw new DocumentEngineError("LOAD_ABORTED", "The SVG import was cancelled");
 	let objects = parsed.objects.filter((object) => object !== null && object !== void 0);
+	if (options.preserveGroups) {
+		const elements = parsed.elements.filter((_, index) => parsed.objects[index] !== null && parsed.objects[index] !== void 0);
+		objects = rebuildGroups(objects, elements, document.documentElement);
+	}
 	const declared = {
 		width: parsed.options.width ?? 0,
 		height: parsed.options.height ?? 0

package/dist/index.cjs

@@ -12,6 +12,7 @@ const require_batch_render = require("./export/batch-render.cjs");
 const require_document_state_store = require("./state/document-state-store.cjs");
 const require_clipboard = require("./commands/clipboard.cjs");
 const require_layers = require("./commands/layers.cjs");
+const require_text_edit = require("./commands/text-edit.cjs");
 exports.CLIPBOARD_FORMAT = require_clipboard.CLIPBOARD_FORMAT;
 exports.CURRENT_SCHEMA_VERSION = require_document_format.CURRENT_SCHEMA_VERSION;
 exports.DocumentEngineError = require_errors.DocumentEngineError;
@@ -23,6 +24,7 @@ exports.createClipboard = require_clipboard.createClipboard;
 exports.createConflictError = require_errors.createConflictError;
 exports.createDocumentEngine = require_create_document_engine.createDocumentEngine;
 exports.createDocumentStateStore = require_document_state_store.createDocumentStateStore;
+exports.createTextCommands = require_text_edit.createTextCommands;
 exports.detectSchemaVersion = require_migrate_document.detectSchemaVersion;
 exports.downloadExport = require_download_export.downloadExport;
 exports.getLayers = require_layers.getLayers;
@@ -30,9 +32,14 @@ exports.isDocumentEngineError = require_errors.isDocumentEngineError;
 exports.isSafeImageUrl = require_content_limits.isSafeImageUrl;
 exports.migrateDocument = require_migrate_document.migrateDocument;
 exports.moveToIndex = require_layers.moveToIndex;
+exports.readStyleRuns = require_text_edit.readStyleRuns;
 exports.refuseUnsafeImageUrls = require_content_limits.refuseUnsafeImageUrls;
 exports.renderDocuments = require_batch_render.renderDocuments;
+exports.replaceTextRange = require_text_edit.replaceTextRange;
 exports.secureDocument = require_content_limits.secureDocument;
 exports.sendBackward = require_layers.sendBackward;
 exports.sendToBack = require_layers.sendToBack;
+exports.setTextRangeStyle = require_text_edit.setTextRangeStyle;
+exports.shiftStyleRuns = require_text_edit.shiftStyleRuns;
 exports.validateDocument = require_validate_document.validateDocument;
+exports.writeStyleRuns = require_text_edit.writeStyleRuns;

package/dist/index.d.cts

@@ -9,7 +9,7 @@ import { ContentLimits, isSafeImageUrl, refuseUnsafeImageUrls, secureDocument }
 import { SvgImportOptions, SvgImportResult, SvgImportWarning, SvgImportWarningCode } from "./import/svg-import.cjs";
 import { NewDocumentOptions } from "./document/create-document.cjs";
 import { CustomObjectDefinition } from "./fabric/object-registry.cjs";
-import { HistoryOptions, HistoryState } from "./history/create-history.cjs";
+import { HistoryOptions, HistoryState, TransactionOptions } from "./history/create-history.cjs";
 import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.cjs";
 import { RecoveryStore } from "./recovery/recovery-store.cjs";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.cjs";
@@ -19,7 +19,7 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.cjs";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.cjs";
 import { Unsubscribe } from "./engine/event-emitter.cjs";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, createDocumentEngine } from "./engine/create-document-engine.cjs";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, PageChanges, RestoreRecoveryOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
 import { validateDocument } from "./document/validate-document.cjs";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.cjs";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.cjs";
@@ -29,4 +29,5 @@ import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migr
 import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.cjs";
 import { CLIPBOARD_FORMAT, Clipboard, ClipboardContent, ClipboardOptions, PasteOptions, createClipboard } from "./commands/clipboard.cjs";
 import { LayerInfo, LayerOptions, LayerPin, bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.cjs";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+import { EditableTextObject, InsertedStyle, StyleRun, TextCommands, createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.cjs";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type EditableTextObject, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InsertedStyle, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PageChanges, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RestoreRecoveryOptions, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type StyleRun, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TextCommands, type TransactionOptions, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { ContentLimits, isSafeImageUrl, refuseUnsafeImageUrls, secureDocument }
 import { SvgImportOptions, SvgImportResult, SvgImportWarning, SvgImportWarningCode } from "./import/svg-import.js";
 import { NewDocumentOptions } from "./document/create-document.js";
 import { CustomObjectDefinition } from "./fabric/object-registry.js";
-import { HistoryOptions, HistoryState } from "./history/create-history.js";
+import { HistoryOptions, HistoryState, TransactionOptions } from "./history/create-history.js";
 import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.js";
 import { RecoveryStore } from "./recovery/recovery-store.js";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.js";
@@ -19,7 +19,7 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.js";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.js";
 import { Unsubscribe } from "./engine/event-emitter.js";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, createDocumentEngine } from "./engine/create-document-engine.js";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, PageChanges, RestoreRecoveryOptions, createDocumentEngine } from "./engine/create-document-engine.js";
 import { validateDocument } from "./document/validate-document.js";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
@@ -29,4 +29,5 @@ import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migr
 import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.js";
 import { CLIPBOARD_FORMAT, Clipboard, ClipboardContent, ClipboardOptions, PasteOptions, createClipboard } from "./commands/clipboard.js";
 import { LayerInfo, LayerOptions, LayerPin, bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.js";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+import { EditableTextObject, InsertedStyle, StyleRun, TextCommands, createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.js";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type EditableTextObject, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InsertedStyle, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PageChanges, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RestoreRecoveryOptions, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type StyleRun, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TextCommands, type TransactionOptions, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/index.js

@@ -11,4 +11,5 @@ import { renderDocuments } from "./export/batch-render.js";
 import { createDocumentStateStore } from "./state/document-state-store.js";
 import { CLIPBOARD_FORMAT, createClipboard } from "./commands/clipboard.js";
 import { bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.js";
-export { CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+import { createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.js";
+export { CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/migrations/migrate-document.cjs

@@ -1,3 +1,4 @@
+const require_page_state = require("../fabric/page-state.cjs");
 const require_errors = require("../engine/errors.cjs");
 require("../document/document-format.cjs");
 const require_ids = require("../document/ids.cjs");
@@ -19,7 +20,7 @@ function fromFabricJson(json, context) {
 		canvas: {
 			width: positiveNumberOr(json.width, context.canvasWidth),
 			height: positiveNumberOr(json.height, context.canvasHeight),
-			...json.background === void 0 ? {} : { background: json.background }
+			...require_page_state.pickPageFields(json)
 		},
 		objects: json.objects,
 		metadata: { ...context.metadata }

package/dist/migrations/migrate-document.js

@@ -1,3 +1,4 @@
+import { pickPageFields } from "../fabric/page-state.js";
 import { DocumentEngineError } from "../engine/errors.js";
 import "../document/document-format.js";
 import { createId } from "../document/ids.js";
@@ -19,7 +20,7 @@ function fromFabricJson(json, context) {
 		canvas: {
 			width: positiveNumberOr(json.width, context.canvasWidth),
 			height: positiveNumberOr(json.height, context.canvasHeight),
-			...json.background === void 0 ? {} : { background: json.background }
+			...pickPageFields(json)
 		},
 		objects: json.objects,
 		metadata: { ...context.metadata }