fabricjs-document-engine 1.2.0 → 1.3.0

package/README.md

@@ -74,6 +74,8 @@ That is the whole setup for a first test. localStorage is fine here; in a real a
 - **Versions and migration.** Keep named versions, restore any of them as a new revision, and open plain Fabric JSON or documents saved by older versions of this package.
 - **Large documents.** Objects are created in chunks so the page stays responsive. Loads report progress and can be cancelled with an `AbortSignal`, and a cancelled load leaves the canvas as it was.
 - **Copy, paste and layers.** A clipboard that keeps group transforms and custom properties and gives every pasted object a new id, plus bring-to-front and send-to-back commands that keep a pinned background in place. Each is one undo step.
+- **Text that behaves.** A Textbox that keeps its width and can clip, add "…" or shrink to fit; cursor positions that match Arabic and ligatures; editable vertical Chinese, Japanese and Korean text; correct typing with Android and iOS keyboards; and text edits in code that keep each letter's style.
+- **Fast with many objects.** Dirty-region rendering redraws only what changed, and image filters run in a Web Worker with progress and cancel.
 - **Undo and redo.** One user action is one undo step. Transactions group several code changes into one labelled step, and ids survive undo and redo.
 - **React ready, framework free.** Hooks for React, and a small state store for any other framework.
 - **Hardened.** Imported documents and SVG files are cleaned and size-limited, undo history has a memory budget, and every feature is tested on Fabric 6 and 7 in Chromium, Firefox and WebKit. Exports are checked pixel by pixel against the canvas.
