@ryzeup/richtexteditor 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +262 -241
- package/dist/index.js +4 -4
- package/dist/index.umd.js +2 -2
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -23,11 +23,11 @@ var Ne = {
|
|
|
23
23
|
}, Me = a.createContext && /* @__PURE__ */ a.createContext(Ne), gt = ["attr", "size", "title"];
|
|
24
24
|
function ft(r, c) {
|
|
25
25
|
if (r == null) return {};
|
|
26
|
-
var d = ht(r, c), u,
|
|
26
|
+
var d = ht(r, c), u, g;
|
|
27
27
|
if (Object.getOwnPropertySymbols) {
|
|
28
28
|
var y = Object.getOwnPropertySymbols(r);
|
|
29
|
-
for (
|
|
30
|
-
u = y[
|
|
29
|
+
for (g = 0; g < y.length; g++)
|
|
30
|
+
u = y[g], !(c.indexOf(u) >= 0) && Object.prototype.propertyIsEnumerable.call(r, u) && (d[u] = r[u]);
|
|
31
31
|
}
|
|
32
32
|
return d;
|
|
33
33
|
}
|
|
@@ -41,27 +41,27 @@ function ht(r, c) {
|
|
|
41
41
|
}
|
|
42
42
|
return d;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
return
|
|
44
|
+
function Q() {
|
|
45
|
+
return Q = Object.assign ? Object.assign.bind() : function(r) {
|
|
46
46
|
for (var c = 1; c < arguments.length; c++) {
|
|
47
47
|
var d = arguments[c];
|
|
48
48
|
for (var u in d)
|
|
49
49
|
Object.prototype.hasOwnProperty.call(d, u) && (r[u] = d[u]);
|
|
50
50
|
}
|
|
51
51
|
return r;
|
|
52
|
-
},
|
|
52
|
+
}, Q.apply(this, arguments);
|
|
53
53
|
}
|
|
54
54
|
function ze(r, c) {
|
|
55
55
|
var d = Object.keys(r);
|
|
56
56
|
if (Object.getOwnPropertySymbols) {
|
|
57
57
|
var u = Object.getOwnPropertySymbols(r);
|
|
58
|
-
c && (u = u.filter(function(
|
|
59
|
-
return Object.getOwnPropertyDescriptor(r,
|
|
58
|
+
c && (u = u.filter(function(g) {
|
|
59
|
+
return Object.getOwnPropertyDescriptor(r, g).enumerable;
|
|
60
60
|
})), d.push.apply(d, u);
|
|
61
61
|
}
|
|
62
62
|
return d;
|
|
63
63
|
}
|
|
64
|
-
function
|
|
64
|
+
function J(r) {
|
|
65
65
|
for (var c = 1; c < arguments.length; c++) {
|
|
66
66
|
var d = arguments[c] != null ? arguments[c] : {};
|
|
67
67
|
c % 2 ? ze(Object(d), !0).forEach(function(u) {
|
|
@@ -90,29 +90,29 @@ function Et(r, c) {
|
|
|
90
90
|
return (c === "string" ? String : Number)(r);
|
|
91
91
|
}
|
|
92
92
|
function Te(r) {
|
|
93
|
-
return r && r.map((c, d) => /* @__PURE__ */ a.createElement(c.tag,
|
|
93
|
+
return r && r.map((c, d) => /* @__PURE__ */ a.createElement(c.tag, J({
|
|
94
94
|
key: d
|
|
95
95
|
}, c.attr), Te(c.child)));
|
|
96
96
|
}
|
|
97
97
|
function M(r) {
|
|
98
|
-
return (c) => /* @__PURE__ */ a.createElement(yt,
|
|
99
|
-
attr:
|
|
98
|
+
return (c) => /* @__PURE__ */ a.createElement(yt, Q({
|
|
99
|
+
attr: J({}, r.attr)
|
|
100
100
|
}, c), Te(r.child));
|
|
101
101
|
}
|
|
102
102
|
function yt(r) {
|
|
103
103
|
var c = (d) => {
|
|
104
104
|
var {
|
|
105
105
|
attr: u,
|
|
106
|
-
size:
|
|
106
|
+
size: g,
|
|
107
107
|
title: y
|
|
108
|
-
} = r, R = ft(r, gt), b =
|
|
109
|
-
return d.className && (E = d.className), r.className && (E = (E ? E + " " : "") + r.className), /* @__PURE__ */ a.createElement("svg",
|
|
108
|
+
} = r, R = ft(r, gt), b = g || d.size || "1em", E;
|
|
109
|
+
return d.className && (E = d.className), r.className && (E = (E ? E + " " : "") + r.className), /* @__PURE__ */ a.createElement("svg", Q({
|
|
110
110
|
stroke: "currentColor",
|
|
111
111
|
fill: "currentColor",
|
|
112
112
|
strokeWidth: "0"
|
|
113
113
|
}, d.attr, u, R, {
|
|
114
114
|
className: E,
|
|
115
|
-
style:
|
|
115
|
+
style: J(J({
|
|
116
116
|
color: r.color || d.color
|
|
117
117
|
}, d.style), r.style),
|
|
118
118
|
height: b,
|
|
@@ -284,30 +284,30 @@ const Ht = [
|
|
|
284
284
|
saveSelection: c,
|
|
285
285
|
handleFileChange: d,
|
|
286
286
|
handleFontSizeChange: u,
|
|
287
|
-
handleFontFamilyChange:
|
|
287
|
+
handleFontFamilyChange: g,
|
|
288
288
|
// insertListBlock,
|
|
289
289
|
insertEmoji: y,
|
|
290
290
|
handleLink: R,
|
|
291
291
|
removeFormatting: b,
|
|
292
292
|
visibleActions: E,
|
|
293
|
-
className:
|
|
293
|
+
className: T,
|
|
294
294
|
style: _
|
|
295
295
|
}) => {
|
|
296
|
-
var
|
|
297
|
-
const k = I(null),
|
|
296
|
+
var U, N;
|
|
297
|
+
const k = I(null), D = I(null), x = I(null), [G, W] = S(!1), [V, B] = S({
|
|
298
298
|
x: 0,
|
|
299
299
|
y: 0
|
|
300
300
|
});
|
|
301
301
|
P(() => {
|
|
302
|
-
const
|
|
303
|
-
!w.target.closest(".rte-emoji-popup") && !w.target.closest("button[title='Emoji']") &&
|
|
302
|
+
const p = (w) => {
|
|
303
|
+
!w.target.closest(".rte-emoji-popup") && !w.target.closest("button[title='Emoji']") && W(!1);
|
|
304
304
|
};
|
|
305
|
-
return document.addEventListener("mousedown",
|
|
305
|
+
return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
|
|
306
306
|
}, []);
|
|
307
|
-
const F = (
|
|
308
|
-
var
|
|
309
|
-
|
|
310
|
-
const w =
|
|
307
|
+
const F = (p) => {
|
|
308
|
+
var O;
|
|
309
|
+
p.preventDefault();
|
|
310
|
+
const w = p.currentTarget.dataset.command;
|
|
311
311
|
if (w)
|
|
312
312
|
switch (w) {
|
|
313
313
|
case "bold":
|
|
@@ -319,16 +319,16 @@ const Ht = [
|
|
|
319
319
|
r(w);
|
|
320
320
|
break;
|
|
321
321
|
case "insertImage": {
|
|
322
|
-
(
|
|
322
|
+
(O = k.current) == null || O.click();
|
|
323
323
|
break;
|
|
324
324
|
}
|
|
325
325
|
default:
|
|
326
326
|
console.warn("Unknown command:", w);
|
|
327
327
|
}
|
|
328
|
-
},
|
|
329
|
-
r("foreColor",
|
|
330
|
-
},
|
|
331
|
-
r("backColor",
|
|
328
|
+
}, ee = (p) => {
|
|
329
|
+
r("foreColor", p.target.value);
|
|
330
|
+
}, te = (p) => {
|
|
331
|
+
r("backColor", p.target.value);
|
|
332
332
|
}, [L, j] = S({
|
|
333
333
|
bold: !1,
|
|
334
334
|
italic: !1,
|
|
@@ -347,7 +347,7 @@ const Ht = [
|
|
|
347
347
|
highlight: !1
|
|
348
348
|
});
|
|
349
349
|
return P(() => {
|
|
350
|
-
const
|
|
350
|
+
const p = () => {
|
|
351
351
|
j({
|
|
352
352
|
bold: document.queryCommandState("bold"),
|
|
353
353
|
italic: document.queryCommandState("italic"),
|
|
@@ -366,9 +366,9 @@ const Ht = [
|
|
|
366
366
|
highlight: document.queryCommandState("backColor")
|
|
367
367
|
});
|
|
368
368
|
};
|
|
369
|
-
return document.addEventListener("selectionchange",
|
|
369
|
+
return document.addEventListener("selectionchange", p), () => document.removeEventListener("selectionchange", p);
|
|
370
370
|
}, []), /* @__PURE__ */ a.createElement("div", {
|
|
371
|
-
className: `rte-toolbar ${
|
|
371
|
+
className: `rte-toolbar ${T || ""}`,
|
|
372
372
|
style: _
|
|
373
373
|
}, E.bold && /* @__PURE__ */ a.createElement("button", {
|
|
374
374
|
"data-command": "bold",
|
|
@@ -403,8 +403,8 @@ const Ht = [
|
|
|
403
403
|
}, /* @__PURE__ */ a.createElement(zt, null)), E.removeFormat && /* @__PURE__ */ a.createElement("button", {
|
|
404
404
|
"data-command": "Remove format",
|
|
405
405
|
title: "removeFormat",
|
|
406
|
-
onMouseDown: (
|
|
407
|
-
|
|
406
|
+
onMouseDown: (p) => {
|
|
407
|
+
p.preventDefault(), c(), b();
|
|
408
408
|
},
|
|
409
409
|
className: L.removeFormat ? "rte-active" : ""
|
|
410
410
|
}, /* @__PURE__ */ a.createElement(Ot, null)), E.image && /* @__PURE__ */ a.createElement("button", {
|
|
@@ -426,57 +426,57 @@ const Ht = [
|
|
|
426
426
|
}
|
|
427
427
|
}, /* @__PURE__ */ a.createElement("button", {
|
|
428
428
|
title: "Emoji",
|
|
429
|
-
onMouseDown: (
|
|
430
|
-
|
|
431
|
-
const w =
|
|
429
|
+
onMouseDown: (p) => {
|
|
430
|
+
p.preventDefault(), c();
|
|
431
|
+
const w = p.currentTarget.getBoundingClientRect();
|
|
432
432
|
B({
|
|
433
433
|
x: w.left,
|
|
434
434
|
y: w.bottom + 8
|
|
435
435
|
// small spacing
|
|
436
|
-
}),
|
|
436
|
+
}), W((O) => !O);
|
|
437
437
|
},
|
|
438
438
|
className: L.emoji ? "rte-active" : ""
|
|
439
|
-
}, /* @__PURE__ */ a.createElement(At, null)),
|
|
439
|
+
}, /* @__PURE__ */ a.createElement(At, null)), G && /* @__PURE__ */ mt(/* @__PURE__ */ a.createElement("div", {
|
|
440
440
|
className: "rte-emoji-popup",
|
|
441
441
|
style: {
|
|
442
|
-
top:
|
|
443
|
-
left:
|
|
442
|
+
top: V.y,
|
|
443
|
+
left: V.x
|
|
444
444
|
}
|
|
445
|
-
}, Ht.map((
|
|
445
|
+
}, Ht.map((p, w) => /* @__PURE__ */ a.createElement("span", {
|
|
446
446
|
key: w,
|
|
447
447
|
style: {
|
|
448
448
|
fontSize: "20px",
|
|
449
449
|
cursor: "pointer",
|
|
450
450
|
textAlign: "center"
|
|
451
451
|
},
|
|
452
|
-
onMouseDown: (
|
|
453
|
-
|
|
452
|
+
onMouseDown: (O) => {
|
|
453
|
+
O.preventDefault(), y(p), W(!1);
|
|
454
454
|
}
|
|
455
|
-
},
|
|
455
|
+
}, p))), document.body)), E.color && /* @__PURE__ */ a.createElement("div", {
|
|
456
456
|
style: {
|
|
457
457
|
position: "relative"
|
|
458
458
|
}
|
|
459
459
|
}, /* @__PURE__ */ a.createElement("button", {
|
|
460
460
|
title: "Text Color",
|
|
461
|
-
onMouseDown: (
|
|
461
|
+
onMouseDown: (p) => {
|
|
462
462
|
var w;
|
|
463
|
-
|
|
463
|
+
p.preventDefault(), c(), (w = D.current) == null || w.click();
|
|
464
464
|
},
|
|
465
465
|
style: {
|
|
466
466
|
display: "flex",
|
|
467
467
|
alignItems: "center",
|
|
468
468
|
justifyContent: "center",
|
|
469
|
-
color: ((
|
|
469
|
+
color: ((U = D.current) == null ? void 0 : U.value) || "#000",
|
|
470
470
|
fontSize: "18px"
|
|
471
471
|
},
|
|
472
472
|
className: L.color ? "rte-active" : ""
|
|
473
473
|
}, /* @__PURE__ */ a.createElement(Dt, null)), /* @__PURE__ */ a.createElement("input", {
|
|
474
|
-
ref:
|
|
474
|
+
ref: D,
|
|
475
475
|
type: "color",
|
|
476
476
|
defaultValue: "#000000",
|
|
477
|
-
onChange: (
|
|
477
|
+
onChange: (p) => {
|
|
478
478
|
var w;
|
|
479
|
-
|
|
479
|
+
ee(p), ((w = p.target.parentElement) == null ? void 0 : w.querySelector("button")).style.color = p.target.value;
|
|
480
480
|
},
|
|
481
481
|
style: {
|
|
482
482
|
position: "absolute",
|
|
@@ -491,9 +491,9 @@ const Ht = [
|
|
|
491
491
|
}
|
|
492
492
|
}, /* @__PURE__ */ a.createElement("button", {
|
|
493
493
|
title: "Highlight",
|
|
494
|
-
onMouseDown: (
|
|
494
|
+
onMouseDown: (p) => {
|
|
495
495
|
var w;
|
|
496
|
-
|
|
496
|
+
p.preventDefault(), c(), (w = x.current) == null || w.click();
|
|
497
497
|
},
|
|
498
498
|
style: {
|
|
499
499
|
display: "flex",
|
|
@@ -506,9 +506,9 @@ const Ht = [
|
|
|
506
506
|
}, /* @__PURE__ */ a.createElement(St, null)), /* @__PURE__ */ a.createElement("input", {
|
|
507
507
|
ref: x,
|
|
508
508
|
type: "color",
|
|
509
|
-
onChange: (
|
|
509
|
+
onChange: (p) => {
|
|
510
510
|
var w;
|
|
511
|
-
|
|
511
|
+
te(p), ((w = p.target.parentElement) == null ? void 0 : w.querySelector("button")).style.color = p.target.value;
|
|
512
512
|
},
|
|
513
513
|
defaultValue: "#000000",
|
|
514
514
|
style: {
|
|
@@ -520,29 +520,29 @@ const Ht = [
|
|
|
520
520
|
}
|
|
521
521
|
})), E.align && /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("button", {
|
|
522
522
|
title: "Align Left",
|
|
523
|
-
onMouseDown: (
|
|
523
|
+
onMouseDown: (p) => p.preventDefault(),
|
|
524
524
|
onClick: () => r("justifyLeft"),
|
|
525
525
|
className: L.alignLeft ? "rte-active" : ""
|
|
526
526
|
}, /* @__PURE__ */ a.createElement(Lt, null)), /* @__PURE__ */ a.createElement("button", {
|
|
527
527
|
title: "Align Center",
|
|
528
|
-
onMouseDown: (
|
|
528
|
+
onMouseDown: (p) => p.preventDefault(),
|
|
529
529
|
onClick: () => r("justifyCenter"),
|
|
530
530
|
className: L.alignCenter ? "rte-active" : ""
|
|
531
531
|
}, /* @__PURE__ */ a.createElement(wt, null)), /* @__PURE__ */ a.createElement("button", {
|
|
532
532
|
title: "Align Right",
|
|
533
|
-
onMouseDown: (
|
|
533
|
+
onMouseDown: (p) => p.preventDefault(),
|
|
534
534
|
onClick: () => r("justifyRight"),
|
|
535
535
|
className: L.alignRight ? "rte-active" : ""
|
|
536
536
|
}, /* @__PURE__ */ a.createElement(Ct, null))), E.table && /* @__PURE__ */ a.createElement("button", {
|
|
537
537
|
title: "Insert Table",
|
|
538
|
-
onMouseDown: (
|
|
538
|
+
onMouseDown: (p) => p.preventDefault(),
|
|
539
539
|
onClick: () => r("insertTable"),
|
|
540
540
|
className: L.table ? "rte-active" : ""
|
|
541
541
|
}, /* @__PURE__ */ a.createElement(Nt, null)), E.fontFamily && /* @__PURE__ */ a.createElement("select", {
|
|
542
542
|
className: "rte-dropdown",
|
|
543
543
|
defaultValue: "",
|
|
544
544
|
onMouseDown: () => c(),
|
|
545
|
-
onChange:
|
|
545
|
+
onChange: g
|
|
546
546
|
}, /* @__PURE__ */ a.createElement("option", {
|
|
547
547
|
value: "",
|
|
548
548
|
disabled: !0
|
|
@@ -578,18 +578,18 @@ const Ht = [
|
|
|
578
578
|
position: c,
|
|
579
579
|
filtered: d,
|
|
580
580
|
insertMention: u,
|
|
581
|
-
onClose:
|
|
581
|
+
onClose: g,
|
|
582
582
|
query: y
|
|
583
583
|
}) => {
|
|
584
584
|
const R = I(null);
|
|
585
585
|
return P(() => {
|
|
586
586
|
const b = (E) => {
|
|
587
|
-
R.current && !R.current.contains(E.target) &&
|
|
587
|
+
R.current && !R.current.contains(E.target) && g();
|
|
588
588
|
};
|
|
589
589
|
return r && document.addEventListener("mousedown", b), () => {
|
|
590
590
|
document.removeEventListener("mousedown", b);
|
|
591
591
|
};
|
|
592
|
-
}, [r,
|
|
592
|
+
}, [r, g]), r ? /* @__PURE__ */ a.createElement("ul", {
|
|
593
593
|
ref: R,
|
|
594
594
|
className: "rte-popup",
|
|
595
595
|
style: {
|
|
@@ -600,11 +600,11 @@ const Ht = [
|
|
|
600
600
|
name: b,
|
|
601
601
|
value: E
|
|
602
602
|
}) => {
|
|
603
|
-
const
|
|
604
|
-
let
|
|
603
|
+
const T = b.toLowerCase(), _ = y.toLowerCase(), k = T.indexOf(_);
|
|
604
|
+
let D = b;
|
|
605
605
|
if (k !== -1 && y.length > 0) {
|
|
606
606
|
const x = k + y.length;
|
|
607
|
-
|
|
607
|
+
D = b.substring(0, k) + `<span class="rte-highlight">${b.substring(k, x)}</span>` + b.substring(x);
|
|
608
608
|
}
|
|
609
609
|
return /* @__PURE__ */ a.createElement("li", {
|
|
610
610
|
key: E,
|
|
@@ -620,7 +620,7 @@ const Ht = [
|
|
|
620
620
|
fontSize: "14px"
|
|
621
621
|
},
|
|
622
622
|
dangerouslySetInnerHTML: {
|
|
623
|
-
__html:
|
|
623
|
+
__html: D
|
|
624
624
|
},
|
|
625
625
|
onMouseEnter: (x) => x.currentTarget.style.background = "#f0f0f0",
|
|
626
626
|
onMouseLeave: (x) => x.currentTarget.style.background = "#fff"
|
|
@@ -635,7 +635,7 @@ const Ht = [
|
|
|
635
635
|
function ke(r) {
|
|
636
636
|
return M({ 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);
|
|
637
637
|
}
|
|
638
|
-
function
|
|
638
|
+
function Z(r) {
|
|
639
639
|
return M({ 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);
|
|
640
640
|
}
|
|
641
641
|
const Ft = ({
|
|
@@ -643,7 +643,7 @@ const Ft = ({
|
|
|
643
643
|
x: c,
|
|
644
644
|
y: d,
|
|
645
645
|
onAction: u,
|
|
646
|
-
onClose:
|
|
646
|
+
onClose: g
|
|
647
647
|
}) => {
|
|
648
648
|
if (!r) return null;
|
|
649
649
|
const y = {
|
|
@@ -653,16 +653,16 @@ const Ft = ({
|
|
|
653
653
|
return /* @__PURE__ */ a.createElement("div", {
|
|
654
654
|
style: y,
|
|
655
655
|
className: "rte-table-menu",
|
|
656
|
-
onMouseLeave:
|
|
656
|
+
onMouseLeave: g
|
|
657
657
|
}, /* @__PURE__ */ a.createElement("button", {
|
|
658
658
|
onClick: () => u("insertRowAbove")
|
|
659
|
-
}, /* @__PURE__ */ a.createElement(
|
|
659
|
+
}, /* @__PURE__ */ a.createElement(Z, null), " Insert row above"), /* @__PURE__ */ a.createElement("button", {
|
|
660
660
|
onClick: () => u("insertRowBelow")
|
|
661
|
-
}, /* @__PURE__ */ a.createElement(
|
|
661
|
+
}, /* @__PURE__ */ a.createElement(Z, null), " Insert row below"), /* @__PURE__ */ a.createElement("button", {
|
|
662
662
|
onClick: () => u("insertColLeft")
|
|
663
|
-
}, /* @__PURE__ */ a.createElement(
|
|
663
|
+
}, /* @__PURE__ */ a.createElement(Z, null), " Insert col left"), /* @__PURE__ */ a.createElement("button", {
|
|
664
664
|
onClick: () => u("insertColRight")
|
|
665
|
-
}, /* @__PURE__ */ a.createElement(
|
|
665
|
+
}, /* @__PURE__ */ a.createElement(Z, null), " Insert col right"), /* @__PURE__ */ a.createElement("button", {
|
|
666
666
|
onClick: () => u("deleteRow")
|
|
667
667
|
}, /* @__PURE__ */ a.createElement(ke, null), " Delete row"), /* @__PURE__ */ a.createElement("button", {
|
|
668
668
|
onClick: () => u("deleteCol")
|
|
@@ -679,13 +679,13 @@ const Ft = ({
|
|
|
679
679
|
const b = R.href;
|
|
680
680
|
b && window.open(b, "_blank", "noopener,noreferrer");
|
|
681
681
|
}
|
|
682
|
-
},
|
|
682
|
+
}, g = (y) => y.replace(/{{\s*(.*?)\s*}}/g, "$1");
|
|
683
683
|
return /* @__PURE__ */ a.createElement("div", {
|
|
684
684
|
className: `rte-preview ${c || ""}`,
|
|
685
685
|
style: d,
|
|
686
686
|
onClick: u,
|
|
687
687
|
dangerouslySetInnerHTML: {
|
|
688
|
-
__html:
|
|
688
|
+
__html: g(r)
|
|
689
689
|
}
|
|
690
690
|
});
|
|
691
691
|
}, Pt = ({
|
|
@@ -694,13 +694,13 @@ const Ft = ({
|
|
|
694
694
|
onClose: d,
|
|
695
695
|
onInsert: u
|
|
696
696
|
}) => {
|
|
697
|
-
const [
|
|
697
|
+
const [g, y] = S(""), [R, b] = S(""), [E, T] = S(""), [_, k] = S("_self");
|
|
698
698
|
if (P(() => {
|
|
699
|
-
r ? (y(c.url || ""), b(c.text || ""),
|
|
699
|
+
r ? (y(c.url || ""), b(c.text || ""), T(c.title || ""), k(c.target || "_self")) : (y(""), b(""), T(""), k("_self"));
|
|
700
700
|
}, [r, c]), !r) return null;
|
|
701
|
-
const
|
|
701
|
+
const D = () => {
|
|
702
702
|
u({
|
|
703
|
-
url:
|
|
703
|
+
url: g,
|
|
704
704
|
text: R,
|
|
705
705
|
title: E,
|
|
706
706
|
target: _
|
|
@@ -713,11 +713,11 @@ const Ft = ({
|
|
|
713
713
|
className: "rte-link-modal"
|
|
714
714
|
}, /* @__PURE__ */ a.createElement("h4", {
|
|
715
715
|
className: "rte-link-modal__title"
|
|
716
|
-
},
|
|
716
|
+
}, g ? "Edit Link" : "Insert Link"), /* @__PURE__ */ a.createElement("input", {
|
|
717
717
|
type: "text",
|
|
718
718
|
className: "rte-link-modal__input",
|
|
719
719
|
placeholder: "URL",
|
|
720
|
-
value:
|
|
720
|
+
value: g,
|
|
721
721
|
onChange: (x) => y(x.target.value)
|
|
722
722
|
}), /* @__PURE__ */ a.createElement("input", {
|
|
723
723
|
type: "text",
|
|
@@ -730,7 +730,7 @@ const Ft = ({
|
|
|
730
730
|
className: "rte-link-modal__input",
|
|
731
731
|
placeholder: "Title",
|
|
732
732
|
value: E,
|
|
733
|
-
onChange: (x) =>
|
|
733
|
+
onChange: (x) => T(x.target.value)
|
|
734
734
|
}), /* @__PURE__ */ a.createElement("select", {
|
|
735
735
|
className: "rte-link-modal__select",
|
|
736
736
|
value: _,
|
|
@@ -746,13 +746,13 @@ const Ft = ({
|
|
|
746
746
|
onClick: d
|
|
747
747
|
}, "Cancel"), /* @__PURE__ */ a.createElement("button", {
|
|
748
748
|
className: "rte-link-modal__btn rte-link-modal__btn--ok",
|
|
749
|
-
onClick:
|
|
749
|
+
onClick: D
|
|
750
750
|
}, "OK"))));
|
|
751
751
|
};
|
|
752
752
|
function Ae(r) {
|
|
753
753
|
return Array.from(new Map(r.map((c) => [c.value, c])).values());
|
|
754
754
|
}
|
|
755
|
-
const
|
|
755
|
+
const Ut = ({
|
|
756
756
|
atSuggestions: r = [],
|
|
757
757
|
showOutput: c = !1,
|
|
758
758
|
showPreview: d = !1,
|
|
@@ -766,27 +766,27 @@ const $t = ({
|
|
|
766
766
|
fontSize: !1,
|
|
767
767
|
highlight: !1
|
|
768
768
|
},
|
|
769
|
-
classNames:
|
|
769
|
+
classNames: g = {},
|
|
770
770
|
styles: y = {},
|
|
771
771
|
handleGetHtml: R = () => {
|
|
772
772
|
},
|
|
773
773
|
onChange: b = () => {
|
|
774
774
|
},
|
|
775
775
|
value: E,
|
|
776
|
-
onMentionSelect:
|
|
776
|
+
onMentionSelect: T = () => {
|
|
777
777
|
},
|
|
778
778
|
handleAddAttributes: _ = () => {
|
|
779
779
|
}
|
|
780
780
|
}) => {
|
|
781
781
|
var pe, ve, Ee, ye, we, Ce, be, xe;
|
|
782
|
-
const k = I(null), [
|
|
782
|
+
const k = I(null), [D, x] = S(E != null && E.length ? E : " "), [G, W] = S(""), [V, B] = S(!1), [F, ee] = S({
|
|
783
783
|
x: 0,
|
|
784
784
|
y: 0
|
|
785
|
-
}), [
|
|
785
|
+
}), [te, L] = S([]), j = I(null), U = I(null), [N, p] = S({
|
|
786
786
|
visible: !1,
|
|
787
787
|
x: 0,
|
|
788
788
|
y: 0
|
|
789
|
-
}), [w,
|
|
789
|
+
}), [w, O] = S(!1), K = I(null), [De, le] = S({
|
|
790
790
|
url: "",
|
|
791
791
|
text: "",
|
|
792
792
|
title: "",
|
|
@@ -807,26 +807,30 @@ const $t = ({
|
|
|
807
807
|
fontFamily: (Ce = u.fontFamily) != null ? Ce : !1,
|
|
808
808
|
fontSize: (be = u.fontSize) != null ? be : !1,
|
|
809
809
|
highlight: (xe = u.fontSize) != null ? xe : !1
|
|
810
|
-
}, [He, ce] = S(""), [ie,
|
|
811
|
-
const e =
|
|
812
|
-
|
|
810
|
+
}, [He, ce] = S(""), [ie, ne] = S([]), H = () => k.current, z = () => {
|
|
811
|
+
const e = fe();
|
|
812
|
+
W(e), R == null || R(e);
|
|
813
813
|
const t = ot(e);
|
|
814
814
|
b(t);
|
|
815
|
-
const n =
|
|
816
|
-
JSON.stringify(o) !== JSON.stringify(ie) && (
|
|
817
|
-
},
|
|
815
|
+
const n = Ue(), o = Ae(n);
|
|
816
|
+
JSON.stringify(o) !== JSON.stringify(ie) && (ne(o), T(o));
|
|
817
|
+
}, q = () => {
|
|
818
818
|
const e = window.getSelection();
|
|
819
|
-
!e || e.rangeCount === 0
|
|
819
|
+
if (!e || e.rangeCount === 0) return;
|
|
820
|
+
const t = document.getElementById("rte-editor-body");
|
|
821
|
+
if (!t) return;
|
|
822
|
+
const n = e.getRangeAt(0);
|
|
823
|
+
t.contains(n.startContainer) && (j.current = n.cloneRange());
|
|
820
824
|
}, $ = () => {
|
|
821
825
|
const e = window.getSelection();
|
|
822
|
-
e
|
|
826
|
+
!e || !j.current || (e.removeAllRanges(), e.addRange(j.current));
|
|
823
827
|
}, je = (e, t) => {
|
|
824
828
|
const n = window.getSelection();
|
|
825
829
|
n && n.rangeCount > 0 && (j.current = n.getRangeAt(0)), $(), document.execCommand(e, !1, t), z();
|
|
826
830
|
};
|
|
827
831
|
P(() => {
|
|
828
|
-
const e =
|
|
829
|
-
e && !e.innerHTML && (e.innerHTML =
|
|
832
|
+
const e = H();
|
|
833
|
+
e && !e.innerHTML && (e.innerHTML = D), z();
|
|
830
834
|
}, []), P(() => () => {
|
|
831
835
|
document.removeEventListener("mousemove", null), document.removeEventListener("mouseup", null);
|
|
832
836
|
}, []), P(() => {
|
|
@@ -834,13 +838,13 @@ const $t = ({
|
|
|
834
838
|
Ve(e);
|
|
835
839
|
});
|
|
836
840
|
}, []), P(() => {
|
|
837
|
-
const e =
|
|
841
|
+
const e = H();
|
|
838
842
|
if (!e) return;
|
|
839
843
|
e.querySelectorAll("table").forEach((n) => {
|
|
840
|
-
|
|
844
|
+
me(n), n.querySelectorAll("th, td").forEach((s) => Y(s));
|
|
841
845
|
});
|
|
842
846
|
}, []);
|
|
843
|
-
const
|
|
847
|
+
const se = (e) => {
|
|
844
848
|
for (; e && e.nodeName !== "LI"; )
|
|
845
849
|
e = e.parentNode;
|
|
846
850
|
return e;
|
|
@@ -856,34 +860,34 @@ const $t = ({
|
|
|
856
860
|
l.textContent = o, l.style.display = "none", l.setAttribute("data-hidden-array-start", "true"), e.insertBefore(l, e.firstChild);
|
|
857
861
|
const i = document.createElement("span");
|
|
858
862
|
i.textContent = s, i.style.display = "none", i.setAttribute("data-hidden-array-end", "true"), e.appendChild(i);
|
|
859
|
-
},
|
|
860
|
-
var
|
|
863
|
+
}, de = (e) => {
|
|
864
|
+
var v;
|
|
861
865
|
const t = window.getSelection();
|
|
862
866
|
if (!(t != null && t.rangeCount)) return;
|
|
863
|
-
const n = t.getRangeAt(0), o =
|
|
867
|
+
const n = t.getRangeAt(0), o = se(n.startContainer);
|
|
864
868
|
let s, l;
|
|
865
869
|
if (o) {
|
|
866
|
-
let
|
|
867
|
-
|
|
870
|
+
let m = o.querySelector(e);
|
|
871
|
+
m || (m = document.createElement(e), m.style.margin = "0", m.style.paddingLeft = "20px", o.appendChild(m)), l = m, s = document.createElement("li"), s.textContent = "", l.appendChild(s);
|
|
868
872
|
} else {
|
|
869
873
|
document.execCommand(e === "ul" ? "insertUnorderedList" : "insertOrderedList");
|
|
870
|
-
const
|
|
871
|
-
if (l =
|
|
874
|
+
const m = H();
|
|
875
|
+
if (l = m == null ? void 0 : m.querySelector(`${e}:last-child`), !l) return;
|
|
872
876
|
s = l.querySelector("li:last-child");
|
|
873
877
|
}
|
|
874
878
|
Fe(l);
|
|
875
879
|
const i = document.createRange();
|
|
876
|
-
i.setStart(s, 0), i.collapse(!0), t.removeAllRanges(), t.addRange(i), (
|
|
877
|
-
},
|
|
878
|
-
e === "insertOrderedList" ?
|
|
880
|
+
i.setStart(s, 0), i.collapse(!0), t.removeAllRanges(), t.addRange(i), (v = H()) == null || v.focus(), z();
|
|
881
|
+
}, X = (e, t) => {
|
|
882
|
+
e === "insertOrderedList" ? de("ol") : e === "insertUnorderedList" ? de("ul") : je(e, t), e === "insertTable" && Ze();
|
|
879
883
|
}, Ie = (e) => {
|
|
880
884
|
const t = document.createElement("span");
|
|
881
885
|
t.textContent = "", e.insertNode(t), e.setStartAfter(t), e.collapse(!0);
|
|
882
886
|
const n = t.getBoundingClientRect();
|
|
883
|
-
t.remove(),
|
|
887
|
+
t.remove(), ee({
|
|
884
888
|
x: n.left,
|
|
885
889
|
y: n.bottom + window.scrollY
|
|
886
|
-
}), L(r || []), B(!0),
|
|
890
|
+
}), L(r || []), B(!0), U.current = e.cloneRange();
|
|
887
891
|
}, Pe = () => {
|
|
888
892
|
const e = window.getSelection();
|
|
889
893
|
if (!e || e.rangeCount === 0) return null;
|
|
@@ -895,8 +899,8 @@ const $t = ({
|
|
|
895
899
|
if (o.nodeType === Node.TEXT_NODE) {
|
|
896
900
|
const s = o.textContent || "", l = o === t ? n : s.length, i = s.lastIndexOf("@", l - 1);
|
|
897
901
|
if (i !== -1) {
|
|
898
|
-
const
|
|
899
|
-
return
|
|
902
|
+
const v = document.createRange();
|
|
903
|
+
return v.setStart(o, i), v.setEnd(o, l), v;
|
|
900
904
|
}
|
|
901
905
|
}
|
|
902
906
|
o = o.previousSibling;
|
|
@@ -907,7 +911,7 @@ const $t = ({
|
|
|
907
911
|
const t = window.getSelection();
|
|
908
912
|
if (!t) return;
|
|
909
913
|
const n = Pe();
|
|
910
|
-
n ? (t.removeAllRanges(), t.addRange(n)) :
|
|
914
|
+
n ? (t.removeAllRanges(), t.addRange(n)) : U.current && (t.removeAllRanges(), t.addRange(U.current));
|
|
911
915
|
const o = document.createElement("span");
|
|
912
916
|
o.textContent = `{{${e.name}}}`, o.style.color = "#007bff", o.style.display = "inline", o.contentEditable = "false", o.setAttribute("data-mention", e.value || e.name || "");
|
|
913
917
|
try {
|
|
@@ -915,40 +919,49 @@ const $t = ({
|
|
|
915
919
|
if (i)
|
|
916
920
|
i.deleteContents(), i.insertNode(o);
|
|
917
921
|
else {
|
|
918
|
-
const
|
|
919
|
-
|
|
922
|
+
const f = document.createRange(), h = H();
|
|
923
|
+
f.selectNodeContents(h), f.collapse(!1), f.insertNode(o);
|
|
920
924
|
}
|
|
921
|
-
const
|
|
922
|
-
o.after(
|
|
923
|
-
const
|
|
924
|
-
|
|
925
|
+
const v = document.createTextNode(" ");
|
|
926
|
+
o.after(v);
|
|
927
|
+
const m = document.createRange();
|
|
928
|
+
m.setStartAfter(v), m.collapse(!0), t.removeAllRanges(), t.addRange(m);
|
|
925
929
|
} catch (i) {
|
|
926
930
|
console.error("insertMention error:", i);
|
|
927
931
|
}
|
|
928
932
|
let s = Ae([...ie, e]);
|
|
929
|
-
|
|
933
|
+
ne(s), T(s), B(!1), (l = H()) == null || l.focus(), z();
|
|
930
934
|
}, qe = (e) => {
|
|
931
|
-
|
|
935
|
+
var v;
|
|
936
|
+
const t = document.getElementById("rte-editor-body");
|
|
932
937
|
if (!t) return;
|
|
933
|
-
t.focus()
|
|
934
|
-
|
|
935
|
-
if (!n || !n.rangeCount || !
|
|
936
|
-
const
|
|
937
|
-
|
|
938
|
+
t.focus();
|
|
939
|
+
let n = window.getSelection();
|
|
940
|
+
if (!he() && j.current && ($(), n = window.getSelection()), !n || !n.rangeCount || !he()) {
|
|
941
|
+
const m = document.createRange();
|
|
942
|
+
let f = t;
|
|
943
|
+
for (; f && f.lastChild; )
|
|
944
|
+
f = f.lastChild;
|
|
945
|
+
try {
|
|
946
|
+
m.setStart(f, ((v = f.textContent) == null ? void 0 : v.length) || 0);
|
|
947
|
+
} catch (h) {
|
|
948
|
+
m.setStart(t, t.childNodes.length);
|
|
949
|
+
}
|
|
950
|
+
m.collapse(!0), n = window.getSelection(), n == null || n.removeAllRanges(), n == null || n.addRange(m);
|
|
938
951
|
}
|
|
939
952
|
const o = n.getRangeAt(0), s = document.createElement("span");
|
|
940
|
-
s.textContent = `{{${e.name}}}`, s.style.color = "#007bff", s.contentEditable = "false",
|
|
953
|
+
s.textContent = `{{${e.name}}}`, s.setAttribute("data-mention", e.value || e.name), s.style.color = "#007bff", s.contentEditable = "false", o.insertNode(s);
|
|
941
954
|
const l = document.createTextNode(" ");
|
|
942
955
|
s.after(l);
|
|
943
956
|
const i = document.createRange();
|
|
944
|
-
i.setStartAfter(l), i.collapse(!0), n.removeAllRanges(), n.addRange(i), t.focus();
|
|
957
|
+
i.setStartAfter(l), i.collapse(!0), n.removeAllRanges(), n.addRange(i), q(), t.focus();
|
|
945
958
|
}, Ve = (e) => {
|
|
946
|
-
e.forEach((t) => qe(t)),
|
|
959
|
+
e.forEach((t) => qe(t)), ne((t) => {
|
|
947
960
|
const n = [...t, ...e], o = Array.from(new Map(n.map((s) => [s.name, s])).values());
|
|
948
|
-
return
|
|
961
|
+
return T(o), o;
|
|
949
962
|
}), z();
|
|
950
|
-
},
|
|
951
|
-
const e =
|
|
963
|
+
}, Ue = () => {
|
|
964
|
+
const e = H();
|
|
952
965
|
if (!e) return [];
|
|
953
966
|
const t = e.querySelectorAll("span[data-mention]"), n = [];
|
|
954
967
|
return t.forEach((o) => {
|
|
@@ -958,19 +971,19 @@ const $t = ({
|
|
|
958
971
|
value: s
|
|
959
972
|
});
|
|
960
973
|
}), n;
|
|
961
|
-
},
|
|
974
|
+
}, $e = (e) => {
|
|
962
975
|
var n, o, s;
|
|
963
976
|
const t = e.key.toLowerCase();
|
|
964
|
-
if ((e.ctrlKey || e.metaKey) && ["b", "i", "u"].includes(t) && (e.preventDefault(),
|
|
965
|
-
const l = window.getSelection(), i = l != null && l.anchorNode ?
|
|
977
|
+
if ((e.ctrlKey || e.metaKey) && ["b", "i", "u"].includes(t) && (e.preventDefault(), X(t === "b" ? "bold" : t === "i" ? "italic" : t === "u" ? "underline" : "")), e.shiftKey && e.key === "2" && e.preventDefault(), e.key === "Enter") {
|
|
978
|
+
const l = window.getSelection(), i = l != null && l.anchorNode ? se(l.anchorNode) : null;
|
|
966
979
|
if (!i) return;
|
|
967
980
|
if (((n = i.textContent) == null ? void 0 : n.replace(/\u200B/g, "").trim()) === "") {
|
|
968
981
|
e.preventDefault();
|
|
969
|
-
const
|
|
970
|
-
if (
|
|
971
|
-
|
|
982
|
+
const m = i.parentElement, f = m == null ? void 0 : m.closest("li");
|
|
983
|
+
if (f) {
|
|
984
|
+
m == null || m.removeChild(i);
|
|
972
985
|
const h = document.createElement("p");
|
|
973
|
-
h.innerHTML = "<br />", (o =
|
|
986
|
+
h.innerHTML = "<br />", (o = f.parentElement) == null || o.insertBefore(h, f.nextSibling);
|
|
974
987
|
const C = document.createRange();
|
|
975
988
|
C.setStart(h, 0), C.collapse(!0), l == null || l.removeAllRanges(), l == null || l.addRange(C);
|
|
976
989
|
} else {
|
|
@@ -997,8 +1010,8 @@ const $t = ({
|
|
|
997
1010
|
}, 0);
|
|
998
1011
|
return;
|
|
999
1012
|
}
|
|
1000
|
-
if (
|
|
1001
|
-
setTimeout(() =>
|
|
1013
|
+
if (V) {
|
|
1014
|
+
setTimeout(() => ue(), 0);
|
|
1002
1015
|
return;
|
|
1003
1016
|
}
|
|
1004
1017
|
}, Ke = (e) => {
|
|
@@ -1009,8 +1022,8 @@ const $t = ({
|
|
|
1009
1022
|
t = t.parentElement;
|
|
1010
1023
|
}
|
|
1011
1024
|
return !1;
|
|
1012
|
-
},
|
|
1013
|
-
if (z(), !
|
|
1025
|
+
}, ue = () => {
|
|
1026
|
+
if (z(), !V) return;
|
|
1014
1027
|
const e = window.getSelection();
|
|
1015
1028
|
if (!e || !e.anchorNode) return;
|
|
1016
1029
|
const n = (e.anchorNode.textContent || "").match(/@([a-zA-Z0-9_]*)$/);
|
|
@@ -1032,23 +1045,23 @@ const $t = ({
|
|
|
1032
1045
|
const l = (A = s.target) == null ? void 0 : A.result;
|
|
1033
1046
|
$();
|
|
1034
1047
|
const i = window.getSelection();
|
|
1035
|
-
let
|
|
1036
|
-
const
|
|
1037
|
-
|
|
1038
|
-
const
|
|
1039
|
-
if (!
|
|
1040
|
-
|
|
1048
|
+
let v = i && i.rangeCount ? i.getRangeAt(0) : null;
|
|
1049
|
+
const m = document.createElement("img");
|
|
1050
|
+
m.src = l, m.alt = t.name || "image", m.className = "rte-inserted-image", m.contentEditable = "true";
|
|
1051
|
+
const f = H();
|
|
1052
|
+
if (!v || !f) {
|
|
1053
|
+
f == null || f.appendChild(m);
|
|
1041
1054
|
const Le = document.createTextNode(" ");
|
|
1042
|
-
|
|
1055
|
+
f == null || f.appendChild(Le);
|
|
1043
1056
|
const re = document.createRange();
|
|
1044
|
-
re.setStartAfter(Le), re.collapse(!0), i == null || i.removeAllRanges(), i == null || i.addRange(re),
|
|
1057
|
+
re.setStartAfter(Le), re.collapse(!0), i == null || i.removeAllRanges(), i == null || i.addRange(re), f == null || f.focus(), z(), e.target.value = "";
|
|
1045
1058
|
return;
|
|
1046
1059
|
}
|
|
1047
|
-
|
|
1060
|
+
v.deleteContents(), v.insertNode(m);
|
|
1048
1061
|
const h = document.createTextNode(" ");
|
|
1049
|
-
|
|
1062
|
+
m.after(h);
|
|
1050
1063
|
const C = document.createRange();
|
|
1051
|
-
C.setStartAfter(h), C.collapse(!0), i.removeAllRanges(), i.addRange(C),
|
|
1064
|
+
C.setStartAfter(h), C.collapse(!0), i.removeAllRanges(), i.addRange(C), f.focus(), z(), e.target.value = "";
|
|
1052
1065
|
}, n.readAsDataURL(t);
|
|
1053
1066
|
}, Ye = (e) => {
|
|
1054
1067
|
var s;
|
|
@@ -1056,30 +1069,30 @@ const $t = ({
|
|
|
1056
1069
|
const t = window.getSelection();
|
|
1057
1070
|
if (!(t != null && t.rangeCount)) return;
|
|
1058
1071
|
const n = t.getRangeAt(0), o = document.createTextNode(e);
|
|
1059
|
-
n.insertNode(o), n.setStartAfter(o), n.collapse(!0), t.removeAllRanges(), t.addRange(n), (s =
|
|
1072
|
+
n.insertNode(o), n.setStartAfter(o), n.collapse(!0), t.removeAllRanges(), t.addRange(n), (s = H()) == null || s.focus(), z();
|
|
1060
1073
|
}, Ze = () => {
|
|
1061
1074
|
$();
|
|
1062
1075
|
const e = document.createElement("table");
|
|
1063
|
-
e.style.borderCollapse = "collapse", e.style.width = "100%", e.style.border = "1px solid #ccc", e.style.margin = "8px 0", e.style.position = "relative",
|
|
1076
|
+
e.style.borderCollapse = "collapse", e.style.width = "100%", e.style.border = "1px solid #ccc", e.style.margin = "8px 0", e.style.position = "relative", g.table && e.classList.add(g.table);
|
|
1064
1077
|
const t = document.createElement("thead");
|
|
1065
|
-
|
|
1078
|
+
g.thead && t.classList.add(g.thead);
|
|
1066
1079
|
const n = document.createElement("tbody");
|
|
1067
|
-
|
|
1080
|
+
g.tbody && n.classList.add(g.tbody);
|
|
1068
1081
|
const o = document.createElement("tr");
|
|
1069
|
-
|
|
1082
|
+
g.tr && o.classList.add(g.tr);
|
|
1070
1083
|
const s = document.createElement("tr");
|
|
1071
|
-
|
|
1072
|
-
for (let
|
|
1073
|
-
const
|
|
1074
|
-
|
|
1075
|
-
const
|
|
1076
|
-
|
|
1084
|
+
g.tr && s.classList.add(g.tr);
|
|
1085
|
+
for (let v = 0; v < 2; v++) {
|
|
1086
|
+
const m = document.createElement("th");
|
|
1087
|
+
m.textContent = `Header ${v + 1}`, m.style.border = "1px solid #999", m.style.padding = "8px", m.style.position = "relative", m.style.backgroundColor = "lightgray", g.th && m.classList.add(g.th);
|
|
1088
|
+
const f = document.createElement("td");
|
|
1089
|
+
f.textContent = `Row 1 Col ${v + 1}`, f.style.border = "1px solid #999", f.style.padding = "8px", f.style.position = "relative", f.style.backgroundColor = "#fff", g.td && f.classList.add(g.td), Y(m), Y(f), o.appendChild(m), s.appendChild(f);
|
|
1077
1090
|
}
|
|
1078
|
-
t.appendChild(o), n.appendChild(s), e.appendChild(t), e.appendChild(n), et(e),
|
|
1091
|
+
t.appendChild(o), n.appendChild(s), e.appendChild(t), e.appendChild(n), et(e), me(e);
|
|
1079
1092
|
const l = window.getSelection();
|
|
1080
1093
|
if (!(l != null && l.rangeCount)) return;
|
|
1081
1094
|
l.getRangeAt(0).insertNode(e), z();
|
|
1082
|
-
},
|
|
1095
|
+
}, me = (e) => {
|
|
1083
1096
|
const t = document.createElement("div");
|
|
1084
1097
|
Object.assign(t.style, {
|
|
1085
1098
|
position: "absolute",
|
|
@@ -1095,17 +1108,17 @@ const $t = ({
|
|
|
1095
1108
|
let n = 0, o = 0, s = 0, l = 0;
|
|
1096
1109
|
t.addEventListener("mousedown", (i) => {
|
|
1097
1110
|
i.preventDefault(), n = i.clientX, o = i.clientY;
|
|
1098
|
-
const
|
|
1099
|
-
s =
|
|
1100
|
-
const
|
|
1111
|
+
const v = e.getBoundingClientRect();
|
|
1112
|
+
s = v.width, l = v.height;
|
|
1113
|
+
const m = (h) => {
|
|
1101
1114
|
const C = Math.max(100, s + (h.clientX - n)), A = Math.max(60, l + (h.clientY - o));
|
|
1102
1115
|
e.style.width = `${C}px`, e.style.height = `${A}px`, z();
|
|
1103
|
-
},
|
|
1104
|
-
document.removeEventListener("mousemove",
|
|
1116
|
+
}, f = () => {
|
|
1117
|
+
document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", f), z();
|
|
1105
1118
|
};
|
|
1106
|
-
document.addEventListener("mousemove",
|
|
1119
|
+
document.addEventListener("mousemove", m), document.addEventListener("mouseup", f);
|
|
1107
1120
|
}), e.appendChild(t);
|
|
1108
|
-
},
|
|
1121
|
+
}, Y = (e) => {
|
|
1109
1122
|
const t = document.createElement("div"), n = document.createElement("div");
|
|
1110
1123
|
Object.assign(t.style, {
|
|
1111
1124
|
position: "absolute",
|
|
@@ -1129,47 +1142,47 @@ const $t = ({
|
|
|
1129
1142
|
}, Qe = (e, t, n) => {
|
|
1130
1143
|
let o = 0, s = 0, l = 0, i = 0;
|
|
1131
1144
|
t.addEventListener("mousedown", (h) => {
|
|
1132
|
-
h.preventDefault(), o = h.clientX, l = e.offsetWidth, document.addEventListener("mousemove",
|
|
1145
|
+
h.preventDefault(), o = h.clientX, l = e.offsetWidth, document.addEventListener("mousemove", v), document.addEventListener("mouseup", f);
|
|
1133
1146
|
}), n.addEventListener("mousedown", (h) => {
|
|
1134
|
-
h.preventDefault(), s = h.clientY, i = e.offsetHeight, document.addEventListener("mousemove",
|
|
1147
|
+
h.preventDefault(), s = h.clientY, i = e.offsetHeight, document.addEventListener("mousemove", m), document.addEventListener("mouseup", f);
|
|
1135
1148
|
});
|
|
1136
|
-
const
|
|
1149
|
+
const v = (h) => {
|
|
1137
1150
|
const C = l + (h.clientX - o);
|
|
1138
1151
|
e.style.width = `${Math.max(30, C)}px`;
|
|
1139
|
-
},
|
|
1152
|
+
}, m = (h) => {
|
|
1140
1153
|
const C = i + (h.clientY - s);
|
|
1141
1154
|
e.style.height = `${Math.max(20, C)}px`;
|
|
1142
|
-
},
|
|
1143
|
-
document.removeEventListener("mousemove",
|
|
1155
|
+
}, f = () => {
|
|
1156
|
+
document.removeEventListener("mousemove", v), document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", f);
|
|
1144
1157
|
};
|
|
1145
1158
|
}, Je = (e) => {
|
|
1146
1159
|
const n = e.target.closest("td, th");
|
|
1147
|
-
n && (e.preventDefault(), document.querySelectorAll(".rte-cell-highlight").forEach((o) => o.classList.remove("rte-cell-highlight")), n.classList.add("rte-cell-highlight"),
|
|
1160
|
+
n && (e.preventDefault(), document.querySelectorAll(".rte-cell-highlight").forEach((o) => o.classList.remove("rte-cell-highlight")), n.classList.add("rte-cell-highlight"), p({
|
|
1148
1161
|
visible: !0,
|
|
1149
1162
|
x: e.clientX,
|
|
1150
1163
|
y: e.clientY,
|
|
1151
1164
|
cell: n
|
|
1152
1165
|
}));
|
|
1153
|
-
},
|
|
1166
|
+
}, ge = () => {
|
|
1154
1167
|
document.querySelectorAll(".rte-cell-highlight").forEach((e) => e.classList.remove("rte-cell-highlight"));
|
|
1155
1168
|
}, Ge = (e) => {
|
|
1156
1169
|
if (!N.cell) return;
|
|
1157
1170
|
const t = N.cell.closest("table"), n = N.cell.cellIndex, o = N.cell.parentElement.rowIndex, s = (l) => {
|
|
1158
|
-
const i = l.tagName.toLowerCase(),
|
|
1159
|
-
return
|
|
1171
|
+
const i = l.tagName.toLowerCase(), v = document.createElement(i);
|
|
1172
|
+
return v.textContent = l.textContent || "", v.style.cssText = l.style.cssText, Y(v), v;
|
|
1160
1173
|
};
|
|
1161
1174
|
switch (e) {
|
|
1162
1175
|
case "insertRowAbove": {
|
|
1163
1176
|
const l = t.rows[o], i = t.insertRow(o);
|
|
1164
|
-
Array.from(l.cells).forEach((
|
|
1165
|
-
i.appendChild(s(
|
|
1177
|
+
Array.from(l.cells).forEach((v) => {
|
|
1178
|
+
i.appendChild(s(v));
|
|
1166
1179
|
});
|
|
1167
1180
|
break;
|
|
1168
1181
|
}
|
|
1169
1182
|
case "insertRowBelow": {
|
|
1170
1183
|
const l = t.rows[o], i = t.insertRow(o + 1);
|
|
1171
|
-
Array.from(l.cells).forEach((
|
|
1172
|
-
i.appendChild(s(
|
|
1184
|
+
Array.from(l.cells).forEach((v) => {
|
|
1185
|
+
i.appendChild(s(v));
|
|
1173
1186
|
});
|
|
1174
1187
|
break;
|
|
1175
1188
|
}
|
|
@@ -1196,9 +1209,9 @@ const $t = ({
|
|
|
1196
1209
|
});
|
|
1197
1210
|
break;
|
|
1198
1211
|
}
|
|
1199
|
-
z(),
|
|
1212
|
+
z(), p(oe(ae({}, N), {
|
|
1200
1213
|
visible: !1
|
|
1201
|
-
})),
|
|
1214
|
+
})), ge();
|
|
1202
1215
|
}, et = (e) => {
|
|
1203
1216
|
const t = e.querySelector("tbody");
|
|
1204
1217
|
if (!t || t.querySelector("[data-hidden-table-start]")) return;
|
|
@@ -1206,22 +1219,22 @@ const $t = ({
|
|
|
1206
1219
|
n.textContent = "{{#arrayData}}", n.style.display = "none", n.setAttribute("data-hidden-table-start", "true"), t.insertBefore(n, t.firstChild);
|
|
1207
1220
|
const o = document.createElement("span");
|
|
1208
1221
|
o.textContent = "{{/arrayData}}", o.style.display = "none", o.setAttribute("data-hidden-table-end", "true"), t.appendChild(o);
|
|
1209
|
-
},
|
|
1210
|
-
const e =
|
|
1211
|
-
if (!e) return
|
|
1222
|
+
}, fe = () => {
|
|
1223
|
+
const e = H();
|
|
1224
|
+
if (!e) return D;
|
|
1212
1225
|
const t = e.cloneNode(!0);
|
|
1213
1226
|
return t.querySelectorAll("table div").forEach((n) => n.remove()), t.querySelectorAll(".rte-cell-highlight").forEach((n) => n.classList.remove("rte-cell-highlight")), t.innerHTML;
|
|
1214
1227
|
}, tt = () => {
|
|
1215
|
-
|
|
1228
|
+
q(), K.current = j.current, le({
|
|
1216
1229
|
url: "",
|
|
1217
1230
|
text: "",
|
|
1218
1231
|
title: "",
|
|
1219
1232
|
target: "_self"
|
|
1220
|
-
}),
|
|
1233
|
+
}), O(!0);
|
|
1221
1234
|
}, nt = (e) => {
|
|
1222
1235
|
const t = window.getSelection();
|
|
1223
|
-
if (!t || !
|
|
1224
|
-
t.removeAllRanges(), t.addRange(
|
|
1236
|
+
if (!t || !K.current) return;
|
|
1237
|
+
t.removeAllRanges(), t.addRange(K.current);
|
|
1225
1238
|
let n = e.url.trim();
|
|
1226
1239
|
/^https?:\/\//i.test(n) || (n = "https://" + n);
|
|
1227
1240
|
const o = document.createElement("a");
|
|
@@ -1231,7 +1244,7 @@ const $t = ({
|
|
|
1231
1244
|
const l = document.createTextNode(" ");
|
|
1232
1245
|
o.after(l);
|
|
1233
1246
|
const i = document.createRange();
|
|
1234
|
-
i.setStartAfter(l), i.collapse(!0), t.removeAllRanges(), t.addRange(i),
|
|
1247
|
+
i.setStartAfter(l), i.collapse(!0), t.removeAllRanges(), t.addRange(i), O(!1), z();
|
|
1235
1248
|
}, rt = (e) => {
|
|
1236
1249
|
const t = e.target;
|
|
1237
1250
|
if (t.tagName === "A") {
|
|
@@ -1242,15 +1255,15 @@ const $t = ({
|
|
|
1242
1255
|
}
|
|
1243
1256
|
e.preventDefault();
|
|
1244
1257
|
const o = document.createRange();
|
|
1245
|
-
o.selectNode(n),
|
|
1258
|
+
o.selectNode(n), K.current = o, le({
|
|
1246
1259
|
url: n.href,
|
|
1247
1260
|
text: n.textContent || n.href,
|
|
1248
1261
|
title: n.title,
|
|
1249
1262
|
target: n.target
|
|
1250
|
-
}),
|
|
1263
|
+
}), O(!0);
|
|
1251
1264
|
}
|
|
1252
1265
|
}, at = () => {
|
|
1253
|
-
const e =
|
|
1266
|
+
const e = H();
|
|
1254
1267
|
if (!e) return;
|
|
1255
1268
|
const t = window.getSelection();
|
|
1256
1269
|
if ((!t || t.rangeCount === 0) && j.current) {
|
|
@@ -1263,24 +1276,24 @@ const $t = ({
|
|
|
1263
1276
|
$(), document.execCommand("removeFormat", !1);
|
|
1264
1277
|
const s = o.cloneContents(), l = document.createElement("div");
|
|
1265
1278
|
l.appendChild(s);
|
|
1266
|
-
const i = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, null),
|
|
1279
|
+
const i = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, null), v = [];
|
|
1267
1280
|
for (; i.nextNode(); ) {
|
|
1268
1281
|
const h = i.currentNode, C = h.tagName.toUpperCase(), A = h.getAttribute && h.getAttribute("data-mention") !== null;
|
|
1269
|
-
C !== "A" && !A &&
|
|
1282
|
+
C !== "A" && !A && v.push(h);
|
|
1270
1283
|
}
|
|
1271
|
-
for (let h =
|
|
1272
|
-
const C =
|
|
1284
|
+
for (let h = v.length - 1; h >= 0; h--) {
|
|
1285
|
+
const C = v[h], A = C.parentNode;
|
|
1273
1286
|
if (A) {
|
|
1274
1287
|
for (; C.firstChild; ) A.insertBefore(C.firstChild, C);
|
|
1275
1288
|
A.removeChild(C);
|
|
1276
1289
|
}
|
|
1277
1290
|
}
|
|
1278
1291
|
l.querySelectorAll("[style]").forEach((h) => h.removeAttribute("style")), o.deleteContents();
|
|
1279
|
-
const
|
|
1280
|
-
for (; l.firstChild; )
|
|
1281
|
-
o.insertNode(
|
|
1282
|
-
const
|
|
1283
|
-
|
|
1292
|
+
const m = document.createDocumentFragment();
|
|
1293
|
+
for (; l.firstChild; ) m.appendChild(l.firstChild);
|
|
1294
|
+
o.insertNode(m);
|
|
1295
|
+
const f = document.createRange();
|
|
1296
|
+
f.setStartAfter(o.endContainer.nodeType === Node.TEXT_NODE ? o.endContainer : o.startContainer), f.collapse(!0), n.removeAllRanges(), n.addRange(f), e.normalize(), z();
|
|
1284
1297
|
}, ot = (e) => {
|
|
1285
1298
|
var o;
|
|
1286
1299
|
let t = e;
|
|
@@ -1298,76 +1311,84 @@ const $t = ({
|
|
|
1298
1311
|
}), ((o = n.textContent) == null ? void 0 : o.replace(/\n{3,}/g, `
|
|
1299
1312
|
|
|
1300
1313
|
`).trim()) || "";
|
|
1301
|
-
},
|
|
1314
|
+
}, he = () => {
|
|
1302
1315
|
const e = window.getSelection();
|
|
1303
1316
|
if (!e || e.rangeCount === 0) return !1;
|
|
1304
|
-
const t =
|
|
1305
|
-
|
|
1317
|
+
const t = document.getElementById("rte-editor-body");
|
|
1318
|
+
if (!t) return !1;
|
|
1319
|
+
const n = e.getRangeAt(0);
|
|
1320
|
+
return t.contains(n.startContainer);
|
|
1306
1321
|
};
|
|
1307
1322
|
return /* @__PURE__ */ a.createElement("div", {
|
|
1308
|
-
className: `rte-wrapper ${(
|
|
1323
|
+
className: `rte-wrapper ${(g == null ? void 0 : g.wrapper) || ""}`,
|
|
1309
1324
|
style: y.wrapper
|
|
1310
1325
|
}, /* @__PURE__ */ a.createElement("div", {
|
|
1311
1326
|
style: {
|
|
1312
1327
|
flex: 1
|
|
1313
1328
|
}
|
|
1314
1329
|
}, /* @__PURE__ */ a.createElement(jt, {
|
|
1315
|
-
exec:
|
|
1316
|
-
saveSelection:
|
|
1330
|
+
exec: X,
|
|
1331
|
+
saveSelection: q,
|
|
1317
1332
|
handleFileChange: Xe,
|
|
1318
|
-
handleFontSizeChange: (e) =>
|
|
1319
|
-
handleFontFamilyChange: (e) =>
|
|
1333
|
+
handleFontSizeChange: (e) => X("fontSize", e.target.value),
|
|
1334
|
+
handleFontFamilyChange: (e) => X("fontName", e.target.value),
|
|
1320
1335
|
insertEmoji: Ye,
|
|
1321
1336
|
handleLink: tt,
|
|
1322
1337
|
removeFormatting: at,
|
|
1323
1338
|
visibleActions: Oe,
|
|
1324
|
-
className:
|
|
1339
|
+
className: g.toolbar,
|
|
1325
1340
|
style: y.toolbar
|
|
1326
1341
|
}), /* @__PURE__ */ a.createElement("div", {
|
|
1327
1342
|
ref: k,
|
|
1328
1343
|
id: "rte-editor-body",
|
|
1329
|
-
className: `rte-editor ${(
|
|
1344
|
+
className: `rte-editor ${(g == null ? void 0 : g.editor) || ""}`,
|
|
1330
1345
|
style: y.editor,
|
|
1331
1346
|
contentEditable: !0,
|
|
1332
1347
|
suppressContentEditableWarning: !0,
|
|
1333
|
-
|
|
1334
|
-
|
|
1348
|
+
onKeyUp: q,
|
|
1349
|
+
onMouseUp: q,
|
|
1350
|
+
onInput: () => {
|
|
1351
|
+
q(), ue();
|
|
1352
|
+
},
|
|
1353
|
+
onKeyDown: $e,
|
|
1335
1354
|
onBeforeInput: We,
|
|
1336
1355
|
onContextMenu: Je,
|
|
1337
|
-
onClick:
|
|
1356
|
+
onClick: (e) => {
|
|
1357
|
+
q(), rt(e);
|
|
1358
|
+
}
|
|
1338
1359
|
}), /* @__PURE__ */ a.createElement(_t, {
|
|
1339
|
-
show:
|
|
1360
|
+
show: V,
|
|
1340
1361
|
position: F,
|
|
1341
|
-
filtered:
|
|
1362
|
+
filtered: te,
|
|
1342
1363
|
insertMention: Be,
|
|
1343
1364
|
onClose: () => B(!1),
|
|
1344
1365
|
query: He
|
|
1345
1366
|
}), c && /* @__PURE__ */ a.createElement("div", {
|
|
1346
|
-
className: `rte-output ${(
|
|
1367
|
+
className: `rte-output ${(g == null ? void 0 : g.output) || ""}`,
|
|
1347
1368
|
style: y.output
|
|
1348
|
-
}, /* @__PURE__ */ a.createElement("h4", null, "Output HTML:"), /* @__PURE__ */ a.createElement("p", null,
|
|
1369
|
+
}, /* @__PURE__ */ a.createElement("h4", null, "Output HTML:"), /* @__PURE__ */ a.createElement("p", null, G)), /* @__PURE__ */ a.createElement(Ft, {
|
|
1349
1370
|
visible: N.visible,
|
|
1350
1371
|
x: N.x,
|
|
1351
1372
|
y: N.y,
|
|
1352
1373
|
onAction: Ge,
|
|
1353
1374
|
onClose: () => {
|
|
1354
|
-
|
|
1375
|
+
p(oe(ae({}, N), {
|
|
1355
1376
|
visible: !1
|
|
1356
|
-
})),
|
|
1377
|
+
})), ge();
|
|
1357
1378
|
}
|
|
1358
1379
|
}), /* @__PURE__ */ a.createElement(Pt, {
|
|
1359
1380
|
visible: w,
|
|
1360
1381
|
linkData: De,
|
|
1361
|
-
onClose: () =>
|
|
1382
|
+
onClose: () => O(!1),
|
|
1362
1383
|
onInsert: nt
|
|
1363
1384
|
})), d ? /* @__PURE__ */ a.createElement(It, {
|
|
1364
|
-
className:
|
|
1385
|
+
className: g.preview,
|
|
1365
1386
|
style: y.preview,
|
|
1366
|
-
html:
|
|
1387
|
+
html: fe()
|
|
1367
1388
|
}) : null);
|
|
1368
1389
|
};
|
|
1369
1390
|
export {
|
|
1370
|
-
|
|
1391
|
+
Ut as RichTextEditor,
|
|
1371
1392
|
It as RtePreview,
|
|
1372
1393
|
jt as RteToolbar
|
|
1373
1394
|
};
|