@ryzeup/richtexteditor
Version:
A React Rich Text Editor component
1,287 lines âĸ 55 kB
JavaScript
var dt = Object.defineProperty, ut = Object.defineProperties;
var mt = Object.getOwnPropertyDescriptors;
var xe = Object.getOwnPropertySymbols;
var gt = Object.prototype.hasOwnProperty, ft = Object.prototype.propertyIsEnumerable;
var Le = (r, i, d) => i in r ? dt(r, i, { enumerable: !0, configurable: !0, writable: !0, value: d }) : r[i] = d, ae = (r, i) => {
for (var d in i || (i = {}))
gt.call(i, d) && Le(r, d, i[d]);
if (xe)
for (var d of xe(i))
ft.call(i, d) && Le(r, d, i[d]);
return r;
}, oe = (r, i) => ut(r, mt(i));
import * as ht from "react";
import o, { useRef as P, useState as A, useEffect as I } from "react";
import { createPortal as pt } from "react-dom";
window.React = ht;
var ke = {
color: void 0,
size: void 0,
className: void 0,
style: void 0,
attr: void 0
}, Se = o.createContext && /* @__PURE__ */ o.createContext(ke), vt = ["attr", "size", "title"];
function yt(r, i) {
if (r == null) return {};
var d = Et(r, i), u, f;
if (Object.getOwnPropertySymbols) {
var w = Object.getOwnPropertySymbols(r);
for (f = 0; f < w.length; f++)
u = w[f], !(i.indexOf(u) >= 0) && Object.prototype.propertyIsEnumerable.call(r, u) && (d[u] = r[u]);
}
return d;
}
function Et(r, i) {
if (r == null) return {};
var d = {};
for (var u in r)
if (Object.prototype.hasOwnProperty.call(r, u)) {
if (i.indexOf(u) >= 0) continue;
d[u] = r[u];
}
return d;
}
function Q() {
return Q = Object.assign ? Object.assign.bind() : function(r) {
for (var i = 1; i < arguments.length; i++) {
var d = arguments[i];
for (var u in d)
Object.prototype.hasOwnProperty.call(d, u) && (r[u] = d[u]);
}
return r;
}, Q.apply(this, arguments);
}
function Me(r, i) {
var d = Object.keys(r);
if (Object.getOwnPropertySymbols) {
var u = Object.getOwnPropertySymbols(r);
i && (u = u.filter(function(f) {
return Object.getOwnPropertyDescriptor(r, f).enumerable;
})), d.push.apply(d, u);
}
return d;
}
function J(r) {
for (var i = 1; i < arguments.length; i++) {
var d = arguments[i] != null ? arguments[i] : {};
i % 2 ? Me(Object(d), !0).forEach(function(u) {
wt(r, u, d[u]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(d)) : Me(Object(d)).forEach(function(u) {
Object.defineProperty(r, u, Object.getOwnPropertyDescriptor(d, u));
});
}
return r;
}
function wt(r, i, d) {
return i = Ct(i), i in r ? Object.defineProperty(r, i, { value: d, enumerable: !0, configurable: !0, writable: !0 }) : r[i] = d, r;
}
function Ct(r) {
var i = bt(r, "string");
return typeof i == "symbol" ? i : i + "";
}
function bt(r, i) {
if (typeof r != "object" || !r) return r;
var d = r[Symbol.toPrimitive];
if (d !== void 0) {
var u = d.call(r, i);
if (typeof u != "object") return u;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (i === "string" ? String : Number)(r);
}
function Ne(r) {
return r && r.map((i, d) => /* @__PURE__ */ o.createElement(i.tag, J({
key: d
}, i.attr), Ne(i.child)));
}
function z(r) {
return (i) => /* @__PURE__ */ o.createElement(Rt, Q({
attr: J({}, r.attr)
}, i), Ne(r.child));
}
function Rt(r) {
var i = (d) => {
var {
attr: u,
size: f,
title: w
} = r, R = yt(r, vt), b = f || d.size || "1em", p;
return d.className && (p = d.className), r.className && (p = (p ? p + " " : "") + r.className), /* @__PURE__ */ o.createElement("svg", Q({
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0"
}, d.attr, u, R, {
className: p,
style: J(J({
color: r.color || d.color
}, d.style), r.style),
height: b,
width: b,
xmlns: "http://www.w3.org/2000/svg"
}), w && /* @__PURE__ */ o.createElement("title", null, w), r.children);
};
return Se !== void 0 ? /* @__PURE__ */ o.createElement(Se.Consumer, null, (d) => i(d)) : i(ke);
}
function xt(r) {
return z({ attr: { viewBox: "0 0 448 512" }, child: [{ tag: "path", attr: { d: "M352 64c0-17.7-14.3-32-32-32L128 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32L32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 416c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32l-192 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32z" }, child: [] }] })(r);
}
function Lt(r) {
return z({ attr: { viewBox: "0 0 448 512" }, child: [{ tag: "path", attr: { d: "M448 64c0 17.7-14.3 32-32 32L192 96c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" }, child: [] }] })(r);
}
function St(r) {
return z({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z" }, child: [] }] })(r);
}
function Mt(r) {
return z({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M24 56c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24l0 120 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-96-8 0C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432l33.2 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-88 0c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z" }, child: [] }] })(r);
}
function At(r) {
return z({ attr: { viewBox: "0 0 448 512" }, child: [{ tag: "path", attr: { d: "M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" }, child: [] }] })(r);
}
function zt(r) {
return z({ attr: { viewBox: "0 0 384 512" }, child: [{ tag: "path", attr: { d: "M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z" }, child: [] }] })(r);
}
function kt(r) {
return z({ attr: { viewBox: "0 0 544 512" }, child: [{ tag: "path", attr: { d: "M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z" }, child: [] }] })(r);
}
function Nt(r) {
return z({ attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z" }, child: [] }] })(r);
}
function Tt(r) {
return z({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" }, child: [] }] })(r);
}
function Dt(r) {
return z({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" }, child: [] }] })(r);
}
function Ot(r) {
return z({ attr: { viewBox: "0 0 496 512" }, child: [{ tag: "path", attr: { d: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" }, child: [] }] })(r);
}
function Ht(r) {
return z({ attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z" }, child: [] }] })(r);
}
function _t(r) {
return z({ attr: { viewBox: "0 0 448 512" }, child: [{ tag: "path", attr: { d: "M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" }, child: [] }] })(r);
}
function jt(r) {
return z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { fill: "none", d: "M0 0h24v24H0z" }, child: [] }, { tag: "path", attr: { d: "M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.65L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.42-5.61 2.03-5.79h.12l2.03 5.79H9.91z" }, child: [] }] })(r);
}
function Ft(r) {
return z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { fill: "none", d: "M0 0h24v24H0V0z" }, child: [] }, { tag: "path", attr: { d: "M20 8V5H6.39l3 3h1.83l-.55 1.28 2.09 2.1L14.21 8zM3.41 4.86 2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21l1.41-1.41z" }, child: [] }] })(r);
}
const Pt = [
"đ",
"đ",
"đ",
"đ¤Ŗ",
"đ",
"đ",
"đ
",
"đ",
"đ",
"đ",
"đ",
"đ",
"đ",
"đĸ",
"đ",
"đĄ",
"đ¤",
"đ",
"đ",
"đĨ°",
"đ¤Š",
"đ¤",
"đ´",
"đ",
"đŦ",
"đ¤¤",
"đļâđĢī¸",
"đˇ",
"đ¤",
"đ¤",
"đ¤ ",
"đ",
"đģ",
"đ",
"đ¤",
"đļ",
"đą",
"đŧ",
"đ¸",
"đĻ",
"đˇ",
"đĩ",
"đ°",
"đ¯",
"đĻ",
"đŽ",
"đ",
"đ",
"â",
"đ",
"đĨ",
"đ§",
"âī¸",
"âĄ",
"âī¸",
"đ¸",
"đš",
"đ",
"đ",
"đŠ",
"đ",
"đ",
"đ",
"đ",
"đ",
"đ",
"đĨ",
"đĨ",
"đ",
"đ",
"đ",
"đ",
"đļ",
"đĩ",
"đ",
"âŊ",
"đ",
"đ¸",
"đ",
"đšī¸",
"đ",
"đ¤",
"đī¸",
"â",
"đ",
"đ",
"đ",
"đ",
"đ¤",
"đ¤",
"â",
"đ",
"đ¤",
"đ¤",
"âī¸",
"đ",
"đ",
"đ",
"đ",
"đ¤",
"đ¤",
"đ¤",
"đ",
"đ",
"đ",
"âī¸",
"đ
",
"đ¤˛",
"đ",
"đĢļ",
"đ"
], It = ({
exec: r,
saveSelection: i,
handleFileChange: d,
handleFontSizeChange: u,
handleFontFamilyChange: f,
// insertListBlock,
insertEmoji: w,
handleLink: R,
removeFormatting: b,
visibleActions: p,
className: O,
style: j
}) => {
var U, D;
const k = P(null), _ = P(null), L = P(null), [K, W] = A(!1), [q, B] = A({
x: 0,
y: 0
});
I(() => {
const m = (C) => {
!C.target.closest(".rte-emoji-popup") && !C.target.closest("button[title='Emoji']") && W(!1);
};
return document.addEventListener("mousedown", m), () => document.removeEventListener("mousedown", m);
}, []);
const F = (m) => {
var H;
m.preventDefault();
const C = m.currentTarget.dataset.command;
if (C)
switch (C) {
case "bold":
case "italic":
case "underline":
case "insertUnorderedList":
case "insertOrderedList":
case "removeFormat":
r(C);
break;
case "insertImage": {
(H = k.current) == null || H.click();
break;
}
default:
console.warn("Unknown command:", C);
}
}, G = (m) => {
r("foreColor", m.target.value);
}, ee = (m) => {
r("backColor", m.target.value);
}, [M, N] = A({
bold: !1,
italic: !1,
underline: !1,
unorderedList: !1,
orderedList: !1,
alignLeft: !1,
alignCenter: !1,
alignRight: !1,
removeFormat: !1,
link: !1,
image: !1,
emoji: !1,
table: !1,
color: !1,
highlight: !1
});
return I(() => {
const m = () => {
N({
bold: document.queryCommandState("bold"),
italic: document.queryCommandState("italic"),
underline: document.queryCommandState("underline"),
unorderedList: document.queryCommandState("insertUnorderedList"),
orderedList: document.queryCommandState("insertOrderedList"),
alignLeft: document.queryCommandState("justifyLeft"),
alignCenter: document.queryCommandState("justifyCenter"),
alignRight: document.queryCommandState("justifyRight"),
removeFormat: document.queryCommandState("removeFormat"),
link: document.queryCommandState("createLink"),
image: document.queryCommandState("insertImage"),
emoji: document.queryCommandState("insertEmoji"),
table: document.queryCommandState("insertTable"),
color: document.queryCommandState("foreColor"),
highlight: document.queryCommandState("backColor")
});
};
return document.addEventListener("selectionchange", m), () => document.removeEventListener("selectionchange", m);
}, []), /* @__PURE__ */ o.createElement("div", {
className: `rte-toolbar ${O || ""}`,
style: j
}, p.bold && /* @__PURE__ */ o.createElement("button", {
"data-command": "bold",
title: "Bold",
onMouseDown: F,
className: M.bold ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(zt, null)), p.italic && /* @__PURE__ */ o.createElement("button", {
"data-command": "italic",
title: "Italic",
onMouseDown: F,
className: M.italic ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Nt, null)), p.underline && /* @__PURE__ */ o.createElement("button", {
"data-command": "underline",
title: "Underline",
onMouseDown: F,
className: M.underline ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(_t, null)), p.unorderedList && /* @__PURE__ */ o.createElement("button", {
"data-command": "insertUnorderedList",
onMouseDown: F,
title: "UnorderedList",
className: M.unorderedList ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Dt, null)), p.orderedList && /* @__PURE__ */ o.createElement("button", {
"data-command": "insertOrderedList",
title: "OrderedList",
onMouseDown: F,
className: M.orderedList ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Mt, null)), p.link && /* @__PURE__ */ o.createElement("button", {
"data-command": "createLink",
title: "Link",
onClick: R,
className: M.link ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Tt, null)), p.removeFormat && /* @__PURE__ */ o.createElement("button", {
"data-command": "Remove format",
title: "removeFormat",
onMouseDown: (m) => {
m.preventDefault(), i(), b();
},
className: M.removeFormat ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Ft, null)), p.image && /* @__PURE__ */ o.createElement("button", {
"data-command": "insertImage",
title: "Image",
onMouseDown: F,
className: M.image ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(St, null)), /* @__PURE__ */ o.createElement("input", {
type: "file",
accept: "image/*",
ref: k,
style: {
display: "none"
},
onChange: d
}), p.emoji && /* @__PURE__ */ o.createElement("div", {
style: {
position: "relative"
}
}, /* @__PURE__ */ o.createElement("button", {
title: "Emoji",
onMouseDown: (m) => {
m.preventDefault(), i();
const C = m.currentTarget.getBoundingClientRect();
B({
x: C.left,
y: C.bottom + 8
// small spacing
}), W((H) => !H);
},
className: M.emoji ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Ot, null)), K && /* @__PURE__ */ pt(/* @__PURE__ */ o.createElement("div", {
className: "rte-emoji-popup",
style: {
top: q.y,
left: q.x
}
}, Pt.map((m, C) => /* @__PURE__ */ o.createElement("span", {
key: C,
style: {
fontSize: "20px",
cursor: "pointer",
textAlign: "center"
},
onMouseDown: (H) => {
H.preventDefault(), w(m), W(!1);
}
}, m))), document.body)), p.color && /* @__PURE__ */ o.createElement("div", {
style: {
position: "relative"
}
}, /* @__PURE__ */ o.createElement("button", {
title: "Text Color",
onMouseDown: (m) => {
var C;
m.preventDefault(), i(), (C = _.current) == null || C.click();
},
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
color: ((U = _.current) == null ? void 0 : U.value) || "#000",
fontSize: "18px"
},
className: M.color ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(jt, null)), /* @__PURE__ */ o.createElement("input", {
ref: _,
type: "color",
defaultValue: "#000000",
onChange: (m) => {
var C;
G(m), ((C = m.target.parentElement) == null ? void 0 : C.querySelector("button")).style.color = m.target.value;
},
style: {
position: "absolute",
opacity: 0,
width: 0,
height: 0,
pointerEvents: "none"
}
})), p.highlight && /* @__PURE__ */ o.createElement("div", {
style: {
position: "relative"
}
}, /* @__PURE__ */ o.createElement("button", {
title: "Highlight",
onMouseDown: (m) => {
var C;
m.preventDefault(), i(), (C = L.current) == null || C.click();
},
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
color: ((D = L.current) == null ? void 0 : D.value) || "#000",
fontSize: "18px"
},
className: M.highlight ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(kt, null)), /* @__PURE__ */ o.createElement("input", {
ref: L,
type: "color",
onChange: (m) => {
var C;
ee(m), ((C = m.target.parentElement) == null ? void 0 : C.querySelector("button")).style.color = m.target.value;
},
defaultValue: "#000000",
style: {
position: "absolute",
opacity: 0,
width: 0,
height: 0,
pointerEvents: "none"
}
})), p.align && /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("button", {
title: "Align Left",
onMouseDown: (m) => m.preventDefault(),
onClick: () => r("justifyLeft"),
className: M.alignLeft ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(At, null)), /* @__PURE__ */ o.createElement("button", {
title: "Align Center",
onMouseDown: (m) => m.preventDefault(),
onClick: () => r("justifyCenter"),
className: M.alignCenter ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(xt, null)), /* @__PURE__ */ o.createElement("button", {
title: "Align Right",
onMouseDown: (m) => m.preventDefault(),
onClick: () => r("justifyRight"),
className: M.alignRight ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Lt, null))), p.table && /* @__PURE__ */ o.createElement("button", {
title: "Insert Table",
onMouseDown: (m) => m.preventDefault(),
onClick: () => r("insertTable"),
className: M.table ? "rte-active" : ""
}, /* @__PURE__ */ o.createElement(Ht, null)), p.fontFamily && /* @__PURE__ */ o.createElement("select", {
className: "rte-dropdown",
defaultValue: "",
onMouseDown: () => i(),
onChange: f
}, /* @__PURE__ */ o.createElement("option", {
value: "",
disabled: !0
}, "Font Family"), /* @__PURE__ */ o.createElement("option", {
value: "Arial"
}, "Arial"), /* @__PURE__ */ o.createElement("option", {
value: "Georgia"
}, "Georgia"), /* @__PURE__ */ o.createElement("option", {
value: "Times New Roman"
}, "Times New Roman"), /* @__PURE__ */ o.createElement("option", {
value: "Courier New"
}, "Courier New"), /* @__PURE__ */ o.createElement("option", {
value: "Verdana"
}, "Verdana")), p.fontSize && /* @__PURE__ */ o.createElement("select", {
className: "rte-dropdown rte-fontsize-dropdown",
defaultValue: "",
onMouseDown: () => i(),
onChange: u
}, /* @__PURE__ */ o.createElement("option", {
value: "",
disabled: !0
}, "Font Size"), Array.from({
length: 16
}, (m, C) => 10 + C).map((m) => /* @__PURE__ */ o.createElement("option", {
key: m,
value: m
}, m, "px"))));
}, Bt = ({
show: r,
position: i,
filtered: d,
insertMention: u,
onClose: f,
query: w
}) => {
const R = P(null);
return I(() => {
const b = (p) => {
R.current && !R.current.contains(p.target) && f();
};
return r && document.addEventListener("mousedown", b), () => {
document.removeEventListener("mousedown", b);
};
}, [r, f]), r ? /* @__PURE__ */ o.createElement("ul", {
ref: R,
className: "rte-popup",
style: {
top: i.y,
left: i.x
}
}, d.length > 0 ? d.map(({
name: b,
value: p
}) => {
const O = b.toLowerCase(), j = w.toLowerCase(), k = O.indexOf(j);
let _ = b;
if (k !== -1 && w.length > 0) {
const L = k + w.length;
_ = b.substring(0, k) + `<span class="rte-highlight">${b.substring(k, L)}</span>` + b.substring(L);
}
return /* @__PURE__ */ o.createElement("li", {
key: p,
onMouseDown: (L) => {
L.preventDefault(), u({
name: b,
value: p
});
},
style: {
padding: "6px 12px",
cursor: "pointer",
fontSize: "14px"
},
dangerouslySetInnerHTML: {
__html: _
},
onMouseEnter: (L) => L.currentTarget.style.background = "#f0f0f0",
onMouseLeave: (L) => L.currentTarget.style.background = "#fff"
});
}) : /* @__PURE__ */ o.createElement("li", {
style: {
padding: "6px 12px",
color: "#999"
}
}, "No matches")) : null;
};
function Ae(r) {
return z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "g", attr: { id: "Circle_Minus" }, child: [{ tag: "g", attr: {}, child: [{ tag: "path", attr: { d: "M15,11.5h0a.5.5,0,0,1,0,1H9a.5.5,0,0,1,0-1Z" }, child: [] }, { tag: "path", attr: { d: "M12,21.934A9.933,9.933,0,1,1,21.932,12,9.945,9.945,0,0,1,12,21.934ZM12,3.068A8.933,8.933,0,1,0,20.932,12,8.944,8.944,0,0,0,12,3.068Z" }, child: [] }] }] }] })(r);
}
function Z(r) {
return z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "g", attr: { id: "Circle_Plus" }, child: [{ tag: "g", attr: {}, child: [{ tag: "path", attr: { d: "M15,12.5H12.5V15a.5.5,0,0,1-1,0V12.5H9a.5.5,0,0,1,0-1h2.5V9a.5.5,0,0,1,1,0v2.5H15A.5.5,0,0,1,15,12.5Z" }, child: [] }, { tag: "path", attr: { d: "M12,21.932A9.934,9.934,0,1,1,21.932,12,9.944,9.944,0,0,1,12,21.932ZM12,3.065A8.934,8.934,0,1,0,20.932,12,8.944,8.944,0,0,0,12,3.065Z" }, child: [] }] }] }] })(r);
}
const qt = ({
visible: r,
x: i,
y: d,
onAction: u,
onClose: f
}) => {
if (!r) return null;
const w = {
top: d,
left: i
};
return /* @__PURE__ */ o.createElement("div", {
style: w,
className: "rte-table-menu",
onMouseLeave: f
}, /* @__PURE__ */ o.createElement("button", {
onClick: () => u("insertRowAbove")
}, /* @__PURE__ */ o.createElement(Z, null), " Insert row above"), /* @__PURE__ */ o.createElement("button", {
onClick: () => u("insertRowBelow")
}, /* @__PURE__ */ o.createElement(Z, null), " Insert row below"), /* @__PURE__ */ o.createElement("button", {
onClick: () => u("insertColLeft")
}, /* @__PURE__ */ o.createElement(Z, null), " Insert col left"), /* @__PURE__ */ o.createElement("button", {
onClick: () => u("insertColRight")
}, /* @__PURE__ */ o.createElement(Z, null), " Insert col right"), /* @__PURE__ */ o.createElement("button", {
onClick: () => u("deleteRow")
}, /* @__PURE__ */ o.createElement(Ae, null), " Delete row"), /* @__PURE__ */ o.createElement("button", {
onClick: () => u("deleteCol")
}, /* @__PURE__ */ o.createElement(Ae, null), " Delete column"));
}, Ut = ({
html: r,
className: i,
style: d
}) => {
const u = (w) => {
const R = w.target;
if (R.tagName === "A") {
w.preventDefault();
const b = R.href;
b && window.open(b, "_blank", "noopener,noreferrer");
}
}, f = (w) => {
let R = w.replace(/{{\s*(.*?)\s*}}/g, (b, p) => `<span style="color: blue">${p}</span>`);
return R = R.replace(/#arrayData/g, ""), R = R.replace(/\/arrayData/g, ""), R;
};
return /* @__PURE__ */ o.createElement("div", {
className: `rte-preview ${i || ""}`,
style: d,
onClick: u,
dangerouslySetInnerHTML: {
__html: f(r)
}
});
}, Vt = ({
visible: r,
linkData: i,
onClose: d,
onInsert: u
}) => {
const [f, w] = A(""), [R, b] = A(""), [p, O] = A(""), [j, k] = A("_self");
if (I(() => {
r ? (w(i.url || ""), b(i.text || ""), O(i.title || ""), k(i.target || "_self")) : (w(""), b(""), O(""), k("_self"));
}, [r, i]), !r) return null;
const _ = () => {
u({
url: f,
text: R,
title: p,
target: j
});
};
return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
className: "rte-link-modal-overlay",
onClick: d
}), /* @__PURE__ */ o.createElement("div", {
className: "rte-link-modal"
}, /* @__PURE__ */ o.createElement("h4", {
className: "rte-link-modal__title"
}, f ? "Edit Link" : "Insert Link"), /* @__PURE__ */ o.createElement("input", {
type: "text",
className: "rte-link-modal__input",
placeholder: "URL",
value: f,
onChange: (L) => w(L.target.value)
}), /* @__PURE__ */ o.createElement("input", {
type: "text",
className: "rte-link-modal__input",
placeholder: "Text to Display",
value: R,
onChange: (L) => b(L.target.value)
}), /* @__PURE__ */ o.createElement("input", {
type: "text",
className: "rte-link-modal__input",
placeholder: "Title",
value: p,
onChange: (L) => O(L.target.value)
}), /* @__PURE__ */ o.createElement("select", {
className: "rte-link-modal__select",
value: j,
onChange: (L) => k(L.target.value)
}, /* @__PURE__ */ o.createElement("option", {
value: "_self"
}, "Same tab"), /* @__PURE__ */ o.createElement("option", {
value: "_blank"
}, "New tab")), /* @__PURE__ */ o.createElement("div", {
className: "rte-link-modal__actions"
}, /* @__PURE__ */ o.createElement("button", {
className: "rte-link-modal__btn",
onClick: d
}, "Cancel"), /* @__PURE__ */ o.createElement("button", {
className: "rte-link-modal__btn rte-link-modal__btn--ok",
onClick: _
}, "OK"))));
};
function ze(r) {
return Array.from(new Map(r.map((i) => [i.value, i])).values());
}
const Xt = ({
atSuggestions: r = [],
showOutput: i = !1,
showPreview: d = !1,
toolbarConfig: u = {
link: !1,
image: !1,
emoji: !1,
table: !1,
color: !1,
fontFamily: !1,
fontSize: !1,
highlight: !1
},
classNames: f = {},
styles: w = {},
handleGetHtml: R = () => {
},
onChange: b = () => {
},
value: p,
onMentionSelect: O = () => {
},
handleAddAttributes: j = () => {
}
}) => {
var he, pe, ve, ye, Ee, we, Ce, be;
const k = P(null), [_, L] = A(p != null && p.length ? p : " "), [K, W] = A(""), [q, B] = A(!1), [F, G] = A({
x: 0,
y: 0
}), [ee, M] = A([]), N = P(null), U = P(null), [D, m] = A({
visible: !1,
x: 0,
y: 0
}), [C, H] = A(!1), X = P(null), [Te, le] = A({
url: "",
text: "",
title: "",
target: "_self"
}), De = {
bold: !0,
italic: !0,
underline: !0,
removeFormat: !0,
unorderedList: !0,
orderedList: !0,
align: !0,
link: (he = u.link) != null ? he : !1,
image: (pe = u.image) != null ? pe : !1,
emoji: (ve = u.emoji) != null ? ve : !1,
table: (ye = u.table) != null ? ye : !1,
color: (Ee = u.color) != null ? Ee : !1,
fontFamily: (we = u.fontFamily) != null ? we : !1,
fontSize: (Ce = u.fontSize) != null ? Ce : !1,
highlight: (be = u.fontSize) != null ? be : !1
}, [Oe, ce] = A(""), [ie, te] = A([]), T = () => k.current, S = () => {
const e = He(), t = /^<div[^>]*style=["'][^"']*font-size\s*:\s*\d+px[^"']*["'][^>]*>/.test(e.trim());
let n = e;
t || (n = `<div style="font-size:12px">${e}</div>`), W(n), R == null || R(n);
const a = ot(e);
b(a);
const s = $e(), l = ze(s);
JSON.stringify(l) !== JSON.stringify(ie) && (te(l), O(l));
}, He = () => {
const e = T();
if (!e) return _;
const t = e.cloneNode(!0);
t.querySelectorAll("table div").forEach((a) => a.remove()), t.querySelectorAll(".rte-cell-highlight").forEach((a) => a.classList.remove("rte-cell-highlight"));
let n = t.innerHTML;
return n = _e(n), n;
}, _e = (e) => e.replace(/<tbody[^>]*>/g, "<tbody>{{#arrayData}}").replace(/<\/tbody>/g, "{{/arrayData}}</tbody>"), V = () => {
const e = window.getSelection();
if (!e || e.rangeCount === 0) return;
const t = document.getElementById("rte-editor-body");
if (!t) return;
const n = e.getRangeAt(0);
t.contains(n.startContainer) && (N.current = n.cloneRange());
}, $ = () => {
const e = window.getSelection();
!e || !N.current || (e.removeAllRanges(), e.addRange(N.current));
}, se = (e, t) => {
const n = window.getSelection();
n && n.rangeCount > 0 && (N.current = n.getRangeAt(0)), $(), document.execCommand(e, !1, t), S();
};
I(() => {
const e = T();
if (!e || !p) return;
const t = je(p);
e.innerHTML = t, S();
}, []);
const je = (e) => e.replace(/<span[^>]*data-hidden-table-start[^>]*>.*?<\/span>/g, "").replace(/<span[^>]*data-hidden-table-end[^>]*>.*?<\/span>/g, "").replace(/{{#arrayData}}/g, "").replace(/{{\/arrayData}}/g, "");
I(() => () => {
document.removeEventListener("mousemove", null), document.removeEventListener("mouseup", null);
}, []), I(() => {
j && j((e) => {
Ve(e);
});
}, []), I(() => {
const e = T();
if (!e) return;
e.querySelectorAll("table").forEach((n) => {
ge(n), n.querySelectorAll("th, td").forEach((s) => Y(s));
});
}, []);
const de = (e) => {
for (; e && e.nodeName !== "LI"; )
e = e.parentNode;
return e;
}, Fe = (e) => {
let t = 0, n = e.parentElement;
for (; n; )
(n.tagName === "UL" || n.tagName === "OL") && t++, n = n.parentElement;
return t;
}, Pe = (e) => {
const t = e.querySelector("li"), n = t ? Fe(t) : 1;
if (e.querySelector("[data-hidden-array-start]")) return;
const a = `{{#arrayData${n > 1 ? n : ""}}}`, s = `{{/arrayData${n > 1 ? n : ""}}}`, l = document.createElement("span");
l.textContent = a, l.style.display = "none", l.setAttribute("data-hidden-array-start", "true"), e.insertBefore(l, e.firstChild);
const c = document.createElement("span");
c.textContent = s, c.style.display = "none", c.setAttribute("data-hidden-array-end", "true"), e.appendChild(c);
}, ue = (e) => {
var v;
const t = window.getSelection();
if (!(t != null && t.rangeCount)) return;
const n = t.getRangeAt(0), a = de(n.startContainer);
let s, l;
if (a) {
let h = a.querySelector(e);
h || (h = document.createElement(e), h.style.margin = "0", h.style.paddingLeft = "20px", a.appendChild(h)), l = h, s = document.createElement("li"), s.textContent = "â", l.appendChild(s);
} else {
document.execCommand(e === "ul" ? "insertUnorderedList" : "insertOrderedList");
const h = T();
if (l = h == null ? void 0 : h.querySelector(`${e}:last-child`), !l) return;
s = l.querySelector("li:last-child");
}
Pe(l);
const c = document.createRange();
c.setStart(s, 0), c.collapse(!0), t.removeAllRanges(), t.addRange(c), (v = T()) == null || v.focus(), S();
}, ne = (e, t) => {
e === "insertOrderedList" ? ue("ol") : e === "insertUnorderedList" ? ue("ul") : e.startsWith("justify") ? ct(e) : se(e, t), e === "insertTable" && Qe();
}, Ie = (e) => {
const t = document.createElement("span");
t.textContent = "â", e.insertNode(t), e.setStartAfter(t), e.collapse(!0);
const n = t.getBoundingClientRect();
t.remove(), G({
x: n.left,
y: n.bottom + window.scrollY
}), M(r || []), B(!0), U.current = e.cloneRange();
}, Be = () => {
const e = window.getSelection();
if (!e || e.rangeCount === 0) return null;
const t = e.anchorNode;
let n = e.anchorOffset;
if (!t) return null;
let a = t;
for (a.nodeType !== Node.TEXT_NODE && (a.childNodes && a.childNodes[n] ? a = a.childNodes[n] : a = t.previousSibling); a; ) {
if (a.nodeType === Node.TEXT_NODE) {
const s = a.textContent || "", l = a === t ? n : s.length, c = s.lastIndexOf("@", l - 1);
if (c !== -1) {
const v = document.createRange();
return v.setStart(a, c), v.setEnd(a, l), v;
}
}
a = a.previousSibling;
}
return null;
}, qe = (e) => {
var l;
const t = window.getSelection();
if (!t) return;
const n = Be();
n ? (t.removeAllRanges(), t.addRange(n)) : U.current && (t.removeAllRanges(), t.addRange(U.current));
const a = document.createElement("span");
a.textContent = `{{${e.name}}}`, a.style.display = "inline", a.setAttribute("data-mention", e.value || e.name || "");
try {
const c = t.rangeCount ? t.getRangeAt(0) : null;
if (c)
c.deleteContents(), c.insertNode(a);
else {
const E = document.createRange(), g = T();
E.selectNodeContents(g), E.collapse(!1), E.insertNode(a);
}
const v = document.createTextNode(" ");
a.after(v);
const h = document.createRange();
h.setStartAfter(v), h.collapse(!0), t.removeAllRanges(), t.addRange(h);
} catch (c) {
console.error("insertMention error:", c);
}
let s = ze([...ie, e]);
te(s), O(s), B(!1), (l = T()) == null || l.focus(), S();
}, Ue = (e) => {
const t = T();
if (!t) return;
let n = null;
N.current && t.contains(N.current.startContainer) ? n = N.current.cloneRange() : (n = document.createRange(), n.selectNodeContents(t), n.collapse(!1));
const a = window.getSelection();
if (!a) return;
a.removeAllRanges(), a.addRange(n);
const s = document.createElement("span");
s.textContent = `{{${e.name}}}`, s.style.display = "inline", s.setAttribute("data-mention", e.value || e.name), n.insertNode(s);
const l = document.createTextNode(" ");
s.after(l);
const c = document.createRange();
c.setStartAfter(l), c.collapse(!0), a.removeAllRanges(), a.addRange(c), N.current = c.cloneRange(), t.focus();
}, Ve = (e) => {
e.forEach((t) => Ue(t)), te((t) => {
const n = [...t, ...e], a = Array.from(new Map(n.map((s) => [s.name, s])).values());
return O(a), a;
}), S();
}, $e = () => {
const e = T();
if (!e) return [];
const t = e.querySelectorAll("span[data-mention]"), n = [];
return t.forEach((a) => {
const s = a.getAttribute("data-mention") || "", c = (a.textContent || "").match(/{{(.+?)}}/);
c && n.push({
name: c[1],
value: s
});
}), n;
}, We = (e) => {
var n, a, s;
const t = e.key.toLowerCase();
if ((e.ctrlKey || e.metaKey) && ["b", "i", "u"].includes(t) && (e.preventDefault(), ne(t === "b" ? "bold" : t === "i" ? "italic" : t === "u" ? "underline" : "")), e.shiftKey && e.key === "2" && e.preventDefault(), e.key === "Enter") {
const l = window.getSelection(), c = l != null && l.anchorNode ? de(l.anchorNode) : null;
if (!c) return;
if (((n = c.textContent) == null ? void 0 : n.replace(/\u200B/g, "").trim()) === "") {
e.preventDefault();
const h = c.parentElement, E = h == null ? void 0 : h.closest("li");
if (E) {
h == null || h.removeChild(c);
const g = document.createElement("p");
g.innerHTML = "<br />", (a = E.parentElement) == null || a.insertBefore(g, E.nextSibling);
const y = document.createRange();
y.setStart(g, 0), y.collapse(!0), l == null || l.removeAllRanges(), l == null || l.addRange(y);
} else {
const g = c.closest("ul, ol");
if (g) {
const y = document.createElement("p");
y.innerHTML = "<br />", (s = g.parentElement) == null || s.insertBefore(y, g.nextSibling), g.removeChild(c);
const x = document.createRange();
x.setStart(y, 0), x.collapse(!0), l == null || l.removeAllRanges(), l == null || l.addRange(x);
}
}
S();
}
}
}, Ke = (e) => {
if (e.data === "@") {
const n = window.getSelection();
if (!(n != null && n.rangeCount)) return;
const a = n.anchorNode;
if (Xe(a))
return;
setTimeout(() => {
Ie(n.getRangeAt(0)), ce(""), M(r), B(!0);
}, 0);
return;
}
if (q) {
setTimeout(() => me(), 0);
return;
}
}, Xe = (e) => {
if (!e) return !1;
let t = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement;
for (; t; ) {
if (t.tagName === "TH") return !0;
t = t.parentElement;
}
return !1;
}, me = () => {
if (S(), !q) return;
const e = window.getSelection();
if (!e || !e.anchorNode) return;
const n = (e.anchorNode.textContent || "").match(/@([a-zA-Z0-9_]*)$/);
if (!n) {
B(!1);
return;
}
const a = n[1].toLowerCase();
ce(a);
const s = r.filter((l) => l.name.toLowerCase().includes(a));
M(s);
}, Ye = (e) => {
var a;
const t = (a = e.target.files) == null ? void 0 : a[0];
if (!t) return;
const n = new FileReader();
n.onload = (s) => {
var x;
const l = (x = s.target) == null ? void 0 : x.result;
$();
const c = window.getSelection();
let v = c && c.rangeCount ? c.getRangeAt(0) : null;
const h = document.createElement("img");
h.src = l, h.alt = t.name || "image", h.className = "rte-inserted-image", h.contentEditable = "true";
const E = T();
if (!v || !E) {
E == null || E.appendChild(h);
const Re = document.createTextNode(" ");
E == null || E.appendChild(Re);
const re = document.createRange();
re.setStartAfter(Re), re.collapse(!0), c == null || c.removeAllRanges(), c == null || c.addRange(re), E == null || E.focus(), S(), e.target.value = "";
return;
}
v.deleteContents(), v.insertNode(h);
const g = document.createTextNode(" ");
h.after(g);
const y = document.createRange();
y.setStartAfter(g), y.collapse(!0), c.removeAllRanges(), c.addRange(y), E.focus(), S(), e.target.value = "";
}, n.readAsDataURL(t);
}, Ze = (e) => {
var s;
$();
const t = window.getSelection();
if (!(t != null && t.rangeCount)) return;
const n = t.getRangeAt(0), a = document.createTextNode(e);
n.insertNode(a), n.setStartAfter(a), n.collapse(!0), t.removeAllRanges(), t.addRange(n), (s = T()) == null || s.focus(), S();
}, Qe = () => {
var E;
$();
const e = document.createElement("table");
e.style.borderCollapse = "collapse", e.style.width = "100%", e.style.border = "1px solid #ccc", e.style.margin = "8px 0", e.style.position = "relative", e.style.textAlign = "center", f.table && e.classList.add(f.table);
const t = document.createElement("thead");
f.thead && t.classList.add(f.thead);
const n = document.createElement("tbody");
f.tbody && n.classList.add(f.tbody);
const a = document.createElement("tr");
f.tr && a.classList.add(f.tr);
const s = document.createElement("tr");
f.tr && s.classList.add(f.tr);
for (let g = 0; g < 2; g++) {
const y = document.createElement("th");
y.textContent = `Header ${g + 1}`, y.style.border = "1px solid #999", y.style.padding = "4px", y.style.position = "relative", y.style.backgroundColor = "lightgray", f.th && y.classList.add(f.th);
const x = document.createElement("td");
x.textContent = `Row 1 Col ${g + 1}`, x.style.border = "1px solid #999", x.style.padding = "4px", x.style.position = "relative", x.style.backgroundColor = "#fff", f.td && x.classList.add(f.td), Y(y), Y(x), a.appendChild(y), s.appendChild(x);
}
t.appendChild(a), n.appendChild(s), e.appendChild(t), e.appendChild(n), ge(e);
const l = window.getSelection();
if (!(l != null && l.rangeCount)) return;
const c = l.getRangeAt(0);
c.collapse(!1), c.insertNode(e);
const v = document.createElement("p");
v.innerHTML = "<br/>", e.after(v);
const h = document.createRange();
h.setStart(v, 0), h.collapse(!0), l.removeAllRanges(), l.addRange(h), (E = T()) == null || E.focus(), S();
}, ge = (e) => {
const t = document.createElement("div");
Object.assign(t.style, {
position: "absolute",
width: "14px",
height: "14px",
right: "0",
bottom: "0",
background: "rgba(0,0,0,0.25)",
cursor: "nwse-resize",
zIndex: "20",
borderRadius: "2px"
}), t.style.userSelect = "none", t.contentEditable = "false";
let n = 0, a = 0, s = 0, l = 0;
t.addEventListener("mousedown", (c) => {
c.preventDefault(), n = c.clientX, a = c.clientY;
const v = e.getBoundingClientRect();
s = v.width, l = v.height;
const h = (g) => {
const y = Math.max(100, s + (g.clientX - n)), x = Math.max(60, l + (g.clientY - a));
e.style.width = `${y}px`, e.style.height = `${x}px`, S();
}, E = () => {
document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", E), S();
};
document.addEventListener("mousemove", h), document.addEventListener("mouseup", E);
}), e.appendChild(t);
}, Y = (e) => {
const t = document.createElement("div"), n = document.createElement("div");
Object.assign(t.style, {
position: "absolute",
right: "0",
top: "0",
width: "6px",
height: "100%",
cursor: "col-resize",
background: "rgba(0,0,0,0.15)",
zIndex: "10",
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
pointerEvents: "auto"
}), t.contentEditable = "false", Object.assign(n.style, {
position: "absolute",
bottom: "0",
left: "0",
width: "100%",
height: "6px",
cursor: "row-resize",
background: "rgba(0,0,0,0.15)",
zIndex: "10",
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
pointerEvents: "auto"
}), n.contentEditable = "false", Je(e, t, n), e.appendChild(t), e.appendChild(n);
}, Je = (e, t, n) => {
let a = 0, s = 0, l = 0, c = 0;
t.addEventListener("mousedown", (g) => {
g.preventDefault(), a = g.clientX, l = e.offsetWidth, document.addEventListener("mousemove", v), document.addEventListener("mouseup", E);
}), n.addEventListener("mousedown", (g) => {
g.preventDefault(), s = g.clientY, c = e.offsetHeight, document.addEventListener("mousemove", h), document.addEventListener("mouseup", E);
});
const v = (g) => {
const y = l + (g.clientX - a);
e.style.width = `${Math.max(30, y)}px`, S();
}, h = (g) => {
const y = c + (g.clientY - s);
e.style.height = `${Math.max(20, y)}px`, S();
}, E = () => {
document.removeEventListener("mousemove", v), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", E), S();
};
}, Ge = (e) => {
const n = e.target.closest("td, th");
n && (e.preventDefault(), document.querySelectorAll(".rte-cell-highlight").forEach((a) => a.classList.remove("rte-cell-highlight")), n.classList.add("rte-cell-highlight"), m({
visible: !0,
x: e.clientX,
y: e.clientY,
cell: n
}));
}, fe = () => {
document.querySelectorAll(".rte-cell-highlight").forEach((e) => e.classList.remove("rte-cell-highlight"));
}, et = (e) => {
if (!D.cell) return;
const t = D.cell.closest("table"), n = D.cell.cellIndex, a = D.cell.parentElement.rowIndex, s = (l) => {
const c = l.tagName.toLowerCase(), v = document.createElement(c);
return v.textContent = l.textContent || "", v.style.cssText = l.style.cssText, Y(v), v;
};
switch (e) {
case "insertRowAbove": {
const l = t.rows[a], c = t.insertRow(a);
Array.from(l.cells).forEach((v) => {
c.appendChild(s(v));
});
break;
}
case "insertRowBelow": {
const l = t.rows[a], c = t.insertRow(a + 1);
Array.from(l.cells).forEach((v) => {
c.appendChild(s(v));
});
break;
}
case "insertColLeft": {
Array.from(t.rows).forEach((l) => {
const c = l.cells[n];
l.insertBefore(s(c), c);
});
break;
}
case "insertColRight": {
Array.from(t.rows).forEach((l) => {
const c = l.cells[n];
l.insertBefore(s(c), c.nextSibling);
});
break;
}
case "deleteRow":
t.rows.length > 1 && t.deleteRow(a);
break;
case "deleteCol":
Array.from(t.rows).forEach((l) => {
l.cells[n] && l.deleteCell(n);
});
break;
}
S(), m(oe(ae({}, D), {
visible: !1
})), fe();
}, tt = () => {
V(), X.current = N.current, le({
url: "",
text: "",
title: "",
target: "_self"
}), H(!0);
}, nt = (e) => {
const t = window.getSelection();
if (!t || !X.current) return;
t.removeAllRanges(), t.addRange(X.current);
let n = e.url.trim();
/^https?:\/\//i.test(n) || (n = "https://" + n);
const a = document.createElement("a");
a.href = n, a.style.cursor = "pointer", a.style.outline = "none", a.textContent = e.text || n, a.title = e.title, a.target = e.target, a.contentEditable = "true";
const s = t.getRangeAt(0);
s.deleteContents(), s.insertNode(a);
const l = document.createTextNode(" ");
a.after(l);
const c = document.createRange();
c.setStartAfter(l), c.collapse(!0), t.removeAllRanges(), t.addRange(c), H(!1), S();
}, rt = (e) => {
const t = e.target;
if (t.tagName === "A") {
const n = t;
if (e.ctrlKey || e.metaKey) {
window.open(n.href, "_blank", "noopener,noreferrer");
return;
}
e.preventDefault();
const a = document.createRange();
a.selectNode(n), X.current = a, le({
url: n.href,
text: n.textContent || n.href,
title: n.title,
target: n.target
}), H(!0);
}
}, at = () => {
const e = T();
if (!e) return;
const t = window.getSelection();
if ((!t || t.rangeCount === 0) && N.current) {
const g = window.getSelection();
g == null || g.removeAllRanges(), g == null || g.addRange(N.current);
}
const n = window.getSelection();
if (!n || n.rangeCount === 0) return;
const a = n.getRangeAt(0);
$(), document.execCommand("removeFormat", !1);
const s = a.cloneContents(), l = document.createElement("div");
l.appendChild(s);
const c = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, null), v = [];
for (; c.nextNode(); ) {
const g = c.currentNode, y = g.tagName.toUpperCase(), x = g.