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

package/dist/components/EditableHtml.js

@@ -6,11 +6,11 @@ import { ExtendedTableCell as i, ExtendedTableHeader as a } from "../extensions/
 import { DivNode as o } from "../extensions/div-node.js";
 import { EnsureEmptyRootIsDiv as ee } from "../extensions/ensure-empty-root-div.js";
 import { EnsureListItemContentIsDiv as s } from "../extensions/ensure-list-item-content-is-div.js";
-import { DragInTheBlankNode as c, ExplicitConstructedResponseNode as te, InlineDropdownNode as l, MathTemplatedNode as ne, ResponseAreaExtension as re } from "../extensions/responseArea.js";
-import { MathNode as ie } from "../extensions/math.js";
-import { ImageUploadNode as ae, uploadPastedImage as oe } from "../extensions/image.js";
-import { Media as se } from "../extensions/media.js";
-import { CSSMark as u } from "../extensions/css.js";
+import { DragInTheBlankNode as c, ExplicitConstructedResponseNode as l, InlineDropdownNode as u, MathTemplatedNode as te, ResponseAreaExtension as ne } from "../extensions/responseArea.js";
+import { MathNode as re } from "../extensions/math.js";
+import { ImageUploadNode as ie, uploadPastedImage as ae } from "../extensions/image.js";
+import { Media as oe } from "../extensions/media.js";
+import { CSSMark as se } from "../extensions/css.js";
 import { ExtendedListItem as ce } from "../extensions/extended-list-item.js";
 import { HeadingParagraph as le } from "../extensions/heading-paragraph.js";
 import { valueToSize as d } from "../utils/size.js";
@@ -26,22 +26,21 @@ import { CharacterCount as ge } from "@tiptap/extension-character-count";
 import _e from "@tiptap/extension-superscript";
 import ve from "@tiptap/extension-subscript";
 import ye from "@tiptap/extension-text-align";
-import be from "@tiptap/extension-image";
-import xe from "@tiptap/extension-placeholder";
-import { TableRow as x } from "@tiptap/extension-table-row";
-import { jsx as S } from "react/jsx-runtime";
+import be from "@tiptap/extension-placeholder";
+import { TableRow as xe } from "@tiptap/extension-table-row";
+import { jsx as x } from "react/jsx-runtime";
 //#region src/components/EditableHtml.tsx
