@weasel-js/core 1.9.4 → 1.10.1

package/dist/features/text/useTextEdit.js

@@ -1,491 +0,0 @@
-import { useVisibleRaf as e } from "../../scheduling/useVisibleRaf.js";
-import { charOffsetToDomPosition as t, domPositionToCharOffset as n } from "./domOffsets.js";
-import { SMALL_CAPS_SCALE_PROPERTY as r, appendOverlayText as i, domToRuns as a, normalizeSmallCaps as o, runsToDom as s } from "./domRuns.js";
-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 { applyOverlayDirection as _, overlayAlignEdge as v } from "./overlayDirection.js";
-import { cssFontFamily as y, cssFontFamilyLoading as b, isCanvasFont as x } from "@weasel-js/font";
-import { fontString as S, layoutTextPose as C, numericWeight as w, resolveTextStyle as ee, 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 P = [
-	{
-		key: "b",
-		shift: !1,
-		toggle: "bold"
-	},
-	{
-		key: "i",
-		shift: !1,
-		toggle: "italic"
-	},
-	{
-		key: "u",
-		shift: !1,
-		toggle: "underline"
-	},
-	{
-		key: "x",
-		shift: !0,
-		toggle: "strikethrough"
-	},
-	{
-		key: "=",
-		shift: !0,
-		toggle: "super"
-	},
-	{
-		key: "-",
-		shift: !0,
-		toggle: "sub"
-	}
-], F = {
-	"+": "=",
-	_: "-"
-};
-function te(e) {
-	if (!e.metaKey && !e.ctrlKey) return null;
-	let t = e.key.toLowerCase(), n = F[t] ?? t;
-	return P.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
-}
-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 L(e, t) {
-	return t > 0 ? d(e, t - 1, t) : d(e, 0, 1);
-}
-function ne(e, t, n) {
-	let r = [], i = 0, a = !1;
-	for (let o of e) {
-		let e = i + o.text.length;
-		if (!a && t <= e) {
-			let e = t - i;
-			e > 0 && r.push({
-				...o,
-				text: o.text.slice(0, e)
-			}), r.push(n), e < o.text.length && r.push({
-				...o,
-				text: o.text.slice(e)
-			}), a = !0;
-		} else r.push({ ...o });
-		i = e;
-	}
-	return a || r.push(n), c(r, 0, 0, {});
-}
-function R(e, n) {
-	let r = document.activeElement;
-	if (r === e || e.contains(r) || r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLElement && r.isContentEditable || r instanceof Element && r.closest("[role=\"dialog\"]") !== null) return;
-	e.focus();
-	let i = t(e, n.start), a = t(e, n.end), o = window.getSelection();
-	if (!i || !a || !o) return;
-	let s = document.createRange();
-	s.setStart(i.node, i.offset), s.setEnd(a.node, a.offset), o.removeAllRanges(), o.addRange(s);
-}
-function re(e, t, n) {
-	let r = 0, i = -1;
-	for (let e = 0; e < t.length; e++) {
-		if (r += t[e].text.length, r === n) {
-			i = e;
-			break;
-		}
-		if (r > n) return;
-	}
-	let a = i >= 0 ? e.children[i] : null, o = window.getSelection();
-	if (!a || !o) return;
-	let s = document.createRange();
-	s.setStartAfter(a), s.collapse(!0), o.removeAllRanges(), o.addRange(s);
-}
-var z = Object.freeze({});
-function ie(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 B(e) {
-	let t = window.getSelection();
-	if (!t || t.rangeCount === 0) return null;
-	let r = t.getRangeAt(0);
-	if (!e.contains(r.startContainer) || !e.contains(r.endContainer)) return null;
-	let i = n(e, r.startContainer, r.startOffset), a = n(e, r.endContainer, r.endOffset);
-	return i <= a ? {
-		start: i,
-		end: a
-	} : {
-		start: a,
-		end: i
-	};
-}
-function ae(e, n, r, 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(n, e, a), c) return;
-	let l = t(e, r), u = t(e, i), d = window.getSelection();
-	if (!l || !u || !d) return;
-	let f = document.createRange();
-	f.setStart(l.node, l.offset), f.setEnd(u.node, u.offset), d.removeAllRanges(), d.addRange(f);
-}
-function oe(e) {
-	let t = e[e.length - 1];
-	if (t === void 0 || !t.text.endsWith("\n")) return e;
-	let n = {
-		...t,
-		text: t.text.slice(0, -1)
-	}, r = e.slice(0, -1);
-	return n.text === "" ? r : [...r, n];
-}
-function se(e, t) {
-	return e === null || t === null ? e === t : e.start === t.start && e.end === t.end;
-}
-var ce = 100;
-function V(n) {
-	let r = N(n), [f, g] = M(null), _ = N(f), v = j(null), y = j(ee(void 0)), [b, x] = M(null), S = j(null), C = k((e) => {
-		S.current = e, x(e);
-	}, []), w = k((e) => S.current ?? r.current.getStyle(e), [r]), E = j(() => {}), D = e(() => {
-		E.current();
-	}), O = j("all"), P = j(null), [F, V] = M(null), [he, H] = M(null), [U, W] = M(z), G = j(z), K = j(null), q = k((e, t) => {
-		let n = Object.keys(e).length === 0;
-		G.current = n ? z : e, K.current = n ? null : t, W(G.current);
-	}, []), J = k(() => {
-		K.current !== null && (G.current = z, K.current = null, W(z));
-	}, []), Y = j(null), X = k((e, t) => {
-		let n = t.start === t.end;
-		K.current !== null && !(n && t.start === K.current) && J(), Y.current = t, V((e) => se(e, t) ? e : t);
-		let r = a(e);
-		H(n ? L(r, t.start) : d(r, t.start, t.end));
-	}, [J]), Z = k(() => {
-		let e = v.current;
-		if (!e) return;
-		let t = B(e);
-		t !== null && X(e, t);
-	}, [X]), _e = k(() => {
-		Y.current = null, V(null), H(null), J();
-	}, [J]), ve = k(() => {
-		g(null);
-	}, []), Q = k(() => {
-		let e = f, t = v.current;
-		if (e == null || !t) {
-			g(null);
-			return;
-		}
-		let { getRuns: n, setRuns: i, setText: o, setStyle: s, commit: c } = r.current, l = n?.(e), d = a(t), p = S.current;
-		if (!p && JSON.stringify(d) === P.current) {
-			g(null);
-			return;
-		}
-		let m = oe(d), h = l != null && l.length > 0 || u(m), _ = T(m);
-		C(null), c ? c(e, {
-			text: _,
-			...h ? { runs: m } : {},
-			...p ? { style: p } : {}
-		}) : (p && s?.(e, p), o?.(e, _), i && h && i(e, m)), g(null);
-	}, [
-		f,
-		r,
-		C
-	]), ye = k((e, t) => {
-		O.current = t?.caret ?? "all", g(e);
-	}, []), be = k((e) => f === e, [f]), $ = k((e) => {
-		let t = v.current;
-		if (!t || Object.keys(e).length === 0) return;
-		let n = B(t) ?? Y.current;
-		if (!n) return;
-		let i = _.current, o = r.current.setStyle !== void 0 || r.current.commit !== void 0, s = a(t);
-		e.bold === !1 && !("fontWeight" in e) && i !== null && (e = {
-			...e,
-			...h(w(i) ?? {})
-		});
-		let l = i !== null && o ? Object.keys(e).find((t) => t !== "bold" && e[t] === !1 && p(w(i) ?? {}, t)) : void 0;
-		if (l !== void 0 && i !== null) {
-			let a = m(s, w(i) ?? {}, n.start, n.end, l, !1);
-			C(a.style);
-			let o = ee(a.style, r.current.getPaint?.(i));
-			y.current = o, pe(t, o), ae(t, a.runs, n.start, n.end, o), X(t, n), n.start === n.end && q({
-				...G.current,
-				[l]: !1
-			}, n.start), R(t, n);
-			let c = { ...e };
-			delete c[l], Object.keys(c).length > 0 && $(c);
-			return;
-		}
-		if (n.start === n.end) {
-			q(ie(G.current, e), n.start), R(t, n);
-			return;
-		}
-		ae(t, c(s, n.start, n.end, e), n.start, n.end, y.current), R(t, n), X(t, n);
-	}, [
-		X,
-		q,
-		_,
-		r,
-		w,
-		C
-	]), xe = k((e) => {
-		let t = v.current;
-		if (!t) return;
-		let n = B(t) ?? Y.current;
-		if (!n) return;
-		let r = a(t), i = _.current, o = (i === null ? void 0 : w(i)) ?? {}, s = n.start === n.end ? l(L(r, n.start), G.current) : d(r, n.start, n.end);
-		$(I(s, e, o));
-	}, [
-		$,
-		_,
-		w
-	]);
-	return A(() => {
-		if (f == null) return;
-		let { container: e, getText: n, getStyle: c, getPaint: l } = r.current;
-		if (!e) return;
-		C(null);
-		let u = ee(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++le}`;
-		d.classList.add(p), d.setAttribute("contenteditable", "true"), d.spellcheck = !1, y.current = u;
-		let m = r.current.getRuns?.(f);
-		m && m.length > 0 ? s(m, d, u) : u.fontVariantCaps === "small-caps" ? s([{ text: n(f) }], d, u) : i(d, n(f)), P.current = JSON.stringify(a(d)), pe(d, u);
-		let h = ue(u, m ?? []);
-		h && (d.style.opacity = "0");
-		let g = me(p, u), _ = fe();
-		_.appendChild(d), e.appendChild(_), v.current = d;
-		let b = () => {
-			let e = r.current.getClipRect?.() ?? null;
-			ge(d, _, r.current.getScreenPose(f), e, u);
-		};
-		b();
-		let x = h !== null, S = () => {
-			x && (x = !1, clearTimeout(w), b(), d.style.opacity = "");
-		}, w = x ? setTimeout(S, r.current.fontHold ?? ce) : void 0;
-		h?.then(S);
-		let T = document.createRange(), k = O.current;
-		k === "all" ? T.selectNodeContents(d) : de(d, T, k), d.focus();
-		let A = window.getSelection();
-		A?.removeAllRanges(), A?.addRange(T), Z();
-		let j = (e) => {
-			if (e.isComposing || e.keyCode === 229) return;
-			if (e.key === "Enter" && !e.shiftKey) {
-				e.preventDefault(), Q();
-				return;
-			}
-			if (e.key === "Escape") {
-				e.preventDefault(), r.current.escape === "commit" ? Q() : ve();
-				return;
-			}
-			let t = te(e);
-			t && (e.preventDefault(), xe(t));
-		}, M = (e) => {
-			let t = e.relatedTarget, n = r.current.isEditorChrome;
-			n && t instanceof Element && n(t) || Q();
-		}, N = (e) => {
-			if (e.inputType !== "insertText" || !e.data) return;
-			let t = G.current;
-			if (Object.keys(t).length > 0) {
-				let n = B(d) ?? Y.current;
-				if (!n || n.start !== n.end) return;
-				e.preventDefault();
-				let r = ne(a(d), n.start, {
-					...t,
-					text: e.data
-				}), i = n.start + e.data.length;
-				ae(d, r, i, i, y.current), re(d, r, i), J(), X(d, {
-					start: i,
-					end: i
-				});
-				return;
-			}
-			e.preventDefault();
-			let n = window.getSelection();
-			if (!n || n.rangeCount === 0) return;
-			let r = n.getRangeAt(0);
-			r.deleteContents();
-			{
-				let t = document.createTextNode(e.data);
-				r.insertNode(t);
-				let i = document.createRange();
-				i.setStartAfter(t), i.collapse(!0), n.removeAllRanges(), n.addRange(i);
-			}
-			F();
-		}, F = (e) => {
-			if (e instanceof InputEvent && e.isComposing) return;
-			let n = B(d);
-			if (!o(d) || !n) return;
-			let r = t(d, n.start), i = t(d, n.end), a = window.getSelection();
-			if (!r || !i || !a) return;
-			let s = document.createRange();
-			s.setStart(r.node, r.offset), s.setEnd(i.node, i.offset), a.removeAllRanges(), a.addRange(s);
-		}, I = (e) => {
-			F(e), b();
-		}, L = (e) => {
-			let t = e.target;
-			if (!(t instanceof Node) || d.contains(t)) return;
-			let n = r.current.isEditorChrome;
-			n && t instanceof Element && n(t) || Q();
-		};
-		return d.addEventListener("keydown", j), d.addEventListener("blur", M), d.addEventListener("input", I), d.addEventListener("beforeinput", N), document.addEventListener("pointerdown", L, !0), document.addEventListener("selectionchange", Z), E.current = () => {
-			b(), D.request();
-		}, D.request(), () => {
-			x = !1, clearTimeout(w), D.cancel(), E.current = () => {}, d.removeEventListener("keydown", j), d.removeEventListener("blur", M), d.removeEventListener("input", I), d.removeEventListener("beforeinput", N), document.removeEventListener("pointerdown", L, !0), document.removeEventListener("selectionchange", Z), _.remove(), g?.remove(), v.current = null, C(null), _e();
-		};
-	}, [
-		f,
-		n.container,
-		r,
-		Q,
-		ve,
-		Z,
-		_e,
-		D,
-		xe,
-		J,
-		X,
-		C
-	]), {
-		editingId: f,
-		startEdit: ye,
-		cancelEdit: ve,
-		commit: Q,
-		isEditing: be,
-		nodeStyle: b,
-		selection: F,
-		rangeStyle: he,
-		pendingStyle: U,
-		applyStyleToSelection: $,
-		toggleStyle: xe
-	};
-}
-var le = 0;
-function ue(e, t) {
-	let n = [b(e.fontFamily, {
-		weight: w(e.fontWeight),
-		style: e.fontStyle
-	}), ...t.filter((e) => e.fontFamily != null).map((e) => b(e.fontFamily, {
-		weight: e.fontWeight ?? (e.bold ? 700 : void 0),
-		style: e.italic ? "italic" : void 0
-	}))].filter((e) => e !== null);
-	return n.length === 0 ? null : Promise.all(n);
-}
-function de(e, t, n) {
-	let r = n, i = document.createTreeWalker(e, NodeFilter.SHOW_TEXT), a = i.nextNode();
-	for (; a;) {
-		let e = a.data.length;
-		if (r <= e) {
-			t.setStart(a, r), t.setEnd(a, r);
-			return;
-		}
-		r -= e, a = i.nextNode();
-	}
-	t.selectNodeContents(e), t.collapse(!1);
-}
-function fe() {
-	let e = document.createElement("div");
-	return e.style.position = "absolute", e.style.margin = "0", e.style.padding = "0", e.style.border = "0", e.style.pointerEvents = "none", e;
-}
-function pe(e, t) {
-	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 = t.fill !== null && "color" in t.fill ? t.fill.color : "#000", e.style.caretColor = t.caretColor;
-	let n = y(t.fontFamily, {
-		weight: w(t.fontWeight),
-		style: t.fontStyle
-	});
-	e.style.font = S({
-		...t,
-		fontFamily: n
-	}), e.style.textRendering = x(t.fontFamily) ? "" : "geometricPrecision", e.style.lineHeight = String(t.lineHeight), _(e, t);
-	let i = [];
-	t.underline && i.push("underline"), t.strikethrough && i.push("line-through"), t.overline && i.push("overline"), e.style.textDecoration = i.length > 0 ? i.join(" ") : "none", e.style.textTransform = t.textTransform, e.style.fontVariant = t.fontVariantCaps, e.style.setProperty(r, t.fontVariantCaps === "small-caps" ? String(D(t.fontFamily, w(t.fontWeight), t.fontStyle)) : ""), e.style.whiteSpace = t.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
-}
-function me(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 he = {
-	left: 0,
-	center: .5,
-	right: 1
-};
-function H(e, t, n = 0) {
-	let r = O(e.verticalAlign, e.height, t);
-	return e.y + (r + n) * (e.zoom ?? 1);
-}
-function U(e, t, n, r) {
-	let i = C({
-		x: 0,
-		y: 0,
-		width: n.width,
-		height: n.height,
-		text: " ",
-		style: {
-			fontFamily: t.fontFamily,
-			fontWeight: t.fontWeight,
-			fontStyle: t.fontStyle,
-			fontSize: n.fontSize,
-			lineHeight: r,
-			script: t.script
-		}
-	}).laid.lines[0]?.baselineY ?? 0, a = G(e);
-	return i > 0 && a > 0 ? i - a : 0;
-}
-var W = /* @__PURE__ */ new Map();
-function G(e) {
-	let t = e.parentElement;
-	if (!t) return 0;
-	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o, textRendering: s } = e.style, c = [
-		n,
-		r,
-		i,
-		a,
-		o,
-		s
-	].join("|"), l = W.get(c);
-	if (l !== void 0) return l;
-	let u = document.createElement("div");
-	Object.assign(u.style, {
-		position: "absolute",
-		left: "0",
-		top: "0",
-		width: "100px",
-		margin: "0",
-		padding: "0",
-		border: "0",
-		visibility: "hidden",
-		whiteSpace: "pre",
-		fontFamily: n,
-		fontWeight: r,
-		fontStyle: i,
-		fontSize: a,
-		lineHeight: o,
-		textRendering: s
-	});
-	let d = document.createElement("span");
-	Object.assign(d.style, {
-		display: "inline-block",
-		width: "0",
-		height: "0",
-		verticalAlign: "baseline"
-	}), 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" && (W.size >= 64 && W.clear(), W.set(c, m)), m;
-}
-function ge(e, t, n, r, i) {
-	if (!n) {
-		e.style.display = "none";
-		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 : he[v(e, i)];
-	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 ? E(i.fontFamily, w(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 = U(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
-	e.style.top = `${H(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 { ce as TEXT_EDIT_FONT_HOLD, U as baselineDrop, H as overlayTop, V as useTextEdit };
-
-//# sourceMappingURL=useTextEdit.js.map