@weasel-js/core 1.8.1 → 1.9.0

package/dist/features/text/useTextEdit.js

@@ -3,12 +3,12 @@ import { SMALL_CAPS_SCALE_PROPERTY as t, appendOverlayText as n, charOffsetToDom
 import { applyStyleToRange as c, patchRangeStyle as l, runsCarryStyling as u, styleAtRange as d, supersededKey as f } from "./runs/rangeStyle.js";
 import { nodeHasFlag as p, setFlagOverRange as m, unboldPatch as h } from "./runs/flagRange.js";
 import { rangeWeight as g } from "./runs/effectiveRangeStyle.js";
-import { cssFontFamily as _, cssFontFamilyLoading as v } from "@weasel-js/font";
-import { fontString as y, layoutTextPose as b, numericWeight as x, resolveAlign as S, resolveTextStyle as C, runsToPlainText as w, scriptMetricsFor as T, smallCapsScaleFor as E, verticalAlignOffset as D } from "@weasel-js/text";
-import { useCallback as O, useEffect as k, useRef as A, useState as j } from "react";
-import { useLatest as M } from "@weasel-js/react";
+import { cssFontFamily as _, cssFontFamilyLoading as v, isCanvasFont as y } from "@weasel-js/font";
+import { fontString as b, layoutTextPose as x, numericWeight as S, resolveAlign as C, resolveTextStyle as w, runsToPlainText as T, scriptMetricsFor as E, smallCapsScaleFor as D, verticalAlignOffset as O } from "@weasel-js/text";
+import { useCallback as k, useEffect as A, useRef as j, useState as M } from "react";
+import { useLatest as N } from "@weasel-js/react";
 //#region src/features/text/useTextEdit.ts
-var N = [
+var P = [
 	{
 		key: "b",
 		shift: !1,
@@ -39,21 +39,21 @@ var N = [
 		shift: !0,
 		toggle: "sub"
 	}
-], P = {
+], F = {
 	"+": "=",
 	_: "-"
 };
 function ee(e) {
 	if (!e.metaKey && !e.ctrlKey) return null;
-	let t = e.key.toLowerCase(), n = P[t] ?? t;
-	return N.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
+	let t = e.key.toLowerCase(), n = F[t] ?? t;
+	return P.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
 }
-function F(e, t, n) {
+function I(e, t, n) {
 	if (t === "super" || t === "sub") return { script: e.script === t ? void 0 : t };
 	let r = t === "bold" ? g(e, n).bold === !0 : e[t] === !0 || p(n, t);
 	return { [t]: !r };
 }
-function I(e, t) {
+function L(e, t) {
 	return t > 0 ? d(e, t - 1, t) : d(e, 0, 1);
 }
 function te(e, t, n) {
@@ -74,7 +74,7 @@ function te(e, t, n) {
 	}
 	return a || r.push(n), c(r, 0, 0, {});
 }
-function L(e, t) {
+function R(e, t) {
 	let n = document.activeElement;
 	if (n === e || e.contains(n) || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLElement && n.isContentEditable || n instanceof Element && n.closest("[role=\"dialog\"]") !== null) return;
 	e.focus();
@@ -97,14 +97,14 @@ function ne(e, t, n) {
 	let s = document.createRange();
 	s.setStartAfter(a), s.collapse(!0), o.removeAllRanges(), o.addRange(s);
 }
-var R = Object.freeze({});
+var z = Object.freeze({});
 function re(e, t) {
 	let n = { ...e }, r = f(t);
 	r !== void 0 && delete n[r];
 	for (let [e, r] of Object.entries(t)) r === void 0 || r === !1 ? delete n[e] : n[e] = r;
 	return n;
 }
-function z(e) {
+function B(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return null;
 	let n = t.getRangeAt(0);
@@ -118,7 +118,7 @@ function z(e) {
 		end: r
 	};
 }
-function B(e, t, n, i, a) {
+function V(e, t, n, i, a) {
 	let o = document.activeElement, c = o !== e && !e.contains(o) && (o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLElement && o.isContentEditable);
 	if (s(t, e, a), c) return;
 	let l = r(e, n), u = r(e, i), d = window.getSelection();
@@ -138,43 +138,43 @@ function ie(e) {
 function ae(e, t) {
 	return e === null || t === null ? e === t : e.start === t.start && e.end === t.end;
 }
-var V = 100;
-function H(t) {
-	let i = M(t), [f, g] = j(null), _ = M(f), v = A(null), y = A(C(void 0)), b = A(() => {}), x = e(() => {
+var H = 100;
+function U(t) {
+	let i = N(t), [f, g] = M(null), _ = N(f), v = j(null), y = j(w(void 0)), b = j(() => {}), x = e(() => {
 		b.current();
-	}), S = A("all"), [T, E] = j(null), [D, N] = j(null), [P, H] = j(R), U = A(R), W = A(null), G = O((e, t) => {
+	}), S = j("all"), [C, E] = M(null), [D, O] = M(null), [P, F] = M(z), U = j(z), W = j(null), G = k((e, t) => {
 		let n = Object.keys(e).length === 0;
-		U.current = n ? R : e, W.current = n ? null : t, H(U.current);
-	}, []), K = O(() => {
-		W.current !== null && (U.current = R, W.current = null, H(R));
-	}, []), q = A(null), J = O((e, t) => {
+		U.current = n ? z : e, W.current = n ? null : t, F(U.current);
+	}, []), K = k(() => {
+		W.current !== null && (U.current = z, W.current = null, F(z));
+	}, []), q = j(null), J = k((e, t) => {
 		let n = t.start === t.end;
 		W.current !== null && !(n && t.start === W.current) && K(), q.current = t, E((e) => ae(e, t) ? e : t);
 		let r = a(e);
-		N(n ? I(r, t.start) : d(r, t.start, t.end));
-	}, [K]), Y = O(() => {
+		O(n ? L(r, t.start) : d(r, t.start, t.end));
+	}, [K]), Y = k(() => {
 		let e = v.current;
 		if (!e) return;
-		let t = z(e);
+		let t = B(e);
 		t !== null && J(e, t);
-	}, [J]), pe = O(() => {
-		q.current = null, E(null), N(null), K();
-	}, [K]), X = O(() => {
+	}, [J]), pe = k(() => {
+		q.current = null, E(null), O(null), K();
+	}, [K]), X = k(() => {
 		g(null);
-	}, []), Z = O(() => {
+	}, []), Z = k(() => {
 		let e = f, t = v.current;
 		if (e == null || !t) {
 			g(null);
 			return;
 		}
 		let n = i.current.getRuns?.(e), r = i.current.setRuns, o = ie(a(t)), s = n != null && n.length > 0;
-		i.current.setText(e, w(o)), r && (s || u(o)) && r(e, o), g(null);
-	}, [f, i]), me = O((e, t) => {
+		i.current.setText(e, T(o)), r && (s || u(o)) && r(e, o), g(null);
+	}, [f, i]), me = k((e, t) => {
 		S.current = t?.caret ?? "all", g(e);
-	}, []), he = O((e) => f === e, [f]), Q = O((e) => {
+	}, []), he = k((e) => f === e, [f]), Q = k((e) => {
 		let t = v.current;
 		if (!t || Object.keys(e).length === 0) return;
-		let n = z(t) ?? q.current;
+		let n = B(t) ?? q.current;
 		if (!n) return;
 		let r = _.current, o = i.current.setStyle, s = a(t);
 		e.bold === !1 && !("fontWeight" in e) && r !== null && (e = {
@@ -184,41 +184,41 @@ function H(t) {
 		let l = r !== null && o ? Object.keys(e).find((t) => t !== "bold" && e[t] === !1 && p(i.current.getStyle(r) ?? {}, t)) : void 0;
 		if (l !== void 0 && r !== null && o) {
 			let a = i.current.getStyle(r) ?? {}, c = m(s, a, n.start, n.end, l, !1);
-			o(r, c.style), B(t, c.runs, n.start, n.end, y.current), J(t, n), n.start === n.end && G({
+			o(r, c.style), V(t, c.runs, n.start, n.end, y.current), J(t, n), n.start === n.end && G({
 				...U.current,
 				[l]: !1
-			}, n.start), L(t, n);
+			}, n.start), R(t, n);
 			let u = { ...e };
 			delete u[l], Object.keys(u).length > 0 && Q(u);
 			return;
 		}
 		if (n.start === n.end) {
-			G(re(U.current, e), n.start), L(t, n);
+			G(re(U.current, e), n.start), R(t, n);
 			return;
 		}
-		B(t, c(s, n.start, n.end, e), n.start, n.end, y.current), L(t, n), J(t, n);
+		V(t, c(s, n.start, n.end, e), n.start, n.end, y.current), R(t, n), J(t, n);
 	}, [
 		J,
 		G,
 		_,
 		i
-	]), $ = O((e) => {
+	]), $ = k((e) => {
 		let t = v.current;
 		if (!t) return;
-		let n = z(t) ?? q.current;
+		let n = B(t) ?? q.current;
 		if (!n) return;
-		let r = a(t), o = _.current, s = (o === null ? void 0 : i.current.getStyle(o)) ?? {}, c = n.start === n.end ? l(I(r, n.start), U.current) : d(r, n.start, n.end);
-		Q(F(c, e, s));
+		let r = a(t), o = _.current, s = (o === null ? void 0 : i.current.getStyle(o)) ?? {}, c = n.start === n.end ? l(L(r, n.start), U.current) : d(r, n.start, n.end);
+		Q(I(c, e, s));
 	}, [
 		Q,
 		_,
 		i
 	]);
-	return k(() => {
+	return A(() => {
 		if (f == null) return;
 		let { container: e, getText: t, getStyle: c, getPaint: l } = i.current;
 		if (!e) return;
-		let u = C(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++oe}`;
+		let u = w(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++oe}`;
 		d.classList.add(p), d.setAttribute("contenteditable", "true"), d.spellcheck = !1, y.current = u;
 		let m = i.current.getRuns?.(f);
 		m && m.length > 0 ? s(m, d, u) : u.fontVariantCaps === "small-caps" ? s([{ text: t(f) }], d, u) : n(d, t(f)), ue(d, u);
@@ -226,14 +226,14 @@ function H(t) {
 		h && (d.style.opacity = "0");
 		let g = de(p, u), _ = le();
 		_.appendChild(d), e.appendChild(_), v.current = d;
-		let w = () => {
+		let C = () => {
 			let e = i.current.getClipRect?.() ?? null;
 			fe(d, _, i.current.getScreenPose(f), e, u);
 		};
-		w();
+		C();
 		let T = h !== null, E = () => {
-			T && (T = !1, clearTimeout(D), w(), d.style.opacity = "");
-		}, D = T ? setTimeout(E, i.current.fontHold ?? V) : void 0;
+			T && (T = !1, clearTimeout(D), C(), d.style.opacity = "");
+		}, D = T ? setTimeout(E, i.current.fontHold ?? H) : void 0;
 		h?.then(E);
 		let O = document.createRange(), k = S.current;
 		k === "all" ? O.selectNodeContents(d) : ce(d, O, k), d.focus();
@@ -257,14 +257,14 @@ function H(t) {
 			if (e.inputType !== "insertText" || !e.data) return;
 			let t = U.current;
 			if (Object.keys(t).length > 0) {
-				let n = z(d) ?? q.current;
+				let n = B(d) ?? q.current;
 				if (!n || n.start !== n.end) return;
 				e.preventDefault();
 				let r = te(a(d), n.start, {
 					...t,
 					text: e.data
 				}), i = n.start + e.data.length;
-				B(d, r, i, i, y.current), ne(d, r, i), K(), J(d, {
+				V(d, r, i, i, y.current), ne(d, r, i), K(), J(d, {
 					start: i,
 					end: i
 				});
@@ -284,14 +284,14 @@ function H(t) {
 			P();
 		}, P = (e) => {
 			if (e instanceof InputEvent && e.isComposing) return;
-			let t = z(d);
+			let t = B(d);
 			if (!o(d) || !t) return;
 			let n = r(d, t.start), i = r(d, t.end), a = window.getSelection();
 			if (!n || !i || !a) return;
 			let s = document.createRange();
 			s.setStart(n.node, n.offset), s.setEnd(i.node, i.offset), a.removeAllRanges(), a.addRange(s);
 		}, F = (e) => {
-			P(e), w();
+			P(e), C();
 		}, I = (e) => {
 			let t = e.target;
 			if (!(t instanceof Node) || d.contains(t)) return;
@@ -299,7 +299,7 @@ function H(t) {
 			n && t instanceof Element && n(t) || Z();
 		};
 		return d.addEventListener("keydown", j), d.addEventListener("blur", M), d.addEventListener("input", F), d.addEventListener("beforeinput", N), document.addEventListener("pointerdown", I, !0), document.addEventListener("selectionchange", Y), b.current = () => {
-			w(), x.request();
+			C(), x.request();
 		}, x.request(), () => {
 			T = !1, clearTimeout(D), x.cancel(), b.current = () => {}, d.removeEventListener("keydown", j), d.removeEventListener("blur", M), d.removeEventListener("input", F), d.removeEventListener("beforeinput", N), document.removeEventListener("pointerdown", I, !0), document.removeEventListener("selectionchange", Y), _.remove(), g?.remove(), v.current = null, pe();
 		};
@@ -320,7 +320,7 @@ function H(t) {
 		cancelEdit: X,
 		commit: Z,
 		isEditing: he,
-		selection: T,
+		selection: C,
 		rangeStyle: D,
 		pendingStyle: P,
 		applyStyleToSelection: Q,
@@ -330,7 +330,7 @@ function H(t) {
 var oe = 0;
 function se(e, t) {
 	let n = [v(e.fontFamily, {
-		weight: x(e.fontWeight),
+		weight: S(e.fontWeight),
 		style: e.fontStyle
 	}), ...t.filter((e) => e.fontFamily != null).map((e) => v(e.fontFamily, {
 		weight: e.fontWeight ?? (e.bold ? 700 : void 0),
@@ -357,34 +357,34 @@ function le() {
 function ue(e, n) {
 	e.style.position = "absolute", e.style.pointerEvents = "auto", e.style.boxSizing = "border-box", e.style.margin = "0", e.style.padding = "0", e.style.border = "0", e.style.outline = "none", e.style.background = "transparent", e.style.color = n.fill !== null && "color" in n.fill ? n.fill.color : "#000", e.style.caretColor = n.caretColor;
 	let r = _(n.fontFamily, {
-		weight: x(n.fontWeight),
+		weight: S(n.fontWeight),
 		style: n.fontStyle
 	});
-	e.style.font = y({
+	e.style.font = b({
 		...n,
 		fontFamily: r
-	}), e.style.lineHeight = String(n.lineHeight);
-	let i = S(n.align, n.direction);
+	}), e.style.textRendering = y(n.fontFamily) ? "" : "geometricPrecision", e.style.lineHeight = String(n.lineHeight);
+	let i = C(n.align, n.direction);
 	e.style.textAlign = n.align === "justify" ? "justify" : i, e.style.setProperty("text-align-last", n.align === "justify" ? i : "");
 	let a = [];
-	n.underline && a.push("underline"), n.strikethrough && a.push("line-through"), n.overline && a.push("overline"), e.style.textDecoration = a.length > 0 ? a.join(" ") : "none", e.style.textTransform = n.textTransform, e.style.fontVariant = n.fontVariantCaps, e.style.setProperty(t, n.fontVariantCaps === "small-caps" ? String(E(n.fontFamily, x(n.fontWeight), n.fontStyle)) : ""), e.style.whiteSpace = n.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
+	n.underline && a.push("underline"), n.strikethrough && a.push("line-through"), n.overline && a.push("overline"), e.style.textDecoration = a.length > 0 ? a.join(" ") : "none", e.style.textTransform = n.textTransform, e.style.fontVariant = n.fontVariantCaps, e.style.setProperty(t, n.fontVariantCaps === "small-caps" ? String(D(n.fontFamily, S(n.fontWeight), n.fontStyle)) : ""), e.style.whiteSpace = n.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
 }
 function de(e, t) {
 	if (t.selectionBackground == null && t.selectionColor == null) return null;
 	let n = document.createElement("style"), r = [];
 	return t.selectionBackground != null && r.push(`background: ${t.selectionBackground};`), t.selectionColor != null && r.push(`color: ${t.selectionColor};`), n.textContent = `.${e}::selection { ${r.join(" ")} }`, document.head.appendChild(n), n;
 }
-var U = {
+var W = {
 	left: 0,
 	center: .5,
 	right: 1
 };
-function W(e, t, n = 0) {
-	let r = D(e.verticalAlign, e.height, t);
+function G(e, t, n = 0) {
+	let r = O(e.verticalAlign, e.height, t);
 	return e.y + (r + n) * (e.zoom ?? 1);
 }
-function G(e, t, n, r) {
-	let i = b({
+function K(e, t, n, r) {
+	let i = x({
 		x: 0,
 		y: 0,
 		width: n.width,
@@ -398,23 +398,24 @@ function G(e, t, n, r) {
 			lineHeight: r,
 			script: t.script
 		}
-	}).laid.lines[0]?.baselineY ?? 0, a = q(e);
+	}).laid.lines[0]?.baselineY ?? 0, a = J(e);
 	return i > 0 && a > 0 ? i - a : 0;
 }
-var K = /* @__PURE__ */ new Map();
-function q(e) {
+var q = /* @__PURE__ */ new Map();
+function J(e) {
 	let t = e.parentElement;
 	if (!t) return 0;
-	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o } = e.style, s = [
+	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o, textRendering: s } = e.style, c = [
 		n,
 		r,
 		i,
 		a,
-		o
-	].join("|"), c = K.get(s);
-	if (c !== void 0) return c;
-	let l = document.createElement("div");
-	Object.assign(l.style, {
+		o,
+		s
+	].join("|"), l = q.get(c);
+	if (l !== void 0) return l;
+	let u = document.createElement("div");
+	Object.assign(u.style, {
 		position: "absolute",
 		left: "0",
 		top: "0",
@@ -428,17 +429,18 @@ function q(e) {
 		fontWeight: r,
 		fontStyle: i,
 		fontSize: a,
-		lineHeight: o
+		lineHeight: o,
+		textRendering: s
 	});
-	let u = document.createElement("span");
-	Object.assign(u.style, {
+	let d = document.createElement("span");
+	Object.assign(d.style, {
 		display: "inline-block",
 		width: "0",
 		height: "0",
 		verticalAlign: "baseline"
-	}), l.appendChild(u), t.appendChild(l);
-	let d = l.getBoundingClientRect(), f = d.width / 100, p = f > 0 ? (u.getBoundingClientRect().top - d.top) / f : 0;
-	return l.remove(), p > 0 && document.fonts?.status !== "loading" && (K.size >= 64 && K.clear(), K.set(s, p)), p;
+	}), u.appendChild(d), t.appendChild(u);
+	let f = u.getBoundingClientRect(), p = f.width / 100, m = p > 0 ? (d.getBoundingClientRect().top - f.top) / p : 0;
+	return u.remove(), m > 0 && document.fonts?.status !== "loading" && (q.size >= 64 && q.clear(), q.set(c, m)), m;
 }
 function fe(e, t, n, r, i) {
 	if (!n) {
@@ -446,20 +448,20 @@ function fe(e, t, n, r, i) {
 		return;
 	}
 	t.style.overflow = r ? "clip" : "visible", t.style.left = `${r?.x ?? 0}px`, t.style.top = `${r?.y ?? 0}px`, t.style.width = `${r?.width ?? 0}px`, t.style.height = `${r?.height ?? 0}px`, e.style.display = "";
-	let a = i.wrap ? 0 : U[S(i.align, i.direction)];
+	let a = i.wrap ? 0 : W[C(i.align, i.direction)];
 	e.style.left = `${n.x + n.width * (n.zoom ?? 1) * a - (r?.x ?? 0)}px`, e.style.width = i.wrap ? `${n.width}px` : "max-content", e.style.minWidth = i.wrap ? "" : `${n.width}px`;
-	let o = i.script ? T(i.fontFamily, x(i.fontWeight), i.fontStyle)[i.script] : void 0, s = n.lineHeight ?? i.lineHeight;
+	let o = i.script ? E(i.fontFamily, S(i.fontWeight), i.fontStyle)[i.script] : void 0, s = n.lineHeight ?? i.lineHeight;
 	e.style.fontSize = `${n.fontSize * (o?.size ?? 1)}px`, e.style.lineHeight = o ? `${n.fontSize * s}px` : String(s);
 	let c = n.verticalAlign !== void 0 && n.verticalAlign !== "top";
 	e.style.minHeight = c ? "" : `${n.height}px`;
-	let l = G(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
-	e.style.top = `${W(n, c ? e.offsetHeight : n.height, l) - (r?.y ?? 0)}px`, e.style.transformOrigin = "0 0";
+	let l = K(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
+	e.style.top = `${G(n, c ? e.offsetHeight : n.height, l) - (r?.y ?? 0)}px`, e.style.transformOrigin = "0 0";
 	let u = [];
 	n.zoom !== void 0 && n.zoom !== 1 && u.push(`scale(${n.zoom})`), a !== 0 && u.push(`translateX(${-a * 100}%)`), e.style.transform = u.length > 0 ? u.join(" ") : "none";
 	let d = n.zoom === void 0 && i.fontSize > 0 ? n.fontSize / i.fontSize : 1;
 	e.style.letterSpacing = `${i.letterSpacing * d}px`;
 }
 //#endregion
-export { V as TEXT_EDIT_FONT_HOLD, G as baselineDrop, W as overlayTop, H as useTextEdit };
+export { H as TEXT_EDIT_FONT_HOLD, K as baselineDrop, G as overlayTop, U as useTextEdit };
 
 //# sourceMappingURL=useTextEdit.js.map