@rufous/ui 0.3.14 → 0.3.15
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 +532 -433
- package/dist/main.d.cts +46 -1
- package/dist/main.d.ts +46 -1
- package/dist/main.js +374 -276
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -163,6 +163,7 @@ __export(main_exports, {
|
|
|
163
163
|
UnsubscribeIcon: () => unsubscribeIcon_default,
|
|
164
164
|
UploadIcon: () => uploadIcon_default,
|
|
165
165
|
UserAssignIcon: () => userAssignIcon_default,
|
|
166
|
+
UserSelectionField: () => UserSelectionField,
|
|
166
167
|
ViewIcon: () => viewIcon_default,
|
|
167
168
|
WorkItemIcon: () => workItemIcon_default,
|
|
168
169
|
Zoom: () => Zoom,
|
|
@@ -2259,10 +2260,10 @@ function defaultIsEqual(a, b) {
|
|
|
2259
2260
|
if (!aIsObj && bIsObj) return a === b.value;
|
|
2260
2261
|
return false;
|
|
2261
2262
|
}
|
|
2262
|
-
function defaultFilter(options, inputValue,
|
|
2263
|
+
function defaultFilter(options, inputValue, getLabel2) {
|
|
2263
2264
|
if (!inputValue) return options;
|
|
2264
2265
|
const q = inputValue.toLowerCase();
|
|
2265
|
-
return options.filter((o) =>
|
|
2266
|
+
return options.filter((o) => getLabel2(o).toLowerCase().includes(q));
|
|
2266
2267
|
}
|
|
2267
2268
|
function AutocompleteInner(props, _ref) {
|
|
2268
2269
|
const {
|
|
@@ -9390,10 +9391,107 @@ function TreeSelect({
|
|
|
9390
9391
|
));
|
|
9391
9392
|
}
|
|
9392
9393
|
|
|
9394
|
+
// lib/UserSelectionField/UserSelectionField.tsx
|
|
9395
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
9396
|
+
function getOptionId(opt) {
|
|
9397
|
+
return opt.id ?? opt._id;
|
|
9398
|
+
}
|
|
9399
|
+
function getLabel(opt) {
|
|
9400
|
+
if (!opt.userFirstName) return "";
|
|
9401
|
+
return `${opt.userFirstName} ${opt.userLastName ?? ""}`.trim();
|
|
9402
|
+
}
|
|
9403
|
+
function matchesSearch(opt, query) {
|
|
9404
|
+
const q = query.toLowerCase();
|
|
9405
|
+
return opt.userFirstName?.toLowerCase().includes(q) || opt.userLastName?.toLowerCase().includes(q) || opt.emailId?.toLowerCase().includes(q) || false;
|
|
9406
|
+
}
|
|
9407
|
+
function UserAvatar({ user }) {
|
|
9408
|
+
const initials = (user.userFirstName?.[0] ?? "").toUpperCase() + (user.userLastName?.[0] ?? "").toUpperCase();
|
|
9409
|
+
return /* @__PURE__ */ import_react50.default.createElement("span", { style: {
|
|
9410
|
+
width: 28,
|
|
9411
|
+
height: 28,
|
|
9412
|
+
borderRadius: "50%",
|
|
9413
|
+
backgroundColor: "var(--hover-color, #e0e0e0)",
|
|
9414
|
+
border: "1px solid var(--border-color, #ddd)",
|
|
9415
|
+
display: "inline-flex",
|
|
9416
|
+
alignItems: "center",
|
|
9417
|
+
justifyContent: "center",
|
|
9418
|
+
fontSize: "0.7rem",
|
|
9419
|
+
fontWeight: 600,
|
|
9420
|
+
color: "var(--text-secondary, #555)",
|
|
9421
|
+
flexShrink: 0,
|
|
9422
|
+
letterSpacing: "0.02em"
|
|
9423
|
+
} }, initials || "?");
|
|
9424
|
+
}
|
|
9425
|
+
function UserSelectionField({
|
|
9426
|
+
value,
|
|
9427
|
+
onChange,
|
|
9428
|
+
options = [],
|
|
9429
|
+
loading = false,
|
|
9430
|
+
onSearchChange,
|
|
9431
|
+
label = "Select user",
|
|
9432
|
+
multiple = false,
|
|
9433
|
+
limitTags,
|
|
9434
|
+
size = "small",
|
|
9435
|
+
variant = "outlined",
|
|
9436
|
+
disabled = false,
|
|
9437
|
+
error = false,
|
|
9438
|
+
helperText,
|
|
9439
|
+
fullWidth = true,
|
|
9440
|
+
required = false,
|
|
9441
|
+
filterOptions: filterOptionsProp,
|
|
9442
|
+
className,
|
|
9443
|
+
style,
|
|
9444
|
+
sx
|
|
9445
|
+
}) {
|
|
9446
|
+
const handleInputChange = (_, inputValue) => {
|
|
9447
|
+
if (!onSearchChange) return;
|
|
9448
|
+
if (!inputValue) {
|
|
9449
|
+
onSearchChange("");
|
|
9450
|
+
return;
|
|
9451
|
+
}
|
|
9452
|
+
const hasLocalMatch = options.some((opt) => matchesSearch(opt, inputValue));
|
|
9453
|
+
if (!hasLocalMatch) {
|
|
9454
|
+
onSearchChange(inputValue);
|
|
9455
|
+
}
|
|
9456
|
+
};
|
|
9457
|
+
return /* @__PURE__ */ import_react50.default.createElement(
|
|
9458
|
+
Autocomplete,
|
|
9459
|
+
{
|
|
9460
|
+
options,
|
|
9461
|
+
value: value ?? (multiple ? [] : null),
|
|
9462
|
+
onChange: (_, newValue) => onChange(newValue),
|
|
9463
|
+
onInputChange: handleInputChange,
|
|
9464
|
+
multiple,
|
|
9465
|
+
limitTags,
|
|
9466
|
+
loading,
|
|
9467
|
+
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement(circularProgress_default, { size: 16 }), /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9468
|
+
getOptionLabel: getLabel,
|
|
9469
|
+
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9470
|
+
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
9471
|
+
renderOption: (props, option) => {
|
|
9472
|
+
const { key, ...rest } = props;
|
|
9473
|
+
return /* @__PURE__ */ import_react50.default.createElement("li", { key, ...rest, style: { padding: "6px 12px", listStyle: "none" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react50.default.createElement(UserAvatar, { user: option }), /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.85rem", color: "var(--text-color)", lineHeight: 1.3 } }, option.userFirstName, " ", option.userLastName), /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3 } }, option.emailId))));
|
|
9474
|
+
},
|
|
9475
|
+
label,
|
|
9476
|
+
placeholder: label,
|
|
9477
|
+
size,
|
|
9478
|
+
variant,
|
|
9479
|
+
disabled,
|
|
9480
|
+
error,
|
|
9481
|
+
helperText,
|
|
9482
|
+
fullWidth,
|
|
9483
|
+
required,
|
|
9484
|
+
className,
|
|
9485
|
+
style,
|
|
9486
|
+
sx
|
|
9487
|
+
}
|
|
9488
|
+
);
|
|
9489
|
+
}
|
|
9490
|
+
|
|
9393
9491
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9394
|
-
var
|
|
9492
|
+
var import_react61 = __toESM(require("react"), 1);
|
|
9395
9493
|
var import_react_dom18 = require("react-dom");
|
|
9396
|
-
var
|
|
9494
|
+
var import_react62 = require("@tiptap/react");
|
|
9397
9495
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
9398
9496
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
9399
9497
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -9413,21 +9511,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
9413
9511
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
9414
9512
|
|
|
9415
9513
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
9416
|
-
var
|
|
9514
|
+
var import_react52 = require("@tiptap/react");
|
|
9417
9515
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
9418
9516
|
|
|
9419
9517
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9420
|
-
var
|
|
9421
|
-
var MentionList = (0,
|
|
9422
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9518
|
+
var import_react51 = __toESM(require("react"), 1);
|
|
9519
|
+
var MentionList = (0, import_react51.forwardRef)((props, ref) => {
|
|
9520
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react51.useState)(0);
|
|
9423
9521
|
const selectItem = (index) => {
|
|
9424
9522
|
const item = props.items[index];
|
|
9425
9523
|
if (item) {
|
|
9426
9524
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
9427
9525
|
}
|
|
9428
9526
|
};
|
|
9429
|
-
(0,
|
|
9430
|
-
(0,
|
|
9527
|
+
(0, import_react51.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9528
|
+
(0, import_react51.useImperativeHandle)(ref, () => ({
|
|
9431
9529
|
onKeyDown: ({ event }) => {
|
|
9432
9530
|
if (event.key === "ArrowUp") {
|
|
9433
9531
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -9445,17 +9543,17 @@ var MentionList = (0, import_react50.forwardRef)((props, ref) => {
|
|
|
9445
9543
|
}
|
|
9446
9544
|
}));
|
|
9447
9545
|
if (!props.items.length) {
|
|
9448
|
-
return /* @__PURE__ */
|
|
9546
|
+
return /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9449
9547
|
}
|
|
9450
|
-
return /* @__PURE__ */
|
|
9548
|
+
return /* @__PURE__ */ import_react51.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react51.default.createElement(
|
|
9451
9549
|
"button",
|
|
9452
9550
|
{
|
|
9453
9551
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9454
9552
|
key: item.id,
|
|
9455
9553
|
onClick: () => selectItem(index)
|
|
9456
9554
|
},
|
|
9457
|
-
/* @__PURE__ */
|
|
9458
|
-
/* @__PURE__ */
|
|
9555
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9556
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9459
9557
|
)));
|
|
9460
9558
|
});
|
|
9461
9559
|
MentionList.displayName = "MentionList";
|
|
@@ -9475,7 +9573,7 @@ function createMentionSuggestion(users) {
|
|
|
9475
9573
|
return {
|
|
9476
9574
|
onStart: (props) => {
|
|
9477
9575
|
if (!props.clientRect) return;
|
|
9478
|
-
component = new
|
|
9576
|
+
component = new import_react52.ReactRenderer(MentionList_default, {
|
|
9479
9577
|
props,
|
|
9480
9578
|
editor: props.editor
|
|
9481
9579
|
});
|
|
@@ -9513,21 +9611,21 @@ function createMentionSuggestion(users) {
|
|
|
9513
9611
|
}
|
|
9514
9612
|
|
|
9515
9613
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9516
|
-
var
|
|
9614
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
9517
9615
|
var import_react_dom14 = require("react-dom");
|
|
9518
9616
|
|
|
9519
9617
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9520
|
-
var
|
|
9521
|
-
var TextToSpeech = (0,
|
|
9522
|
-
const [speaking, setSpeaking] = (0,
|
|
9523
|
-
const [paused, setPaused] = (0,
|
|
9524
|
-
const [voices, setVoices] = (0,
|
|
9525
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
9526
|
-
const [rate, setRate] = (0,
|
|
9527
|
-
const [showPanel, setShowPanel] = (0,
|
|
9528
|
-
const utteranceRef = (0,
|
|
9529
|
-
const panelRef = (0,
|
|
9530
|
-
(0,
|
|
9618
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
9619
|
+
var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9620
|
+
const [speaking, setSpeaking] = (0, import_react53.useState)(false);
|
|
9621
|
+
const [paused, setPaused] = (0, import_react53.useState)(false);
|
|
9622
|
+
const [voices, setVoices] = (0, import_react53.useState)([]);
|
|
9623
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react53.useState)("");
|
|
9624
|
+
const [rate, setRate] = (0, import_react53.useState)(1);
|
|
9625
|
+
const [showPanel, setShowPanel] = (0, import_react53.useState)(false);
|
|
9626
|
+
const utteranceRef = (0, import_react53.useRef)(null);
|
|
9627
|
+
const panelRef = (0, import_react53.useRef)(null);
|
|
9628
|
+
(0, import_react53.useEffect)(() => {
|
|
9531
9629
|
const synth = window.speechSynthesis;
|
|
9532
9630
|
const loadVoices = () => {
|
|
9533
9631
|
const available = synth.getVoices();
|
|
@@ -9545,7 +9643,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9545
9643
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9546
9644
|
};
|
|
9547
9645
|
}, [selectedVoice]);
|
|
9548
|
-
(0,
|
|
9646
|
+
(0, import_react53.useEffect)(() => {
|
|
9549
9647
|
const handleClick = (e) => {
|
|
9550
9648
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9551
9649
|
setShowPanel(false);
|
|
@@ -9554,7 +9652,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9554
9652
|
document.addEventListener("mousedown", handleClick);
|
|
9555
9653
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9556
9654
|
}, []);
|
|
9557
|
-
const getTextToSpeak = (0,
|
|
9655
|
+
const getTextToSpeak = (0, import_react53.useCallback)(() => {
|
|
9558
9656
|
if (!editor) return "";
|
|
9559
9657
|
const { from, to, empty } = editor.state.selection;
|
|
9560
9658
|
if (!empty) {
|
|
@@ -9562,7 +9660,7 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9562
9660
|
}
|
|
9563
9661
|
return editor.getText();
|
|
9564
9662
|
}, [editor]);
|
|
9565
|
-
const handleSpeak = (0,
|
|
9663
|
+
const handleSpeak = (0, import_react53.useCallback)(async () => {
|
|
9566
9664
|
const text = getTextToSpeak();
|
|
9567
9665
|
if (!text.trim()) return;
|
|
9568
9666
|
if (onTextToSpeech) {
|
|
@@ -9604,25 +9702,25 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9604
9702
|
setSpeaking(true);
|
|
9605
9703
|
setPaused(false);
|
|
9606
9704
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9607
|
-
const handlePause = (0,
|
|
9705
|
+
const handlePause = (0, import_react53.useCallback)(() => {
|
|
9608
9706
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9609
9707
|
window.speechSynthesis.pause();
|
|
9610
9708
|
setPaused(true);
|
|
9611
9709
|
}
|
|
9612
9710
|
}, []);
|
|
9613
|
-
const handleResume = (0,
|
|
9711
|
+
const handleResume = (0, import_react53.useCallback)(() => {
|
|
9614
9712
|
if (window.speechSynthesis.paused) {
|
|
9615
9713
|
window.speechSynthesis.resume();
|
|
9616
9714
|
setPaused(false);
|
|
9617
9715
|
}
|
|
9618
9716
|
}, []);
|
|
9619
|
-
const handleStop = (0,
|
|
9717
|
+
const handleStop = (0, import_react53.useCallback)(() => {
|
|
9620
9718
|
window.speechSynthesis.cancel();
|
|
9621
9719
|
setSpeaking(false);
|
|
9622
9720
|
setPaused(false);
|
|
9623
9721
|
}, []);
|
|
9624
|
-
(0,
|
|
9625
|
-
return /* @__PURE__ */
|
|
9722
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9723
|
+
return /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
|
|
9626
9724
|
"button",
|
|
9627
9725
|
{
|
|
9628
9726
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9635,15 +9733,15 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9635
9733
|
}
|
|
9636
9734
|
},
|
|
9637
9735
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9638
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9736
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react53.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9639
9737
|
"select",
|
|
9640
9738
|
{
|
|
9641
9739
|
className: "tts-select",
|
|
9642
9740
|
value: selectedVoice,
|
|
9643
9741
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9644
9742
|
},
|
|
9645
|
-
voices.map((v) => /* @__PURE__ */
|
|
9646
|
-
), /* @__PURE__ */
|
|
9743
|
+
voices.map((v) => /* @__PURE__ */ import_react53.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9744
|
+
), /* @__PURE__ */ import_react53.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react53.default.createElement(
|
|
9647
9745
|
"input",
|
|
9648
9746
|
{
|
|
9649
9747
|
type: "range",
|
|
@@ -9654,26 +9752,26 @@ var TextToSpeech = (0, import_react52.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9654
9752
|
value: rate,
|
|
9655
9753
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9656
9754
|
}
|
|
9657
|
-
), /* @__PURE__ */
|
|
9755
|
+
), /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9658
9756
|
handleSpeak();
|
|
9659
9757
|
setShowPanel(false);
|
|
9660
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9758
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react53.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9661
9759
|
});
|
|
9662
9760
|
var TextToSpeech_default = TextToSpeech;
|
|
9663
9761
|
|
|
9664
9762
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9665
|
-
var
|
|
9666
|
-
var SpeechToText = (0,
|
|
9667
|
-
const [listening, setListening] = (0,
|
|
9668
|
-
const [showPanel, setShowPanel] = (0,
|
|
9669
|
-
const [language, setLanguage] = (0,
|
|
9670
|
-
const [interim, setInterim] = (0,
|
|
9671
|
-
const recognitionRef = (0,
|
|
9672
|
-
const panelRef = (0,
|
|
9673
|
-
const isListeningRef = (0,
|
|
9763
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9764
|
+
var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
9765
|
+
const [listening, setListening] = (0, import_react54.useState)(false);
|
|
9766
|
+
const [showPanel, setShowPanel] = (0, import_react54.useState)(false);
|
|
9767
|
+
const [language, setLanguage] = (0, import_react54.useState)("en-US");
|
|
9768
|
+
const [interim, setInterim] = (0, import_react54.useState)("");
|
|
9769
|
+
const recognitionRef = (0, import_react54.useRef)(null);
|
|
9770
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9771
|
+
const isListeningRef = (0, import_react54.useRef)(false);
|
|
9674
9772
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9675
9773
|
const supported = !!SpeechRecognitionAPI;
|
|
9676
|
-
(0,
|
|
9774
|
+
(0, import_react54.useEffect)(() => {
|
|
9677
9775
|
const handleClick = (e) => {
|
|
9678
9776
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9679
9777
|
setShowPanel(false);
|
|
@@ -9682,7 +9780,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9682
9780
|
document.addEventListener("mousedown", handleClick);
|
|
9683
9781
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9684
9782
|
}, []);
|
|
9685
|
-
const createRecognition = (0,
|
|
9783
|
+
const createRecognition = (0, import_react54.useCallback)(() => {
|
|
9686
9784
|
if (!supported) return null;
|
|
9687
9785
|
const recognition = new SpeechRecognitionAPI();
|
|
9688
9786
|
recognition.lang = language;
|
|
@@ -9691,7 +9789,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9691
9789
|
recognition.maxAlternatives = 1;
|
|
9692
9790
|
return recognition;
|
|
9693
9791
|
}, [supported, language]);
|
|
9694
|
-
const startSession = (0,
|
|
9792
|
+
const startSession = (0, import_react54.useCallback)((recognition) => {
|
|
9695
9793
|
if (!recognition || !editor) return;
|
|
9696
9794
|
recognition.onresult = async (event) => {
|
|
9697
9795
|
let finalText = "";
|
|
@@ -9746,7 +9844,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9746
9844
|
}
|
|
9747
9845
|
};
|
|
9748
9846
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9749
|
-
const startListening = (0,
|
|
9847
|
+
const startListening = (0, import_react54.useCallback)(() => {
|
|
9750
9848
|
if (!supported || !editor) return;
|
|
9751
9849
|
const recognition = createRecognition();
|
|
9752
9850
|
if (!recognition) return;
|
|
@@ -9762,7 +9860,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9762
9860
|
setListening(false);
|
|
9763
9861
|
}
|
|
9764
9862
|
}, [supported, editor, createRecognition, startSession]);
|
|
9765
|
-
const stopListening = (0,
|
|
9863
|
+
const stopListening = (0, import_react54.useCallback)(() => {
|
|
9766
9864
|
isListeningRef.current = false;
|
|
9767
9865
|
if (recognitionRef.current) {
|
|
9768
9866
|
try {
|
|
@@ -9774,9 +9872,9 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9774
9872
|
setListening(false);
|
|
9775
9873
|
setInterim("");
|
|
9776
9874
|
}, []);
|
|
9777
|
-
(0,
|
|
9875
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9778
9876
|
if (!supported) {
|
|
9779
|
-
return /* @__PURE__ */
|
|
9877
|
+
return /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9780
9878
|
}
|
|
9781
9879
|
const LANGUAGES2 = [
|
|
9782
9880
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9798,7 +9896,7 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9798
9896
|
{ code: "kn-IN", label: "Kannada" },
|
|
9799
9897
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9800
9898
|
];
|
|
9801
|
-
return /* @__PURE__ */
|
|
9899
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9802
9900
|
"button",
|
|
9803
9901
|
{
|
|
9804
9902
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9811,20 +9909,20 @@ var SpeechToText = (0, import_react53.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9811
9909
|
}
|
|
9812
9910
|
},
|
|
9813
9911
|
"\u{1F3A4}"
|
|
9814
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
9912
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react54.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9815
9913
|
"select",
|
|
9816
9914
|
{
|
|
9817
9915
|
className: "stt-select",
|
|
9818
9916
|
value: language,
|
|
9819
9917
|
onChange: (e) => setLanguage(e.target.value)
|
|
9820
9918
|
},
|
|
9821
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9822
|
-
), /* @__PURE__ */
|
|
9919
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react54.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
9920
|
+
), /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react54.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react54.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9823
9921
|
});
|
|
9824
9922
|
var SpeechToText_default = SpeechToText;
|
|
9825
9923
|
|
|
9826
9924
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9827
|
-
var
|
|
9925
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
9828
9926
|
var import_react_dom12 = require("react-dom");
|
|
9829
9927
|
var AI_COMMANDS = [
|
|
9830
9928
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
@@ -9872,16 +9970,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9872
9970
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9873
9971
|
};
|
|
9874
9972
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9875
|
-
const [open, setOpen] = (0,
|
|
9876
|
-
const [showModal, setShowModal] = (0,
|
|
9877
|
-
const [loading, setLoading] = (0,
|
|
9878
|
-
const [promptText, setPromptText] = (0,
|
|
9879
|
-
const [resultText, setResultText] = (0,
|
|
9880
|
-
const [originalText, setOriginalText] = (0,
|
|
9881
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9882
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9883
|
-
const panelRef = (0,
|
|
9884
|
-
(0,
|
|
9973
|
+
const [open, setOpen] = (0, import_react55.useState)(false);
|
|
9974
|
+
const [showModal, setShowModal] = (0, import_react55.useState)(false);
|
|
9975
|
+
const [loading, setLoading] = (0, import_react55.useState)(false);
|
|
9976
|
+
const [promptText, setPromptText] = (0, import_react55.useState)("");
|
|
9977
|
+
const [resultText, setResultText] = (0, import_react55.useState)("");
|
|
9978
|
+
const [originalText, setOriginalText] = (0, import_react55.useState)("");
|
|
9979
|
+
const [selectionRange, setSelectionRange] = (0, import_react55.useState)(null);
|
|
9980
|
+
const [previousResults, setPreviousResults] = (0, import_react55.useState)([]);
|
|
9981
|
+
const panelRef = (0, import_react55.useRef)(null);
|
|
9982
|
+
(0, import_react55.useEffect)(() => {
|
|
9885
9983
|
const handleClick = (e) => {
|
|
9886
9984
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9887
9985
|
setOpen(false);
|
|
@@ -9890,7 +9988,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9890
9988
|
document.addEventListener("mousedown", handleClick);
|
|
9891
9989
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9892
9990
|
}, []);
|
|
9893
|
-
const getSelectedText = (0,
|
|
9991
|
+
const getSelectedText = (0, import_react55.useCallback)(() => {
|
|
9894
9992
|
if (!editor) return { text: "", range: null };
|
|
9895
9993
|
const { from, to, empty } = editor.state.selection;
|
|
9896
9994
|
if (!empty) {
|
|
@@ -9898,7 +9996,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9898
9996
|
}
|
|
9899
9997
|
return { text: editor.getText(), range: null };
|
|
9900
9998
|
}, [editor]);
|
|
9901
|
-
const fetchAIResult = (0,
|
|
9999
|
+
const fetchAIResult = (0, import_react55.useCallback)(async (prompt, text, prevResults = []) => {
|
|
9902
10000
|
setLoading(true);
|
|
9903
10001
|
setResultText("");
|
|
9904
10002
|
try {
|
|
@@ -9916,7 +10014,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9916
10014
|
setLoading(false);
|
|
9917
10015
|
}
|
|
9918
10016
|
}, [onAICommand]);
|
|
9919
|
-
const handleCommandSelect = (0,
|
|
10017
|
+
const handleCommandSelect = (0, import_react55.useCallback)((command) => {
|
|
9920
10018
|
const { text, range } = getSelectedText();
|
|
9921
10019
|
if (!text.trim()) return;
|
|
9922
10020
|
setOriginalText(text);
|
|
@@ -9927,7 +10025,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9927
10025
|
setShowModal(true);
|
|
9928
10026
|
fetchAIResult(command.prompt, text, []);
|
|
9929
10027
|
}, [getSelectedText, fetchAIResult]);
|
|
9930
|
-
const handleInsert = (0,
|
|
10028
|
+
const handleInsert = (0, import_react55.useCallback)(() => {
|
|
9931
10029
|
if (!resultText || !editor) return;
|
|
9932
10030
|
if (selectionRange) {
|
|
9933
10031
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9937,7 +10035,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9937
10035
|
setShowModal(false);
|
|
9938
10036
|
setResultText("");
|
|
9939
10037
|
}, [editor, resultText, selectionRange]);
|
|
9940
|
-
const handleInsertAfter = (0,
|
|
10038
|
+
const handleInsertAfter = (0, import_react55.useCallback)(() => {
|
|
9941
10039
|
if (!resultText || !editor) return;
|
|
9942
10040
|
if (selectionRange) {
|
|
9943
10041
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9952,11 +10050,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9952
10050
|
setShowModal(false);
|
|
9953
10051
|
setResultText("");
|
|
9954
10052
|
}, [editor, resultText, selectionRange]);
|
|
9955
|
-
const handleRefresh = (0,
|
|
10053
|
+
const handleRefresh = (0, import_react55.useCallback)(() => {
|
|
9956
10054
|
if (!originalText.trim()) return;
|
|
9957
10055
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9958
10056
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9959
|
-
const handleCancel = (0,
|
|
10057
|
+
const handleCancel = (0, import_react55.useCallback)(() => {
|
|
9960
10058
|
setShowModal(false);
|
|
9961
10059
|
setResultText("");
|
|
9962
10060
|
setPromptText("");
|
|
@@ -9965,15 +10063,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9965
10063
|
setPreviousResults([]);
|
|
9966
10064
|
}, []);
|
|
9967
10065
|
if (!editor) return null;
|
|
9968
|
-
return /* @__PURE__ */
|
|
10066
|
+
return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9969
10067
|
"button",
|
|
9970
10068
|
{
|
|
9971
10069
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
9972
10070
|
onClick: () => setOpen(!open)
|
|
9973
10071
|
},
|
|
9974
|
-
/* @__PURE__ */
|
|
9975
|
-
/* @__PURE__ */
|
|
9976
|
-
)), open && /* @__PURE__ */
|
|
10072
|
+
/* @__PURE__ */ import_react55.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react55.default.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
10073
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10074
|
+
)), open && /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react55.default.createElement(
|
|
9977
10075
|
"button",
|
|
9978
10076
|
{
|
|
9979
10077
|
key: cmd.id,
|
|
@@ -9981,8 +10079,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9981
10079
|
onClick: () => handleCommandSelect(cmd)
|
|
9982
10080
|
},
|
|
9983
10081
|
cmd.label
|
|
9984
|
-
))), /* @__PURE__ */
|
|
9985
|
-
/* @__PURE__ */
|
|
10082
|
+
))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
|
|
10083
|
+
/* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react55.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react55.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react55.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9986
10084
|
"textarea",
|
|
9987
10085
|
{
|
|
9988
10086
|
className: "ai-modal-prompt",
|
|
@@ -9990,15 +10088,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9990
10088
|
onChange: (e) => setPromptText(e.target.value),
|
|
9991
10089
|
rows: 3
|
|
9992
10090
|
}
|
|
9993
|
-
), /* @__PURE__ */
|
|
10091
|
+
), /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9994
10092
|
"button",
|
|
9995
10093
|
{
|
|
9996
10094
|
className: "ai-modal-robot-btn",
|
|
9997
10095
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
9998
10096
|
disabled: loading
|
|
9999
10097
|
},
|
|
10000
|
-
/* @__PURE__ */
|
|
10001
|
-
)))), /* @__PURE__ */
|
|
10098
|
+
/* @__PURE__ */ import_react55.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react55.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react55.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react55.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M8 7h8" }))
|
|
10099
|
+
)))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
10002
10100
|
"button",
|
|
10003
10101
|
{
|
|
10004
10102
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10006,7 +10104,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10006
10104
|
disabled: loading || !resultText
|
|
10007
10105
|
},
|
|
10008
10106
|
"Insert"
|
|
10009
|
-
), /* @__PURE__ */
|
|
10107
|
+
), /* @__PURE__ */ import_react55.default.createElement(
|
|
10010
10108
|
"button",
|
|
10011
10109
|
{
|
|
10012
10110
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10014,22 +10112,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10014
10112
|
disabled: loading || !resultText
|
|
10015
10113
|
},
|
|
10016
10114
|
"Insert After"
|
|
10017
|
-
), /* @__PURE__ */
|
|
10115
|
+
), /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
10018
10116
|
"button",
|
|
10019
10117
|
{
|
|
10020
10118
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10021
10119
|
onClick: handleRefresh,
|
|
10022
10120
|
disabled: loading
|
|
10023
10121
|
},
|
|
10024
|
-
/* @__PURE__ */
|
|
10025
|
-
))), /* @__PURE__ */
|
|
10122
|
+
/* @__PURE__ */ import_react55.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react55.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react55.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10123
|
+
))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react55.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react55.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10026
10124
|
document.body
|
|
10027
10125
|
));
|
|
10028
10126
|
};
|
|
10029
10127
|
var AICommands_default = AICommands;
|
|
10030
10128
|
|
|
10031
10129
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10032
|
-
var
|
|
10130
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
10033
10131
|
var import_react_dom13 = require("react-dom");
|
|
10034
10132
|
var LANGUAGES = [
|
|
10035
10133
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10169,16 +10267,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
10169
10267
|
return null;
|
|
10170
10268
|
}
|
|
10171
10269
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
10172
|
-
const [sourceLang, setSourceLang] = (0,
|
|
10173
|
-
const [targetLang, setTargetLang] = (0,
|
|
10174
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
10175
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
10176
|
-
const [translating, setTranslating] = (0,
|
|
10177
|
-
const [error, setError] = (0,
|
|
10178
|
-
const filteredSource = (0,
|
|
10270
|
+
const [sourceLang, setSourceLang] = (0, import_react56.useState)(initialSource || "en");
|
|
10271
|
+
const [targetLang, setTargetLang] = (0, import_react56.useState)(initialTarget || "hi");
|
|
10272
|
+
const [sourceFilter, setSourceFilter] = (0, import_react56.useState)("");
|
|
10273
|
+
const [targetFilter, setTargetFilter] = (0, import_react56.useState)("");
|
|
10274
|
+
const [translating, setTranslating] = (0, import_react56.useState)(false);
|
|
10275
|
+
const [error, setError] = (0, import_react56.useState)("");
|
|
10276
|
+
const filteredSource = (0, import_react56.useMemo)(() => LANGUAGES.filter(
|
|
10179
10277
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10180
10278
|
), [sourceFilter]);
|
|
10181
|
-
const filteredTarget = (0,
|
|
10279
|
+
const filteredTarget = (0, import_react56.useMemo)(() => LANGUAGES.filter(
|
|
10182
10280
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10183
10281
|
), [targetFilter]);
|
|
10184
10282
|
const handleSwap = () => {
|
|
@@ -10222,7 +10320,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10222
10320
|
}
|
|
10223
10321
|
};
|
|
10224
10322
|
return (0, import_react_dom13.createPortal)(
|
|
10225
|
-
/* @__PURE__ */
|
|
10323
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react56.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10226
10324
|
"input",
|
|
10227
10325
|
{
|
|
10228
10326
|
type: "text",
|
|
@@ -10231,16 +10329,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10231
10329
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10232
10330
|
className: "translate-filter-input"
|
|
10233
10331
|
}
|
|
10234
|
-
)), /* @__PURE__ */
|
|
10332
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10235
10333
|
"button",
|
|
10236
10334
|
{
|
|
10237
10335
|
key: lang.code,
|
|
10238
10336
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10239
10337
|
onClick: () => setSourceLang(lang.code)
|
|
10240
10338
|
},
|
|
10241
|
-
/* @__PURE__ */
|
|
10242
|
-
/* @__PURE__ */
|
|
10243
|
-
)))), /* @__PURE__ */
|
|
10339
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10340
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10341
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10244
10342
|
"input",
|
|
10245
10343
|
{
|
|
10246
10344
|
type: "text",
|
|
@@ -10249,16 +10347,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10249
10347
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10250
10348
|
className: "translate-filter-input"
|
|
10251
10349
|
}
|
|
10252
|
-
)), /* @__PURE__ */
|
|
10350
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10253
10351
|
"button",
|
|
10254
10352
|
{
|
|
10255
10353
|
key: lang.code,
|
|
10256
10354
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10257
10355
|
onClick: () => setTargetLang(lang.code)
|
|
10258
10356
|
},
|
|
10259
|
-
/* @__PURE__ */
|
|
10260
|
-
/* @__PURE__ */
|
|
10261
|
-
))))), error && /* @__PURE__ */
|
|
10357
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10358
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10359
|
+
))))), error && /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10262
10360
|
document.body
|
|
10263
10361
|
);
|
|
10264
10362
|
};
|
|
@@ -10909,38 +11007,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
10909
11007
|
});
|
|
10910
11008
|
|
|
10911
11009
|
// lib/RufousTextEditor/icons.tsx
|
|
10912
|
-
var
|
|
11010
|
+
var React113 = __toESM(require("react"), 1);
|
|
10913
11011
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10914
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10915
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10916
|
-
var IconBold = () => /* @__PURE__ */
|
|
10917
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10918
|
-
var IconLink = () => /* @__PURE__ */
|
|
10919
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10920
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10921
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10922
|
-
var IconColor = () => /* @__PURE__ */
|
|
10923
|
-
var IconFont = () => /* @__PURE__ */
|
|
10924
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10925
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10926
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10927
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10928
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10929
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10930
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10931
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10932
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10933
|
-
var IconTable = () => /* @__PURE__ */
|
|
10934
|
-
var IconImage = () => /* @__PURE__ */
|
|
10935
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10936
|
-
var IconCut = () => /* @__PURE__ */
|
|
10937
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10938
|
-
var IconCode = () => /* @__PURE__ */
|
|
10939
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10940
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10941
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10942
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10943
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11012
|
+
var IconUndo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11013
|
+
var IconRedo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11014
|
+
var IconBold = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11015
|
+
var IconItalic = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11016
|
+
var IconLink = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11017
|
+
var IconStrike = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11018
|
+
var IconHeading = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11019
|
+
var IconFontSize = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11020
|
+
var IconColor = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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__ */ React113.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11021
|
+
var IconFont = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11022
|
+
var IconLineHeight = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11023
|
+
var IconBulletList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11024
|
+
var IconOrderedList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11025
|
+
var IconAlignLeft = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11026
|
+
var IconAlignCenter = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11027
|
+
var IconAlignRight = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11028
|
+
var IconAlignJustify = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11029
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11030
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11031
|
+
var IconTable = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11032
|
+
var IconImage = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11033
|
+
var IconVideo = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11034
|
+
var IconCut = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11035
|
+
var IconCopy = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11036
|
+
var IconCode = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11037
|
+
var IconFullscreen = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11038
|
+
var IconTranslate = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11039
|
+
var IconTaskList = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.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" }));
|
|
11040
|
+
var IconCheck = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11041
|
+
var IconPaste = () => /* @__PURE__ */ React113.createElement("svg", { ...s }, /* @__PURE__ */ React113.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
10944
11042
|
|
|
10945
11043
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10946
11044
|
var COLOR_PALETTE = [
|
|
@@ -11078,10 +11176,10 @@ var SPECIAL_CHARS = [
|
|
|
11078
11176
|
"\xA2"
|
|
11079
11177
|
];
|
|
11080
11178
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
11081
|
-
const [open, setOpen] = (0,
|
|
11082
|
-
const ref = (0,
|
|
11083
|
-
const menuRef = (0,
|
|
11084
|
-
(0,
|
|
11179
|
+
const [open, setOpen] = (0, import_react57.useState)(false);
|
|
11180
|
+
const ref = (0, import_react57.useRef)(null);
|
|
11181
|
+
const menuRef = (0, import_react57.useRef)(null);
|
|
11182
|
+
(0, import_react57.useEffect)(() => {
|
|
11085
11183
|
const handleClick = (e) => {
|
|
11086
11184
|
const target = e.target;
|
|
11087
11185
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -11093,7 +11191,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11093
11191
|
document.addEventListener("mousedown", handleClick);
|
|
11094
11192
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
11095
11193
|
}, []);
|
|
11096
|
-
(0,
|
|
11194
|
+
(0, import_react57.useEffect)(() => {
|
|
11097
11195
|
if (!open || !menuRef.current || !ref.current) return;
|
|
11098
11196
|
const menu = menuRef.current;
|
|
11099
11197
|
const trigger2 = ref.current;
|
|
@@ -11122,22 +11220,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11122
11220
|
};
|
|
11123
11221
|
position();
|
|
11124
11222
|
}, [open]);
|
|
11125
|
-
return /* @__PURE__ */
|
|
11223
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11126
11224
|
"button",
|
|
11127
11225
|
{
|
|
11128
11226
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11129
11227
|
onClick: () => setOpen(!open)
|
|
11130
11228
|
},
|
|
11131
11229
|
trigger.label,
|
|
11132
|
-
/* @__PURE__ */
|
|
11230
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11133
11231
|
)), open && (0, import_react_dom14.createPortal)(
|
|
11134
|
-
/* @__PURE__ */
|
|
11232
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react57.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11135
11233
|
document.body
|
|
11136
11234
|
));
|
|
11137
11235
|
};
|
|
11138
11236
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
11139
|
-
const [activeTab, setActiveTab] = (0,
|
|
11140
|
-
const [url, setUrl] = (0,
|
|
11237
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("link");
|
|
11238
|
+
const [url, setUrl] = (0, import_react57.useState)("");
|
|
11141
11239
|
const extractIframeSrc = (html) => {
|
|
11142
11240
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
11143
11241
|
return match ? match[1] : null;
|
|
@@ -11169,14 +11267,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11169
11267
|
}
|
|
11170
11268
|
onClose();
|
|
11171
11269
|
};
|
|
11172
|
-
return /* @__PURE__ */
|
|
11270
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11173
11271
|
"button",
|
|
11174
11272
|
{
|
|
11175
11273
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11176
11274
|
onClick: () => setActiveTab("link")
|
|
11177
11275
|
},
|
|
11178
11276
|
"\u{1F517} Link"
|
|
11179
|
-
), /* @__PURE__ */
|
|
11277
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11180
11278
|
"button",
|
|
11181
11279
|
{
|
|
11182
11280
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11184,7 +11282,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11184
11282
|
},
|
|
11185
11283
|
"</>",
|
|
11186
11284
|
" Code"
|
|
11187
|
-
)), /* @__PURE__ */
|
|
11285
|
+
)), /* @__PURE__ */ import_react57.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react57.default.createElement(
|
|
11188
11286
|
"input",
|
|
11189
11287
|
{
|
|
11190
11288
|
type: "text",
|
|
@@ -11195,7 +11293,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11195
11293
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11196
11294
|
autoFocus: true
|
|
11197
11295
|
}
|
|
11198
|
-
) : /* @__PURE__ */
|
|
11296
|
+
) : /* @__PURE__ */ import_react57.default.createElement(
|
|
11199
11297
|
"textarea",
|
|
11200
11298
|
{
|
|
11201
11299
|
className: "insert-panel-textarea",
|
|
@@ -11204,13 +11302,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11204
11302
|
onChange: (e) => setUrl(e.target.value),
|
|
11205
11303
|
rows: 3
|
|
11206
11304
|
}
|
|
11207
|
-
), /* @__PURE__ */
|
|
11305
|
+
), /* @__PURE__ */ import_react57.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11208
11306
|
};
|
|
11209
11307
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11210
|
-
const [activeTab, setActiveTab] = (0,
|
|
11211
|
-
const [url, setUrl] = (0,
|
|
11212
|
-
const [isDragging, setIsDragging] = (0,
|
|
11213
|
-
const fileInputRef = (0,
|
|
11308
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("upload");
|
|
11309
|
+
const [url, setUrl] = (0, import_react57.useState)("");
|
|
11310
|
+
const [isDragging, setIsDragging] = (0, import_react57.useState)(false);
|
|
11311
|
+
const fileInputRef = (0, import_react57.useRef)(null);
|
|
11214
11312
|
const getBase64 = (file) => {
|
|
11215
11313
|
return new Promise((resolve, reject) => {
|
|
11216
11314
|
const reader = new FileReader();
|
|
@@ -11248,21 +11346,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11248
11346
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11249
11347
|
onClose();
|
|
11250
11348
|
};
|
|
11251
|
-
return /* @__PURE__ */
|
|
11349
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11252
11350
|
"button",
|
|
11253
11351
|
{
|
|
11254
11352
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11255
11353
|
onClick: () => setActiveTab("upload")
|
|
11256
11354
|
},
|
|
11257
11355
|
"\u2B06 Upload"
|
|
11258
|
-
), /* @__PURE__ */
|
|
11356
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11259
11357
|
"button",
|
|
11260
11358
|
{
|
|
11261
11359
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11262
11360
|
onClick: () => setActiveTab("url")
|
|
11263
11361
|
},
|
|
11264
11362
|
"\u{1F517} URL"
|
|
11265
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11363
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
|
|
11266
11364
|
"div",
|
|
11267
11365
|
{
|
|
11268
11366
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11274,9 +11372,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11274
11372
|
onDrop: handleDrop,
|
|
11275
11373
|
onClick: () => fileInputRef.current?.click()
|
|
11276
11374
|
},
|
|
11277
|
-
/* @__PURE__ */
|
|
11278
|
-
/* @__PURE__ */
|
|
11279
|
-
), /* @__PURE__ */
|
|
11375
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11376
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11377
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11280
11378
|
"input",
|
|
11281
11379
|
{
|
|
11282
11380
|
ref: fileInputRef,
|
|
@@ -11285,7 +11383,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11285
11383
|
style: { display: "none" },
|
|
11286
11384
|
onChange: handleFileSelect
|
|
11287
11385
|
}
|
|
11288
|
-
)) : /* @__PURE__ */
|
|
11386
|
+
)) : /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11289
11387
|
"input",
|
|
11290
11388
|
{
|
|
11291
11389
|
type: "text",
|
|
@@ -11296,18 +11394,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11296
11394
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11297
11395
|
autoFocus: true
|
|
11298
11396
|
}
|
|
11299
|
-
), /* @__PURE__ */
|
|
11397
|
+
), /* @__PURE__ */ import_react57.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11300
11398
|
};
|
|
11301
11399
|
var MAX_GRID = 10;
|
|
11302
11400
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
11303
|
-
const [hoverRow, setHoverRow] = (0,
|
|
11304
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11401
|
+
const [hoverRow, setHoverRow] = (0, import_react57.useState)(0);
|
|
11402
|
+
const [hoverCol, setHoverCol] = (0, import_react57.useState)(0);
|
|
11305
11403
|
const handleInsert = () => {
|
|
11306
11404
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
11307
11405
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11308
11406
|
onClose();
|
|
11309
11407
|
};
|
|
11310
|
-
return /* @__PURE__ */
|
|
11408
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11311
11409
|
"div",
|
|
11312
11410
|
{
|
|
11313
11411
|
className: "table-grid",
|
|
@@ -11316,7 +11414,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11316
11414
|
setHoverCol(0);
|
|
11317
11415
|
}
|
|
11318
11416
|
},
|
|
11319
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11417
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react57.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11320
11418
|
"div",
|
|
11321
11419
|
{
|
|
11322
11420
|
key: c,
|
|
@@ -11328,7 +11426,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11328
11426
|
onClick: handleInsert
|
|
11329
11427
|
}
|
|
11330
11428
|
))))
|
|
11331
|
-
), /* @__PURE__ */
|
|
11429
|
+
), /* @__PURE__ */ import_react57.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react57.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react57.default.createElement(
|
|
11332
11430
|
"button",
|
|
11333
11431
|
{
|
|
11334
11432
|
className: "table-grid-submit",
|
|
@@ -11339,9 +11437,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11339
11437
|
)));
|
|
11340
11438
|
};
|
|
11341
11439
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
11342
|
-
const [tab, setTab] = (0,
|
|
11343
|
-
const [activeBg, setActiveBg] = (0,
|
|
11344
|
-
const [activeText, setActiveText] = (0,
|
|
11440
|
+
const [tab, setTab] = (0, import_react57.useState)("background");
|
|
11441
|
+
const [activeBg, setActiveBg] = (0, import_react57.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11442
|
+
const [activeText, setActiveText] = (0, import_react57.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
11345
11443
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
11346
11444
|
const applyColor = (color) => {
|
|
11347
11445
|
if (tab === "background") {
|
|
@@ -11362,51 +11460,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11362
11460
|
}
|
|
11363
11461
|
onClose();
|
|
11364
11462
|
};
|
|
11365
|
-
return /* @__PURE__ */
|
|
11463
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11366
11464
|
"button",
|
|
11367
11465
|
{
|
|
11368
11466
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11369
11467
|
onClick: () => setTab("background")
|
|
11370
11468
|
},
|
|
11371
11469
|
"Background"
|
|
11372
|
-
), /* @__PURE__ */
|
|
11470
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
11373
11471
|
"button",
|
|
11374
11472
|
{
|
|
11375
11473
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11376
11474
|
onClick: () => setTab("text")
|
|
11377
11475
|
},
|
|
11378
11476
|
"Text"
|
|
11379
|
-
)), /* @__PURE__ */
|
|
11477
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react57.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11380
11478
|
"button",
|
|
11381
11479
|
{
|
|
11382
11480
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11383
11481
|
style: { background: color },
|
|
11384
11482
|
onClick: () => applyColor(color)
|
|
11385
11483
|
}
|
|
11386
|
-
)))), /* @__PURE__ */
|
|
11484
|
+
)))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11387
11485
|
};
|
|
11388
11486
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11389
|
-
const [, setEditorState] = (0,
|
|
11390
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
11391
|
-
const ttsRef = (0,
|
|
11392
|
-
const sttRef = (0,
|
|
11487
|
+
const [, setEditorState] = (0, import_react57.useState)(0);
|
|
11488
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react57.useState)(false);
|
|
11489
|
+
const ttsRef = (0, import_react57.useRef)(null);
|
|
11490
|
+
const sttRef = (0, import_react57.useRef)(null);
|
|
11393
11491
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
11394
|
-
(0,
|
|
11492
|
+
(0, import_react57.useEffect)(() => {
|
|
11395
11493
|
if (!editor) return;
|
|
11396
11494
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
11397
11495
|
editor.on("transaction", onTransaction);
|
|
11398
11496
|
return () => editor.off("transaction", onTransaction);
|
|
11399
11497
|
}, [editor]);
|
|
11400
|
-
const insertSpecialChar = (0,
|
|
11498
|
+
const insertSpecialChar = (0, import_react57.useCallback)((char) => {
|
|
11401
11499
|
if (!editor) return;
|
|
11402
11500
|
editor.chain().focus().insertContent(char).run();
|
|
11403
11501
|
}, [editor]);
|
|
11404
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
11405
|
-
const [translateSource, setTranslateSource] = (0,
|
|
11406
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
11407
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
11408
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
11409
|
-
const handleCopy = (0,
|
|
11502
|
+
const [copySuccess, setCopySuccess] = (0, import_react57.useState)(false);
|
|
11503
|
+
const [translateSource, setTranslateSource] = (0, import_react57.useState)("en");
|
|
11504
|
+
const [translateTarget, setTranslateTarget] = (0, import_react57.useState)("hi");
|
|
11505
|
+
const [translateStatus, setTranslateStatus] = (0, import_react57.useState)("");
|
|
11506
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react57.useState)(false);
|
|
11507
|
+
const handleCopy = (0, import_react57.useCallback)(async () => {
|
|
11410
11508
|
if (!editor) return;
|
|
11411
11509
|
const { from, to, empty } = editor.state.selection;
|
|
11412
11510
|
if (empty) return;
|
|
@@ -11421,7 +11519,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11421
11519
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11422
11520
|
}
|
|
11423
11521
|
}, [editor]);
|
|
11424
|
-
const handlePaste = (0,
|
|
11522
|
+
const handlePaste = (0, import_react57.useCallback)(async () => {
|
|
11425
11523
|
if (!editor) return;
|
|
11426
11524
|
try {
|
|
11427
11525
|
const text = await navigator.clipboard.readText();
|
|
@@ -11430,7 +11528,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11430
11528
|
document.execCommand("paste");
|
|
11431
11529
|
}
|
|
11432
11530
|
}, [editor]);
|
|
11433
|
-
const handleQuickTranslate = (0,
|
|
11531
|
+
const handleQuickTranslate = (0, import_react57.useCallback)(async () => {
|
|
11434
11532
|
if (!editor) return;
|
|
11435
11533
|
const { from, to, empty } = editor.state.selection;
|
|
11436
11534
|
if (empty) {
|
|
@@ -11464,32 +11562,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11464
11562
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11465
11563
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11466
11564
|
if (!editor) return null;
|
|
11467
|
-
return /* @__PURE__ */
|
|
11565
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11468
11566
|
"button",
|
|
11469
11567
|
{
|
|
11470
11568
|
className: "toolbar-btn",
|
|
11471
11569
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11472
11570
|
disabled: !editor.can().undo()
|
|
11473
11571
|
},
|
|
11474
|
-
/* @__PURE__ */
|
|
11475
|
-
)), show("redo") && /* @__PURE__ */
|
|
11572
|
+
/* @__PURE__ */ import_react57.default.createElement(IconUndo, null)
|
|
11573
|
+
)), show("redo") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11476
11574
|
"button",
|
|
11477
11575
|
{
|
|
11478
11576
|
className: "toolbar-btn",
|
|
11479
11577
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11480
11578
|
disabled: !editor.can().redo()
|
|
11481
11579
|
},
|
|
11482
|
-
/* @__PURE__ */
|
|
11483
|
-
))), show("ai") && /* @__PURE__ */
|
|
11580
|
+
/* @__PURE__ */ import_react57.default.createElement(IconRedo, null)
|
|
11581
|
+
))), show("ai") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react57.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11484
11582
|
Dropdown,
|
|
11485
11583
|
{
|
|
11486
11584
|
trigger: {
|
|
11487
|
-
label: /* @__PURE__ */
|
|
11585
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconHeading, null),
|
|
11488
11586
|
title: "Block type",
|
|
11489
11587
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11490
11588
|
}
|
|
11491
11589
|
},
|
|
11492
|
-
/* @__PURE__ */
|
|
11590
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11493
11591
|
"button",
|
|
11494
11592
|
{
|
|
11495
11593
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11497,7 +11595,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11497
11595
|
},
|
|
11498
11596
|
"\xB6 Paragraph"
|
|
11499
11597
|
),
|
|
11500
|
-
/* @__PURE__ */
|
|
11598
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11501
11599
|
"button",
|
|
11502
11600
|
{
|
|
11503
11601
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11505,7 +11603,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11505
11603
|
},
|
|
11506
11604
|
"Heading 1"
|
|
11507
11605
|
),
|
|
11508
|
-
/* @__PURE__ */
|
|
11606
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11509
11607
|
"button",
|
|
11510
11608
|
{
|
|
11511
11609
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11513,7 +11611,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11513
11611
|
},
|
|
11514
11612
|
"Heading 2"
|
|
11515
11613
|
),
|
|
11516
|
-
/* @__PURE__ */
|
|
11614
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11517
11615
|
"button",
|
|
11518
11616
|
{
|
|
11519
11617
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11521,7 +11619,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11521
11619
|
},
|
|
11522
11620
|
"Heading 3"
|
|
11523
11621
|
),
|
|
11524
|
-
/* @__PURE__ */
|
|
11622
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11525
11623
|
"button",
|
|
11526
11624
|
{
|
|
11527
11625
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11529,7 +11627,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11529
11627
|
},
|
|
11530
11628
|
"Heading 4"
|
|
11531
11629
|
),
|
|
11532
|
-
/* @__PURE__ */
|
|
11630
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11533
11631
|
"button",
|
|
11534
11632
|
{
|
|
11535
11633
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11537,7 +11635,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11537
11635
|
},
|
|
11538
11636
|
"\u275E Blockquote"
|
|
11539
11637
|
),
|
|
11540
|
-
/* @__PURE__ */
|
|
11638
|
+
/* @__PURE__ */ import_react57.default.createElement(
|
|
11541
11639
|
"button",
|
|
11542
11640
|
{
|
|
11543
11641
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11546,19 +11644,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11546
11644
|
"{ }",
|
|
11547
11645
|
" Code Block"
|
|
11548
11646
|
),
|
|
11549
|
-
/* @__PURE__ */
|
|
11550
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11647
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11648
|
+
), show("fontsize") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11551
11649
|
Dropdown,
|
|
11552
11650
|
{
|
|
11553
11651
|
trigger: {
|
|
11554
|
-
label: /* @__PURE__ */
|
|
11652
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconFontSize, null),
|
|
11555
11653
|
title: "Font size"
|
|
11556
11654
|
}
|
|
11557
11655
|
},
|
|
11558
11656
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11559
11657
|
const sizeStr = `${size}px`;
|
|
11560
11658
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11561
|
-
return /* @__PURE__ */
|
|
11659
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11562
11660
|
"button",
|
|
11563
11661
|
{
|
|
11564
11662
|
key: size,
|
|
@@ -11574,17 +11672,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11574
11672
|
sizeStr
|
|
11575
11673
|
);
|
|
11576
11674
|
})
|
|
11577
|
-
), show("font") && /* @__PURE__ */
|
|
11675
|
+
), show("font") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11578
11676
|
Dropdown,
|
|
11579
11677
|
{
|
|
11580
11678
|
trigger: {
|
|
11581
|
-
label: /* @__PURE__ */
|
|
11679
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconFont, null),
|
|
11582
11680
|
title: "Font family"
|
|
11583
11681
|
}
|
|
11584
11682
|
},
|
|
11585
11683
|
FONT_FAMILIES.map((font) => {
|
|
11586
11684
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11587
|
-
return /* @__PURE__ */
|
|
11685
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11588
11686
|
"button",
|
|
11589
11687
|
{
|
|
11590
11688
|
key: font,
|
|
@@ -11601,40 +11699,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11601
11699
|
font
|
|
11602
11700
|
);
|
|
11603
11701
|
})
|
|
11604
|
-
), show("color") && /* @__PURE__ */
|
|
11702
|
+
), show("color") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11605
11703
|
Dropdown,
|
|
11606
11704
|
{
|
|
11607
11705
|
trigger: {
|
|
11608
|
-
label: /* @__PURE__ */
|
|
11706
|
+
label: /* @__PURE__ */ import_react57.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react57.default.createElement(IconColor, null)),
|
|
11609
11707
|
title: "Colors"
|
|
11610
11708
|
},
|
|
11611
11709
|
keepOpen: true
|
|
11612
11710
|
},
|
|
11613
|
-
(close) => /* @__PURE__ */
|
|
11614
|
-
), show("bold") && /* @__PURE__ */
|
|
11711
|
+
(close) => /* @__PURE__ */ import_react57.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11712
|
+
), show("bold") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11615
11713
|
"button",
|
|
11616
11714
|
{
|
|
11617
11715
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11618
11716
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11619
11717
|
},
|
|
11620
|
-
/* @__PURE__ */
|
|
11621
|
-
)), show("italic") && /* @__PURE__ */
|
|
11718
|
+
/* @__PURE__ */ import_react57.default.createElement(IconBold, null)
|
|
11719
|
+
)), show("italic") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11622
11720
|
"button",
|
|
11623
11721
|
{
|
|
11624
11722
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11625
11723
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11626
11724
|
},
|
|
11627
|
-
/* @__PURE__ */
|
|
11628
|
-
)), show("strike") && /* @__PURE__ */
|
|
11725
|
+
/* @__PURE__ */ import_react57.default.createElement(IconItalic, null)
|
|
11726
|
+
)), show("strike") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11629
11727
|
Dropdown,
|
|
11630
11728
|
{
|
|
11631
|
-
trigger: { label: /* @__PURE__ */
|
|
11729
|
+
trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11632
11730
|
},
|
|
11633
|
-
/* @__PURE__ */
|
|
11634
|
-
/* @__PURE__ */
|
|
11635
|
-
/* @__PURE__ */
|
|
11636
|
-
/* @__PURE__ */
|
|
11637
|
-
/* @__PURE__ */
|
|
11731
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react57.default.createElement("s", null, "Strikethrough")),
|
|
11732
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react57.default.createElement("u", null, "Underline")),
|
|
11733
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react57.default.createElement("sup", null, "2"), " Superscript"),
|
|
11734
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react57.default.createElement("sub", null, "2"), " Subscript"),
|
|
11735
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11638
11736
|
e.preventDefault();
|
|
11639
11737
|
const chain = editor.chain().focus();
|
|
11640
11738
|
if (!editor.state.selection.empty) {
|
|
@@ -11650,25 +11748,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11650
11748
|
c.run();
|
|
11651
11749
|
}
|
|
11652
11750
|
} }, "\u2715 Clear formatting")
|
|
11653
|
-
), show("link") && /* @__PURE__ */
|
|
11751
|
+
), show("link") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11654
11752
|
"button",
|
|
11655
11753
|
{
|
|
11656
11754
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11657
11755
|
onClick: setLink
|
|
11658
11756
|
},
|
|
11659
|
-
/* @__PURE__ */
|
|
11660
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11757
|
+
/* @__PURE__ */ import_react57.default.createElement(IconLink, null)
|
|
11758
|
+
)), show("lineheight") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11661
11759
|
Dropdown,
|
|
11662
11760
|
{
|
|
11663
11761
|
trigger: {
|
|
11664
|
-
label: /* @__PURE__ */
|
|
11762
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconLineHeight, null),
|
|
11665
11763
|
title: "Line height"
|
|
11666
11764
|
}
|
|
11667
11765
|
},
|
|
11668
11766
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11669
11767
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11670
11768
|
const isActive = currentLH === lh;
|
|
11671
|
-
return /* @__PURE__ */
|
|
11769
|
+
return /* @__PURE__ */ import_react57.default.createElement(
|
|
11672
11770
|
"button",
|
|
11673
11771
|
{
|
|
11674
11772
|
key: lh,
|
|
@@ -11684,19 +11782,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11684
11782
|
lh
|
|
11685
11783
|
);
|
|
11686
11784
|
})
|
|
11687
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11785
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11688
11786
|
"button",
|
|
11689
11787
|
{
|
|
11690
11788
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11691
11789
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11692
11790
|
},
|
|
11693
|
-
/* @__PURE__ */
|
|
11694
|
-
)), /* @__PURE__ */
|
|
11791
|
+
/* @__PURE__ */ import_react57.default.createElement(IconBulletList, null)
|
|
11792
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11695
11793
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11696
11794
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11697
11795
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11698
11796
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11699
|
-
].map((item) => /* @__PURE__ */
|
|
11797
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11700
11798
|
"button",
|
|
11701
11799
|
{
|
|
11702
11800
|
key: item.label,
|
|
@@ -11721,24 +11819,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11721
11819
|
}).run();
|
|
11722
11820
|
}
|
|
11723
11821
|
},
|
|
11724
|
-
/* @__PURE__ */
|
|
11822
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11725
11823
|
" ",
|
|
11726
11824
|
item.label
|
|
11727
|
-
)))), show("ol") && /* @__PURE__ */
|
|
11825
|
+
)))), show("ol") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11728
11826
|
"button",
|
|
11729
11827
|
{
|
|
11730
11828
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11731
11829
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11732
11830
|
},
|
|
11733
|
-
/* @__PURE__ */
|
|
11734
|
-
)), /* @__PURE__ */
|
|
11831
|
+
/* @__PURE__ */ import_react57.default.createElement(IconOrderedList, null)
|
|
11832
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11735
11833
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11736
11834
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11737
11835
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11738
11836
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11739
11837
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11740
11838
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11741
|
-
].map((item) => /* @__PURE__ */
|
|
11839
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11742
11840
|
"button",
|
|
11743
11841
|
{
|
|
11744
11842
|
key: item.label,
|
|
@@ -11763,24 +11861,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11763
11861
|
}).run();
|
|
11764
11862
|
}
|
|
11765
11863
|
},
|
|
11766
|
-
/* @__PURE__ */
|
|
11864
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11767
11865
|
" ",
|
|
11768
11866
|
item.label
|
|
11769
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
11867
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11770
11868
|
Dropdown,
|
|
11771
11869
|
{
|
|
11772
11870
|
trigger: {
|
|
11773
|
-
label: /* @__PURE__ */
|
|
11871
|
+
label: /* @__PURE__ */ import_react57.default.createElement(IconAlignLeft, null),
|
|
11774
11872
|
title: "Align",
|
|
11775
11873
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11776
11874
|
}
|
|
11777
11875
|
},
|
|
11778
11876
|
[
|
|
11779
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11780
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11781
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11782
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11783
|
-
].map((item) => /* @__PURE__ */
|
|
11877
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignLeft, null) },
|
|
11878
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignCenter, null) },
|
|
11879
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignRight, null) },
|
|
11880
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react57.default.createElement(IconAlignJustify, null) }
|
|
11881
|
+
].map((item) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11784
11882
|
"button",
|
|
11785
11883
|
{
|
|
11786
11884
|
key: item.value,
|
|
@@ -11791,7 +11889,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11791
11889
|
" ",
|
|
11792
11890
|
item.label
|
|
11793
11891
|
))
|
|
11794
|
-
), show("indent") && /* @__PURE__ */
|
|
11892
|
+
), show("indent") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11795
11893
|
"button",
|
|
11796
11894
|
{
|
|
11797
11895
|
className: "toolbar-btn",
|
|
@@ -11810,8 +11908,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11810
11908
|
}).run();
|
|
11811
11909
|
}
|
|
11812
11910
|
},
|
|
11813
|
-
/* @__PURE__ */
|
|
11814
|
-
)), show("outdent") && /* @__PURE__ */
|
|
11911
|
+
/* @__PURE__ */ import_react57.default.createElement(IconIndentIncrease, null)
|
|
11912
|
+
)), show("outdent") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11815
11913
|
"button",
|
|
11816
11914
|
{
|
|
11817
11915
|
className: "toolbar-btn",
|
|
@@ -11830,29 +11928,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11830
11928
|
}).run();
|
|
11831
11929
|
}
|
|
11832
11930
|
},
|
|
11833
|
-
/* @__PURE__ */
|
|
11834
|
-
))), show("table") && /* @__PURE__ */
|
|
11931
|
+
/* @__PURE__ */ import_react57.default.createElement(IconIndentDecrease, null)
|
|
11932
|
+
))), show("table") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react57.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11835
11933
|
"button",
|
|
11836
11934
|
{
|
|
11837
11935
|
className: "toolbar-btn",
|
|
11838
11936
|
onClick: () => document.execCommand("cut")
|
|
11839
11937
|
},
|
|
11840
|
-
/* @__PURE__ */
|
|
11841
|
-
)), show("copy") && /* @__PURE__ */
|
|
11938
|
+
/* @__PURE__ */ import_react57.default.createElement(IconCut, null)
|
|
11939
|
+
)), show("copy") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11842
11940
|
"button",
|
|
11843
11941
|
{
|
|
11844
11942
|
className: "toolbar-btn",
|
|
11845
11943
|
onClick: handleCopy
|
|
11846
11944
|
},
|
|
11847
|
-
copySuccess ? /* @__PURE__ */
|
|
11848
|
-
)), show("paste") && /* @__PURE__ */
|
|
11945
|
+
copySuccess ? /* @__PURE__ */ import_react57.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react57.default.createElement(IconCopy, null)
|
|
11946
|
+
)), show("paste") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11849
11947
|
"button",
|
|
11850
11948
|
{
|
|
11851
11949
|
className: "toolbar-btn",
|
|
11852
11950
|
onClick: handlePaste
|
|
11853
11951
|
},
|
|
11854
|
-
/* @__PURE__ */
|
|
11855
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
11952
|
+
/* @__PURE__ */ import_react57.default.createElement(IconPaste, null)
|
|
11953
|
+
)), show("specialchars") && /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react57.default.createElement(
|
|
11856
11954
|
"button",
|
|
11857
11955
|
{
|
|
11858
11956
|
key: char,
|
|
@@ -11860,12 +11958,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11860
11958
|
onClick: () => insertSpecialChar(char)
|
|
11861
11959
|
},
|
|
11862
11960
|
char
|
|
11863
|
-
)))), show("code") && /* @__PURE__ */
|
|
11961
|
+
)))), show("code") && /* @__PURE__ */ import_react57.default.createElement(
|
|
11864
11962
|
Dropdown,
|
|
11865
11963
|
{
|
|
11866
|
-
trigger: { label: /* @__PURE__ */
|
|
11964
|
+
trigger: { label: /* @__PURE__ */ import_react57.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11867
11965
|
},
|
|
11868
|
-
/* @__PURE__ */
|
|
11966
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11869
11967
|
if (editor.isActive("codeBlock")) {
|
|
11870
11968
|
const text = (() => {
|
|
11871
11969
|
const { $from } = editor.state.selection;
|
|
@@ -11883,22 +11981,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11883
11981
|
editor.chain().focus().toggleCode().run();
|
|
11884
11982
|
}
|
|
11885
11983
|
} }, "</>", " Inline Code"),
|
|
11886
|
-
/* @__PURE__ */
|
|
11887
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
11984
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
11985
|
+
), show("fullscreen") && /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11888
11986
|
"button",
|
|
11889
11987
|
{
|
|
11890
11988
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11891
11989
|
onClick: onToggleFullscreen
|
|
11892
11990
|
},
|
|
11893
|
-
/* @__PURE__ */
|
|
11894
|
-
)), show("tts") && /* @__PURE__ */
|
|
11991
|
+
/* @__PURE__ */ import_react57.default.createElement(IconFullscreen, null)
|
|
11992
|
+
)), show("tts") && /* @__PURE__ */ import_react57.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react57.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11895
11993
|
"button",
|
|
11896
11994
|
{
|
|
11897
11995
|
className: "toolbar-btn",
|
|
11898
11996
|
onClick: handleQuickTranslate
|
|
11899
11997
|
},
|
|
11900
|
-
/* @__PURE__ */
|
|
11901
|
-
)), /* @__PURE__ */
|
|
11998
|
+
/* @__PURE__ */ import_react57.default.createElement(IconTranslate, null)
|
|
11999
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react57.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react57.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11902
12000
|
"button",
|
|
11903
12001
|
{
|
|
11904
12002
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11941,11 +12039,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11941
12039
|
}
|
|
11942
12040
|
}
|
|
11943
12041
|
},
|
|
11944
|
-
/* @__PURE__ */
|
|
11945
|
-
)), /* @__PURE__ */
|
|
12042
|
+
/* @__PURE__ */ import_react57.default.createElement(IconTaskList, null)
|
|
12043
|
+
)), /* @__PURE__ */ import_react57.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11946
12044
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
11947
12045
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11948
|
-
return /* @__PURE__ */
|
|
12046
|
+
return /* @__PURE__ */ import_react57.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11949
12047
|
const { state } = editor;
|
|
11950
12048
|
const { schema } = state;
|
|
11951
12049
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -11978,8 +12076,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11978
12076
|
}
|
|
11979
12077
|
return true;
|
|
11980
12078
|
}).run();
|
|
11981
|
-
} }, /* @__PURE__ */
|
|
11982
|
-
})))), onClose && /* @__PURE__ */
|
|
12079
|
+
} }, /* @__PURE__ */ import_react57.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react57.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12080
|
+
})))), onClose && /* @__PURE__ */ import_react57.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
11983
12081
|
"button",
|
|
11984
12082
|
{
|
|
11985
12083
|
className: "toolbar-btn btn-cross",
|
|
@@ -11995,8 +12093,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11995
12093
|
onClose();
|
|
11996
12094
|
}
|
|
11997
12095
|
},
|
|
11998
|
-
/* @__PURE__ */
|
|
11999
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12096
|
+
/* @__PURE__ */ import_react57.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12097
|
+
))), showTranslateModal && /* @__PURE__ */ import_react57.default.createElement(
|
|
12000
12098
|
TranslateModal_default,
|
|
12001
12099
|
{
|
|
12002
12100
|
editor,
|
|
@@ -12014,7 +12112,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12014
12112
|
var Toolbar_default = Toolbar;
|
|
12015
12113
|
|
|
12016
12114
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12017
|
-
var
|
|
12115
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
12018
12116
|
var import_react_dom15 = require("react-dom");
|
|
12019
12117
|
var ALIGNMENTS = [
|
|
12020
12118
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12022,18 +12120,18 @@ var ALIGNMENTS = [
|
|
|
12022
12120
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
12023
12121
|
];
|
|
12024
12122
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
12025
|
-
const [activeTab, setActiveTab] = (0,
|
|
12026
|
-
const [src, setSrc] = (0,
|
|
12027
|
-
const [title, setTitle] = (0,
|
|
12028
|
-
const [alt, setAlt] = (0,
|
|
12029
|
-
const [link, setLink] = (0,
|
|
12030
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
12031
|
-
const [width, setWidth] = (0,
|
|
12032
|
-
const [height, setHeight] = (0,
|
|
12033
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12034
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
12035
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
12036
|
-
(0,
|
|
12123
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("image");
|
|
12124
|
+
const [src, setSrc] = (0, import_react58.useState)(node?.attrs?.src || "");
|
|
12125
|
+
const [title, setTitle] = (0, import_react58.useState)(node?.attrs?.title || "");
|
|
12126
|
+
const [alt, setAlt] = (0, import_react58.useState)(node?.attrs?.alt || "");
|
|
12127
|
+
const [link, setLink] = (0, import_react58.useState)("");
|
|
12128
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react58.useState)(false);
|
|
12129
|
+
const [width, setWidth] = (0, import_react58.useState)("");
|
|
12130
|
+
const [height, setHeight] = (0, import_react58.useState)("");
|
|
12131
|
+
const [lockRatio, setLockRatio] = (0, import_react58.useState)(true);
|
|
12132
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react58.useState)(0);
|
|
12133
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react58.useState)(0);
|
|
12134
|
+
(0, import_react58.useEffect)(() => {
|
|
12037
12135
|
if (src) {
|
|
12038
12136
|
const img = new window.Image();
|
|
12039
12137
|
img.onload = () => {
|
|
@@ -12072,7 +12170,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12072
12170
|
editor.chain().focus().deleteSelection().run();
|
|
12073
12171
|
onClose();
|
|
12074
12172
|
};
|
|
12075
|
-
return /* @__PURE__ */
|
|
12173
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react58.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react58.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12076
12174
|
"input",
|
|
12077
12175
|
{
|
|
12078
12176
|
type: "number",
|
|
@@ -12080,14 +12178,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12080
12178
|
value: width,
|
|
12081
12179
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12082
12180
|
}
|
|
12083
|
-
), /* @__PURE__ */
|
|
12181
|
+
), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12084
12182
|
"button",
|
|
12085
12183
|
{
|
|
12086
12184
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12087
12185
|
onClick: () => setLockRatio(!lockRatio)
|
|
12088
12186
|
},
|
|
12089
12187
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12090
|
-
)), /* @__PURE__ */
|
|
12188
|
+
)), /* @__PURE__ */ import_react58.default.createElement(
|
|
12091
12189
|
"input",
|
|
12092
12190
|
{
|
|
12093
12191
|
type: "number",
|
|
@@ -12095,21 +12193,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12095
12193
|
value: height,
|
|
12096
12194
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12097
12195
|
}
|
|
12098
|
-
))), /* @__PURE__ */
|
|
12196
|
+
))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12099
12197
|
"button",
|
|
12100
12198
|
{
|
|
12101
12199
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12102
12200
|
onClick: () => setActiveTab("image")
|
|
12103
12201
|
},
|
|
12104
12202
|
"Image"
|
|
12105
|
-
), /* @__PURE__ */
|
|
12203
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
12106
12204
|
"button",
|
|
12107
12205
|
{
|
|
12108
12206
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12109
12207
|
onClick: () => setActiveTab("advanced")
|
|
12110
12208
|
},
|
|
12111
12209
|
"Advanced"
|
|
12112
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12210
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react58.default.createElement(
|
|
12113
12211
|
"input",
|
|
12114
12212
|
{
|
|
12115
12213
|
type: "text",
|
|
@@ -12117,7 +12215,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12117
12215
|
value: src,
|
|
12118
12216
|
onChange: (e) => setSrc(e.target.value)
|
|
12119
12217
|
}
|
|
12120
|
-
), /* @__PURE__ */
|
|
12218
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react58.default.createElement(
|
|
12121
12219
|
"input",
|
|
12122
12220
|
{
|
|
12123
12221
|
type: "text",
|
|
@@ -12125,7 +12223,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12125
12223
|
value: title,
|
|
12126
12224
|
onChange: (e) => setTitle(e.target.value)
|
|
12127
12225
|
}
|
|
12128
|
-
), /* @__PURE__ */
|
|
12226
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react58.default.createElement(
|
|
12129
12227
|
"input",
|
|
12130
12228
|
{
|
|
12131
12229
|
type: "text",
|
|
@@ -12133,7 +12231,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12133
12231
|
value: alt,
|
|
12134
12232
|
onChange: (e) => setAlt(e.target.value)
|
|
12135
12233
|
}
|
|
12136
|
-
), /* @__PURE__ */
|
|
12234
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react58.default.createElement(
|
|
12137
12235
|
"input",
|
|
12138
12236
|
{
|
|
12139
12237
|
type: "text",
|
|
@@ -12141,23 +12239,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12141
12239
|
value: link,
|
|
12142
12240
|
onChange: (e) => setLink(e.target.value)
|
|
12143
12241
|
}
|
|
12144
|
-
), /* @__PURE__ */
|
|
12242
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12145
12243
|
"input",
|
|
12146
12244
|
{
|
|
12147
12245
|
type: "checkbox",
|
|
12148
12246
|
checked: openInNewTab,
|
|
12149
12247
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12150
12248
|
}
|
|
12151
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12249
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react58.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react58.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12152
12250
|
};
|
|
12153
12251
|
var ImageToolbar = ({ editor }) => {
|
|
12154
|
-
const [showModal, setShowModal] = (0,
|
|
12155
|
-
const [showAlign, setShowAlign] = (0,
|
|
12156
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
12157
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12158
|
-
const [pos, setPos] = (0,
|
|
12159
|
-
const toolbarRef = (0,
|
|
12160
|
-
(0,
|
|
12252
|
+
const [showModal, setShowModal] = (0, import_react58.useState)(false);
|
|
12253
|
+
const [showAlign, setShowAlign] = (0, import_react58.useState)(false);
|
|
12254
|
+
const [showVAlign, setShowVAlign] = (0, import_react58.useState)(false);
|
|
12255
|
+
const [copyStatus, setCopyStatus] = (0, import_react58.useState)("");
|
|
12256
|
+
const [pos, setPos] = (0, import_react58.useState)(null);
|
|
12257
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
12258
|
+
(0, import_react58.useEffect)(() => {
|
|
12161
12259
|
if (!editor) return;
|
|
12162
12260
|
const update = () => {
|
|
12163
12261
|
const { selection } = editor.state;
|
|
@@ -12187,7 +12285,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12187
12285
|
const node = editor?.state.selection.node;
|
|
12188
12286
|
const isImage = node && node.type.name === "image";
|
|
12189
12287
|
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12190
|
-
/* @__PURE__ */
|
|
12288
|
+
/* @__PURE__ */ import_react58.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12191
12289
|
document.body
|
|
12192
12290
|
) : null;
|
|
12193
12291
|
const handleDelete = () => {
|
|
@@ -12264,7 +12362,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12264
12362
|
setShowVAlign(false);
|
|
12265
12363
|
};
|
|
12266
12364
|
return (0, import_react_dom15.createPortal)(
|
|
12267
|
-
/* @__PURE__ */
|
|
12365
|
+
/* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
12268
12366
|
"div",
|
|
12269
12367
|
{
|
|
12270
12368
|
className: "image-toolbar",
|
|
@@ -12272,14 +12370,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12272
12370
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12273
12371
|
onMouseDown: (e) => e.preventDefault()
|
|
12274
12372
|
},
|
|
12275
|
-
/* @__PURE__ */
|
|
12276
|
-
/* @__PURE__ */
|
|
12277
|
-
/* @__PURE__ */
|
|
12278
|
-
/* @__PURE__ */
|
|
12373
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12374
|
+
/* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12375
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12376
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12279
12377
|
setShowAlign(!showAlign);
|
|
12280
12378
|
setShowVAlign(false);
|
|
12281
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12282
|
-
), showModal && /* @__PURE__ */
|
|
12379
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react58.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12380
|
+
), showModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
12283
12381
|
ImagePropertiesModal,
|
|
12284
12382
|
{
|
|
12285
12383
|
editor,
|
|
@@ -12293,7 +12391,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12293
12391
|
var ImageToolbar_default = ImageToolbar;
|
|
12294
12392
|
|
|
12295
12393
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12296
|
-
var
|
|
12394
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12297
12395
|
var import_react_dom16 = require("react-dom");
|
|
12298
12396
|
var ALIGNMENTS2 = [
|
|
12299
12397
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12302,10 +12400,10 @@ var ALIGNMENTS2 = [
|
|
|
12302
12400
|
];
|
|
12303
12401
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
12304
12402
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
12305
|
-
const [src, setSrc] = (0,
|
|
12306
|
-
const [width, setWidth] = (0,
|
|
12307
|
-
const [height, setHeight] = (0,
|
|
12308
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12403
|
+
const [src, setSrc] = (0, import_react59.useState)(node?.attrs?.src || "");
|
|
12404
|
+
const [width, setWidth] = (0, import_react59.useState)(String(node?.attrs?.width || 640));
|
|
12405
|
+
const [height, setHeight] = (0, import_react59.useState)(String(node?.attrs?.height || 360));
|
|
12406
|
+
const [lockRatio, setLockRatio] = (0, import_react59.useState)(true);
|
|
12309
12407
|
const handleWidthChange = (val) => {
|
|
12310
12408
|
setWidth(val);
|
|
12311
12409
|
if (lockRatio) {
|
|
@@ -12338,7 +12436,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12338
12436
|
onClose();
|
|
12339
12437
|
};
|
|
12340
12438
|
const isYoutube = nodeType === "youtube";
|
|
12341
|
-
return /* @__PURE__ */
|
|
12439
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react59.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react59.default.createElement(
|
|
12342
12440
|
"iframe",
|
|
12343
12441
|
{
|
|
12344
12442
|
src,
|
|
@@ -12346,14 +12444,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12346
12444
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12347
12445
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12348
12446
|
}
|
|
12349
|
-
) : /* @__PURE__ */
|
|
12447
|
+
) : /* @__PURE__ */ import_react59.default.createElement(
|
|
12350
12448
|
"video",
|
|
12351
12449
|
{
|
|
12352
12450
|
src,
|
|
12353
12451
|
controls: true,
|
|
12354
12452
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12355
12453
|
}
|
|
12356
|
-
)), /* @__PURE__ */
|
|
12454
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12357
12455
|
"input",
|
|
12358
12456
|
{
|
|
12359
12457
|
type: "number",
|
|
@@ -12361,14 +12459,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12361
12459
|
value: width,
|
|
12362
12460
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12363
12461
|
}
|
|
12364
|
-
), /* @__PURE__ */
|
|
12462
|
+
), /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12365
12463
|
"button",
|
|
12366
12464
|
{
|
|
12367
12465
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12368
12466
|
onClick: () => setLockRatio(!lockRatio)
|
|
12369
12467
|
},
|
|
12370
12468
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12371
|
-
)), /* @__PURE__ */
|
|
12469
|
+
)), /* @__PURE__ */ import_react59.default.createElement(
|
|
12372
12470
|
"input",
|
|
12373
12471
|
{
|
|
12374
12472
|
type: "number",
|
|
@@ -12376,7 +12474,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12376
12474
|
value: height,
|
|
12377
12475
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12378
12476
|
}
|
|
12379
|
-
))), /* @__PURE__ */
|
|
12477
|
+
))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12380
12478
|
"input",
|
|
12381
12479
|
{
|
|
12382
12480
|
type: "text",
|
|
@@ -12384,7 +12482,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12384
12482
|
value: src,
|
|
12385
12483
|
onChange: (e) => setSrc(e.target.value)
|
|
12386
12484
|
}
|
|
12387
|
-
), /* @__PURE__ */
|
|
12485
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12388
12486
|
"input",
|
|
12389
12487
|
{
|
|
12390
12488
|
type: "number",
|
|
@@ -12392,7 +12490,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12392
12490
|
value: width,
|
|
12393
12491
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12394
12492
|
}
|
|
12395
|
-
), /* @__PURE__ */
|
|
12493
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12396
12494
|
"input",
|
|
12397
12495
|
{
|
|
12398
12496
|
type: "number",
|
|
@@ -12400,16 +12498,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12400
12498
|
value: height,
|
|
12401
12499
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12402
12500
|
}
|
|
12403
|
-
)))), /* @__PURE__ */
|
|
12501
|
+
)))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12404
12502
|
};
|
|
12405
12503
|
var VideoToolbar = ({ editor }) => {
|
|
12406
|
-
const [showModal, setShowModal] = (0,
|
|
12407
|
-
const [showSize, setShowSize] = (0,
|
|
12408
|
-
const [showAlign, setShowAlign] = (0,
|
|
12409
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12410
|
-
const [pos, setPos] = (0,
|
|
12411
|
-
const toolbarRef = (0,
|
|
12412
|
-
(0,
|
|
12504
|
+
const [showModal, setShowModal] = (0, import_react59.useState)(false);
|
|
12505
|
+
const [showSize, setShowSize] = (0, import_react59.useState)(false);
|
|
12506
|
+
const [showAlign, setShowAlign] = (0, import_react59.useState)(false);
|
|
12507
|
+
const [copyStatus, setCopyStatus] = (0, import_react59.useState)("");
|
|
12508
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12509
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12510
|
+
(0, import_react59.useEffect)(() => {
|
|
12413
12511
|
if (!editor) return;
|
|
12414
12512
|
const update = () => {
|
|
12415
12513
|
const { selection } = editor.state;
|
|
@@ -12440,7 +12538,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12440
12538
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12441
12539
|
const nodeType = node?.type.name;
|
|
12442
12540
|
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12443
|
-
/* @__PURE__ */
|
|
12541
|
+
/* @__PURE__ */ import_react59.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12444
12542
|
document.body
|
|
12445
12543
|
) : null;
|
|
12446
12544
|
const handleDelete = () => {
|
|
@@ -12487,7 +12585,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12487
12585
|
);
|
|
12488
12586
|
};
|
|
12489
12587
|
return (0, import_react_dom16.createPortal)(
|
|
12490
|
-
/* @__PURE__ */
|
|
12588
|
+
/* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
|
|
12491
12589
|
"div",
|
|
12492
12590
|
{
|
|
12493
12591
|
className: "image-toolbar",
|
|
@@ -12495,30 +12593,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12495
12593
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12496
12594
|
onMouseDown: (e) => e.preventDefault()
|
|
12497
12595
|
},
|
|
12498
|
-
/* @__PURE__ */
|
|
12499
|
-
/* @__PURE__ */
|
|
12500
|
-
/* @__PURE__ */
|
|
12501
|
-
/* @__PURE__ */
|
|
12596
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12597
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12598
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12599
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12502
12600
|
setShowSize(!showSize);
|
|
12503
12601
|
setShowAlign(false);
|
|
12504
|
-
} }, /* @__PURE__ */
|
|
12602
|
+
} }, /* @__PURE__ */ import_react59.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12505
12603
|
handleResize("small");
|
|
12506
12604
|
setShowSize(false);
|
|
12507
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12605
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12508
12606
|
handleResize("medium");
|
|
12509
12607
|
setShowSize(false);
|
|
12510
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12608
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12511
12609
|
handleResize("large");
|
|
12512
12610
|
setShowSize(false);
|
|
12513
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12611
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12514
12612
|
handleResize("full");
|
|
12515
12613
|
setShowSize(false);
|
|
12516
12614
|
} }, "Full (854x480)"))),
|
|
12517
|
-
/* @__PURE__ */
|
|
12615
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12518
12616
|
setShowAlign(!showAlign);
|
|
12519
12617
|
setShowSize(false);
|
|
12520
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12521
|
-
), showModal && /* @__PURE__ */
|
|
12618
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react59.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12619
|
+
), showModal && /* @__PURE__ */ import_react59.default.createElement(
|
|
12522
12620
|
VideoPropertiesModal,
|
|
12523
12621
|
{
|
|
12524
12622
|
editor,
|
|
@@ -12533,22 +12631,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12533
12631
|
var VideoToolbar_default = VideoToolbar;
|
|
12534
12632
|
|
|
12535
12633
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12536
|
-
var
|
|
12634
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
12537
12635
|
var import_react_dom17 = require("react-dom");
|
|
12538
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12539
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12540
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12541
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12542
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12543
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12544
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12545
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12546
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12547
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12636
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12637
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12638
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12639
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12640
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12641
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12642
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12643
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react60.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12644
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12645
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react60.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react60.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react60.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12548
12646
|
var TableToolbar = ({ editor }) => {
|
|
12549
|
-
const [pos, setPos] = (0,
|
|
12550
|
-
const toolbarRef = (0,
|
|
12551
|
-
(0,
|
|
12647
|
+
const [pos, setPos] = (0, import_react60.useState)(null);
|
|
12648
|
+
const toolbarRef = (0, import_react60.useRef)(null);
|
|
12649
|
+
(0, import_react60.useEffect)(() => {
|
|
12552
12650
|
if (!editor) return;
|
|
12553
12651
|
const update = () => {
|
|
12554
12652
|
if (!editor.isActive("table")) {
|
|
@@ -12592,7 +12690,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12592
12690
|
const canSplit = editor.can().splitCell();
|
|
12593
12691
|
const prevent = (e) => e.preventDefault();
|
|
12594
12692
|
return (0, import_react_dom17.createPortal)(
|
|
12595
|
-
/* @__PURE__ */
|
|
12693
|
+
/* @__PURE__ */ import_react60.default.createElement(
|
|
12596
12694
|
"div",
|
|
12597
12695
|
{
|
|
12598
12696
|
ref: toolbarRef,
|
|
@@ -12600,19 +12698,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12600
12698
|
style: { top: pos.top, left: pos.left },
|
|
12601
12699
|
onMouseDown: prevent
|
|
12602
12700
|
},
|
|
12603
|
-
/* @__PURE__ */
|
|
12604
|
-
/* @__PURE__ */
|
|
12605
|
-
/* @__PURE__ */
|
|
12606
|
-
/* @__PURE__ */
|
|
12607
|
-
/* @__PURE__ */
|
|
12608
|
-
/* @__PURE__ */
|
|
12609
|
-
/* @__PURE__ */
|
|
12610
|
-
/* @__PURE__ */
|
|
12611
|
-
/* @__PURE__ */
|
|
12612
|
-
/* @__PURE__ */
|
|
12613
|
-
/* @__PURE__ */
|
|
12614
|
-
/* @__PURE__ */
|
|
12615
|
-
/* @__PURE__ */
|
|
12701
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddRowBefore, null))),
|
|
12702
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddRowAfter, null))),
|
|
12703
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteRow, null))),
|
|
12704
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12705
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddColBefore, null))),
|
|
12706
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react60.default.createElement(IconAddColAfter, null))),
|
|
12707
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteCol, null))),
|
|
12708
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12709
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react60.default.createElement(IconMergeCells, null))),
|
|
12710
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react60.default.createElement(IconSplitCell, null))),
|
|
12711
|
+
/* @__PURE__ */ import_react60.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12712
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react60.default.createElement(IconToggleHeader, null))),
|
|
12713
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react60.default.createElement(IconDeleteTable, null)))
|
|
12616
12714
|
),
|
|
12617
12715
|
document.body
|
|
12618
12716
|
);
|
|
@@ -12778,7 +12876,7 @@ var RufousTextEditor = ({
|
|
|
12778
12876
|
sx
|
|
12779
12877
|
}) => {
|
|
12780
12878
|
const sxClass = useSx(sx);
|
|
12781
|
-
const toolbarButtons = (0,
|
|
12879
|
+
const toolbarButtons = (0, import_react61.useMemo)(() => {
|
|
12782
12880
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12783
12881
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12784
12882
|
if (hideButtons) {
|
|
@@ -12786,17 +12884,17 @@ var RufousTextEditor = ({
|
|
|
12786
12884
|
}
|
|
12787
12885
|
return visible;
|
|
12788
12886
|
}, [buttons, variant, hideButtons]);
|
|
12789
|
-
const mentionSuggestion = (0,
|
|
12790
|
-
const onChangeRef = (0,
|
|
12791
|
-
const onBlurRef = (0,
|
|
12792
|
-
(0,
|
|
12887
|
+
const mentionSuggestion = (0, import_react61.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
12888
|
+
const onChangeRef = (0, import_react61.useRef)(onChange);
|
|
12889
|
+
const onBlurRef = (0, import_react61.useRef)(onBlur);
|
|
12890
|
+
(0, import_react61.useEffect)(() => {
|
|
12793
12891
|
onChangeRef.current = onChange;
|
|
12794
12892
|
}, [onChange]);
|
|
12795
|
-
(0,
|
|
12893
|
+
(0, import_react61.useEffect)(() => {
|
|
12796
12894
|
onBlurRef.current = onBlur;
|
|
12797
12895
|
}, [onBlur]);
|
|
12798
12896
|
const isEditable = editable && !disabled;
|
|
12799
|
-
const editor = (0,
|
|
12897
|
+
const editor = (0, import_react62.useEditor)({
|
|
12800
12898
|
editable: isEditable,
|
|
12801
12899
|
extensions: [
|
|
12802
12900
|
import_starter_kit.default,
|
|
@@ -12893,8 +12991,8 @@ var RufousTextEditor = ({
|
|
|
12893
12991
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12894
12992
|
}
|
|
12895
12993
|
});
|
|
12896
|
-
const wrapperRef = (0,
|
|
12897
|
-
(0,
|
|
12994
|
+
const wrapperRef = (0, import_react61.useRef)(null);
|
|
12995
|
+
(0, import_react61.useEffect)(() => {
|
|
12898
12996
|
if (!editor) return;
|
|
12899
12997
|
let blurTimer = null;
|
|
12900
12998
|
const handler = ({ event }) => {
|
|
@@ -12912,15 +13010,15 @@ var RufousTextEditor = ({
|
|
|
12912
13010
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12913
13011
|
};
|
|
12914
13012
|
}, [editor]);
|
|
12915
|
-
const setLinkRef = (0,
|
|
12916
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
12917
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
12918
|
-
const [linkText, setLinkText] = (0,
|
|
12919
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
12920
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
12921
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
12922
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
12923
|
-
const setLink = (0,
|
|
13013
|
+
const setLinkRef = (0, import_react61.useRef)(null);
|
|
13014
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react61.useState)(false);
|
|
13015
|
+
const [linkUrl, setLinkUrl] = (0, import_react61.useState)("");
|
|
13016
|
+
const [linkText, setLinkText] = (0, import_react61.useState)("");
|
|
13017
|
+
const [linkClassName, setLinkClassName] = (0, import_react61.useState)("");
|
|
13018
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react61.useState)(true);
|
|
13019
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react61.useState)(true);
|
|
13020
|
+
const [linkSelection, setLinkSelection] = (0, import_react61.useState)(null);
|
|
13021
|
+
const setLink = (0, import_react61.useCallback)(() => {
|
|
12924
13022
|
if (!editor) return;
|
|
12925
13023
|
const attrs = editor.getAttributes("link");
|
|
12926
13024
|
const previousUrl = attrs.href || "";
|
|
@@ -12957,10 +13055,10 @@ var RufousTextEditor = ({
|
|
|
12957
13055
|
setLinkSelection({ from, to });
|
|
12958
13056
|
setLinkModalOpen(true);
|
|
12959
13057
|
}, [editor]);
|
|
12960
|
-
(0,
|
|
13058
|
+
(0, import_react61.useEffect)(() => {
|
|
12961
13059
|
setLinkRef.current = setLink;
|
|
12962
13060
|
}, [setLink]);
|
|
12963
|
-
(0,
|
|
13061
|
+
(0, import_react61.useEffect)(() => {
|
|
12964
13062
|
if (!editor?.view) return;
|
|
12965
13063
|
const handleKeyDown = (event) => {
|
|
12966
13064
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -12992,7 +13090,7 @@ var RufousTextEditor = ({
|
|
|
12992
13090
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
12993
13091
|
};
|
|
12994
13092
|
}, [editor]);
|
|
12995
|
-
const handleLinkSubmit = (0,
|
|
13093
|
+
const handleLinkSubmit = (0, import_react61.useCallback)(() => {
|
|
12996
13094
|
if (!editor || !linkSelection) return;
|
|
12997
13095
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
12998
13096
|
if (linkUrl === "") {
|
|
@@ -13028,7 +13126,7 @@ var RufousTextEditor = ({
|
|
|
13028
13126
|
setLinkClassName("");
|
|
13029
13127
|
setLinkSelection(null);
|
|
13030
13128
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13031
|
-
const handleLinkRemove = (0,
|
|
13129
|
+
const handleLinkRemove = (0, import_react61.useCallback)(() => {
|
|
13032
13130
|
if (!editor || !linkSelection) return;
|
|
13033
13131
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13034
13132
|
setLinkModalOpen(false);
|
|
@@ -13037,7 +13135,7 @@ var RufousTextEditor = ({
|
|
|
13037
13135
|
setLinkClassName("");
|
|
13038
13136
|
setLinkSelection(null);
|
|
13039
13137
|
}, [editor, linkSelection]);
|
|
13040
|
-
const handleLinkCancel = (0,
|
|
13138
|
+
const handleLinkCancel = (0, import_react61.useCallback)(() => {
|
|
13041
13139
|
setLinkModalOpen(false);
|
|
13042
13140
|
setLinkUrl("");
|
|
13043
13141
|
setLinkText("");
|
|
@@ -13045,21 +13143,21 @@ var RufousTextEditor = ({
|
|
|
13045
13143
|
setLinkSelection(null);
|
|
13046
13144
|
editor?.chain().focus().run();
|
|
13047
13145
|
}, [editor]);
|
|
13048
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
13049
|
-
const handleSave = (0,
|
|
13146
|
+
const [saveStatus, setSaveStatus] = (0, import_react61.useState)("");
|
|
13147
|
+
const handleSave = (0, import_react61.useCallback)(() => {
|
|
13050
13148
|
if (!editor || !onSaveProp) return;
|
|
13051
13149
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13052
13150
|
setSaveStatus("Saved!");
|
|
13053
13151
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13054
13152
|
}, [editor, onSaveProp]);
|
|
13055
|
-
const handleExport = (0,
|
|
13153
|
+
const handleExport = (0, import_react61.useCallback)(() => {
|
|
13056
13154
|
if (!editor || !onExportProp) return;
|
|
13057
13155
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13058
13156
|
}, [editor, onExportProp]);
|
|
13059
|
-
const providerValue = (0,
|
|
13060
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
13061
|
-
const toggleFullscreen = (0,
|
|
13062
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13157
|
+
const providerValue = (0, import_react61.useMemo)(() => ({ editor }), [editor]);
|
|
13158
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react61.useState)(false);
|
|
13159
|
+
const toggleFullscreen = (0, import_react61.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13160
|
+
const wrapperJsx = /* @__PURE__ */ import_react61.default.createElement(
|
|
13063
13161
|
"div",
|
|
13064
13162
|
{
|
|
13065
13163
|
ref: wrapperRef,
|
|
@@ -13070,7 +13168,7 @@ var RufousTextEditor = ({
|
|
|
13070
13168
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13071
13169
|
}
|
|
13072
13170
|
},
|
|
13073
|
-
/* @__PURE__ */
|
|
13171
|
+
/* @__PURE__ */ import_react61.default.createElement(import_react62.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react61.default.createElement(
|
|
13074
13172
|
Toolbar_default,
|
|
13075
13173
|
{
|
|
13076
13174
|
editor,
|
|
@@ -13085,8 +13183,8 @@ var RufousTextEditor = ({
|
|
|
13085
13183
|
isFullscreen,
|
|
13086
13184
|
onToggleFullscreen: toggleFullscreen
|
|
13087
13185
|
}
|
|
13088
|
-
), /* @__PURE__ */
|
|
13089
|
-
|
|
13186
|
+
), /* @__PURE__ */ import_react61.default.createElement(import_react62.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react61.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react61.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react61.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react61.default.createElement(
|
|
13187
|
+
import_react62.BubbleMenu,
|
|
13090
13188
|
{
|
|
13091
13189
|
editor,
|
|
13092
13190
|
className: "bubble-menu",
|
|
@@ -13103,31 +13201,31 @@ var RufousTextEditor = ({
|
|
|
13103
13201
|
}
|
|
13104
13202
|
}
|
|
13105
13203
|
},
|
|
13106
|
-
/* @__PURE__ */
|
|
13204
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13107
13205
|
"button",
|
|
13108
13206
|
{
|
|
13109
13207
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13110
13208
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13111
13209
|
},
|
|
13112
|
-
/* @__PURE__ */
|
|
13210
|
+
/* @__PURE__ */ import_react61.default.createElement("strong", null, "B")
|
|
13113
13211
|
),
|
|
13114
|
-
/* @__PURE__ */
|
|
13212
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13115
13213
|
"button",
|
|
13116
13214
|
{
|
|
13117
13215
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13118
13216
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13119
13217
|
},
|
|
13120
|
-
/* @__PURE__ */
|
|
13218
|
+
/* @__PURE__ */ import_react61.default.createElement("em", null, "I")
|
|
13121
13219
|
),
|
|
13122
|
-
/* @__PURE__ */
|
|
13220
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13123
13221
|
"button",
|
|
13124
13222
|
{
|
|
13125
13223
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13126
13224
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13127
13225
|
},
|
|
13128
|
-
/* @__PURE__ */
|
|
13226
|
+
/* @__PURE__ */ import_react61.default.createElement("s", null, "S")
|
|
13129
13227
|
),
|
|
13130
|
-
/* @__PURE__ */
|
|
13228
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13131
13229
|
"button",
|
|
13132
13230
|
{
|
|
13133
13231
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13135,7 +13233,7 @@ var RufousTextEditor = ({
|
|
|
13135
13233
|
},
|
|
13136
13234
|
"</>"
|
|
13137
13235
|
),
|
|
13138
|
-
/* @__PURE__ */
|
|
13236
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13139
13237
|
"button",
|
|
13140
13238
|
{
|
|
13141
13239
|
onClick: setLink,
|
|
@@ -13143,8 +13241,8 @@ var RufousTextEditor = ({
|
|
|
13143
13241
|
},
|
|
13144
13242
|
"\u{1F517}"
|
|
13145
13243
|
)
|
|
13146
|
-
), editor && /* @__PURE__ */
|
|
13147
|
-
|
|
13244
|
+
), editor && /* @__PURE__ */ import_react61.default.createElement(
|
|
13245
|
+
import_react62.FloatingMenu,
|
|
13148
13246
|
{
|
|
13149
13247
|
editor,
|
|
13150
13248
|
className: "floating-menu",
|
|
@@ -13158,7 +13256,7 @@ var RufousTextEditor = ({
|
|
|
13158
13256
|
}
|
|
13159
13257
|
}
|
|
13160
13258
|
},
|
|
13161
|
-
/* @__PURE__ */
|
|
13259
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13162
13260
|
"button",
|
|
13163
13261
|
{
|
|
13164
13262
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13166,7 +13264,7 @@ var RufousTextEditor = ({
|
|
|
13166
13264
|
},
|
|
13167
13265
|
"H1"
|
|
13168
13266
|
),
|
|
13169
|
-
/* @__PURE__ */
|
|
13267
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13170
13268
|
"button",
|
|
13171
13269
|
{
|
|
13172
13270
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13174,7 +13272,7 @@ var RufousTextEditor = ({
|
|
|
13174
13272
|
},
|
|
13175
13273
|
"H2"
|
|
13176
13274
|
),
|
|
13177
|
-
/* @__PURE__ */
|
|
13275
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13178
13276
|
"button",
|
|
13179
13277
|
{
|
|
13180
13278
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13182,7 +13280,7 @@ var RufousTextEditor = ({
|
|
|
13182
13280
|
},
|
|
13183
13281
|
"\u2022 List"
|
|
13184
13282
|
),
|
|
13185
|
-
/* @__PURE__ */
|
|
13283
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13186
13284
|
"button",
|
|
13187
13285
|
{
|
|
13188
13286
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13190,7 +13288,7 @@ var RufousTextEditor = ({
|
|
|
13190
13288
|
},
|
|
13191
13289
|
"1. List"
|
|
13192
13290
|
),
|
|
13193
|
-
/* @__PURE__ */
|
|
13291
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
13194
13292
|
"button",
|
|
13195
13293
|
{
|
|
13196
13294
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13198,8 +13296,8 @@ var RufousTextEditor = ({
|
|
|
13198
13296
|
},
|
|
13199
13297
|
"\u201C Quote"
|
|
13200
13298
|
)
|
|
13201
|
-
), /* @__PURE__ */
|
|
13202
|
-
/* @__PURE__ */
|
|
13299
|
+
), /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react61.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react61.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react61.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react61.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react61.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13300
|
+
/* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react61.default.createElement(
|
|
13203
13301
|
"input",
|
|
13204
13302
|
{
|
|
13205
13303
|
type: "url",
|
|
@@ -13212,7 +13310,7 @@ var RufousTextEditor = ({
|
|
|
13212
13310
|
placeholder: "https://example.com",
|
|
13213
13311
|
autoFocus: true
|
|
13214
13312
|
}
|
|
13215
|
-
)), /* @__PURE__ */
|
|
13313
|
+
)), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react61.default.createElement(
|
|
13216
13314
|
"input",
|
|
13217
13315
|
{
|
|
13218
13316
|
type: "text",
|
|
@@ -13224,24 +13322,24 @@ var RufousTextEditor = ({
|
|
|
13224
13322
|
},
|
|
13225
13323
|
placeholder: "Link text"
|
|
13226
13324
|
}
|
|
13227
|
-
)), /* @__PURE__ */
|
|
13325
|
+
)), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react61.default.createElement(
|
|
13228
13326
|
"input",
|
|
13229
13327
|
{
|
|
13230
13328
|
type: "checkbox",
|
|
13231
13329
|
checked: linkNewTab,
|
|
13232
13330
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13233
13331
|
}
|
|
13234
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13332
|
+
), "Open in new tab"), /* @__PURE__ */ import_react61.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react61.default.createElement(
|
|
13235
13333
|
"input",
|
|
13236
13334
|
{
|
|
13237
13335
|
type: "checkbox",
|
|
13238
13336
|
checked: linkNoFollow,
|
|
13239
13337
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13240
13338
|
}
|
|
13241
|
-
), "No follow"))), /* @__PURE__ */
|
|
13339
|
+
), "No follow"))), /* @__PURE__ */ import_react61.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react61.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13242
13340
|
document.body
|
|
13243
13341
|
)),
|
|
13244
|
-
helperText && /* @__PURE__ */
|
|
13342
|
+
helperText && /* @__PURE__ */ import_react61.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13245
13343
|
);
|
|
13246
13344
|
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
13247
13345
|
};
|
|
@@ -13252,7 +13350,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13252
13350
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13253
13351
|
} catch {
|
|
13254
13352
|
}
|
|
13255
|
-
return /* @__PURE__ */
|
|
13353
|
+
return /* @__PURE__ */ import_react61.default.createElement(
|
|
13256
13354
|
"div",
|
|
13257
13355
|
{
|
|
13258
13356
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13397,6 +13495,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13397
13495
|
UnsubscribeIcon,
|
|
13398
13496
|
UploadIcon,
|
|
13399
13497
|
UserAssignIcon,
|
|
13498
|
+
UserSelectionField,
|
|
13400
13499
|
ViewIcon,
|
|
13401
13500
|
WorkItemIcon,
|
|
13402
13501
|
Zoom,
|