@embedpdf/web 3.0.0-next.12 → 3.0.0-next.14

package/dist/index.cjs

@@ -1158,6 +1158,758 @@ function indexedDbByteStore(dbName, opts = {}) {
 	};
 }
 //#endregion
+//#region src/web-font.ts
+/**
+* Mount a registered font for the DOM: the engine lays text out with the
+* font's bytes, the browser needs the same face as a `@font-face` so the
+* live editor and the vector renderer show the glyphs the appearance stream
+* will bake. The family name is the font's KEY — the CSS family the
+* annotation plugin emits for a registered font (`cssFontFamily`) — so
+* mounting under the key is what makes the two agree.
+*
+* Returns the unmount. Idempotent per (document, key): a second mount of a
+* key already in the document's font set is a no-op that still returns an
+* unmount of its own (the face leaves when the LAST holder unmounts).
+*/
+async function mountWebFont(key, data, options = {}) {
+	const doc = options.document ?? document;
+	const fonts = doc.fonts;
+	if (!fonts || typeof FontFace === "undefined") return () => {};
+	const holders = holdersOf(doc);
+	const existing = holders.get(key);
+	if (existing) {
+		existing.count++;
+		return () => release(holders, key);
+	}
+	const buffer = data instanceof Uint8Array ? data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength) : data;
+	const face = new FontFace(key, buffer, {
+		weight: options.weight !== void 0 ? String(options.weight) : void 0,
+		style: options.style
+	});
+	holders.set(key, {
+		face,
+		doc,
+		count: 1
+	});
+	try {
+		await face.load();
+		fonts.add(face);
+	} catch {
+		holders.delete(key);
+		return () => {};
+	}
+	notifyFontChange(doc);
+	return () => release(holders, key);
+}
+const HOLDERS = /* @__PURE__ */ new WeakMap();
+const LISTENERS = /* @__PURE__ */ new WeakMap();
+/** Internal: refresh editor styles for CSS loads and explicitly mounted faces.
+* Adding an already loaded FontFace does not trigger `loadingdone`. */
+function observeWebFonts(doc, onChange) {
+	let listeners = LISTENERS.get(doc);
+	if (!listeners) {
+		listeners = /* @__PURE__ */ new Set();
+		LISTENERS.set(doc, listeners);
+	}
+	listeners.add(onChange);
+	doc.fonts?.addEventListener("loadingdone", onChange);
+	doc.fonts?.addEventListener("loadingerror", onChange);
+	return () => {
+		listeners.delete(onChange);
+		doc.fonts?.removeEventListener("loadingdone", onChange);
+		doc.fonts?.removeEventListener("loadingerror", onChange);
+	};
+}
+function notifyFontChange(doc) {
+	for (const listener of LISTENERS.get(doc) ?? []) listener();
+}
+function holdersOf(doc) {
+	let map = HOLDERS.get(doc);
+	if (!map) {
+		map = /* @__PURE__ */ new Map();
+		HOLDERS.set(doc, map);
+	}
+	return map;
+}
+function release(holders, key) {
+	const holder = holders.get(key);
+	if (!holder) return;
+	holder.count--;
+	if (holder.count > 0) return;
+	holders.delete(key);
+	try {
+		holder.doc.fonts.delete(holder.face);
+	} catch {}
+	notifyFontChange(holder.doc);
+}
+//#endregion
+//#region src/web-font-metrics.ts
+/** Acrobat's leading: a constant share of the size, never the font's lineGap. */
+const ACROBAT_LEADING = .2;
+/** The engine's metrics for the standard families (Acrobat's substitutes'
+*  `hhea`), keyed the engine's way: no case, spaces, hyphens, quotes. */
+const STANDARD_METRICS = {
+	helvetica: {
+		ascent: .83,
+		descent: .17
+	},
+	arial: {
+		ascent: .83,
+		descent: .17
+	},
+	arialmt: {
+		ascent: .83,
+		descent: .17
+	},
+	times: {
+		ascent: .784,
+		descent: .216
+	},
+	timesroman: {
+		ascent: .784,
+		descent: .216
+	},
+	timesnewroman: {
+		ascent: .784,
+		descent: .216
+	},
+	courier: {
+		ascent: .627,
+		descent: .373
+	},
+	couriernew: {
+		ascent: .627,
+		descent: .373
+	}
+};
+/** What the browser resolves when nothing can be measured: a one-em content
+*  area, the ascent of the engine's Helvetica. */
+const FALLBACK_METRICS = {
+	ascent: .83,
+	descent: .17
+};
+function familyKey(family) {
+	return family.toLowerCase().replace(/[\s\-_'"]/g, "");
+}
+/** The first family of a CSS family list, unquoted. */
+function firstFamily$1(cssFamily) {
+	return (cssFamily.split(",")[0] ?? "").trim().replace(/^["']|["']$/g, "");
+}
+const CONTEXTS = /* @__PURE__ */ new WeakMap();
+/**
+* The browser's own ascent and descent for a CSS family list, per em,
+* measured through a canvas. `null` when the platform cannot measure
+* (no canvas, no `fontBoundingBoxAscent`). Reads the currently resolved face
+* on every call, including while the intended font is loading.
+*/
+function webFontMetrics(cssFamily, doc = typeof document === "undefined" ? void 0 : document, face = {}) {
+	if (!doc) return null;
+	let ctx = CONTEXTS.get(doc);
+	if (!ctx) {
+		const context = doc.createElement("canvas").getContext("2d");
+		if (!context) return null;
+		ctx = context;
+		CONTEXTS.set(doc, ctx);
+	}
+	ctx.font = `${face.style ?? "normal"} ${face.weight ?? 400} 100px ${cssFamily}`;
+	const m = ctx.measureText("Hg");
+	if (typeof m.fontBoundingBoxAscent !== "number" || typeof m.fontBoundingBoxDescent !== "number") return null;
+	return {
+		ascent: m.fontBoundingBoxAscent / 100,
+		descent: m.fontBoundingBoxDescent / 100
+	};
+}
+/**
+* The standard families' engine metrics, or a browser approximation for
+* other families. `measure` is injectable for tests and resolved face styles.
+*/
+function lineModelFor(cssFamily, measure = webFontMetrics) {
+	const metrics = STANDARD_METRICS[familyKey(firstFamily$1(cssFamily))] ?? measure(cssFamily) ?? FALLBACK_METRICS;
+	return {
+		ascent: metrics.ascent,
+		descent: metrics.descent,
+		lineHeight: Math.round((metrics.ascent + metrics.descent + ACROBAT_LEADING) * 1e3) / 1e3
+	};
+}
+/**
+* Screen px to raise a box's first line by so its baseline matches the
+* engine's: CSS puts half the leading above the glyphs and draws them with
+* the browser's face, whose ascent differs from the engine's for the
+* standard families. `fontSize` in screen px.
+*/
+function firstLineShiftFor(cssFamily, fontSize, measure = webFontMetrics) {
+	const model = lineModelFor(cssFamily, measure);
+	const web = measure(cssFamily) ?? {
+		ascent: model.ascent,
+		descent: model.descent
+	};
+	const cssBaseline = (model.lineHeight - (web.ascent + web.descent)) / 2 + web.ascent;
+	return Math.round((cssBaseline - model.ascent) * fontSize * 100) / 100;
+}
+//#endregion
+//#region src/rich-text-editor.ts
+/**
+* Rich text editor binding — the ONE contentEditable mechanics module for a
+* FreeText annotation, shared by every framework adapter (React, Angular,
+* Vue, Svelte…) so editing can never drift between them:
+*
+*   • render a rich document (runs of style deltas over a body) into the
+*     element as paragraphs of inline-styled spans
+*   • serialise the element back into runs on `input` — inline styles only,
+*     never computed styles, so the editor cannot invent properties
+*   • map the DOM selection to flat offsets over the plain projection (and
+*     back), and keep the caret through a model-driven re-render
+*   • hold re-renders during IME composition, paste as plain text, forward
+*     Cmd/Ctrl+B/I/U as commands
+*
+* The browser owns typing; this module only translates. The POLICY — what a
+* command does to the document, when to commit, what a family maps to —
+* belongs to the host (the annotation plugin), reached through the
+* structural {@link RichTextEditorHost}: @embedpdf/web imports no plugin,
+* per the layering law. The return shape is a Svelte action; the other
+* frameworks call the same two functions from their effects.
+*
+* Offsets: positions in the plain projection — paragraphs joined by `\r`,
+* runs concatenated, a hard break inside a run is a `\r` too. The same
+* arithmetic the core's run algebra uses.
+*
+* Known limits (by design, recorded in the plan): the browser's native undo
+* stack does not span a host-driven restyle; DOM line wrapping approximates
+* the engine's layout, the appearance stream is the truth.
+*/
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+function isBlock(node) {
+	if (node.nodeType !== ELEMENT_NODE) return false;
+	const name = node.nodeName.toUpperCase();
+	return name === "DIV" || name === "P";
+}
+function isBreak(node) {
+	return node.nodeType === ELEMENT_NODE && node.nodeName.toUpperCase() === "BR";
+}
+function lastChild(node) {
+	return node.childNodes[node.childNodes.length - 1];
+}
+/**
+* A `<br>` that nothing follows inside its block (or the root) is the
+* browser's caret placeholder, not content — even wrapped in a span, as
+* Chrome does for a new styled line. Every other break is a hard line break.
+*/
+function isTrailingBreak(node, root) {
+	for (let n = node;;) {
+		const parent = n.parentNode;
+		if (!parent) return false;
+		if (lastChild(parent) !== n) return false;
+		if (parent === root || isBlock(parent)) return true;
+		n = parent;
+	}
+}
+function contains(root, node) {
+	for (let n = node; n; n = n.parentNode) if (n === root) return true;
+	return false;
+}
+const HEX = /^#([0-9a-f]{6})$/i;
+const RGB = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i;
+function cssColorToHex(css) {
+	const trimmed = css.trim();
+	if (HEX.test(trimmed)) return trimmed.toUpperCase();
+	const m = RGB.exec(trimmed);
+	if (!m) return void 0;
+	const hex = (n) => Math.max(0, Math.min(255, Number(n))).toString(16).padStart(2, "0");
+	return `#${hex(m[1])}${hex(m[2])}${hex(m[3])}`.toUpperCase();
+}
+function firstFamily(css) {
+	const first = css.split(",")[0]?.trim().replace(/^["']|["']$/g, "");
+	return first ? first : void 0;
+}
+function round2(n) {
+	return Math.round(n * 100) / 100;
+}
+/** The inline style declarations a span carries, as a style delta. Only what
+*  the span itself sets: an unset property means "inherit", never a value. */
+function styleDeltaOf(style, scale) {
+	const delta = {};
+	if (!style) return delta;
+	const weight = style.fontWeight;
+	if (weight) {
+		const parsed = weight === "bold" ? 700 : weight === "normal" ? 400 : Number(weight);
+		if (Number.isFinite(parsed) && parsed > 0) delta.weight = parsed;
+	}
+	if (style.fontStyle) delta.italic = style.fontStyle === "italic" || style.fontStyle === "oblique";
+	const decoration = style.textDecorationLine || style.textDecoration;
+	if (decoration) delta.decoration = decoration.split(/\s+/).filter((p) => p === "underline" || p === "line-through");
+	if (style.color) {
+		const hex = cssColorToHex(style.color);
+		if (hex) delta.color = hex;
+	}
+	const script = style.verticalAlign;
+	if (script === "sub" || script === "super") delta.script = script;
+	if (style.fontSize && !delta.script) {
+		const px = parseFloat(style.fontSize);
+		if (Number.isFinite(px) && scale > 0) delta.size = round2(px / scale);
+	}
+	if (style.fontFamily) {
+		const family = firstFamily(style.fontFamily);
+		if (family) delta.family = family;
+	}
+	if (style.letterSpacing) {
+		const px = parseFloat(style.letterSpacing);
+		if (Number.isFinite(px) && scale > 0) delta.letterSpacing = round2(px / scale);
+	}
+	return delta;
+}
+function applyStyleDelta(style, delta, scale, cssFontFamily) {
+	if (delta.weight !== void 0) style.fontWeight = String(delta.weight);
+	if (delta.italic !== void 0) style.fontStyle = delta.italic ? "italic" : "normal";
+	if (delta.decoration !== void 0) {
+		const lines = delta.decoration.map((d) => d === "word" ? "underline" : d);
+		style.textDecoration = lines.length ? [...new Set(lines)].join(" ") : "none";
+	}
+	if (delta.color !== void 0) style.color = delta.color;
+	if (delta.script !== void 0 && delta.script !== "normal") {
+		style.verticalAlign = delta.script;
+		style.fontSize = "0.66em";
+	} else if (delta.size !== void 0) style.fontSize = `${delta.size * scale}px`;
+	if (delta.family !== void 0) style.fontFamily = cssFontFamily(delta.family);
+	if (delta.letterSpacing !== void 0) style.letterSpacing = `${delta.letterSpacing * scale}px`;
+}
+function mergeDelta(base, over) {
+	return {
+		...base,
+		...over
+	};
+}
+function sameDelta(a, b) {
+	const da = a ?? {};
+	const db = b ?? {};
+	const keys = /* @__PURE__ */ new Set([...Object.keys(da), ...Object.keys(db)]);
+	for (const key of keys) {
+		const va = da[key];
+		const vb = db[key];
+		if (Array.isArray(va) || Array.isArray(vb)) {
+			if ([...va ?? []].sort().join(" ") !== [...vb ?? []].sort().join(" ")) return false;
+		} else if (va !== vb) return false;
+	}
+	return true;
+}
+/** Render a document into the element: one block per paragraph, one span per
+*  styled run, `<br>` for a hard break, a placeholder `<br>` at the end of a
+*  block that is empty or ends on a break so the caret has a home. */
+function renderRichText(root, doc, options) {
+	const factory = root.ownerDocument;
+	if (!factory) return;
+	const blocks = [];
+	const paragraphs = doc.paragraphs.length ? doc.paragraphs : [{ runs: [{ text: "" }] }];
+	for (const paragraph of paragraphs) {
+		const block = factory.createElement("div");
+		if (paragraph.align) block.style.textAlign = paragraph.align;
+		if (paragraph.dir) block.style.direction = paragraph.dir;
+		let endsWithBreak = false;
+		for (const run of paragraph.runs) {
+			let container = block;
+			if (run.style && Object.keys(run.style).length) {
+				container = factory.createElement("span");
+				applyStyleDelta(container.style, run.style, options.scale, options.cssFontFamily);
+				block.appendChild(container);
+			}
+			const pieces = run.text.split(/\r\n|\r|\n/);
+			for (let i = 0; i < pieces.length; i++) {
+				if (i > 0) {
+					container.appendChild(factory.createElement("br"));
+					endsWithBreak = true;
+				}
+				const piece = pieces[i];
+				if (!piece) continue;
+				container.appendChild(factory.createTextNode(piece));
+				endsWithBreak = false;
+			}
+		}
+		if (endsWithBreak || !lastChild(block)) block.appendChild(factory.createElement("br"));
+		blocks.push(block);
+	}
+	if (root.replaceChildren) root.replaceChildren(...blocks);
+	else {
+		while (root.firstChild && root.removeChild) root.removeChild(root.firstChild);
+		for (const block of blocks) root.appendChild(block);
+	}
+}
+/** Keep the baseline adjustment on the first block after Enter clones it. */
+function applyFirstLineShift(root, shift) {
+	for (let i = 0; i < root.childNodes.length; i++) {
+		const node = root.childNodes[i];
+		if (!node.style) continue;
+		node.style.marginTop = i === 0 && shift ? `${-shift}px` : "";
+	}
+}
+function pushText(walk, text, style) {
+	if (!walk.current) {
+		walk.current = { runs: [] };
+		walk.paragraphs.push(walk.current);
+	}
+	const runs = walk.current.runs;
+	const delta = Object.keys(style).length ? style : void 0;
+	const last = runs[runs.length - 1];
+	if (last && sameDelta(last.style, delta)) last.text += text;
+	else runs.push(delta ? {
+		text,
+		style: delta
+	} : { text });
+}
+function walkNode(node, inherited, walk) {
+	if (node.nodeType === TEXT_NODE) {
+		const text = (node.nodeValue ?? "").replace(/\r\n|\n/g, "\r");
+		if (text) pushText(walk, text, inherited);
+		return;
+	}
+	if (node.nodeType !== ELEMENT_NODE) return;
+	if (isBreak(node)) {
+		if (!isTrailingBreak(node, walk.root)) pushText(walk, "\r", inherited);
+		return;
+	}
+	const name = node.nodeName.toUpperCase();
+	let style = inherited;
+	if (name === "B" || name === "STRONG") style = mergeDelta(style, { weight: 700 });
+	if (name === "I" || name === "EM") style = mergeDelta(style, { italic: true });
+	if (name === "U") style = mergeDelta(style, { decoration: ["underline"] });
+	if (name === "SUB") style = mergeDelta(style, { script: "sub" });
+	if (name === "SUP") style = mergeDelta(style, { script: "super" });
+	style = mergeDelta(style, styleDeltaOf(node.style, walk.scale));
+	if (isBlock(node)) {
+		const paragraph = { runs: [] };
+		const align = node.style?.textAlign;
+		if (align === "left" || align === "center" || align === "right" || align === "justify") paragraph.align = align;
+		if (node.style?.direction === "rtl") paragraph.dir = "rtl";
+		walk.paragraphs.push(paragraph);
+		walk.current = paragraph;
+		for (let i = 0; i < node.childNodes.length; i++) walkNode(node.childNodes[i], style, walk);
+		walk.current = null;
+		return;
+	}
+	for (let i = 0; i < node.childNodes.length; i++) walkNode(node.childNodes[i], style, walk);
+}
+/** The element's content as a document. Inline styles (and the semantic
+*  b/i/u/sub/sup tags a browser may insert) only. */
+function serializeRichText(root, scale) {
+	const walk = {
+		root,
+		scale,
+		paragraphs: [],
+		current: null
+	};
+	for (let i = 0; i < root.childNodes.length; i++) walkNode(root.childNodes[i], {}, walk);
+	for (const paragraph of walk.paragraphs) if (paragraph.runs.length === 0) paragraph.runs.push({ text: "" });
+	if (walk.paragraphs.length === 0) walk.paragraphs.push({ runs: [{ text: "" }] });
+	return { paragraphs: walk.paragraphs };
+}
+/** The element in document order, each node with its flat offset — counted
+*  like the projection: text length, 1 per hard break, 1 between blocks. */
+function collectOffsets(root) {
+	const events = [];
+	let offset = 0;
+	let blocks = 0;
+	const visit = (node) => {
+		if (node.nodeType === TEXT_NODE) {
+			const length = (node.nodeValue ?? "").length;
+			events.push({
+				kind: "text",
+				node,
+				at: offset,
+				length
+			});
+			offset += length;
+			return;
+		}
+		if (node.nodeType !== ELEMENT_NODE) return;
+		if (isBreak(node)) {
+			if (isTrailingBreak(node, root)) return;
+			events.push({
+				kind: "break",
+				node,
+				at: offset,
+				length: 1
+			});
+			offset += 1;
+			return;
+		}
+		if (isBlock(node)) {
+			if (blocks > 0) offset += 1;
+			blocks++;
+		}
+		events.push({
+			kind: "enter",
+			node,
+			at: offset,
+			length: 0
+		});
+		for (let i = 0; i < node.childNodes.length; i++) visit(node.childNodes[i]);
+		events.push({
+			kind: "exit",
+			node,
+			at: offset,
+			length: 0
+		});
+	};
+	for (let i = 0; i < root.childNodes.length; i++) visit(root.childNodes[i]);
+	return events;
+}
+/** The flat offset of a DOM position (a node and an offset within it). */
+function offsetOfPosition(root, position) {
+	if (!contains(root, position.node)) return 0;
+	const events = collectOffsets(root);
+	if (position.node.nodeType === TEXT_NODE) {
+		const event = events.find((e) => e.kind === "text" && e.node === position.node);
+		return event ? event.at + Math.min(position.offset, event.length) : 0;
+	}
+	if (isBreak(position.node)) {
+		const event = events.find((e) => e.kind === "break" && e.node === position.node);
+		if (event) return event.at + (position.offset > 0 ? 1 : 0);
+		const exit = events.find((e) => e.kind === "exit" && e.node === position.node.parentNode);
+		return exit ? exit.at : 0;
+	}
+	const child = position.node.childNodes[position.offset];
+	if (child) {
+		const event = events.find((e) => e.node === child || e.kind !== "exit" && contains(child, e.node));
+		if (event) return event.at;
+	}
+	if (position.node === root) {
+		const last = events[events.length - 1];
+		return last ? last.at + last.length : 0;
+	}
+	const exit = events.find((e) => e.kind === "exit" && e.node === position.node);
+	return exit ? exit.at : 0;
+}
+function indexIn(parent, node) {
+	for (let i = 0; i < parent.childNodes.length; i++) if (parent.childNodes[i] === node) return i;
+	return 0;
+}
+/** The DOM position of a flat offset: inside a text node when one covers it,
+*  else the empty block / the slot after a hard break the offset names. */
+function positionOfOffset(root, offset) {
+	const events = collectOffsets(root);
+	const text = events.find((e) => e.kind === "text" && offset >= e.at && offset <= e.at + e.length);
+	if (text) return {
+		node: text.node,
+		offset: offset - text.at
+	};
+	const block = events.find((e) => e.kind === "enter" && isBlock(e.node) && e.at === offset);
+	if (block) return {
+		node: block.node,
+		offset: 0
+	};
+	const after = events.find((e) => e.kind === "break" && e.at + 1 === offset);
+	if (after && after.node.parentNode) return {
+		node: after.node.parentNode,
+		offset: indexIn(after.node.parentNode, after.node) + 1
+	};
+	for (let i = events.length - 1; i >= 0; i--) {
+		const e = events[i];
+		if (e.kind === "text") return {
+			node: e.node,
+			offset: e.length
+		};
+	}
+	const first = root.childNodes[0];
+	return first ? {
+		node: first,
+		offset: 0
+	} : null;
+}
+/** The selection's range as the shadow tree sees it: the standard
+*  `getComposedRanges` (options form, then the earlier positional form). */
+function composedRange(sel, shadowRoot) {
+	const s = sel;
+	if (typeof s.getComposedRanges !== "function") return null;
+	for (const args of [[{ shadowRoots: [shadowRoot] }], [shadowRoot]]) try {
+		const ranges = s.getComposedRanges(...args);
+		if (ranges.length) return ranges[0];
+	} catch {}
+	return null;
+}
+function documentsEqual(a, b) {
+	if (a.paragraphs.length !== b.paragraphs.length) return false;
+	for (let i = 0; i < a.paragraphs.length; i++) {
+		const pa = a.paragraphs[i];
+		const pb = b.paragraphs[i];
+		if ((pa.align ?? "left") !== (pb.align ?? "left") || (pa.dir ?? "ltr") !== (pb.dir ?? "ltr")) return false;
+		if (pa.runs.length !== pb.runs.length) return false;
+		for (let j = 0; j < pa.runs.length; j++) {
+			const ra = pa.runs[j];
+			const rb = pb.runs[j];
+			if (ra.text !== rb.text || !sameDelta(ra.style, rb.style)) return false;
+		}
+	}
+	return true;
+}
+/** Bind one contentEditable element. Returns the Svelte-action-shaped handle. */
+function attachRichTextEditor(el, host, initial) {
+	const root = el;
+	const doc = el.ownerDocument;
+	const rootNode = el.getRootNode();
+	const activeElement = () => rootNode.activeElement;
+	const liveRange = () => {
+		const sel = doc.getSelection();
+		if (!sel) return null;
+		if (rootNode !== doc) {
+			const composed = composedRange(sel, rootNode);
+			if (composed) return composed;
+			const shadowSel = rootNode.getSelection?.();
+			if (shadowSel && shadowSel.rangeCount > 0) return shadowSel.getRangeAt(0);
+		}
+		return sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+	};
+	let props = initial;
+	let rendered = null;
+	let composing = false;
+	const currentSelection = () => {
+		const range = liveRange();
+		if (!range) return null;
+		const anchor = range.startContainer;
+		const focus = range.endContainer;
+		if (!contains(root, anchor) || !contains(root, focus)) return null;
+		const start = offsetOfPosition(root, {
+			node: anchor,
+			offset: range.startOffset
+		});
+		const end = offsetOfPosition(root, {
+			node: focus,
+			offset: range.endOffset
+		});
+		return {
+			start: Math.min(start, end),
+			end: Math.max(start, end)
+		};
+	};
+	const select = (range) => {
+		const sel = doc.getSelection();
+		if (!sel) return;
+		const start = positionOfOffset(root, range.start);
+		const end = positionOfOffset(root, range.end);
+		if (!start || !end) return;
+		if (typeof sel.setBaseAndExtent === "function") {
+			sel.setBaseAndExtent(start.node, start.offset, end.node, end.offset);
+			return;
+		}
+		const domRange = doc.createRange();
+		domRange.setStart(start.node, start.offset);
+		domRange.setEnd(end.node, end.offset);
+		sel.removeAllRanges();
+		sel.addRange(domRange);
+	};
+	const refreshLineModel = () => {
+		const bodyStyle = doc.defaultView?.getComputedStyle(el) ?? el.style;
+		const body = {
+			family: bodyStyle.fontFamily || "Helvetica",
+			weight: bodyStyle.fontWeight || "400",
+			style: bodyStyle.fontStyle || "normal"
+		};
+		const size = parseFloat(bodyStyle.fontSize || "16") || 16;
+		const measured = /* @__PURE__ */ new Map();
+		const measureFor = (face) => (family) => {
+			const key = JSON.stringify([
+				family,
+				face.weight,
+				face.style
+			]);
+			if (!measured.has(key)) measured.set(key, webFontMetrics(family, doc, face));
+			return measured.get(key);
+		};
+		const runs = Array.from(el.querySelectorAll("span, b, strong, i, em")).map((node) => {
+			const style = doc.defaultView?.getComputedStyle(node) ?? node.style;
+			const face = {
+				family: style.fontFamily || body.family,
+				weight: style.fontWeight || body.weight,
+				style: style.fontStyle || body.style
+			};
+			return {
+				node,
+				lineHeight: lineModelFor(face.family, measureFor(face)).lineHeight
+			};
+		});
+		const measure = measureFor(body);
+		const lineHeight = lineModelFor(body.family, measure).lineHeight;
+		const shift = firstLineShiftFor(body.family, size, measure);
+		el.style.lineHeight = String(lineHeight);
+		for (const run of runs) run.node.style.lineHeight = String(run.lineHeight);
+		applyFirstLineShift(root, shift);
+	};
+	const render = (document, keepSelection) => {
+		const selection = keepSelection ? currentSelection() : null;
+		renderRichText(root, document, {
+			scale: props.scale,
+			cssFontFamily: host.cssFontFamily
+		});
+		refreshLineModel();
+		rendered = document;
+		if (selection) select(selection);
+	};
+	const serialiseAndReport = () => {
+		refreshLineModel();
+		const document = serializeRichText(root, props.scale);
+		rendered = document;
+		host.onInput(document);
+	};
+	const onInput = () => {
+		if (!composing) serialiseAndReport();
+	};
+	const onCompositionStart = () => {
+		composing = true;
+	};
+	const onCompositionEnd = () => {
+		composing = false;
+		serialiseAndReport();
+	};
+	const onKeyDown = (e) => {
+		if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+		const key = e.key.toLowerCase();
+		const command = key === "b" ? "bold" : key === "i" ? "italic" : key === "u" ? "underline" : null;
+		if (!command) return;
+		e.preventDefault();
+		host.onCommand(command);
+	};
+	const onPaste = (e) => {
+		e.preventDefault();
+		const text = e.clipboardData?.getData("text/plain") ?? "";
+		doc.execCommand("insertText", false, text);
+	};
+	const onSelectionChange = () => {
+		if (activeElement() !== el) return;
+		host.onSelectionChange(currentSelection());
+	};
+	el.addEventListener("input", onInput);
+	el.addEventListener("compositionstart", onCompositionStart);
+	el.addEventListener("compositionend", onCompositionEnd);
+	el.addEventListener("keydown", onKeyDown);
+	el.addEventListener("paste", onPaste);
+	doc.addEventListener("selectionchange", onSelectionChange);
+	render(initial.document, false);
+	const stopObservingFonts = observeWebFonts(doc, refreshLineModel);
+	return {
+		update(next) {
+			const scaleChanged = next.scale !== props.scale;
+			props = next;
+			if (composing) return;
+			if (!rendered || scaleChanged || !documentsEqual(next.document, rendered)) {
+				render(next.document, activeElement() === el);
+				return;
+			}
+			refreshLineModel();
+		},
+		selection: currentSelection,
+		select,
+		detach() {
+			stopObservingFonts();
+			el.removeEventListener("input", onInput);
+			el.removeEventListener("compositionstart", onCompositionStart);
+			el.removeEventListener("compositionend", onCompositionEnd);
+			el.removeEventListener("keydown", onKeyDown);
+			el.removeEventListener("paste", onPaste);
+			doc.removeEventListener("selectionchange", onSelectionChange);
+		}
+	};
+}
+//#endregion
+exports.applyFirstLineShift = applyFirstLineShift;
+exports.attachRichTextEditor = attachRichTextEditor;
 exports.attachSelectionHandle = attachSelectionHandle;
 exports.bindPaintedImage = bindPaintedImage;
 exports.computeReleaseVelocity = computeReleaseVelocity;
@@ -1165,16 +1917,25 @@ exports.copySelection = copySelection;
 exports.createDefaultActionsUiAdapter = createDefaultActionsUiAdapter;
 exports.createStageGestureController = createStageGestureController;
 exports.createStageSurface = createStageSurface;
+exports.firstLineShiftFor = firstLineShiftFor;
 exports.indexedDbByteStore = indexedDbByteStore;
+exports.lineModelFor = lineModelFor;
+exports.mountWebFont = mountWebFont;
 exports.observeClientGeometry = observeClientGeometry;
+exports.offsetOfPosition = offsetOfPosition;
 exports.pickFile = pickFile;
 exports.pickImageFile = pickImageFile;
 exports.positionAnchoredRect = positionAnchoredRect;
+exports.positionOfOffset = positionOfOffset;
 exports.projectAnchoredTarget = projectAnchoredTarget;
+exports.renderRichText = renderRichText;
 exports.sanitizeExternalUri = sanitizeExternalUri;
 exports.saveFile = saveFile;
+exports.serializeRichText = serializeRichText;
+exports.styleDeltaOf = styleDeltaOf;
 exports.svgCursor = svgCursor;
 exports.vibrationFeedback = vibrationFeedback;
+exports.webFontMetrics = webFontMetrics;
 exports.wheelZoomFactor = wheelZoomFactor;
 exports.wireSelectionClipboard = wireSelectionClipboard;
 exports.wkFeedback = wkFeedback;