fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/text/bounded-textbox.js

@@ -0,0 +1,306 @@
+import { shapeLine, shapeWord } from "./shaping.js";
+import { Textbox } from "fabric";
+//#region src/text/bounded-textbox.ts
+const BOUNDED_PROPERTIES = [
+	"breakWords",
+	"maxHeight",
+	"overflow",
+	"fit",
+	"minFontSize",
+	"shaping"
+];
+const ELLIPSIS = "…";
+let clipCounter = 0;
+function internals(text) {
+	return text;
+}
+var BoundedTextbox = class BoundedTextbox extends Textbox {
+	static getDefaults() {
+		return {
+			...super.getDefaults(),
+			...BoundedTextbox.boundedDefaults
+		};
+	}
+	constructor(text, options = {}) {
+		super(text, {
+			...BoundedTextbox.boundedDefaults,
+			...options
+		});
+	}
+	getBaseFontSize() {
+		return this.baseFontSize;
+	}
+	initDimensions() {
+		if (!internals(this).initialized) return;
+		this.midWordBreaks ?? (this.midWordBreaks = /* @__PURE__ */ new Set());
+		this.overflowCache = void 0;
+		this.fitScale = 1;
+		super.initDimensions();
+		if (this.fit === "shrink" && this.maxHeight !== void 0 && this.calcTextHeight() > this.maxHeight) this.shrinkToFit();
+		if (this.maxHeight !== void 0 && this.overflow !== "visible") this.height = Math.min(this.height, this.maxHeight);
+	}
+	shrinkToFit() {
+		const base = this.baseFontSize;
+		const maxHeight = this.maxHeight;
+		let low = Math.max(1, Math.ceil(Math.min(this.minFontSize, base) * 2));
+		let high = Math.floor(base * 2) - 1;
+		let best = low;
+		const layOut = (halfPoints) => {
+			this.fitScale = halfPoints / 2 / base;
+			Textbox.prototype.initDimensions.call(this);
+			return this.calcTextHeight();
+		};
+		while (low <= high) {
+			const middle = low + high >> 1;
+			if (layOut(middle) <= maxHeight) {
+				best = middle;
+				low = middle + 1;
+			} else high = middle - 1;
+		}
+		if (this.fitScale !== best / 2 / base) layOut(best);
+	}
+	getValueOfPropertyAt(lineIndex, charIndex, property) {
+		const value = super.getValueOfPropertyAt(lineIndex, charIndex, property);
+		if (property === "fontSize" && this.fitScale !== 1 && this.hasOwnFontSize(lineIndex, charIndex)) return value * this.fitScale;
+		return value;
+	}
+	getCompleteStyleDeclaration(lineIndex, charIndex) {
+		const style = super.getCompleteStyleDeclaration(lineIndex, charIndex);
+		if (this.fitScale !== 1 && this.hasOwnFontSize(lineIndex, charIndex)) style.fontSize *= this.fitScale;
+		return style;
+	}
+	hasOwnFontSize(lineIndex, charIndex) {
+		return internals(this)._getStyleDeclaration(lineIndex, charIndex)?.fontSize !== void 0;
+	}
+	_wrapText(lines, desiredWidth) {
+		const self = internals(this);
+		this.midWordBreaks = /* @__PURE__ */ new Set();
+		self.isWrapping = true;
+		const data = self.getGraphemeDataForRender(lines);
+		const wrapped = [];
+		for (let index = 0; index < data.wordsData.length; index += 1) {
+			this.lineBase = wrapped.length;
+			wrapped.push(...this._wrapLine(index, desiredWidth, data));
+		}
+		self.isWrapping = false;
+		return wrapped;
+	}
+	_wrapLine(lineIndex, desiredWidth, data, reservedSpace = 0) {
+		if (this.breakWords === "never" || this.splitByGrapheme) return super._wrapLine(lineIndex, desiredWidth, data, reservedSpace);
+		const self = internals(this);
+		const { wordsData } = data;
+		const additionalSpace = self._getWidthOfCharSpacing();
+		const available = desiredWidth - reservedSpace;
+		const lines = [];
+		let line = [];
+		let lineWidth = 0;
+		let offset = 0;
+		let infixWidth = 0;
+		let lineJustStarted = true;
+		let widestGrapheme = 0;
+		const words = wordsData[lineIndex] ?? [];
+		for (const { word, width: wordWidth } of words) {
+			const wordStart = offset;
+			offset += word.length;
+			if (wordWidth - additionalSpace > available && word.length > 1) {
+				if (!lineJustStarted) lines.push(line);
+				line = [];
+				lineWidth = 0;
+				let previous;
+				for (let index = 0; index < word.length; index += 1) {
+					const grapheme = word[index];
+					const graphemeWidth = self._getGraphemeBox(grapheme, lineIndex, wordStart + index, previous, true).kernedWidth;
+					widestGrapheme = Math.max(widestGrapheme, graphemeWidth - additionalSpace);
+					if (line.length > 0 && lineWidth + graphemeWidth - additionalSpace > available) {
+						this.midWordBreaks.add(this.lineBase + lines.length);
+						lines.push(line);
+						line = [];
+						lineWidth = 0;
+					}
+					line.push(grapheme);
+					lineWidth += graphemeWidth;
+					previous = grapheme;
+				}
+			} else {
+				if (word.length === 1) widestGrapheme = Math.max(widestGrapheme, wordWidth - additionalSpace);
+				lineWidth += infixWidth + wordWidth - additionalSpace;
+				if (lineWidth > available && !lineJustStarted) {
+					lines.push(line);
+					line = [];
+					lineWidth = wordWidth;
+					lineJustStarted = true;
+				} else lineWidth += additionalSpace;
+				if (!lineJustStarted) line.push(" ");
+				line = line.concat(word);
+			}
+			infixWidth = self._measureWord([" "], lineIndex, offset);
+			offset += 1;
+			lineJustStarted = false;
+		}
+		if (words.length > 0) lines.push(line);
+		self.dynamicMinWidth = Math.max(self.dynamicMinWidth, widestGrapheme);
+		return lines;
+	}
+	_measureLine(lineIndex) {
+		const measured = super._measureLine(lineIndex);
+		return this.shaping ? shapeLine(this, lineIndex, measured) : measured;
+	}
+	_measureWord(word, lineIndex, charOffset = 0) {
+		const width = super._measureWord(word, lineIndex, charOffset);
+		return this.shaping ? shapeWord(this, word, lineIndex, charOffset, width) : width;
+	}
+	missingNewlineOffset(lineIndex, skipWrapping) {
+		if (!skipWrapping && this.midWordBreaks?.has(lineIndex)) return 0;
+		return super.missingNewlineOffset(lineIndex, skipWrapping);
+	}
+	overflowLayout() {
+		if (this.overflowCache !== void 0) return this.overflowCache;
+		const maxHeight = this.maxHeight;
+		if (maxHeight === void 0 || this.overflow === "visible") return this.overflowCache = null;
+		const lineCount = internals(this)._textLines.length;
+		let visibleLines = 0;
+		let top = 0;
+		for (let index = 0; index < lineCount; index += 1) {
+			const lineHeight = this.getHeightOfLine(index);
+			if (top + lineHeight / this.lineHeight > maxHeight + .5) break;
+			visibleLines = index + 1;
+			top += lineHeight;
+		}
+		const clipped = visibleLines < lineCount;
+		const layout = {
+			visibleLines,
+			clipped,
+			visibleHeight: top
+		};
+		if (clipped && visibleLines > 0 && this.overflow === "ellipsis" && !this.isEditing && this.direction !== "rtl") layout.ellipsis = this.placeEllipsis(visibleLines - 1, top - this.getHeightOfLine(visibleLines - 1));
+		return this.overflowCache = layout;
+	}
+	placeEllipsis(line, lineTop) {
+		const self = internals(this);
+		this.getLineWidth(line);
+		const bounds = self.__charBounds[line] ?? [];
+		const graphemes = self._textLines[line] ?? [];
+		const lineLeft = self._getLineLeftOffset(line);
+		const styleAt = (index) => this.getCompleteStyleDeclaration(line, Math.max(0, Math.min(index, graphemes.length - 1)));
+		const ellipsisWidth = self._measureChar(ELLIPSIS, styleAt(graphemes.length - 1)).width;
+		let low = 0;
+		let high = graphemes.length;
+		while (low < high) {
+			const middle = low + high + 1 >> 1;
+			if (lineLeft + (bounds[middle]?.left ?? 0) + ellipsisWidth <= this.width) low = middle;
+			else high = middle - 1;
+		}
+		let cut = low;
+		while (cut > 0 && /\s/.test(graphemes[cut - 1])) cut -= 1;
+		const lineHeight = this.getHeightOfLine(line) / this.lineHeight;
+		return {
+			line,
+			cut,
+			x: self._getLeftOffset() + lineLeft + (bounds[cut]?.left ?? 0),
+			baseline: self._getTopOffset() + lineTop + lineHeight * (1 - self._fontSizeFraction),
+			style: styleAt(cut - 1)
+		};
+	}
+	clipRects(layout) {
+		const self = internals(this);
+		const left = self._getLeftOffset();
+		const top = self._getTopOffset();
+		const wide = this.width + this.fontSize * 2;
+		const x = left - this.fontSize;
+		if (!layout.ellipsis) {
+			const bottom = this.overflow === "clip" || this.isEditing ? this.maxHeight : layout.visibleHeight;
+			return [[
+				x,
+				top - this.fontSize,
+				wide,
+				bottom + this.fontSize
+			]];
+		}
+		const { line, x: cutX } = layout.ellipsis;
+		const lineTop = layout.visibleHeight - this.getHeightOfLine(line);
+		const rects = [];
+		if (lineTop > 0) rects.push([
+			x,
+			top - this.fontSize,
+			wide,
+			lineTop + this.fontSize
+		]);
+		rects.push([
+			x,
+			top + lineTop,
+			cutX - x,
+			this.getHeightOfLine(line)
+		]);
+		return rects;
+	}
+	_render(ctx) {
+		const layout = this.overflowLayout();
+		if (!layout || !layout.clipped && this.overflow !== "clip") {
+			super._render(ctx);
+			return;
+		}
+		ctx.save();
+		ctx.beginPath();
+		for (const [x, y, width, height] of this.clipRects(layout)) ctx.rect(x, y, width, height);
+		ctx.clip();
+		super._render(ctx);
+		ctx.restore();
+		const ellipsis = layout.ellipsis;
+		if (!ellipsis) return;
+		ctx.save();
+		ctx.font = internals(this)._getFontDeclaration(ellipsis.style);
+		ctx.textBaseline = "alphabetic";
+		ctx.textAlign = "left";
+		ctx.fillStyle = typeof ellipsis.style.fill === "string" ? ellipsis.style.fill : typeof this.fill === "string" ? this.fill : "#000";
+		ctx.fillText(ELLIPSIS, ellipsis.x, ellipsis.baseline - (ellipsis.style.deltaY ?? 0));
+		ctx.restore();
+	}
+	_toSVG() {
+		const markup = super._toSVG();
+		const layout = this.overflowLayout();
+		if (!layout || !layout.clipped && this.overflow !== "clip") return markup;
+		clipCounter += 1;
+		const id = `fde-bounded-text-${clipCounter}`;
+		const result = [
+			`<clipPath id="${id}">${this.clipRects(layout).map(([x, y, width, height]) => `<rect x="${x}" y="${y}" width="${width}" height="${height}" />`).join("")}</clipPath>\n<g clip-path="url(#${id})">\n`,
+			...markup,
+			"</g>\n"
+		];
+		const ellipsis = layout.ellipsis;
+		if (ellipsis) {
+			const style = ellipsis.style;
+			const fill = typeof style.fill === "string" ? style.fill : typeof this.fill === "string" ? this.fill : "#000";
+			const family = String(style.fontFamily ?? this.fontFamily).replace(/"/g, "'");
+			result.push(`<text xml:space="preserve" x="${ellipsis.x}" y="${ellipsis.baseline - (style.deltaY ?? 0)}" font-family="${family}" font-size="${style.fontSize}" font-style="${style.fontStyle ?? "normal"}" font-weight="${style.fontWeight ?? "normal"}" fill="${fill}">${ELLIPSIS}</text>\n`);
+		}
+		return result;
+	}
+	toObject(propertiesToInclude = []) {
+		const object = super.toObject([...BOUNDED_PROPERTIES, ...propertiesToInclude]);
+		if ("fontSize" in object) object.fontSize = this.baseFontSize;
+		return object;
+	}
+};
+BoundedTextbox.type = "BoundedTextbox";
+BoundedTextbox.textLayoutProperties = [...Textbox.textLayoutProperties, ...BOUNDED_PROPERTIES];
+BoundedTextbox.cacheProperties = [...Textbox.cacheProperties, ...BOUNDED_PROPERTIES];
+BoundedTextbox.boundedDefaults = {
+	breakWords: "anywhere",
+	maxHeight: void 0,
+	overflow: "visible",
+	fit: "none",
+	minFontSize: 6,
+	shaping: false
+};
+Object.defineProperty(BoundedTextbox.prototype, "fontSize", {
+	configurable: true,
+	enumerable: true,
+	get() {
+		return this.baseFontSize * (this.fitScale ?? 1);
+	},
+	set(value) {
+		this.baseFontSize = value;
+	}
+});
+//#endregion
+export { BoundedTextbox };

package/dist/text/mobile-input.cjs

@@ -0,0 +1,146 @@
+const require_text_edit = require("../commands/text-edit.cjs");
+let fabric = require("fabric");
+//#region src/text/mobile-input.ts
+const composing = (text) => Boolean(text.inCompositionMode);
+function findTextEdit(previous, next, cursor) {
+	const shorter = Math.min(previous.length, next.length);
+	let sharedStart = 0;
+	while (sharedStart < shorter && previous[sharedStart] === next[sharedStart]) sharedStart += 1;
+	let sharedEnd = 0;
+	while (sharedEnd < shorter && previous[previous.length - 1 - sharedEnd] === next[next.length - 1 - sharedEnd]) sharedEnd += 1;
+	let from = sharedStart;
+	let end = sharedEnd;
+	if (sharedStart + sharedEnd > shorter) {
+		const grown = next.length - shorter;
+		from = Math.min(Math.max(cursor - grown, shorter - sharedEnd), sharedStart);
+		end = shorter - from;
+	}
+	const oldTo = previous.length - end;
+	const newTo = next.length - end;
+	if (from === oldTo && from === newTo) return void 0;
+	return {
+		from,
+		oldTo,
+		newTo
+	};
+}
+function anchorOf(text) {
+	if (!text.textAlign.startsWith("justify")) return text.textAlign.replace("justify-", "");
+	return text.direction === "rtl" ? "right" : "left";
+}
+function applyFromTextarea(event) {
+	const textarea = this.hiddenTextarea;
+	if (!textarea) return;
+	if (this.fromPaste) {
+		fabric.IText.prototype.onInput.call(this, event);
+		return;
+	}
+	event?.stopPropagation();
+	if (!this.isEditing) return;
+	const { value } = textarea;
+	const next = this.graphemeSplit(value);
+	const selection = this.fromStringToGraphemeSelection(textarea.selectionStart, textarea.selectionEnd, value);
+	const edit = findTextEdit(this._text, next, selection.selectionEnd);
+	if (edit) {
+		const anchored = typeof this.getPositionByOrigin === "function";
+		const anchor = anchorOf(this);
+		const position = anchored ? this.getPositionByOrigin(anchor, "top") : void 0;
+		require_text_edit.replaceTextRange(this, edit.from, edit.oldTo, next.slice(edit.from, edit.newTo).join(""));
+		if (position) this.setPositionByOrigin(position, anchor, "top");
+		this.setCoords();
+	}
+	this.selectionStart = selection.selectionStart;
+	this.selectionEnd = selection.selectionEnd;
+	this.cursorOffsetCache = {};
+	if (!composing(this)) this.updateTextareaPosition();
+	this.canvas?.requestRenderAll();
+}
+const OWN_HANDLERS = ["onInput"];
+function isText(object) {
+	return object instanceof fabric.IText;
+}
+function attachMobileTextInput(canvas, options = {}) {
+	const patched = /* @__PURE__ */ new Set();
+	const attributes = {
+		inputmode: options.inputMode ?? "text",
+		enterkeyhint: options.enterKeyHint ?? "enter",
+		autocapitalize: options.autocapitalize ?? "sentences",
+		autocorrect: options.autocorrect === false ? "off" : "on",
+		spellcheck: String(options.spellcheck ?? false)
+	};
+	const patch = (object) => {
+		if (!isText(object) || patched.has(object)) return;
+		object.onInput = applyFromTextarea;
+		patched.add(object);
+	};
+	const unpatch = (object) => {
+		for (const name of OWN_HANDLERS) delete object[name];
+	};
+	canvas.getObjects().forEach(patch);
+	const editing = () => {
+		const active = canvas.getActiveObject();
+		return isText(active) && active.isEditing ? active : void 0;
+	};
+	const onAdded = ({ target }) => patch(target);
+	const onEditingEntered = ({ target }) => {
+		if (!isText(target)) return;
+		patch(target);
+		const textarea = target.hiddenTextarea;
+		if (!textarea) return;
+		for (const [name, value] of Object.entries(attributes)) textarea.setAttribute(name, value);
+		textarea.style.fontSize = "16px";
+	};
+	const onSelectionChange = () => {
+		const text = editing();
+		const textarea = text?.hiddenTextarea;
+		if (!text || !textarea || textarea.ownerDocument.activeElement !== textarea || composing(text)) return;
+		const selection = text.fromStringToGraphemeSelection(textarea.selectionStart, textarea.selectionEnd, textarea.value);
+		if (selection.selectionStart === text.selectionStart && selection.selectionEnd === text.selectionEnd) return;
+		text.selectionStart = selection.selectionStart;
+		text.selectionEnd = selection.selectionEnd;
+		text.cursorOffsetCache = {};
+		text.updateTextareaPosition();
+		canvas.clearContext(canvas.contextTop);
+		text.renderCursorOrSelection();
+	};
+	const onTouchEnd = () => {
+		const textarea = editing()?.hiddenTextarea;
+		if (textarea && textarea.ownerDocument.activeElement !== textarea) textarea.focus({ preventScroll: true });
+	};
+	let frame = 0;
+	const onViewportChange = () => {
+		if (frame) return;
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			const text = editing();
+			if (!text) return;
+			canvas.calcOffset();
+			text.updateTextareaPosition();
+		});
+	};
+	const element = canvas.upperCanvasEl;
+	const ownerDocument = element.ownerDocument;
+	const viewport = ownerDocument.defaultView?.visualViewport;
+	canvas.on("object:added", onAdded);
+	canvas.on("text:editing:entered", onEditingEntered);
+	ownerDocument.addEventListener("selectionchange", onSelectionChange);
+	element.addEventListener("touchend", onTouchEnd, { passive: true });
+	viewport?.addEventListener("resize", onViewportChange);
+	viewport?.addEventListener("scroll", onViewportChange);
+	const active = editing();
+	if (active) onEditingEntered({ target: active });
+	return { detach() {
+		canvas.off("object:added", onAdded);
+		canvas.off("text:editing:entered", onEditingEntered);
+		ownerDocument.removeEventListener("selectionchange", onSelectionChange);
+		element.removeEventListener("touchend", onTouchEnd);
+		viewport?.removeEventListener("resize", onViewportChange);
+		viewport?.removeEventListener("scroll", onViewportChange);
+		if (frame) cancelAnimationFrame(frame);
+		patched.forEach(unpatch);
+		patched.clear();
+	} };
+}
+//#endregion
+exports.attachMobileTextInput = attachMobileTextInput;
+exports.findTextEdit = findTextEdit;

