@pie-lib/editable-html-tip-tap 3.1.2-next.20261020155912 → 3.1.2-next.20261021000713

package/dist/components/EditableHtml.js

@@ -228,7 +228,8 @@ var S = {
 		te.configure(K),
 		re.configure({
 			toolbarOpts: P,
-			math: y.pluginProps?.math || {}
+			math: y.pluginProps?.math || {},
+			mathMlOptions: y.mathMlOptions || {}
 		}),
 		ve,
 		_e,
@@ -279,7 +280,11 @@ var S = {
 		onBlur: ({ editor: e }) => {
 			!k(e) && e.schema && (U.current?.cancel(), R(e));
 		}
-	}, [y.charactersLimit]);
+	}, [
+		y.charactersLimit,
+		y.mathMlOptions?.mmlEditing,
+		y.mathMlOptions?.mmlOutput
+	]);
 	m(() => {
 		y.editorRef && y.editorRef(Q);
 	}, [y.editorRef, Q]), m(() => {

package/dist/extensions/math.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { Node } from '@tiptap/core';
 import { Plugin } from 'prosemirror-state';
+/**
+ * LaTeX for a MathML string, or null when there is none to give. `mmlToLatex` answers an empty
+ * string for MathML it cannot read, and the input back when its converter throws; neither is LaTeX,
+ * and neither may become a math node.
+ */
+export declare const convertMathMlToLatex: (mathMl: any) => string | null;
+/**
+ * MathML for LaTeX, or null when there is none to give: MathJax has not started, or cannot read the
+ * LaTeX. A caller keeps the LaTeX then. The MathML carries the LaTeX it was made from, so that
+ * editing it again reads that back exactly, where converting the MathML would lose some.
+ */
+export declare const convertLatexToMathMl: (latex: any, wrapper: any) => string | null;
 export declare const EnsureTextAfterMathPlugin: (mathNodeName: any) => Plugin<any>;
 export declare const ZeroWidthSpaceHandlingPlugin: Plugin<any>;
 export declare const MathNode: Node<any, any>;

package/dist/extensions/math.js

@@ -6,16 +6,42 @@ import { Node as s } from "@tiptap/core";
 import { NodeSelection as c, Plugin as l, PluginKey as u, TextSelection as d } from "prosemirror-state";
 import f from "react-dom";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { unWrapMath as h, wrapMath as g } from "@pie-element/shared-math-rendering-mathjax";
-import { MathPreview as _, MathToolbar as v } from "@pie-lib/math-toolbar";
+import { latexToMml as h, mmlToLatex as g, unWrapMath as _, wrapMath as v } from "@pie-element/shared-math-rendering-mathjax";
+import { MathPreview as y, MathToolbar as b } from "@pie-lib/math-toolbar";
 //#region src/extensions/math.tsx
-var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
+var x = /\\left\.\s*|\\right\.\s*/g, S = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g, C = {
+	open: "\\[",
+	close: "\\]"
+}, w = "data-pie-latex", T = (e) => e.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"), E = (e) => typeof e == "string" ? e === "double_dollar" : ["$$", "\\["].includes(e?.open), D = (e) => {
+	let t = e.replaceAll("&nbsp;", " "), n = g(t);
+	return !n || n === t ? null : n.replace(x, "") || null;
+}, O = (e, t) => {
+	let n = h(e, { display: E(t) });
+	return !n || !n.startsWith("<math") ? null : n.replace(S, "").replace("<math", () => `<math ${w}="${T(e)}"`);
+}, k = (e, t, n) => {
+	if (!t?.mathMlOptions?.mmlEditing) return !1;
+	let r = n?.getAttribute("display") === "block" ? C : null, i = (n?.getAttribute(w) ?? n?.getAttribute("data-latex"))?.trim();
+	if (i) return {
+		latex: i,
+		wrapper: r
+	};
+	let a = D(e);
+	if (a === null) return !1;
+	let { unwrapped: o, wrapper: s } = _(a);
+	return {
+		latex: o,
+		wrapper: s || r
+	};
+}, A = (e) => {
+	let t = document.implementation.createHTMLDocument("").createElement("span");
+	return t.setAttribute("data-type", "mathml"), t.innerHTML = e, t;
+}, j = new u("ensureTextAfterMath"), M = (e = []) => e.map((e) => ({
 	name: e,
 	latex: e,
 	write: e,
 	label: e
-})), x = (e) => new l({
-	key: y,
+})), N = (e) => new l({
+	key: j,
 	appendTransaction: (t, n, r) => {
 		if (!t.some((e) => e.docChanged)) return null;
 		let i = r.tr, a = !1;
@@ -26,7 +52,7 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 			}
 		}), a ? i : null;
 	}
