dishui 0.0.97 → 0.0.101

package/dist/components/pro/RichTextEditor/BlockHandle.js

@@ -2,21 +2,21 @@ import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, us
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 import { NodeSelection as c, Selection as l } from "@tiptap/pm/state";
 //#region src/components/pro/RichTextEditor/BlockHandle.tsx
-var u = ({ editor: u }) => {
-	let [d, f] = i(!1), [p, m] = i(0), [h, g] = i(!1), [_, v] = i("add"), [y, b] = i({
+var u = ({ editor: u, persistent: d = !1 }) => {
+	let [f, p] = i(!1), [m, h] = i(0), [g, _] = i(!1), [v, y] = i("add"), [b, x] = i({
 		left: 4,
 		top: 0
-	}), x = r(null), S = r(null), C = r(!1), [w, T] = i(-1), [E, D] = i(!1), [O, k] = i(null), A = r(null), j = r(null), M = r(null), N = r(!1), P = e(() => {
-		M.current &&= (clearTimeout(M.current), null);
-	}, []), F = e(() => {
-		P(), M.current = setTimeout(() => {
-			!N.current && !h && !E && !j.current?.contains(document.activeElement) && !A.current?.contains(document.activeElement) && f(!1);
+	}), S = r(null), C = r(null), w = r(!1), [T, E] = i(-1), [D, O] = i(!1), [k, A] = i(null), j = r(null), M = r(null), N = r(null), P = r(!1), F = e(() => {
+		N.current &&= (clearTimeout(N.current), null);
+	}, []), I = e(() => {
+		F(), N.current = setTimeout(() => {
+			!P.current && !g && !D && !M.current?.contains(document.activeElement) && !j.current?.contains(document.activeElement) && p(!1);
 		}, 200);
 	}, [
-		P,
-		h,
-		E
-	]), I = e(() => {
+		F,
+		g,
+		D
+	]), L = e(() => {
 		if (u.isDestroyed) return [];
 		let e = u.view.dom.closest(".rte-editor-wrapper");
 		if (!e) return [];
@@ -33,76 +33,102 @@ var u = ({ editor: u }) => {
 				});
 			}
 		}), r;
-	}, [u]), L = e((e) => {
+	}, [u]), R = e((e) => {
 		let t = u.view.dom.closest(".rte-editor-wrapper");
 		if (!t) return -1;
 		let n = e - t.getBoundingClientRect().top - t.clientTop + t.scrollTop;
-		return I().findIndex((e) => n >= e.domTop && n <= e.domBottom);
-	}, [u, I]), R = e((e) => {
+		return L().findIndex((e) => n >= e.domTop && n <= e.domBottom);
+	}, [u, L]), z = e((e) => {
+		let t = L(), n = R(e);
+		if (n < 0 || n >= t.length) return !1;
+		let r = t[n], i = u.state.doc.nodeAt(r.pos);
+		return i ? (S.current = {
+			pos: r.pos,
+			node: i
+		}, E(n), h(r.domTop), p(!0), !0) : !1;
+	}, [
+		u,
+		R,
+		L
+	]), B = e((e) => {
 		let t = u.view.dom.closest(".rte-editor-wrapper");
 		if (!t) return null;
-		let n = e - t.getBoundingClientRect().top - t.clientTop + t.scrollTop, r = I();
+		let n = e - t.getBoundingClientRect().top - t.clientTop + t.scrollTop, r = L();
 		if (r.length === 0) return null;
-		let i = 0, a = Infinity, o = r[0].domTop;
+		let i = S.current, a = i ? r.findIndex((e) => e.pos === i.pos) : -1, o = r.findIndex((e) => n >= e.domTop && n <= e.domBottom);
+		if (a > o && o >= 0) return {
+			slotIndex: o,
+			indicatorTop: r[o].domTop
+		};
+		let s = 0, c = Infinity, l = r[0].domTop;
 		for (let e = 0; e <= r.length; e++) {
-			let t = e < r.length ? r[e].domTop : r[r.length - 1].domBottom, s = Math.abs(n - t);
-			s < a && (a = s, i = e, o = t);
+			let t = e < r.length ? r[e].domTop : r[r.length - 1].domBottom, i = Math.abs(n - t);
+			i < c && (c = i, s = e, l = t);
 		}
 		return {
-			slotIndex: i,
-			indicatorTop: o
+			slotIndex: s,
+			indicatorTop: l
 		};
-	}, [u, I]);
+	}, [u, L]);
 	t(() => {
 		let e = u.view.dom.closest(".rte-editor-wrapper");
 		if (!e) return;
 		let t = (t) => {
-			if (E || S.current || h || N.current || !u.isEditable || u.view.composing || j.current?.contains(t.target) || A.current?.contains(t.target)) return;
-			let n = L(t.clientY);
+			if (D || C.current || g || P.current || !u.isEditable || u.view.composing || M.current?.contains(t.target) || j.current?.contains(t.target)) return;
+			let n = R(t.clientY);
 			if (n < 0) {
-				F();
+				I();
 				return;
 			}
-			let r = I();
-			if (n >= r.length) return;
+			let r = L();
+			if (n >= r.length || !z(t.clientY)) return;
 			let i = Math.max(0, -e.getBoundingClientRect().top);
-			m(Math.max(r[n].domTop, e.scrollTop + i + 4)), T(n);
-			let a = u.state.doc.nodeAt(r[n].pos);
-			x.current = a ? {
-				pos: r[n].pos,
-				node: a
-			} : null, P(), f(!0);
+			h(Math.max(r[n].domTop, e.scrollTop + i + 4)), F();
 		}, n = () => {
-			E || F();
+			D || I();
+		}, r = (e) => {
+			if (!u.isEditable || u.view.composing) return;
+			let t = e.touches[0];
+			t && z(t.clientY);
 		};
-		return e.addEventListener("mousemove", t), e.addEventListener("mouseleave", n), () => {
-			e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", n), P();
+		e.addEventListener("mousemove", t), e.addEventListener("mouseleave", n), e.addEventListener("touchstart", r);
+		let i = d ? requestAnimationFrame(() => {
+			let e = L(), t = e[0] ? u.state.doc.nodeAt(e[0].pos) : null;
+			e[0] && t && (S.current = {
+				pos: e[0].pos,
+				node: t
+			}, E(0), h(e[0].domTop), p(!0));
+		}) : null;
+		return () => {
+			e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", n), e.removeEventListener("touchstart", r), i !== null && cancelAnimationFrame(i), F();
 		};
 	}, [
 		u,
-		P,
 		F,
-		E,
-		h,
+		I,
+		D,
+		g,
+		R,
 		L,
-		I
+		z,
+		d
 	]), t(() => {
-		if (!h) return;
+		if (!g) return;
 		let e = (e) => {
-			A.current && !A.current.contains(e.target) && !j.current?.contains(e.target) && (N.current = !1, g(!1));
+			j.current && !j.current.contains(e.target) && !M.current?.contains(e.target) && (P.current = !1, _(!1));
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [h]);
-	let z = e(() => {
-		let e = x.current;
+	}, [g]);
+	let V = e(() => {
+		let e = S.current;
 		return u.isDestroyed || !u.isEditable || u.view.composing || !e || u.state.doc.nodeAt(e.pos) !== e.node ? null : e;
-	}, [u]), B = e((e) => {
-		let t = z();
+	}, [u]), H = e((e) => {
+		let t = V();
 		if (!t) return;
 		let n = t.pos + t.node.nodeSize;
-		u.chain().focus().insertContentAt(n, e).command(({ tr: e }) => (e.setSelection(l.near(e.doc.resolve(n + 1))), !0)).run(), g(!1);
-	}, [u, z]), V = e((e) => {
-		let t = z(), n = I();
+		u.chain().focus().insertContentAt(n, e).command(({ tr: e }) => (e.setSelection(l.near(e.doc.resolve(n + 1))), !0)).run(), _(!1);
+	}, [u, V]), U = e((e) => {
+		let t = V(), n = L();
 		if (!t || e < 0 || e > n.length) return;
 		let r = n.findIndex((e) => e.pos === t.pos);
 		if (r < 0 || e === r || e === r + 1) return;
@@ -110,67 +136,72 @@ var u = ({ editor: u }) => {
 		a.insert(o, t.node), a.setSelection(c.isSelectable(t.node) ? c.create(a.doc, o) : l.near(a.doc.resolve(o))), u.view.dispatch(a.scrollIntoView()), u.view.focus();
 	}, [
 		u,
-		z,
-		I
+		V,
+		L
 	]);
 	t(() => {
 		let e = () => {
-			S.current?.(), x.current = null, N.current = !1, f(!1), g(!1), P();
+			C.current?.(), S.current = null, P.current = !1, p(d), _(!1), F();
 		}, t = ({ transaction: t }) => {
 			(t.docChanged || !u.isEditable) && e();
 		}, n = (t) => {
-			(!(t.target instanceof Node) || !A.current?.contains(t.target)) && e();
+			(!(t.target instanceof Node) || !j.current?.contains(t.target)) && e();
 		};
 		u.on("transaction", t);
 		let r = u.view.dom;
 		return r.addEventListener("compositionstart", e), window.addEventListener("scroll", n, !0), window.addEventListener("resize", e), window.addEventListener("blur", e), () => {
-			u.off("transaction", t), r.removeEventListener("compositionstart", e), window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", e), window.removeEventListener("blur", e), S.current?.(), P();
+			u.off("transaction", t), r.removeEventListener("compositionstart", e), window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", e), window.removeEventListener("blur", e), C.current?.(), F();
 		};
-	}, [u, P]), n(() => {
-		if (!h) return;
-		let e = A.current, t = j.current, n = u.view.dom.closest(".rte-editor-wrapper");
+	}, [
+		u,
+		F,
+		d
+	]), n(() => {
+		if (!g) return;
+		let e = j.current, t = M.current, n = u.view.dom.closest(".rte-editor-wrapper");
 		if (!e || !t || !n) return;
 		let r = n.getBoundingClientRect(), i = t.getBoundingClientRect(), a = Math.max(8, r.left + n.clientLeft), o = Math.min(window.innerWidth - 8, r.right), s = Math.max(8, r.top + n.clientTop), c = Math.min(window.innerHeight - 8, r.bottom) - i.bottom - 4, l = i.top - s - 4, d = c < e.scrollHeight && l > c;
-		e.style.maxHeight = `${Math.max(0, Math.min(320, d ? l : c))}px`, e.style.minWidth = "0", e.style.width = `${Math.max(0, Math.min(220, o - a))}px`, b({
+		e.style.maxHeight = `${Math.max(0, Math.min(320, d ? l : c))}px`, e.style.minWidth = "0", e.style.width = `${Math.max(0, Math.min(220, o - a))}px`, x({
 			left: Math.max(a, Math.min(i.left, o - e.offsetWidth)) - r.left - n.clientLeft + n.scrollLeft,
 			top: (d ? i.top - e.offsetHeight - 4 : i.bottom + 4) - r.top - n.clientTop + n.scrollTop
 		});
-		let f = _ === "actions" ? "button:not(:disabled)" : "button";
+		let f = v === "actions" ? "button:not(:disabled)" : "button";
 		e.querySelector(f)?.focus({ preventScroll: !0 });
 	}, [
 		u,
-		h,
-		_
+		g,
+		v
 	]);
-	let H = e((e) => {
-		if (e.preventDefault(), e.stopPropagation(), e.button !== 0 || !z()) return;
-		S.current?.(), C.current = !1;
+	let W = e((e) => {
+		if (e.preventDefault(), e.stopPropagation(), e.button !== 0 || !z(e.clientY) || !V()) return;
+		C.current?.(), w.current = !1;
 		let t = e.clientX, n = e.clientY, r = !1, i = (e) => {
 			if (!r && Math.hypot(e.clientX - t, e.clientY - n) < 5) return;
-			r = !0, C.current = !0, g(!1), D(!0);
-			let i = R(e.clientY);
-			i && k({ top: i.indicatorTop });
+			r = !0, w.current = !0, _(!1), O(!0);
+			let i = B(e.clientY);
+			i && A({ top: i.indicatorTop });
 		}, a = () => {
-			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", s), document.removeEventListener("keydown", o, !0), S.current = null, D(!1), k(null);
+			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", s), document.removeEventListener("keydown", o, !0), C.current = null, O(!1), A(null);
 		}, o = (e) => {
-			e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation(), C.current = !0, a());
+			e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation(), w.current = !0, a());
 		}, s = (e) => {
 			if (a(), !r) return;
 			let t = u.view.dom.closest(".rte-editor-wrapper")?.getBoundingClientRect();
 			if (!t || e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) return;
-			let n = R(e.clientY);
-			n && V(n.slotIndex);
+			let n = B(e.clientY);
+			n && U(n.slotIndex);
 		};
-		S.current = a, document.addEventListener("mousemove", i), document.addEventListener("mouseup", s), document.addEventListener("keydown", o, !0);
+		C.current = a, document.addEventListener("mousemove", i), document.addEventListener("mouseup", s), document.addEventListener("keydown", o, !0);
 	}, [
 		u,
-		z,
 		V,
-		R
-	]), U = { type: "paragraph" }, W = [
+		U,
+		B,
+		z
+	]), G = { type: "paragraph" }, K = [
 		{
 			label: "Text",
-			content: U
+			content: G
 		},
 		...[
 			1,
@@ -189,7 +220,7 @@ var u = ({ editor: u }) => {
 				type: "bulletList",
 				content: [{
 					type: "listItem",
-					content: [U]
+					content: [G]
 				}]
 			}
 		},
@@ -199,7 +230,7 @@ var u = ({ editor: u }) => {
 				type: "orderedList",
 				content: [{
 					type: "listItem",
-					content: [U]
+					content: [G]
 				}]
 			}
 		},
@@ -210,7 +241,7 @@ var u = ({ editor: u }) => {
 				content: [{
 					type: "taskItem",
 					attrs: { checked: !1 },
-					content: [U]
+					content: [G]
 				}]
 			}
 		},
@@ -218,7 +249,7 @@ var u = ({ editor: u }) => {
 			label: "Blockquote",
 			content: {
 				type: "blockquote",
-				content: [U]
+				content: [G]
 			}
 		},
 		{
@@ -237,48 +268,48 @@ var u = ({ editor: u }) => {
 					type: "tableRow",
 					content: Array.from({ length: 3 }, () => ({
 						type: t === 0 ? "tableHeader" : "tableCell",
-						content: [U]
+						content: [G]
 					}))
 				}))
 			}
 		}
-	], G = _ === "add" ? W.filter((e) => u.schema.nodes[e.content.type]) : [
+	], q = v === "add" ? K.filter((e) => u.schema.nodes[e.content.type]) : [
 		{ label: "Duplicate" },
 		{ label: "Delete" },
 		{
 			label: "Move up",
-			disabled: w <= 0
+			disabled: T <= 0
 		},
 		{
 			label: "Move down",
-			disabled: w >= u.state.doc.childCount - 1
+			disabled: T >= u.state.doc.childCount - 1
 		}
-	], K = (e) => {
+	], J = (e) => {
 		if (e.disabled) return;
-		let t = z();
+		let t = V();
 		if (t) {
-			if (e.content) B(e.content);
+			if (e.content) H(e.content);
 			else if (e.label === "Duplicate") {
 				let e = t.pos + t.node.nodeSize, n = u.state.tr.insert(e, t.node);
 				n.setSelection(l.near(n.doc.resolve(e + 1))), u.view.dispatch(n.scrollIntoView()), u.view.focus();
 			} else e.label === "Delete" ? u.chain().focus().deleteRange({
 				from: t.pos,
 				to: t.pos + t.node.nodeSize
-			}).run() : e.label === "Move up" ? V(w - 1) : e.label === "Move down" && V(w + 2);
+			}).run() : e.label === "Move up" ? U(T - 1) : e.label === "Move down" && U(T + 2);
 		}
 	};