-var C = {
+var S = {
 	position: "bottom",
 	alignment: "left",
 	alwaysVisible: !1,
 	showDone: !0,
 	doneOn: "blur"
-}, w = {
+}, C = {
 	options: {},
 	respAreaToolbar: () => {},
 	onHandleAreaChange: () => {}
-}, T = [
+}, w = [
 	"bold",
 	"italic",
 	"underline",
@@ -63,7 +62,7 @@ var C = {
 	"h3",
 	"undo",
 	"redo"
-], E = {
+], T = {
 	bold: "bold",
 	italic: "italic",
 	underline: "underline",
@@ -74,7 +73,7 @@ var C = {
 	"numbered-list": "orderedList",
 	table: "table",
 	image: "image"
-}, D = {
+}, E = {
 	"--white": "#fff",
 	"--black": "#2e2b29",
 	"--black-contrast": "#110f0e",
@@ -93,7 +92,7 @@ var C = {
 	"--red": "#ff5c33",
 	"--red-light": "#ffebe5",
 	"--shadow": "0px 12px 33px 0px rgba(0, 0, 0, .06),\n               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
-}, O = (e, t, n) => ({
+}, D = (e, t, n) => ({
 	role: "textbox",
 	"data-pie-editor": "true",
 	class: "mathjax_ignore",
@@ -102,50 +101,50 @@ var C = {
 	autocapitalize: e ? "on" : "off",
 	...t && { "aria-label": t },
 	...n && { "aria-labelledby": n }
-}), k = ["aria-label", "aria-labelledby"], A = (e) => e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response"), j = (y) => {
-	let { showParagraphs: b, separateParagraphs: j } = y.pluginProps || {}, [Se, N] = _([]), [Ce, we] = _(!1), { toolbarOpts: Te } = y, P = p((e) => {
-		N((t) => {
+}), O = ["aria-label", "aria-labelledby"], k = (e) => e._insertingImage || e._toolbarOpened || e.isActive("inline_dropdown") || e.isActive("explicit_constructed_response"), A = (y) => {
+	let { showParagraphs: b, separateParagraphs: A } = y.pluginProps || {}, [Se, M] = _([]), [Ce, we] = _(!1), { toolbarOpts: Te } = y, N = p((e) => {
+		M((t) => {
 			let n = t.filter((t) => t.pos !== e);
 			return n.length === 0 && we(!1), n;
 		});
-	}, [N]), F = {
-		...C,
+	}, [M]), P = {
+		...S,
 		...Te
-	}, I = g([]), L = (e) => {
-		I.current = [...I.current.slice(-4), e], y.onChange?.(e);
-	}, R = g(L);
-	R.current = L;
-	let z = p((e) => {
+	}, F = g([]), I = (e) => {
+		F.current = [...F.current.slice(-4), e], y.onChange?.(e);
+	}, L = g(I);
+	L.current = I;
+	let R = p((e) => {
 		let t = e.getHTML();
-		y.markup !== t && R.current(t), F.doneOn === "blur" && y.onDone?.(t);
+		y.markup !== t && L.current(t), P.doneOn === "blur" && y.onDone?.(t);
 	}, [
 		y.markup,
 		y.onChange,
 		y.onDone,
-		F.doneOn
-	]), B = g(z);
-	B.current = z;
-	let { idleSaveDelay: V } = y, H = g(!1), U = h(() => V > 0 ? v((e) => {
-		e.isDestroyed || (!H.current && (e.view.composing || A(e)) ? W.current?.(e) : B.current(e));
-	}, V) : null, [V]), W = g(U);
-	W.current = U;
-	let G = p((e) => {
-		H.current = !0;
+		P.doneOn
+	]), z = g(R);
+	z.current = R;
+	let { idleSaveDelay: B } = y, V = g(!1), H = h(() => B > 0 ? v((e) => {
+		e.isDestroyed || (!V.current && (e.view.composing || k(e)) ? U.current?.(e) : z.current(e));
+	}, B) : null, [B]), U = g(H);
+	U.current = H;
+	let W = p((e) => {
+		V.current = !0;
 		try {
 			e?.flush();
 		} finally {
-			H.current = !1;
+			V.current = !1;
 		}
 	}, []);
-	m(() => () => G(U), [U, G]);
-	let Ee = p(() => G(W.current), [G]), K = h(() => ({
-		...w,
+	m(() => () => W(H), [H, W]);
+	let G = p(() => W(U.current), [W]), K = h(() => ({
+		...C,
 		...y.responseAreaProps,
-		onInlineDropdownToolbarClose: z
-	}), [y.responseAreaProps, z]), q = h(() => {
+		onInlineDropdownToolbarClose: R
+	}), [y.responseAreaProps, R]), q = h(() => {
 		let { customPlugins: e, ...t } = y.pluginProps || {};
 		e ||= [];
-		let n = (y.activePlugins || T)?.filter((e) => {
+		let n = (y.activePlugins || w)?.filter((e) => {
 			let n = de[e] || e, r = t[n] || {};
 			return !r || !r.disabled;
 		});
@@ -166,9 +165,9 @@ var C = {
 	}, [y, K.type]), J = g(null);
 	J.current = {
 		plainText: y.pluginProps?.pasteFormatting?.disabled === !0,
-		formatting: q.map((e) => E[e]).filter(Boolean)
+		formatting: q.map((e) => T[e]).filter(Boolean)
 	};
-	let De = [
+	let Ee = [
 		ye.configure({
 			types: [
 				"heading",
@@ -194,7 +193,7 @@ var C = {
 		he,
 		e.configure({
 			settings: () => J.current,
-			uploadImage: y.imageSupport && oe
+			uploadImage: y.imageSupport && ae
 		}),
 		ge.configure({ limit: y.charactersLimit || 1e6 }),
 		me.configure({
@@ -212,47 +211,47 @@ var C = {
 		le,
 		ee,
 		s,
-		xe.configure({
+		be.configure({
 			placeholder: y.placeholder,
 			showOnlyWhenEditable: !0,
 			showOnlyCurrent: !1,
 			includeChildren: !0
 		}),
 		r,
-		x,
+		xe,
 		a,
 		i,
-		re.configure(K),
-		te.configure(K),
-		c.configure(K),
-		l.configure(K),
 		ne.configure(K),
-		ie.configure({
-			toolbarOpts: F,
-			math: y.pluginProps?.math || {}
+		l.configure(K),
+		c.configure(K),
+		u.configure(K),
+		te.configure(K),
+		re.configure({
+			toolbarOpts: P,
+			math: y.pluginProps?.math || {},
+			mathMlOptions: y.mathMlOptions || {}
 		}),
 		ve,
 		_e,
-		be,
-		ae.configure({
-			toolbarOpts: F,
+		ie.configure({
+			toolbarOpts: P,
 			imageHandling: {
 				disableImageAlignmentButtons: y.disableImageAlignmentButtons,
 				onDone: (e) => y.onDone?.(e.getHTML()),
 				onDelete: y.imageSupport && y.imageSupport.delete && ((e) => {
 					let { src: t } = e.attrs;
 					y.imageSupport.delete(t, (t) => {
-						P(e.pos);
+						N(e.pos);
 					});
 				}),
 				insertImageRequested: y.imageSupport && ((e, t, n) => {
 					let [r, i] = t, a = (t) => {
 						let n;
-						Ce && t && (n = R.current), P(i), n?.(e.getHTML());
+						Ce && t && (n = L.current), N(i), n?.(e.getHTML());
 					};
-					e._insertingImage = !0, N((e) => [...e, r]), (() => {
+					e._insertingImage = !0, M((e) => [...e, r]), (() => {
 						let t = n(a), r = v(() => {
-							e._insertingImage &&= (P(i), !1), window.removeEventListener("focus", r);
+							e._insertingImage &&= (N(i), !1), window.removeEventListener("focus", r);
 						}, 500);
 						window.addEventListener("focus", r), y.imageSupport.add(t);
 					})();
@@ -262,13 +261,13 @@ var C = {
 			},
 			limit: 3
 		}),
-		se.configure({ uploadSoundSupport: y.uploadSoundSupport }),
-		u.configure({ extraCSSRules: y.extraCSSRules })
+		oe.configure({ uploadSoundSupport: y.uploadSoundSupport }),
+		se.configure({ extraCSSRules: y.extraCSSRules })
 	], Y = y.spellCheck !== !1, { ariaLabel: X, ariaLabelledBy: Z } = y, Q = fe({
-		extensions: De,
+		extensions: Ee,
 		immediatelyRender: !1,
 		editorProps: {
-			attributes: O(Y, X, Z),
+			attributes: D(Y, X, Z),
 			handleKeyDown(e, t) {
 				return y.onKeyDown ? y.onKeyDown(t) : !1;
 			}
@@ -276,23 +275,27 @@ var C = {
 		editable: !y.disabled,
 		content: t(y.markup),
 		onUpdate: ({ editor: e, transaction: t }) => {
-			t.isDone && R.current(e.getHTML()), t.docChanged && W.current && (W.current(e), n(e.view.dom, Ee));
+			t.isDone && L.current(e.getHTML()), t.docChanged && U.current && (U.current(e), n(e.view.dom, G));
 		},
 		onBlur: ({ editor: e }) => {
-			!A(e) && e.schema && (W.current?.cancel(), z(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(() => {
 		Q?.setEditable(!y.disabled);
 	}, [y.disabled, Q]), m(() => {
-		Q?.on("destroy", () => G(W.current));
-	}, [Q, G]), m(() => {
+		Q?.on("destroy", () => W(U.current));
+	}, [Q, W]), m(() => {
 		if (!Q) return;
-		let e = Q.options?.editorProps, t = e?.attributes || {}, n = O(Y, X, Z);
-		if (["spellcheck", ...k].every((e) => t[e] === n[e])) return;
-		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !k.includes(e)));
+		let e = Q.options?.editorProps, t = e?.attributes || {}, n = D(Y, X, Z);
+		if (["spellcheck", ...O].every((e) => t[e] === n[e])) return;
+		let r = Object.fromEntries(Object.entries(t).filter(([e]) => !O.includes(e)));
 		Q.setOptions({ editorProps: {
 			...e,
 			attributes: {
@@ -306,16 +309,16 @@ var C = {
 		Z,
 		Q
 	]), m(() => {
-		if (!Q || I.current.includes(y.markup)) return;
-		I.current = [];
+		if (!Q || F.current.includes(y.markup)) return;
+		F.current = [];
 		let e = t(y.markup);
 		e !== Q.getHTML() && Q.commands.setContent(e, { emitUpdate: !1 });
 	}, [y.markup, Q]), m(() => {
-		Object.entries(D).forEach(([e, t]) => {
+		Object.entries(E).forEach(([e, t]) => {
 			document.documentElement.style.setProperty(e, t);
 		});
 	}, []);
-	let Oe = pe({
+	let De = pe({
 		editor: Q,
 		selector: (e) => ({ isFocused: e.editor?.isFocused })
 	}), $ = h(() => {
@@ -329,24 +332,24 @@ var C = {
 			maxHeight: d(a)
 		};
 	}, [y]);
-	return /* @__PURE__ */ S(ue, {
+	return /* @__PURE__ */ x(ue, {
 		...y,
 		activePlugins: q,
-		toolbarOpts: F,
-		editorState: Oe,
+		toolbarOpts: P,
+		editorState: De,
 		editor: Q,
-		children: Q && /* @__PURE__ */ S(M, {
+		children: Q && /* @__PURE__ */ x(j, {
 			style: {
 				minHeight: $.minHeight,
 				height: $.height,
 				maxHeight: $.maxHeight
 			},
 			showParagraph: b && !b.disabled,
-			separateParagraph: j && !j.disabled,
+			separateParagraph: A && !A.disabled,
 			editor: Q
 		})
 	});
-}, M = b(y, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
+}, j = b(y, { shouldForwardProp: (e) => !["showParagraph", "separateParagraph"].includes(e) })(({ showParagraph: e, separateParagraph: t }) => ({
 	display: "flex",
 	outline: "none !important",
 	"& .ProseMirror": {
@@ -376,4 +379,4 @@ var C = {
 	}
 }));
 //#endregion
-export { j as EditableHtml, j as default };
+export { A as EditableHtml, A as default };

package/dist/extensions/extended-list-item.js

@@ -1,5 +1,5 @@
 import { ListItem as e } from "@tiptap/extension-list-item";
 //#region src/extensions/extended-list-item.tsx
-var t = e.extend({ content: "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+" });
+var t = e.extend({ content: "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | imageUploadNode)+" });
 //#endregion
 export { t as ExtendedListItem };

package/dist/extensions/extended-table-cell.js

@@ -2,7 +2,7 @@ import { scopeAttribute as e } from "./table-semantics.js";
 import { TableCell as t } from "@tiptap/extension-table-cell";
 import { TableHeader as n } from "@tiptap/extension-table-header";
 //#region src/extensions/extended-table-cell.ts
-var r = "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+", i = t.extend({ content: r }), a = n.extend({
+var r = "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | imageUploadNode)+", i = t.extend({ content: r }), a = n.extend({
 	content: r,
 	addAttributes() {
 		return {

package/dist/extensions/image-component.d.ts

@@ -7,8 +7,6 @@ declare namespace ImageComponent {
         editor: PropTypes.Validator<object>;
         attributes: PropTypes.Requireable<object>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        maxImageWidth: PropTypes.Requireable<number>;
-        maxImageHeight: PropTypes.Requireable<number>;
     };
 }
 export default ImageComponent;

package/dist/extensions/image-component.js

@@ -46,60 +46,74 @@ var y = f(v, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress
 	marginLeft: "5px",
 	marginRight: "10px",
 	display: "none"
-})), w = (e) => e ? `${e}px` : "calc(20px)";
-function T(f) {
-	let { node: m, editor: _, attributes: v, onFocus: T, getPos: E, selected: D, options: O, maxImageWidth: k = 700, maxImageHeight: A = 900 } = f, { alt: j } = m.attrs, M = E(), N = _.state.selection.from, P = _.state.selection.to, F = s(() => N + m.nodeSize === P, [
-		N,
-		P,
+})), w = (e) => e ? `${e}px` : "calc(20px)", T = 700, E = 900, D = ({ width: e, height: t }, n, r) => {
+	let i = Math.min(1, n / e, r / t);
+	return i < 1 ? {
+		width: Math.round(e * i),
+		height: Math.round(t * i)
+	} : {
+		width: e,
+		height: t
+	};
+};
+function O(f) {
+	let { node: m, editor: _, attributes: v, onFocus: O, getPos: k, selected: A, options: j } = f;
+	console.log({ ...f.options });
+	let M = j?.imageHandling?.maxImageWidth || T, N = j?.imageHandling?.maxImageHeight || E, { alt: ee } = m.attrs, P = k(), F = _.state.selection.from, I = _.state.selection.to, L = s(() => F + m.nodeSize === I, [
+		F,
+		I,
 		m.nodeSize
-	]), [I, L] = l(!1), R = c(m), z = c(null), B = c(null), V = c(null), H = a((e) => {
-		let t = e / z.current.naturalWidth * 4;
+	]), [R, z] = l(!1), B = c(m), V = c(null), H = c(null), U = c(null), W = a((e) => {
+		let t = e / V.current.naturalWidth * 4;
 		return parseInt(t.toFixed(0) * 25, 10);
-	}, []), U = a(() => {
-		let e = n(_, R.current.attrs.nodeKey);
+	}, []), G = a(() => {
+		let e = n(_, B.current.attrs.nodeKey);
 		return e ? e[1] : null;
-	}, [_]), W = a((e) => {
-		let t = U();
+	}, [_]), K = a((e) => {
+		let t = G();
 		if (t === null) return;
 		let n = _.state.doc.nodeAt(t);
 		n && _.view.dispatch(_.state.tr.setNodeMarkup(t, void 0, {
 			...n.attrs,
 			...e
 		}));
-	}, [_, U]), G = a(() => {
-		if (!m.attrs.width || !z.current || !z.current.naturalWidth) return;
-		let e = H(m.attrs.width);
-		m.attrs.resizePercent !== e && W({ resizePercent: e });
+	}, [_, G]), q = a(() => {
+		if (!m.attrs.width || !V.current || !V.current.naturalWidth) return;
+		let e = W(m.attrs.width);
+		m.attrs.resizePercent !== e && K({ resizePercent: e });
 	}, [
 		m.attrs.width,
 		m.attrs.resizePercent,
-		H,
-		W
+		W,
+		K
 	]);
 	o(() => {
-		R.current = {
+		B.current = {
 			...m,
-			pos: M
+			pos: P
 		};
-	}, [m, M]), o(() => {
-		D ? F && _.isEditable && (!String(m.attrs?.src ?? "").trim() && O.imageHandling?.insertImageRequested && O.imageHandling.insertImageRequested(_, [m, M], (e) => new r(_, [m, M], e)), L(D)) : L(D);
+	}, [m, P]), o(() => {
+		A ? L && _.isEditable && (!String(m.attrs?.src ?? "").trim() && j.imageHandling?.insertImageRequested && j.imageHandling.insertImageRequested(_, [m, P], (e) => new r(_, [m, P], e)), z(A)) : z(A);
 	}, [
-		F,
-		D,
+		L,
+		A,
 		_.isEditable
 	]), o(() => {
-		G();
-		let e = B?.current;
-		return e && _.isEditable && e.addEventListener("mousedown", Z, !1), () => {
-			e && e.removeEventListener("mousedown", Z, !1);
+		q();
+		let e = H?.current;
+		return e && _.isEditable && e.addEventListener("mousedown", $, !1), () => {
+			e && e.removeEventListener("mousedown", $, !1);
 		};
 	}, []), o(() => {
-		G();
+		q();
 	});
-	let K = a(() => {
-		let e = z.current;
+	let J = a(() => {
+		let e = V.current;
 		if (e && (!e.style.width || e.style.width === "calc(20px)")) {
-			let t = Math.min(e.naturalWidth, k), n = Math.min(e.naturalHeight, A);
+			let { width: t, height: n } = D({
+				width: e.naturalWidth,
+				height: e.naturalHeight
+			}, M, N);
 			e.style.width = `${t}px`, e.style.height = `${n}px`;
 			let r = {
 				width: t,
@@ -108,15 +122,15 @@ function T(f) {
 			u(r, {
 				width: m.attrs.width,
 				height: m.attrs.height
-			}) || W(r);
+			}) || K(r);
 		}
 	}, [
 		m.attrs.width,
 		m.attrs.height,
-		k,
-		A,
-		W
-	]), q = (e, t, n = !0, r) => {
+		M,
+		N,
+		K
+	]), Y = (e, t, n = !0, r) => {
 		if (n) {
 			let n = e.width / e.height;
 			return r === "height" ? {
@@ -128,40 +142,45 @@ function T(f) {
 			};
 		}
 		return t;
-	}, J = a((e) => {
-		let t = z.current;
+	}, X = a((e) => {
+		let t = V.current;
 		if (!t) return;
 		let n = e.target.getBoundingClientRect(), r = {
 			width: t.naturalWidth,
 			height: t.naturalHeight
-		}, i = q(r, {
+		}, i = D(Y(r, {
 			width: e.clientX - n.left,
 			height: e.clientY - n.top
-		});
-		i.width > 50 && i.height > 50 && i.width <= 700 && i.height <= 900 && (t.style.width = `${i.width}px`, t.style.height = `${i.height}px`, W({
+		}), M, N);
+		i.width > 50 && i.height > 50 && (t.style.width = `${i.width}px`, t.style.height = `${i.height}px`, K({
 			width: i.width,
 			height: i.height
 		}));
-	}, [_, W]), Y = a((e) => {
-		W(e);
-	}, [_, W]), X = a(() => {
-		window.removeEventListener("mousemove", J), window.removeEventListener("mouseup", X);
-	}, [J]), Z = a(() => {
-		window.addEventListener("mousemove", J), window.addEventListener("mouseup", X);
-	}, [J, X]), Q = {
+	}, [
+		_,
+		K,
+		M,
+		N
+	]), Z = a((e) => {
+		K(e);
+	}, [_, K]), Q = a(() => {
+		window.removeEventListener("mousemove", X), window.removeEventListener("mouseup", Q);
+	}, [X]), $ = a(() => {
+		window.addEventListener("mousemove", X), window.addEventListener("mouseup", Q);
+	}, [X, Q]), te = {
 		width: w(m.attrs.width),
 		height: w(m.attrs.height),
 		objectFit: "contain"
-	}, $ = {
+	}, ne = {
 		left: "flex-start",
 		center: "center",
 		right: "flex-end"
 	}[m.attrs.alignment] || "flex-start";
 	return /* @__PURE__ */ g(d, { children: [/* @__PURE__ */ g(b, {
-		onFocus: T,
+		onFocus: O,
 		loading: !m.attrs.loaded,
 		pendingDelete: m.attrs.deleteStatus === "pending",
-		style: { justifyContent: $ },
+		style: { justifyContent: ne },
 		children: [/* @__PURE__ */ h(y, {
 			mode: "determinate",
 			value: m.attrs.percent || 0,
@@ -170,21 +189,21 @@ function T(f) {
 			onDragStart: (e) => e.preventDefault(),
 			children: [/* @__PURE__ */ h(S, {
 				...v,
-				active: D && m.attrs.loaded,
+				active: A && m.attrs.loaded,
 				draggable: !1,
-				ref: z,
+				ref: V,
 				src: m.attrs.src,
-				style: Q,
-				onLoad: K,
+				style: te,
+				onLoad: J,
 				alt: m.attrs.alt
 			}), /* @__PURE__ */ h(C, {
-				ref: B,
+				ref: H,
 				className: "resize",
 				style: { display: _.isEditable ? void 0 : "none" }
 			})]
 		})]
-	}), I && _._tiptapContainerEl && p.createPortal(/* @__PURE__ */ h("div", {
-		ref: V,
+	}), R && _._tiptapContainerEl && p.createPortal(/* @__PURE__ */ h("div", {
+		ref: U,
 		style: {
 			zIndex: 20,
 			background: e,
@@ -194,31 +213,29 @@ function T(f) {
 		children: /* @__PURE__ */ h(t, {
 			showDone: !0,
 			deletable: !0,
-			toolbarOpts: O.toolbarOpts || {},
+			toolbarOpts: j.toolbarOpts || {},
 			onDelete: () => {
-				let e = U();
-				e !== null && (O.imageHandling?.onDelete?.(R.current), _.view.dispatch(_.state.tr.delete(e, e + _.state.doc.nodeAt(e).nodeSize)), L(!1), _.commands.focus());
+				let e = G();
+				e !== null && (j.imageHandling?.onDelete?.(B.current), _.view.dispatch(_.state.tr.delete(e, e + _.state.doc.nodeAt(e).nodeSize)), z(!1), _.commands.focus());
 			},
 			onDone: () => {
-				L(!1), O.imageHandling?.onDone?.(_), _.commands.focus("end");
+				z(!1), j.imageHandling?.onDone?.(_), _.commands.focus("end");
 			},
 			children: /* @__PURE__ */ h(i, {
-				disableImageAlignmentButtons: O.imageHandling?.disableImageAlignmentButtons,
+				disableImageAlignmentButtons: j.imageHandling?.disableImageAlignmentButtons,
 				alt: m.attrs.alt,
 				imageLoaded: m.attrs.loaded,
 				alignment: m.attrs.alignment || "left",
-				onChange: Y
+				onChange: Z
 			})
 		})
 	}), _._tiptapContainerEl)] });
 }
-T.propTypes = {
+O.propTypes = {
 	node: m.object.isRequired,
 	editor: m.object.isRequired,
 	attributes: m.object,
-	onFocus: m.func,
-	maxImageWidth: m.number,
-	maxImageHeight: m.number
+	onFocus: m.func
 };
 //#endregion
-export { T as default };
+export { O as default };

package/dist/extensions/image.js

@@ -34,19 +34,31 @@ var f = a.create({
 	draggable: !0,
 	addAttributes() {
 		return {
-			nodeKey: { default: null },
-			loaded: { default: !1 },
+			nodeKey: {
+				default: null,
+				parseHTML: (e) => e.getAttribute("nodeKey") || t()
+			},
+			loaded: {
+				default: !1,
+				parseHTML: (e) => e.hasAttribute("loaded") ? e.getAttribute("loaded") !== "false" : !/^data:/i.test(e.getAttribute("src") ?? "")
+			},
 			deleteStatus: { default: null },
 			alignment: { default: null },
 			percent: { default: null },
-			width: { default: null },
-			height: { default: null },
+			width: {
+				default: null,
+				parseHTML: (e) => parseInt(e.getAttribute("width"), 10) || null
+			},
+			height: {
+				default: null,
+				parseHTML: (e) => parseInt(e.getAttribute("height"), 10) || null
+			},
 			src: { default: null },
 			alt: { default: null }
 		};
 	},
 	parseHTML() {
-		return [{ tag: "img[data-type=\"image-upload-node\"]" }];
+		return [{ tag: "img[data-type=\"image-upload-node\"]" }, { tag: "img[src]" }];
 	},
 	renderHTML({ HTMLAttributes: e }) {
 		return ["img", o(e, { "data-type": "image-upload-node" })];

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.20261020062838",
+  "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.20261019223635",
-    "@pie-lib/math-input": "9.0.7-next.20261019223635",
-    "@pie-lib/math-toolbar": "4.0.7-next.20261019223635",
-    "@pie-lib/render-ui": "8.0.7-next.20261019223635",
+    "@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",
@@ -43,10 +43,10 @@
     "react-portal": "^4.2.0",
     "tippy.js": "latest",
     "to-style": "^1.3.3",
-    "@pie-element/shared-lodash": "0.1.3-next.20261019151920",
+    "@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",