@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.js
CHANGED
|
@@ -5257,6 +5257,10 @@ var CheckIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "16
|
|
|
5257
5257
|
function normaliseOptions(options) {
|
|
5258
5258
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5259
5259
|
}
|
|
5260
|
+
function OptionIcon({ icon }) {
|
|
5261
|
+
if (!icon) return null;
|
|
5262
|
+
return /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ React76.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : React76.createElement(icon, { size: 16 }));
|
|
5263
|
+
}
|
|
5260
5264
|
var Select = React76.forwardRef(function Select2(props, ref) {
|
|
5261
5265
|
const {
|
|
5262
5266
|
options: rawOptions,
|
|
@@ -5425,7 +5429,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5425
5429
|
}
|
|
5426
5430
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5427
5431
|
if (selectedOpt) {
|
|
5428
|
-
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5432
|
+
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ React76.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5429
5433
|
}
|
|
5430
5434
|
return /* @__PURE__ */ React76.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5431
5435
|
};
|
|
@@ -5483,6 +5487,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5483
5487
|
onMouseDown: (e) => e.preventDefault(),
|
|
5484
5488
|
onClick: (e) => selectOption(opt, e)
|
|
5485
5489
|
},
|
|
5490
|
+
/* @__PURE__ */ React76.createElement(OptionIcon, { icon: opt.icon }),
|
|
5486
5491
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5487
5492
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))
|
|
5488
5493
|
);
|
|
@@ -9403,7 +9408,7 @@ function UserSelectionField({
|
|
|
9403
9408
|
multiple,
|
|
9404
9409
|
limitTags,
|
|
9405
9410
|
loading,
|
|
9406
|
-
loadingText: /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ React107.createElement(
|
|
9411
|
+
loadingText: /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ React107.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9407
9412
|
getOptionLabel: getLabel,
|
|
9408
9413
|
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9409
9414
|
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
@@ -9427,8 +9432,233 @@ function UserSelectionField({
|
|
|
9427
9432
|
);
|
|
9428
9433
|
}
|
|
9429
9434
|
|
|
9435
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9436
|
+
import React108, { useCallback as useCallback11, useMemo as useMemo3 } from "react";
|
|
9437
|
+
var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9438
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9439
|
+
return options.flatMap((opt) => [
|
|
9440
|
+
{ option: opt, depth },
|
|
9441
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9442
|
+
]);
|
|
9443
|
+
}
|
|
9444
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9445
|
+
const ids = [getValue(option)];
|
|
9446
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9447
|
+
return ids;
|
|
9448
|
+
}
|
|
9449
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9450
|
+
for (const opt of options) {
|
|
9451
|
+
map.set(getValue(opt), opt);
|
|
9452
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9453
|
+
}
|
|
9454
|
+
return map;
|
|
9455
|
+
}
|
|
9456
|
+
function SmartSelect({
|
|
9457
|
+
options,
|
|
9458
|
+
value,
|
|
9459
|
+
onChange,
|
|
9460
|
+
onSearchChange,
|
|
9461
|
+
getOptionLabel,
|
|
9462
|
+
getOptionValue,
|
|
9463
|
+
getOptionSubLabel,
|
|
9464
|
+
getOptionChildren,
|
|
9465
|
+
multiple = false,
|
|
9466
|
+
allowChildNodesSelection = true,
|
|
9467
|
+
loading = false,
|
|
9468
|
+
loadingText,
|
|
9469
|
+
filterOptions: filterOptionsProp,
|
|
9470
|
+
renderOption: renderOptionProp,
|
|
9471
|
+
limitTags,
|
|
9472
|
+
label,
|
|
9473
|
+
placeholder,
|
|
9474
|
+
variant = "outlined",
|
|
9475
|
+
size = "small",
|
|
9476
|
+
disabled = false,
|
|
9477
|
+
error = false,
|
|
9478
|
+
helperText,
|
|
9479
|
+
fullWidth = true,
|
|
9480
|
+
required = false,
|
|
9481
|
+
className,
|
|
9482
|
+
style,
|
|
9483
|
+
sx
|
|
9484
|
+
}) {
|
|
9485
|
+
const getValue = useCallback11(
|
|
9486
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9487
|
+
[getOptionValue, getOptionLabel]
|
|
9488
|
+
);
|
|
9489
|
+
const flatItems = useMemo3(() => {
|
|
9490
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9491
|
+
return flattenTree(options, getOptionChildren);
|
|
9492
|
+
}, [options, getOptionChildren]);
|
|
9493
|
+
const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9494
|
+
const depthMap = useMemo3(() => {
|
|
9495
|
+
const map = /* @__PURE__ */ new Map();
|
|
9496
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9497
|
+
return map;
|
|
9498
|
+
}, [flatItems, getValue]);
|
|
9499
|
+
const lookup = useMemo3(
|
|
9500
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9501
|
+
[options, getOptionChildren, getValue]
|
|
9502
|
+
);
|
|
9503
|
+
const selectedKeys = useMemo3(() => {
|
|
9504
|
+
if (multiple) {
|
|
9505
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9506
|
+
}
|
|
9507
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9508
|
+
}, [multiple, value, getValue]);
|
|
9509
|
+
const handleInputChange = useCallback11((_, inputValue) => {
|
|
9510
|
+
if (!onSearchChange) return;
|
|
9511
|
+
if (!inputValue) {
|
|
9512
|
+
onSearchChange("");
|
|
9513
|
+
return;
|
|
9514
|
+
}
|
|
9515
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9516
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9517
|
+
);
|
|
9518
|
+
if (!hasLocalMatch) {
|
|
9519
|
+
onSearchChange(inputValue);
|
|
9520
|
+
}
|
|
9521
|
+
}, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9522
|
+
const handleChange = useCallback11((_, newValue) => {
|
|
9523
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9524
|
+
onChange?.(newValue);
|
|
9525
|
+
return;
|
|
9526
|
+
}
|
|
9527
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9528
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9529
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9530
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9531
|
+
let changedKey = null;
|
|
9532
|
+
let wasAdded = false;
|
|
9533
|
+
for (const k of newKeys) {
|
|
9534
|
+
if (!currentKeys.has(k)) {
|
|
9535
|
+
changedKey = k;
|
|
9536
|
+
wasAdded = true;
|
|
9537
|
+
break;
|
|
9538
|
+
}
|
|
9539
|
+
}
|
|
9540
|
+
if (changedKey === null) {
|
|
9541
|
+
for (const k of currentKeys) {
|
|
9542
|
+
if (!newKeys.has(k)) {
|
|
9543
|
+
changedKey = k;
|
|
9544
|
+
wasAdded = false;
|
|
9545
|
+
break;
|
|
9546
|
+
}
|
|
9547
|
+
}
|
|
9548
|
+
}
|
|
9549
|
+
if (changedKey !== null) {
|
|
9550
|
+
const opt = lookup.get(changedKey);
|
|
9551
|
+
if (opt) {
|
|
9552
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9553
|
+
if (wasAdded) {
|
|
9554
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9555
|
+
} else {
|
|
9556
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9557
|
+
}
|
|
9558
|
+
}
|
|
9559
|
+
}
|
|
9560
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9561
|
+
onChange?.(result);
|
|
9562
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9563
|
+
const defaultRenderOption = useCallback11((props, option) => {
|
|
9564
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9565
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9566
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9567
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9568
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9569
|
+
"li",
|
|
9570
|
+
{
|
|
9571
|
+
key,
|
|
9572
|
+
...rest,
|
|
9573
|
+
className: muiClass,
|
|
9574
|
+
style: {
|
|
9575
|
+
...muiStyle,
|
|
9576
|
+
display: "flex",
|
|
9577
|
+
alignItems: "center",
|
|
9578
|
+
gap: 10,
|
|
9579
|
+
padding: "8px 16px",
|
|
9580
|
+
paddingLeft: 16 + depth * 20,
|
|
9581
|
+
fontSize: "0.9rem",
|
|
9582
|
+
color: "rgba(0,0,0,0.87)",
|
|
9583
|
+
cursor: "pointer",
|
|
9584
|
+
userSelect: "none",
|
|
9585
|
+
minHeight: 40,
|
|
9586
|
+
boxSizing: "border-box",
|
|
9587
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9588
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9589
|
+
listStyle: "none"
|
|
9590
|
+
}
|
|
9591
|
+
},
|
|
9592
|
+
/* @__PURE__ */ React108.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9593
|
+
/* @__PURE__ */ React108.createElement("span", { style: {
|
|
9594
|
+
color: "var(--primary-color, #a41b06)",
|
|
9595
|
+
flexShrink: 0,
|
|
9596
|
+
display: "flex",
|
|
9597
|
+
alignItems: "center",
|
|
9598
|
+
opacity: isSelected ? 1 : 0,
|
|
9599
|
+
transition: "opacity 0.1s"
|
|
9600
|
+
} }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
|
|
9601
|
+
);
|
|
9602
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9603
|
+
const computedFilterOptions = useCallback11((opts, inputValue) => {
|
|
9604
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9605
|
+
if (multiple) {
|
|
9606
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9607
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9608
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9609
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9610
|
+
) : unselected;
|
|
9611
|
+
return [...selected, ...filteredRest];
|
|
9612
|
+
}
|
|
9613
|
+
if (value != null) {
|
|
9614
|
+
const selectedLabel = getOptionLabel(value);
|
|
9615
|
+
if (inputValue === selectedLabel) {
|
|
9616
|
+
const selectedKey = getValue(value);
|
|
9617
|
+
return [
|
|
9618
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9619
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9620
|
+
];
|
|
9621
|
+
}
|
|
9622
|
+
}
|
|
9623
|
+
if (!inputValue) return opts;
|
|
9624
|
+
const q = inputValue.toLowerCase();
|
|
9625
|
+
return opts.filter(
|
|
9626
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9627
|
+
);
|
|
9628
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9629
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9630
|
+
Autocomplete,
|
|
9631
|
+
{
|
|
9632
|
+
options: flatOptionsList,
|
|
9633
|
+
value: value ?? (multiple ? [] : null),
|
|
9634
|
+
onChange: handleChange,
|
|
9635
|
+
onInputChange: handleInputChange,
|
|
9636
|
+
multiple,
|
|
9637
|
+
limitTags,
|
|
9638
|
+
loading,
|
|
9639
|
+
loadingText: loadingText ?? /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9640
|
+
getOptionLabel,
|
|
9641
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9642
|
+
filterOptions: computedFilterOptions,
|
|
9643
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9644
|
+
label,
|
|
9645
|
+
placeholder: placeholder ?? label,
|
|
9646
|
+
size,
|
|
9647
|
+
variant,
|
|
9648
|
+
disabled,
|
|
9649
|
+
error,
|
|
9650
|
+
helperText,
|
|
9651
|
+
fullWidth,
|
|
9652
|
+
required,
|
|
9653
|
+
className,
|
|
9654
|
+
style,
|
|
9655
|
+
sx
|
|
9656
|
+
}
|
|
9657
|
+
);
|
|
9658
|
+
}
|
|
9659
|
+
|
|
9430
9660
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9431
|
-
import
|
|
9661
|
+
import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef32, useEffect as useEffect29 } from "react";
|
|
9432
9662
|
import { createPortal as createPortal8 } from "react-dom";
|
|
9433
9663
|
import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
|
|
9434
9664
|
import StarterKit from "@tiptap/starter-kit";
|
|
@@ -9454,7 +9684,7 @@ import { ReactRenderer } from "@tiptap/react";
|
|
|
9454
9684
|
import tippy from "tippy.js";
|
|
9455
9685
|
|
|
9456
9686
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9457
|
-
import
|
|
9687
|
+
import React109, { forwardRef as forwardRef11, useEffect as useEffect21, useImperativeHandle, useState as useState26 } from "react";
|
|
9458
9688
|
var MentionList = forwardRef11((props, ref) => {
|
|
9459
9689
|
const [selectedIndex, setSelectedIndex] = useState26(0);
|
|
9460
9690
|
const selectItem = (index) => {
|
|
@@ -9482,17 +9712,17 @@ var MentionList = forwardRef11((props, ref) => {
|
|
|
9482
9712
|
}
|
|
9483
9713
|
}));
|
|
9484
9714
|
if (!props.items.length) {
|
|
9485
|
-
return /* @__PURE__ */
|
|
9715
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9486
9716
|
}
|
|
9487
|
-
return /* @__PURE__ */
|
|
9717
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ React109.createElement(
|
|
9488
9718
|
"button",
|
|
9489
9719
|
{
|
|
9490
9720
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9491
9721
|
key: item.id,
|
|
9492
9722
|
onClick: () => selectItem(index)
|
|
9493
9723
|
},
|
|
9494
|
-
/* @__PURE__ */
|
|
9495
|
-
/* @__PURE__ */
|
|
9724
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9725
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9496
9726
|
)));
|
|
9497
9727
|
});
|
|
9498
9728
|
MentionList.displayName = "MentionList";
|
|
@@ -9550,11 +9780,11 @@ function createMentionSuggestion(users) {
|
|
|
9550
9780
|
}
|
|
9551
9781
|
|
|
9552
9782
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9553
|
-
import
|
|
9783
|
+
import React115, { useState as useState31, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback15 } from "react";
|
|
9554
9784
|
import { createPortal as createPortal4 } from "react-dom";
|
|
9555
9785
|
|
|
9556
9786
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9557
|
-
import
|
|
9787
|
+
import React110, { useState as useState27, useEffect as useEffect22, useRef as useRef25, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
9558
9788
|
var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
9559
9789
|
const [speaking, setSpeaking] = useState27(false);
|
|
9560
9790
|
const [paused, setPaused] = useState27(false);
|
|
@@ -9591,7 +9821,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9591
9821
|
document.addEventListener("mousedown", handleClick);
|
|
9592
9822
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9593
9823
|
}, []);
|
|
9594
|
-
const getTextToSpeak =
|
|
9824
|
+
const getTextToSpeak = useCallback12(() => {
|
|
9595
9825
|
if (!editor) return "";
|
|
9596
9826
|
const { from, to, empty } = editor.state.selection;
|
|
9597
9827
|
if (!empty) {
|
|
@@ -9599,7 +9829,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9599
9829
|
}
|
|
9600
9830
|
return editor.getText();
|
|
9601
9831
|
}, [editor]);
|
|
9602
|
-
const handleSpeak =
|
|
9832
|
+
const handleSpeak = useCallback12(async () => {
|
|
9603
9833
|
const text = getTextToSpeak();
|
|
9604
9834
|
if (!text.trim()) return;
|
|
9605
9835
|
if (onTextToSpeech) {
|
|
@@ -9641,25 +9871,25 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9641
9871
|
setSpeaking(true);
|
|
9642
9872
|
setPaused(false);
|
|
9643
9873
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9644
|
-
const handlePause =
|
|
9874
|
+
const handlePause = useCallback12(() => {
|
|
9645
9875
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9646
9876
|
window.speechSynthesis.pause();
|
|
9647
9877
|
setPaused(true);
|
|
9648
9878
|
}
|
|
9649
9879
|
}, []);
|
|
9650
|
-
const handleResume =
|
|
9880
|
+
const handleResume = useCallback12(() => {
|
|
9651
9881
|
if (window.speechSynthesis.paused) {
|
|
9652
9882
|
window.speechSynthesis.resume();
|
|
9653
9883
|
setPaused(false);
|
|
9654
9884
|
}
|
|
9655
9885
|
}, []);
|
|
9656
|
-
const handleStop =
|
|
9886
|
+
const handleStop = useCallback12(() => {
|
|
9657
9887
|
window.speechSynthesis.cancel();
|
|
9658
9888
|
setSpeaking(false);
|
|
9659
9889
|
setPaused(false);
|
|
9660
9890
|
}, []);
|
|
9661
9891
|
useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9662
|
-
return /* @__PURE__ */
|
|
9892
|
+
return /* @__PURE__ */ React110.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React110.createElement(
|
|
9663
9893
|
"button",
|
|
9664
9894
|
{
|
|
9665
9895
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9672,15 +9902,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9672
9902
|
}
|
|
9673
9903
|
},
|
|
9674
9904
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9675
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9905
|
+
)), showPanel && !speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React110.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React110.createElement(
|
|
9676
9906
|
"select",
|
|
9677
9907
|
{
|
|
9678
9908
|
className: "tts-select",
|
|
9679
9909
|
value: selectedVoice,
|
|
9680
9910
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9681
9911
|
},
|
|
9682
|
-
voices.map((v) => /* @__PURE__ */
|
|
9683
|
-
), /* @__PURE__ */
|
|
9912
|
+
voices.map((v) => /* @__PURE__ */ React110.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9913
|
+
), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ React110.createElement(
|
|
9684
9914
|
"input",
|
|
9685
9915
|
{
|
|
9686
9916
|
type: "range",
|
|
@@ -9691,15 +9921,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9691
9921
|
value: rate,
|
|
9692
9922
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9693
9923
|
}
|
|
9694
|
-
), /* @__PURE__ */
|
|
9924
|
+
), /* @__PURE__ */ React110.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React110.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9695
9925
|
handleSpeak();
|
|
9696
9926
|
setShowPanel(false);
|
|
9697
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9927
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React110.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React110.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React110.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9698
9928
|
});
|
|
9699
9929
|
var TextToSpeech_default = TextToSpeech;
|
|
9700
9930
|
|
|
9701
9931
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9702
|
-
import
|
|
9932
|
+
import React111, { useState as useState28, useRef as useRef26, useCallback as useCallback13, useEffect as useEffect23, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
|
|
9703
9933
|
var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
9704
9934
|
const [listening, setListening] = useState28(false);
|
|
9705
9935
|
const [showPanel, setShowPanel] = useState28(false);
|
|
@@ -9719,7 +9949,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9719
9949
|
document.addEventListener("mousedown", handleClick);
|
|
9720
9950
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9721
9951
|
}, []);
|
|
9722
|
-
const createRecognition =
|
|
9952
|
+
const createRecognition = useCallback13(() => {
|
|
9723
9953
|
if (!supported) return null;
|
|
9724
9954
|
const recognition = new SpeechRecognitionAPI();
|
|
9725
9955
|
recognition.lang = language;
|
|
@@ -9728,7 +9958,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9728
9958
|
recognition.maxAlternatives = 1;
|
|
9729
9959
|
return recognition;
|
|
9730
9960
|
}, [supported, language]);
|
|
9731
|
-
const startSession =
|
|
9961
|
+
const startSession = useCallback13((recognition) => {
|
|
9732
9962
|
if (!recognition || !editor) return;
|
|
9733
9963
|
recognition.onresult = async (event) => {
|
|
9734
9964
|
let finalText = "";
|
|
@@ -9783,7 +10013,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9783
10013
|
}
|
|
9784
10014
|
};
|
|
9785
10015
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9786
|
-
const startListening =
|
|
10016
|
+
const startListening = useCallback13(() => {
|
|
9787
10017
|
if (!supported || !editor) return;
|
|
9788
10018
|
const recognition = createRecognition();
|
|
9789
10019
|
if (!recognition) return;
|
|
@@ -9799,7 +10029,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9799
10029
|
setListening(false);
|
|
9800
10030
|
}
|
|
9801
10031
|
}, [supported, editor, createRecognition, startSession]);
|
|
9802
|
-
const stopListening =
|
|
10032
|
+
const stopListening = useCallback13(() => {
|
|
9803
10033
|
isListeningRef.current = false;
|
|
9804
10034
|
if (recognitionRef.current) {
|
|
9805
10035
|
try {
|
|
@@ -9813,7 +10043,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9813
10043
|
}, []);
|
|
9814
10044
|
useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9815
10045
|
if (!supported) {
|
|
9816
|
-
return /* @__PURE__ */
|
|
10046
|
+
return /* @__PURE__ */ React111.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React111.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9817
10047
|
}
|
|
9818
10048
|
const LANGUAGES2 = [
|
|
9819
10049
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9835,7 +10065,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9835
10065
|
{ code: "kn-IN", label: "Kannada" },
|
|
9836
10066
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9837
10067
|
];
|
|
9838
|
-
return /* @__PURE__ */
|
|
10068
|
+
return /* @__PURE__ */ React111.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React111.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React111.createElement(
|
|
9839
10069
|
"button",
|
|
9840
10070
|
{
|
|
9841
10071
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9848,20 +10078,20 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9848
10078
|
}
|
|
9849
10079
|
},
|
|
9850
10080
|
"\u{1F3A4}"
|
|
9851
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10081
|
+
)), showPanel && !listening && /* @__PURE__ */ React111.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React111.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React111.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React111.createElement(
|
|
9852
10082
|
"select",
|
|
9853
10083
|
{
|
|
9854
10084
|
className: "stt-select",
|
|
9855
10085
|
value: language,
|
|
9856
10086
|
onChange: (e) => setLanguage(e.target.value)
|
|
9857
10087
|
},
|
|
9858
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9859
|
-
), /* @__PURE__ */
|
|
10088
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ React111.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10089
|
+
), /* @__PURE__ */ React111.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React111.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React111.createElement("div", { className: "stt-interim" }, interim));
|
|
9860
10090
|
});
|
|
9861
10091
|
var SpeechToText_default = SpeechToText;
|
|
9862
10092
|
|
|
9863
10093
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9864
|
-
import
|
|
10094
|
+
import React112, { useState as useState29, useRef as useRef27, useEffect as useEffect24, useCallback as useCallback14 } from "react";
|
|
9865
10095
|
import { createPortal as createPortal2 } from "react-dom";
|
|
9866
10096
|
var AI_COMMANDS = [
|
|
9867
10097
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
@@ -9927,7 +10157,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9927
10157
|
document.addEventListener("mousedown", handleClick);
|
|
9928
10158
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9929
10159
|
}, []);
|
|
9930
|
-
const getSelectedText =
|
|
10160
|
+
const getSelectedText = useCallback14(() => {
|
|
9931
10161
|
if (!editor) return { text: "", range: null };
|
|
9932
10162
|
const { from, to, empty } = editor.state.selection;
|
|
9933
10163
|
if (!empty) {
|
|
@@ -9935,7 +10165,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9935
10165
|
}
|
|
9936
10166
|
return { text: editor.getText(), range: null };
|
|
9937
10167
|
}, [editor]);
|
|
9938
|
-
const fetchAIResult =
|
|
10168
|
+
const fetchAIResult = useCallback14(async (prompt, text, prevResults = []) => {
|
|
9939
10169
|
setLoading(true);
|
|
9940
10170
|
setResultText("");
|
|
9941
10171
|
try {
|
|
@@ -9953,7 +10183,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9953
10183
|
setLoading(false);
|
|
9954
10184
|
}
|
|
9955
10185
|
}, [onAICommand]);
|
|
9956
|
-
const handleCommandSelect =
|
|
10186
|
+
const handleCommandSelect = useCallback14((command) => {
|
|
9957
10187
|
const { text, range } = getSelectedText();
|
|
9958
10188
|
if (!text.trim()) return;
|
|
9959
10189
|
setOriginalText(text);
|
|
@@ -9964,7 +10194,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9964
10194
|
setShowModal(true);
|
|
9965
10195
|
fetchAIResult(command.prompt, text, []);
|
|
9966
10196
|
}, [getSelectedText, fetchAIResult]);
|
|
9967
|
-
const handleInsert =
|
|
10197
|
+
const handleInsert = useCallback14(() => {
|
|
9968
10198
|
if (!resultText || !editor) return;
|
|
9969
10199
|
if (selectionRange) {
|
|
9970
10200
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9974,7 +10204,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9974
10204
|
setShowModal(false);
|
|
9975
10205
|
setResultText("");
|
|
9976
10206
|
}, [editor, resultText, selectionRange]);
|
|
9977
|
-
const handleInsertAfter =
|
|
10207
|
+
const handleInsertAfter = useCallback14(() => {
|
|
9978
10208
|
if (!resultText || !editor) return;
|
|
9979
10209
|
if (selectionRange) {
|
|
9980
10210
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9989,11 +10219,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9989
10219
|
setShowModal(false);
|
|
9990
10220
|
setResultText("");
|
|
9991
10221
|
}, [editor, resultText, selectionRange]);
|
|
9992
|
-
const handleRefresh =
|
|
10222
|
+
const handleRefresh = useCallback14(() => {
|
|
9993
10223
|
if (!originalText.trim()) return;
|
|
9994
10224
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9995
10225
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9996
|
-
const handleCancel =
|
|
10226
|
+
const handleCancel = useCallback14(() => {
|
|
9997
10227
|
setShowModal(false);
|
|
9998
10228
|
setResultText("");
|
|
9999
10229
|
setPromptText("");
|
|
@@ -10002,15 +10232,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10002
10232
|
setPreviousResults([]);
|
|
10003
10233
|
}, []);
|
|
10004
10234
|
if (!editor) return null;
|
|
10005
|
-
return /* @__PURE__ */
|
|
10235
|
+
return /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10006
10236
|
"button",
|
|
10007
10237
|
{
|
|
10008
10238
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
10009
10239
|
onClick: () => setOpen(!open)
|
|
10010
10240
|
},
|
|
10011
|
-
/* @__PURE__ */
|
|
10012
|
-
/* @__PURE__ */
|
|
10013
|
-
)), open && /* @__PURE__ */
|
|
10241
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React112.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
10242
|
+
/* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10243
|
+
)), open && /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React112.createElement(
|
|
10014
10244
|
"button",
|
|
10015
10245
|
{
|
|
10016
10246
|
key: cmd.id,
|
|
@@ -10018,8 +10248,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10018
10248
|
onClick: () => handleCommandSelect(cmd)
|
|
10019
10249
|
},
|
|
10020
10250
|
cmd.label
|
|
10021
|
-
))), /* @__PURE__ */
|
|
10022
|
-
/* @__PURE__ */
|
|
10251
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
|
|
10252
|
+
/* @__PURE__ */ React112.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React112.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React112.createElement(
|
|
10023
10253
|
"textarea",
|
|
10024
10254
|
{
|
|
10025
10255
|
className: "ai-modal-prompt",
|
|
@@ -10027,15 +10257,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10027
10257
|
onChange: (e) => setPromptText(e.target.value),
|
|
10028
10258
|
rows: 3
|
|
10029
10259
|
}
|
|
10030
|
-
), /* @__PURE__ */
|
|
10260
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10031
10261
|
"button",
|
|
10032
10262
|
{
|
|
10033
10263
|
className: "ai-modal-robot-btn",
|
|
10034
10264
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
10035
10265
|
disabled: loading
|
|
10036
10266
|
},
|
|
10037
|
-
/* @__PURE__ */
|
|
10038
|
-
)))), /* @__PURE__ */
|
|
10267
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React112.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React112.createElement("path", { d: "M8 7h8" }))
|
|
10268
|
+
)))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React112.createElement(
|
|
10039
10269
|
"button",
|
|
10040
10270
|
{
|
|
10041
10271
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10043,7 +10273,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10043
10273
|
disabled: loading || !resultText
|
|
10044
10274
|
},
|
|
10045
10275
|
"Insert"
|
|
10046
|
-
), /* @__PURE__ */
|
|
10276
|
+
), /* @__PURE__ */ React112.createElement(
|
|
10047
10277
|
"button",
|
|
10048
10278
|
{
|
|
10049
10279
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10051,22 +10281,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10051
10281
|
disabled: loading || !resultText
|
|
10052
10282
|
},
|
|
10053
10283
|
"Insert After"
|
|
10054
|
-
), /* @__PURE__ */
|
|
10284
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10055
10285
|
"button",
|
|
10056
10286
|
{
|
|
10057
10287
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10058
10288
|
onClick: handleRefresh,
|
|
10059
10289
|
disabled: loading
|
|
10060
10290
|
},
|
|
10061
|
-
/* @__PURE__ */
|
|
10062
|
-
))), /* @__PURE__ */
|
|
10291
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React112.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10292
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React112.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10063
10293
|
document.body
|
|
10064
10294
|
));
|
|
10065
10295
|
};
|
|
10066
10296
|
var AICommands_default = AICommands;
|
|
10067
10297
|
|
|
10068
10298
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10069
|
-
import
|
|
10299
|
+
import React113, { useState as useState30, useMemo as useMemo4 } from "react";
|
|
10070
10300
|
import { createPortal as createPortal3 } from "react-dom";
|
|
10071
10301
|
var LANGUAGES = [
|
|
10072
10302
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10212,10 +10442,10 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10212
10442
|
const [targetFilter, setTargetFilter] = useState30("");
|
|
10213
10443
|
const [translating, setTranslating] = useState30(false);
|
|
10214
10444
|
const [error, setError] = useState30("");
|
|
10215
|
-
const filteredSource =
|
|
10445
|
+
const filteredSource = useMemo4(() => LANGUAGES.filter(
|
|
10216
10446
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10217
10447
|
), [sourceFilter]);
|
|
10218
|
-
const filteredTarget =
|
|
10448
|
+
const filteredTarget = useMemo4(() => LANGUAGES.filter(
|
|
10219
10449
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10220
10450
|
), [targetFilter]);
|
|
10221
10451
|
const handleSwap = () => {
|
|
@@ -10259,7 +10489,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10259
10489
|
}
|
|
10260
10490
|
};
|
|
10261
10491
|
return createPortal3(
|
|
10262
|
-
/* @__PURE__ */
|
|
10492
|
+
/* @__PURE__ */ React113.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React113.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React113.createElement("h3", null, "Translate options"), /* @__PURE__ */ React113.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React113.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10263
10493
|
"input",
|
|
10264
10494
|
{
|
|
10265
10495
|
type: "text",
|
|
@@ -10268,16 +10498,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10268
10498
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10269
10499
|
className: "translate-filter-input"
|
|
10270
10500
|
}
|
|
10271
|
-
)), /* @__PURE__ */
|
|
10501
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10272
10502
|
"button",
|
|
10273
10503
|
{
|
|
10274
10504
|
key: lang.code,
|
|
10275
10505
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10276
10506
|
onClick: () => setSourceLang(lang.code)
|
|
10277
10507
|
},
|
|
10278
|
-
/* @__PURE__ */
|
|
10279
|
-
/* @__PURE__ */
|
|
10280
|
-
)))), /* @__PURE__ */
|
|
10508
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10509
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10510
|
+
)))), /* @__PURE__ */ React113.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10281
10511
|
"input",
|
|
10282
10512
|
{
|
|
10283
10513
|
type: "text",
|
|
@@ -10286,16 +10516,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10286
10516
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10287
10517
|
className: "translate-filter-input"
|
|
10288
10518
|
}
|
|
10289
|
-
)), /* @__PURE__ */
|
|
10519
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10290
10520
|
"button",
|
|
10291
10521
|
{
|
|
10292
10522
|
key: lang.code,
|
|
10293
10523
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10294
10524
|
onClick: () => setTargetLang(lang.code)
|
|
10295
10525
|
},
|
|
10296
|
-
/* @__PURE__ */
|
|
10297
|
-
/* @__PURE__ */
|
|
10298
|
-
))))), error && /* @__PURE__ */
|
|
10526
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10527
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10528
|
+
))))), error && /* @__PURE__ */ React113.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React113.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10299
10529
|
document.body
|
|
10300
10530
|
);
|
|
10301
10531
|
};
|
|
@@ -10946,38 +11176,38 @@ var CustomTaskItem = TaskItem.extend({
|
|
|
10946
11176
|
});
|
|
10947
11177
|
|
|
10948
11178
|
// lib/RufousTextEditor/icons.tsx
|
|
10949
|
-
import * as
|
|
11179
|
+
import * as React114 from "react";
|
|
10950
11180
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10951
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10952
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10953
|
-
var IconBold = () => /* @__PURE__ */
|
|
10954
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10955
|
-
var IconLink = () => /* @__PURE__ */
|
|
10956
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10957
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10958
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10959
|
-
var IconColor = () => /* @__PURE__ */
|
|
10960
|
-
var IconFont = () => /* @__PURE__ */
|
|
10961
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10962
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10963
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10964
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10965
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10966
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10967
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10968
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10969
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10970
|
-
var IconTable = () => /* @__PURE__ */
|
|
10971
|
-
var IconImage = () => /* @__PURE__ */
|
|
10972
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10973
|
-
var IconCut = () => /* @__PURE__ */
|
|
10974
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10975
|
-
var IconCode = () => /* @__PURE__ */
|
|
10976
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10977
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10978
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10979
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10980
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11181
|
+
var IconUndo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
|
|
11182
|
+
var IconRedo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
|
|
11183
|
+
var IconBold = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
|
|
11184
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11185
|
+
var IconLink = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
|
|
11186
|
+
var IconStrike = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
|
|
11187
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11188
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11189
|
+
var IconColor = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React114.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11190
|
+
var IconFont = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
|
|
11191
|
+
var IconLineHeight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
|
|
11192
|
+
var IconBulletList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
|
|
11193
|
+
var IconOrderedList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11194
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11195
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11196
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11197
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11198
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11199
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11200
|
+
var IconTable = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
|
|
11201
|
+
var IconImage = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
|
|
11202
|
+
var IconVideo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
|
|
11203
|
+
var IconCut = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
|
|
11204
|
+
var IconCopy = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
|
|
11205
|
+
var IconCode = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
|
|
11206
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11207
|
+
var IconTranslate = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
|
|
11208
|
+
var IconTaskList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
|
|
11209
|
+
var IconCheck = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11210
|
+
var IconPaste = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
10981
11211
|
|
|
10982
11212
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10983
11213
|
var COLOR_PALETTE = [
|
|
@@ -11159,16 +11389,16 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11159
11389
|
};
|
|
11160
11390
|
position();
|
|
11161
11391
|
}, [open]);
|
|
11162
|
-
return /* @__PURE__ */
|
|
11392
|
+
return /* @__PURE__ */ React115.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React115.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11163
11393
|
"button",
|
|
11164
11394
|
{
|
|
11165
11395
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11166
11396
|
onClick: () => setOpen(!open)
|
|
11167
11397
|
},
|
|
11168
11398
|
trigger.label,
|
|
11169
|
-
/* @__PURE__ */
|
|
11399
|
+
/* @__PURE__ */ React115.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11170
11400
|
)), open && createPortal4(
|
|
11171
|
-
/* @__PURE__ */
|
|
11401
|
+
/* @__PURE__ */ React115.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React115.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11172
11402
|
document.body
|
|
11173
11403
|
));
|
|
11174
11404
|
};
|
|
@@ -11206,14 +11436,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11206
11436
|
}
|
|
11207
11437
|
onClose();
|
|
11208
11438
|
};
|
|
11209
|
-
return /* @__PURE__ */
|
|
11439
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11210
11440
|
"button",
|
|
11211
11441
|
{
|
|
11212
11442
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11213
11443
|
onClick: () => setActiveTab("link")
|
|
11214
11444
|
},
|
|
11215
11445
|
"\u{1F517} Link"
|
|
11216
|
-
), /* @__PURE__ */
|
|
11446
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11217
11447
|
"button",
|
|
11218
11448
|
{
|
|
11219
11449
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11221,7 +11451,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11221
11451
|
},
|
|
11222
11452
|
"</>",
|
|
11223
11453
|
" Code"
|
|
11224
|
-
)), /* @__PURE__ */
|
|
11454
|
+
)), /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ React115.createElement(
|
|
11225
11455
|
"input",
|
|
11226
11456
|
{
|
|
11227
11457
|
type: "text",
|
|
@@ -11232,7 +11462,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11232
11462
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11233
11463
|
autoFocus: true
|
|
11234
11464
|
}
|
|
11235
|
-
) : /* @__PURE__ */
|
|
11465
|
+
) : /* @__PURE__ */ React115.createElement(
|
|
11236
11466
|
"textarea",
|
|
11237
11467
|
{
|
|
11238
11468
|
className: "insert-panel-textarea",
|
|
@@ -11241,7 +11471,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11241
11471
|
onChange: (e) => setUrl(e.target.value),
|
|
11242
11472
|
rows: 3
|
|
11243
11473
|
}
|
|
11244
|
-
), /* @__PURE__ */
|
|
11474
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11245
11475
|
};
|
|
11246
11476
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11247
11477
|
const [activeTab, setActiveTab] = useState31("upload");
|
|
@@ -11285,21 +11515,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11285
11515
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11286
11516
|
onClose();
|
|
11287
11517
|
};
|
|
11288
|
-
return /* @__PURE__ */
|
|
11518
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11289
11519
|
"button",
|
|
11290
11520
|
{
|
|
11291
11521
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11292
11522
|
onClick: () => setActiveTab("upload")
|
|
11293
11523
|
},
|
|
11294
11524
|
"\u2B06 Upload"
|
|
11295
|
-
), /* @__PURE__ */
|
|
11525
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11296
11526
|
"button",
|
|
11297
11527
|
{
|
|
11298
11528
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11299
11529
|
onClick: () => setActiveTab("url")
|
|
11300
11530
|
},
|
|
11301
11531
|
"\u{1F517} URL"
|
|
11302
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11532
|
+
)), activeTab === "upload" ? /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement(
|
|
11303
11533
|
"div",
|
|
11304
11534
|
{
|
|
11305
11535
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11311,9 +11541,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11311
11541
|
onDrop: handleDrop,
|
|
11312
11542
|
onClick: () => fileInputRef.current?.click()
|
|
11313
11543
|
},
|
|
11314
|
-
/* @__PURE__ */
|
|
11315
|
-
/* @__PURE__ */
|
|
11316
|
-
), /* @__PURE__ */
|
|
11544
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11545
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11546
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11317
11547
|
"input",
|
|
11318
11548
|
{
|
|
11319
11549
|
ref: fileInputRef,
|
|
@@ -11322,7 +11552,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11322
11552
|
style: { display: "none" },
|
|
11323
11553
|
onChange: handleFileSelect
|
|
11324
11554
|
}
|
|
11325
|
-
)) : /* @__PURE__ */
|
|
11555
|
+
)) : /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ React115.createElement(
|
|
11326
11556
|
"input",
|
|
11327
11557
|
{
|
|
11328
11558
|
type: "text",
|
|
@@ -11333,7 +11563,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11333
11563
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11334
11564
|
autoFocus: true
|
|
11335
11565
|
}
|
|
11336
|
-
), /* @__PURE__ */
|
|
11566
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11337
11567
|
};
|
|
11338
11568
|
var MAX_GRID = 10;
|
|
11339
11569
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
@@ -11344,7 +11574,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11344
11574
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11345
11575
|
onClose();
|
|
11346
11576
|
};
|
|
11347
|
-
return /* @__PURE__ */
|
|
11577
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement(
|
|
11348
11578
|
"div",
|
|
11349
11579
|
{
|
|
11350
11580
|
className: "table-grid",
|
|
@@ -11353,7 +11583,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11353
11583
|
setHoverCol(0);
|
|
11354
11584
|
}
|
|
11355
11585
|
},
|
|
11356
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11586
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ React115.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ React115.createElement(
|
|
11357
11587
|
"div",
|
|
11358
11588
|
{
|
|
11359
11589
|
key: c,
|
|
@@ -11365,7 +11595,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11365
11595
|
onClick: handleInsert
|
|
11366
11596
|
}
|
|
11367
11597
|
))))
|
|
11368
|
-
), /* @__PURE__ */
|
|
11598
|
+
), /* @__PURE__ */ React115.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ React115.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ React115.createElement(
|
|
11369
11599
|
"button",
|
|
11370
11600
|
{
|
|
11371
11601
|
className: "table-grid-submit",
|
|
@@ -11399,28 +11629,28 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11399
11629
|
}
|
|
11400
11630
|
onClose();
|
|
11401
11631
|
};
|
|
11402
|
-
return /* @__PURE__ */
|
|
11632
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11403
11633
|
"button",
|
|
11404
11634
|
{
|
|
11405
11635
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11406
11636
|
onClick: () => setTab("background")
|
|
11407
11637
|
},
|
|
11408
11638
|
"Background"
|
|
11409
|
-
), /* @__PURE__ */
|
|
11639
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11410
11640
|
"button",
|
|
11411
11641
|
{
|
|
11412
11642
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11413
11643
|
onClick: () => setTab("text")
|
|
11414
11644
|
},
|
|
11415
11645
|
"Text"
|
|
11416
|
-
)), /* @__PURE__ */
|
|
11646
|
+
)), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React115.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11417
11647
|
"button",
|
|
11418
11648
|
{
|
|
11419
11649
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11420
11650
|
style: { background: color },
|
|
11421
11651
|
onClick: () => applyColor(color)
|
|
11422
11652
|
}
|
|
11423
|
-
)))), /* @__PURE__ */
|
|
11653
|
+
)))), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React115.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11424
11654
|
};
|
|
11425
11655
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11426
11656
|
const [, setEditorState] = useState31(0);
|
|
@@ -11434,7 +11664,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11434
11664
|
editor.on("transaction", onTransaction);
|
|
11435
11665
|
return () => editor.off("transaction", onTransaction);
|
|
11436
11666
|
}, [editor]);
|
|
11437
|
-
const insertSpecialChar =
|
|
11667
|
+
const insertSpecialChar = useCallback15((char) => {
|
|
11438
11668
|
if (!editor) return;
|
|
11439
11669
|
editor.chain().focus().insertContent(char).run();
|
|
11440
11670
|
}, [editor]);
|
|
@@ -11443,7 +11673,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11443
11673
|
const [translateTarget, setTranslateTarget] = useState31("hi");
|
|
11444
11674
|
const [translateStatus, setTranslateStatus] = useState31("");
|
|
11445
11675
|
const [showTranslateModal, setShowTranslateModal] = useState31(false);
|
|
11446
|
-
const handleCopy =
|
|
11676
|
+
const handleCopy = useCallback15(async () => {
|
|
11447
11677
|
if (!editor) return;
|
|
11448
11678
|
const { from, to, empty } = editor.state.selection;
|
|
11449
11679
|
if (empty) return;
|
|
@@ -11458,7 +11688,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11458
11688
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11459
11689
|
}
|
|
11460
11690
|
}, [editor]);
|
|
11461
|
-
const handlePaste =
|
|
11691
|
+
const handlePaste = useCallback15(async () => {
|
|
11462
11692
|
if (!editor) return;
|
|
11463
11693
|
try {
|
|
11464
11694
|
const text = await navigator.clipboard.readText();
|
|
@@ -11467,7 +11697,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11467
11697
|
document.execCommand("paste");
|
|
11468
11698
|
}
|
|
11469
11699
|
}, [editor]);
|
|
11470
|
-
const handleQuickTranslate =
|
|
11700
|
+
const handleQuickTranslate = useCallback15(async () => {
|
|
11471
11701
|
if (!editor) return;
|
|
11472
11702
|
const { from, to, empty } = editor.state.selection;
|
|
11473
11703
|
if (empty) {
|
|
@@ -11501,32 +11731,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11501
11731
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11502
11732
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11503
11733
|
if (!editor) return null;
|
|
11504
|
-
return /* @__PURE__ */
|
|
11734
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React115.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11505
11735
|
"button",
|
|
11506
11736
|
{
|
|
11507
11737
|
className: "toolbar-btn",
|
|
11508
11738
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11509
11739
|
disabled: !editor.can().undo()
|
|
11510
11740
|
},
|
|
11511
|
-
/* @__PURE__ */
|
|
11512
|
-
)), show("redo") && /* @__PURE__ */
|
|
11741
|
+
/* @__PURE__ */ React115.createElement(IconUndo, null)
|
|
11742
|
+
)), show("redo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11513
11743
|
"button",
|
|
11514
11744
|
{
|
|
11515
11745
|
className: "toolbar-btn",
|
|
11516
11746
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11517
11747
|
disabled: !editor.can().redo()
|
|
11518
11748
|
},
|
|
11519
|
-
/* @__PURE__ */
|
|
11520
|
-
))), show("ai") && /* @__PURE__ */
|
|
11749
|
+
/* @__PURE__ */ React115.createElement(IconRedo, null)
|
|
11750
|
+
))), show("ai") && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React115.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React115.createElement(
|
|
11521
11751
|
Dropdown,
|
|
11522
11752
|
{
|
|
11523
11753
|
trigger: {
|
|
11524
|
-
label: /* @__PURE__ */
|
|
11754
|
+
label: /* @__PURE__ */ React115.createElement(IconHeading, null),
|
|
11525
11755
|
title: "Block type",
|
|
11526
11756
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11527
11757
|
}
|
|
11528
11758
|
},
|
|
11529
|
-
/* @__PURE__ */
|
|
11759
|
+
/* @__PURE__ */ React115.createElement(
|
|
11530
11760
|
"button",
|
|
11531
11761
|
{
|
|
11532
11762
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11534,7 +11764,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11534
11764
|
},
|
|
11535
11765
|
"\xB6 Paragraph"
|
|
11536
11766
|
),
|
|
11537
|
-
/* @__PURE__ */
|
|
11767
|
+
/* @__PURE__ */ React115.createElement(
|
|
11538
11768
|
"button",
|
|
11539
11769
|
{
|
|
11540
11770
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11542,7 +11772,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11542
11772
|
},
|
|
11543
11773
|
"Heading 1"
|
|
11544
11774
|
),
|
|
11545
|
-
/* @__PURE__ */
|
|
11775
|
+
/* @__PURE__ */ React115.createElement(
|
|
11546
11776
|
"button",
|
|
11547
11777
|
{
|
|
11548
11778
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11550,7 +11780,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11550
11780
|
},
|
|
11551
11781
|
"Heading 2"
|
|
11552
11782
|
),
|
|
11553
|
-
/* @__PURE__ */
|
|
11783
|
+
/* @__PURE__ */ React115.createElement(
|
|
11554
11784
|
"button",
|
|
11555
11785
|
{
|
|
11556
11786
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11558,7 +11788,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11558
11788
|
},
|
|
11559
11789
|
"Heading 3"
|
|
11560
11790
|
),
|
|
11561
|
-
/* @__PURE__ */
|
|
11791
|
+
/* @__PURE__ */ React115.createElement(
|
|
11562
11792
|
"button",
|
|
11563
11793
|
{
|
|
11564
11794
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11566,7 +11796,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11566
11796
|
},
|
|
11567
11797
|
"Heading 4"
|
|
11568
11798
|
),
|
|
11569
|
-
/* @__PURE__ */
|
|
11799
|
+
/* @__PURE__ */ React115.createElement(
|
|
11570
11800
|
"button",
|
|
11571
11801
|
{
|
|
11572
11802
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11574,7 +11804,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11574
11804
|
},
|
|
11575
11805
|
"\u275E Blockquote"
|
|
11576
11806
|
),
|
|
11577
|
-
/* @__PURE__ */
|
|
11807
|
+
/* @__PURE__ */ React115.createElement(
|
|
11578
11808
|
"button",
|
|
11579
11809
|
{
|
|
11580
11810
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11583,19 +11813,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11583
11813
|
"{ }",
|
|
11584
11814
|
" Code Block"
|
|
11585
11815
|
),
|
|
11586
|
-
/* @__PURE__ */
|
|
11587
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11816
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11817
|
+
), show("fontsize") && /* @__PURE__ */ React115.createElement(
|
|
11588
11818
|
Dropdown,
|
|
11589
11819
|
{
|
|
11590
11820
|
trigger: {
|
|
11591
|
-
label: /* @__PURE__ */
|
|
11821
|
+
label: /* @__PURE__ */ React115.createElement(IconFontSize, null),
|
|
11592
11822
|
title: "Font size"
|
|
11593
11823
|
}
|
|
11594
11824
|
},
|
|
11595
11825
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11596
11826
|
const sizeStr = `${size}px`;
|
|
11597
11827
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11598
|
-
return /* @__PURE__ */
|
|
11828
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11599
11829
|
"button",
|
|
11600
11830
|
{
|
|
11601
11831
|
key: size,
|
|
@@ -11611,17 +11841,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11611
11841
|
sizeStr
|
|
11612
11842
|
);
|
|
11613
11843
|
})
|
|
11614
|
-
), show("font") && /* @__PURE__ */
|
|
11844
|
+
), show("font") && /* @__PURE__ */ React115.createElement(
|
|
11615
11845
|
Dropdown,
|
|
11616
11846
|
{
|
|
11617
11847
|
trigger: {
|
|
11618
|
-
label: /* @__PURE__ */
|
|
11848
|
+
label: /* @__PURE__ */ React115.createElement(IconFont, null),
|
|
11619
11849
|
title: "Font family"
|
|
11620
11850
|
}
|
|
11621
11851
|
},
|
|
11622
11852
|
FONT_FAMILIES.map((font) => {
|
|
11623
11853
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11624
|
-
return /* @__PURE__ */
|
|
11854
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11625
11855
|
"button",
|
|
11626
11856
|
{
|
|
11627
11857
|
key: font,
|
|
@@ -11638,40 +11868,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11638
11868
|
font
|
|
11639
11869
|
);
|
|
11640
11870
|
})
|
|
11641
|
-
), show("color") && /* @__PURE__ */
|
|
11871
|
+
), show("color") && /* @__PURE__ */ React115.createElement(
|
|
11642
11872
|
Dropdown,
|
|
11643
11873
|
{
|
|
11644
11874
|
trigger: {
|
|
11645
|
-
label: /* @__PURE__ */
|
|
11875
|
+
label: /* @__PURE__ */ React115.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React115.createElement(IconColor, null)),
|
|
11646
11876
|
title: "Colors"
|
|
11647
11877
|
},
|
|
11648
11878
|
keepOpen: true
|
|
11649
11879
|
},
|
|
11650
|
-
(close) => /* @__PURE__ */
|
|
11651
|
-
), show("bold") && /* @__PURE__ */
|
|
11880
|
+
(close) => /* @__PURE__ */ React115.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11881
|
+
), show("bold") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11652
11882
|
"button",
|
|
11653
11883
|
{
|
|
11654
11884
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11655
11885
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11656
11886
|
},
|
|
11657
|
-
/* @__PURE__ */
|
|
11658
|
-
)), show("italic") && /* @__PURE__ */
|
|
11887
|
+
/* @__PURE__ */ React115.createElement(IconBold, null)
|
|
11888
|
+
)), show("italic") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11659
11889
|
"button",
|
|
11660
11890
|
{
|
|
11661
11891
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11662
11892
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11663
11893
|
},
|
|
11664
|
-
/* @__PURE__ */
|
|
11665
|
-
)), show("strike") && /* @__PURE__ */
|
|
11894
|
+
/* @__PURE__ */ React115.createElement(IconItalic, null)
|
|
11895
|
+
)), show("strike") && /* @__PURE__ */ React115.createElement(
|
|
11666
11896
|
Dropdown,
|
|
11667
11897
|
{
|
|
11668
|
-
trigger: { label: /* @__PURE__ */
|
|
11898
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11669
11899
|
},
|
|
11670
|
-
/* @__PURE__ */
|
|
11671
|
-
/* @__PURE__ */
|
|
11672
|
-
/* @__PURE__ */
|
|
11673
|
-
/* @__PURE__ */
|
|
11674
|
-
/* @__PURE__ */
|
|
11900
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ React115.createElement("s", null, "Strikethrough")),
|
|
11901
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ React115.createElement("u", null, "Underline")),
|
|
11902
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ React115.createElement("sup", null, "2"), " Superscript"),
|
|
11903
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ React115.createElement("sub", null, "2"), " Subscript"),
|
|
11904
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11675
11905
|
e.preventDefault();
|
|
11676
11906
|
const chain = editor.chain().focus();
|
|
11677
11907
|
if (!editor.state.selection.empty) {
|
|
@@ -11687,25 +11917,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11687
11917
|
c.run();
|
|
11688
11918
|
}
|
|
11689
11919
|
} }, "\u2715 Clear formatting")
|
|
11690
|
-
), show("link") && /* @__PURE__ */
|
|
11920
|
+
), show("link") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11691
11921
|
"button",
|
|
11692
11922
|
{
|
|
11693
11923
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11694
11924
|
onClick: setLink
|
|
11695
11925
|
},
|
|
11696
|
-
/* @__PURE__ */
|
|
11697
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11926
|
+
/* @__PURE__ */ React115.createElement(IconLink, null)
|
|
11927
|
+
)), show("lineheight") && /* @__PURE__ */ React115.createElement(
|
|
11698
11928
|
Dropdown,
|
|
11699
11929
|
{
|
|
11700
11930
|
trigger: {
|
|
11701
|
-
label: /* @__PURE__ */
|
|
11931
|
+
label: /* @__PURE__ */ React115.createElement(IconLineHeight, null),
|
|
11702
11932
|
title: "Line height"
|
|
11703
11933
|
}
|
|
11704
11934
|
},
|
|
11705
11935
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11706
11936
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11707
11937
|
const isActive = currentLH === lh;
|
|
11708
|
-
return /* @__PURE__ */
|
|
11938
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11709
11939
|
"button",
|
|
11710
11940
|
{
|
|
11711
11941
|
key: lh,
|
|
@@ -11721,19 +11951,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11721
11951
|
lh
|
|
11722
11952
|
);
|
|
11723
11953
|
})
|
|
11724
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11954
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11725
11955
|
"button",
|
|
11726
11956
|
{
|
|
11727
11957
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11728
11958
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11729
11959
|
},
|
|
11730
|
-
/* @__PURE__ */
|
|
11731
|
-
)), /* @__PURE__ */
|
|
11960
|
+
/* @__PURE__ */ React115.createElement(IconBulletList, null)
|
|
11961
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11732
11962
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11733
11963
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11734
11964
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11735
11965
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11736
|
-
].map((item) => /* @__PURE__ */
|
|
11966
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11737
11967
|
"button",
|
|
11738
11968
|
{
|
|
11739
11969
|
key: item.label,
|
|
@@ -11758,24 +11988,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11758
11988
|
}).run();
|
|
11759
11989
|
}
|
|
11760
11990
|
},
|
|
11761
|
-
/* @__PURE__ */
|
|
11991
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11762
11992
|
" ",
|
|
11763
11993
|
item.label
|
|
11764
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11994
|
+
)))), show("ol") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11765
11995
|
"button",
|
|
11766
11996
|
{
|
|
11767
11997
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11768
11998
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11769
11999
|
},
|
|
11770
|
-
/* @__PURE__ */
|
|
11771
|
-
)), /* @__PURE__ */
|
|
12000
|
+
/* @__PURE__ */ React115.createElement(IconOrderedList, null)
|
|
12001
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11772
12002
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11773
12003
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11774
12004
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11775
12005
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11776
12006
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11777
12007
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11778
|
-
].map((item) => /* @__PURE__ */
|
|
12008
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11779
12009
|
"button",
|
|
11780
12010
|
{
|
|
11781
12011
|
key: item.label,
|
|
@@ -11800,24 +12030,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11800
12030
|
}).run();
|
|
11801
12031
|
}
|
|
11802
12032
|
},
|
|
11803
|
-
/* @__PURE__ */
|
|
12033
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11804
12034
|
" ",
|
|
11805
12035
|
item.label
|
|
11806
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12036
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React115.createElement(
|
|
11807
12037
|
Dropdown,
|
|
11808
12038
|
{
|
|
11809
12039
|
trigger: {
|
|
11810
|
-
label: /* @__PURE__ */
|
|
12040
|
+
label: /* @__PURE__ */ React115.createElement(IconAlignLeft, null),
|
|
11811
12041
|
title: "Align",
|
|
11812
12042
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11813
12043
|
}
|
|
11814
12044
|
},
|
|
11815
12045
|
[
|
|
11816
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11817
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11818
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11819
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11820
|
-
].map((item) => /* @__PURE__ */
|
|
12046
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ React115.createElement(IconAlignLeft, null) },
|
|
12047
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ React115.createElement(IconAlignCenter, null) },
|
|
12048
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ React115.createElement(IconAlignRight, null) },
|
|
12049
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ React115.createElement(IconAlignJustify, null) }
|
|
12050
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11821
12051
|
"button",
|
|
11822
12052
|
{
|
|
11823
12053
|
key: item.value,
|
|
@@ -11828,7 +12058,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11828
12058
|
" ",
|
|
11829
12059
|
item.label
|
|
11830
12060
|
))
|
|
11831
|
-
), show("indent") && /* @__PURE__ */
|
|
12061
|
+
), show("indent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11832
12062
|
"button",
|
|
11833
12063
|
{
|
|
11834
12064
|
className: "toolbar-btn",
|
|
@@ -11847,8 +12077,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11847
12077
|
}).run();
|
|
11848
12078
|
}
|
|
11849
12079
|
},
|
|
11850
|
-
/* @__PURE__ */
|
|
11851
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12080
|
+
/* @__PURE__ */ React115.createElement(IconIndentIncrease, null)
|
|
12081
|
+
)), show("outdent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11852
12082
|
"button",
|
|
11853
12083
|
{
|
|
11854
12084
|
className: "toolbar-btn",
|
|
@@ -11867,29 +12097,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11867
12097
|
}).run();
|
|
11868
12098
|
}
|
|
11869
12099
|
},
|
|
11870
|
-
/* @__PURE__ */
|
|
11871
|
-
))), show("table") && /* @__PURE__ */
|
|
12100
|
+
/* @__PURE__ */ React115.createElement(IconIndentDecrease, null)
|
|
12101
|
+
))), show("table") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11872
12102
|
"button",
|
|
11873
12103
|
{
|
|
11874
12104
|
className: "toolbar-btn",
|
|
11875
12105
|
onClick: () => document.execCommand("cut")
|
|
11876
12106
|
},
|
|
11877
|
-
/* @__PURE__ */
|
|
11878
|
-
)), show("copy") && /* @__PURE__ */
|
|
12107
|
+
/* @__PURE__ */ React115.createElement(IconCut, null)
|
|
12108
|
+
)), show("copy") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11879
12109
|
"button",
|
|
11880
12110
|
{
|
|
11881
12111
|
className: "toolbar-btn",
|
|
11882
12112
|
onClick: handleCopy
|
|
11883
12113
|
},
|
|
11884
|
-
copySuccess ? /* @__PURE__ */
|
|
11885
|
-
)), show("paste") && /* @__PURE__ */
|
|
12114
|
+
copySuccess ? /* @__PURE__ */ React115.createElement(IconCheck, null) : /* @__PURE__ */ React115.createElement(IconCopy, null)
|
|
12115
|
+
)), show("paste") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11886
12116
|
"button",
|
|
11887
12117
|
{
|
|
11888
12118
|
className: "toolbar-btn",
|
|
11889
12119
|
onClick: handlePaste
|
|
11890
12120
|
},
|
|
11891
|
-
/* @__PURE__ */
|
|
11892
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12121
|
+
/* @__PURE__ */ React115.createElement(IconPaste, null)
|
|
12122
|
+
)), show("specialchars") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React115.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React115.createElement(
|
|
11893
12123
|
"button",
|
|
11894
12124
|
{
|
|
11895
12125
|
key: char,
|
|
@@ -11897,12 +12127,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11897
12127
|
onClick: () => insertSpecialChar(char)
|
|
11898
12128
|
},
|
|
11899
12129
|
char
|
|
11900
|
-
)))), show("code") && /* @__PURE__ */
|
|
12130
|
+
)))), show("code") && /* @__PURE__ */ React115.createElement(
|
|
11901
12131
|
Dropdown,
|
|
11902
12132
|
{
|
|
11903
|
-
trigger: { label: /* @__PURE__ */
|
|
12133
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11904
12134
|
},
|
|
11905
|
-
/* @__PURE__ */
|
|
12135
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11906
12136
|
if (editor.isActive("codeBlock")) {
|
|
11907
12137
|
const text = (() => {
|
|
11908
12138
|
const { $from } = editor.state.selection;
|
|
@@ -11920,22 +12150,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11920
12150
|
editor.chain().focus().toggleCode().run();
|
|
11921
12151
|
}
|
|
11922
12152
|
} }, "</>", " Inline Code"),
|
|
11923
|
-
/* @__PURE__ */
|
|
11924
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12153
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12154
|
+
), show("fullscreen") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11925
12155
|
"button",
|
|
11926
12156
|
{
|
|
11927
12157
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11928
12158
|
onClick: onToggleFullscreen
|
|
11929
12159
|
},
|
|
11930
|
-
/* @__PURE__ */
|
|
11931
|
-
)), show("tts") && /* @__PURE__ */
|
|
12160
|
+
/* @__PURE__ */ React115.createElement(IconFullscreen, null)
|
|
12161
|
+
)), show("tts") && /* @__PURE__ */ React115.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React115.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React115.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11932
12162
|
"button",
|
|
11933
12163
|
{
|
|
11934
12164
|
className: "toolbar-btn",
|
|
11935
12165
|
onClick: handleQuickTranslate
|
|
11936
12166
|
},
|
|
11937
|
-
/* @__PURE__ */
|
|
11938
|
-
)), /* @__PURE__ */
|
|
12167
|
+
/* @__PURE__ */ React115.createElement(IconTranslate, null)
|
|
12168
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React115.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React115.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11939
12169
|
"button",
|
|
11940
12170
|
{
|
|
11941
12171
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11978,11 +12208,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11978
12208
|
}
|
|
11979
12209
|
}
|
|
11980
12210
|
},
|
|
11981
|
-
/* @__PURE__ */
|
|
11982
|
-
)), /* @__PURE__ */
|
|
12211
|
+
/* @__PURE__ */ React115.createElement(IconTaskList, null)
|
|
12212
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11983
12213
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
11984
12214
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11985
|
-
return /* @__PURE__ */
|
|
12215
|
+
return /* @__PURE__ */ React115.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11986
12216
|
const { state } = editor;
|
|
11987
12217
|
const { schema } = state;
|
|
11988
12218
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -12015,8 +12245,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12015
12245
|
}
|
|
12016
12246
|
return true;
|
|
12017
12247
|
}).run();
|
|
12018
|
-
} }, /* @__PURE__ */
|
|
12019
|
-
})))), onClose && /* @__PURE__ */
|
|
12248
|
+
} }, /* @__PURE__ */ React115.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React115.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12249
|
+
})))), onClose && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
12020
12250
|
"button",
|
|
12021
12251
|
{
|
|
12022
12252
|
className: "toolbar-btn btn-cross",
|
|
@@ -12032,8 +12262,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12032
12262
|
onClose();
|
|
12033
12263
|
}
|
|
12034
12264
|
},
|
|
12035
|
-
/* @__PURE__ */
|
|
12036
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12265
|
+
/* @__PURE__ */ React115.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12266
|
+
))), showTranslateModal && /* @__PURE__ */ React115.createElement(
|
|
12037
12267
|
TranslateModal_default,
|
|
12038
12268
|
{
|
|
12039
12269
|
editor,
|
|
@@ -12051,7 +12281,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12051
12281
|
var Toolbar_default = Toolbar;
|
|
12052
12282
|
|
|
12053
12283
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12054
|
-
import
|
|
12284
|
+
import React116, { useState as useState32, useEffect as useEffect26, useRef as useRef29 } from "react";
|
|
12055
12285
|
import { createPortal as createPortal5 } from "react-dom";
|
|
12056
12286
|
var ALIGNMENTS = [
|
|
12057
12287
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12109,7 +12339,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12109
12339
|
editor.chain().focus().deleteSelection().run();
|
|
12110
12340
|
onClose();
|
|
12111
12341
|
};
|
|
12112
|
-
return /* @__PURE__ */
|
|
12342
|
+
return /* @__PURE__ */ React116.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React116.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React116.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React116.createElement("h3", null, "Image properties"), /* @__PURE__ */ React116.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React116.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React116.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ React116.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ React116.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React116.createElement(
|
|
12113
12343
|
"input",
|
|
12114
12344
|
{
|
|
12115
12345
|
type: "number",
|
|
@@ -12117,14 +12347,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12117
12347
|
value: width,
|
|
12118
12348
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12119
12349
|
}
|
|
12120
|
-
), /* @__PURE__ */
|
|
12350
|
+
), /* @__PURE__ */ React116.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
12121
12351
|
"button",
|
|
12122
12352
|
{
|
|
12123
12353
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12124
12354
|
onClick: () => setLockRatio(!lockRatio)
|
|
12125
12355
|
},
|
|
12126
12356
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12127
|
-
)), /* @__PURE__ */
|
|
12357
|
+
)), /* @__PURE__ */ React116.createElement(
|
|
12128
12358
|
"input",
|
|
12129
12359
|
{
|
|
12130
12360
|
type: "number",
|
|
@@ -12132,21 +12362,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12132
12362
|
value: height,
|
|
12133
12363
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12134
12364
|
}
|
|
12135
|
-
))), /* @__PURE__ */
|
|
12365
|
+
))), /* @__PURE__ */ React116.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ React116.createElement(
|
|
12136
12366
|
"button",
|
|
12137
12367
|
{
|
|
12138
12368
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12139
12369
|
onClick: () => setActiveTab("image")
|
|
12140
12370
|
},
|
|
12141
12371
|
"Image"
|
|
12142
|
-
), /* @__PURE__ */
|
|
12372
|
+
), /* @__PURE__ */ React116.createElement(
|
|
12143
12373
|
"button",
|
|
12144
12374
|
{
|
|
12145
12375
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12146
12376
|
onClick: () => setActiveTab("advanced")
|
|
12147
12377
|
},
|
|
12148
12378
|
"Advanced"
|
|
12149
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12379
|
+
)), activeTab === "image" ? /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ React116.createElement(
|
|
12150
12380
|
"input",
|
|
12151
12381
|
{
|
|
12152
12382
|
type: "text",
|
|
@@ -12154,7 +12384,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12154
12384
|
value: src,
|
|
12155
12385
|
onChange: (e) => setSrc(e.target.value)
|
|
12156
12386
|
}
|
|
12157
|
-
), /* @__PURE__ */
|
|
12387
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ React116.createElement(
|
|
12158
12388
|
"input",
|
|
12159
12389
|
{
|
|
12160
12390
|
type: "text",
|
|
@@ -12162,7 +12392,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12162
12392
|
value: title,
|
|
12163
12393
|
onChange: (e) => setTitle(e.target.value)
|
|
12164
12394
|
}
|
|
12165
|
-
), /* @__PURE__ */
|
|
12395
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ React116.createElement(
|
|
12166
12396
|
"input",
|
|
12167
12397
|
{
|
|
12168
12398
|
type: "text",
|
|
@@ -12170,7 +12400,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12170
12400
|
value: alt,
|
|
12171
12401
|
onChange: (e) => setAlt(e.target.value)
|
|
12172
12402
|
}
|
|
12173
|
-
), /* @__PURE__ */
|
|
12403
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ React116.createElement(
|
|
12174
12404
|
"input",
|
|
12175
12405
|
{
|
|
12176
12406
|
type: "text",
|
|
@@ -12178,14 +12408,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12178
12408
|
value: link,
|
|
12179
12409
|
onChange: (e) => setLink(e.target.value)
|
|
12180
12410
|
}
|
|
12181
|
-
), /* @__PURE__ */
|
|
12411
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ React116.createElement(
|
|
12182
12412
|
"input",
|
|
12183
12413
|
{
|
|
12184
12414
|
type: "checkbox",
|
|
12185
12415
|
checked: openInNewTab,
|
|
12186
12416
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12187
12417
|
}
|
|
12188
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12418
|
+
), "Open link in new tab")) : /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React116.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12189
12419
|
};
|
|
12190
12420
|
var ImageToolbar = ({ editor }) => {
|
|
12191
12421
|
const [showModal, setShowModal] = useState32(false);
|
|
@@ -12224,7 +12454,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12224
12454
|
const node = editor?.state.selection.node;
|
|
12225
12455
|
const isImage = node && node.type.name === "image";
|
|
12226
12456
|
if (!editor || !isImage || !pos) return showModal ? createPortal5(
|
|
12227
|
-
/* @__PURE__ */
|
|
12457
|
+
/* @__PURE__ */ React116.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12228
12458
|
document.body
|
|
12229
12459
|
) : null;
|
|
12230
12460
|
const handleDelete = () => {
|
|
@@ -12301,7 +12531,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12301
12531
|
setShowVAlign(false);
|
|
12302
12532
|
};
|
|
12303
12533
|
return createPortal5(
|
|
12304
|
-
/* @__PURE__ */
|
|
12534
|
+
/* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(
|
|
12305
12535
|
"div",
|
|
12306
12536
|
{
|
|
12307
12537
|
className: "image-toolbar",
|
|
@@ -12309,14 +12539,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12309
12539
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12310
12540
|
onMouseDown: (e) => e.preventDefault()
|
|
12311
12541
|
},
|
|
12312
|
-
/* @__PURE__ */
|
|
12313
|
-
/* @__PURE__ */
|
|
12314
|
-
/* @__PURE__ */
|
|
12315
|
-
/* @__PURE__ */
|
|
12542
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12543
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12544
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React116.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12545
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12316
12546
|
setShowAlign(!showAlign);
|
|
12317
12547
|
setShowVAlign(false);
|
|
12318
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12319
|
-
), showModal && /* @__PURE__ */
|
|
12548
|
+
} }, "\u2630 ", /* @__PURE__ */ React116.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React116.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React116.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12549
|
+
), showModal && /* @__PURE__ */ React116.createElement(
|
|
12320
12550
|
ImagePropertiesModal,
|
|
12321
12551
|
{
|
|
12322
12552
|
editor,
|
|
@@ -12330,7 +12560,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12330
12560
|
var ImageToolbar_default = ImageToolbar;
|
|
12331
12561
|
|
|
12332
12562
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12333
|
-
import
|
|
12563
|
+
import React117, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
|
|
12334
12564
|
import { createPortal as createPortal6 } from "react-dom";
|
|
12335
12565
|
var ALIGNMENTS2 = [
|
|
12336
12566
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12375,7 +12605,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12375
12605
|
onClose();
|
|
12376
12606
|
};
|
|
12377
12607
|
const isYoutube = nodeType === "youtube";
|
|
12378
|
-
return /* @__PURE__ */
|
|
12608
|
+
return /* @__PURE__ */ React117.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React117.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React117.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React117.createElement("h3", null, "Video properties"), /* @__PURE__ */ React117.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React117.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React117.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ React117.createElement(
|
|
12379
12609
|
"iframe",
|
|
12380
12610
|
{
|
|
12381
12611
|
src,
|
|
@@ -12383,14 +12613,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12383
12613
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12384
12614
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12385
12615
|
}
|
|
12386
|
-
) : /* @__PURE__ */
|
|
12616
|
+
) : /* @__PURE__ */ React117.createElement(
|
|
12387
12617
|
"video",
|
|
12388
12618
|
{
|
|
12389
12619
|
src,
|
|
12390
12620
|
controls: true,
|
|
12391
12621
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12392
12622
|
}
|
|
12393
|
-
)), /* @__PURE__ */
|
|
12623
|
+
)), /* @__PURE__ */ React117.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React117.createElement(
|
|
12394
12624
|
"input",
|
|
12395
12625
|
{
|
|
12396
12626
|
type: "number",
|
|
@@ -12398,14 +12628,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12398
12628
|
value: width,
|
|
12399
12629
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12400
12630
|
}
|
|
12401
|
-
), /* @__PURE__ */
|
|
12631
|
+
), /* @__PURE__ */ React117.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React117.createElement(
|
|
12402
12632
|
"button",
|
|
12403
12633
|
{
|
|
12404
12634
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12405
12635
|
onClick: () => setLockRatio(!lockRatio)
|
|
12406
12636
|
},
|
|
12407
12637
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12408
|
-
)), /* @__PURE__ */
|
|
12638
|
+
)), /* @__PURE__ */ React117.createElement(
|
|
12409
12639
|
"input",
|
|
12410
12640
|
{
|
|
12411
12641
|
type: "number",
|
|
@@ -12413,7 +12643,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12413
12643
|
value: height,
|
|
12414
12644
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12415
12645
|
}
|
|
12416
|
-
))), /* @__PURE__ */
|
|
12646
|
+
))), /* @__PURE__ */ React117.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ React117.createElement(
|
|
12417
12647
|
"input",
|
|
12418
12648
|
{
|
|
12419
12649
|
type: "text",
|
|
@@ -12421,7 +12651,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12421
12651
|
value: src,
|
|
12422
12652
|
onChange: (e) => setSrc(e.target.value)
|
|
12423
12653
|
}
|
|
12424
|
-
), /* @__PURE__ */
|
|
12654
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ React117.createElement(
|
|
12425
12655
|
"input",
|
|
12426
12656
|
{
|
|
12427
12657
|
type: "number",
|
|
@@ -12429,7 +12659,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12429
12659
|
value: width,
|
|
12430
12660
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12431
12661
|
}
|
|
12432
|
-
), /* @__PURE__ */
|
|
12662
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ React117.createElement(
|
|
12433
12663
|
"input",
|
|
12434
12664
|
{
|
|
12435
12665
|
type: "number",
|
|
@@ -12437,7 +12667,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12437
12667
|
value: height,
|
|
12438
12668
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12439
12669
|
}
|
|
12440
|
-
)))), /* @__PURE__ */
|
|
12670
|
+
)))), /* @__PURE__ */ React117.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12441
12671
|
};
|
|
12442
12672
|
var VideoToolbar = ({ editor }) => {
|
|
12443
12673
|
const [showModal, setShowModal] = useState33(false);
|
|
@@ -12477,7 +12707,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12477
12707
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12478
12708
|
const nodeType = node?.type.name;
|
|
12479
12709
|
if (!editor || !isVideo || !pos) return showModal ? createPortal6(
|
|
12480
|
-
/* @__PURE__ */
|
|
12710
|
+
/* @__PURE__ */ React117.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12481
12711
|
document.body
|
|
12482
12712
|
) : null;
|
|
12483
12713
|
const handleDelete = () => {
|
|
@@ -12524,7 +12754,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12524
12754
|
);
|
|
12525
12755
|
};
|
|
12526
12756
|
return createPortal6(
|
|
12527
|
-
/* @__PURE__ */
|
|
12757
|
+
/* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(
|
|
12528
12758
|
"div",
|
|
12529
12759
|
{
|
|
12530
12760
|
className: "image-toolbar",
|
|
@@ -12532,30 +12762,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12532
12762
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12533
12763
|
onMouseDown: (e) => e.preventDefault()
|
|
12534
12764
|
},
|
|
12535
|
-
/* @__PURE__ */
|
|
12536
|
-
/* @__PURE__ */
|
|
12537
|
-
/* @__PURE__ */
|
|
12538
|
-
/* @__PURE__ */
|
|
12765
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12766
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12767
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React117.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12768
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12539
12769
|
setShowSize(!showSize);
|
|
12540
12770
|
setShowAlign(false);
|
|
12541
|
-
} }, /* @__PURE__ */
|
|
12771
|
+
} }, /* @__PURE__ */ React117.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12542
12772
|
handleResize("small");
|
|
12543
12773
|
setShowSize(false);
|
|
12544
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12774
|
+
} }, "Small (320x180)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12545
12775
|
handleResize("medium");
|
|
12546
12776
|
setShowSize(false);
|
|
12547
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12777
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12548
12778
|
handleResize("large");
|
|
12549
12779
|
setShowSize(false);
|
|
12550
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12780
|
+
} }, "Large (640x360)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12551
12781
|
handleResize("full");
|
|
12552
12782
|
setShowSize(false);
|
|
12553
12783
|
} }, "Full (854x480)"))),
|
|
12554
|
-
/* @__PURE__ */
|
|
12784
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12555
12785
|
setShowAlign(!showAlign);
|
|
12556
12786
|
setShowSize(false);
|
|
12557
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12558
|
-
), showModal && /* @__PURE__ */
|
|
12787
|
+
} }, "\u2630 ", /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React117.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12788
|
+
), showModal && /* @__PURE__ */ React117.createElement(
|
|
12559
12789
|
VideoPropertiesModal,
|
|
12560
12790
|
{
|
|
12561
12791
|
editor,
|
|
@@ -12570,18 +12800,18 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12570
12800
|
var VideoToolbar_default = VideoToolbar;
|
|
12571
12801
|
|
|
12572
12802
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12573
|
-
import
|
|
12803
|
+
import React118, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
|
|
12574
12804
|
import { createPortal as createPortal7 } from "react-dom";
|
|
12575
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12576
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12577
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12578
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12579
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12580
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12581
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12582
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12583
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12584
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12805
|
+
var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12806
|
+
var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12807
|
+
var IconAddColBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12808
|
+
var IconAddColAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12809
|
+
var IconDeleteRow = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12810
|
+
var IconDeleteCol = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12811
|
+
var IconDeleteTable = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12812
|
+
var IconMergeCells = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React118.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12813
|
+
var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12814
|
+
var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12585
12815
|
var TableToolbar = ({ editor }) => {
|
|
12586
12816
|
const [pos, setPos] = useState34(null);
|
|
12587
12817
|
const toolbarRef = useRef31(null);
|
|
@@ -12629,7 +12859,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12629
12859
|
const canSplit = editor.can().splitCell();
|
|
12630
12860
|
const prevent = (e) => e.preventDefault();
|
|
12631
12861
|
return createPortal7(
|
|
12632
|
-
/* @__PURE__ */
|
|
12862
|
+
/* @__PURE__ */ React118.createElement(
|
|
12633
12863
|
"div",
|
|
12634
12864
|
{
|
|
12635
12865
|
ref: toolbarRef,
|
|
@@ -12637,19 +12867,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12637
12867
|
style: { top: pos.top, left: pos.left },
|
|
12638
12868
|
onMouseDown: prevent
|
|
12639
12869
|
},
|
|
12640
|
-
/* @__PURE__ */
|
|
12641
|
-
/* @__PURE__ */
|
|
12642
|
-
/* @__PURE__ */
|
|
12643
|
-
/* @__PURE__ */
|
|
12644
|
-
/* @__PURE__ */
|
|
12645
|
-
/* @__PURE__ */
|
|
12646
|
-
/* @__PURE__ */
|
|
12647
|
-
/* @__PURE__ */
|
|
12648
|
-
/* @__PURE__ */
|
|
12649
|
-
/* @__PURE__ */
|
|
12650
|
-
/* @__PURE__ */
|
|
12651
|
-
/* @__PURE__ */
|
|
12652
|
-
/* @__PURE__ */
|
|
12870
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddRowBefore, null))),
|
|
12871
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddRowAfter, null))),
|
|
12872
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React118.createElement(IconDeleteRow, null))),
|
|
12873
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12874
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddColBefore, null))),
|
|
12875
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddColAfter, null))),
|
|
12876
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React118.createElement(IconDeleteCol, null))),
|
|
12877
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12878
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React118.createElement(IconMergeCells, null))),
|
|
12879
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React118.createElement(IconSplitCell, null))),
|
|
12880
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12881
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React118.createElement(IconToggleHeader, null))),
|
|
12882
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React118.createElement(IconDeleteTable, null)))
|
|
12653
12883
|
),
|
|
12654
12884
|
document.body
|
|
12655
12885
|
);
|
|
@@ -12815,7 +13045,7 @@ var RufousTextEditor = ({
|
|
|
12815
13045
|
sx
|
|
12816
13046
|
}) => {
|
|
12817
13047
|
const sxClass = useSx(sx);
|
|
12818
|
-
const toolbarButtons =
|
|
13048
|
+
const toolbarButtons = useMemo5(() => {
|
|
12819
13049
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12820
13050
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12821
13051
|
if (hideButtons) {
|
|
@@ -12823,7 +13053,7 @@ var RufousTextEditor = ({
|
|
|
12823
13053
|
}
|
|
12824
13054
|
return visible;
|
|
12825
13055
|
}, [buttons, variant, hideButtons]);
|
|
12826
|
-
const mentionSuggestion =
|
|
13056
|
+
const mentionSuggestion = useMemo5(() => createMentionSuggestion(mentions), [mentions]);
|
|
12827
13057
|
const onChangeRef = useRef32(onChange);
|
|
12828
13058
|
const onBlurRef = useRef32(onBlur);
|
|
12829
13059
|
useEffect29(() => {
|
|
@@ -12957,7 +13187,7 @@ var RufousTextEditor = ({
|
|
|
12957
13187
|
const [linkNewTab, setLinkNewTab] = useState35(true);
|
|
12958
13188
|
const [linkNoFollow, setLinkNoFollow] = useState35(true);
|
|
12959
13189
|
const [linkSelection, setLinkSelection] = useState35(null);
|
|
12960
|
-
const setLink =
|
|
13190
|
+
const setLink = useCallback16(() => {
|
|
12961
13191
|
if (!editor) return;
|
|
12962
13192
|
const attrs = editor.getAttributes("link");
|
|
12963
13193
|
const previousUrl = attrs.href || "";
|
|
@@ -13029,7 +13259,7 @@ var RufousTextEditor = ({
|
|
|
13029
13259
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
13030
13260
|
};
|
|
13031
13261
|
}, [editor]);
|
|
13032
|
-
const handleLinkSubmit =
|
|
13262
|
+
const handleLinkSubmit = useCallback16(() => {
|
|
13033
13263
|
if (!editor || !linkSelection) return;
|
|
13034
13264
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
13035
13265
|
if (linkUrl === "") {
|
|
@@ -13065,7 +13295,7 @@ var RufousTextEditor = ({
|
|
|
13065
13295
|
setLinkClassName("");
|
|
13066
13296
|
setLinkSelection(null);
|
|
13067
13297
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13068
|
-
const handleLinkRemove =
|
|
13298
|
+
const handleLinkRemove = useCallback16(() => {
|
|
13069
13299
|
if (!editor || !linkSelection) return;
|
|
13070
13300
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13071
13301
|
setLinkModalOpen(false);
|
|
@@ -13074,7 +13304,7 @@ var RufousTextEditor = ({
|
|
|
13074
13304
|
setLinkClassName("");
|
|
13075
13305
|
setLinkSelection(null);
|
|
13076
13306
|
}, [editor, linkSelection]);
|
|
13077
|
-
const handleLinkCancel =
|
|
13307
|
+
const handleLinkCancel = useCallback16(() => {
|
|
13078
13308
|
setLinkModalOpen(false);
|
|
13079
13309
|
setLinkUrl("");
|
|
13080
13310
|
setLinkText("");
|
|
@@ -13083,20 +13313,20 @@ var RufousTextEditor = ({
|
|
|
13083
13313
|
editor?.chain().focus().run();
|
|
13084
13314
|
}, [editor]);
|
|
13085
13315
|
const [saveStatus, setSaveStatus] = useState35("");
|
|
13086
|
-
const handleSave =
|
|
13316
|
+
const handleSave = useCallback16(() => {
|
|
13087
13317
|
if (!editor || !onSaveProp) return;
|
|
13088
13318
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13089
13319
|
setSaveStatus("Saved!");
|
|
13090
13320
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13091
13321
|
}, [editor, onSaveProp]);
|
|
13092
|
-
const handleExport =
|
|
13322
|
+
const handleExport = useCallback16(() => {
|
|
13093
13323
|
if (!editor || !onExportProp) return;
|
|
13094
13324
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13095
13325
|
}, [editor, onExportProp]);
|
|
13096
|
-
const providerValue =
|
|
13326
|
+
const providerValue = useMemo5(() => ({ editor }), [editor]);
|
|
13097
13327
|
const [isFullscreen, setIsFullscreen] = useState35(false);
|
|
13098
|
-
const toggleFullscreen =
|
|
13099
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13328
|
+
const toggleFullscreen = useCallback16(() => setIsFullscreen((prev) => !prev), []);
|
|
13329
|
+
const wrapperJsx = /* @__PURE__ */ React119.createElement(
|
|
13100
13330
|
"div",
|
|
13101
13331
|
{
|
|
13102
13332
|
ref: wrapperRef,
|
|
@@ -13107,7 +13337,7 @@ var RufousTextEditor = ({
|
|
|
13107
13337
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13108
13338
|
}
|
|
13109
13339
|
},
|
|
13110
|
-
/* @__PURE__ */
|
|
13340
|
+
/* @__PURE__ */ React119.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React119.createElement(
|
|
13111
13341
|
Toolbar_default,
|
|
13112
13342
|
{
|
|
13113
13343
|
editor,
|
|
@@ -13122,7 +13352,7 @@ var RufousTextEditor = ({
|
|
|
13122
13352
|
isFullscreen,
|
|
13123
13353
|
onToggleFullscreen: toggleFullscreen
|
|
13124
13354
|
}
|
|
13125
|
-
), /* @__PURE__ */
|
|
13355
|
+
), /* @__PURE__ */ React119.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React119.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React119.createElement(
|
|
13126
13356
|
BubbleMenu,
|
|
13127
13357
|
{
|
|
13128
13358
|
editor,
|
|
@@ -13140,31 +13370,31 @@ var RufousTextEditor = ({
|
|
|
13140
13370
|
}
|
|
13141
13371
|
}
|
|
13142
13372
|
},
|
|
13143
|
-
/* @__PURE__ */
|
|
13373
|
+
/* @__PURE__ */ React119.createElement(
|
|
13144
13374
|
"button",
|
|
13145
13375
|
{
|
|
13146
13376
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13147
13377
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13148
13378
|
},
|
|
13149
|
-
/* @__PURE__ */
|
|
13379
|
+
/* @__PURE__ */ React119.createElement("strong", null, "B")
|
|
13150
13380
|
),
|
|
13151
|
-
/* @__PURE__ */
|
|
13381
|
+
/* @__PURE__ */ React119.createElement(
|
|
13152
13382
|
"button",
|
|
13153
13383
|
{
|
|
13154
13384
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13155
13385
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13156
13386
|
},
|
|
13157
|
-
/* @__PURE__ */
|
|
13387
|
+
/* @__PURE__ */ React119.createElement("em", null, "I")
|
|
13158
13388
|
),
|
|
13159
|
-
/* @__PURE__ */
|
|
13389
|
+
/* @__PURE__ */ React119.createElement(
|
|
13160
13390
|
"button",
|
|
13161
13391
|
{
|
|
13162
13392
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13163
13393
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13164
13394
|
},
|
|
13165
|
-
/* @__PURE__ */
|
|
13395
|
+
/* @__PURE__ */ React119.createElement("s", null, "S")
|
|
13166
13396
|
),
|
|
13167
|
-
/* @__PURE__ */
|
|
13397
|
+
/* @__PURE__ */ React119.createElement(
|
|
13168
13398
|
"button",
|
|
13169
13399
|
{
|
|
13170
13400
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13172,7 +13402,7 @@ var RufousTextEditor = ({
|
|
|
13172
13402
|
},
|
|
13173
13403
|
"</>"
|
|
13174
13404
|
),
|
|
13175
|
-
/* @__PURE__ */
|
|
13405
|
+
/* @__PURE__ */ React119.createElement(
|
|
13176
13406
|
"button",
|
|
13177
13407
|
{
|
|
13178
13408
|
onClick: setLink,
|
|
@@ -13180,7 +13410,7 @@ var RufousTextEditor = ({
|
|
|
13180
13410
|
},
|
|
13181
13411
|
"\u{1F517}"
|
|
13182
13412
|
)
|
|
13183
|
-
), editor && /* @__PURE__ */
|
|
13413
|
+
), editor && /* @__PURE__ */ React119.createElement(
|
|
13184
13414
|
FloatingMenu,
|
|
13185
13415
|
{
|
|
13186
13416
|
editor,
|
|
@@ -13195,7 +13425,7 @@ var RufousTextEditor = ({
|
|
|
13195
13425
|
}
|
|
13196
13426
|
}
|
|
13197
13427
|
},
|
|
13198
|
-
/* @__PURE__ */
|
|
13428
|
+
/* @__PURE__ */ React119.createElement(
|
|
13199
13429
|
"button",
|
|
13200
13430
|
{
|
|
13201
13431
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13203,7 +13433,7 @@ var RufousTextEditor = ({
|
|
|
13203
13433
|
},
|
|
13204
13434
|
"H1"
|
|
13205
13435
|
),
|
|
13206
|
-
/* @__PURE__ */
|
|
13436
|
+
/* @__PURE__ */ React119.createElement(
|
|
13207
13437
|
"button",
|
|
13208
13438
|
{
|
|
13209
13439
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13211,7 +13441,7 @@ var RufousTextEditor = ({
|
|
|
13211
13441
|
},
|
|
13212
13442
|
"H2"
|
|
13213
13443
|
),
|
|
13214
|
-
/* @__PURE__ */
|
|
13444
|
+
/* @__PURE__ */ React119.createElement(
|
|
13215
13445
|
"button",
|
|
13216
13446
|
{
|
|
13217
13447
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13219,7 +13449,7 @@ var RufousTextEditor = ({
|
|
|
13219
13449
|
},
|
|
13220
13450
|
"\u2022 List"
|
|
13221
13451
|
),
|
|
13222
|
-
/* @__PURE__ */
|
|
13452
|
+
/* @__PURE__ */ React119.createElement(
|
|
13223
13453
|
"button",
|
|
13224
13454
|
{
|
|
13225
13455
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13227,7 +13457,7 @@ var RufousTextEditor = ({
|
|
|
13227
13457
|
},
|
|
13228
13458
|
"1. List"
|
|
13229
13459
|
),
|
|
13230
|
-
/* @__PURE__ */
|
|
13460
|
+
/* @__PURE__ */ React119.createElement(
|
|
13231
13461
|
"button",
|
|
13232
13462
|
{
|
|
13233
13463
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13235,8 +13465,8 @@ var RufousTextEditor = ({
|
|
|
13235
13465
|
},
|
|
13236
13466
|
"\u201C Quote"
|
|
13237
13467
|
)
|
|
13238
|
-
), /* @__PURE__ */
|
|
13239
|
-
/* @__PURE__ */
|
|
13468
|
+
), /* @__PURE__ */ React119.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React119.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React119.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React119.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
|
|
13469
|
+
/* @__PURE__ */ React119.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React119.createElement(
|
|
13240
13470
|
"input",
|
|
13241
13471
|
{
|
|
13242
13472
|
type: "url",
|
|
@@ -13249,7 +13479,7 @@ var RufousTextEditor = ({
|
|
|
13249
13479
|
placeholder: "https://example.com",
|
|
13250
13480
|
autoFocus: true
|
|
13251
13481
|
}
|
|
13252
|
-
)), /* @__PURE__ */
|
|
13482
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React119.createElement(
|
|
13253
13483
|
"input",
|
|
13254
13484
|
{
|
|
13255
13485
|
type: "text",
|
|
@@ -13261,24 +13491,24 @@ var RufousTextEditor = ({
|
|
|
13261
13491
|
},
|
|
13262
13492
|
placeholder: "Link text"
|
|
13263
13493
|
}
|
|
13264
|
-
)), /* @__PURE__ */
|
|
13494
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13265
13495
|
"input",
|
|
13266
13496
|
{
|
|
13267
13497
|
type: "checkbox",
|
|
13268
13498
|
checked: linkNewTab,
|
|
13269
13499
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13270
13500
|
}
|
|
13271
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13501
|
+
), "Open in new tab"), /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13272
13502
|
"input",
|
|
13273
13503
|
{
|
|
13274
13504
|
type: "checkbox",
|
|
13275
13505
|
checked: linkNoFollow,
|
|
13276
13506
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13277
13507
|
}
|
|
13278
|
-
), "No follow"))), /* @__PURE__ */
|
|
13508
|
+
), "No follow"))), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13279
13509
|
document.body
|
|
13280
13510
|
)),
|
|
13281
|
-
helperText && /* @__PURE__ */
|
|
13511
|
+
helperText && /* @__PURE__ */ React119.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13282
13512
|
);
|
|
13283
13513
|
return isFullscreen ? createPortal8(wrapperJsx, document.body) : wrapperJsx;
|
|
13284
13514
|
};
|
|
@@ -13289,7 +13519,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13289
13519
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13290
13520
|
} catch {
|
|
13291
13521
|
}
|
|
13292
|
-
return /* @__PURE__ */
|
|
13522
|
+
return /* @__PURE__ */ React119.createElement(
|
|
13293
13523
|
"div",
|
|
13294
13524
|
{
|
|
13295
13525
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13403,6 +13633,7 @@ export {
|
|
|
13403
13633
|
Skeleton,
|
|
13404
13634
|
Slide,
|
|
13405
13635
|
Slider,
|
|
13636
|
+
SmartSelect,
|
|
13406
13637
|
Snackbar,
|
|
13407
13638
|
softSkillsIcon_default as SoftSkillsIcon,
|
|
13408
13639
|
Stack,
|