dishui 0.0.65 → 0.0.67

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

@@ -1,319 +1,317 @@
-import { useCallback as b, useEffect as j, useRef as D, useState as w } from "react";
-import { Fragment as G, jsx as r, jsxs as E } from "react/jsx-runtime";
-var U = ({ editor: n }) => {
-  const [q, I] = w(!1), [N, F] = w(0), [f, B] = w(!1), [v, O] = w(-1), [p, P] = w(!1), [S, z] = w(null), L = D(null), W = D(null), T = D(null), _ = D(!1), k = b(() => {
-    T.current && (clearTimeout(T.current), T.current = null);
-  }, []), M = b(() => {
-    k(), T.current = setTimeout(() => {
-      !_.current && !f && !p && I(!1);
-    }, 200);
-  }, [
-    k,
-    f,
-    p
-  ]), i = b(() => {
-    const e = n.view.dom.closest(".rte-editor-wrapper");
-    if (!e) return [];
-    const t = e.getBoundingClientRect(), c = e.scrollTop, o = [];
-    return n.state.doc.forEach((l, a) => {
-      const s = n.view.nodeDOM(a);
-      if (s) {
-        const d = s.getBoundingClientRect();
-        o.push({
-          pos: a,
-          size: l.nodeSize,
-          domTop: d.top - t.top + c,
-          domBottom: d.bottom - t.top + c
-        });
-      }
-    }), o;
-  }, [n]), Y = b((e) => {
-    const t = n.view.dom.closest(".rte-editor-wrapper");
-    if (!t) return -1;
-    const c = e - t.getBoundingClientRect().top + t.scrollTop, o = i();
-    for (let l = 0; l < o.length; l++) if (c < (o[l].domTop + o[l].domBottom) / 2) return l;
-    return o.length - 1;
-  }, [n, i]), C = b((e) => {
-    const t = n.view.dom.closest(".rte-editor-wrapper");
-    if (!t) return null;
-    const c = e - t.getBoundingClientRect().top + t.scrollTop, o = i();
-    if (o.length === 0) return null;
-    let l = 0, a = 1 / 0, s = o[0].domTop;
-    for (let d = 0; d <= o.length; d++) {
-      const g = d < o.length ? o[d].domTop : o[o.length - 1].domBottom, h = Math.abs(c - g);
-      h < a && (a = h, l = d, s = g);
-    }
-    return {
-      slotIndex: l,
-      indicatorTop: s
-    };
-  }, [i]);
-  j(() => {
-    const e = n.view.dom.closest(".rte-editor-wrapper");
-    if (!e) return;
-    const t = (o) => {
-      if (p) return;
-      const l = Y(o.clientY);
-      if (l < 0) return;
-      const a = i();
-      l >= a.length || (F(a[l].domTop), O(l), k(), I(!0));
-    }, c = () => {
-      p || M();
-    };
-    return e.addEventListener("mousemove", t), e.addEventListener("mouseleave", c), () => {
-      e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", c), k();
-    };
-  }, [
-    n,
-    k,
-    M,
-    p,
-    Y,
-    i
-  ]), j(() => {
-    if (!f) return;
-    const e = (t) => {
-      L.current && !L.current.contains(t.target) && B(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [f]);
-  const u = b(() => {
-    const e = i();
-    if (v < 0 || v >= e.length) return;
-    const t = e[v], c = t.pos + t.size;
-    try {
-      n.chain().focus().insertContentAt(c, { type: "paragraph" }).run(), n.commands.focus(c + 1);
-    } catch {
-    }
-    B(!1);
-  }, [
-    n,
-    v,
-    i
-  ]), V = b((e) => {
-    e.preventDefault(), e.stopPropagation();
-    const t = v, c = i();
-    if (t < 0 || t >= c.length) return;
-    P(!0);
-    const o = (a) => {
-      const s = C(a.clientY);
-      s && z({ top: s.indicatorTop });
-    }, l = (a) => {
-      document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", l), P(!1), z(null);
-      const s = i();
-      if (t >= s.length) return;
-      const d = C(a.clientY);
-      if (!d) return;
-      let g = d.slotIndex;
-      if (g === t || g === t + 1) return;
-      const h = s[t];
-      if (!n.state.doc.nodeAt(h.pos)) return;
-      let x;
-      if (g < s.length) x = s[g].pos;
-      else {
-        const y = s[s.length - 1];
-        x = y.pos + y.size;
-      }
-      const H = h.pos, R = h.pos + h.size, A = n.state.doc.slice(H, R).content, { tr: m } = n.state;
-      if (g <= t) {
-        m.delete(H, R);
-        const y = m.mapping.map(x);
-        m.insert(y, A);
-      } else
-        m.insert(x, A), m.delete(m.mapping.map(H), m.mapping.map(R));
-      n.view.dispatch(m);
-    };
-    document.addEventListener("mousemove", o), document.addEventListener("mouseup", l);
-  }, [
-    n,
-    v,
-    i,
-    C
-  ]), $ = [
-    {
-      label: "Text",
-      action: () => {
-        u();
-      }
-    },
-    {
-      label: "Heading 1",
-      action: () => {
-        u(), n.chain().focus().toggleHeading({ level: 1 }).run();
-      }
-    },
-    {
-      label: "Heading 2",
-      action: () => {
-        u(), n.chain().focus().toggleHeading({ level: 2 }).run();
-      }
-    },
-    {
-      label: "Heading 3",
-      action: () => {
-        u(), n.chain().focus().toggleHeading({ level: 3 }).run();
-      }
-    },
-    {
-      label: "Bullet List",
-      action: () => {
-        u(), n.chain().focus().toggleBulletList().run();
-      }
-    },
-    {
-      label: "Numbered List",
-      action: () => {
-        u(), n.chain().focus().toggleOrderedList().run();
-      }
-    },
-    {
-      label: "Task List",
-      action: () => {
-        u(), n.chain().focus().toggleTaskList().run();
-      }
-    },
-    {
-      label: "Blockquote",
-      action: () => {
-        u(), n.chain().focus().toggleBlockquote().run();
-      }
-    },
-    {
-      label: "Code Block",
-      action: () => {
-        u(), n.chain().focus().toggleNode("codeBlock", "paragraph").run();
-      }
-    },
-    {
-      label: "Divider",
-      action: () => {
-        u(), n.chain().focus().setHorizontalRule().run();
-      }
-    },
-    {
-      label: "Table 3×3",
-      action: () => {
-        u(), n.chain().focus().insertTable({
-          rows: 3,
-          cols: 3,
-          withHeaderRow: !0
-        }).run();
-      }
-    }
-  ];
-  return !q && !f && !p ? null : /* @__PURE__ */ E(G, { children: [
-    /* @__PURE__ */ E("div", {
-      ref: W,
-      className: "rte-block-handle",
-      style: { top: N },
-      onMouseEnter: () => {
-        _.current = !0, k();
-      },
-      onMouseLeave: () => {
-        _.current = !1, p || M();
-      },
-      onMouseDown: (e) => {
-        e.stopPropagation(), e.preventDefault();
-      },
-      children: [/* @__PURE__ */ r("button", {
-        type: "button",
-        className: "rte-block-handle__btn rte-block-handle__btn--add",
-        onMouseDown: (e) => {
-          e.stopPropagation(), e.preventDefault();
-        },
-        onClick: (e) => {
-          e.stopPropagation(), B(!f);
-        },
-        title: "Add block",
-        children: /* @__PURE__ */ E("svg", {
-          width: "14",
-          height: "14",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [/* @__PURE__ */ r("line", {
-            x1: "12",
-            y1: "5",
-            x2: "12",
-            y2: "19"
-          }), /* @__PURE__ */ r("line", {
-            x1: "5",
-            y1: "12",
-            x2: "19",
-            y2: "12"
-          })]
-        })
-      }), /* @__PURE__ */ r("button", {
-        type: "button",
-        className: `rte-block-handle__btn rte-block-handle__btn--drag ${p ? "rte-block-handle__btn--dragging" : ""}`,
-        title: "Drag to reorder",
-        onMouseDown: V,
-        children: /* @__PURE__ */ E("svg", {
-          width: "14",
-          height: "14",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__PURE__ */ r("circle", {
-              cx: "9",
-              cy: "6",
-              r: "1.5"
-            }),
-            /* @__PURE__ */ r("circle", {
-              cx: "15",
-              cy: "6",
-              r: "1.5"
-            }),
-            /* @__PURE__ */ r("circle", {
-              cx: "9",
-              cy: "12",
-              r: "1.5"
-            }),
-            /* @__PURE__ */ r("circle", {
-              cx: "15",
-              cy: "12",
-              r: "1.5"
-            }),
-            /* @__PURE__ */ r("circle", {
-              cx: "9",
-              cy: "18",
-              r: "1.5"
-            }),
-            /* @__PURE__ */ r("circle", {
-              cx: "15",
-              cy: "18",
-              r: "1.5"
-            })
-          ]
-        })
-      })]
-    }),
-    f && /* @__PURE__ */ r("div", {
-      ref: L,
-      className: "rte-block-handle__menu",
-      style: { top: N + 28 },
-      onMouseDown: (e) => e.stopPropagation(),
-      children: $.map((e) => /* @__PURE__ */ r("button", {
-        type: "button",
-        className: "rte-block-handle__menu-item",
-        onMouseDown: (t) => t.stopPropagation(),
-        onClick: (t) => {
-          t.stopPropagation(), e.action(), B(!1);
-        },
-        children: e.label
-      }, e.label))
-    }),
-    p && S && /* @__PURE__ */ r("div", {
-      className: "rte-block-handle__drop-indicator",
-      style: { top: S.top }
-    })
-  ] });
-};
-export {
-  U as default
+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";
+//#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);
+		}, 200);
+	}, [
+		w,
+		f,
+		g
+	]), E = e(() => {
+		let e = s.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();
+				r.push({
+					pos: i,
+					size: e.nodeSize,
+					domTop: o.top - t.top + n,
+					domBottom: o.bottom - t.top + n
+				});
+			}
+		}), r;
+	}, [s]), D = e((e) => {
+		let t = s.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");
+		if (!t) return null;
+		let n = e - t.getBoundingClientRect().top + t.scrollTop, r = E();
+		if (r.length === 0) return null;
+		let i = 0, a = Infinity, o = 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);
+		}
+		return {
+			slotIndex: i,
+			indicatorTop: o
+		};
+	}, [E]);
+	t(() => {
+		let e = s.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));
+		}, n = () => {
+			g || T();
+		};
+		return e.addEventListener("mousemove", t), e.addEventListener("mouseleave", n), () => {
+			e.removeEventListener("mousemove", t), e.removeEventListener("mouseleave", n), w();
+		};
+	}, [
+		s,
+		w,
+		T,
+		g,
+		D,
+		E
+	]), t(() => {
+		if (!f) return;
+		let e = (e) => {
+			b.current && !b.current.contains(e.target) && p(!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);
+	}, [
+		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);
+		};
+		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+	}, [
+		s,
+		m,
+		E,
+		O
+	]);
+	return !c && !f && !g ? null : /* @__PURE__ */ o(i, { children: [
+		/* @__PURE__ */ o("div", {
+			ref: x,
+			className: "rte-block-handle",
+			style: { top: u },
+			onMouseEnter: () => {
+				C.current = !0, w();
+			},
+			onMouseLeave: () => {
+				C.current = !1, g || T();
+			},
+			onMouseDown: (e) => {
+				e.stopPropagation(), e.preventDefault();
+			},
+			children: [/* @__PURE__ */ a("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);
+				},
+				title: "Add block",
+				children: /* @__PURE__ */ o("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					children: [/* @__PURE__ */ a("line", {
+						x1: "12",
+						y1: "5",
+						x2: "12",
+						y2: "19"
+					}), /* @__PURE__ */ a("line", {
+						x1: "5",
+						y1: "12",
+						x2: "19",
+						y2: "12"
+					})]
+				})
+			}), /* @__PURE__ */ a("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", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					children: [
+						/* @__PURE__ */ a("circle", {
+							cx: "9",
+							cy: "6",
+							r: "1.5"
+						}),
+						/* @__PURE__ */ a("circle", {
+							cx: "15",
+							cy: "6",
+							r: "1.5"
+						}),
+						/* @__PURE__ */ a("circle", {
+							cx: "9",
+							cy: "12",
+							r: "1.5"
+						}),
+						/* @__PURE__ */ a("circle", {
+							cx: "15",
+							cy: "12",
+							r: "1.5"
+						}),
+						/* @__PURE__ */ a("circle", {
+							cx: "9",
+							cy: "18",
+							r: "1.5"
+						}),
+						/* @__PURE__ */ a("circle", {
+							cx: "15",
+							cy: "18",
+							r: "1.5"
+						})
+					]
+				})
+			})]
+		}),
+		f && /* @__PURE__ */ a("div", {
+			ref: b,
+			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();
+					}
+				}
+			].map((e) => /* @__PURE__ */ a("button", {
+				type: "button",
+				className: "rte-block-handle__menu-item",
+				onMouseDown: (e) => e.stopPropagation(),
+				onClick: (t) => {
+					t.stopPropagation(), e.action(), p(!1);
+				},
+				children: e.label
+			}, e.label))
+		}),
+		g && v && /* @__PURE__ */ a("div", {
+			className: "rte-block-handle__drop-indicator",
+			style: { top: v.top }
+		})
+	] });
 };
+//#endregion
+export { s as default };
 
 //# sourceMappingURL=BlockHandle.js.map