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

package/dist/components/MenuBar.js

@@ -8,9 +8,9 @@ import { arabicConfig as ee, spanishConfig as te, specialConfig as ne } from "./
 import re from "./ToolbarDisclosure.js";
 import ie from "./icons/TextAlign.js";
 import ae from "./icons/CssIcon.js";
-import { AddColumn as oe, AddRow as se, RemoveColumn as ce, RemoveRow as le, RemoveTable as ue } from "./icons/TableIcons.js";
-import { CharacterIcon as c, CharacterPicker as de } from "./CharacterPicker.js";
-import fe, { useEffect as l, useLayoutEffect as pe, useMemo as me, useRef as u, useState as d } from "react";
+import { AddColumn as oe, AddRow as se, RemoveColumn as ce, RemoveRow as le, RemoveTable as c } from "./icons/TableIcons.js";
+import { CharacterIcon as l, CharacterPicker as ue } from "./CharacterPicker.js";
+import de, { useEffect as u, useLayoutEffect as fe, useMemo as pe, useRef as me, useState as d } from "react";
 import { useEditorState as he } from "@tiptap/react";
 import { styled as f, useTheme as p } from "@mui/material/styles";
 import { NodeSelection as ge } from "prosemirror-state";
@@ -18,27 +18,28 @@ import { color as m } from "@pie-lib/render-ui";
 import _e from "@mui/icons-material/Delete";
 import h from "@pie-lib/translator";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import ve from "@mui/icons-material/FormatBold";
-import ye from "@mui/icons-material/FormatItalic";
-import v from "@mui/icons-material/FormatStrikethrough";
-import y from "@mui/icons-material/Code";
-import b from "@mui/icons-material/GridOn";
-import x from "@mui/icons-material/FormatListBulleted";
-import S from "@mui/icons-material/FormatListNumbered";
-import C from "@mui/icons-material/FormatUnderlined";
-import w from "@mui/icons-material/Functions";
-import T from "@mui/icons-material/Image";
-import E from "@mui/icons-material/Redo";
-import D from "@mui/icons-material/Undo";
-import O from "@mui/icons-material/FormatQuote";
-import k from "@mui/icons-material/Theaters";
-import A from "@mui/icons-material/VolumeUp";
-import j from "@mui/icons-material/BorderAll";
-import M from "@mui/icons-material/FormatTextdirectionLToR";
-import N from "@mui/icons-material/FormatTextdirectionRToL";
-import P from "@mui/icons-material/Translate";
+import { inlineSideOfArrow as ve } from "@pie-element/shared-utils";
+import ye from "@mui/icons-material/FormatBold";
+import v from "@mui/icons-material/FormatItalic";
+import y from "@mui/icons-material/FormatStrikethrough";
+import b from "@mui/icons-material/Code";
+import x from "@mui/icons-material/GridOn";
+import S from "@mui/icons-material/FormatListBulleted";
+import C from "@mui/icons-material/FormatListNumbered";
+import w from "@mui/icons-material/FormatUnderlined";
+import T from "@mui/icons-material/Functions";
+import E from "@mui/icons-material/Image";
+import D from "@mui/icons-material/Redo";
+import O from "@mui/icons-material/Undo";
+import k from "@mui/icons-material/FormatQuote";
+import A from "@mui/icons-material/Theaters";
+import j from "@mui/icons-material/VolumeUp";
+import M from "@mui/icons-material/BorderAll";
+import N from "@mui/icons-material/FormatTextdirectionLToR";
+import P from "@mui/icons-material/FormatTextdirectionRToL";
+import be from "@mui/icons-material/Translate";
 //#region src/components/MenuBar.tsx
