@rufous/ui 0.3.15 → 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 +665 -433
- package/dist/main.css +24 -0
- package/dist/main.d.cts +78 -1
- package/dist/main.d.ts +78 -1
- package/dist/main.js +539 -308
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -133,6 +133,7 @@ __export(main_exports, {
|
|
|
133
133
|
Skeleton: () => Skeleton,
|
|
134
134
|
Slide: () => Slide,
|
|
135
135
|
Slider: () => Slider,
|
|
136
|
+
SmartSelect: () => SmartSelect,
|
|
136
137
|
Snackbar: () => Snackbar,
|
|
137
138
|
SoftSkillsIcon: () => softSkillsIcon_default,
|
|
138
139
|
Stack: () => Stack,
|
|
@@ -5382,6 +5383,10 @@ var CheckIcon2 = () => /* @__PURE__ */ import_react24.default.createElement("svg
|
|
|
5382
5383
|
function normaliseOptions(options) {
|
|
5383
5384
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5384
5385
|
}
|
|
5386
|
+
function OptionIcon({ icon }) {
|
|
5387
|
+
if (!icon) return null;
|
|
5388
|
+
return /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ import_react24.default.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : import_react24.default.createElement(icon, { size: 16 }));
|
|
5389
|
+
}
|
|
5385
5390
|
var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
5386
5391
|
const {
|
|
5387
5392
|
options: rawOptions,
|
|
@@ -5550,7 +5555,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5550
5555
|
}
|
|
5551
5556
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5552
5557
|
if (selectedOpt) {
|
|
5553
|
-
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5558
|
+
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5554
5559
|
}
|
|
5555
5560
|
return /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5556
5561
|
};
|
|
@@ -5608,6 +5613,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5608
5613
|
onMouseDown: (e) => e.preventDefault(),
|
|
5609
5614
|
onClick: (e) => selectOption(opt, e)
|
|
5610
5615
|
},
|
|
5616
|
+
/* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: opt.icon }),
|
|
5611
5617
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5612
5618
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(CheckIcon2, null))
|
|
5613
5619
|
);
|
|
@@ -9464,7 +9470,7 @@ function UserSelectionField({
|
|
|
9464
9470
|
multiple,
|
|
9465
9471
|
limitTags,
|
|
9466
9472
|
loading,
|
|
9467
|
-
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement(
|
|
9473
|
+
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9468
9474
|
getOptionLabel: getLabel,
|
|
9469
9475
|
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9470
9476
|
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
@@ -9488,10 +9494,235 @@ function UserSelectionField({
|
|
|
9488
9494
|
);
|
|
9489
9495
|
}
|
|
9490
9496
|
|
|
9497
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9498
|
+
var import_react51 = __toESM(require("react"), 1);
|
|
9499
|
+
var CheckIcon3 = () => /* @__PURE__ */ import_react51.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react51.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9500
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9501
|
+
return options.flatMap((opt) => [
|
|
9502
|
+
{ option: opt, depth },
|
|
9503
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9504
|
+
]);
|
|
9505
|
+
}
|
|
9506
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9507
|
+
const ids = [getValue(option)];
|
|
9508
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9509
|
+
return ids;
|
|
9510
|
+
}
|
|
9511
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9512
|
+
for (const opt of options) {
|
|
9513
|
+
map.set(getValue(opt), opt);
|
|
9514
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9515
|
+
}
|
|
9516
|
+
return map;
|
|
9517
|
+
}
|
|
9518
|
+
function SmartSelect({
|
|
9519
|
+
options,
|
|
9520
|
+
value,
|
|
9521
|
+
onChange,
|
|
9522
|
+
onSearchChange,
|
|
9523
|
+
getOptionLabel,
|
|
9524
|
+
getOptionValue,
|
|
9525
|
+
getOptionSubLabel,
|
|
9526
|
+
getOptionChildren,
|
|
9527
|
+
multiple = false,
|
|
9528
|
+
allowChildNodesSelection = true,
|
|
9529
|
+
loading = false,
|
|
9530
|
+
loadingText,
|
|
9531
|
+
filterOptions: filterOptionsProp,
|
|
9532
|
+
renderOption: renderOptionProp,
|
|
9533
|
+
limitTags,
|
|
9534
|
+
label,
|
|
9535
|
+
placeholder,
|
|
9536
|
+
variant = "outlined",
|
|
9537
|
+
size = "small",
|
|
9538
|
+
disabled = false,
|
|
9539
|
+
error = false,
|
|
9540
|
+
helperText,
|
|
9541
|
+
fullWidth = true,
|
|
9542
|
+
required = false,
|
|
9543
|
+
className,
|
|
9544
|
+
style,
|
|
9545
|
+
sx
|
|
9546
|
+
}) {
|
|
9547
|
+
const getValue = (0, import_react51.useCallback)(
|
|
9548
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9549
|
+
[getOptionValue, getOptionLabel]
|
|
9550
|
+
);
|
|
9551
|
+
const flatItems = (0, import_react51.useMemo)(() => {
|
|
9552
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9553
|
+
return flattenTree(options, getOptionChildren);
|
|
9554
|
+
}, [options, getOptionChildren]);
|
|
9555
|
+
const flatOptionsList = (0, import_react51.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9556
|
+
const depthMap = (0, import_react51.useMemo)(() => {
|
|
9557
|
+
const map = /* @__PURE__ */ new Map();
|
|
9558
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9559
|
+
return map;
|
|
9560
|
+
}, [flatItems, getValue]);
|
|
9561
|
+
const lookup = (0, import_react51.useMemo)(
|
|
9562
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9563
|
+
[options, getOptionChildren, getValue]
|
|
9564
|
+
);
|
|
9565
|
+
const selectedKeys = (0, import_react51.useMemo)(() => {
|
|
9566
|
+
if (multiple) {
|
|
9567
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9568
|
+
}
|
|
9569
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9570
|
+
}, [multiple, value, getValue]);
|
|
9571
|
+
const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
|
|
9572
|
+
if (!onSearchChange) return;
|
|
9573
|
+
if (!inputValue) {
|
|
9574
|
+
onSearchChange("");
|
|
9575
|
+
return;
|
|
9576
|
+
}
|
|
9577
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9578
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9579
|
+
);
|
|
9580
|
+
if (!hasLocalMatch) {
|
|
9581
|
+
onSearchChange(inputValue);
|
|
9582
|
+
}
|
|
9583
|
+
}, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9584
|
+
const handleChange = (0, import_react51.useCallback)((_, newValue) => {
|
|
9585
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9586
|
+
onChange?.(newValue);
|
|
9587
|
+
return;
|
|
9588
|
+
}
|
|
9589
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9590
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9591
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9592
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9593
|
+
let changedKey = null;
|
|
9594
|
+
let wasAdded = false;
|
|
9595
|
+
for (const k of newKeys) {
|
|
9596
|
+
if (!currentKeys.has(k)) {
|
|
9597
|
+
changedKey = k;
|
|
9598
|
+
wasAdded = true;
|
|
9599
|
+
break;
|
|
9600
|
+
}
|
|
9601
|
+
}
|
|
9602
|
+
if (changedKey === null) {
|
|
9603
|
+
for (const k of currentKeys) {
|
|
9604
|
+
if (!newKeys.has(k)) {
|
|
9605
|
+
changedKey = k;
|
|
9606
|
+
wasAdded = false;
|
|
9607
|
+
break;
|
|
9608
|
+
}
|
|
9609
|
+
}
|
|
9610
|
+
}
|
|
9611
|
+
if (changedKey !== null) {
|
|
9612
|
+
const opt = lookup.get(changedKey);
|
|
9613
|
+
if (opt) {
|
|
9614
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9615
|
+
if (wasAdded) {
|
|
9616
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9617
|
+
} else {
|
|
9618
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9619
|
+
}
|
|
9620
|
+
}
|
|
9621
|
+
}
|
|
9622
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9623
|
+
onChange?.(result);
|
|
9624
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9625
|
+
const defaultRenderOption = (0, import_react51.useCallback)((props, option) => {
|
|
9626
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9627
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9628
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9629
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9630
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9631
|
+
"li",
|
|
9632
|
+
{
|
|
9633
|
+
key,
|
|
9634
|
+
...rest,
|
|
9635
|
+
className: muiClass,
|
|
9636
|
+
style: {
|
|
9637
|
+
...muiStyle,
|
|
9638
|
+
display: "flex",
|
|
9639
|
+
alignItems: "center",
|
|
9640
|
+
gap: 10,
|
|
9641
|
+
padding: "8px 16px",
|
|
9642
|
+
paddingLeft: 16 + depth * 20,
|
|
9643
|
+
fontSize: "0.9rem",
|
|
9644
|
+
color: "rgba(0,0,0,0.87)",
|
|
9645
|
+
cursor: "pointer",
|
|
9646
|
+
userSelect: "none",
|
|
9647
|
+
minHeight: 40,
|
|
9648
|
+
boxSizing: "border-box",
|
|
9649
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9650
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9651
|
+
listStyle: "none"
|
|
9652
|
+
}
|
|
9653
|
+
},
|
|
9654
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9655
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: {
|
|
9656
|
+
color: "var(--primary-color, #a41b06)",
|
|
9657
|
+
flexShrink: 0,
|
|
9658
|
+
display: "flex",
|
|
9659
|
+
alignItems: "center",
|
|
9660
|
+
opacity: isSelected ? 1 : 0,
|
|
9661
|
+
transition: "opacity 0.1s"
|
|
9662
|
+
} }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
|
|
9663
|
+
);
|
|
9664
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9665
|
+
const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue) => {
|
|
9666
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9667
|
+
if (multiple) {
|
|
9668
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9669
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9670
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9671
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9672
|
+
) : unselected;
|
|
9673
|
+
return [...selected, ...filteredRest];
|
|
9674
|
+
}
|
|
9675
|
+
if (value != null) {
|
|
9676
|
+
const selectedLabel = getOptionLabel(value);
|
|
9677
|
+
if (inputValue === selectedLabel) {
|
|
9678
|
+
const selectedKey = getValue(value);
|
|
9679
|
+
return [
|
|
9680
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9681
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9682
|
+
];
|
|
9683
|
+
}
|
|
9684
|
+
}
|
|
9685
|
+
if (!inputValue) return opts;
|
|
9686
|
+
const q = inputValue.toLowerCase();
|
|
9687
|
+
return opts.filter(
|
|
9688
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9689
|
+
);
|
|
9690
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9691
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9692
|
+
Autocomplete,
|
|
9693
|
+
{
|
|
9694
|
+
options: flatOptionsList,
|
|
9695
|
+
value: value ?? (multiple ? [] : null),
|
|
9696
|
+
onChange: handleChange,
|
|
9697
|
+
onInputChange: handleInputChange,
|
|
9698
|
+
multiple,
|
|
9699
|
+
limitTags,
|
|
9700
|
+
loading,
|
|
9701
|
+
loadingText: loadingText ?? /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9702
|
+
getOptionLabel,
|
|
9703
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9704
|
+
filterOptions: computedFilterOptions,
|
|
9705
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9706
|
+
label,
|
|
9707
|
+
placeholder: placeholder ?? label,
|
|
9708
|
+
size,
|
|
9709
|
+
variant,
|
|
9710
|
+
disabled,
|
|
9711
|
+
error,
|
|
9712
|
+
helperText,
|
|
9713
|
+
fullWidth,
|
|
9714
|
+
required,
|
|
9715
|
+
className,
|
|
9716
|
+
style,
|
|
9717
|
+
sx
|
|
9718
|
+
}
|
|
9719
|
+
);
|
|
9720
|
+
}
|
|
9721
|
+
|
|
9491
9722
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9492
|
-
var
|
|
9723
|
+
var import_react62 = __toESM(require("react"), 1);
|
|
9493
9724
|
var import_react_dom18 = require("react-dom");
|
|
9494
|
-
var
|
|
9725
|
+
var import_react63 = require("@tiptap/react");
|
|
9495
9726
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
9496
9727
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
9497
9728
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -9511,21 +9742,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
9511
9742
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
9512
9743
|
|
|
9513
9744
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
9514
|
-
var
|
|
9745
|
+
var import_react53 = require("@tiptap/react");
|
|
9515
9746
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
9516
9747
|
|
|
9517
9748
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9518
|
-
var
|
|
9519
|
-
var MentionList = (0,
|
|
9520
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9749
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
9750
|
+
var MentionList = (0, import_react52.forwardRef)((props, ref) => {
|
|
9751
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react52.useState)(0);
|
|
9521
9752
|
const selectItem = (index) => {
|
|
9522
9753
|
const item = props.items[index];
|
|
9523
9754
|
if (item) {
|
|
9524
9755
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
9525
9756
|
}
|
|
9526
9757
|
};
|
|
9527
|
-
(0,
|
|
9528
|
-
(0,
|
|
9758
|
+
(0, import_react52.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9759
|
+
(0, import_react52.useImperativeHandle)(ref, () => ({
|
|
9529
9760
|
onKeyDown: ({ event }) => {
|
|
9530
9761
|
if (event.key === "ArrowUp") {
|
|
9531
9762
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -9543,17 +9774,17 @@ var MentionList = (0, import_react51.forwardRef)((props, ref) => {
|
|
|
9543
9774
|
}
|
|
9544
9775
|
}));
|
|
9545
9776
|
if (!props.items.length) {
|
|
9546
|
-
return /* @__PURE__ */
|
|
9777
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9547
9778
|
}
|
|
9548
|
-
return /* @__PURE__ */
|
|
9779
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react52.default.createElement(
|
|
9549
9780
|
"button",
|
|
9550
9781
|
{
|
|
9551
9782
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9552
9783
|
key: item.id,
|
|
9553
9784
|
onClick: () => selectItem(index)
|
|
9554
9785
|
},
|
|
9555
|
-
/* @__PURE__ */
|
|
9556
|
-
/* @__PURE__ */
|
|
9786
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9787
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9557
9788
|
)));
|
|
9558
9789
|
});
|
|
9559
9790
|
MentionList.displayName = "MentionList";
|
|
@@ -9573,7 +9804,7 @@ function createMentionSuggestion(users) {
|
|
|
9573
9804
|
return {
|
|
9574
9805
|
onStart: (props) => {
|
|
9575
9806
|
if (!props.clientRect) return;
|
|
9576
|
-
component = new
|
|
9807
|
+
component = new import_react53.ReactRenderer(MentionList_default, {
|
|
9577
9808
|
props,
|
|
9578
9809
|
editor: props.editor
|
|
9579
9810
|
});
|
|
@@ -9611,21 +9842,21 @@ function createMentionSuggestion(users) {
|
|
|
9611
9842
|
}
|
|
9612
9843
|
|
|
9613
9844
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9614
|
-
var
|
|
9845
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
9615
9846
|
var import_react_dom14 = require("react-dom");
|
|
9616
9847
|
|
|
9617
9848
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9618
|
-
var
|
|
9619
|
-
var TextToSpeech = (0,
|
|
9620
|
-
const [speaking, setSpeaking] = (0,
|
|
9621
|
-
const [paused, setPaused] = (0,
|
|
9622
|
-
const [voices, setVoices] = (0,
|
|
9623
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
9624
|
-
const [rate, setRate] = (0,
|
|
9625
|
-
const [showPanel, setShowPanel] = (0,
|
|
9626
|
-
const utteranceRef = (0,
|
|
9627
|
-
const panelRef = (0,
|
|
9628
|
-
(0,
|
|
9849
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9850
|
+
var TextToSpeech = (0, import_react54.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9851
|
+
const [speaking, setSpeaking] = (0, import_react54.useState)(false);
|
|
9852
|
+
const [paused, setPaused] = (0, import_react54.useState)(false);
|
|
9853
|
+
const [voices, setVoices] = (0, import_react54.useState)([]);
|
|
9854
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react54.useState)("");
|
|
9855
|
+
const [rate, setRate] = (0, import_react54.useState)(1);
|
|
9856
|
+
const [showPanel, setShowPanel] = (0, import_react54.useState)(false);
|
|
9857
|
+
const utteranceRef = (0, import_react54.useRef)(null);
|
|
9858
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9859
|
+
(0, import_react54.useEffect)(() => {
|
|
9629
9860
|
const synth = window.speechSynthesis;
|
|
9630
9861
|
const loadVoices = () => {
|
|
9631
9862
|
const available = synth.getVoices();
|
|
@@ -9643,7 +9874,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9643
9874
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9644
9875
|
};
|
|
9645
9876
|
}, [selectedVoice]);
|
|
9646
|
-
(0,
|
|
9877
|
+
(0, import_react54.useEffect)(() => {
|
|
9647
9878
|
const handleClick = (e) => {
|
|
9648
9879
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9649
9880
|
setShowPanel(false);
|
|
@@ -9652,7 +9883,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9652
9883
|
document.addEventListener("mousedown", handleClick);
|
|
9653
9884
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9654
9885
|
}, []);
|
|
9655
|
-
const getTextToSpeak = (0,
|
|
9886
|
+
const getTextToSpeak = (0, import_react54.useCallback)(() => {
|
|
9656
9887
|
if (!editor) return "";
|
|
9657
9888
|
const { from, to, empty } = editor.state.selection;
|
|
9658
9889
|
if (!empty) {
|
|
@@ -9660,7 +9891,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9660
9891
|
}
|
|
9661
9892
|
return editor.getText();
|
|
9662
9893
|
}, [editor]);
|
|
9663
|
-
const handleSpeak = (0,
|
|
9894
|
+
const handleSpeak = (0, import_react54.useCallback)(async () => {
|
|
9664
9895
|
const text = getTextToSpeak();
|
|
9665
9896
|
if (!text.trim()) return;
|
|
9666
9897
|
if (onTextToSpeech) {
|
|
@@ -9702,25 +9933,25 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9702
9933
|
setSpeaking(true);
|
|
9703
9934
|
setPaused(false);
|
|
9704
9935
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9705
|
-
const handlePause = (0,
|
|
9936
|
+
const handlePause = (0, import_react54.useCallback)(() => {
|
|
9706
9937
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9707
9938
|
window.speechSynthesis.pause();
|
|
9708
9939
|
setPaused(true);
|
|
9709
9940
|
}
|
|
9710
9941
|
}, []);
|
|
9711
|
-
const handleResume = (0,
|
|
9942
|
+
const handleResume = (0, import_react54.useCallback)(() => {
|
|
9712
9943
|
if (window.speechSynthesis.paused) {
|
|
9713
9944
|
window.speechSynthesis.resume();
|
|
9714
9945
|
setPaused(false);
|
|
9715
9946
|
}
|
|
9716
9947
|
}, []);
|
|
9717
|
-
const handleStop = (0,
|
|
9948
|
+
const handleStop = (0, import_react54.useCallback)(() => {
|
|
9718
9949
|
window.speechSynthesis.cancel();
|
|
9719
9950
|
setSpeaking(false);
|
|
9720
9951
|
setPaused(false);
|
|
9721
9952
|
}, []);
|
|
9722
|
-
(0,
|
|
9723
|
-
return /* @__PURE__ */
|
|
9953
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9954
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9724
9955
|
"button",
|
|
9725
9956
|
{
|
|
9726
9957
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9733,15 +9964,15 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9733
9964
|
}
|
|
9734
9965
|
},
|
|
9735
9966
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9736
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9967
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9737
9968
|
"select",
|
|
9738
9969
|
{
|
|
9739
9970
|
className: "tts-select",
|
|
9740
9971
|
value: selectedVoice,
|
|
9741
9972
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9742
9973
|
},
|
|
9743
|
-
voices.map((v) => /* @__PURE__ */
|
|
9744
|
-
), /* @__PURE__ */
|
|
9974
|
+
voices.map((v) => /* @__PURE__ */ import_react54.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9975
|
+
), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9745
9976
|
"input",
|
|
9746
9977
|
{
|
|
9747
9978
|
type: "range",
|
|
@@ -9752,26 +9983,26 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9752
9983
|
value: rate,
|
|
9753
9984
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9754
9985
|
}
|
|
9755
|
-
), /* @__PURE__ */
|
|
9986
|
+
), /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9756
9987
|
handleSpeak();
|
|
9757
9988
|
setShowPanel(false);
|
|
9758
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9989
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9759
9990
|
});
|
|
9760
9991
|
var TextToSpeech_default = TextToSpeech;
|
|
9761
9992
|
|
|
9762
9993
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9763
|
-
var
|
|
9764
|
-
var SpeechToText = (0,
|
|
9765
|
-
const [listening, setListening] = (0,
|
|
9766
|
-
const [showPanel, setShowPanel] = (0,
|
|
9767
|
-
const [language, setLanguage] = (0,
|
|
9768
|
-
const [interim, setInterim] = (0,
|
|
9769
|
-
const recognitionRef = (0,
|
|
9770
|
-
const panelRef = (0,
|
|
9771
|
-
const isListeningRef = (0,
|
|
9994
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
9995
|
+
var SpeechToText = (0, import_react55.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9996
|
+
const [listening, setListening] = (0, import_react55.useState)(false);
|
|
9997
|
+
const [showPanel, setShowPanel] = (0, import_react55.useState)(false);
|
|
9998
|
+
const [language, setLanguage] = (0, import_react55.useState)("en-US");
|
|
9999
|
+
const [interim, setInterim] = (0, import_react55.useState)("");
|
|
10000
|
+
const recognitionRef = (0, import_react55.useRef)(null);
|
|
10001
|
+
const panelRef = (0, import_react55.useRef)(null);
|
|
10002
|
+
const isListeningRef = (0, import_react55.useRef)(false);
|
|
9772
10003
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9773
10004
|
const supported = !!SpeechRecognitionAPI;
|
|
9774
|
-
(0,
|
|
10005
|
+
(0, import_react55.useEffect)(() => {
|
|
9775
10006
|
const handleClick = (e) => {
|
|
9776
10007
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9777
10008
|
setShowPanel(false);
|
|
@@ -9780,7 +10011,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9780
10011
|
document.addEventListener("mousedown", handleClick);
|
|
9781
10012
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9782
10013
|
}, []);
|
|
9783
|
-
const createRecognition = (0,
|
|
10014
|
+
const createRecognition = (0, import_react55.useCallback)(() => {
|
|
9784
10015
|
if (!supported) return null;
|
|
9785
10016
|
const recognition = new SpeechRecognitionAPI();
|
|
9786
10017
|
recognition.lang = language;
|
|
@@ -9789,7 +10020,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9789
10020
|
recognition.maxAlternatives = 1;
|
|
9790
10021
|
return recognition;
|
|
9791
10022
|
}, [supported, language]);
|
|
9792
|
-
const startSession = (0,
|
|
10023
|
+
const startSession = (0, import_react55.useCallback)((recognition) => {
|
|
9793
10024
|
if (!recognition || !editor) return;
|
|
9794
10025
|
recognition.onresult = async (event) => {
|
|
9795
10026
|
let finalText = "";
|
|
@@ -9844,7 +10075,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9844
10075
|
}
|
|
9845
10076
|
};
|
|
9846
10077
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9847
|
-
const startListening = (0,
|
|
10078
|
+
const startListening = (0, import_react55.useCallback)(() => {
|
|
9848
10079
|
if (!supported || !editor) return;
|
|
9849
10080
|
const recognition = createRecognition();
|
|
9850
10081
|
if (!recognition) return;
|
|
@@ -9860,7 +10091,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9860
10091
|
setListening(false);
|
|
9861
10092
|
}
|
|
9862
10093
|
}, [supported, editor, createRecognition, startSession]);
|
|
9863
|
-
const stopListening = (0,
|
|
10094
|
+
const stopListening = (0, import_react55.useCallback)(() => {
|
|
9864
10095
|
isListeningRef.current = false;
|
|
9865
10096
|
if (recognitionRef.current) {
|
|
9866
10097
|
try {
|
|
@@ -9872,9 +10103,9 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9872
10103
|
setListening(false);
|
|
9873
10104
|
setInterim("");
|
|
9874
10105
|
}, []);
|
|
9875
|
-
(0,
|
|
10106
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9876
10107
|
if (!supported) {
|
|
9877
|
-
return /* @__PURE__ */
|
|
10108
|
+
return /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9878
10109
|
}
|
|
9879
10110
|
const LANGUAGES2 = [
|
|
9880
10111
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9896,7 +10127,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9896
10127
|
{ code: "kn-IN", label: "Kannada" },
|
|
9897
10128
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9898
10129
|
];
|
|
9899
|
-
return /* @__PURE__ */
|
|
10130
|
+
return /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9900
10131
|
"button",
|
|
9901
10132
|
{
|
|
9902
10133
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9909,20 +10140,20 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9909
10140
|
}
|
|
9910
10141
|
},
|
|
9911
10142
|
"\u{1F3A4}"
|
|
9912
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10143
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react55.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react55.default.createElement(
|
|
9913
10144
|
"select",
|
|
9914
10145
|
{
|
|
9915
10146
|
className: "stt-select",
|
|
9916
10147
|
value: language,
|
|
9917
10148
|
onChange: (e) => setLanguage(e.target.value)
|
|
9918
10149
|
},
|
|
9919
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9920
|
-
), /* @__PURE__ */
|
|
10150
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react55.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10151
|
+
), /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react55.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9921
10152
|
});
|
|
9922
10153
|
var SpeechToText_default = SpeechToText;
|
|
9923
10154
|
|
|
9924
10155
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9925
|
-
var
|
|
10156
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
9926
10157
|
var import_react_dom12 = require("react-dom");
|
|
9927
10158
|
var AI_COMMANDS = [
|
|
9928
10159
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
@@ -9970,16 +10201,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9970
10201
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9971
10202
|
};
|
|
9972
10203
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9973
|
-
const [open, setOpen] = (0,
|
|
9974
|
-
const [showModal, setShowModal] = (0,
|
|
9975
|
-
const [loading, setLoading] = (0,
|
|
9976
|
-
const [promptText, setPromptText] = (0,
|
|
9977
|
-
const [resultText, setResultText] = (0,
|
|
9978
|
-
const [originalText, setOriginalText] = (0,
|
|
9979
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9980
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9981
|
-
const panelRef = (0,
|
|
9982
|
-
(0,
|
|
10204
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
10205
|
+
const [showModal, setShowModal] = (0, import_react56.useState)(false);
|
|
10206
|
+
const [loading, setLoading] = (0, import_react56.useState)(false);
|
|
10207
|
+
const [promptText, setPromptText] = (0, import_react56.useState)("");
|
|
10208
|
+
const [resultText, setResultText] = (0, import_react56.useState)("");
|
|
10209
|
+
const [originalText, setOriginalText] = (0, import_react56.useState)("");
|
|
10210
|
+
const [selectionRange, setSelectionRange] = (0, import_react56.useState)(null);
|
|
10211
|
+
const [previousResults, setPreviousResults] = (0, import_react56.useState)([]);
|
|
10212
|
+
const panelRef = (0, import_react56.useRef)(null);
|
|
10213
|
+
(0, import_react56.useEffect)(() => {
|
|
9983
10214
|
const handleClick = (e) => {
|
|
9984
10215
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9985
10216
|
setOpen(false);
|
|
@@ -9988,7 +10219,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9988
10219
|
document.addEventListener("mousedown", handleClick);
|
|
9989
10220
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9990
10221
|
}, []);
|
|
9991
|
-
const getSelectedText = (0,
|
|
10222
|
+
const getSelectedText = (0, import_react56.useCallback)(() => {
|
|
9992
10223
|
if (!editor) return { text: "", range: null };
|
|
9993
10224
|
const { from, to, empty } = editor.state.selection;
|
|
9994
10225
|
if (!empty) {
|
|
@@ -9996,7 +10227,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9996
10227
|
}
|
|
9997
10228
|
return { text: editor.getText(), range: null };
|
|
9998
10229
|
}, [editor]);
|
|
9999
|
-
const fetchAIResult = (0,
|
|
10230
|
+
const fetchAIResult = (0, import_react56.useCallback)(async (prompt, text, prevResults = []) => {
|
|
10000
10231
|
setLoading(true);
|
|
10001
10232
|
setResultText("");
|
|
10002
10233
|
try {
|
|
@@ -10014,7 +10245,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10014
10245
|
setLoading(false);
|
|
10015
10246
|
}
|
|
10016
10247
|
}, [onAICommand]);
|
|
10017
|
-
const handleCommandSelect = (0,
|
|
10248
|
+
const handleCommandSelect = (0, import_react56.useCallback)((command) => {
|
|
10018
10249
|
const { text, range } = getSelectedText();
|
|
10019
10250
|
if (!text.trim()) return;
|
|
10020
10251
|
setOriginalText(text);
|
|
@@ -10025,7 +10256,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10025
10256
|
setShowModal(true);
|
|
10026
10257
|
fetchAIResult(command.prompt, text, []);
|
|
10027
10258
|
}, [getSelectedText, fetchAIResult]);
|
|
10028
|
-
const handleInsert = (0,
|
|
10259
|
+
const handleInsert = (0, import_react56.useCallback)(() => {
|
|
10029
10260
|
if (!resultText || !editor) return;
|
|
10030
10261
|
if (selectionRange) {
|
|
10031
10262
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -10035,7 +10266,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10035
10266
|
setShowModal(false);
|
|
10036
10267
|
setResultText("");
|
|
10037
10268
|
}, [editor, resultText, selectionRange]);
|
|
10038
|
-
const handleInsertAfter = (0,
|
|
10269
|
+
const handleInsertAfter = (0, import_react56.useCallback)(() => {
|
|
10039
10270
|
if (!resultText || !editor) return;
|
|
10040
10271
|
if (selectionRange) {
|
|
10041
10272
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -10050,11 +10281,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10050
10281
|
setShowModal(false);
|
|
10051
10282
|
setResultText("");
|
|
10052
10283
|
}, [editor, resultText, selectionRange]);
|
|
10053
|
-
const handleRefresh = (0,
|
|
10284
|
+
const handleRefresh = (0, import_react56.useCallback)(() => {
|
|
10054
10285
|
if (!originalText.trim()) return;
|
|
10055
10286
|
fetchAIResult(promptText, originalText, previousResults);
|
|
10056
10287
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
10057
|
-
const handleCancel = (0,
|
|
10288
|
+
const handleCancel = (0, import_react56.useCallback)(() => {
|
|
10058
10289
|
setShowModal(false);
|
|
10059
10290
|
setResultText("");
|
|
10060
10291
|
setPromptText("");
|
|
@@ -10063,15 +10294,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10063
10294
|
setPreviousResults([]);
|
|
10064
10295
|
}, []);
|
|
10065
10296
|
if (!editor) return null;
|
|
10066
|
-
return /* @__PURE__ */
|
|
10297
|
+
return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10067
10298
|
"button",
|
|
10068
10299
|
{
|
|
10069
10300
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
10070
10301
|
onClick: () => setOpen(!open)
|
|
10071
10302
|
},
|
|
10072
|
-
/* @__PURE__ */
|
|
10073
|
-
/* @__PURE__ */
|
|
10074
|
-
)), open && /* @__PURE__ */
|
|
10303
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react56.default.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
10304
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10305
|
+
)), open && /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10075
10306
|
"button",
|
|
10076
10307
|
{
|
|
10077
10308
|
key: cmd.id,
|
|
@@ -10079,8 +10310,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10079
10310
|
onClick: () => handleCommandSelect(cmd)
|
|
10080
10311
|
},
|
|
10081
10312
|
cmd.label
|
|
10082
|
-
))), /* @__PURE__ */
|
|
10083
|
-
/* @__PURE__ */
|
|
10313
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
|
|
10314
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react56.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10084
10315
|
"textarea",
|
|
10085
10316
|
{
|
|
10086
10317
|
className: "ai-modal-prompt",
|
|
@@ -10088,15 +10319,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10088
10319
|
onChange: (e) => setPromptText(e.target.value),
|
|
10089
10320
|
rows: 3
|
|
10090
10321
|
}
|
|
10091
|
-
), /* @__PURE__ */
|
|
10322
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10092
10323
|
"button",
|
|
10093
10324
|
{
|
|
10094
10325
|
className: "ai-modal-robot-btn",
|
|
10095
10326
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
10096
10327
|
disabled: loading
|
|
10097
10328
|
},
|
|
10098
|
-
/* @__PURE__ */
|
|
10099
|
-
)))), /* @__PURE__ */
|
|
10329
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react56.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M8 7h8" }))
|
|
10330
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10100
10331
|
"button",
|
|
10101
10332
|
{
|
|
10102
10333
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10104,7 +10335,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10104
10335
|
disabled: loading || !resultText
|
|
10105
10336
|
},
|
|
10106
10337
|
"Insert"
|
|
10107
|
-
), /* @__PURE__ */
|
|
10338
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10108
10339
|
"button",
|
|
10109
10340
|
{
|
|
10110
10341
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10112,22 +10343,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10112
10343
|
disabled: loading || !resultText
|
|
10113
10344
|
},
|
|
10114
10345
|
"Insert After"
|
|
10115
|
-
), /* @__PURE__ */
|
|
10346
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10116
10347
|
"button",
|
|
10117
10348
|
{
|
|
10118
10349
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10119
10350
|
onClick: handleRefresh,
|
|
10120
10351
|
disabled: loading
|
|
10121
10352
|
},
|
|
10122
|
-
/* @__PURE__ */
|
|
10123
|
-
))), /* @__PURE__ */
|
|
10353
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react56.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10354
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react56.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10124
10355
|
document.body
|
|
10125
10356
|
));
|
|
10126
10357
|
};
|
|
10127
10358
|
var AICommands_default = AICommands;
|
|
10128
10359
|
|
|
10129
10360
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10130
|
-
var
|
|
10361
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
10131
10362
|
var import_react_dom13 = require("react-dom");
|
|
10132
10363
|
var LANGUAGES = [
|
|
10133
10364
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10267,16 +10498,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
10267
10498
|
return null;
|
|
10268
10499
|
}
|
|
10269
10500
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
10270
|
-
const [sourceLang, setSourceLang] = (0,
|
|
10271
|
-
const [targetLang, setTargetLang] = (0,
|
|
10272
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
10273
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
10274
|
-
const [translating, setTranslating] = (0,
|
|
10275
|
-
const [error, setError] = (0,
|
|
10276
|
-
const filteredSource = (0,
|
|
10501
|
+
const [sourceLang, setSourceLang] = (0, import_react57.useState)(initialSource || "en");
|
|
10502
|
+
const [targetLang, setTargetLang] = (0, import_react57.useState)(initialTarget || "hi");
|
|
10503
|
+
const [sourceFilter, setSourceFilter] = (0, import_react57.useState)("");
|
|
10504
|
+
const [targetFilter, setTargetFilter] = (0, import_react57.useState)("");
|
|
10505
|
+
const [translating, setTranslating] = (0, import_react57.useState)(false);
|
|
10506
|
+
const [error, setError] = (0, import_react57.useState)("");
|
|
10507
|
+
const filteredSource = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10277
10508
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10278
10509
|
), [sourceFilter]);
|
|
10279
|
-
const filteredTarget = (0,
|
|
10510
|
+
const filteredTarget = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10280
10511
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10281
10512
|
), [targetFilter]);
|
|
10282
10513
|
const handleSwap = () => {
|
|
@@ -10320,7 +10551,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10320
10551
|
}
|
|
10321
10552
|
};
|
|
10322
10553
|
return (0, import_react_dom13.createPortal)(
|
|
10323
|
-
/* @__PURE__ */
|
|
10554
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10324
10555
|
"input",
|
|
10325
10556
|
{
|
|
10326
10557
|
type: "text",
|
|
@@ -10329,16 +10560,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10329
10560
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10330
10561
|
className: "translate-filter-input"
|
|
10331
10562
|
}
|
|
10332
|
-
)), /* @__PURE__ */
|
|
10563
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10333
10564
|
"button",
|
|
10334
10565
|
{
|
|
10335
10566
|
key: lang.code,
|
|
10336
10567
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10337
10568
|
onClick: () => setSourceLang(lang.code)
|
|
10338
10569
|
},
|
|
10339
|
-
/* @__PURE__ */
|
|
10340
|
-
/* @__PURE__ */
|
|
10341
|
-
)))), /* @__PURE__ */
|
|
10570
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10571
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10572
|
+
)))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10342
10573
|
"input",
|
|
10343
10574
|
{
|
|
10344
10575
|
type: "text",
|
|
@@ -10347,16 +10578,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10347
10578
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10348
10579
|
className: "translate-filter-input"
|
|
10349
10580
|
}
|
|
10350
|
-
)), /* @__PURE__ */
|
|
10581
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10351
10582
|
"button",
|
|
10352
10583
|
{
|
|
10353
10584
|
key: lang.code,
|
|
10354
10585
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10355
10586
|
onClick: () => setTargetLang(lang.code)
|
|
10356
10587
|
},
|
|
10357
|
-
/* @__PURE__ */
|
|
10358
|
-
/* @__PURE__ */
|
|
10359
|
-
))))), error && /* @__PURE__ */
|
|
10588
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10589
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10590
|
+
))))), error && /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10360
10591
|
document.body
|
|
10361
10592
|
);
|
|
10362
10593
|
};
|
|
@@ -11007,38 +11238,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
11007
11238
|
});
|
|
11008
11239
|
|
|
11009
11240
|
// lib/RufousTextEditor/icons.tsx
|
|
11010
|
-
var
|
|
11241
|
+
var React114 = __toESM(require("react"), 1);
|
|
11011
11242
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
11012
|
-
var IconUndo = () => /* @__PURE__ */
|
|
11013
|
-
var IconRedo = () => /* @__PURE__ */
|
|
11014
|
-
var IconBold = () => /* @__PURE__ */
|
|
11015
|
-
var IconItalic = () => /* @__PURE__ */
|
|
11016
|
-
var IconLink = () => /* @__PURE__ */
|
|
11017
|
-
var IconStrike = () => /* @__PURE__ */
|
|
11018
|
-
var IconHeading = () => /* @__PURE__ */
|
|
11019
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
11020
|
-
var IconColor = () => /* @__PURE__ */
|
|
11021
|
-
var IconFont = () => /* @__PURE__ */
|
|
11022
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
11023
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
11024
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
11025
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
11026
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
11027
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
11028
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
11029
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
11030
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
11031
|
-
var IconTable = () => /* @__PURE__ */
|
|
11032
|
-
var IconImage = () => /* @__PURE__ */
|
|
11033
|
-
var IconVideo = () => /* @__PURE__ */
|
|
11034
|
-
var IconCut = () => /* @__PURE__ */
|
|
11035
|
-
var IconCopy = () => /* @__PURE__ */
|
|
11036
|
-
var IconCode = () => /* @__PURE__ */
|
|
11037
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
11038
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
11039
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
11040
|
-
var IconCheck = () => /* @__PURE__ */
|
|
11041
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11243
|
+
var IconUndo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
|
|
11244
|
+
var IconRedo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
|
|
11245
|
+
var IconBold = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
|
|
11246
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11247
|
+
var IconLink = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
|
|
11248
|
+
var IconStrike = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
|
|
11249
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11250
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11251
|
+
var IconColor = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React114.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11252
|
+
var IconFont = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
|
|
11253
|
+
var IconLineHeight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
|
|
11254
|
+
var IconBulletList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
|
|
11255
|
+
var IconOrderedList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11256
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11257
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11258
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11259
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11260
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11261
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11262
|
+
var IconTable = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
|
|
11263
|
+
var IconImage = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
|
|
11264
|
+
var IconVideo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
|
|
11265
|
+
var IconCut = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
|
|
11266
|
+
var IconCopy = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
|
|
11267
|
+
var IconCode = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
|
|
11268
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11269
|
+
var IconTranslate = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
|
|
11270
|
+
var IconTaskList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
|
|
11271
|
+
var IconCheck = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11272
|
+
var IconPaste = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
11042
11273
|
|
|
11043
11274
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
11044
11275
|
var COLOR_PALETTE = [
|
|
@@ -11176,10 +11407,10 @@ var SPECIAL_CHARS = [
|
|
|
11176
11407
|
"\xA2"
|
|
11177
11408
|
];
|
|
11178
11409
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
11179
|
-
const [open, setOpen] = (0,
|
|
11180
|
-
const ref = (0,
|
|
11181
|
-
const menuRef = (0,
|
|
11182
|
-
(0,
|
|
11410
|
+
const [open, setOpen] = (0, import_react58.useState)(false);
|
|
11411
|
+
const ref = (0, import_react58.useRef)(null);
|
|
11412
|
+
const menuRef = (0, import_react58.useRef)(null);
|
|
11413
|
+
(0, import_react58.useEffect)(() => {
|
|
11183
11414
|
const handleClick = (e) => {
|
|
11184
11415
|
const target = e.target;
|
|
11185
11416
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -11191,7 +11422,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11191
11422
|
document.addEventListener("mousedown", handleClick);
|
|
11192
11423
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
11193
11424
|
}, []);
|
|
11194
|
-
(0,
|
|
11425
|
+
(0, import_react58.useEffect)(() => {
|
|
11195
11426
|
if (!open || !menuRef.current || !ref.current) return;
|
|
11196
11427
|
const menu = menuRef.current;
|
|
11197
11428
|
const trigger2 = ref.current;
|
|
@@ -11220,22 +11451,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11220
11451
|
};
|
|
11221
11452
|
position();
|
|
11222
11453
|
}, [open]);
|
|
11223
|
-
return /* @__PURE__ */
|
|
11454
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11224
11455
|
"button",
|
|
11225
11456
|
{
|
|
11226
11457
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11227
11458
|
onClick: () => setOpen(!open)
|
|
11228
11459
|
},
|
|
11229
11460
|
trigger.label,
|
|
11230
|
-
/* @__PURE__ */
|
|
11461
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11231
11462
|
)), open && (0, import_react_dom14.createPortal)(
|
|
11232
|
-
/* @__PURE__ */
|
|
11463
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react58.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11233
11464
|
document.body
|
|
11234
11465
|
));
|
|
11235
11466
|
};
|
|
11236
11467
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
11237
|
-
const [activeTab, setActiveTab] = (0,
|
|
11238
|
-
const [url, setUrl] = (0,
|
|
11468
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("link");
|
|
11469
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11239
11470
|
const extractIframeSrc = (html) => {
|
|
11240
11471
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
11241
11472
|
return match ? match[1] : null;
|
|
@@ -11267,14 +11498,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11267
11498
|
}
|
|
11268
11499
|
onClose();
|
|
11269
11500
|
};
|
|
11270
|
-
return /* @__PURE__ */
|
|
11501
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11271
11502
|
"button",
|
|
11272
11503
|
{
|
|
11273
11504
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11274
11505
|
onClick: () => setActiveTab("link")
|
|
11275
11506
|
},
|
|
11276
11507
|
"\u{1F517} Link"
|
|
11277
|
-
), /* @__PURE__ */
|
|
11508
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11278
11509
|
"button",
|
|
11279
11510
|
{
|
|
11280
11511
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11282,7 +11513,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11282
11513
|
},
|
|
11283
11514
|
"</>",
|
|
11284
11515
|
" Code"
|
|
11285
|
-
)), /* @__PURE__ */
|
|
11516
|
+
)), /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react58.default.createElement(
|
|
11286
11517
|
"input",
|
|
11287
11518
|
{
|
|
11288
11519
|
type: "text",
|
|
@@ -11293,7 +11524,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11293
11524
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11294
11525
|
autoFocus: true
|
|
11295
11526
|
}
|
|
11296
|
-
) : /* @__PURE__ */
|
|
11527
|
+
) : /* @__PURE__ */ import_react58.default.createElement(
|
|
11297
11528
|
"textarea",
|
|
11298
11529
|
{
|
|
11299
11530
|
className: "insert-panel-textarea",
|
|
@@ -11302,13 +11533,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11302
11533
|
onChange: (e) => setUrl(e.target.value),
|
|
11303
11534
|
rows: 3
|
|
11304
11535
|
}
|
|
11305
|
-
), /* @__PURE__ */
|
|
11536
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11306
11537
|
};
|
|
11307
11538
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11308
|
-
const [activeTab, setActiveTab] = (0,
|
|
11309
|
-
const [url, setUrl] = (0,
|
|
11310
|
-
const [isDragging, setIsDragging] = (0,
|
|
11311
|
-
const fileInputRef = (0,
|
|
11539
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("upload");
|
|
11540
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11541
|
+
const [isDragging, setIsDragging] = (0, import_react58.useState)(false);
|
|
11542
|
+
const fileInputRef = (0, import_react58.useRef)(null);
|
|
11312
11543
|
const getBase64 = (file) => {
|
|
11313
11544
|
return new Promise((resolve, reject) => {
|
|
11314
11545
|
const reader = new FileReader();
|
|
@@ -11346,21 +11577,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11346
11577
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11347
11578
|
onClose();
|
|
11348
11579
|
};
|
|
11349
|
-
return /* @__PURE__ */
|
|
11580
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11350
11581
|
"button",
|
|
11351
11582
|
{
|
|
11352
11583
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11353
11584
|
onClick: () => setActiveTab("upload")
|
|
11354
11585
|
},
|
|
11355
11586
|
"\u2B06 Upload"
|
|
11356
|
-
), /* @__PURE__ */
|
|
11587
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11357
11588
|
"button",
|
|
11358
11589
|
{
|
|
11359
11590
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11360
11591
|
onClick: () => setActiveTab("url")
|
|
11361
11592
|
},
|
|
11362
11593
|
"\u{1F517} URL"
|
|
11363
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11594
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11364
11595
|
"div",
|
|
11365
11596
|
{
|
|
11366
11597
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11372,9 +11603,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11372
11603
|
onDrop: handleDrop,
|
|
11373
11604
|
onClick: () => fileInputRef.current?.click()
|
|
11374
11605
|
},
|
|
11375
|
-
/* @__PURE__ */
|
|
11376
|
-
/* @__PURE__ */
|
|
11377
|
-
), /* @__PURE__ */
|
|
11606
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11607
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11608
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11378
11609
|
"input",
|
|
11379
11610
|
{
|
|
11380
11611
|
ref: fileInputRef,
|
|
@@ -11383,7 +11614,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11383
11614
|
style: { display: "none" },
|
|
11384
11615
|
onChange: handleFileSelect
|
|
11385
11616
|
}
|
|
11386
|
-
)) : /* @__PURE__ */
|
|
11617
|
+
)) : /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11387
11618
|
"input",
|
|
11388
11619
|
{
|
|
11389
11620
|
type: "text",
|
|
@@ -11394,18 +11625,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11394
11625
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11395
11626
|
autoFocus: true
|
|
11396
11627
|
}
|
|
11397
|
-
), /* @__PURE__ */
|
|
11628
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11398
11629
|
};
|
|
11399
11630
|
var MAX_GRID = 10;
|
|
11400
11631
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
11401
|
-
const [hoverRow, setHoverRow] = (0,
|
|
11402
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11632
|
+
const [hoverRow, setHoverRow] = (0, import_react58.useState)(0);
|
|
11633
|
+
const [hoverCol, setHoverCol] = (0, import_react58.useState)(0);
|
|
11403
11634
|
const handleInsert = () => {
|
|
11404
11635
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
11405
11636
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11406
11637
|
onClose();
|
|
11407
11638
|
};
|
|
11408
|
-
return /* @__PURE__ */
|
|
11639
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11409
11640
|
"div",
|
|
11410
11641
|
{
|
|
11411
11642
|
className: "table-grid",
|
|
@@ -11414,7 +11645,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11414
11645
|
setHoverCol(0);
|
|
11415
11646
|
}
|
|
11416
11647
|
},
|
|
11417
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11648
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react58.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11418
11649
|
"div",
|
|
11419
11650
|
{
|
|
11420
11651
|
key: c,
|
|
@@ -11426,7 +11657,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11426
11657
|
onClick: handleInsert
|
|
11427
11658
|
}
|
|
11428
11659
|
))))
|
|
11429
|
-
), /* @__PURE__ */
|
|
11660
|
+
), /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react58.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11430
11661
|
"button",
|
|
11431
11662
|
{
|
|
11432
11663
|
className: "table-grid-submit",
|
|
@@ -11437,9 +11668,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11437
11668
|
)));
|
|
11438
11669
|
};
|
|
11439
11670
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
11440
|
-
const [tab, setTab] = (0,
|
|
11441
|
-
const [activeBg, setActiveBg] = (0,
|
|
11442
|
-
const [activeText, setActiveText] = (0,
|
|
11671
|
+
const [tab, setTab] = (0, import_react58.useState)("background");
|
|
11672
|
+
const [activeBg, setActiveBg] = (0, import_react58.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11673
|
+
const [activeText, setActiveText] = (0, import_react58.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
11443
11674
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
11444
11675
|
const applyColor = (color) => {
|
|
11445
11676
|
if (tab === "background") {
|
|
@@ -11460,51 +11691,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11460
11691
|
}
|
|
11461
11692
|
onClose();
|
|
11462
11693
|
};
|
|
11463
|
-
return /* @__PURE__ */
|
|
11694
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11464
11695
|
"button",
|
|
11465
11696
|
{
|
|
11466
11697
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11467
11698
|
onClick: () => setTab("background")
|
|
11468
11699
|
},
|
|
11469
11700
|
"Background"
|
|
11470
|
-
), /* @__PURE__ */
|
|
11701
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11471
11702
|
"button",
|
|
11472
11703
|
{
|
|
11473
11704
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11474
11705
|
onClick: () => setTab("text")
|
|
11475
11706
|
},
|
|
11476
11707
|
"Text"
|
|
11477
|
-
)), /* @__PURE__ */
|
|
11708
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react58.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11478
11709
|
"button",
|
|
11479
11710
|
{
|
|
11480
11711
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11481
11712
|
style: { background: color },
|
|
11482
11713
|
onClick: () => applyColor(color)
|
|
11483
11714
|
}
|
|
11484
|
-
)))), /* @__PURE__ */
|
|
11715
|
+
)))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11485
11716
|
};
|
|
11486
11717
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11487
|
-
const [, setEditorState] = (0,
|
|
11488
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
11489
|
-
const ttsRef = (0,
|
|
11490
|
-
const sttRef = (0,
|
|
11718
|
+
const [, setEditorState] = (0, import_react58.useState)(0);
|
|
11719
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react58.useState)(false);
|
|
11720
|
+
const ttsRef = (0, import_react58.useRef)(null);
|
|
11721
|
+
const sttRef = (0, import_react58.useRef)(null);
|
|
11491
11722
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
11492
|
-
(0,
|
|
11723
|
+
(0, import_react58.useEffect)(() => {
|
|
11493
11724
|
if (!editor) return;
|
|
11494
11725
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
11495
11726
|
editor.on("transaction", onTransaction);
|
|
11496
11727
|
return () => editor.off("transaction", onTransaction);
|
|
11497
11728
|
}, [editor]);
|
|
11498
|
-
const insertSpecialChar = (0,
|
|
11729
|
+
const insertSpecialChar = (0, import_react58.useCallback)((char) => {
|
|
11499
11730
|
if (!editor) return;
|
|
11500
11731
|
editor.chain().focus().insertContent(char).run();
|
|
11501
11732
|
}, [editor]);
|
|
11502
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
11503
|
-
const [translateSource, setTranslateSource] = (0,
|
|
11504
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
11505
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
11506
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
11507
|
-
const handleCopy = (0,
|
|
11733
|
+
const [copySuccess, setCopySuccess] = (0, import_react58.useState)(false);
|
|
11734
|
+
const [translateSource, setTranslateSource] = (0, import_react58.useState)("en");
|
|
11735
|
+
const [translateTarget, setTranslateTarget] = (0, import_react58.useState)("hi");
|
|
11736
|
+
const [translateStatus, setTranslateStatus] = (0, import_react58.useState)("");
|
|
11737
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react58.useState)(false);
|
|
11738
|
+
const handleCopy = (0, import_react58.useCallback)(async () => {
|
|
11508
11739
|
if (!editor) return;
|
|
11509
11740
|
const { from, to, empty } = editor.state.selection;
|
|
11510
11741
|
if (empty) return;
|
|
@@ -11519,7 +11750,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11519
11750
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11520
11751
|
}
|
|
11521
11752
|
}, [editor]);
|
|
11522
|
-
const handlePaste = (0,
|
|
11753
|
+
const handlePaste = (0, import_react58.useCallback)(async () => {
|
|
11523
11754
|
if (!editor) return;
|
|
11524
11755
|
try {
|
|
11525
11756
|
const text = await navigator.clipboard.readText();
|
|
@@ -11528,7 +11759,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11528
11759
|
document.execCommand("paste");
|
|
11529
11760
|
}
|
|
11530
11761
|
}, [editor]);
|
|
11531
|
-
const handleQuickTranslate = (0,
|
|
11762
|
+
const handleQuickTranslate = (0, import_react58.useCallback)(async () => {
|
|
11532
11763
|
if (!editor) return;
|
|
11533
11764
|
const { from, to, empty } = editor.state.selection;
|
|
11534
11765
|
if (empty) {
|
|
@@ -11562,32 +11793,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11562
11793
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11563
11794
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11564
11795
|
if (!editor) return null;
|
|
11565
|
-
return /* @__PURE__ */
|
|
11796
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11566
11797
|
"button",
|
|
11567
11798
|
{
|
|
11568
11799
|
className: "toolbar-btn",
|
|
11569
11800
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11570
11801
|
disabled: !editor.can().undo()
|
|
11571
11802
|
},
|
|
11572
|
-
/* @__PURE__ */
|
|
11573
|
-
)), show("redo") && /* @__PURE__ */
|
|
11803
|
+
/* @__PURE__ */ import_react58.default.createElement(IconUndo, null)
|
|
11804
|
+
)), show("redo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11574
11805
|
"button",
|
|
11575
11806
|
{
|
|
11576
11807
|
className: "toolbar-btn",
|
|
11577
11808
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11578
11809
|
disabled: !editor.can().redo()
|
|
11579
11810
|
},
|
|
11580
|
-
/* @__PURE__ */
|
|
11581
|
-
))), show("ai") && /* @__PURE__ */
|
|
11811
|
+
/* @__PURE__ */ import_react58.default.createElement(IconRedo, null)
|
|
11812
|
+
))), show("ai") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react58.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11582
11813
|
Dropdown,
|
|
11583
11814
|
{
|
|
11584
11815
|
trigger: {
|
|
11585
|
-
label: /* @__PURE__ */
|
|
11816
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconHeading, null),
|
|
11586
11817
|
title: "Block type",
|
|
11587
11818
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11588
11819
|
}
|
|
11589
11820
|
},
|
|
11590
|
-
/* @__PURE__ */
|
|
11821
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11591
11822
|
"button",
|
|
11592
11823
|
{
|
|
11593
11824
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11595,7 +11826,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11595
11826
|
},
|
|
11596
11827
|
"\xB6 Paragraph"
|
|
11597
11828
|
),
|
|
11598
|
-
/* @__PURE__ */
|
|
11829
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11599
11830
|
"button",
|
|
11600
11831
|
{
|
|
11601
11832
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11603,7 +11834,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11603
11834
|
},
|
|
11604
11835
|
"Heading 1"
|
|
11605
11836
|
),
|
|
11606
|
-
/* @__PURE__ */
|
|
11837
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11607
11838
|
"button",
|
|
11608
11839
|
{
|
|
11609
11840
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11611,7 +11842,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11611
11842
|
},
|
|
11612
11843
|
"Heading 2"
|
|
11613
11844
|
),
|
|
11614
|
-
/* @__PURE__ */
|
|
11845
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11615
11846
|
"button",
|
|
11616
11847
|
{
|
|
11617
11848
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11619,7 +11850,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11619
11850
|
},
|
|
11620
11851
|
"Heading 3"
|
|
11621
11852
|
),
|
|
11622
|
-
/* @__PURE__ */
|
|
11853
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11623
11854
|
"button",
|
|
11624
11855
|
{
|
|
11625
11856
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11627,7 +11858,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11627
11858
|
},
|
|
11628
11859
|
"Heading 4"
|
|
11629
11860
|
),
|
|
11630
|
-
/* @__PURE__ */
|
|
11861
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11631
11862
|
"button",
|
|
11632
11863
|
{
|
|
11633
11864
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11635,7 +11866,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11635
11866
|
},
|
|
11636
11867
|
"\u275E Blockquote"
|
|
11637
11868
|
),
|
|
11638
|
-
/* @__PURE__ */
|
|
11869
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11639
11870
|
"button",
|
|
11640
11871
|
{
|
|
11641
11872
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11644,19 +11875,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11644
11875
|
"{ }",
|
|
11645
11876
|
" Code Block"
|
|
11646
11877
|
),
|
|
11647
|
-
/* @__PURE__ */
|
|
11648
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11878
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11879
|
+
), show("fontsize") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11649
11880
|
Dropdown,
|
|
11650
11881
|
{
|
|
11651
11882
|
trigger: {
|
|
11652
|
-
label: /* @__PURE__ */
|
|
11883
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFontSize, null),
|
|
11653
11884
|
title: "Font size"
|
|
11654
11885
|
}
|
|
11655
11886
|
},
|
|
11656
11887
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11657
11888
|
const sizeStr = `${size}px`;
|
|
11658
11889
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11659
|
-
return /* @__PURE__ */
|
|
11890
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11660
11891
|
"button",
|
|
11661
11892
|
{
|
|
11662
11893
|
key: size,
|
|
@@ -11672,17 +11903,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11672
11903
|
sizeStr
|
|
11673
11904
|
);
|
|
11674
11905
|
})
|
|
11675
|
-
), show("font") && /* @__PURE__ */
|
|
11906
|
+
), show("font") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11676
11907
|
Dropdown,
|
|
11677
11908
|
{
|
|
11678
11909
|
trigger: {
|
|
11679
|
-
label: /* @__PURE__ */
|
|
11910
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFont, null),
|
|
11680
11911
|
title: "Font family"
|
|
11681
11912
|
}
|
|
11682
11913
|
},
|
|
11683
11914
|
FONT_FAMILIES.map((font) => {
|
|
11684
11915
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11685
|
-
return /* @__PURE__ */
|
|
11916
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11686
11917
|
"button",
|
|
11687
11918
|
{
|
|
11688
11919
|
key: font,
|
|
@@ -11699,40 +11930,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11699
11930
|
font
|
|
11700
11931
|
);
|
|
11701
11932
|
})
|
|
11702
|
-
), show("color") && /* @__PURE__ */
|
|
11933
|
+
), show("color") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11703
11934
|
Dropdown,
|
|
11704
11935
|
{
|
|
11705
11936
|
trigger: {
|
|
11706
|
-
label: /* @__PURE__ */
|
|
11937
|
+
label: /* @__PURE__ */ import_react58.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react58.default.createElement(IconColor, null)),
|
|
11707
11938
|
title: "Colors"
|
|
11708
11939
|
},
|
|
11709
11940
|
keepOpen: true
|
|
11710
11941
|
},
|
|
11711
|
-
(close) => /* @__PURE__ */
|
|
11712
|
-
), show("bold") && /* @__PURE__ */
|
|
11942
|
+
(close) => /* @__PURE__ */ import_react58.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11943
|
+
), show("bold") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11713
11944
|
"button",
|
|
11714
11945
|
{
|
|
11715
11946
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11716
11947
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11717
11948
|
},
|
|
11718
|
-
/* @__PURE__ */
|
|
11719
|
-
)), show("italic") && /* @__PURE__ */
|
|
11949
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBold, null)
|
|
11950
|
+
)), show("italic") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11720
11951
|
"button",
|
|
11721
11952
|
{
|
|
11722
11953
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11723
11954
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11724
11955
|
},
|
|
11725
|
-
/* @__PURE__ */
|
|
11726
|
-
)), show("strike") && /* @__PURE__ */
|
|
11956
|
+
/* @__PURE__ */ import_react58.default.createElement(IconItalic, null)
|
|
11957
|
+
)), show("strike") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11727
11958
|
Dropdown,
|
|
11728
11959
|
{
|
|
11729
|
-
trigger: { label: /* @__PURE__ */
|
|
11960
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11730
11961
|
},
|
|
11731
|
-
/* @__PURE__ */
|
|
11732
|
-
/* @__PURE__ */
|
|
11733
|
-
/* @__PURE__ */
|
|
11734
|
-
/* @__PURE__ */
|
|
11735
|
-
/* @__PURE__ */
|
|
11962
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react58.default.createElement("s", null, "Strikethrough")),
|
|
11963
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react58.default.createElement("u", null, "Underline")),
|
|
11964
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sup", null, "2"), " Superscript"),
|
|
11965
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sub", null, "2"), " Subscript"),
|
|
11966
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11736
11967
|
e.preventDefault();
|
|
11737
11968
|
const chain = editor.chain().focus();
|
|
11738
11969
|
if (!editor.state.selection.empty) {
|
|
@@ -11748,25 +11979,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11748
11979
|
c.run();
|
|
11749
11980
|
}
|
|
11750
11981
|
} }, "\u2715 Clear formatting")
|
|
11751
|
-
), show("link") && /* @__PURE__ */
|
|
11982
|
+
), show("link") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11752
11983
|
"button",
|
|
11753
11984
|
{
|
|
11754
11985
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11755
11986
|
onClick: setLink
|
|
11756
11987
|
},
|
|
11757
|
-
/* @__PURE__ */
|
|
11758
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11988
|
+
/* @__PURE__ */ import_react58.default.createElement(IconLink, null)
|
|
11989
|
+
)), show("lineheight") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11759
11990
|
Dropdown,
|
|
11760
11991
|
{
|
|
11761
11992
|
trigger: {
|
|
11762
|
-
label: /* @__PURE__ */
|
|
11993
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconLineHeight, null),
|
|
11763
11994
|
title: "Line height"
|
|
11764
11995
|
}
|
|
11765
11996
|
},
|
|
11766
11997
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11767
11998
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11768
11999
|
const isActive = currentLH === lh;
|
|
11769
|
-
return /* @__PURE__ */
|
|
12000
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11770
12001
|
"button",
|
|
11771
12002
|
{
|
|
11772
12003
|
key: lh,
|
|
@@ -11782,19 +12013,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11782
12013
|
lh
|
|
11783
12014
|
);
|
|
11784
12015
|
})
|
|
11785
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
12016
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11786
12017
|
"button",
|
|
11787
12018
|
{
|
|
11788
12019
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11789
12020
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11790
12021
|
},
|
|
11791
|
-
/* @__PURE__ */
|
|
11792
|
-
)), /* @__PURE__ */
|
|
12022
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBulletList, null)
|
|
12023
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11793
12024
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11794
12025
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11795
12026
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11796
12027
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11797
|
-
].map((item) => /* @__PURE__ */
|
|
12028
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11798
12029
|
"button",
|
|
11799
12030
|
{
|
|
11800
12031
|
key: item.label,
|
|
@@ -11819,24 +12050,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11819
12050
|
}).run();
|
|
11820
12051
|
}
|
|
11821
12052
|
},
|
|
11822
|
-
/* @__PURE__ */
|
|
12053
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11823
12054
|
" ",
|
|
11824
12055
|
item.label
|
|
11825
|
-
)))), show("ol") && /* @__PURE__ */
|
|
12056
|
+
)))), show("ol") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11826
12057
|
"button",
|
|
11827
12058
|
{
|
|
11828
12059
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11829
12060
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11830
12061
|
},
|
|
11831
|
-
/* @__PURE__ */
|
|
11832
|
-
)), /* @__PURE__ */
|
|
12062
|
+
/* @__PURE__ */ import_react58.default.createElement(IconOrderedList, null)
|
|
12063
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11833
12064
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11834
12065
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11835
12066
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11836
12067
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11837
12068
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11838
12069
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11839
|
-
].map((item) => /* @__PURE__ */
|
|
12070
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11840
12071
|
"button",
|
|
11841
12072
|
{
|
|
11842
12073
|
key: item.label,
|
|
@@ -11861,24 +12092,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11861
12092
|
}).run();
|
|
11862
12093
|
}
|
|
11863
12094
|
},
|
|
11864
|
-
/* @__PURE__ */
|
|
12095
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11865
12096
|
" ",
|
|
11866
12097
|
item.label
|
|
11867
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12098
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11868
12099
|
Dropdown,
|
|
11869
12100
|
{
|
|
11870
12101
|
trigger: {
|
|
11871
|
-
label: /* @__PURE__ */
|
|
12102
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null),
|
|
11872
12103
|
title: "Align",
|
|
11873
12104
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11874
12105
|
}
|
|
11875
12106
|
},
|
|
11876
12107
|
[
|
|
11877
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11878
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11879
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11880
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11881
|
-
].map((item) => /* @__PURE__ */
|
|
12108
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null) },
|
|
12109
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignCenter, null) },
|
|
12110
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignRight, null) },
|
|
12111
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignJustify, null) }
|
|
12112
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11882
12113
|
"button",
|
|
11883
12114
|
{
|
|
11884
12115
|
key: item.value,
|
|
@@ -11889,7 +12120,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11889
12120
|
" ",
|
|
11890
12121
|
item.label
|
|
11891
12122
|
))
|
|
11892
|
-
), show("indent") && /* @__PURE__ */
|
|
12123
|
+
), show("indent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11893
12124
|
"button",
|
|
11894
12125
|
{
|
|
11895
12126
|
className: "toolbar-btn",
|
|
@@ -11908,8 +12139,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11908
12139
|
}).run();
|
|
11909
12140
|
}
|
|
11910
12141
|
},
|
|
11911
|
-
/* @__PURE__ */
|
|
11912
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12142
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentIncrease, null)
|
|
12143
|
+
)), show("outdent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11913
12144
|
"button",
|
|
11914
12145
|
{
|
|
11915
12146
|
className: "toolbar-btn",
|
|
@@ -11928,29 +12159,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11928
12159
|
}).run();
|
|
11929
12160
|
}
|
|
11930
12161
|
},
|
|
11931
|
-
/* @__PURE__ */
|
|
11932
|
-
))), show("table") && /* @__PURE__ */
|
|
12162
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentDecrease, null)
|
|
12163
|
+
))), show("table") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11933
12164
|
"button",
|
|
11934
12165
|
{
|
|
11935
12166
|
className: "toolbar-btn",
|
|
11936
12167
|
onClick: () => document.execCommand("cut")
|
|
11937
12168
|
},
|
|
11938
|
-
/* @__PURE__ */
|
|
11939
|
-
)), show("copy") && /* @__PURE__ */
|
|
12169
|
+
/* @__PURE__ */ import_react58.default.createElement(IconCut, null)
|
|
12170
|
+
)), show("copy") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11940
12171
|
"button",
|
|
11941
12172
|
{
|
|
11942
12173
|
className: "toolbar-btn",
|
|
11943
12174
|
onClick: handleCopy
|
|
11944
12175
|
},
|
|
11945
|
-
copySuccess ? /* @__PURE__ */
|
|
11946
|
-
)), show("paste") && /* @__PURE__ */
|
|
12176
|
+
copySuccess ? /* @__PURE__ */ import_react58.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react58.default.createElement(IconCopy, null)
|
|
12177
|
+
)), show("paste") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11947
12178
|
"button",
|
|
11948
12179
|
{
|
|
11949
12180
|
className: "toolbar-btn",
|
|
11950
12181
|
onClick: handlePaste
|
|
11951
12182
|
},
|
|
11952
|
-
/* @__PURE__ */
|
|
11953
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12183
|
+
/* @__PURE__ */ import_react58.default.createElement(IconPaste, null)
|
|
12184
|
+
)), show("specialchars") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11954
12185
|
"button",
|
|
11955
12186
|
{
|
|
11956
12187
|
key: char,
|
|
@@ -11958,12 +12189,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11958
12189
|
onClick: () => insertSpecialChar(char)
|
|
11959
12190
|
},
|
|
11960
12191
|
char
|
|
11961
|
-
)))), show("code") && /* @__PURE__ */
|
|
12192
|
+
)))), show("code") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11962
12193
|
Dropdown,
|
|
11963
12194
|
{
|
|
11964
|
-
trigger: { label: /* @__PURE__ */
|
|
12195
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11965
12196
|
},
|
|
11966
|
-
/* @__PURE__ */
|
|
12197
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11967
12198
|
if (editor.isActive("codeBlock")) {
|
|
11968
12199
|
const text = (() => {
|
|
11969
12200
|
const { $from } = editor.state.selection;
|
|
@@ -11981,22 +12212,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11981
12212
|
editor.chain().focus().toggleCode().run();
|
|
11982
12213
|
}
|
|
11983
12214
|
} }, "</>", " Inline Code"),
|
|
11984
|
-
/* @__PURE__ */
|
|
11985
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12215
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12216
|
+
), show("fullscreen") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11986
12217
|
"button",
|
|
11987
12218
|
{
|
|
11988
12219
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11989
12220
|
onClick: onToggleFullscreen
|
|
11990
12221
|
},
|
|
11991
|
-
/* @__PURE__ */
|
|
11992
|
-
)), show("tts") && /* @__PURE__ */
|
|
12222
|
+
/* @__PURE__ */ import_react58.default.createElement(IconFullscreen, null)
|
|
12223
|
+
)), show("tts") && /* @__PURE__ */ import_react58.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react58.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11993
12224
|
"button",
|
|
11994
12225
|
{
|
|
11995
12226
|
className: "toolbar-btn",
|
|
11996
12227
|
onClick: handleQuickTranslate
|
|
11997
12228
|
},
|
|
11998
|
-
/* @__PURE__ */
|
|
11999
|
-
)), /* @__PURE__ */
|
|
12229
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTranslate, null)
|
|
12230
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12000
12231
|
"button",
|
|
12001
12232
|
{
|
|
12002
12233
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -12039,11 +12270,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12039
12270
|
}
|
|
12040
12271
|
}
|
|
12041
12272
|
},
|
|
12042
|
-
/* @__PURE__ */
|
|
12043
|
-
)), /* @__PURE__ */
|
|
12273
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTaskList, null)
|
|
12274
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
12044
12275
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
12045
12276
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
12046
|
-
return /* @__PURE__ */
|
|
12277
|
+
return /* @__PURE__ */ import_react58.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
12047
12278
|
const { state } = editor;
|
|
12048
12279
|
const { schema } = state;
|
|
12049
12280
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -12076,8 +12307,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12076
12307
|
}
|
|
12077
12308
|
return true;
|
|
12078
12309
|
}).run();
|
|
12079
|
-
} }, /* @__PURE__ */
|
|
12080
|
-
})))), onClose && /* @__PURE__ */
|
|
12310
|
+
} }, /* @__PURE__ */ import_react58.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react58.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12311
|
+
})))), onClose && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12081
12312
|
"button",
|
|
12082
12313
|
{
|
|
12083
12314
|
className: "toolbar-btn btn-cross",
|
|
@@ -12093,8 +12324,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12093
12324
|
onClose();
|
|
12094
12325
|
}
|
|
12095
12326
|
},
|
|
12096
|
-
/* @__PURE__ */
|
|
12097
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12327
|
+
/* @__PURE__ */ import_react58.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12328
|
+
))), showTranslateModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
12098
12329
|
TranslateModal_default,
|
|
12099
12330
|
{
|
|
12100
12331
|
editor,
|
|
@@ -12112,7 +12343,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12112
12343
|
var Toolbar_default = Toolbar;
|
|
12113
12344
|
|
|
12114
12345
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12115
|
-
var
|
|
12346
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12116
12347
|
var import_react_dom15 = require("react-dom");
|
|
12117
12348
|
var ALIGNMENTS = [
|
|
12118
12349
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12120,18 +12351,18 @@ var ALIGNMENTS = [
|
|
|
12120
12351
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
12121
12352
|
];
|
|
12122
12353
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
12123
|
-
const [activeTab, setActiveTab] = (0,
|
|
12124
|
-
const [src, setSrc] = (0,
|
|
12125
|
-
const [title, setTitle] = (0,
|
|
12126
|
-
const [alt, setAlt] = (0,
|
|
12127
|
-
const [link, setLink] = (0,
|
|
12128
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
12129
|
-
const [width, setWidth] = (0,
|
|
12130
|
-
const [height, setHeight] = (0,
|
|
12131
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12132
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
12133
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
12134
|
-
(0,
|
|
12354
|
+
const [activeTab, setActiveTab] = (0, import_react59.useState)("image");
|
|
12355
|
+
const [src, setSrc] = (0, import_react59.useState)(node?.attrs?.src || "");
|
|
12356
|
+
const [title, setTitle] = (0, import_react59.useState)(node?.attrs?.title || "");
|
|
12357
|
+
const [alt, setAlt] = (0, import_react59.useState)(node?.attrs?.alt || "");
|
|
12358
|
+
const [link, setLink] = (0, import_react59.useState)("");
|
|
12359
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
|
|
12360
|
+
const [width, setWidth] = (0, import_react59.useState)("");
|
|
12361
|
+
const [height, setHeight] = (0, import_react59.useState)("");
|
|
12362
|
+
const [lockRatio, setLockRatio] = (0, import_react59.useState)(true);
|
|
12363
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react59.useState)(0);
|
|
12364
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react59.useState)(0);
|
|
12365
|
+
(0, import_react59.useEffect)(() => {
|
|
12135
12366
|
if (src) {
|
|
12136
12367
|
const img = new window.Image();
|
|
12137
12368
|
img.onload = () => {
|
|
@@ -12170,7 +12401,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12170
12401
|
editor.chain().focus().deleteSelection().run();
|
|
12171
12402
|
onClose();
|
|
12172
12403
|
};
|
|
12173
|
-
return /* @__PURE__ */
|
|
12404
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react59.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react59.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12174
12405
|
"input",
|
|
12175
12406
|
{
|
|
12176
12407
|
type: "number",
|
|
@@ -12178,14 +12409,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12178
12409
|
value: width,
|
|
12179
12410
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12180
12411
|
}
|
|
12181
|
-
), /* @__PURE__ */
|
|
12412
|
+
), /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12182
12413
|
"button",
|
|
12183
12414
|
{
|
|
12184
12415
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12185
12416
|
onClick: () => setLockRatio(!lockRatio)
|
|
12186
12417
|
},
|
|
12187
12418
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12188
|
-
)), /* @__PURE__ */
|
|
12419
|
+
)), /* @__PURE__ */ import_react59.default.createElement(
|
|
12189
12420
|
"input",
|
|
12190
12421
|
{
|
|
12191
12422
|
type: "number",
|
|
@@ -12193,21 +12424,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12193
12424
|
value: height,
|
|
12194
12425
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12195
12426
|
}
|
|
12196
|
-
))), /* @__PURE__ */
|
|
12427
|
+
))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12197
12428
|
"button",
|
|
12198
12429
|
{
|
|
12199
12430
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12200
12431
|
onClick: () => setActiveTab("image")
|
|
12201
12432
|
},
|
|
12202
12433
|
"Image"
|
|
12203
|
-
), /* @__PURE__ */
|
|
12434
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
12204
12435
|
"button",
|
|
12205
12436
|
{
|
|
12206
12437
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12207
12438
|
onClick: () => setActiveTab("advanced")
|
|
12208
12439
|
},
|
|
12209
12440
|
"Advanced"
|
|
12210
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12441
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12211
12442
|
"input",
|
|
12212
12443
|
{
|
|
12213
12444
|
type: "text",
|
|
@@ -12215,7 +12446,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12215
12446
|
value: src,
|
|
12216
12447
|
onChange: (e) => setSrc(e.target.value)
|
|
12217
12448
|
}
|
|
12218
|
-
), /* @__PURE__ */
|
|
12449
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12219
12450
|
"input",
|
|
12220
12451
|
{
|
|
12221
12452
|
type: "text",
|
|
@@ -12223,7 +12454,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12223
12454
|
value: title,
|
|
12224
12455
|
onChange: (e) => setTitle(e.target.value)
|
|
12225
12456
|
}
|
|
12226
|
-
), /* @__PURE__ */
|
|
12457
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12227
12458
|
"input",
|
|
12228
12459
|
{
|
|
12229
12460
|
type: "text",
|
|
@@ -12231,7 +12462,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12231
12462
|
value: alt,
|
|
12232
12463
|
onChange: (e) => setAlt(e.target.value)
|
|
12233
12464
|
}
|
|
12234
|
-
), /* @__PURE__ */
|
|
12465
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12235
12466
|
"input",
|
|
12236
12467
|
{
|
|
12237
12468
|
type: "text",
|
|
@@ -12239,23 +12470,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12239
12470
|
value: link,
|
|
12240
12471
|
onChange: (e) => setLink(e.target.value)
|
|
12241
12472
|
}
|
|
12242
|
-
), /* @__PURE__ */
|
|
12473
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12243
12474
|
"input",
|
|
12244
12475
|
{
|
|
12245
12476
|
type: "checkbox",
|
|
12246
12477
|
checked: openInNewTab,
|
|
12247
12478
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12248
12479
|
}
|
|
12249
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12480
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12250
12481
|
};
|
|
12251
12482
|
var ImageToolbar = ({ editor }) => {
|
|
12252
|
-
const [showModal, setShowModal] = (0,
|
|
12253
|
-
const [showAlign, setShowAlign] = (0,
|
|
12254
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
12255
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12256
|
-
const [pos, setPos] = (0,
|
|
12257
|
-
const toolbarRef = (0,
|
|
12258
|
-
(0,
|
|
12483
|
+
const [showModal, setShowModal] = (0, import_react59.useState)(false);
|
|
12484
|
+
const [showAlign, setShowAlign] = (0, import_react59.useState)(false);
|
|
12485
|
+
const [showVAlign, setShowVAlign] = (0, import_react59.useState)(false);
|
|
12486
|
+
const [copyStatus, setCopyStatus] = (0, import_react59.useState)("");
|
|
12487
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12488
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12489
|
+
(0, import_react59.useEffect)(() => {
|
|
12259
12490
|
if (!editor) return;
|
|
12260
12491
|
const update = () => {
|
|
12261
12492
|
const { selection } = editor.state;
|
|
@@ -12285,7 +12516,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12285
12516
|
const node = editor?.state.selection.node;
|
|
12286
12517
|
const isImage = node && node.type.name === "image";
|
|
12287
12518
|
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12288
|
-
/* @__PURE__ */
|
|
12519
|
+
/* @__PURE__ */ import_react59.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12289
12520
|
document.body
|
|
12290
12521
|
) : null;
|
|
12291
12522
|
const handleDelete = () => {
|
|
@@ -12362,7 +12593,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12362
12593
|
setShowVAlign(false);
|
|
12363
12594
|
};
|
|
12364
12595
|
return (0, import_react_dom15.createPortal)(
|
|
12365
|
-
/* @__PURE__ */
|
|
12596
|
+
/* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
|
|
12366
12597
|
"div",
|
|
12367
12598
|
{
|
|
12368
12599
|
className: "image-toolbar",
|
|
@@ -12370,14 +12601,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12370
12601
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12371
12602
|
onMouseDown: (e) => e.preventDefault()
|
|
12372
12603
|
},
|
|
12373
|
-
/* @__PURE__ */
|
|
12374
|
-
/* @__PURE__ */
|
|
12375
|
-
/* @__PURE__ */
|
|
12376
|
-
/* @__PURE__ */
|
|
12604
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12605
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12606
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12607
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12377
12608
|
setShowAlign(!showAlign);
|
|
12378
12609
|
setShowVAlign(false);
|
|
12379
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12380
|
-
), showModal && /* @__PURE__ */
|
|
12610
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react59.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12611
|
+
), showModal && /* @__PURE__ */ import_react59.default.createElement(
|
|
12381
12612
|
ImagePropertiesModal,
|
|
12382
12613
|
{
|
|
12383
12614
|
editor,
|
|
@@ -12391,7 +12622,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12391
12622
|
var ImageToolbar_default = ImageToolbar;
|
|
12392
12623
|
|
|
12393
12624
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12394
|
-
var
|
|
12625
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
12395
12626
|
var import_react_dom16 = require("react-dom");
|
|
12396
12627
|
var ALIGNMENTS2 = [
|
|
12397
12628
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12400,10 +12631,10 @@ var ALIGNMENTS2 = [
|
|
|
12400
12631
|
];
|
|
12401
12632
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
12402
12633
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
12403
|
-
const [src, setSrc] = (0,
|
|
12404
|
-
const [width, setWidth] = (0,
|
|
12405
|
-
const [height, setHeight] = (0,
|
|
12406
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12634
|
+
const [src, setSrc] = (0, import_react60.useState)(node?.attrs?.src || "");
|
|
12635
|
+
const [width, setWidth] = (0, import_react60.useState)(String(node?.attrs?.width || 640));
|
|
12636
|
+
const [height, setHeight] = (0, import_react60.useState)(String(node?.attrs?.height || 360));
|
|
12637
|
+
const [lockRatio, setLockRatio] = (0, import_react60.useState)(true);
|
|
12407
12638
|
const handleWidthChange = (val) => {
|
|
12408
12639
|
setWidth(val);
|
|
12409
12640
|
if (lockRatio) {
|
|
@@ -12436,7 +12667,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12436
12667
|
onClose();
|
|
12437
12668
|
};
|
|
12438
12669
|
const isYoutube = nodeType === "youtube";
|
|
12439
|
-
return /* @__PURE__ */
|
|
12670
|
+
return /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react60.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react60.default.createElement(
|
|
12440
12671
|
"iframe",
|
|
12441
12672
|
{
|
|
12442
12673
|
src,
|
|
@@ -12444,14 +12675,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12444
12675
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12445
12676
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12446
12677
|
}
|
|
12447
|
-
) : /* @__PURE__ */
|
|
12678
|
+
) : /* @__PURE__ */ import_react60.default.createElement(
|
|
12448
12679
|
"video",
|
|
12449
12680
|
{
|
|
12450
12681
|
src,
|
|
12451
12682
|
controls: true,
|
|
12452
12683
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12453
12684
|
}
|
|
12454
|
-
)), /* @__PURE__ */
|
|
12685
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12455
12686
|
"input",
|
|
12456
12687
|
{
|
|
12457
12688
|
type: "number",
|
|
@@ -12459,14 +12690,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12459
12690
|
value: width,
|
|
12460
12691
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12461
12692
|
}
|
|
12462
|
-
), /* @__PURE__ */
|
|
12693
|
+
), /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12463
12694
|
"button",
|
|
12464
12695
|
{
|
|
12465
12696
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12466
12697
|
onClick: () => setLockRatio(!lockRatio)
|
|
12467
12698
|
},
|
|
12468
12699
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12469
|
-
)), /* @__PURE__ */
|
|
12700
|
+
)), /* @__PURE__ */ import_react60.default.createElement(
|
|
12470
12701
|
"input",
|
|
12471
12702
|
{
|
|
12472
12703
|
type: "number",
|
|
@@ -12474,7 +12705,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12474
12705
|
value: height,
|
|
12475
12706
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12476
12707
|
}
|
|
12477
|
-
))), /* @__PURE__ */
|
|
12708
|
+
))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12478
12709
|
"input",
|
|
12479
12710
|
{
|
|
12480
12711
|
type: "text",
|
|
@@ -12482,7 +12713,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12482
12713
|
value: src,
|
|
12483
12714
|
onChange: (e) => setSrc(e.target.value)
|
|
12484
12715
|
}
|
|
12485
|
-
), /* @__PURE__ */
|
|
12716
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12486
12717
|
"input",
|
|
12487
12718
|
{
|
|
12488
12719
|
type: "number",
|
|
@@ -12490,7 +12721,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12490
12721
|
value: width,
|
|
12491
12722
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12492
12723
|
}
|
|
12493
|
-
), /* @__PURE__ */
|
|
12724
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12494
12725
|
"input",
|
|
12495
12726
|
{
|
|
12496
12727
|
type: "number",
|
|
@@ -12498,16 +12729,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12498
12729
|
value: height,
|
|
12499
12730
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12500
12731
|
}
|
|
12501
|
-
)))), /* @__PURE__ */
|
|
12732
|
+
)))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12502
12733
|
};
|
|
12503
12734
|
var VideoToolbar = ({ editor }) => {
|
|
12504
|
-
const [showModal, setShowModal] = (0,
|
|
12505
|
-
const [showSize, setShowSize] = (0,
|
|
12506
|
-
const [showAlign, setShowAlign] = (0,
|
|
12507
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12508
|
-
const [pos, setPos] = (0,
|
|
12509
|
-
const toolbarRef = (0,
|
|
12510
|
-
(0,
|
|
12735
|
+
const [showModal, setShowModal] = (0, import_react60.useState)(false);
|
|
12736
|
+
const [showSize, setShowSize] = (0, import_react60.useState)(false);
|
|
12737
|
+
const [showAlign, setShowAlign] = (0, import_react60.useState)(false);
|
|
12738
|
+
const [copyStatus, setCopyStatus] = (0, import_react60.useState)("");
|
|
12739
|
+
const [pos, setPos] = (0, import_react60.useState)(null);
|
|
12740
|
+
const toolbarRef = (0, import_react60.useRef)(null);
|
|
12741
|
+
(0, import_react60.useEffect)(() => {
|
|
12511
12742
|
if (!editor) return;
|
|
12512
12743
|
const update = () => {
|
|
12513
12744
|
const { selection } = editor.state;
|
|
@@ -12538,7 +12769,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12538
12769
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12539
12770
|
const nodeType = node?.type.name;
|
|
12540
12771
|
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12541
|
-
/* @__PURE__ */
|
|
12772
|
+
/* @__PURE__ */ import_react60.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12542
12773
|
document.body
|
|
12543
12774
|
) : null;
|
|
12544
12775
|
const handleDelete = () => {
|
|
@@ -12585,7 +12816,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12585
12816
|
);
|
|
12586
12817
|
};
|
|
12587
12818
|
return (0, import_react_dom16.createPortal)(
|
|
12588
|
-
/* @__PURE__ */
|
|
12819
|
+
/* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
|
|
12589
12820
|
"div",
|
|
12590
12821
|
{
|
|
12591
12822
|
className: "image-toolbar",
|
|
@@ -12593,30 +12824,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12593
12824
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12594
12825
|
onMouseDown: (e) => e.preventDefault()
|
|
12595
12826
|
},
|
|
12596
|
-
/* @__PURE__ */
|
|
12597
|
-
/* @__PURE__ */
|
|
12598
|
-
/* @__PURE__ */
|
|
12599
|
-
/* @__PURE__ */
|
|
12827
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12828
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12829
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react60.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12830
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12600
12831
|
setShowSize(!showSize);
|
|
12601
12832
|
setShowAlign(false);
|
|
12602
|
-
} }, /* @__PURE__ */
|
|
12833
|
+
} }, /* @__PURE__ */ import_react60.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12603
12834
|
handleResize("small");
|
|
12604
12835
|
setShowSize(false);
|
|
12605
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12836
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12606
12837
|
handleResize("medium");
|
|
12607
12838
|
setShowSize(false);
|
|
12608
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12839
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12609
12840
|
handleResize("large");
|
|
12610
12841
|
setShowSize(false);
|
|
12611
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12842
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12612
12843
|
handleResize("full");
|
|
12613
12844
|
setShowSize(false);
|
|
12614
12845
|
} }, "Full (854x480)"))),
|
|
12615
|
-
/* @__PURE__ */
|
|
12846
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12616
12847
|
setShowAlign(!showAlign);
|
|
12617
12848
|
setShowSize(false);
|
|
12618
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12619
|
-
), showModal && /* @__PURE__ */
|
|
12849
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react60.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12850
|
+
), showModal && /* @__PURE__ */ import_react60.default.createElement(
|
|
12620
12851
|
VideoPropertiesModal,
|
|
12621
12852
|
{
|
|
12622
12853
|
editor,
|
|
@@ -12631,22 +12862,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12631
12862
|
var VideoToolbar_default = VideoToolbar;
|
|
12632
12863
|
|
|
12633
12864
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12634
|
-
var
|
|
12865
|
+
var import_react61 = __toESM(require("react"), 1);
|
|
12635
12866
|
var import_react_dom17 = require("react-dom");
|
|
12636
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12637
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12638
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12639
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12640
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12641
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12642
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12643
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12644
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12645
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12867
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12868
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12869
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12870
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12871
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12872
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12873
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12874
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12875
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12876
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react61.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12646
12877
|
var TableToolbar = ({ editor }) => {
|
|
12647
|
-
const [pos, setPos] = (0,
|
|
12648
|
-
const toolbarRef = (0,
|
|
12649
|
-
(0,
|
|
12878
|
+
const [pos, setPos] = (0, import_react61.useState)(null);
|
|
12879
|
+
const toolbarRef = (0, import_react61.useRef)(null);
|
|
12880
|
+
(0, import_react61.useEffect)(() => {
|
|
12650
12881
|
if (!editor) return;
|
|
12651
12882
|
const update = () => {
|
|
12652
12883
|
if (!editor.isActive("table")) {
|
|
@@ -12690,7 +12921,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12690
12921
|
const canSplit = editor.can().splitCell();
|
|
12691
12922
|
const prevent = (e) => e.preventDefault();
|
|
12692
12923
|
return (0, import_react_dom17.createPortal)(
|
|
12693
|
-
/* @__PURE__ */
|
|
12924
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12694
12925
|
"div",
|
|
12695
12926
|
{
|
|
12696
12927
|
ref: toolbarRef,
|
|
@@ -12698,19 +12929,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12698
12929
|
style: { top: pos.top, left: pos.left },
|
|
12699
12930
|
onMouseDown: prevent
|
|
12700
12931
|
},
|
|
12701
|
-
/* @__PURE__ */
|
|
12702
|
-
/* @__PURE__ */
|
|
12703
|
-
/* @__PURE__ */
|
|
12704
|
-
/* @__PURE__ */
|
|
12705
|
-
/* @__PURE__ */
|
|
12706
|
-
/* @__PURE__ */
|
|
12707
|
-
/* @__PURE__ */
|
|
12708
|
-
/* @__PURE__ */
|
|
12709
|
-
/* @__PURE__ */
|
|
12710
|
-
/* @__PURE__ */
|
|
12711
|
-
/* @__PURE__ */
|
|
12712
|
-
/* @__PURE__ */
|
|
12713
|
-
/* @__PURE__ */
|
|
12932
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowBefore, null))),
|
|
12933
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowAfter, null))),
|
|
12934
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteRow, null))),
|
|
12935
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12936
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColBefore, null))),
|
|
12937
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColAfter, null))),
|
|
12938
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteCol, null))),
|
|
12939
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12940
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react61.default.createElement(IconMergeCells, null))),
|
|
12941
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react61.default.createElement(IconSplitCell, null))),
|
|
12942
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12943
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconToggleHeader, null))),
|
|
12944
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteTable, null)))
|
|
12714
12945
|
),
|
|
12715
12946
|
document.body
|
|
12716
12947
|
);
|
|
@@ -12876,7 +13107,7 @@ var RufousTextEditor = ({
|
|
|
12876
13107
|
sx
|
|
12877
13108
|
}) => {
|
|
12878
13109
|
const sxClass = useSx(sx);
|
|
12879
|
-
const toolbarButtons = (0,
|
|
13110
|
+
const toolbarButtons = (0, import_react62.useMemo)(() => {
|
|
12880
13111
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12881
13112
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12882
13113
|
if (hideButtons) {
|
|
@@ -12884,17 +13115,17 @@ var RufousTextEditor = ({
|
|
|
12884
13115
|
}
|
|
12885
13116
|
return visible;
|
|
12886
13117
|
}, [buttons, variant, hideButtons]);
|
|
12887
|
-
const mentionSuggestion = (0,
|
|
12888
|
-
const onChangeRef = (0,
|
|
12889
|
-
const onBlurRef = (0,
|
|
12890
|
-
(0,
|
|
13118
|
+
const mentionSuggestion = (0, import_react62.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
13119
|
+
const onChangeRef = (0, import_react62.useRef)(onChange);
|
|
13120
|
+
const onBlurRef = (0, import_react62.useRef)(onBlur);
|
|
13121
|
+
(0, import_react62.useEffect)(() => {
|
|
12891
13122
|
onChangeRef.current = onChange;
|
|
12892
13123
|
}, [onChange]);
|
|
12893
|
-
(0,
|
|
13124
|
+
(0, import_react62.useEffect)(() => {
|
|
12894
13125
|
onBlurRef.current = onBlur;
|
|
12895
13126
|
}, [onBlur]);
|
|
12896
13127
|
const isEditable = editable && !disabled;
|
|
12897
|
-
const editor = (0,
|
|
13128
|
+
const editor = (0, import_react63.useEditor)({
|
|
12898
13129
|
editable: isEditable,
|
|
12899
13130
|
extensions: [
|
|
12900
13131
|
import_starter_kit.default,
|
|
@@ -12991,8 +13222,8 @@ var RufousTextEditor = ({
|
|
|
12991
13222
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12992
13223
|
}
|
|
12993
13224
|
});
|
|
12994
|
-
const wrapperRef = (0,
|
|
12995
|
-
(0,
|
|
13225
|
+
const wrapperRef = (0, import_react62.useRef)(null);
|
|
13226
|
+
(0, import_react62.useEffect)(() => {
|
|
12996
13227
|
if (!editor) return;
|
|
12997
13228
|
let blurTimer = null;
|
|
12998
13229
|
const handler = ({ event }) => {
|
|
@@ -13010,15 +13241,15 @@ var RufousTextEditor = ({
|
|
|
13010
13241
|
if (blurTimer) clearTimeout(blurTimer);
|
|
13011
13242
|
};
|
|
13012
13243
|
}, [editor]);
|
|
13013
|
-
const setLinkRef = (0,
|
|
13014
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
13015
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
13016
|
-
const [linkText, setLinkText] = (0,
|
|
13017
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
13018
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
13019
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
13020
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
13021
|
-
const setLink = (0,
|
|
13244
|
+
const setLinkRef = (0, import_react62.useRef)(null);
|
|
13245
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react62.useState)(false);
|
|
13246
|
+
const [linkUrl, setLinkUrl] = (0, import_react62.useState)("");
|
|
13247
|
+
const [linkText, setLinkText] = (0, import_react62.useState)("");
|
|
13248
|
+
const [linkClassName, setLinkClassName] = (0, import_react62.useState)("");
|
|
13249
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react62.useState)(true);
|
|
13250
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react62.useState)(true);
|
|
13251
|
+
const [linkSelection, setLinkSelection] = (0, import_react62.useState)(null);
|
|
13252
|
+
const setLink = (0, import_react62.useCallback)(() => {
|
|
13022
13253
|
if (!editor) return;
|
|
13023
13254
|
const attrs = editor.getAttributes("link");
|
|
13024
13255
|
const previousUrl = attrs.href || "";
|
|
@@ -13055,10 +13286,10 @@ var RufousTextEditor = ({
|
|
|
13055
13286
|
setLinkSelection({ from, to });
|
|
13056
13287
|
setLinkModalOpen(true);
|
|
13057
13288
|
}, [editor]);
|
|
13058
|
-
(0,
|
|
13289
|
+
(0, import_react62.useEffect)(() => {
|
|
13059
13290
|
setLinkRef.current = setLink;
|
|
13060
13291
|
}, [setLink]);
|
|
13061
|
-
(0,
|
|
13292
|
+
(0, import_react62.useEffect)(() => {
|
|
13062
13293
|
if (!editor?.view) return;
|
|
13063
13294
|
const handleKeyDown = (event) => {
|
|
13064
13295
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -13090,7 +13321,7 @@ var RufousTextEditor = ({
|
|
|
13090
13321
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
13091
13322
|
};
|
|
13092
13323
|
}, [editor]);
|
|
13093
|
-
const handleLinkSubmit = (0,
|
|
13324
|
+
const handleLinkSubmit = (0, import_react62.useCallback)(() => {
|
|
13094
13325
|
if (!editor || !linkSelection) return;
|
|
13095
13326
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
13096
13327
|
if (linkUrl === "") {
|
|
@@ -13126,7 +13357,7 @@ var RufousTextEditor = ({
|
|
|
13126
13357
|
setLinkClassName("");
|
|
13127
13358
|
setLinkSelection(null);
|
|
13128
13359
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13129
|
-
const handleLinkRemove = (0,
|
|
13360
|
+
const handleLinkRemove = (0, import_react62.useCallback)(() => {
|
|
13130
13361
|
if (!editor || !linkSelection) return;
|
|
13131
13362
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13132
13363
|
setLinkModalOpen(false);
|
|
@@ -13135,7 +13366,7 @@ var RufousTextEditor = ({
|
|
|
13135
13366
|
setLinkClassName("");
|
|
13136
13367
|
setLinkSelection(null);
|
|
13137
13368
|
}, [editor, linkSelection]);
|
|
13138
|
-
const handleLinkCancel = (0,
|
|
13369
|
+
const handleLinkCancel = (0, import_react62.useCallback)(() => {
|
|
13139
13370
|
setLinkModalOpen(false);
|
|
13140
13371
|
setLinkUrl("");
|
|
13141
13372
|
setLinkText("");
|
|
@@ -13143,21 +13374,21 @@ var RufousTextEditor = ({
|
|
|
13143
13374
|
setLinkSelection(null);
|
|
13144
13375
|
editor?.chain().focus().run();
|
|
13145
13376
|
}, [editor]);
|
|
13146
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
13147
|
-
const handleSave = (0,
|
|
13377
|
+
const [saveStatus, setSaveStatus] = (0, import_react62.useState)("");
|
|
13378
|
+
const handleSave = (0, import_react62.useCallback)(() => {
|
|
13148
13379
|
if (!editor || !onSaveProp) return;
|
|
13149
13380
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13150
13381
|
setSaveStatus("Saved!");
|
|
13151
13382
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13152
13383
|
}, [editor, onSaveProp]);
|
|
13153
|
-
const handleExport = (0,
|
|
13384
|
+
const handleExport = (0, import_react62.useCallback)(() => {
|
|
13154
13385
|
if (!editor || !onExportProp) return;
|
|
13155
13386
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13156
13387
|
}, [editor, onExportProp]);
|
|
13157
|
-
const providerValue = (0,
|
|
13158
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
13159
|
-
const toggleFullscreen = (0,
|
|
13160
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13388
|
+
const providerValue = (0, import_react62.useMemo)(() => ({ editor }), [editor]);
|
|
13389
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react62.useState)(false);
|
|
13390
|
+
const toggleFullscreen = (0, import_react62.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13391
|
+
const wrapperJsx = /* @__PURE__ */ import_react62.default.createElement(
|
|
13161
13392
|
"div",
|
|
13162
13393
|
{
|
|
13163
13394
|
ref: wrapperRef,
|
|
@@ -13168,7 +13399,7 @@ var RufousTextEditor = ({
|
|
|
13168
13399
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13169
13400
|
}
|
|
13170
13401
|
},
|
|
13171
|
-
/* @__PURE__ */
|
|
13402
|
+
/* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13172
13403
|
Toolbar_default,
|
|
13173
13404
|
{
|
|
13174
13405
|
editor,
|
|
@@ -13183,8 +13414,8 @@ var RufousTextEditor = ({
|
|
|
13183
13414
|
isFullscreen,
|
|
13184
13415
|
onToggleFullscreen: toggleFullscreen
|
|
13185
13416
|
}
|
|
13186
|
-
), /* @__PURE__ */
|
|
13187
|
-
|
|
13417
|
+
), /* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react62.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13418
|
+
import_react63.BubbleMenu,
|
|
13188
13419
|
{
|
|
13189
13420
|
editor,
|
|
13190
13421
|
className: "bubble-menu",
|
|
@@ -13201,31 +13432,31 @@ var RufousTextEditor = ({
|
|
|
13201
13432
|
}
|
|
13202
13433
|
}
|
|
13203
13434
|
},
|
|
13204
|
-
/* @__PURE__ */
|
|
13435
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13205
13436
|
"button",
|
|
13206
13437
|
{
|
|
13207
13438
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13208
13439
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13209
13440
|
},
|
|
13210
|
-
/* @__PURE__ */
|
|
13441
|
+
/* @__PURE__ */ import_react62.default.createElement("strong", null, "B")
|
|
13211
13442
|
),
|
|
13212
|
-
/* @__PURE__ */
|
|
13443
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13213
13444
|
"button",
|
|
13214
13445
|
{
|
|
13215
13446
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13216
13447
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13217
13448
|
},
|
|
13218
|
-
/* @__PURE__ */
|
|
13449
|
+
/* @__PURE__ */ import_react62.default.createElement("em", null, "I")
|
|
13219
13450
|
),
|
|
13220
|
-
/* @__PURE__ */
|
|
13451
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13221
13452
|
"button",
|
|
13222
13453
|
{
|
|
13223
13454
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13224
13455
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13225
13456
|
},
|
|
13226
|
-
/* @__PURE__ */
|
|
13457
|
+
/* @__PURE__ */ import_react62.default.createElement("s", null, "S")
|
|
13227
13458
|
),
|
|
13228
|
-
/* @__PURE__ */
|
|
13459
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13229
13460
|
"button",
|
|
13230
13461
|
{
|
|
13231
13462
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13233,7 +13464,7 @@ var RufousTextEditor = ({
|
|
|
13233
13464
|
},
|
|
13234
13465
|
"</>"
|
|
13235
13466
|
),
|
|
13236
|
-
/* @__PURE__ */
|
|
13467
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13237
13468
|
"button",
|
|
13238
13469
|
{
|
|
13239
13470
|
onClick: setLink,
|
|
@@ -13241,8 +13472,8 @@ var RufousTextEditor = ({
|
|
|
13241
13472
|
},
|
|
13242
13473
|
"\u{1F517}"
|
|
13243
13474
|
)
|
|
13244
|
-
), editor && /* @__PURE__ */
|
|
13245
|
-
|
|
13475
|
+
), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13476
|
+
import_react63.FloatingMenu,
|
|
13246
13477
|
{
|
|
13247
13478
|
editor,
|
|
13248
13479
|
className: "floating-menu",
|
|
@@ -13256,7 +13487,7 @@ var RufousTextEditor = ({
|
|
|
13256
13487
|
}
|
|
13257
13488
|
}
|
|
13258
13489
|
},
|
|
13259
|
-
/* @__PURE__ */
|
|
13490
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13260
13491
|
"button",
|
|
13261
13492
|
{
|
|
13262
13493
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13264,7 +13495,7 @@ var RufousTextEditor = ({
|
|
|
13264
13495
|
},
|
|
13265
13496
|
"H1"
|
|
13266
13497
|
),
|
|
13267
|
-
/* @__PURE__ */
|
|
13498
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13268
13499
|
"button",
|
|
13269
13500
|
{
|
|
13270
13501
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13272,7 +13503,7 @@ var RufousTextEditor = ({
|
|
|
13272
13503
|
},
|
|
13273
13504
|
"H2"
|
|
13274
13505
|
),
|
|
13275
|
-
/* @__PURE__ */
|
|
13506
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13276
13507
|
"button",
|
|
13277
13508
|
{
|
|
13278
13509
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13280,7 +13511,7 @@ var RufousTextEditor = ({
|
|
|
13280
13511
|
},
|
|
13281
13512
|
"\u2022 List"
|
|
13282
13513
|
),
|
|
13283
|
-
/* @__PURE__ */
|
|
13514
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13284
13515
|
"button",
|
|
13285
13516
|
{
|
|
13286
13517
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13288,7 +13519,7 @@ var RufousTextEditor = ({
|
|
|
13288
13519
|
},
|
|
13289
13520
|
"1. List"
|
|
13290
13521
|
),
|
|
13291
|
-
/* @__PURE__ */
|
|
13522
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13292
13523
|
"button",
|
|
13293
13524
|
{
|
|
13294
13525
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13296,8 +13527,8 @@ var RufousTextEditor = ({
|
|
|
13296
13527
|
},
|
|
13297
13528
|
"\u201C Quote"
|
|
13298
13529
|
)
|
|
13299
|
-
), /* @__PURE__ */
|
|
13300
|
-
/* @__PURE__ */
|
|
13530
|
+
), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react62.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13531
|
+
/* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13301
13532
|
"input",
|
|
13302
13533
|
{
|
|
13303
13534
|
type: "url",
|
|
@@ -13310,7 +13541,7 @@ var RufousTextEditor = ({
|
|
|
13310
13541
|
placeholder: "https://example.com",
|
|
13311
13542
|
autoFocus: true
|
|
13312
13543
|
}
|
|
13313
|
-
)), /* @__PURE__ */
|
|
13544
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13314
13545
|
"input",
|
|
13315
13546
|
{
|
|
13316
13547
|
type: "text",
|
|
@@ -13322,24 +13553,24 @@ var RufousTextEditor = ({
|
|
|
13322
13553
|
},
|
|
13323
13554
|
placeholder: "Link text"
|
|
13324
13555
|
}
|
|
13325
|
-
)), /* @__PURE__ */
|
|
13556
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13326
13557
|
"input",
|
|
13327
13558
|
{
|
|
13328
13559
|
type: "checkbox",
|
|
13329
13560
|
checked: linkNewTab,
|
|
13330
13561
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13331
13562
|
}
|
|
13332
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13563
|
+
), "Open in new tab"), /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13333
13564
|
"input",
|
|
13334
13565
|
{
|
|
13335
13566
|
type: "checkbox",
|
|
13336
13567
|
checked: linkNoFollow,
|
|
13337
13568
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13338
13569
|
}
|
|
13339
|
-
), "No follow"))), /* @__PURE__ */
|
|
13570
|
+
), "No follow"))), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13340
13571
|
document.body
|
|
13341
13572
|
)),
|
|
13342
|
-
helperText && /* @__PURE__ */
|
|
13573
|
+
helperText && /* @__PURE__ */ import_react62.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13343
13574
|
);
|
|
13344
13575
|
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
13345
13576
|
};
|
|
@@ -13350,7 +13581,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13350
13581
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13351
13582
|
} catch {
|
|
13352
13583
|
}
|
|
13353
|
-
return /* @__PURE__ */
|
|
13584
|
+
return /* @__PURE__ */ import_react62.default.createElement(
|
|
13354
13585
|
"div",
|
|
13355
13586
|
{
|
|
13356
13587
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13465,6 +13696,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13465
13696
|
Skeleton,
|
|
13466
13697
|
Slide,
|
|
13467
13698
|
Slider,
|
|
13699
|
+
SmartSelect,
|
|
13468
13700
|
Snackbar,
|
|
13469
13701
|
SoftSkillsIcon,
|
|
13470
13702
|
Stack,
|