@@ -428,6 +430,7 @@ const { objects, viewport, warnings } = await engine.importSvg(svgText, {
 - The result is one group with a fixed layout the size of the viewport, or separate objects with `as: 'objects'`. Either way it is one undo step, and every object gets an id.
 - Scripts, event handlers, `foreignObject`, links to other files and image addresses that `limits.isAllowedUrl` refuses are removed, and `warnings` says what was removed.
 - Size limits apply as for documents, so a huge or deeply nested SVG is refused with `UNSAFE_DOCUMENT`.
+- `preserveGroups: true` keeps the SVG's `<g>` groups as Fabric groups, with their ids, opacity, clip paths, classes and `data-*` attributes (Fabric flattens them).
 
 ## Version history
 
@@ -593,6 +596,34 @@ getLayers(engine); // [{ id, type, name, index, visible, locked }], top first
 
 The engine saves each object's `name`, so a layers panel keeps its labels. In React, `useLayers(engine)` from `fabricjs-document-engine/react` returns the same list and updates on every change.
 
+## Text, rendering speed and filters
+
+These fix long-standing Fabric.js issues. Each was reproduced on Fabric 6 and 7 first, and each fix is tested in Chromium, Firefox and WebKit.
+
+```ts
+import { BoundedTextbox, VerticalText, ShapedIText, attachMobileTextInput, textObjects } from 'fabricjs-document-engine/text';
+import { enableDirtyRegionRendering } from 'fabricjs-document-engine/performance';
+import { createFilterWorker } from 'fabricjs-document-engine/filters';
+import { createTextCommands } from 'fabricjs-document-engine';
+
+const engine = createDocumentEngine({ canvas, customObjects: textObjects });
+canvas.add(new BoundedTextbox(longText, { width: 240, maxHeight: 120, overflow: 'ellipsis' }));
+canvas.add(new VerticalText('縦書きのテキスト', { fontSize: 32 }));
+canvas.add(new ShapedIText('مرحبا بالعالم', { direction: 'rtl' }));
+attachMobileTextInput(canvas);
+createTextCommands(engine).insertText(title, 0, 'New: ');
+enableDirtyRegionRendering(canvas);
+await createFilterWorker({ engine }).apply(image, [new filters.Blur({ blur: 0.2 })], { onProgress });
+```
+
+- **`BoundedTextbox` (#2376).** Fabric widens a Textbox to its longest word. This one breaks such a word between letters, as CSS `overflow-wrap: anywhere` does. With `maxHeight`, extra lines are clipped or end in "…", or `fit: 'shrink'` makes the font smaller until the text fits. The saved font size does not change.
+- **`ShapedIText` and `ShapedTextbox` (#4815).** Fabric measures each letter alone but draws joined letters, so in Arabic the cursor can land two letters away. These measure from the text as the browser shapes it.
+- **`VerticalText` (#511).** Columns from right to left, upright CJK characters, turned Latin words (Unicode UAX #50), and two-digit numbers side by side. Arrow keys, selection, IME, SVG and PDF all work.
+- **`attachMobileTextInput` (#6588).** Reads each edit from the text itself, so Android autocorrect, suggestions and cursor swipes put letters and styles in the right place. It also opens the keyboard on tap and stops iOS from zooming.
+- **`createTextCommands` (#6133).** Insert, delete, replace and restyle text from code with styles that stay on their letters, one undo step each.
+- **`enableDirtyRegionRendering` (#9847).** Moving one of 5,000 shapes draws about 25 of them instead of all 5,000: under 2 ms per frame in place of nearly a second in headless Chromium.
+- **`createFilterWorker` (#9532).** Fabric's filters run in a worker on transferred bitmaps, with the same pixels as Fabric, progress, cancel, and only the newest run applied while a slider moves.
+
 ## Edits that are never lost
 
 These guarantees hold however the user and your code interleave work:

package/README.zh-CN.md

@@ -74,6 +74,8 @@ await engine.loadDocument(JSON.parse(localStorage.getItem(document.id)!));
 - **版本和迁移。** 保存命名版本，把任意版本恢复为新的修订，还能打开纯 Fabric JSON 或旧版本这个包保存的文档。
 - **大文档。** 对象分批创建，页面保持响应。加载会报告进度，并能用 `AbortSignal` 取消；取消后画布保持原样。
 - **复制、粘贴和图层。** 剪贴板会保留编组的变换和自定义属性，并给每个粘贴出的对象一个新 id；置顶、置底等图层命令可以让固定的背景保持不动。每个操作都是一步撤销。
+- **好用的文字。** 保持宽度、可以裁剪、加“…”或自动缩小字号的文本框；与阿拉伯文和连字一致的光标位置；可编辑的中日韩竖排文字；在 Android 和 iOS 键盘上正确输入；在代码里修改文字时每个字的样式保持不变。
+- **对象多也流畅。** 脏区域渲染只重绘变化的部分，图片滤镜在 Web Worker 中运行，支持进度和取消。
 - **撤销和重做。** 用户的一次操作就是一步撤销。事务可以把代码里的多处改动合成一个带标签的步骤，撤销和重做后 id 保持不变。
 - **支持 React，不绑定框架。** 为 React 提供 hooks，为其他框架提供一个小的状态 store。
 - **经过加固。** 导入的文档和 SVG 文件会被清理并限制大小，撤销历史有内存上限，每个功能都在 Fabric 6 和 7、Chromium、Firefox 和 WebKit 中测试过。导出结果会和画布逐像素比对。
@@ -428,6 +430,7 @@ const { objects, viewport, warnings } = await engine.importSvg(svgText, {
 - 结果是一个固定布局、大小等于视口的编组；使用 `as: 'objects'` 时则是分开的对象。两种方式都只算一步撤销，每个对象都有 id。
 - 脚本、事件处理器、`foreignObject`、指向其他文件的链接，以及 `limits.isAllowedUrl` 拒绝的图片地址都会被移除，`warnings` 会说明移除了什么。
 - 大小限制和文档相同，过大或嵌套过深的 SVG 会以 `UNSAFE_DOCUMENT` 被拒绝。
+- 使用 `preserveGroups: true` 时，SVG 的 `<g>` 编组会保留为 Fabric 编组，连同 id、透明度、裁剪路径、class 和 `data-*` 属性（Fabric 自己会把它们拍平）。
 
 ## 版本历史
 
@@ -593,6 +596,35 @@ getLayers(engine); // [{ id, type, name, index, visible, locked }], top first
 
 引擎会保存每个对象的 `name`，所以图层面板的名称不会丢。在 React 中，`fabricjs-document-engine/react` 的 `useLayers(engine)` 返回同样的列表，并在每次改动后更新。
 
+## 文字、渲染速度和滤镜
+
+这些功能修复了 Fabric.js 中长期存在的问题。每个问题都先在 Fabric 6 和 7 上复现，每个修复都在 Chromium、Firefox 和 WebKit 中测试过。
+
+```ts
+import { BoundedTextbox, VerticalText, ShapedIText, attachMobileTextInput, textObjects } from 'fabricjs-document-engine/text';
+import { enableDirtyRegionRendering } from 'fabricjs-document-engine/performance';
+import { createFilterWorker } from 'fabricjs-document-engine/filters';
+import { createTextCommands } from 'fabricjs-document-engine';
+
+const engine = createDocumentEngine({ canvas, customObjects: textObjects });
+
+canvas.add(new BoundedTextbox(longText, { width: 240, maxHeight: 120, overflow: 'ellipsis' }));
+canvas.add(new VerticalText('縦書きのテキスト', { fontSize: 32 }));
+canvas.add(new ShapedIText('مرحبا بالعالم', { direction: 'rtl' }));
+attachMobileTextInput(canvas);
+createTextCommands(engine).insertText(title, 0, 'New: ');
+enableDirtyRegionRendering(canvas);
+await createFilterWorker({ engine }).apply(image, [new filters.Blur({ blur: 0.2 })], { onProgress });
+```
+
+- **`BoundedTextbox`（#2376）。** Fabric 会把文本框撑到最长单词的宽度。它会像 CSS `overflow-wrap: anywhere` 一样在字母之间断开过长的单词。设置 `maxHeight` 后，多出的行可以被裁剪或以“…”结尾，或者用 `fit: 'shrink'` 缩小字号直到放得下。保存的字号不会改变。
+- **`ShapedIText` 和 `ShapedTextbox`（#4815）。** Fabric 单独测量每个字母，但绘制时字母是连在一起的，所以阿拉伯文的光标可能偏两个字母。它们按浏览器实际排版的文字来测量。
+- **`VerticalText`（#511）。** 从右到左的列，直立的中日韩字符，旋转的拉丁单词（Unicode UAX #50），两位数字并排放在一个方格里。方向键、选择、输入法、SVG 和 PDF 都可以使用。
+- **`attachMobileTextInput`（#6588）。** 从文字本身读取每次修改，所以 Android 的自动更正、联想和光标滑动都会把文字和样式放在正确的位置。它还会在点击时打开键盘，并防止 iOS 缩放页面。
+- **`createTextCommands`（#6133）。** 在代码中插入、删除、替换文字和修改样式，样式跟着字母走，每次一步撤销。
+- **`enableDirtyRegionRendering`（#9847）。** 在 5,000 个图形中移动一个时，只绘制大约 25 个，而不是全部 5,000 个：在无头 Chromium 中每帧不到 2 毫秒，原来接近一秒。
+- **`createFilterWorker`（#9532）。** Fabric 的滤镜在 Worker 中处理转移过去的位图，像素和 Fabric 相同，支持进度和取消，拖动滑块时只应用最新的一次。
+
 ## 不会丢失的修改
 
 无论用户的操作和你的代码怎样交错，下面这些保证都成立：

package/dist/commands/text-edit.cjs

@@ -0,0 +1,223 @@
+//#region src/commands/text-edit.ts
+function sameStyle(a, b) {
+	if (a === b) return true;
+	const keys = Object.keys(a);
+	if (keys.length !== Object.keys(b).length) return false;
+	return keys.every((key) => a[key] === b[key]);
+}
+function hasStyle(style) {
+	return style !== void 0 && style !== null && Object.keys(style).length > 0;
+}
+function readStyleRuns(graphemes, styles) {
+	const runs = [];
+	let line = 0;
+	let char = 0;
+	for (let index = 0; index < graphemes.length; index += 1) {
+		if (graphemes[index] === "\n") {
+			line += 1;
+			char = 0;
+			continue;
+		}
+		const style = styles?.[line]?.[char];
+		char += 1;
+		if (!hasStyle(style)) continue;
+		const last = runs[runs.length - 1];
+		if (last && last.end === index && sameStyle(last.style, style)) last.end = index + 1;
+		else runs.push({
+			start: index,
+			end: index + 1,
+			style
+		});
+	}
+	return runs;
+}
+function writeStyleRuns(graphemes, runs) {
+	const styles = {};
+	let line = 0;
+	let char = 0;
+	let next = 0;
+	for (let index = 0; index < graphemes.length; index += 1) {
+		var _line;
+		if (graphemes[index] === "\n") {
+			line += 1;
+			char = 0;
+			continue;
+		}
+		while (next < runs.length && runs[next].end <= index) next += 1;
+		const run = runs[next];
+		if (run && run.start <= index) (styles[_line = line] ?? (styles[_line] = {}))[char] = { ...run.style };
+		char += 1;
+	}
+	return styles;
+}
+function shiftStyleRuns(runs, start, end, insertedLength, style) {
+	const delta = insertedLength - (end - start);
+	const shifted = [];
+	let inherited;
+	for (const run of runs) if (run.end <= start) {
+		const copy = { ...run };
+		if (copy.end === start) inherited = copy;
+		shifted.push(copy);
+	} else if (run.start >= end) shifted.push({
+		start: run.start + delta,
+		end: run.end + delta,
+		style: run.style
+	});
+	else {
+		if (run.start < start) {
+			inherited = {
+				start: run.start,
+				end: start,
+				style: run.style
+			};
+			shifted.push(inherited);
+		}
+		if (run.end > end) shifted.push({
+			start: end + delta,
+			end: run.end + delta,
+			style: run.style
+		});
+	}
+	if (insertedLength === 0) return shifted;
+	if (style === void 0) {
+		if (inherited) inherited.end += insertedLength;
+		return shifted;
+	}
+	if (!hasStyle(style)) return shifted;
+	const inserted = {
+		start,
+		end: start + insertedLength,
+		style
+	};
+	const at = shifted.findIndex((run) => run.start >= start);
+	if (at === -1) shifted.push(inserted);
+	else shifted.splice(at, 0, inserted);
+	return shifted;
+}
+function clamp(value, low, high) {
+	return Math.min(Math.max(value, low), high);
+}
+function moveIndex(index, start, end, insertedLength) {
+	if (index <= start) return index;
+	if (index >= end) return index + insertedLength - (end - start);
+	return start + insertedLength;
+}
+function replaceTextRange(target, start, end, insert, style) {
+	const text = target;
+	const graphemes = text._text ?? text.graphemeSplit(text.text);
+	const from = clamp(Math.floor(start), 0, graphemes.length);
+	const to = clamp(Math.floor(end), from, graphemes.length);
+	const inserted = insert ? text.graphemeSplit(insert) : [];
+	const runs = shiftStyleRuns(readStyleRuns(graphemes, text.styles), from, to, inserted.length, style);
+	const next = [
+		...graphemes.slice(0, from),
+		...inserted,
+		...graphemes.slice(to)
+	];
+	const selectionStart = moveIndex(text.selectionStart ?? 0, from, to, inserted.length);
+	const selectionEnd = moveIndex(text.selectionEnd ?? 0, from, to, inserted.length);
+	applyTextAndStyles(text, next, runs);
+	text.selectionStart = selectionStart;
+	text.selectionEnd = Math.max(selectionStart, selectionEnd);
+	announceTextChange(text);
+}
+function setTextRangeStyle(target, start, end, style) {
+	const text = target;
+	const graphemes = text._text ?? text.graphemeSplit(text.text);
+	const from = clamp(Math.floor(start), 0, graphemes.length);
+	const to = clamp(Math.floor(end), from, graphemes.length);
+	if (from === to) return;
+	const runs = readStyleRuns(graphemes, text.styles);
+	const result = [];
+	let cursor = from;
+	for (const run of runs) {
+		if (run.end <= from || run.start >= to) {
+			if (run.start >= to && cursor < to) {
+				result.push({
+					start: cursor,
+					end: to,
+					style: { ...style }
+				});
+				cursor = to;
+			}
+			result.push(run);
+			continue;
+		}
+		if (run.start < from) result.push({
+			start: run.start,
+			end: from,
+			style: run.style
+		});
+		const overlapStart = Math.max(run.start, from);
+		if (cursor < overlapStart) result.push({
+			start: cursor,
+			end: overlapStart,
+			style: { ...style }
+		});
+		const overlapEnd = Math.min(run.end, to);
+		result.push({
+			start: overlapStart,
+			end: overlapEnd,
+			style: {
+				...run.style,
+				...style
+			}
+		});
+		cursor = overlapEnd;
+		if (run.end > to) result.push({
+			start: to,
+			end: run.end,
+			style: run.style
+		});
+	}
+	if (cursor < to) result.push({
+		start: cursor,
+		end: to,
+		style: { ...style }
+	});
+	applyTextAndStyles(text, graphemes, result);
+	announceTextChange(text);
+}
+function applyTextAndStyles(text, graphemes, runs) {
+	const value = graphemes.join("");
+	text.styles = writeStyleRuns(graphemes, runs);
+	if (text.text !== value) text.set("text", value);
+	else text.initDimensions();
+	text.set("dirty", true);
+	text.setCoords();
+}
+function announceTextChange(text) {
+	if (text.isEditing && text.hiddenTextarea && !text.inCompositionMode) {
+		text.hiddenTextarea.value = text.text;
+		text._updateTextarea?.();
+	}
+	text.fire("changed");
+	text.canvas?.fire("text:changed", { target: text });
+	text.canvas?.requestRenderAll();
+}
+function createTextCommands(engine) {
+	return {
+		insertText(target, index, text, style) {
+			if (!text) return;
+			engine.transaction("Insert text", () => replaceTextRange(target, index, index, text, style));
+		},
+		deleteText(target, start, end) {
+			if (end <= start) return;
+			engine.transaction("Delete text", () => replaceTextRange(target, start, end, ""));
+		},
+		replaceText(target, start, end, text, style) {
+			engine.transaction("Replace text", () => replaceTextRange(target, start, end, text, style));
+		},
+		setTextStyle(target, start, end, style) {
+			if (end <= start) return;
+			engine.transaction("Style text", () => setTextRangeStyle(target, start, end, style));
+		}
+	};
+}
+//#endregion
+exports.createTextCommands = createTextCommands;
+exports.readStyleRuns = readStyleRuns;
+exports.replaceTextRange = replaceTextRange;
+exports.setTextRangeStyle = setTextRangeStyle;
+exports.shiftStyleRuns = shiftStyleRuns;
+exports.writeStyleRuns = writeStyleRuns;

package/dist/commands/text-edit.d.cts

@@ -0,0 +1,23 @@
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+import { IText, TextStyleDeclaration, Textbox } from "fabric";
+//#region src/commands/text-edit.d.ts
+export type EditableTextObject = IText | Textbox;
+export interface StyleRun {
+  start: number;
+  end: number;
+  style: TextStyleDeclaration;
+}
+export type InsertedStyle = TextStyleDeclaration | null | undefined;
+export declare function readStyleRuns(graphemes: readonly string[], styles: IText["styles"]): StyleRun[];
+export declare function writeStyleRuns(graphemes: readonly string[], runs: readonly StyleRun[]): IText["styles"];
+export declare function shiftStyleRuns(runs: readonly StyleRun[], start: number, end: number, insertedLength: number, style?: InsertedStyle): StyleRun[];
+export declare function replaceTextRange(target: EditableTextObject, start: number, end: number, insert: string, style?: InsertedStyle): void;
+export declare function setTextRangeStyle(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void;
+export interface TextCommands {
+  insertText(target: EditableTextObject, index: number, text: string, style?: InsertedStyle): void;
+  deleteText(target: EditableTextObject, start: number, end: number): void;
+  replaceText(target: EditableTextObject, start: number, end: number, text: string, style?: InsertedStyle): void;
+  setTextStyle(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void;
+}
+export declare function createTextCommands(engine: DocumentEngine): TextCommands;
+//#endregion

package/dist/commands/text-edit.d.ts

@@ -0,0 +1,23 @@
+import { DocumentEngine } from "../engine/create-document-engine.js";
+import { IText, TextStyleDeclaration, Textbox } from "fabric";
+//#region src/commands/text-edit.d.ts
+export type EditableTextObject = IText | Textbox;
+export interface StyleRun {
+  start: number;
+  end: number;
+  style: TextStyleDeclaration;
+}
+export type InsertedStyle = TextStyleDeclaration | null | undefined;
+export declare function readStyleRuns(graphemes: readonly string[], styles: IText["styles"]): StyleRun[];
+export declare function writeStyleRuns(graphemes: readonly string[], runs: readonly StyleRun[]): IText["styles"];
+export declare function shiftStyleRuns(runs: readonly StyleRun[], start: number, end: number, insertedLength: number, style?: InsertedStyle): StyleRun[];
+export declare function replaceTextRange(target: EditableTextObject, start: number, end: number, insert: string, style?: InsertedStyle): void;
+export declare function setTextRangeStyle(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void;
+export interface TextCommands {
+  insertText(target: EditableTextObject, index: number, text: string, style?: InsertedStyle): void;
+  deleteText(target: EditableTextObject, start: number, end: number): void;
+  replaceText(target: EditableTextObject, start: number, end: number, text: string, style?: InsertedStyle): void;
+  setTextStyle(target: EditableTextObject, start: number, end: number, style: TextStyleDeclaration): void;
+}
+export declare function createTextCommands(engine: DocumentEngine): TextCommands;
+//#endregion

package/dist/commands/text-edit.js

@@ -0,0 +1,218 @@
+//#region src/commands/text-edit.ts
+function sameStyle(a, b) {
+	if (a === b) return true;
+	const keys = Object.keys(a);
+	if (keys.length !== Object.keys(b).length) return false;
+	return keys.every((key) => a[key] === b[key]);
+}
+function hasStyle(style) {
+	return style !== void 0 && style !== null && Object.keys(style).length > 0;
+}
+function readStyleRuns(graphemes, styles) {
+	const runs = [];
+	let line = 0;
+	let char = 0;
+	for (let index = 0; index < graphemes.length; index += 1) {
+		if (graphemes[index] === "\n") {
+			line += 1;
+			char = 0;
+			continue;
+		}
+		const style = styles?.[line]?.[char];
+		char += 1;
+		if (!hasStyle(style)) continue;
+		const last = runs[runs.length - 1];
+		if (last && last.end === index && sameStyle(last.style, style)) last.end = index + 1;
+		else runs.push({
+			start: index,
+			end: index + 1,
+			style
+		});
+	}
+	return runs;
+}
+function writeStyleRuns(graphemes, runs) {
+	const styles = {};
+	let line = 0;
+	let char = 0;
+	let next = 0;
+	for (let index = 0; index < graphemes.length; index += 1) {
+		var _line;
+		if (graphemes[index] === "\n") {
+			line += 1;
+			char = 0;
+			continue;
+		}
+		while (next < runs.length && runs[next].end <= index) next += 1;
+		const run = runs[next];
+		if (run && run.start <= index) (styles[_line = line] ?? (styles[_line] = {}))[char] = { ...run.style };
+		char += 1;
+	}
+	return styles;
+}
+function shiftStyleRuns(runs, start, end, insertedLength, style) {
+	const delta = insertedLength - (end - start);
+	const shifted = [];
+	let inherited;
+	for (const run of runs) if (run.end <= start) {
+		const copy = { ...run };
+		if (copy.end === start) inherited = copy;
+		shifted.push(copy);
+	} else if (run.start >= end) shifted.push({
+		start: run.start + delta,
+		end: run.end + delta,
+		style: run.style
+	});
+	else {
+		if (run.start < start) {
+			inherited = {
+				start: run.start,
+				end: start,
+				style: run.style
+			};
+			shifted.push(inherited);
+		}
+		if (run.end > end) shifted.push({
+			start: end + delta,
+			end: run.end + delta,
+			style: run.style
+		});
+	}
+	if (insertedLength === 0) return shifted;
+	if (style === void 0) {
+		if (inherited) inherited.end += insertedLength;
+		return shifted;
+	}
+	if (!hasStyle(style)) return shifted;
+	const inserted = {
+		start,
+		end: start + insertedLength,
+		style
+	};
+	const at = shifted.findIndex((run) => run.start >= start);
+	if (at === -1) shifted.push(inserted);
+	else shifted.splice(at, 0, inserted);
+	return shifted;
+}
+function clamp(value, low, high) {
+	return Math.min(Math.max(value, low), high);
+}
+function moveIndex(index, start, end, insertedLength) {
+	if (index <= start) return index;
+	if (index >= end) return index + insertedLength - (end - start);
+	return start + insertedLength;
+}
+function replaceTextRange(target, start, end, insert, style) {
+	const text = target;
+	const graphemes = text._text ?? text.graphemeSplit(text.text);
+	const from = clamp(Math.floor(start), 0, graphemes.length);
+	const to = clamp(Math.floor(end), from, graphemes.length);
+	const inserted = insert ? text.graphemeSplit(insert) : [];
+	const runs = shiftStyleRuns(readStyleRuns(graphemes, text.styles), from, to, inserted.length, style);
+	const next = [
+		...graphemes.slice(0, from),
+		...inserted,
+		...graphemes.slice(to)
+	];
+	const selectionStart = moveIndex(text.selectionStart ?? 0, from, to, inserted.length);
+	const selectionEnd = moveIndex(text.selectionEnd ?? 0, from, to, inserted.length);
+	applyTextAndStyles(text, next, runs);
+	text.selectionStart = selectionStart;
+	text.selectionEnd = Math.max(selectionStart, selectionEnd);
+	announceTextChange(text);
+}
+function setTextRangeStyle(target, start, end, style) {
+	const text = target;
+	const graphemes = text._text ?? text.graphemeSplit(text.text);
+	const from = clamp(Math.floor(start), 0, graphemes.length);
+	const to = clamp(Math.floor(end), from, graphemes.length);
+	if (from === to) return;
+	const runs = readStyleRuns(graphemes, text.styles);
+	const result = [];
+	let cursor = from;
+	for (const run of runs) {
+		if (run.end <= from || run.start >= to) {
+			if (run.start >= to && cursor < to) {
+				result.push({
+					start: cursor,
+					end: to,
+					style: { ...style }
+				});
+				cursor = to;
+			}
+			result.push(run);
+			continue;
+		}
+		if (run.start < from) result.push({
+			start: run.start,
+			end: from,
+			style: run.style
+		});
+		const overlapStart = Math.max(run.start, from);
+		if (cursor < overlapStart) result.push({
+			start: cursor,
+			end: overlapStart,
+			style: { ...style }
+		});
+		const overlapEnd = Math.min(run.end, to);
+		result.push({
+			start: overlapStart,
+			end: overlapEnd,
+			style: {
+				...run.style,
+				...style
+			}
+		});
+		cursor = overlapEnd;
+		if (run.end > to) result.push({
+			start: to,
+			end: run.end,
+			style: run.style
+		});
+	}
+	if (cursor < to) result.push({
+		start: cursor,
+		end: to,
+		style: { ...style }
+	});
+	applyTextAndStyles(text, graphemes, result);
+	announceTextChange(text);
+}
+function applyTextAndStyles(text, graphemes, runs) {
+	const value = graphemes.join("");
+	text.styles = writeStyleRuns(graphemes, runs);
+	if (text.text !== value) text.set("text", value);
+	else text.initDimensions();
+	text.set("dirty", true);
+	text.setCoords();
+}
+function announceTextChange(text) {
+	if (text.isEditing && text.hiddenTextarea && !text.inCompositionMode) {
+		text.hiddenTextarea.value = text.text;
+		text._updateTextarea?.();
+	}
+	text.fire("changed");
+	text.canvas?.fire("text:changed", { target: text });
+	text.canvas?.requestRenderAll();
+}
+function createTextCommands(engine) {
+	return {
+		insertText(target, index, text, style) {
+			if (!text) return;
+			engine.transaction("Insert text", () => replaceTextRange(target, index, index, text, style));
+		},
+		deleteText(target, start, end) {
+			if (end <= start) return;
+			engine.transaction("Delete text", () => replaceTextRange(target, start, end, ""));
+		},
+		replaceText(target, start, end, text, style) {
+			engine.transaction("Replace text", () => replaceTextRange(target, start, end, text, style));
+		},
+		setTextStyle(target, start, end, style) {
+			if (end <= start) return;
+			engine.transaction("Style text", () => setTextRangeStyle(target, start, end, style));
+		}
+	};
+}
+//#endregion
+export { createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns };

package/dist/fabric/object-registry.cjs

@@ -2,7 +2,13 @@ const require_errors = require("../engine/errors.cjs");
 let fabric = require("fabric");
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
+	const extraProperties = /* @__PURE__ */ new Set([
+		"id",
+		"name",
+		"svgId",
+		"svgClass",
+		"svgData"
+	]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new require_errors.DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");

package/dist/fabric/object-registry.js

@@ -2,7 +2,13 @@ import { DocumentEngineError } from "../engine/errors.js";
 import { classRegistry } from "fabric";
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
+	const extraProperties = /* @__PURE__ */ new Set([
+		"id",
+		"name",
+		"svgId",
+		"svgClass",
+		"svgData"
+	]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");