-var { translator: F } = h, be = () => /* @__PURE__ */ g("svg", {
+var { translator: F } = h, xe = () => /* @__PURE__ */ g("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
@@ -50,7 +51,7 @@ var { translator: F } = h, be = () => /* @__PURE__ */ g("svg", {
 		d: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z",
 		fill: "currentColor"
 	})
-}), xe = () => /* @__PURE__ */ g("svg", {
+}), Se = () => /* @__PURE__ */ g("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	height: "24px",
 	viewBox: "0 0 24 24",
@@ -62,7 +63,7 @@ var { translator: F } = h, be = () => /* @__PURE__ */ g("svg", {
 		d: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z",
 		fill: "currentColor"
 	})
-}), Se = () => /* @__PURE__ */ g("svg", {
+}), Ce = () => /* @__PURE__ */ g("svg", {
 	width: "30",
 	height: "28",
 	viewBox: "0 0 30 28",
@@ -80,11 +81,11 @@ var { translator: F } = h, be = () => /* @__PURE__ */ g("svg", {
 	})
 }), I = (e) => e?.extensionManager?.extensions.find(({ name: e }) => e === "contentLanguage")?.options.languages() ?? [];
 function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAreaProps: h, onChange: L, autoWidthToolbar: R, hasFocus: z, language: B }) {
-	let [V, H] = d(!1), [U, Ce] = d({
+	let [V, H] = d(!1), [U, we] = d({
 		el: null,
 		keyboard: !1
-	}), [W, G] = d(!1), K = u(null), q = (e, t) => {
-		Ce({
+	}), [W, G] = d(!1), K = me(null), q = (e, t) => {
+		we({
 			el: t?.currentTarget ?? null,
 			keyboard: t?.detail === 0
 		}), H(e);
@@ -136,18 +137,18 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			};
 		}
 	}), X = !!R, Z = Y.hideDefaultToolbar && Y.currentNode?.type?.name === "drag_in_the_blank", Q = J.alwaysVisible || z && !W && !Y.toolbarOpened && (!Y.hideDefaultToolbar || Z);
-	l(() => {
+	u(() => {
 		z || G(!1);
-	}, [z]), l(() => {
+	}, [z]), u(() => {
 		if (!W || !t) return;
 		let e = () => G(!1), n = t.view.dom;
 		return t.on("update", e), t.on("selectionUpdate", e), n.addEventListener("mousedown", e), () => {
 			t.off("update", e), t.off("selectionUpdate", e), n.removeEventListener("mousedown", e);
 		};
-	}, [W, t]), pe(() => {
+	}, [W, t]), fe(() => {
 		K.current?.toggleAttribute("inert", !Q);
 	}, [Q]);
-	let we = r(f.toolbar, e, {
+	let Te = r(f.toolbar, e, {
 		[f.toolbarWithNoDone]: !0,
 		[f.toolbarTop]: J.position === "top",
 		[f.toolbarRight]: J.alignment === "right",
@@ -155,11 +156,18 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 		[f.autoWidth]: X,
 		[f.fullWidth]: !X,
 		[f.hidden]: J.isHidden === !0
-	}), Te = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, Ee = (e) => {
+	}), Ee = J.minWidth === void 0 ? {} : { minWidth: J.minWidth }, De = (e) => {
+		let t = ve(e.key, e.currentTarget);
+		if (!t || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+		let n = e.target;
+		if (n.tagName !== "BUTTON") return;
+		let r = Array.from(e.currentTarget.querySelectorAll("button:not(:disabled)")).filter((e) => !e.closest("[hidden]")), i = r[r.indexOf(n) + (t === "inline-end" ? 1 : -1)];
+		i && (e.preventDefault(), i.focus());
+	}, Oe = (e) => {
 		e.preventDefault();
-	}, $ = (e) => F.t(`editableHtml.buttons.${e}`, { lng: B }), De = me(() => [
+	}, $ = (e) => F.t(`editableHtml.buttons.${e}`, { lng: B }), ke = pe(() => [
 		{
-			icon: /* @__PURE__ */ g(b, {}),
+			icon: /* @__PURE__ */ g(x, {}),
 			label: $("insertTable"),
 			onClick: (e) => e.chain().focus().insertTable({
 				rows: 2,
@@ -203,7 +211,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ g(ue, {}),
+			icon: /* @__PURE__ */ g(c, {}),
 			label: $("removeTable"),
 			onClick: (e) => e.chain().focus().deleteTable().run(),
 			hidden: (e) => !(e.isTable && !e.hasTextSelectionInTable),
@@ -211,7 +219,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ g(j, {}),
+			icon: /* @__PURE__ */ g(M, {}),
 			label: $("tableBorders"),
 			toggle: !0,
 			onClick: (e) => {
@@ -226,7 +234,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canTable
 		},
 		{
-			icon: /* @__PURE__ */ g(ve, {}),
+			icon: /* @__PURE__ */ g(ye, {}),
 			label: $("bold"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleBold().run(),
@@ -235,7 +243,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canBold
 		},
 		{
-			icon: /* @__PURE__ */ g(ye, {}),
+			icon: /* @__PURE__ */ g(v, {}),
 			label: $("italic"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleItalic().run(),
@@ -244,7 +252,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canItalic
 		},
 		{
-			icon: /* @__PURE__ */ g(v, {}),
+			icon: /* @__PURE__ */ g(y, {}),
 			label: $("strikethrough"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleStrike().run(),
@@ -253,7 +261,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canStrike
 		},
 		{
-			icon: /* @__PURE__ */ g(y, {}),
+			icon: /* @__PURE__ */ g(b, {}),
 			label: $("code"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleCode().run(),
@@ -262,7 +270,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isDisabled: (e) => !e.canCode
 		},
 		{
-			icon: /* @__PURE__ */ g(C, {}),
+			icon: /* @__PURE__ */ g(w, {}),
 			label: $("underline"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleUnderline().run(),
@@ -270,7 +278,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isUnderline
 		},
 		{
-			icon: /* @__PURE__ */ g(xe, {}),
+			icon: /* @__PURE__ */ g(Se, {}),
 			label: $("subscript"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSubscript().run(),
@@ -278,7 +286,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isSubScript
 		},
 		{
-			icon: /* @__PURE__ */ g(be, {}),
+			icon: /* @__PURE__ */ g(xe, {}),
 			label: $("superscript"),
 			toggle: !0,
 			onClick: (e) => e.chain().focus().toggleSuperscript().run(),
@@ -286,19 +294,19 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isSuperScript
 		},
 		{
-			icon: /* @__PURE__ */ g(T, {}),
+			icon: /* @__PURE__ */ g(E, {}),
 			label: $("insertImage"),
 			hidden: () => !p?.includes("image"),
 			onClick: (e) => e.chain().focus().setImageUploadNode().run()
 		},
 		{
-			icon: /* @__PURE__ */ g(k, {}),
+			icon: /* @__PURE__ */ g(A, {}),
 			label: $("insertVideo"),
 			hidden: () => !p?.includes("video"),
 			onClick: (e) => e.chain().focus().insertMedia({ type: "video" }).run()
 		},
 		{
-			icon: /* @__PURE__ */ g(A, {}),
+			icon: /* @__PURE__ */ g(j, {}),
 			label: $("insertAudio"),
 			hidden: () => !p?.includes("audio"),
 			onClick: (e) => e.chain().focus().insertMedia({
@@ -313,7 +321,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			onClick: (e) => e.commands.openCSSClassDialog()
 		},
 		{
-			icon: /* @__PURE__ */ g(O, {}),
+			icon: /* @__PURE__ */ g(k, {}),
 			label: $("blockquote"),
 			toggle: !0,
 			hidden: () => !p?.includes("blockquote"),
@@ -321,7 +329,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isBlockquote
 		},
 		{
-			icon: /* @__PURE__ */ g(Se, {}),
+			icon: /* @__PURE__ */ g(Ce, {}),
 			label: $("heading"),
 			toggle: !0,
 			hidden: () => !p?.includes("h3"),
@@ -329,25 +337,25 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isHeadingParagraph
 		},
 		{
-			icon: /* @__PURE__ */ g(w, {}),
+			icon: /* @__PURE__ */ g(T, {}),
 			label: $("insertMath"),
 			hidden: () => !p?.includes("math"),
 			onClick: (e) => e.chain().focus().insertMath("").run()
 		},
 		{
-			icon: /* @__PURE__ */ g(c, { letter: "ñ" }),
+			icon: /* @__PURE__ */ g(l, { letter: "ñ" }),
 			label: $("spanishCharacters"),
 			hidden: () => !p?.includes("languageCharacters"),
 			onClick: (e, t) => q(te, t)
 		},
 		{
-			icon: /* @__PURE__ */ g(c, { letter: "€" }),
+			icon: /* @__PURE__ */ g(l, { letter: "€" }),
 			label: $("specialCharacters"),
 			hidden: () => p?.filter((e) => e === "languageCharacters").length !== 2,
 			onClick: (e, t) => q(ne, t)
 		},
 		{
-			icon: /* @__PURE__ */ g(c, { letter: "ع" }),
+			icon: /* @__PURE__ */ g(l, { letter: "ع" }),
 			label: $("arabicCharacters"),
 			hidden: () => !p?.includes("arabicCharacters"),
 			onClick: (e, t) => q(ee, t)
@@ -365,11 +373,11 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 		},
 		...[[
 			"ltr",
-			/* @__PURE__ */ g(M, {}),
+			/* @__PURE__ */ g(N, {}),
 			"leftToRight"
 		], [
 			"rtl",
-			/* @__PURE__ */ g(N, {}),
+			/* @__PURE__ */ g(P, {}),
 			"rightToLeft"
 		]].map(([e, t, n]) => ({
 			icon: t,
@@ -389,7 +397,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 				return /* @__PURE__ */ g(re, {
 					editor: t,
 					label: $("contentLanguage"),
-					trigger: /* @__PURE__ */ g(P, {}),
+					trigger: /* @__PURE__ */ g(be, {}),
 					options: [...n && !i ? [{
 						value: e.contentLanguage,
 						label: e.contentLanguage
@@ -408,7 +416,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			}
 		},
 		{
-			icon: /* @__PURE__ */ g(x, {}),
+			icon: /* @__PURE__ */ g(S, {}),
 			label: $("bulletedList"),
 			toggle: !0,
 			hidden: () => !p?.includes("bulleted-list"),
@@ -416,7 +424,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isBulletList
 		},
 		{
-			icon: /* @__PURE__ */ g(S, {}),
+			icon: /* @__PURE__ */ g(C, {}),
 			label: $("numberedList"),
 			toggle: !0,
 			hidden: () => !p?.includes("numbered-list"),
@@ -424,14 +432,14 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 			isActive: (e) => e.isOrderedList
 		},
 		{
-			icon: /* @__PURE__ */ g(D, {}),
+			icon: /* @__PURE__ */ g(O, {}),
 			label: F.t("common:undo", { lng: B }),
 			hidden: () => !p?.includes("undo"),
 			onClick: (e) => e.chain().focus().undo().run(),
 			isDisabled: (e) => !e.canUndo
 		},
 		{
-			icon: /* @__PURE__ */ g(E, {}),
+			icon: /* @__PURE__ */ g(D, {}),
 			label: F.t("graphing.redo", { lng: B }),
 			hidden: () => !p?.includes("redo"),
 			onClick: (e) => e.chain().focus().redo().run(),
@@ -444,9 +452,9 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 	]);
 	return /* @__PURE__ */ _("div", {
 		ref: K,
-		className: we,
-		style: { ...Te },
-		onMouseDown: Ee,
+		className: Te,
+		style: { ...Ee },
+		onMouseDown: Oe,
 		children: [
 			Z && /* @__PURE__ */ g("div", {
 				className: f.defaultToolbar,
@@ -472,11 +480,12 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 				role: "toolbar",
 				tabIndex: -1,
 				"aria-label": F.t("editableHtml.toolbar", { lng: B }),
+				onKeyDown: De,
 				children: [
 					/* @__PURE__ */ g("div", {
 						className: f.buttonsContainer,
-						children: De.filter((e) => !e.hidden?.(Y)).map((e, n) => {
-							if (e.render) return /* @__PURE__ */ g(fe.Fragment, { children: e.render(Y) }, n);
+						children: ke.filter((e) => !e.hidden?.(Y)).map((e, n) => {
+							if (e.render) return /* @__PURE__ */ g(de.Fragment, { children: e.render(Y) }, n);
 							let i = e.isDisabled?.(Y), a = e.isActive?.(Y);
 							return /* @__PURE__ */ g("button", {
 								type: "button",
@@ -510,7 +519,7 @@ function L({ editor: t, classes: f, activePlugins: p, toolbarOpts: m, responseAr
 					})
 				]
 			}),
-			V && /* @__PURE__ */ g(de, {
+			V && /* @__PURE__ */ g(ue, {
 				editor: t,
 				triggerEl: U.el,
 				focusOnOpen: U.keyboard,

package/dist/components/TiptapContainer.js

@@ -62,7 +62,7 @@ var u = o("div", { shouldForwardProp: (e) => !["noBorder", "error"].includes(e)
 	},
 	"& blockquote": {
 		background: "#f9f9f9",
-		borderLeft: "5px solid #ccc",
+		borderInlineStart: "5px solid #ccc",
 		margin: "1.5em 10px",
 		padding: ".5em 10px"
 	},

package/dist/components/respArea/DragInTheBlank/DragInTheBlank.js

@@ -27,6 +27,7 @@ var a = (e, t, n, r) => {
 			...d,
 			style: {
 				display: "inline-flex",
+				verticalAlign: "middle",
 				minHeight: "50px",
 				minWidth: "178px",
 				position: "relative",

package/dist/components/respArea/DragInTheBlank/choice.js

@@ -48,7 +48,8 @@ function m({ n: e, children: a, isDragging: o, isOver: u, dragItem: d, value: p,
 			borderRadius: "3px",
 			overflow: "hidden",
 			position: "relative",
-			padding: "8px 8px 8px 35px",
+			paddingBlock: "8px",
+			paddingInline: "35px 8px",
 			width: h ? h.width : void 0,
 			height: h ? h.height : void 0,
 			touchAction: "none"
@@ -60,7 +61,7 @@ function m({ n: e, children: a, isDragging: o, isOver: u, dragItem: d, value: p,
 				style: {
 					position: "absolute",
 					top: "6px",
-					left: "15px",
+					insetInlineStart: "15px",
 					color: "#9B9B9B"
 				},
 				contentEditable: !1

package/dist/components/respArea/InlineDropdown.js

@@ -78,7 +78,7 @@ var h = (u) => {
 				style: {
 					flex: 1,
 					overflow: "hidden",
-					padding: "0 25px 0 8px",
+					paddingInline: "8px 25px",
 					whiteSpace: "nowrap",
 					textOverflow: "ellipsis"
 				},
@@ -94,7 +94,7 @@ var h = (u) => {
 				style: {
 					position: "absolute",
 					top: "5px",
-					right: "5px"
+					insetInlineEnd: "5px"
 				}
 			})]
 		}), A && /* @__PURE__ */ p(r.Fragment, { children: [l.createPortal(/* @__PURE__ */ f("div", {

package/dist/components/respArea/MathTemplated.js

@@ -20,7 +20,7 @@ var s = t("span")(() => ({
 	background: r.backgroundDark(),
 	color: r.text(),
 	display: "inline-flex",
-	borderRight: `2px solid ${r.borderDark()}`,
+	borderInlineEnd: `2px solid ${r.borderDark()}`,
 	boxSizing: "border-box",
 	overflow: "hidden",
 	fontSize: "12px",

package/dist/extensions/math.d.ts

@@ -24,4 +24,12 @@ export declare const sanitizeMathMl: (html: any) => string;
 export declare const EnsureTextAfterMathPlugin: (mathNodeName: any) => Plugin<any>;
 export declare const ZeroWidthSpaceHandlingPlugin: Plugin<any>;
 export declare const MathNode: Node<any, any>;
+/**
+ * The math toolbar's viewport left edge. Its inline-start edge meets the anchor's, so it opens
+ * rightwards in LTR text and leftwards in RTL, and it stays `margin` inside the viewport.
+ */
+export declare const mathToolbarLeft: (anchor: {
+    left: number;
+    right: number;
+}, toolbarWidth: number, rtl: boolean, viewportWidth: number, margin: number) => number;
 export declare const MathNodeView: (props: any) => React.JSX.Element;

package/dist/extensions/math.js

@@ -9,54 +9,55 @@ import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { latexToMml as h, mmlToLatex as g, unWrapMath as _, wrapMath as v } from "@pie-element/shared-math-rendering-mathjax";
 import { MathMLToLaTeX as y } from "@pie-framework/mathml-to-latex";
 import { MathPreview as b, MathToolbar as x } from "@pie-lib/math-toolbar";
+import { inlineSideOfArrow as S, isRightToLeft as C } from "@pie-element/shared-utils";
 //#region src/extensions/math.tsx
-var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
+var w = /\\left\.\s*|\\right\.\s*/g, T = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, E = {
 	open: "\\[",
 	close: "\\]"
-}, T = "data-pie-latex", E = (e) => e.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"), D = (e) => typeof e == "string" ? e === "double_dollar" : ["$$", "\\["].includes(e?.open), O = (e) => {
+}, D = "data-pie-latex", O = (e) => e.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"), k = (e) => typeof e == "string" ? e === "double_dollar" : ["$$", "\\["].includes(e?.open), A = (e) => {
 	let t = e.replaceAll("&nbsp;", " "), n = g(t);
 	if (n === t) try {
 		n = y.convert(t);
 	} catch {
 		return null;
 	}
-	return !n || n === t ? null : n.replace(S, "") || null;
-}, k = (e, t) => {
-	let n = h(e, { display: D(t) });
-	return !n || !n.startsWith("<math") ? null : n.replace(C, "").replace("<math", () => `<math ${T}="${E(e)}"`);
-}, A = (e, t, n) => {
+	return !n || n === t ? null : n.replace(w, "") || null;
+}, j = (e, t) => {
+	let n = h(e, { display: k(t) });
+	return !n || !n.startsWith("<math") ? null : n.replace(T, "").replace("<math", () => `<math ${D}="${O(e)}"`);
+}, M = (e, t, n) => {
 	if (!t?.mathMlOptions?.mmlEditing) return !1;
-	let r = n?.getAttribute("display") === "block" ? w : null, i = (n?.getAttribute(T) ?? n?.getAttribute("data-latex"))?.trim();
+	let r = n?.getAttribute("display") === "block" ? E : null, i = (n?.getAttribute(D) ?? n?.getAttribute("data-latex"))?.trim();
 	if (i) return {
 		latex: i,
 		wrapper: r
 	};
-	let a = O(e);
+	let a = A(e);
 	if (a === null) return !1;
 	let { unwrapped: o, wrapper: s } = _(a);
 	return {
 		latex: o,
 		wrapper: s || r
 	};
-}, j = (e) => {
+}, N = (e) => {
 	let t = document.implementation.createHTMLDocument("").createElement("span");
 	return t.setAttribute("data-type", "mathml"), t.innerHTML = e, t;
-}, M = new Set("math maction maligngroup malignmark menclose merror mfenced mfrac mglyph mi mlabeledtr mlongdiv mmultiscripts mn mo mover mpadded mphantom mprescripts mroot mrow ms mscarries mscarry msgroup msline mspace msqrt msrow mstack mstyle msub msubsup msup mtable mtd mtext mtr munder munderover semantics".split(" ")), N = (e) => {
-	let t = j(e), n = (e) => {
-		for (let t of Array.from(e.children)) if (!M.has(t.localName)) t.remove();
+}, P = new Set("math maction maligngroup malignmark menclose merror mfenced mfrac mglyph mi mlabeledtr mlongdiv mmultiscripts mn mo mover mpadded mphantom mprescripts mroot mrow ms mscarries mscarry msgroup msline mspace msqrt msrow mstack mstyle msub msubsup msup mtable mtd mtext mtr munder munderover semantics".split(" ")), F = (e) => {
+	let t = N(e), n = (e) => {
+		for (let t of Array.from(e.children)) if (!P.has(t.localName)) t.remove();
 		else {
 			for (let { name: e, value: n } of Array.from(t.attributes)) (/^on/i.test(e) || /^\s*javascript:/i.test(n)) && t.removeAttribute(e);
 			n(t);
 		}
 	};
 	return n(t), t.innerHTML;
-}, P = new u("ensureTextAfterMath"), F = (e = []) => e.map((e) => ({
+}, I = new u("ensureTextAfterMath"), L = (e = []) => e.map((e) => ({
 	name: e,
 	latex: e,
 	write: e,
 	label: e
-})), I = (e) => new l({
-	key: P,
+})), R = (e) => new l({
+	key: I,
 	appendTransaction: (t, n, r) => {
 		if (!t.some((e) => e.docChanged)) return null;
 		let i = r.tr, a = !1;
@@ -67,7 +68,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 			}
 		}), a ? i : null;
 	}
-}), L = (e, t) => {
+}), z = (e, t) => {
 	let n;
 	for (n = t; n > 0; n--) {
 		let t = e.nodeAt(n);
@@ -75,16 +76,19 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		if (t && t?.type?.name !== "text") break;
 	}
 	return n;
-}, R = new l({
+}, B = (e, t) => {
+	let { node: n } = e.domAtPos(t);
+	return n.nodeType === 1 ? n : n.parentElement;
+}, V = new l({
 	key: new u("zeroWidthSpaceHandling"),
 	props: { handleKeyDown(e, t) {
 		let { state: n, dispatch: r } = e, { selection: i, doc: a } = n, { from: o, empty: s } = i;
 		if (s && t.key === "Backspace" && o > 0) {
-			let e = L(a, o);
+			let e = z(a, o);
 			return e !== -1 && (r(n.tr.delete(e, o)), !0);
 		}
-		if (s && t.key === "ArrowLeft" && o > 0) {
-			let e = L(a, o);
+		if (s && o > 0 && S(t.key, B(e, o)) === "inline-start") {
+			let e = z(a, o);
 			if (e === -1) return !1;
 			let t = n.doc.resolve(e);
 			if (t.nodeAfter || t.nodeBefore) {
@@ -95,7 +99,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		}
 		return !1;
 	} }
-}), z = s.create({
+}), H = s.create({
 	name: "math",
 	group: "inline",
 	inline: !0,
@@ -108,7 +112,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		};
 	},
 	addProseMirrorPlugins() {
-		return [I(this.name), R];
+		return [R(this.name), V];
 	},
 	parseHTML() {
 		return [
@@ -121,12 +125,12 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 				priority: 60,
 				getAttrs: (e) => {
 					let t = e.querySelector("math");
-					return A(t?.outerHTML || e.innerHTML, this.options, t);
+					return M(t?.outerHTML || e.innerHTML, this.options, t);
 				}
 			},
 			{
 				tag: "math",
-				getAttrs: (e) => A(e.outerHTML, this.options, e)
+				getAttrs: (e) => M(e.outerHTML, this.options, e)
 			},
 			{
 				tag: "span[data-type=\"mathml\"]",
@@ -149,10 +153,10 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		} };
 	},
 	renderHTML({ HTMLAttributes: e }) {
-		if (e.html) return j(e.html);
+		if (e.html) return N(e.html);
 		if (this.options.mathMlOptions?.mmlOutput) {
-			let t = k(e.latex, e.wrapper);
-			if (t) return j(t);
+			let t = j(e.latex, e.wrapper);
+			if (t) return N(t);
 		}
 		return [
 			"span",
@@ -164,16 +168,19 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		];
 	},
 	addNodeView() {
-		return o((e) => /* @__PURE__ */ p(B, {
+		return o((e) => /* @__PURE__ */ p(W, {
 			...e,
 			options: this.options
 		}));
 	}
-}), B = (o) => {
-	let { node: s, updateAttributes: c, editor: l, selected: u, options: h, getPos: g } = o, [_, v] = i(u), y = r(null), S = r(null), C = r(Date.now()), [w, T] = i({
+}), U = (e, t, n, r, i) => {
+	let a = n ? e.right - t : e.left;
+	return Math.max(i, Math.min(a, r - t - i));
+}, W = (o) => {
+	let { node: s, updateAttributes: c, editor: l, selected: u, options: h, getPos: g } = o, [_, v] = i(u), y = r(null), S = r(null), w = r(Date.now()), [T, E] = i({
 		top: 0,
 		left: 0
-	}), { math: E = {} } = h || {}, { keypadMode: D, controlledKeypadMode: O = !0, customKeys: k = [], keyPadCharacterRef: A, setKeypadInteraction: j } = E, M = s.attrs.latex || "", P = (e) => {
+	}), { math: D = {} } = h || {}, { keypadMode: O, controlledKeypadMode: k = !0, customKeys: A = [], keyPadCharacterRef: j, setKeypadInteraction: M } = D, N = s.attrs.latex || "", P = (e) => {
 		c({ latex: e });
 	}, I = (e, { moveCursorAfterNode: t = !0 } = {}) => {
 		if (c({ latex: e }), v(!1), t && typeof g == "function") {
@@ -194,7 +201,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		u
 	]), n(() => {
 		if (!l || !_) {
-			T({
+			E({
 				top: 0,
 				left: 0
 			});
@@ -202,10 +209,10 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		}
 		let e = () => {
 			if (!y.current) return;
-			let { from: e } = l.state.selection, t = l.view.coordsAtPos(e), n = S.current?.getBoundingClientRect?.(), r = n?.height ? n.top : t.top, i = n?.width ? n.left : t.left, a = n?.height ? n.bottom : t.bottom ?? t.top, o = y.current.offsetHeight, s = y.current.offsetWidth, c = window.innerHeight - (a + 0) >= o ? a + 0 : r - o - 0, u = i;
-			c = Math.max(8, Math.min(c, window.innerHeight - o - 8)), u = Math.max(8, Math.min(u, window.innerWidth - s - 8));
-			let d = (l._tiptapContainerEl || document.body).getBoundingClientRect();
-			T({
+			let { from: e } = l.state.selection, t = l.view.coordsAtPos(e), n = S.current?.getBoundingClientRect?.(), r = C(S.current ?? l.view.dom), i = n?.height ? n.top : t.top, a = n?.height ? n.bottom : t.bottom ?? t.top, o = y.current.offsetHeight, s = y.current.offsetWidth, c = window.innerHeight - (a + 0) >= o ? a + 0 : i - o - 0;
+			c = Math.max(8, Math.min(c, window.innerHeight - o - 8));
+			let u = U(n?.width ? n : t, s, r, window.innerWidth, 8), d = (l._tiptapContainerEl || document.body).getBoundingClientRect();
+			E({
 				top: c - d.top,
 				left: u - d.left
 			});
@@ -224,7 +231,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 	}, [l, _]), n(() => {
 		let e = performance.now(), t = (t) => {
 			if (t?.timeStamp < e) return;
-			let n = t?.target, r = (document.querySelectorAll?.("[id^=\"equation-editor-select\"][id*=\"listbox\"], [aria-labelledby=\"equation-editor-label\"][role=\"listbox\"]") || []).length > 0, i = !!(n?.id && n.id.includes("equation-editor-select")) || !!n?.closest?.("[id*=\"equation-editor-select\"]"), a = !!n?.closest?.(`.math-node-${C.current}`);
+			let n = t?.target, r = (document.querySelectorAll?.("[id^=\"equation-editor-select\"][id*=\"listbox\"], [aria-labelledby=\"equation-editor-label\"][role=\"listbox\"]") || []).length > 0, i = !!(n?.id && n.id.includes("equation-editor-select")) || !!n?.closest?.("[id*=\"equation-editor-select\"]"), a = !!n?.closest?.(`.math-node-${w.current}`);
 			if (y.current && !y.current.contains(n) && !n?.closest?.("[data-inline-node]") && !r && !i && !a) {
 				v(!1);
 				let e = !!l?.view?.dom?.contains(n);
@@ -236,7 +243,7 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 		l,
 		_,
 		s
-	]), s.attrs.html && !M ? /* @__PURE__ */ p(a, {
+	]), s.attrs.html && !N ? /* @__PURE__ */ p(a, {
 		as: "span",
 		"data-type": "mathml",
 		style: {
@@ -244,9 +251,9 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 			margin: "0 4px"
 		},
 		contentEditable: !1,
-		dangerouslySetInnerHTML: { __html: N(s.attrs.html) }
+		dangerouslySetInnerHTML: { __html: F(s.attrs.html) }
 	}) : /* @__PURE__ */ m(a, {
-		className: `math-node-${C.current}`,
+		className: `math-node-${w.current}`,
 		style: {
 			display: "inline-flex",
 			cursor: "pointer",
@@ -257,31 +264,31 @@ var S = /\\left\.\s*|\\right\.\s*/g, C = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, w = {
 			ref: S,
 			onClick: () => v(!0),
 			contentEditable: !1,
-			children: /* @__PURE__ */ p(b, { latex: M })
+			children: /* @__PURE__ */ p(b, { latex: N })
 		}), _ && f.createPortal(/* @__PURE__ */ p("div", {
 			ref: y,
 			"data-toolbar-for": l.instanceId,
 			style: {
 				position: "absolute",
-				top: `${w.top}px`,
-				left: `${w.left}px`,
+				top: `${T.top}px`,
+				left: `${T.left}px`,
 				zIndex: 1e3,
 				background: e,
 				boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)"
 			},
 			children: /* @__PURE__ */ p(x, {
-				latex: M,
+				latex: N,
 				autoFocus: !0,
 				onChange: P,
 				onDone: I,
-				keypadMode: D,
-				controlledKeypadMode: O,
-				additionalKeys: F(k),
-				keyPadCharacterRef: A,
-				setKeypadInteraction: j
+				keypadMode: O,
+				controlledKeypadMode: k,
+				additionalKeys: L(A),
+				keyPadCharacterRef: j,
+				setKeypadInteraction: M
 			})
 		}), l?._tiptapContainerEl || document.body)]
 	});
 };
 //#endregion
-export { I as EnsureTextAfterMathPlugin, z as MathNode, B as MathNodeView, R as ZeroWidthSpaceHandlingPlugin, k as convertLatexToMathMl, O as convertMathMlToLatex, N as sanitizeMathMl };
+export { R as EnsureTextAfterMathPlugin, H as MathNode, W as MathNodeView, V as ZeroWidthSpaceHandlingPlugin, j as convertLatexToMathMl, A as convertMathMlToLatex, U as mathToolbarLeft, F as sanitizeMathMl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.1.3-next.20261027184745",
+  "version": "3.1.3-next.20261102105711",
   "description": "",
   "repository": {
     "type": "git",
@@ -14,10 +14,10 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/mathml-to-latex": "1.4.4",
-    "@pie-lib/drag": "5.0.8-next.20261026212738",
-    "@pie-lib/math-input": "9.0.8-next.20261027184745",
-    "@pie-lib/math-toolbar": "4.0.8-next.20261027184745",
-    "@pie-lib/render-ui": "8.0.8-next.20261026212738",
+    "@pie-lib/drag": "5.0.8-next.20261027193325",
+    "@pie-lib/math-input": "9.0.8-next.20261027193325",
+    "@pie-lib/math-toolbar": "4.0.8-next.20261027193325",
+    "@pie-lib/render-ui": "8.0.8-next.20261027193325",
     "@pie-lib/translator": "5.0.3-next.20261027184745",
     "@tiptap/core": "3.32.0",
     "@tiptap/extension-character-count": "3.32.0",
@@ -45,6 +45,7 @@
     "to-style": "^1.3.3",
     "@pie-element/shared-i18n": "0.1.3-next.20261026212738",
     "@pie-element/shared-lodash": "0.1.4-next.20261026212738",
+    "@pie-element/shared-utils": "0.1.7-next.20261027193325",
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
     "@pie-element/shared-math-rendering-mathjax": "0.1.9-next.20261026200905",