package/dist/text/mobile-input.d.cts

@@ -0,0 +1,19 @@
+import { Canvas } from "fabric";
+//#region src/text/mobile-input.d.ts
+export interface MobileTextInputOptions {
+  inputMode?: string;
+  enterKeyHint?: string;
+  autocapitalize?: string;
+  autocorrect?: boolean;
+  spellcheck?: boolean;
+}
+export interface MobileTextInput {
+  detach(): void;
+}
+export declare function findTextEdit(previous: readonly string[], next: readonly string[], cursor: number): {
+  from: number;
+  oldTo: number;
+  newTo: number;
+} | undefined;
+export declare function attachMobileTextInput(canvas: Canvas, options?: MobileTextInputOptions): MobileTextInput;
+//#endregion

package/dist/text/mobile-input.d.ts

@@ -0,0 +1,19 @@
+import { Canvas } from "fabric";
+//#region src/text/mobile-input.d.ts
+export interface MobileTextInputOptions {
+  inputMode?: string;
+  enterKeyHint?: string;
+  autocapitalize?: string;
+  autocorrect?: boolean;
+  spellcheck?: boolean;
+}
+export interface MobileTextInput {
+  detach(): void;
+}
+export declare function findTextEdit(previous: readonly string[], next: readonly string[], cursor: number): {
+  from: number;
+  oldTo: number;
+  newTo: number;
+} | undefined;
+export declare function attachMobileTextInput(canvas: Canvas, options?: MobileTextInputOptions): MobileTextInput;
+//#endregion

