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

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,46 @@ 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,
+		l.configure(K),
+		c.configure(K),
+		u.configure(K),
+		te.configure(K),
+		re.configure({
+			toolbarOpts: P,
 			math: y.pluginProps?.math || {}
 		}),
 		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 +260,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,10 +274,10 @@ 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]);
 	m(() => {
@@ -287,12 +285,12 @@ var C = {
 	}, [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 +304,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 +327,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 +374,4 @@ var C = {
 	}
 }));
 //#endregion
-export { j as EditableHtml, j as default };
+export { A as EditableHtml, A as default };

package/dist/extensions/css.d.ts

@@ -1,3 +1,2 @@
 import { Mark } from '@tiptap/core';
-export declare const removeDialogs: () => void;
 export declare const CSSMark: Mark<any, any>;

package/dist/extensions/css.js

@@ -6,28 +6,31 @@ import { createRoot as a } from "react-dom/client";
 import o from "@mui/material/List";
 import s from "@mui/material/ListItem";
 //#region src/extensions/css.tsx
-var c = () => {
-	document.querySelectorAll(".insert-css-dialog").forEach((e) => e.remove());
-}, l = ({ editor: e, callback: t, opts: l, selectedText: u, parentNode: d }) => {
+var c = null, l = ({ editor: e, callback: t, opts: l, selectedText: u, parentNode: d }) => {
+	c?.();
 	let f = e.options.element, p = document.createElement("div"), { selection: m } = e.state;
-	c(), p.className = "insert-css-dialog";
+	p.className = "insert-css-dialog";
 	let h = a(p), g, _ = !1, v = (e) => {
 		if (_) {
 			let t = p.contains(e.target) || g, n = f.contains(e.target);
-			t || n || y();
+			t || n || b();
 		} else _ = !0;
 	}, y = () => {
-		t(void 0, !0), h.unmount(), p.remove(), document.body.removeEventListener("click", v);
-	}, b = (e) => {
-		t(e, !0), h.unmount(), p.remove(), document.body.removeEventListener("click", v);
-	}, x = d?.attrs.class, S = (e) => {
+		h.unmount(), p.remove(), document.body.removeEventListener("click", v), c === y && (c = null);
+	};
+	c = y;
+	let b = () => {
+		t(void 0, !0), y();
+	}, x = (e) => {
+		t(e, !0), y();
+	}, S = d?.attrs.class, C = (e) => {
 		let t = `<span class="${e}">${u}</span>`;
 		if (d) {
 			let e = "span";
-			d?.object === "inline" && (e = "span"), d?.object === "block" && (e = "div"), t = `<${e} class="${x}">${d.text.slice(0, m.$anchor.textOffset)}${t}${d.text.slice(m.$head.textOffset)}</${e}>`;
+			d?.object === "inline" && (e = "span"), d?.object === "block" && (e = "div"), t = `<${e} class="${S}">${d.text.slice(0, m.$anchor.textOffset)}${t}${d.text.slice(m.$head.textOffset)}</${e}>`;
 		}
 		return t;
-	}, C = /* @__PURE__ */ i("div", {
+	}, w = /* @__PURE__ */ i("div", {
 		style: {
 			background: "white",
 			height: 500,
@@ -38,22 +41,22 @@ var c = () => {
 		},
 		children: [
 			/* @__PURE__ */ r("h2", { children: "Please choose a css class" }),
-			x && /* @__PURE__ */ i("div", { children: ["The current parent has this class ", x] }),
+			S && /* @__PURE__ */ i("div", { children: ["The current parent has this class ", S] }),
 			/* @__PURE__ */ r(o, {
 				component: "nav",
 				style: { overflow: "scroll" },
 				children: l.names.map((e, t) => /* @__PURE__ */ i(s, {
 					button: !0,
-					onClick: () => b(e),
+					onClick: () => x(e),
 					children: [/* @__PURE__ */ r("div", {
 						style: { marginRight: 20 },
 						children: e
-					}), /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: S(e) } })]
+					}), /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: C(e) } })]
 				}, `rule-${t}`))
 			})
 		]
 	});
-	n(() => h.render(C)), (() => {
+	n(() => h.render(w)), (() => {
 		let t = e.view.nodeDOM(e.state.selection.from)?.parentNode;
 		if (t) {
 			let e = f.parentElement.parentElement.parentElement.getBoundingClientRect(), n = t.getBoundingClientRect();
@@ -118,4 +121,4 @@ var c = () => {
 	}
 });
 //#endregion
-export { u as CSSMark, c as removeDialogs };
+export { u as CSSMark };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.1.2-next.20261019223635",
+  "version": "3.1.2-next.20261020155912",
   "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.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/translator": "5.0.2-next.20261019155156",
     "@tiptap/core": "3.32.0",
     "@tiptap/extension-character-count": "3.32.0",
@@ -43,7 +43,7 @@
     "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",