@rufous/ui 0.3.12 → 0.3.15
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 +1098 -479
- package/dist/main.css +356 -22
- package/dist/main.d.cts +108 -1
- package/dist/main.d.ts +108 -1
- package/dist/main.js +1174 -552
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -157,11 +157,13 @@ __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,
|
|
163
164
|
UploadIcon: () => uploadIcon_default,
|
|
164
165
|
UserAssignIcon: () => userAssignIcon_default,
|
|
166
|
+
UserSelectionField: () => UserSelectionField,
|
|
165
167
|
ViewIcon: () => viewIcon_default,
|
|
166
168
|
WorkItemIcon: () => workItemIcon_default,
|
|
167
169
|
Zoom: () => Zoom,
|
|
@@ -1562,6 +1564,43 @@ var BaseDialog = ({
|
|
|
1562
1564
|
const { themeConfig } = useRufousTheme();
|
|
1563
1565
|
const [isSubmitting, setIsSubmitting] = (0, import_react14.useState)(false);
|
|
1564
1566
|
const sxClass = useSx(sx);
|
|
1567
|
+
const containerRef = (0, import_react14.useRef)(null);
|
|
1568
|
+
const setContainerRef = (0, import_react14.useCallback)((el) => {
|
|
1569
|
+
containerRef.current = el;
|
|
1570
|
+
}, []);
|
|
1571
|
+
(0, import_react14.useEffect)(() => {
|
|
1572
|
+
if (!open) return;
|
|
1573
|
+
const FOCUSABLE = [
|
|
1574
|
+
"button:not([disabled])",
|
|
1575
|
+
"input:not([disabled])",
|
|
1576
|
+
"select:not([disabled])",
|
|
1577
|
+
"textarea:not([disabled])",
|
|
1578
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
1579
|
+
"[href]"
|
|
1580
|
+
].join(", ");
|
|
1581
|
+
const handleKeyDown = (e) => {
|
|
1582
|
+
if (e.key !== "Tab" || !containerRef.current) return;
|
|
1583
|
+
const els = Array.from(
|
|
1584
|
+
containerRef.current.querySelectorAll(FOCUSABLE)
|
|
1585
|
+
).filter((el) => !el.closest("[disabled]") && el.offsetParent !== null);
|
|
1586
|
+
if (!els.length) return;
|
|
1587
|
+
const first = els[0];
|
|
1588
|
+
const last = els[els.length - 1];
|
|
1589
|
+
if (e.shiftKey) {
|
|
1590
|
+
if (document.activeElement === first) {
|
|
1591
|
+
e.preventDefault();
|
|
1592
|
+
last.focus();
|
|
1593
|
+
}
|
|
1594
|
+
} else {
|
|
1595
|
+
if (document.activeElement === last) {
|
|
1596
|
+
e.preventDefault();
|
|
1597
|
+
first.focus();
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
};
|
|
1601
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1602
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1603
|
+
}, [open]);
|
|
1565
1604
|
const depth = (0, import_react14.useContext)(DialogDepthContext);
|
|
1566
1605
|
const overlayZ = 2e3 + depth * 200;
|
|
1567
1606
|
const portalZ = overlayZ + 100;
|
|
@@ -1636,6 +1675,7 @@ var BaseDialog = ({
|
|
|
1636
1675
|
const dialogContent = form ? /* @__PURE__ */ React65.createElement(
|
|
1637
1676
|
"form",
|
|
1638
1677
|
{
|
|
1678
|
+
ref: setContainerRef,
|
|
1639
1679
|
className: containerClass,
|
|
1640
1680
|
style: containerStyle,
|
|
1641
1681
|
onSubmit: (e) => {
|
|
@@ -1644,7 +1684,15 @@ var BaseDialog = ({
|
|
|
1644
1684
|
}
|
|
1645
1685
|
},
|
|
1646
1686
|
dialogInner
|
|
1647
|
-
) : /* @__PURE__ */ React65.createElement(
|
|
1687
|
+
) : /* @__PURE__ */ React65.createElement(
|
|
1688
|
+
"div",
|
|
1689
|
+
{
|
|
1690
|
+
ref: setContainerRef,
|
|
1691
|
+
className: containerClass,
|
|
1692
|
+
style: containerStyle
|
|
1693
|
+
},
|
|
1694
|
+
dialogInner
|
|
1695
|
+
);
|
|
1648
1696
|
const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
|
|
1649
1697
|
"div",
|
|
1650
1698
|
{
|
|
@@ -2212,10 +2260,10 @@ function defaultIsEqual(a, b) {
|
|
|
2212
2260
|
if (!aIsObj && bIsObj) return a === b.value;
|
|
2213
2261
|
return false;
|
|
2214
2262
|
}
|
|
2215
|
-
function defaultFilter(options, inputValue,
|
|
2263
|
+
function defaultFilter(options, inputValue, getLabel2) {
|
|
2216
2264
|
if (!inputValue) return options;
|
|
2217
2265
|
const q = inputValue.toLowerCase();
|
|
2218
|
-
return options.filter((o) =>
|
|
2266
|
+
return options.filter((o) => getLabel2(o).toLowerCase().includes(q));
|
|
2219
2267
|
}
|
|
2220
2268
|
function AutocompleteInner(props, _ref) {
|
|
2221
2269
|
const {
|
|
@@ -2367,11 +2415,19 @@ function AutocompleteInner(props, _ref) {
|
|
|
2367
2415
|
closePopup();
|
|
2368
2416
|
}
|
|
2369
2417
|
};
|
|
2418
|
+
const handleFocusOut = (e) => {
|
|
2419
|
+
const next = e.relatedTarget;
|
|
2420
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
2421
|
+
closePopup();
|
|
2422
|
+
}
|
|
2423
|
+
};
|
|
2370
2424
|
document.addEventListener("mousedown", handleOutside);
|
|
2425
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
2371
2426
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
2372
2427
|
window.addEventListener("resize", calcPopupStyle);
|
|
2373
2428
|
return () => {
|
|
2374
2429
|
document.removeEventListener("mousedown", handleOutside);
|
|
2430
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
2375
2431
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
2376
2432
|
window.removeEventListener("resize", calcPopupStyle);
|
|
2377
2433
|
};
|
|
@@ -2568,6 +2624,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2568
2624
|
e.preventDefault();
|
|
2569
2625
|
open ? closePopup() : openPopup();
|
|
2570
2626
|
},
|
|
2627
|
+
onClick: (e) => e.stopPropagation(),
|
|
2571
2628
|
tabIndex: -1,
|
|
2572
2629
|
"aria-label": open ? "Close" : "Open"
|
|
2573
2630
|
},
|
|
@@ -3482,8 +3539,18 @@ var DateField = ({
|
|
|
3482
3539
|
if (pickerRef.current?.contains(target)) return;
|
|
3483
3540
|
setOpen(false);
|
|
3484
3541
|
};
|
|
3542
|
+
const handleFocusOut = (e) => {
|
|
3543
|
+
const next = e.relatedTarget;
|
|
3544
|
+
if (!containerRef.current?.contains(next) && !pickerRef.current?.contains(next)) {
|
|
3545
|
+
setOpen(false);
|
|
3546
|
+
}
|
|
3547
|
+
};
|
|
3485
3548
|
document.addEventListener("mousedown", handler);
|
|
3486
|
-
|
|
3549
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
3550
|
+
return () => {
|
|
3551
|
+
document.removeEventListener("mousedown", handler);
|
|
3552
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
3553
|
+
};
|
|
3487
3554
|
}, [open]);
|
|
3488
3555
|
const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
|
|
3489
3556
|
setSelectedDate(d);
|
|
@@ -4536,6 +4603,37 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
|
4536
4603
|
// lib/DataGrid/DataGrid.tsx
|
|
4537
4604
|
var import_react23 = __toESM(require("react"), 1);
|
|
4538
4605
|
var import_lucide_react2 = require("lucide-react");
|
|
4606
|
+
function FilterSelect({
|
|
4607
|
+
value,
|
|
4608
|
+
onChange,
|
|
4609
|
+
options,
|
|
4610
|
+
className,
|
|
4611
|
+
placement = "bottom"
|
|
4612
|
+
}) {
|
|
4613
|
+
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
4614
|
+
const ref = (0, import_react23.useRef)(null);
|
|
4615
|
+
(0, import_react23.useEffect)(() => {
|
|
4616
|
+
const handler = (e) => {
|
|
4617
|
+
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
4618
|
+
};
|
|
4619
|
+
if (open) document.addEventListener("mousedown", handler);
|
|
4620
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
4621
|
+
}, [open]);
|
|
4622
|
+
const selected = options.find((o) => o.value === value);
|
|
4623
|
+
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(
|
|
4624
|
+
"button",
|
|
4625
|
+
{
|
|
4626
|
+
key: opt.value,
|
|
4627
|
+
type: "button",
|
|
4628
|
+
className: `dg-menu-item${opt.value === value ? " dg-menu-item--selected" : ""}`,
|
|
4629
|
+
onClick: () => {
|
|
4630
|
+
onChange(opt.value);
|
|
4631
|
+
setOpen(false);
|
|
4632
|
+
}
|
|
4633
|
+
},
|
|
4634
|
+
opt.label
|
|
4635
|
+
))));
|
|
4636
|
+
}
|
|
4539
4637
|
var getOperatorsForType = (type) => {
|
|
4540
4638
|
if (type === "date") return [
|
|
4541
4639
|
{ value: "is", label: "is" },
|
|
@@ -4953,7 +5051,17 @@ function DataGrid({
|
|
|
4953
5051
|
}
|
|
4954
5052
|
return offset2;
|
|
4955
5053
|
};
|
|
4956
|
-
const hasActiveFilters = advancedFilters.some((f) => f.value);
|
|
5054
|
+
const hasActiveFilters = advancedFilters.some((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5055
|
+
const closeFilterModal = () => {
|
|
5056
|
+
setAdvancedFilters((prev) => {
|
|
5057
|
+
const meaningful = prev.filter((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5058
|
+
if (meaningful.length > 0) return meaningful;
|
|
5059
|
+
const firstCol = resolvedColumns.find((c) => c.filterable !== false);
|
|
5060
|
+
if (!firstCol) return prev;
|
|
5061
|
+
return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
|
|
5062
|
+
});
|
|
5063
|
+
setShowAdvancedFilter(false);
|
|
5064
|
+
};
|
|
4957
5065
|
const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
|
|
4958
5066
|
const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
|
|
4959
5067
|
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 +5095,7 @@ function DataGrid({
|
|
|
4987
5095
|
const leftOffset = getLeftOffset(col, idx);
|
|
4988
5096
|
const rightOffset = getRightOffset(col, idx);
|
|
4989
5097
|
const isSorted = sortField === col.field;
|
|
5098
|
+
const isFiltered = advancedFilters.some((f) => f.column === colField && f.value);
|
|
4990
5099
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
4991
5100
|
"th",
|
|
4992
5101
|
{
|
|
@@ -5003,7 +5112,7 @@ function DataGrid({
|
|
|
5003
5112
|
col.headerName,
|
|
5004
5113
|
isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 12 }),
|
|
5005
5114
|
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(
|
|
5115
|
+
), /* @__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
5116
|
"button",
|
|
5008
5117
|
{
|
|
5009
5118
|
className: "dg-th-menu-btn",
|
|
@@ -5096,12 +5205,14 @@ function DataGrid({
|
|
|
5096
5205
|
action.icon
|
|
5097
5206
|
)))));
|
|
5098
5207
|
})()))))), 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
|
-
|
|
5208
|
+
FilterSelect,
|
|
5100
5209
|
{
|
|
5101
|
-
|
|
5102
|
-
|
|
5103
|
-
|
|
5104
|
-
|
|
5210
|
+
placement: "top",
|
|
5211
|
+
value: String(activePageSize),
|
|
5212
|
+
onChange: (val) => handlePageSizeChange(Number(val)),
|
|
5213
|
+
options: pageSizeOptions.map((o) => ({ value: String(o), label: String(o) })),
|
|
5214
|
+
className: "dg-fsel--sm dg-fsel--pagesize"
|
|
5215
|
+
}
|
|
5105
5216
|
)), /* @__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
5217
|
"div",
|
|
5107
5218
|
{
|
|
@@ -5121,6 +5232,16 @@ function DataGrid({
|
|
|
5121
5232
|
})(),
|
|
5122
5233
|
/* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" }),
|
|
5123
5234
|
activeMenuCol?.filterable !== false && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
|
|
5235
|
+
if (activeMenuCol) {
|
|
5236
|
+
const colField = String(activeMenuCol.field);
|
|
5237
|
+
setAdvancedFilters((prev) => {
|
|
5238
|
+
const hasValues = prev.some((f) => f.value);
|
|
5239
|
+
if (!hasValues) {
|
|
5240
|
+
return [{ column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5241
|
+
}
|
|
5242
|
+
return [...prev, { column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5243
|
+
});
|
|
5244
|
+
}
|
|
5124
5245
|
setShowAdvancedFilter(true);
|
|
5125
5246
|
setActiveMenu(null);
|
|
5126
5247
|
} }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 14 }), " Filter\u2026"),
|
|
@@ -5158,7 +5279,7 @@ function DataGrid({
|
|
|
5158
5279
|
}
|
|
5159
5280
|
});
|
|
5160
5281
|
setColumnOverrides(newOverrides);
|
|
5161
|
-
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-overlay", onClick:
|
|
5282
|
+
} }, "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
5283
|
"button",
|
|
5163
5284
|
{
|
|
5164
5285
|
className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
|
|
@@ -5173,48 +5294,45 @@ function DataGrid({
|
|
|
5173
5294
|
},
|
|
5174
5295
|
"OR"
|
|
5175
5296
|
)), /* @__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
|
-
|
|
5297
|
+
FilterSelect,
|
|
5177
5298
|
{
|
|
5178
|
-
className: "dg-filter-select",
|
|
5179
5299
|
value: f.column,
|
|
5180
|
-
onChange: (
|
|
5181
|
-
const newColKey = e.target.value;
|
|
5300
|
+
onChange: (newColKey) => {
|
|
5182
5301
|
const newCol = resolvedColumns.find((c) => String(c.key) === newColKey);
|
|
5183
5302
|
const defaultOp = getDefaultOperator(newCol?.type);
|
|
5184
5303
|
setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
|
|
5185
|
-
}
|
|
5186
|
-
|
|
5187
|
-
|
|
5304
|
+
},
|
|
5305
|
+
options: resolvedColumns.filter((c) => c.filterable !== false).map((c) => ({ value: String(c.key), label: c.header }))
|
|
5306
|
+
}
|
|
5188
5307
|
), (() => {
|
|
5189
5308
|
const col = resolvedColumns.find((c) => String(c.key) === f.column);
|
|
5190
5309
|
const operators = getOperatorsForType(col?.type);
|
|
5191
5310
|
const hideValue = f.operator === "is empty" || f.operator === "is not empty";
|
|
5192
5311
|
return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
|
|
5193
|
-
|
|
5312
|
+
FilterSelect,
|
|
5194
5313
|
{
|
|
5195
|
-
className: "dg-
|
|
5314
|
+
className: "dg-fsel--sm",
|
|
5196
5315
|
value: f.operator,
|
|
5197
|
-
onChange: (
|
|
5198
|
-
|
|
5199
|
-
|
|
5316
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: val, value: "" } : fi)),
|
|
5317
|
+
options: operators
|
|
5318
|
+
}
|
|
5200
5319
|
), !hideValue && col?.type === "date" && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ import_react23.default.createElement(
|
|
5201
5320
|
DateField,
|
|
5202
5321
|
{
|
|
5203
5322
|
value: f.value,
|
|
5204
5323
|
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5205
|
-
variant: "compact"
|
|
5324
|
+
variant: "compact",
|
|
5325
|
+
fullWidth: true
|
|
5206
5326
|
}
|
|
5207
5327
|
)), !hideValue && col?.type === "status" && (() => {
|
|
5208
|
-
const
|
|
5328
|
+
const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
|
|
5209
5329
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
5210
|
-
|
|
5330
|
+
FilterSelect,
|
|
5211
5331
|
{
|
|
5212
|
-
className: "dg-filter-select",
|
|
5213
5332
|
value: f.value,
|
|
5214
|
-
onChange: (
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
options.map((opt) => /* @__PURE__ */ import_react23.default.createElement("option", { key: opt, value: opt }, opt))
|
|
5333
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5334
|
+
options: [{ value: "", label: "Select\u2026" }, ...opts.map((o) => ({ value: o, label: o }))]
|
|
5335
|
+
}
|
|
5218
5336
|
);
|
|
5219
5337
|
})(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ import_react23.default.createElement(
|
|
5220
5338
|
"input",
|
|
@@ -5223,6 +5341,7 @@ function DataGrid({
|
|
|
5223
5341
|
className: "dg-filter-input",
|
|
5224
5342
|
placeholder: "Value\u2026",
|
|
5225
5343
|
value: f.value,
|
|
5344
|
+
autoFocus: idx === advancedFilters.length - 1,
|
|
5226
5345
|
onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
|
|
5227
5346
|
}
|
|
5228
5347
|
));
|
|
@@ -5252,7 +5371,7 @@ function DataGrid({
|
|
|
5252
5371
|
},
|
|
5253
5372
|
/* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Trash2, { size: 14 }),
|
|
5254
5373
|
" Reset"
|
|
5255
|
-
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick:
|
|
5374
|
+
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick: closeFilterModal }, "Apply")))));
|
|
5256
5375
|
}
|
|
5257
5376
|
|
|
5258
5377
|
// lib/Select/Select.tsx
|
|
@@ -5330,11 +5449,19 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5330
5449
|
closePopup();
|
|
5331
5450
|
}
|
|
5332
5451
|
};
|
|
5452
|
+
const handleFocusOut = (e) => {
|
|
5453
|
+
const next = e.relatedTarget;
|
|
5454
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
5455
|
+
closePopup();
|
|
5456
|
+
}
|
|
5457
|
+
};
|
|
5333
5458
|
document.addEventListener("mousedown", handleOutside);
|
|
5459
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
5334
5460
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
5335
5461
|
window.addEventListener("resize", calcPopupStyle);
|
|
5336
5462
|
return () => {
|
|
5337
5463
|
document.removeEventListener("mousedown", handleOutside);
|
|
5464
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
5338
5465
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
5339
5466
|
window.removeEventListener("resize", calcPopupStyle);
|
|
5340
5467
|
};
|
|
@@ -8871,10 +8998,500 @@ var PhoneField = (0, import_react48.forwardRef)(function PhoneField2(props, ref)
|
|
|
8871
8998
|
});
|
|
8872
8999
|
PhoneField.displayName = "PhoneField";
|
|
8873
9000
|
|
|
9001
|
+
// lib/TreeSelect/TreeSelect.tsx
|
|
9002
|
+
var import_react49 = __toESM(require("react"), 1);
|
|
9003
|
+
var import_react_dom11 = __toESM(require("react-dom"), 1);
|
|
9004
|
+
var import_lucide_react3 = require("lucide-react");
|
|
9005
|
+
function collectDescendants(node) {
|
|
9006
|
+
const ids = [String(node.id)];
|
|
9007
|
+
node.children?.forEach((c) => ids.push(...collectDescendants(c)));
|
|
9008
|
+
return ids;
|
|
9009
|
+
}
|
|
9010
|
+
function findNodeById(nodes, id) {
|
|
9011
|
+
for (const node of nodes) {
|
|
9012
|
+
if (String(node.id) === id) return node;
|
|
9013
|
+
const found = findNodeById(node.children ?? [], id);
|
|
9014
|
+
if (found) return found;
|
|
9015
|
+
}
|
|
9016
|
+
return null;
|
|
9017
|
+
}
|
|
9018
|
+
function getNodeState(node, selected) {
|
|
9019
|
+
if (selected.has(String(node.id))) return "checked";
|
|
9020
|
+
if (!node.children?.length) return "unchecked";
|
|
9021
|
+
const states = node.children.map((c) => getNodeState(c, selected));
|
|
9022
|
+
if (states.every((s2) => s2 === "checked")) return "checked";
|
|
9023
|
+
if (states.some((s2) => s2 !== "unchecked")) return "partial";
|
|
9024
|
+
return "unchecked";
|
|
9025
|
+
}
|
|
9026
|
+
function getTopLevelSelected(nodes, selected) {
|
|
9027
|
+
const result = [];
|
|
9028
|
+
for (const node of nodes) {
|
|
9029
|
+
const state = getNodeState(node, selected);
|
|
9030
|
+
if (state === "checked") {
|
|
9031
|
+
result.push(node);
|
|
9032
|
+
} else if (state === "partial") {
|
|
9033
|
+
result.push(...getTopLevelSelected(node.children ?? [], selected));
|
|
9034
|
+
}
|
|
9035
|
+
}
|
|
9036
|
+
return result;
|
|
9037
|
+
}
|
|
9038
|
+
function filterTree(nodes, query) {
|
|
9039
|
+
if (!query) return nodes;
|
|
9040
|
+
const q = query.toLowerCase();
|
|
9041
|
+
return nodes.reduce((acc, node) => {
|
|
9042
|
+
const filteredChildren = filterTree(node.children ?? [], q);
|
|
9043
|
+
if (node.label.toLowerCase().includes(q) || filteredChildren.length > 0) {
|
|
9044
|
+
acc.push({ ...node, children: filteredChildren });
|
|
9045
|
+
}
|
|
9046
|
+
return acc;
|
|
9047
|
+
}, []);
|
|
9048
|
+
}
|
|
9049
|
+
function recordToSet(record) {
|
|
9050
|
+
if (!record) return /* @__PURE__ */ new Set();
|
|
9051
|
+
return new Set(Object.keys(record).filter((k) => record[k]));
|
|
9052
|
+
}
|
|
9053
|
+
function setToRecord(set) {
|
|
9054
|
+
const r = {};
|
|
9055
|
+
set.forEach((id) => {
|
|
9056
|
+
r[id] = true;
|
|
9057
|
+
});
|
|
9058
|
+
return r;
|
|
9059
|
+
}
|
|
9060
|
+
function TreeNodeItem({
|
|
9061
|
+
node,
|
|
9062
|
+
depth,
|
|
9063
|
+
selected,
|
|
9064
|
+
expanded,
|
|
9065
|
+
selectionMode,
|
|
9066
|
+
onToggleExpand,
|
|
9067
|
+
onSelect,
|
|
9068
|
+
isFiltering
|
|
9069
|
+
}) {
|
|
9070
|
+
const nodeId = String(node.id);
|
|
9071
|
+
const hasChildren = !!node.children?.length;
|
|
9072
|
+
const isExpanded = isFiltering || expanded.has(nodeId);
|
|
9073
|
+
const state = getNodeState(node, selected);
|
|
9074
|
+
return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
|
|
9075
|
+
"div",
|
|
9076
|
+
{
|
|
9077
|
+
className: `rf-tsn__row${state !== "unchecked" ? " rf-tsn__row--active" : ""}`,
|
|
9078
|
+
style: { paddingLeft: 8 + depth * 20 },
|
|
9079
|
+
onClick: () => onSelect(node)
|
|
9080
|
+
},
|
|
9081
|
+
hasChildren ? /* @__PURE__ */ import_react49.default.createElement(
|
|
9082
|
+
"button",
|
|
9083
|
+
{
|
|
9084
|
+
type: "button",
|
|
9085
|
+
className: "rf-tsn__expand",
|
|
9086
|
+
onClick: (e) => {
|
|
9087
|
+
e.stopPropagation();
|
|
9088
|
+
onToggleExpand(nodeId);
|
|
9089
|
+
}
|
|
9090
|
+
},
|
|
9091
|
+
isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
|
|
9092
|
+
) : /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__expand-ph" }),
|
|
9093
|
+
selectionMode === "multiple" && /* @__PURE__ */ import_react49.default.createElement(
|
|
9094
|
+
"span",
|
|
9095
|
+
{
|
|
9096
|
+
className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
|
|
9097
|
+
},
|
|
9098
|
+
state === "checked" && /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 10, strokeWidth: 3 }),
|
|
9099
|
+
state === "partial" && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__cb-dash" })
|
|
9100
|
+
),
|
|
9101
|
+
selectionMode === "single" && /* @__PURE__ */ import_react49.default.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
|
|
9102
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label)
|
|
9103
|
+
), hasChildren && isExpanded && /* @__PURE__ */ import_react49.default.createElement("div", null, node.children.map((child) => /* @__PURE__ */ import_react49.default.createElement(
|
|
9104
|
+
TreeNodeItem,
|
|
9105
|
+
{
|
|
9106
|
+
key: child.id,
|
|
9107
|
+
node: child,
|
|
9108
|
+
depth: depth + 1,
|
|
9109
|
+
selected,
|
|
9110
|
+
expanded,
|
|
9111
|
+
selectionMode,
|
|
9112
|
+
onToggleExpand,
|
|
9113
|
+
onSelect,
|
|
9114
|
+
isFiltering
|
|
9115
|
+
}
|
|
9116
|
+
))));
|
|
9117
|
+
}
|
|
9118
|
+
function TreeSelect({
|
|
9119
|
+
options,
|
|
9120
|
+
value,
|
|
9121
|
+
onChange,
|
|
9122
|
+
onNodeSelect,
|
|
9123
|
+
onNodeUnselect,
|
|
9124
|
+
selectionMode = "single",
|
|
9125
|
+
placeholder = "Select",
|
|
9126
|
+
filter = false,
|
|
9127
|
+
filterInputAutoFocus = false,
|
|
9128
|
+
resetFilterOnHide = false,
|
|
9129
|
+
metaKeySelection: _metaKeySelection,
|
|
9130
|
+
disabled = false,
|
|
9131
|
+
label,
|
|
9132
|
+
variant = "outlined",
|
|
9133
|
+
size = "medium",
|
|
9134
|
+
error = false,
|
|
9135
|
+
helperText,
|
|
9136
|
+
fullWidth = false,
|
|
9137
|
+
clearable = true,
|
|
9138
|
+
required = false,
|
|
9139
|
+
style,
|
|
9140
|
+
className,
|
|
9141
|
+
sx
|
|
9142
|
+
}) {
|
|
9143
|
+
const sxClass = useSx(sx);
|
|
9144
|
+
const [open, setOpen] = (0, import_react49.useState)(false);
|
|
9145
|
+
const [focused, setFocused] = (0, import_react49.useState)(false);
|
|
9146
|
+
const [filterQuery, setFilterQuery] = (0, import_react49.useState)("");
|
|
9147
|
+
const [expandedKeys, setExpandedKeys] = (0, import_react49.useState)(/* @__PURE__ */ new Set());
|
|
9148
|
+
const [dropdownStyle, setDropdownStyle] = (0, import_react49.useState)({});
|
|
9149
|
+
const triggerRef = (0, import_react49.useRef)(null);
|
|
9150
|
+
const dropdownRef = (0, import_react49.useRef)(null);
|
|
9151
|
+
const filterInputRef = (0, import_react49.useRef)(null);
|
|
9152
|
+
const isMultiple = selectionMode === "multiple";
|
|
9153
|
+
const selectedSet = isMultiple ? recordToSet(value) : value != null ? /* @__PURE__ */ new Set([String(value)]) : /* @__PURE__ */ new Set();
|
|
9154
|
+
const computePosition3 = (0, import_react49.useCallback)(() => {
|
|
9155
|
+
if (!triggerRef.current) return;
|
|
9156
|
+
const rect = triggerRef.current.getBoundingClientRect();
|
|
9157
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
9158
|
+
const dropdownMaxH = 320;
|
|
9159
|
+
const above = spaceBelow < dropdownMaxH && rect.top > spaceBelow;
|
|
9160
|
+
setDropdownStyle({
|
|
9161
|
+
position: "fixed",
|
|
9162
|
+
left: rect.left,
|
|
9163
|
+
width: rect.width,
|
|
9164
|
+
...above ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
|
|
9165
|
+
});
|
|
9166
|
+
}, []);
|
|
9167
|
+
const openDropdown = () => {
|
|
9168
|
+
if (disabled) return;
|
|
9169
|
+
computePosition3();
|
|
9170
|
+
setOpen(true);
|
|
9171
|
+
};
|
|
9172
|
+
const closeDropdown = (0, import_react49.useCallback)(() => {
|
|
9173
|
+
setOpen(false);
|
|
9174
|
+
if (resetFilterOnHide) setFilterQuery("");
|
|
9175
|
+
}, [resetFilterOnHide]);
|
|
9176
|
+
const mouseActivatedRef = (0, import_react49.useRef)(false);
|
|
9177
|
+
const handleTriggerMouseDown = () => {
|
|
9178
|
+
mouseActivatedRef.current = true;
|
|
9179
|
+
};
|
|
9180
|
+
const handleTriggerFocus = () => {
|
|
9181
|
+
setFocused(true);
|
|
9182
|
+
if (!mouseActivatedRef.current) {
|
|
9183
|
+
openDropdown();
|
|
9184
|
+
}
|
|
9185
|
+
mouseActivatedRef.current = false;
|
|
9186
|
+
};
|
|
9187
|
+
const handleTriggerBlur = (e) => {
|
|
9188
|
+
const next = e.relatedTarget;
|
|
9189
|
+
if (next === null) return;
|
|
9190
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9191
|
+
setFocused(false);
|
|
9192
|
+
closeDropdown();
|
|
9193
|
+
}
|
|
9194
|
+
};
|
|
9195
|
+
const handleKeyDown = (e) => {
|
|
9196
|
+
if (disabled) return;
|
|
9197
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
9198
|
+
e.preventDefault();
|
|
9199
|
+
open ? closeDropdown() : openDropdown();
|
|
9200
|
+
} else if (e.key === "Escape") {
|
|
9201
|
+
closeDropdown();
|
|
9202
|
+
}
|
|
9203
|
+
};
|
|
9204
|
+
(0, import_react49.useEffect)(() => {
|
|
9205
|
+
if (open && filter && filterInputAutoFocus) {
|
|
9206
|
+
const t = setTimeout(() => filterInputRef.current?.focus(), 40);
|
|
9207
|
+
return () => clearTimeout(t);
|
|
9208
|
+
}
|
|
9209
|
+
}, [open, filter, filterInputAutoFocus]);
|
|
9210
|
+
(0, import_react49.useEffect)(() => {
|
|
9211
|
+
if (!open) return;
|
|
9212
|
+
const handleOutside = (e) => {
|
|
9213
|
+
if (dropdownRef.current?.contains(e.target) || triggerRef.current?.contains(e.target)) return;
|
|
9214
|
+
closeDropdown();
|
|
9215
|
+
setFocused(false);
|
|
9216
|
+
};
|
|
9217
|
+
const handleFocusOut = (e) => {
|
|
9218
|
+
const next = e.relatedTarget;
|
|
9219
|
+
if (next === null) return;
|
|
9220
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9221
|
+
closeDropdown();
|
|
9222
|
+
setFocused(false);
|
|
9223
|
+
}
|
|
9224
|
+
};
|
|
9225
|
+
document.addEventListener("mousedown", handleOutside);
|
|
9226
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
9227
|
+
return () => {
|
|
9228
|
+
document.removeEventListener("mousedown", handleOutside);
|
|
9229
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
9230
|
+
};
|
|
9231
|
+
}, [open, closeDropdown]);
|
|
9232
|
+
(0, import_react49.useEffect)(() => {
|
|
9233
|
+
if (!open) return;
|
|
9234
|
+
const h = () => computePosition3();
|
|
9235
|
+
window.addEventListener("scroll", h, true);
|
|
9236
|
+
window.addEventListener("resize", h);
|
|
9237
|
+
return () => {
|
|
9238
|
+
window.removeEventListener("scroll", h, true);
|
|
9239
|
+
window.removeEventListener("resize", h);
|
|
9240
|
+
};
|
|
9241
|
+
}, [open, computePosition3]);
|
|
9242
|
+
const handleSelect = (node) => {
|
|
9243
|
+
const nodeId = String(node.id);
|
|
9244
|
+
if (isMultiple) {
|
|
9245
|
+
const state = getNodeState(node, selectedSet);
|
|
9246
|
+
const descendants = collectDescendants(node);
|
|
9247
|
+
const newSet = new Set(selectedSet);
|
|
9248
|
+
if (state === "checked" || state === "partial") {
|
|
9249
|
+
descendants.forEach((id) => newSet.delete(id));
|
|
9250
|
+
onNodeUnselect?.({ node });
|
|
9251
|
+
} else {
|
|
9252
|
+
descendants.forEach((id) => newSet.add(id));
|
|
9253
|
+
onNodeSelect?.({ node });
|
|
9254
|
+
}
|
|
9255
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9256
|
+
} else {
|
|
9257
|
+
if (selectedSet.has(nodeId)) {
|
|
9258
|
+
onChange?.({ value: null });
|
|
9259
|
+
onNodeUnselect?.({ node });
|
|
9260
|
+
} else {
|
|
9261
|
+
onChange?.({ value: node.id });
|
|
9262
|
+
onNodeSelect?.({ node });
|
|
9263
|
+
closeDropdown();
|
|
9264
|
+
}
|
|
9265
|
+
}
|
|
9266
|
+
};
|
|
9267
|
+
const handleToggleExpand = (id) => {
|
|
9268
|
+
setExpandedKeys((prev) => {
|
|
9269
|
+
const next = new Set(prev);
|
|
9270
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
9271
|
+
return next;
|
|
9272
|
+
});
|
|
9273
|
+
};
|
|
9274
|
+
const handleClear = (e) => {
|
|
9275
|
+
e.stopPropagation();
|
|
9276
|
+
onChange?.({ value: isMultiple ? {} : null });
|
|
9277
|
+
};
|
|
9278
|
+
const handleRemoveTag = (e, node) => {
|
|
9279
|
+
e.stopPropagation();
|
|
9280
|
+
const newSet = new Set(selectedSet);
|
|
9281
|
+
collectDescendants(node).forEach((id) => newSet.delete(id));
|
|
9282
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9283
|
+
onNodeUnselect?.({ node });
|
|
9284
|
+
};
|
|
9285
|
+
const filteredTree = filterTree(options, filterQuery);
|
|
9286
|
+
const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
|
|
9287
|
+
const hasValue = tagNodes.length > 0;
|
|
9288
|
+
const isFloating = open || hasValue || focused;
|
|
9289
|
+
const rootClasses = [
|
|
9290
|
+
"rf-text-field",
|
|
9291
|
+
`rf-text-field--${variant}`,
|
|
9292
|
+
size === "small" ? "rf-text-field--small" : "",
|
|
9293
|
+
disabled ? "rf-text-field--disabled" : "",
|
|
9294
|
+
error ? "rf-text-field--error" : "",
|
|
9295
|
+
fullWidth ? "rf-text-field--full-width" : "",
|
|
9296
|
+
isFloating ? "rf-text-field--floating" : "",
|
|
9297
|
+
"rf-tree-select",
|
|
9298
|
+
sxClass,
|
|
9299
|
+
className
|
|
9300
|
+
].filter(Boolean).join(" ");
|
|
9301
|
+
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(
|
|
9302
|
+
"div",
|
|
9303
|
+
{
|
|
9304
|
+
ref: triggerRef,
|
|
9305
|
+
className: `rf-text-field__wrapper rf-tree-select__trigger${open ? " rf-tree-select__trigger--open" : ""}`,
|
|
9306
|
+
tabIndex: disabled ? -1 : 0,
|
|
9307
|
+
onMouseDown: handleTriggerMouseDown,
|
|
9308
|
+
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
9309
|
+
onFocus: handleTriggerFocus,
|
|
9310
|
+
onBlur: handleTriggerBlur,
|
|
9311
|
+
onKeyDown: handleKeyDown
|
|
9312
|
+
},
|
|
9313
|
+
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(
|
|
9314
|
+
"button",
|
|
9315
|
+
{
|
|
9316
|
+
type: "button",
|
|
9317
|
+
className: "rf-ts__chip-delete",
|
|
9318
|
+
onClick: (e) => handleRemoveTag(e, node),
|
|
9319
|
+
tabIndex: -1
|
|
9320
|
+
},
|
|
9321
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 10 })
|
|
9322
|
+
))) : 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"),
|
|
9323
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ import_react49.default.createElement(
|
|
9324
|
+
"button",
|
|
9325
|
+
{
|
|
9326
|
+
type: "button",
|
|
9327
|
+
className: "rf-autocomplete__icon-btn",
|
|
9328
|
+
onClick: handleClear,
|
|
9329
|
+
tabIndex: -1
|
|
9330
|
+
},
|
|
9331
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 16 })
|
|
9332
|
+
), /* @__PURE__ */ import_react49.default.createElement(
|
|
9333
|
+
"button",
|
|
9334
|
+
{
|
|
9335
|
+
type: "button",
|
|
9336
|
+
className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup${open ? " rf-autocomplete__icon-btn--open" : ""}`,
|
|
9337
|
+
onClick: (e) => {
|
|
9338
|
+
e.stopPropagation();
|
|
9339
|
+
open ? closeDropdown() : openDropdown();
|
|
9340
|
+
},
|
|
9341
|
+
tabIndex: -1
|
|
9342
|
+
},
|
|
9343
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 18 })
|
|
9344
|
+
)),
|
|
9345
|
+
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 ? " *" : ""))),
|
|
9346
|
+
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" })),
|
|
9347
|
+
variant === "standard" && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })
|
|
9348
|
+
), 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(
|
|
9349
|
+
/* @__PURE__ */ import_react49.default.createElement(
|
|
9350
|
+
"div",
|
|
9351
|
+
{
|
|
9352
|
+
ref: dropdownRef,
|
|
9353
|
+
className: "rf-tree-select__popup",
|
|
9354
|
+
style: dropdownStyle
|
|
9355
|
+
},
|
|
9356
|
+
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(
|
|
9357
|
+
"input",
|
|
9358
|
+
{
|
|
9359
|
+
ref: filterInputRef,
|
|
9360
|
+
className: "rf-tree-select__filter-input",
|
|
9361
|
+
placeholder: "Search\u2026",
|
|
9362
|
+
value: filterQuery,
|
|
9363
|
+
onChange: (e) => setFilterQuery(e.target.value)
|
|
9364
|
+
}
|
|
9365
|
+
), filterQuery && /* @__PURE__ */ import_react49.default.createElement(
|
|
9366
|
+
"button",
|
|
9367
|
+
{
|
|
9368
|
+
type: "button",
|
|
9369
|
+
className: "rf-autocomplete__icon-btn",
|
|
9370
|
+
onClick: () => setFilterQuery(""),
|
|
9371
|
+
tabIndex: -1
|
|
9372
|
+
},
|
|
9373
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 12 })
|
|
9374
|
+
)),
|
|
9375
|
+
/* @__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(
|
|
9376
|
+
TreeNodeItem,
|
|
9377
|
+
{
|
|
9378
|
+
key: node.id,
|
|
9379
|
+
node,
|
|
9380
|
+
depth: 0,
|
|
9381
|
+
selected: selectedSet,
|
|
9382
|
+
expanded: expandedKeys,
|
|
9383
|
+
selectionMode,
|
|
9384
|
+
onToggleExpand: handleToggleExpand,
|
|
9385
|
+
onSelect: handleSelect,
|
|
9386
|
+
isFiltering: !!filterQuery
|
|
9387
|
+
}
|
|
9388
|
+
)))
|
|
9389
|
+
),
|
|
9390
|
+
document.body
|
|
9391
|
+
));
|
|
9392
|
+
}
|
|
9393
|
+
|
|
9394
|
+
// lib/UserSelectionField/UserSelectionField.tsx
|
|
9395
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
9396
|
+
function getOptionId(opt) {
|
|
9397
|
+
return opt.id ?? opt._id;
|
|
9398
|
+
}
|
|
9399
|
+
function getLabel(opt) {
|
|
9400
|
+
if (!opt.userFirstName) return "";
|
|
9401
|
+
return `${opt.userFirstName} ${opt.userLastName ?? ""}`.trim();
|
|
9402
|
+
}
|
|
9403
|
+
function matchesSearch(opt, query) {
|
|
9404
|
+
const q = query.toLowerCase();
|
|
9405
|
+
return opt.userFirstName?.toLowerCase().includes(q) || opt.userLastName?.toLowerCase().includes(q) || opt.emailId?.toLowerCase().includes(q) || false;
|
|
9406
|
+
}
|
|
9407
|
+
function UserAvatar({ user }) {
|
|
9408
|
+
const initials = (user.userFirstName?.[0] ?? "").toUpperCase() + (user.userLastName?.[0] ?? "").toUpperCase();
|
|
9409
|
+
return /* @__PURE__ */ import_react50.default.createElement("span", { style: {
|
|
9410
|
+
width: 28,
|
|
9411
|
+
height: 28,
|
|
9412
|
+
borderRadius: "50%",
|
|
9413
|
+
backgroundColor: "var(--hover-color, #e0e0e0)",
|
|
9414
|
+
border: "1px solid var(--border-color, #ddd)",
|
|
9415
|
+
display: "inline-flex",
|
|
9416
|
+
alignItems: "center",
|
|
9417
|
+
justifyContent: "center",
|
|
9418
|
+
fontSize: "0.7rem",
|
|
9419
|
+
fontWeight: 600,
|
|
9420
|
+
color: "var(--text-secondary, #555)",
|
|
9421
|
+
flexShrink: 0,
|
|
9422
|
+
letterSpacing: "0.02em"
|
|
9423
|
+
} }, initials || "?");
|
|
9424
|
+
}
|
|
9425
|
+
function UserSelectionField({
|
|
9426
|
+
value,
|
|
9427
|
+
onChange,
|
|
9428
|
+
options = [],
|
|
9429
|
+
loading = false,
|
|
9430
|
+
onSearchChange,
|
|
9431
|
+
label = "Select user",
|
|
9432
|
+
multiple = false,
|
|
9433
|
+
limitTags,
|
|
9434
|
+
size = "small",
|
|
9435
|
+
variant = "outlined",
|
|
9436
|
+
disabled = false,
|
|
9437
|
+
error = false,
|
|
9438
|
+
helperText,
|
|
9439
|
+
fullWidth = true,
|
|
9440
|
+
required = false,
|
|
9441
|
+
filterOptions: filterOptionsProp,
|
|
9442
|
+
className,
|
|
9443
|
+
style,
|
|
9444
|
+
sx
|
|
9445
|
+
}) {
|
|
9446
|
+
const handleInputChange = (_, inputValue) => {
|
|
9447
|
+
if (!onSearchChange) return;
|
|
9448
|
+
if (!inputValue) {
|
|
9449
|
+
onSearchChange("");
|
|
9450
|
+
return;
|
|
9451
|
+
}
|
|
9452
|
+
const hasLocalMatch = options.some((opt) => matchesSearch(opt, inputValue));
|
|
9453
|
+
if (!hasLocalMatch) {
|
|
9454
|
+
onSearchChange(inputValue);
|
|
9455
|
+
}
|
|
9456
|
+
};
|
|
9457
|
+
return /* @__PURE__ */ import_react50.default.createElement(
|
|
9458
|
+
Autocomplete,
|
|
9459
|
+
{
|
|
9460
|
+
options,
|
|
9461
|
+
value: value ?? (multiple ? [] : null),
|
|
9462
|
+
onChange: (_, newValue) => onChange(newValue),
|
|
9463
|
+
onInputChange: handleInputChange,
|
|
9464
|
+
multiple,
|
|
9465
|
+
limitTags,
|
|
9466
|
+
loading,
|
|
9467
|
+
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement(circularProgress_default, { size: 16 }), /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9468
|
+
getOptionLabel: getLabel,
|
|
9469
|
+
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9470
|
+
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
9471
|
+
renderOption: (props, option) => {
|
|
9472
|
+
const { key, ...rest } = props;
|
|
9473
|
+
return /* @__PURE__ */ import_react50.default.createElement("li", { key, ...rest, style: { padding: "6px 12px", listStyle: "none" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react50.default.createElement(UserAvatar, { user: option }), /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.85rem", color: "var(--text-color)", lineHeight: 1.3 } }, option.userFirstName, " ", option.userLastName), /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3 } }, option.emailId))));
|
|
9474
|
+
},
|
|
9475
|
+
label,
|
|
9476
|
+
placeholder: label,
|
|
9477
|
+
size,
|
|
9478
|
+
variant,
|
|
9479
|
+
disabled,
|
|
9480
|
+
error,
|
|
9481
|
+
helperText,
|
|
9482
|
+
fullWidth,
|
|
9483
|
+
required,
|
|
9484
|
+
className,
|
|
9485
|
+
style,
|
|
9486
|
+
sx
|
|
9487
|
+
}
|
|
9488
|
+
);
|
|
9489
|
+
}
|
|
9490
|
+
|
|
8874
9491
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
8875
|
-
var
|
|
8876
|
-
var
|
|
8877
|
-
var
|
|
9492
|
+
var import_react61 = __toESM(require("react"), 1);
|
|
9493
|
+
var import_react_dom18 = require("react-dom");
|
|
9494
|
+
var import_react62 = require("@tiptap/react");
|
|
8878
9495
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
8879
9496
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
8880
9497
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -8894,21 +9511,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
8894
9511
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
8895
9512
|
|
|
8896
9513
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
8897
|
-
var
|
|
9514
|
+
var import_react52 = require("@tiptap/react");
|
|
8898
9515
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
8899
9516
|
|
|
8900
9517
|
// lib/RufousTextEditor/MentionList.tsx
|
|
8901
|
-
var
|
|
8902
|
-
var MentionList = (0,
|
|
8903
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9518
|
+
var import_react51 = __toESM(require("react"), 1);
|
|
9519
|
+
var MentionList = (0, import_react51.forwardRef)((props, ref) => {
|
|
9520
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react51.useState)(0);
|
|
8904
9521
|
const selectItem = (index) => {
|
|
8905
9522
|
const item = props.items[index];
|
|
8906
9523
|
if (item) {
|
|
8907
9524
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
8908
9525
|
}
|
|
8909
9526
|
};
|
|
8910
|
-
(0,
|
|
8911
|
-
(0,
|
|
9527
|
+
(0, import_react51.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9528
|
+
(0, import_react51.useImperativeHandle)(ref, () => ({
|
|
8912
9529
|
onKeyDown: ({ event }) => {
|
|
8913
9530
|
if (event.key === "ArrowUp") {
|
|
8914
9531
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -8926,17 +9543,17 @@ var MentionList = (0, import_react49.forwardRef)((props, ref) => {
|
|
|
8926
9543
|
}
|
|
8927
9544
|
}));
|
|
8928
9545
|
if (!props.items.length) {
|
|
8929
|
-
return /* @__PURE__ */
|
|
9546
|
+
return /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
8930
9547
|
}
|
|
8931
|
-
return /* @__PURE__ */
|
|
9548
|
+
return /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react51.default.createElement(
|
|
8932
9549
|
"button",
|
|
8933
9550
|
{
|
|
8934
9551
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
8935
9552
|
key: item.id,
|
|
8936
9553
|
onClick: () => selectItem(index)
|
|
8937
9554
|
},
|
|
8938
|
-
/* @__PURE__ */
|
|
8939
|
-
/* @__PURE__ */
|
|
9555
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9556
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
8940
9557
|
)));
|
|
8941
9558
|
});
|
|
8942
9559
|
MentionList.displayName = "MentionList";
|
|
@@ -8956,7 +9573,7 @@ function createMentionSuggestion(users) {
|
|
|
8956
9573
|
return {
|
|
8957
9574
|
onStart: (props) => {
|
|
8958
9575
|
if (!props.clientRect) return;
|
|
8959
|
-
component = new
|
|
9576
|
+
component = new import_react52.ReactRenderer(MentionList_default, {
|
|
8960
9577
|
props,
|
|
8961
9578
|
editor: props.editor
|
|
8962
9579
|
});
|
|
@@ -8994,21 +9611,21 @@ function createMentionSuggestion(users) {
|
|
|
8994
9611
|
}
|
|
8995
9612
|
|
|
8996
9613
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
8997
|
-
var
|
|
8998
|
-
var
|
|
9614
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
9615
|
+
var import_react_dom14 = require("react-dom");
|
|
8999
9616
|
|
|
9000
9617
|
// 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,
|
|
9618
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
9619
|
+
var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9620
|
+
const [speaking, setSpeaking] = (0, import_react53.useState)(false);
|
|
9621
|
+
const [paused, setPaused] = (0, import_react53.useState)(false);
|
|
9622
|
+
const [voices, setVoices] = (0, import_react53.useState)([]);
|
|
9623
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react53.useState)("");
|
|
9624
|
+
const [rate, setRate] = (0, import_react53.useState)(1);
|
|
9625
|
+
const [showPanel, setShowPanel] = (0, import_react53.useState)(false);
|
|
9626
|
+
const utteranceRef = (0, import_react53.useRef)(null);
|
|
9627
|
+
const panelRef = (0, import_react53.useRef)(null);
|
|
9628
|
+
(0, import_react53.useEffect)(() => {
|
|
9012
9629
|
const synth = window.speechSynthesis;
|
|
9013
9630
|
const loadVoices = () => {
|
|
9014
9631
|
const available = synth.getVoices();
|
|
@@ -9026,7 +9643,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9026
9643
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9027
9644
|
};
|
|
9028
9645
|
}, [selectedVoice]);
|
|
9029
|
-
(0,
|
|
9646
|
+
(0, import_react53.useEffect)(() => {
|
|
9030
9647
|
const handleClick = (e) => {
|
|
9031
9648
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9032
9649
|
setShowPanel(false);
|
|
@@ -9035,7 +9652,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9035
9652
|
document.addEventListener("mousedown", handleClick);
|
|
9036
9653
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9037
9654
|
}, []);
|
|
9038
|
-
const getTextToSpeak = (0,
|
|
9655
|
+
const getTextToSpeak = (0, import_react53.useCallback)(() => {
|
|
9039
9656
|
if (!editor) return "";
|
|
9040
9657
|
const { from, to, empty } = editor.state.selection;
|
|
9041
9658
|
if (!empty) {
|
|
@@ -9043,7 +9660,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9043
9660
|
}
|
|
9044
9661
|
return editor.getText();
|
|
9045
9662
|
}, [editor]);
|
|
9046
|
-
const handleSpeak = (0,
|
|
9663
|
+
const handleSpeak = (0, import_react53.useCallback)(async () => {
|
|
9047
9664
|
const text = getTextToSpeak();
|
|
9048
9665
|
if (!text.trim()) return;
|
|
9049
9666
|
if (onTextToSpeech) {
|
|
@@ -9085,25 +9702,25 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9085
9702
|
setSpeaking(true);
|
|
9086
9703
|
setPaused(false);
|
|
9087
9704
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9088
|
-
const handlePause = (0,
|
|
9705
|
+
const handlePause = (0, import_react53.useCallback)(() => {
|
|
9089
9706
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9090
9707
|
window.speechSynthesis.pause();
|
|
9091
9708
|
setPaused(true);
|
|
9092
9709
|
}
|
|
9093
9710
|
}, []);
|
|
9094
|
-
const handleResume = (0,
|
|
9711
|
+
const handleResume = (0, import_react53.useCallback)(() => {
|
|
9095
9712
|
if (window.speechSynthesis.paused) {
|
|
9096
9713
|
window.speechSynthesis.resume();
|
|
9097
9714
|
setPaused(false);
|
|
9098
9715
|
}
|
|
9099
9716
|
}, []);
|
|
9100
|
-
const handleStop = (0,
|
|
9717
|
+
const handleStop = (0, import_react53.useCallback)(() => {
|
|
9101
9718
|
window.speechSynthesis.cancel();
|
|
9102
9719
|
setSpeaking(false);
|
|
9103
9720
|
setPaused(false);
|
|
9104
9721
|
}, []);
|
|
9105
|
-
(0,
|
|
9106
|
-
return /* @__PURE__ */
|
|
9722
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9723
|
+
return /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
|
|
9107
9724
|
"button",
|
|
9108
9725
|
{
|
|
9109
9726
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9116,15 +9733,15 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9116
9733
|
}
|
|
9117
9734
|
},
|
|
9118
9735
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9119
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9736
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react53.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9120
9737
|
"select",
|
|
9121
9738
|
{
|
|
9122
9739
|
className: "tts-select",
|
|
9123
9740
|
value: selectedVoice,
|
|
9124
9741
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9125
9742
|
},
|
|
9126
|
-
voices.map((v) => /* @__PURE__ */
|
|
9127
|
-
), /* @__PURE__ */
|
|
9743
|
+
voices.map((v) => /* @__PURE__ */ import_react53.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9744
|
+
), /* @__PURE__ */ import_react53.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9128
9745
|
"input",
|
|
9129
9746
|
{
|
|
9130
9747
|
type: "range",
|
|
@@ -9135,26 +9752,26 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9135
9752
|
value: rate,
|
|
9136
9753
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9137
9754
|
}
|
|
9138
|
-
), /* @__PURE__ */
|
|
9755
|
+
), /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9139
9756
|
handleSpeak();
|
|
9140
9757
|
setShowPanel(false);
|
|
9141
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9758
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9142
9759
|
});
|
|
9143
9760
|
var TextToSpeech_default = TextToSpeech;
|
|
9144
9761
|
|
|
9145
9762
|
// 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,
|
|
9763
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9764
|
+
var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9765
|
+
const [listening, setListening] = (0, import_react54.useState)(false);
|
|
9766
|
+
const [showPanel, setShowPanel] = (0, import_react54.useState)(false);
|
|
9767
|
+
const [language, setLanguage] = (0, import_react54.useState)("en-US");
|
|
9768
|
+
const [interim, setInterim] = (0, import_react54.useState)("");
|
|
9769
|
+
const recognitionRef = (0, import_react54.useRef)(null);
|
|
9770
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9771
|
+
const isListeningRef = (0, import_react54.useRef)(false);
|
|
9155
9772
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9156
9773
|
const supported = !!SpeechRecognitionAPI;
|
|
9157
|
-
(0,
|
|
9774
|
+
(0, import_react54.useEffect)(() => {
|
|
9158
9775
|
const handleClick = (e) => {
|
|
9159
9776
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9160
9777
|
setShowPanel(false);
|
|
@@ -9163,7 +9780,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9163
9780
|
document.addEventListener("mousedown", handleClick);
|
|
9164
9781
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9165
9782
|
}, []);
|
|
9166
|
-
const createRecognition = (0,
|
|
9783
|
+
const createRecognition = (0, import_react54.useCallback)(() => {
|
|
9167
9784
|
if (!supported) return null;
|
|
9168
9785
|
const recognition = new SpeechRecognitionAPI();
|
|
9169
9786
|
recognition.lang = language;
|
|
@@ -9172,7 +9789,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9172
9789
|
recognition.maxAlternatives = 1;
|
|
9173
9790
|
return recognition;
|
|
9174
9791
|
}, [supported, language]);
|
|
9175
|
-
const startSession = (0,
|
|
9792
|
+
const startSession = (0, import_react54.useCallback)((recognition) => {
|
|
9176
9793
|
if (!recognition || !editor) return;
|
|
9177
9794
|
recognition.onresult = async (event) => {
|
|
9178
9795
|
let finalText = "";
|
|
@@ -9227,7 +9844,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9227
9844
|
}
|
|
9228
9845
|
};
|
|
9229
9846
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9230
|
-
const startListening = (0,
|
|
9847
|
+
const startListening = (0, import_react54.useCallback)(() => {
|
|
9231
9848
|
if (!supported || !editor) return;
|
|
9232
9849
|
const recognition = createRecognition();
|
|
9233
9850
|
if (!recognition) return;
|
|
@@ -9243,7 +9860,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9243
9860
|
setListening(false);
|
|
9244
9861
|
}
|
|
9245
9862
|
}, [supported, editor, createRecognition, startSession]);
|
|
9246
|
-
const stopListening = (0,
|
|
9863
|
+
const stopListening = (0, import_react54.useCallback)(() => {
|
|
9247
9864
|
isListeningRef.current = false;
|
|
9248
9865
|
if (recognitionRef.current) {
|
|
9249
9866
|
try {
|
|
@@ -9255,9 +9872,9 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9255
9872
|
setListening(false);
|
|
9256
9873
|
setInterim("");
|
|
9257
9874
|
}, []);
|
|
9258
|
-
(0,
|
|
9875
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9259
9876
|
if (!supported) {
|
|
9260
|
-
return /* @__PURE__ */
|
|
9877
|
+
return /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9261
9878
|
}
|
|
9262
9879
|
const LANGUAGES2 = [
|
|
9263
9880
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9279,7 +9896,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9279
9896
|
{ code: "kn-IN", label: "Kannada" },
|
|
9280
9897
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9281
9898
|
];
|
|
9282
|
-
return /* @__PURE__ */
|
|
9899
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9283
9900
|
"button",
|
|
9284
9901
|
{
|
|
9285
9902
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9292,21 +9909,21 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9292
9909
|
}
|
|
9293
9910
|
},
|
|
9294
9911
|
"\u{1F3A4}"
|
|
9295
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
9912
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react54.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9296
9913
|
"select",
|
|
9297
9914
|
{
|
|
9298
9915
|
className: "stt-select",
|
|
9299
9916
|
value: language,
|
|
9300
9917
|
onChange: (e) => setLanguage(e.target.value)
|
|
9301
9918
|
},
|
|
9302
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9303
|
-
), /* @__PURE__ */
|
|
9919
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react54.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
9920
|
+
), /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react54.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9304
9921
|
});
|
|
9305
9922
|
var SpeechToText_default = SpeechToText;
|
|
9306
9923
|
|
|
9307
9924
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9308
|
-
var
|
|
9309
|
-
var
|
|
9925
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
9926
|
+
var import_react_dom12 = require("react-dom");
|
|
9310
9927
|
var AI_COMMANDS = [
|
|
9311
9928
|
{ 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
9929
|
{ 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 +9970,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9353
9970
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9354
9971
|
};
|
|
9355
9972
|
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,
|
|
9973
|
+
const [open, setOpen] = (0, import_react55.useState)(false);
|
|
9974
|
+
const [showModal, setShowModal] = (0, import_react55.useState)(false);
|
|
9975
|
+
const [loading, setLoading] = (0, import_react55.useState)(false);
|
|
9976
|
+
const [promptText, setPromptText] = (0, import_react55.useState)("");
|
|
9977
|
+
const [resultText, setResultText] = (0, import_react55.useState)("");
|
|
9978
|
+
const [originalText, setOriginalText] = (0, import_react55.useState)("");
|
|
9979
|
+
const [selectionRange, setSelectionRange] = (0, import_react55.useState)(null);
|
|
9980
|
+
const [previousResults, setPreviousResults] = (0, import_react55.useState)([]);
|
|
9981
|
+
const panelRef = (0, import_react55.useRef)(null);
|
|
9982
|
+
(0, import_react55.useEffect)(() => {
|
|
9366
9983
|
const handleClick = (e) => {
|
|
9367
9984
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9368
9985
|
setOpen(false);
|
|
@@ -9371,7 +9988,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9371
9988
|
document.addEventListener("mousedown", handleClick);
|
|
9372
9989
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9373
9990
|
}, []);
|
|
9374
|
-
const getSelectedText = (0,
|
|
9991
|
+
const getSelectedText = (0, import_react55.useCallback)(() => {
|
|
9375
9992
|
if (!editor) return { text: "", range: null };
|
|
9376
9993
|
const { from, to, empty } = editor.state.selection;
|
|
9377
9994
|
if (!empty) {
|
|
@@ -9379,7 +9996,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9379
9996
|
}
|
|
9380
9997
|
return { text: editor.getText(), range: null };
|
|
9381
9998
|
}, [editor]);
|
|
9382
|
-
const fetchAIResult = (0,
|
|
9999
|
+
const fetchAIResult = (0, import_react55.useCallback)(async (prompt, text, prevResults = []) => {
|
|
9383
10000
|
setLoading(true);
|
|
9384
10001
|
setResultText("");
|
|
9385
10002
|
try {
|
|
@@ -9397,7 +10014,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9397
10014
|
setLoading(false);
|
|
9398
10015
|
}
|
|
9399
10016
|
}, [onAICommand]);
|
|
9400
|
-
const handleCommandSelect = (0,
|
|
10017
|
+
const handleCommandSelect = (0, import_react55.useCallback)((command) => {
|
|
9401
10018
|
const { text, range } = getSelectedText();
|
|
9402
10019
|
if (!text.trim()) return;
|
|
9403
10020
|
setOriginalText(text);
|
|
@@ -9408,7 +10025,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9408
10025
|
setShowModal(true);
|
|
9409
10026
|
fetchAIResult(command.prompt, text, []);
|
|
9410
10027
|
}, [getSelectedText, fetchAIResult]);
|
|
9411
|
-
const handleInsert = (0,
|
|
10028
|
+
const handleInsert = (0, import_react55.useCallback)(() => {
|
|
9412
10029
|
if (!resultText || !editor) return;
|
|
9413
10030
|
if (selectionRange) {
|
|
9414
10031
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9418,7 +10035,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9418
10035
|
setShowModal(false);
|
|
9419
10036
|
setResultText("");
|
|
9420
10037
|
}, [editor, resultText, selectionRange]);
|
|
9421
|
-
const handleInsertAfter = (0,
|
|
10038
|
+
const handleInsertAfter = (0, import_react55.useCallback)(() => {
|
|
9422
10039
|
if (!resultText || !editor) return;
|
|
9423
10040
|
if (selectionRange) {
|
|
9424
10041
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9433,11 +10050,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9433
10050
|
setShowModal(false);
|
|
9434
10051
|
setResultText("");
|
|
9435
10052
|
}, [editor, resultText, selectionRange]);
|
|
9436
|
-
const handleRefresh = (0,
|
|
10053
|
+
const handleRefresh = (0, import_react55.useCallback)(() => {
|
|
9437
10054
|
if (!originalText.trim()) return;
|
|
9438
10055
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9439
10056
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9440
|
-
const handleCancel = (0,
|
|
10057
|
+
const handleCancel = (0, import_react55.useCallback)(() => {
|
|
9441
10058
|
setShowModal(false);
|
|
9442
10059
|
setResultText("");
|
|
9443
10060
|
setPromptText("");
|
|
@@ -9446,15 +10063,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9446
10063
|
setPreviousResults([]);
|
|
9447
10064
|
}, []);
|
|
9448
10065
|
if (!editor) return null;
|
|
9449
|
-
return /* @__PURE__ */
|
|
10066
|
+
return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9450
10067
|
"button",
|
|
9451
10068
|
{
|
|
9452
10069
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9453
10070
|
onClick: () => setOpen(!open)
|
|
9454
10071
|
},
|
|
9455
|
-
/* @__PURE__ */
|
|
9456
|
-
/* @__PURE__ */
|
|
9457
|
-
)), open && /* @__PURE__ */
|
|
10072
|
+
/* @__PURE__ */ import_react55.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react55.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" })),
|
|
10073
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10074
|
+
)), open && /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9458
10075
|
"button",
|
|
9459
10076
|
{
|
|
9460
10077
|
key: cmd.id,
|
|
@@ -9462,8 +10079,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9462
10079
|
onClick: () => handleCommandSelect(cmd)
|
|
9463
10080
|
},
|
|
9464
10081
|
cmd.label
|
|
9465
|
-
))), /* @__PURE__ */
|
|
9466
|
-
/* @__PURE__ */
|
|
10082
|
+
))), /* @__PURE__ */ import_react55.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)(
|
|
10083
|
+
/* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react55.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react55.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react55.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9467
10084
|
"textarea",
|
|
9468
10085
|
{
|
|
9469
10086
|
className: "ai-modal-prompt",
|
|
@@ -9471,15 +10088,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9471
10088
|
onChange: (e) => setPromptText(e.target.value),
|
|
9472
10089
|
rows: 3
|
|
9473
10090
|
}
|
|
9474
|
-
), /* @__PURE__ */
|
|
10091
|
+
), /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9475
10092
|
"button",
|
|
9476
10093
|
{
|
|
9477
10094
|
className: "ai-modal-robot-btn",
|
|
9478
10095
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9479
10096
|
disabled: loading
|
|
9480
10097
|
},
|
|
9481
|
-
/* @__PURE__ */
|
|
9482
|
-
)))), /* @__PURE__ */
|
|
10098
|
+
/* @__PURE__ */ import_react55.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react55.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react55.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react55.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M8 7h8" }))
|
|
10099
|
+
)))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9483
10100
|
"button",
|
|
9484
10101
|
{
|
|
9485
10102
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -9487,7 +10104,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9487
10104
|
disabled: loading || !resultText
|
|
9488
10105
|
},
|
|
9489
10106
|
"Insert"
|
|
9490
|
-
), /* @__PURE__ */
|
|
10107
|
+
), /* @__PURE__ */ import_react55.default.createElement(
|
|
9491
10108
|
"button",
|
|
9492
10109
|
{
|
|
9493
10110
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -9495,23 +10112,23 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9495
10112
|
disabled: loading || !resultText
|
|
9496
10113
|
},
|
|
9497
10114
|
"Insert After"
|
|
9498
|
-
), /* @__PURE__ */
|
|
10115
|
+
), /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9499
10116
|
"button",
|
|
9500
10117
|
{
|
|
9501
10118
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
9502
10119
|
onClick: handleRefresh,
|
|
9503
10120
|
disabled: loading
|
|
9504
10121
|
},
|
|
9505
|
-
/* @__PURE__ */
|
|
9506
|
-
))), /* @__PURE__ */
|
|
10122
|
+
/* @__PURE__ */ import_react55.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_react55.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10123
|
+
))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react55.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react55.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
9507
10124
|
document.body
|
|
9508
10125
|
));
|
|
9509
10126
|
};
|
|
9510
10127
|
var AICommands_default = AICommands;
|
|
9511
10128
|
|
|
9512
10129
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
9513
|
-
var
|
|
9514
|
-
var
|
|
10130
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
10131
|
+
var import_react_dom13 = require("react-dom");
|
|
9515
10132
|
var LANGUAGES = [
|
|
9516
10133
|
{ code: "af", name: "Afrikaans" },
|
|
9517
10134
|
{ code: "sq", name: "Albanian" },
|
|
@@ -9650,16 +10267,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
9650
10267
|
return null;
|
|
9651
10268
|
}
|
|
9652
10269
|
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,
|
|
10270
|
+
const [sourceLang, setSourceLang] = (0, import_react56.useState)(initialSource || "en");
|
|
10271
|
+
const [targetLang, setTargetLang] = (0, import_react56.useState)(initialTarget || "hi");
|
|
10272
|
+
const [sourceFilter, setSourceFilter] = (0, import_react56.useState)("");
|
|
10273
|
+
const [targetFilter, setTargetFilter] = (0, import_react56.useState)("");
|
|
10274
|
+
const [translating, setTranslating] = (0, import_react56.useState)(false);
|
|
10275
|
+
const [error, setError] = (0, import_react56.useState)("");
|
|
10276
|
+
const filteredSource = (0, import_react56.useMemo)(() => LANGUAGES.filter(
|
|
9660
10277
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
9661
10278
|
), [sourceFilter]);
|
|
9662
|
-
const filteredTarget = (0,
|
|
10279
|
+
const filteredTarget = (0, import_react56.useMemo)(() => LANGUAGES.filter(
|
|
9663
10280
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
9664
10281
|
), [targetFilter]);
|
|
9665
10282
|
const handleSwap = () => {
|
|
@@ -9702,8 +10319,8 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9702
10319
|
setTranslating(false);
|
|
9703
10320
|
}
|
|
9704
10321
|
};
|
|
9705
|
-
return (0,
|
|
9706
|
-
/* @__PURE__ */
|
|
10322
|
+
return (0, import_react_dom13.createPortal)(
|
|
10323
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react56.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
9707
10324
|
"input",
|
|
9708
10325
|
{
|
|
9709
10326
|
type: "text",
|
|
@@ -9712,16 +10329,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9712
10329
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
9713
10330
|
className: "translate-filter-input"
|
|
9714
10331
|
}
|
|
9715
|
-
)), /* @__PURE__ */
|
|
10332
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react56.default.createElement(
|
|
9716
10333
|
"button",
|
|
9717
10334
|
{
|
|
9718
10335
|
key: lang.code,
|
|
9719
10336
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
9720
10337
|
onClick: () => setSourceLang(lang.code)
|
|
9721
10338
|
},
|
|
9722
|
-
/* @__PURE__ */
|
|
9723
|
-
/* @__PURE__ */
|
|
9724
|
-
)))), /* @__PURE__ */
|
|
10339
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10340
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10341
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
9725
10342
|
"input",
|
|
9726
10343
|
{
|
|
9727
10344
|
type: "text",
|
|
@@ -9730,16 +10347,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9730
10347
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
9731
10348
|
className: "translate-filter-input"
|
|
9732
10349
|
}
|
|
9733
|
-
)), /* @__PURE__ */
|
|
10350
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react56.default.createElement(
|
|
9734
10351
|
"button",
|
|
9735
10352
|
{
|
|
9736
10353
|
key: lang.code,
|
|
9737
10354
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
9738
10355
|
onClick: () => setTargetLang(lang.code)
|
|
9739
10356
|
},
|
|
9740
|
-
/* @__PURE__ */
|
|
9741
|
-
/* @__PURE__ */
|
|
9742
|
-
))))), error && /* @__PURE__ */
|
|
10357
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10358
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10359
|
+
))))), error && /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
9743
10360
|
document.body
|
|
9744
10361
|
);
|
|
9745
10362
|
};
|
|
@@ -10390,38 +11007,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
10390
11007
|
});
|
|
10391
11008
|
|
|
10392
11009
|
// lib/RufousTextEditor/icons.tsx
|
|
10393
|
-
var
|
|
11010
|
+
var React113 = __toESM(require("react"), 1);
|
|
10394
11011
|
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__ */
|
|
11012
|
+
var IconUndo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11013
|
+
var IconRedo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11014
|
+
var IconBold = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11015
|
+
var IconItalic = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11016
|
+
var IconLink = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11017
|
+
var IconStrike = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11018
|
+
var IconHeading = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11019
|
+
var IconFontSize = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11020
|
+
var IconColor = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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__ */ React113.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11021
|
+
var IconFont = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11022
|
+
var IconLineHeight = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11023
|
+
var IconBulletList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11024
|
+
var IconOrderedList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11025
|
+
var IconAlignLeft = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11026
|
+
var IconAlignCenter = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11027
|
+
var IconAlignRight = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11028
|
+
var IconAlignJustify = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11029
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11030
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11031
|
+
var IconTable = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11032
|
+
var IconImage = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11033
|
+
var IconVideo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11034
|
+
var IconCut = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11035
|
+
var IconCopy = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11036
|
+
var IconCode = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11037
|
+
var IconFullscreen = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11038
|
+
var IconTranslate = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11039
|
+
var IconTaskList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11040
|
+
var IconCheck = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11041
|
+
var IconPaste = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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
11042
|
|
|
10426
11043
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10427
11044
|
var COLOR_PALETTE = [
|
|
@@ -10559,10 +11176,10 @@ var SPECIAL_CHARS = [
|
|
|
10559
11176
|
"\xA2"
|
|
10560
11177
|
];
|
|
10561
11178
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
10562
|
-
const [open, setOpen] = (0,
|
|
10563
|
-
const ref = (0,
|
|
10564
|
-
const menuRef = (0,
|
|
10565
|
-
(0,
|
|
11179
|
+
const [open, setOpen] = (0, import_react57.useState)(false);
|
|
11180
|
+
const ref = (0, import_react57.useRef)(null);
|
|
11181
|
+
const menuRef = (0, import_react57.useRef)(null);
|
|
11182
|
+
(0, import_react57.useEffect)(() => {
|
|
10566
11183
|
const handleClick = (e) => {
|
|
10567
11184
|
const target = e.target;
|
|
10568
11185
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -10574,7 +11191,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10574
11191
|
document.addEventListener("mousedown", handleClick);
|
|
10575
11192
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
10576
11193
|
}, []);
|
|
10577
|
-
(0,
|
|
11194
|
+
(0, import_react57.useEffect)(() => {
|
|
10578
11195
|
if (!open || !menuRef.current || !ref.current) return;
|
|
10579
11196
|
const menu = menuRef.current;
|
|
10580
11197
|
const trigger2 = ref.current;
|
|
@@ -10603,22 +11220,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10603
11220
|
};
|
|
10604
11221
|
position();
|
|
10605
11222
|
}, [open]);
|
|
10606
|
-
return /* @__PURE__ */
|
|
11223
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10607
11224
|
"button",
|
|
10608
11225
|
{
|
|
10609
11226
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
10610
11227
|
onClick: () => setOpen(!open)
|
|
10611
11228
|
},
|
|
10612
11229
|
trigger.label,
|
|
10613
|
-
/* @__PURE__ */
|
|
10614
|
-
)), open && (0,
|
|
10615
|
-
/* @__PURE__ */
|
|
11230
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11231
|
+
)), open && (0, import_react_dom14.createPortal)(
|
|
11232
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react57.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
11233
|
document.body
|
|
10617
11234
|
));
|
|
10618
11235
|
};
|
|
10619
11236
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
10620
|
-
const [activeTab, setActiveTab] = (0,
|
|
10621
|
-
const [url, setUrl] = (0,
|
|
11237
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("link");
|
|
11238
|
+
const [url, setUrl] = (0, import_react57.useState)("");
|
|
10622
11239
|
const extractIframeSrc = (html) => {
|
|
10623
11240
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
10624
11241
|
return match ? match[1] : null;
|
|
@@ -10650,14 +11267,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10650
11267
|
}
|
|
10651
11268
|
onClose();
|
|
10652
11269
|
};
|
|
10653
|
-
return /* @__PURE__ */
|
|
11270
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10654
11271
|
"button",
|
|
10655
11272
|
{
|
|
10656
11273
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
10657
11274
|
onClick: () => setActiveTab("link")
|
|
10658
11275
|
},
|
|
10659
11276
|
"\u{1F517} Link"
|
|
10660
|
-
), /* @__PURE__ */
|
|
11277
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
10661
11278
|
"button",
|
|
10662
11279
|
{
|
|
10663
11280
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -10665,7 +11282,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10665
11282
|
},
|
|
10666
11283
|
"</>",
|
|
10667
11284
|
" Code"
|
|
10668
|
-
)), /* @__PURE__ */
|
|
11285
|
+
)), /* @__PURE__ */ import_react57.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react57.default.createElement(
|
|
10669
11286
|
"input",
|
|
10670
11287
|
{
|
|
10671
11288
|
type: "text",
|
|
@@ -10676,7 +11293,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10676
11293
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
10677
11294
|
autoFocus: true
|
|
10678
11295
|
}
|
|
10679
|
-
) : /* @__PURE__ */
|
|
11296
|
+
) : /* @__PURE__ */ import_react57.default.createElement(
|
|
10680
11297
|
"textarea",
|
|
10681
11298
|
{
|
|
10682
11299
|
className: "insert-panel-textarea",
|
|
@@ -10685,13 +11302,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10685
11302
|
onChange: (e) => setUrl(e.target.value),
|
|
10686
11303
|
rows: 3
|
|
10687
11304
|
}
|
|
10688
|
-
), /* @__PURE__ */
|
|
11305
|
+
), /* @__PURE__ */ import_react57.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
10689
11306
|
};
|
|
10690
11307
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
10691
|
-
const [activeTab, setActiveTab] = (0,
|
|
10692
|
-
const [url, setUrl] = (0,
|
|
10693
|
-
const [isDragging, setIsDragging] = (0,
|
|
10694
|
-
const fileInputRef = (0,
|
|
11308
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("upload");
|
|
11309
|
+
const [url, setUrl] = (0, import_react57.useState)("");
|
|
11310
|
+
const [isDragging, setIsDragging] = (0, import_react57.useState)(false);
|
|
11311
|
+
const fileInputRef = (0, import_react57.useRef)(null);
|
|
10695
11312
|
const getBase64 = (file) => {
|
|
10696
11313
|
return new Promise((resolve, reject) => {
|
|
10697
11314
|
const reader = new FileReader();
|
|
@@ -10729,21 +11346,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10729
11346
|
editor.chain().focus().setImage({ src: url }).run();
|
|
10730
11347
|
onClose();
|
|
10731
11348
|
};
|
|
10732
|
-
return /* @__PURE__ */
|
|
11349
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10733
11350
|
"button",
|
|
10734
11351
|
{
|
|
10735
11352
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
10736
11353
|
onClick: () => setActiveTab("upload")
|
|
10737
11354
|
},
|
|
10738
11355
|
"\u2B06 Upload"
|
|
10739
|
-
), /* @__PURE__ */
|
|
11356
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
10740
11357
|
"button",
|
|
10741
11358
|
{
|
|
10742
11359
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
10743
11360
|
onClick: () => setActiveTab("url")
|
|
10744
11361
|
},
|
|
10745
11362
|
"\u{1F517} URL"
|
|
10746
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11363
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
|
|
10747
11364
|
"div",
|
|
10748
11365
|
{
|
|
10749
11366
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -10755,9 +11372,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10755
11372
|
onDrop: handleDrop,
|
|
10756
11373
|
onClick: () => fileInputRef.current?.click()
|
|
10757
11374
|
},
|
|
10758
|
-
/* @__PURE__ */
|
|
10759
|
-
/* @__PURE__ */
|
|
10760
|
-
), /* @__PURE__ */
|
|
11375
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11376
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11377
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
10761
11378
|
"input",
|
|
10762
11379
|
{
|
|
10763
11380
|
ref: fileInputRef,
|
|
@@ -10766,7 +11383,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10766
11383
|
style: { display: "none" },
|
|
10767
11384
|
onChange: handleFileSelect
|
|
10768
11385
|
}
|
|
10769
|
-
)) : /* @__PURE__ */
|
|
11386
|
+
)) : /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react57.default.createElement(
|
|
10770
11387
|
"input",
|
|
10771
11388
|
{
|
|
10772
11389
|
type: "text",
|
|
@@ -10777,18 +11394,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10777
11394
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
10778
11395
|
autoFocus: true
|
|
10779
11396
|
}
|
|
10780
|
-
), /* @__PURE__ */
|
|
11397
|
+
), /* @__PURE__ */ import_react57.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
10781
11398
|
};
|
|
10782
11399
|
var MAX_GRID = 10;
|
|
10783
11400
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
10784
|
-
const [hoverRow, setHoverRow] = (0,
|
|
10785
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11401
|
+
const [hoverRow, setHoverRow] = (0, import_react57.useState)(0);
|
|
11402
|
+
const [hoverCol, setHoverCol] = (0, import_react57.useState)(0);
|
|
10786
11403
|
const handleInsert = () => {
|
|
10787
11404
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
10788
11405
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
10789
11406
|
onClose();
|
|
10790
11407
|
};
|
|
10791
|
-
return /* @__PURE__ */
|
|
11408
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10792
11409
|
"div",
|
|
10793
11410
|
{
|
|
10794
11411
|
className: "table-grid",
|
|
@@ -10797,7 +11414,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10797
11414
|
setHoverCol(0);
|
|
10798
11415
|
}
|
|
10799
11416
|
},
|
|
10800
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11417
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react57.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10801
11418
|
"div",
|
|
10802
11419
|
{
|
|
10803
11420
|
key: c,
|
|
@@ -10809,7 +11426,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10809
11426
|
onClick: handleInsert
|
|
10810
11427
|
}
|
|
10811
11428
|
))))
|
|
10812
|
-
), /* @__PURE__ */
|
|
11429
|
+
), /* @__PURE__ */ import_react57.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react57.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react57.default.createElement(
|
|
10813
11430
|
"button",
|
|
10814
11431
|
{
|
|
10815
11432
|
className: "table-grid-submit",
|
|
@@ -10820,9 +11437,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10820
11437
|
)));
|
|
10821
11438
|
};
|
|
10822
11439
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
10823
|
-
const [tab, setTab] = (0,
|
|
10824
|
-
const [activeBg, setActiveBg] = (0,
|
|
10825
|
-
const [activeText, setActiveText] = (0,
|
|
11440
|
+
const [tab, setTab] = (0, import_react57.useState)("background");
|
|
11441
|
+
const [activeBg, setActiveBg] = (0, import_react57.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11442
|
+
const [activeText, setActiveText] = (0, import_react57.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
10826
11443
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
10827
11444
|
const applyColor = (color) => {
|
|
10828
11445
|
if (tab === "background") {
|
|
@@ -10843,51 +11460,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
10843
11460
|
}
|
|
10844
11461
|
onClose();
|
|
10845
11462
|
};
|
|
10846
|
-
return /* @__PURE__ */
|
|
11463
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10847
11464
|
"button",
|
|
10848
11465
|
{
|
|
10849
11466
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
10850
11467
|
onClick: () => setTab("background")
|
|
10851
11468
|
},
|
|
10852
11469
|
"Background"
|
|
10853
|
-
), /* @__PURE__ */
|
|
11470
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
10854
11471
|
"button",
|
|
10855
11472
|
{
|
|
10856
11473
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
10857
11474
|
onClick: () => setTab("text")
|
|
10858
11475
|
},
|
|
10859
11476
|
"Text"
|
|
10860
|
-
)), /* @__PURE__ */
|
|
11477
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react57.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10861
11478
|
"button",
|
|
10862
11479
|
{
|
|
10863
11480
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
10864
11481
|
style: { background: color },
|
|
10865
11482
|
onClick: () => applyColor(color)
|
|
10866
11483
|
}
|
|
10867
|
-
)))), /* @__PURE__ */
|
|
11484
|
+
)))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
10868
11485
|
};
|
|
10869
11486
|
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,
|
|
11487
|
+
const [, setEditorState] = (0, import_react57.useState)(0);
|
|
11488
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react57.useState)(false);
|
|
11489
|
+
const ttsRef = (0, import_react57.useRef)(null);
|
|
11490
|
+
const sttRef = (0, import_react57.useRef)(null);
|
|
10874
11491
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
10875
|
-
(0,
|
|
11492
|
+
(0, import_react57.useEffect)(() => {
|
|
10876
11493
|
if (!editor) return;
|
|
10877
11494
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
10878
11495
|
editor.on("transaction", onTransaction);
|
|
10879
11496
|
return () => editor.off("transaction", onTransaction);
|
|
10880
11497
|
}, [editor]);
|
|
10881
|
-
const insertSpecialChar = (0,
|
|
11498
|
+
const insertSpecialChar = (0, import_react57.useCallback)((char) => {
|
|
10882
11499
|
if (!editor) return;
|
|
10883
11500
|
editor.chain().focus().insertContent(char).run();
|
|
10884
11501
|
}, [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,
|
|
11502
|
+
const [copySuccess, setCopySuccess] = (0, import_react57.useState)(false);
|
|
11503
|
+
const [translateSource, setTranslateSource] = (0, import_react57.useState)("en");
|
|
11504
|
+
const [translateTarget, setTranslateTarget] = (0, import_react57.useState)("hi");
|
|
11505
|
+
const [translateStatus, setTranslateStatus] = (0, import_react57.useState)("");
|
|
11506
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react57.useState)(false);
|
|
11507
|
+
const handleCopy = (0, import_react57.useCallback)(async () => {
|
|
10891
11508
|
if (!editor) return;
|
|
10892
11509
|
const { from, to, empty } = editor.state.selection;
|
|
10893
11510
|
if (empty) return;
|
|
@@ -10902,7 +11519,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10902
11519
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
10903
11520
|
}
|
|
10904
11521
|
}, [editor]);
|
|
10905
|
-
const handlePaste = (0,
|
|
11522
|
+
const handlePaste = (0, import_react57.useCallback)(async () => {
|
|
10906
11523
|
if (!editor) return;
|
|
10907
11524
|
try {
|
|
10908
11525
|
const text = await navigator.clipboard.readText();
|
|
@@ -10911,7 +11528,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10911
11528
|
document.execCommand("paste");
|
|
10912
11529
|
}
|
|
10913
11530
|
}, [editor]);
|
|
10914
|
-
const handleQuickTranslate = (0,
|
|
11531
|
+
const handleQuickTranslate = (0, import_react57.useCallback)(async () => {
|
|
10915
11532
|
if (!editor) return;
|
|
10916
11533
|
const { from, to, empty } = editor.state.selection;
|
|
10917
11534
|
if (empty) {
|
|
@@ -10945,32 +11562,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10945
11562
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
10946
11563
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
10947
11564
|
if (!editor) return null;
|
|
10948
|
-
return /* @__PURE__ */
|
|
11565
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10949
11566
|
"button",
|
|
10950
11567
|
{
|
|
10951
11568
|
className: "toolbar-btn",
|
|
10952
11569
|
onClick: () => editor.chain().focus().undo().run(),
|
|
10953
11570
|
disabled: !editor.can().undo()
|
|
10954
11571
|
},
|
|
10955
|
-
/* @__PURE__ */
|
|
10956
|
-
)), show("redo") && /* @__PURE__ */
|
|
11572
|
+
/* @__PURE__ */ import_react57.default.createElement(IconUndo, null)
|
|
11573
|
+
)), show("redo") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10957
11574
|
"button",
|
|
10958
11575
|
{
|
|
10959
11576
|
className: "toolbar-btn",
|
|
10960
11577
|
onClick: () => editor.chain().focus().redo().run(),
|
|
10961
11578
|
disabled: !editor.can().redo()
|
|
10962
11579
|
},
|
|
10963
|
-
/* @__PURE__ */
|
|
10964
|
-
))), show("ai") && /* @__PURE__ */
|
|
11580
|
+
/* @__PURE__ */ import_react57.default.createElement(IconRedo, null)
|
|
11581
|
+
))), show("ai") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react57.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react57.default.createElement(
|
|
10965
11582
|
Dropdown,
|
|
10966
11583
|
{
|
|
10967
11584
|
trigger: {
|
|
10968
|
-
label: /* @__PURE__ */
|
|
11585
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconHeading, null),
|
|
10969
11586
|
title: "Block type",
|
|
10970
11587
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
10971
11588
|
}
|
|
10972
11589
|
},
|
|
10973
|
-
/* @__PURE__ */
|
|
11590
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
10974
11591
|
"button",
|
|
10975
11592
|
{
|
|
10976
11593
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -10978,7 +11595,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10978
11595
|
},
|
|
10979
11596
|
"\xB6 Paragraph"
|
|
10980
11597
|
),
|
|
10981
|
-
/* @__PURE__ */
|
|
11598
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
10982
11599
|
"button",
|
|
10983
11600
|
{
|
|
10984
11601
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -10986,7 +11603,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10986
11603
|
},
|
|
10987
11604
|
"Heading 1"
|
|
10988
11605
|
),
|
|
10989
|
-
/* @__PURE__ */
|
|
11606
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
10990
11607
|
"button",
|
|
10991
11608
|
{
|
|
10992
11609
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -10994,7 +11611,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10994
11611
|
},
|
|
10995
11612
|
"Heading 2"
|
|
10996
11613
|
),
|
|
10997
|
-
/* @__PURE__ */
|
|
11614
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
10998
11615
|
"button",
|
|
10999
11616
|
{
|
|
11000
11617
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11002,7 +11619,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11002
11619
|
},
|
|
11003
11620
|
"Heading 3"
|
|
11004
11621
|
),
|
|
11005
|
-
/* @__PURE__ */
|
|
11622
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11006
11623
|
"button",
|
|
11007
11624
|
{
|
|
11008
11625
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11010,7 +11627,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11010
11627
|
},
|
|
11011
11628
|
"Heading 4"
|
|
11012
11629
|
),
|
|
11013
|
-
/* @__PURE__ */
|
|
11630
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11014
11631
|
"button",
|
|
11015
11632
|
{
|
|
11016
11633
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11018,7 +11635,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11018
11635
|
},
|
|
11019
11636
|
"\u275E Blockquote"
|
|
11020
11637
|
),
|
|
11021
|
-
/* @__PURE__ */
|
|
11638
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11022
11639
|
"button",
|
|
11023
11640
|
{
|
|
11024
11641
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11027,19 +11644,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11027
11644
|
"{ }",
|
|
11028
11645
|
" Code Block"
|
|
11029
11646
|
),
|
|
11030
|
-
/* @__PURE__ */
|
|
11031
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11647
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11648
|
+
), show("fontsize") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11032
11649
|
Dropdown,
|
|
11033
11650
|
{
|
|
11034
11651
|
trigger: {
|
|
11035
|
-
label: /* @__PURE__ */
|
|
11652
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconFontSize, null),
|
|
11036
11653
|
title: "Font size"
|
|
11037
11654
|
}
|
|
11038
11655
|
},
|
|
11039
11656
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11040
11657
|
const sizeStr = `${size}px`;
|
|
11041
11658
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11042
|
-
return /* @__PURE__ */
|
|
11659
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11043
11660
|
"button",
|
|
11044
11661
|
{
|
|
11045
11662
|
key: size,
|
|
@@ -11055,17 +11672,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11055
11672
|
sizeStr
|
|
11056
11673
|
);
|
|
11057
11674
|
})
|
|
11058
|
-
), show("font") && /* @__PURE__ */
|
|
11675
|
+
), show("font") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11059
11676
|
Dropdown,
|
|
11060
11677
|
{
|
|
11061
11678
|
trigger: {
|
|
11062
|
-
label: /* @__PURE__ */
|
|
11679
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconFont, null),
|
|
11063
11680
|
title: "Font family"
|
|
11064
11681
|
}
|
|
11065
11682
|
},
|
|
11066
11683
|
FONT_FAMILIES.map((font) => {
|
|
11067
11684
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11068
|
-
return /* @__PURE__ */
|
|
11685
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11069
11686
|
"button",
|
|
11070
11687
|
{
|
|
11071
11688
|
key: font,
|
|
@@ -11082,40 +11699,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11082
11699
|
font
|
|
11083
11700
|
);
|
|
11084
11701
|
})
|
|
11085
|
-
), show("color") && /* @__PURE__ */
|
|
11702
|
+
), show("color") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11086
11703
|
Dropdown,
|
|
11087
11704
|
{
|
|
11088
11705
|
trigger: {
|
|
11089
|
-
label: /* @__PURE__ */
|
|
11706
|
+
label: /* @__PURE__ */ import_react57.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react57.default.createElement(IconColor, null)),
|
|
11090
11707
|
title: "Colors"
|
|
11091
11708
|
},
|
|
11092
11709
|
keepOpen: true
|
|
11093
11710
|
},
|
|
11094
|
-
(close) => /* @__PURE__ */
|
|
11095
|
-
), show("bold") && /* @__PURE__ */
|
|
11711
|
+
(close) => /* @__PURE__ */ import_react57.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11712
|
+
), show("bold") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11096
11713
|
"button",
|
|
11097
11714
|
{
|
|
11098
11715
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11099
11716
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11100
11717
|
},
|
|
11101
|
-
/* @__PURE__ */
|
|
11102
|
-
)), show("italic") && /* @__PURE__ */
|
|
11718
|
+
/* @__PURE__ */ import_react57.default.createElement(IconBold, null)
|
|
11719
|
+
)), show("italic") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11103
11720
|
"button",
|
|
11104
11721
|
{
|
|
11105
11722
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11106
11723
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11107
11724
|
},
|
|
11108
|
-
/* @__PURE__ */
|
|
11109
|
-
)), show("strike") && /* @__PURE__ */
|
|
11725
|
+
/* @__PURE__ */ import_react57.default.createElement(IconItalic, null)
|
|
11726
|
+
)), show("strike") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11110
11727
|
Dropdown,
|
|
11111
11728
|
{
|
|
11112
|
-
trigger: { label: /* @__PURE__ */
|
|
11729
|
+
trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11113
11730
|
},
|
|
11114
|
-
/* @__PURE__ */
|
|
11115
|
-
/* @__PURE__ */
|
|
11116
|
-
/* @__PURE__ */
|
|
11117
|
-
/* @__PURE__ */
|
|
11118
|
-
/* @__PURE__ */
|
|
11731
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react57.default.createElement("s", null, "Strikethrough")),
|
|
11732
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react57.default.createElement("u", null, "Underline")),
|
|
11733
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react57.default.createElement("sup", null, "2"), " Superscript"),
|
|
11734
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react57.default.createElement("sub", null, "2"), " Subscript"),
|
|
11735
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11119
11736
|
e.preventDefault();
|
|
11120
11737
|
const chain = editor.chain().focus();
|
|
11121
11738
|
if (!editor.state.selection.empty) {
|
|
@@ -11131,25 +11748,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11131
11748
|
c.run();
|
|
11132
11749
|
}
|
|
11133
11750
|
} }, "\u2715 Clear formatting")
|
|
11134
|
-
), show("link") && /* @__PURE__ */
|
|
11751
|
+
), show("link") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11135
11752
|
"button",
|
|
11136
11753
|
{
|
|
11137
11754
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11138
11755
|
onClick: setLink
|
|
11139
11756
|
},
|
|
11140
|
-
/* @__PURE__ */
|
|
11141
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11757
|
+
/* @__PURE__ */ import_react57.default.createElement(IconLink, null)
|
|
11758
|
+
)), show("lineheight") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11142
11759
|
Dropdown,
|
|
11143
11760
|
{
|
|
11144
11761
|
trigger: {
|
|
11145
|
-
label: /* @__PURE__ */
|
|
11762
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconLineHeight, null),
|
|
11146
11763
|
title: "Line height"
|
|
11147
11764
|
}
|
|
11148
11765
|
},
|
|
11149
11766
|
["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
11767
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11151
11768
|
const isActive = currentLH === lh;
|
|
11152
|
-
return /* @__PURE__ */
|
|
11769
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11153
11770
|
"button",
|
|
11154
11771
|
{
|
|
11155
11772
|
key: lh,
|
|
@@ -11165,19 +11782,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11165
11782
|
lh
|
|
11166
11783
|
);
|
|
11167
11784
|
})
|
|
11168
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11785
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11169
11786
|
"button",
|
|
11170
11787
|
{
|
|
11171
11788
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11172
11789
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11173
11790
|
},
|
|
11174
|
-
/* @__PURE__ */
|
|
11175
|
-
)), /* @__PURE__ */
|
|
11791
|
+
/* @__PURE__ */ import_react57.default.createElement(IconBulletList, null)
|
|
11792
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11176
11793
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11177
11794
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11178
11795
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11179
11796
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11180
|
-
].map((item) => /* @__PURE__ */
|
|
11797
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11181
11798
|
"button",
|
|
11182
11799
|
{
|
|
11183
11800
|
key: item.label,
|
|
@@ -11202,24 +11819,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11202
11819
|
}).run();
|
|
11203
11820
|
}
|
|
11204
11821
|
},
|
|
11205
|
-
/* @__PURE__ */
|
|
11822
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11206
11823
|
" ",
|
|
11207
11824
|
item.label
|
|
11208
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11825
|
+
)))), show("ol") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11209
11826
|
"button",
|
|
11210
11827
|
{
|
|
11211
11828
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11212
11829
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11213
11830
|
},
|
|
11214
|
-
/* @__PURE__ */
|
|
11215
|
-
)), /* @__PURE__ */
|
|
11831
|
+
/* @__PURE__ */ import_react57.default.createElement(IconOrderedList, null)
|
|
11832
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11216
11833
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11217
11834
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11218
11835
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11219
11836
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11220
11837
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11221
11838
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11222
|
-
].map((item) => /* @__PURE__ */
|
|
11839
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11223
11840
|
"button",
|
|
11224
11841
|
{
|
|
11225
11842
|
key: item.label,
|
|
@@ -11244,24 +11861,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11244
11861
|
}).run();
|
|
11245
11862
|
}
|
|
11246
11863
|
},
|
|
11247
|
-
/* @__PURE__ */
|
|
11864
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11248
11865
|
" ",
|
|
11249
11866
|
item.label
|
|
11250
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
11867
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11251
11868
|
Dropdown,
|
|
11252
11869
|
{
|
|
11253
11870
|
trigger: {
|
|
11254
|
-
label: /* @__PURE__ */
|
|
11871
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconAlignLeft, null),
|
|
11255
11872
|
title: "Align",
|
|
11256
11873
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11257
11874
|
}
|
|
11258
11875
|
},
|
|
11259
11876
|
[
|
|
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__ */
|
|
11877
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignLeft, null) },
|
|
11878
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignCenter, null) },
|
|
11879
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignRight, null) },
|
|
11880
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignJustify, null) }
|
|
11881
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11265
11882
|
"button",
|
|
11266
11883
|
{
|
|
11267
11884
|
key: item.value,
|
|
@@ -11272,7 +11889,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11272
11889
|
" ",
|
|
11273
11890
|
item.label
|
|
11274
11891
|
))
|
|
11275
|
-
), show("indent") && /* @__PURE__ */
|
|
11892
|
+
), show("indent") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11276
11893
|
"button",
|
|
11277
11894
|
{
|
|
11278
11895
|
className: "toolbar-btn",
|
|
@@ -11291,8 +11908,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11291
11908
|
}).run();
|
|
11292
11909
|
}
|
|
11293
11910
|
},
|
|
11294
|
-
/* @__PURE__ */
|
|
11295
|
-
)), show("outdent") && /* @__PURE__ */
|
|
11911
|
+
/* @__PURE__ */ import_react57.default.createElement(IconIndentIncrease, null)
|
|
11912
|
+
)), show("outdent") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11296
11913
|
"button",
|
|
11297
11914
|
{
|
|
11298
11915
|
className: "toolbar-btn",
|
|
@@ -11311,29 +11928,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11311
11928
|
}).run();
|
|
11312
11929
|
}
|
|
11313
11930
|
},
|
|
11314
|
-
/* @__PURE__ */
|
|
11315
|
-
))), show("table") && /* @__PURE__ */
|
|
11931
|
+
/* @__PURE__ */ import_react57.default.createElement(IconIndentDecrease, null)
|
|
11932
|
+
))), show("table") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11316
11933
|
"button",
|
|
11317
11934
|
{
|
|
11318
11935
|
className: "toolbar-btn",
|
|
11319
11936
|
onClick: () => document.execCommand("cut")
|
|
11320
11937
|
},
|
|
11321
|
-
/* @__PURE__ */
|
|
11322
|
-
)), show("copy") && /* @__PURE__ */
|
|
11938
|
+
/* @__PURE__ */ import_react57.default.createElement(IconCut, null)
|
|
11939
|
+
)), show("copy") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11323
11940
|
"button",
|
|
11324
11941
|
{
|
|
11325
11942
|
className: "toolbar-btn",
|
|
11326
11943
|
onClick: handleCopy
|
|
11327
11944
|
},
|
|
11328
|
-
copySuccess ? /* @__PURE__ */
|
|
11329
|
-
)), show("paste") && /* @__PURE__ */
|
|
11945
|
+
copySuccess ? /* @__PURE__ */ import_react57.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react57.default.createElement(IconCopy, null)
|
|
11946
|
+
)), show("paste") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11330
11947
|
"button",
|
|
11331
11948
|
{
|
|
11332
11949
|
className: "toolbar-btn",
|
|
11333
11950
|
onClick: handlePaste
|
|
11334
11951
|
},
|
|
11335
|
-
/* @__PURE__ */
|
|
11336
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
11952
|
+
/* @__PURE__ */ import_react57.default.createElement(IconPaste, null)
|
|
11953
|
+
)), show("specialchars") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11337
11954
|
"button",
|
|
11338
11955
|
{
|
|
11339
11956
|
key: char,
|
|
@@ -11341,12 +11958,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11341
11958
|
onClick: () => insertSpecialChar(char)
|
|
11342
11959
|
},
|
|
11343
11960
|
char
|
|
11344
|
-
)))), show("code") && /* @__PURE__ */
|
|
11961
|
+
)))), show("code") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11345
11962
|
Dropdown,
|
|
11346
11963
|
{
|
|
11347
|
-
trigger: { label: /* @__PURE__ */
|
|
11964
|
+
trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11348
11965
|
},
|
|
11349
|
-
/* @__PURE__ */
|
|
11966
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11350
11967
|
if (editor.isActive("codeBlock")) {
|
|
11351
11968
|
const text = (() => {
|
|
11352
11969
|
const { $from } = editor.state.selection;
|
|
@@ -11364,22 +11981,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11364
11981
|
editor.chain().focus().toggleCode().run();
|
|
11365
11982
|
}
|
|
11366
11983
|
} }, "</>", " Inline Code"),
|
|
11367
|
-
/* @__PURE__ */
|
|
11368
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
11984
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
11985
|
+
), show("fullscreen") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11369
11986
|
"button",
|
|
11370
11987
|
{
|
|
11371
11988
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11372
11989
|
onClick: onToggleFullscreen
|
|
11373
11990
|
},
|
|
11374
|
-
/* @__PURE__ */
|
|
11375
|
-
)), show("tts") && /* @__PURE__ */
|
|
11991
|
+
/* @__PURE__ */ import_react57.default.createElement(IconFullscreen, null)
|
|
11992
|
+
)), show("tts") && /* @__PURE__ */ import_react57.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react57.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11376
11993
|
"button",
|
|
11377
11994
|
{
|
|
11378
11995
|
className: "toolbar-btn",
|
|
11379
11996
|
onClick: handleQuickTranslate
|
|
11380
11997
|
},
|
|
11381
|
-
/* @__PURE__ */
|
|
11382
|
-
)), /* @__PURE__ */
|
|
11998
|
+
/* @__PURE__ */ import_react57.default.createElement(IconTranslate, null)
|
|
11999
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react57.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11383
12000
|
"button",
|
|
11384
12001
|
{
|
|
11385
12002
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11422,11 +12039,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11422
12039
|
}
|
|
11423
12040
|
}
|
|
11424
12041
|
},
|
|
11425
|
-
/* @__PURE__ */
|
|
11426
|
-
)), /* @__PURE__ */
|
|
12042
|
+
/* @__PURE__ */ import_react57.default.createElement(IconTaskList, null)
|
|
12043
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11427
12044
|
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
12045
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11429
|
-
return /* @__PURE__ */
|
|
12046
|
+
return /* @__PURE__ */ import_react57.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11430
12047
|
const { state } = editor;
|
|
11431
12048
|
const { schema } = state;
|
|
11432
12049
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11459,8 +12076,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11459
12076
|
}
|
|
11460
12077
|
return true;
|
|
11461
12078
|
}).run();
|
|
11462
|
-
} }, /* @__PURE__ */
|
|
11463
|
-
})))), onClose && /* @__PURE__ */
|
|
12079
|
+
} }, /* @__PURE__ */ import_react57.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react57.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12080
|
+
})))), onClose && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11464
12081
|
"button",
|
|
11465
12082
|
{
|
|
11466
12083
|
className: "toolbar-btn btn-cross",
|
|
@@ -11476,8 +12093,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11476
12093
|
onClose();
|
|
11477
12094
|
}
|
|
11478
12095
|
},
|
|
11479
|
-
/* @__PURE__ */
|
|
11480
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12096
|
+
/* @__PURE__ */ import_react57.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12097
|
+
))), showTranslateModal && /* @__PURE__ */ import_react57.default.createElement(
|
|
11481
12098
|
TranslateModal_default,
|
|
11482
12099
|
{
|
|
11483
12100
|
editor,
|
|
@@ -11495,26 +12112,26 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11495
12112
|
var Toolbar_default = Toolbar;
|
|
11496
12113
|
|
|
11497
12114
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
11498
|
-
var
|
|
11499
|
-
var
|
|
12115
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
12116
|
+
var import_react_dom15 = require("react-dom");
|
|
11500
12117
|
var ALIGNMENTS = [
|
|
11501
12118
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11502
12119
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
11503
12120
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
11504
12121
|
];
|
|
11505
12122
|
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,
|
|
12123
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("image");
|
|
12124
|
+
const [src, setSrc] = (0, import_react58.useState)(node?.attrs?.src || "");
|
|
12125
|
+
const [title, setTitle] = (0, import_react58.useState)(node?.attrs?.title || "");
|
|
12126
|
+
const [alt, setAlt] = (0, import_react58.useState)(node?.attrs?.alt || "");
|
|
12127
|
+
const [link, setLink] = (0, import_react58.useState)("");
|
|
12128
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react58.useState)(false);
|
|
12129
|
+
const [width, setWidth] = (0, import_react58.useState)("");
|
|
12130
|
+
const [height, setHeight] = (0, import_react58.useState)("");
|
|
12131
|
+
const [lockRatio, setLockRatio] = (0, import_react58.useState)(true);
|
|
12132
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react58.useState)(0);
|
|
12133
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react58.useState)(0);
|
|
12134
|
+
(0, import_react58.useEffect)(() => {
|
|
11518
12135
|
if (src) {
|
|
11519
12136
|
const img = new window.Image();
|
|
11520
12137
|
img.onload = () => {
|
|
@@ -11553,7 +12170,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11553
12170
|
editor.chain().focus().deleteSelection().run();
|
|
11554
12171
|
onClose();
|
|
11555
12172
|
};
|
|
11556
|
-
return /* @__PURE__ */
|
|
12173
|
+
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, "Image 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" }, /* @__PURE__ */ import_react58.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11557
12174
|
"input",
|
|
11558
12175
|
{
|
|
11559
12176
|
type: "number",
|
|
@@ -11561,14 +12178,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11561
12178
|
value: width,
|
|
11562
12179
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11563
12180
|
}
|
|
11564
|
-
), /* @__PURE__ */
|
|
12181
|
+
), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11565
12182
|
"button",
|
|
11566
12183
|
{
|
|
11567
12184
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11568
12185
|
onClick: () => setLockRatio(!lockRatio)
|
|
11569
12186
|
},
|
|
11570
12187
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11571
|
-
)), /* @__PURE__ */
|
|
12188
|
+
)), /* @__PURE__ */ import_react58.default.createElement(
|
|
11572
12189
|
"input",
|
|
11573
12190
|
{
|
|
11574
12191
|
type: "number",
|
|
@@ -11576,21 +12193,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11576
12193
|
value: height,
|
|
11577
12194
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11578
12195
|
}
|
|
11579
|
-
))), /* @__PURE__ */
|
|
12196
|
+
))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11580
12197
|
"button",
|
|
11581
12198
|
{
|
|
11582
12199
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
11583
12200
|
onClick: () => setActiveTab("image")
|
|
11584
12201
|
},
|
|
11585
12202
|
"Image"
|
|
11586
|
-
), /* @__PURE__ */
|
|
12203
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11587
12204
|
"button",
|
|
11588
12205
|
{
|
|
11589
12206
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
11590
12207
|
onClick: () => setActiveTab("advanced")
|
|
11591
12208
|
},
|
|
11592
12209
|
"Advanced"
|
|
11593
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12210
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11594
12211
|
"input",
|
|
11595
12212
|
{
|
|
11596
12213
|
type: "text",
|
|
@@ -11598,7 +12215,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11598
12215
|
value: src,
|
|
11599
12216
|
onChange: (e) => setSrc(e.target.value)
|
|
11600
12217
|
}
|
|
11601
|
-
), /* @__PURE__ */
|
|
12218
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11602
12219
|
"input",
|
|
11603
12220
|
{
|
|
11604
12221
|
type: "text",
|
|
@@ -11606,7 +12223,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11606
12223
|
value: title,
|
|
11607
12224
|
onChange: (e) => setTitle(e.target.value)
|
|
11608
12225
|
}
|
|
11609
|
-
), /* @__PURE__ */
|
|
12226
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11610
12227
|
"input",
|
|
11611
12228
|
{
|
|
11612
12229
|
type: "text",
|
|
@@ -11614,7 +12231,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11614
12231
|
value: alt,
|
|
11615
12232
|
onChange: (e) => setAlt(e.target.value)
|
|
11616
12233
|
}
|
|
11617
|
-
), /* @__PURE__ */
|
|
12234
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11618
12235
|
"input",
|
|
11619
12236
|
{
|
|
11620
12237
|
type: "text",
|
|
@@ -11622,23 +12239,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11622
12239
|
value: link,
|
|
11623
12240
|
onChange: (e) => setLink(e.target.value)
|
|
11624
12241
|
}
|
|
11625
|
-
), /* @__PURE__ */
|
|
12242
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11626
12243
|
"input",
|
|
11627
12244
|
{
|
|
11628
12245
|
type: "checkbox",
|
|
11629
12246
|
checked: openInNewTab,
|
|
11630
12247
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
11631
12248
|
}
|
|
11632
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12249
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react58.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react58.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__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"))));
|
|
11633
12250
|
};
|
|
11634
12251
|
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,
|
|
12252
|
+
const [showModal, setShowModal] = (0, import_react58.useState)(false);
|
|
12253
|
+
const [showAlign, setShowAlign] = (0, import_react58.useState)(false);
|
|
12254
|
+
const [showVAlign, setShowVAlign] = (0, import_react58.useState)(false);
|
|
12255
|
+
const [copyStatus, setCopyStatus] = (0, import_react58.useState)("");
|
|
12256
|
+
const [pos, setPos] = (0, import_react58.useState)(null);
|
|
12257
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
12258
|
+
(0, import_react58.useEffect)(() => {
|
|
11642
12259
|
if (!editor) return;
|
|
11643
12260
|
const update = () => {
|
|
11644
12261
|
const { selection } = editor.state;
|
|
@@ -11667,8 +12284,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11667
12284
|
}, [editor]);
|
|
11668
12285
|
const node = editor?.state.selection.node;
|
|
11669
12286
|
const isImage = node && node.type.name === "image";
|
|
11670
|
-
if (!editor || !isImage || !pos) return showModal ? (0,
|
|
11671
|
-
/* @__PURE__ */
|
|
12287
|
+
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12288
|
+
/* @__PURE__ */ import_react58.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
11672
12289
|
document.body
|
|
11673
12290
|
) : null;
|
|
11674
12291
|
const handleDelete = () => {
|
|
@@ -11744,8 +12361,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11744
12361
|
);
|
|
11745
12362
|
setShowVAlign(false);
|
|
11746
12363
|
};
|
|
11747
|
-
return (0,
|
|
11748
|
-
/* @__PURE__ */
|
|
12364
|
+
return (0, import_react_dom15.createPortal)(
|
|
12365
|
+
/* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11749
12366
|
"div",
|
|
11750
12367
|
{
|
|
11751
12368
|
className: "image-toolbar",
|
|
@@ -11753,14 +12370,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11753
12370
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11754
12371
|
onMouseDown: (e) => e.preventDefault()
|
|
11755
12372
|
},
|
|
11756
|
-
/* @__PURE__ */
|
|
11757
|
-
/* @__PURE__ */
|
|
11758
|
-
/* @__PURE__ */
|
|
11759
|
-
/* @__PURE__ */
|
|
12373
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12374
|
+
/* @__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")),
|
|
12375
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy image", 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)),
|
|
12376
|
+
/* @__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: () => {
|
|
11760
12377
|
setShowAlign(!showAlign);
|
|
11761
12378
|
setShowVAlign(false);
|
|
11762
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
11763
|
-
), showModal && /* @__PURE__ */
|
|
12379
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react58.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12380
|
+
), showModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
11764
12381
|
ImagePropertiesModal,
|
|
11765
12382
|
{
|
|
11766
12383
|
editor,
|
|
@@ -11774,8 +12391,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11774
12391
|
var ImageToolbar_default = ImageToolbar;
|
|
11775
12392
|
|
|
11776
12393
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
11777
|
-
var
|
|
11778
|
-
var
|
|
12394
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12395
|
+
var import_react_dom16 = require("react-dom");
|
|
11779
12396
|
var ALIGNMENTS2 = [
|
|
11780
12397
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11781
12398
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
@@ -11783,10 +12400,10 @@ var ALIGNMENTS2 = [
|
|
|
11783
12400
|
];
|
|
11784
12401
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
11785
12402
|
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,
|
|
12403
|
+
const [src, setSrc] = (0, import_react59.useState)(node?.attrs?.src || "");
|
|
12404
|
+
const [width, setWidth] = (0, import_react59.useState)(String(node?.attrs?.width || 640));
|
|
12405
|
+
const [height, setHeight] = (0, import_react59.useState)(String(node?.attrs?.height || 360));
|
|
12406
|
+
const [lockRatio, setLockRatio] = (0, import_react59.useState)(true);
|
|
11790
12407
|
const handleWidthChange = (val) => {
|
|
11791
12408
|
setWidth(val);
|
|
11792
12409
|
if (lockRatio) {
|
|
@@ -11819,7 +12436,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11819
12436
|
onClose();
|
|
11820
12437
|
};
|
|
11821
12438
|
const isYoutube = nodeType === "youtube";
|
|
11822
|
-
return /* @__PURE__ */
|
|
12439
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react59.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react59.default.createElement(
|
|
11823
12440
|
"iframe",
|
|
11824
12441
|
{
|
|
11825
12442
|
src,
|
|
@@ -11827,14 +12444,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11827
12444
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
11828
12445
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
11829
12446
|
}
|
|
11830
|
-
) : /* @__PURE__ */
|
|
12447
|
+
) : /* @__PURE__ */ import_react59.default.createElement(
|
|
11831
12448
|
"video",
|
|
11832
12449
|
{
|
|
11833
12450
|
src,
|
|
11834
12451
|
controls: true,
|
|
11835
12452
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
11836
12453
|
}
|
|
11837
|
-
)), /* @__PURE__ */
|
|
12454
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
11838
12455
|
"input",
|
|
11839
12456
|
{
|
|
11840
12457
|
type: "number",
|
|
@@ -11842,14 +12459,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11842
12459
|
value: width,
|
|
11843
12460
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11844
12461
|
}
|
|
11845
|
-
), /* @__PURE__ */
|
|
12462
|
+
), /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
11846
12463
|
"button",
|
|
11847
12464
|
{
|
|
11848
12465
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11849
12466
|
onClick: () => setLockRatio(!lockRatio)
|
|
11850
12467
|
},
|
|
11851
12468
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11852
|
-
)), /* @__PURE__ */
|
|
12469
|
+
)), /* @__PURE__ */ import_react59.default.createElement(
|
|
11853
12470
|
"input",
|
|
11854
12471
|
{
|
|
11855
12472
|
type: "number",
|
|
@@ -11857,7 +12474,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11857
12474
|
value: height,
|
|
11858
12475
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11859
12476
|
}
|
|
11860
|
-
))), /* @__PURE__ */
|
|
12477
|
+
))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react59.default.createElement(
|
|
11861
12478
|
"input",
|
|
11862
12479
|
{
|
|
11863
12480
|
type: "text",
|
|
@@ -11865,7 +12482,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11865
12482
|
value: src,
|
|
11866
12483
|
onChange: (e) => setSrc(e.target.value)
|
|
11867
12484
|
}
|
|
11868
|
-
), /* @__PURE__ */
|
|
12485
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react59.default.createElement(
|
|
11869
12486
|
"input",
|
|
11870
12487
|
{
|
|
11871
12488
|
type: "number",
|
|
@@ -11873,7 +12490,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11873
12490
|
value: width,
|
|
11874
12491
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11875
12492
|
}
|
|
11876
|
-
), /* @__PURE__ */
|
|
12493
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react59.default.createElement(
|
|
11877
12494
|
"input",
|
|
11878
12495
|
{
|
|
11879
12496
|
type: "number",
|
|
@@ -11881,16 +12498,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11881
12498
|
value: height,
|
|
11882
12499
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11883
12500
|
}
|
|
11884
|
-
)))), /* @__PURE__ */
|
|
12501
|
+
)))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
11885
12502
|
};
|
|
11886
12503
|
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,
|
|
12504
|
+
const [showModal, setShowModal] = (0, import_react59.useState)(false);
|
|
12505
|
+
const [showSize, setShowSize] = (0, import_react59.useState)(false);
|
|
12506
|
+
const [showAlign, setShowAlign] = (0, import_react59.useState)(false);
|
|
12507
|
+
const [copyStatus, setCopyStatus] = (0, import_react59.useState)("");
|
|
12508
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12509
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12510
|
+
(0, import_react59.useEffect)(() => {
|
|
11894
12511
|
if (!editor) return;
|
|
11895
12512
|
const update = () => {
|
|
11896
12513
|
const { selection } = editor.state;
|
|
@@ -11920,8 +12537,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11920
12537
|
const node = editor?.state.selection.node;
|
|
11921
12538
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
11922
12539
|
const nodeType = node?.type.name;
|
|
11923
|
-
if (!editor || !isVideo || !pos) return showModal ? (0,
|
|
11924
|
-
/* @__PURE__ */
|
|
12540
|
+
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12541
|
+
/* @__PURE__ */ import_react59.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
11925
12542
|
document.body
|
|
11926
12543
|
) : null;
|
|
11927
12544
|
const handleDelete = () => {
|
|
@@ -11967,8 +12584,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11967
12584
|
})
|
|
11968
12585
|
);
|
|
11969
12586
|
};
|
|
11970
|
-
return (0,
|
|
11971
|
-
/* @__PURE__ */
|
|
12587
|
+
return (0, import_react_dom16.createPortal)(
|
|
12588
|
+
/* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
|
|
11972
12589
|
"div",
|
|
11973
12590
|
{
|
|
11974
12591
|
className: "image-toolbar",
|
|
@@ -11976,30 +12593,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11976
12593
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11977
12594
|
onMouseDown: (e) => e.preventDefault()
|
|
11978
12595
|
},
|
|
11979
|
-
/* @__PURE__ */
|
|
11980
|
-
/* @__PURE__ */
|
|
11981
|
-
/* @__PURE__ */
|
|
11982
|
-
/* @__PURE__ */
|
|
12596
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12597
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12598
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12599
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11983
12600
|
setShowSize(!showSize);
|
|
11984
12601
|
setShowAlign(false);
|
|
11985
|
-
} }, /* @__PURE__ */
|
|
12602
|
+
} }, /* @__PURE__ */ import_react59.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11986
12603
|
handleResize("small");
|
|
11987
12604
|
setShowSize(false);
|
|
11988
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12605
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11989
12606
|
handleResize("medium");
|
|
11990
12607
|
setShowSize(false);
|
|
11991
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12608
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11992
12609
|
handleResize("large");
|
|
11993
12610
|
setShowSize(false);
|
|
11994
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12611
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11995
12612
|
handleResize("full");
|
|
11996
12613
|
setShowSize(false);
|
|
11997
12614
|
} }, "Full (854x480)"))),
|
|
11998
|
-
/* @__PURE__ */
|
|
12615
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11999
12616
|
setShowAlign(!showAlign);
|
|
12000
12617
|
setShowSize(false);
|
|
12001
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12002
|
-
), showModal && /* @__PURE__ */
|
|
12618
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react59.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12619
|
+
), showModal && /* @__PURE__ */ import_react59.default.createElement(
|
|
12003
12620
|
VideoPropertiesModal,
|
|
12004
12621
|
{
|
|
12005
12622
|
editor,
|
|
@@ -12014,22 +12631,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12014
12631
|
var VideoToolbar_default = VideoToolbar;
|
|
12015
12632
|
|
|
12016
12633
|
// 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__ */
|
|
12634
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
12635
|
+
var import_react_dom17 = require("react-dom");
|
|
12636
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12637
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12638
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12639
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12640
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12641
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12642
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.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_react60.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" }));
|
|
12643
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12644
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12645
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react60.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12029
12646
|
var TableToolbar = ({ editor }) => {
|
|
12030
|
-
const [pos, setPos] = (0,
|
|
12031
|
-
const toolbarRef = (0,
|
|
12032
|
-
(0,
|
|
12647
|
+
const [pos, setPos] = (0, import_react60.useState)(null);
|
|
12648
|
+
const toolbarRef = (0, import_react60.useRef)(null);
|
|
12649
|
+
(0, import_react60.useEffect)(() => {
|
|
12033
12650
|
if (!editor) return;
|
|
12034
12651
|
const update = () => {
|
|
12035
12652
|
if (!editor.isActive("table")) {
|
|
@@ -12072,8 +12689,8 @@ var TableToolbar = ({ editor }) => {
|
|
|
12072
12689
|
const canMerge = editor.can().mergeCells();
|
|
12073
12690
|
const canSplit = editor.can().splitCell();
|
|
12074
12691
|
const prevent = (e) => e.preventDefault();
|
|
12075
|
-
return (0,
|
|
12076
|
-
/* @__PURE__ */
|
|
12692
|
+
return (0, import_react_dom17.createPortal)(
|
|
12693
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12077
12694
|
"div",
|
|
12078
12695
|
{
|
|
12079
12696
|
ref: toolbarRef,
|
|
@@ -12081,19 +12698,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12081
12698
|
style: { top: pos.top, left: pos.left },
|
|
12082
12699
|
onMouseDown: prevent
|
|
12083
12700
|
},
|
|
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__ */
|
|
12701
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddRowBefore, null))),
|
|
12702
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddRowAfter, null))),
|
|
12703
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteRow, null))),
|
|
12704
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12705
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddColBefore, null))),
|
|
12706
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddColAfter, null))),
|
|
12707
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteCol, null))),
|
|
12708
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12709
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react60.default.createElement(IconMergeCells, null))),
|
|
12710
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react60.default.createElement(IconSplitCell, null))),
|
|
12711
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12712
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react60.default.createElement(IconToggleHeader, null))),
|
|
12713
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteTable, null)))
|
|
12097
12714
|
),
|
|
12098
12715
|
document.body
|
|
12099
12716
|
);
|
|
@@ -12259,7 +12876,7 @@ var RufousTextEditor = ({
|
|
|
12259
12876
|
sx
|
|
12260
12877
|
}) => {
|
|
12261
12878
|
const sxClass = useSx(sx);
|
|
12262
|
-
const toolbarButtons = (0,
|
|
12879
|
+
const toolbarButtons = (0, import_react61.useMemo)(() => {
|
|
12263
12880
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12264
12881
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12265
12882
|
if (hideButtons) {
|
|
@@ -12267,17 +12884,17 @@ var RufousTextEditor = ({
|
|
|
12267
12884
|
}
|
|
12268
12885
|
return visible;
|
|
12269
12886
|
}, [buttons, variant, hideButtons]);
|
|
12270
|
-
const mentionSuggestion = (0,
|
|
12271
|
-
const onChangeRef = (0,
|
|
12272
|
-
const onBlurRef = (0,
|
|
12273
|
-
(0,
|
|
12887
|
+
const mentionSuggestion = (0, import_react61.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
12888
|
+
const onChangeRef = (0, import_react61.useRef)(onChange);
|
|
12889
|
+
const onBlurRef = (0, import_react61.useRef)(onBlur);
|
|
12890
|
+
(0, import_react61.useEffect)(() => {
|
|
12274
12891
|
onChangeRef.current = onChange;
|
|
12275
12892
|
}, [onChange]);
|
|
12276
|
-
(0,
|
|
12893
|
+
(0, import_react61.useEffect)(() => {
|
|
12277
12894
|
onBlurRef.current = onBlur;
|
|
12278
12895
|
}, [onBlur]);
|
|
12279
12896
|
const isEditable = editable && !disabled;
|
|
12280
|
-
const editor = (0,
|
|
12897
|
+
const editor = (0, import_react62.useEditor)({
|
|
12281
12898
|
editable: isEditable,
|
|
12282
12899
|
extensions: [
|
|
12283
12900
|
import_starter_kit.default,
|
|
@@ -12374,8 +12991,8 @@ var RufousTextEditor = ({
|
|
|
12374
12991
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12375
12992
|
}
|
|
12376
12993
|
});
|
|
12377
|
-
const wrapperRef = (0,
|
|
12378
|
-
(0,
|
|
12994
|
+
const wrapperRef = (0, import_react61.useRef)(null);
|
|
12995
|
+
(0, import_react61.useEffect)(() => {
|
|
12379
12996
|
if (!editor) return;
|
|
12380
12997
|
let blurTimer = null;
|
|
12381
12998
|
const handler = ({ event }) => {
|
|
@@ -12393,15 +13010,15 @@ var RufousTextEditor = ({
|
|
|
12393
13010
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12394
13011
|
};
|
|
12395
13012
|
}, [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,
|
|
13013
|
+
const setLinkRef = (0, import_react61.useRef)(null);
|
|
13014
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react61.useState)(false);
|
|
13015
|
+
const [linkUrl, setLinkUrl] = (0, import_react61.useState)("");
|
|
13016
|
+
const [linkText, setLinkText] = (0, import_react61.useState)("");
|
|
13017
|
+
const [linkClassName, setLinkClassName] = (0, import_react61.useState)("");
|
|
13018
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react61.useState)(true);
|
|
13019
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react61.useState)(true);
|
|
13020
|
+
const [linkSelection, setLinkSelection] = (0, import_react61.useState)(null);
|
|
13021
|
+
const setLink = (0, import_react61.useCallback)(() => {
|
|
12405
13022
|
if (!editor) return;
|
|
12406
13023
|
const attrs = editor.getAttributes("link");
|
|
12407
13024
|
const previousUrl = attrs.href || "";
|
|
@@ -12438,10 +13055,10 @@ var RufousTextEditor = ({
|
|
|
12438
13055
|
setLinkSelection({ from, to });
|
|
12439
13056
|
setLinkModalOpen(true);
|
|
12440
13057
|
}, [editor]);
|
|
12441
|
-
(0,
|
|
13058
|
+
(0, import_react61.useEffect)(() => {
|
|
12442
13059
|
setLinkRef.current = setLink;
|
|
12443
13060
|
}, [setLink]);
|
|
12444
|
-
(0,
|
|
13061
|
+
(0, import_react61.useEffect)(() => {
|
|
12445
13062
|
if (!editor?.view) return;
|
|
12446
13063
|
const handleKeyDown = (event) => {
|
|
12447
13064
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -12473,7 +13090,7 @@ var RufousTextEditor = ({
|
|
|
12473
13090
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12474
13091
|
};
|
|
12475
13092
|
}, [editor]);
|
|
12476
|
-
const handleLinkSubmit = (0,
|
|
13093
|
+
const handleLinkSubmit = (0, import_react61.useCallback)(() => {
|
|
12477
13094
|
if (!editor || !linkSelection) return;
|
|
12478
13095
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12479
13096
|
if (linkUrl === "") {
|
|
@@ -12509,7 +13126,7 @@ var RufousTextEditor = ({
|
|
|
12509
13126
|
setLinkClassName("");
|
|
12510
13127
|
setLinkSelection(null);
|
|
12511
13128
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
12512
|
-
const handleLinkRemove = (0,
|
|
13129
|
+
const handleLinkRemove = (0, import_react61.useCallback)(() => {
|
|
12513
13130
|
if (!editor || !linkSelection) return;
|
|
12514
13131
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
12515
13132
|
setLinkModalOpen(false);
|
|
@@ -12518,7 +13135,7 @@ var RufousTextEditor = ({
|
|
|
12518
13135
|
setLinkClassName("");
|
|
12519
13136
|
setLinkSelection(null);
|
|
12520
13137
|
}, [editor, linkSelection]);
|
|
12521
|
-
const handleLinkCancel = (0,
|
|
13138
|
+
const handleLinkCancel = (0, import_react61.useCallback)(() => {
|
|
12522
13139
|
setLinkModalOpen(false);
|
|
12523
13140
|
setLinkUrl("");
|
|
12524
13141
|
setLinkText("");
|
|
@@ -12526,21 +13143,21 @@ var RufousTextEditor = ({
|
|
|
12526
13143
|
setLinkSelection(null);
|
|
12527
13144
|
editor?.chain().focus().run();
|
|
12528
13145
|
}, [editor]);
|
|
12529
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
12530
|
-
const handleSave = (0,
|
|
13146
|
+
const [saveStatus, setSaveStatus] = (0, import_react61.useState)("");
|
|
13147
|
+
const handleSave = (0, import_react61.useCallback)(() => {
|
|
12531
13148
|
if (!editor || !onSaveProp) return;
|
|
12532
13149
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
12533
13150
|
setSaveStatus("Saved!");
|
|
12534
13151
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
12535
13152
|
}, [editor, onSaveProp]);
|
|
12536
|
-
const handleExport = (0,
|
|
13153
|
+
const handleExport = (0, import_react61.useCallback)(() => {
|
|
12537
13154
|
if (!editor || !onExportProp) return;
|
|
12538
13155
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
12539
13156
|
}, [editor, onExportProp]);
|
|
12540
|
-
const providerValue = (0,
|
|
12541
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
12542
|
-
const toggleFullscreen = (0,
|
|
12543
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13157
|
+
const providerValue = (0, import_react61.useMemo)(() => ({ editor }), [editor]);
|
|
13158
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react61.useState)(false);
|
|
13159
|
+
const toggleFullscreen = (0, import_react61.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13160
|
+
const wrapperJsx = /* @__PURE__ */ import_react61.default.createElement(
|
|
12544
13161
|
"div",
|
|
12545
13162
|
{
|
|
12546
13163
|
ref: wrapperRef,
|
|
@@ -12551,7 +13168,7 @@ var RufousTextEditor = ({
|
|
|
12551
13168
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
12552
13169
|
}
|
|
12553
13170
|
},
|
|
12554
|
-
/* @__PURE__ */
|
|
13171
|
+
/* @__PURE__ */ import_react61.default.createElement(import_react62.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react61.default.createElement(
|
|
12555
13172
|
Toolbar_default,
|
|
12556
13173
|
{
|
|
12557
13174
|
editor,
|
|
@@ -12566,8 +13183,8 @@ var RufousTextEditor = ({
|
|
|
12566
13183
|
isFullscreen,
|
|
12567
13184
|
onToggleFullscreen: toggleFullscreen
|
|
12568
13185
|
}
|
|
12569
|
-
), /* @__PURE__ */
|
|
12570
|
-
|
|
13186
|
+
), /* @__PURE__ */ import_react61.default.createElement(import_react62.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react61.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react61.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react61.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react61.default.createElement(
|
|
13187
|
+
import_react62.BubbleMenu,
|
|
12571
13188
|
{
|
|
12572
13189
|
editor,
|
|
12573
13190
|
className: "bubble-menu",
|
|
@@ -12584,31 +13201,31 @@ var RufousTextEditor = ({
|
|
|
12584
13201
|
}
|
|
12585
13202
|
}
|
|
12586
13203
|
},
|
|
12587
|
-
/* @__PURE__ */
|
|
13204
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12588
13205
|
"button",
|
|
12589
13206
|
{
|
|
12590
13207
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
12591
13208
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
12592
13209
|
},
|
|
12593
|
-
/* @__PURE__ */
|
|
13210
|
+
/* @__PURE__ */ import_react61.default.createElement("strong", null, "B")
|
|
12594
13211
|
),
|
|
12595
|
-
/* @__PURE__ */
|
|
13212
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12596
13213
|
"button",
|
|
12597
13214
|
{
|
|
12598
13215
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
12599
13216
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
12600
13217
|
},
|
|
12601
|
-
/* @__PURE__ */
|
|
13218
|
+
/* @__PURE__ */ import_react61.default.createElement("em", null, "I")
|
|
12602
13219
|
),
|
|
12603
|
-
/* @__PURE__ */
|
|
13220
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12604
13221
|
"button",
|
|
12605
13222
|
{
|
|
12606
13223
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
12607
13224
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
12608
13225
|
},
|
|
12609
|
-
/* @__PURE__ */
|
|
13226
|
+
/* @__PURE__ */ import_react61.default.createElement("s", null, "S")
|
|
12610
13227
|
),
|
|
12611
|
-
/* @__PURE__ */
|
|
13228
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12612
13229
|
"button",
|
|
12613
13230
|
{
|
|
12614
13231
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -12616,7 +13233,7 @@ var RufousTextEditor = ({
|
|
|
12616
13233
|
},
|
|
12617
13234
|
"</>"
|
|
12618
13235
|
),
|
|
12619
|
-
/* @__PURE__ */
|
|
13236
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12620
13237
|
"button",
|
|
12621
13238
|
{
|
|
12622
13239
|
onClick: setLink,
|
|
@@ -12624,8 +13241,8 @@ var RufousTextEditor = ({
|
|
|
12624
13241
|
},
|
|
12625
13242
|
"\u{1F517}"
|
|
12626
13243
|
)
|
|
12627
|
-
), editor && /* @__PURE__ */
|
|
12628
|
-
|
|
13244
|
+
), editor && /* @__PURE__ */ import_react61.default.createElement(
|
|
13245
|
+
import_react62.FloatingMenu,
|
|
12629
13246
|
{
|
|
12630
13247
|
editor,
|
|
12631
13248
|
className: "floating-menu",
|
|
@@ -12639,7 +13256,7 @@ var RufousTextEditor = ({
|
|
|
12639
13256
|
}
|
|
12640
13257
|
}
|
|
12641
13258
|
},
|
|
12642
|
-
/* @__PURE__ */
|
|
13259
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12643
13260
|
"button",
|
|
12644
13261
|
{
|
|
12645
13262
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -12647,7 +13264,7 @@ var RufousTextEditor = ({
|
|
|
12647
13264
|
},
|
|
12648
13265
|
"H1"
|
|
12649
13266
|
),
|
|
12650
|
-
/* @__PURE__ */
|
|
13267
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12651
13268
|
"button",
|
|
12652
13269
|
{
|
|
12653
13270
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -12655,7 +13272,7 @@ var RufousTextEditor = ({
|
|
|
12655
13272
|
},
|
|
12656
13273
|
"H2"
|
|
12657
13274
|
),
|
|
12658
|
-
/* @__PURE__ */
|
|
13275
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12659
13276
|
"button",
|
|
12660
13277
|
{
|
|
12661
13278
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -12663,7 +13280,7 @@ var RufousTextEditor = ({
|
|
|
12663
13280
|
},
|
|
12664
13281
|
"\u2022 List"
|
|
12665
13282
|
),
|
|
12666
|
-
/* @__PURE__ */
|
|
13283
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12667
13284
|
"button",
|
|
12668
13285
|
{
|
|
12669
13286
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -12671,7 +13288,7 @@ var RufousTextEditor = ({
|
|
|
12671
13288
|
},
|
|
12672
13289
|
"1. List"
|
|
12673
13290
|
),
|
|
12674
|
-
/* @__PURE__ */
|
|
13291
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12675
13292
|
"button",
|
|
12676
13293
|
{
|
|
12677
13294
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -12679,8 +13296,8 @@ var RufousTextEditor = ({
|
|
|
12679
13296
|
},
|
|
12680
13297
|
"\u201C Quote"
|
|
12681
13298
|
)
|
|
12682
|
-
), /* @__PURE__ */
|
|
12683
|
-
/* @__PURE__ */
|
|
13299
|
+
), /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react61.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react61.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react61.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react61.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13300
|
+
/* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react61.default.createElement(
|
|
12684
13301
|
"input",
|
|
12685
13302
|
{
|
|
12686
13303
|
type: "url",
|
|
@@ -12693,7 +13310,7 @@ var RufousTextEditor = ({
|
|
|
12693
13310
|
placeholder: "https://example.com",
|
|
12694
13311
|
autoFocus: true
|
|
12695
13312
|
}
|
|
12696
|
-
)), /* @__PURE__ */
|
|
13313
|
+
)), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react61.default.createElement(
|
|
12697
13314
|
"input",
|
|
12698
13315
|
{
|
|
12699
13316
|
type: "text",
|
|
@@ -12705,26 +13322,26 @@ var RufousTextEditor = ({
|
|
|
12705
13322
|
},
|
|
12706
13323
|
placeholder: "Link text"
|
|
12707
13324
|
}
|
|
12708
|
-
)), /* @__PURE__ */
|
|
13325
|
+
)), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react61.default.createElement(
|
|
12709
13326
|
"input",
|
|
12710
13327
|
{
|
|
12711
13328
|
type: "checkbox",
|
|
12712
13329
|
checked: linkNewTab,
|
|
12713
13330
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
12714
13331
|
}
|
|
12715
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13332
|
+
), "Open in new tab"), /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react61.default.createElement(
|
|
12716
13333
|
"input",
|
|
12717
13334
|
{
|
|
12718
13335
|
type: "checkbox",
|
|
12719
13336
|
checked: linkNoFollow,
|
|
12720
13337
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
12721
13338
|
}
|
|
12722
|
-
), "No follow"))), /* @__PURE__ */
|
|
13339
|
+
), "No follow"))), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react61.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
12723
13340
|
document.body
|
|
12724
13341
|
)),
|
|
12725
|
-
helperText && /* @__PURE__ */
|
|
13342
|
+
helperText && /* @__PURE__ */ import_react61.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
12726
13343
|
);
|
|
12727
|
-
return isFullscreen ? (0,
|
|
13344
|
+
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
12728
13345
|
};
|
|
12729
13346
|
var RufousTextContent = ({ content, className, style, sx }) => {
|
|
12730
13347
|
const sxClass = useSx(sx);
|
|
@@ -12733,7 +13350,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12733
13350
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
12734
13351
|
} catch {
|
|
12735
13352
|
}
|
|
12736
|
-
return /* @__PURE__ */
|
|
13353
|
+
return /* @__PURE__ */ import_react61.default.createElement(
|
|
12737
13354
|
"div",
|
|
12738
13355
|
{
|
|
12739
13356
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -12872,11 +13489,13 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12872
13489
|
ToggleButtonGroup,
|
|
12873
13490
|
Tooltip,
|
|
12874
13491
|
TrashIcon,
|
|
13492
|
+
TreeSelect,
|
|
12875
13493
|
Typography,
|
|
12876
13494
|
UnArchivedIcon,
|
|
12877
13495
|
UnsubscribeIcon,
|
|
12878
13496
|
UploadIcon,
|
|
12879
13497
|
UserAssignIcon,
|
|
13498
|
+
UserSelectionField,
|
|
12880
13499
|
ViewIcon,
|
|
12881
13500
|
WorkItemIcon,
|
|
12882
13501
|
Zoom,
|