dishui 0.0.72 → 0.0.73

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

@@ -1,43 +1,47 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+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 s = ({ editor: s }) => {
-	let [c, l] = r(!1), [u, d] = r(0), [f, p] = r(!1), [m, h] = r(-1), [g, _] = r(!1), [v, y] = r(null), b = n(null), x = n(null), S = n(null), C = n(!1), w = e(() => {
-		S.current &&= (clearTimeout(S.current), null);
-	}, []), T = e(() => {
-		w(), S.current = setTimeout(() => {
-			!C.current && !f && !g && l(!1);
+var u = ({ editor: u }) => {
+	let [d, f] = i(!1), [p, m] = i(0), [h, g] = i(!1), [_, v] = i("add"), [y, b] = 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);
 		}, 200);
 	}, [
-		w,
-		f,
-		g
-	]), E = e(() => {
-		let e = s.view.dom.closest(".rte-editor-wrapper");
+		P,
+		h,
+		E
+	]), I = e(() => {
+		if (u.isDestroyed) return [];
+		let e = u.view.dom.closest(".rte-editor-wrapper");
 		if (!e) return [];
 		let t = e.getBoundingClientRect(), n = e.scrollTop, r = [];
-		return s.state.doc.forEach((e, i) => {
-			let a = s.view.nodeDOM(i);
-			if (a) {
-				let o = a.getBoundingClientRect();
+		return u.state.doc.forEach((i, a) => {
+			let o = u.view.nodeDOM(a);
+			if (o instanceof HTMLElement) {
+				let s = o.getBoundingClientRect();
 				r.push({
-					pos: i,
-					size: e.nodeSize,
-					domTop: o.top - t.top + n,
-					domBottom: o.bottom - t.top + n
+					pos: a,
+					size: i.nodeSize,
+					domTop: s.top - t.top - e.clientTop + n,
+					domBottom: s.bottom - t.top - e.clientTop + n
 				});
 			}
 		}), r;
-	}, [s]), D = e((e) => {
-		let t = s.view.dom.closest(".rte-editor-wrapper");
+	}, [u]), L = e((e) => {
+		let t = u.view.dom.closest(".rte-editor-wrapper");
 		if (!t) return -1;
-		let n = e - t.getBoundingClientRect().top + t.scrollTop, r = E();
-		for (let e = 0; e < r.length; e++) if (n < (r[e].domTop + r[e].domBottom) / 2) return e;
-		return r.length - 1;
-	}, [s, E]), O = e((e) => {
-		let t = s.view.dom.closest(".rte-editor-wrapper");
+		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) => {
+		let t = u.view.dom.closest(".rte-editor-wrapper");
 		if (!t) return null;
-		let n = e - t.getBoundingClientRect().top + t.scrollTop, r = E();
+		let n = e - t.getBoundingClientRect().top - t.clientTop + t.scrollTop, r = I();
 		if (r.length === 0) return null;
 		let i = 0, a = Infinity, o = r[0].domTop;
 		for (let e = 0; e <= r.length; e++) {
@@ -48,136 +52,285 @@ var s = ({ editor: s }) => {
 			slotIndex: i,
 			indicatorTop: o
 		};
-	}, [E]);
+	}, [u, I]);
 	t(() => {
-		let e = s.view.dom.closest(".rte-editor-wrapper");
+		let e = u.view.dom.closest(".rte-editor-wrapper");
 		if (!e) return;
-		let t = (e) => {
-			if (g) return;
-			let t = D(e.clientY);
-			if (t < 0) return;
-			let n = E();
-			t >= n.length || (d(n[t].domTop), h(t), w(), l(!0));
+		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 (n < 0) {
+				F();
+				return;
+			}
+			let r = I();
+			if (n >= r.length) 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);
 		}, n = () => {
-			g || T();
+			E || F();
 		};
 		return e.addEventListener("mousemove", t), e.addEventListener("mouseleave", n), () => {
-			e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", n), w();
+			e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", n), P();
 		};
 	}, [
-		s,
-		w,
-		T,
-		g,
-		D,
-		E
+		u,
+		P,
+		F,
+		E,
+		h,
+		L,
+		I
 	]), t(() => {
-		if (!f) return;
+		if (!h) return;
 		let e = (e) => {
-			b.current && !b.current.contains(e.target) && p(!1);
+			A.current && !A.current.contains(e.target) && !j.current?.contains(e.target) && (N.current = !1, g(!1));
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [f]);
-	let k = e(() => {
-		let e = E();
-		if (m < 0 || m >= e.length) return;
-		let t = e[m], n = t.pos + t.size;
-		try {
-			s.chain().focus().insertContentAt(n, { type: "paragraph" }).run(), s.commands.focus(n + 1);
-		} catch {}
-		p(!1);
+	}, [h]);
+	let z = e(() => {
+		let e = x.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();
+		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();
+		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;
+		let i = n[e]?.pos ?? u.state.doc.content.size, a = u.state.tr.delete(t.pos, t.pos + t.node.nodeSize), o = a.mapping.map(i);
+		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();
 	}, [
-		s,
-		m,
-		E
-	]), A = e((e) => {
-		e.preventDefault(), e.stopPropagation();
-		let t = m, n = E();
-		if (t < 0 || t >= n.length) return;
-		_(!0);
-		let r = (e) => {
-			let t = O(e.clientY);
-			t && y({ top: t.indicatorTop });
-		}, i = (e) => {
-			document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i), _(!1), y(null);
-			let n = E();
-			if (t >= n.length) return;
-			let a = O(e.clientY);
-			if (!a) return;
-			let o = a.slotIndex;
-			if (o === t || o === t + 1) return;
-			let c = n[t];
-			if (!s.state.doc.nodeAt(c.pos)) return;
-			let l;
-			if (o < n.length) l = n[o].pos;
-			else {
-				let e = n[n.length - 1];
-				l = e.pos + e.size;
-			}
-			let u = c.pos, d = c.pos + c.size, f = s.state.doc.slice(u, d).content, { tr: p } = s.state;
-			if (o <= t) {
-				p.delete(u, d);
-				let e = p.mapping.map(l);
-				p.insert(e, f);
-			} else p.insert(l, f), p.delete(p.mapping.map(u), p.mapping.map(d));
-			s.view.dispatch(p);
+		u,
+		z,
+		I
+	]);
+	t(() => {
+		let e = () => {
+			S.current?.(), x.current = null, N.current = !1, f(!1), g(!1), P();
+		}, t = ({ transaction: t }) => {
+			(t.docChanged || !u.isEditable) && e();
+		}, n = (t) => {
+			(!(t.target instanceof Node) || !A.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();
 		};
-		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+	}, [u, P]), n(() => {
+		if (!h) return;
+		let e = A.current, t = j.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({
+			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";
+		e.querySelector(f)?.focus({ preventScroll: !0 });
 	}, [
-		s,
-		m,
-		E,
-		O
+		u,
+		h,
+		_
 	]);
-	return !c && !f && !g ? null : /* @__PURE__ */ o(i, { children: [
-		/* @__PURE__ */ o("div", {
-			ref: x,
+	let H = e((e) => {
+		if (e.preventDefault(), e.stopPropagation(), e.button !== 0 || !z()) return;
+		S.current?.(), C.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 });
+		}, a = () => {
+			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", s), document.removeEventListener("keydown", o, !0), S.current = null, D(!1), k(null);
+		}, o = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation(), C.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);
+		};
+		S.current = a, document.addEventListener("mousemove", i), document.addEventListener("mouseup", s), document.addEventListener("keydown", o, !0);
+	}, [
+		u,
+		z,
+		V,
+		R
+	]), U = { type: "paragraph" }, W = [
+		{
+			label: "Text",
+			content: U
+		},
+		...[
+			1,
+			2,
+			3
+		].map((e) => ({
+			label: `Heading ${e}`,
+			content: {
+				type: "heading",
+				attrs: { level: e }
+			}
+		})),
+		{
+			label: "Bullet List",
+			content: {
+				type: "bulletList",
+				content: [{
+					type: "listItem",
+					content: [U]
+				}]
+			}
+		},
+		{
+			label: "Numbered List",
+			content: {
+				type: "orderedList",
+				content: [{
+					type: "listItem",
+					content: [U]
+				}]
+			}
+		},
+		{
+			label: "Task List",
+			content: {
+				type: "taskList",
+				content: [{
+					type: "taskItem",
+					attrs: { checked: !1 },
+					content: [U]
+				}]
+			}
+		},
+		{
+			label: "Blockquote",
+			content: {
+				type: "blockquote",
+				content: [U]
+			}
+		},
+		{
+			label: "Code Block",
+			content: { type: "codeBlock" }
+		},
+		{
+			label: "Divider",
+			content: { type: "horizontalRule" }
+		},
+		{
+			label: "Table 3×3",
+			content: {
+				type: "table",
+				content: Array.from({ length: 3 }, (e, t) => ({
+					type: "tableRow",
+					content: Array.from({ length: 3 }, () => ({
+						type: t === 0 ? "tableHeader" : "tableCell",
+						content: [U]
+					}))
+				}))
+			}
+		}
+	], G = _ === "add" ? W.filter((e) => u.schema.nodes[e.content.type]) : [
+		{ label: "Duplicate" },
+		{ label: "Delete" },
+		{
+			label: "Move up",
+			disabled: w <= 0
+		},
+		{
+			label: "Move down",
+			disabled: w >= u.state.doc.childCount - 1
+		}
+	], K = (e) => {
+		if (e.disabled) return;
+		let t = z();
+		if (t) {
+			if (e.content) B(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);
+		}
+	};
+	return !d && !h && !E ? null : /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ s("div", {
+			ref: j,
 			className: "rte-block-handle",
-			style: { top: u },
+			style: { top: p },
+			onFocus: P,
+			onBlur: F,
 			onMouseEnter: () => {
-				C.current = !0, w();
+				N.current = !0, P();
 			},
 			onMouseLeave: () => {
-				C.current = !1, g || T();
+				N.current = !1, E || F();
 			},
 			onMouseDown: (e) => {
 				e.stopPropagation(), e.preventDefault();
 			},
-			children: [/* @__PURE__ */ a("button", {
+			children: [/* @__PURE__ */ o("button", {
 				type: "button",
 				className: "rte-block-handle__btn rte-block-handle__btn--add",
 				onMouseDown: (e) => {
 					e.stopPropagation(), e.preventDefault();
 				},
 				onClick: (e) => {
-					e.stopPropagation(), p(!f);
+					e.stopPropagation(), z() && (v("add"), g(!h || _ !== "add"));
 				},
+				"aria-label": "Add block",
+				"aria-haspopup": "menu",
+				"aria-expanded": h && _ === "add",
 				title: "Add block",
-				children: /* @__PURE__ */ o("svg", {
+				children: /* @__PURE__ */ s("svg", {
 					width: "14",
 					height: "14",
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
 					strokeWidth: "2",
-					children: [/* @__PURE__ */ a("line", {
+					children: [/* @__PURE__ */ o("line", {
 						x1: "12",
 						y1: "5",
 						x2: "12",
 						y2: "19"
-					}), /* @__PURE__ */ a("line", {
+					}), /* @__PURE__ */ o("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
 						y2: "12"
 					})]
 				})
-			}), /* @__PURE__ */ a("button", {
+			}), /* @__PURE__ */ o("button", {
 				type: "button",
-				className: `rte-block-handle__btn rte-block-handle__btn--drag ${g ? "rte-block-handle__btn--dragging" : ""}`,
-				title: "Drag to reorder",
-				onMouseDown: A,
-				children: /* @__PURE__ */ o("svg", {
+				className: `rte-block-handle__btn rte-block-handle__btn--drag ${E ? "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,
+				onClick: (e) => {
+					if (e.stopPropagation(), C.current) {
+						C.current = !1;
+						return;
+					}
+					z() && (v("actions"), g(!h || _ !== "actions"));
+				},
+				children: /* @__PURE__ */ s("svg", {
 					width: "14",
 					height: "14",
 					viewBox: "0 0 24 24",
@@ -185,32 +338,32 @@ var s = ({ editor: s }) => {
 					stroke: "currentColor",
 					strokeWidth: "2",
 					children: [
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "9",
 							cy: "6",
 							r: "1.5"
 						}),
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "15",
 							cy: "6",
 							r: "1.5"
 						}),
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "9",
 							cy: "12",
 							r: "1.5"
 						}),
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "15",
 							cy: "12",
 							r: "1.5"
 						}),
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "9",
 							cy: "18",
 							r: "1.5"
 						}),
-						/* @__PURE__ */ a("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "15",
 							cy: "18",
 							r: "1.5"
@@ -219,99 +372,65 @@ var s = ({ editor: s }) => {
 				})
 			})]
 		}),
-		f && /* @__PURE__ */ a("div", {
-			ref: b,
+		h && /* @__PURE__ */ o("div", {
+			ref: A,
 			className: "rte-block-handle__menu",
-			style: { top: u + 28 },
-			onMouseDown: (e) => e.stopPropagation(),
-			children: [
-				{
-					label: "Text",
-					action: () => {
-						k();
-					}
-				},
-				{
-					label: "Heading 1",
-					action: () => {
-						k(), s.chain().focus().toggleHeading({ level: 1 }).run();
-					}
-				},
-				{
-					label: "Heading 2",
-					action: () => {
-						k(), s.chain().focus().toggleHeading({ level: 2 }).run();
-					}
-				},
-				{
-					label: "Heading 3",
-					action: () => {
-						k(), s.chain().focus().toggleHeading({ level: 3 }).run();
-					}
-				},
-				{
-					label: "Bullet List",
-					action: () => {
-						k(), s.chain().focus().toggleBulletList().run();
-					}
-				},
-				{
-					label: "Numbered List",
-					action: () => {
-						k(), s.chain().focus().toggleOrderedList().run();
-					}
-				},
-				{
-					label: "Task List",
-					action: () => {
-						k(), s.chain().focus().toggleTaskList().run();
-					}
-				},
-				{
-					label: "Blockquote",
-					action: () => {
-						k(), s.chain().focus().toggleBlockquote().run();
-					}
-				},
-				{
-					label: "Code Block",
-					action: () => {
-						k(), s.chain().focus().toggleNode("codeBlock", "paragraph").run();
-					}
-				},
-				{
-					label: "Divider",
-					action: () => {
-						k(), s.chain().focus().setHorizontalRule().run();
-					}
-				},
-				{
-					label: "Table 3×3",
-					action: () => {
-						k(), s.chain().focus().insertTable({
-							rows: 3,
-							cols: 3,
-							withHeaderRow: !0
-						}).run();
-					}
+			role: "menu",
+			"aria-label": _ === "add" ? "Add block" : "Block actions",
+			style: {
+				...y,
+				overflowY: "auto"
+			},
+			onMouseEnter: () => {
+				N.current = !0, P();
+			},
+			onMouseLeave: () => {
+				N.current = !1;
+			},
+			onMouseDown: (e) => {
+				e.stopPropagation(), e.preventDefault();
+			},
+			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 });
+					return;
 				}
-			].map((e) => /* @__PURE__ */ a("button", {
+				if (![
+					"ArrowDown",
+					"ArrowUp",
+					"Home",
+					"End"
+				].includes(e.key)) return;
+				e.preventDefault(), e.stopPropagation();
+				let t = Array.from(e.currentTarget.querySelectorAll("button:not(:disabled)")), n = t.indexOf(document.activeElement), r = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length;
+				t[r]?.focus({ preventScroll: !0 });
+				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", {
 				type: "button",
+				role: "menuitem",
+				disabled: e.disabled,
+				style: e.disabled ? {
+					opacity: .45,
+					cursor: "default"
+				} : void 0,
 				className: "rte-block-handle__menu-item",
 				onMouseDown: (e) => e.stopPropagation(),
 				onClick: (t) => {
-					t.stopPropagation(), e.action(), p(!1);
+					t.stopPropagation(), K(e), g(!1), N.current = !1;
 				},
 				children: e.label
 			}, e.label))
 		}),
-		g && v && /* @__PURE__ */ a("div", {
+		E && O && /* @__PURE__ */ o("div", {
 			className: "rte-block-handle__drop-indicator",
-			style: { top: v.top }
+			style: { top: O.top }
 		})
 	] });
 };
 //#endregion
-export { s as default };
+export { u as default };
 
 //# sourceMappingURL=BlockHandle.js.map