-	return !d && !h && !E ? null : /* @__PURE__ */ s(a, { children: [
+	return !f && !g && !D ? null : /* @__PURE__ */ s(a, { children: [
 		/* @__PURE__ */ s("div", {
-			ref: j,
-			className: "rte-block-handle",
-			style: { top: p },
-			onFocus: P,
-			onBlur: F,
+			ref: M,
+			className: `rte-block-handle ${d ? "rte-block-handle--persistent" : ""}`,
+			style: { top: m },
+			onFocus: F,
+			onBlur: I,
 			onMouseEnter: () => {
-				N.current = !0, P();
+				P.current = !0, F();
 			},
 			onMouseLeave: () => {
-				N.current = !1, E || F();
+				P.current = !1, D || I();
 			},
 			onMouseDown: (e) => {
 				e.stopPropagation(), e.preventDefault();
@@ -289,12 +320,19 @@ var u = ({ editor: u }) => {
 				onMouseDown: (e) => {
 					e.stopPropagation(), e.preventDefault();
 				},
+				onTouchStart: (e) => {
+					e.stopPropagation(), w.current = !0, V() && (y("add"), _(!g || v !== "add"));
+				},
 				onClick: (e) => {
-					e.stopPropagation(), z() && (v("add"), g(!h || _ !== "add"));
+					if (e.stopPropagation(), w.current) {
+						w.current = !1;
+						return;
+					}
+					V() && (y("add"), _(!g || v !== "add"));
 				},
 				"aria-label": "Add block",
 				"aria-haspopup": "menu",
-				"aria-expanded": h && _ === "add",
+				"aria-expanded": g && v === "add",
 				title: "Add block",
 				children: /* @__PURE__ */ s("svg", {
 					width: "14",
@@ -317,18 +355,21 @@ var u = ({ editor: u }) => {
 				})
 			}), /* @__PURE__ */ o("button", {
 				type: "button",
-				className: `rte-block-handle__btn rte-block-handle__btn--drag ${E ? "rte-block-handle__btn--dragging" : ""}`,
+				className: `rte-block-handle__btn rte-block-handle__btn--drag ${D ? "rte-block-handle__btn--dragging" : ""}`,
 				title: "Drag to reorder or click for block actions",
 				"aria-label": "Block actions",
 				"aria-haspopup": "menu",
-				"aria-expanded": h && _ === "actions",
-				onMouseDown: H,
+				"aria-expanded": g && v === "actions",
+				onMouseDown: W,
+				onTouchStart: (e) => {
+					e.stopPropagation(), w.current = !0, y("actions"), _(!g || v !== "actions");
+				},
 				onClick: (e) => {
-					if (e.stopPropagation(), C.current) {
-						C.current = !1;
+					if (e.stopPropagation(), w.current) {
+						w.current = !1;
 						return;
 					}
-					z() && (v("actions"), g(!h || _ !== "actions"));
+					V() && (y("actions"), _(!g || v !== "actions"));
 				},
 				children: /* @__PURE__ */ s("svg", {
 					width: "14",
@@ -372,20 +413,20 @@ var u = ({ editor: u }) => {
 				})
 			})]
 		}),
-		h && /* @__PURE__ */ o("div", {
-			ref: A,
+		g && /* @__PURE__ */ o("div", {
+			ref: j,
 			className: "rte-block-handle__menu",
 			role: "menu",
-			"aria-label": _ === "add" ? "Add block" : "Block actions",
+			"aria-label": v === "add" ? "Add block" : "Block actions",
 			style: {
-				...y,
+				...b,
 				overflowY: "auto"
 			},
 			onMouseEnter: () => {
-				N.current = !0, P();
+				P.current = !0, F();
 			},
 			onMouseLeave: () => {
-				N.current = !1;
+				P.current = !1;
 			},
 			onMouseDown: (e) => {
 				e.stopPropagation(), e.preventDefault();
@@ -393,7 +434,7 @@ var u = ({ editor: u }) => {
 			onKeyDown: (e) => {
 				if (e.nativeEvent.isComposing || e.keyCode === 229) return;
 				if (e.key === "Escape" || e.key === "Tab") {
-					e.key === "Escape" && e.preventDefault(), e.stopPropagation(), N.current = !1, g(!1), j.current?.querySelector(_ === "add" ? ".rte-block-handle__btn--add" : ".rte-block-handle__btn--drag")?.focus({ preventScroll: !0 });
+					e.key === "Escape" && e.preventDefault(), e.stopPropagation(), P.current = !1, _(!1), M.current?.querySelector(v === "add" ? ".rte-block-handle__btn--add" : ".rte-block-handle__btn--drag")?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (![
@@ -408,7 +449,7 @@ var u = ({ editor: u }) => {
 				let i = t[r];
 				i && i.offsetTop < e.currentTarget.scrollTop ? e.currentTarget.scrollTop = i.offsetTop : i && i.offsetTop + i.offsetHeight > e.currentTarget.scrollTop + e.currentTarget.clientHeight && (e.currentTarget.scrollTop = i.offsetTop + i.offsetHeight - e.currentTarget.clientHeight);
 			},
-			children: G.map((e) => /* @__PURE__ */ o("button", {
+			children: q.map((e) => /* @__PURE__ */ o("button", {
 				type: "button",
 				role: "menuitem",
 				disabled: e.disabled,
@@ -419,14 +460,14 @@ var u = ({ editor: u }) => {
 				className: "rte-block-handle__menu-item",
 				onMouseDown: (e) => e.stopPropagation(),
 				onClick: (t) => {
-					t.stopPropagation(), K(e), g(!1), N.current = !1;
+					t.stopPropagation(), J(e), _(!1), P.current = !1;
 				},
 				children: e.label
 			}, e.label))
 		}),
-		E && O && /* @__PURE__ */ o("div", {
+		D && k && /* @__PURE__ */ o("div", {
 			className: "rte-block-handle__drop-indicator",
-			style: { top: O.top }
+			style: { top: k.top }
 		})
 	] });
 };