@rufous/ui 0.3.14 → 0.3.17
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 +765 -434
- package/dist/main.css +24 -0
- package/dist/main.d.cts +123 -1
- package/dist/main.d.ts +123 -1
- package/dist/main.js +638 -309
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -133,6 +133,7 @@ __export(main_exports, {
|
|
|
133
133
|
Skeleton: () => Skeleton,
|
|
134
134
|
Slide: () => Slide,
|
|
135
135
|
Slider: () => Slider,
|
|
136
|
+
SmartSelect: () => SmartSelect,
|
|
136
137
|
Snackbar: () => Snackbar,
|
|
137
138
|
SoftSkillsIcon: () => softSkillsIcon_default,
|
|
138
139
|
Stack: () => Stack,
|
|
@@ -163,6 +164,7 @@ __export(main_exports, {
|
|
|
163
164
|
UnsubscribeIcon: () => unsubscribeIcon_default,
|
|
164
165
|
UploadIcon: () => uploadIcon_default,
|
|
165
166
|
UserAssignIcon: () => userAssignIcon_default,
|
|
167
|
+
UserSelectionField: () => UserSelectionField,
|
|
166
168
|
ViewIcon: () => viewIcon_default,
|
|
167
169
|
WorkItemIcon: () => workItemIcon_default,
|
|
168
170
|
Zoom: () => Zoom,
|
|
@@ -2259,10 +2261,10 @@ function defaultIsEqual(a, b) {
|
|
|
2259
2261
|
if (!aIsObj && bIsObj) return a === b.value;
|
|
2260
2262
|
return false;
|
|
2261
2263
|
}
|
|
2262
|
-
function defaultFilter(options, inputValue,
|
|
2264
|
+
function defaultFilter(options, inputValue, getLabel2) {
|
|
2263
2265
|
if (!inputValue) return options;
|
|
2264
2266
|
const q = inputValue.toLowerCase();
|
|
2265
|
-
return options.filter((o) =>
|
|
2267
|
+
return options.filter((o) => getLabel2(o).toLowerCase().includes(q));
|
|
2266
2268
|
}
|
|
2267
2269
|
function AutocompleteInner(props, _ref) {
|
|
2268
2270
|
const {
|
|
@@ -5381,6 +5383,10 @@ var CheckIcon2 = () => /* @__PURE__ */ import_react24.default.createElement("svg
|
|
|
5381
5383
|
function normaliseOptions(options) {
|
|
5382
5384
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5383
5385
|
}
|
|
5386
|
+
function OptionIcon({ icon }) {
|
|
5387
|
+
if (!icon) return null;
|
|
5388
|
+
return /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ import_react24.default.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : import_react24.default.createElement(icon, { size: 16 }));
|
|
5389
|
+
}
|
|
5384
5390
|
var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
5385
5391
|
const {
|
|
5386
5392
|
options: rawOptions,
|
|
@@ -5549,7 +5555,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5549
5555
|
}
|
|
5550
5556
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5551
5557
|
if (selectedOpt) {
|
|
5552
|
-
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5558
|
+
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5553
5559
|
}
|
|
5554
5560
|
return /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5555
5561
|
};
|
|
@@ -5607,6 +5613,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5607
5613
|
onMouseDown: (e) => e.preventDefault(),
|
|
5608
5614
|
onClick: (e) => selectOption(opt, e)
|
|
5609
5615
|
},
|
|
5616
|
+
/* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: opt.icon }),
|
|
5610
5617
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5611
5618
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(CheckIcon2, null))
|
|
5612
5619
|
);
|
|
@@ -9390,10 +9397,332 @@ function TreeSelect({
|
|
|
9390
9397
|
));
|
|
9391
9398
|
}
|
|
9392
9399
|
|
|
9400
|
+
// lib/UserSelectionField/UserSelectionField.tsx
|
|
9401
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
9402
|
+
function getOptionId(opt) {
|
|
9403
|
+
return opt.id ?? opt._id;
|
|
9404
|
+
}
|
|
9405
|
+
function getLabel(opt) {
|
|
9406
|
+
if (!opt.userFirstName) return "";
|
|
9407
|
+
return `${opt.userFirstName} ${opt.userLastName ?? ""}`.trim();
|
|
9408
|
+
}
|
|
9409
|
+
function matchesSearch(opt, query) {
|
|
9410
|
+
const q = query.toLowerCase();
|
|
9411
|
+
return opt.userFirstName?.toLowerCase().includes(q) || opt.userLastName?.toLowerCase().includes(q) || opt.emailId?.toLowerCase().includes(q) || false;
|
|
9412
|
+
}
|
|
9413
|
+
function UserAvatar({ user }) {
|
|
9414
|
+
const initials = (user.userFirstName?.[0] ?? "").toUpperCase() + (user.userLastName?.[0] ?? "").toUpperCase();
|
|
9415
|
+
return /* @__PURE__ */ import_react50.default.createElement("span", { style: {
|
|
9416
|
+
width: 28,
|
|
9417
|
+
height: 28,
|
|
9418
|
+
borderRadius: "50%",
|
|
9419
|
+
backgroundColor: "var(--hover-color, #e0e0e0)",
|
|
9420
|
+
border: "1px solid var(--border-color, #ddd)",
|
|
9421
|
+
display: "inline-flex",
|
|
9422
|
+
alignItems: "center",
|
|
9423
|
+
justifyContent: "center",
|
|
9424
|
+
fontSize: "0.7rem",
|
|
9425
|
+
fontWeight: 600,
|
|
9426
|
+
color: "var(--text-secondary, #555)",
|
|
9427
|
+
flexShrink: 0,
|
|
9428
|
+
letterSpacing: "0.02em"
|
|
9429
|
+
} }, initials || "?");
|
|
9430
|
+
}
|
|
9431
|
+
function UserSelectionField({
|
|
9432
|
+
value,
|
|
9433
|
+
onChange,
|
|
9434
|
+
options = [],
|
|
9435
|
+
loading = false,
|
|
9436
|
+
onSearchChange,
|
|
9437
|
+
label = "Select user",
|
|
9438
|
+
multiple = false,
|
|
9439
|
+
limitTags,
|
|
9440
|
+
size = "small",
|
|
9441
|
+
variant = "outlined",
|
|
9442
|
+
disabled = false,
|
|
9443
|
+
error = false,
|
|
9444
|
+
helperText,
|
|
9445
|
+
fullWidth = true,
|
|
9446
|
+
required = false,
|
|
9447
|
+
filterOptions: filterOptionsProp,
|
|
9448
|
+
className,
|
|
9449
|
+
style,
|
|
9450
|
+
sx
|
|
9451
|
+
}) {
|
|
9452
|
+
const handleInputChange = (_, inputValue) => {
|
|
9453
|
+
if (!onSearchChange) return;
|
|
9454
|
+
if (!inputValue) {
|
|
9455
|
+
onSearchChange("");
|
|
9456
|
+
return;
|
|
9457
|
+
}
|
|
9458
|
+
const hasLocalMatch = options.some((opt) => matchesSearch(opt, inputValue));
|
|
9459
|
+
if (!hasLocalMatch) {
|
|
9460
|
+
onSearchChange(inputValue);
|
|
9461
|
+
}
|
|
9462
|
+
};
|
|
9463
|
+
return /* @__PURE__ */ import_react50.default.createElement(
|
|
9464
|
+
Autocomplete,
|
|
9465
|
+
{
|
|
9466
|
+
options,
|
|
9467
|
+
value: value ?? (multiple ? [] : null),
|
|
9468
|
+
onChange: (_, newValue) => onChange(newValue),
|
|
9469
|
+
onInputChange: handleInputChange,
|
|
9470
|
+
multiple,
|
|
9471
|
+
limitTags,
|
|
9472
|
+
loading,
|
|
9473
|
+
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9474
|
+
getOptionLabel: getLabel,
|
|
9475
|
+
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9476
|
+
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
9477
|
+
renderOption: (props, option) => {
|
|
9478
|
+
const { key, ...rest } = props;
|
|
9479
|
+
return /* @__PURE__ */ import_react50.default.createElement("li", { key, ...rest, style: { padding: "6px 12px", listStyle: "none" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react50.default.createElement(UserAvatar, { user: option }), /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.85rem", color: "var(--text-color)", lineHeight: 1.3 } }, option.userFirstName, " ", option.userLastName), /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3 } }, option.emailId))));
|
|
9480
|
+
},
|
|
9481
|
+
label,
|
|
9482
|
+
placeholder: label,
|
|
9483
|
+
size,
|
|
9484
|
+
variant,
|
|
9485
|
+
disabled,
|
|
9486
|
+
error,
|
|
9487
|
+
helperText,
|
|
9488
|
+
fullWidth,
|
|
9489
|
+
required,
|
|
9490
|
+
className,
|
|
9491
|
+
style,
|
|
9492
|
+
sx
|
|
9493
|
+
}
|
|
9494
|
+
);
|
|
9495
|
+
}
|
|
9496
|
+
|
|
9497
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9498
|
+
var import_react51 = __toESM(require("react"), 1);
|
|
9499
|
+
var CheckIcon3 = () => /* @__PURE__ */ import_react51.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_react51.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9500
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9501
|
+
return options.flatMap((opt) => [
|
|
9502
|
+
{ option: opt, depth },
|
|
9503
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9504
|
+
]);
|
|
9505
|
+
}
|
|
9506
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9507
|
+
const ids = [getValue(option)];
|
|
9508
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9509
|
+
return ids;
|
|
9510
|
+
}
|
|
9511
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9512
|
+
for (const opt of options) {
|
|
9513
|
+
map.set(getValue(opt), opt);
|
|
9514
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9515
|
+
}
|
|
9516
|
+
return map;
|
|
9517
|
+
}
|
|
9518
|
+
function SmartSelect({
|
|
9519
|
+
options,
|
|
9520
|
+
value,
|
|
9521
|
+
onChange,
|
|
9522
|
+
onSearchChange,
|
|
9523
|
+
getOptionLabel,
|
|
9524
|
+
getOptionValue,
|
|
9525
|
+
getOptionSubLabel,
|
|
9526
|
+
getOptionChildren,
|
|
9527
|
+
multiple = false,
|
|
9528
|
+
allowChildNodesSelection = true,
|
|
9529
|
+
loading = false,
|
|
9530
|
+
loadingText,
|
|
9531
|
+
filterOptions: filterOptionsProp,
|
|
9532
|
+
renderOption: renderOptionProp,
|
|
9533
|
+
limitTags,
|
|
9534
|
+
label,
|
|
9535
|
+
placeholder,
|
|
9536
|
+
variant = "outlined",
|
|
9537
|
+
size = "small",
|
|
9538
|
+
disabled = false,
|
|
9539
|
+
error = false,
|
|
9540
|
+
helperText,
|
|
9541
|
+
fullWidth = true,
|
|
9542
|
+
required = false,
|
|
9543
|
+
className,
|
|
9544
|
+
style,
|
|
9545
|
+
sx
|
|
9546
|
+
}) {
|
|
9547
|
+
const getValue = (0, import_react51.useCallback)(
|
|
9548
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9549
|
+
[getOptionValue, getOptionLabel]
|
|
9550
|
+
);
|
|
9551
|
+
const flatItems = (0, import_react51.useMemo)(() => {
|
|
9552
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9553
|
+
return flattenTree(options, getOptionChildren);
|
|
9554
|
+
}, [options, getOptionChildren]);
|
|
9555
|
+
const flatOptionsList = (0, import_react51.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9556
|
+
const depthMap = (0, import_react51.useMemo)(() => {
|
|
9557
|
+
const map = /* @__PURE__ */ new Map();
|
|
9558
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9559
|
+
return map;
|
|
9560
|
+
}, [flatItems, getValue]);
|
|
9561
|
+
const lookup = (0, import_react51.useMemo)(
|
|
9562
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9563
|
+
[options, getOptionChildren, getValue]
|
|
9564
|
+
);
|
|
9565
|
+
const selectedKeys = (0, import_react51.useMemo)(() => {
|
|
9566
|
+
if (multiple) {
|
|
9567
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9568
|
+
}
|
|
9569
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9570
|
+
}, [multiple, value, getValue]);
|
|
9571
|
+
const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
|
|
9572
|
+
if (!onSearchChange) return;
|
|
9573
|
+
if (!inputValue) {
|
|
9574
|
+
onSearchChange("");
|
|
9575
|
+
return;
|
|
9576
|
+
}
|
|
9577
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9578
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9579
|
+
);
|
|
9580
|
+
if (!hasLocalMatch) {
|
|
9581
|
+
onSearchChange(inputValue);
|
|
9582
|
+
}
|
|
9583
|
+
}, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9584
|
+
const handleChange = (0, import_react51.useCallback)((_, newValue) => {
|
|
9585
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9586
|
+
onChange?.(newValue);
|
|
9587
|
+
return;
|
|
9588
|
+
}
|
|
9589
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9590
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9591
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9592
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9593
|
+
let changedKey = null;
|
|
9594
|
+
let wasAdded = false;
|
|
9595
|
+
for (const k of newKeys) {
|
|
9596
|
+
if (!currentKeys.has(k)) {
|
|
9597
|
+
changedKey = k;
|
|
9598
|
+
wasAdded = true;
|
|
9599
|
+
break;
|
|
9600
|
+
}
|
|
9601
|
+
}
|
|
9602
|
+
if (changedKey === null) {
|
|
9603
|
+
for (const k of currentKeys) {
|
|
9604
|
+
if (!newKeys.has(k)) {
|
|
9605
|
+
changedKey = k;
|
|
9606
|
+
wasAdded = false;
|
|
9607
|
+
break;
|
|
9608
|
+
}
|
|
9609
|
+
}
|
|
9610
|
+
}
|
|
9611
|
+
if (changedKey !== null) {
|
|
9612
|
+
const opt = lookup.get(changedKey);
|
|
9613
|
+
if (opt) {
|
|
9614
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9615
|
+
if (wasAdded) {
|
|
9616
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9617
|
+
} else {
|
|
9618
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9619
|
+
}
|
|
9620
|
+
}
|
|
9621
|
+
}
|
|
9622
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9623
|
+
onChange?.(result);
|
|
9624
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9625
|
+
const defaultRenderOption = (0, import_react51.useCallback)((props, option) => {
|
|
9626
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9627
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9628
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9629
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9630
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9631
|
+
"li",
|
|
9632
|
+
{
|
|
9633
|
+
key,
|
|
9634
|
+
...rest,
|
|
9635
|
+
className: muiClass,
|
|
9636
|
+
style: {
|
|
9637
|
+
...muiStyle,
|
|
9638
|
+
display: "flex",
|
|
9639
|
+
alignItems: "center",
|
|
9640
|
+
gap: 10,
|
|
9641
|
+
padding: "8px 16px",
|
|
9642
|
+
paddingLeft: 16 + depth * 20,
|
|
9643
|
+
fontSize: "0.9rem",
|
|
9644
|
+
color: "rgba(0,0,0,0.87)",
|
|
9645
|
+
cursor: "pointer",
|
|
9646
|
+
userSelect: "none",
|
|
9647
|
+
minHeight: 40,
|
|
9648
|
+
boxSizing: "border-box",
|
|
9649
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9650
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9651
|
+
listStyle: "none"
|
|
9652
|
+
}
|
|
9653
|
+
},
|
|
9654
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9655
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: {
|
|
9656
|
+
color: "var(--primary-color, #a41b06)",
|
|
9657
|
+
flexShrink: 0,
|
|
9658
|
+
display: "flex",
|
|
9659
|
+
alignItems: "center",
|
|
9660
|
+
opacity: isSelected ? 1 : 0,
|
|
9661
|
+
transition: "opacity 0.1s"
|
|
9662
|
+
} }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
|
|
9663
|
+
);
|
|
9664
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9665
|
+
const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue) => {
|
|
9666
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9667
|
+
if (multiple) {
|
|
9668
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9669
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9670
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9671
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9672
|
+
) : unselected;
|
|
9673
|
+
return [...selected, ...filteredRest];
|
|
9674
|
+
}
|
|
9675
|
+
if (value != null) {
|
|
9676
|
+
const selectedLabel = getOptionLabel(value);
|
|
9677
|
+
if (inputValue === selectedLabel) {
|
|
9678
|
+
const selectedKey = getValue(value);
|
|
9679
|
+
return [
|
|
9680
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9681
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9682
|
+
];
|
|
9683
|
+
}
|
|
9684
|
+
}
|
|
9685
|
+
if (!inputValue) return opts;
|
|
9686
|
+
const q = inputValue.toLowerCase();
|
|
9687
|
+
return opts.filter(
|
|
9688
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9689
|
+
);
|
|
9690
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9691
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9692
|
+
Autocomplete,
|
|
9693
|
+
{
|
|
9694
|
+
options: flatOptionsList,
|
|
9695
|
+
value: value ?? (multiple ? [] : null),
|
|
9696
|
+
onChange: handleChange,
|
|
9697
|
+
onInputChange: handleInputChange,
|
|
9698
|
+
multiple,
|
|
9699
|
+
limitTags,
|
|
9700
|
+
loading,
|
|
9701
|
+
loadingText: loadingText ?? /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9702
|
+
getOptionLabel,
|
|
9703
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9704
|
+
filterOptions: computedFilterOptions,
|
|
9705
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9706
|
+
label,
|
|
9707
|
+
placeholder: placeholder ?? label,
|
|
9708
|
+
size,
|
|
9709
|
+
variant,
|
|
9710
|
+
disabled,
|
|
9711
|
+
error,
|
|
9712
|
+
helperText,
|
|
9713
|
+
fullWidth,
|
|
9714
|
+
required,
|
|
9715
|
+
className,
|
|
9716
|
+
style,
|
|
9717
|
+
sx
|
|
9718
|
+
}
|
|
9719
|
+
);
|
|
9720
|
+
}
|
|
9721
|
+
|
|
9393
9722
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9394
|
-
var
|
|
9723
|
+
var import_react62 = __toESM(require("react"), 1);
|
|
9395
9724
|
var import_react_dom18 = require("react-dom");
|
|
9396
|
-
var
|
|
9725
|
+
var import_react63 = require("@tiptap/react");
|
|
9397
9726
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
9398
9727
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
9399
9728
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -9413,21 +9742,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
9413
9742
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
9414
9743
|
|
|
9415
9744
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
9416
|
-
var
|
|
9745
|
+
var import_react53 = require("@tiptap/react");
|
|
9417
9746
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
9418
9747
|
|
|
9419
9748
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9420
|
-
var
|
|
9421
|
-
var MentionList = (0,
|
|
9422
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9749
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
9750
|
+
var MentionList = (0, import_react52.forwardRef)((props, ref) => {
|
|
9751
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react52.useState)(0);
|
|
9423
9752
|
const selectItem = (index) => {
|
|
9424
9753
|
const item = props.items[index];
|
|
9425
9754
|
if (item) {
|
|
9426
9755
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
9427
9756
|
}
|
|
9428
9757
|
};
|
|
9429
|
-
(0,
|
|
9430
|
-
(0,
|
|
9758
|
+
(0, import_react52.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9759
|
+
(0, import_react52.useImperativeHandle)(ref, () => ({
|
|
9431
9760
|
onKeyDown: ({ event }) => {
|
|
9432
9761
|
if (event.key === "ArrowUp") {
|
|
9433
9762
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -9445,17 +9774,17 @@ var MentionList = (0, import_react50.forwardRef)((props, ref) => {
|
|
|
9445
9774
|
}
|
|
9446
9775
|
}));
|
|
9447
9776
|
if (!props.items.length) {
|
|
9448
|
-
return /* @__PURE__ */
|
|
9777
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9449
9778
|
}
|
|
9450
|
-
return /* @__PURE__ */
|
|
9779
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react52.default.createElement(
|
|
9451
9780
|
"button",
|
|
9452
9781
|
{
|
|
9453
9782
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9454
9783
|
key: item.id,
|
|
9455
9784
|
onClick: () => selectItem(index)
|
|
9456
9785
|
},
|
|
9457
|
-
/* @__PURE__ */
|
|
9458
|
-
/* @__PURE__ */
|
|
9786
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9787
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9459
9788
|
)));
|
|
9460
9789
|
});
|
|
9461
9790
|
MentionList.displayName = "MentionList";
|
|
@@ -9475,7 +9804,7 @@ function createMentionSuggestion(users) {
|
|
|
9475
9804
|
return {
|
|
9476
9805
|
onStart: (props) => {
|
|
9477
9806
|
if (!props.clientRect) return;
|
|
9478
|
-
component = new
|
|
9807
|
+
component = new import_react53.ReactRenderer(MentionList_default, {
|
|
9479
9808
|
props,
|
|
9480
9809
|
editor: props.editor
|
|
9481
9810
|
});
|
|
@@ -9513,21 +9842,21 @@ function createMentionSuggestion(users) {
|
|
|
9513
9842
|
}
|
|
9514
9843
|
|
|
9515
9844
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9516
|
-
var
|
|
9845
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
9517
9846
|
var import_react_dom14 = require("react-dom");
|
|
9518
9847
|
|
|
9519
9848
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9520
|
-
var
|
|
9521
|
-
var TextToSpeech = (0,
|
|
9522
|
-
const [speaking, setSpeaking] = (0,
|
|
9523
|
-
const [paused, setPaused] = (0,
|
|
9524
|
-
const [voices, setVoices] = (0,
|
|
9525
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
9526
|
-
const [rate, setRate] = (0,
|
|
9527
|
-
const [showPanel, setShowPanel] = (0,
|
|
9528
|
-
const utteranceRef = (0,
|
|
9529
|
-
const panelRef = (0,
|
|
9530
|
-
(0,
|
|
9849
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9850
|
+
var TextToSpeech = (0, import_react54.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9851
|
+
const [speaking, setSpeaking] = (0, import_react54.useState)(false);
|
|
9852
|
+
const [paused, setPaused] = (0, import_react54.useState)(false);
|
|
9853
|
+
const [voices, setVoices] = (0, import_react54.useState)([]);
|
|
9854
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react54.useState)("");
|
|
9855
|
+
const [rate, setRate] = (0, import_react54.useState)(1);
|
|
9856
|
+
const [showPanel, setShowPanel] = (0, import_react54.useState)(false);
|
|
9857
|
+
const utteranceRef = (0, import_react54.useRef)(null);
|
|
9858
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9859
|
+
(0, import_react54.useEffect)(() => {
|
|
9531
9860
|
const synth = window.speechSynthesis;
|
|
9532
9861
|
const loadVoices = () => {
|
|
9533
9862
|
const available = synth.getVoices();
|
|
@@ -9545,7 +9874,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9545
9874
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9546
9875
|
};
|
|
9547
9876
|
}, [selectedVoice]);
|
|
9548
|
-
(0,
|
|
9877
|
+
(0, import_react54.useEffect)(() => {
|
|
9549
9878
|
const handleClick = (e) => {
|
|
9550
9879
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9551
9880
|
setShowPanel(false);
|
|
@@ -9554,7 +9883,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9554
9883
|
document.addEventListener("mousedown", handleClick);
|
|
9555
9884
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9556
9885
|
}, []);
|
|
9557
|
-
const getTextToSpeak = (0,
|
|
9886
|
+
const getTextToSpeak = (0, import_react54.useCallback)(() => {
|
|
9558
9887
|
if (!editor) return "";
|
|
9559
9888
|
const { from, to, empty } = editor.state.selection;
|
|
9560
9889
|
if (!empty) {
|
|
@@ -9562,7 +9891,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9562
9891
|
}
|
|
9563
9892
|
return editor.getText();
|
|
9564
9893
|
}, [editor]);
|
|
9565
|
-
const handleSpeak = (0,
|
|
9894
|
+
const handleSpeak = (0, import_react54.useCallback)(async () => {
|
|
9566
9895
|
const text = getTextToSpeak();
|
|
9567
9896
|
if (!text.trim()) return;
|
|
9568
9897
|
if (onTextToSpeech) {
|
|
@@ -9604,25 +9933,25 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9604
9933
|
setSpeaking(true);
|
|
9605
9934
|
setPaused(false);
|
|
9606
9935
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9607
|
-
const handlePause = (0,
|
|
9936
|
+
const handlePause = (0, import_react54.useCallback)(() => {
|
|
9608
9937
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9609
9938
|
window.speechSynthesis.pause();
|
|
9610
9939
|
setPaused(true);
|
|
9611
9940
|
}
|
|
9612
9941
|
}, []);
|
|
9613
|
-
const handleResume = (0,
|
|
9942
|
+
const handleResume = (0, import_react54.useCallback)(() => {
|
|
9614
9943
|
if (window.speechSynthesis.paused) {
|
|
9615
9944
|
window.speechSynthesis.resume();
|
|
9616
9945
|
setPaused(false);
|
|
9617
9946
|
}
|
|
9618
9947
|
}, []);
|
|
9619
|
-
const handleStop = (0,
|
|
9948
|
+
const handleStop = (0, import_react54.useCallback)(() => {
|
|
9620
9949
|
window.speechSynthesis.cancel();
|
|
9621
9950
|
setSpeaking(false);
|
|
9622
9951
|
setPaused(false);
|
|
9623
9952
|
}, []);
|
|
9624
|
-
(0,
|
|
9625
|
-
return /* @__PURE__ */
|
|
9953
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9954
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9626
9955
|
"button",
|
|
9627
9956
|
{
|
|
9628
9957
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9635,15 +9964,15 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9635
9964
|
}
|
|
9636
9965
|
},
|
|
9637
9966
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9638
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9967
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9639
9968
|
"select",
|
|
9640
9969
|
{
|
|
9641
9970
|
className: "tts-select",
|
|
9642
9971
|
value: selectedVoice,
|
|
9643
9972
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9644
9973
|
},
|
|
9645
|
-
voices.map((v) => /* @__PURE__ */
|
|
9646
|
-
), /* @__PURE__ */
|
|
9974
|
+
voices.map((v) => /* @__PURE__ */ import_react54.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9975
|
+
), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9647
9976
|
"input",
|
|
9648
9977
|
{
|
|
9649
9978
|
type: "range",
|
|
@@ -9654,26 +9983,26 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9654
9983
|
value: rate,
|
|
9655
9984
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9656
9985
|
}
|
|
9657
|
-
), /* @__PURE__ */
|
|
9986
|
+
), /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9658
9987
|
handleSpeak();
|
|
9659
9988
|
setShowPanel(false);
|
|
9660
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9989
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9661
9990
|
});
|
|
9662
9991
|
var TextToSpeech_default = TextToSpeech;
|
|
9663
9992
|
|
|
9664
9993
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9665
|
-
var
|
|
9666
|
-
var SpeechToText = (0,
|
|
9667
|
-
const [listening, setListening] = (0,
|
|
9668
|
-
const [showPanel, setShowPanel] = (0,
|
|
9669
|
-
const [language, setLanguage] = (0,
|
|
9670
|
-
const [interim, setInterim] = (0,
|
|
9671
|
-
const recognitionRef = (0,
|
|
9672
|
-
const panelRef = (0,
|
|
9673
|
-
const isListeningRef = (0,
|
|
9994
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
9995
|
+
var SpeechToText = (0, import_react55.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9996
|
+
const [listening, setListening] = (0, import_react55.useState)(false);
|
|
9997
|
+
const [showPanel, setShowPanel] = (0, import_react55.useState)(false);
|
|
9998
|
+
const [language, setLanguage] = (0, import_react55.useState)("en-US");
|
|
9999
|
+
const [interim, setInterim] = (0, import_react55.useState)("");
|
|
10000
|
+
const recognitionRef = (0, import_react55.useRef)(null);
|
|
10001
|
+
const panelRef = (0, import_react55.useRef)(null);
|
|
10002
|
+
const isListeningRef = (0, import_react55.useRef)(false);
|
|
9674
10003
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9675
10004
|
const supported = !!SpeechRecognitionAPI;
|
|
9676
|
-
(0,
|
|
10005
|
+
(0, import_react55.useEffect)(() => {
|
|
9677
10006
|
const handleClick = (e) => {
|
|
9678
10007
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9679
10008
|
setShowPanel(false);
|
|
@@ -9682,7 +10011,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9682
10011
|
document.addEventListener("mousedown", handleClick);
|
|
9683
10012
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9684
10013
|
}, []);
|
|
9685
|
-
const createRecognition = (0,
|
|
10014
|
+
const createRecognition = (0, import_react55.useCallback)(() => {
|
|
9686
10015
|
if (!supported) return null;
|
|
9687
10016
|
const recognition = new SpeechRecognitionAPI();
|
|
9688
10017
|
recognition.lang = language;
|
|
@@ -9691,7 +10020,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9691
10020
|
recognition.maxAlternatives = 1;
|
|
9692
10021
|
return recognition;
|
|
9693
10022
|
}, [supported, language]);
|
|
9694
|
-
const startSession = (0,
|
|
10023
|
+
const startSession = (0, import_react55.useCallback)((recognition) => {
|
|
9695
10024
|
if (!recognition || !editor) return;
|
|
9696
10025
|
recognition.onresult = async (event) => {
|
|
9697
10026
|
let finalText = "";
|
|
@@ -9746,7 +10075,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9746
10075
|
}
|
|
9747
10076
|
};
|
|
9748
10077
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9749
|
-
const startListening = (0,
|
|
10078
|
+
const startListening = (0, import_react55.useCallback)(() => {
|
|
9750
10079
|
if (!supported || !editor) return;
|
|
9751
10080
|
const recognition = createRecognition();
|
|
9752
10081
|
if (!recognition) return;
|
|
@@ -9762,7 +10091,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9762
10091
|
setListening(false);
|
|
9763
10092
|
}
|
|
9764
10093
|
}, [supported, editor, createRecognition, startSession]);
|
|
9765
|
-
const stopListening = (0,
|
|
10094
|
+
const stopListening = (0, import_react55.useCallback)(() => {
|
|
9766
10095
|
isListeningRef.current = false;
|
|
9767
10096
|
if (recognitionRef.current) {
|
|
9768
10097
|
try {
|
|
@@ -9774,9 +10103,9 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9774
10103
|
setListening(false);
|
|
9775
10104
|
setInterim("");
|
|
9776
10105
|
}, []);
|
|
9777
|
-
(0,
|
|
10106
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9778
10107
|
if (!supported) {
|
|
9779
|
-
return /* @__PURE__ */
|
|
10108
|
+
return /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9780
10109
|
}
|
|
9781
10110
|
const LANGUAGES2 = [
|
|
9782
10111
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9798,7 +10127,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9798
10127
|
{ code: "kn-IN", label: "Kannada" },
|
|
9799
10128
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9800
10129
|
];
|
|
9801
|
-
return /* @__PURE__ */
|
|
10130
|
+
return /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9802
10131
|
"button",
|
|
9803
10132
|
{
|
|
9804
10133
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9811,20 +10140,20 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9811
10140
|
}
|
|
9812
10141
|
},
|
|
9813
10142
|
"\u{1F3A4}"
|
|
9814
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10143
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react55.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react55.default.createElement(
|
|
9815
10144
|
"select",
|
|
9816
10145
|
{
|
|
9817
10146
|
className: "stt-select",
|
|
9818
10147
|
value: language,
|
|
9819
10148
|
onChange: (e) => setLanguage(e.target.value)
|
|
9820
10149
|
},
|
|
9821
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9822
|
-
), /* @__PURE__ */
|
|
10150
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react55.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10151
|
+
), /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react55.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9823
10152
|
});
|
|
9824
10153
|
var SpeechToText_default = SpeechToText;
|
|
9825
10154
|
|
|
9826
10155
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9827
|
-
var
|
|
10156
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
9828
10157
|
var import_react_dom12 = require("react-dom");
|
|
9829
10158
|
var AI_COMMANDS = [
|
|
9830
10159
|
{ 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." },
|
|
@@ -9872,16 +10201,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9872
10201
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9873
10202
|
};
|
|
9874
10203
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9875
|
-
const [open, setOpen] = (0,
|
|
9876
|
-
const [showModal, setShowModal] = (0,
|
|
9877
|
-
const [loading, setLoading] = (0,
|
|
9878
|
-
const [promptText, setPromptText] = (0,
|
|
9879
|
-
const [resultText, setResultText] = (0,
|
|
9880
|
-
const [originalText, setOriginalText] = (0,
|
|
9881
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9882
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9883
|
-
const panelRef = (0,
|
|
9884
|
-
(0,
|
|
10204
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
10205
|
+
const [showModal, setShowModal] = (0, import_react56.useState)(false);
|
|
10206
|
+
const [loading, setLoading] = (0, import_react56.useState)(false);
|
|
10207
|
+
const [promptText, setPromptText] = (0, import_react56.useState)("");
|
|
10208
|
+
const [resultText, setResultText] = (0, import_react56.useState)("");
|
|
10209
|
+
const [originalText, setOriginalText] = (0, import_react56.useState)("");
|
|
10210
|
+
const [selectionRange, setSelectionRange] = (0, import_react56.useState)(null);
|
|
10211
|
+
const [previousResults, setPreviousResults] = (0, import_react56.useState)([]);
|
|
10212
|
+
const panelRef = (0, import_react56.useRef)(null);
|
|
10213
|
+
(0, import_react56.useEffect)(() => {
|
|
9885
10214
|
const handleClick = (e) => {
|
|
9886
10215
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9887
10216
|
setOpen(false);
|
|
@@ -9890,7 +10219,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9890
10219
|
document.addEventListener("mousedown", handleClick);
|
|
9891
10220
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9892
10221
|
}, []);
|
|
9893
|
-
const getSelectedText = (0,
|
|
10222
|
+
const getSelectedText = (0, import_react56.useCallback)(() => {
|
|
9894
10223
|
if (!editor) return { text: "", range: null };
|
|
9895
10224
|
const { from, to, empty } = editor.state.selection;
|
|
9896
10225
|
if (!empty) {
|
|
@@ -9898,7 +10227,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9898
10227
|
}
|
|
9899
10228
|
return { text: editor.getText(), range: null };
|
|
9900
10229
|
}, [editor]);
|
|
9901
|
-
const fetchAIResult = (0,
|
|
10230
|
+
const fetchAIResult = (0, import_react56.useCallback)(async (prompt, text, prevResults = []) => {
|
|
9902
10231
|
setLoading(true);
|
|
9903
10232
|
setResultText("");
|
|
9904
10233
|
try {
|
|
@@ -9916,7 +10245,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9916
10245
|
setLoading(false);
|
|
9917
10246
|
}
|
|
9918
10247
|
}, [onAICommand]);
|
|
9919
|
-
const handleCommandSelect = (0,
|
|
10248
|
+
const handleCommandSelect = (0, import_react56.useCallback)((command) => {
|
|
9920
10249
|
const { text, range } = getSelectedText();
|
|
9921
10250
|
if (!text.trim()) return;
|
|
9922
10251
|
setOriginalText(text);
|
|
@@ -9927,7 +10256,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9927
10256
|
setShowModal(true);
|
|
9928
10257
|
fetchAIResult(command.prompt, text, []);
|
|
9929
10258
|
}, [getSelectedText, fetchAIResult]);
|
|
9930
|
-
const handleInsert = (0,
|
|
10259
|
+
const handleInsert = (0, import_react56.useCallback)(() => {
|
|
9931
10260
|
if (!resultText || !editor) return;
|
|
9932
10261
|
if (selectionRange) {
|
|
9933
10262
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9937,7 +10266,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9937
10266
|
setShowModal(false);
|
|
9938
10267
|
setResultText("");
|
|
9939
10268
|
}, [editor, resultText, selectionRange]);
|
|
9940
|
-
const handleInsertAfter = (0,
|
|
10269
|
+
const handleInsertAfter = (0, import_react56.useCallback)(() => {
|
|
9941
10270
|
if (!resultText || !editor) return;
|
|
9942
10271
|
if (selectionRange) {
|
|
9943
10272
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9952,11 +10281,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9952
10281
|
setShowModal(false);
|
|
9953
10282
|
setResultText("");
|
|
9954
10283
|
}, [editor, resultText, selectionRange]);
|
|
9955
|
-
const handleRefresh = (0,
|
|
10284
|
+
const handleRefresh = (0, import_react56.useCallback)(() => {
|
|
9956
10285
|
if (!originalText.trim()) return;
|
|
9957
10286
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9958
10287
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9959
|
-
const handleCancel = (0,
|
|
10288
|
+
const handleCancel = (0, import_react56.useCallback)(() => {
|
|
9960
10289
|
setShowModal(false);
|
|
9961
10290
|
setResultText("");
|
|
9962
10291
|
setPromptText("");
|
|
@@ -9965,15 +10294,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9965
10294
|
setPreviousResults([]);
|
|
9966
10295
|
}, []);
|
|
9967
10296
|
if (!editor) return null;
|
|
9968
|
-
return /* @__PURE__ */
|
|
10297
|
+
return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
9969
10298
|
"button",
|
|
9970
10299
|
{
|
|
9971
10300
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9972
10301
|
onClick: () => setOpen(!open)
|
|
9973
10302
|
},
|
|
9974
|
-
/* @__PURE__ */
|
|
9975
|
-
/* @__PURE__ */
|
|
9976
|
-
)), open && /* @__PURE__ */
|
|
10303
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react56.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" })),
|
|
10304
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10305
|
+
)), open && /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react56.default.createElement(
|
|
9977
10306
|
"button",
|
|
9978
10307
|
{
|
|
9979
10308
|
key: cmd.id,
|
|
@@ -9981,8 +10310,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9981
10310
|
onClick: () => handleCommandSelect(cmd)
|
|
9982
10311
|
},
|
|
9983
10312
|
cmd.label
|
|
9984
|
-
))), /* @__PURE__ */
|
|
9985
|
-
/* @__PURE__ */
|
|
10313
|
+
))), /* @__PURE__ */ import_react56.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)(
|
|
10314
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react56.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
9986
10315
|
"textarea",
|
|
9987
10316
|
{
|
|
9988
10317
|
className: "ai-modal-prompt",
|
|
@@ -9990,15 +10319,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9990
10319
|
onChange: (e) => setPromptText(e.target.value),
|
|
9991
10320
|
rows: 3
|
|
9992
10321
|
}
|
|
9993
|
-
), /* @__PURE__ */
|
|
10322
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
9994
10323
|
"button",
|
|
9995
10324
|
{
|
|
9996
10325
|
className: "ai-modal-robot-btn",
|
|
9997
10326
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9998
10327
|
disabled: loading
|
|
9999
10328
|
},
|
|
10000
|
-
/* @__PURE__ */
|
|
10001
|
-
)))), /* @__PURE__ */
|
|
10329
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react56.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M8 7h8" }))
|
|
10330
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10002
10331
|
"button",
|
|
10003
10332
|
{
|
|
10004
10333
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10006,7 +10335,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10006
10335
|
disabled: loading || !resultText
|
|
10007
10336
|
},
|
|
10008
10337
|
"Insert"
|
|
10009
|
-
), /* @__PURE__ */
|
|
10338
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10010
10339
|
"button",
|
|
10011
10340
|
{
|
|
10012
10341
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10014,22 +10343,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10014
10343
|
disabled: loading || !resultText
|
|
10015
10344
|
},
|
|
10016
10345
|
"Insert After"
|
|
10017
|
-
), /* @__PURE__ */
|
|
10346
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10018
10347
|
"button",
|
|
10019
10348
|
{
|
|
10020
10349
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10021
10350
|
onClick: handleRefresh,
|
|
10022
10351
|
disabled: loading
|
|
10023
10352
|
},
|
|
10024
|
-
/* @__PURE__ */
|
|
10025
|
-
))), /* @__PURE__ */
|
|
10353
|
+
/* @__PURE__ */ import_react56.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_react56.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10354
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react56.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10026
10355
|
document.body
|
|
10027
10356
|
));
|
|
10028
10357
|
};
|
|
10029
10358
|
var AICommands_default = AICommands;
|
|
10030
10359
|
|
|
10031
10360
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10032
|
-
var
|
|
10361
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
10033
10362
|
var import_react_dom13 = require("react-dom");
|
|
10034
10363
|
var LANGUAGES = [
|
|
10035
10364
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10169,16 +10498,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
10169
10498
|
return null;
|
|
10170
10499
|
}
|
|
10171
10500
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
10172
|
-
const [sourceLang, setSourceLang] = (0,
|
|
10173
|
-
const [targetLang, setTargetLang] = (0,
|
|
10174
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
10175
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
10176
|
-
const [translating, setTranslating] = (0,
|
|
10177
|
-
const [error, setError] = (0,
|
|
10178
|
-
const filteredSource = (0,
|
|
10501
|
+
const [sourceLang, setSourceLang] = (0, import_react57.useState)(initialSource || "en");
|
|
10502
|
+
const [targetLang, setTargetLang] = (0, import_react57.useState)(initialTarget || "hi");
|
|
10503
|
+
const [sourceFilter, setSourceFilter] = (0, import_react57.useState)("");
|
|
10504
|
+
const [targetFilter, setTargetFilter] = (0, import_react57.useState)("");
|
|
10505
|
+
const [translating, setTranslating] = (0, import_react57.useState)(false);
|
|
10506
|
+
const [error, setError] = (0, import_react57.useState)("");
|
|
10507
|
+
const filteredSource = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10179
10508
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10180
10509
|
), [sourceFilter]);
|
|
10181
|
-
const filteredTarget = (0,
|
|
10510
|
+
const filteredTarget = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10182
10511
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10183
10512
|
), [targetFilter]);
|
|
10184
10513
|
const handleSwap = () => {
|
|
@@ -10222,7 +10551,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10222
10551
|
}
|
|
10223
10552
|
};
|
|
10224
10553
|
return (0, import_react_dom13.createPortal)(
|
|
10225
|
-
/* @__PURE__ */
|
|
10554
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Translate options"), /* @__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: "translate-columns" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10226
10555
|
"input",
|
|
10227
10556
|
{
|
|
10228
10557
|
type: "text",
|
|
@@ -10231,16 +10560,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10231
10560
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10232
10561
|
className: "translate-filter-input"
|
|
10233
10562
|
}
|
|
10234
|
-
)), /* @__PURE__ */
|
|
10563
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10235
10564
|
"button",
|
|
10236
10565
|
{
|
|
10237
10566
|
key: lang.code,
|
|
10238
10567
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10239
10568
|
onClick: () => setSourceLang(lang.code)
|
|
10240
10569
|
},
|
|
10241
|
-
/* @__PURE__ */
|
|
10242
|
-
/* @__PURE__ */
|
|
10243
|
-
)))), /* @__PURE__ */
|
|
10570
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10571
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10572
|
+
)))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10244
10573
|
"input",
|
|
10245
10574
|
{
|
|
10246
10575
|
type: "text",
|
|
@@ -10249,16 +10578,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10249
10578
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10250
10579
|
className: "translate-filter-input"
|
|
10251
10580
|
}
|
|
10252
|
-
)), /* @__PURE__ */
|
|
10581
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10253
10582
|
"button",
|
|
10254
10583
|
{
|
|
10255
10584
|
key: lang.code,
|
|
10256
10585
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10257
10586
|
onClick: () => setTargetLang(lang.code)
|
|
10258
10587
|
},
|
|
10259
|
-
/* @__PURE__ */
|
|
10260
|
-
/* @__PURE__ */
|
|
10261
|
-
))))), error && /* @__PURE__ */
|
|
10588
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10589
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10590
|
+
))))), error && /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-error" }, error)), /* @__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-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10262
10591
|
document.body
|
|
10263
10592
|
);
|
|
10264
10593
|
};
|
|
@@ -10909,38 +11238,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
10909
11238
|
});
|
|
10910
11239
|
|
|
10911
11240
|
// lib/RufousTextEditor/icons.tsx
|
|
10912
|
-
var
|
|
11241
|
+
var React114 = __toESM(require("react"), 1);
|
|
10913
11242
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10914
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10915
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10916
|
-
var IconBold = () => /* @__PURE__ */
|
|
10917
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10918
|
-
var IconLink = () => /* @__PURE__ */
|
|
10919
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10920
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10921
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10922
|
-
var IconColor = () => /* @__PURE__ */
|
|
10923
|
-
var IconFont = () => /* @__PURE__ */
|
|
10924
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10925
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10926
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10927
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10928
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10929
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10930
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10931
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10932
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10933
|
-
var IconTable = () => /* @__PURE__ */
|
|
10934
|
-
var IconImage = () => /* @__PURE__ */
|
|
10935
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10936
|
-
var IconCut = () => /* @__PURE__ */
|
|
10937
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10938
|
-
var IconCode = () => /* @__PURE__ */
|
|
10939
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10940
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10941
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10942
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10943
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11243
|
+
var IconUndo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11244
|
+
var IconRedo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11245
|
+
var IconBold = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11246
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11247
|
+
var IconLink = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11248
|
+
var IconStrike = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11249
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11250
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11251
|
+
var IconColor = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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__ */ React114.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11252
|
+
var IconFont = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11253
|
+
var IconLineHeight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11254
|
+
var IconBulletList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11255
|
+
var IconOrderedList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11256
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11257
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11258
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11259
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11260
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11261
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11262
|
+
var IconTable = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11263
|
+
var IconImage = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11264
|
+
var IconVideo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11265
|
+
var IconCut = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11266
|
+
var IconCopy = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11267
|
+
var IconCode = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11268
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11269
|
+
var IconTranslate = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11270
|
+
var IconTaskList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
11271
|
+
var IconCheck = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11272
|
+
var IconPaste = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.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" }));
|
|
10944
11273
|
|
|
10945
11274
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10946
11275
|
var COLOR_PALETTE = [
|
|
@@ -11078,10 +11407,10 @@ var SPECIAL_CHARS = [
|
|
|
11078
11407
|
"\xA2"
|
|
11079
11408
|
];
|
|
11080
11409
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
11081
|
-
const [open, setOpen] = (0,
|
|
11082
|
-
const ref = (0,
|
|
11083
|
-
const menuRef = (0,
|
|
11084
|
-
(0,
|
|
11410
|
+
const [open, setOpen] = (0, import_react58.useState)(false);
|
|
11411
|
+
const ref = (0, import_react58.useRef)(null);
|
|
11412
|
+
const menuRef = (0, import_react58.useRef)(null);
|
|
11413
|
+
(0, import_react58.useEffect)(() => {
|
|
11085
11414
|
const handleClick = (e) => {
|
|
11086
11415
|
const target = e.target;
|
|
11087
11416
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -11093,7 +11422,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11093
11422
|
document.addEventListener("mousedown", handleClick);
|
|
11094
11423
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
11095
11424
|
}, []);
|
|
11096
|
-
(0,
|
|
11425
|
+
(0, import_react58.useEffect)(() => {
|
|
11097
11426
|
if (!open || !menuRef.current || !ref.current) return;
|
|
11098
11427
|
const menu = menuRef.current;
|
|
11099
11428
|
const trigger2 = ref.current;
|
|
@@ -11122,22 +11451,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11122
11451
|
};
|
|
11123
11452
|
position();
|
|
11124
11453
|
}, [open]);
|
|
11125
|
-
return /* @__PURE__ */
|
|
11454
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11126
11455
|
"button",
|
|
11127
11456
|
{
|
|
11128
11457
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11129
11458
|
onClick: () => setOpen(!open)
|
|
11130
11459
|
},
|
|
11131
11460
|
trigger.label,
|
|
11132
|
-
/* @__PURE__ */
|
|
11461
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11133
11462
|
)), open && (0, import_react_dom14.createPortal)(
|
|
11134
|
-
/* @__PURE__ */
|
|
11463
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react58.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11135
11464
|
document.body
|
|
11136
11465
|
));
|
|
11137
11466
|
};
|
|
11138
11467
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
11139
|
-
const [activeTab, setActiveTab] = (0,
|
|
11140
|
-
const [url, setUrl] = (0,
|
|
11468
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("link");
|
|
11469
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11141
11470
|
const extractIframeSrc = (html) => {
|
|
11142
11471
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
11143
11472
|
return match ? match[1] : null;
|
|
@@ -11169,14 +11498,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11169
11498
|
}
|
|
11170
11499
|
onClose();
|
|
11171
11500
|
};
|
|
11172
|
-
return /* @__PURE__ */
|
|
11501
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11173
11502
|
"button",
|
|
11174
11503
|
{
|
|
11175
11504
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11176
11505
|
onClick: () => setActiveTab("link")
|
|
11177
11506
|
},
|
|
11178
11507
|
"\u{1F517} Link"
|
|
11179
|
-
), /* @__PURE__ */
|
|
11508
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11180
11509
|
"button",
|
|
11181
11510
|
{
|
|
11182
11511
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11184,7 +11513,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11184
11513
|
},
|
|
11185
11514
|
"</>",
|
|
11186
11515
|
" Code"
|
|
11187
|
-
)), /* @__PURE__ */
|
|
11516
|
+
)), /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react58.default.createElement(
|
|
11188
11517
|
"input",
|
|
11189
11518
|
{
|
|
11190
11519
|
type: "text",
|
|
@@ -11195,7 +11524,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11195
11524
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11196
11525
|
autoFocus: true
|
|
11197
11526
|
}
|
|
11198
|
-
) : /* @__PURE__ */
|
|
11527
|
+
) : /* @__PURE__ */ import_react58.default.createElement(
|
|
11199
11528
|
"textarea",
|
|
11200
11529
|
{
|
|
11201
11530
|
className: "insert-panel-textarea",
|
|
@@ -11204,13 +11533,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11204
11533
|
onChange: (e) => setUrl(e.target.value),
|
|
11205
11534
|
rows: 3
|
|
11206
11535
|
}
|
|
11207
|
-
), /* @__PURE__ */
|
|
11536
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11208
11537
|
};
|
|
11209
11538
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11210
|
-
const [activeTab, setActiveTab] = (0,
|
|
11211
|
-
const [url, setUrl] = (0,
|
|
11212
|
-
const [isDragging, setIsDragging] = (0,
|
|
11213
|
-
const fileInputRef = (0,
|
|
11539
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("upload");
|
|
11540
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11541
|
+
const [isDragging, setIsDragging] = (0, import_react58.useState)(false);
|
|
11542
|
+
const fileInputRef = (0, import_react58.useRef)(null);
|
|
11214
11543
|
const getBase64 = (file) => {
|
|
11215
11544
|
return new Promise((resolve, reject) => {
|
|
11216
11545
|
const reader = new FileReader();
|
|
@@ -11248,21 +11577,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11248
11577
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11249
11578
|
onClose();
|
|
11250
11579
|
};
|
|
11251
|
-
return /* @__PURE__ */
|
|
11580
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11252
11581
|
"button",
|
|
11253
11582
|
{
|
|
11254
11583
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11255
11584
|
onClick: () => setActiveTab("upload")
|
|
11256
11585
|
},
|
|
11257
11586
|
"\u2B06 Upload"
|
|
11258
|
-
), /* @__PURE__ */
|
|
11587
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11259
11588
|
"button",
|
|
11260
11589
|
{
|
|
11261
11590
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11262
11591
|
onClick: () => setActiveTab("url")
|
|
11263
11592
|
},
|
|
11264
11593
|
"\u{1F517} URL"
|
|
11265
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11594
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11266
11595
|
"div",
|
|
11267
11596
|
{
|
|
11268
11597
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11274,9 +11603,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11274
11603
|
onDrop: handleDrop,
|
|
11275
11604
|
onClick: () => fileInputRef.current?.click()
|
|
11276
11605
|
},
|
|
11277
|
-
/* @__PURE__ */
|
|
11278
|
-
/* @__PURE__ */
|
|
11279
|
-
), /* @__PURE__ */
|
|
11606
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11607
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11608
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11280
11609
|
"input",
|
|
11281
11610
|
{
|
|
11282
11611
|
ref: fileInputRef,
|
|
@@ -11285,7 +11614,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11285
11614
|
style: { display: "none" },
|
|
11286
11615
|
onChange: handleFileSelect
|
|
11287
11616
|
}
|
|
11288
|
-
)) : /* @__PURE__ */
|
|
11617
|
+
)) : /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11289
11618
|
"input",
|
|
11290
11619
|
{
|
|
11291
11620
|
type: "text",
|
|
@@ -11296,18 +11625,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11296
11625
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11297
11626
|
autoFocus: true
|
|
11298
11627
|
}
|
|
11299
|
-
), /* @__PURE__ */
|
|
11628
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11300
11629
|
};
|
|
11301
11630
|
var MAX_GRID = 10;
|
|
11302
11631
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
11303
|
-
const [hoverRow, setHoverRow] = (0,
|
|
11304
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11632
|
+
const [hoverRow, setHoverRow] = (0, import_react58.useState)(0);
|
|
11633
|
+
const [hoverCol, setHoverCol] = (0, import_react58.useState)(0);
|
|
11305
11634
|
const handleInsert = () => {
|
|
11306
11635
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
11307
11636
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11308
11637
|
onClose();
|
|
11309
11638
|
};
|
|
11310
|
-
return /* @__PURE__ */
|
|
11639
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11311
11640
|
"div",
|
|
11312
11641
|
{
|
|
11313
11642
|
className: "table-grid",
|
|
@@ -11316,7 +11645,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11316
11645
|
setHoverCol(0);
|
|
11317
11646
|
}
|
|
11318
11647
|
},
|
|
11319
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11648
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react58.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11320
11649
|
"div",
|
|
11321
11650
|
{
|
|
11322
11651
|
key: c,
|
|
@@ -11328,7 +11657,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11328
11657
|
onClick: handleInsert
|
|
11329
11658
|
}
|
|
11330
11659
|
))))
|
|
11331
|
-
), /* @__PURE__ */
|
|
11660
|
+
), /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react58.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11332
11661
|
"button",
|
|
11333
11662
|
{
|
|
11334
11663
|
className: "table-grid-submit",
|
|
@@ -11339,9 +11668,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11339
11668
|
)));
|
|
11340
11669
|
};
|
|
11341
11670
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
11342
|
-
const [tab, setTab] = (0,
|
|
11343
|
-
const [activeBg, setActiveBg] = (0,
|
|
11344
|
-
const [activeText, setActiveText] = (0,
|
|
11671
|
+
const [tab, setTab] = (0, import_react58.useState)("background");
|
|
11672
|
+
const [activeBg, setActiveBg] = (0, import_react58.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11673
|
+
const [activeText, setActiveText] = (0, import_react58.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
11345
11674
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
11346
11675
|
const applyColor = (color) => {
|
|
11347
11676
|
if (tab === "background") {
|
|
@@ -11362,51 +11691,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11362
11691
|
}
|
|
11363
11692
|
onClose();
|
|
11364
11693
|
};
|
|
11365
|
-
return /* @__PURE__ */
|
|
11694
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11366
11695
|
"button",
|
|
11367
11696
|
{
|
|
11368
11697
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11369
11698
|
onClick: () => setTab("background")
|
|
11370
11699
|
},
|
|
11371
11700
|
"Background"
|
|
11372
|
-
), /* @__PURE__ */
|
|
11701
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11373
11702
|
"button",
|
|
11374
11703
|
{
|
|
11375
11704
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11376
11705
|
onClick: () => setTab("text")
|
|
11377
11706
|
},
|
|
11378
11707
|
"Text"
|
|
11379
|
-
)), /* @__PURE__ */
|
|
11708
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react58.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11380
11709
|
"button",
|
|
11381
11710
|
{
|
|
11382
11711
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11383
11712
|
style: { background: color },
|
|
11384
11713
|
onClick: () => applyColor(color)
|
|
11385
11714
|
}
|
|
11386
|
-
)))), /* @__PURE__ */
|
|
11715
|
+
)))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11387
11716
|
};
|
|
11388
11717
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11389
|
-
const [, setEditorState] = (0,
|
|
11390
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
11391
|
-
const ttsRef = (0,
|
|
11392
|
-
const sttRef = (0,
|
|
11718
|
+
const [, setEditorState] = (0, import_react58.useState)(0);
|
|
11719
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react58.useState)(false);
|
|
11720
|
+
const ttsRef = (0, import_react58.useRef)(null);
|
|
11721
|
+
const sttRef = (0, import_react58.useRef)(null);
|
|
11393
11722
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
11394
|
-
(0,
|
|
11723
|
+
(0, import_react58.useEffect)(() => {
|
|
11395
11724
|
if (!editor) return;
|
|
11396
11725
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
11397
11726
|
editor.on("transaction", onTransaction);
|
|
11398
11727
|
return () => editor.off("transaction", onTransaction);
|
|
11399
11728
|
}, [editor]);
|
|
11400
|
-
const insertSpecialChar = (0,
|
|
11729
|
+
const insertSpecialChar = (0, import_react58.useCallback)((char) => {
|
|
11401
11730
|
if (!editor) return;
|
|
11402
11731
|
editor.chain().focus().insertContent(char).run();
|
|
11403
11732
|
}, [editor]);
|
|
11404
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
11405
|
-
const [translateSource, setTranslateSource] = (0,
|
|
11406
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
11407
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
11408
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
11409
|
-
const handleCopy = (0,
|
|
11733
|
+
const [copySuccess, setCopySuccess] = (0, import_react58.useState)(false);
|
|
11734
|
+
const [translateSource, setTranslateSource] = (0, import_react58.useState)("en");
|
|
11735
|
+
const [translateTarget, setTranslateTarget] = (0, import_react58.useState)("hi");
|
|
11736
|
+
const [translateStatus, setTranslateStatus] = (0, import_react58.useState)("");
|
|
11737
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react58.useState)(false);
|
|
11738
|
+
const handleCopy = (0, import_react58.useCallback)(async () => {
|
|
11410
11739
|
if (!editor) return;
|
|
11411
11740
|
const { from, to, empty } = editor.state.selection;
|
|
11412
11741
|
if (empty) return;
|
|
@@ -11421,7 +11750,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11421
11750
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11422
11751
|
}
|
|
11423
11752
|
}, [editor]);
|
|
11424
|
-
const handlePaste = (0,
|
|
11753
|
+
const handlePaste = (0, import_react58.useCallback)(async () => {
|
|
11425
11754
|
if (!editor) return;
|
|
11426
11755
|
try {
|
|
11427
11756
|
const text = await navigator.clipboard.readText();
|
|
@@ -11430,7 +11759,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11430
11759
|
document.execCommand("paste");
|
|
11431
11760
|
}
|
|
11432
11761
|
}, [editor]);
|
|
11433
|
-
const handleQuickTranslate = (0,
|
|
11762
|
+
const handleQuickTranslate = (0, import_react58.useCallback)(async () => {
|
|
11434
11763
|
if (!editor) return;
|
|
11435
11764
|
const { from, to, empty } = editor.state.selection;
|
|
11436
11765
|
if (empty) {
|
|
@@ -11464,32 +11793,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11464
11793
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11465
11794
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11466
11795
|
if (!editor) return null;
|
|
11467
|
-
return /* @__PURE__ */
|
|
11796
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11468
11797
|
"button",
|
|
11469
11798
|
{
|
|
11470
11799
|
className: "toolbar-btn",
|
|
11471
11800
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11472
11801
|
disabled: !editor.can().undo()
|
|
11473
11802
|
},
|
|
11474
|
-
/* @__PURE__ */
|
|
11475
|
-
)), show("redo") && /* @__PURE__ */
|
|
11803
|
+
/* @__PURE__ */ import_react58.default.createElement(IconUndo, null)
|
|
11804
|
+
)), show("redo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11476
11805
|
"button",
|
|
11477
11806
|
{
|
|
11478
11807
|
className: "toolbar-btn",
|
|
11479
11808
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11480
11809
|
disabled: !editor.can().redo()
|
|
11481
11810
|
},
|
|
11482
|
-
/* @__PURE__ */
|
|
11483
|
-
))), show("ai") && /* @__PURE__ */
|
|
11811
|
+
/* @__PURE__ */ import_react58.default.createElement(IconRedo, null)
|
|
11812
|
+
))), show("ai") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react58.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11484
11813
|
Dropdown,
|
|
11485
11814
|
{
|
|
11486
11815
|
trigger: {
|
|
11487
|
-
label: /* @__PURE__ */
|
|
11816
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconHeading, null),
|
|
11488
11817
|
title: "Block type",
|
|
11489
11818
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11490
11819
|
}
|
|
11491
11820
|
},
|
|
11492
|
-
/* @__PURE__ */
|
|
11821
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11493
11822
|
"button",
|
|
11494
11823
|
{
|
|
11495
11824
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11497,7 +11826,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11497
11826
|
},
|
|
11498
11827
|
"\xB6 Paragraph"
|
|
11499
11828
|
),
|
|
11500
|
-
/* @__PURE__ */
|
|
11829
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11501
11830
|
"button",
|
|
11502
11831
|
{
|
|
11503
11832
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11505,7 +11834,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11505
11834
|
},
|
|
11506
11835
|
"Heading 1"
|
|
11507
11836
|
),
|
|
11508
|
-
/* @__PURE__ */
|
|
11837
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11509
11838
|
"button",
|
|
11510
11839
|
{
|
|
11511
11840
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11513,7 +11842,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11513
11842
|
},
|
|
11514
11843
|
"Heading 2"
|
|
11515
11844
|
),
|
|
11516
|
-
/* @__PURE__ */
|
|
11845
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11517
11846
|
"button",
|
|
11518
11847
|
{
|
|
11519
11848
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11521,7 +11850,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11521
11850
|
},
|
|
11522
11851
|
"Heading 3"
|
|
11523
11852
|
),
|
|
11524
|
-
/* @__PURE__ */
|
|
11853
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11525
11854
|
"button",
|
|
11526
11855
|
{
|
|
11527
11856
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11529,7 +11858,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11529
11858
|
},
|
|
11530
11859
|
"Heading 4"
|
|
11531
11860
|
),
|
|
11532
|
-
/* @__PURE__ */
|
|
11861
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11533
11862
|
"button",
|
|
11534
11863
|
{
|
|
11535
11864
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11537,7 +11866,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11537
11866
|
},
|
|
11538
11867
|
"\u275E Blockquote"
|
|
11539
11868
|
),
|
|
11540
|
-
/* @__PURE__ */
|
|
11869
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11541
11870
|
"button",
|
|
11542
11871
|
{
|
|
11543
11872
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11546,19 +11875,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11546
11875
|
"{ }",
|
|
11547
11876
|
" Code Block"
|
|
11548
11877
|
),
|
|
11549
|
-
/* @__PURE__ */
|
|
11550
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11878
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11879
|
+
), show("fontsize") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11551
11880
|
Dropdown,
|
|
11552
11881
|
{
|
|
11553
11882
|
trigger: {
|
|
11554
|
-
label: /* @__PURE__ */
|
|
11883
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFontSize, null),
|
|
11555
11884
|
title: "Font size"
|
|
11556
11885
|
}
|
|
11557
11886
|
},
|
|
11558
11887
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11559
11888
|
const sizeStr = `${size}px`;
|
|
11560
11889
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11561
|
-
return /* @__PURE__ */
|
|
11890
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11562
11891
|
"button",
|
|
11563
11892
|
{
|
|
11564
11893
|
key: size,
|
|
@@ -11574,17 +11903,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11574
11903
|
sizeStr
|
|
11575
11904
|
);
|
|
11576
11905
|
})
|
|
11577
|
-
), show("font") && /* @__PURE__ */
|
|
11906
|
+
), show("font") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11578
11907
|
Dropdown,
|
|
11579
11908
|
{
|
|
11580
11909
|
trigger: {
|
|
11581
|
-
label: /* @__PURE__ */
|
|
11910
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFont, null),
|
|
11582
11911
|
title: "Font family"
|
|
11583
11912
|
}
|
|
11584
11913
|
},
|
|
11585
11914
|
FONT_FAMILIES.map((font) => {
|
|
11586
11915
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11587
|
-
return /* @__PURE__ */
|
|
11916
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11588
11917
|
"button",
|
|
11589
11918
|
{
|
|
11590
11919
|
key: font,
|
|
@@ -11601,40 +11930,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11601
11930
|
font
|
|
11602
11931
|
);
|
|
11603
11932
|
})
|
|
11604
|
-
), show("color") && /* @__PURE__ */
|
|
11933
|
+
), show("color") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11605
11934
|
Dropdown,
|
|
11606
11935
|
{
|
|
11607
11936
|
trigger: {
|
|
11608
|
-
label: /* @__PURE__ */
|
|
11937
|
+
label: /* @__PURE__ */ import_react58.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react58.default.createElement(IconColor, null)),
|
|
11609
11938
|
title: "Colors"
|
|
11610
11939
|
},
|
|
11611
11940
|
keepOpen: true
|
|
11612
11941
|
},
|
|
11613
|
-
(close) => /* @__PURE__ */
|
|
11614
|
-
), show("bold") && /* @__PURE__ */
|
|
11942
|
+
(close) => /* @__PURE__ */ import_react58.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11943
|
+
), show("bold") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11615
11944
|
"button",
|
|
11616
11945
|
{
|
|
11617
11946
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11618
11947
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11619
11948
|
},
|
|
11620
|
-
/* @__PURE__ */
|
|
11621
|
-
)), show("italic") && /* @__PURE__ */
|
|
11949
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBold, null)
|
|
11950
|
+
)), show("italic") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11622
11951
|
"button",
|
|
11623
11952
|
{
|
|
11624
11953
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11625
11954
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11626
11955
|
},
|
|
11627
|
-
/* @__PURE__ */
|
|
11628
|
-
)), show("strike") && /* @__PURE__ */
|
|
11956
|
+
/* @__PURE__ */ import_react58.default.createElement(IconItalic, null)
|
|
11957
|
+
)), show("strike") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11629
11958
|
Dropdown,
|
|
11630
11959
|
{
|
|
11631
|
-
trigger: { label: /* @__PURE__ */
|
|
11960
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11632
11961
|
},
|
|
11633
|
-
/* @__PURE__ */
|
|
11634
|
-
/* @__PURE__ */
|
|
11635
|
-
/* @__PURE__ */
|
|
11636
|
-
/* @__PURE__ */
|
|
11637
|
-
/* @__PURE__ */
|
|
11962
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react58.default.createElement("s", null, "Strikethrough")),
|
|
11963
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react58.default.createElement("u", null, "Underline")),
|
|
11964
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sup", null, "2"), " Superscript"),
|
|
11965
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sub", null, "2"), " Subscript"),
|
|
11966
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11638
11967
|
e.preventDefault();
|
|
11639
11968
|
const chain = editor.chain().focus();
|
|
11640
11969
|
if (!editor.state.selection.empty) {
|
|
@@ -11650,25 +11979,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11650
11979
|
c.run();
|
|
11651
11980
|
}
|
|
11652
11981
|
} }, "\u2715 Clear formatting")
|
|
11653
|
-
), show("link") && /* @__PURE__ */
|
|
11982
|
+
), show("link") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11654
11983
|
"button",
|
|
11655
11984
|
{
|
|
11656
11985
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11657
11986
|
onClick: setLink
|
|
11658
11987
|
},
|
|
11659
|
-
/* @__PURE__ */
|
|
11660
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11988
|
+
/* @__PURE__ */ import_react58.default.createElement(IconLink, null)
|
|
11989
|
+
)), show("lineheight") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11661
11990
|
Dropdown,
|
|
11662
11991
|
{
|
|
11663
11992
|
trigger: {
|
|
11664
|
-
label: /* @__PURE__ */
|
|
11993
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconLineHeight, null),
|
|
11665
11994
|
title: "Line height"
|
|
11666
11995
|
}
|
|
11667
11996
|
},
|
|
11668
11997
|
["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) => {
|
|
11669
11998
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11670
11999
|
const isActive = currentLH === lh;
|
|
11671
|
-
return /* @__PURE__ */
|
|
12000
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11672
12001
|
"button",
|
|
11673
12002
|
{
|
|
11674
12003
|
key: lh,
|
|
@@ -11684,19 +12013,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11684
12013
|
lh
|
|
11685
12014
|
);
|
|
11686
12015
|
})
|
|
11687
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
12016
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11688
12017
|
"button",
|
|
11689
12018
|
{
|
|
11690
12019
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11691
12020
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11692
12021
|
},
|
|
11693
|
-
/* @__PURE__ */
|
|
11694
|
-
)), /* @__PURE__ */
|
|
12022
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBulletList, null)
|
|
12023
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11695
12024
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11696
12025
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11697
12026
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11698
12027
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11699
|
-
].map((item) => /* @__PURE__ */
|
|
12028
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11700
12029
|
"button",
|
|
11701
12030
|
{
|
|
11702
12031
|
key: item.label,
|
|
@@ -11721,24 +12050,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11721
12050
|
}).run();
|
|
11722
12051
|
}
|
|
11723
12052
|
},
|
|
11724
|
-
/* @__PURE__ */
|
|
12053
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11725
12054
|
" ",
|
|
11726
12055
|
item.label
|
|
11727
|
-
)))), show("ol") && /* @__PURE__ */
|
|
12056
|
+
)))), show("ol") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11728
12057
|
"button",
|
|
11729
12058
|
{
|
|
11730
12059
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11731
12060
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11732
12061
|
},
|
|
11733
|
-
/* @__PURE__ */
|
|
11734
|
-
)), /* @__PURE__ */
|
|
12062
|
+
/* @__PURE__ */ import_react58.default.createElement(IconOrderedList, null)
|
|
12063
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11735
12064
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11736
12065
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11737
12066
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11738
12067
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11739
12068
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11740
12069
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11741
|
-
].map((item) => /* @__PURE__ */
|
|
12070
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11742
12071
|
"button",
|
|
11743
12072
|
{
|
|
11744
12073
|
key: item.label,
|
|
@@ -11763,24 +12092,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11763
12092
|
}).run();
|
|
11764
12093
|
}
|
|
11765
12094
|
},
|
|
11766
|
-
/* @__PURE__ */
|
|
12095
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11767
12096
|
" ",
|
|
11768
12097
|
item.label
|
|
11769
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12098
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11770
12099
|
Dropdown,
|
|
11771
12100
|
{
|
|
11772
12101
|
trigger: {
|
|
11773
|
-
label: /* @__PURE__ */
|
|
12102
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null),
|
|
11774
12103
|
title: "Align",
|
|
11775
12104
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11776
12105
|
}
|
|
11777
12106
|
},
|
|
11778
12107
|
[
|
|
11779
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11780
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11781
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11782
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11783
|
-
].map((item) => /* @__PURE__ */
|
|
12108
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null) },
|
|
12109
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignCenter, null) },
|
|
12110
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignRight, null) },
|
|
12111
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignJustify, null) }
|
|
12112
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11784
12113
|
"button",
|
|
11785
12114
|
{
|
|
11786
12115
|
key: item.value,
|
|
@@ -11791,7 +12120,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11791
12120
|
" ",
|
|
11792
12121
|
item.label
|
|
11793
12122
|
))
|
|
11794
|
-
), show("indent") && /* @__PURE__ */
|
|
12123
|
+
), show("indent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11795
12124
|
"button",
|
|
11796
12125
|
{
|
|
11797
12126
|
className: "toolbar-btn",
|
|
@@ -11810,8 +12139,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11810
12139
|
}).run();
|
|
11811
12140
|
}
|
|
11812
12141
|
},
|
|
11813
|
-
/* @__PURE__ */
|
|
11814
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12142
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentIncrease, null)
|
|
12143
|
+
)), show("outdent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11815
12144
|
"button",
|
|
11816
12145
|
{
|
|
11817
12146
|
className: "toolbar-btn",
|
|
@@ -11830,29 +12159,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11830
12159
|
}).run();
|
|
11831
12160
|
}
|
|
11832
12161
|
},
|
|
11833
|
-
/* @__PURE__ */
|
|
11834
|
-
))), show("table") && /* @__PURE__ */
|
|
12162
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentDecrease, null)
|
|
12163
|
+
))), show("table") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11835
12164
|
"button",
|
|
11836
12165
|
{
|
|
11837
12166
|
className: "toolbar-btn",
|
|
11838
12167
|
onClick: () => document.execCommand("cut")
|
|
11839
12168
|
},
|
|
11840
|
-
/* @__PURE__ */
|
|
11841
|
-
)), show("copy") && /* @__PURE__ */
|
|
12169
|
+
/* @__PURE__ */ import_react58.default.createElement(IconCut, null)
|
|
12170
|
+
)), show("copy") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11842
12171
|
"button",
|
|
11843
12172
|
{
|
|
11844
12173
|
className: "toolbar-btn",
|
|
11845
12174
|
onClick: handleCopy
|
|
11846
12175
|
},
|
|
11847
|
-
copySuccess ? /* @__PURE__ */
|
|
11848
|
-
)), show("paste") && /* @__PURE__ */
|
|
12176
|
+
copySuccess ? /* @__PURE__ */ import_react58.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react58.default.createElement(IconCopy, null)
|
|
12177
|
+
)), show("paste") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11849
12178
|
"button",
|
|
11850
12179
|
{
|
|
11851
12180
|
className: "toolbar-btn",
|
|
11852
12181
|
onClick: handlePaste
|
|
11853
12182
|
},
|
|
11854
|
-
/* @__PURE__ */
|
|
11855
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12183
|
+
/* @__PURE__ */ import_react58.default.createElement(IconPaste, null)
|
|
12184
|
+
)), show("specialchars") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11856
12185
|
"button",
|
|
11857
12186
|
{
|
|
11858
12187
|
key: char,
|
|
@@ -11860,12 +12189,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11860
12189
|
onClick: () => insertSpecialChar(char)
|
|
11861
12190
|
},
|
|
11862
12191
|
char
|
|
11863
|
-
)))), show("code") && /* @__PURE__ */
|
|
12192
|
+
)))), show("code") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11864
12193
|
Dropdown,
|
|
11865
12194
|
{
|
|
11866
|
-
trigger: { label: /* @__PURE__ */
|
|
12195
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11867
12196
|
},
|
|
11868
|
-
/* @__PURE__ */
|
|
12197
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11869
12198
|
if (editor.isActive("codeBlock")) {
|
|
11870
12199
|
const text = (() => {
|
|
11871
12200
|
const { $from } = editor.state.selection;
|
|
@@ -11883,22 +12212,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11883
12212
|
editor.chain().focus().toggleCode().run();
|
|
11884
12213
|
}
|
|
11885
12214
|
} }, "</>", " Inline Code"),
|
|
11886
|
-
/* @__PURE__ */
|
|
11887
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12215
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12216
|
+
), show("fullscreen") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11888
12217
|
"button",
|
|
11889
12218
|
{
|
|
11890
12219
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11891
12220
|
onClick: onToggleFullscreen
|
|
11892
12221
|
},
|
|
11893
|
-
/* @__PURE__ */
|
|
11894
|
-
)), show("tts") && /* @__PURE__ */
|
|
12222
|
+
/* @__PURE__ */ import_react58.default.createElement(IconFullscreen, null)
|
|
12223
|
+
)), show("tts") && /* @__PURE__ */ import_react58.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react58.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11895
12224
|
"button",
|
|
11896
12225
|
{
|
|
11897
12226
|
className: "toolbar-btn",
|
|
11898
12227
|
onClick: handleQuickTranslate
|
|
11899
12228
|
},
|
|
11900
|
-
/* @__PURE__ */
|
|
11901
|
-
)), /* @__PURE__ */
|
|
12229
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTranslate, null)
|
|
12230
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11902
12231
|
"button",
|
|
11903
12232
|
{
|
|
11904
12233
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11941,11 +12270,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11941
12270
|
}
|
|
11942
12271
|
}
|
|
11943
12272
|
},
|
|
11944
|
-
/* @__PURE__ */
|
|
11945
|
-
)), /* @__PURE__ */
|
|
12273
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTaskList, null)
|
|
12274
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11946
12275
|
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" };
|
|
11947
12276
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11948
|
-
return /* @__PURE__ */
|
|
12277
|
+
return /* @__PURE__ */ import_react58.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11949
12278
|
const { state } = editor;
|
|
11950
12279
|
const { schema } = state;
|
|
11951
12280
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11978,8 +12307,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11978
12307
|
}
|
|
11979
12308
|
return true;
|
|
11980
12309
|
}).run();
|
|
11981
|
-
} }, /* @__PURE__ */
|
|
11982
|
-
})))), onClose && /* @__PURE__ */
|
|
12310
|
+
} }, /* @__PURE__ */ import_react58.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react58.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12311
|
+
})))), onClose && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11983
12312
|
"button",
|
|
11984
12313
|
{
|
|
11985
12314
|
className: "toolbar-btn btn-cross",
|
|
@@ -11995,8 +12324,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11995
12324
|
onClose();
|
|
11996
12325
|
}
|
|
11997
12326
|
},
|
|
11998
|
-
/* @__PURE__ */
|
|
11999
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12327
|
+
/* @__PURE__ */ import_react58.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12328
|
+
))), showTranslateModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
12000
12329
|
TranslateModal_default,
|
|
12001
12330
|
{
|
|
12002
12331
|
editor,
|
|
@@ -12014,7 +12343,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12014
12343
|
var Toolbar_default = Toolbar;
|
|
12015
12344
|
|
|
12016
12345
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12017
|
-
var
|
|
12346
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12018
12347
|
var import_react_dom15 = require("react-dom");
|
|
12019
12348
|
var ALIGNMENTS = [
|
|
12020
12349
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12022,18 +12351,18 @@ var ALIGNMENTS = [
|
|
|
12022
12351
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
12023
12352
|
];
|
|
12024
12353
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
12025
|
-
const [activeTab, setActiveTab] = (0,
|
|
12026
|
-
const [src, setSrc] = (0,
|
|
12027
|
-
const [title, setTitle] = (0,
|
|
12028
|
-
const [alt, setAlt] = (0,
|
|
12029
|
-
const [link, setLink] = (0,
|
|
12030
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
12031
|
-
const [width, setWidth] = (0,
|
|
12032
|
-
const [height, setHeight] = (0,
|
|
12033
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12034
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
12035
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
12036
|
-
(0,
|
|
12354
|
+
const [activeTab, setActiveTab] = (0, import_react59.useState)("image");
|
|
12355
|
+
const [src, setSrc] = (0, import_react59.useState)(node?.attrs?.src || "");
|
|
12356
|
+
const [title, setTitle] = (0, import_react59.useState)(node?.attrs?.title || "");
|
|
12357
|
+
const [alt, setAlt] = (0, import_react59.useState)(node?.attrs?.alt || "");
|
|
12358
|
+
const [link, setLink] = (0, import_react59.useState)("");
|
|
12359
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
|
|
12360
|
+
const [width, setWidth] = (0, import_react59.useState)("");
|
|
12361
|
+
const [height, setHeight] = (0, import_react59.useState)("");
|
|
12362
|
+
const [lockRatio, setLockRatio] = (0, import_react59.useState)(true);
|
|
12363
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react59.useState)(0);
|
|
12364
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react59.useState)(0);
|
|
12365
|
+
(0, import_react59.useEffect)(() => {
|
|
12037
12366
|
if (src) {
|
|
12038
12367
|
const img = new window.Image();
|
|
12039
12368
|
img.onload = () => {
|
|
@@ -12072,7 +12401,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12072
12401
|
editor.chain().focus().deleteSelection().run();
|
|
12073
12402
|
onClose();
|
|
12074
12403
|
};
|
|
12075
|
-
return /* @__PURE__ */
|
|
12404
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react59.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react59.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12076
12405
|
"input",
|
|
12077
12406
|
{
|
|
12078
12407
|
type: "number",
|
|
@@ -12080,14 +12409,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12080
12409
|
value: width,
|
|
12081
12410
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12082
12411
|
}
|
|
12083
|
-
), /* @__PURE__ */
|
|
12412
|
+
), /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12084
12413
|
"button",
|
|
12085
12414
|
{
|
|
12086
12415
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12087
12416
|
onClick: () => setLockRatio(!lockRatio)
|
|
12088
12417
|
},
|
|
12089
12418
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12090
|
-
)), /* @__PURE__ */
|
|
12419
|
+
)), /* @__PURE__ */ import_react59.default.createElement(
|
|
12091
12420
|
"input",
|
|
12092
12421
|
{
|
|
12093
12422
|
type: "number",
|
|
@@ -12095,21 +12424,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12095
12424
|
value: height,
|
|
12096
12425
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12097
12426
|
}
|
|
12098
|
-
))), /* @__PURE__ */
|
|
12427
|
+
))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12099
12428
|
"button",
|
|
12100
12429
|
{
|
|
12101
12430
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12102
12431
|
onClick: () => setActiveTab("image")
|
|
12103
12432
|
},
|
|
12104
12433
|
"Image"
|
|
12105
|
-
), /* @__PURE__ */
|
|
12434
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
12106
12435
|
"button",
|
|
12107
12436
|
{
|
|
12108
12437
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12109
12438
|
onClick: () => setActiveTab("advanced")
|
|
12110
12439
|
},
|
|
12111
12440
|
"Advanced"
|
|
12112
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12441
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12113
12442
|
"input",
|
|
12114
12443
|
{
|
|
12115
12444
|
type: "text",
|
|
@@ -12117,7 +12446,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12117
12446
|
value: src,
|
|
12118
12447
|
onChange: (e) => setSrc(e.target.value)
|
|
12119
12448
|
}
|
|
12120
|
-
), /* @__PURE__ */
|
|
12449
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12121
12450
|
"input",
|
|
12122
12451
|
{
|
|
12123
12452
|
type: "text",
|
|
@@ -12125,7 +12454,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12125
12454
|
value: title,
|
|
12126
12455
|
onChange: (e) => setTitle(e.target.value)
|
|
12127
12456
|
}
|
|
12128
|
-
), /* @__PURE__ */
|
|
12457
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12129
12458
|
"input",
|
|
12130
12459
|
{
|
|
12131
12460
|
type: "text",
|
|
@@ -12133,7 +12462,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12133
12462
|
value: alt,
|
|
12134
12463
|
onChange: (e) => setAlt(e.target.value)
|
|
12135
12464
|
}
|
|
12136
|
-
), /* @__PURE__ */
|
|
12465
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12137
12466
|
"input",
|
|
12138
12467
|
{
|
|
12139
12468
|
type: "text",
|
|
@@ -12141,23 +12470,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12141
12470
|
value: link,
|
|
12142
12471
|
onChange: (e) => setLink(e.target.value)
|
|
12143
12472
|
}
|
|
12144
|
-
), /* @__PURE__ */
|
|
12473
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12145
12474
|
"input",
|
|
12146
12475
|
{
|
|
12147
12476
|
type: "checkbox",
|
|
12148
12477
|
checked: openInNewTab,
|
|
12149
12478
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12150
12479
|
}
|
|
12151
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12480
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12152
12481
|
};
|
|
12153
12482
|
var ImageToolbar = ({ editor }) => {
|
|
12154
|
-
const [showModal, setShowModal] = (0,
|
|
12155
|
-
const [showAlign, setShowAlign] = (0,
|
|
12156
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
12157
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12158
|
-
const [pos, setPos] = (0,
|
|
12159
|
-
const toolbarRef = (0,
|
|
12160
|
-
(0,
|
|
12483
|
+
const [showModal, setShowModal] = (0, import_react59.useState)(false);
|
|
12484
|
+
const [showAlign, setShowAlign] = (0, import_react59.useState)(false);
|
|
12485
|
+
const [showVAlign, setShowVAlign] = (0, import_react59.useState)(false);
|
|
12486
|
+
const [copyStatus, setCopyStatus] = (0, import_react59.useState)("");
|
|
12487
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12488
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12489
|
+
(0, import_react59.useEffect)(() => {
|
|
12161
12490
|
if (!editor) return;
|
|
12162
12491
|
const update = () => {
|
|
12163
12492
|
const { selection } = editor.state;
|
|
@@ -12187,7 +12516,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12187
12516
|
const node = editor?.state.selection.node;
|
|
12188
12517
|
const isImage = node && node.type.name === "image";
|
|
12189
12518
|
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12190
|
-
/* @__PURE__ */
|
|
12519
|
+
/* @__PURE__ */ import_react59.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12191
12520
|
document.body
|
|
12192
12521
|
) : null;
|
|
12193
12522
|
const handleDelete = () => {
|
|
@@ -12264,7 +12593,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12264
12593
|
setShowVAlign(false);
|
|
12265
12594
|
};
|
|
12266
12595
|
return (0, import_react_dom15.createPortal)(
|
|
12267
|
-
/* @__PURE__ */
|
|
12596
|
+
/* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
|
|
12268
12597
|
"div",
|
|
12269
12598
|
{
|
|
12270
12599
|
className: "image-toolbar",
|
|
@@ -12272,14 +12601,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12272
12601
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12273
12602
|
onMouseDown: (e) => e.preventDefault()
|
|
12274
12603
|
},
|
|
12275
|
-
/* @__PURE__ */
|
|
12276
|
-
/* @__PURE__ */
|
|
12277
|
-
/* @__PURE__ */
|
|
12278
|
-
/* @__PURE__ */
|
|
12604
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12605
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12606
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12607
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12279
12608
|
setShowAlign(!showAlign);
|
|
12280
12609
|
setShowVAlign(false);
|
|
12281
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12282
|
-
), showModal && /* @__PURE__ */
|
|
12610
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react59.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12611
|
+
), showModal && /* @__PURE__ */ import_react59.default.createElement(
|
|
12283
12612
|
ImagePropertiesModal,
|
|
12284
12613
|
{
|
|
12285
12614
|
editor,
|
|
@@ -12293,7 +12622,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12293
12622
|
var ImageToolbar_default = ImageToolbar;
|
|
12294
12623
|
|
|
12295
12624
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12296
|
-
var
|
|
12625
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
12297
12626
|
var import_react_dom16 = require("react-dom");
|
|
12298
12627
|
var ALIGNMENTS2 = [
|
|
12299
12628
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12302,10 +12631,10 @@ var ALIGNMENTS2 = [
|
|
|
12302
12631
|
];
|
|
12303
12632
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
12304
12633
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
12305
|
-
const [src, setSrc] = (0,
|
|
12306
|
-
const [width, setWidth] = (0,
|
|
12307
|
-
const [height, setHeight] = (0,
|
|
12308
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12634
|
+
const [src, setSrc] = (0, import_react60.useState)(node?.attrs?.src || "");
|
|
12635
|
+
const [width, setWidth] = (0, import_react60.useState)(String(node?.attrs?.width || 640));
|
|
12636
|
+
const [height, setHeight] = (0, import_react60.useState)(String(node?.attrs?.height || 360));
|
|
12637
|
+
const [lockRatio, setLockRatio] = (0, import_react60.useState)(true);
|
|
12309
12638
|
const handleWidthChange = (val) => {
|
|
12310
12639
|
setWidth(val);
|
|
12311
12640
|
if (lockRatio) {
|
|
@@ -12338,7 +12667,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12338
12667
|
onClose();
|
|
12339
12668
|
};
|
|
12340
12669
|
const isYoutube = nodeType === "youtube";
|
|
12341
|
-
return /* @__PURE__ */
|
|
12670
|
+
return /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react60.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react60.default.createElement(
|
|
12342
12671
|
"iframe",
|
|
12343
12672
|
{
|
|
12344
12673
|
src,
|
|
@@ -12346,14 +12675,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12346
12675
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12347
12676
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12348
12677
|
}
|
|
12349
|
-
) : /* @__PURE__ */
|
|
12678
|
+
) : /* @__PURE__ */ import_react60.default.createElement(
|
|
12350
12679
|
"video",
|
|
12351
12680
|
{
|
|
12352
12681
|
src,
|
|
12353
12682
|
controls: true,
|
|
12354
12683
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12355
12684
|
}
|
|
12356
|
-
)), /* @__PURE__ */
|
|
12685
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12357
12686
|
"input",
|
|
12358
12687
|
{
|
|
12359
12688
|
type: "number",
|
|
@@ -12361,14 +12690,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12361
12690
|
value: width,
|
|
12362
12691
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12363
12692
|
}
|
|
12364
|
-
), /* @__PURE__ */
|
|
12693
|
+
), /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12365
12694
|
"button",
|
|
12366
12695
|
{
|
|
12367
12696
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12368
12697
|
onClick: () => setLockRatio(!lockRatio)
|
|
12369
12698
|
},
|
|
12370
12699
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12371
|
-
)), /* @__PURE__ */
|
|
12700
|
+
)), /* @__PURE__ */ import_react60.default.createElement(
|
|
12372
12701
|
"input",
|
|
12373
12702
|
{
|
|
12374
12703
|
type: "number",
|
|
@@ -12376,7 +12705,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12376
12705
|
value: height,
|
|
12377
12706
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12378
12707
|
}
|
|
12379
|
-
))), /* @__PURE__ */
|
|
12708
|
+
))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12380
12709
|
"input",
|
|
12381
12710
|
{
|
|
12382
12711
|
type: "text",
|
|
@@ -12384,7 +12713,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12384
12713
|
value: src,
|
|
12385
12714
|
onChange: (e) => setSrc(e.target.value)
|
|
12386
12715
|
}
|
|
12387
|
-
), /* @__PURE__ */
|
|
12716
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12388
12717
|
"input",
|
|
12389
12718
|
{
|
|
12390
12719
|
type: "number",
|
|
@@ -12392,7 +12721,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12392
12721
|
value: width,
|
|
12393
12722
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12394
12723
|
}
|
|
12395
|
-
), /* @__PURE__ */
|
|
12724
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12396
12725
|
"input",
|
|
12397
12726
|
{
|
|
12398
12727
|
type: "number",
|
|
@@ -12400,16 +12729,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12400
12729
|
value: height,
|
|
12401
12730
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12402
12731
|
}
|
|
12403
|
-
)))), /* @__PURE__ */
|
|
12732
|
+
)))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12404
12733
|
};
|
|
12405
12734
|
var VideoToolbar = ({ editor }) => {
|
|
12406
|
-
const [showModal, setShowModal] = (0,
|
|
12407
|
-
const [showSize, setShowSize] = (0,
|
|
12408
|
-
const [showAlign, setShowAlign] = (0,
|
|
12409
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12410
|
-
const [pos, setPos] = (0,
|
|
12411
|
-
const toolbarRef = (0,
|
|
12412
|
-
(0,
|
|
12735
|
+
const [showModal, setShowModal] = (0, import_react60.useState)(false);
|
|
12736
|
+
const [showSize, setShowSize] = (0, import_react60.useState)(false);
|
|
12737
|
+
const [showAlign, setShowAlign] = (0, import_react60.useState)(false);
|
|
12738
|
+
const [copyStatus, setCopyStatus] = (0, import_react60.useState)("");
|
|
12739
|
+
const [pos, setPos] = (0, import_react60.useState)(null);
|
|
12740
|
+
const toolbarRef = (0, import_react60.useRef)(null);
|
|
12741
|
+
(0, import_react60.useEffect)(() => {
|
|
12413
12742
|
if (!editor) return;
|
|
12414
12743
|
const update = () => {
|
|
12415
12744
|
const { selection } = editor.state;
|
|
@@ -12440,7 +12769,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12440
12769
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12441
12770
|
const nodeType = node?.type.name;
|
|
12442
12771
|
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12443
|
-
/* @__PURE__ */
|
|
12772
|
+
/* @__PURE__ */ import_react60.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12444
12773
|
document.body
|
|
12445
12774
|
) : null;
|
|
12446
12775
|
const handleDelete = () => {
|
|
@@ -12487,7 +12816,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12487
12816
|
);
|
|
12488
12817
|
};
|
|
12489
12818
|
return (0, import_react_dom16.createPortal)(
|
|
12490
|
-
/* @__PURE__ */
|
|
12819
|
+
/* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
|
|
12491
12820
|
"div",
|
|
12492
12821
|
{
|
|
12493
12822
|
className: "image-toolbar",
|
|
@@ -12495,30 +12824,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12495
12824
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12496
12825
|
onMouseDown: (e) => e.preventDefault()
|
|
12497
12826
|
},
|
|
12498
|
-
/* @__PURE__ */
|
|
12499
|
-
/* @__PURE__ */
|
|
12500
|
-
/* @__PURE__ */
|
|
12501
|
-
/* @__PURE__ */
|
|
12827
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12828
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12829
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react60.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12830
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12502
12831
|
setShowSize(!showSize);
|
|
12503
12832
|
setShowAlign(false);
|
|
12504
|
-
} }, /* @__PURE__ */
|
|
12833
|
+
} }, /* @__PURE__ */ import_react60.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12505
12834
|
handleResize("small");
|
|
12506
12835
|
setShowSize(false);
|
|
12507
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12836
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12508
12837
|
handleResize("medium");
|
|
12509
12838
|
setShowSize(false);
|
|
12510
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12839
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12511
12840
|
handleResize("large");
|
|
12512
12841
|
setShowSize(false);
|
|
12513
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12842
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12514
12843
|
handleResize("full");
|
|
12515
12844
|
setShowSize(false);
|
|
12516
12845
|
} }, "Full (854x480)"))),
|
|
12517
|
-
/* @__PURE__ */
|
|
12846
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12518
12847
|
setShowAlign(!showAlign);
|
|
12519
12848
|
setShowSize(false);
|
|
12520
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12521
|
-
), showModal && /* @__PURE__ */
|
|
12849
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react60.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12850
|
+
), showModal && /* @__PURE__ */ import_react60.default.createElement(
|
|
12522
12851
|
VideoPropertiesModal,
|
|
12523
12852
|
{
|
|
12524
12853
|
editor,
|
|
@@ -12533,22 +12862,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12533
12862
|
var VideoToolbar_default = VideoToolbar;
|
|
12534
12863
|
|
|
12535
12864
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12536
|
-
var
|
|
12865
|
+
var import_react61 = __toESM(require("react"), 1);
|
|
12537
12866
|
var import_react_dom17 = require("react-dom");
|
|
12538
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12539
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12540
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12541
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12542
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12543
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12544
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12545
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12546
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12547
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12867
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12868
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12869
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12870
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12871
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12872
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12873
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.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_react61.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" }));
|
|
12874
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12875
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12876
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react61.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12548
12877
|
var TableToolbar = ({ editor }) => {
|
|
12549
|
-
const [pos, setPos] = (0,
|
|
12550
|
-
const toolbarRef = (0,
|
|
12551
|
-
(0,
|
|
12878
|
+
const [pos, setPos] = (0, import_react61.useState)(null);
|
|
12879
|
+
const toolbarRef = (0, import_react61.useRef)(null);
|
|
12880
|
+
(0, import_react61.useEffect)(() => {
|
|
12552
12881
|
if (!editor) return;
|
|
12553
12882
|
const update = () => {
|
|
12554
12883
|
if (!editor.isActive("table")) {
|
|
@@ -12592,7 +12921,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12592
12921
|
const canSplit = editor.can().splitCell();
|
|
12593
12922
|
const prevent = (e) => e.preventDefault();
|
|
12594
12923
|
return (0, import_react_dom17.createPortal)(
|
|
12595
|
-
/* @__PURE__ */
|
|
12924
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12596
12925
|
"div",
|
|
12597
12926
|
{
|
|
12598
12927
|
ref: toolbarRef,
|
|
@@ -12600,19 +12929,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12600
12929
|
style: { top: pos.top, left: pos.left },
|
|
12601
12930
|
onMouseDown: prevent
|
|
12602
12931
|
},
|
|
12603
|
-
/* @__PURE__ */
|
|
12604
|
-
/* @__PURE__ */
|
|
12605
|
-
/* @__PURE__ */
|
|
12606
|
-
/* @__PURE__ */
|
|
12607
|
-
/* @__PURE__ */
|
|
12608
|
-
/* @__PURE__ */
|
|
12609
|
-
/* @__PURE__ */
|
|
12610
|
-
/* @__PURE__ */
|
|
12611
|
-
/* @__PURE__ */
|
|
12612
|
-
/* @__PURE__ */
|
|
12613
|
-
/* @__PURE__ */
|
|
12614
|
-
/* @__PURE__ */
|
|
12615
|
-
/* @__PURE__ */
|
|
12932
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowBefore, null))),
|
|
12933
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowAfter, null))),
|
|
12934
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteRow, null))),
|
|
12935
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12936
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColBefore, null))),
|
|
12937
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColAfter, null))),
|
|
12938
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteCol, null))),
|
|
12939
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12940
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react61.default.createElement(IconMergeCells, null))),
|
|
12941
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react61.default.createElement(IconSplitCell, null))),
|
|
12942
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12943
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconToggleHeader, null))),
|
|
12944
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteTable, null)))
|
|
12616
12945
|
),
|
|
12617
12946
|
document.body
|
|
12618
12947
|
);
|
|
@@ -12778,7 +13107,7 @@ var RufousTextEditor = ({
|
|
|
12778
13107
|
sx
|
|
12779
13108
|
}) => {
|
|
12780
13109
|
const sxClass = useSx(sx);
|
|
12781
|
-
const toolbarButtons = (0,
|
|
13110
|
+
const toolbarButtons = (0, import_react62.useMemo)(() => {
|
|
12782
13111
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12783
13112
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12784
13113
|
if (hideButtons) {
|
|
@@ -12786,17 +13115,17 @@ var RufousTextEditor = ({
|
|
|
12786
13115
|
}
|
|
12787
13116
|
return visible;
|
|
12788
13117
|
}, [buttons, variant, hideButtons]);
|
|
12789
|
-
const mentionSuggestion = (0,
|
|
12790
|
-
const onChangeRef = (0,
|
|
12791
|
-
const onBlurRef = (0,
|
|
12792
|
-
(0,
|
|
13118
|
+
const mentionSuggestion = (0, import_react62.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
13119
|
+
const onChangeRef = (0, import_react62.useRef)(onChange);
|
|
13120
|
+
const onBlurRef = (0, import_react62.useRef)(onBlur);
|
|
13121
|
+
(0, import_react62.useEffect)(() => {
|
|
12793
13122
|
onChangeRef.current = onChange;
|
|
12794
13123
|
}, [onChange]);
|
|
12795
|
-
(0,
|
|
13124
|
+
(0, import_react62.useEffect)(() => {
|
|
12796
13125
|
onBlurRef.current = onBlur;
|
|
12797
13126
|
}, [onBlur]);
|
|
12798
13127
|
const isEditable = editable && !disabled;
|
|
12799
|
-
const editor = (0,
|
|
13128
|
+
const editor = (0, import_react63.useEditor)({
|
|
12800
13129
|
editable: isEditable,
|
|
12801
13130
|
extensions: [
|
|
12802
13131
|
import_starter_kit.default,
|
|
@@ -12893,8 +13222,8 @@ var RufousTextEditor = ({
|
|
|
12893
13222
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12894
13223
|
}
|
|
12895
13224
|
});
|
|
12896
|
-
const wrapperRef = (0,
|
|
12897
|
-
(0,
|
|
13225
|
+
const wrapperRef = (0, import_react62.useRef)(null);
|
|
13226
|
+
(0, import_react62.useEffect)(() => {
|
|
12898
13227
|
if (!editor) return;
|
|
12899
13228
|
let blurTimer = null;
|
|
12900
13229
|
const handler = ({ event }) => {
|
|
@@ -12912,15 +13241,15 @@ var RufousTextEditor = ({
|
|
|
12912
13241
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12913
13242
|
};
|
|
12914
13243
|
}, [editor]);
|
|
12915
|
-
const setLinkRef = (0,
|
|
12916
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
12917
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
12918
|
-
const [linkText, setLinkText] = (0,
|
|
12919
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
12920
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
12921
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
12922
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
12923
|
-
const setLink = (0,
|
|
13244
|
+
const setLinkRef = (0, import_react62.useRef)(null);
|
|
13245
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react62.useState)(false);
|
|
13246
|
+
const [linkUrl, setLinkUrl] = (0, import_react62.useState)("");
|
|
13247
|
+
const [linkText, setLinkText] = (0, import_react62.useState)("");
|
|
13248
|
+
const [linkClassName, setLinkClassName] = (0, import_react62.useState)("");
|
|
13249
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react62.useState)(true);
|
|
13250
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react62.useState)(true);
|
|
13251
|
+
const [linkSelection, setLinkSelection] = (0, import_react62.useState)(null);
|
|
13252
|
+
const setLink = (0, import_react62.useCallback)(() => {
|
|
12924
13253
|
if (!editor) return;
|
|
12925
13254
|
const attrs = editor.getAttributes("link");
|
|
12926
13255
|
const previousUrl = attrs.href || "";
|
|
@@ -12957,10 +13286,10 @@ var RufousTextEditor = ({
|
|
|
12957
13286
|
setLinkSelection({ from, to });
|
|
12958
13287
|
setLinkModalOpen(true);
|
|
12959
13288
|
}, [editor]);
|
|
12960
|
-
(0,
|
|
13289
|
+
(0, import_react62.useEffect)(() => {
|
|
12961
13290
|
setLinkRef.current = setLink;
|
|
12962
13291
|
}, [setLink]);
|
|
12963
|
-
(0,
|
|
13292
|
+
(0, import_react62.useEffect)(() => {
|
|
12964
13293
|
if (!editor?.view) return;
|
|
12965
13294
|
const handleKeyDown = (event) => {
|
|
12966
13295
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -12992,7 +13321,7 @@ var RufousTextEditor = ({
|
|
|
12992
13321
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12993
13322
|
};
|
|
12994
13323
|
}, [editor]);
|
|
12995
|
-
const handleLinkSubmit = (0,
|
|
13324
|
+
const handleLinkSubmit = (0, import_react62.useCallback)(() => {
|
|
12996
13325
|
if (!editor || !linkSelection) return;
|
|
12997
13326
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12998
13327
|
if (linkUrl === "") {
|
|
@@ -13028,7 +13357,7 @@ var RufousTextEditor = ({
|
|
|
13028
13357
|
setLinkClassName("");
|
|
13029
13358
|
setLinkSelection(null);
|
|
13030
13359
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13031
|
-
const handleLinkRemove = (0,
|
|
13360
|
+
const handleLinkRemove = (0, import_react62.useCallback)(() => {
|
|
13032
13361
|
if (!editor || !linkSelection) return;
|
|
13033
13362
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13034
13363
|
setLinkModalOpen(false);
|
|
@@ -13037,7 +13366,7 @@ var RufousTextEditor = ({
|
|
|
13037
13366
|
setLinkClassName("");
|
|
13038
13367
|
setLinkSelection(null);
|
|
13039
13368
|
}, [editor, linkSelection]);
|
|
13040
|
-
const handleLinkCancel = (0,
|
|
13369
|
+
const handleLinkCancel = (0, import_react62.useCallback)(() => {
|
|
13041
13370
|
setLinkModalOpen(false);
|
|
13042
13371
|
setLinkUrl("");
|
|
13043
13372
|
setLinkText("");
|
|
@@ -13045,21 +13374,21 @@ var RufousTextEditor = ({
|
|
|
13045
13374
|
setLinkSelection(null);
|
|
13046
13375
|
editor?.chain().focus().run();
|
|
13047
13376
|
}, [editor]);
|
|
13048
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
13049
|
-
const handleSave = (0,
|
|
13377
|
+
const [saveStatus, setSaveStatus] = (0, import_react62.useState)("");
|
|
13378
|
+
const handleSave = (0, import_react62.useCallback)(() => {
|
|
13050
13379
|
if (!editor || !onSaveProp) return;
|
|
13051
13380
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13052
13381
|
setSaveStatus("Saved!");
|
|
13053
13382
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13054
13383
|
}, [editor, onSaveProp]);
|
|
13055
|
-
const handleExport = (0,
|
|
13384
|
+
const handleExport = (0, import_react62.useCallback)(() => {
|
|
13056
13385
|
if (!editor || !onExportProp) return;
|
|
13057
13386
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13058
13387
|
}, [editor, onExportProp]);
|
|
13059
|
-
const providerValue = (0,
|
|
13060
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
13061
|
-
const toggleFullscreen = (0,
|
|
13062
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13388
|
+
const providerValue = (0, import_react62.useMemo)(() => ({ editor }), [editor]);
|
|
13389
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react62.useState)(false);
|
|
13390
|
+
const toggleFullscreen = (0, import_react62.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13391
|
+
const wrapperJsx = /* @__PURE__ */ import_react62.default.createElement(
|
|
13063
13392
|
"div",
|
|
13064
13393
|
{
|
|
13065
13394
|
ref: wrapperRef,
|
|
@@ -13070,7 +13399,7 @@ var RufousTextEditor = ({
|
|
|
13070
13399
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13071
13400
|
}
|
|
13072
13401
|
},
|
|
13073
|
-
/* @__PURE__ */
|
|
13402
|
+
/* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13074
13403
|
Toolbar_default,
|
|
13075
13404
|
{
|
|
13076
13405
|
editor,
|
|
@@ -13085,8 +13414,8 @@ var RufousTextEditor = ({
|
|
|
13085
13414
|
isFullscreen,
|
|
13086
13415
|
onToggleFullscreen: toggleFullscreen
|
|
13087
13416
|
}
|
|
13088
|
-
), /* @__PURE__ */
|
|
13089
|
-
|
|
13417
|
+
), /* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react62.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13418
|
+
import_react63.BubbleMenu,
|
|
13090
13419
|
{
|
|
13091
13420
|
editor,
|
|
13092
13421
|
className: "bubble-menu",
|
|
@@ -13103,31 +13432,31 @@ var RufousTextEditor = ({
|
|
|
13103
13432
|
}
|
|
13104
13433
|
}
|
|
13105
13434
|
},
|
|
13106
|
-
/* @__PURE__ */
|
|
13435
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13107
13436
|
"button",
|
|
13108
13437
|
{
|
|
13109
13438
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13110
13439
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13111
13440
|
},
|
|
13112
|
-
/* @__PURE__ */
|
|
13441
|
+
/* @__PURE__ */ import_react62.default.createElement("strong", null, "B")
|
|
13113
13442
|
),
|
|
13114
|
-
/* @__PURE__ */
|
|
13443
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13115
13444
|
"button",
|
|
13116
13445
|
{
|
|
13117
13446
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13118
13447
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13119
13448
|
},
|
|
13120
|
-
/* @__PURE__ */
|
|
13449
|
+
/* @__PURE__ */ import_react62.default.createElement("em", null, "I")
|
|
13121
13450
|
),
|
|
13122
|
-
/* @__PURE__ */
|
|
13451
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13123
13452
|
"button",
|
|
13124
13453
|
{
|
|
13125
13454
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13126
13455
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13127
13456
|
},
|
|
13128
|
-
/* @__PURE__ */
|
|
13457
|
+
/* @__PURE__ */ import_react62.default.createElement("s", null, "S")
|
|
13129
13458
|
),
|
|
13130
|
-
/* @__PURE__ */
|
|
13459
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13131
13460
|
"button",
|
|
13132
13461
|
{
|
|
13133
13462
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13135,7 +13464,7 @@ var RufousTextEditor = ({
|
|
|
13135
13464
|
},
|
|
13136
13465
|
"</>"
|
|
13137
13466
|
),
|
|
13138
|
-
/* @__PURE__ */
|
|
13467
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13139
13468
|
"button",
|
|
13140
13469
|
{
|
|
13141
13470
|
onClick: setLink,
|
|
@@ -13143,8 +13472,8 @@ var RufousTextEditor = ({
|
|
|
13143
13472
|
},
|
|
13144
13473
|
"\u{1F517}"
|
|
13145
13474
|
)
|
|
13146
|
-
), editor && /* @__PURE__ */
|
|
13147
|
-
|
|
13475
|
+
), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13476
|
+
import_react63.FloatingMenu,
|
|
13148
13477
|
{
|
|
13149
13478
|
editor,
|
|
13150
13479
|
className: "floating-menu",
|
|
@@ -13158,7 +13487,7 @@ var RufousTextEditor = ({
|
|
|
13158
13487
|
}
|
|
13159
13488
|
}
|
|
13160
13489
|
},
|
|
13161
|
-
/* @__PURE__ */
|
|
13490
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13162
13491
|
"button",
|
|
13163
13492
|
{
|
|
13164
13493
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13166,7 +13495,7 @@ var RufousTextEditor = ({
|
|
|
13166
13495
|
},
|
|
13167
13496
|
"H1"
|
|
13168
13497
|
),
|
|
13169
|
-
/* @__PURE__ */
|
|
13498
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13170
13499
|
"button",
|
|
13171
13500
|
{
|
|
13172
13501
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13174,7 +13503,7 @@ var RufousTextEditor = ({
|
|
|
13174
13503
|
},
|
|
13175
13504
|
"H2"
|
|
13176
13505
|
),
|
|
13177
|
-
/* @__PURE__ */
|
|
13506
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13178
13507
|
"button",
|
|
13179
13508
|
{
|
|
13180
13509
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13182,7 +13511,7 @@ var RufousTextEditor = ({
|
|
|
13182
13511
|
},
|
|
13183
13512
|
"\u2022 List"
|
|
13184
13513
|
),
|
|
13185
|
-
/* @__PURE__ */
|
|
13514
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13186
13515
|
"button",
|
|
13187
13516
|
{
|
|
13188
13517
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13190,7 +13519,7 @@ var RufousTextEditor = ({
|
|
|
13190
13519
|
},
|
|
13191
13520
|
"1. List"
|
|
13192
13521
|
),
|
|
13193
|
-
/* @__PURE__ */
|
|
13522
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13194
13523
|
"button",
|
|
13195
13524
|
{
|
|
13196
13525
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13198,8 +13527,8 @@ var RufousTextEditor = ({
|
|
|
13198
13527
|
},
|
|
13199
13528
|
"\u201C Quote"
|
|
13200
13529
|
)
|
|
13201
|
-
), /* @__PURE__ */
|
|
13202
|
-
/* @__PURE__ */
|
|
13530
|
+
), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react62.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13531
|
+
/* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13203
13532
|
"input",
|
|
13204
13533
|
{
|
|
13205
13534
|
type: "url",
|
|
@@ -13212,7 +13541,7 @@ var RufousTextEditor = ({
|
|
|
13212
13541
|
placeholder: "https://example.com",
|
|
13213
13542
|
autoFocus: true
|
|
13214
13543
|
}
|
|
13215
|
-
)), /* @__PURE__ */
|
|
13544
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13216
13545
|
"input",
|
|
13217
13546
|
{
|
|
13218
13547
|
type: "text",
|
|
@@ -13224,24 +13553,24 @@ var RufousTextEditor = ({
|
|
|
13224
13553
|
},
|
|
13225
13554
|
placeholder: "Link text"
|
|
13226
13555
|
}
|
|
13227
|
-
)), /* @__PURE__ */
|
|
13556
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13228
13557
|
"input",
|
|
13229
13558
|
{
|
|
13230
13559
|
type: "checkbox",
|
|
13231
13560
|
checked: linkNewTab,
|
|
13232
13561
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13233
13562
|
}
|
|
13234
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13563
|
+
), "Open in new tab"), /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13235
13564
|
"input",
|
|
13236
13565
|
{
|
|
13237
13566
|
type: "checkbox",
|
|
13238
13567
|
checked: linkNoFollow,
|
|
13239
13568
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13240
13569
|
}
|
|
13241
|
-
), "No follow"))), /* @__PURE__ */
|
|
13570
|
+
), "No follow"))), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13242
13571
|
document.body
|
|
13243
13572
|
)),
|
|
13244
|
-
helperText && /* @__PURE__ */
|
|
13573
|
+
helperText && /* @__PURE__ */ import_react62.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13245
13574
|
);
|
|
13246
13575
|
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
13247
13576
|
};
|
|
@@ -13252,7 +13581,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13252
13581
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13253
13582
|
} catch {
|
|
13254
13583
|
}
|
|
13255
|
-
return /* @__PURE__ */
|
|
13584
|
+
return /* @__PURE__ */ import_react62.default.createElement(
|
|
13256
13585
|
"div",
|
|
13257
13586
|
{
|
|
13258
13587
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13367,6 +13696,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13367
13696
|
Skeleton,
|
|
13368
13697
|
Slide,
|
|
13369
13698
|
Slider,
|
|
13699
|
+
SmartSelect,
|
|
13370
13700
|
Snackbar,
|
|
13371
13701
|
SoftSkillsIcon,
|
|
13372
13702
|
Stack,
|
|
@@ -13397,6 +13727,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13397
13727
|
UnsubscribeIcon,
|
|
13398
13728
|
UploadIcon,
|
|
13399
13729
|
UserAssignIcon,
|
|
13730
|
+
UserSelectionField,
|
|
13400
13731
|
ViewIcon,
|
|
13401
13732
|
WorkItemIcon,
|
|
13402
13733
|
Zoom,
|