@rufous/ui 0.3.12 → 0.3.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/main.cjs +997 -477
- package/dist/main.css +356 -22
- package/dist/main.d.cts +63 -1
- package/dist/main.d.ts +63 -1
- package/dist/main.js +1074 -550
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -157,6 +157,7 @@ __export(main_exports, {
|
|
|
157
157
|
ToggleButtonGroup: () => ToggleButtonGroup,
|
|
158
158
|
Tooltip: () => Tooltip,
|
|
159
159
|
TrashIcon: () => trashIcon_default,
|
|
160
|
+
TreeSelect: () => TreeSelect,
|
|
160
161
|
Typography: () => Typography,
|
|
161
162
|
UnArchivedIcon: () => unArchivedIcon_default,
|
|
162
163
|
UnsubscribeIcon: () => unsubscribeIcon_default,
|
|
@@ -1562,6 +1563,43 @@ var BaseDialog = ({
|
|
|
1562
1563
|
const { themeConfig } = useRufousTheme();
|
|
1563
1564
|
const [isSubmitting, setIsSubmitting] = (0, import_react14.useState)(false);
|
|
1564
1565
|
const sxClass = useSx(sx);
|
|
1566
|
+
const containerRef = (0, import_react14.useRef)(null);
|
|
1567
|
+
const setContainerRef = (0, import_react14.useCallback)((el) => {
|
|
1568
|
+
containerRef.current = el;
|
|
1569
|
+
}, []);
|
|
1570
|
+
(0, import_react14.useEffect)(() => {
|
|
1571
|
+
if (!open) return;
|
|
1572
|
+
const FOCUSABLE = [
|
|
1573
|
+
"button:not([disabled])",
|
|
1574
|
+
"input:not([disabled])",
|
|
1575
|
+
"select:not([disabled])",
|
|
1576
|
+
"textarea:not([disabled])",
|
|
1577
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
1578
|
+
"[href]"
|
|
1579
|
+
].join(", ");
|
|
1580
|
+
const handleKeyDown = (e) => {
|
|
1581
|
+
if (e.key !== "Tab" || !containerRef.current) return;
|
|
1582
|
+
const els = Array.from(
|
|
1583
|
+
containerRef.current.querySelectorAll(FOCUSABLE)
|
|
1584
|
+
).filter((el) => !el.closest("[disabled]") && el.offsetParent !== null);
|
|
1585
|
+
if (!els.length) return;
|
|
1586
|
+
const first = els[0];
|
|
1587
|
+
const last = els[els.length - 1];
|
|
1588
|
+
if (e.shiftKey) {
|
|
1589
|
+
if (document.activeElement === first) {
|
|
1590
|
+
e.preventDefault();
|
|
1591
|
+
last.focus();
|
|
1592
|
+
}
|
|
1593
|
+
} else {
|
|
1594
|
+
if (document.activeElement === last) {
|
|
1595
|
+
e.preventDefault();
|
|
1596
|
+
first.focus();
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
};
|
|
1600
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1601
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1602
|
+
}, [open]);
|
|
1565
1603
|
const depth = (0, import_react14.useContext)(DialogDepthContext);
|
|
1566
1604
|
const overlayZ = 2e3 + depth * 200;
|
|
1567
1605
|
const portalZ = overlayZ + 100;
|
|
@@ -1636,6 +1674,7 @@ var BaseDialog = ({
|
|
|
1636
1674
|
const dialogContent = form ? /* @__PURE__ */ React65.createElement(
|
|
1637
1675
|
"form",
|
|
1638
1676
|
{
|
|
1677
|
+
ref: setContainerRef,
|
|
1639
1678
|
className: containerClass,
|
|
1640
1679
|
style: containerStyle,
|
|
1641
1680
|
onSubmit: (e) => {
|
|
@@ -1644,7 +1683,15 @@ var BaseDialog = ({
|
|
|
1644
1683
|
}
|
|
1645
1684
|
},
|
|
1646
1685
|
dialogInner
|
|
1647
|
-
) : /* @__PURE__ */ React65.createElement(
|
|
1686
|
+
) : /* @__PURE__ */ React65.createElement(
|
|
1687
|
+
"div",
|
|
1688
|
+
{
|
|
1689
|
+
ref: setContainerRef,
|
|
1690
|
+
className: containerClass,
|
|
1691
|
+
style: containerStyle
|
|
1692
|
+
},
|
|
1693
|
+
dialogInner
|
|
1694
|
+
);
|
|
1648
1695
|
const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
|
|
1649
1696
|
"div",
|
|
1650
1697
|
{
|
|
@@ -2367,11 +2414,19 @@ function AutocompleteInner(props, _ref) {
|
|
|
2367
2414
|
closePopup();
|
|
2368
2415
|
}
|
|
2369
2416
|
};
|
|
2417
|
+
const handleFocusOut = (e) => {
|
|
2418
|
+
const next = e.relatedTarget;
|
|
2419
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
2420
|
+
closePopup();
|
|
2421
|
+
}
|
|
2422
|
+
};
|
|
2370
2423
|
document.addEventListener("mousedown", handleOutside);
|
|
2424
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
2371
2425
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
2372
2426
|
window.addEventListener("resize", calcPopupStyle);
|
|
2373
2427
|
return () => {
|
|
2374
2428
|
document.removeEventListener("mousedown", handleOutside);
|
|
2429
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
2375
2430
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
2376
2431
|
window.removeEventListener("resize", calcPopupStyle);
|
|
2377
2432
|
};
|
|
@@ -2568,6 +2623,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2568
2623
|
e.preventDefault();
|
|
2569
2624
|
open ? closePopup() : openPopup();
|
|
2570
2625
|
},
|
|
2626
|
+
onClick: (e) => e.stopPropagation(),
|
|
2571
2627
|
tabIndex: -1,
|
|
2572
2628
|
"aria-label": open ? "Close" : "Open"
|
|
2573
2629
|
},
|
|
@@ -3482,8 +3538,18 @@ var DateField = ({
|
|
|
3482
3538
|
if (pickerRef.current?.contains(target)) return;
|
|
3483
3539
|
setOpen(false);
|
|
3484
3540
|
};
|
|
3541
|
+
const handleFocusOut = (e) => {
|
|
3542
|
+
const next = e.relatedTarget;
|
|
3543
|
+
if (!containerRef.current?.contains(next) && !pickerRef.current?.contains(next)) {
|
|
3544
|
+
setOpen(false);
|
|
3545
|
+
}
|
|
3546
|
+
};
|
|
3485
3547
|
document.addEventListener("mousedown", handler);
|
|
3486
|
-
|
|
3548
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
3549
|
+
return () => {
|
|
3550
|
+
document.removeEventListener("mousedown", handler);
|
|
3551
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
3552
|
+
};
|
|
3487
3553
|
}, [open]);
|
|
3488
3554
|
const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
|
|
3489
3555
|
setSelectedDate(d);
|
|
@@ -4536,6 +4602,37 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
|
4536
4602
|
// lib/DataGrid/DataGrid.tsx
|
|
4537
4603
|
var import_react23 = __toESM(require("react"), 1);
|
|
4538
4604
|
var import_lucide_react2 = require("lucide-react");
|
|
4605
|
+
function FilterSelect({
|
|
4606
|
+
value,
|
|
4607
|
+
onChange,
|
|
4608
|
+
options,
|
|
4609
|
+
className,
|
|
4610
|
+
placement = "bottom"
|
|
4611
|
+
}) {
|
|
4612
|
+
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
4613
|
+
const ref = (0, import_react23.useRef)(null);
|
|
4614
|
+
(0, import_react23.useEffect)(() => {
|
|
4615
|
+
const handler = (e) => {
|
|
4616
|
+
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
4617
|
+
};
|
|
4618
|
+
if (open) document.addEventListener("mousedown", handler);
|
|
4619
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
4620
|
+
}, [open]);
|
|
4621
|
+
const selected = options.find((o) => o.value === value);
|
|
4622
|
+
return /* @__PURE__ */ import_react23.default.createElement("div", { ref, className: `dg-fsel${className ? " " + className : ""}` }, /* @__PURE__ */ import_react23.default.createElement("button", { type: "button", className: "dg-fsel-trigger", onClick: () => setOpen((o) => !o) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-fsel-label" }, selected?.label ?? value), /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12, className: "dg-fsel-chevron" })), open && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-fsel-menu${placement === "top" ? " dg-fsel-menu--top" : ""}` }, options.map((opt) => /* @__PURE__ */ import_react23.default.createElement(
|
|
4623
|
+
"button",
|
|
4624
|
+
{
|
|
4625
|
+
key: opt.value,
|
|
4626
|
+
type: "button",
|
|
4627
|
+
className: `dg-menu-item${opt.value === value ? " dg-menu-item--selected" : ""}`,
|
|
4628
|
+
onClick: () => {
|
|
4629
|
+
onChange(opt.value);
|
|
4630
|
+
setOpen(false);
|
|
4631
|
+
}
|
|
4632
|
+
},
|
|
4633
|
+
opt.label
|
|
4634
|
+
))));
|
|
4635
|
+
}
|
|
4539
4636
|
var getOperatorsForType = (type) => {
|
|
4540
4637
|
if (type === "date") return [
|
|
4541
4638
|
{ value: "is", label: "is" },
|
|
@@ -4953,7 +5050,17 @@ function DataGrid({
|
|
|
4953
5050
|
}
|
|
4954
5051
|
return offset2;
|
|
4955
5052
|
};
|
|
4956
|
-
const hasActiveFilters = advancedFilters.some((f) => f.value);
|
|
5053
|
+
const hasActiveFilters = advancedFilters.some((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5054
|
+
const closeFilterModal = () => {
|
|
5055
|
+
setAdvancedFilters((prev) => {
|
|
5056
|
+
const meaningful = prev.filter((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5057
|
+
if (meaningful.length > 0) return meaningful;
|
|
5058
|
+
const firstCol = resolvedColumns.find((c) => c.filterable !== false);
|
|
5059
|
+
if (!firstCol) return prev;
|
|
5060
|
+
return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
|
|
5061
|
+
});
|
|
5062
|
+
setShowAdvancedFilter(false);
|
|
5063
|
+
};
|
|
4957
5064
|
const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
|
|
4958
5065
|
const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
|
|
4959
5066
|
return /* @__PURE__ */ import_react23.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react23.default.createElement("h2", null, title), /* @__PURE__ */ import_react23.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react23.default.createElement(
|
|
@@ -4987,6 +5094,7 @@ function DataGrid({
|
|
|
4987
5094
|
const leftOffset = getLeftOffset(col, idx);
|
|
4988
5095
|
const rightOffset = getRightOffset(col, idx);
|
|
4989
5096
|
const isSorted = sortField === col.field;
|
|
5097
|
+
const isFiltered = advancedFilters.some((f) => f.column === colField && f.value);
|
|
4990
5098
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
4991
5099
|
"th",
|
|
4992
5100
|
{
|
|
@@ -5003,7 +5111,7 @@ function DataGrid({
|
|
|
5003
5111
|
col.headerName,
|
|
5004
5112
|
isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 12 }),
|
|
5005
5113
|
isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12 })
|
|
5006
|
-
), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5114
|
+
), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5007
5115
|
"button",
|
|
5008
5116
|
{
|
|
5009
5117
|
className: "dg-th-menu-btn",
|
|
@@ -5096,12 +5204,14 @@ function DataGrid({
|
|
|
5096
5204
|
action.icon
|
|
5097
5205
|
)))));
|
|
5098
5206
|
})()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
|
|
5099
|
-
|
|
5207
|
+
FilterSelect,
|
|
5100
5208
|
{
|
|
5101
|
-
|
|
5102
|
-
|
|
5103
|
-
|
|
5104
|
-
|
|
5209
|
+
placement: "top",
|
|
5210
|
+
value: String(activePageSize),
|
|
5211
|
+
onChange: (val) => handlePageSizeChange(Number(val)),
|
|
5212
|
+
options: pageSizeOptions.map((o) => ({ value: String(o), label: String(o) })),
|
|
5213
|
+
className: "dg-fsel--sm dg-fsel--pagesize"
|
|
5214
|
+
}
|
|
5105
5215
|
)), /* @__PURE__ */ import_react23.default.createElement("span", null, (activePage - 1) * activePageSize + 1, "\u2013", Math.min(activePage * activePageSize, totalRows), " of ", totalRows)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === 1, onClick: () => handlePageChange(activePage - 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronLeft, { size: 15 })), /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-page-fraction" }, activePage, " / ", totalPages), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === totalPages, onClick: () => handlePageChange(activePage + 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5106
5216
|
"div",
|
|
5107
5217
|
{
|
|
@@ -5121,6 +5231,16 @@ function DataGrid({
|
|
|
5121
5231
|
})(),
|
|
5122
5232
|
/* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" }),
|
|
5123
5233
|
activeMenuCol?.filterable !== false && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
|
|
5234
|
+
if (activeMenuCol) {
|
|
5235
|
+
const colField = String(activeMenuCol.field);
|
|
5236
|
+
setAdvancedFilters((prev) => {
|
|
5237
|
+
const hasValues = prev.some((f) => f.value);
|
|
5238
|
+
if (!hasValues) {
|
|
5239
|
+
return [{ column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5240
|
+
}
|
|
5241
|
+
return [...prev, { column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5242
|
+
});
|
|
5243
|
+
}
|
|
5124
5244
|
setShowAdvancedFilter(true);
|
|
5125
5245
|
setActiveMenu(null);
|
|
5126
5246
|
} }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 14 }), " Filter\u2026"),
|
|
@@ -5158,7 +5278,7 @@ function DataGrid({
|
|
|
5158
5278
|
}
|
|
5159
5279
|
});
|
|
5160
5280
|
setColumnOverrides(newOverrides);
|
|
5161
|
-
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-overlay", onClick:
|
|
5281
|
+
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-overlay", onClick: closeFilterModal }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react23.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: closeFilterModal }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.X, { size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react23.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react23.default.createElement(
|
|
5162
5282
|
"button",
|
|
5163
5283
|
{
|
|
5164
5284
|
className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
|
|
@@ -5173,48 +5293,45 @@ function DataGrid({
|
|
|
5173
5293
|
},
|
|
5174
5294
|
"OR"
|
|
5175
5295
|
)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.X, { size: 14 })), /* @__PURE__ */ import_react23.default.createElement(
|
|
5176
|
-
|
|
5296
|
+
FilterSelect,
|
|
5177
5297
|
{
|
|
5178
|
-
className: "dg-filter-select",
|
|
5179
5298
|
value: f.column,
|
|
5180
|
-
onChange: (
|
|
5181
|
-
const newColKey = e.target.value;
|
|
5299
|
+
onChange: (newColKey) => {
|
|
5182
5300
|
const newCol = resolvedColumns.find((c) => String(c.key) === newColKey);
|
|
5183
5301
|
const defaultOp = getDefaultOperator(newCol?.type);
|
|
5184
5302
|
setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
|
|
5185
|
-
}
|
|
5186
|
-
|
|
5187
|
-
|
|
5303
|
+
},
|
|
5304
|
+
options: resolvedColumns.filter((c) => c.filterable !== false).map((c) => ({ value: String(c.key), label: c.header }))
|
|
5305
|
+
}
|
|
5188
5306
|
), (() => {
|
|
5189
5307
|
const col = resolvedColumns.find((c) => String(c.key) === f.column);
|
|
5190
5308
|
const operators = getOperatorsForType(col?.type);
|
|
5191
5309
|
const hideValue = f.operator === "is empty" || f.operator === "is not empty";
|
|
5192
5310
|
return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
|
|
5193
|
-
|
|
5311
|
+
FilterSelect,
|
|
5194
5312
|
{
|
|
5195
|
-
className: "dg-
|
|
5313
|
+
className: "dg-fsel--sm",
|
|
5196
5314
|
value: f.operator,
|
|
5197
|
-
onChange: (
|
|
5198
|
-
|
|
5199
|
-
|
|
5315
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: val, value: "" } : fi)),
|
|
5316
|
+
options: operators
|
|
5317
|
+
}
|
|
5200
5318
|
), !hideValue && col?.type === "date" && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ import_react23.default.createElement(
|
|
5201
5319
|
DateField,
|
|
5202
5320
|
{
|
|
5203
5321
|
value: f.value,
|
|
5204
5322
|
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5205
|
-
variant: "compact"
|
|
5323
|
+
variant: "compact",
|
|
5324
|
+
fullWidth: true
|
|
5206
5325
|
}
|
|
5207
5326
|
)), !hideValue && col?.type === "status" && (() => {
|
|
5208
|
-
const
|
|
5327
|
+
const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
|
|
5209
5328
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
5210
|
-
|
|
5329
|
+
FilterSelect,
|
|
5211
5330
|
{
|
|
5212
|
-
className: "dg-filter-select",
|
|
5213
5331
|
value: f.value,
|
|
5214
|
-
onChange: (
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
options.map((opt) => /* @__PURE__ */ import_react23.default.createElement("option", { key: opt, value: opt }, opt))
|
|
5332
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5333
|
+
options: [{ value: "", label: "Select\u2026" }, ...opts.map((o) => ({ value: o, label: o }))]
|
|
5334
|
+
}
|
|
5218
5335
|
);
|
|
5219
5336
|
})(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ import_react23.default.createElement(
|
|
5220
5337
|
"input",
|
|
@@ -5223,6 +5340,7 @@ function DataGrid({
|
|
|
5223
5340
|
className: "dg-filter-input",
|
|
5224
5341
|
placeholder: "Value\u2026",
|
|
5225
5342
|
value: f.value,
|
|
5343
|
+
autoFocus: idx === advancedFilters.length - 1,
|
|
5226
5344
|
onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
|
|
5227
5345
|
}
|
|
5228
5346
|
));
|
|
@@ -5252,7 +5370,7 @@ function DataGrid({
|
|
|
5252
5370
|
},
|
|
5253
5371
|
/* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Trash2, { size: 14 }),
|
|
5254
5372
|
" Reset"
|
|
5255
|
-
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick:
|
|
5373
|
+
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick: closeFilterModal }, "Apply")))));
|
|
5256
5374
|
}
|
|
5257
5375
|
|
|
5258
5376
|
// lib/Select/Select.tsx
|
|
@@ -5330,11 +5448,19 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5330
5448
|
closePopup();
|
|
5331
5449
|
}
|
|
5332
5450
|
};
|
|
5451
|
+
const handleFocusOut = (e) => {
|
|
5452
|
+
const next = e.relatedTarget;
|
|
5453
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
5454
|
+
closePopup();
|
|
5455
|
+
}
|
|
5456
|
+
};
|
|
5333
5457
|
document.addEventListener("mousedown", handleOutside);
|
|
5458
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
5334
5459
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
5335
5460
|
window.addEventListener("resize", calcPopupStyle);
|
|
5336
5461
|
return () => {
|
|
5337
5462
|
document.removeEventListener("mousedown", handleOutside);
|
|
5463
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
5338
5464
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
5339
5465
|
window.removeEventListener("resize", calcPopupStyle);
|
|
5340
5466
|
};
|
|
@@ -8871,10 +8997,403 @@ var PhoneField = (0, import_react48.forwardRef)(function PhoneField2(props, ref)
|
|
|
8871
8997
|
});
|
|
8872
8998
|
PhoneField.displayName = "PhoneField";
|
|
8873
8999
|
|
|
9000
|
+
// lib/TreeSelect/TreeSelect.tsx
|
|
9001
|
+
var import_react49 = __toESM(require("react"), 1);
|
|
9002
|
+
var import_react_dom11 = __toESM(require("react-dom"), 1);
|
|
9003
|
+
var import_lucide_react3 = require("lucide-react");
|
|
9004
|
+
function collectDescendants(node) {
|
|
9005
|
+
const ids = [String(node.id)];
|
|
9006
|
+
node.children?.forEach((c) => ids.push(...collectDescendants(c)));
|
|
9007
|
+
return ids;
|
|
9008
|
+
}
|
|
9009
|
+
function findNodeById(nodes, id) {
|
|
9010
|
+
for (const node of nodes) {
|
|
9011
|
+
if (String(node.id) === id) return node;
|
|
9012
|
+
const found = findNodeById(node.children ?? [], id);
|
|
9013
|
+
if (found) return found;
|
|
9014
|
+
}
|
|
9015
|
+
return null;
|
|
9016
|
+
}
|
|
9017
|
+
function getNodeState(node, selected) {
|
|
9018
|
+
if (selected.has(String(node.id))) return "checked";
|
|
9019
|
+
if (!node.children?.length) return "unchecked";
|
|
9020
|
+
const states = node.children.map((c) => getNodeState(c, selected));
|
|
9021
|
+
if (states.every((s2) => s2 === "checked")) return "checked";
|
|
9022
|
+
if (states.some((s2) => s2 !== "unchecked")) return "partial";
|
|
9023
|
+
return "unchecked";
|
|
9024
|
+
}
|
|
9025
|
+
function getTopLevelSelected(nodes, selected) {
|
|
9026
|
+
const result = [];
|
|
9027
|
+
for (const node of nodes) {
|
|
9028
|
+
const state = getNodeState(node, selected);
|
|
9029
|
+
if (state === "checked") {
|
|
9030
|
+
result.push(node);
|
|
9031
|
+
} else if (state === "partial") {
|
|
9032
|
+
result.push(...getTopLevelSelected(node.children ?? [], selected));
|
|
9033
|
+
}
|
|
9034
|
+
}
|
|
9035
|
+
return result;
|
|
9036
|
+
}
|
|
9037
|
+
function filterTree(nodes, query) {
|
|
9038
|
+
if (!query) return nodes;
|
|
9039
|
+
const q = query.toLowerCase();
|
|
9040
|
+
return nodes.reduce((acc, node) => {
|
|
9041
|
+
const filteredChildren = filterTree(node.children ?? [], q);
|
|
9042
|
+
if (node.label.toLowerCase().includes(q) || filteredChildren.length > 0) {
|
|
9043
|
+
acc.push({ ...node, children: filteredChildren });
|
|
9044
|
+
}
|
|
9045
|
+
return acc;
|
|
9046
|
+
}, []);
|
|
9047
|
+
}
|
|
9048
|
+
function recordToSet(record) {
|
|
9049
|
+
if (!record) return /* @__PURE__ */ new Set();
|
|
9050
|
+
return new Set(Object.keys(record).filter((k) => record[k]));
|
|
9051
|
+
}
|
|
9052
|
+
function setToRecord(set) {
|
|
9053
|
+
const r = {};
|
|
9054
|
+
set.forEach((id) => {
|
|
9055
|
+
r[id] = true;
|
|
9056
|
+
});
|
|
9057
|
+
return r;
|
|
9058
|
+
}
|
|
9059
|
+
function TreeNodeItem({
|
|
9060
|
+
node,
|
|
9061
|
+
depth,
|
|
9062
|
+
selected,
|
|
9063
|
+
expanded,
|
|
9064
|
+
selectionMode,
|
|
9065
|
+
onToggleExpand,
|
|
9066
|
+
onSelect,
|
|
9067
|
+
isFiltering
|
|
9068
|
+
}) {
|
|
9069
|
+
const nodeId = String(node.id);
|
|
9070
|
+
const hasChildren = !!node.children?.length;
|
|
9071
|
+
const isExpanded = isFiltering || expanded.has(nodeId);
|
|
9072
|
+
const state = getNodeState(node, selected);
|
|
9073
|
+
return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
|
|
9074
|
+
"div",
|
|
9075
|
+
{
|
|
9076
|
+
className: `rf-tsn__row${state !== "unchecked" ? " rf-tsn__row--active" : ""}`,
|
|
9077
|
+
style: { paddingLeft: 8 + depth * 20 },
|
|
9078
|
+
onClick: () => onSelect(node)
|
|
9079
|
+
},
|
|
9080
|
+
hasChildren ? /* @__PURE__ */ import_react49.default.createElement(
|
|
9081
|
+
"button",
|
|
9082
|
+
{
|
|
9083
|
+
type: "button",
|
|
9084
|
+
className: "rf-tsn__expand",
|
|
9085
|
+
onClick: (e) => {
|
|
9086
|
+
e.stopPropagation();
|
|
9087
|
+
onToggleExpand(nodeId);
|
|
9088
|
+
}
|
|
9089
|
+
},
|
|
9090
|
+
isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
|
|
9091
|
+
) : /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__expand-ph" }),
|
|
9092
|
+
selectionMode === "multiple" && /* @__PURE__ */ import_react49.default.createElement(
|
|
9093
|
+
"span",
|
|
9094
|
+
{
|
|
9095
|
+
className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
|
|
9096
|
+
},
|
|
9097
|
+
state === "checked" && /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 10, strokeWidth: 3 }),
|
|
9098
|
+
state === "partial" && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__cb-dash" })
|
|
9099
|
+
),
|
|
9100
|
+
selectionMode === "single" && /* @__PURE__ */ import_react49.default.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
|
|
9101
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label)
|
|
9102
|
+
), hasChildren && isExpanded && /* @__PURE__ */ import_react49.default.createElement("div", null, node.children.map((child) => /* @__PURE__ */ import_react49.default.createElement(
|
|
9103
|
+
TreeNodeItem,
|
|
9104
|
+
{
|
|
9105
|
+
key: child.id,
|
|
9106
|
+
node: child,
|
|
9107
|
+
depth: depth + 1,
|
|
9108
|
+
selected,
|
|
9109
|
+
expanded,
|
|
9110
|
+
selectionMode,
|
|
9111
|
+
onToggleExpand,
|
|
9112
|
+
onSelect,
|
|
9113
|
+
isFiltering
|
|
9114
|
+
}
|
|
9115
|
+
))));
|
|
9116
|
+
}
|
|
9117
|
+
function TreeSelect({
|
|
9118
|
+
options,
|
|
9119
|
+
value,
|
|
9120
|
+
onChange,
|
|
9121
|
+
onNodeSelect,
|
|
9122
|
+
onNodeUnselect,
|
|
9123
|
+
selectionMode = "single",
|
|
9124
|
+
placeholder = "Select",
|
|
9125
|
+
filter = false,
|
|
9126
|
+
filterInputAutoFocus = false,
|
|
9127
|
+
resetFilterOnHide = false,
|
|
9128
|
+
metaKeySelection: _metaKeySelection,
|
|
9129
|
+
disabled = false,
|
|
9130
|
+
label,
|
|
9131
|
+
variant = "outlined",
|
|
9132
|
+
size = "medium",
|
|
9133
|
+
error = false,
|
|
9134
|
+
helperText,
|
|
9135
|
+
fullWidth = false,
|
|
9136
|
+
clearable = true,
|
|
9137
|
+
required = false,
|
|
9138
|
+
style,
|
|
9139
|
+
className,
|
|
9140
|
+
sx
|
|
9141
|
+
}) {
|
|
9142
|
+
const sxClass = useSx(sx);
|
|
9143
|
+
const [open, setOpen] = (0, import_react49.useState)(false);
|
|
9144
|
+
const [focused, setFocused] = (0, import_react49.useState)(false);
|
|
9145
|
+
const [filterQuery, setFilterQuery] = (0, import_react49.useState)("");
|
|
9146
|
+
const [expandedKeys, setExpandedKeys] = (0, import_react49.useState)(/* @__PURE__ */ new Set());
|
|
9147
|
+
const [dropdownStyle, setDropdownStyle] = (0, import_react49.useState)({});
|
|
9148
|
+
const triggerRef = (0, import_react49.useRef)(null);
|
|
9149
|
+
const dropdownRef = (0, import_react49.useRef)(null);
|
|
9150
|
+
const filterInputRef = (0, import_react49.useRef)(null);
|
|
9151
|
+
const isMultiple = selectionMode === "multiple";
|
|
9152
|
+
const selectedSet = isMultiple ? recordToSet(value) : value != null ? /* @__PURE__ */ new Set([String(value)]) : /* @__PURE__ */ new Set();
|
|
9153
|
+
const computePosition3 = (0, import_react49.useCallback)(() => {
|
|
9154
|
+
if (!triggerRef.current) return;
|
|
9155
|
+
const rect = triggerRef.current.getBoundingClientRect();
|
|
9156
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
9157
|
+
const dropdownMaxH = 320;
|
|
9158
|
+
const above = spaceBelow < dropdownMaxH && rect.top > spaceBelow;
|
|
9159
|
+
setDropdownStyle({
|
|
9160
|
+
position: "fixed",
|
|
9161
|
+
left: rect.left,
|
|
9162
|
+
width: rect.width,
|
|
9163
|
+
...above ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
|
|
9164
|
+
});
|
|
9165
|
+
}, []);
|
|
9166
|
+
const openDropdown = () => {
|
|
9167
|
+
if (disabled) return;
|
|
9168
|
+
computePosition3();
|
|
9169
|
+
setOpen(true);
|
|
9170
|
+
};
|
|
9171
|
+
const closeDropdown = (0, import_react49.useCallback)(() => {
|
|
9172
|
+
setOpen(false);
|
|
9173
|
+
if (resetFilterOnHide) setFilterQuery("");
|
|
9174
|
+
}, [resetFilterOnHide]);
|
|
9175
|
+
const mouseActivatedRef = (0, import_react49.useRef)(false);
|
|
9176
|
+
const handleTriggerMouseDown = () => {
|
|
9177
|
+
mouseActivatedRef.current = true;
|
|
9178
|
+
};
|
|
9179
|
+
const handleTriggerFocus = () => {
|
|
9180
|
+
setFocused(true);
|
|
9181
|
+
if (!mouseActivatedRef.current) {
|
|
9182
|
+
openDropdown();
|
|
9183
|
+
}
|
|
9184
|
+
mouseActivatedRef.current = false;
|
|
9185
|
+
};
|
|
9186
|
+
const handleTriggerBlur = (e) => {
|
|
9187
|
+
const next = e.relatedTarget;
|
|
9188
|
+
if (next === null) return;
|
|
9189
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9190
|
+
setFocused(false);
|
|
9191
|
+
closeDropdown();
|
|
9192
|
+
}
|
|
9193
|
+
};
|
|
9194
|
+
const handleKeyDown = (e) => {
|
|
9195
|
+
if (disabled) return;
|
|
9196
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
9197
|
+
e.preventDefault();
|
|
9198
|
+
open ? closeDropdown() : openDropdown();
|
|
9199
|
+
} else if (e.key === "Escape") {
|
|
9200
|
+
closeDropdown();
|
|
9201
|
+
}
|
|
9202
|
+
};
|
|
9203
|
+
(0, import_react49.useEffect)(() => {
|
|
9204
|
+
if (open && filter && filterInputAutoFocus) {
|
|
9205
|
+
const t = setTimeout(() => filterInputRef.current?.focus(), 40);
|
|
9206
|
+
return () => clearTimeout(t);
|
|
9207
|
+
}
|
|
9208
|
+
}, [open, filter, filterInputAutoFocus]);
|
|
9209
|
+
(0, import_react49.useEffect)(() => {
|
|
9210
|
+
if (!open) return;
|
|
9211
|
+
const handleOutside = (e) => {
|
|
9212
|
+
if (dropdownRef.current?.contains(e.target) || triggerRef.current?.contains(e.target)) return;
|
|
9213
|
+
closeDropdown();
|
|
9214
|
+
setFocused(false);
|
|
9215
|
+
};
|
|
9216
|
+
const handleFocusOut = (e) => {
|
|
9217
|
+
const next = e.relatedTarget;
|
|
9218
|
+
if (next === null) return;
|
|
9219
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9220
|
+
closeDropdown();
|
|
9221
|
+
setFocused(false);
|
|
9222
|
+
}
|
|
9223
|
+
};
|
|
9224
|
+
document.addEventListener("mousedown", handleOutside);
|
|
9225
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
9226
|
+
return () => {
|
|
9227
|
+
document.removeEventListener("mousedown", handleOutside);
|
|
9228
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
9229
|
+
};
|
|
9230
|
+
}, [open, closeDropdown]);
|
|
9231
|
+
(0, import_react49.useEffect)(() => {
|
|
9232
|
+
if (!open) return;
|
|
9233
|
+
const h = () => computePosition3();
|
|
9234
|
+
window.addEventListener("scroll", h, true);
|
|
9235
|
+
window.addEventListener("resize", h);
|
|
9236
|
+
return () => {
|
|
9237
|
+
window.removeEventListener("scroll", h, true);
|
|
9238
|
+
window.removeEventListener("resize", h);
|
|
9239
|
+
};
|
|
9240
|
+
}, [open, computePosition3]);
|
|
9241
|
+
const handleSelect = (node) => {
|
|
9242
|
+
const nodeId = String(node.id);
|
|
9243
|
+
if (isMultiple) {
|
|
9244
|
+
const state = getNodeState(node, selectedSet);
|
|
9245
|
+
const descendants = collectDescendants(node);
|
|
9246
|
+
const newSet = new Set(selectedSet);
|
|
9247
|
+
if (state === "checked" || state === "partial") {
|
|
9248
|
+
descendants.forEach((id) => newSet.delete(id));
|
|
9249
|
+
onNodeUnselect?.({ node });
|
|
9250
|
+
} else {
|
|
9251
|
+
descendants.forEach((id) => newSet.add(id));
|
|
9252
|
+
onNodeSelect?.({ node });
|
|
9253
|
+
}
|
|
9254
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9255
|
+
} else {
|
|
9256
|
+
if (selectedSet.has(nodeId)) {
|
|
9257
|
+
onChange?.({ value: null });
|
|
9258
|
+
onNodeUnselect?.({ node });
|
|
9259
|
+
} else {
|
|
9260
|
+
onChange?.({ value: node.id });
|
|
9261
|
+
onNodeSelect?.({ node });
|
|
9262
|
+
closeDropdown();
|
|
9263
|
+
}
|
|
9264
|
+
}
|
|
9265
|
+
};
|
|
9266
|
+
const handleToggleExpand = (id) => {
|
|
9267
|
+
setExpandedKeys((prev) => {
|
|
9268
|
+
const next = new Set(prev);
|
|
9269
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
9270
|
+
return next;
|
|
9271
|
+
});
|
|
9272
|
+
};
|
|
9273
|
+
const handleClear = (e) => {
|
|
9274
|
+
e.stopPropagation();
|
|
9275
|
+
onChange?.({ value: isMultiple ? {} : null });
|
|
9276
|
+
};
|
|
9277
|
+
const handleRemoveTag = (e, node) => {
|
|
9278
|
+
e.stopPropagation();
|
|
9279
|
+
const newSet = new Set(selectedSet);
|
|
9280
|
+
collectDescendants(node).forEach((id) => newSet.delete(id));
|
|
9281
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9282
|
+
onNodeUnselect?.({ node });
|
|
9283
|
+
};
|
|
9284
|
+
const filteredTree = filterTree(options, filterQuery);
|
|
9285
|
+
const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
|
|
9286
|
+
const hasValue = tagNodes.length > 0;
|
|
9287
|
+
const isFloating = open || hasValue || focused;
|
|
9288
|
+
const rootClasses = [
|
|
9289
|
+
"rf-text-field",
|
|
9290
|
+
`rf-text-field--${variant}`,
|
|
9291
|
+
size === "small" ? "rf-text-field--small" : "",
|
|
9292
|
+
disabled ? "rf-text-field--disabled" : "",
|
|
9293
|
+
error ? "rf-text-field--error" : "",
|
|
9294
|
+
fullWidth ? "rf-text-field--full-width" : "",
|
|
9295
|
+
isFloating ? "rf-text-field--floating" : "",
|
|
9296
|
+
"rf-tree-select",
|
|
9297
|
+
sxClass,
|
|
9298
|
+
className
|
|
9299
|
+
].filter(Boolean).join(" ");
|
|
9300
|
+
return /* @__PURE__ */ import_react49.default.createElement("div", { className: rootClasses, style }, label && /* @__PURE__ */ import_react49.default.createElement("label", { className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), /* @__PURE__ */ import_react49.default.createElement(
|
|
9301
|
+
"div",
|
|
9302
|
+
{
|
|
9303
|
+
ref: triggerRef,
|
|
9304
|
+
className: `rf-text-field__wrapper rf-tree-select__trigger${open ? " rf-tree-select__trigger--open" : ""}`,
|
|
9305
|
+
tabIndex: disabled ? -1 : 0,
|
|
9306
|
+
onMouseDown: handleTriggerMouseDown,
|
|
9307
|
+
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
9308
|
+
onFocus: handleTriggerFocus,
|
|
9309
|
+
onBlur: handleTriggerBlur,
|
|
9310
|
+
onKeyDown: handleKeyDown
|
|
9311
|
+
},
|
|
9312
|
+
isMultiple ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ import_react49.default.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, /* @__PURE__ */ import_react49.default.createElement(
|
|
9313
|
+
"button",
|
|
9314
|
+
{
|
|
9315
|
+
type: "button",
|
|
9316
|
+
className: "rf-ts__chip-delete",
|
|
9317
|
+
onClick: (e) => handleRemoveTag(e, node),
|
|
9318
|
+
tabIndex: -1
|
|
9319
|
+
},
|
|
9320
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 10 })
|
|
9321
|
+
))) : open ? /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ import_react49.default.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : open ? placeholder : "\xA0"),
|
|
9322
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ import_react49.default.createElement(
|
|
9323
|
+
"button",
|
|
9324
|
+
{
|
|
9325
|
+
type: "button",
|
|
9326
|
+
className: "rf-autocomplete__icon-btn",
|
|
9327
|
+
onClick: handleClear,
|
|
9328
|
+
tabIndex: -1
|
|
9329
|
+
},
|
|
9330
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 16 })
|
|
9331
|
+
), /* @__PURE__ */ import_react49.default.createElement(
|
|
9332
|
+
"button",
|
|
9333
|
+
{
|
|
9334
|
+
type: "button",
|
|
9335
|
+
className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup${open ? " rf-autocomplete__icon-btn--open" : ""}`,
|
|
9336
|
+
onClick: (e) => {
|
|
9337
|
+
e.stopPropagation();
|
|
9338
|
+
open ? closeDropdown() : openDropdown();
|
|
9339
|
+
},
|
|
9340
|
+
tabIndex: -1
|
|
9341
|
+
},
|
|
9342
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 18 })
|
|
9343
|
+
)),
|
|
9344
|
+
variant === "outlined" && /* @__PURE__ */ import_react49.default.createElement("fieldset", { "aria-hidden": true, className: "rf-text-field__notch" }, /* @__PURE__ */ import_react49.default.createElement("legend", { className: "rf-text-field__legend" }, label && /* @__PURE__ */ import_react49.default.createElement("span", null, label, required ? " *" : ""))),
|
|
9345
|
+
variant === "filled" && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__filled-bg" }), /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })),
|
|
9346
|
+
variant === "standard" && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })
|
|
9347
|
+
), helperText && /* @__PURE__ */ import_react49.default.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && import_react_dom11.default.createPortal(
|
|
9348
|
+
/* @__PURE__ */ import_react49.default.createElement(
|
|
9349
|
+
"div",
|
|
9350
|
+
{
|
|
9351
|
+
ref: dropdownRef,
|
|
9352
|
+
className: "rf-tree-select__popup",
|
|
9353
|
+
style: dropdownStyle
|
|
9354
|
+
},
|
|
9355
|
+
filter && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__filter" }, /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Search, { size: 14, className: "rf-tree-select__filter-icon" }), /* @__PURE__ */ import_react49.default.createElement(
|
|
9356
|
+
"input",
|
|
9357
|
+
{
|
|
9358
|
+
ref: filterInputRef,
|
|
9359
|
+
className: "rf-tree-select__filter-input",
|
|
9360
|
+
placeholder: "Search\u2026",
|
|
9361
|
+
value: filterQuery,
|
|
9362
|
+
onChange: (e) => setFilterQuery(e.target.value)
|
|
9363
|
+
}
|
|
9364
|
+
), filterQuery && /* @__PURE__ */ import_react49.default.createElement(
|
|
9365
|
+
"button",
|
|
9366
|
+
{
|
|
9367
|
+
type: "button",
|
|
9368
|
+
className: "rf-autocomplete__icon-btn",
|
|
9369
|
+
onClick: () => setFilterQuery(""),
|
|
9370
|
+
tabIndex: -1
|
|
9371
|
+
},
|
|
9372
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 12 })
|
|
9373
|
+
)),
|
|
9374
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__tree" }, filteredTree.length === 0 ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__empty" }, "No results found") : filteredTree.map((node) => /* @__PURE__ */ import_react49.default.createElement(
|
|
9375
|
+
TreeNodeItem,
|
|
9376
|
+
{
|
|
9377
|
+
key: node.id,
|
|
9378
|
+
node,
|
|
9379
|
+
depth: 0,
|
|
9380
|
+
selected: selectedSet,
|
|
9381
|
+
expanded: expandedKeys,
|
|
9382
|
+
selectionMode,
|
|
9383
|
+
onToggleExpand: handleToggleExpand,
|
|
9384
|
+
onSelect: handleSelect,
|
|
9385
|
+
isFiltering: !!filterQuery
|
|
9386
|
+
}
|
|
9387
|
+
)))
|
|
9388
|
+
),
|
|
9389
|
+
document.body
|
|
9390
|
+
));
|
|
9391
|
+
}
|
|
9392
|
+
|
|
8874
9393
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
8875
|
-
var
|
|
8876
|
-
var
|
|
8877
|
-
var
|
|
9394
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
9395
|
+
var import_react_dom18 = require("react-dom");
|
|
9396
|
+
var import_react61 = require("@tiptap/react");
|
|
8878
9397
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
8879
9398
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
8880
9399
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -8894,21 +9413,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
8894
9413
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
8895
9414
|
|
|
8896
9415
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
8897
|
-
var
|
|
9416
|
+
var import_react51 = require("@tiptap/react");
|
|
8898
9417
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
8899
9418
|
|
|
8900
9419
|
// lib/RufousTextEditor/MentionList.tsx
|
|
8901
|
-
var
|
|
8902
|
-
var MentionList = (0,
|
|
8903
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9420
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
9421
|
+
var MentionList = (0, import_react50.forwardRef)((props, ref) => {
|
|
9422
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
|
|
8904
9423
|
const selectItem = (index) => {
|
|
8905
9424
|
const item = props.items[index];
|
|
8906
9425
|
if (item) {
|
|
8907
9426
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
8908
9427
|
}
|
|
8909
9428
|
};
|
|
8910
|
-
(0,
|
|
8911
|
-
(0,
|
|
9429
|
+
(0, import_react50.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9430
|
+
(0, import_react50.useImperativeHandle)(ref, () => ({
|
|
8912
9431
|
onKeyDown: ({ event }) => {
|
|
8913
9432
|
if (event.key === "ArrowUp") {
|
|
8914
9433
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -8926,17 +9445,17 @@ var MentionList = (0, import_react49.forwardRef)((props, ref) => {
|
|
|
8926
9445
|
}
|
|
8927
9446
|
}));
|
|
8928
9447
|
if (!props.items.length) {
|
|
8929
|
-
return /* @__PURE__ */
|
|
9448
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
8930
9449
|
}
|
|
8931
|
-
return /* @__PURE__ */
|
|
9450
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react50.default.createElement(
|
|
8932
9451
|
"button",
|
|
8933
9452
|
{
|
|
8934
9453
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
8935
9454
|
key: item.id,
|
|
8936
9455
|
onClick: () => selectItem(index)
|
|
8937
9456
|
},
|
|
8938
|
-
/* @__PURE__ */
|
|
8939
|
-
/* @__PURE__ */
|
|
9457
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9458
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
8940
9459
|
)));
|
|
8941
9460
|
});
|
|
8942
9461
|
MentionList.displayName = "MentionList";
|
|
@@ -8956,7 +9475,7 @@ function createMentionSuggestion(users) {
|
|
|
8956
9475
|
return {
|
|
8957
9476
|
onStart: (props) => {
|
|
8958
9477
|
if (!props.clientRect) return;
|
|
8959
|
-
component = new
|
|
9478
|
+
component = new import_react51.ReactRenderer(MentionList_default, {
|
|
8960
9479
|
props,
|
|
8961
9480
|
editor: props.editor
|
|
8962
9481
|
});
|
|
@@ -8994,21 +9513,21 @@ function createMentionSuggestion(users) {
|
|
|
8994
9513
|
}
|
|
8995
9514
|
|
|
8996
9515
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
8997
|
-
var
|
|
8998
|
-
var
|
|
9516
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
9517
|
+
var import_react_dom14 = require("react-dom");
|
|
8999
9518
|
|
|
9000
9519
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9001
|
-
var
|
|
9002
|
-
var TextToSpeech = (0,
|
|
9003
|
-
const [speaking, setSpeaking] = (0,
|
|
9004
|
-
const [paused, setPaused] = (0,
|
|
9005
|
-
const [voices, setVoices] = (0,
|
|
9006
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
9007
|
-
const [rate, setRate] = (0,
|
|
9008
|
-
const [showPanel, setShowPanel] = (0,
|
|
9009
|
-
const utteranceRef = (0,
|
|
9010
|
-
const panelRef = (0,
|
|
9011
|
-
(0,
|
|
9520
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
9521
|
+
var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9522
|
+
const [speaking, setSpeaking] = (0, import_react52.useState)(false);
|
|
9523
|
+
const [paused, setPaused] = (0, import_react52.useState)(false);
|
|
9524
|
+
const [voices, setVoices] = (0, import_react52.useState)([]);
|
|
9525
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react52.useState)("");
|
|
9526
|
+
const [rate, setRate] = (0, import_react52.useState)(1);
|
|
9527
|
+
const [showPanel, setShowPanel] = (0, import_react52.useState)(false);
|
|
9528
|
+
const utteranceRef = (0, import_react52.useRef)(null);
|
|
9529
|
+
const panelRef = (0, import_react52.useRef)(null);
|
|
9530
|
+
(0, import_react52.useEffect)(() => {
|
|
9012
9531
|
const synth = window.speechSynthesis;
|
|
9013
9532
|
const loadVoices = () => {
|
|
9014
9533
|
const available = synth.getVoices();
|
|
@@ -9026,7 +9545,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9026
9545
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9027
9546
|
};
|
|
9028
9547
|
}, [selectedVoice]);
|
|
9029
|
-
(0,
|
|
9548
|
+
(0, import_react52.useEffect)(() => {
|
|
9030
9549
|
const handleClick = (e) => {
|
|
9031
9550
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9032
9551
|
setShowPanel(false);
|
|
@@ -9035,7 +9554,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9035
9554
|
document.addEventListener("mousedown", handleClick);
|
|
9036
9555
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9037
9556
|
}, []);
|
|
9038
|
-
const getTextToSpeak = (0,
|
|
9557
|
+
const getTextToSpeak = (0, import_react52.useCallback)(() => {
|
|
9039
9558
|
if (!editor) return "";
|
|
9040
9559
|
const { from, to, empty } = editor.state.selection;
|
|
9041
9560
|
if (!empty) {
|
|
@@ -9043,7 +9562,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9043
9562
|
}
|
|
9044
9563
|
return editor.getText();
|
|
9045
9564
|
}, [editor]);
|
|
9046
|
-
const handleSpeak = (0,
|
|
9565
|
+
const handleSpeak = (0, import_react52.useCallback)(async () => {
|
|
9047
9566
|
const text = getTextToSpeak();
|
|
9048
9567
|
if (!text.trim()) return;
|
|
9049
9568
|
if (onTextToSpeech) {
|
|
@@ -9085,25 +9604,25 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9085
9604
|
setSpeaking(true);
|
|
9086
9605
|
setPaused(false);
|
|
9087
9606
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9088
|
-
const handlePause = (0,
|
|
9607
|
+
const handlePause = (0, import_react52.useCallback)(() => {
|
|
9089
9608
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9090
9609
|
window.speechSynthesis.pause();
|
|
9091
9610
|
setPaused(true);
|
|
9092
9611
|
}
|
|
9093
9612
|
}, []);
|
|
9094
|
-
const handleResume = (0,
|
|
9613
|
+
const handleResume = (0, import_react52.useCallback)(() => {
|
|
9095
9614
|
if (window.speechSynthesis.paused) {
|
|
9096
9615
|
window.speechSynthesis.resume();
|
|
9097
9616
|
setPaused(false);
|
|
9098
9617
|
}
|
|
9099
9618
|
}, []);
|
|
9100
|
-
const handleStop = (0,
|
|
9619
|
+
const handleStop = (0, import_react52.useCallback)(() => {
|
|
9101
9620
|
window.speechSynthesis.cancel();
|
|
9102
9621
|
setSpeaking(false);
|
|
9103
9622
|
setPaused(false);
|
|
9104
9623
|
}, []);
|
|
9105
|
-
(0,
|
|
9106
|
-
return /* @__PURE__ */
|
|
9624
|
+
(0, import_react52.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9625
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement(
|
|
9107
9626
|
"button",
|
|
9108
9627
|
{
|
|
9109
9628
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9116,15 +9635,15 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9116
9635
|
}
|
|
9117
9636
|
},
|
|
9118
9637
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9119
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9638
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react52.default.createElement(
|
|
9120
9639
|
"select",
|
|
9121
9640
|
{
|
|
9122
9641
|
className: "tts-select",
|
|
9123
9642
|
value: selectedVoice,
|
|
9124
9643
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9125
9644
|
},
|
|
9126
|
-
voices.map((v) => /* @__PURE__ */
|
|
9127
|
-
), /* @__PURE__ */
|
|
9645
|
+
voices.map((v) => /* @__PURE__ */ import_react52.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9646
|
+
), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react52.default.createElement(
|
|
9128
9647
|
"input",
|
|
9129
9648
|
{
|
|
9130
9649
|
type: "range",
|
|
@@ -9135,26 +9654,26 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9135
9654
|
value: rate,
|
|
9136
9655
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9137
9656
|
}
|
|
9138
|
-
), /* @__PURE__ */
|
|
9657
|
+
), /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react52.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9139
9658
|
handleSpeak();
|
|
9140
9659
|
setShowPanel(false);
|
|
9141
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9660
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9142
9661
|
});
|
|
9143
9662
|
var TextToSpeech_default = TextToSpeech;
|
|
9144
9663
|
|
|
9145
9664
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9146
|
-
var
|
|
9147
|
-
var SpeechToText = (0,
|
|
9148
|
-
const [listening, setListening] = (0,
|
|
9149
|
-
const [showPanel, setShowPanel] = (0,
|
|
9150
|
-
const [language, setLanguage] = (0,
|
|
9151
|
-
const [interim, setInterim] = (0,
|
|
9152
|
-
const recognitionRef = (0,
|
|
9153
|
-
const panelRef = (0,
|
|
9154
|
-
const isListeningRef = (0,
|
|
9665
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
9666
|
+
var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9667
|
+
const [listening, setListening] = (0, import_react53.useState)(false);
|
|
9668
|
+
const [showPanel, setShowPanel] = (0, import_react53.useState)(false);
|
|
9669
|
+
const [language, setLanguage] = (0, import_react53.useState)("en-US");
|
|
9670
|
+
const [interim, setInterim] = (0, import_react53.useState)("");
|
|
9671
|
+
const recognitionRef = (0, import_react53.useRef)(null);
|
|
9672
|
+
const panelRef = (0, import_react53.useRef)(null);
|
|
9673
|
+
const isListeningRef = (0, import_react53.useRef)(false);
|
|
9155
9674
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9156
9675
|
const supported = !!SpeechRecognitionAPI;
|
|
9157
|
-
(0,
|
|
9676
|
+
(0, import_react53.useEffect)(() => {
|
|
9158
9677
|
const handleClick = (e) => {
|
|
9159
9678
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9160
9679
|
setShowPanel(false);
|
|
@@ -9163,7 +9682,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9163
9682
|
document.addEventListener("mousedown", handleClick);
|
|
9164
9683
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9165
9684
|
}, []);
|
|
9166
|
-
const createRecognition = (0,
|
|
9685
|
+
const createRecognition = (0, import_react53.useCallback)(() => {
|
|
9167
9686
|
if (!supported) return null;
|
|
9168
9687
|
const recognition = new SpeechRecognitionAPI();
|
|
9169
9688
|
recognition.lang = language;
|
|
@@ -9172,7 +9691,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9172
9691
|
recognition.maxAlternatives = 1;
|
|
9173
9692
|
return recognition;
|
|
9174
9693
|
}, [supported, language]);
|
|
9175
|
-
const startSession = (0,
|
|
9694
|
+
const startSession = (0, import_react53.useCallback)((recognition) => {
|
|
9176
9695
|
if (!recognition || !editor) return;
|
|
9177
9696
|
recognition.onresult = async (event) => {
|
|
9178
9697
|
let finalText = "";
|
|
@@ -9227,7 +9746,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9227
9746
|
}
|
|
9228
9747
|
};
|
|
9229
9748
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9230
|
-
const startListening = (0,
|
|
9749
|
+
const startListening = (0, import_react53.useCallback)(() => {
|
|
9231
9750
|
if (!supported || !editor) return;
|
|
9232
9751
|
const recognition = createRecognition();
|
|
9233
9752
|
if (!recognition) return;
|
|
@@ -9243,7 +9762,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9243
9762
|
setListening(false);
|
|
9244
9763
|
}
|
|
9245
9764
|
}, [supported, editor, createRecognition, startSession]);
|
|
9246
|
-
const stopListening = (0,
|
|
9765
|
+
const stopListening = (0, import_react53.useCallback)(() => {
|
|
9247
9766
|
isListeningRef.current = false;
|
|
9248
9767
|
if (recognitionRef.current) {
|
|
9249
9768
|
try {
|
|
@@ -9255,9 +9774,9 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9255
9774
|
setListening(false);
|
|
9256
9775
|
setInterim("");
|
|
9257
9776
|
}, []);
|
|
9258
|
-
(0,
|
|
9777
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9259
9778
|
if (!supported) {
|
|
9260
|
-
return /* @__PURE__ */
|
|
9779
|
+
return /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9261
9780
|
}
|
|
9262
9781
|
const LANGUAGES2 = [
|
|
9263
9782
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9279,7 +9798,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9279
9798
|
{ code: "kn-IN", label: "Kannada" },
|
|
9280
9799
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9281
9800
|
];
|
|
9282
|
-
return /* @__PURE__ */
|
|
9801
|
+
return /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
|
|
9283
9802
|
"button",
|
|
9284
9803
|
{
|
|
9285
9804
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9292,21 +9811,21 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9292
9811
|
}
|
|
9293
9812
|
},
|
|
9294
9813
|
"\u{1F3A4}"
|
|
9295
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
9814
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react53.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9296
9815
|
"select",
|
|
9297
9816
|
{
|
|
9298
9817
|
className: "stt-select",
|
|
9299
9818
|
value: language,
|
|
9300
9819
|
onChange: (e) => setLanguage(e.target.value)
|
|
9301
9820
|
},
|
|
9302
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9303
|
-
), /* @__PURE__ */
|
|
9821
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react53.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
9822
|
+
), /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react53.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9304
9823
|
});
|
|
9305
9824
|
var SpeechToText_default = SpeechToText;
|
|
9306
9825
|
|
|
9307
9826
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9308
|
-
var
|
|
9309
|
-
var
|
|
9827
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9828
|
+
var import_react_dom12 = require("react-dom");
|
|
9310
9829
|
var AI_COMMANDS = [
|
|
9311
9830
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
9312
9831
|
{ id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
|
|
@@ -9353,16 +9872,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9353
9872
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9354
9873
|
};
|
|
9355
9874
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9356
|
-
const [open, setOpen] = (0,
|
|
9357
|
-
const [showModal, setShowModal] = (0,
|
|
9358
|
-
const [loading, setLoading] = (0,
|
|
9359
|
-
const [promptText, setPromptText] = (0,
|
|
9360
|
-
const [resultText, setResultText] = (0,
|
|
9361
|
-
const [originalText, setOriginalText] = (0,
|
|
9362
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9363
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9364
|
-
const panelRef = (0,
|
|
9365
|
-
(0,
|
|
9875
|
+
const [open, setOpen] = (0, import_react54.useState)(false);
|
|
9876
|
+
const [showModal, setShowModal] = (0, import_react54.useState)(false);
|
|
9877
|
+
const [loading, setLoading] = (0, import_react54.useState)(false);
|
|
9878
|
+
const [promptText, setPromptText] = (0, import_react54.useState)("");
|
|
9879
|
+
const [resultText, setResultText] = (0, import_react54.useState)("");
|
|
9880
|
+
const [originalText, setOriginalText] = (0, import_react54.useState)("");
|
|
9881
|
+
const [selectionRange, setSelectionRange] = (0, import_react54.useState)(null);
|
|
9882
|
+
const [previousResults, setPreviousResults] = (0, import_react54.useState)([]);
|
|
9883
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9884
|
+
(0, import_react54.useEffect)(() => {
|
|
9366
9885
|
const handleClick = (e) => {
|
|
9367
9886
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9368
9887
|
setOpen(false);
|
|
@@ -9371,7 +9890,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9371
9890
|
document.addEventListener("mousedown", handleClick);
|
|
9372
9891
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9373
9892
|
}, []);
|
|
9374
|
-
const getSelectedText = (0,
|
|
9893
|
+
const getSelectedText = (0, import_react54.useCallback)(() => {
|
|
9375
9894
|
if (!editor) return { text: "", range: null };
|
|
9376
9895
|
const { from, to, empty } = editor.state.selection;
|
|
9377
9896
|
if (!empty) {
|
|
@@ -9379,7 +9898,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9379
9898
|
}
|
|
9380
9899
|
return { text: editor.getText(), range: null };
|
|
9381
9900
|
}, [editor]);
|
|
9382
|
-
const fetchAIResult = (0,
|
|
9901
|
+
const fetchAIResult = (0, import_react54.useCallback)(async (prompt, text, prevResults = []) => {
|
|
9383
9902
|
setLoading(true);
|
|
9384
9903
|
setResultText("");
|
|
9385
9904
|
try {
|
|
@@ -9397,7 +9916,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9397
9916
|
setLoading(false);
|
|
9398
9917
|
}
|
|
9399
9918
|
}, [onAICommand]);
|
|
9400
|
-
const handleCommandSelect = (0,
|
|
9919
|
+
const handleCommandSelect = (0, import_react54.useCallback)((command) => {
|
|
9401
9920
|
const { text, range } = getSelectedText();
|
|
9402
9921
|
if (!text.trim()) return;
|
|
9403
9922
|
setOriginalText(text);
|
|
@@ -9408,7 +9927,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9408
9927
|
setShowModal(true);
|
|
9409
9928
|
fetchAIResult(command.prompt, text, []);
|
|
9410
9929
|
}, [getSelectedText, fetchAIResult]);
|
|
9411
|
-
const handleInsert = (0,
|
|
9930
|
+
const handleInsert = (0, import_react54.useCallback)(() => {
|
|
9412
9931
|
if (!resultText || !editor) return;
|
|
9413
9932
|
if (selectionRange) {
|
|
9414
9933
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9418,7 +9937,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9418
9937
|
setShowModal(false);
|
|
9419
9938
|
setResultText("");
|
|
9420
9939
|
}, [editor, resultText, selectionRange]);
|
|
9421
|
-
const handleInsertAfter = (0,
|
|
9940
|
+
const handleInsertAfter = (0, import_react54.useCallback)(() => {
|
|
9422
9941
|
if (!resultText || !editor) return;
|
|
9423
9942
|
if (selectionRange) {
|
|
9424
9943
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9433,11 +9952,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9433
9952
|
setShowModal(false);
|
|
9434
9953
|
setResultText("");
|
|
9435
9954
|
}, [editor, resultText, selectionRange]);
|
|
9436
|
-
const handleRefresh = (0,
|
|
9955
|
+
const handleRefresh = (0, import_react54.useCallback)(() => {
|
|
9437
9956
|
if (!originalText.trim()) return;
|
|
9438
9957
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9439
9958
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9440
|
-
const handleCancel = (0,
|
|
9959
|
+
const handleCancel = (0, import_react54.useCallback)(() => {
|
|
9441
9960
|
setShowModal(false);
|
|
9442
9961
|
setResultText("");
|
|
9443
9962
|
setPromptText("");
|
|
@@ -9446,15 +9965,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9446
9965
|
setPreviousResults([]);
|
|
9447
9966
|
}, []);
|
|
9448
9967
|
if (!editor) return null;
|
|
9449
|
-
return /* @__PURE__ */
|
|
9968
|
+
return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9450
9969
|
"button",
|
|
9451
9970
|
{
|
|
9452
9971
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9453
9972
|
onClick: () => setOpen(!open)
|
|
9454
9973
|
},
|
|
9455
|
-
/* @__PURE__ */
|
|
9456
|
-
/* @__PURE__ */
|
|
9457
|
-
)), open && /* @__PURE__ */
|
|
9974
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react54.default.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
9975
|
+
/* @__PURE__ */ import_react54.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
9976
|
+
)), open && /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react54.default.createElement(
|
|
9458
9977
|
"button",
|
|
9459
9978
|
{
|
|
9460
9979
|
key: cmd.id,
|
|
@@ -9462,8 +9981,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9462
9981
|
onClick: () => handleCommandSelect(cmd)
|
|
9463
9982
|
},
|
|
9464
9983
|
cmd.label
|
|
9465
|
-
))), /* @__PURE__ */
|
|
9466
|
-
/* @__PURE__ */
|
|
9984
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
|
|
9985
|
+
/* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react54.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9467
9986
|
"textarea",
|
|
9468
9987
|
{
|
|
9469
9988
|
className: "ai-modal-prompt",
|
|
@@ -9471,15 +9990,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9471
9990
|
onChange: (e) => setPromptText(e.target.value),
|
|
9472
9991
|
rows: 3
|
|
9473
9992
|
}
|
|
9474
|
-
), /* @__PURE__ */
|
|
9993
|
+
), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9475
9994
|
"button",
|
|
9476
9995
|
{
|
|
9477
9996
|
className: "ai-modal-robot-btn",
|
|
9478
9997
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9479
9998
|
disabled: loading
|
|
9480
9999
|
},
|
|
9481
|
-
/* @__PURE__ */
|
|
9482
|
-
)))), /* @__PURE__ */
|
|
10000
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react54.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M8 7h8" }))
|
|
10001
|
+
)))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9483
10002
|
"button",
|
|
9484
10003
|
{
|
|
9485
10004
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -9487,7 +10006,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9487
10006
|
disabled: loading || !resultText
|
|
9488
10007
|
},
|
|
9489
10008
|
"Insert"
|
|
9490
|
-
), /* @__PURE__ */
|
|
10009
|
+
), /* @__PURE__ */ import_react54.default.createElement(
|
|
9491
10010
|
"button",
|
|
9492
10011
|
{
|
|
9493
10012
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -9495,23 +10014,23 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9495
10014
|
disabled: loading || !resultText
|
|
9496
10015
|
},
|
|
9497
10016
|
"Insert After"
|
|
9498
|
-
), /* @__PURE__ */
|
|
10017
|
+
), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9499
10018
|
"button",
|
|
9500
10019
|
{
|
|
9501
10020
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
9502
10021
|
onClick: handleRefresh,
|
|
9503
10022
|
disabled: loading
|
|
9504
10023
|
},
|
|
9505
|
-
/* @__PURE__ */
|
|
9506
|
-
))), /* @__PURE__ */
|
|
10024
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10025
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react54.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
9507
10026
|
document.body
|
|
9508
10027
|
));
|
|
9509
10028
|
};
|
|
9510
10029
|
var AICommands_default = AICommands;
|
|
9511
10030
|
|
|
9512
10031
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
9513
|
-
var
|
|
9514
|
-
var
|
|
10032
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
10033
|
+
var import_react_dom13 = require("react-dom");
|
|
9515
10034
|
var LANGUAGES = [
|
|
9516
10035
|
{ code: "af", name: "Afrikaans" },
|
|
9517
10036
|
{ code: "sq", name: "Albanian" },
|
|
@@ -9650,16 +10169,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
9650
10169
|
return null;
|
|
9651
10170
|
}
|
|
9652
10171
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
9653
|
-
const [sourceLang, setSourceLang] = (0,
|
|
9654
|
-
const [targetLang, setTargetLang] = (0,
|
|
9655
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
9656
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
9657
|
-
const [translating, setTranslating] = (0,
|
|
9658
|
-
const [error, setError] = (0,
|
|
9659
|
-
const filteredSource = (0,
|
|
10172
|
+
const [sourceLang, setSourceLang] = (0, import_react55.useState)(initialSource || "en");
|
|
10173
|
+
const [targetLang, setTargetLang] = (0, import_react55.useState)(initialTarget || "hi");
|
|
10174
|
+
const [sourceFilter, setSourceFilter] = (0, import_react55.useState)("");
|
|
10175
|
+
const [targetFilter, setTargetFilter] = (0, import_react55.useState)("");
|
|
10176
|
+
const [translating, setTranslating] = (0, import_react55.useState)(false);
|
|
10177
|
+
const [error, setError] = (0, import_react55.useState)("");
|
|
10178
|
+
const filteredSource = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
9660
10179
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
9661
10180
|
), [sourceFilter]);
|
|
9662
|
-
const filteredTarget = (0,
|
|
10181
|
+
const filteredTarget = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
9663
10182
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
9664
10183
|
), [targetFilter]);
|
|
9665
10184
|
const handleSwap = () => {
|
|
@@ -9702,8 +10221,8 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9702
10221
|
setTranslating(false);
|
|
9703
10222
|
}
|
|
9704
10223
|
};
|
|
9705
|
-
return (0,
|
|
9706
|
-
/* @__PURE__ */
|
|
10224
|
+
return (0, import_react_dom13.createPortal)(
|
|
10225
|
+
/* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react55.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9707
10226
|
"input",
|
|
9708
10227
|
{
|
|
9709
10228
|
type: "text",
|
|
@@ -9712,16 +10231,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9712
10231
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
9713
10232
|
className: "translate-filter-input"
|
|
9714
10233
|
}
|
|
9715
|
-
)), /* @__PURE__ */
|
|
10234
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9716
10235
|
"button",
|
|
9717
10236
|
{
|
|
9718
10237
|
key: lang.code,
|
|
9719
10238
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
9720
10239
|
onClick: () => setSourceLang(lang.code)
|
|
9721
10240
|
},
|
|
9722
|
-
/* @__PURE__ */
|
|
9723
|
-
/* @__PURE__ */
|
|
9724
|
-
)))), /* @__PURE__ */
|
|
10241
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10242
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10243
|
+
)))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9725
10244
|
"input",
|
|
9726
10245
|
{
|
|
9727
10246
|
type: "text",
|
|
@@ -9730,16 +10249,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9730
10249
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
9731
10250
|
className: "translate-filter-input"
|
|
9732
10251
|
}
|
|
9733
|
-
)), /* @__PURE__ */
|
|
10252
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9734
10253
|
"button",
|
|
9735
10254
|
{
|
|
9736
10255
|
key: lang.code,
|
|
9737
10256
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
9738
10257
|
onClick: () => setTargetLang(lang.code)
|
|
9739
10258
|
},
|
|
9740
|
-
/* @__PURE__ */
|
|
9741
|
-
/* @__PURE__ */
|
|
9742
|
-
))))), error && /* @__PURE__ */
|
|
10259
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10260
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10261
|
+
))))), error && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
9743
10262
|
document.body
|
|
9744
10263
|
);
|
|
9745
10264
|
};
|
|
@@ -10390,38 +10909,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
10390
10909
|
});
|
|
10391
10910
|
|
|
10392
10911
|
// lib/RufousTextEditor/icons.tsx
|
|
10393
|
-
var
|
|
10912
|
+
var React112 = __toESM(require("react"), 1);
|
|
10394
10913
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10395
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10396
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10397
|
-
var IconBold = () => /* @__PURE__ */
|
|
10398
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10399
|
-
var IconLink = () => /* @__PURE__ */
|
|
10400
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10401
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10402
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10403
|
-
var IconColor = () => /* @__PURE__ */
|
|
10404
|
-
var IconFont = () => /* @__PURE__ */
|
|
10405
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10406
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10407
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10408
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10409
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10410
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10411
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10412
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10413
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10414
|
-
var IconTable = () => /* @__PURE__ */
|
|
10415
|
-
var IconImage = () => /* @__PURE__ */
|
|
10416
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10417
|
-
var IconCut = () => /* @__PURE__ */
|
|
10418
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10419
|
-
var IconCode = () => /* @__PURE__ */
|
|
10420
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10421
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10422
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10423
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10424
|
-
var IconPaste = () => /* @__PURE__ */
|
|
10914
|
+
var IconUndo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
|
|
10915
|
+
var IconRedo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
|
|
10916
|
+
var IconBold = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
|
|
10917
|
+
var IconItalic = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
10918
|
+
var IconLink = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
|
|
10919
|
+
var IconStrike = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
|
|
10920
|
+
var IconHeading = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
10921
|
+
var IconFontSize = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
10922
|
+
var IconColor = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
10923
|
+
var IconFont = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
|
|
10924
|
+
var IconLineHeight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
|
|
10925
|
+
var IconBulletList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
|
|
10926
|
+
var IconOrderedList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
10927
|
+
var IconAlignLeft = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
10928
|
+
var IconAlignCenter = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
10929
|
+
var IconAlignRight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
10930
|
+
var IconAlignJustify = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
10931
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
10932
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
10933
|
+
var IconTable = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
|
|
10934
|
+
var IconImage = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
|
|
10935
|
+
var IconVideo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
|
|
10936
|
+
var IconCut = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
|
|
10937
|
+
var IconCopy = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
|
|
10938
|
+
var IconCode = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
|
|
10939
|
+
var IconFullscreen = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
10940
|
+
var IconTranslate = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
|
|
10941
|
+
var IconTaskList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
|
|
10942
|
+
var IconCheck = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
10943
|
+
var IconPaste = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
10425
10944
|
|
|
10426
10945
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10427
10946
|
var COLOR_PALETTE = [
|
|
@@ -10559,10 +11078,10 @@ var SPECIAL_CHARS = [
|
|
|
10559
11078
|
"\xA2"
|
|
10560
11079
|
];
|
|
10561
11080
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
10562
|
-
const [open, setOpen] = (0,
|
|
10563
|
-
const ref = (0,
|
|
10564
|
-
const menuRef = (0,
|
|
10565
|
-
(0,
|
|
11081
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
11082
|
+
const ref = (0, import_react56.useRef)(null);
|
|
11083
|
+
const menuRef = (0, import_react56.useRef)(null);
|
|
11084
|
+
(0, import_react56.useEffect)(() => {
|
|
10566
11085
|
const handleClick = (e) => {
|
|
10567
11086
|
const target = e.target;
|
|
10568
11087
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -10574,7 +11093,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10574
11093
|
document.addEventListener("mousedown", handleClick);
|
|
10575
11094
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
10576
11095
|
}, []);
|
|
10577
|
-
(0,
|
|
11096
|
+
(0, import_react56.useEffect)(() => {
|
|
10578
11097
|
if (!open || !menuRef.current || !ref.current) return;
|
|
10579
11098
|
const menu = menuRef.current;
|
|
10580
11099
|
const trigger2 = ref.current;
|
|
@@ -10603,22 +11122,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10603
11122
|
};
|
|
10604
11123
|
position();
|
|
10605
11124
|
}, [open]);
|
|
10606
|
-
return /* @__PURE__ */
|
|
11125
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10607
11126
|
"button",
|
|
10608
11127
|
{
|
|
10609
11128
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
10610
11129
|
onClick: () => setOpen(!open)
|
|
10611
11130
|
},
|
|
10612
11131
|
trigger.label,
|
|
10613
|
-
/* @__PURE__ */
|
|
10614
|
-
)), open && (0,
|
|
10615
|
-
/* @__PURE__ */
|
|
11132
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11133
|
+
)), open && (0, import_react_dom14.createPortal)(
|
|
11134
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react56.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
10616
11135
|
document.body
|
|
10617
11136
|
));
|
|
10618
11137
|
};
|
|
10619
11138
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
10620
|
-
const [activeTab, setActiveTab] = (0,
|
|
10621
|
-
const [url, setUrl] = (0,
|
|
11139
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("link");
|
|
11140
|
+
const [url, setUrl] = (0, import_react56.useState)("");
|
|
10622
11141
|
const extractIframeSrc = (html) => {
|
|
10623
11142
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
10624
11143
|
return match ? match[1] : null;
|
|
@@ -10650,14 +11169,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10650
11169
|
}
|
|
10651
11170
|
onClose();
|
|
10652
11171
|
};
|
|
10653
|
-
return /* @__PURE__ */
|
|
11172
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10654
11173
|
"button",
|
|
10655
11174
|
{
|
|
10656
11175
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
10657
11176
|
onClick: () => setActiveTab("link")
|
|
10658
11177
|
},
|
|
10659
11178
|
"\u{1F517} Link"
|
|
10660
|
-
), /* @__PURE__ */
|
|
11179
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10661
11180
|
"button",
|
|
10662
11181
|
{
|
|
10663
11182
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -10665,7 +11184,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10665
11184
|
},
|
|
10666
11185
|
"</>",
|
|
10667
11186
|
" Code"
|
|
10668
|
-
)), /* @__PURE__ */
|
|
11187
|
+
)), /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react56.default.createElement(
|
|
10669
11188
|
"input",
|
|
10670
11189
|
{
|
|
10671
11190
|
type: "text",
|
|
@@ -10676,7 +11195,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10676
11195
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
10677
11196
|
autoFocus: true
|
|
10678
11197
|
}
|
|
10679
|
-
) : /* @__PURE__ */
|
|
11198
|
+
) : /* @__PURE__ */ import_react56.default.createElement(
|
|
10680
11199
|
"textarea",
|
|
10681
11200
|
{
|
|
10682
11201
|
className: "insert-panel-textarea",
|
|
@@ -10685,13 +11204,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10685
11204
|
onChange: (e) => setUrl(e.target.value),
|
|
10686
11205
|
rows: 3
|
|
10687
11206
|
}
|
|
10688
|
-
), /* @__PURE__ */
|
|
11207
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
10689
11208
|
};
|
|
10690
11209
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
10691
|
-
const [activeTab, setActiveTab] = (0,
|
|
10692
|
-
const [url, setUrl] = (0,
|
|
10693
|
-
const [isDragging, setIsDragging] = (0,
|
|
10694
|
-
const fileInputRef = (0,
|
|
11210
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("upload");
|
|
11211
|
+
const [url, setUrl] = (0, import_react56.useState)("");
|
|
11212
|
+
const [isDragging, setIsDragging] = (0, import_react56.useState)(false);
|
|
11213
|
+
const fileInputRef = (0, import_react56.useRef)(null);
|
|
10695
11214
|
const getBase64 = (file) => {
|
|
10696
11215
|
return new Promise((resolve, reject) => {
|
|
10697
11216
|
const reader = new FileReader();
|
|
@@ -10729,21 +11248,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10729
11248
|
editor.chain().focus().setImage({ src: url }).run();
|
|
10730
11249
|
onClose();
|
|
10731
11250
|
};
|
|
10732
|
-
return /* @__PURE__ */
|
|
11251
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10733
11252
|
"button",
|
|
10734
11253
|
{
|
|
10735
11254
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
10736
11255
|
onClick: () => setActiveTab("upload")
|
|
10737
11256
|
},
|
|
10738
11257
|
"\u2B06 Upload"
|
|
10739
|
-
), /* @__PURE__ */
|
|
11258
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10740
11259
|
"button",
|
|
10741
11260
|
{
|
|
10742
11261
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
10743
11262
|
onClick: () => setActiveTab("url")
|
|
10744
11263
|
},
|
|
10745
11264
|
"\u{1F517} URL"
|
|
10746
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11265
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
|
|
10747
11266
|
"div",
|
|
10748
11267
|
{
|
|
10749
11268
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -10755,9 +11274,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10755
11274
|
onDrop: handleDrop,
|
|
10756
11275
|
onClick: () => fileInputRef.current?.click()
|
|
10757
11276
|
},
|
|
10758
|
-
/* @__PURE__ */
|
|
10759
|
-
/* @__PURE__ */
|
|
10760
|
-
), /* @__PURE__ */
|
|
11277
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11278
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11279
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10761
11280
|
"input",
|
|
10762
11281
|
{
|
|
10763
11282
|
ref: fileInputRef,
|
|
@@ -10766,7 +11285,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10766
11285
|
style: { display: "none" },
|
|
10767
11286
|
onChange: handleFileSelect
|
|
10768
11287
|
}
|
|
10769
|
-
)) : /* @__PURE__ */
|
|
11288
|
+
)) : /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react56.default.createElement(
|
|
10770
11289
|
"input",
|
|
10771
11290
|
{
|
|
10772
11291
|
type: "text",
|
|
@@ -10777,18 +11296,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10777
11296
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
10778
11297
|
autoFocus: true
|
|
10779
11298
|
}
|
|
10780
|
-
), /* @__PURE__ */
|
|
11299
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
10781
11300
|
};
|
|
10782
11301
|
var MAX_GRID = 10;
|
|
10783
11302
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
10784
|
-
const [hoverRow, setHoverRow] = (0,
|
|
10785
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11303
|
+
const [hoverRow, setHoverRow] = (0, import_react56.useState)(0);
|
|
11304
|
+
const [hoverCol, setHoverCol] = (0, import_react56.useState)(0);
|
|
10786
11305
|
const handleInsert = () => {
|
|
10787
11306
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
10788
11307
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
10789
11308
|
onClose();
|
|
10790
11309
|
};
|
|
10791
|
-
return /* @__PURE__ */
|
|
11310
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10792
11311
|
"div",
|
|
10793
11312
|
{
|
|
10794
11313
|
className: "table-grid",
|
|
@@ -10797,7 +11316,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10797
11316
|
setHoverCol(0);
|
|
10798
11317
|
}
|
|
10799
11318
|
},
|
|
10800
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11319
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react56.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10801
11320
|
"div",
|
|
10802
11321
|
{
|
|
10803
11322
|
key: c,
|
|
@@ -10809,7 +11328,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10809
11328
|
onClick: handleInsert
|
|
10810
11329
|
}
|
|
10811
11330
|
))))
|
|
10812
|
-
), /* @__PURE__ */
|
|
11331
|
+
), /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react56.default.createElement(
|
|
10813
11332
|
"button",
|
|
10814
11333
|
{
|
|
10815
11334
|
className: "table-grid-submit",
|
|
@@ -10820,9 +11339,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10820
11339
|
)));
|
|
10821
11340
|
};
|
|
10822
11341
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
10823
|
-
const [tab, setTab] = (0,
|
|
10824
|
-
const [activeBg, setActiveBg] = (0,
|
|
10825
|
-
const [activeText, setActiveText] = (0,
|
|
11342
|
+
const [tab, setTab] = (0, import_react56.useState)("background");
|
|
11343
|
+
const [activeBg, setActiveBg] = (0, import_react56.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11344
|
+
const [activeText, setActiveText] = (0, import_react56.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
10826
11345
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
10827
11346
|
const applyColor = (color) => {
|
|
10828
11347
|
if (tab === "background") {
|
|
@@ -10843,51 +11362,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
10843
11362
|
}
|
|
10844
11363
|
onClose();
|
|
10845
11364
|
};
|
|
10846
|
-
return /* @__PURE__ */
|
|
11365
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10847
11366
|
"button",
|
|
10848
11367
|
{
|
|
10849
11368
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
10850
11369
|
onClick: () => setTab("background")
|
|
10851
11370
|
},
|
|
10852
11371
|
"Background"
|
|
10853
|
-
), /* @__PURE__ */
|
|
11372
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10854
11373
|
"button",
|
|
10855
11374
|
{
|
|
10856
11375
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
10857
11376
|
onClick: () => setTab("text")
|
|
10858
11377
|
},
|
|
10859
11378
|
"Text"
|
|
10860
|
-
)), /* @__PURE__ */
|
|
11379
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react56.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10861
11380
|
"button",
|
|
10862
11381
|
{
|
|
10863
11382
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
10864
11383
|
style: { background: color },
|
|
10865
11384
|
onClick: () => applyColor(color)
|
|
10866
11385
|
}
|
|
10867
|
-
)))), /* @__PURE__ */
|
|
11386
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
10868
11387
|
};
|
|
10869
11388
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
10870
|
-
const [, setEditorState] = (0,
|
|
10871
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
10872
|
-
const ttsRef = (0,
|
|
10873
|
-
const sttRef = (0,
|
|
11389
|
+
const [, setEditorState] = (0, import_react56.useState)(0);
|
|
11390
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react56.useState)(false);
|
|
11391
|
+
const ttsRef = (0, import_react56.useRef)(null);
|
|
11392
|
+
const sttRef = (0, import_react56.useRef)(null);
|
|
10874
11393
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
10875
|
-
(0,
|
|
11394
|
+
(0, import_react56.useEffect)(() => {
|
|
10876
11395
|
if (!editor) return;
|
|
10877
11396
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
10878
11397
|
editor.on("transaction", onTransaction);
|
|
10879
11398
|
return () => editor.off("transaction", onTransaction);
|
|
10880
11399
|
}, [editor]);
|
|
10881
|
-
const insertSpecialChar = (0,
|
|
11400
|
+
const insertSpecialChar = (0, import_react56.useCallback)((char) => {
|
|
10882
11401
|
if (!editor) return;
|
|
10883
11402
|
editor.chain().focus().insertContent(char).run();
|
|
10884
11403
|
}, [editor]);
|
|
10885
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
10886
|
-
const [translateSource, setTranslateSource] = (0,
|
|
10887
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
10888
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
10889
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
10890
|
-
const handleCopy = (0,
|
|
11404
|
+
const [copySuccess, setCopySuccess] = (0, import_react56.useState)(false);
|
|
11405
|
+
const [translateSource, setTranslateSource] = (0, import_react56.useState)("en");
|
|
11406
|
+
const [translateTarget, setTranslateTarget] = (0, import_react56.useState)("hi");
|
|
11407
|
+
const [translateStatus, setTranslateStatus] = (0, import_react56.useState)("");
|
|
11408
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react56.useState)(false);
|
|
11409
|
+
const handleCopy = (0, import_react56.useCallback)(async () => {
|
|
10891
11410
|
if (!editor) return;
|
|
10892
11411
|
const { from, to, empty } = editor.state.selection;
|
|
10893
11412
|
if (empty) return;
|
|
@@ -10902,7 +11421,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10902
11421
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
10903
11422
|
}
|
|
10904
11423
|
}, [editor]);
|
|
10905
|
-
const handlePaste = (0,
|
|
11424
|
+
const handlePaste = (0, import_react56.useCallback)(async () => {
|
|
10906
11425
|
if (!editor) return;
|
|
10907
11426
|
try {
|
|
10908
11427
|
const text = await navigator.clipboard.readText();
|
|
@@ -10911,7 +11430,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10911
11430
|
document.execCommand("paste");
|
|
10912
11431
|
}
|
|
10913
11432
|
}, [editor]);
|
|
10914
|
-
const handleQuickTranslate = (0,
|
|
11433
|
+
const handleQuickTranslate = (0, import_react56.useCallback)(async () => {
|
|
10915
11434
|
if (!editor) return;
|
|
10916
11435
|
const { from, to, empty } = editor.state.selection;
|
|
10917
11436
|
if (empty) {
|
|
@@ -10945,32 +11464,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10945
11464
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
10946
11465
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
10947
11466
|
if (!editor) return null;
|
|
10948
|
-
return /* @__PURE__ */
|
|
11467
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10949
11468
|
"button",
|
|
10950
11469
|
{
|
|
10951
11470
|
className: "toolbar-btn",
|
|
10952
11471
|
onClick: () => editor.chain().focus().undo().run(),
|
|
10953
11472
|
disabled: !editor.can().undo()
|
|
10954
11473
|
},
|
|
10955
|
-
/* @__PURE__ */
|
|
10956
|
-
)), show("redo") && /* @__PURE__ */
|
|
11474
|
+
/* @__PURE__ */ import_react56.default.createElement(IconUndo, null)
|
|
11475
|
+
)), show("redo") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10957
11476
|
"button",
|
|
10958
11477
|
{
|
|
10959
11478
|
className: "toolbar-btn",
|
|
10960
11479
|
onClick: () => editor.chain().focus().redo().run(),
|
|
10961
11480
|
disabled: !editor.can().redo()
|
|
10962
11481
|
},
|
|
10963
|
-
/* @__PURE__ */
|
|
10964
|
-
))), show("ai") && /* @__PURE__ */
|
|
11482
|
+
/* @__PURE__ */ import_react56.default.createElement(IconRedo, null)
|
|
11483
|
+
))), show("ai") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react56.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10965
11484
|
Dropdown,
|
|
10966
11485
|
{
|
|
10967
11486
|
trigger: {
|
|
10968
|
-
label: /* @__PURE__ */
|
|
11487
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconHeading, null),
|
|
10969
11488
|
title: "Block type",
|
|
10970
11489
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
10971
11490
|
}
|
|
10972
11491
|
},
|
|
10973
|
-
/* @__PURE__ */
|
|
11492
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10974
11493
|
"button",
|
|
10975
11494
|
{
|
|
10976
11495
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -10978,7 +11497,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10978
11497
|
},
|
|
10979
11498
|
"\xB6 Paragraph"
|
|
10980
11499
|
),
|
|
10981
|
-
/* @__PURE__ */
|
|
11500
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10982
11501
|
"button",
|
|
10983
11502
|
{
|
|
10984
11503
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -10986,7 +11505,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10986
11505
|
},
|
|
10987
11506
|
"Heading 1"
|
|
10988
11507
|
),
|
|
10989
|
-
/* @__PURE__ */
|
|
11508
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10990
11509
|
"button",
|
|
10991
11510
|
{
|
|
10992
11511
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -10994,7 +11513,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10994
11513
|
},
|
|
10995
11514
|
"Heading 2"
|
|
10996
11515
|
),
|
|
10997
|
-
/* @__PURE__ */
|
|
11516
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10998
11517
|
"button",
|
|
10999
11518
|
{
|
|
11000
11519
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11002,7 +11521,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11002
11521
|
},
|
|
11003
11522
|
"Heading 3"
|
|
11004
11523
|
),
|
|
11005
|
-
/* @__PURE__ */
|
|
11524
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
11006
11525
|
"button",
|
|
11007
11526
|
{
|
|
11008
11527
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11010,7 +11529,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11010
11529
|
},
|
|
11011
11530
|
"Heading 4"
|
|
11012
11531
|
),
|
|
11013
|
-
/* @__PURE__ */
|
|
11532
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
11014
11533
|
"button",
|
|
11015
11534
|
{
|
|
11016
11535
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11018,7 +11537,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11018
11537
|
},
|
|
11019
11538
|
"\u275E Blockquote"
|
|
11020
11539
|
),
|
|
11021
|
-
/* @__PURE__ */
|
|
11540
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
11022
11541
|
"button",
|
|
11023
11542
|
{
|
|
11024
11543
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11027,19 +11546,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11027
11546
|
"{ }",
|
|
11028
11547
|
" Code Block"
|
|
11029
11548
|
),
|
|
11030
|
-
/* @__PURE__ */
|
|
11031
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11549
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11550
|
+
), show("fontsize") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11032
11551
|
Dropdown,
|
|
11033
11552
|
{
|
|
11034
11553
|
trigger: {
|
|
11035
|
-
label: /* @__PURE__ */
|
|
11554
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFontSize, null),
|
|
11036
11555
|
title: "Font size"
|
|
11037
11556
|
}
|
|
11038
11557
|
},
|
|
11039
11558
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11040
11559
|
const sizeStr = `${size}px`;
|
|
11041
11560
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11042
|
-
return /* @__PURE__ */
|
|
11561
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
11043
11562
|
"button",
|
|
11044
11563
|
{
|
|
11045
11564
|
key: size,
|
|
@@ -11055,17 +11574,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11055
11574
|
sizeStr
|
|
11056
11575
|
);
|
|
11057
11576
|
})
|
|
11058
|
-
), show("font") && /* @__PURE__ */
|
|
11577
|
+
), show("font") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11059
11578
|
Dropdown,
|
|
11060
11579
|
{
|
|
11061
11580
|
trigger: {
|
|
11062
|
-
label: /* @__PURE__ */
|
|
11581
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFont, null),
|
|
11063
11582
|
title: "Font family"
|
|
11064
11583
|
}
|
|
11065
11584
|
},
|
|
11066
11585
|
FONT_FAMILIES.map((font) => {
|
|
11067
11586
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11068
|
-
return /* @__PURE__ */
|
|
11587
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
11069
11588
|
"button",
|
|
11070
11589
|
{
|
|
11071
11590
|
key: font,
|
|
@@ -11082,40 +11601,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11082
11601
|
font
|
|
11083
11602
|
);
|
|
11084
11603
|
})
|
|
11085
|
-
), show("color") && /* @__PURE__ */
|
|
11604
|
+
), show("color") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11086
11605
|
Dropdown,
|
|
11087
11606
|
{
|
|
11088
11607
|
trigger: {
|
|
11089
|
-
label: /* @__PURE__ */
|
|
11608
|
+
label: /* @__PURE__ */ import_react56.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react56.default.createElement(IconColor, null)),
|
|
11090
11609
|
title: "Colors"
|
|
11091
11610
|
},
|
|
11092
11611
|
keepOpen: true
|
|
11093
11612
|
},
|
|
11094
|
-
(close) => /* @__PURE__ */
|
|
11095
|
-
), show("bold") && /* @__PURE__ */
|
|
11613
|
+
(close) => /* @__PURE__ */ import_react56.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11614
|
+
), show("bold") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11096
11615
|
"button",
|
|
11097
11616
|
{
|
|
11098
11617
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11099
11618
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11100
11619
|
},
|
|
11101
|
-
/* @__PURE__ */
|
|
11102
|
-
)), show("italic") && /* @__PURE__ */
|
|
11620
|
+
/* @__PURE__ */ import_react56.default.createElement(IconBold, null)
|
|
11621
|
+
)), show("italic") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11103
11622
|
"button",
|
|
11104
11623
|
{
|
|
11105
11624
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11106
11625
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11107
11626
|
},
|
|
11108
|
-
/* @__PURE__ */
|
|
11109
|
-
)), show("strike") && /* @__PURE__ */
|
|
11627
|
+
/* @__PURE__ */ import_react56.default.createElement(IconItalic, null)
|
|
11628
|
+
)), show("strike") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11110
11629
|
Dropdown,
|
|
11111
11630
|
{
|
|
11112
|
-
trigger: { label: /* @__PURE__ */
|
|
11631
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11113
11632
|
},
|
|
11114
|
-
/* @__PURE__ */
|
|
11115
|
-
/* @__PURE__ */
|
|
11116
|
-
/* @__PURE__ */
|
|
11117
|
-
/* @__PURE__ */
|
|
11118
|
-
/* @__PURE__ */
|
|
11633
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react56.default.createElement("s", null, "Strikethrough")),
|
|
11634
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react56.default.createElement("u", null, "Underline")),
|
|
11635
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sup", null, "2"), " Superscript"),
|
|
11636
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sub", null, "2"), " Subscript"),
|
|
11637
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11119
11638
|
e.preventDefault();
|
|
11120
11639
|
const chain = editor.chain().focus();
|
|
11121
11640
|
if (!editor.state.selection.empty) {
|
|
@@ -11131,25 +11650,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11131
11650
|
c.run();
|
|
11132
11651
|
}
|
|
11133
11652
|
} }, "\u2715 Clear formatting")
|
|
11134
|
-
), show("link") && /* @__PURE__ */
|
|
11653
|
+
), show("link") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11135
11654
|
"button",
|
|
11136
11655
|
{
|
|
11137
11656
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11138
11657
|
onClick: setLink
|
|
11139
11658
|
},
|
|
11140
|
-
/* @__PURE__ */
|
|
11141
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11659
|
+
/* @__PURE__ */ import_react56.default.createElement(IconLink, null)
|
|
11660
|
+
)), show("lineheight") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11142
11661
|
Dropdown,
|
|
11143
11662
|
{
|
|
11144
11663
|
trigger: {
|
|
11145
|
-
label: /* @__PURE__ */
|
|
11664
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconLineHeight, null),
|
|
11146
11665
|
title: "Line height"
|
|
11147
11666
|
}
|
|
11148
11667
|
},
|
|
11149
11668
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11150
11669
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11151
11670
|
const isActive = currentLH === lh;
|
|
11152
|
-
return /* @__PURE__ */
|
|
11671
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
11153
11672
|
"button",
|
|
11154
11673
|
{
|
|
11155
11674
|
key: lh,
|
|
@@ -11165,19 +11684,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11165
11684
|
lh
|
|
11166
11685
|
);
|
|
11167
11686
|
})
|
|
11168
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11687
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11169
11688
|
"button",
|
|
11170
11689
|
{
|
|
11171
11690
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11172
11691
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11173
11692
|
},
|
|
11174
|
-
/* @__PURE__ */
|
|
11175
|
-
)), /* @__PURE__ */
|
|
11693
|
+
/* @__PURE__ */ import_react56.default.createElement(IconBulletList, null)
|
|
11694
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11176
11695
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11177
11696
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11178
11697
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11179
11698
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11180
|
-
].map((item) => /* @__PURE__ */
|
|
11699
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11181
11700
|
"button",
|
|
11182
11701
|
{
|
|
11183
11702
|
key: item.label,
|
|
@@ -11202,24 +11721,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11202
11721
|
}).run();
|
|
11203
11722
|
}
|
|
11204
11723
|
},
|
|
11205
|
-
/* @__PURE__ */
|
|
11724
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11206
11725
|
" ",
|
|
11207
11726
|
item.label
|
|
11208
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11727
|
+
)))), show("ol") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11209
11728
|
"button",
|
|
11210
11729
|
{
|
|
11211
11730
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11212
11731
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11213
11732
|
},
|
|
11214
|
-
/* @__PURE__ */
|
|
11215
|
-
)), /* @__PURE__ */
|
|
11733
|
+
/* @__PURE__ */ import_react56.default.createElement(IconOrderedList, null)
|
|
11734
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11216
11735
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11217
11736
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11218
11737
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11219
11738
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11220
11739
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11221
11740
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11222
|
-
].map((item) => /* @__PURE__ */
|
|
11741
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11223
11742
|
"button",
|
|
11224
11743
|
{
|
|
11225
11744
|
key: item.label,
|
|
@@ -11244,24 +11763,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11244
11763
|
}).run();
|
|
11245
11764
|
}
|
|
11246
11765
|
},
|
|
11247
|
-
/* @__PURE__ */
|
|
11766
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11248
11767
|
" ",
|
|
11249
11768
|
item.label
|
|
11250
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
11769
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11251
11770
|
Dropdown,
|
|
11252
11771
|
{
|
|
11253
11772
|
trigger: {
|
|
11254
|
-
label: /* @__PURE__ */
|
|
11773
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null),
|
|
11255
11774
|
title: "Align",
|
|
11256
11775
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11257
11776
|
}
|
|
11258
11777
|
},
|
|
11259
11778
|
[
|
|
11260
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11261
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11262
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11263
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11264
|
-
].map((item) => /* @__PURE__ */
|
|
11779
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null) },
|
|
11780
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignCenter, null) },
|
|
11781
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignRight, null) },
|
|
11782
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignJustify, null) }
|
|
11783
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11265
11784
|
"button",
|
|
11266
11785
|
{
|
|
11267
11786
|
key: item.value,
|
|
@@ -11272,7 +11791,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11272
11791
|
" ",
|
|
11273
11792
|
item.label
|
|
11274
11793
|
))
|
|
11275
|
-
), show("indent") && /* @__PURE__ */
|
|
11794
|
+
), show("indent") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11276
11795
|
"button",
|
|
11277
11796
|
{
|
|
11278
11797
|
className: "toolbar-btn",
|
|
@@ -11291,8 +11810,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11291
11810
|
}).run();
|
|
11292
11811
|
}
|
|
11293
11812
|
},
|
|
11294
|
-
/* @__PURE__ */
|
|
11295
|
-
)), show("outdent") && /* @__PURE__ */
|
|
11813
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentIncrease, null)
|
|
11814
|
+
)), show("outdent") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11296
11815
|
"button",
|
|
11297
11816
|
{
|
|
11298
11817
|
className: "toolbar-btn",
|
|
@@ -11311,29 +11830,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11311
11830
|
}).run();
|
|
11312
11831
|
}
|
|
11313
11832
|
},
|
|
11314
|
-
/* @__PURE__ */
|
|
11315
|
-
))), show("table") && /* @__PURE__ */
|
|
11833
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentDecrease, null)
|
|
11834
|
+
))), show("table") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11316
11835
|
"button",
|
|
11317
11836
|
{
|
|
11318
11837
|
className: "toolbar-btn",
|
|
11319
11838
|
onClick: () => document.execCommand("cut")
|
|
11320
11839
|
},
|
|
11321
|
-
/* @__PURE__ */
|
|
11322
|
-
)), show("copy") && /* @__PURE__ */
|
|
11840
|
+
/* @__PURE__ */ import_react56.default.createElement(IconCut, null)
|
|
11841
|
+
)), show("copy") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11323
11842
|
"button",
|
|
11324
11843
|
{
|
|
11325
11844
|
className: "toolbar-btn",
|
|
11326
11845
|
onClick: handleCopy
|
|
11327
11846
|
},
|
|
11328
|
-
copySuccess ? /* @__PURE__ */
|
|
11329
|
-
)), show("paste") && /* @__PURE__ */
|
|
11847
|
+
copySuccess ? /* @__PURE__ */ import_react56.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react56.default.createElement(IconCopy, null)
|
|
11848
|
+
)), show("paste") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11330
11849
|
"button",
|
|
11331
11850
|
{
|
|
11332
11851
|
className: "toolbar-btn",
|
|
11333
11852
|
onClick: handlePaste
|
|
11334
11853
|
},
|
|
11335
|
-
/* @__PURE__ */
|
|
11336
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
11854
|
+
/* @__PURE__ */ import_react56.default.createElement(IconPaste, null)
|
|
11855
|
+
)), show("specialchars") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11337
11856
|
"button",
|
|
11338
11857
|
{
|
|
11339
11858
|
key: char,
|
|
@@ -11341,12 +11860,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11341
11860
|
onClick: () => insertSpecialChar(char)
|
|
11342
11861
|
},
|
|
11343
11862
|
char
|
|
11344
|
-
)))), show("code") && /* @__PURE__ */
|
|
11863
|
+
)))), show("code") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11345
11864
|
Dropdown,
|
|
11346
11865
|
{
|
|
11347
|
-
trigger: { label: /* @__PURE__ */
|
|
11866
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11348
11867
|
},
|
|
11349
|
-
/* @__PURE__ */
|
|
11868
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11350
11869
|
if (editor.isActive("codeBlock")) {
|
|
11351
11870
|
const text = (() => {
|
|
11352
11871
|
const { $from } = editor.state.selection;
|
|
@@ -11364,22 +11883,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11364
11883
|
editor.chain().focus().toggleCode().run();
|
|
11365
11884
|
}
|
|
11366
11885
|
} }, "</>", " Inline Code"),
|
|
11367
|
-
/* @__PURE__ */
|
|
11368
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
11886
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
11887
|
+
), show("fullscreen") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11369
11888
|
"button",
|
|
11370
11889
|
{
|
|
11371
11890
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11372
11891
|
onClick: onToggleFullscreen
|
|
11373
11892
|
},
|
|
11374
|
-
/* @__PURE__ */
|
|
11375
|
-
)), show("tts") && /* @__PURE__ */
|
|
11893
|
+
/* @__PURE__ */ import_react56.default.createElement(IconFullscreen, null)
|
|
11894
|
+
)), show("tts") && /* @__PURE__ */ import_react56.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react56.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11376
11895
|
"button",
|
|
11377
11896
|
{
|
|
11378
11897
|
className: "toolbar-btn",
|
|
11379
11898
|
onClick: handleQuickTranslate
|
|
11380
11899
|
},
|
|
11381
|
-
/* @__PURE__ */
|
|
11382
|
-
)), /* @__PURE__ */
|
|
11900
|
+
/* @__PURE__ */ import_react56.default.createElement(IconTranslate, null)
|
|
11901
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react56.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11383
11902
|
"button",
|
|
11384
11903
|
{
|
|
11385
11904
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11422,11 +11941,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11422
11941
|
}
|
|
11423
11942
|
}
|
|
11424
11943
|
},
|
|
11425
|
-
/* @__PURE__ */
|
|
11426
|
-
)), /* @__PURE__ */
|
|
11944
|
+
/* @__PURE__ */ import_react56.default.createElement(IconTaskList, null)
|
|
11945
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11427
11946
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
11428
11947
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11429
|
-
return /* @__PURE__ */
|
|
11948
|
+
return /* @__PURE__ */ import_react56.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11430
11949
|
const { state } = editor;
|
|
11431
11950
|
const { schema } = state;
|
|
11432
11951
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11459,8 +11978,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11459
11978
|
}
|
|
11460
11979
|
return true;
|
|
11461
11980
|
}).run();
|
|
11462
|
-
} }, /* @__PURE__ */
|
|
11463
|
-
})))), onClose && /* @__PURE__ */
|
|
11981
|
+
} }, /* @__PURE__ */ import_react56.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react56.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
11982
|
+
})))), onClose && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11464
11983
|
"button",
|
|
11465
11984
|
{
|
|
11466
11985
|
className: "toolbar-btn btn-cross",
|
|
@@ -11476,8 +11995,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11476
11995
|
onClose();
|
|
11477
11996
|
}
|
|
11478
11997
|
},
|
|
11479
|
-
/* @__PURE__ */
|
|
11480
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
11998
|
+
/* @__PURE__ */ import_react56.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
11999
|
+
))), showTranslateModal && /* @__PURE__ */ import_react56.default.createElement(
|
|
11481
12000
|
TranslateModal_default,
|
|
11482
12001
|
{
|
|
11483
12002
|
editor,
|
|
@@ -11495,26 +12014,26 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11495
12014
|
var Toolbar_default = Toolbar;
|
|
11496
12015
|
|
|
11497
12016
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
11498
|
-
var
|
|
11499
|
-
var
|
|
12017
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
12018
|
+
var import_react_dom15 = require("react-dom");
|
|
11500
12019
|
var ALIGNMENTS = [
|
|
11501
12020
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11502
12021
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
11503
12022
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
11504
12023
|
];
|
|
11505
12024
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
11506
|
-
const [activeTab, setActiveTab] = (0,
|
|
11507
|
-
const [src, setSrc] = (0,
|
|
11508
|
-
const [title, setTitle] = (0,
|
|
11509
|
-
const [alt, setAlt] = (0,
|
|
11510
|
-
const [link, setLink] = (0,
|
|
11511
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
11512
|
-
const [width, setWidth] = (0,
|
|
11513
|
-
const [height, setHeight] = (0,
|
|
11514
|
-
const [lockRatio, setLockRatio] = (0,
|
|
11515
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
11516
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
11517
|
-
(0,
|
|
12025
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("image");
|
|
12026
|
+
const [src, setSrc] = (0, import_react57.useState)(node?.attrs?.src || "");
|
|
12027
|
+
const [title, setTitle] = (0, import_react57.useState)(node?.attrs?.title || "");
|
|
12028
|
+
const [alt, setAlt] = (0, import_react57.useState)(node?.attrs?.alt || "");
|
|
12029
|
+
const [link, setLink] = (0, import_react57.useState)("");
|
|
12030
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react57.useState)(false);
|
|
12031
|
+
const [width, setWidth] = (0, import_react57.useState)("");
|
|
12032
|
+
const [height, setHeight] = (0, import_react57.useState)("");
|
|
12033
|
+
const [lockRatio, setLockRatio] = (0, import_react57.useState)(true);
|
|
12034
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react57.useState)(0);
|
|
12035
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react57.useState)(0);
|
|
12036
|
+
(0, import_react57.useEffect)(() => {
|
|
11518
12037
|
if (src) {
|
|
11519
12038
|
const img = new window.Image();
|
|
11520
12039
|
img.onload = () => {
|
|
@@ -11553,7 +12072,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11553
12072
|
editor.chain().focus().deleteSelection().run();
|
|
11554
12073
|
onClose();
|
|
11555
12074
|
};
|
|
11556
|
-
return /* @__PURE__ */
|
|
12075
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react57.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11557
12076
|
"input",
|
|
11558
12077
|
{
|
|
11559
12078
|
type: "number",
|
|
@@ -11561,14 +12080,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11561
12080
|
value: width,
|
|
11562
12081
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11563
12082
|
}
|
|
11564
|
-
), /* @__PURE__ */
|
|
12083
|
+
), /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11565
12084
|
"button",
|
|
11566
12085
|
{
|
|
11567
12086
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11568
12087
|
onClick: () => setLockRatio(!lockRatio)
|
|
11569
12088
|
},
|
|
11570
12089
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11571
|
-
)), /* @__PURE__ */
|
|
12090
|
+
)), /* @__PURE__ */ import_react57.default.createElement(
|
|
11572
12091
|
"input",
|
|
11573
12092
|
{
|
|
11574
12093
|
type: "number",
|
|
@@ -11576,21 +12095,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11576
12095
|
value: height,
|
|
11577
12096
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11578
12097
|
}
|
|
11579
|
-
))), /* @__PURE__ */
|
|
12098
|
+
))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11580
12099
|
"button",
|
|
11581
12100
|
{
|
|
11582
12101
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
11583
12102
|
onClick: () => setActiveTab("image")
|
|
11584
12103
|
},
|
|
11585
12104
|
"Image"
|
|
11586
|
-
), /* @__PURE__ */
|
|
12105
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11587
12106
|
"button",
|
|
11588
12107
|
{
|
|
11589
12108
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
11590
12109
|
onClick: () => setActiveTab("advanced")
|
|
11591
12110
|
},
|
|
11592
12111
|
"Advanced"
|
|
11593
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12112
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11594
12113
|
"input",
|
|
11595
12114
|
{
|
|
11596
12115
|
type: "text",
|
|
@@ -11598,7 +12117,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11598
12117
|
value: src,
|
|
11599
12118
|
onChange: (e) => setSrc(e.target.value)
|
|
11600
12119
|
}
|
|
11601
|
-
), /* @__PURE__ */
|
|
12120
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11602
12121
|
"input",
|
|
11603
12122
|
{
|
|
11604
12123
|
type: "text",
|
|
@@ -11606,7 +12125,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11606
12125
|
value: title,
|
|
11607
12126
|
onChange: (e) => setTitle(e.target.value)
|
|
11608
12127
|
}
|
|
11609
|
-
), /* @__PURE__ */
|
|
12128
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11610
12129
|
"input",
|
|
11611
12130
|
{
|
|
11612
12131
|
type: "text",
|
|
@@ -11614,7 +12133,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11614
12133
|
value: alt,
|
|
11615
12134
|
onChange: (e) => setAlt(e.target.value)
|
|
11616
12135
|
}
|
|
11617
|
-
), /* @__PURE__ */
|
|
12136
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11618
12137
|
"input",
|
|
11619
12138
|
{
|
|
11620
12139
|
type: "text",
|
|
@@ -11622,23 +12141,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11622
12141
|
value: link,
|
|
11623
12142
|
onChange: (e) => setLink(e.target.value)
|
|
11624
12143
|
}
|
|
11625
|
-
), /* @__PURE__ */
|
|
12144
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11626
12145
|
"input",
|
|
11627
12146
|
{
|
|
11628
12147
|
type: "checkbox",
|
|
11629
12148
|
checked: openInNewTab,
|
|
11630
12149
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
11631
12150
|
}
|
|
11632
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12151
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
11633
12152
|
};
|
|
11634
12153
|
var ImageToolbar = ({ editor }) => {
|
|
11635
|
-
const [showModal, setShowModal] = (0,
|
|
11636
|
-
const [showAlign, setShowAlign] = (0,
|
|
11637
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
11638
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
11639
|
-
const [pos, setPos] = (0,
|
|
11640
|
-
const toolbarRef = (0,
|
|
11641
|
-
(0,
|
|
12154
|
+
const [showModal, setShowModal] = (0, import_react57.useState)(false);
|
|
12155
|
+
const [showAlign, setShowAlign] = (0, import_react57.useState)(false);
|
|
12156
|
+
const [showVAlign, setShowVAlign] = (0, import_react57.useState)(false);
|
|
12157
|
+
const [copyStatus, setCopyStatus] = (0, import_react57.useState)("");
|
|
12158
|
+
const [pos, setPos] = (0, import_react57.useState)(null);
|
|
12159
|
+
const toolbarRef = (0, import_react57.useRef)(null);
|
|
12160
|
+
(0, import_react57.useEffect)(() => {
|
|
11642
12161
|
if (!editor) return;
|
|
11643
12162
|
const update = () => {
|
|
11644
12163
|
const { selection } = editor.state;
|
|
@@ -11667,8 +12186,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11667
12186
|
}, [editor]);
|
|
11668
12187
|
const node = editor?.state.selection.node;
|
|
11669
12188
|
const isImage = node && node.type.name === "image";
|
|
11670
|
-
if (!editor || !isImage || !pos) return showModal ? (0,
|
|
11671
|
-
/* @__PURE__ */
|
|
12189
|
+
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12190
|
+
/* @__PURE__ */ import_react57.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
11672
12191
|
document.body
|
|
11673
12192
|
) : null;
|
|
11674
12193
|
const handleDelete = () => {
|
|
@@ -11744,8 +12263,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11744
12263
|
);
|
|
11745
12264
|
setShowVAlign(false);
|
|
11746
12265
|
};
|
|
11747
|
-
return (0,
|
|
11748
|
-
/* @__PURE__ */
|
|
12266
|
+
return (0, import_react_dom15.createPortal)(
|
|
12267
|
+
/* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
|
|
11749
12268
|
"div",
|
|
11750
12269
|
{
|
|
11751
12270
|
className: "image-toolbar",
|
|
@@ -11753,14 +12272,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11753
12272
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11754
12273
|
onMouseDown: (e) => e.preventDefault()
|
|
11755
12274
|
},
|
|
11756
|
-
/* @__PURE__ */
|
|
11757
|
-
/* @__PURE__ */
|
|
11758
|
-
/* @__PURE__ */
|
|
11759
|
-
/* @__PURE__ */
|
|
12275
|
+
/* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12276
|
+
/* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12277
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react57.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12278
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11760
12279
|
setShowAlign(!showAlign);
|
|
11761
12280
|
setShowVAlign(false);
|
|
11762
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
11763
|
-
), showModal && /* @__PURE__ */
|
|
12281
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react57.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12282
|
+
), showModal && /* @__PURE__ */ import_react57.default.createElement(
|
|
11764
12283
|
ImagePropertiesModal,
|
|
11765
12284
|
{
|
|
11766
12285
|
editor,
|
|
@@ -11774,8 +12293,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11774
12293
|
var ImageToolbar_default = ImageToolbar;
|
|
11775
12294
|
|
|
11776
12295
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
11777
|
-
var
|
|
11778
|
-
var
|
|
12296
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
12297
|
+
var import_react_dom16 = require("react-dom");
|
|
11779
12298
|
var ALIGNMENTS2 = [
|
|
11780
12299
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11781
12300
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
@@ -11783,10 +12302,10 @@ var ALIGNMENTS2 = [
|
|
|
11783
12302
|
];
|
|
11784
12303
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
11785
12304
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
11786
|
-
const [src, setSrc] = (0,
|
|
11787
|
-
const [width, setWidth] = (0,
|
|
11788
|
-
const [height, setHeight] = (0,
|
|
11789
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12305
|
+
const [src, setSrc] = (0, import_react58.useState)(node?.attrs?.src || "");
|
|
12306
|
+
const [width, setWidth] = (0, import_react58.useState)(String(node?.attrs?.width || 640));
|
|
12307
|
+
const [height, setHeight] = (0, import_react58.useState)(String(node?.attrs?.height || 360));
|
|
12308
|
+
const [lockRatio, setLockRatio] = (0, import_react58.useState)(true);
|
|
11790
12309
|
const handleWidthChange = (val) => {
|
|
11791
12310
|
setWidth(val);
|
|
11792
12311
|
if (lockRatio) {
|
|
@@ -11819,7 +12338,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11819
12338
|
onClose();
|
|
11820
12339
|
};
|
|
11821
12340
|
const isYoutube = nodeType === "youtube";
|
|
11822
|
-
return /* @__PURE__ */
|
|
12341
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react58.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react58.default.createElement(
|
|
11823
12342
|
"iframe",
|
|
11824
12343
|
{
|
|
11825
12344
|
src,
|
|
@@ -11827,14 +12346,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11827
12346
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
11828
12347
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
11829
12348
|
}
|
|
11830
|
-
) : /* @__PURE__ */
|
|
12349
|
+
) : /* @__PURE__ */ import_react58.default.createElement(
|
|
11831
12350
|
"video",
|
|
11832
12351
|
{
|
|
11833
12352
|
src,
|
|
11834
12353
|
controls: true,
|
|
11835
12354
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
11836
12355
|
}
|
|
11837
|
-
)), /* @__PURE__ */
|
|
12356
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11838
12357
|
"input",
|
|
11839
12358
|
{
|
|
11840
12359
|
type: "number",
|
|
@@ -11842,14 +12361,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11842
12361
|
value: width,
|
|
11843
12362
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11844
12363
|
}
|
|
11845
|
-
), /* @__PURE__ */
|
|
12364
|
+
), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11846
12365
|
"button",
|
|
11847
12366
|
{
|
|
11848
12367
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11849
12368
|
onClick: () => setLockRatio(!lockRatio)
|
|
11850
12369
|
},
|
|
11851
12370
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11852
|
-
)), /* @__PURE__ */
|
|
12371
|
+
)), /* @__PURE__ */ import_react58.default.createElement(
|
|
11853
12372
|
"input",
|
|
11854
12373
|
{
|
|
11855
12374
|
type: "number",
|
|
@@ -11857,7 +12376,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11857
12376
|
value: height,
|
|
11858
12377
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11859
12378
|
}
|
|
11860
|
-
))), /* @__PURE__ */
|
|
12379
|
+
))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11861
12380
|
"input",
|
|
11862
12381
|
{
|
|
11863
12382
|
type: "text",
|
|
@@ -11865,7 +12384,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11865
12384
|
value: src,
|
|
11866
12385
|
onChange: (e) => setSrc(e.target.value)
|
|
11867
12386
|
}
|
|
11868
|
-
), /* @__PURE__ */
|
|
12387
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11869
12388
|
"input",
|
|
11870
12389
|
{
|
|
11871
12390
|
type: "number",
|
|
@@ -11873,7 +12392,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11873
12392
|
value: width,
|
|
11874
12393
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11875
12394
|
}
|
|
11876
|
-
), /* @__PURE__ */
|
|
12395
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11877
12396
|
"input",
|
|
11878
12397
|
{
|
|
11879
12398
|
type: "number",
|
|
@@ -11881,16 +12400,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11881
12400
|
value: height,
|
|
11882
12401
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11883
12402
|
}
|
|
11884
|
-
)))), /* @__PURE__ */
|
|
12403
|
+
)))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
11885
12404
|
};
|
|
11886
12405
|
var VideoToolbar = ({ editor }) => {
|
|
11887
|
-
const [showModal, setShowModal] = (0,
|
|
11888
|
-
const [showSize, setShowSize] = (0,
|
|
11889
|
-
const [showAlign, setShowAlign] = (0,
|
|
11890
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
11891
|
-
const [pos, setPos] = (0,
|
|
11892
|
-
const toolbarRef = (0,
|
|
11893
|
-
(0,
|
|
12406
|
+
const [showModal, setShowModal] = (0, import_react58.useState)(false);
|
|
12407
|
+
const [showSize, setShowSize] = (0, import_react58.useState)(false);
|
|
12408
|
+
const [showAlign, setShowAlign] = (0, import_react58.useState)(false);
|
|
12409
|
+
const [copyStatus, setCopyStatus] = (0, import_react58.useState)("");
|
|
12410
|
+
const [pos, setPos] = (0, import_react58.useState)(null);
|
|
12411
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
12412
|
+
(0, import_react58.useEffect)(() => {
|
|
11894
12413
|
if (!editor) return;
|
|
11895
12414
|
const update = () => {
|
|
11896
12415
|
const { selection } = editor.state;
|
|
@@ -11920,8 +12439,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11920
12439
|
const node = editor?.state.selection.node;
|
|
11921
12440
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
11922
12441
|
const nodeType = node?.type.name;
|
|
11923
|
-
if (!editor || !isVideo || !pos) return showModal ? (0,
|
|
11924
|
-
/* @__PURE__ */
|
|
12442
|
+
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12443
|
+
/* @__PURE__ */ import_react58.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
11925
12444
|
document.body
|
|
11926
12445
|
) : null;
|
|
11927
12446
|
const handleDelete = () => {
|
|
@@ -11967,8 +12486,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11967
12486
|
})
|
|
11968
12487
|
);
|
|
11969
12488
|
};
|
|
11970
|
-
return (0,
|
|
11971
|
-
/* @__PURE__ */
|
|
12489
|
+
return (0, import_react_dom16.createPortal)(
|
|
12490
|
+
/* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11972
12491
|
"div",
|
|
11973
12492
|
{
|
|
11974
12493
|
className: "image-toolbar",
|
|
@@ -11976,30 +12495,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11976
12495
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11977
12496
|
onMouseDown: (e) => e.preventDefault()
|
|
11978
12497
|
},
|
|
11979
|
-
/* @__PURE__ */
|
|
11980
|
-
/* @__PURE__ */
|
|
11981
|
-
/* @__PURE__ */
|
|
11982
|
-
/* @__PURE__ */
|
|
12498
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12499
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12500
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12501
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11983
12502
|
setShowSize(!showSize);
|
|
11984
12503
|
setShowAlign(false);
|
|
11985
|
-
} }, /* @__PURE__ */
|
|
12504
|
+
} }, /* @__PURE__ */ import_react58.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11986
12505
|
handleResize("small");
|
|
11987
12506
|
setShowSize(false);
|
|
11988
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12507
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11989
12508
|
handleResize("medium");
|
|
11990
12509
|
setShowSize(false);
|
|
11991
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12510
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11992
12511
|
handleResize("large");
|
|
11993
12512
|
setShowSize(false);
|
|
11994
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12513
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11995
12514
|
handleResize("full");
|
|
11996
12515
|
setShowSize(false);
|
|
11997
12516
|
} }, "Full (854x480)"))),
|
|
11998
|
-
/* @__PURE__ */
|
|
12517
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11999
12518
|
setShowAlign(!showAlign);
|
|
12000
12519
|
setShowSize(false);
|
|
12001
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12002
|
-
), showModal && /* @__PURE__ */
|
|
12520
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react58.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12521
|
+
), showModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
12003
12522
|
VideoPropertiesModal,
|
|
12004
12523
|
{
|
|
12005
12524
|
editor,
|
|
@@ -12014,22 +12533,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12014
12533
|
var VideoToolbar_default = VideoToolbar;
|
|
12015
12534
|
|
|
12016
12535
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12017
|
-
var
|
|
12018
|
-
var
|
|
12019
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12020
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12021
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12022
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12023
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12024
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12025
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12026
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12027
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12028
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12536
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12537
|
+
var import_react_dom17 = require("react-dom");
|
|
12538
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12539
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12540
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12541
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12542
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12543
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12544
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12545
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12546
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12547
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react59.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12029
12548
|
var TableToolbar = ({ editor }) => {
|
|
12030
|
-
const [pos, setPos] = (0,
|
|
12031
|
-
const toolbarRef = (0,
|
|
12032
|
-
(0,
|
|
12549
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12550
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12551
|
+
(0, import_react59.useEffect)(() => {
|
|
12033
12552
|
if (!editor) return;
|
|
12034
12553
|
const update = () => {
|
|
12035
12554
|
if (!editor.isActive("table")) {
|
|
@@ -12072,8 +12591,8 @@ var TableToolbar = ({ editor }) => {
|
|
|
12072
12591
|
const canMerge = editor.can().mergeCells();
|
|
12073
12592
|
const canSplit = editor.can().splitCell();
|
|
12074
12593
|
const prevent = (e) => e.preventDefault();
|
|
12075
|
-
return (0,
|
|
12076
|
-
/* @__PURE__ */
|
|
12594
|
+
return (0, import_react_dom17.createPortal)(
|
|
12595
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
12077
12596
|
"div",
|
|
12078
12597
|
{
|
|
12079
12598
|
ref: toolbarRef,
|
|
@@ -12081,19 +12600,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12081
12600
|
style: { top: pos.top, left: pos.left },
|
|
12082
12601
|
onMouseDown: prevent
|
|
12083
12602
|
},
|
|
12084
|
-
/* @__PURE__ */
|
|
12085
|
-
/* @__PURE__ */
|
|
12086
|
-
/* @__PURE__ */
|
|
12087
|
-
/* @__PURE__ */
|
|
12088
|
-
/* @__PURE__ */
|
|
12089
|
-
/* @__PURE__ */
|
|
12090
|
-
/* @__PURE__ */
|
|
12091
|
-
/* @__PURE__ */
|
|
12092
|
-
/* @__PURE__ */
|
|
12093
|
-
/* @__PURE__ */
|
|
12094
|
-
/* @__PURE__ */
|
|
12095
|
-
/* @__PURE__ */
|
|
12096
|
-
/* @__PURE__ */
|
|
12603
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddRowBefore, null))),
|
|
12604
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddRowAfter, null))),
|
|
12605
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteRow, null))),
|
|
12606
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12607
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddColBefore, null))),
|
|
12608
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddColAfter, null))),
|
|
12609
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteCol, null))),
|
|
12610
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12611
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react59.default.createElement(IconMergeCells, null))),
|
|
12612
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react59.default.createElement(IconSplitCell, null))),
|
|
12613
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12614
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react59.default.createElement(IconToggleHeader, null))),
|
|
12615
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteTable, null)))
|
|
12097
12616
|
),
|
|
12098
12617
|
document.body
|
|
12099
12618
|
);
|
|
@@ -12259,7 +12778,7 @@ var RufousTextEditor = ({
|
|
|
12259
12778
|
sx
|
|
12260
12779
|
}) => {
|
|
12261
12780
|
const sxClass = useSx(sx);
|
|
12262
|
-
const toolbarButtons = (0,
|
|
12781
|
+
const toolbarButtons = (0, import_react60.useMemo)(() => {
|
|
12263
12782
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12264
12783
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12265
12784
|
if (hideButtons) {
|
|
@@ -12267,17 +12786,17 @@ var RufousTextEditor = ({
|
|
|
12267
12786
|
}
|
|
12268
12787
|
return visible;
|
|
12269
12788
|
}, [buttons, variant, hideButtons]);
|
|
12270
|
-
const mentionSuggestion = (0,
|
|
12271
|
-
const onChangeRef = (0,
|
|
12272
|
-
const onBlurRef = (0,
|
|
12273
|
-
(0,
|
|
12789
|
+
const mentionSuggestion = (0, import_react60.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
12790
|
+
const onChangeRef = (0, import_react60.useRef)(onChange);
|
|
12791
|
+
const onBlurRef = (0, import_react60.useRef)(onBlur);
|
|
12792
|
+
(0, import_react60.useEffect)(() => {
|
|
12274
12793
|
onChangeRef.current = onChange;
|
|
12275
12794
|
}, [onChange]);
|
|
12276
|
-
(0,
|
|
12795
|
+
(0, import_react60.useEffect)(() => {
|
|
12277
12796
|
onBlurRef.current = onBlur;
|
|
12278
12797
|
}, [onBlur]);
|
|
12279
12798
|
const isEditable = editable && !disabled;
|
|
12280
|
-
const editor = (0,
|
|
12799
|
+
const editor = (0, import_react61.useEditor)({
|
|
12281
12800
|
editable: isEditable,
|
|
12282
12801
|
extensions: [
|
|
12283
12802
|
import_starter_kit.default,
|
|
@@ -12374,8 +12893,8 @@ var RufousTextEditor = ({
|
|
|
12374
12893
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12375
12894
|
}
|
|
12376
12895
|
});
|
|
12377
|
-
const wrapperRef = (0,
|
|
12378
|
-
(0,
|
|
12896
|
+
const wrapperRef = (0, import_react60.useRef)(null);
|
|
12897
|
+
(0, import_react60.useEffect)(() => {
|
|
12379
12898
|
if (!editor) return;
|
|
12380
12899
|
let blurTimer = null;
|
|
12381
12900
|
const handler = ({ event }) => {
|
|
@@ -12393,15 +12912,15 @@ var RufousTextEditor = ({
|
|
|
12393
12912
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12394
12913
|
};
|
|
12395
12914
|
}, [editor]);
|
|
12396
|
-
const setLinkRef = (0,
|
|
12397
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
12398
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
12399
|
-
const [linkText, setLinkText] = (0,
|
|
12400
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
12401
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
12402
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
12403
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
12404
|
-
const setLink = (0,
|
|
12915
|
+
const setLinkRef = (0, import_react60.useRef)(null);
|
|
12916
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react60.useState)(false);
|
|
12917
|
+
const [linkUrl, setLinkUrl] = (0, import_react60.useState)("");
|
|
12918
|
+
const [linkText, setLinkText] = (0, import_react60.useState)("");
|
|
12919
|
+
const [linkClassName, setLinkClassName] = (0, import_react60.useState)("");
|
|
12920
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react60.useState)(true);
|
|
12921
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react60.useState)(true);
|
|
12922
|
+
const [linkSelection, setLinkSelection] = (0, import_react60.useState)(null);
|
|
12923
|
+
const setLink = (0, import_react60.useCallback)(() => {
|
|
12405
12924
|
if (!editor) return;
|
|
12406
12925
|
const attrs = editor.getAttributes("link");
|
|
12407
12926
|
const previousUrl = attrs.href || "";
|
|
@@ -12438,10 +12957,10 @@ var RufousTextEditor = ({
|
|
|
12438
12957
|
setLinkSelection({ from, to });
|
|
12439
12958
|
setLinkModalOpen(true);
|
|
12440
12959
|
}, [editor]);
|
|
12441
|
-
(0,
|
|
12960
|
+
(0, import_react60.useEffect)(() => {
|
|
12442
12961
|
setLinkRef.current = setLink;
|
|
12443
12962
|
}, [setLink]);
|
|
12444
|
-
(0,
|
|
12963
|
+
(0, import_react60.useEffect)(() => {
|
|
12445
12964
|
if (!editor?.view) return;
|
|
12446
12965
|
const handleKeyDown = (event) => {
|
|
12447
12966
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -12473,7 +12992,7 @@ var RufousTextEditor = ({
|
|
|
12473
12992
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12474
12993
|
};
|
|
12475
12994
|
}, [editor]);
|
|
12476
|
-
const handleLinkSubmit = (0,
|
|
12995
|
+
const handleLinkSubmit = (0, import_react60.useCallback)(() => {
|
|
12477
12996
|
if (!editor || !linkSelection) return;
|
|
12478
12997
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12479
12998
|
if (linkUrl === "") {
|
|
@@ -12509,7 +13028,7 @@ var RufousTextEditor = ({
|
|
|
12509
13028
|
setLinkClassName("");
|
|
12510
13029
|
setLinkSelection(null);
|
|
12511
13030
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
12512
|
-
const handleLinkRemove = (0,
|
|
13031
|
+
const handleLinkRemove = (0, import_react60.useCallback)(() => {
|
|
12513
13032
|
if (!editor || !linkSelection) return;
|
|
12514
13033
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
12515
13034
|
setLinkModalOpen(false);
|
|
@@ -12518,7 +13037,7 @@ var RufousTextEditor = ({
|
|
|
12518
13037
|
setLinkClassName("");
|
|
12519
13038
|
setLinkSelection(null);
|
|
12520
13039
|
}, [editor, linkSelection]);
|
|
12521
|
-
const handleLinkCancel = (0,
|
|
13040
|
+
const handleLinkCancel = (0, import_react60.useCallback)(() => {
|
|
12522
13041
|
setLinkModalOpen(false);
|
|
12523
13042
|
setLinkUrl("");
|
|
12524
13043
|
setLinkText("");
|
|
@@ -12526,21 +13045,21 @@ var RufousTextEditor = ({
|
|
|
12526
13045
|
setLinkSelection(null);
|
|
12527
13046
|
editor?.chain().focus().run();
|
|
12528
13047
|
}, [editor]);
|
|
12529
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
12530
|
-
const handleSave = (0,
|
|
13048
|
+
const [saveStatus, setSaveStatus] = (0, import_react60.useState)("");
|
|
13049
|
+
const handleSave = (0, import_react60.useCallback)(() => {
|
|
12531
13050
|
if (!editor || !onSaveProp) return;
|
|
12532
13051
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
12533
13052
|
setSaveStatus("Saved!");
|
|
12534
13053
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
12535
13054
|
}, [editor, onSaveProp]);
|
|
12536
|
-
const handleExport = (0,
|
|
13055
|
+
const handleExport = (0, import_react60.useCallback)(() => {
|
|
12537
13056
|
if (!editor || !onExportProp) return;
|
|
12538
13057
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
12539
13058
|
}, [editor, onExportProp]);
|
|
12540
|
-
const providerValue = (0,
|
|
12541
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
12542
|
-
const toggleFullscreen = (0,
|
|
12543
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13059
|
+
const providerValue = (0, import_react60.useMemo)(() => ({ editor }), [editor]);
|
|
13060
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react60.useState)(false);
|
|
13061
|
+
const toggleFullscreen = (0, import_react60.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13062
|
+
const wrapperJsx = /* @__PURE__ */ import_react60.default.createElement(
|
|
12544
13063
|
"div",
|
|
12545
13064
|
{
|
|
12546
13065
|
ref: wrapperRef,
|
|
@@ -12551,7 +13070,7 @@ var RufousTextEditor = ({
|
|
|
12551
13070
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
12552
13071
|
}
|
|
12553
13072
|
},
|
|
12554
|
-
/* @__PURE__ */
|
|
13073
|
+
/* @__PURE__ */ import_react60.default.createElement(import_react61.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12555
13074
|
Toolbar_default,
|
|
12556
13075
|
{
|
|
12557
13076
|
editor,
|
|
@@ -12566,8 +13085,8 @@ var RufousTextEditor = ({
|
|
|
12566
13085
|
isFullscreen,
|
|
12567
13086
|
onToggleFullscreen: toggleFullscreen
|
|
12568
13087
|
}
|
|
12569
|
-
), /* @__PURE__ */
|
|
12570
|
-
|
|
13088
|
+
), /* @__PURE__ */ import_react60.default.createElement(import_react61.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react60.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react60.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react60.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react60.default.createElement(
|
|
13089
|
+
import_react61.BubbleMenu,
|
|
12571
13090
|
{
|
|
12572
13091
|
editor,
|
|
12573
13092
|
className: "bubble-menu",
|
|
@@ -12584,31 +13103,31 @@ var RufousTextEditor = ({
|
|
|
12584
13103
|
}
|
|
12585
13104
|
}
|
|
12586
13105
|
},
|
|
12587
|
-
/* @__PURE__ */
|
|
13106
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12588
13107
|
"button",
|
|
12589
13108
|
{
|
|
12590
13109
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
12591
13110
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
12592
13111
|
},
|
|
12593
|
-
/* @__PURE__ */
|
|
13112
|
+
/* @__PURE__ */ import_react60.default.createElement("strong", null, "B")
|
|
12594
13113
|
),
|
|
12595
|
-
/* @__PURE__ */
|
|
13114
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12596
13115
|
"button",
|
|
12597
13116
|
{
|
|
12598
13117
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
12599
13118
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
12600
13119
|
},
|
|
12601
|
-
/* @__PURE__ */
|
|
13120
|
+
/* @__PURE__ */ import_react60.default.createElement("em", null, "I")
|
|
12602
13121
|
),
|
|
12603
|
-
/* @__PURE__ */
|
|
13122
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12604
13123
|
"button",
|
|
12605
13124
|
{
|
|
12606
13125
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
12607
13126
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
12608
13127
|
},
|
|
12609
|
-
/* @__PURE__ */
|
|
13128
|
+
/* @__PURE__ */ import_react60.default.createElement("s", null, "S")
|
|
12610
13129
|
),
|
|
12611
|
-
/* @__PURE__ */
|
|
13130
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12612
13131
|
"button",
|
|
12613
13132
|
{
|
|
12614
13133
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -12616,7 +13135,7 @@ var RufousTextEditor = ({
|
|
|
12616
13135
|
},
|
|
12617
13136
|
"</>"
|
|
12618
13137
|
),
|
|
12619
|
-
/* @__PURE__ */
|
|
13138
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12620
13139
|
"button",
|
|
12621
13140
|
{
|
|
12622
13141
|
onClick: setLink,
|
|
@@ -12624,8 +13143,8 @@ var RufousTextEditor = ({
|
|
|
12624
13143
|
},
|
|
12625
13144
|
"\u{1F517}"
|
|
12626
13145
|
)
|
|
12627
|
-
), editor && /* @__PURE__ */
|
|
12628
|
-
|
|
13146
|
+
), editor && /* @__PURE__ */ import_react60.default.createElement(
|
|
13147
|
+
import_react61.FloatingMenu,
|
|
12629
13148
|
{
|
|
12630
13149
|
editor,
|
|
12631
13150
|
className: "floating-menu",
|
|
@@ -12639,7 +13158,7 @@ var RufousTextEditor = ({
|
|
|
12639
13158
|
}
|
|
12640
13159
|
}
|
|
12641
13160
|
},
|
|
12642
|
-
/* @__PURE__ */
|
|
13161
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12643
13162
|
"button",
|
|
12644
13163
|
{
|
|
12645
13164
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -12647,7 +13166,7 @@ var RufousTextEditor = ({
|
|
|
12647
13166
|
},
|
|
12648
13167
|
"H1"
|
|
12649
13168
|
),
|
|
12650
|
-
/* @__PURE__ */
|
|
13169
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12651
13170
|
"button",
|
|
12652
13171
|
{
|
|
12653
13172
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -12655,7 +13174,7 @@ var RufousTextEditor = ({
|
|
|
12655
13174
|
},
|
|
12656
13175
|
"H2"
|
|
12657
13176
|
),
|
|
12658
|
-
/* @__PURE__ */
|
|
13177
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12659
13178
|
"button",
|
|
12660
13179
|
{
|
|
12661
13180
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -12663,7 +13182,7 @@ var RufousTextEditor = ({
|
|
|
12663
13182
|
},
|
|
12664
13183
|
"\u2022 List"
|
|
12665
13184
|
),
|
|
12666
|
-
/* @__PURE__ */
|
|
13185
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12667
13186
|
"button",
|
|
12668
13187
|
{
|
|
12669
13188
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -12671,7 +13190,7 @@ var RufousTextEditor = ({
|
|
|
12671
13190
|
},
|
|
12672
13191
|
"1. List"
|
|
12673
13192
|
),
|
|
12674
|
-
/* @__PURE__ */
|
|
13193
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12675
13194
|
"button",
|
|
12676
13195
|
{
|
|
12677
13196
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -12679,8 +13198,8 @@ var RufousTextEditor = ({
|
|
|
12679
13198
|
},
|
|
12680
13199
|
"\u201C Quote"
|
|
12681
13200
|
)
|
|
12682
|
-
), /* @__PURE__ */
|
|
12683
|
-
/* @__PURE__ */
|
|
13201
|
+
), /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react60.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react60.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react60.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react60.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13202
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12684
13203
|
"input",
|
|
12685
13204
|
{
|
|
12686
13205
|
type: "url",
|
|
@@ -12693,7 +13212,7 @@ var RufousTextEditor = ({
|
|
|
12693
13212
|
placeholder: "https://example.com",
|
|
12694
13213
|
autoFocus: true
|
|
12695
13214
|
}
|
|
12696
|
-
)), /* @__PURE__ */
|
|
13215
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12697
13216
|
"input",
|
|
12698
13217
|
{
|
|
12699
13218
|
type: "text",
|
|
@@ -12705,26 +13224,26 @@ var RufousTextEditor = ({
|
|
|
12705
13224
|
},
|
|
12706
13225
|
placeholder: "Link text"
|
|
12707
13226
|
}
|
|
12708
|
-
)), /* @__PURE__ */
|
|
13227
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12709
13228
|
"input",
|
|
12710
13229
|
{
|
|
12711
13230
|
type: "checkbox",
|
|
12712
13231
|
checked: linkNewTab,
|
|
12713
13232
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
12714
13233
|
}
|
|
12715
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13234
|
+
), "Open in new tab"), /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12716
13235
|
"input",
|
|
12717
13236
|
{
|
|
12718
13237
|
type: "checkbox",
|
|
12719
13238
|
checked: linkNoFollow,
|
|
12720
13239
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
12721
13240
|
}
|
|
12722
|
-
), "No follow"))), /* @__PURE__ */
|
|
13241
|
+
), "No follow"))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
12723
13242
|
document.body
|
|
12724
13243
|
)),
|
|
12725
|
-
helperText && /* @__PURE__ */
|
|
13244
|
+
helperText && /* @__PURE__ */ import_react60.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
12726
13245
|
);
|
|
12727
|
-
return isFullscreen ? (0,
|
|
13246
|
+
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
12728
13247
|
};
|
|
12729
13248
|
var RufousTextContent = ({ content, className, style, sx }) => {
|
|
12730
13249
|
const sxClass = useSx(sx);
|
|
@@ -12733,7 +13252,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12733
13252
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
12734
13253
|
} catch {
|
|
12735
13254
|
}
|
|
12736
|
-
return /* @__PURE__ */
|
|
13255
|
+
return /* @__PURE__ */ import_react60.default.createElement(
|
|
12737
13256
|
"div",
|
|
12738
13257
|
{
|
|
12739
13258
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -12872,6 +13391,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12872
13391
|
ToggleButtonGroup,
|
|
12873
13392
|
Tooltip,
|
|
12874
13393
|
TrashIcon,
|
|
13394
|
+
TreeSelect,
|
|
12875
13395
|
Typography,
|
|
12876
13396
|
UnArchivedIcon,
|
|
12877
13397
|
UnsubscribeIcon,
|