@pie-lib/editable-html-tip-tap 3.1.3-next.20261026212738 → 3.1.3-next.20261027184745

package/dist/components/CharacterPicker.js

@@ -1,60 +1,61 @@
-import { spanishConfig as e, specialConfig as t } from "./characters/characterUtils.js";
-import n from "./characters/custom-popper.js";
-import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { get as s } from "@pie-element/shared-lodash";
-import c from "react-dom";
-import l from "prop-types";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { PureToolbar as p } from "@pie-lib/math-toolbar";
+import { arabicConfig as e, spanishConfig as t, specialConfig as n } from "./characters/characterUtils.js";
+import r from "./characters/custom-popper.js";
+import { useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { get as c } from "@pie-element/shared-lodash";
+import l from "react-dom";
+import u from "prop-types";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { PureToolbar as m } from "@pie-lib/math-toolbar";
 //#region src/components/CharacterPicker.tsx
-var m = ({ letter: e }) => /* @__PURE__ */ d("div", {
+var h = ({ letter: e }) => /* @__PURE__ */ f("div", {
 	style: {
 		fontSize: "24px",
 		lineHeight: "24px"
 	},
 	children: e
 });
-m.propTypes = { letter: l.string };
-var h = [
+h.propTypes = { letter: u.string };
+var g = [
 	"ArrowLeft",
 	"ArrowRight",
 	"ArrowUp",
 	"ArrowDown"
-], g = "button, a[href], input, select, textarea, [contenteditable=\"true\"], [tabindex]", _ = (e) => {
+], _ = "button, a[href], input, select, textarea, [contenteditable=\"true\"], [tabindex]", v = (e) => {
 	let t = e.tabIndex >= 0, n = !e.disabled, r = !!e.closest("[inert]"), i = e.getClientRects().length > 0;
 	return t && n && !r && i;
-}, v = (e) => Array.from(e.querySelectorAll(g)).filter(_), y = (e, t) => (e + t) % t, b = (e, t, n, r) => e[y(t + {
+}, y = (e) => Array.from(e.querySelectorAll(_)).filter(v), b = (e, t) => (e + t) % t, x = (e, t, n, r) => e[b(t + {
 	ArrowLeft: -1,
 	ArrowRight: 1,
 	ArrowUp: -r,
 	ArrowDown: r
 }[n], e.length)];
-function x({ editor: l, opts: m, onClose: g, triggerEl: _, focusOnOpen: y }) {
-	if (!m?.characters?.length) return null;
-	let x = a(null), S = a(g), [C, w] = o({
+function S({ editor: u, opts: h, onClose: _, triggerEl: v, focusOnOpen: b }) {
+	if (!h?.characters?.length) return null;
+	let S = o(null), C = o(_), [w, T] = s({
 		top: 0,
 		left: 0
-	}), [T, E] = o(null);
-	S.current = g;
-	let D = i(() => {
-		if (!m) return e;
+	}), [E, D] = s(null);
+	C.current = _;
+	let O = a(() => {
+		if (!h) return t;
 		switch (!0) {
-			case m.language === "spanish": return e;
-			case m.language === "special": return t;
-			default: return m;
+			case h.language === "spanish": return t;
+			case h.language === "special": return n;
+			case h.language === "arabic": return e;
+			default: return h;
 		}
-	}, [m]), O = i(() => D.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
-		rows: D.characters.length,
+	}, [h]), k = a(() => O.characters.reduce((e, t) => (t.length >= e.columns && (e.columns = t.length), e), {
+		rows: O.characters.length,
 		columns: 0
-	}), [D]), k = () => E(null);
-	r(() => () => {
-		k();
-	}, []), r(() => {
-		if (!l) return;
-		let e = l.options.element, t = l.view.dom, n = () => {
-			if (!x.current) return;
-			let t = e.getBoundingClientRect(), { from: n } = l.state.selection, r = l.view.coordsAtPos(n), i = x.current.offsetHeight, a = x.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
-			o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), w({
+	}), [O]), A = () => D(null);
+	i(() => () => {
+		A();
+	}, []), i(() => {
+		if (!u) return;
+		let e = u.options.element, t = u.view.dom, n = () => {
+			if (!S.current) return;
+			let t = e.getBoundingClientRect(), { from: n } = u.state.selection, r = u.view.coordsAtPos(n), i = S.current.offsetHeight, a = S.current.offsetWidth, o = window.innerHeight - (t.bottom + 60) >= i || t.top < i + 80 ? t.bottom + 60 : t.top - i - 20, s = r.left;
+			o = Math.max(8, Math.min(o, window.innerHeight - i - 8)), s = Math.max(8, Math.min(s, window.innerWidth - a - 8)), T({
 				top: o,
 				left: s
 			});
@@ -67,81 +68,81 @@ function x({ editor: l, opts: m, onClose: g, triggerEl: _, focusOnOpen: y }) {
 		};
 		window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
 		let a = (e) => {
-			x.current && !x.current.contains(e.target) && !t.contains(e.target) && S.current();
+			S.current && !S.current.contains(e.target) && !t.contains(e.target) && C.current();
 		}, o = setTimeout(() => {
 			document.addEventListener("click", a);
 		});
 		return () => {
 			clearTimeout(o), r !== null && cancelAnimationFrame(r), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), document.removeEventListener("click", a);
 		};
-	}, [l]);
-	let A = C.top !== 0 || C.left !== 0, j = () => Array.from(x.current?.querySelectorAll("button:not([disabled])") ?? []), M = a(!1);
-	r(() => {
-		if (!y || !A || M.current) return;
-		let e = j()[0];
-		e && (e.focus(), M.current = !0);
-	}, [y, A]), r(() => {
-		if (!_) return;
+	}, [u]);
+	let j = w.top !== 0 || w.left !== 0, M = () => Array.from(S.current?.querySelectorAll("button:not([disabled])") ?? []), N = o(!1);
+	i(() => {
+		if (!b || !j || N.current) return;
+		let e = M()[0];
+		e && (e.focus(), N.current = !0);
+	}, [b, j]), i(() => {
+		if (!v) return;
 		let e = () => {
-			S.current(), _.focus();
+			C.current(), v.focus();
 		}, t = (e, t, n) => {
-			b(n, Math.max(0, n.indexOf(t.closest("button"))), e, O.columns || 1)?.focus();
+			x(n, Math.max(0, n.indexOf(t.closest("button"))), e, k.columns || 1)?.focus();
 		}, n = () => {
-			let e = v(document.body).filter((e) => !x.current.contains(e)), t = e.indexOf(_);
-			((t === -1 ? null : e[t + 1]) || _).focus();
+			let e = y(document.body).filter((e) => !S.current.contains(e)), t = e.indexOf(v);
+			((t === -1 ? null : e[t + 1]) || v).focus();
 		}, r = (r) => {
-			if (!x.current) return;
-			let i = j();
+			if (!S.current) return;
+			let i = M();
 			if (!i.length) return;
-			let a = r.target, o = x.current.contains(a), s = i[0], c = i[i.length - 1];
+			let a = r.target, o = S.current.contains(a), s = i[0], c = i[i.length - 1];
 			if (o && r.key === "Escape") {
 				r.preventDefault(), r.stopPropagation(), e();
 				return;
 			}
-			if (o && h.includes(r.key)) {
+			if (o && g.includes(r.key)) {
 				r.preventDefault(), r.stopPropagation(), t(r.key, a, i);
 				return;
 			}
 			if (r.key !== "Tab") return;
-			let l = a === _ && !r.shiftKey, u = a === s && r.shiftKey, d = a === c && !r.shiftKey;
-			l ? (r.preventDefault(), s.focus()) : u ? (r.preventDefault(), _.focus()) : d && (r.preventDefault(), n());
+			let l = a === v && !r.shiftKey, u = a === s && r.shiftKey, d = a === c && !r.shiftKey;
+			l ? (r.preventDefault(), s.focus()) : u ? (r.preventDefault(), v.focus()) : d && (r.preventDefault(), n());
 		};
 		return document.addEventListener("keydown", r, !0), () => document.removeEventListener("keydown", r, !0);
-	}, [_, O.columns]);
-	let N = (e, t) => E({
+	}, [v, k.columns]);
+	let P = (e, t) => D({
 		anchorEl: e.currentTarget,
 		el: t
-	}), P = a("keyboard");
-	return /* @__PURE__ */ f(u, { children: [c.createPortal(/* @__PURE__ */ d("div", {
-		ref: x,
+	}), F = o("keyboard");
+	return /* @__PURE__ */ p(d, { children: [l.createPortal(/* @__PURE__ */ f("div", {
+		ref: S,
 		className: "insert-character-dialog",
-		"data-toolbar-for": l.instanceId,
+		"data-toolbar-for": u.instanceId,
 		onPointerDown: () => {
-			P.current = "pointer";
+			F.current = "pointer";
 		},
 		onKeyDown: () => {
-			P.current = "keyboard";
+			F.current = "keyboard";
 		},
 		style: {
-			visibility: A ? "initial" : "hidden",
+			visibility: j ? "initial" : "hidden",
 			position: "fixed",
-			top: `${C.top}px`,
-			left: `${C.left}px`,
+			top: `${w.top}px`,
+			left: `${w.left}px`,
 			maxWidth: "500px",
 			zIndex: 1e3
 		},
-		children: /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d(p, {
-			keyPadCharacterRef: m.keyPadCharacterRef,
-			setKeypadInteraction: m.setKeypadInteraction,
+		children: /* @__PURE__ */ f("div", { children: /* @__PURE__ */ f(m, {
+			keyPadCharacterRef: h.keyPadCharacterRef,
+			setKeypadInteraction: h.setKeypadInteraction,
 			noDecimal: !0,
 			hideInput: !0,
 			noLatexHandling: !0,
 			hideDoneButtonBackground: !0,
-			layoutForKeyPad: O,
-			additionalKeys: D.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
-				name: s(e, "name") || e,
-				write: s(e, "write") || e,
-				label: s(e, "label") || e,
+			layoutForKeyPad: k,
+			additionalKeys: O.characters.reduce((e, t) => (e = [...e, ...t.map((e) => ({
+				name: c(e, "name") || c(e, "label") || e,
+				write: c(e, "write") || e,
+				label: c(e, "label") || e,
 				category: "character",
 				extraClass: "character",
 				extraProps: {
@@ -151,47 +152,47 @@ function x({ editor: l, opts: m, onClose: g, triggerEl: _, focusOnOpen: y }) {
 						border: "1px solid #000"
 					}
 				},
-				...D.hasPreview ? { actions: {
-					onMouseEnter: (t) => N(t, e),
-					onMouseLeave: k
+				...O.hasPreview ? { actions: {
+					onMouseEnter: (t) => P(t, e),
+					onMouseLeave: A
 				} } : {}
 			}))], e), []),
 			keypadMode: "language",
 			onChange: (e) => {
-				typeof e == "string" && (P.current === "pointer" ? l.chain().focus().insertContent(e).run() : l.chain().insertContent(e).run());
+				typeof e == "string" && (F.current === "pointer" ? u.chain().focus().insertContent(e).run() : u.chain().insertContent(e).run());
 			},
 			onDone: () => {
-				g(), _?.focus();
+				_(), v?.focus();
 			}
 		}) })
-	}), document.body), T && c.createPortal(/* @__PURE__ */ f(n, {
-		onClose: k,
-		anchorEl: T.anchorEl,
+	}), document.body), E && l.createPortal(/* @__PURE__ */ p(r, {
+		onClose: A,
+		anchorEl: E.anchorEl,
 		children: [
-			/* @__PURE__ */ d("div", { children: T.el.label }),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", { children: E.el.label }),
+			/* @__PURE__ */ f("div", {
 				style: {
 					fontSize: 20,
 					lineHeight: "20px"
 				},
-				children: T.el.description
+				children: E.el.description
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				style: {
 					fontSize: 20,
 					lineHeight: "20px"
 				},
-				children: T.el.unicode
+				children: E.el.unicode
 			})
 		]
 	}), document.body)] });
 }
-x.propTypes = {
-	editor: l.object,
-	opts: l.object,
-	onClose: l.func.isRequired,
-	triggerEl: l.object,
-	focusOnOpen: l.bool
+S.propTypes = {
+	editor: u.object,
+	opts: u.object,
+	onClose: u.func.isRequired,
+	triggerEl: u.object,
+	focusOnOpen: u.bool
 };
 //#endregion
-export { m as CharacterIcon, x as CharacterPicker };
+export { h as CharacterIcon, S as CharacterPicker };