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

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

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 export declare class AltDialog extends React.Component {
     static propTypes: {
         onDone: PropTypes.Validator<(...args: any[]) => any>;
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
         alt: PropTypes.Requireable<string>;
     };
     constructor(props: any);
-    closeDialog: any;
     onDone: any;
-    handleOverflow: any;
     render(): React.JSX.Element;
 }
 export default AltDialog;

package/dist/components/image/AltDialog.js

@@ -11,6 +11,7 @@ import l from "@mui/material/Dialog";
 var u = class extends e.Component {
 	static propTypes = {
 		onDone: t.func.isRequired,
+		onClose: t.func.isRequired,
 		alt: t.string
 	};
 	constructor(e) {
@@ -18,28 +19,18 @@ var u = class extends e.Component {
 		let { alt: t } = e;
 		this.state = { value: t };
 	}
-	closeDialog = () => {
-		document.querySelectorAll("#text-dialog").forEach(function(e) {
-			return e.remove();
-		});
-	};
 	onDone = () => {
-		let { onDone: e } = this.props, { value: t } = this.state;
-		e(t), this.closeDialog();
-	};
-	handleOverflow = () => {
-		document.body.style.removeProperty("overflow");
+		let { onDone: e, onClose: t } = this.props, { value: n } = this.state;
+		e(n), t();
 	};
 	render() {
 		let { value: e } = this.state;
 		return /* @__PURE__ */ r(l, {
 			open: !0,
-			disablePortal: !0,
-			onClose: this.closeDialog,
+			onClose: this.props.onClose,
 			id: "text-dialog",
 			hideBackdrop: !0,
 			disableScrollLock: !0,
-			onEntered: this.handleOverflow,
 			children: [/* @__PURE__ */ n(i, { children: /* @__PURE__ */ r("div", {
 				style: { display: "flex" },
 				children: [/* @__PURE__ */ n(a, { style: { paddingTop: "6px" } }), /* @__PURE__ */ n(o, {

package/dist/components/image/ImageToolbar.js

@@ -2,12 +2,12 @@ import { AltDialog as e } from "./AltDialog.js";
 import { MarkButton as t } from "../common/toolbar-buttons.js";
 import n from "react";
 import { styled as r } from "@mui/material/styles";
-import i from "react-dom";
-import a from "prop-types";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "debug";
+import i from "prop-types";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "debug";
+import { createRoot as l } from "react-dom/client";
 //#region src/components/image/ImageToolbar.tsx
-var u = l("@pie-lib:editable-html:plugins:image:image-toolbar"), d = r("div")(({ theme: e }) => ({
+var u = c("@pie-lib:editable-html:plugins:image:image-toolbar"), d = r("div")(({ theme: e }) => ({
 	paddingLeft: e.spacing.unit,
 	display: "flex",
 	alignItems: "center"
@@ -18,24 +18,24 @@ var u = l("@pie-lib:editable-html:plugins:image:image-toolbar"), d = r("div")(({
 		paddingLeft: 8,
 		marginLeft: 4
 	}
-})), p = ({ alignment: e, active: n, onClick: r }) => /* @__PURE__ */ s(t, {
+})), p = ({ alignment: e, active: n, onClick: r }) => /* @__PURE__ */ o(t, {
 	active: n,
 	onToggle: () => r(e),
 	label: e,
 	children: e
 });
 p.propTypes = {
-	alignment: a.string.isRequired,
-	active: a.bool.isRequired,
-	onClick: a.func.isRequired
+	alignment: i.string.isRequired,
+	active: i.bool.isRequired,
+	onClick: i.func.isRequired
 };
 var m = class extends n.Component {
 	static propTypes = {
-		onChange: a.func.isRequired,
-		alignment: a.string,
-		alt: a.string,
-		imageLoaded: a.bool,
-		disableImageAlignmentButtons: a.bool
+		onChange: i.func.isRequired,
+		alignment: i.string,
+		alt: i.string,
+		imageLoaded: i.bool,
+		disableImageAlignmentButtons: i.bool
 	};
 	onAltTextDone = (e) => {
 		u("[onAltTextDone]: alt:", e), this.props.onChange({ alt: e }, !0);
@@ -44,31 +44,34 @@ var m = class extends n.Component {
 		u("[onAlignmentClick]: alignment:", e), this.props.onChange({ alignment: e });
 	};
 	renderDialog = () => {
-		let { alt: t } = this.props, n = document.createElement("div"), r = /* @__PURE__ */ s(e, {
+		let { alt: t } = this.props, n = document.createElement("div"), r = l(n);
+		r.render(/* @__PURE__ */ o(e, {
 			alt: t,
-			onDone: this.onAltTextDone
-		});
-		i.render(r, n), document.body.appendChild(n);
+			onDone: this.onAltTextDone,
+			onClose: () => {
+				r.unmount(), n.remove();
+			}
+		})), document.body.appendChild(n);
 	};
 	render() {
 		let { alignment: e, imageLoaded: t, disableImageAlignmentButtons: n } = this.props;
-		return /* @__PURE__ */ c(d, { children: [!n && /* @__PURE__ */ c(o, { children: [
-			/* @__PURE__ */ s(p, {
+		return /* @__PURE__ */ s(d, { children: [!n && /* @__PURE__ */ s(a, { children: [
+			/* @__PURE__ */ o(p, {
 				alignment: "left",
 				active: e === "left",
 				onClick: this.onAlignmentClick
 			}),
-			/* @__PURE__ */ s(p, {
+			/* @__PURE__ */ o(p, {
 				alignment: "center",
 				active: e === "center",
 				onClick: this.onAlignmentClick
 			}),
-			/* @__PURE__ */ s(p, {
+			/* @__PURE__ */ o(p, {
 				alignment: "right",
 				active: e === "right",
 				onClick: this.onAlignmentClick
 			})
-		] }), /* @__PURE__ */ s(f, {
+		] }), /* @__PURE__ */ o(f, {
 			disabled: !t,
 			hasAlignmentButtons: !n,
 			onMouseDown: (e) => t && this.renderDialog(e),

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

@@ -1,32 +1,36 @@
 import "react";
 import { Mark as e, mergeAttributes as t } from "@tiptap/core";
-import n from "react-dom";
+import { flushSync as n } from "react-dom";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@mui/material/List";
-import o from "@mui/material/ListItem";
+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 s = () => {
-	document.querySelectorAll(".insert-css-dialog").forEach((e) => e.remove());
-}, c = ({ editor: e, callback: t, opts: c, selectedText: l, parentNode: u }) => {
-	let d = e.options.element, f = document.createElement("div"), { selection: p } = e.state;
-	s(), f.className = "insert-css-dialog";
-	let m, h = !1, g = (e) => {
-		if (h) {
-			let t = f.contains(e.target) || m, n = d.contains(e.target);
-			t || n || _();
-		} else h = !0;
-	}, _ = () => {
-		t(void 0, !0), f.remove(), document.body.removeEventListener("click", g);
-	}, v = (e) => {
-		t(e, !0), f.remove(), document.body.removeEventListener("click", g);
-	}, y = u?.attrs.class, b = (e) => {
-		let t = `<span class="${e}">${l}</span>`;
-		if (u) {
+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;
+	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 || b();
+		} else _ = !0;
+	}, y = () => {
+		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";
-			u?.object === "inline" && (e = "span"), u?.object === "block" && (e = "div"), t = `<${e} class="${y}">${u.text.slice(0, p.$anchor.textOffset)}${t}${u.text.slice(p.$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;
-	}, x = /* @__PURE__ */ i("div", {
+	}, w = /* @__PURE__ */ i("div", {
 		style: {
 			background: "white",
 			height: 500,
@@ -37,35 +41,35 @@ var s = () => {
 		},
 		children: [
 			/* @__PURE__ */ r("h2", { children: "Please choose a css class" }),
-			y && /* @__PURE__ */ i("div", { children: ["The current parent has this class ", y] }),
-			/* @__PURE__ */ r(a, {
+			S && /* @__PURE__ */ i("div", { children: ["The current parent has this class ", S] }),
+			/* @__PURE__ */ r(o, {
 				component: "nav",
 				style: { overflow: "scroll" },
-				children: c.names.map((e, t) => /* @__PURE__ */ i(o, {
+				children: l.names.map((e, t) => /* @__PURE__ */ i(s, {
 					button: !0,
-					onClick: () => v(e),
+					onClick: () => x(e),
 					children: [/* @__PURE__ */ r("div", {
 						style: { marginRight: 20 },
 						children: e
-					}), /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: b(e) } })]
+					}), /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: C(e) } })]
 				}, `rule-${t}`))
 			})
 		]
 	});
-	n.render(x, f, () => {
+	n(() => h.render(w)), (() => {
 		let t = e.view.nodeDOM(e.state.selection.from)?.parentNode;
 		if (t) {
-			let e = d.parentElement.parentElement.parentElement.getBoundingClientRect(), n = t.getBoundingClientRect();
-			d.parentElement.parentElement.parentElement.appendChild(f), f.style.maxWidth = "500px", f.style.position = "absolute", f.style.top = 0, f.style.zIndex = 99999;
+			let e = f.parentElement.parentElement.parentElement.getBoundingClientRect(), n = t.getBoundingClientRect();
+			f.parentElement.parentElement.parentElement.appendChild(p), p.style.maxWidth = "500px", p.style.position = "absolute", p.style.top = 0, p.style.zIndex = 99999;
 			let r = `${n.left + Math.abs(e.left) + t.offsetWidth + 10}px`, i = `${n.x}px`;
-			f.style.left = r;
-			let a = f.offsetWidth;
-			f.style.left = "unset", f.style.right = i;
-			let o = f.offsetWidth;
-			f.style.left = "unset", f.style.right = "unset", a >= o ? f.style.left = r : f.style.right = i, document.body.addEventListener("click", g);
+			p.style.left = r;
+			let a = p.offsetWidth;
+			p.style.left = "unset", p.style.right = i;
+			let o = p.offsetWidth;
+			p.style.left = "unset", p.style.right = "unset", a >= o ? p.style.left = r : p.style.right = i, document.body.addEventListener("click", v);
 		}
-	});
-}, l = e.create({
+	})();
+}, u = e.create({
 	name: "cssmark",
 	addOptions() {
 		return { classes: [] };
@@ -103,7 +107,7 @@ var s = () => {
 			setCSSClass: (e) => ({ commands: t }) => t.setMark(this.name, { class: e }),
 			unsetCSSClass: () => ({ commands: e }) => e.unsetMark(this.name),
 			openCSSClassDialog: () => ({ editor: e }) => {
-				c({
+				l({
 					editor: e,
 					selectedText: e.state.doc.textBetween(e.state.selection.from, e.state.selection.to),
 					parentNode: e.state.selection.$from.nodeAfter,
@@ -117,4 +121,4 @@ var s = () => {
 	}
 });
 //#endregion
-export { l as CSSMark, s as removeDialogs };
+export { u as CSSMark };

package/dist/extensions/media.js

@@ -3,8 +3,8 @@ import t from "../components/media/MediaToolbar.js";
 import { useEffect as n } from "react";
 import { NodeViewWrapper as r, ReactNodeViewRenderer as i } from "@tiptap/react";
 import { Node as a, mergeAttributes as o } from "@tiptap/core";
-import s from "react-dom";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createRoot as l } from "react-dom/client";
 //#region src/extensions/media.tsx
 var u = a.create({
 	name: "media",
@@ -78,63 +78,65 @@ var u = a.create({
 		};
 	},
 	addNodeView() {
-		return i((e) => /* @__PURE__ */ c(p, {
+		return i((e) => /* @__PURE__ */ s(p, {
 			...e,
 			options: this.options
 		}));
 	}
-}), d = () => {
-	document.querySelectorAll(".insert-media-dialog").forEach((e) => e.remove());
-}, f = (t) => {
-	let n = document.createElement("div"), { type: r, callback: i, options: a, ...o } = t, l = document.body.style.overflow;
-	d(), n.className = "insert-media-dialog", document.body.style.overflow = "hidden";
-	let u = (e, t) => {
-		i(e, t), n.remove(), document.body.style.overflow = l;
-	}, f = /* @__PURE__ */ c(e, {
+}), d = null, f = (t) => {
+	d?.();
+	let n = document.createElement("div"), { type: r, callback: i, options: a, ...o } = t, c = document.body.style.overflow;
+	n.className = "insert-media-dialog", document.body.style.overflow = "hidden";
+	let u = l(n), f = () => {
+		u.unmount(), n.remove(), document.body.style.overflow = c, d === f && (d = null);
+	};
+	d = f;
+	let p = (e, t) => {
+		i(e, t), f();
+	}, m = /* @__PURE__ */ s(e, {
 		...o,
 		uploadSoundSupport: a.uploadSoundSupport,
 		type: r,
-		disablePortal: !0,
 		open: !0,
-		handleClose: u
+		handleClose: p
 	});
-	s.render(f, n), document.body.appendChild(n);
+	u.render(m), document.body.appendChild(n);
 };
-function p({ editor: e, node: i, updateAttributes: a, deleteNode: o, options: s }) {
+function p({ editor: e, node: i, updateAttributes: a, deleteNode: o, options: l }) {
 	let { type: u, src: d, width: p, height: m, tag: h } = i.attrs;
 	return n(() => {
 		d || f({
 			...i.attrs,
-			options: s,
+			options: l,
 			edit: !0,
 			callback: (t, n) => {
 				t ? a(n) : o(), e.chain().focus().run();
 			}
 		});
-	}, []), /* @__PURE__ */ l(r, {
+	}, []), /* @__PURE__ */ c(r, {
 		"data-type": u,
 		style: {
 			width: p,
 			height: m
 		},
-		children: [h === "audio" ? /* @__PURE__ */ c("audio", {
+		children: [h === "audio" ? /* @__PURE__ */ s("audio", {
 			controls: !0,
 			controlsList: "nodownload",
-			children: /* @__PURE__ */ c("source", {
+			children: /* @__PURE__ */ s("source", {
 				type: "audio/mp3",
 				src: d
 			})
-		}) : /* @__PURE__ */ c("iframe", {
+		}) : /* @__PURE__ */ s("iframe", {
 			src: d,
 			allowFullScreen: !0,
 			frameBorder: "0",
 			width: p,
 			height: m
-		}), /* @__PURE__ */ c(t, {
+		}), /* @__PURE__ */ s(t, {
 			onEdit: () => {
 				f({
 					...i.attrs,
-					options: s,
+					options: l,
 					edit: !0,
 					callback: (t, n) => {
 						t && a(n), e.chain().focus().run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "3.1.2-next.20261019183544",
+  "version": "3.1.2-next.20261020062838",
   "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.20261019183544",
-    "@pie-lib/math-input": "9.0.7-next.20261019183544",
-    "@pie-lib/math-toolbar": "4.0.7-next.20261019183544",
-    "@pie-lib/render-ui": "8.0.7-next.20261019183544",
+    "@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/translator": "5.0.2-next.20261019155156",
     "@tiptap/core": "3.32.0",
     "@tiptap/extension-character-count": "3.32.0",
@@ -40,7 +40,6 @@
     "keycode": "^2.2.0",
     "prop-types": "^15.6.2",
     "react-attr-converter": "^0.3.1",
-    "react-jss": "^8.6.1",
     "react-portal": "^4.2.0",
     "tippy.js": "latest",
     "to-style": "^1.3.3",