package/dist/text/mobile-input.js

@@ -0,0 +1,145 @@
+import { replaceTextRange } from "../commands/text-edit.js";
+import { IText } from "fabric";
+//#region src/text/mobile-input.ts
+const composing = (text) => Boolean(text.inCompositionMode);
+function findTextEdit(previous, next, cursor) {
+	const shorter = Math.min(previous.length, next.length);
+	let sharedStart = 0;
+	while (sharedStart < shorter && previous[sharedStart] === next[sharedStart]) sharedStart += 1;
+	let sharedEnd = 0;
+	while (sharedEnd < shorter && previous[previous.length - 1 - sharedEnd] === next[next.length - 1 - sharedEnd]) sharedEnd += 1;
+	let from = sharedStart;
+	let end = sharedEnd;
+	if (sharedStart + sharedEnd > shorter) {
+		const grown = next.length - shorter;
+		from = Math.min(Math.max(cursor - grown, shorter - sharedEnd), sharedStart);
+		end = shorter - from;
+	}
+	const oldTo = previous.length - end;
+	const newTo = next.length - end;
+	if (from === oldTo && from === newTo) return void 0;
+	return {
+		from,
+		oldTo,
+		newTo
+	};
+}
+function anchorOf(text) {
+	if (!text.textAlign.startsWith("justify")) return text.textAlign.replace("justify-", "");
+	return text.direction === "rtl" ? "right" : "left";
+}
+function applyFromTextarea(event) {
+	const textarea = this.hiddenTextarea;
+	if (!textarea) return;
+	if (this.fromPaste) {
+		IText.prototype.onInput.call(this, event);
+		return;
+	}
+	event?.stopPropagation();
+	if (!this.isEditing) return;
+	const { value } = textarea;
+	const next = this.graphemeSplit(value);
+	const selection = this.fromStringToGraphemeSelection(textarea.selectionStart, textarea.selectionEnd, value);
+	const edit = findTextEdit(this._text, next, selection.selectionEnd);
+	if (edit) {
+		const anchored = typeof this.getPositionByOrigin === "function";
+		const anchor = anchorOf(this);
+		const position = anchored ? this.getPositionByOrigin(anchor, "top") : void 0;
+		replaceTextRange(this, edit.from, edit.oldTo, next.slice(edit.from, edit.newTo).join(""));
+		if (position) this.setPositionByOrigin(position, anchor, "top");
+		this.setCoords();
+	}
+	this.selectionStart = selection.selectionStart;
+	this.selectionEnd = selection.selectionEnd;
+	this.cursorOffsetCache = {};
+	if (!composing(this)) this.updateTextareaPosition();
+	this.canvas?.requestRenderAll();
+}
+const OWN_HANDLERS = ["onInput"];
+function isText(object) {
+	return object instanceof IText;
+}
+function attachMobileTextInput(canvas, options = {}) {
+	const patched = /* @__PURE__ */ new Set();
+	const attributes = {
+		inputmode: options.inputMode ?? "text",
+		enterkeyhint: options.enterKeyHint ?? "enter",
+		autocapitalize: options.autocapitalize ?? "sentences",
+		autocorrect: options.autocorrect === false ? "off" : "on",
+		spellcheck: String(options.spellcheck ?? false)
+	};
+	const patch = (object) => {
+		if (!isText(object) || patched.has(object)) return;
+		object.onInput = applyFromTextarea;
+		patched.add(object);
+	};
+	const unpatch = (object) => {
+		for (const name of OWN_HANDLERS) delete object[name];
+	};
+	canvas.getObjects().forEach(patch);
+	const editing = () => {
+		const active = canvas.getActiveObject();
+		return isText(active) && active.isEditing ? active : void 0;
+	};
+	const onAdded = ({ target }) => patch(target);
+	const onEditingEntered = ({ target }) => {
+		if (!isText(target)) return;
+		patch(target);
+		const textarea = target.hiddenTextarea;
+		if (!textarea) return;
+		for (const [name, value] of Object.entries(attributes)) textarea.setAttribute(name, value);
+		textarea.style.fontSize = "16px";
+	};
+	const onSelectionChange = () => {
+		const text = editing();
+		const textarea = text?.hiddenTextarea;
+		if (!text || !textarea || textarea.ownerDocument.activeElement !== textarea || composing(text)) return;
+		const selection = text.fromStringToGraphemeSelection(textarea.selectionStart, textarea.selectionEnd, textarea.value);
+		if (selection.selectionStart === text.selectionStart && selection.selectionEnd === text.selectionEnd) return;
+		text.selectionStart = selection.selectionStart;
+		text.selectionEnd = selection.selectionEnd;
+		text.cursorOffsetCache = {};
+		text.updateTextareaPosition();
+		canvas.clearContext(canvas.contextTop);
+		text.renderCursorOrSelection();
+	};
+	const onTouchEnd = () => {
+		const textarea = editing()?.hiddenTextarea;
+		if (textarea && textarea.ownerDocument.activeElement !== textarea) textarea.focus({ preventScroll: true });
+	};
+	let frame = 0;
+	const onViewportChange = () => {
+		if (frame) return;
+		frame = requestAnimationFrame(() => {
+			frame = 0;
+			const text = editing();
+			if (!text) return;
+			canvas.calcOffset();
+			text.updateTextareaPosition();
+		});
+	};
+	const element = canvas.upperCanvasEl;
+	const ownerDocument = element.ownerDocument;
+	const viewport = ownerDocument.defaultView?.visualViewport;
+	canvas.on("object:added", onAdded);
+	canvas.on("text:editing:entered", onEditingEntered);
+	ownerDocument.addEventListener("selectionchange", onSelectionChange);
+	element.addEventListener("touchend", onTouchEnd, { passive: true });
+	viewport?.addEventListener("resize", onViewportChange);
+	viewport?.addEventListener("scroll", onViewportChange);
+	const active = editing();
+	if (active) onEditingEntered({ target: active });
+	return { detach() {
+		canvas.off("object:added", onAdded);
+		canvas.off("text:editing:entered", onEditingEntered);
+		ownerDocument.removeEventListener("selectionchange", onSelectionChange);
+		element.removeEventListener("touchend", onTouchEnd);
+		viewport?.removeEventListener("resize", onViewportChange);
+		viewport?.removeEventListener("scroll", onViewportChange);
+		if (frame) cancelAnimationFrame(frame);
+		patched.forEach(unpatch);
+		patched.clear();
+	} };
+}
+//#endregion
+export { attachMobileTextInput, findTextEdit };

