@rufous/ui 0.3.11 → 0.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.cjs +1191 -533
- package/dist/main.css +363 -22
- package/dist/main.d.cts +77 -1
- package/dist/main.d.ts +77 -1
- package/dist/main.js +1266 -604
- package/package.json +2 -2
package/dist/main.cjs
CHANGED
|
@@ -157,6 +157,7 @@ __export(main_exports, {
|
|
|
157
157
|
ToggleButtonGroup: () => ToggleButtonGroup,
|
|
158
158
|
Tooltip: () => Tooltip,
|
|
159
159
|
TrashIcon: () => trashIcon_default,
|
|
160
|
+
TreeSelect: () => TreeSelect,
|
|
160
161
|
Typography: () => Typography,
|
|
161
162
|
UnArchivedIcon: () => unArchivedIcon_default,
|
|
162
163
|
UnsubscribeIcon: () => unsubscribeIcon_default,
|
|
@@ -1562,6 +1563,43 @@ var BaseDialog = ({
|
|
|
1562
1563
|
const { themeConfig } = useRufousTheme();
|
|
1563
1564
|
const [isSubmitting, setIsSubmitting] = (0, import_react14.useState)(false);
|
|
1564
1565
|
const sxClass = useSx(sx);
|
|
1566
|
+
const containerRef = (0, import_react14.useRef)(null);
|
|
1567
|
+
const setContainerRef = (0, import_react14.useCallback)((el) => {
|
|
1568
|
+
containerRef.current = el;
|
|
1569
|
+
}, []);
|
|
1570
|
+
(0, import_react14.useEffect)(() => {
|
|
1571
|
+
if (!open) return;
|
|
1572
|
+
const FOCUSABLE = [
|
|
1573
|
+
"button:not([disabled])",
|
|
1574
|
+
"input:not([disabled])",
|
|
1575
|
+
"select:not([disabled])",
|
|
1576
|
+
"textarea:not([disabled])",
|
|
1577
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
1578
|
+
"[href]"
|
|
1579
|
+
].join(", ");
|
|
1580
|
+
const handleKeyDown = (e) => {
|
|
1581
|
+
if (e.key !== "Tab" || !containerRef.current) return;
|
|
1582
|
+
const els = Array.from(
|
|
1583
|
+
containerRef.current.querySelectorAll(FOCUSABLE)
|
|
1584
|
+
).filter((el) => !el.closest("[disabled]") && el.offsetParent !== null);
|
|
1585
|
+
if (!els.length) return;
|
|
1586
|
+
const first = els[0];
|
|
1587
|
+
const last = els[els.length - 1];
|
|
1588
|
+
if (e.shiftKey) {
|
|
1589
|
+
if (document.activeElement === first) {
|
|
1590
|
+
e.preventDefault();
|
|
1591
|
+
last.focus();
|
|
1592
|
+
}
|
|
1593
|
+
} else {
|
|
1594
|
+
if (document.activeElement === last) {
|
|
1595
|
+
e.preventDefault();
|
|
1596
|
+
first.focus();
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
};
|
|
1600
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1601
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1602
|
+
}, [open]);
|
|
1565
1603
|
const depth = (0, import_react14.useContext)(DialogDepthContext);
|
|
1566
1604
|
const overlayZ = 2e3 + depth * 200;
|
|
1567
1605
|
const portalZ = overlayZ + 100;
|
|
@@ -1636,6 +1674,7 @@ var BaseDialog = ({
|
|
|
1636
1674
|
const dialogContent = form ? /* @__PURE__ */ React65.createElement(
|
|
1637
1675
|
"form",
|
|
1638
1676
|
{
|
|
1677
|
+
ref: setContainerRef,
|
|
1639
1678
|
className: containerClass,
|
|
1640
1679
|
style: containerStyle,
|
|
1641
1680
|
onSubmit: (e) => {
|
|
@@ -1644,7 +1683,15 @@ var BaseDialog = ({
|
|
|
1644
1683
|
}
|
|
1645
1684
|
},
|
|
1646
1685
|
dialogInner
|
|
1647
|
-
) : /* @__PURE__ */ React65.createElement(
|
|
1686
|
+
) : /* @__PURE__ */ React65.createElement(
|
|
1687
|
+
"div",
|
|
1688
|
+
{
|
|
1689
|
+
ref: setContainerRef,
|
|
1690
|
+
className: containerClass,
|
|
1691
|
+
style: containerStyle
|
|
1692
|
+
},
|
|
1693
|
+
dialogInner
|
|
1694
|
+
);
|
|
1648
1695
|
const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
|
|
1649
1696
|
"div",
|
|
1650
1697
|
{
|
|
@@ -2367,11 +2414,19 @@ function AutocompleteInner(props, _ref) {
|
|
|
2367
2414
|
closePopup();
|
|
2368
2415
|
}
|
|
2369
2416
|
};
|
|
2417
|
+
const handleFocusOut = (e) => {
|
|
2418
|
+
const next = e.relatedTarget;
|
|
2419
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
2420
|
+
closePopup();
|
|
2421
|
+
}
|
|
2422
|
+
};
|
|
2370
2423
|
document.addEventListener("mousedown", handleOutside);
|
|
2424
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
2371
2425
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
2372
2426
|
window.addEventListener("resize", calcPopupStyle);
|
|
2373
2427
|
return () => {
|
|
2374
2428
|
document.removeEventListener("mousedown", handleOutside);
|
|
2429
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
2375
2430
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
2376
2431
|
window.removeEventListener("resize", calcPopupStyle);
|
|
2377
2432
|
};
|
|
@@ -2568,6 +2623,7 @@ function AutocompleteInner(props, _ref) {
|
|
|
2568
2623
|
e.preventDefault();
|
|
2569
2624
|
open ? closePopup() : openPopup();
|
|
2570
2625
|
},
|
|
2626
|
+
onClick: (e) => e.stopPropagation(),
|
|
2571
2627
|
tabIndex: -1,
|
|
2572
2628
|
"aria-label": open ? "Close" : "Open"
|
|
2573
2629
|
},
|
|
@@ -3189,6 +3245,24 @@ var SpinnerPanel = ({
|
|
|
3189
3245
|
},
|
|
3190
3246
|
"PM"
|
|
3191
3247
|
)));
|
|
3248
|
+
var formatViewsDisplay = (d, views) => {
|
|
3249
|
+
if (!views.includes("day") && !views.includes("month")) return String(d.getFullYear());
|
|
3250
|
+
if (!views.includes("day")) return `${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
|
|
3251
|
+
return "";
|
|
3252
|
+
};
|
|
3253
|
+
var parseYearDisplay = (str) => {
|
|
3254
|
+
const y = parseInt(str.trim(), 10);
|
|
3255
|
+
if (isNaN(y) || y < 1e3 || y > 9999) return null;
|
|
3256
|
+
return new Date(y, 0, 1);
|
|
3257
|
+
};
|
|
3258
|
+
var parseMonthYearDisplay = (str) => {
|
|
3259
|
+
const parts = str.trim().split(/\s+/);
|
|
3260
|
+
if (parts.length < 2) return null;
|
|
3261
|
+
const mm = parseMonthName(parts[0]);
|
|
3262
|
+
const yyyy = parseInt(parts[parts.length - 1], 10);
|
|
3263
|
+
if (mm < 0 || isNaN(yyyy) || yyyy < 1e3) return null;
|
|
3264
|
+
return new Date(yyyy, mm, 1);
|
|
3265
|
+
};
|
|
3192
3266
|
var CalendarBody = ({
|
|
3193
3267
|
viewMonth,
|
|
3194
3268
|
viewYear,
|
|
@@ -3201,18 +3275,48 @@ var CalendarBody = ({
|
|
|
3201
3275
|
onMonthSelect,
|
|
3202
3276
|
onYearSelect,
|
|
3203
3277
|
minDate,
|
|
3204
|
-
maxDate
|
|
3278
|
+
maxDate,
|
|
3279
|
+
views,
|
|
3280
|
+
onFinalMonthSelect,
|
|
3281
|
+
onFinalYearSelect
|
|
3205
3282
|
}) => {
|
|
3206
|
-
const
|
|
3207
|
-
const
|
|
3208
|
-
const
|
|
3283
|
+
const hasDayView = views.includes("day");
|
|
3284
|
+
const hasMonthView = views.includes("month");
|
|
3285
|
+
const hasYearView = views.includes("year");
|
|
3286
|
+
const [pickerView, setPickerView] = (0, import_react21.useState)(() => {
|
|
3287
|
+
if (!hasDayView && !hasMonthView) return "year";
|
|
3288
|
+
if (!hasDayView) return "month";
|
|
3289
|
+
return "calendar";
|
|
3290
|
+
});
|
|
3291
|
+
const handleMonthClick = () => {
|
|
3292
|
+
if (!hasMonthView || !hasDayView) return;
|
|
3293
|
+
setPickerView((v) => v === "month" ? "calendar" : "month");
|
|
3294
|
+
};
|
|
3295
|
+
const handleYearClick = () => {
|
|
3296
|
+
if (!hasYearView) return;
|
|
3297
|
+
if (pickerView === "year") {
|
|
3298
|
+
setPickerView(hasDayView ? "calendar" : "month");
|
|
3299
|
+
} else {
|
|
3300
|
+
setPickerView("year");
|
|
3301
|
+
}
|
|
3302
|
+
};
|
|
3209
3303
|
const handleMonthPick = (month) => {
|
|
3210
3304
|
onMonthSelect(month);
|
|
3211
|
-
|
|
3305
|
+
if (hasDayView) {
|
|
3306
|
+
setPickerView("calendar");
|
|
3307
|
+
} else {
|
|
3308
|
+
onFinalMonthSelect?.(month, viewYear);
|
|
3309
|
+
}
|
|
3212
3310
|
};
|
|
3213
3311
|
const handleYearPick = (year) => {
|
|
3214
3312
|
onYearSelect(year);
|
|
3215
|
-
|
|
3313
|
+
if (!hasDayView && !hasMonthView) {
|
|
3314
|
+
onFinalYearSelect?.(year);
|
|
3315
|
+
} else if (hasMonthView) {
|
|
3316
|
+
setPickerView("month");
|
|
3317
|
+
} else {
|
|
3318
|
+
setPickerView("calendar");
|
|
3319
|
+
}
|
|
3216
3320
|
};
|
|
3217
3321
|
const currentYear = todayDate.getFullYear();
|
|
3218
3322
|
const yearStart = viewYear - 6;
|
|
@@ -3236,18 +3340,35 @@ var CalendarBody = ({
|
|
|
3236
3340
|
return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react21.default.createElement(
|
|
3237
3341
|
"span",
|
|
3238
3342
|
{
|
|
3239
|
-
className:
|
|
3343
|
+
className: [
|
|
3344
|
+
"rf-date-picker__month-label",
|
|
3345
|
+
pickerView === "month" ? "rf-date-picker__month-label--active" : "",
|
|
3346
|
+
!hasMonthView || !hasDayView ? "rf-date-picker__label--static" : ""
|
|
3347
|
+
].filter(Boolean).join(" "),
|
|
3240
3348
|
onClick: handleMonthClick
|
|
3241
3349
|
},
|
|
3242
3350
|
MONTHS[viewMonth]
|
|
3243
3351
|
), /* @__PURE__ */ import_react21.default.createElement(
|
|
3244
3352
|
"span",
|
|
3245
3353
|
{
|
|
3246
|
-
className:
|
|
3354
|
+
className: [
|
|
3355
|
+
"rf-date-picker__year-label",
|
|
3356
|
+
pickerView === "year" ? "rf-date-picker__year-label--active" : "",
|
|
3357
|
+
!hasYearView ? "rf-date-picker__label--static" : ""
|
|
3358
|
+
].filter(Boolean).join(" "),
|
|
3247
3359
|
onClick: handleYearClick
|
|
3248
3360
|
},
|
|
3249
3361
|
viewYear
|
|
3250
|
-
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ?
|
|
3362
|
+
)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? (
|
|
3363
|
+
// Year page navigation
|
|
3364
|
+
/* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A"))
|
|
3365
|
+
) : pickerView === "month" && !hasDayView ? (
|
|
3366
|
+
// Month-only or month+year mode: ‹ › change year
|
|
3367
|
+
/* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 1), "aria-label": "Previous year" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 1), "aria-label": "Next year" }, "\u203A"))
|
|
3368
|
+
) : (
|
|
3369
|
+
// Normal month navigation
|
|
3370
|
+
/* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A"))
|
|
3371
|
+
))), pickerView === "month" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
|
|
3251
3372
|
const monthDisabled = isMonthDisabled(idx);
|
|
3252
3373
|
return /* @__PURE__ */ import_react21.default.createElement(
|
|
3253
3374
|
"button",
|
|
@@ -3283,7 +3404,7 @@ var CalendarBody = ({
|
|
|
3283
3404
|
},
|
|
3284
3405
|
y
|
|
3285
3406
|
);
|
|
3286
|
-
})), pickerView === "calendar" && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
|
|
3407
|
+
})), pickerView === "calendar" && hasDayView && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
|
|
3287
3408
|
if (day === null) return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
|
|
3288
3409
|
const cellDate = new Date(viewYear, viewMonth, day);
|
|
3289
3410
|
const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
|
|
@@ -3326,8 +3447,12 @@ var DateField = ({
|
|
|
3326
3447
|
placeholder,
|
|
3327
3448
|
className = "",
|
|
3328
3449
|
style,
|
|
3329
|
-
sx
|
|
3450
|
+
sx,
|
|
3451
|
+
views: viewsProp
|
|
3330
3452
|
}) => {
|
|
3453
|
+
const views = viewsProp ?? ["day", "month", "year"];
|
|
3454
|
+
const hasDayView = views.includes("day");
|
|
3455
|
+
const hasMonthView = views.includes("month");
|
|
3331
3456
|
const minDate = normaliseBoundary(minDateProp);
|
|
3332
3457
|
const maxDate = normaliseBoundary(maxDateProp);
|
|
3333
3458
|
const sxClass = useSx(sx);
|
|
@@ -3357,6 +3482,8 @@ var DateField = ({
|
|
|
3357
3482
|
if (!value) return "";
|
|
3358
3483
|
const d = isoToDate(value);
|
|
3359
3484
|
if (!d) return "";
|
|
3485
|
+
const viewsStr = formatViewsDisplay(d, views);
|
|
3486
|
+
if (viewsStr) return viewsStr;
|
|
3360
3487
|
let str = formatDisplay(d, dateFormat);
|
|
3361
3488
|
if (isDatetimeType(type)) {
|
|
3362
3489
|
const t = parseTimeFromISO(value);
|
|
@@ -3387,15 +3514,20 @@ var DateField = ({
|
|
|
3387
3514
|
if (d) {
|
|
3388
3515
|
setViewYear(d.getFullYear());
|
|
3389
3516
|
setViewMonth(d.getMonth());
|
|
3390
|
-
|
|
3391
|
-
if (
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3517
|
+
const viewsStr = formatViewsDisplay(d, views);
|
|
3518
|
+
if (viewsStr) {
|
|
3519
|
+
setInputStr(viewsStr);
|
|
3520
|
+
} else {
|
|
3521
|
+
let str = formatDisplay(d, dateFormat);
|
|
3522
|
+
if (isDatetimeType(type)) {
|
|
3523
|
+
const t = parseTimeFromISO(value);
|
|
3524
|
+
setHour(t.h);
|
|
3525
|
+
setMinute(t.m);
|
|
3526
|
+
setAmpm(t.ampm);
|
|
3527
|
+
str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
|
|
3528
|
+
}
|
|
3529
|
+
setInputStr(str);
|
|
3397
3530
|
}
|
|
3398
|
-
setInputStr(str);
|
|
3399
3531
|
}
|
|
3400
3532
|
}, [value, type]);
|
|
3401
3533
|
(0, import_react21.useEffect)(() => {
|
|
@@ -3406,8 +3538,18 @@ var DateField = ({
|
|
|
3406
3538
|
if (pickerRef.current?.contains(target)) return;
|
|
3407
3539
|
setOpen(false);
|
|
3408
3540
|
};
|
|
3541
|
+
const handleFocusOut = (e) => {
|
|
3542
|
+
const next = e.relatedTarget;
|
|
3543
|
+
if (!containerRef.current?.contains(next) && !pickerRef.current?.contains(next)) {
|
|
3544
|
+
setOpen(false);
|
|
3545
|
+
}
|
|
3546
|
+
};
|
|
3409
3547
|
document.addEventListener("mousedown", handler);
|
|
3410
|
-
|
|
3548
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
3549
|
+
return () => {
|
|
3550
|
+
document.removeEventListener("mousedown", handler);
|
|
3551
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
3552
|
+
};
|
|
3411
3553
|
}, [open]);
|
|
3412
3554
|
const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
|
|
3413
3555
|
setSelectedDate(d);
|
|
@@ -3416,11 +3558,17 @@ var DateField = ({
|
|
|
3416
3558
|
onChange?.("");
|
|
3417
3559
|
return;
|
|
3418
3560
|
}
|
|
3419
|
-
|
|
3420
|
-
|
|
3561
|
+
const viewsStr = formatViewsDisplay(d, views);
|
|
3562
|
+
let str;
|
|
3563
|
+
if (viewsStr) {
|
|
3564
|
+
str = viewsStr;
|
|
3565
|
+
} else {
|
|
3566
|
+
str = formatDisplay(d, dateFormat);
|
|
3567
|
+
if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
|
|
3568
|
+
}
|
|
3421
3569
|
setInputStr(str);
|
|
3422
3570
|
onChange?.(buildISO(d, type, h, m, ap));
|
|
3423
|
-
}, [type, onChange, dateFormat]);
|
|
3571
|
+
}, [type, onChange, dateFormat, views]);
|
|
3424
3572
|
const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
|
|
3425
3573
|
const handleDayClick = (day) => {
|
|
3426
3574
|
const d = new Date(viewYear, viewMonth, day);
|
|
@@ -3434,49 +3582,102 @@ var DateField = ({
|
|
|
3434
3582
|
};
|
|
3435
3583
|
const handleToday = () => {
|
|
3436
3584
|
const t = today();
|
|
3437
|
-
if (
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3585
|
+
if (!hasDayView && !hasMonthView) {
|
|
3586
|
+
const d = new Date(t.getFullYear(), 0, 1);
|
|
3587
|
+
if (isOutOfRange(d)) return;
|
|
3588
|
+
setViewYear(t.getFullYear());
|
|
3589
|
+
commitDate(d, hour, minute, ampm);
|
|
3590
|
+
setOpen(false);
|
|
3591
|
+
} else if (!hasDayView) {
|
|
3592
|
+
const d = new Date(t.getFullYear(), t.getMonth(), 1);
|
|
3593
|
+
if (isOutOfRange(d)) return;
|
|
3594
|
+
setViewYear(t.getFullYear());
|
|
3595
|
+
setViewMonth(t.getMonth());
|
|
3596
|
+
commitDate(d, hour, minute, ampm);
|
|
3597
|
+
setOpen(false);
|
|
3598
|
+
} else {
|
|
3599
|
+
if (isOutOfRange(t)) return;
|
|
3600
|
+
setViewYear(t.getFullYear());
|
|
3601
|
+
setViewMonth(t.getMonth());
|
|
3602
|
+
commitDate(t, hour, minute, ampm);
|
|
3603
|
+
if (type === "date") setOpen(false);
|
|
3604
|
+
}
|
|
3442
3605
|
};
|
|
3606
|
+
const handleFinalMonthSelect = (0, import_react21.useCallback)((month, year) => {
|
|
3607
|
+
const d = new Date(year, month, 1);
|
|
3608
|
+
if (isOutOfRange(d)) return;
|
|
3609
|
+
setSelectedDate(d);
|
|
3610
|
+
setViewYear(year);
|
|
3611
|
+
setViewMonth(month);
|
|
3612
|
+
setInputStr(`${MONTHS_SHORT[month]} ${year}`);
|
|
3613
|
+
onChange?.(buildISO(d, type, hour, minute, ampm));
|
|
3614
|
+
setOpen(false);
|
|
3615
|
+
}, [isOutOfRange, onChange, type, hour, minute, ampm]);
|
|
3616
|
+
const handleFinalYearSelect = (0, import_react21.useCallback)((year) => {
|
|
3617
|
+
const d = new Date(year, 0, 1);
|
|
3618
|
+
if (isOutOfRange(d)) return;
|
|
3619
|
+
setSelectedDate(d);
|
|
3620
|
+
setViewYear(year);
|
|
3621
|
+
setInputStr(String(year));
|
|
3622
|
+
onChange?.(buildISO(d, type, hour, minute, ampm));
|
|
3623
|
+
setOpen(false);
|
|
3624
|
+
}, [isOutOfRange, onChange, type, hour, minute, ampm]);
|
|
3443
3625
|
const handleClear = () => commitDate(null, hour, minute, ampm);
|
|
3444
3626
|
const handleInputChange = (e) => {
|
|
3445
3627
|
const raw = e.target.value;
|
|
3446
3628
|
setInputStr(raw);
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3629
|
+
let parsed = null;
|
|
3630
|
+
if (!hasDayView && !hasMonthView) {
|
|
3631
|
+
parsed = parseYearDisplay(raw);
|
|
3632
|
+
} else if (!hasDayView) {
|
|
3633
|
+
parsed = parseMonthYearDisplay(raw);
|
|
3634
|
+
} else {
|
|
3635
|
+
const dateWordCount = getDateWordCount(dateFormat);
|
|
3636
|
+
const words = raw.split(" ");
|
|
3637
|
+
const datePart = words.slice(0, dateWordCount).join(" ");
|
|
3638
|
+
const timeParts = words.slice(dateWordCount);
|
|
3639
|
+
parsed = parseDisplay(datePart, dateFormat);
|
|
3640
|
+
if (parsed && !isOutOfRange(parsed)) {
|
|
3641
|
+
setSelectedDate(parsed);
|
|
3642
|
+
setViewYear(parsed.getFullYear());
|
|
3643
|
+
setViewMonth(parsed.getMonth());
|
|
3644
|
+
let h = hour, m = minute, ap = ampm;
|
|
3645
|
+
if (isDatetimeType(type) && timeParts.length >= 2) {
|
|
3646
|
+
const timePart = timeParts[0];
|
|
3647
|
+
const periodPart = timeParts[1]?.toUpperCase();
|
|
3648
|
+
if (timePart?.includes(":")) {
|
|
3649
|
+
const [hStr, mStr] = timePart.split(":");
|
|
3650
|
+
const parsedH = parseInt(hStr, 10);
|
|
3651
|
+
const parsedM = parseInt(mStr, 10);
|
|
3652
|
+
if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
|
|
3653
|
+
h = parsedH;
|
|
3654
|
+
setHour(h);
|
|
3655
|
+
}
|
|
3656
|
+
if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
|
|
3657
|
+
m = parsedM;
|
|
3658
|
+
setMinute(m);
|
|
3659
|
+
}
|
|
3467
3660
|
}
|
|
3468
|
-
if (
|
|
3469
|
-
|
|
3470
|
-
|
|
3661
|
+
if (periodPart === "AM" || periodPart === "PM") {
|
|
3662
|
+
ap = periodPart;
|
|
3663
|
+
setAmpm(ap);
|
|
3471
3664
|
}
|
|
3472
3665
|
}
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3666
|
+
isInternalChange.current = true;
|
|
3667
|
+
onChange?.(buildISO(parsed, type, h, m, ap));
|
|
3668
|
+
} else if (!raw) {
|
|
3669
|
+
setSelectedDate(null);
|
|
3670
|
+
isInternalChange.current = true;
|
|
3671
|
+
onChange?.("");
|
|
3477
3672
|
}
|
|
3673
|
+
return;
|
|
3674
|
+
}
|
|
3675
|
+
if (parsed && !isOutOfRange(parsed)) {
|
|
3676
|
+
setSelectedDate(parsed);
|
|
3677
|
+
setViewYear(parsed.getFullYear());
|
|
3678
|
+
setViewMonth(parsed.getMonth());
|
|
3478
3679
|
isInternalChange.current = true;
|
|
3479
|
-
onChange?.(buildISO(parsed, type,
|
|
3680
|
+
onChange?.(buildISO(parsed, type, hour, minute, ampm));
|
|
3480
3681
|
} else if (!raw) {
|
|
3481
3682
|
setSelectedDate(null);
|
|
3482
3683
|
isInternalChange.current = true;
|
|
@@ -3662,7 +3863,10 @@ var DateField = ({
|
|
|
3662
3863
|
onMonthSelect: setViewMonth,
|
|
3663
3864
|
onYearSelect: setViewYear,
|
|
3664
3865
|
minDate,
|
|
3665
|
-
maxDate
|
|
3866
|
+
maxDate,
|
|
3867
|
+
views,
|
|
3868
|
+
onFinalMonthSelect: handleFinalMonthSelect,
|
|
3869
|
+
onFinalYearSelect: handleFinalYearSelect
|
|
3666
3870
|
}
|
|
3667
3871
|
), type === "datetime" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement(
|
|
3668
3872
|
SpinnerPanel,
|
|
@@ -4398,6 +4602,37 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
|
|
|
4398
4602
|
// lib/DataGrid/DataGrid.tsx
|
|
4399
4603
|
var import_react23 = __toESM(require("react"), 1);
|
|
4400
4604
|
var import_lucide_react2 = require("lucide-react");
|
|
4605
|
+
function FilterSelect({
|
|
4606
|
+
value,
|
|
4607
|
+
onChange,
|
|
4608
|
+
options,
|
|
4609
|
+
className,
|
|
4610
|
+
placement = "bottom"
|
|
4611
|
+
}) {
|
|
4612
|
+
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
4613
|
+
const ref = (0, import_react23.useRef)(null);
|
|
4614
|
+
(0, import_react23.useEffect)(() => {
|
|
4615
|
+
const handler = (e) => {
|
|
4616
|
+
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
4617
|
+
};
|
|
4618
|
+
if (open) document.addEventListener("mousedown", handler);
|
|
4619
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
4620
|
+
}, [open]);
|
|
4621
|
+
const selected = options.find((o) => o.value === value);
|
|
4622
|
+
return /* @__PURE__ */ import_react23.default.createElement("div", { ref, className: `dg-fsel${className ? " " + className : ""}` }, /* @__PURE__ */ import_react23.default.createElement("button", { type: "button", className: "dg-fsel-trigger", onClick: () => setOpen((o) => !o) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-fsel-label" }, selected?.label ?? value), /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12, className: "dg-fsel-chevron" })), open && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-fsel-menu${placement === "top" ? " dg-fsel-menu--top" : ""}` }, options.map((opt) => /* @__PURE__ */ import_react23.default.createElement(
|
|
4623
|
+
"button",
|
|
4624
|
+
{
|
|
4625
|
+
key: opt.value,
|
|
4626
|
+
type: "button",
|
|
4627
|
+
className: `dg-menu-item${opt.value === value ? " dg-menu-item--selected" : ""}`,
|
|
4628
|
+
onClick: () => {
|
|
4629
|
+
onChange(opt.value);
|
|
4630
|
+
setOpen(false);
|
|
4631
|
+
}
|
|
4632
|
+
},
|
|
4633
|
+
opt.label
|
|
4634
|
+
))));
|
|
4635
|
+
}
|
|
4401
4636
|
var getOperatorsForType = (type) => {
|
|
4402
4637
|
if (type === "date") return [
|
|
4403
4638
|
{ value: "is", label: "is" },
|
|
@@ -4815,7 +5050,17 @@ function DataGrid({
|
|
|
4815
5050
|
}
|
|
4816
5051
|
return offset2;
|
|
4817
5052
|
};
|
|
4818
|
-
const hasActiveFilters = advancedFilters.some((f) => f.value);
|
|
5053
|
+
const hasActiveFilters = advancedFilters.some((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5054
|
+
const closeFilterModal = () => {
|
|
5055
|
+
setAdvancedFilters((prev) => {
|
|
5056
|
+
const meaningful = prev.filter((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
|
|
5057
|
+
if (meaningful.length > 0) return meaningful;
|
|
5058
|
+
const firstCol = resolvedColumns.find((c) => c.filterable !== false);
|
|
5059
|
+
if (!firstCol) return prev;
|
|
5060
|
+
return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
|
|
5061
|
+
});
|
|
5062
|
+
setShowAdvancedFilter(false);
|
|
5063
|
+
};
|
|
4819
5064
|
const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
|
|
4820
5065
|
const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
|
|
4821
5066
|
return /* @__PURE__ */ import_react23.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react23.default.createElement("h2", null, title), /* @__PURE__ */ import_react23.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react23.default.createElement(
|
|
@@ -4849,6 +5094,7 @@ function DataGrid({
|
|
|
4849
5094
|
const leftOffset = getLeftOffset(col, idx);
|
|
4850
5095
|
const rightOffset = getRightOffset(col, idx);
|
|
4851
5096
|
const isSorted = sortField === col.field;
|
|
5097
|
+
const isFiltered = advancedFilters.some((f) => f.column === colField && f.value);
|
|
4852
5098
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
4853
5099
|
"th",
|
|
4854
5100
|
{
|
|
@@ -4865,7 +5111,7 @@ function DataGrid({
|
|
|
4865
5111
|
col.headerName,
|
|
4866
5112
|
isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 12 }),
|
|
4867
5113
|
isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12 })
|
|
4868
|
-
), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5114
|
+
), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
4869
5115
|
"button",
|
|
4870
5116
|
{
|
|
4871
5117
|
className: "dg-th-menu-btn",
|
|
@@ -4958,12 +5204,14 @@ function DataGrid({
|
|
|
4958
5204
|
action.icon
|
|
4959
5205
|
)))));
|
|
4960
5206
|
})()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
|
|
4961
|
-
|
|
5207
|
+
FilterSelect,
|
|
4962
5208
|
{
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
5209
|
+
placement: "top",
|
|
5210
|
+
value: String(activePageSize),
|
|
5211
|
+
onChange: (val) => handlePageSizeChange(Number(val)),
|
|
5212
|
+
options: pageSizeOptions.map((o) => ({ value: String(o), label: String(o) })),
|
|
5213
|
+
className: "dg-fsel--sm dg-fsel--pagesize"
|
|
5214
|
+
}
|
|
4967
5215
|
)), /* @__PURE__ */ import_react23.default.createElement("span", null, (activePage - 1) * activePageSize + 1, "\u2013", Math.min(activePage * activePageSize, totalRows), " of ", totalRows)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === 1, onClick: () => handlePageChange(activePage - 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronLeft, { size: 15 })), /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-page-fraction" }, activePage, " / ", totalPages), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === totalPages, onClick: () => handlePageChange(activePage + 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
4968
5216
|
"div",
|
|
4969
5217
|
{
|
|
@@ -4983,6 +5231,16 @@ function DataGrid({
|
|
|
4983
5231
|
})(),
|
|
4984
5232
|
/* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" }),
|
|
4985
5233
|
activeMenuCol?.filterable !== false && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
|
|
5234
|
+
if (activeMenuCol) {
|
|
5235
|
+
const colField = String(activeMenuCol.field);
|
|
5236
|
+
setAdvancedFilters((prev) => {
|
|
5237
|
+
const hasValues = prev.some((f) => f.value);
|
|
5238
|
+
if (!hasValues) {
|
|
5239
|
+
return [{ column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5240
|
+
}
|
|
5241
|
+
return [...prev, { column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
|
|
5242
|
+
});
|
|
5243
|
+
}
|
|
4986
5244
|
setShowAdvancedFilter(true);
|
|
4987
5245
|
setActiveMenu(null);
|
|
4988
5246
|
} }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 14 }), " Filter\u2026"),
|
|
@@ -5020,7 +5278,7 @@ function DataGrid({
|
|
|
5020
5278
|
}
|
|
5021
5279
|
});
|
|
5022
5280
|
setColumnOverrides(newOverrides);
|
|
5023
|
-
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-overlay", onClick:
|
|
5281
|
+
} }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-overlay", onClick: closeFilterModal }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react23.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: closeFilterModal }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.X, { size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react23.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react23.default.createElement(
|
|
5024
5282
|
"button",
|
|
5025
5283
|
{
|
|
5026
5284
|
className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
|
|
@@ -5035,48 +5293,45 @@ function DataGrid({
|
|
|
5035
5293
|
},
|
|
5036
5294
|
"OR"
|
|
5037
5295
|
)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.X, { size: 14 })), /* @__PURE__ */ import_react23.default.createElement(
|
|
5038
|
-
|
|
5296
|
+
FilterSelect,
|
|
5039
5297
|
{
|
|
5040
|
-
className: "dg-filter-select",
|
|
5041
5298
|
value: f.column,
|
|
5042
|
-
onChange: (
|
|
5043
|
-
const newColKey = e.target.value;
|
|
5299
|
+
onChange: (newColKey) => {
|
|
5044
5300
|
const newCol = resolvedColumns.find((c) => String(c.key) === newColKey);
|
|
5045
5301
|
const defaultOp = getDefaultOperator(newCol?.type);
|
|
5046
5302
|
setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
|
|
5047
|
-
}
|
|
5048
|
-
|
|
5049
|
-
|
|
5303
|
+
},
|
|
5304
|
+
options: resolvedColumns.filter((c) => c.filterable !== false).map((c) => ({ value: String(c.key), label: c.header }))
|
|
5305
|
+
}
|
|
5050
5306
|
), (() => {
|
|
5051
5307
|
const col = resolvedColumns.find((c) => String(c.key) === f.column);
|
|
5052
5308
|
const operators = getOperatorsForType(col?.type);
|
|
5053
5309
|
const hideValue = f.operator === "is empty" || f.operator === "is not empty";
|
|
5054
5310
|
return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
|
|
5055
|
-
|
|
5311
|
+
FilterSelect,
|
|
5056
5312
|
{
|
|
5057
|
-
className: "dg-
|
|
5313
|
+
className: "dg-fsel--sm",
|
|
5058
5314
|
value: f.operator,
|
|
5059
|
-
onChange: (
|
|
5060
|
-
|
|
5061
|
-
|
|
5315
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: val, value: "" } : fi)),
|
|
5316
|
+
options: operators
|
|
5317
|
+
}
|
|
5062
5318
|
), !hideValue && col?.type === "date" && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ import_react23.default.createElement(
|
|
5063
5319
|
DateField,
|
|
5064
5320
|
{
|
|
5065
5321
|
value: f.value,
|
|
5066
5322
|
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5067
|
-
variant: "compact"
|
|
5323
|
+
variant: "compact",
|
|
5324
|
+
fullWidth: true
|
|
5068
5325
|
}
|
|
5069
5326
|
)), !hideValue && col?.type === "status" && (() => {
|
|
5070
|
-
const
|
|
5327
|
+
const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
|
|
5071
5328
|
return /* @__PURE__ */ import_react23.default.createElement(
|
|
5072
|
-
|
|
5329
|
+
FilterSelect,
|
|
5073
5330
|
{
|
|
5074
|
-
className: "dg-filter-select",
|
|
5075
5331
|
value: f.value,
|
|
5076
|
-
onChange: (
|
|
5077
|
-
|
|
5078
|
-
|
|
5079
|
-
options.map((opt) => /* @__PURE__ */ import_react23.default.createElement("option", { key: opt, value: opt }, opt))
|
|
5332
|
+
onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
|
|
5333
|
+
options: [{ value: "", label: "Select\u2026" }, ...opts.map((o) => ({ value: o, label: o }))]
|
|
5334
|
+
}
|
|
5080
5335
|
);
|
|
5081
5336
|
})(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ import_react23.default.createElement(
|
|
5082
5337
|
"input",
|
|
@@ -5085,6 +5340,7 @@ function DataGrid({
|
|
|
5085
5340
|
className: "dg-filter-input",
|
|
5086
5341
|
placeholder: "Value\u2026",
|
|
5087
5342
|
value: f.value,
|
|
5343
|
+
autoFocus: idx === advancedFilters.length - 1,
|
|
5088
5344
|
onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
|
|
5089
5345
|
}
|
|
5090
5346
|
));
|
|
@@ -5114,7 +5370,7 @@ function DataGrid({
|
|
|
5114
5370
|
},
|
|
5115
5371
|
/* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Trash2, { size: 14 }),
|
|
5116
5372
|
" Reset"
|
|
5117
|
-
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick:
|
|
5373
|
+
), /* @__PURE__ */ import_react23.default.createElement("button", { className: "submit-btn", onClick: closeFilterModal }, "Apply")))));
|
|
5118
5374
|
}
|
|
5119
5375
|
|
|
5120
5376
|
// lib/Select/Select.tsx
|
|
@@ -5192,11 +5448,19 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5192
5448
|
closePopup();
|
|
5193
5449
|
}
|
|
5194
5450
|
};
|
|
5451
|
+
const handleFocusOut = (e) => {
|
|
5452
|
+
const next = e.relatedTarget;
|
|
5453
|
+
if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
|
|
5454
|
+
closePopup();
|
|
5455
|
+
}
|
|
5456
|
+
};
|
|
5195
5457
|
document.addEventListener("mousedown", handleOutside);
|
|
5458
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
5196
5459
|
window.addEventListener("scroll", calcPopupStyle, true);
|
|
5197
5460
|
window.addEventListener("resize", calcPopupStyle);
|
|
5198
5461
|
return () => {
|
|
5199
5462
|
document.removeEventListener("mousedown", handleOutside);
|
|
5463
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
5200
5464
|
window.removeEventListener("scroll", calcPopupStyle, true);
|
|
5201
5465
|
window.removeEventListener("resize", calcPopupStyle);
|
|
5202
5466
|
};
|
|
@@ -8733,10 +8997,403 @@ var PhoneField = (0, import_react48.forwardRef)(function PhoneField2(props, ref)
|
|
|
8733
8997
|
});
|
|
8734
8998
|
PhoneField.displayName = "PhoneField";
|
|
8735
8999
|
|
|
9000
|
+
// lib/TreeSelect/TreeSelect.tsx
|
|
9001
|
+
var import_react49 = __toESM(require("react"), 1);
|
|
9002
|
+
var import_react_dom11 = __toESM(require("react-dom"), 1);
|
|
9003
|
+
var import_lucide_react3 = require("lucide-react");
|
|
9004
|
+
function collectDescendants(node) {
|
|
9005
|
+
const ids = [String(node.id)];
|
|
9006
|
+
node.children?.forEach((c) => ids.push(...collectDescendants(c)));
|
|
9007
|
+
return ids;
|
|
9008
|
+
}
|
|
9009
|
+
function findNodeById(nodes, id) {
|
|
9010
|
+
for (const node of nodes) {
|
|
9011
|
+
if (String(node.id) === id) return node;
|
|
9012
|
+
const found = findNodeById(node.children ?? [], id);
|
|
9013
|
+
if (found) return found;
|
|
9014
|
+
}
|
|
9015
|
+
return null;
|
|
9016
|
+
}
|
|
9017
|
+
function getNodeState(node, selected) {
|
|
9018
|
+
if (selected.has(String(node.id))) return "checked";
|
|
9019
|
+
if (!node.children?.length) return "unchecked";
|
|
9020
|
+
const states = node.children.map((c) => getNodeState(c, selected));
|
|
9021
|
+
if (states.every((s2) => s2 === "checked")) return "checked";
|
|
9022
|
+
if (states.some((s2) => s2 !== "unchecked")) return "partial";
|
|
9023
|
+
return "unchecked";
|
|
9024
|
+
}
|
|
9025
|
+
function getTopLevelSelected(nodes, selected) {
|
|
9026
|
+
const result = [];
|
|
9027
|
+
for (const node of nodes) {
|
|
9028
|
+
const state = getNodeState(node, selected);
|
|
9029
|
+
if (state === "checked") {
|
|
9030
|
+
result.push(node);
|
|
9031
|
+
} else if (state === "partial") {
|
|
9032
|
+
result.push(...getTopLevelSelected(node.children ?? [], selected));
|
|
9033
|
+
}
|
|
9034
|
+
}
|
|
9035
|
+
return result;
|
|
9036
|
+
}
|
|
9037
|
+
function filterTree(nodes, query) {
|
|
9038
|
+
if (!query) return nodes;
|
|
9039
|
+
const q = query.toLowerCase();
|
|
9040
|
+
return nodes.reduce((acc, node) => {
|
|
9041
|
+
const filteredChildren = filterTree(node.children ?? [], q);
|
|
9042
|
+
if (node.label.toLowerCase().includes(q) || filteredChildren.length > 0) {
|
|
9043
|
+
acc.push({ ...node, children: filteredChildren });
|
|
9044
|
+
}
|
|
9045
|
+
return acc;
|
|
9046
|
+
}, []);
|
|
9047
|
+
}
|
|
9048
|
+
function recordToSet(record) {
|
|
9049
|
+
if (!record) return /* @__PURE__ */ new Set();
|
|
9050
|
+
return new Set(Object.keys(record).filter((k) => record[k]));
|
|
9051
|
+
}
|
|
9052
|
+
function setToRecord(set) {
|
|
9053
|
+
const r = {};
|
|
9054
|
+
set.forEach((id) => {
|
|
9055
|
+
r[id] = true;
|
|
9056
|
+
});
|
|
9057
|
+
return r;
|
|
9058
|
+
}
|
|
9059
|
+
function TreeNodeItem({
|
|
9060
|
+
node,
|
|
9061
|
+
depth,
|
|
9062
|
+
selected,
|
|
9063
|
+
expanded,
|
|
9064
|
+
selectionMode,
|
|
9065
|
+
onToggleExpand,
|
|
9066
|
+
onSelect,
|
|
9067
|
+
isFiltering
|
|
9068
|
+
}) {
|
|
9069
|
+
const nodeId = String(node.id);
|
|
9070
|
+
const hasChildren = !!node.children?.length;
|
|
9071
|
+
const isExpanded = isFiltering || expanded.has(nodeId);
|
|
9072
|
+
const state = getNodeState(node, selected);
|
|
9073
|
+
return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
|
|
9074
|
+
"div",
|
|
9075
|
+
{
|
|
9076
|
+
className: `rf-tsn__row${state !== "unchecked" ? " rf-tsn__row--active" : ""}`,
|
|
9077
|
+
style: { paddingLeft: 8 + depth * 20 },
|
|
9078
|
+
onClick: () => onSelect(node)
|
|
9079
|
+
},
|
|
9080
|
+
hasChildren ? /* @__PURE__ */ import_react49.default.createElement(
|
|
9081
|
+
"button",
|
|
9082
|
+
{
|
|
9083
|
+
type: "button",
|
|
9084
|
+
className: "rf-tsn__expand",
|
|
9085
|
+
onClick: (e) => {
|
|
9086
|
+
e.stopPropagation();
|
|
9087
|
+
onToggleExpand(nodeId);
|
|
9088
|
+
}
|
|
9089
|
+
},
|
|
9090
|
+
isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
|
|
9091
|
+
) : /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__expand-ph" }),
|
|
9092
|
+
selectionMode === "multiple" && /* @__PURE__ */ import_react49.default.createElement(
|
|
9093
|
+
"span",
|
|
9094
|
+
{
|
|
9095
|
+
className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
|
|
9096
|
+
},
|
|
9097
|
+
state === "checked" && /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 10, strokeWidth: 3 }),
|
|
9098
|
+
state === "partial" && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__cb-dash" })
|
|
9099
|
+
),
|
|
9100
|
+
selectionMode === "single" && /* @__PURE__ */ import_react49.default.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
|
|
9101
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label)
|
|
9102
|
+
), hasChildren && isExpanded && /* @__PURE__ */ import_react49.default.createElement("div", null, node.children.map((child) => /* @__PURE__ */ import_react49.default.createElement(
|
|
9103
|
+
TreeNodeItem,
|
|
9104
|
+
{
|
|
9105
|
+
key: child.id,
|
|
9106
|
+
node: child,
|
|
9107
|
+
depth: depth + 1,
|
|
9108
|
+
selected,
|
|
9109
|
+
expanded,
|
|
9110
|
+
selectionMode,
|
|
9111
|
+
onToggleExpand,
|
|
9112
|
+
onSelect,
|
|
9113
|
+
isFiltering
|
|
9114
|
+
}
|
|
9115
|
+
))));
|
|
9116
|
+
}
|
|
9117
|
+
function TreeSelect({
|
|
9118
|
+
options,
|
|
9119
|
+
value,
|
|
9120
|
+
onChange,
|
|
9121
|
+
onNodeSelect,
|
|
9122
|
+
onNodeUnselect,
|
|
9123
|
+
selectionMode = "single",
|
|
9124
|
+
placeholder = "Select",
|
|
9125
|
+
filter = false,
|
|
9126
|
+
filterInputAutoFocus = false,
|
|
9127
|
+
resetFilterOnHide = false,
|
|
9128
|
+
metaKeySelection: _metaKeySelection,
|
|
9129
|
+
disabled = false,
|
|
9130
|
+
label,
|
|
9131
|
+
variant = "outlined",
|
|
9132
|
+
size = "medium",
|
|
9133
|
+
error = false,
|
|
9134
|
+
helperText,
|
|
9135
|
+
fullWidth = false,
|
|
9136
|
+
clearable = true,
|
|
9137
|
+
required = false,
|
|
9138
|
+
style,
|
|
9139
|
+
className,
|
|
9140
|
+
sx
|
|
9141
|
+
}) {
|
|
9142
|
+
const sxClass = useSx(sx);
|
|
9143
|
+
const [open, setOpen] = (0, import_react49.useState)(false);
|
|
9144
|
+
const [focused, setFocused] = (0, import_react49.useState)(false);
|
|
9145
|
+
const [filterQuery, setFilterQuery] = (0, import_react49.useState)("");
|
|
9146
|
+
const [expandedKeys, setExpandedKeys] = (0, import_react49.useState)(/* @__PURE__ */ new Set());
|
|
9147
|
+
const [dropdownStyle, setDropdownStyle] = (0, import_react49.useState)({});
|
|
9148
|
+
const triggerRef = (0, import_react49.useRef)(null);
|
|
9149
|
+
const dropdownRef = (0, import_react49.useRef)(null);
|
|
9150
|
+
const filterInputRef = (0, import_react49.useRef)(null);
|
|
9151
|
+
const isMultiple = selectionMode === "multiple";
|
|
9152
|
+
const selectedSet = isMultiple ? recordToSet(value) : value != null ? /* @__PURE__ */ new Set([String(value)]) : /* @__PURE__ */ new Set();
|
|
9153
|
+
const computePosition3 = (0, import_react49.useCallback)(() => {
|
|
9154
|
+
if (!triggerRef.current) return;
|
|
9155
|
+
const rect = triggerRef.current.getBoundingClientRect();
|
|
9156
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
9157
|
+
const dropdownMaxH = 320;
|
|
9158
|
+
const above = spaceBelow < dropdownMaxH && rect.top > spaceBelow;
|
|
9159
|
+
setDropdownStyle({
|
|
9160
|
+
position: "fixed",
|
|
9161
|
+
left: rect.left,
|
|
9162
|
+
width: rect.width,
|
|
9163
|
+
...above ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
|
|
9164
|
+
});
|
|
9165
|
+
}, []);
|
|
9166
|
+
const openDropdown = () => {
|
|
9167
|
+
if (disabled) return;
|
|
9168
|
+
computePosition3();
|
|
9169
|
+
setOpen(true);
|
|
9170
|
+
};
|
|
9171
|
+
const closeDropdown = (0, import_react49.useCallback)(() => {
|
|
9172
|
+
setOpen(false);
|
|
9173
|
+
if (resetFilterOnHide) setFilterQuery("");
|
|
9174
|
+
}, [resetFilterOnHide]);
|
|
9175
|
+
const mouseActivatedRef = (0, import_react49.useRef)(false);
|
|
9176
|
+
const handleTriggerMouseDown = () => {
|
|
9177
|
+
mouseActivatedRef.current = true;
|
|
9178
|
+
};
|
|
9179
|
+
const handleTriggerFocus = () => {
|
|
9180
|
+
setFocused(true);
|
|
9181
|
+
if (!mouseActivatedRef.current) {
|
|
9182
|
+
openDropdown();
|
|
9183
|
+
}
|
|
9184
|
+
mouseActivatedRef.current = false;
|
|
9185
|
+
};
|
|
9186
|
+
const handleTriggerBlur = (e) => {
|
|
9187
|
+
const next = e.relatedTarget;
|
|
9188
|
+
if (next === null) return;
|
|
9189
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9190
|
+
setFocused(false);
|
|
9191
|
+
closeDropdown();
|
|
9192
|
+
}
|
|
9193
|
+
};
|
|
9194
|
+
const handleKeyDown = (e) => {
|
|
9195
|
+
if (disabled) return;
|
|
9196
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
9197
|
+
e.preventDefault();
|
|
9198
|
+
open ? closeDropdown() : openDropdown();
|
|
9199
|
+
} else if (e.key === "Escape") {
|
|
9200
|
+
closeDropdown();
|
|
9201
|
+
}
|
|
9202
|
+
};
|
|
9203
|
+
(0, import_react49.useEffect)(() => {
|
|
9204
|
+
if (open && filter && filterInputAutoFocus) {
|
|
9205
|
+
const t = setTimeout(() => filterInputRef.current?.focus(), 40);
|
|
9206
|
+
return () => clearTimeout(t);
|
|
9207
|
+
}
|
|
9208
|
+
}, [open, filter, filterInputAutoFocus]);
|
|
9209
|
+
(0, import_react49.useEffect)(() => {
|
|
9210
|
+
if (!open) return;
|
|
9211
|
+
const handleOutside = (e) => {
|
|
9212
|
+
if (dropdownRef.current?.contains(e.target) || triggerRef.current?.contains(e.target)) return;
|
|
9213
|
+
closeDropdown();
|
|
9214
|
+
setFocused(false);
|
|
9215
|
+
};
|
|
9216
|
+
const handleFocusOut = (e) => {
|
|
9217
|
+
const next = e.relatedTarget;
|
|
9218
|
+
if (next === null) return;
|
|
9219
|
+
if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
|
|
9220
|
+
closeDropdown();
|
|
9221
|
+
setFocused(false);
|
|
9222
|
+
}
|
|
9223
|
+
};
|
|
9224
|
+
document.addEventListener("mousedown", handleOutside);
|
|
9225
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
9226
|
+
return () => {
|
|
9227
|
+
document.removeEventListener("mousedown", handleOutside);
|
|
9228
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
9229
|
+
};
|
|
9230
|
+
}, [open, closeDropdown]);
|
|
9231
|
+
(0, import_react49.useEffect)(() => {
|
|
9232
|
+
if (!open) return;
|
|
9233
|
+
const h = () => computePosition3();
|
|
9234
|
+
window.addEventListener("scroll", h, true);
|
|
9235
|
+
window.addEventListener("resize", h);
|
|
9236
|
+
return () => {
|
|
9237
|
+
window.removeEventListener("scroll", h, true);
|
|
9238
|
+
window.removeEventListener("resize", h);
|
|
9239
|
+
};
|
|
9240
|
+
}, [open, computePosition3]);
|
|
9241
|
+
const handleSelect = (node) => {
|
|
9242
|
+
const nodeId = String(node.id);
|
|
9243
|
+
if (isMultiple) {
|
|
9244
|
+
const state = getNodeState(node, selectedSet);
|
|
9245
|
+
const descendants = collectDescendants(node);
|
|
9246
|
+
const newSet = new Set(selectedSet);
|
|
9247
|
+
if (state === "checked" || state === "partial") {
|
|
9248
|
+
descendants.forEach((id) => newSet.delete(id));
|
|
9249
|
+
onNodeUnselect?.({ node });
|
|
9250
|
+
} else {
|
|
9251
|
+
descendants.forEach((id) => newSet.add(id));
|
|
9252
|
+
onNodeSelect?.({ node });
|
|
9253
|
+
}
|
|
9254
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9255
|
+
} else {
|
|
9256
|
+
if (selectedSet.has(nodeId)) {
|
|
9257
|
+
onChange?.({ value: null });
|
|
9258
|
+
onNodeUnselect?.({ node });
|
|
9259
|
+
} else {
|
|
9260
|
+
onChange?.({ value: node.id });
|
|
9261
|
+
onNodeSelect?.({ node });
|
|
9262
|
+
closeDropdown();
|
|
9263
|
+
}
|
|
9264
|
+
}
|
|
9265
|
+
};
|
|
9266
|
+
const handleToggleExpand = (id) => {
|
|
9267
|
+
setExpandedKeys((prev) => {
|
|
9268
|
+
const next = new Set(prev);
|
|
9269
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
9270
|
+
return next;
|
|
9271
|
+
});
|
|
9272
|
+
};
|
|
9273
|
+
const handleClear = (e) => {
|
|
9274
|
+
e.stopPropagation();
|
|
9275
|
+
onChange?.({ value: isMultiple ? {} : null });
|
|
9276
|
+
};
|
|
9277
|
+
const handleRemoveTag = (e, node) => {
|
|
9278
|
+
e.stopPropagation();
|
|
9279
|
+
const newSet = new Set(selectedSet);
|
|
9280
|
+
collectDescendants(node).forEach((id) => newSet.delete(id));
|
|
9281
|
+
onChange?.({ value: setToRecord(newSet) });
|
|
9282
|
+
onNodeUnselect?.({ node });
|
|
9283
|
+
};
|
|
9284
|
+
const filteredTree = filterTree(options, filterQuery);
|
|
9285
|
+
const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
|
|
9286
|
+
const hasValue = tagNodes.length > 0;
|
|
9287
|
+
const isFloating = open || hasValue || focused;
|
|
9288
|
+
const rootClasses = [
|
|
9289
|
+
"rf-text-field",
|
|
9290
|
+
`rf-text-field--${variant}`,
|
|
9291
|
+
size === "small" ? "rf-text-field--small" : "",
|
|
9292
|
+
disabled ? "rf-text-field--disabled" : "",
|
|
9293
|
+
error ? "rf-text-field--error" : "",
|
|
9294
|
+
fullWidth ? "rf-text-field--full-width" : "",
|
|
9295
|
+
isFloating ? "rf-text-field--floating" : "",
|
|
9296
|
+
"rf-tree-select",
|
|
9297
|
+
sxClass,
|
|
9298
|
+
className
|
|
9299
|
+
].filter(Boolean).join(" ");
|
|
9300
|
+
return /* @__PURE__ */ import_react49.default.createElement("div", { className: rootClasses, style }, label && /* @__PURE__ */ import_react49.default.createElement("label", { className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), /* @__PURE__ */ import_react49.default.createElement(
|
|
9301
|
+
"div",
|
|
9302
|
+
{
|
|
9303
|
+
ref: triggerRef,
|
|
9304
|
+
className: `rf-text-field__wrapper rf-tree-select__trigger${open ? " rf-tree-select__trigger--open" : ""}`,
|
|
9305
|
+
tabIndex: disabled ? -1 : 0,
|
|
9306
|
+
onMouseDown: handleTriggerMouseDown,
|
|
9307
|
+
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
9308
|
+
onFocus: handleTriggerFocus,
|
|
9309
|
+
onBlur: handleTriggerBlur,
|
|
9310
|
+
onKeyDown: handleKeyDown
|
|
9311
|
+
},
|
|
9312
|
+
isMultiple ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ import_react49.default.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, /* @__PURE__ */ import_react49.default.createElement(
|
|
9313
|
+
"button",
|
|
9314
|
+
{
|
|
9315
|
+
type: "button",
|
|
9316
|
+
className: "rf-ts__chip-delete",
|
|
9317
|
+
onClick: (e) => handleRemoveTag(e, node),
|
|
9318
|
+
tabIndex: -1
|
|
9319
|
+
},
|
|
9320
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 10 })
|
|
9321
|
+
))) : open ? /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ import_react49.default.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : open ? placeholder : "\xA0"),
|
|
9322
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ import_react49.default.createElement(
|
|
9323
|
+
"button",
|
|
9324
|
+
{
|
|
9325
|
+
type: "button",
|
|
9326
|
+
className: "rf-autocomplete__icon-btn",
|
|
9327
|
+
onClick: handleClear,
|
|
9328
|
+
tabIndex: -1
|
|
9329
|
+
},
|
|
9330
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 16 })
|
|
9331
|
+
), /* @__PURE__ */ import_react49.default.createElement(
|
|
9332
|
+
"button",
|
|
9333
|
+
{
|
|
9334
|
+
type: "button",
|
|
9335
|
+
className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup${open ? " rf-autocomplete__icon-btn--open" : ""}`,
|
|
9336
|
+
onClick: (e) => {
|
|
9337
|
+
e.stopPropagation();
|
|
9338
|
+
open ? closeDropdown() : openDropdown();
|
|
9339
|
+
},
|
|
9340
|
+
tabIndex: -1
|
|
9341
|
+
},
|
|
9342
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 18 })
|
|
9343
|
+
)),
|
|
9344
|
+
variant === "outlined" && /* @__PURE__ */ import_react49.default.createElement("fieldset", { "aria-hidden": true, className: "rf-text-field__notch" }, /* @__PURE__ */ import_react49.default.createElement("legend", { className: "rf-text-field__legend" }, label && /* @__PURE__ */ import_react49.default.createElement("span", null, label, required ? " *" : ""))),
|
|
9345
|
+
variant === "filled" && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__filled-bg" }), /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })),
|
|
9346
|
+
variant === "standard" && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })
|
|
9347
|
+
), helperText && /* @__PURE__ */ import_react49.default.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && import_react_dom11.default.createPortal(
|
|
9348
|
+
/* @__PURE__ */ import_react49.default.createElement(
|
|
9349
|
+
"div",
|
|
9350
|
+
{
|
|
9351
|
+
ref: dropdownRef,
|
|
9352
|
+
className: "rf-tree-select__popup",
|
|
9353
|
+
style: dropdownStyle
|
|
9354
|
+
},
|
|
9355
|
+
filter && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__filter" }, /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Search, { size: 14, className: "rf-tree-select__filter-icon" }), /* @__PURE__ */ import_react49.default.createElement(
|
|
9356
|
+
"input",
|
|
9357
|
+
{
|
|
9358
|
+
ref: filterInputRef,
|
|
9359
|
+
className: "rf-tree-select__filter-input",
|
|
9360
|
+
placeholder: "Search\u2026",
|
|
9361
|
+
value: filterQuery,
|
|
9362
|
+
onChange: (e) => setFilterQuery(e.target.value)
|
|
9363
|
+
}
|
|
9364
|
+
), filterQuery && /* @__PURE__ */ import_react49.default.createElement(
|
|
9365
|
+
"button",
|
|
9366
|
+
{
|
|
9367
|
+
type: "button",
|
|
9368
|
+
className: "rf-autocomplete__icon-btn",
|
|
9369
|
+
onClick: () => setFilterQuery(""),
|
|
9370
|
+
tabIndex: -1
|
|
9371
|
+
},
|
|
9372
|
+
/* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 12 })
|
|
9373
|
+
)),
|
|
9374
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__tree" }, filteredTree.length === 0 ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tree-select__empty" }, "No results found") : filteredTree.map((node) => /* @__PURE__ */ import_react49.default.createElement(
|
|
9375
|
+
TreeNodeItem,
|
|
9376
|
+
{
|
|
9377
|
+
key: node.id,
|
|
9378
|
+
node,
|
|
9379
|
+
depth: 0,
|
|
9380
|
+
selected: selectedSet,
|
|
9381
|
+
expanded: expandedKeys,
|
|
9382
|
+
selectionMode,
|
|
9383
|
+
onToggleExpand: handleToggleExpand,
|
|
9384
|
+
onSelect: handleSelect,
|
|
9385
|
+
isFiltering: !!filterQuery
|
|
9386
|
+
}
|
|
9387
|
+
)))
|
|
9388
|
+
),
|
|
9389
|
+
document.body
|
|
9390
|
+
));
|
|
9391
|
+
}
|
|
9392
|
+
|
|
8736
9393
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
8737
|
-
var
|
|
8738
|
-
var
|
|
8739
|
-
var
|
|
9394
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
9395
|
+
var import_react_dom18 = require("react-dom");
|
|
9396
|
+
var import_react61 = require("@tiptap/react");
|
|
8740
9397
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
8741
9398
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
8742
9399
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -8756,21 +9413,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
8756
9413
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
8757
9414
|
|
|
8758
9415
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
8759
|
-
var
|
|
9416
|
+
var import_react51 = require("@tiptap/react");
|
|
8760
9417
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
8761
9418
|
|
|
8762
9419
|
// lib/RufousTextEditor/MentionList.tsx
|
|
8763
|
-
var
|
|
8764
|
-
var MentionList = (0,
|
|
8765
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9420
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
9421
|
+
var MentionList = (0, import_react50.forwardRef)((props, ref) => {
|
|
9422
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
|
|
8766
9423
|
const selectItem = (index) => {
|
|
8767
9424
|
const item = props.items[index];
|
|
8768
9425
|
if (item) {
|
|
8769
9426
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
8770
9427
|
}
|
|
8771
9428
|
};
|
|
8772
|
-
(0,
|
|
8773
|
-
(0,
|
|
9429
|
+
(0, import_react50.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9430
|
+
(0, import_react50.useImperativeHandle)(ref, () => ({
|
|
8774
9431
|
onKeyDown: ({ event }) => {
|
|
8775
9432
|
if (event.key === "ArrowUp") {
|
|
8776
9433
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -8788,17 +9445,17 @@ var MentionList = (0, import_react49.forwardRef)((props, ref) => {
|
|
|
8788
9445
|
}
|
|
8789
9446
|
}));
|
|
8790
9447
|
if (!props.items.length) {
|
|
8791
|
-
return /* @__PURE__ */
|
|
9448
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
8792
9449
|
}
|
|
8793
|
-
return /* @__PURE__ */
|
|
9450
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react50.default.createElement(
|
|
8794
9451
|
"button",
|
|
8795
9452
|
{
|
|
8796
9453
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
8797
9454
|
key: item.id,
|
|
8798
9455
|
onClick: () => selectItem(index)
|
|
8799
9456
|
},
|
|
8800
|
-
/* @__PURE__ */
|
|
8801
|
-
/* @__PURE__ */
|
|
9457
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9458
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
8802
9459
|
)));
|
|
8803
9460
|
});
|
|
8804
9461
|
MentionList.displayName = "MentionList";
|
|
@@ -8818,7 +9475,7 @@ function createMentionSuggestion(users) {
|
|
|
8818
9475
|
return {
|
|
8819
9476
|
onStart: (props) => {
|
|
8820
9477
|
if (!props.clientRect) return;
|
|
8821
|
-
component = new
|
|
9478
|
+
component = new import_react51.ReactRenderer(MentionList_default, {
|
|
8822
9479
|
props,
|
|
8823
9480
|
editor: props.editor
|
|
8824
9481
|
});
|
|
@@ -8856,21 +9513,21 @@ function createMentionSuggestion(users) {
|
|
|
8856
9513
|
}
|
|
8857
9514
|
|
|
8858
9515
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
8859
|
-
var
|
|
8860
|
-
var
|
|
9516
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
9517
|
+
var import_react_dom14 = require("react-dom");
|
|
8861
9518
|
|
|
8862
9519
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
8863
|
-
var
|
|
8864
|
-
var TextToSpeech = (0,
|
|
8865
|
-
const [speaking, setSpeaking] = (0,
|
|
8866
|
-
const [paused, setPaused] = (0,
|
|
8867
|
-
const [voices, setVoices] = (0,
|
|
8868
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
8869
|
-
const [rate, setRate] = (0,
|
|
8870
|
-
const [showPanel, setShowPanel] = (0,
|
|
8871
|
-
const utteranceRef = (0,
|
|
8872
|
-
const panelRef = (0,
|
|
8873
|
-
(0,
|
|
9520
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
9521
|
+
var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9522
|
+
const [speaking, setSpeaking] = (0, import_react52.useState)(false);
|
|
9523
|
+
const [paused, setPaused] = (0, import_react52.useState)(false);
|
|
9524
|
+
const [voices, setVoices] = (0, import_react52.useState)([]);
|
|
9525
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react52.useState)("");
|
|
9526
|
+
const [rate, setRate] = (0, import_react52.useState)(1);
|
|
9527
|
+
const [showPanel, setShowPanel] = (0, import_react52.useState)(false);
|
|
9528
|
+
const utteranceRef = (0, import_react52.useRef)(null);
|
|
9529
|
+
const panelRef = (0, import_react52.useRef)(null);
|
|
9530
|
+
(0, import_react52.useEffect)(() => {
|
|
8874
9531
|
const synth = window.speechSynthesis;
|
|
8875
9532
|
const loadVoices = () => {
|
|
8876
9533
|
const available = synth.getVoices();
|
|
@@ -8888,7 +9545,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8888
9545
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
8889
9546
|
};
|
|
8890
9547
|
}, [selectedVoice]);
|
|
8891
|
-
(0,
|
|
9548
|
+
(0, import_react52.useEffect)(() => {
|
|
8892
9549
|
const handleClick = (e) => {
|
|
8893
9550
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
8894
9551
|
setShowPanel(false);
|
|
@@ -8897,7 +9554,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8897
9554
|
document.addEventListener("mousedown", handleClick);
|
|
8898
9555
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
8899
9556
|
}, []);
|
|
8900
|
-
const getTextToSpeak = (0,
|
|
9557
|
+
const getTextToSpeak = (0, import_react52.useCallback)(() => {
|
|
8901
9558
|
if (!editor) return "";
|
|
8902
9559
|
const { from, to, empty } = editor.state.selection;
|
|
8903
9560
|
if (!empty) {
|
|
@@ -8905,7 +9562,7 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8905
9562
|
}
|
|
8906
9563
|
return editor.getText();
|
|
8907
9564
|
}, [editor]);
|
|
8908
|
-
const handleSpeak = (0,
|
|
9565
|
+
const handleSpeak = (0, import_react52.useCallback)(async () => {
|
|
8909
9566
|
const text = getTextToSpeak();
|
|
8910
9567
|
if (!text.trim()) return;
|
|
8911
9568
|
if (onTextToSpeech) {
|
|
@@ -8947,25 +9604,25 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8947
9604
|
setSpeaking(true);
|
|
8948
9605
|
setPaused(false);
|
|
8949
9606
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
8950
|
-
const handlePause = (0,
|
|
9607
|
+
const handlePause = (0, import_react52.useCallback)(() => {
|
|
8951
9608
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
8952
9609
|
window.speechSynthesis.pause();
|
|
8953
9610
|
setPaused(true);
|
|
8954
9611
|
}
|
|
8955
9612
|
}, []);
|
|
8956
|
-
const handleResume = (0,
|
|
9613
|
+
const handleResume = (0, import_react52.useCallback)(() => {
|
|
8957
9614
|
if (window.speechSynthesis.paused) {
|
|
8958
9615
|
window.speechSynthesis.resume();
|
|
8959
9616
|
setPaused(false);
|
|
8960
9617
|
}
|
|
8961
9618
|
}, []);
|
|
8962
|
-
const handleStop = (0,
|
|
9619
|
+
const handleStop = (0, import_react52.useCallback)(() => {
|
|
8963
9620
|
window.speechSynthesis.cancel();
|
|
8964
9621
|
setSpeaking(false);
|
|
8965
9622
|
setPaused(false);
|
|
8966
9623
|
}, []);
|
|
8967
|
-
(0,
|
|
8968
|
-
return /* @__PURE__ */
|
|
9624
|
+
(0, import_react52.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9625
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement(
|
|
8969
9626
|
"button",
|
|
8970
9627
|
{
|
|
8971
9628
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -8978,15 +9635,15 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8978
9635
|
}
|
|
8979
9636
|
},
|
|
8980
9637
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
8981
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9638
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react52.default.createElement(
|
|
8982
9639
|
"select",
|
|
8983
9640
|
{
|
|
8984
9641
|
className: "tts-select",
|
|
8985
9642
|
value: selectedVoice,
|
|
8986
9643
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
8987
9644
|
},
|
|
8988
|
-
voices.map((v) => /* @__PURE__ */
|
|
8989
|
-
), /* @__PURE__ */
|
|
9645
|
+
voices.map((v) => /* @__PURE__ */ import_react52.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9646
|
+
), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react52.default.createElement(
|
|
8990
9647
|
"input",
|
|
8991
9648
|
{
|
|
8992
9649
|
type: "range",
|
|
@@ -8997,26 +9654,26 @@ var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
8997
9654
|
value: rate,
|
|
8998
9655
|
onChange: (e) => setRate(Number(e.target.value))
|
|
8999
9656
|
}
|
|
9000
|
-
), /* @__PURE__ */
|
|
9657
|
+
), /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react52.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9001
9658
|
handleSpeak();
|
|
9002
9659
|
setShowPanel(false);
|
|
9003
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9660
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react52.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9004
9661
|
});
|
|
9005
9662
|
var TextToSpeech_default = TextToSpeech;
|
|
9006
9663
|
|
|
9007
9664
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9008
|
-
var
|
|
9009
|
-
var SpeechToText = (0,
|
|
9010
|
-
const [listening, setListening] = (0,
|
|
9011
|
-
const [showPanel, setShowPanel] = (0,
|
|
9012
|
-
const [language, setLanguage] = (0,
|
|
9013
|
-
const [interim, setInterim] = (0,
|
|
9014
|
-
const recognitionRef = (0,
|
|
9015
|
-
const panelRef = (0,
|
|
9016
|
-
const isListeningRef = (0,
|
|
9665
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
9666
|
+
var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9667
|
+
const [listening, setListening] = (0, import_react53.useState)(false);
|
|
9668
|
+
const [showPanel, setShowPanel] = (0, import_react53.useState)(false);
|
|
9669
|
+
const [language, setLanguage] = (0, import_react53.useState)("en-US");
|
|
9670
|
+
const [interim, setInterim] = (0, import_react53.useState)("");
|
|
9671
|
+
const recognitionRef = (0, import_react53.useRef)(null);
|
|
9672
|
+
const panelRef = (0, import_react53.useRef)(null);
|
|
9673
|
+
const isListeningRef = (0, import_react53.useRef)(false);
|
|
9017
9674
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9018
9675
|
const supported = !!SpeechRecognitionAPI;
|
|
9019
|
-
(0,
|
|
9676
|
+
(0, import_react53.useEffect)(() => {
|
|
9020
9677
|
const handleClick = (e) => {
|
|
9021
9678
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9022
9679
|
setShowPanel(false);
|
|
@@ -9025,7 +9682,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9025
9682
|
document.addEventListener("mousedown", handleClick);
|
|
9026
9683
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9027
9684
|
}, []);
|
|
9028
|
-
const createRecognition = (0,
|
|
9685
|
+
const createRecognition = (0, import_react53.useCallback)(() => {
|
|
9029
9686
|
if (!supported) return null;
|
|
9030
9687
|
const recognition = new SpeechRecognitionAPI();
|
|
9031
9688
|
recognition.lang = language;
|
|
@@ -9034,7 +9691,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9034
9691
|
recognition.maxAlternatives = 1;
|
|
9035
9692
|
return recognition;
|
|
9036
9693
|
}, [supported, language]);
|
|
9037
|
-
const startSession = (0,
|
|
9694
|
+
const startSession = (0, import_react53.useCallback)((recognition) => {
|
|
9038
9695
|
if (!recognition || !editor) return;
|
|
9039
9696
|
recognition.onresult = async (event) => {
|
|
9040
9697
|
let finalText = "";
|
|
@@ -9089,7 +9746,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9089
9746
|
}
|
|
9090
9747
|
};
|
|
9091
9748
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9092
|
-
const startListening = (0,
|
|
9749
|
+
const startListening = (0, import_react53.useCallback)(() => {
|
|
9093
9750
|
if (!supported || !editor) return;
|
|
9094
9751
|
const recognition = createRecognition();
|
|
9095
9752
|
if (!recognition) return;
|
|
@@ -9105,7 +9762,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9105
9762
|
setListening(false);
|
|
9106
9763
|
}
|
|
9107
9764
|
}, [supported, editor, createRecognition, startSession]);
|
|
9108
|
-
const stopListening = (0,
|
|
9765
|
+
const stopListening = (0, import_react53.useCallback)(() => {
|
|
9109
9766
|
isListeningRef.current = false;
|
|
9110
9767
|
if (recognitionRef.current) {
|
|
9111
9768
|
try {
|
|
@@ -9117,9 +9774,9 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9117
9774
|
setListening(false);
|
|
9118
9775
|
setInterim("");
|
|
9119
9776
|
}, []);
|
|
9120
|
-
(0,
|
|
9777
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9121
9778
|
if (!supported) {
|
|
9122
|
-
return /* @__PURE__ */
|
|
9779
|
+
return /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9123
9780
|
}
|
|
9124
9781
|
const LANGUAGES2 = [
|
|
9125
9782
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9141,7 +9798,7 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9141
9798
|
{ code: "kn-IN", label: "Kannada" },
|
|
9142
9799
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9143
9800
|
];
|
|
9144
|
-
return /* @__PURE__ */
|
|
9801
|
+
return /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
|
|
9145
9802
|
"button",
|
|
9146
9803
|
{
|
|
9147
9804
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9154,21 +9811,21 @@ var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9154
9811
|
}
|
|
9155
9812
|
},
|
|
9156
9813
|
"\u{1F3A4}"
|
|
9157
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
9814
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react53.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9158
9815
|
"select",
|
|
9159
9816
|
{
|
|
9160
9817
|
className: "stt-select",
|
|
9161
9818
|
value: language,
|
|
9162
9819
|
onChange: (e) => setLanguage(e.target.value)
|
|
9163
9820
|
},
|
|
9164
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9165
|
-
), /* @__PURE__ */
|
|
9821
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react53.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
9822
|
+
), /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react53.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9166
9823
|
});
|
|
9167
9824
|
var SpeechToText_default = SpeechToText;
|
|
9168
9825
|
|
|
9169
9826
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9170
|
-
var
|
|
9171
|
-
var
|
|
9827
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9828
|
+
var import_react_dom12 = require("react-dom");
|
|
9172
9829
|
var AI_COMMANDS = [
|
|
9173
9830
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
9174
9831
|
{ id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
|
|
@@ -9215,16 +9872,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9215
9872
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9216
9873
|
};
|
|
9217
9874
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9218
|
-
const [open, setOpen] = (0,
|
|
9219
|
-
const [showModal, setShowModal] = (0,
|
|
9220
|
-
const [loading, setLoading] = (0,
|
|
9221
|
-
const [promptText, setPromptText] = (0,
|
|
9222
|
-
const [resultText, setResultText] = (0,
|
|
9223
|
-
const [originalText, setOriginalText] = (0,
|
|
9224
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9225
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9226
|
-
const panelRef = (0,
|
|
9227
|
-
(0,
|
|
9875
|
+
const [open, setOpen] = (0, import_react54.useState)(false);
|
|
9876
|
+
const [showModal, setShowModal] = (0, import_react54.useState)(false);
|
|
9877
|
+
const [loading, setLoading] = (0, import_react54.useState)(false);
|
|
9878
|
+
const [promptText, setPromptText] = (0, import_react54.useState)("");
|
|
9879
|
+
const [resultText, setResultText] = (0, import_react54.useState)("");
|
|
9880
|
+
const [originalText, setOriginalText] = (0, import_react54.useState)("");
|
|
9881
|
+
const [selectionRange, setSelectionRange] = (0, import_react54.useState)(null);
|
|
9882
|
+
const [previousResults, setPreviousResults] = (0, import_react54.useState)([]);
|
|
9883
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9884
|
+
(0, import_react54.useEffect)(() => {
|
|
9228
9885
|
const handleClick = (e) => {
|
|
9229
9886
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9230
9887
|
setOpen(false);
|
|
@@ -9233,7 +9890,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9233
9890
|
document.addEventListener("mousedown", handleClick);
|
|
9234
9891
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9235
9892
|
}, []);
|
|
9236
|
-
const getSelectedText = (0,
|
|
9893
|
+
const getSelectedText = (0, import_react54.useCallback)(() => {
|
|
9237
9894
|
if (!editor) return { text: "", range: null };
|
|
9238
9895
|
const { from, to, empty } = editor.state.selection;
|
|
9239
9896
|
if (!empty) {
|
|
@@ -9241,7 +9898,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9241
9898
|
}
|
|
9242
9899
|
return { text: editor.getText(), range: null };
|
|
9243
9900
|
}, [editor]);
|
|
9244
|
-
const fetchAIResult = (0,
|
|
9901
|
+
const fetchAIResult = (0, import_react54.useCallback)(async (prompt, text, prevResults = []) => {
|
|
9245
9902
|
setLoading(true);
|
|
9246
9903
|
setResultText("");
|
|
9247
9904
|
try {
|
|
@@ -9259,7 +9916,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9259
9916
|
setLoading(false);
|
|
9260
9917
|
}
|
|
9261
9918
|
}, [onAICommand]);
|
|
9262
|
-
const handleCommandSelect = (0,
|
|
9919
|
+
const handleCommandSelect = (0, import_react54.useCallback)((command) => {
|
|
9263
9920
|
const { text, range } = getSelectedText();
|
|
9264
9921
|
if (!text.trim()) return;
|
|
9265
9922
|
setOriginalText(text);
|
|
@@ -9270,7 +9927,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9270
9927
|
setShowModal(true);
|
|
9271
9928
|
fetchAIResult(command.prompt, text, []);
|
|
9272
9929
|
}, [getSelectedText, fetchAIResult]);
|
|
9273
|
-
const handleInsert = (0,
|
|
9930
|
+
const handleInsert = (0, import_react54.useCallback)(() => {
|
|
9274
9931
|
if (!resultText || !editor) return;
|
|
9275
9932
|
if (selectionRange) {
|
|
9276
9933
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9280,7 +9937,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9280
9937
|
setShowModal(false);
|
|
9281
9938
|
setResultText("");
|
|
9282
9939
|
}, [editor, resultText, selectionRange]);
|
|
9283
|
-
const handleInsertAfter = (0,
|
|
9940
|
+
const handleInsertAfter = (0, import_react54.useCallback)(() => {
|
|
9284
9941
|
if (!resultText || !editor) return;
|
|
9285
9942
|
if (selectionRange) {
|
|
9286
9943
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9295,11 +9952,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9295
9952
|
setShowModal(false);
|
|
9296
9953
|
setResultText("");
|
|
9297
9954
|
}, [editor, resultText, selectionRange]);
|
|
9298
|
-
const handleRefresh = (0,
|
|
9955
|
+
const handleRefresh = (0, import_react54.useCallback)(() => {
|
|
9299
9956
|
if (!originalText.trim()) return;
|
|
9300
9957
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9301
9958
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9302
|
-
const handleCancel = (0,
|
|
9959
|
+
const handleCancel = (0, import_react54.useCallback)(() => {
|
|
9303
9960
|
setShowModal(false);
|
|
9304
9961
|
setResultText("");
|
|
9305
9962
|
setPromptText("");
|
|
@@ -9308,15 +9965,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9308
9965
|
setPreviousResults([]);
|
|
9309
9966
|
}, []);
|
|
9310
9967
|
if (!editor) return null;
|
|
9311
|
-
return /* @__PURE__ */
|
|
9968
|
+
return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9312
9969
|
"button",
|
|
9313
9970
|
{
|
|
9314
9971
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9315
9972
|
onClick: () => setOpen(!open)
|
|
9316
9973
|
},
|
|
9317
|
-
/* @__PURE__ */
|
|
9318
|
-
/* @__PURE__ */
|
|
9319
|
-
)), open && /* @__PURE__ */
|
|
9974
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react54.default.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
9975
|
+
/* @__PURE__ */ import_react54.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
9976
|
+
)), open && /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react54.default.createElement(
|
|
9320
9977
|
"button",
|
|
9321
9978
|
{
|
|
9322
9979
|
key: cmd.id,
|
|
@@ -9324,8 +9981,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9324
9981
|
onClick: () => handleCommandSelect(cmd)
|
|
9325
9982
|
},
|
|
9326
9983
|
cmd.label
|
|
9327
|
-
))), /* @__PURE__ */
|
|
9328
|
-
/* @__PURE__ */
|
|
9984
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
|
|
9985
|
+
/* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react54.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9329
9986
|
"textarea",
|
|
9330
9987
|
{
|
|
9331
9988
|
className: "ai-modal-prompt",
|
|
@@ -9333,15 +9990,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9333
9990
|
onChange: (e) => setPromptText(e.target.value),
|
|
9334
9991
|
rows: 3
|
|
9335
9992
|
}
|
|
9336
|
-
), /* @__PURE__ */
|
|
9993
|
+
), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9337
9994
|
"button",
|
|
9338
9995
|
{
|
|
9339
9996
|
className: "ai-modal-robot-btn",
|
|
9340
9997
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9341
9998
|
disabled: loading
|
|
9342
9999
|
},
|
|
9343
|
-
/* @__PURE__ */
|
|
9344
|
-
)))), /* @__PURE__ */
|
|
10000
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react54.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M8 7h8" }))
|
|
10001
|
+
)))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9345
10002
|
"button",
|
|
9346
10003
|
{
|
|
9347
10004
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -9349,7 +10006,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9349
10006
|
disabled: loading || !resultText
|
|
9350
10007
|
},
|
|
9351
10008
|
"Insert"
|
|
9352
|
-
), /* @__PURE__ */
|
|
10009
|
+
), /* @__PURE__ */ import_react54.default.createElement(
|
|
9353
10010
|
"button",
|
|
9354
10011
|
{
|
|
9355
10012
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -9357,23 +10014,23 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9357
10014
|
disabled: loading || !resultText
|
|
9358
10015
|
},
|
|
9359
10016
|
"Insert After"
|
|
9360
|
-
), /* @__PURE__ */
|
|
10017
|
+
), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9361
10018
|
"button",
|
|
9362
10019
|
{
|
|
9363
10020
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
9364
10021
|
onClick: handleRefresh,
|
|
9365
10022
|
disabled: loading
|
|
9366
10023
|
},
|
|
9367
|
-
/* @__PURE__ */
|
|
9368
|
-
))), /* @__PURE__ */
|
|
10024
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10025
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react54.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
9369
10026
|
document.body
|
|
9370
10027
|
));
|
|
9371
10028
|
};
|
|
9372
10029
|
var AICommands_default = AICommands;
|
|
9373
10030
|
|
|
9374
10031
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
9375
|
-
var
|
|
9376
|
-
var
|
|
10032
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
10033
|
+
var import_react_dom13 = require("react-dom");
|
|
9377
10034
|
var LANGUAGES = [
|
|
9378
10035
|
{ code: "af", name: "Afrikaans" },
|
|
9379
10036
|
{ code: "sq", name: "Albanian" },
|
|
@@ -9512,16 +10169,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
9512
10169
|
return null;
|
|
9513
10170
|
}
|
|
9514
10171
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
9515
|
-
const [sourceLang, setSourceLang] = (0,
|
|
9516
|
-
const [targetLang, setTargetLang] = (0,
|
|
9517
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
9518
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
9519
|
-
const [translating, setTranslating] = (0,
|
|
9520
|
-
const [error, setError] = (0,
|
|
9521
|
-
const filteredSource = (0,
|
|
10172
|
+
const [sourceLang, setSourceLang] = (0, import_react55.useState)(initialSource || "en");
|
|
10173
|
+
const [targetLang, setTargetLang] = (0, import_react55.useState)(initialTarget || "hi");
|
|
10174
|
+
const [sourceFilter, setSourceFilter] = (0, import_react55.useState)("");
|
|
10175
|
+
const [targetFilter, setTargetFilter] = (0, import_react55.useState)("");
|
|
10176
|
+
const [translating, setTranslating] = (0, import_react55.useState)(false);
|
|
10177
|
+
const [error, setError] = (0, import_react55.useState)("");
|
|
10178
|
+
const filteredSource = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
9522
10179
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
9523
10180
|
), [sourceFilter]);
|
|
9524
|
-
const filteredTarget = (0,
|
|
10181
|
+
const filteredTarget = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
9525
10182
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
9526
10183
|
), [targetFilter]);
|
|
9527
10184
|
const handleSwap = () => {
|
|
@@ -9564,8 +10221,8 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9564
10221
|
setTranslating(false);
|
|
9565
10222
|
}
|
|
9566
10223
|
};
|
|
9567
|
-
return (0,
|
|
9568
|
-
/* @__PURE__ */
|
|
10224
|
+
return (0, import_react_dom13.createPortal)(
|
|
10225
|
+
/* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react55.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9569
10226
|
"input",
|
|
9570
10227
|
{
|
|
9571
10228
|
type: "text",
|
|
@@ -9574,16 +10231,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9574
10231
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
9575
10232
|
className: "translate-filter-input"
|
|
9576
10233
|
}
|
|
9577
|
-
)), /* @__PURE__ */
|
|
10234
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9578
10235
|
"button",
|
|
9579
10236
|
{
|
|
9580
10237
|
key: lang.code,
|
|
9581
10238
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
9582
10239
|
onClick: () => setSourceLang(lang.code)
|
|
9583
10240
|
},
|
|
9584
|
-
/* @__PURE__ */
|
|
9585
|
-
/* @__PURE__ */
|
|
9586
|
-
)))), /* @__PURE__ */
|
|
10241
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10242
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10243
|
+
)))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9587
10244
|
"input",
|
|
9588
10245
|
{
|
|
9589
10246
|
type: "text",
|
|
@@ -9592,16 +10249,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
9592
10249
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
9593
10250
|
className: "translate-filter-input"
|
|
9594
10251
|
}
|
|
9595
|
-
)), /* @__PURE__ */
|
|
10252
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9596
10253
|
"button",
|
|
9597
10254
|
{
|
|
9598
10255
|
key: lang.code,
|
|
9599
10256
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
9600
10257
|
onClick: () => setTargetLang(lang.code)
|
|
9601
10258
|
},
|
|
9602
|
-
/* @__PURE__ */
|
|
9603
|
-
/* @__PURE__ */
|
|
9604
|
-
))))), error && /* @__PURE__ */
|
|
10259
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10260
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10261
|
+
))))), error && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
9605
10262
|
document.body
|
|
9606
10263
|
);
|
|
9607
10264
|
};
|
|
@@ -10252,38 +10909,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
10252
10909
|
});
|
|
10253
10910
|
|
|
10254
10911
|
// lib/RufousTextEditor/icons.tsx
|
|
10255
|
-
var
|
|
10912
|
+
var React112 = __toESM(require("react"), 1);
|
|
10256
10913
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10257
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10258
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10259
|
-
var IconBold = () => /* @__PURE__ */
|
|
10260
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10261
|
-
var IconLink = () => /* @__PURE__ */
|
|
10262
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10263
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10264
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10265
|
-
var IconColor = () => /* @__PURE__ */
|
|
10266
|
-
var IconFont = () => /* @__PURE__ */
|
|
10267
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10268
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10269
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10270
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10271
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10272
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10273
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10274
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10275
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10276
|
-
var IconTable = () => /* @__PURE__ */
|
|
10277
|
-
var IconImage = () => /* @__PURE__ */
|
|
10278
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10279
|
-
var IconCut = () => /* @__PURE__ */
|
|
10280
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10281
|
-
var IconCode = () => /* @__PURE__ */
|
|
10282
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10283
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10284
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10285
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10286
|
-
var IconPaste = () => /* @__PURE__ */
|
|
10914
|
+
var IconUndo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
|
|
10915
|
+
var IconRedo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
|
|
10916
|
+
var IconBold = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
|
|
10917
|
+
var IconItalic = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
10918
|
+
var IconLink = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
|
|
10919
|
+
var IconStrike = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
|
|
10920
|
+
var IconHeading = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
10921
|
+
var IconFontSize = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
10922
|
+
var IconColor = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
10923
|
+
var IconFont = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
|
|
10924
|
+
var IconLineHeight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
|
|
10925
|
+
var IconBulletList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
|
|
10926
|
+
var IconOrderedList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
10927
|
+
var IconAlignLeft = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
10928
|
+
var IconAlignCenter = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
10929
|
+
var IconAlignRight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
10930
|
+
var IconAlignJustify = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
10931
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
10932
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
10933
|
+
var IconTable = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
|
|
10934
|
+
var IconImage = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
|
|
10935
|
+
var IconVideo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
|
|
10936
|
+
var IconCut = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
|
|
10937
|
+
var IconCopy = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
|
|
10938
|
+
var IconCode = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
|
|
10939
|
+
var IconFullscreen = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
10940
|
+
var IconTranslate = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
|
|
10941
|
+
var IconTaskList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
|
|
10942
|
+
var IconCheck = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
10943
|
+
var IconPaste = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
10287
10944
|
|
|
10288
10945
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10289
10946
|
var COLOR_PALETTE = [
|
|
@@ -10421,10 +11078,10 @@ var SPECIAL_CHARS = [
|
|
|
10421
11078
|
"\xA2"
|
|
10422
11079
|
];
|
|
10423
11080
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
10424
|
-
const [open, setOpen] = (0,
|
|
10425
|
-
const ref = (0,
|
|
10426
|
-
const menuRef = (0,
|
|
10427
|
-
(0,
|
|
11081
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
11082
|
+
const ref = (0, import_react56.useRef)(null);
|
|
11083
|
+
const menuRef = (0, import_react56.useRef)(null);
|
|
11084
|
+
(0, import_react56.useEffect)(() => {
|
|
10428
11085
|
const handleClick = (e) => {
|
|
10429
11086
|
const target = e.target;
|
|
10430
11087
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -10436,7 +11093,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10436
11093
|
document.addEventListener("mousedown", handleClick);
|
|
10437
11094
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
10438
11095
|
}, []);
|
|
10439
|
-
(0,
|
|
11096
|
+
(0, import_react56.useEffect)(() => {
|
|
10440
11097
|
if (!open || !menuRef.current || !ref.current) return;
|
|
10441
11098
|
const menu = menuRef.current;
|
|
10442
11099
|
const trigger2 = ref.current;
|
|
@@ -10465,22 +11122,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
10465
11122
|
};
|
|
10466
11123
|
position();
|
|
10467
11124
|
}, [open]);
|
|
10468
|
-
return /* @__PURE__ */
|
|
11125
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10469
11126
|
"button",
|
|
10470
11127
|
{
|
|
10471
11128
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
10472
11129
|
onClick: () => setOpen(!open)
|
|
10473
11130
|
},
|
|
10474
11131
|
trigger.label,
|
|
10475
|
-
/* @__PURE__ */
|
|
10476
|
-
)), open && (0,
|
|
10477
|
-
/* @__PURE__ */
|
|
11132
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11133
|
+
)), open && (0, import_react_dom14.createPortal)(
|
|
11134
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react56.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
10478
11135
|
document.body
|
|
10479
11136
|
));
|
|
10480
11137
|
};
|
|
10481
11138
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
10482
|
-
const [activeTab, setActiveTab] = (0,
|
|
10483
|
-
const [url, setUrl] = (0,
|
|
11139
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("link");
|
|
11140
|
+
const [url, setUrl] = (0, import_react56.useState)("");
|
|
10484
11141
|
const extractIframeSrc = (html) => {
|
|
10485
11142
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
10486
11143
|
return match ? match[1] : null;
|
|
@@ -10512,14 +11169,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10512
11169
|
}
|
|
10513
11170
|
onClose();
|
|
10514
11171
|
};
|
|
10515
|
-
return /* @__PURE__ */
|
|
11172
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10516
11173
|
"button",
|
|
10517
11174
|
{
|
|
10518
11175
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
10519
11176
|
onClick: () => setActiveTab("link")
|
|
10520
11177
|
},
|
|
10521
11178
|
"\u{1F517} Link"
|
|
10522
|
-
), /* @__PURE__ */
|
|
11179
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10523
11180
|
"button",
|
|
10524
11181
|
{
|
|
10525
11182
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -10527,7 +11184,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10527
11184
|
},
|
|
10528
11185
|
"</>",
|
|
10529
11186
|
" Code"
|
|
10530
|
-
)), /* @__PURE__ */
|
|
11187
|
+
)), /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react56.default.createElement(
|
|
10531
11188
|
"input",
|
|
10532
11189
|
{
|
|
10533
11190
|
type: "text",
|
|
@@ -10538,7 +11195,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10538
11195
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
10539
11196
|
autoFocus: true
|
|
10540
11197
|
}
|
|
10541
|
-
) : /* @__PURE__ */
|
|
11198
|
+
) : /* @__PURE__ */ import_react56.default.createElement(
|
|
10542
11199
|
"textarea",
|
|
10543
11200
|
{
|
|
10544
11201
|
className: "insert-panel-textarea",
|
|
@@ -10547,13 +11204,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
10547
11204
|
onChange: (e) => setUrl(e.target.value),
|
|
10548
11205
|
rows: 3
|
|
10549
11206
|
}
|
|
10550
|
-
), /* @__PURE__ */
|
|
11207
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
10551
11208
|
};
|
|
10552
11209
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
10553
|
-
const [activeTab, setActiveTab] = (0,
|
|
10554
|
-
const [url, setUrl] = (0,
|
|
10555
|
-
const [isDragging, setIsDragging] = (0,
|
|
10556
|
-
const fileInputRef = (0,
|
|
11210
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("upload");
|
|
11211
|
+
const [url, setUrl] = (0, import_react56.useState)("");
|
|
11212
|
+
const [isDragging, setIsDragging] = (0, import_react56.useState)(false);
|
|
11213
|
+
const fileInputRef = (0, import_react56.useRef)(null);
|
|
10557
11214
|
const getBase64 = (file) => {
|
|
10558
11215
|
return new Promise((resolve, reject) => {
|
|
10559
11216
|
const reader = new FileReader();
|
|
@@ -10591,21 +11248,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10591
11248
|
editor.chain().focus().setImage({ src: url }).run();
|
|
10592
11249
|
onClose();
|
|
10593
11250
|
};
|
|
10594
|
-
return /* @__PURE__ */
|
|
11251
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10595
11252
|
"button",
|
|
10596
11253
|
{
|
|
10597
11254
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
10598
11255
|
onClick: () => setActiveTab("upload")
|
|
10599
11256
|
},
|
|
10600
11257
|
"\u2B06 Upload"
|
|
10601
|
-
), /* @__PURE__ */
|
|
11258
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10602
11259
|
"button",
|
|
10603
11260
|
{
|
|
10604
11261
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
10605
11262
|
onClick: () => setActiveTab("url")
|
|
10606
11263
|
},
|
|
10607
11264
|
"\u{1F517} URL"
|
|
10608
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11265
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
|
|
10609
11266
|
"div",
|
|
10610
11267
|
{
|
|
10611
11268
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -10617,9 +11274,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10617
11274
|
onDrop: handleDrop,
|
|
10618
11275
|
onClick: () => fileInputRef.current?.click()
|
|
10619
11276
|
},
|
|
10620
|
-
/* @__PURE__ */
|
|
10621
|
-
/* @__PURE__ */
|
|
10622
|
-
), /* @__PURE__ */
|
|
11277
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11278
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11279
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10623
11280
|
"input",
|
|
10624
11281
|
{
|
|
10625
11282
|
ref: fileInputRef,
|
|
@@ -10628,7 +11285,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10628
11285
|
style: { display: "none" },
|
|
10629
11286
|
onChange: handleFileSelect
|
|
10630
11287
|
}
|
|
10631
|
-
)) : /* @__PURE__ */
|
|
11288
|
+
)) : /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react56.default.createElement(
|
|
10632
11289
|
"input",
|
|
10633
11290
|
{
|
|
10634
11291
|
type: "text",
|
|
@@ -10639,18 +11296,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
10639
11296
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
10640
11297
|
autoFocus: true
|
|
10641
11298
|
}
|
|
10642
|
-
), /* @__PURE__ */
|
|
11299
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
10643
11300
|
};
|
|
10644
11301
|
var MAX_GRID = 10;
|
|
10645
11302
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
10646
|
-
const [hoverRow, setHoverRow] = (0,
|
|
10647
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11303
|
+
const [hoverRow, setHoverRow] = (0, import_react56.useState)(0);
|
|
11304
|
+
const [hoverCol, setHoverCol] = (0, import_react56.useState)(0);
|
|
10648
11305
|
const handleInsert = () => {
|
|
10649
11306
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
10650
11307
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
10651
11308
|
onClose();
|
|
10652
11309
|
};
|
|
10653
|
-
return /* @__PURE__ */
|
|
11310
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10654
11311
|
"div",
|
|
10655
11312
|
{
|
|
10656
11313
|
className: "table-grid",
|
|
@@ -10659,7 +11316,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10659
11316
|
setHoverCol(0);
|
|
10660
11317
|
}
|
|
10661
11318
|
},
|
|
10662
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11319
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react56.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10663
11320
|
"div",
|
|
10664
11321
|
{
|
|
10665
11322
|
key: c,
|
|
@@ -10671,7 +11328,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10671
11328
|
onClick: handleInsert
|
|
10672
11329
|
}
|
|
10673
11330
|
))))
|
|
10674
|
-
), /* @__PURE__ */
|
|
11331
|
+
), /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react56.default.createElement(
|
|
10675
11332
|
"button",
|
|
10676
11333
|
{
|
|
10677
11334
|
className: "table-grid-submit",
|
|
@@ -10682,9 +11339,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
10682
11339
|
)));
|
|
10683
11340
|
};
|
|
10684
11341
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
10685
|
-
const [tab, setTab] = (0,
|
|
10686
|
-
const [activeBg, setActiveBg] = (0,
|
|
10687
|
-
const [activeText, setActiveText] = (0,
|
|
11342
|
+
const [tab, setTab] = (0, import_react56.useState)("background");
|
|
11343
|
+
const [activeBg, setActiveBg] = (0, import_react56.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11344
|
+
const [activeText, setActiveText] = (0, import_react56.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
10688
11345
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
10689
11346
|
const applyColor = (color) => {
|
|
10690
11347
|
if (tab === "background") {
|
|
@@ -10705,51 +11362,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
10705
11362
|
}
|
|
10706
11363
|
onClose();
|
|
10707
11364
|
};
|
|
10708
|
-
return /* @__PURE__ */
|
|
11365
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10709
11366
|
"button",
|
|
10710
11367
|
{
|
|
10711
11368
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
10712
11369
|
onClick: () => setTab("background")
|
|
10713
11370
|
},
|
|
10714
11371
|
"Background"
|
|
10715
|
-
), /* @__PURE__ */
|
|
11372
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10716
11373
|
"button",
|
|
10717
11374
|
{
|
|
10718
11375
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
10719
11376
|
onClick: () => setTab("text")
|
|
10720
11377
|
},
|
|
10721
11378
|
"Text"
|
|
10722
|
-
)), /* @__PURE__ */
|
|
11379
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react56.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10723
11380
|
"button",
|
|
10724
11381
|
{
|
|
10725
11382
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
10726
11383
|
style: { background: color },
|
|
10727
11384
|
onClick: () => applyColor(color)
|
|
10728
11385
|
}
|
|
10729
|
-
)))), /* @__PURE__ */
|
|
11386
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
10730
11387
|
};
|
|
10731
11388
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
10732
|
-
const [, setEditorState] = (0,
|
|
10733
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
10734
|
-
const ttsRef = (0,
|
|
10735
|
-
const sttRef = (0,
|
|
11389
|
+
const [, setEditorState] = (0, import_react56.useState)(0);
|
|
11390
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react56.useState)(false);
|
|
11391
|
+
const ttsRef = (0, import_react56.useRef)(null);
|
|
11392
|
+
const sttRef = (0, import_react56.useRef)(null);
|
|
10736
11393
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
10737
|
-
(0,
|
|
11394
|
+
(0, import_react56.useEffect)(() => {
|
|
10738
11395
|
if (!editor) return;
|
|
10739
11396
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
10740
11397
|
editor.on("transaction", onTransaction);
|
|
10741
11398
|
return () => editor.off("transaction", onTransaction);
|
|
10742
11399
|
}, [editor]);
|
|
10743
|
-
const insertSpecialChar = (0,
|
|
11400
|
+
const insertSpecialChar = (0, import_react56.useCallback)((char) => {
|
|
10744
11401
|
if (!editor) return;
|
|
10745
11402
|
editor.chain().focus().insertContent(char).run();
|
|
10746
11403
|
}, [editor]);
|
|
10747
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
10748
|
-
const [translateSource, setTranslateSource] = (0,
|
|
10749
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
10750
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
10751
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
10752
|
-
const handleCopy = (0,
|
|
11404
|
+
const [copySuccess, setCopySuccess] = (0, import_react56.useState)(false);
|
|
11405
|
+
const [translateSource, setTranslateSource] = (0, import_react56.useState)("en");
|
|
11406
|
+
const [translateTarget, setTranslateTarget] = (0, import_react56.useState)("hi");
|
|
11407
|
+
const [translateStatus, setTranslateStatus] = (0, import_react56.useState)("");
|
|
11408
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react56.useState)(false);
|
|
11409
|
+
const handleCopy = (0, import_react56.useCallback)(async () => {
|
|
10753
11410
|
if (!editor) return;
|
|
10754
11411
|
const { from, to, empty } = editor.state.selection;
|
|
10755
11412
|
if (empty) return;
|
|
@@ -10764,7 +11421,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10764
11421
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
10765
11422
|
}
|
|
10766
11423
|
}, [editor]);
|
|
10767
|
-
const handlePaste = (0,
|
|
11424
|
+
const handlePaste = (0, import_react56.useCallback)(async () => {
|
|
10768
11425
|
if (!editor) return;
|
|
10769
11426
|
try {
|
|
10770
11427
|
const text = await navigator.clipboard.readText();
|
|
@@ -10773,7 +11430,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10773
11430
|
document.execCommand("paste");
|
|
10774
11431
|
}
|
|
10775
11432
|
}, [editor]);
|
|
10776
|
-
const handleQuickTranslate = (0,
|
|
11433
|
+
const handleQuickTranslate = (0, import_react56.useCallback)(async () => {
|
|
10777
11434
|
if (!editor) return;
|
|
10778
11435
|
const { from, to, empty } = editor.state.selection;
|
|
10779
11436
|
if (empty) {
|
|
@@ -10807,32 +11464,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10807
11464
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
10808
11465
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
10809
11466
|
if (!editor) return null;
|
|
10810
|
-
return /* @__PURE__ */
|
|
11467
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10811
11468
|
"button",
|
|
10812
11469
|
{
|
|
10813
11470
|
className: "toolbar-btn",
|
|
10814
11471
|
onClick: () => editor.chain().focus().undo().run(),
|
|
10815
11472
|
disabled: !editor.can().undo()
|
|
10816
11473
|
},
|
|
10817
|
-
/* @__PURE__ */
|
|
10818
|
-
)), show("redo") && /* @__PURE__ */
|
|
11474
|
+
/* @__PURE__ */ import_react56.default.createElement(IconUndo, null)
|
|
11475
|
+
)), show("redo") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10819
11476
|
"button",
|
|
10820
11477
|
{
|
|
10821
11478
|
className: "toolbar-btn",
|
|
10822
11479
|
onClick: () => editor.chain().focus().redo().run(),
|
|
10823
11480
|
disabled: !editor.can().redo()
|
|
10824
11481
|
},
|
|
10825
|
-
/* @__PURE__ */
|
|
10826
|
-
))), show("ai") && /* @__PURE__ */
|
|
11482
|
+
/* @__PURE__ */ import_react56.default.createElement(IconRedo, null)
|
|
11483
|
+
))), show("ai") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react56.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10827
11484
|
Dropdown,
|
|
10828
11485
|
{
|
|
10829
11486
|
trigger: {
|
|
10830
|
-
label: /* @__PURE__ */
|
|
11487
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconHeading, null),
|
|
10831
11488
|
title: "Block type",
|
|
10832
11489
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
10833
11490
|
}
|
|
10834
11491
|
},
|
|
10835
|
-
/* @__PURE__ */
|
|
11492
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10836
11493
|
"button",
|
|
10837
11494
|
{
|
|
10838
11495
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -10840,7 +11497,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10840
11497
|
},
|
|
10841
11498
|
"\xB6 Paragraph"
|
|
10842
11499
|
),
|
|
10843
|
-
/* @__PURE__ */
|
|
11500
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10844
11501
|
"button",
|
|
10845
11502
|
{
|
|
10846
11503
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -10848,7 +11505,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10848
11505
|
},
|
|
10849
11506
|
"Heading 1"
|
|
10850
11507
|
),
|
|
10851
|
-
/* @__PURE__ */
|
|
11508
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10852
11509
|
"button",
|
|
10853
11510
|
{
|
|
10854
11511
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -10856,7 +11513,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10856
11513
|
},
|
|
10857
11514
|
"Heading 2"
|
|
10858
11515
|
),
|
|
10859
|
-
/* @__PURE__ */
|
|
11516
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10860
11517
|
"button",
|
|
10861
11518
|
{
|
|
10862
11519
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -10864,7 +11521,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10864
11521
|
},
|
|
10865
11522
|
"Heading 3"
|
|
10866
11523
|
),
|
|
10867
|
-
/* @__PURE__ */
|
|
11524
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10868
11525
|
"button",
|
|
10869
11526
|
{
|
|
10870
11527
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -10872,7 +11529,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10872
11529
|
},
|
|
10873
11530
|
"Heading 4"
|
|
10874
11531
|
),
|
|
10875
|
-
/* @__PURE__ */
|
|
11532
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10876
11533
|
"button",
|
|
10877
11534
|
{
|
|
10878
11535
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -10880,7 +11537,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10880
11537
|
},
|
|
10881
11538
|
"\u275E Blockquote"
|
|
10882
11539
|
),
|
|
10883
|
-
/* @__PURE__ */
|
|
11540
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
10884
11541
|
"button",
|
|
10885
11542
|
{
|
|
10886
11543
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -10889,19 +11546,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10889
11546
|
"{ }",
|
|
10890
11547
|
" Code Block"
|
|
10891
11548
|
),
|
|
10892
|
-
/* @__PURE__ */
|
|
10893
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11549
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11550
|
+
), show("fontsize") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10894
11551
|
Dropdown,
|
|
10895
11552
|
{
|
|
10896
11553
|
trigger: {
|
|
10897
|
-
label: /* @__PURE__ */
|
|
11554
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFontSize, null),
|
|
10898
11555
|
title: "Font size"
|
|
10899
11556
|
}
|
|
10900
11557
|
},
|
|
10901
11558
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
10902
11559
|
const sizeStr = `${size}px`;
|
|
10903
11560
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
10904
|
-
return /* @__PURE__ */
|
|
11561
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
10905
11562
|
"button",
|
|
10906
11563
|
{
|
|
10907
11564
|
key: size,
|
|
@@ -10917,17 +11574,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10917
11574
|
sizeStr
|
|
10918
11575
|
);
|
|
10919
11576
|
})
|
|
10920
|
-
), show("font") && /* @__PURE__ */
|
|
11577
|
+
), show("font") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10921
11578
|
Dropdown,
|
|
10922
11579
|
{
|
|
10923
11580
|
trigger: {
|
|
10924
|
-
label: /* @__PURE__ */
|
|
11581
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFont, null),
|
|
10925
11582
|
title: "Font family"
|
|
10926
11583
|
}
|
|
10927
11584
|
},
|
|
10928
11585
|
FONT_FAMILIES.map((font) => {
|
|
10929
11586
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
10930
|
-
return /* @__PURE__ */
|
|
11587
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
10931
11588
|
"button",
|
|
10932
11589
|
{
|
|
10933
11590
|
key: font,
|
|
@@ -10944,40 +11601,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10944
11601
|
font
|
|
10945
11602
|
);
|
|
10946
11603
|
})
|
|
10947
|
-
), show("color") && /* @__PURE__ */
|
|
11604
|
+
), show("color") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10948
11605
|
Dropdown,
|
|
10949
11606
|
{
|
|
10950
11607
|
trigger: {
|
|
10951
|
-
label: /* @__PURE__ */
|
|
11608
|
+
label: /* @__PURE__ */ import_react56.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react56.default.createElement(IconColor, null)),
|
|
10952
11609
|
title: "Colors"
|
|
10953
11610
|
},
|
|
10954
11611
|
keepOpen: true
|
|
10955
11612
|
},
|
|
10956
|
-
(close) => /* @__PURE__ */
|
|
10957
|
-
), show("bold") && /* @__PURE__ */
|
|
11613
|
+
(close) => /* @__PURE__ */ import_react56.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11614
|
+
), show("bold") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10958
11615
|
"button",
|
|
10959
11616
|
{
|
|
10960
11617
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
10961
11618
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
10962
11619
|
},
|
|
10963
|
-
/* @__PURE__ */
|
|
10964
|
-
)), show("italic") && /* @__PURE__ */
|
|
11620
|
+
/* @__PURE__ */ import_react56.default.createElement(IconBold, null)
|
|
11621
|
+
)), show("italic") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10965
11622
|
"button",
|
|
10966
11623
|
{
|
|
10967
11624
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
10968
11625
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
10969
11626
|
},
|
|
10970
|
-
/* @__PURE__ */
|
|
10971
|
-
)), show("strike") && /* @__PURE__ */
|
|
11627
|
+
/* @__PURE__ */ import_react56.default.createElement(IconItalic, null)
|
|
11628
|
+
)), show("strike") && /* @__PURE__ */ import_react56.default.createElement(
|
|
10972
11629
|
Dropdown,
|
|
10973
11630
|
{
|
|
10974
|
-
trigger: { label: /* @__PURE__ */
|
|
11631
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
10975
11632
|
},
|
|
10976
|
-
/* @__PURE__ */
|
|
10977
|
-
/* @__PURE__ */
|
|
10978
|
-
/* @__PURE__ */
|
|
10979
|
-
/* @__PURE__ */
|
|
10980
|
-
/* @__PURE__ */
|
|
11633
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react56.default.createElement("s", null, "Strikethrough")),
|
|
11634
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react56.default.createElement("u", null, "Underline")),
|
|
11635
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sup", null, "2"), " Superscript"),
|
|
11636
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sub", null, "2"), " Subscript"),
|
|
11637
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
10981
11638
|
e.preventDefault();
|
|
10982
11639
|
const chain = editor.chain().focus();
|
|
10983
11640
|
if (!editor.state.selection.empty) {
|
|
@@ -10993,25 +11650,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
10993
11650
|
c.run();
|
|
10994
11651
|
}
|
|
10995
11652
|
} }, "\u2715 Clear formatting")
|
|
10996
|
-
), show("link") && /* @__PURE__ */
|
|
11653
|
+
), show("link") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10997
11654
|
"button",
|
|
10998
11655
|
{
|
|
10999
11656
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11000
11657
|
onClick: setLink
|
|
11001
11658
|
},
|
|
11002
|
-
/* @__PURE__ */
|
|
11003
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11659
|
+
/* @__PURE__ */ import_react56.default.createElement(IconLink, null)
|
|
11660
|
+
)), show("lineheight") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11004
11661
|
Dropdown,
|
|
11005
11662
|
{
|
|
11006
11663
|
trigger: {
|
|
11007
|
-
label: /* @__PURE__ */
|
|
11664
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconLineHeight, null),
|
|
11008
11665
|
title: "Line height"
|
|
11009
11666
|
}
|
|
11010
11667
|
},
|
|
11011
11668
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11012
11669
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11013
11670
|
const isActive = currentLH === lh;
|
|
11014
|
-
return /* @__PURE__ */
|
|
11671
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
11015
11672
|
"button",
|
|
11016
11673
|
{
|
|
11017
11674
|
key: lh,
|
|
@@ -11027,19 +11684,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11027
11684
|
lh
|
|
11028
11685
|
);
|
|
11029
11686
|
})
|
|
11030
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11687
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11031
11688
|
"button",
|
|
11032
11689
|
{
|
|
11033
11690
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11034
11691
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11035
11692
|
},
|
|
11036
|
-
/* @__PURE__ */
|
|
11037
|
-
)), /* @__PURE__ */
|
|
11693
|
+
/* @__PURE__ */ import_react56.default.createElement(IconBulletList, null)
|
|
11694
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11038
11695
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11039
11696
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11040
11697
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11041
11698
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11042
|
-
].map((item) => /* @__PURE__ */
|
|
11699
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11043
11700
|
"button",
|
|
11044
11701
|
{
|
|
11045
11702
|
key: item.label,
|
|
@@ -11064,24 +11721,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11064
11721
|
}).run();
|
|
11065
11722
|
}
|
|
11066
11723
|
},
|
|
11067
|
-
/* @__PURE__ */
|
|
11724
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11068
11725
|
" ",
|
|
11069
11726
|
item.label
|
|
11070
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11727
|
+
)))), show("ol") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11071
11728
|
"button",
|
|
11072
11729
|
{
|
|
11073
11730
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11074
11731
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11075
11732
|
},
|
|
11076
|
-
/* @__PURE__ */
|
|
11077
|
-
)), /* @__PURE__ */
|
|
11733
|
+
/* @__PURE__ */ import_react56.default.createElement(IconOrderedList, null)
|
|
11734
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11078
11735
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11079
11736
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11080
11737
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11081
11738
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11082
11739
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11083
11740
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11084
|
-
].map((item) => /* @__PURE__ */
|
|
11741
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11085
11742
|
"button",
|
|
11086
11743
|
{
|
|
11087
11744
|
key: item.label,
|
|
@@ -11106,24 +11763,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11106
11763
|
}).run();
|
|
11107
11764
|
}
|
|
11108
11765
|
},
|
|
11109
|
-
/* @__PURE__ */
|
|
11766
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11110
11767
|
" ",
|
|
11111
11768
|
item.label
|
|
11112
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
11769
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11113
11770
|
Dropdown,
|
|
11114
11771
|
{
|
|
11115
11772
|
trigger: {
|
|
11116
|
-
label: /* @__PURE__ */
|
|
11773
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null),
|
|
11117
11774
|
title: "Align",
|
|
11118
11775
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11119
11776
|
}
|
|
11120
11777
|
},
|
|
11121
11778
|
[
|
|
11122
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11123
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11124
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11125
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11126
|
-
].map((item) => /* @__PURE__ */
|
|
11779
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null) },
|
|
11780
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignCenter, null) },
|
|
11781
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignRight, null) },
|
|
11782
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignJustify, null) }
|
|
11783
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11127
11784
|
"button",
|
|
11128
11785
|
{
|
|
11129
11786
|
key: item.value,
|
|
@@ -11134,7 +11791,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11134
11791
|
" ",
|
|
11135
11792
|
item.label
|
|
11136
11793
|
))
|
|
11137
|
-
), show("indent") && /* @__PURE__ */
|
|
11794
|
+
), show("indent") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11138
11795
|
"button",
|
|
11139
11796
|
{
|
|
11140
11797
|
className: "toolbar-btn",
|
|
@@ -11153,8 +11810,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11153
11810
|
}).run();
|
|
11154
11811
|
}
|
|
11155
11812
|
},
|
|
11156
|
-
/* @__PURE__ */
|
|
11157
|
-
)), show("outdent") && /* @__PURE__ */
|
|
11813
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentIncrease, null)
|
|
11814
|
+
)), show("outdent") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11158
11815
|
"button",
|
|
11159
11816
|
{
|
|
11160
11817
|
className: "toolbar-btn",
|
|
@@ -11173,29 +11830,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11173
11830
|
}).run();
|
|
11174
11831
|
}
|
|
11175
11832
|
},
|
|
11176
|
-
/* @__PURE__ */
|
|
11177
|
-
))), show("table") && /* @__PURE__ */
|
|
11833
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentDecrease, null)
|
|
11834
|
+
))), show("table") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react56.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11178
11835
|
"button",
|
|
11179
11836
|
{
|
|
11180
11837
|
className: "toolbar-btn",
|
|
11181
11838
|
onClick: () => document.execCommand("cut")
|
|
11182
11839
|
},
|
|
11183
|
-
/* @__PURE__ */
|
|
11184
|
-
)), show("copy") && /* @__PURE__ */
|
|
11840
|
+
/* @__PURE__ */ import_react56.default.createElement(IconCut, null)
|
|
11841
|
+
)), show("copy") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11185
11842
|
"button",
|
|
11186
11843
|
{
|
|
11187
11844
|
className: "toolbar-btn",
|
|
11188
11845
|
onClick: handleCopy
|
|
11189
11846
|
},
|
|
11190
|
-
copySuccess ? /* @__PURE__ */
|
|
11191
|
-
)), show("paste") && /* @__PURE__ */
|
|
11847
|
+
copySuccess ? /* @__PURE__ */ import_react56.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react56.default.createElement(IconCopy, null)
|
|
11848
|
+
)), show("paste") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11192
11849
|
"button",
|
|
11193
11850
|
{
|
|
11194
11851
|
className: "toolbar-btn",
|
|
11195
11852
|
onClick: handlePaste
|
|
11196
11853
|
},
|
|
11197
|
-
/* @__PURE__ */
|
|
11198
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
11854
|
+
/* @__PURE__ */ import_react56.default.createElement(IconPaste, null)
|
|
11855
|
+
)), show("specialchars") && /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react56.default.createElement(
|
|
11199
11856
|
"button",
|
|
11200
11857
|
{
|
|
11201
11858
|
key: char,
|
|
@@ -11203,12 +11860,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11203
11860
|
onClick: () => insertSpecialChar(char)
|
|
11204
11861
|
},
|
|
11205
11862
|
char
|
|
11206
|
-
)))), show("code") && /* @__PURE__ */
|
|
11863
|
+
)))), show("code") && /* @__PURE__ */ import_react56.default.createElement(
|
|
11207
11864
|
Dropdown,
|
|
11208
11865
|
{
|
|
11209
|
-
trigger: { label: /* @__PURE__ */
|
|
11866
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11210
11867
|
},
|
|
11211
|
-
/* @__PURE__ */
|
|
11868
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11212
11869
|
if (editor.isActive("codeBlock")) {
|
|
11213
11870
|
const text = (() => {
|
|
11214
11871
|
const { $from } = editor.state.selection;
|
|
@@ -11226,22 +11883,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11226
11883
|
editor.chain().focus().toggleCode().run();
|
|
11227
11884
|
}
|
|
11228
11885
|
} }, "</>", " Inline Code"),
|
|
11229
|
-
/* @__PURE__ */
|
|
11230
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
11886
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
11887
|
+
), show("fullscreen") && /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11231
11888
|
"button",
|
|
11232
11889
|
{
|
|
11233
11890
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11234
11891
|
onClick: onToggleFullscreen
|
|
11235
11892
|
},
|
|
11236
|
-
/* @__PURE__ */
|
|
11237
|
-
)), show("tts") && /* @__PURE__ */
|
|
11893
|
+
/* @__PURE__ */ import_react56.default.createElement(IconFullscreen, null)
|
|
11894
|
+
)), show("tts") && /* @__PURE__ */ import_react56.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react56.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11238
11895
|
"button",
|
|
11239
11896
|
{
|
|
11240
11897
|
className: "toolbar-btn",
|
|
11241
11898
|
onClick: handleQuickTranslate
|
|
11242
11899
|
},
|
|
11243
|
-
/* @__PURE__ */
|
|
11244
|
-
)), /* @__PURE__ */
|
|
11900
|
+
/* @__PURE__ */ import_react56.default.createElement(IconTranslate, null)
|
|
11901
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react56.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react56.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11245
11902
|
"button",
|
|
11246
11903
|
{
|
|
11247
11904
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11284,11 +11941,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11284
11941
|
}
|
|
11285
11942
|
}
|
|
11286
11943
|
},
|
|
11287
|
-
/* @__PURE__ */
|
|
11288
|
-
)), /* @__PURE__ */
|
|
11944
|
+
/* @__PURE__ */ import_react56.default.createElement(IconTaskList, null)
|
|
11945
|
+
)), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11289
11946
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
11290
11947
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11291
|
-
return /* @__PURE__ */
|
|
11948
|
+
return /* @__PURE__ */ import_react56.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11292
11949
|
const { state } = editor;
|
|
11293
11950
|
const { schema } = state;
|
|
11294
11951
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11321,8 +11978,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11321
11978
|
}
|
|
11322
11979
|
return true;
|
|
11323
11980
|
}).run();
|
|
11324
|
-
} }, /* @__PURE__ */
|
|
11325
|
-
})))), onClose && /* @__PURE__ */
|
|
11981
|
+
} }, /* @__PURE__ */ import_react56.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react56.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
11982
|
+
})))), onClose && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
11326
11983
|
"button",
|
|
11327
11984
|
{
|
|
11328
11985
|
className: "toolbar-btn btn-cross",
|
|
@@ -11338,8 +11995,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11338
11995
|
onClose();
|
|
11339
11996
|
}
|
|
11340
11997
|
},
|
|
11341
|
-
/* @__PURE__ */
|
|
11342
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
11998
|
+
/* @__PURE__ */ import_react56.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
11999
|
+
))), showTranslateModal && /* @__PURE__ */ import_react56.default.createElement(
|
|
11343
12000
|
TranslateModal_default,
|
|
11344
12001
|
{
|
|
11345
12002
|
editor,
|
|
@@ -11357,26 +12014,26 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11357
12014
|
var Toolbar_default = Toolbar;
|
|
11358
12015
|
|
|
11359
12016
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
11360
|
-
var
|
|
11361
|
-
var
|
|
12017
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
12018
|
+
var import_react_dom15 = require("react-dom");
|
|
11362
12019
|
var ALIGNMENTS = [
|
|
11363
12020
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11364
12021
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
11365
12022
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
11366
12023
|
];
|
|
11367
12024
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
11368
|
-
const [activeTab, setActiveTab] = (0,
|
|
11369
|
-
const [src, setSrc] = (0,
|
|
11370
|
-
const [title, setTitle] = (0,
|
|
11371
|
-
const [alt, setAlt] = (0,
|
|
11372
|
-
const [link, setLink] = (0,
|
|
11373
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
11374
|
-
const [width, setWidth] = (0,
|
|
11375
|
-
const [height, setHeight] = (0,
|
|
11376
|
-
const [lockRatio, setLockRatio] = (0,
|
|
11377
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
11378
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
11379
|
-
(0,
|
|
12025
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("image");
|
|
12026
|
+
const [src, setSrc] = (0, import_react57.useState)(node?.attrs?.src || "");
|
|
12027
|
+
const [title, setTitle] = (0, import_react57.useState)(node?.attrs?.title || "");
|
|
12028
|
+
const [alt, setAlt] = (0, import_react57.useState)(node?.attrs?.alt || "");
|
|
12029
|
+
const [link, setLink] = (0, import_react57.useState)("");
|
|
12030
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react57.useState)(false);
|
|
12031
|
+
const [width, setWidth] = (0, import_react57.useState)("");
|
|
12032
|
+
const [height, setHeight] = (0, import_react57.useState)("");
|
|
12033
|
+
const [lockRatio, setLockRatio] = (0, import_react57.useState)(true);
|
|
12034
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react57.useState)(0);
|
|
12035
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react57.useState)(0);
|
|
12036
|
+
(0, import_react57.useEffect)(() => {
|
|
11380
12037
|
if (src) {
|
|
11381
12038
|
const img = new window.Image();
|
|
11382
12039
|
img.onload = () => {
|
|
@@ -11415,7 +12072,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11415
12072
|
editor.chain().focus().deleteSelection().run();
|
|
11416
12073
|
onClose();
|
|
11417
12074
|
};
|
|
11418
|
-
return /* @__PURE__ */
|
|
12075
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react57.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11419
12076
|
"input",
|
|
11420
12077
|
{
|
|
11421
12078
|
type: "number",
|
|
@@ -11423,14 +12080,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11423
12080
|
value: width,
|
|
11424
12081
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11425
12082
|
}
|
|
11426
|
-
), /* @__PURE__ */
|
|
12083
|
+
), /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11427
12084
|
"button",
|
|
11428
12085
|
{
|
|
11429
12086
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11430
12087
|
onClick: () => setLockRatio(!lockRatio)
|
|
11431
12088
|
},
|
|
11432
12089
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11433
|
-
)), /* @__PURE__ */
|
|
12090
|
+
)), /* @__PURE__ */ import_react57.default.createElement(
|
|
11434
12091
|
"input",
|
|
11435
12092
|
{
|
|
11436
12093
|
type: "number",
|
|
@@ -11438,21 +12095,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11438
12095
|
value: height,
|
|
11439
12096
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11440
12097
|
}
|
|
11441
|
-
))), /* @__PURE__ */
|
|
12098
|
+
))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11442
12099
|
"button",
|
|
11443
12100
|
{
|
|
11444
12101
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
11445
12102
|
onClick: () => setActiveTab("image")
|
|
11446
12103
|
},
|
|
11447
12104
|
"Image"
|
|
11448
|
-
), /* @__PURE__ */
|
|
12105
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11449
12106
|
"button",
|
|
11450
12107
|
{
|
|
11451
12108
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
11452
12109
|
onClick: () => setActiveTab("advanced")
|
|
11453
12110
|
},
|
|
11454
12111
|
"Advanced"
|
|
11455
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12112
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11456
12113
|
"input",
|
|
11457
12114
|
{
|
|
11458
12115
|
type: "text",
|
|
@@ -11460,7 +12117,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11460
12117
|
value: src,
|
|
11461
12118
|
onChange: (e) => setSrc(e.target.value)
|
|
11462
12119
|
}
|
|
11463
|
-
), /* @__PURE__ */
|
|
12120
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11464
12121
|
"input",
|
|
11465
12122
|
{
|
|
11466
12123
|
type: "text",
|
|
@@ -11468,7 +12125,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11468
12125
|
value: title,
|
|
11469
12126
|
onChange: (e) => setTitle(e.target.value)
|
|
11470
12127
|
}
|
|
11471
|
-
), /* @__PURE__ */
|
|
12128
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11472
12129
|
"input",
|
|
11473
12130
|
{
|
|
11474
12131
|
type: "text",
|
|
@@ -11476,7 +12133,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11476
12133
|
value: alt,
|
|
11477
12134
|
onChange: (e) => setAlt(e.target.value)
|
|
11478
12135
|
}
|
|
11479
|
-
), /* @__PURE__ */
|
|
12136
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11480
12137
|
"input",
|
|
11481
12138
|
{
|
|
11482
12139
|
type: "text",
|
|
@@ -11484,23 +12141,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
11484
12141
|
value: link,
|
|
11485
12142
|
onChange: (e) => setLink(e.target.value)
|
|
11486
12143
|
}
|
|
11487
|
-
), /* @__PURE__ */
|
|
12144
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11488
12145
|
"input",
|
|
11489
12146
|
{
|
|
11490
12147
|
type: "checkbox",
|
|
11491
12148
|
checked: openInNewTab,
|
|
11492
12149
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
11493
12150
|
}
|
|
11494
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12151
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
11495
12152
|
};
|
|
11496
12153
|
var ImageToolbar = ({ editor }) => {
|
|
11497
|
-
const [showModal, setShowModal] = (0,
|
|
11498
|
-
const [showAlign, setShowAlign] = (0,
|
|
11499
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
11500
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
11501
|
-
const [pos, setPos] = (0,
|
|
11502
|
-
const toolbarRef = (0,
|
|
11503
|
-
(0,
|
|
12154
|
+
const [showModal, setShowModal] = (0, import_react57.useState)(false);
|
|
12155
|
+
const [showAlign, setShowAlign] = (0, import_react57.useState)(false);
|
|
12156
|
+
const [showVAlign, setShowVAlign] = (0, import_react57.useState)(false);
|
|
12157
|
+
const [copyStatus, setCopyStatus] = (0, import_react57.useState)("");
|
|
12158
|
+
const [pos, setPos] = (0, import_react57.useState)(null);
|
|
12159
|
+
const toolbarRef = (0, import_react57.useRef)(null);
|
|
12160
|
+
(0, import_react57.useEffect)(() => {
|
|
11504
12161
|
if (!editor) return;
|
|
11505
12162
|
const update = () => {
|
|
11506
12163
|
const { selection } = editor.state;
|
|
@@ -11529,8 +12186,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11529
12186
|
}, [editor]);
|
|
11530
12187
|
const node = editor?.state.selection.node;
|
|
11531
12188
|
const isImage = node && node.type.name === "image";
|
|
11532
|
-
if (!editor || !isImage || !pos) return showModal ? (0,
|
|
11533
|
-
/* @__PURE__ */
|
|
12189
|
+
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12190
|
+
/* @__PURE__ */ import_react57.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
11534
12191
|
document.body
|
|
11535
12192
|
) : null;
|
|
11536
12193
|
const handleDelete = () => {
|
|
@@ -11606,8 +12263,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11606
12263
|
);
|
|
11607
12264
|
setShowVAlign(false);
|
|
11608
12265
|
};
|
|
11609
|
-
return (0,
|
|
11610
|
-
/* @__PURE__ */
|
|
12266
|
+
return (0, import_react_dom15.createPortal)(
|
|
12267
|
+
/* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
|
|
11611
12268
|
"div",
|
|
11612
12269
|
{
|
|
11613
12270
|
className: "image-toolbar",
|
|
@@ -11615,14 +12272,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11615
12272
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11616
12273
|
onMouseDown: (e) => e.preventDefault()
|
|
11617
12274
|
},
|
|
11618
|
-
/* @__PURE__ */
|
|
11619
|
-
/* @__PURE__ */
|
|
11620
|
-
/* @__PURE__ */
|
|
11621
|
-
/* @__PURE__ */
|
|
12275
|
+
/* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12276
|
+
/* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12277
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react57.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12278
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11622
12279
|
setShowAlign(!showAlign);
|
|
11623
12280
|
setShowVAlign(false);
|
|
11624
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
11625
|
-
), showModal && /* @__PURE__ */
|
|
12281
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react57.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12282
|
+
), showModal && /* @__PURE__ */ import_react57.default.createElement(
|
|
11626
12283
|
ImagePropertiesModal,
|
|
11627
12284
|
{
|
|
11628
12285
|
editor,
|
|
@@ -11636,8 +12293,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
11636
12293
|
var ImageToolbar_default = ImageToolbar;
|
|
11637
12294
|
|
|
11638
12295
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
11639
|
-
var
|
|
11640
|
-
var
|
|
12296
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
12297
|
+
var import_react_dom16 = require("react-dom");
|
|
11641
12298
|
var ALIGNMENTS2 = [
|
|
11642
12299
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
11643
12300
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
@@ -11645,10 +12302,10 @@ var ALIGNMENTS2 = [
|
|
|
11645
12302
|
];
|
|
11646
12303
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
11647
12304
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
11648
|
-
const [src, setSrc] = (0,
|
|
11649
|
-
const [width, setWidth] = (0,
|
|
11650
|
-
const [height, setHeight] = (0,
|
|
11651
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12305
|
+
const [src, setSrc] = (0, import_react58.useState)(node?.attrs?.src || "");
|
|
12306
|
+
const [width, setWidth] = (0, import_react58.useState)(String(node?.attrs?.width || 640));
|
|
12307
|
+
const [height, setHeight] = (0, import_react58.useState)(String(node?.attrs?.height || 360));
|
|
12308
|
+
const [lockRatio, setLockRatio] = (0, import_react58.useState)(true);
|
|
11652
12309
|
const handleWidthChange = (val) => {
|
|
11653
12310
|
setWidth(val);
|
|
11654
12311
|
if (lockRatio) {
|
|
@@ -11681,7 +12338,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11681
12338
|
onClose();
|
|
11682
12339
|
};
|
|
11683
12340
|
const isYoutube = nodeType === "youtube";
|
|
11684
|
-
return /* @__PURE__ */
|
|
12341
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react58.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react58.default.createElement(
|
|
11685
12342
|
"iframe",
|
|
11686
12343
|
{
|
|
11687
12344
|
src,
|
|
@@ -11689,14 +12346,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11689
12346
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
11690
12347
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
11691
12348
|
}
|
|
11692
|
-
) : /* @__PURE__ */
|
|
12349
|
+
) : /* @__PURE__ */ import_react58.default.createElement(
|
|
11693
12350
|
"video",
|
|
11694
12351
|
{
|
|
11695
12352
|
src,
|
|
11696
12353
|
controls: true,
|
|
11697
12354
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
11698
12355
|
}
|
|
11699
|
-
)), /* @__PURE__ */
|
|
12356
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11700
12357
|
"input",
|
|
11701
12358
|
{
|
|
11702
12359
|
type: "number",
|
|
@@ -11704,14 +12361,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11704
12361
|
value: width,
|
|
11705
12362
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11706
12363
|
}
|
|
11707
|
-
), /* @__PURE__ */
|
|
12364
|
+
), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11708
12365
|
"button",
|
|
11709
12366
|
{
|
|
11710
12367
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
11711
12368
|
onClick: () => setLockRatio(!lockRatio)
|
|
11712
12369
|
},
|
|
11713
12370
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
11714
|
-
)), /* @__PURE__ */
|
|
12371
|
+
)), /* @__PURE__ */ import_react58.default.createElement(
|
|
11715
12372
|
"input",
|
|
11716
12373
|
{
|
|
11717
12374
|
type: "number",
|
|
@@ -11719,7 +12376,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11719
12376
|
value: height,
|
|
11720
12377
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11721
12378
|
}
|
|
11722
|
-
))), /* @__PURE__ */
|
|
12379
|
+
))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11723
12380
|
"input",
|
|
11724
12381
|
{
|
|
11725
12382
|
type: "text",
|
|
@@ -11727,7 +12384,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11727
12384
|
value: src,
|
|
11728
12385
|
onChange: (e) => setSrc(e.target.value)
|
|
11729
12386
|
}
|
|
11730
|
-
), /* @__PURE__ */
|
|
12387
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11731
12388
|
"input",
|
|
11732
12389
|
{
|
|
11733
12390
|
type: "number",
|
|
@@ -11735,7 +12392,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11735
12392
|
value: width,
|
|
11736
12393
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
11737
12394
|
}
|
|
11738
|
-
), /* @__PURE__ */
|
|
12395
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11739
12396
|
"input",
|
|
11740
12397
|
{
|
|
11741
12398
|
type: "number",
|
|
@@ -11743,16 +12400,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
11743
12400
|
value: height,
|
|
11744
12401
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
11745
12402
|
}
|
|
11746
|
-
)))), /* @__PURE__ */
|
|
12403
|
+
)))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
11747
12404
|
};
|
|
11748
12405
|
var VideoToolbar = ({ editor }) => {
|
|
11749
|
-
const [showModal, setShowModal] = (0,
|
|
11750
|
-
const [showSize, setShowSize] = (0,
|
|
11751
|
-
const [showAlign, setShowAlign] = (0,
|
|
11752
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
11753
|
-
const [pos, setPos] = (0,
|
|
11754
|
-
const toolbarRef = (0,
|
|
11755
|
-
(0,
|
|
12406
|
+
const [showModal, setShowModal] = (0, import_react58.useState)(false);
|
|
12407
|
+
const [showSize, setShowSize] = (0, import_react58.useState)(false);
|
|
12408
|
+
const [showAlign, setShowAlign] = (0, import_react58.useState)(false);
|
|
12409
|
+
const [copyStatus, setCopyStatus] = (0, import_react58.useState)("");
|
|
12410
|
+
const [pos, setPos] = (0, import_react58.useState)(null);
|
|
12411
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
12412
|
+
(0, import_react58.useEffect)(() => {
|
|
11756
12413
|
if (!editor) return;
|
|
11757
12414
|
const update = () => {
|
|
11758
12415
|
const { selection } = editor.state;
|
|
@@ -11782,8 +12439,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11782
12439
|
const node = editor?.state.selection.node;
|
|
11783
12440
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
11784
12441
|
const nodeType = node?.type.name;
|
|
11785
|
-
if (!editor || !isVideo || !pos) return showModal ? (0,
|
|
11786
|
-
/* @__PURE__ */
|
|
12442
|
+
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12443
|
+
/* @__PURE__ */ import_react58.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
11787
12444
|
document.body
|
|
11788
12445
|
) : null;
|
|
11789
12446
|
const handleDelete = () => {
|
|
@@ -11829,8 +12486,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11829
12486
|
})
|
|
11830
12487
|
);
|
|
11831
12488
|
};
|
|
11832
|
-
return (0,
|
|
11833
|
-
/* @__PURE__ */
|
|
12489
|
+
return (0, import_react_dom16.createPortal)(
|
|
12490
|
+
/* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11834
12491
|
"div",
|
|
11835
12492
|
{
|
|
11836
12493
|
className: "image-toolbar",
|
|
@@ -11838,30 +12495,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11838
12495
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
11839
12496
|
onMouseDown: (e) => e.preventDefault()
|
|
11840
12497
|
},
|
|
11841
|
-
/* @__PURE__ */
|
|
11842
|
-
/* @__PURE__ */
|
|
11843
|
-
/* @__PURE__ */
|
|
11844
|
-
/* @__PURE__ */
|
|
12498
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12499
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12500
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12501
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11845
12502
|
setShowSize(!showSize);
|
|
11846
12503
|
setShowAlign(false);
|
|
11847
|
-
} }, /* @__PURE__ */
|
|
12504
|
+
} }, /* @__PURE__ */ import_react58.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11848
12505
|
handleResize("small");
|
|
11849
12506
|
setShowSize(false);
|
|
11850
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12507
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11851
12508
|
handleResize("medium");
|
|
11852
12509
|
setShowSize(false);
|
|
11853
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12510
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11854
12511
|
handleResize("large");
|
|
11855
12512
|
setShowSize(false);
|
|
11856
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12513
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11857
12514
|
handleResize("full");
|
|
11858
12515
|
setShowSize(false);
|
|
11859
12516
|
} }, "Full (854x480)"))),
|
|
11860
|
-
/* @__PURE__ */
|
|
12517
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
11861
12518
|
setShowAlign(!showAlign);
|
|
11862
12519
|
setShowSize(false);
|
|
11863
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
11864
|
-
), showModal && /* @__PURE__ */
|
|
12520
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react58.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12521
|
+
), showModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
11865
12522
|
VideoPropertiesModal,
|
|
11866
12523
|
{
|
|
11867
12524
|
editor,
|
|
@@ -11876,22 +12533,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
11876
12533
|
var VideoToolbar_default = VideoToolbar;
|
|
11877
12534
|
|
|
11878
12535
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
11879
|
-
var
|
|
11880
|
-
var
|
|
11881
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
11882
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
11883
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
11884
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
11885
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
11886
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
11887
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
11888
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
11889
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
11890
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12536
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12537
|
+
var import_react_dom17 = require("react-dom");
|
|
12538
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12539
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12540
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12541
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12542
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12543
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12544
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12545
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react59.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12546
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12547
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react59.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react59.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react59.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
11891
12548
|
var TableToolbar = ({ editor }) => {
|
|
11892
|
-
const [pos, setPos] = (0,
|
|
11893
|
-
const toolbarRef = (0,
|
|
11894
|
-
(0,
|
|
12549
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12550
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12551
|
+
(0, import_react59.useEffect)(() => {
|
|
11895
12552
|
if (!editor) return;
|
|
11896
12553
|
const update = () => {
|
|
11897
12554
|
if (!editor.isActive("table")) {
|
|
@@ -11934,8 +12591,8 @@ var TableToolbar = ({ editor }) => {
|
|
|
11934
12591
|
const canMerge = editor.can().mergeCells();
|
|
11935
12592
|
const canSplit = editor.can().splitCell();
|
|
11936
12593
|
const prevent = (e) => e.preventDefault();
|
|
11937
|
-
return (0,
|
|
11938
|
-
/* @__PURE__ */
|
|
12594
|
+
return (0, import_react_dom17.createPortal)(
|
|
12595
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
11939
12596
|
"div",
|
|
11940
12597
|
{
|
|
11941
12598
|
ref: toolbarRef,
|
|
@@ -11943,19 +12600,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
11943
12600
|
style: { top: pos.top, left: pos.left },
|
|
11944
12601
|
onMouseDown: prevent
|
|
11945
12602
|
},
|
|
11946
|
-
/* @__PURE__ */
|
|
11947
|
-
/* @__PURE__ */
|
|
11948
|
-
/* @__PURE__ */
|
|
11949
|
-
/* @__PURE__ */
|
|
11950
|
-
/* @__PURE__ */
|
|
11951
|
-
/* @__PURE__ */
|
|
11952
|
-
/* @__PURE__ */
|
|
11953
|
-
/* @__PURE__ */
|
|
11954
|
-
/* @__PURE__ */
|
|
11955
|
-
/* @__PURE__ */
|
|
11956
|
-
/* @__PURE__ */
|
|
11957
|
-
/* @__PURE__ */
|
|
11958
|
-
/* @__PURE__ */
|
|
12603
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddRowBefore, null))),
|
|
12604
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddRowAfter, null))),
|
|
12605
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteRow, null))),
|
|
12606
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12607
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddColBefore, null))),
|
|
12608
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react59.default.createElement(IconAddColAfter, null))),
|
|
12609
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteCol, null))),
|
|
12610
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12611
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react59.default.createElement(IconMergeCells, null))),
|
|
12612
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react59.default.createElement(IconSplitCell, null))),
|
|
12613
|
+
/* @__PURE__ */ import_react59.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12614
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react59.default.createElement(IconToggleHeader, null))),
|
|
12615
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react59.default.createElement(IconDeleteTable, null)))
|
|
11959
12616
|
),
|
|
11960
12617
|
document.body
|
|
11961
12618
|
);
|
|
@@ -12121,7 +12778,7 @@ var RufousTextEditor = ({
|
|
|
12121
12778
|
sx
|
|
12122
12779
|
}) => {
|
|
12123
12780
|
const sxClass = useSx(sx);
|
|
12124
|
-
const toolbarButtons = (0,
|
|
12781
|
+
const toolbarButtons = (0, import_react60.useMemo)(() => {
|
|
12125
12782
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12126
12783
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12127
12784
|
if (hideButtons) {
|
|
@@ -12129,17 +12786,17 @@ var RufousTextEditor = ({
|
|
|
12129
12786
|
}
|
|
12130
12787
|
return visible;
|
|
12131
12788
|
}, [buttons, variant, hideButtons]);
|
|
12132
|
-
const mentionSuggestion = (0,
|
|
12133
|
-
const onChangeRef = (0,
|
|
12134
|
-
const onBlurRef = (0,
|
|
12135
|
-
(0,
|
|
12789
|
+
const mentionSuggestion = (0, import_react60.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
12790
|
+
const onChangeRef = (0, import_react60.useRef)(onChange);
|
|
12791
|
+
const onBlurRef = (0, import_react60.useRef)(onBlur);
|
|
12792
|
+
(0, import_react60.useEffect)(() => {
|
|
12136
12793
|
onChangeRef.current = onChange;
|
|
12137
12794
|
}, [onChange]);
|
|
12138
|
-
(0,
|
|
12795
|
+
(0, import_react60.useEffect)(() => {
|
|
12139
12796
|
onBlurRef.current = onBlur;
|
|
12140
12797
|
}, [onBlur]);
|
|
12141
12798
|
const isEditable = editable && !disabled;
|
|
12142
|
-
const editor = (0,
|
|
12799
|
+
const editor = (0, import_react61.useEditor)({
|
|
12143
12800
|
editable: isEditable,
|
|
12144
12801
|
extensions: [
|
|
12145
12802
|
import_starter_kit.default,
|
|
@@ -12236,8 +12893,8 @@ var RufousTextEditor = ({
|
|
|
12236
12893
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12237
12894
|
}
|
|
12238
12895
|
});
|
|
12239
|
-
const wrapperRef = (0,
|
|
12240
|
-
(0,
|
|
12896
|
+
const wrapperRef = (0, import_react60.useRef)(null);
|
|
12897
|
+
(0, import_react60.useEffect)(() => {
|
|
12241
12898
|
if (!editor) return;
|
|
12242
12899
|
let blurTimer = null;
|
|
12243
12900
|
const handler = ({ event }) => {
|
|
@@ -12255,15 +12912,15 @@ var RufousTextEditor = ({
|
|
|
12255
12912
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12256
12913
|
};
|
|
12257
12914
|
}, [editor]);
|
|
12258
|
-
const setLinkRef = (0,
|
|
12259
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
12260
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
12261
|
-
const [linkText, setLinkText] = (0,
|
|
12262
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
12263
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
12264
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
12265
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
12266
|
-
const setLink = (0,
|
|
12915
|
+
const setLinkRef = (0, import_react60.useRef)(null);
|
|
12916
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react60.useState)(false);
|
|
12917
|
+
const [linkUrl, setLinkUrl] = (0, import_react60.useState)("");
|
|
12918
|
+
const [linkText, setLinkText] = (0, import_react60.useState)("");
|
|
12919
|
+
const [linkClassName, setLinkClassName] = (0, import_react60.useState)("");
|
|
12920
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react60.useState)(true);
|
|
12921
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react60.useState)(true);
|
|
12922
|
+
const [linkSelection, setLinkSelection] = (0, import_react60.useState)(null);
|
|
12923
|
+
const setLink = (0, import_react60.useCallback)(() => {
|
|
12267
12924
|
if (!editor) return;
|
|
12268
12925
|
const attrs = editor.getAttributes("link");
|
|
12269
12926
|
const previousUrl = attrs.href || "";
|
|
@@ -12300,10 +12957,10 @@ var RufousTextEditor = ({
|
|
|
12300
12957
|
setLinkSelection({ from, to });
|
|
12301
12958
|
setLinkModalOpen(true);
|
|
12302
12959
|
}, [editor]);
|
|
12303
|
-
(0,
|
|
12960
|
+
(0, import_react60.useEffect)(() => {
|
|
12304
12961
|
setLinkRef.current = setLink;
|
|
12305
12962
|
}, [setLink]);
|
|
12306
|
-
(0,
|
|
12963
|
+
(0, import_react60.useEffect)(() => {
|
|
12307
12964
|
if (!editor?.view) return;
|
|
12308
12965
|
const handleKeyDown = (event) => {
|
|
12309
12966
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -12335,7 +12992,7 @@ var RufousTextEditor = ({
|
|
|
12335
12992
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12336
12993
|
};
|
|
12337
12994
|
}, [editor]);
|
|
12338
|
-
const handleLinkSubmit = (0,
|
|
12995
|
+
const handleLinkSubmit = (0, import_react60.useCallback)(() => {
|
|
12339
12996
|
if (!editor || !linkSelection) return;
|
|
12340
12997
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12341
12998
|
if (linkUrl === "") {
|
|
@@ -12371,7 +13028,7 @@ var RufousTextEditor = ({
|
|
|
12371
13028
|
setLinkClassName("");
|
|
12372
13029
|
setLinkSelection(null);
|
|
12373
13030
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
12374
|
-
const handleLinkRemove = (0,
|
|
13031
|
+
const handleLinkRemove = (0, import_react60.useCallback)(() => {
|
|
12375
13032
|
if (!editor || !linkSelection) return;
|
|
12376
13033
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
12377
13034
|
setLinkModalOpen(false);
|
|
@@ -12380,7 +13037,7 @@ var RufousTextEditor = ({
|
|
|
12380
13037
|
setLinkClassName("");
|
|
12381
13038
|
setLinkSelection(null);
|
|
12382
13039
|
}, [editor, linkSelection]);
|
|
12383
|
-
const handleLinkCancel = (0,
|
|
13040
|
+
const handleLinkCancel = (0, import_react60.useCallback)(() => {
|
|
12384
13041
|
setLinkModalOpen(false);
|
|
12385
13042
|
setLinkUrl("");
|
|
12386
13043
|
setLinkText("");
|
|
@@ -12388,21 +13045,21 @@ var RufousTextEditor = ({
|
|
|
12388
13045
|
setLinkSelection(null);
|
|
12389
13046
|
editor?.chain().focus().run();
|
|
12390
13047
|
}, [editor]);
|
|
12391
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
12392
|
-
const handleSave = (0,
|
|
13048
|
+
const [saveStatus, setSaveStatus] = (0, import_react60.useState)("");
|
|
13049
|
+
const handleSave = (0, import_react60.useCallback)(() => {
|
|
12393
13050
|
if (!editor || !onSaveProp) return;
|
|
12394
13051
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
12395
13052
|
setSaveStatus("Saved!");
|
|
12396
13053
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
12397
13054
|
}, [editor, onSaveProp]);
|
|
12398
|
-
const handleExport = (0,
|
|
13055
|
+
const handleExport = (0, import_react60.useCallback)(() => {
|
|
12399
13056
|
if (!editor || !onExportProp) return;
|
|
12400
13057
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
12401
13058
|
}, [editor, onExportProp]);
|
|
12402
|
-
const providerValue = (0,
|
|
12403
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
12404
|
-
const toggleFullscreen = (0,
|
|
12405
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13059
|
+
const providerValue = (0, import_react60.useMemo)(() => ({ editor }), [editor]);
|
|
13060
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react60.useState)(false);
|
|
13061
|
+
const toggleFullscreen = (0, import_react60.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13062
|
+
const wrapperJsx = /* @__PURE__ */ import_react60.default.createElement(
|
|
12406
13063
|
"div",
|
|
12407
13064
|
{
|
|
12408
13065
|
ref: wrapperRef,
|
|
@@ -12413,7 +13070,7 @@ var RufousTextEditor = ({
|
|
|
12413
13070
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
12414
13071
|
}
|
|
12415
13072
|
},
|
|
12416
|
-
/* @__PURE__ */
|
|
13073
|
+
/* @__PURE__ */ import_react60.default.createElement(import_react61.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12417
13074
|
Toolbar_default,
|
|
12418
13075
|
{
|
|
12419
13076
|
editor,
|
|
@@ -12428,8 +13085,8 @@ var RufousTextEditor = ({
|
|
|
12428
13085
|
isFullscreen,
|
|
12429
13086
|
onToggleFullscreen: toggleFullscreen
|
|
12430
13087
|
}
|
|
12431
|
-
), /* @__PURE__ */
|
|
12432
|
-
|
|
13088
|
+
), /* @__PURE__ */ import_react60.default.createElement(import_react61.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react60.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react60.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react60.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react60.default.createElement(
|
|
13089
|
+
import_react61.BubbleMenu,
|
|
12433
13090
|
{
|
|
12434
13091
|
editor,
|
|
12435
13092
|
className: "bubble-menu",
|
|
@@ -12446,31 +13103,31 @@ var RufousTextEditor = ({
|
|
|
12446
13103
|
}
|
|
12447
13104
|
}
|
|
12448
13105
|
},
|
|
12449
|
-
/* @__PURE__ */
|
|
13106
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12450
13107
|
"button",
|
|
12451
13108
|
{
|
|
12452
13109
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
12453
13110
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
12454
13111
|
},
|
|
12455
|
-
/* @__PURE__ */
|
|
13112
|
+
/* @__PURE__ */ import_react60.default.createElement("strong", null, "B")
|
|
12456
13113
|
),
|
|
12457
|
-
/* @__PURE__ */
|
|
13114
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12458
13115
|
"button",
|
|
12459
13116
|
{
|
|
12460
13117
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
12461
13118
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
12462
13119
|
},
|
|
12463
|
-
/* @__PURE__ */
|
|
13120
|
+
/* @__PURE__ */ import_react60.default.createElement("em", null, "I")
|
|
12464
13121
|
),
|
|
12465
|
-
/* @__PURE__ */
|
|
13122
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12466
13123
|
"button",
|
|
12467
13124
|
{
|
|
12468
13125
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
12469
13126
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
12470
13127
|
},
|
|
12471
|
-
/* @__PURE__ */
|
|
13128
|
+
/* @__PURE__ */ import_react60.default.createElement("s", null, "S")
|
|
12472
13129
|
),
|
|
12473
|
-
/* @__PURE__ */
|
|
13130
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12474
13131
|
"button",
|
|
12475
13132
|
{
|
|
12476
13133
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -12478,7 +13135,7 @@ var RufousTextEditor = ({
|
|
|
12478
13135
|
},
|
|
12479
13136
|
"</>"
|
|
12480
13137
|
),
|
|
12481
|
-
/* @__PURE__ */
|
|
13138
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12482
13139
|
"button",
|
|
12483
13140
|
{
|
|
12484
13141
|
onClick: setLink,
|
|
@@ -12486,8 +13143,8 @@ var RufousTextEditor = ({
|
|
|
12486
13143
|
},
|
|
12487
13144
|
"\u{1F517}"
|
|
12488
13145
|
)
|
|
12489
|
-
), editor && /* @__PURE__ */
|
|
12490
|
-
|
|
13146
|
+
), editor && /* @__PURE__ */ import_react60.default.createElement(
|
|
13147
|
+
import_react61.FloatingMenu,
|
|
12491
13148
|
{
|
|
12492
13149
|
editor,
|
|
12493
13150
|
className: "floating-menu",
|
|
@@ -12501,7 +13158,7 @@ var RufousTextEditor = ({
|
|
|
12501
13158
|
}
|
|
12502
13159
|
}
|
|
12503
13160
|
},
|
|
12504
|
-
/* @__PURE__ */
|
|
13161
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12505
13162
|
"button",
|
|
12506
13163
|
{
|
|
12507
13164
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -12509,7 +13166,7 @@ var RufousTextEditor = ({
|
|
|
12509
13166
|
},
|
|
12510
13167
|
"H1"
|
|
12511
13168
|
),
|
|
12512
|
-
/* @__PURE__ */
|
|
13169
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12513
13170
|
"button",
|
|
12514
13171
|
{
|
|
12515
13172
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -12517,7 +13174,7 @@ var RufousTextEditor = ({
|
|
|
12517
13174
|
},
|
|
12518
13175
|
"H2"
|
|
12519
13176
|
),
|
|
12520
|
-
/* @__PURE__ */
|
|
13177
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12521
13178
|
"button",
|
|
12522
13179
|
{
|
|
12523
13180
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -12525,7 +13182,7 @@ var RufousTextEditor = ({
|
|
|
12525
13182
|
},
|
|
12526
13183
|
"\u2022 List"
|
|
12527
13184
|
),
|
|
12528
|
-
/* @__PURE__ */
|
|
13185
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12529
13186
|
"button",
|
|
12530
13187
|
{
|
|
12531
13188
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -12533,7 +13190,7 @@ var RufousTextEditor = ({
|
|
|
12533
13190
|
},
|
|
12534
13191
|
"1. List"
|
|
12535
13192
|
),
|
|
12536
|
-
/* @__PURE__ */
|
|
13193
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12537
13194
|
"button",
|
|
12538
13195
|
{
|
|
12539
13196
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -12541,8 +13198,8 @@ var RufousTextEditor = ({
|
|
|
12541
13198
|
},
|
|
12542
13199
|
"\u201C Quote"
|
|
12543
13200
|
)
|
|
12544
|
-
), /* @__PURE__ */
|
|
12545
|
-
/* @__PURE__ */
|
|
13201
|
+
), /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react60.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react60.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react60.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react60.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react60.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13202
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12546
13203
|
"input",
|
|
12547
13204
|
{
|
|
12548
13205
|
type: "url",
|
|
@@ -12555,7 +13212,7 @@ var RufousTextEditor = ({
|
|
|
12555
13212
|
placeholder: "https://example.com",
|
|
12556
13213
|
autoFocus: true
|
|
12557
13214
|
}
|
|
12558
|
-
)), /* @__PURE__ */
|
|
13215
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12559
13216
|
"input",
|
|
12560
13217
|
{
|
|
12561
13218
|
type: "text",
|
|
@@ -12567,26 +13224,26 @@ var RufousTextEditor = ({
|
|
|
12567
13224
|
},
|
|
12568
13225
|
placeholder: "Link text"
|
|
12569
13226
|
}
|
|
12570
|
-
)), /* @__PURE__ */
|
|
13227
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12571
13228
|
"input",
|
|
12572
13229
|
{
|
|
12573
13230
|
type: "checkbox",
|
|
12574
13231
|
checked: linkNewTab,
|
|
12575
13232
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
12576
13233
|
}
|
|
12577
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13234
|
+
), "Open in new tab"), /* @__PURE__ */ import_react60.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12578
13235
|
"input",
|
|
12579
13236
|
{
|
|
12580
13237
|
type: "checkbox",
|
|
12581
13238
|
checked: linkNoFollow,
|
|
12582
13239
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
12583
13240
|
}
|
|
12584
|
-
), "No follow"))), /* @__PURE__ */
|
|
13241
|
+
), "No follow"))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
12585
13242
|
document.body
|
|
12586
13243
|
)),
|
|
12587
|
-
helperText && /* @__PURE__ */
|
|
13244
|
+
helperText && /* @__PURE__ */ import_react60.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
12588
13245
|
);
|
|
12589
|
-
return isFullscreen ? (0,
|
|
13246
|
+
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
12590
13247
|
};
|
|
12591
13248
|
var RufousTextContent = ({ content, className, style, sx }) => {
|
|
12592
13249
|
const sxClass = useSx(sx);
|
|
@@ -12595,7 +13252,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12595
13252
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
12596
13253
|
} catch {
|
|
12597
13254
|
}
|
|
12598
|
-
return /* @__PURE__ */
|
|
13255
|
+
return /* @__PURE__ */ import_react60.default.createElement(
|
|
12599
13256
|
"div",
|
|
12600
13257
|
{
|
|
12601
13258
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -12734,6 +13391,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
12734
13391
|
ToggleButtonGroup,
|
|
12735
13392
|
Tooltip,
|
|
12736
13393
|
TrashIcon,
|
|
13394
|
+
TreeSelect,
|
|
12737
13395
|
Typography,
|
|
12738
13396
|
UnArchivedIcon,
|
|
12739
13397
|
UnsubscribeIcon,
|