@pie-lib/editable-html-tip-tap 3.0.0-next.35 → 3.0.0-next.36

package/dist/components/MenuBar.js

@@ -508,9 +508,12 @@ var W = (e) => {
 		top: "-45px"
 	},
 	"& .toolbarRight": { right: 0 },
-	"& .fullWidth": { width: "100%" },
+	"& .fullWidth": {
+		width: "fit-content",
+		minWidth: "100%"
+	},
 	"& .hidden": { visibility: "hidden" },
-	"& .autoWidth": { width: "auto" },
+	"& .autoWidth": { width: "fit-content" },
 	"& .focused": {
 		opacity: 1,
 		pointerEvents: "auto"

package/dist/components/image/InsertImageHandler.d.ts

@@ -16,6 +16,7 @@
  */
 declare class InsertImageHandler {
     constructor(editor: any, nodeInfo: any, onFinish: any, isPasted?: boolean);
+    resolveNodePos(): any;
     cancel(): void;
     updateNode(newAttrs: any): void;
     deleteNode(): void;

package/dist/components/image/InsertImageHandler.js

@@ -1,11 +1,16 @@
-import e from "debug";
+import e from "./findImageNode.js";
+import t from "debug";
 //#region src/components/image/InsertImageHandler.ts
-var t = e("@pie-lib:editable-html:image:insert-image-handler"), n = class {
+var n = t("@pie-lib:editable-html:image:insert-image-handler"), r = class {
 	constructor(e, t, n, r = !1) {
-		this.editor = e, this.nodeInfo = t, this.node = t[0], this.nodePos = t[1], this.onFinish = n, this.isPasted = r, this.chosenFile = null;
+		this.editor = e, this.nodeInfo = t, this.node = t[0], this.nodePos = t[1], this.onFinish = n, this.isPasted = r, this.chosenFile = null, this.nodeKey = this.node?.attrs?.nodeKey || null;
+	}
+	resolveNodePos() {
+		let t = e(this.editor, this.nodeKey);
+		return t ? t[1] : this.nodeKey ? null : this.nodePos;
 	}
 	cancel() {
-		t("insert cancelled");
+		n("insert cancelled");
 		try {
 			this.deleteNode(), this.onFinish(!1);
 		} catch {} finally {
@@ -13,41 +18,48 @@ var t = e("@pie-lib:editable-html:image:insert-image-handler"), n = class {
 		}
 	}
 	updateNode(e) {
-		let { state: t, view: n } = this.editor, { tr: r } = t, i = t.doc.nodeAt(this.nodePos);
-		if (i) {
-			let t = r.setNodeMarkup(this.nodePos, void 0, {
-				...i.attrs,
+		let t = this.resolveNodePos();
+		if (t === null) {
+			n("[updateNode] node is gone, dropping update: ", e);
+			return;
+		}
+		let { state: r, view: i } = this.editor, { tr: a } = r, o = r.doc.nodeAt(t);
+		if (o) {
+			let n = a.setNodeMarkup(t, void 0, {
+				...o.attrs,
 				...e
 			});
-			n.dispatch(t);
+			i.dispatch(n);
 		}
 	}
 	deleteNode() {
-		let { state: e, view: t } = this.editor, { tr: n } = e, r = n.delete(this.nodePos, this.nodePos + this.node.nodeSize);
-		t.dispatch(r);
+		let e = this.resolveNodePos();
+		if (e === null) return;
+		let { state: t, view: n } = this.editor, { tr: r } = t, i = t.doc.nodeAt(e) || this.node, a = r.delete(e, e + i.nodeSize);
+		n.dispatch(a);
 	}
-	done(e, n) {
-		t("done: err:", e), e ? (console.log(e), this.onFinish(!1)) : (this.updateNode({
+	done(e, t) {
+		n("done: err:", e), e ? (console.log(e), this.onFinish(!1)) : (this.updateNode({
 			loaded: !0,
-			src: n,
+			src: t,
 			percent: 100
 		}), this.onFinish(!0)), this.editor._insertingImage = !1;
 	}
 	fileChosen(e) {
 		if (!e) return;
-		this.chosenFile = e, this.editor._insertingImage = !1, t("[fileChosen] file: ", e);
-		let n = new FileReader();
-		n.onload = () => {
-			let e = n.result;
+		this.chosenFile = e, this.editor._insertingImage = !1, n("[fileChosen] file: ", e);
+		let t = new FileReader();
+		t.onload = () => {
+			let e = t.result;
 			this.updateNode({ src: e });
-		}, n.readAsDataURL(e);
+		}, t.readAsDataURL(e);
 	}
-	progress(e, n, r) {
-		t("progress: ", e, n, r), this.updateNode({ percent: e });
+	progress(e, t, r) {
+		n("progress: ", e, t, r), this.updateNode({ percent: e });
 	}
 	getChosenFile() {
 		return this.chosenFile;
 	}
 };
 //#endregion
-export { n as default };
+export { r as default };

package/dist/components/image/findImageNode.d.ts

@@ -0,0 +1,3 @@
+export declare const findImageNodeByKey: (editor: any, nodeKey: any) => null;
+export declare const newImageNodeKey: () => string;
+export default findImageNodeByKey;

package/dist/components/image/findImageNode.js

@@ -0,0 +1,11 @@
+//#region src/components/image/findImageNode.ts
+var e = (e, t) => {
+	if (!e || !t) return null;
+	let n = null;
+	return e.state.doc.descendants((e, r) => {
+		if (n !== null) return !1;
+		if (e.type.name === "imageUploadNode" && e.attrs.nodeKey === t) return n = [e, r], !1;
+	}), n;
+}, t = () => `img-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+//#endregion
+export { e as default, e as findImageNodeByKey, t as newImageNodeKey };

package/dist/extensions/image-component.js

@@ -1,25 +1,26 @@
 import e from "./custom-toolbar-wrapper.js";
-import t from "../components/image/InsertImageHandler.js";
-import { ImageToolbar as n } from "../components/image/ImageToolbar.js";
-import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-import { isEqual as c } from "@pie-element/shared-lodash";
-import { NodeViewWrapper as l } from "@tiptap/react";
-import { styled as u } from "@mui/material/styles";
-import d from "react-dom";
-import f from "prop-types";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "debug";
-import g from "@mui/material/LinearProgress";
+import t from "../components/image/findImageNode.js";
+import n from "../components/image/InsertImageHandler.js";
+import { ImageToolbar as r } from "../components/image/ImageToolbar.js";
+import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { isEqual as l } from "@pie-element/shared-lodash";
+import { NodeViewWrapper as u } from "@tiptap/react";
+import { styled as d } from "@mui/material/styles";
+import f from "react-dom";
+import p from "prop-types";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "debug";
+import _ from "@mui/material/LinearProgress";
 //#region src/extensions/image-component.tsx
-h("@pie-lib:editable-html:plugins:image:component");
-var _ = u(g, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress: e }) => ({
+g("@pie-lib:editable-html:plugins:image:component");
+var v = d(_, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress: e }) => ({
 	position: "absolute",
 	left: "0",
 	width: "fit-content",
 	top: "0%",
 	transition: "opacity 200ms linear",
 	...e && { opacity: 0 }
-})), v = u("div", { shouldForwardProp: (e) => ![
+})), y = d("div", { shouldForwardProp: (e) => ![
 	"active",
 	"loading",
 	"pendingDelete"
@@ -29,13 +30,13 @@ var _ = u(g, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress
 	transition: "opacity 200ms linear",
 	...e && { opacity: .3 },
 	...t && { opacity: .3 }
-})), y = u("div")(({ theme: e }) => ({
+})), b = d("div")(({ theme: e }) => ({
 	position: "relative",
 	width: "fit-content",
 	display: "flex",
 	alignItems: "center",
 	"&&:hover > .resize": { display: "block" }
-})), b = u("img", { shouldForwardProp: (e) => e !== "active" })(({ theme: e, active: t }) => ({ border: t ? `solid 1px ${e.palette.primary.main}` : "solid 1px transparent" })), x = u("div")(({ theme: e }) => ({
+})), x = d("img", { shouldForwardProp: (e) => e !== "active" })(({ theme: e, active: t }) => ({ border: t ? `solid 1px ${e.palette.primary.main}` : "solid 1px transparent" })), S = d("div")(({ theme: e }) => ({
 	backgroundColor: e.palette.primary.main,
 	cursor: "col-resize",
 	height: "35px",
@@ -44,80 +45,77 @@ var _ = u(g, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress
 	marginLeft: "5px",
 	marginRight: "10px",
 	display: "none"
-})), S = (e) => e ? `${e}px` : "calc(20px)";
-function C(u) {
-	let { node: f, editor: h, attributes: g, onFocus: C, getPos: w, selected: T, options: E, maxImageWidth: D = 700, maxImageHeight: O = 900 } = u, { alt: k } = f.attrs, A = w(), j = h.state.selection.from, M = h.state.selection.to, N = a(() => j + f.nodeSize === M, [
-		j,
+})), C = (e) => e ? `${e}px` : "calc(20px)";
+function w(d) {
+	let { node: p, editor: g, attributes: _, onFocus: w, getPos: T, selected: E, options: D, maxImageWidth: O = 700, maxImageHeight: k = 900 } = d, { alt: A } = p.attrs, j = T(), M = g.state.selection.from, N = g.state.selection.to, P = o(() => M + p.nodeSize === N, [
 		M,
-		f.nodeSize
-	]), [P, F] = s(!1), I = o(f), L = o(null), R = o(null), z = o(null), B = r((e) => {
-		let t = e / L.current.naturalWidth * 4;
+		N,
+		p.nodeSize
+	]), [F, I] = c(!1), L = s(p), R = s(null), z = s(null), B = s(null), V = i((e) => {
+		let t = e / R.current.naturalWidth * 4;
 		return parseInt(t.toFixed(0) * 25, 10);
-	}, []), V = r(() => {
-		let e = I.current.attrs.nodeKey, t = null;
-		return h.state.doc.descendants((n, r) => {
-			if (t !== null) return !1;
-			if (n.type.name === "imageUploadNode" && n.attrs.nodeKey === e) return t = r, !1;
-		}), t;
-	}, [h]), H = r((e) => {
-		let t = V();
+	}, []), H = i(() => {
+		let e = t(g, L.current.attrs.nodeKey);
+		return e ? e[1] : null;
+	}, [g]), U = i((e) => {
+		let t = H();
 		if (t === null) return;
-		let n = h.state.doc.nodeAt(t);
-		n && h.view.dispatch(h.state.tr.setNodeMarkup(t, void 0, {
+		let n = g.state.doc.nodeAt(t);
+		n && g.view.dispatch(g.state.tr.setNodeMarkup(t, void 0, {
 			...n.attrs,
 			...e
 		}));
-	}, [h, V]), U = r(() => {
-		if (!f.attrs.width || !L.current || !L.current.naturalWidth) return;
-		let e = B(f.attrs.width);
-		f.attrs.resizePercent !== e && H({ resizePercent: e });
+	}, [g, H]), W = i(() => {
+		if (!p.attrs.width || !R.current || !R.current.naturalWidth) return;
+		let e = V(p.attrs.width);
+		p.attrs.resizePercent !== e && U({ resizePercent: e });
 	}, [
-		f.attrs.width,
-		f.attrs.resizePercent,
-		B,
-		H
+		p.attrs.width,
+		p.attrs.resizePercent,
+		V,
+		U
 	]);
-	i(() => {
-		I.current = {
-			...f,
-			pos: A
+	a(() => {
+		L.current = {
+			...p,
+			pos: j
 		};
-	}, [f, A]), i(() => {
-		T ? N && h.isEditable && (!String(f.attrs?.src ?? "").trim() && E.imageHandling?.insertImageRequested && E.imageHandling.insertImageRequested(h, [f, A], (e) => new t(h, [f, A], e)), F(T)) : F(T);
+	}, [p, j]), a(() => {
+		E ? P && g.isEditable && (!String(p.attrs?.src ?? "").trim() && D.imageHandling?.insertImageRequested && D.imageHandling.insertImageRequested(g, [p, j], (e) => new n(g, [p, j], e)), I(E)) : I(E);
 	}, [
-		N,
-		T,
-		h.isEditable
-	]), i(() => {
-		U();
-		let e = R?.current;
-		return e && h.isEditable && e.addEventListener("mousedown", Y, !1), () => {
-			e && e.removeEventListener("mousedown", Y, !1);
+		P,
+		E,
+		g.isEditable
+	]), a(() => {
+		W();
+		let e = z?.current;
+		return e && g.isEditable && e.addEventListener("mousedown", X, !1), () => {
+			e && e.removeEventListener("mousedown", X, !1);
 		};
-	}, []), i(() => {
-		U();
+	}, []), a(() => {
+		W();
 	});
-	let W = r(() => {
-		let e = L.current;
+	let G = i(() => {
+		let e = R.current;
 		if (e && (!e.style.width || e.style.width === "calc(20px)")) {
-			let t = Math.min(e.naturalWidth, D), n = Math.min(e.naturalHeight, O);
+			let t = Math.min(e.naturalWidth, O), n = Math.min(e.naturalHeight, k);
 			e.style.width = `${t}px`, e.style.height = `${n}px`;
 			let r = {
 				width: t,
 				height: n
 			};
-			c(r, {
-				width: f.attrs.width,
-				height: f.attrs.height
-			}) || H(r);
+			l(r, {
+				width: p.attrs.width,
+				height: p.attrs.height
+			}) || U(r);
 		}
 	}, [
-		f.attrs.width,
-		f.attrs.height,
-		D,
+		p.attrs.width,
+		p.attrs.height,
 		O,
-		H
-	]), G = (e, t, n = !0, r) => {
+		k,
+		U
+	]), K = (e, t, n = !0, r) => {
 		if (n) {
 			let n = e.width / e.height;
 			return r === "height" ? {
@@ -129,97 +127,97 @@ function C(u) {
 			};
 		}
 		return t;
-	}, K = r((e) => {
-		let t = L.current;
+	}, q = i((e) => {
+		let t = R.current;
 		if (!t) return;
 		let n = e.target.getBoundingClientRect(), r = {
 			width: t.naturalWidth,
 			height: t.naturalHeight
-		}, i = G(r, {
+		}, i = K(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`, H({
+		i.width > 50 && i.height > 50 && i.width <= 700 && i.height <= 900 && (t.style.width = `${i.width}px`, t.style.height = `${i.height}px`, U({
 			width: i.width,
 			height: i.height
 		}));
-	}, [h, H]), q = r((e) => {
-		H(e);
-	}, [h, H]), J = r(() => {
-		window.removeEventListener("mousemove", K), window.removeEventListener("mouseup", J);
-	}, [K]), Y = r(() => {
-		window.addEventListener("mousemove", K), window.addEventListener("mouseup", J);
-	}, [K, J]), X = {
-		width: S(f.attrs.width),
-		height: S(f.attrs.height),
+	}, [g, U]), J = i((e) => {
+		U(e);
+	}, [g, U]), Y = i(() => {
+		window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", Y);
+	}, [q]), X = i(() => {
+		window.addEventListener("mousemove", q), window.addEventListener("mouseup", Y);
+	}, [q, Y]), Z = {
+		width: C(p.attrs.width),
+		height: C(p.attrs.height),
 		objectFit: "contain"
-	}, Z = {
+	}, Q = {
 		left: "flex-start",
 		center: "center",
 		right: "flex-end"
-	}[f.attrs.alignment] || "flex-start";
-	return /* @__PURE__ */ m(l, { children: [/* @__PURE__ */ m(v, {
-		onFocus: C,
-		loading: !f.attrs.loaded,
-		pendingDelete: f.attrs.deleteStatus === "pending",
-		style: { justifyContent: Z },
-		children: [/* @__PURE__ */ p(_, {
+	}[p.attrs.alignment] || "flex-start";
+	return /* @__PURE__ */ h(u, { children: [/* @__PURE__ */ h(y, {
+		onFocus: w,
+		loading: !p.attrs.loaded,
+		pendingDelete: p.attrs.deleteStatus === "pending",
+		style: { justifyContent: Q },
+		children: [/* @__PURE__ */ m(v, {
 			mode: "determinate",
-			value: f.attrs.percent || 0,
-			hideProgress: f.attrs.loaded
-		}), /* @__PURE__ */ m(y, {
+			value: p.attrs.percent || 0,
+			hideProgress: p.attrs.loaded
+		}), /* @__PURE__ */ h(b, {
 			onDragStart: (e) => e.preventDefault(),
-			children: [/* @__PURE__ */ p(b, {
-				...g,
-				active: T && f.attrs.loaded,
+			children: [/* @__PURE__ */ m(x, {
+				..._,
+				active: E && p.attrs.loaded,
 				draggable: !1,
-				ref: L,
-				src: f.attrs.src,
-				style: X,
-				onLoad: W,
-				alt: f.attrs.alt
-			}), /* @__PURE__ */ p(x, {
 				ref: R,
+				src: p.attrs.src,
+				style: Z,
+				onLoad: G,
+				alt: p.attrs.alt
+			}), /* @__PURE__ */ m(S, {
+				ref: z,
 				className: "resize",
-				style: { display: h.isEditable ? void 0 : "none" }
+				style: { display: g.isEditable ? void 0 : "none" }
 			})]
 		})]
-	}), P && h._tiptapContainerEl && d.createPortal(/* @__PURE__ */ p("div", {
-		ref: z,
+	}), F && g._tiptapContainerEl && f.createPortal(/* @__PURE__ */ m("div", {
+		ref: B,
 		style: {
 			zIndex: 20,
 			background: "var(--editable-html-toolbar-bg, #efefef)",
 			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)",
 			width: "100%"
 		},
-		children: /* @__PURE__ */ p(e, {
+		children: /* @__PURE__ */ m(e, {
 			showDone: !0,
 			deletable: !0,
-			toolbarOpts: E.toolbarOpts || {},
+			toolbarOpts: D.toolbarOpts || {},
 			onDelete: () => {
-				let e = V();
-				e !== null && (E.imageHandling?.onDelete?.(I.current), h.view.dispatch(h.state.tr.delete(e, e + h.state.doc.nodeAt(e).nodeSize)), F(!1), h.commands.focus());
+				let e = H();
+				e !== null && (D.imageHandling?.onDelete?.(L.current), g.view.dispatch(g.state.tr.delete(e, e + g.state.doc.nodeAt(e).nodeSize)), I(!1), g.commands.focus());
 			},
 			onDone: () => {
-				F(!1), E.imageHandling?.onDone?.(h), h.commands.focus("end");
+				I(!1), D.imageHandling?.onDone?.(g), g.commands.focus("end");
 			},
-			children: /* @__PURE__ */ p(n, {
-				disableImageAlignmentButtons: E.imageHandling?.disableImageAlignmentButtons,
-				alt: f.attrs.alt,
-				imageLoaded: f.attrs.loaded,
-				alignment: f.attrs.alignment || "left",
-				onChange: q
+			children: /* @__PURE__ */ m(r, {
+				disableImageAlignmentButtons: D.imageHandling?.disableImageAlignmentButtons,
+				alt: p.attrs.alt,
+				imageLoaded: p.attrs.loaded,
+				alignment: p.attrs.alignment || "left",
+				onChange: J
 			})
 		})
-	}), h._tiptapContainerEl)] });
+	}), g._tiptapContainerEl)] });
 }
-C.propTypes = {
-	node: f.object.isRequired,
-	editor: f.object.isRequired,
-	attributes: f.object,
-	onFocus: f.func,
-	maxImageWidth: f.number,
-	maxImageHeight: f.number
+w.propTypes = {
+	node: p.object.isRequired,
+	editor: p.object.isRequired,
+	attributes: p.object,
+	onFocus: p.func,
+	maxImageWidth: p.number,
+	maxImageHeight: p.number
 };
 //#endregion
-export { C as default };
+export { w as default };

package/dist/extensions/image.js

@@ -1,11 +1,13 @@
-import e from "./image-component.js";
+import e, { newImageNodeKey as t } from "../components/image/findImageNode.js";
+import n from "../components/image/InsertImageHandler.js";
+import r from "./image-component.js";
 import "react";
-import { ReactNodeViewRenderer as t } from "@tiptap/react";
-import { Node as n, mergeAttributes as r } from "@tiptap/core";
-import { Plugin as i } from "@tiptap/pm/state";
-import { jsx as a } from "react/jsx-runtime";
+import { ReactNodeViewRenderer as i } from "@tiptap/react";
+import { Node as a, mergeAttributes as o } from "@tiptap/core";
+import { Plugin as s } from "@tiptap/pm/state";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/extensions/image.tsx
-var o = n.create({
+var l = a.create({
 	name: "imageUploadNode",
 	group: "block",
 	atom: !0,
@@ -28,41 +30,48 @@ var o = n.create({
 		return [{ tag: "img[data-type=\"image-upload-node\"]" }];
 	},
 	renderHTML({ HTMLAttributes: e }) {
-		return ["img", r(e, { "data-type": "image-upload-node" })];
+		return ["img", o(e, { "data-type": "image-upload-node" })];
 	},
 	addNodeView() {
-		return t((t) => /* @__PURE__ */ a(e, {
-			...t,
+		return i((e) => /* @__PURE__ */ c(r, {
+			...e,
 			options: this.options
 		}));
 	},
 	addCommands() {
 		return { setImageUploadNode: () => ({ commands: e }) => e.insertContent({
 			type: this.name,
-			attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` }
+			attrs: { nodeKey: t() }
 		}) };
 	},
 	addProseMirrorPlugins() {
-		let e = this.editor;
-		return [new i({ props: { handlePaste(t, n) {
-			let r = Array.from(n.clipboardData?.items || []).find((e) => e.kind === "file" && e.type.startsWith("image/"));
-			if (!r) return !1;
-			let i = r.getAsFile();
-			if (!i) return !1;
-			let a = new FileReader();
-			return a.onload = () => {
-				let t = a.result;
-				typeof t == "string" && e.commands.insertContent({
+		let r = this.editor, i = this.options;
+		return [new s({ props: { handlePaste(a, o) {
+			let s = Array.from(o.clipboardData?.items || []).find((e) => e.kind === "file" && e.type.startsWith("image/"));
+			if (!s) return !1;
+			let c = s.getAsFile();
+			if (!c) return !1;
+			let l = i?.imageHandling?.insertImageRequested, u = t(), d = new FileReader();
+			return d.onload = () => {
+				let t = d.result;
+				if (typeof t != "string" || (r.commands.insertContent({
 					type: "imageUploadNode",
 					attrs: {
 						src: t,
-						loaded: !0,
-						nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`
+						loaded: !l,
+						nodeKey: u
 					}
+				}), !l)) return;
+				let i = e(r, u);
+				i && l(r, i, (e) => {
+					let t;
+					return t = new n(r, i, (n) => {
+						n || t?.updateNode({ loaded: !0 }), e(n);
+					}, !0), t.fileChosen(c), t;
 				});
-			}, a.readAsDataURL(i), !0;
+			}, d.readAsDataURL(c), !0;
 		} } })];
 	}
 });
 //#endregion
-export { o as ImageUploadNode };
+export { l as ImageUploadNode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.0.0-next.35",
+  "version": "3.0.0-next.36",
   "description": "",
   "repository": {
     "type": "git",
@@ -13,27 +13,27 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "4.1.0-next.41",
-    "@pie-lib/math-input": "9.0.0-next.6",
-    "@pie-lib/math-toolbar": "4.0.0-next.41",
-    "@pie-lib/render-ui": "6.2.0-next.41",
-    "@tiptap/core": "3.20.0",
-    "@tiptap/extension-character-count": "3.20.0",
-    "@tiptap/extension-color": "3.20.0",
+    "@pie-lib/drag": "4.1.0-next.42",
+    "@pie-lib/math-input": "9.0.0-next.7",
+    "@pie-lib/math-toolbar": "4.0.0-next.42",
+    "@pie-lib/render-ui": "6.2.0-next.42",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-character-count": "3.31.3",
+    "@tiptap/extension-color": "3.31.3",
     "@tiptap/extension-image": "3.31.3",
-    "@tiptap/extension-list-item": "3.20.0",
-    "@tiptap/extension-placeholder": "3.20.0",
-    "@tiptap/extension-subscript": "3.20.0",
-    "@tiptap/extension-superscript": "3.20.0",
-    "@tiptap/extension-table": "3.20.0",
-    "@tiptap/extension-table-cell": "3.20.0",
-    "@tiptap/extension-table-header": "3.30.5",
-    "@tiptap/extension-table-row": "3.30.1",
-    "@tiptap/extension-text-align": "3.20.0",
-    "@tiptap/extension-text-style": "3.20.0",
-    "@tiptap/pm": "3.30.2",
-    "@tiptap/react": "3.20.0",
-    "@tiptap/starter-kit": "3.20.0",
+    "@tiptap/extension-list-item": "3.31.3",
+    "@tiptap/extension-placeholder": "3.31.3",
+    "@tiptap/extension-subscript": "3.31.3",
+    "@tiptap/extension-superscript": "3.31.3",
+    "@tiptap/extension-table": "3.31.3",
+    "@tiptap/extension-table-cell": "3.31.3",
+    "@tiptap/extension-table-header": "3.31.3",
+    "@tiptap/extension-table-row": "3.31.3",
+    "@tiptap/extension-text-align": "3.31.3",
+    "@tiptap/extension-text-style": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
     "change-case": "^3.0.2",
     "debug": "^4.1.1",
     "immutable": "^4.0.0-rc.12",
@@ -48,8 +48,8 @@
     "clsx": "^2.1.1",
     "prosemirror-state": "^1.4.4",
     "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@tiptap/extensions": "^3.31.3",
-    "@tiptap/extension-list": "^3.20.0",
+    "@tiptap/extensions": "3.31.3",
+    "@tiptap/extension-list": "3.31.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0"
   },