package/dist/text/register.cjs

@@ -0,0 +1,17 @@
+const require_shaping = require("./shaping.cjs");
+const require_bounded_textbox = require("./bounded-textbox.cjs");
+const require_vertical_text = require("./vertical-text.cjs");
+let fabric = require("fabric");
+//#region src/text/register.ts
+const textObjects = [
+	{ fabricClass: require_bounded_textbox.BoundedTextbox },
+	{ fabricClass: require_shaping.ShapedIText },
+	{ fabricClass: require_shaping.ShapedTextbox },
+	{ fabricClass: require_vertical_text.VerticalText }
+];
+function registerTextObjects() {
+	for (const { fabricClass } of textObjects) fabric.classRegistry.setClass(fabricClass);
+}
+//#endregion
+exports.registerTextObjects = registerTextObjects;
+exports.textObjects = textObjects;

package/dist/text/register.d.cts

@@ -0,0 +1,5 @@
+import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
+//#region src/text/register.d.ts
+export declare const textObjects: CustomObjectDefinition[];
+export declare function registerTextObjects(): void;
+//#endregion

package/dist/text/register.d.ts

@@ -0,0 +1,5 @@
+import { CustomObjectDefinition } from "../fabric/object-registry.js";
+//#region src/text/register.d.ts
+export declare const textObjects: CustomObjectDefinition[];
+export declare function registerTextObjects(): void;
+//#endregion

package/dist/text/register.js

@@ -0,0 +1,16 @@
+import { ShapedIText, ShapedTextbox } from "./shaping.js";
+import { BoundedTextbox } from "./bounded-textbox.js";
+import { VerticalText } from "./vertical-text.js";
+import { classRegistry } from "fabric";
+//#region src/text/register.ts
+const textObjects = [
+	{ fabricClass: BoundedTextbox },
+	{ fabricClass: ShapedIText },
+	{ fabricClass: ShapedTextbox },
+	{ fabricClass: VerticalText }
+];
+function registerTextObjects() {
+	for (const { fabricClass } of textObjects) classRegistry.setClass(fabricClass);
+}
+//#endregion
+export { registerTextObjects, textObjects };