@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.js
CHANGED
|
@@ -2104,10 +2104,10 @@ function defaultIsEqual(a, b) {
|
|
|
2104
2104
|
if (!aIsObj && bIsObj) return a === b.value;
|
|
2105
2105
|
return false;
|
|
2106
2106
|
}
|
|
2107
|
-
function defaultFilter(options, inputValue,
|
|
2107
|
+
function defaultFilter(options, inputValue, getLabel2) {
|
|
2108
2108
|
if (!inputValue) return options;
|
|
2109
2109
|
const q = inputValue.toLowerCase();
|
|
2110
|
-
return options.filter((o) =>
|
|
2110
|
+
return options.filter((o) => getLabel2(o).toLowerCase().includes(q));
|
|
2111
2111
|
}
|
|
2112
2112
|
function AutocompleteInner(props, _ref) {
|
|
2113
2113
|
const {
|
|
@@ -5257,6 +5257,10 @@ var CheckIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "16
|
|
|
5257
5257
|
function normaliseOptions(options) {
|
|
5258
5258
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5259
5259
|
}
|
|
5260
|
+
function OptionIcon({ icon }) {
|
|
5261
|
+
if (!icon) return null;
|
|
5262
|
+
return /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ React76.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : React76.createElement(icon, { size: 16 }));
|
|
5263
|
+
}
|
|
5260
5264
|
var Select = React76.forwardRef(function Select2(props, ref) {
|
|
5261
5265
|
const {
|
|
5262
5266
|
options: rawOptions,
|
|
@@ -5425,7 +5429,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5425
5429
|
}
|
|
5426
5430
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5427
5431
|
if (selectedOpt) {
|
|
5428
|
-
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5432
|
+
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ React76.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5429
5433
|
}
|
|
5430
5434
|
return /* @__PURE__ */ React76.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5431
5435
|
};
|
|
@@ -5483,6 +5487,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5483
5487
|
onMouseDown: (e) => e.preventDefault(),
|
|
5484
5488
|
onClick: (e) => selectOption(opt, e)
|
|
5485
5489
|
},
|
|
5490
|
+
/* @__PURE__ */ React76.createElement(OptionIcon, { icon: opt.icon }),
|
|
5486
5491
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5487
5492
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))
|
|
5488
5493
|
);
|
|
@@ -9330,8 +9335,330 @@ function TreeSelect({
|
|
|
9330
9335
|
));
|
|
9331
9336
|
}
|
|
9332
9337
|
|
|
9338
|
+
// lib/UserSelectionField/UserSelectionField.tsx
|
|
9339
|
+
import React107 from "react";
|
|
9340
|
+
function getOptionId(opt) {
|
|
9341
|
+
return opt.id ?? opt._id;
|
|
9342
|
+
}
|
|
9343
|
+
function getLabel(opt) {
|
|
9344
|
+
if (!opt.userFirstName) return "";
|
|
9345
|
+
return `${opt.userFirstName} ${opt.userLastName ?? ""}`.trim();
|
|
9346
|
+
}
|
|
9347
|
+
function matchesSearch(opt, query) {
|
|
9348
|
+
const q = query.toLowerCase();
|
|
9349
|
+
return opt.userFirstName?.toLowerCase().includes(q) || opt.userLastName?.toLowerCase().includes(q) || opt.emailId?.toLowerCase().includes(q) || false;
|
|
9350
|
+
}
|
|
9351
|
+
function UserAvatar({ user }) {
|
|
9352
|
+
const initials = (user.userFirstName?.[0] ?? "").toUpperCase() + (user.userLastName?.[0] ?? "").toUpperCase();
|
|
9353
|
+
return /* @__PURE__ */ React107.createElement("span", { style: {
|
|
9354
|
+
width: 28,
|
|
9355
|
+
height: 28,
|
|
9356
|
+
borderRadius: "50%",
|
|
9357
|
+
backgroundColor: "var(--hover-color, #e0e0e0)",
|
|
9358
|
+
border: "1px solid var(--border-color, #ddd)",
|
|
9359
|
+
display: "inline-flex",
|
|
9360
|
+
alignItems: "center",
|
|
9361
|
+
justifyContent: "center",
|
|
9362
|
+
fontSize: "0.7rem",
|
|
9363
|
+
fontWeight: 600,
|
|
9364
|
+
color: "var(--text-secondary, #555)",
|
|
9365
|
+
flexShrink: 0,
|
|
9366
|
+
letterSpacing: "0.02em"
|
|
9367
|
+
} }, initials || "?");
|
|
9368
|
+
}
|
|
9369
|
+
function UserSelectionField({
|
|
9370
|
+
value,
|
|
9371
|
+
onChange,
|
|
9372
|
+
options = [],
|
|
9373
|
+
loading = false,
|
|
9374
|
+
onSearchChange,
|
|
9375
|
+
label = "Select user",
|
|
9376
|
+
multiple = false,
|
|
9377
|
+
limitTags,
|
|
9378
|
+
size = "small",
|
|
9379
|
+
variant = "outlined",
|
|
9380
|
+
disabled = false,
|
|
9381
|
+
error = false,
|
|
9382
|
+
helperText,
|
|
9383
|
+
fullWidth = true,
|
|
9384
|
+
required = false,
|
|
9385
|
+
filterOptions: filterOptionsProp,
|
|
9386
|
+
className,
|
|
9387
|
+
style,
|
|
9388
|
+
sx
|
|
9389
|
+
}) {
|
|
9390
|
+
const handleInputChange = (_, inputValue) => {
|
|
9391
|
+
if (!onSearchChange) return;
|
|
9392
|
+
if (!inputValue) {
|
|
9393
|
+
onSearchChange("");
|
|
9394
|
+
return;
|
|
9395
|
+
}
|
|
9396
|
+
const hasLocalMatch = options.some((opt) => matchesSearch(opt, inputValue));
|
|
9397
|
+
if (!hasLocalMatch) {
|
|
9398
|
+
onSearchChange(inputValue);
|
|
9399
|
+
}
|
|
9400
|
+
};
|
|
9401
|
+
return /* @__PURE__ */ React107.createElement(
|
|
9402
|
+
Autocomplete,
|
|
9403
|
+
{
|
|
9404
|
+
options,
|
|
9405
|
+
value: value ?? (multiple ? [] : null),
|
|
9406
|
+
onChange: (_, newValue) => onChange(newValue),
|
|
9407
|
+
onInputChange: handleInputChange,
|
|
9408
|
+
multiple,
|
|
9409
|
+
limitTags,
|
|
9410
|
+
loading,
|
|
9411
|
+
loadingText: /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ React107.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9412
|
+
getOptionLabel: getLabel,
|
|
9413
|
+
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9414
|
+
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
9415
|
+
renderOption: (props, option) => {
|
|
9416
|
+
const { key, ...rest } = props;
|
|
9417
|
+
return /* @__PURE__ */ React107.createElement("li", { key, ...rest, style: { padding: "6px 12px", listStyle: "none" } }, /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React107.createElement(UserAvatar, { user: option }), /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 } }, /* @__PURE__ */ React107.createElement("span", { style: { fontSize: "0.85rem", color: "var(--text-color)", lineHeight: 1.3 } }, option.userFirstName, " ", option.userLastName), /* @__PURE__ */ React107.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3 } }, option.emailId))));
|
|
9418
|
+
},
|
|
9419
|
+
label,
|
|
9420
|
+
placeholder: label,
|
|
9421
|
+
size,
|
|
9422
|
+
variant,
|
|
9423
|
+
disabled,
|
|
9424
|
+
error,
|
|
9425
|
+
helperText,
|
|
9426
|
+
fullWidth,
|
|
9427
|
+
required,
|
|
9428
|
+
className,
|
|
9429
|
+
style,
|
|
9430
|
+
sx
|
|
9431
|
+
}
|
|
9432
|
+
);
|
|
9433
|
+
}
|
|
9434
|
+
|
|
9435
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9436
|
+
import React108, { useCallback as useCallback11, useMemo as useMemo3 } from "react";
|
|
9437
|
+
var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9438
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9439
|
+
return options.flatMap((opt) => [
|
|
9440
|
+
{ option: opt, depth },
|
|
9441
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9442
|
+
]);
|
|
9443
|
+
}
|
|
9444
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9445
|
+
const ids = [getValue(option)];
|
|
9446
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9447
|
+
return ids;
|
|
9448
|
+
}
|
|
9449
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9450
|
+
for (const opt of options) {
|
|
9451
|
+
map.set(getValue(opt), opt);
|
|
9452
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9453
|
+
}
|
|
9454
|
+
return map;
|
|
9455
|
+
}
|
|
9456
|
+
function SmartSelect({
|
|
9457
|
+
options,
|
|
9458
|
+
value,
|
|
9459
|
+
onChange,
|
|
9460
|
+
onSearchChange,
|
|
9461
|
+
getOptionLabel,
|
|
9462
|
+
getOptionValue,
|
|
9463
|
+
getOptionSubLabel,
|
|
9464
|
+
getOptionChildren,
|
|
9465
|
+
multiple = false,
|
|
9466
|
+
allowChildNodesSelection = true,
|
|
9467
|
+
loading = false,
|
|
9468
|
+
loadingText,
|
|
9469
|
+
filterOptions: filterOptionsProp,
|
|
9470
|
+
renderOption: renderOptionProp,
|
|
9471
|
+
limitTags,
|
|
9472
|
+
label,
|
|
9473
|
+
placeholder,
|
|
9474
|
+
variant = "outlined",
|
|
9475
|
+
size = "small",
|
|
9476
|
+
disabled = false,
|
|
9477
|
+
error = false,
|
|
9478
|
+
helperText,
|
|
9479
|
+
fullWidth = true,
|
|
9480
|
+
required = false,
|
|
9481
|
+
className,
|
|
9482
|
+
style,
|
|
9483
|
+
sx
|
|
9484
|
+
}) {
|
|
9485
|
+
const getValue = useCallback11(
|
|
9486
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9487
|
+
[getOptionValue, getOptionLabel]
|
|
9488
|
+
);
|
|
9489
|
+
const flatItems = useMemo3(() => {
|
|
9490
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9491
|
+
return flattenTree(options, getOptionChildren);
|
|
9492
|
+
}, [options, getOptionChildren]);
|
|
9493
|
+
const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9494
|
+
const depthMap = useMemo3(() => {
|
|
9495
|
+
const map = /* @__PURE__ */ new Map();
|
|
9496
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9497
|
+
return map;
|
|
9498
|
+
}, [flatItems, getValue]);
|
|
9499
|
+
const lookup = useMemo3(
|
|
9500
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9501
|
+
[options, getOptionChildren, getValue]
|
|
9502
|
+
);
|
|
9503
|
+
const selectedKeys = useMemo3(() => {
|
|
9504
|
+
if (multiple) {
|
|
9505
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9506
|
+
}
|
|
9507
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9508
|
+
}, [multiple, value, getValue]);
|
|
9509
|
+
const handleInputChange = useCallback11((_, inputValue) => {
|
|
9510
|
+
if (!onSearchChange) return;
|
|
9511
|
+
if (!inputValue) {
|
|
9512
|
+
onSearchChange("");
|
|
9513
|
+
return;
|
|
9514
|
+
}
|
|
9515
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9516
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9517
|
+
);
|
|
9518
|
+
if (!hasLocalMatch) {
|
|
9519
|
+
onSearchChange(inputValue);
|
|
9520
|
+
}
|
|
9521
|
+
}, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9522
|
+
const handleChange = useCallback11((_, newValue) => {
|
|
9523
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9524
|
+
onChange?.(newValue);
|
|
9525
|
+
return;
|
|
9526
|
+
}
|
|
9527
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9528
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9529
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9530
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9531
|
+
let changedKey = null;
|
|
9532
|
+
let wasAdded = false;
|
|
9533
|
+
for (const k of newKeys) {
|
|
9534
|
+
if (!currentKeys.has(k)) {
|
|
9535
|
+
changedKey = k;
|
|
9536
|
+
wasAdded = true;
|
|
9537
|
+
break;
|
|
9538
|
+
}
|
|
9539
|
+
}
|
|
9540
|
+
if (changedKey === null) {
|
|
9541
|
+
for (const k of currentKeys) {
|
|
9542
|
+
if (!newKeys.has(k)) {
|
|
9543
|
+
changedKey = k;
|
|
9544
|
+
wasAdded = false;
|
|
9545
|
+
break;
|
|
9546
|
+
}
|
|
9547
|
+
}
|
|
9548
|
+
}
|
|
9549
|
+
if (changedKey !== null) {
|
|
9550
|
+
const opt = lookup.get(changedKey);
|
|
9551
|
+
if (opt) {
|
|
9552
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9553
|
+
if (wasAdded) {
|
|
9554
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9555
|
+
} else {
|
|
9556
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9557
|
+
}
|
|
9558
|
+
}
|
|
9559
|
+
}
|
|
9560
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9561
|
+
onChange?.(result);
|
|
9562
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9563
|
+
const defaultRenderOption = useCallback11((props, option) => {
|
|
9564
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9565
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9566
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9567
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9568
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9569
|
+
"li",
|
|
9570
|
+
{
|
|
9571
|
+
key,
|
|
9572
|
+
...rest,
|
|
9573
|
+
className: muiClass,
|
|
9574
|
+
style: {
|
|
9575
|
+
...muiStyle,
|
|
9576
|
+
display: "flex",
|
|
9577
|
+
alignItems: "center",
|
|
9578
|
+
gap: 10,
|
|
9579
|
+
padding: "8px 16px",
|
|
9580
|
+
paddingLeft: 16 + depth * 20,
|
|
9581
|
+
fontSize: "0.9rem",
|
|
9582
|
+
color: "rgba(0,0,0,0.87)",
|
|
9583
|
+
cursor: "pointer",
|
|
9584
|
+
userSelect: "none",
|
|
9585
|
+
minHeight: 40,
|
|
9586
|
+
boxSizing: "border-box",
|
|
9587
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9588
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9589
|
+
listStyle: "none"
|
|
9590
|
+
}
|
|
9591
|
+
},
|
|
9592
|
+
/* @__PURE__ */ React108.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9593
|
+
/* @__PURE__ */ React108.createElement("span", { style: {
|
|
9594
|
+
color: "var(--primary-color, #a41b06)",
|
|
9595
|
+
flexShrink: 0,
|
|
9596
|
+
display: "flex",
|
|
9597
|
+
alignItems: "center",
|
|
9598
|
+
opacity: isSelected ? 1 : 0,
|
|
9599
|
+
transition: "opacity 0.1s"
|
|
9600
|
+
} }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
|
|
9601
|
+
);
|
|
9602
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9603
|
+
const computedFilterOptions = useCallback11((opts, inputValue) => {
|
|
9604
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9605
|
+
if (multiple) {
|
|
9606
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9607
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9608
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9609
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9610
|
+
) : unselected;
|
|
9611
|
+
return [...selected, ...filteredRest];
|
|
9612
|
+
}
|
|
9613
|
+
if (value != null) {
|
|
9614
|
+
const selectedLabel = getOptionLabel(value);
|
|
9615
|
+
if (inputValue === selectedLabel) {
|
|
9616
|
+
const selectedKey = getValue(value);
|
|
9617
|
+
return [
|
|
9618
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9619
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9620
|
+
];
|
|
9621
|
+
}
|
|
9622
|
+
}
|
|
9623
|
+
if (!inputValue) return opts;
|
|
9624
|
+
const q = inputValue.toLowerCase();
|
|
9625
|
+
return opts.filter(
|
|
9626
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9627
|
+
);
|
|
9628
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9629
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9630
|
+
Autocomplete,
|
|
9631
|
+
{
|
|
9632
|
+
options: flatOptionsList,
|
|
9633
|
+
value: value ?? (multiple ? [] : null),
|
|
9634
|
+
onChange: handleChange,
|
|
9635
|
+
onInputChange: handleInputChange,
|
|
9636
|
+
multiple,
|
|
9637
|
+
limitTags,
|
|
9638
|
+
loading,
|
|
9639
|
+
loadingText: loadingText ?? /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9640
|
+
getOptionLabel,
|
|
9641
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9642
|
+
filterOptions: computedFilterOptions,
|
|
9643
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9644
|
+
label,
|
|
9645
|
+
placeholder: placeholder ?? label,
|
|
9646
|
+
size,
|
|
9647
|
+
variant,
|
|
9648
|
+
disabled,
|
|
9649
|
+
error,
|
|
9650
|
+
helperText,
|
|
9651
|
+
fullWidth,
|
|
9652
|
+
required,
|
|
9653
|
+
className,
|
|
9654
|
+
style,
|
|
9655
|
+
sx
|
|
9656
|
+
}
|
|
9657
|
+
);
|
|
9658
|
+
}
|
|
9659
|
+
|
|
9333
9660
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9334
|
-
import
|
|
9661
|
+
import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef32, useEffect as useEffect29 } from "react";
|
|
9335
9662
|
import { createPortal as createPortal8 } from "react-dom";
|
|
9336
9663
|
import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
|
|
9337
9664
|
import StarterKit from "@tiptap/starter-kit";
|
|
@@ -9357,7 +9684,7 @@ import { ReactRenderer } from "@tiptap/react";
|
|
|
9357
9684
|
import tippy from "tippy.js";
|
|
9358
9685
|
|
|
9359
9686
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9360
|
-
import
|
|
9687
|
+
import React109, { forwardRef as forwardRef11, useEffect as useEffect21, useImperativeHandle, useState as useState26 } from "react";
|
|
9361
9688
|
var MentionList = forwardRef11((props, ref) => {
|
|
9362
9689
|
const [selectedIndex, setSelectedIndex] = useState26(0);
|
|
9363
9690
|
const selectItem = (index) => {
|
|
@@ -9385,17 +9712,17 @@ var MentionList = forwardRef11((props, ref) => {
|
|
|
9385
9712
|
}
|
|
9386
9713
|
}));
|
|
9387
9714
|
if (!props.items.length) {
|
|
9388
|
-
return /* @__PURE__ */
|
|
9715
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9389
9716
|
}
|
|
9390
|
-
return /* @__PURE__ */
|
|
9717
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ React109.createElement(
|
|
9391
9718
|
"button",
|
|
9392
9719
|
{
|
|
9393
9720
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9394
9721
|
key: item.id,
|
|
9395
9722
|
onClick: () => selectItem(index)
|
|
9396
9723
|
},
|
|
9397
|
-
/* @__PURE__ */
|
|
9398
|
-
/* @__PURE__ */
|
|
9724
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9725
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9399
9726
|
)));
|
|
9400
9727
|
});
|
|
9401
9728
|
MentionList.displayName = "MentionList";
|
|
@@ -9453,11 +9780,11 @@ function createMentionSuggestion(users) {
|
|
|
9453
9780
|
}
|
|
9454
9781
|
|
|
9455
9782
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9456
|
-
import
|
|
9783
|
+
import React115, { useState as useState31, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback15 } from "react";
|
|
9457
9784
|
import { createPortal as createPortal4 } from "react-dom";
|
|
9458
9785
|
|
|
9459
9786
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9460
|
-
import
|
|
9787
|
+
import React110, { useState as useState27, useEffect as useEffect22, useRef as useRef25, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
9461
9788
|
var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
9462
9789
|
const [speaking, setSpeaking] = useState27(false);
|
|
9463
9790
|
const [paused, setPaused] = useState27(false);
|
|
@@ -9494,7 +9821,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9494
9821
|
document.addEventListener("mousedown", handleClick);
|
|
9495
9822
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9496
9823
|
}, []);
|
|
9497
|
-
const getTextToSpeak =
|
|
9824
|
+
const getTextToSpeak = useCallback12(() => {
|
|
9498
9825
|
if (!editor) return "";
|
|
9499
9826
|
const { from, to, empty } = editor.state.selection;
|
|
9500
9827
|
if (!empty) {
|
|
@@ -9502,7 +9829,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9502
9829
|
}
|
|
9503
9830
|
return editor.getText();
|
|
9504
9831
|
}, [editor]);
|
|
9505
|
-
const handleSpeak =
|
|
9832
|
+
const handleSpeak = useCallback12(async () => {
|
|
9506
9833
|
const text = getTextToSpeak();
|
|
9507
9834
|
if (!text.trim()) return;
|
|
9508
9835
|
if (onTextToSpeech) {
|
|
@@ -9544,25 +9871,25 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9544
9871
|
setSpeaking(true);
|
|
9545
9872
|
setPaused(false);
|
|
9546
9873
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9547
|
-
const handlePause =
|
|
9874
|
+
const handlePause = useCallback12(() => {
|
|
9548
9875
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9549
9876
|
window.speechSynthesis.pause();
|
|
9550
9877
|
setPaused(true);
|
|
9551
9878
|
}
|
|
9552
9879
|
}, []);
|
|
9553
|
-
const handleResume =
|
|
9880
|
+
const handleResume = useCallback12(() => {
|
|
9554
9881
|
if (window.speechSynthesis.paused) {
|
|
9555
9882
|
window.speechSynthesis.resume();
|
|
9556
9883
|
setPaused(false);
|
|
9557
9884
|
}
|
|
9558
9885
|
}, []);
|
|
9559
|
-
const handleStop =
|
|
9886
|
+
const handleStop = useCallback12(() => {
|
|
9560
9887
|
window.speechSynthesis.cancel();
|
|
9561
9888
|
setSpeaking(false);
|
|
9562
9889
|
setPaused(false);
|
|
9563
9890
|
}, []);
|
|
9564
9891
|
useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9565
|
-
return /* @__PURE__ */
|
|
9892
|
+
return /* @__PURE__ */ React110.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React110.createElement(
|
|
9566
9893
|
"button",
|
|
9567
9894
|
{
|
|
9568
9895
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9575,15 +9902,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9575
9902
|
}
|
|
9576
9903
|
},
|
|
9577
9904
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9578
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9905
|
+
)), showPanel && !speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React110.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React110.createElement(
|
|
9579
9906
|
"select",
|
|
9580
9907
|
{
|
|
9581
9908
|
className: "tts-select",
|
|
9582
9909
|
value: selectedVoice,
|
|
9583
9910
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9584
9911
|
},
|
|
9585
|
-
voices.map((v) => /* @__PURE__ */
|
|
9586
|
-
), /* @__PURE__ */
|
|
9912
|
+
voices.map((v) => /* @__PURE__ */ React110.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9913
|
+
), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ React110.createElement(
|
|
9587
9914
|
"input",
|
|
9588
9915
|
{
|
|
9589
9916
|
type: "range",
|
|
@@ -9594,15 +9921,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9594
9921
|
value: rate,
|
|
9595
9922
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9596
9923
|
}
|
|
9597
|
-
), /* @__PURE__ */
|
|
9924
|
+
), /* @__PURE__ */ React110.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React110.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9598
9925
|
handleSpeak();
|
|
9599
9926
|
setShowPanel(false);
|
|
9600
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9927
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React110.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React110.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React110.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9601
9928
|
});
|
|
9602
9929
|
var TextToSpeech_default = TextToSpeech;
|
|
9603
9930
|
|
|
9604
9931
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9605
|
-
import
|
|
9932
|
+
import React111, { useState as useState28, useRef as useRef26, useCallback as useCallback13, useEffect as useEffect23, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
|
|
9606
9933
|
var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
9607
9934
|
const [listening, setListening] = useState28(false);
|
|
9608
9935
|
const [showPanel, setShowPanel] = useState28(false);
|
|
@@ -9622,7 +9949,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9622
9949
|
document.addEventListener("mousedown", handleClick);
|
|
9623
9950
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9624
9951
|
}, []);
|
|
9625
|
-
const createRecognition =
|
|
9952
|
+
const createRecognition = useCallback13(() => {
|
|
9626
9953
|
if (!supported) return null;
|
|
9627
9954
|
const recognition = new SpeechRecognitionAPI();
|
|
9628
9955
|
recognition.lang = language;
|
|
@@ -9631,7 +9958,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9631
9958
|
recognition.maxAlternatives = 1;
|
|
9632
9959
|
return recognition;
|
|
9633
9960
|
}, [supported, language]);
|
|
9634
|
-
const startSession =
|
|
9961
|
+
const startSession = useCallback13((recognition) => {
|
|
9635
9962
|
if (!recognition || !editor) return;
|
|
9636
9963
|
recognition.onresult = async (event) => {
|
|
9637
9964
|
let finalText = "";
|
|
@@ -9686,7 +10013,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9686
10013
|
}
|
|
9687
10014
|
};
|
|
9688
10015
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9689
|
-
const startListening =
|
|
10016
|
+
const startListening = useCallback13(() => {
|
|
9690
10017
|
if (!supported || !editor) return;
|
|
9691
10018
|
const recognition = createRecognition();
|
|
9692
10019
|
if (!recognition) return;
|
|
@@ -9702,7 +10029,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9702
10029
|
setListening(false);
|
|
9703
10030
|
}
|
|
9704
10031
|
}, [supported, editor, createRecognition, startSession]);
|
|
9705
|
-
const stopListening =
|
|
10032
|
+
const stopListening = useCallback13(() => {
|
|
9706
10033
|
isListeningRef.current = false;
|
|
9707
10034
|
if (recognitionRef.current) {
|
|
9708
10035
|
try {
|
|
@@ -9716,7 +10043,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9716
10043
|
}, []);
|
|
9717
10044
|
useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9718
10045
|
if (!supported) {
|
|
9719
|
-
return /* @__PURE__ */
|
|
10046
|
+
return /* @__PURE__ */ React111.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React111.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9720
10047
|
}
|
|
9721
10048
|
const LANGUAGES2 = [
|
|
9722
10049
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9738,7 +10065,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9738
10065
|
{ code: "kn-IN", label: "Kannada" },
|
|
9739
10066
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9740
10067
|
];
|
|
9741
|
-
return /* @__PURE__ */
|
|
10068
|
+
return /* @__PURE__ */ React111.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React111.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React111.createElement(
|
|
9742
10069
|
"button",
|
|
9743
10070
|
{
|
|
9744
10071
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9751,20 +10078,20 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9751
10078
|
}
|
|
9752
10079
|
},
|
|
9753
10080
|
"\u{1F3A4}"
|
|
9754
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10081
|
+
)), showPanel && !listening && /* @__PURE__ */ React111.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React111.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React111.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React111.createElement(
|
|
9755
10082
|
"select",
|
|
9756
10083
|
{
|
|
9757
10084
|
className: "stt-select",
|
|
9758
10085
|
value: language,
|
|
9759
10086
|
onChange: (e) => setLanguage(e.target.value)
|
|
9760
10087
|
},
|
|
9761
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9762
|
-
), /* @__PURE__ */
|
|
10088
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ React111.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10089
|
+
), /* @__PURE__ */ React111.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React111.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React111.createElement("div", { className: "stt-interim" }, interim));
|
|
9763
10090
|
});
|
|
9764
10091
|
var SpeechToText_default = SpeechToText;
|
|
9765
10092
|
|
|
9766
10093
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9767
|
-
import
|
|
10094
|
+
import React112, { useState as useState29, useRef as useRef27, useEffect as useEffect24, useCallback as useCallback14 } from "react";
|
|
9768
10095
|
import { createPortal as createPortal2 } from "react-dom";
|
|
9769
10096
|
var AI_COMMANDS = [
|
|
9770
10097
|
{ 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." },
|
|
@@ -9830,7 +10157,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9830
10157
|
document.addEventListener("mousedown", handleClick);
|
|
9831
10158
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9832
10159
|
}, []);
|
|
9833
|
-
const getSelectedText =
|
|
10160
|
+
const getSelectedText = useCallback14(() => {
|
|
9834
10161
|
if (!editor) return { text: "", range: null };
|
|
9835
10162
|
const { from, to, empty } = editor.state.selection;
|
|
9836
10163
|
if (!empty) {
|
|
@@ -9838,7 +10165,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9838
10165
|
}
|
|
9839
10166
|
return { text: editor.getText(), range: null };
|
|
9840
10167
|
}, [editor]);
|
|
9841
|
-
const fetchAIResult =
|
|
10168
|
+
const fetchAIResult = useCallback14(async (prompt, text, prevResults = []) => {
|
|
9842
10169
|
setLoading(true);
|
|
9843
10170
|
setResultText("");
|
|
9844
10171
|
try {
|
|
@@ -9856,7 +10183,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9856
10183
|
setLoading(false);
|
|
9857
10184
|
}
|
|
9858
10185
|
}, [onAICommand]);
|
|
9859
|
-
const handleCommandSelect =
|
|
10186
|
+
const handleCommandSelect = useCallback14((command) => {
|
|
9860
10187
|
const { text, range } = getSelectedText();
|
|
9861
10188
|
if (!text.trim()) return;
|
|
9862
10189
|
setOriginalText(text);
|
|
@@ -9867,7 +10194,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9867
10194
|
setShowModal(true);
|
|
9868
10195
|
fetchAIResult(command.prompt, text, []);
|
|
9869
10196
|
}, [getSelectedText, fetchAIResult]);
|
|
9870
|
-
const handleInsert =
|
|
10197
|
+
const handleInsert = useCallback14(() => {
|
|
9871
10198
|
if (!resultText || !editor) return;
|
|
9872
10199
|
if (selectionRange) {
|
|
9873
10200
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9877,7 +10204,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9877
10204
|
setShowModal(false);
|
|
9878
10205
|
setResultText("");
|
|
9879
10206
|
}, [editor, resultText, selectionRange]);
|
|
9880
|
-
const handleInsertAfter =
|
|
10207
|
+
const handleInsertAfter = useCallback14(() => {
|
|
9881
10208
|
if (!resultText || !editor) return;
|
|
9882
10209
|
if (selectionRange) {
|
|
9883
10210
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9892,11 +10219,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9892
10219
|
setShowModal(false);
|
|
9893
10220
|
setResultText("");
|
|
9894
10221
|
}, [editor, resultText, selectionRange]);
|
|
9895
|
-
const handleRefresh =
|
|
10222
|
+
const handleRefresh = useCallback14(() => {
|
|
9896
10223
|
if (!originalText.trim()) return;
|
|
9897
10224
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9898
10225
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9899
|
-
const handleCancel =
|
|
10226
|
+
const handleCancel = useCallback14(() => {
|
|
9900
10227
|
setShowModal(false);
|
|
9901
10228
|
setResultText("");
|
|
9902
10229
|
setPromptText("");
|
|
@@ -9905,15 +10232,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9905
10232
|
setPreviousResults([]);
|
|
9906
10233
|
}, []);
|
|
9907
10234
|
if (!editor) return null;
|
|
9908
|
-
return /* @__PURE__ */
|
|
10235
|
+
return /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
9909
10236
|
"button",
|
|
9910
10237
|
{
|
|
9911
10238
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9912
10239
|
onClick: () => setOpen(!open)
|
|
9913
10240
|
},
|
|
9914
|
-
/* @__PURE__ */
|
|
9915
|
-
/* @__PURE__ */
|
|
9916
|
-
)), open && /* @__PURE__ */
|
|
10241
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React112.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" })),
|
|
10242
|
+
/* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10243
|
+
)), open && /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React112.createElement(
|
|
9917
10244
|
"button",
|
|
9918
10245
|
{
|
|
9919
10246
|
key: cmd.id,
|
|
@@ -9921,8 +10248,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9921
10248
|
onClick: () => handleCommandSelect(cmd)
|
|
9922
10249
|
},
|
|
9923
10250
|
cmd.label
|
|
9924
|
-
))), /* @__PURE__ */
|
|
9925
|
-
/* @__PURE__ */
|
|
10251
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
|
|
10252
|
+
/* @__PURE__ */ React112.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React112.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React112.createElement(
|
|
9926
10253
|
"textarea",
|
|
9927
10254
|
{
|
|
9928
10255
|
className: "ai-modal-prompt",
|
|
@@ -9930,15 +10257,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9930
10257
|
onChange: (e) => setPromptText(e.target.value),
|
|
9931
10258
|
rows: 3
|
|
9932
10259
|
}
|
|
9933
|
-
), /* @__PURE__ */
|
|
10260
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
9934
10261
|
"button",
|
|
9935
10262
|
{
|
|
9936
10263
|
className: "ai-modal-robot-btn",
|
|
9937
10264
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9938
10265
|
disabled: loading
|
|
9939
10266
|
},
|
|
9940
|
-
/* @__PURE__ */
|
|
9941
|
-
)))), /* @__PURE__ */
|
|
10267
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React112.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React112.createElement("path", { d: "M8 7h8" }))
|
|
10268
|
+
)))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React112.createElement(
|
|
9942
10269
|
"button",
|
|
9943
10270
|
{
|
|
9944
10271
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -9946,7 +10273,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9946
10273
|
disabled: loading || !resultText
|
|
9947
10274
|
},
|
|
9948
10275
|
"Insert"
|
|
9949
|
-
), /* @__PURE__ */
|
|
10276
|
+
), /* @__PURE__ */ React112.createElement(
|
|
9950
10277
|
"button",
|
|
9951
10278
|
{
|
|
9952
10279
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -9954,22 +10281,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9954
10281
|
disabled: loading || !resultText
|
|
9955
10282
|
},
|
|
9956
10283
|
"Insert After"
|
|
9957
|
-
), /* @__PURE__ */
|
|
10284
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
9958
10285
|
"button",
|
|
9959
10286
|
{
|
|
9960
10287
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
9961
10288
|
onClick: handleRefresh,
|
|
9962
10289
|
disabled: loading
|
|
9963
10290
|
},
|
|
9964
|
-
/* @__PURE__ */
|
|
9965
|
-
))), /* @__PURE__ */
|
|
10291
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React112.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10292
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React112.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
9966
10293
|
document.body
|
|
9967
10294
|
));
|
|
9968
10295
|
};
|
|
9969
10296
|
var AICommands_default = AICommands;
|
|
9970
10297
|
|
|
9971
10298
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
9972
|
-
import
|
|
10299
|
+
import React113, { useState as useState30, useMemo as useMemo4 } from "react";
|
|
9973
10300
|
import { createPortal as createPortal3 } from "react-dom";
|
|
9974
10301
|
var LANGUAGES = [
|
|
9975
10302
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10115,10 +10442,10 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10115
10442
|
const [targetFilter, setTargetFilter] = useState30("");
|
|
10116
10443
|
const [translating, setTranslating] = useState30(false);
|
|
10117
10444
|
const [error, setError] = useState30("");
|
|
10118
|
-
const filteredSource =
|
|
10445
|
+
const filteredSource = useMemo4(() => LANGUAGES.filter(
|
|
10119
10446
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10120
10447
|
), [sourceFilter]);
|
|
10121
|
-
const filteredTarget =
|
|
10448
|
+
const filteredTarget = useMemo4(() => LANGUAGES.filter(
|
|
10122
10449
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10123
10450
|
), [targetFilter]);
|
|
10124
10451
|
const handleSwap = () => {
|
|
@@ -10162,7 +10489,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10162
10489
|
}
|
|
10163
10490
|
};
|
|
10164
10491
|
return createPortal3(
|
|
10165
|
-
/* @__PURE__ */
|
|
10492
|
+
/* @__PURE__ */ React113.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React113.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React113.createElement("h3", null, "Translate options"), /* @__PURE__ */ React113.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React113.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10166
10493
|
"input",
|
|
10167
10494
|
{
|
|
10168
10495
|
type: "text",
|
|
@@ -10171,16 +10498,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10171
10498
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10172
10499
|
className: "translate-filter-input"
|
|
10173
10500
|
}
|
|
10174
|
-
)), /* @__PURE__ */
|
|
10501
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10175
10502
|
"button",
|
|
10176
10503
|
{
|
|
10177
10504
|
key: lang.code,
|
|
10178
10505
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10179
10506
|
onClick: () => setSourceLang(lang.code)
|
|
10180
10507
|
},
|
|
10181
|
-
/* @__PURE__ */
|
|
10182
|
-
/* @__PURE__ */
|
|
10183
|
-
)))), /* @__PURE__ */
|
|
10508
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10509
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10510
|
+
)))), /* @__PURE__ */ React113.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10184
10511
|
"input",
|
|
10185
10512
|
{
|
|
10186
10513
|
type: "text",
|
|
@@ -10189,16 +10516,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10189
10516
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10190
10517
|
className: "translate-filter-input"
|
|
10191
10518
|
}
|
|
10192
|
-
)), /* @__PURE__ */
|
|
10519
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10193
10520
|
"button",
|
|
10194
10521
|
{
|
|
10195
10522
|
key: lang.code,
|
|
10196
10523
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10197
10524
|
onClick: () => setTargetLang(lang.code)
|
|
10198
10525
|
},
|
|
10199
|
-
/* @__PURE__ */
|
|
10200
|
-
/* @__PURE__ */
|
|
10201
|
-
))))), error && /* @__PURE__ */
|
|
10526
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10527
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10528
|
+
))))), error && /* @__PURE__ */ React113.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React113.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10202
10529
|
document.body
|
|
10203
10530
|
);
|
|
10204
10531
|
};
|
|
@@ -10849,38 +11176,38 @@ var CustomTaskItem = TaskItem.extend({
|
|
|
10849
11176
|
});
|
|
10850
11177
|
|
|
10851
11178
|
// lib/RufousTextEditor/icons.tsx
|
|
10852
|
-
import * as
|
|
11179
|
+
import * as React114 from "react";
|
|
10853
11180
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10854
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10855
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10856
|
-
var IconBold = () => /* @__PURE__ */
|
|
10857
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10858
|
-
var IconLink = () => /* @__PURE__ */
|
|
10859
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10860
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10861
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10862
|
-
var IconColor = () => /* @__PURE__ */
|
|
10863
|
-
var IconFont = () => /* @__PURE__ */
|
|
10864
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10865
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10866
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10867
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10868
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10869
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10870
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10871
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10872
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10873
|
-
var IconTable = () => /* @__PURE__ */
|
|
10874
|
-
var IconImage = () => /* @__PURE__ */
|
|
10875
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10876
|
-
var IconCut = () => /* @__PURE__ */
|
|
10877
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10878
|
-
var IconCode = () => /* @__PURE__ */
|
|
10879
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10880
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10881
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10882
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10883
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11181
|
+
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" }));
|
|
11182
|
+
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" }));
|
|
11183
|
+
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" }));
|
|
11184
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11185
|
+
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" }));
|
|
11186
|
+
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" }));
|
|
11187
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11188
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11189
|
+
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" }));
|
|
11190
|
+
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" }));
|
|
11191
|
+
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" }));
|
|
11192
|
+
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" }));
|
|
11193
|
+
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" }));
|
|
11194
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11195
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11196
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11197
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11198
|
+
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" }));
|
|
11199
|
+
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" }));
|
|
11200
|
+
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" }));
|
|
11201
|
+
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" }));
|
|
11202
|
+
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" }));
|
|
11203
|
+
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" }));
|
|
11204
|
+
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" }));
|
|
11205
|
+
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" }));
|
|
11206
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11207
|
+
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" }));
|
|
11208
|
+
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" }));
|
|
11209
|
+
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" }));
|
|
11210
|
+
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" }));
|
|
10884
11211
|
|
|
10885
11212
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10886
11213
|
var COLOR_PALETTE = [
|
|
@@ -11062,16 +11389,16 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11062
11389
|
};
|
|
11063
11390
|
position();
|
|
11064
11391
|
}, [open]);
|
|
11065
|
-
return /* @__PURE__ */
|
|
11392
|
+
return /* @__PURE__ */ React115.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React115.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11066
11393
|
"button",
|
|
11067
11394
|
{
|
|
11068
11395
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11069
11396
|
onClick: () => setOpen(!open)
|
|
11070
11397
|
},
|
|
11071
11398
|
trigger.label,
|
|
11072
|
-
/* @__PURE__ */
|
|
11399
|
+
/* @__PURE__ */ React115.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11073
11400
|
)), open && createPortal4(
|
|
11074
|
-
/* @__PURE__ */
|
|
11401
|
+
/* @__PURE__ */ React115.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React115.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11075
11402
|
document.body
|
|
11076
11403
|
));
|
|
11077
11404
|
};
|
|
@@ -11109,14 +11436,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11109
11436
|
}
|
|
11110
11437
|
onClose();
|
|
11111
11438
|
};
|
|
11112
|
-
return /* @__PURE__ */
|
|
11439
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11113
11440
|
"button",
|
|
11114
11441
|
{
|
|
11115
11442
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11116
11443
|
onClick: () => setActiveTab("link")
|
|
11117
11444
|
},
|
|
11118
11445
|
"\u{1F517} Link"
|
|
11119
|
-
), /* @__PURE__ */
|
|
11446
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11120
11447
|
"button",
|
|
11121
11448
|
{
|
|
11122
11449
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11124,7 +11451,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11124
11451
|
},
|
|
11125
11452
|
"</>",
|
|
11126
11453
|
" Code"
|
|
11127
|
-
)), /* @__PURE__ */
|
|
11454
|
+
)), /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ React115.createElement(
|
|
11128
11455
|
"input",
|
|
11129
11456
|
{
|
|
11130
11457
|
type: "text",
|
|
@@ -11135,7 +11462,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11135
11462
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11136
11463
|
autoFocus: true
|
|
11137
11464
|
}
|
|
11138
|
-
) : /* @__PURE__ */
|
|
11465
|
+
) : /* @__PURE__ */ React115.createElement(
|
|
11139
11466
|
"textarea",
|
|
11140
11467
|
{
|
|
11141
11468
|
className: "insert-panel-textarea",
|
|
@@ -11144,7 +11471,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11144
11471
|
onChange: (e) => setUrl(e.target.value),
|
|
11145
11472
|
rows: 3
|
|
11146
11473
|
}
|
|
11147
|
-
), /* @__PURE__ */
|
|
11474
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11148
11475
|
};
|
|
11149
11476
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11150
11477
|
const [activeTab, setActiveTab] = useState31("upload");
|
|
@@ -11188,21 +11515,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11188
11515
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11189
11516
|
onClose();
|
|
11190
11517
|
};
|
|
11191
|
-
return /* @__PURE__ */
|
|
11518
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11192
11519
|
"button",
|
|
11193
11520
|
{
|
|
11194
11521
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11195
11522
|
onClick: () => setActiveTab("upload")
|
|
11196
11523
|
},
|
|
11197
11524
|
"\u2B06 Upload"
|
|
11198
|
-
), /* @__PURE__ */
|
|
11525
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11199
11526
|
"button",
|
|
11200
11527
|
{
|
|
11201
11528
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11202
11529
|
onClick: () => setActiveTab("url")
|
|
11203
11530
|
},
|
|
11204
11531
|
"\u{1F517} URL"
|
|
11205
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11532
|
+
)), activeTab === "upload" ? /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement(
|
|
11206
11533
|
"div",
|
|
11207
11534
|
{
|
|
11208
11535
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11214,9 +11541,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11214
11541
|
onDrop: handleDrop,
|
|
11215
11542
|
onClick: () => fileInputRef.current?.click()
|
|
11216
11543
|
},
|
|
11217
|
-
/* @__PURE__ */
|
|
11218
|
-
/* @__PURE__ */
|
|
11219
|
-
), /* @__PURE__ */
|
|
11544
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11545
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11546
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11220
11547
|
"input",
|
|
11221
11548
|
{
|
|
11222
11549
|
ref: fileInputRef,
|
|
@@ -11225,7 +11552,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11225
11552
|
style: { display: "none" },
|
|
11226
11553
|
onChange: handleFileSelect
|
|
11227
11554
|
}
|
|
11228
|
-
)) : /* @__PURE__ */
|
|
11555
|
+
)) : /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ React115.createElement(
|
|
11229
11556
|
"input",
|
|
11230
11557
|
{
|
|
11231
11558
|
type: "text",
|
|
@@ -11236,7 +11563,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11236
11563
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11237
11564
|
autoFocus: true
|
|
11238
11565
|
}
|
|
11239
|
-
), /* @__PURE__ */
|
|
11566
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11240
11567
|
};
|
|
11241
11568
|
var MAX_GRID = 10;
|
|
11242
11569
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
@@ -11247,7 +11574,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11247
11574
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11248
11575
|
onClose();
|
|
11249
11576
|
};
|
|
11250
|
-
return /* @__PURE__ */
|
|
11577
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement(
|
|
11251
11578
|
"div",
|
|
11252
11579
|
{
|
|
11253
11580
|
className: "table-grid",
|
|
@@ -11256,7 +11583,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11256
11583
|
setHoverCol(0);
|
|
11257
11584
|
}
|
|
11258
11585
|
},
|
|
11259
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11586
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ React115.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ React115.createElement(
|
|
11260
11587
|
"div",
|
|
11261
11588
|
{
|
|
11262
11589
|
key: c,
|
|
@@ -11268,7 +11595,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11268
11595
|
onClick: handleInsert
|
|
11269
11596
|
}
|
|
11270
11597
|
))))
|
|
11271
|
-
), /* @__PURE__ */
|
|
11598
|
+
), /* @__PURE__ */ React115.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ React115.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ React115.createElement(
|
|
11272
11599
|
"button",
|
|
11273
11600
|
{
|
|
11274
11601
|
className: "table-grid-submit",
|
|
@@ -11302,28 +11629,28 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11302
11629
|
}
|
|
11303
11630
|
onClose();
|
|
11304
11631
|
};
|
|
11305
|
-
return /* @__PURE__ */
|
|
11632
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11306
11633
|
"button",
|
|
11307
11634
|
{
|
|
11308
11635
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11309
11636
|
onClick: () => setTab("background")
|
|
11310
11637
|
},
|
|
11311
11638
|
"Background"
|
|
11312
|
-
), /* @__PURE__ */
|
|
11639
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11313
11640
|
"button",
|
|
11314
11641
|
{
|
|
11315
11642
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11316
11643
|
onClick: () => setTab("text")
|
|
11317
11644
|
},
|
|
11318
11645
|
"Text"
|
|
11319
|
-
)), /* @__PURE__ */
|
|
11646
|
+
)), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React115.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11320
11647
|
"button",
|
|
11321
11648
|
{
|
|
11322
11649
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11323
11650
|
style: { background: color },
|
|
11324
11651
|
onClick: () => applyColor(color)
|
|
11325
11652
|
}
|
|
11326
|
-
)))), /* @__PURE__ */
|
|
11653
|
+
)))), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React115.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11327
11654
|
};
|
|
11328
11655
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11329
11656
|
const [, setEditorState] = useState31(0);
|
|
@@ -11337,7 +11664,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11337
11664
|
editor.on("transaction", onTransaction);
|
|
11338
11665
|
return () => editor.off("transaction", onTransaction);
|
|
11339
11666
|
}, [editor]);
|
|
11340
|
-
const insertSpecialChar =
|
|
11667
|
+
const insertSpecialChar = useCallback15((char) => {
|
|
11341
11668
|
if (!editor) return;
|
|
11342
11669
|
editor.chain().focus().insertContent(char).run();
|
|
11343
11670
|
}, [editor]);
|
|
@@ -11346,7 +11673,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11346
11673
|
const [translateTarget, setTranslateTarget] = useState31("hi");
|
|
11347
11674
|
const [translateStatus, setTranslateStatus] = useState31("");
|
|
11348
11675
|
const [showTranslateModal, setShowTranslateModal] = useState31(false);
|
|
11349
|
-
const handleCopy =
|
|
11676
|
+
const handleCopy = useCallback15(async () => {
|
|
11350
11677
|
if (!editor) return;
|
|
11351
11678
|
const { from, to, empty } = editor.state.selection;
|
|
11352
11679
|
if (empty) return;
|
|
@@ -11361,7 +11688,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11361
11688
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11362
11689
|
}
|
|
11363
11690
|
}, [editor]);
|
|
11364
|
-
const handlePaste =
|
|
11691
|
+
const handlePaste = useCallback15(async () => {
|
|
11365
11692
|
if (!editor) return;
|
|
11366
11693
|
try {
|
|
11367
11694
|
const text = await navigator.clipboard.readText();
|
|
@@ -11370,7 +11697,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11370
11697
|
document.execCommand("paste");
|
|
11371
11698
|
}
|
|
11372
11699
|
}, [editor]);
|
|
11373
|
-
const handleQuickTranslate =
|
|
11700
|
+
const handleQuickTranslate = useCallback15(async () => {
|
|
11374
11701
|
if (!editor) return;
|
|
11375
11702
|
const { from, to, empty } = editor.state.selection;
|
|
11376
11703
|
if (empty) {
|
|
@@ -11404,32 +11731,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11404
11731
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11405
11732
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11406
11733
|
if (!editor) return null;
|
|
11407
|
-
return /* @__PURE__ */
|
|
11734
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React115.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11408
11735
|
"button",
|
|
11409
11736
|
{
|
|
11410
11737
|
className: "toolbar-btn",
|
|
11411
11738
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11412
11739
|
disabled: !editor.can().undo()
|
|
11413
11740
|
},
|
|
11414
|
-
/* @__PURE__ */
|
|
11415
|
-
)), show("redo") && /* @__PURE__ */
|
|
11741
|
+
/* @__PURE__ */ React115.createElement(IconUndo, null)
|
|
11742
|
+
)), show("redo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11416
11743
|
"button",
|
|
11417
11744
|
{
|
|
11418
11745
|
className: "toolbar-btn",
|
|
11419
11746
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11420
11747
|
disabled: !editor.can().redo()
|
|
11421
11748
|
},
|
|
11422
|
-
/* @__PURE__ */
|
|
11423
|
-
))), show("ai") && /* @__PURE__ */
|
|
11749
|
+
/* @__PURE__ */ React115.createElement(IconRedo, null)
|
|
11750
|
+
))), show("ai") && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React115.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React115.createElement(
|
|
11424
11751
|
Dropdown,
|
|
11425
11752
|
{
|
|
11426
11753
|
trigger: {
|
|
11427
|
-
label: /* @__PURE__ */
|
|
11754
|
+
label: /* @__PURE__ */ React115.createElement(IconHeading, null),
|
|
11428
11755
|
title: "Block type",
|
|
11429
11756
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11430
11757
|
}
|
|
11431
11758
|
},
|
|
11432
|
-
/* @__PURE__ */
|
|
11759
|
+
/* @__PURE__ */ React115.createElement(
|
|
11433
11760
|
"button",
|
|
11434
11761
|
{
|
|
11435
11762
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11437,7 +11764,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11437
11764
|
},
|
|
11438
11765
|
"\xB6 Paragraph"
|
|
11439
11766
|
),
|
|
11440
|
-
/* @__PURE__ */
|
|
11767
|
+
/* @__PURE__ */ React115.createElement(
|
|
11441
11768
|
"button",
|
|
11442
11769
|
{
|
|
11443
11770
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11445,7 +11772,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11445
11772
|
},
|
|
11446
11773
|
"Heading 1"
|
|
11447
11774
|
),
|
|
11448
|
-
/* @__PURE__ */
|
|
11775
|
+
/* @__PURE__ */ React115.createElement(
|
|
11449
11776
|
"button",
|
|
11450
11777
|
{
|
|
11451
11778
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11453,7 +11780,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11453
11780
|
},
|
|
11454
11781
|
"Heading 2"
|
|
11455
11782
|
),
|
|
11456
|
-
/* @__PURE__ */
|
|
11783
|
+
/* @__PURE__ */ React115.createElement(
|
|
11457
11784
|
"button",
|
|
11458
11785
|
{
|
|
11459
11786
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11461,7 +11788,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11461
11788
|
},
|
|
11462
11789
|
"Heading 3"
|
|
11463
11790
|
),
|
|
11464
|
-
/* @__PURE__ */
|
|
11791
|
+
/* @__PURE__ */ React115.createElement(
|
|
11465
11792
|
"button",
|
|
11466
11793
|
{
|
|
11467
11794
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11469,7 +11796,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11469
11796
|
},
|
|
11470
11797
|
"Heading 4"
|
|
11471
11798
|
),
|
|
11472
|
-
/* @__PURE__ */
|
|
11799
|
+
/* @__PURE__ */ React115.createElement(
|
|
11473
11800
|
"button",
|
|
11474
11801
|
{
|
|
11475
11802
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11477,7 +11804,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11477
11804
|
},
|
|
11478
11805
|
"\u275E Blockquote"
|
|
11479
11806
|
),
|
|
11480
|
-
/* @__PURE__ */
|
|
11807
|
+
/* @__PURE__ */ React115.createElement(
|
|
11481
11808
|
"button",
|
|
11482
11809
|
{
|
|
11483
11810
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11486,19 +11813,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11486
11813
|
"{ }",
|
|
11487
11814
|
" Code Block"
|
|
11488
11815
|
),
|
|
11489
|
-
/* @__PURE__ */
|
|
11490
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11816
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11817
|
+
), show("fontsize") && /* @__PURE__ */ React115.createElement(
|
|
11491
11818
|
Dropdown,
|
|
11492
11819
|
{
|
|
11493
11820
|
trigger: {
|
|
11494
|
-
label: /* @__PURE__ */
|
|
11821
|
+
label: /* @__PURE__ */ React115.createElement(IconFontSize, null),
|
|
11495
11822
|
title: "Font size"
|
|
11496
11823
|
}
|
|
11497
11824
|
},
|
|
11498
11825
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11499
11826
|
const sizeStr = `${size}px`;
|
|
11500
11827
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11501
|
-
return /* @__PURE__ */
|
|
11828
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11502
11829
|
"button",
|
|
11503
11830
|
{
|
|
11504
11831
|
key: size,
|
|
@@ -11514,17 +11841,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11514
11841
|
sizeStr
|
|
11515
11842
|
);
|
|
11516
11843
|
})
|
|
11517
|
-
), show("font") && /* @__PURE__ */
|
|
11844
|
+
), show("font") && /* @__PURE__ */ React115.createElement(
|
|
11518
11845
|
Dropdown,
|
|
11519
11846
|
{
|
|
11520
11847
|
trigger: {
|
|
11521
|
-
label: /* @__PURE__ */
|
|
11848
|
+
label: /* @__PURE__ */ React115.createElement(IconFont, null),
|
|
11522
11849
|
title: "Font family"
|
|
11523
11850
|
}
|
|
11524
11851
|
},
|
|
11525
11852
|
FONT_FAMILIES.map((font) => {
|
|
11526
11853
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11527
|
-
return /* @__PURE__ */
|
|
11854
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11528
11855
|
"button",
|
|
11529
11856
|
{
|
|
11530
11857
|
key: font,
|
|
@@ -11541,40 +11868,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11541
11868
|
font
|
|
11542
11869
|
);
|
|
11543
11870
|
})
|
|
11544
|
-
), show("color") && /* @__PURE__ */
|
|
11871
|
+
), show("color") && /* @__PURE__ */ React115.createElement(
|
|
11545
11872
|
Dropdown,
|
|
11546
11873
|
{
|
|
11547
11874
|
trigger: {
|
|
11548
|
-
label: /* @__PURE__ */
|
|
11875
|
+
label: /* @__PURE__ */ React115.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React115.createElement(IconColor, null)),
|
|
11549
11876
|
title: "Colors"
|
|
11550
11877
|
},
|
|
11551
11878
|
keepOpen: true
|
|
11552
11879
|
},
|
|
11553
|
-
(close) => /* @__PURE__ */
|
|
11554
|
-
), show("bold") && /* @__PURE__ */
|
|
11880
|
+
(close) => /* @__PURE__ */ React115.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11881
|
+
), show("bold") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11555
11882
|
"button",
|
|
11556
11883
|
{
|
|
11557
11884
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11558
11885
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11559
11886
|
},
|
|
11560
|
-
/* @__PURE__ */
|
|
11561
|
-
)), show("italic") && /* @__PURE__ */
|
|
11887
|
+
/* @__PURE__ */ React115.createElement(IconBold, null)
|
|
11888
|
+
)), show("italic") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11562
11889
|
"button",
|
|
11563
11890
|
{
|
|
11564
11891
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11565
11892
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11566
11893
|
},
|
|
11567
|
-
/* @__PURE__ */
|
|
11568
|
-
)), show("strike") && /* @__PURE__ */
|
|
11894
|
+
/* @__PURE__ */ React115.createElement(IconItalic, null)
|
|
11895
|
+
)), show("strike") && /* @__PURE__ */ React115.createElement(
|
|
11569
11896
|
Dropdown,
|
|
11570
11897
|
{
|
|
11571
|
-
trigger: { label: /* @__PURE__ */
|
|
11898
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11572
11899
|
},
|
|
11573
|
-
/* @__PURE__ */
|
|
11574
|
-
/* @__PURE__ */
|
|
11575
|
-
/* @__PURE__ */
|
|
11576
|
-
/* @__PURE__ */
|
|
11577
|
-
/* @__PURE__ */
|
|
11900
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ React115.createElement("s", null, "Strikethrough")),
|
|
11901
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ React115.createElement("u", null, "Underline")),
|
|
11902
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ React115.createElement("sup", null, "2"), " Superscript"),
|
|
11903
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ React115.createElement("sub", null, "2"), " Subscript"),
|
|
11904
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11578
11905
|
e.preventDefault();
|
|
11579
11906
|
const chain = editor.chain().focus();
|
|
11580
11907
|
if (!editor.state.selection.empty) {
|
|
@@ -11590,25 +11917,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11590
11917
|
c.run();
|
|
11591
11918
|
}
|
|
11592
11919
|
} }, "\u2715 Clear formatting")
|
|
11593
|
-
), show("link") && /* @__PURE__ */
|
|
11920
|
+
), show("link") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11594
11921
|
"button",
|
|
11595
11922
|
{
|
|
11596
11923
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11597
11924
|
onClick: setLink
|
|
11598
11925
|
},
|
|
11599
|
-
/* @__PURE__ */
|
|
11600
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11926
|
+
/* @__PURE__ */ React115.createElement(IconLink, null)
|
|
11927
|
+
)), show("lineheight") && /* @__PURE__ */ React115.createElement(
|
|
11601
11928
|
Dropdown,
|
|
11602
11929
|
{
|
|
11603
11930
|
trigger: {
|
|
11604
|
-
label: /* @__PURE__ */
|
|
11931
|
+
label: /* @__PURE__ */ React115.createElement(IconLineHeight, null),
|
|
11605
11932
|
title: "Line height"
|
|
11606
11933
|
}
|
|
11607
11934
|
},
|
|
11608
11935
|
["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) => {
|
|
11609
11936
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11610
11937
|
const isActive = currentLH === lh;
|
|
11611
|
-
return /* @__PURE__ */
|
|
11938
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11612
11939
|
"button",
|
|
11613
11940
|
{
|
|
11614
11941
|
key: lh,
|
|
@@ -11624,19 +11951,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11624
11951
|
lh
|
|
11625
11952
|
);
|
|
11626
11953
|
})
|
|
11627
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11954
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11628
11955
|
"button",
|
|
11629
11956
|
{
|
|
11630
11957
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11631
11958
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11632
11959
|
},
|
|
11633
|
-
/* @__PURE__ */
|
|
11634
|
-
)), /* @__PURE__ */
|
|
11960
|
+
/* @__PURE__ */ React115.createElement(IconBulletList, null)
|
|
11961
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11635
11962
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11636
11963
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11637
11964
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11638
11965
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11639
|
-
].map((item) => /* @__PURE__ */
|
|
11966
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11640
11967
|
"button",
|
|
11641
11968
|
{
|
|
11642
11969
|
key: item.label,
|
|
@@ -11661,24 +11988,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11661
11988
|
}).run();
|
|
11662
11989
|
}
|
|
11663
11990
|
},
|
|
11664
|
-
/* @__PURE__ */
|
|
11991
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11665
11992
|
" ",
|
|
11666
11993
|
item.label
|
|
11667
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11994
|
+
)))), show("ol") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11668
11995
|
"button",
|
|
11669
11996
|
{
|
|
11670
11997
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11671
11998
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11672
11999
|
},
|
|
11673
|
-
/* @__PURE__ */
|
|
11674
|
-
)), /* @__PURE__ */
|
|
12000
|
+
/* @__PURE__ */ React115.createElement(IconOrderedList, null)
|
|
12001
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11675
12002
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11676
12003
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11677
12004
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11678
12005
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11679
12006
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11680
12007
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11681
|
-
].map((item) => /* @__PURE__ */
|
|
12008
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11682
12009
|
"button",
|
|
11683
12010
|
{
|
|
11684
12011
|
key: item.label,
|
|
@@ -11703,24 +12030,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11703
12030
|
}).run();
|
|
11704
12031
|
}
|
|
11705
12032
|
},
|
|
11706
|
-
/* @__PURE__ */
|
|
12033
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11707
12034
|
" ",
|
|
11708
12035
|
item.label
|
|
11709
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12036
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React115.createElement(
|
|
11710
12037
|
Dropdown,
|
|
11711
12038
|
{
|
|
11712
12039
|
trigger: {
|
|
11713
|
-
label: /* @__PURE__ */
|
|
12040
|
+
label: /* @__PURE__ */ React115.createElement(IconAlignLeft, null),
|
|
11714
12041
|
title: "Align",
|
|
11715
12042
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11716
12043
|
}
|
|
11717
12044
|
},
|
|
11718
12045
|
[
|
|
11719
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11720
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11721
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11722
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11723
|
-
].map((item) => /* @__PURE__ */
|
|
12046
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ React115.createElement(IconAlignLeft, null) },
|
|
12047
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ React115.createElement(IconAlignCenter, null) },
|
|
12048
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ React115.createElement(IconAlignRight, null) },
|
|
12049
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ React115.createElement(IconAlignJustify, null) }
|
|
12050
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11724
12051
|
"button",
|
|
11725
12052
|
{
|
|
11726
12053
|
key: item.value,
|
|
@@ -11731,7 +12058,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11731
12058
|
" ",
|
|
11732
12059
|
item.label
|
|
11733
12060
|
))
|
|
11734
|
-
), show("indent") && /* @__PURE__ */
|
|
12061
|
+
), show("indent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11735
12062
|
"button",
|
|
11736
12063
|
{
|
|
11737
12064
|
className: "toolbar-btn",
|
|
@@ -11750,8 +12077,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11750
12077
|
}).run();
|
|
11751
12078
|
}
|
|
11752
12079
|
},
|
|
11753
|
-
/* @__PURE__ */
|
|
11754
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12080
|
+
/* @__PURE__ */ React115.createElement(IconIndentIncrease, null)
|
|
12081
|
+
)), show("outdent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11755
12082
|
"button",
|
|
11756
12083
|
{
|
|
11757
12084
|
className: "toolbar-btn",
|
|
@@ -11770,29 +12097,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11770
12097
|
}).run();
|
|
11771
12098
|
}
|
|
11772
12099
|
},
|
|
11773
|
-
/* @__PURE__ */
|
|
11774
|
-
))), show("table") && /* @__PURE__ */
|
|
12100
|
+
/* @__PURE__ */ React115.createElement(IconIndentDecrease, null)
|
|
12101
|
+
))), show("table") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11775
12102
|
"button",
|
|
11776
12103
|
{
|
|
11777
12104
|
className: "toolbar-btn",
|
|
11778
12105
|
onClick: () => document.execCommand("cut")
|
|
11779
12106
|
},
|
|
11780
|
-
/* @__PURE__ */
|
|
11781
|
-
)), show("copy") && /* @__PURE__ */
|
|
12107
|
+
/* @__PURE__ */ React115.createElement(IconCut, null)
|
|
12108
|
+
)), show("copy") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11782
12109
|
"button",
|
|
11783
12110
|
{
|
|
11784
12111
|
className: "toolbar-btn",
|
|
11785
12112
|
onClick: handleCopy
|
|
11786
12113
|
},
|
|
11787
|
-
copySuccess ? /* @__PURE__ */
|
|
11788
|
-
)), show("paste") && /* @__PURE__ */
|
|
12114
|
+
copySuccess ? /* @__PURE__ */ React115.createElement(IconCheck, null) : /* @__PURE__ */ React115.createElement(IconCopy, null)
|
|
12115
|
+
)), show("paste") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11789
12116
|
"button",
|
|
11790
12117
|
{
|
|
11791
12118
|
className: "toolbar-btn",
|
|
11792
12119
|
onClick: handlePaste
|
|
11793
12120
|
},
|
|
11794
|
-
/* @__PURE__ */
|
|
11795
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12121
|
+
/* @__PURE__ */ React115.createElement(IconPaste, null)
|
|
12122
|
+
)), show("specialchars") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React115.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React115.createElement(
|
|
11796
12123
|
"button",
|
|
11797
12124
|
{
|
|
11798
12125
|
key: char,
|
|
@@ -11800,12 +12127,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11800
12127
|
onClick: () => insertSpecialChar(char)
|
|
11801
12128
|
},
|
|
11802
12129
|
char
|
|
11803
|
-
)))), show("code") && /* @__PURE__ */
|
|
12130
|
+
)))), show("code") && /* @__PURE__ */ React115.createElement(
|
|
11804
12131
|
Dropdown,
|
|
11805
12132
|
{
|
|
11806
|
-
trigger: { label: /* @__PURE__ */
|
|
12133
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11807
12134
|
},
|
|
11808
|
-
/* @__PURE__ */
|
|
12135
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11809
12136
|
if (editor.isActive("codeBlock")) {
|
|
11810
12137
|
const text = (() => {
|
|
11811
12138
|
const { $from } = editor.state.selection;
|
|
@@ -11823,22 +12150,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11823
12150
|
editor.chain().focus().toggleCode().run();
|
|
11824
12151
|
}
|
|
11825
12152
|
} }, "</>", " Inline Code"),
|
|
11826
|
-
/* @__PURE__ */
|
|
11827
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12153
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12154
|
+
), show("fullscreen") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11828
12155
|
"button",
|
|
11829
12156
|
{
|
|
11830
12157
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11831
12158
|
onClick: onToggleFullscreen
|
|
11832
12159
|
},
|
|
11833
|
-
/* @__PURE__ */
|
|
11834
|
-
)), show("tts") && /* @__PURE__ */
|
|
12160
|
+
/* @__PURE__ */ React115.createElement(IconFullscreen, null)
|
|
12161
|
+
)), show("tts") && /* @__PURE__ */ React115.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React115.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React115.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11835
12162
|
"button",
|
|
11836
12163
|
{
|
|
11837
12164
|
className: "toolbar-btn",
|
|
11838
12165
|
onClick: handleQuickTranslate
|
|
11839
12166
|
},
|
|
11840
|
-
/* @__PURE__ */
|
|
11841
|
-
)), /* @__PURE__ */
|
|
12167
|
+
/* @__PURE__ */ React115.createElement(IconTranslate, null)
|
|
12168
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React115.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React115.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11842
12169
|
"button",
|
|
11843
12170
|
{
|
|
11844
12171
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11881,11 +12208,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11881
12208
|
}
|
|
11882
12209
|
}
|
|
11883
12210
|
},
|
|
11884
|
-
/* @__PURE__ */
|
|
11885
|
-
)), /* @__PURE__ */
|
|
12211
|
+
/* @__PURE__ */ React115.createElement(IconTaskList, null)
|
|
12212
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11886
12213
|
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" };
|
|
11887
12214
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11888
|
-
return /* @__PURE__ */
|
|
12215
|
+
return /* @__PURE__ */ React115.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11889
12216
|
const { state } = editor;
|
|
11890
12217
|
const { schema } = state;
|
|
11891
12218
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11918,8 +12245,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11918
12245
|
}
|
|
11919
12246
|
return true;
|
|
11920
12247
|
}).run();
|
|
11921
|
-
} }, /* @__PURE__ */
|
|
11922
|
-
})))), onClose && /* @__PURE__ */
|
|
12248
|
+
} }, /* @__PURE__ */ React115.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React115.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12249
|
+
})))), onClose && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11923
12250
|
"button",
|
|
11924
12251
|
{
|
|
11925
12252
|
className: "toolbar-btn btn-cross",
|
|
@@ -11935,8 +12262,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11935
12262
|
onClose();
|
|
11936
12263
|
}
|
|
11937
12264
|
},
|
|
11938
|
-
/* @__PURE__ */
|
|
11939
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12265
|
+
/* @__PURE__ */ React115.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12266
|
+
))), showTranslateModal && /* @__PURE__ */ React115.createElement(
|
|
11940
12267
|
TranslateModal_default,
|
|
11941
12268
|
{
|
|
11942
12269
|
editor,
|
|
@@ -11954,7 +12281,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11954
12281
|
var Toolbar_default = Toolbar;
|
|
11955
12282
|
|
|
11956
12283
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
11957
|
-
import
|
|
12284
|
+
import React116, { useState as useState32, useEffect as useEffect26, useRef as useRef29 } from "react";
|
|
11958
12285
|
import { createPortal as createPortal5 } from "react-dom";
|
|
11959
12286
|
var ALIGNMENTS = [
|
|
11960
12287
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12012,7 +12339,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12012
12339
|
editor.chain().focus().deleteSelection().run();
|
|
12013
12340
|
onClose();
|
|
12014
12341
|
};
|
|
12015
|
-
return /* @__PURE__ */
|
|
12342
|
+
return /* @__PURE__ */ React116.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React116.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React116.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React116.createElement("h3", null, "Image properties"), /* @__PURE__ */ React116.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React116.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React116.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ React116.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ React116.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React116.createElement(
|
|
12016
12343
|
"input",
|
|
12017
12344
|
{
|
|
12018
12345
|
type: "number",
|
|
@@ -12020,14 +12347,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12020
12347
|
value: width,
|
|
12021
12348
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12022
12349
|
}
|
|
12023
|
-
), /* @__PURE__ */
|
|
12350
|
+
), /* @__PURE__ */ React116.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
12024
12351
|
"button",
|
|
12025
12352
|
{
|
|
12026
12353
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12027
12354
|
onClick: () => setLockRatio(!lockRatio)
|
|
12028
12355
|
},
|
|
12029
12356
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12030
|
-
)), /* @__PURE__ */
|
|
12357
|
+
)), /* @__PURE__ */ React116.createElement(
|
|
12031
12358
|
"input",
|
|
12032
12359
|
{
|
|
12033
12360
|
type: "number",
|
|
@@ -12035,21 +12362,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12035
12362
|
value: height,
|
|
12036
12363
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12037
12364
|
}
|
|
12038
|
-
))), /* @__PURE__ */
|
|
12365
|
+
))), /* @__PURE__ */ React116.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ React116.createElement(
|
|
12039
12366
|
"button",
|
|
12040
12367
|
{
|
|
12041
12368
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12042
12369
|
onClick: () => setActiveTab("image")
|
|
12043
12370
|
},
|
|
12044
12371
|
"Image"
|
|
12045
|
-
), /* @__PURE__ */
|
|
12372
|
+
), /* @__PURE__ */ React116.createElement(
|
|
12046
12373
|
"button",
|
|
12047
12374
|
{
|
|
12048
12375
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12049
12376
|
onClick: () => setActiveTab("advanced")
|
|
12050
12377
|
},
|
|
12051
12378
|
"Advanced"
|
|
12052
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12379
|
+
)), activeTab === "image" ? /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ React116.createElement(
|
|
12053
12380
|
"input",
|
|
12054
12381
|
{
|
|
12055
12382
|
type: "text",
|
|
@@ -12057,7 +12384,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12057
12384
|
value: src,
|
|
12058
12385
|
onChange: (e) => setSrc(e.target.value)
|
|
12059
12386
|
}
|
|
12060
|
-
), /* @__PURE__ */
|
|
12387
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ React116.createElement(
|
|
12061
12388
|
"input",
|
|
12062
12389
|
{
|
|
12063
12390
|
type: "text",
|
|
@@ -12065,7 +12392,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12065
12392
|
value: title,
|
|
12066
12393
|
onChange: (e) => setTitle(e.target.value)
|
|
12067
12394
|
}
|
|
12068
|
-
), /* @__PURE__ */
|
|
12395
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ React116.createElement(
|
|
12069
12396
|
"input",
|
|
12070
12397
|
{
|
|
12071
12398
|
type: "text",
|
|
@@ -12073,7 +12400,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12073
12400
|
value: alt,
|
|
12074
12401
|
onChange: (e) => setAlt(e.target.value)
|
|
12075
12402
|
}
|
|
12076
|
-
), /* @__PURE__ */
|
|
12403
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ React116.createElement(
|
|
12077
12404
|
"input",
|
|
12078
12405
|
{
|
|
12079
12406
|
type: "text",
|
|
@@ -12081,14 +12408,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12081
12408
|
value: link,
|
|
12082
12409
|
onChange: (e) => setLink(e.target.value)
|
|
12083
12410
|
}
|
|
12084
|
-
), /* @__PURE__ */
|
|
12411
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ React116.createElement(
|
|
12085
12412
|
"input",
|
|
12086
12413
|
{
|
|
12087
12414
|
type: "checkbox",
|
|
12088
12415
|
checked: openInNewTab,
|
|
12089
12416
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12090
12417
|
}
|
|
12091
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12418
|
+
), "Open link in new tab")) : /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React116.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12092
12419
|
};
|
|
12093
12420
|
var ImageToolbar = ({ editor }) => {
|
|
12094
12421
|
const [showModal, setShowModal] = useState32(false);
|
|
@@ -12127,7 +12454,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12127
12454
|
const node = editor?.state.selection.node;
|
|
12128
12455
|
const isImage = node && node.type.name === "image";
|
|
12129
12456
|
if (!editor || !isImage || !pos) return showModal ? createPortal5(
|
|
12130
|
-
/* @__PURE__ */
|
|
12457
|
+
/* @__PURE__ */ React116.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12131
12458
|
document.body
|
|
12132
12459
|
) : null;
|
|
12133
12460
|
const handleDelete = () => {
|
|
@@ -12204,7 +12531,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12204
12531
|
setShowVAlign(false);
|
|
12205
12532
|
};
|
|
12206
12533
|
return createPortal5(
|
|
12207
|
-
/* @__PURE__ */
|
|
12534
|
+
/* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(
|
|
12208
12535
|
"div",
|
|
12209
12536
|
{
|
|
12210
12537
|
className: "image-toolbar",
|
|
@@ -12212,14 +12539,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12212
12539
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12213
12540
|
onMouseDown: (e) => e.preventDefault()
|
|
12214
12541
|
},
|
|
12215
|
-
/* @__PURE__ */
|
|
12216
|
-
/* @__PURE__ */
|
|
12217
|
-
/* @__PURE__ */
|
|
12218
|
-
/* @__PURE__ */
|
|
12542
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12543
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12544
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React116.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12545
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12219
12546
|
setShowAlign(!showAlign);
|
|
12220
12547
|
setShowVAlign(false);
|
|
12221
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12222
|
-
), showModal && /* @__PURE__ */
|
|
12548
|
+
} }, "\u2630 ", /* @__PURE__ */ React116.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React116.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React116.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12549
|
+
), showModal && /* @__PURE__ */ React116.createElement(
|
|
12223
12550
|
ImagePropertiesModal,
|
|
12224
12551
|
{
|
|
12225
12552
|
editor,
|
|
@@ -12233,7 +12560,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12233
12560
|
var ImageToolbar_default = ImageToolbar;
|
|
12234
12561
|
|
|
12235
12562
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12236
|
-
import
|
|
12563
|
+
import React117, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
|
|
12237
12564
|
import { createPortal as createPortal6 } from "react-dom";
|
|
12238
12565
|
var ALIGNMENTS2 = [
|
|
12239
12566
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12278,7 +12605,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12278
12605
|
onClose();
|
|
12279
12606
|
};
|
|
12280
12607
|
const isYoutube = nodeType === "youtube";
|
|
12281
|
-
return /* @__PURE__ */
|
|
12608
|
+
return /* @__PURE__ */ React117.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React117.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React117.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React117.createElement("h3", null, "Video properties"), /* @__PURE__ */ React117.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React117.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React117.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ React117.createElement(
|
|
12282
12609
|
"iframe",
|
|
12283
12610
|
{
|
|
12284
12611
|
src,
|
|
@@ -12286,14 +12613,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12286
12613
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12287
12614
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12288
12615
|
}
|
|
12289
|
-
) : /* @__PURE__ */
|
|
12616
|
+
) : /* @__PURE__ */ React117.createElement(
|
|
12290
12617
|
"video",
|
|
12291
12618
|
{
|
|
12292
12619
|
src,
|
|
12293
12620
|
controls: true,
|
|
12294
12621
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12295
12622
|
}
|
|
12296
|
-
)), /* @__PURE__ */
|
|
12623
|
+
)), /* @__PURE__ */ React117.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React117.createElement(
|
|
12297
12624
|
"input",
|
|
12298
12625
|
{
|
|
12299
12626
|
type: "number",
|
|
@@ -12301,14 +12628,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12301
12628
|
value: width,
|
|
12302
12629
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12303
12630
|
}
|
|
12304
|
-
), /* @__PURE__ */
|
|
12631
|
+
), /* @__PURE__ */ React117.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React117.createElement(
|
|
12305
12632
|
"button",
|
|
12306
12633
|
{
|
|
12307
12634
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12308
12635
|
onClick: () => setLockRatio(!lockRatio)
|
|
12309
12636
|
},
|
|
12310
12637
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12311
|
-
)), /* @__PURE__ */
|
|
12638
|
+
)), /* @__PURE__ */ React117.createElement(
|
|
12312
12639
|
"input",
|
|
12313
12640
|
{
|
|
12314
12641
|
type: "number",
|
|
@@ -12316,7 +12643,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12316
12643
|
value: height,
|
|
12317
12644
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12318
12645
|
}
|
|
12319
|
-
))), /* @__PURE__ */
|
|
12646
|
+
))), /* @__PURE__ */ React117.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ React117.createElement(
|
|
12320
12647
|
"input",
|
|
12321
12648
|
{
|
|
12322
12649
|
type: "text",
|
|
@@ -12324,7 +12651,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12324
12651
|
value: src,
|
|
12325
12652
|
onChange: (e) => setSrc(e.target.value)
|
|
12326
12653
|
}
|
|
12327
|
-
), /* @__PURE__ */
|
|
12654
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ React117.createElement(
|
|
12328
12655
|
"input",
|
|
12329
12656
|
{
|
|
12330
12657
|
type: "number",
|
|
@@ -12332,7 +12659,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12332
12659
|
value: width,
|
|
12333
12660
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12334
12661
|
}
|
|
12335
|
-
), /* @__PURE__ */
|
|
12662
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ React117.createElement(
|
|
12336
12663
|
"input",
|
|
12337
12664
|
{
|
|
12338
12665
|
type: "number",
|
|
@@ -12340,7 +12667,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12340
12667
|
value: height,
|
|
12341
12668
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12342
12669
|
}
|
|
12343
|
-
)))), /* @__PURE__ */
|
|
12670
|
+
)))), /* @__PURE__ */ React117.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12344
12671
|
};
|
|
12345
12672
|
var VideoToolbar = ({ editor }) => {
|
|
12346
12673
|
const [showModal, setShowModal] = useState33(false);
|
|
@@ -12380,7 +12707,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12380
12707
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12381
12708
|
const nodeType = node?.type.name;
|
|
12382
12709
|
if (!editor || !isVideo || !pos) return showModal ? createPortal6(
|
|
12383
|
-
/* @__PURE__ */
|
|
12710
|
+
/* @__PURE__ */ React117.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12384
12711
|
document.body
|
|
12385
12712
|
) : null;
|
|
12386
12713
|
const handleDelete = () => {
|
|
@@ -12427,7 +12754,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12427
12754
|
);
|
|
12428
12755
|
};
|
|
12429
12756
|
return createPortal6(
|
|
12430
|
-
/* @__PURE__ */
|
|
12757
|
+
/* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(
|
|
12431
12758
|
"div",
|
|
12432
12759
|
{
|
|
12433
12760
|
className: "image-toolbar",
|
|
@@ -12435,30 +12762,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12435
12762
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12436
12763
|
onMouseDown: (e) => e.preventDefault()
|
|
12437
12764
|
},
|
|
12438
|
-
/* @__PURE__ */
|
|
12439
|
-
/* @__PURE__ */
|
|
12440
|
-
/* @__PURE__ */
|
|
12441
|
-
/* @__PURE__ */
|
|
12765
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12766
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12767
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React117.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12768
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12442
12769
|
setShowSize(!showSize);
|
|
12443
12770
|
setShowAlign(false);
|
|
12444
|
-
} }, /* @__PURE__ */
|
|
12771
|
+
} }, /* @__PURE__ */ React117.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12445
12772
|
handleResize("small");
|
|
12446
12773
|
setShowSize(false);
|
|
12447
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12774
|
+
} }, "Small (320x180)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12448
12775
|
handleResize("medium");
|
|
12449
12776
|
setShowSize(false);
|
|
12450
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12777
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12451
12778
|
handleResize("large");
|
|
12452
12779
|
setShowSize(false);
|
|
12453
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12780
|
+
} }, "Large (640x360)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12454
12781
|
handleResize("full");
|
|
12455
12782
|
setShowSize(false);
|
|
12456
12783
|
} }, "Full (854x480)"))),
|
|
12457
|
-
/* @__PURE__ */
|
|
12784
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12458
12785
|
setShowAlign(!showAlign);
|
|
12459
12786
|
setShowSize(false);
|
|
12460
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12461
|
-
), showModal && /* @__PURE__ */
|
|
12787
|
+
} }, "\u2630 ", /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React117.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12788
|
+
), showModal && /* @__PURE__ */ React117.createElement(
|
|
12462
12789
|
VideoPropertiesModal,
|
|
12463
12790
|
{
|
|
12464
12791
|
editor,
|
|
@@ -12473,18 +12800,18 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12473
12800
|
var VideoToolbar_default = VideoToolbar;
|
|
12474
12801
|
|
|
12475
12802
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12476
|
-
import
|
|
12803
|
+
import React118, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
|
|
12477
12804
|
import { createPortal as createPortal7 } from "react-dom";
|
|
12478
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12479
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12480
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12481
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12482
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12483
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12484
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12485
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12486
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12487
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12805
|
+
var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12806
|
+
var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12807
|
+
var IconAddColBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12808
|
+
var IconAddColAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12809
|
+
var IconDeleteRow = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12810
|
+
var IconDeleteCol = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12811
|
+
var IconDeleteTable = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.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__ */ React118.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" }));
|
|
12812
|
+
var IconMergeCells = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React118.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12813
|
+
var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12814
|
+
var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12488
12815
|
var TableToolbar = ({ editor }) => {
|
|
12489
12816
|
const [pos, setPos] = useState34(null);
|
|
12490
12817
|
const toolbarRef = useRef31(null);
|
|
@@ -12532,7 +12859,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12532
12859
|
const canSplit = editor.can().splitCell();
|
|
12533
12860
|
const prevent = (e) => e.preventDefault();
|
|
12534
12861
|
return createPortal7(
|
|
12535
|
-
/* @__PURE__ */
|
|
12862
|
+
/* @__PURE__ */ React118.createElement(
|
|
12536
12863
|
"div",
|
|
12537
12864
|
{
|
|
12538
12865
|
ref: toolbarRef,
|
|
@@ -12540,19 +12867,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12540
12867
|
style: { top: pos.top, left: pos.left },
|
|
12541
12868
|
onMouseDown: prevent
|
|
12542
12869
|
},
|
|
12543
|
-
/* @__PURE__ */
|
|
12544
|
-
/* @__PURE__ */
|
|
12545
|
-
/* @__PURE__ */
|
|
12546
|
-
/* @__PURE__ */
|
|
12547
|
-
/* @__PURE__ */
|
|
12548
|
-
/* @__PURE__ */
|
|
12549
|
-
/* @__PURE__ */
|
|
12550
|
-
/* @__PURE__ */
|
|
12551
|
-
/* @__PURE__ */
|
|
12552
|
-
/* @__PURE__ */
|
|
12553
|
-
/* @__PURE__ */
|
|
12554
|
-
/* @__PURE__ */
|
|
12555
|
-
/* @__PURE__ */
|
|
12870
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddRowBefore, null))),
|
|
12871
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddRowAfter, null))),
|
|
12872
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React118.createElement(IconDeleteRow, null))),
|
|
12873
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12874
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddColBefore, null))),
|
|
12875
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddColAfter, null))),
|
|
12876
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React118.createElement(IconDeleteCol, null))),
|
|
12877
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12878
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React118.createElement(IconMergeCells, null))),
|
|
12879
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React118.createElement(IconSplitCell, null))),
|
|
12880
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12881
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React118.createElement(IconToggleHeader, null))),
|
|
12882
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React118.createElement(IconDeleteTable, null)))
|
|
12556
12883
|
),
|
|
12557
12884
|
document.body
|
|
12558
12885
|
);
|
|
@@ -12718,7 +13045,7 @@ var RufousTextEditor = ({
|
|
|
12718
13045
|
sx
|
|
12719
13046
|
}) => {
|
|
12720
13047
|
const sxClass = useSx(sx);
|
|
12721
|
-
const toolbarButtons =
|
|
13048
|
+
const toolbarButtons = useMemo5(() => {
|
|
12722
13049
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12723
13050
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12724
13051
|
if (hideButtons) {
|
|
@@ -12726,7 +13053,7 @@ var RufousTextEditor = ({
|
|
|
12726
13053
|
}
|
|
12727
13054
|
return visible;
|
|
12728
13055
|
}, [buttons, variant, hideButtons]);
|
|
12729
|
-
const mentionSuggestion =
|
|
13056
|
+
const mentionSuggestion = useMemo5(() => createMentionSuggestion(mentions), [mentions]);
|
|
12730
13057
|
const onChangeRef = useRef32(onChange);
|
|
12731
13058
|
const onBlurRef = useRef32(onBlur);
|
|
12732
13059
|
useEffect29(() => {
|
|
@@ -12860,7 +13187,7 @@ var RufousTextEditor = ({
|
|
|
12860
13187
|
const [linkNewTab, setLinkNewTab] = useState35(true);
|
|
12861
13188
|
const [linkNoFollow, setLinkNoFollow] = useState35(true);
|
|
12862
13189
|
const [linkSelection, setLinkSelection] = useState35(null);
|
|
12863
|
-
const setLink =
|
|
13190
|
+
const setLink = useCallback16(() => {
|
|
12864
13191
|
if (!editor) return;
|
|
12865
13192
|
const attrs = editor.getAttributes("link");
|
|
12866
13193
|
const previousUrl = attrs.href || "";
|
|
@@ -12932,7 +13259,7 @@ var RufousTextEditor = ({
|
|
|
12932
13259
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12933
13260
|
};
|
|
12934
13261
|
}, [editor]);
|
|
12935
|
-
const handleLinkSubmit =
|
|
13262
|
+
const handleLinkSubmit = useCallback16(() => {
|
|
12936
13263
|
if (!editor || !linkSelection) return;
|
|
12937
13264
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12938
13265
|
if (linkUrl === "") {
|
|
@@ -12968,7 +13295,7 @@ var RufousTextEditor = ({
|
|
|
12968
13295
|
setLinkClassName("");
|
|
12969
13296
|
setLinkSelection(null);
|
|
12970
13297
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
12971
|
-
const handleLinkRemove =
|
|
13298
|
+
const handleLinkRemove = useCallback16(() => {
|
|
12972
13299
|
if (!editor || !linkSelection) return;
|
|
12973
13300
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
12974
13301
|
setLinkModalOpen(false);
|
|
@@ -12977,7 +13304,7 @@ var RufousTextEditor = ({
|
|
|
12977
13304
|
setLinkClassName("");
|
|
12978
13305
|
setLinkSelection(null);
|
|
12979
13306
|
}, [editor, linkSelection]);
|
|
12980
|
-
const handleLinkCancel =
|
|
13307
|
+
const handleLinkCancel = useCallback16(() => {
|
|
12981
13308
|
setLinkModalOpen(false);
|
|
12982
13309
|
setLinkUrl("");
|
|
12983
13310
|
setLinkText("");
|
|
@@ -12986,20 +13313,20 @@ var RufousTextEditor = ({
|
|
|
12986
13313
|
editor?.chain().focus().run();
|
|
12987
13314
|
}, [editor]);
|
|
12988
13315
|
const [saveStatus, setSaveStatus] = useState35("");
|
|
12989
|
-
const handleSave =
|
|
13316
|
+
const handleSave = useCallback16(() => {
|
|
12990
13317
|
if (!editor || !onSaveProp) return;
|
|
12991
13318
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
12992
13319
|
setSaveStatus("Saved!");
|
|
12993
13320
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
12994
13321
|
}, [editor, onSaveProp]);
|
|
12995
|
-
const handleExport =
|
|
13322
|
+
const handleExport = useCallback16(() => {
|
|
12996
13323
|
if (!editor || !onExportProp) return;
|
|
12997
13324
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
12998
13325
|
}, [editor, onExportProp]);
|
|
12999
|
-
const providerValue =
|
|
13326
|
+
const providerValue = useMemo5(() => ({ editor }), [editor]);
|
|
13000
13327
|
const [isFullscreen, setIsFullscreen] = useState35(false);
|
|
13001
|
-
const toggleFullscreen =
|
|
13002
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13328
|
+
const toggleFullscreen = useCallback16(() => setIsFullscreen((prev) => !prev), []);
|
|
13329
|
+
const wrapperJsx = /* @__PURE__ */ React119.createElement(
|
|
13003
13330
|
"div",
|
|
13004
13331
|
{
|
|
13005
13332
|
ref: wrapperRef,
|
|
@@ -13010,7 +13337,7 @@ var RufousTextEditor = ({
|
|
|
13010
13337
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13011
13338
|
}
|
|
13012
13339
|
},
|
|
13013
|
-
/* @__PURE__ */
|
|
13340
|
+
/* @__PURE__ */ React119.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React119.createElement(
|
|
13014
13341
|
Toolbar_default,
|
|
13015
13342
|
{
|
|
13016
13343
|
editor,
|
|
@@ -13025,7 +13352,7 @@ var RufousTextEditor = ({
|
|
|
13025
13352
|
isFullscreen,
|
|
13026
13353
|
onToggleFullscreen: toggleFullscreen
|
|
13027
13354
|
}
|
|
13028
|
-
), /* @__PURE__ */
|
|
13355
|
+
), /* @__PURE__ */ React119.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React119.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React119.createElement(
|
|
13029
13356
|
BubbleMenu,
|
|
13030
13357
|
{
|
|
13031
13358
|
editor,
|
|
@@ -13043,31 +13370,31 @@ var RufousTextEditor = ({
|
|
|
13043
13370
|
}
|
|
13044
13371
|
}
|
|
13045
13372
|
},
|
|
13046
|
-
/* @__PURE__ */
|
|
13373
|
+
/* @__PURE__ */ React119.createElement(
|
|
13047
13374
|
"button",
|
|
13048
13375
|
{
|
|
13049
13376
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13050
13377
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13051
13378
|
},
|
|
13052
|
-
/* @__PURE__ */
|
|
13379
|
+
/* @__PURE__ */ React119.createElement("strong", null, "B")
|
|
13053
13380
|
),
|
|
13054
|
-
/* @__PURE__ */
|
|
13381
|
+
/* @__PURE__ */ React119.createElement(
|
|
13055
13382
|
"button",
|
|
13056
13383
|
{
|
|
13057
13384
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13058
13385
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13059
13386
|
},
|
|
13060
|
-
/* @__PURE__ */
|
|
13387
|
+
/* @__PURE__ */ React119.createElement("em", null, "I")
|
|
13061
13388
|
),
|
|
13062
|
-
/* @__PURE__ */
|
|
13389
|
+
/* @__PURE__ */ React119.createElement(
|
|
13063
13390
|
"button",
|
|
13064
13391
|
{
|
|
13065
13392
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13066
13393
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13067
13394
|
},
|
|
13068
|
-
/* @__PURE__ */
|
|
13395
|
+
/* @__PURE__ */ React119.createElement("s", null, "S")
|
|
13069
13396
|
),
|
|
13070
|
-
/* @__PURE__ */
|
|
13397
|
+
/* @__PURE__ */ React119.createElement(
|
|
13071
13398
|
"button",
|
|
13072
13399
|
{
|
|
13073
13400
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13075,7 +13402,7 @@ var RufousTextEditor = ({
|
|
|
13075
13402
|
},
|
|
13076
13403
|
"</>"
|
|
13077
13404
|
),
|
|
13078
|
-
/* @__PURE__ */
|
|
13405
|
+
/* @__PURE__ */ React119.createElement(
|
|
13079
13406
|
"button",
|
|
13080
13407
|
{
|
|
13081
13408
|
onClick: setLink,
|
|
@@ -13083,7 +13410,7 @@ var RufousTextEditor = ({
|
|
|
13083
13410
|
},
|
|
13084
13411
|
"\u{1F517}"
|
|
13085
13412
|
)
|
|
13086
|
-
), editor && /* @__PURE__ */
|
|
13413
|
+
), editor && /* @__PURE__ */ React119.createElement(
|
|
13087
13414
|
FloatingMenu,
|
|
13088
13415
|
{
|
|
13089
13416
|
editor,
|
|
@@ -13098,7 +13425,7 @@ var RufousTextEditor = ({
|
|
|
13098
13425
|
}
|
|
13099
13426
|
}
|
|
13100
13427
|
},
|
|
13101
|
-
/* @__PURE__ */
|
|
13428
|
+
/* @__PURE__ */ React119.createElement(
|
|
13102
13429
|
"button",
|
|
13103
13430
|
{
|
|
13104
13431
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13106,7 +13433,7 @@ var RufousTextEditor = ({
|
|
|
13106
13433
|
},
|
|
13107
13434
|
"H1"
|
|
13108
13435
|
),
|
|
13109
|
-
/* @__PURE__ */
|
|
13436
|
+
/* @__PURE__ */ React119.createElement(
|
|
13110
13437
|
"button",
|
|
13111
13438
|
{
|
|
13112
13439
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13114,7 +13441,7 @@ var RufousTextEditor = ({
|
|
|
13114
13441
|
},
|
|
13115
13442
|
"H2"
|
|
13116
13443
|
),
|
|
13117
|
-
/* @__PURE__ */
|
|
13444
|
+
/* @__PURE__ */ React119.createElement(
|
|
13118
13445
|
"button",
|
|
13119
13446
|
{
|
|
13120
13447
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13122,7 +13449,7 @@ var RufousTextEditor = ({
|
|
|
13122
13449
|
},
|
|
13123
13450
|
"\u2022 List"
|
|
13124
13451
|
),
|
|
13125
|
-
/* @__PURE__ */
|
|
13452
|
+
/* @__PURE__ */ React119.createElement(
|
|
13126
13453
|
"button",
|
|
13127
13454
|
{
|
|
13128
13455
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13130,7 +13457,7 @@ var RufousTextEditor = ({
|
|
|
13130
13457
|
},
|
|
13131
13458
|
"1. List"
|
|
13132
13459
|
),
|
|
13133
|
-
/* @__PURE__ */
|
|
13460
|
+
/* @__PURE__ */ React119.createElement(
|
|
13134
13461
|
"button",
|
|
13135
13462
|
{
|
|
13136
13463
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13138,8 +13465,8 @@ var RufousTextEditor = ({
|
|
|
13138
13465
|
},
|
|
13139
13466
|
"\u201C Quote"
|
|
13140
13467
|
)
|
|
13141
|
-
), /* @__PURE__ */
|
|
13142
|
-
/* @__PURE__ */
|
|
13468
|
+
), /* @__PURE__ */ React119.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React119.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React119.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React119.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
|
|
13469
|
+
/* @__PURE__ */ React119.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React119.createElement(
|
|
13143
13470
|
"input",
|
|
13144
13471
|
{
|
|
13145
13472
|
type: "url",
|
|
@@ -13152,7 +13479,7 @@ var RufousTextEditor = ({
|
|
|
13152
13479
|
placeholder: "https://example.com",
|
|
13153
13480
|
autoFocus: true
|
|
13154
13481
|
}
|
|
13155
|
-
)), /* @__PURE__ */
|
|
13482
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React119.createElement(
|
|
13156
13483
|
"input",
|
|
13157
13484
|
{
|
|
13158
13485
|
type: "text",
|
|
@@ -13164,24 +13491,24 @@ var RufousTextEditor = ({
|
|
|
13164
13491
|
},
|
|
13165
13492
|
placeholder: "Link text"
|
|
13166
13493
|
}
|
|
13167
|
-
)), /* @__PURE__ */
|
|
13494
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13168
13495
|
"input",
|
|
13169
13496
|
{
|
|
13170
13497
|
type: "checkbox",
|
|
13171
13498
|
checked: linkNewTab,
|
|
13172
13499
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13173
13500
|
}
|
|
13174
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13501
|
+
), "Open in new tab"), /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13175
13502
|
"input",
|
|
13176
13503
|
{
|
|
13177
13504
|
type: "checkbox",
|
|
13178
13505
|
checked: linkNoFollow,
|
|
13179
13506
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13180
13507
|
}
|
|
13181
|
-
), "No follow"))), /* @__PURE__ */
|
|
13508
|
+
), "No follow"))), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13182
13509
|
document.body
|
|
13183
13510
|
)),
|
|
13184
|
-
helperText && /* @__PURE__ */
|
|
13511
|
+
helperText && /* @__PURE__ */ React119.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13185
13512
|
);
|
|
13186
13513
|
return isFullscreen ? createPortal8(wrapperJsx, document.body) : wrapperJsx;
|
|
13187
13514
|
};
|
|
@@ -13192,7 +13519,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13192
13519
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13193
13520
|
} catch {
|
|
13194
13521
|
}
|
|
13195
|
-
return /* @__PURE__ */
|
|
13522
|
+
return /* @__PURE__ */ React119.createElement(
|
|
13196
13523
|
"div",
|
|
13197
13524
|
{
|
|
13198
13525
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13306,6 +13633,7 @@ export {
|
|
|
13306
13633
|
Skeleton,
|
|
13307
13634
|
Slide,
|
|
13308
13635
|
Slider,
|
|
13636
|
+
SmartSelect,
|
|
13309
13637
|
Snackbar,
|
|
13310
13638
|
softSkillsIcon_default as SoftSkillsIcon,
|
|
13311
13639
|
Stack,
|
|
@@ -13336,6 +13664,7 @@ export {
|
|
|
13336
13664
|
unsubscribeIcon_default as UnsubscribeIcon,
|
|
13337
13665
|
uploadIcon_default as UploadIcon,
|
|
13338
13666
|
userAssignIcon_default as UserAssignIcon,
|
|
13667
|
+
UserSelectionField,
|
|
13339
13668
|
viewIcon_default as ViewIcon,
|
|
13340
13669
|
workItemIcon_default as WorkItemIcon,
|
|
13341
13670
|
Zoom,
|