-}), S = (e, t) => {
+}), P = (e, t) => {
 	let n;
 	for (n = t; n > 0; n--) {
 		let t = e.nodeAt(n);
@@ -34,16 +60,16 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		if (t && t?.type?.name !== "text") break;
 	}
 	return n;
-}, C = new l({
+}, F = 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 = S(a, o);
+			let e = P(a, o);
 			return e !== -1 && (r(n.tr.delete(e, o)), !0);
 		}
 		if (s && t.key === "ArrowLeft" && o > 0) {
-			let e = S(a, o);
+			let e = P(a, o);
 			if (e === -1) return !1;
 			let t = n.doc.resolve(e);
 			if (t.nodeAfter || t.nodeBefore) {
@@ -54,7 +80,7 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		}
 		return !1;
 	} }
-}), w = s.create({
+}), I = s.create({
 	name: "math",
 	group: "inline",
 	inline: !0,
@@ -67,16 +93,35 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		};
 	},
 	addProseMirrorPlugins() {
-		return [x(this.name), C];
+		return [N(this.name), F];
 	},
 	parseHTML() {
-		return [{
-			tag: "span[data-latex]",
-			getAttrs: (e) => ({ latex: h(e.getAttribute("data-raw") || e.textContent).unwrapped })
-		}, {
-			tag: "span[data-type=\"mathml\"]",
-			getAttrs: (e) => ({ html: e.innerHTML })
-		}];
+		return [
+			{
+				tag: "span[data-latex]",
+				getAttrs: (e) => ({ latex: _(e.getAttribute("data-raw") || e.textContent).unwrapped })
+			},
+			{
+				tag: "span[data-type=\"mathml\"]",
+				priority: 60,
+				getAttrs: (e) => {
+					let t = e.querySelector("math");
+					return k(t?.outerHTML || e.innerHTML, this.options, t);
+				}
+			},
+			{
+				tag: "math",
+				getAttrs: (e) => k(e.outerHTML, this.options, e)
+			},
+			{
+				tag: "span[data-type=\"mathml\"]",
+				getAttrs: (e) => ({ html: e.innerHTML })
+			},
+			{
+				tag: "math",
+				getAttrs: (e) => ({ html: e.outerHTML })
+			}
+		];
 	},
 	addCommands() {
 		return { insertMath: (e = "") => ({ tr: n, editor: r, dispatch: i }) => {
@@ -89,32 +134,34 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		} };
 	},
 	renderHTML({ HTMLAttributes: e }) {
-		return e.html ? ["span", {
-			"data-type": "mathml",
-			dangerouslySetInnerHTML: { __html: e.html }
-		}] : [
+		if (e.html) return A(e.html);
+		if (this.options.mathMlOptions?.mmlOutput) {
+			let t = O(e.latex, e.wrapper);
+			if (t) return A(t);
+		}
+		return [
 			"span",
 			{
 				"data-latex": "",
 				"data-raw": e.latex
 			},
-			g(e.latex, e.wrapper)
+			v(e.latex, e.wrapper)
 		];
 	},
 	addNodeView() {
-		return o((e) => /* @__PURE__ */ p(T, {
+		return o((e) => /* @__PURE__ */ p(L, {
 			...e,
 			options: this.options
 		}));
 	}
-}), T = (o) => {
-	let { node: s, updateAttributes: c, editor: l, selected: u, options: h, getPos: g } = o, [y, x] = i(u), S = r(null), C = r(null), w = r(Date.now()), [T, E] = i({
+}), L = (o) => {
+	let { node: s, updateAttributes: c, editor: l, selected: u, options: h, getPos: g } = o, [_, v] = i(u), x = r(null), S = r(null), C = r(Date.now()), [w, T] = i({
 		top: 0,
 		left: 0
-	}), { math: D = {} } = h || {}, { keypadMode: O, controlledKeypadMode: k = !0, customKeys: A = [], keyPadCharacterRef: j, setKeypadInteraction: M } = D, N = s.attrs.latex || "", P = (e) => {
+	}), { math: E = {} } = h || {}, { keypadMode: D, controlledKeypadMode: O = !0, customKeys: k = [], keyPadCharacterRef: A, setKeypadInteraction: j } = E, N = s.attrs.latex || "", P = (e) => {
 		c({ latex: e });
 	}, F = (e, { moveCursorAfterNode: t = !0 } = {}) => {
-		if (c({ latex: e }), x(!1), t && typeof g == "function") {
+		if (c({ latex: e }), v(!1), t && typeof g == "function") {
 			let e = g(), { doc: t } = l.state, n = d.create(t, e + s.nodeSize), r = l.state.tr.setSelection(n);
 			l.view.dispatch(r);
 		}
@@ -123,27 +170,27 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 	return n(() => {
 		if (!u) return;
 		let { selection: e } = l.state;
-		e.node?.type?.name === "math" && x(!0);
+		e.node?.type?.name === "math" && v(!0);
 	}, [u, l]), n(() => {
-		t(l, u || y);
+		t(l, u || _);
 	}, [
 		l,
-		y,
+		_,
 		u
 	]), n(() => {
-		if (!l || !y) {
-			E({
+		if (!l || !_) {
+			T({
 				top: 0,
 				left: 0
 			});
 			return;
 		}
 		let e = () => {
-			if (!S.current) return;
-			let { from: e } = l.state.selection, t = l.view.coordsAtPos(e), n = C.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 = S.current.offsetHeight, s = S.current.offsetWidth, c = window.innerHeight - (a + 0) >= o ? a + 0 : r - o - 0, u = i;
+			if (!x.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 = x.current.offsetHeight, s = x.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();
-			E({
+			T({
 				top: c - d.top,
 				left: u - d.left
 			});
@@ -159,23 +206,32 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		}), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
 			t !== null && cancelAnimationFrame(t), window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
 		};
-	}, [l, y]), n(() => {
+	}, [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-${w.current}`);
-			if (S.current && !S.current.contains(n) && !n?.closest?.("[data-inline-node]") && !r && !i && !a) {
-				x(!1);
+			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}`);
+			if (x.current && !x.current.contains(n) && !n?.closest?.("[data-inline-node]") && !r && !i && !a) {
+				v(!1);
 				let e = !!l?.view?.dom?.contains(n);
 				F(s.attrs.latex, { moveCursorAfterNode: !e });
 			}
 		};
-		return y ? document.addEventListener("click", t) : document.removeEventListener("click", t), () => document.removeEventListener("click", t);
+		return _ ? document.addEventListener("click", t) : document.removeEventListener("click", t), () => document.removeEventListener("click", t);
 	}, [
 		l,
-		y,
+		_,
 		s
-	]), /* @__PURE__ */ m(a, {
-		className: `math-node-${w.current}`,
+	]), s.attrs.html && !N ? /* @__PURE__ */ p(a, {
+		as: "span",
+		"data-type": "mathml",
+		style: {
+			display: "inline-block",
+			margin: "0 4px"
+		},
+		contentEditable: !1,
+		dangerouslySetInnerHTML: { __html: s.attrs.html }
+	}) : /* @__PURE__ */ m(a, {
+		className: `math-node-${C.current}`,
 		style: {
 			display: "inline-flex",
 			cursor: "pointer",
@@ -183,34 +239,34 @@ var y = new u("ensureTextAfterMath"), b = (e = []) => e.map((e) => ({
 		},
 		"data-selected": u,
 		children: [/* @__PURE__ */ p("div", {
-			ref: C,
-			onClick: () => x(!0),
-			contentEditable: !1,
-			children: /* @__PURE__ */ p(_, { latex: N })
-		}), y && f.createPortal(/* @__PURE__ */ p("div", {
 			ref: S,
+			onClick: () => v(!0),
+			contentEditable: !1,
+			children: /* @__PURE__ */ p(y, { latex: N })
+		}), _ && f.createPortal(/* @__PURE__ */ p("div", {
+			ref: x,
 			"data-toolbar-for": l.instanceId,
 			style: {
 				position: "absolute",
-				top: `${T.top}px`,
-				left: `${T.left}px`,
+				top: `${w.top}px`,
+				left: `${w.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(v, {
+			children: /* @__PURE__ */ p(b, {
 				latex: N,
 				autoFocus: !0,
 				onChange: P,
 				onDone: F,
-				keypadMode: O,
-				controlledKeypadMode: k,
-				additionalKeys: b(A),
-				keyPadCharacterRef: j,
-				setKeypadInteraction: M
+				keypadMode: D,
+				controlledKeypadMode: O,
+				additionalKeys: M(k),
+				keyPadCharacterRef: A,
+				setKeypadInteraction: j
 			})
 		}), l?._tiptapContainerEl || document.body)]
 	});
 };
 //#endregion
-export { x as EnsureTextAfterMathPlugin, w as MathNode, T as MathNodeView, C as ZeroWidthSpaceHandlingPlugin };
+export { N as EnsureTextAfterMathPlugin, I as MathNode, L as MathNodeView, F as ZeroWidthSpaceHandlingPlugin, O as convertLatexToMathMl, D as convertMathMlToLatex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.1.2-next.20261020155912",
+  "version": "3.1.2-next.20261021000713",
   "description": "",
   "repository": {
     "type": "git",
@@ -13,10 +13,10 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.7-next.20261020155912",
-    "@pie-lib/math-input": "9.0.7-next.20261020155912",
-    "@pie-lib/math-toolbar": "4.0.7-next.20261020155912",
-    "@pie-lib/render-ui": "8.0.7-next.20261020155912",
+    "@pie-lib/drag": "5.0.7-next.20261021000713",
+    "@pie-lib/math-input": "9.0.7-next.20261021000713",
+    "@pie-lib/math-toolbar": "4.0.7-next.20261021000713",
+    "@pie-lib/render-ui": "8.0.7-next.20261021000713",
     "@pie-lib/translator": "5.0.2-next.20261019155156",
     "@tiptap/core": "3.32.0",
     "@tiptap/extension-character-count": "3.32.0",
@@ -46,7 +46,7 @@
     "@pie-element/shared-lodash": "0.1.3-next.20261020155912",
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.8-next.20261019155156",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.8-next.20261021000713",
     "@tiptap/extensions": "3.32.0",
     "@tiptap/extension-list": "3.32.0",
     "@tiptap/extension-bubble-menu": "3.32.0",