@rufous/ui 0.1.87 → 0.1.89
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 +737 -435
- package/dist/main.css +154 -2
- package/dist/main.d.cts +51 -5
- package/dist/main.d.ts +51 -5
- package/dist/main.js +720 -413
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -4976,9 +4976,9 @@ var init_size = __esm({
|
|
|
4976
4976
|
});
|
|
4977
4977
|
|
|
4978
4978
|
// node_modules/jodit/esm/core/helpers/string/fuzzy-search-index.js
|
|
4979
|
-
function fuzzySearchIndex(needle, haystack,
|
|
4979
|
+
function fuzzySearchIndex(needle, haystack, offset3 = 0, maxDistance = 1) {
|
|
4980
4980
|
let i = 0, j = 0, startIndex = -1, len = 0, errorDistance = 0;
|
|
4981
|
-
for (j =
|
|
4981
|
+
for (j = offset3; i < needle.length && j < haystack.length; ) {
|
|
4982
4982
|
if (needle[i].toLowerCase() === haystack[j].toLowerCase()) {
|
|
4983
4983
|
i++;
|
|
4984
4984
|
len++;
|
|
@@ -13099,14 +13099,14 @@ var init_snapshot = __esm({
|
|
|
13099
13099
|
/**
|
|
13100
13100
|
* Calc normal offset in joined text nodes
|
|
13101
13101
|
*/
|
|
13102
|
-
static strokeOffset(elm,
|
|
13102
|
+
static strokeOffset(elm, offset3) {
|
|
13103
13103
|
while (Dom.isText(elm)) {
|
|
13104
13104
|
elm = elm.previousSibling;
|
|
13105
13105
|
if (Dom.isText(elm) && elm.nodeValue) {
|
|
13106
|
-
|
|
13106
|
+
offset3 += elm.nodeValue.length;
|
|
13107
13107
|
}
|
|
13108
13108
|
}
|
|
13109
|
-
return
|
|
13109
|
+
return offset3;
|
|
13110
13110
|
}
|
|
13111
13111
|
/**
|
|
13112
13112
|
* Calc whole hierarchy path before some element in editor's tree
|
|
@@ -16494,14 +16494,14 @@ var init_move_node_inside_start = __esm({
|
|
|
16494
16494
|
});
|
|
16495
16495
|
|
|
16496
16496
|
// node_modules/jodit/esm/core/selection/helpers/index.js
|
|
16497
|
-
function cursorInTheEdgeOfString(container,
|
|
16497
|
+
function cursorInTheEdgeOfString(container, offset3, start, end) {
|
|
16498
16498
|
var _a;
|
|
16499
16499
|
const text = ((_a = container.nodeValue) === null || _a === void 0 ? void 0 : _a.length) ? container.nodeValue : "";
|
|
16500
|
-
if (end && text.replace(INVISIBLE_SPACE_REG_EXP_END(), "").length >
|
|
16500
|
+
if (end && text.replace(INVISIBLE_SPACE_REG_EXP_END(), "").length > offset3) {
|
|
16501
16501
|
return true;
|
|
16502
16502
|
}
|
|
16503
16503
|
const inv = INVISIBLE_SPACE_REG_EXP_START().exec(text);
|
|
16504
|
-
return start && (inv && inv[0].length <
|
|
16504
|
+
return start && (inv && inv[0].length < offset3 || !inv && offset3 > 0);
|
|
16505
16505
|
}
|
|
16506
16506
|
function findCorrectCurrentNode(node, range, rightMode, isCollapsed, checkChild, child) {
|
|
16507
16507
|
node = range.startContainer.childNodes[range.startOffset];
|
|
@@ -17194,20 +17194,20 @@ var init_selection = __esm({
|
|
|
17194
17194
|
return null;
|
|
17195
17195
|
}
|
|
17196
17196
|
const container = start ? range.startContainer : range.endContainer;
|
|
17197
|
-
const
|
|
17197
|
+
const offset3 = start ? range.startOffset : range.endOffset;
|
|
17198
17198
|
const isSignificant = (elm) => Boolean(elm && !Dom.isTag(elm, "br") && !Dom.isEmptyTextNode(elm) && !Dom.isTemporary(elm) && !(Dom.isElement(elm) && this.j.e.fire("isInvisibleForCursor", elm) === true));
|
|
17199
17199
|
if (Dom.isText(container)) {
|
|
17200
|
-
if (cursorInTheEdgeOfString(container,
|
|
17200
|
+
if (cursorInTheEdgeOfString(container, offset3, start, end)) {
|
|
17201
17201
|
return false;
|
|
17202
17202
|
}
|
|
17203
17203
|
} else {
|
|
17204
17204
|
const children = toArray(container.childNodes);
|
|
17205
17205
|
if (end) {
|
|
17206
|
-
if (children.slice(
|
|
17206
|
+
if (children.slice(offset3).some(isSignificant)) {
|
|
17207
17207
|
return false;
|
|
17208
17208
|
}
|
|
17209
17209
|
} else {
|
|
17210
|
-
if (children.slice(0,
|
|
17210
|
+
if (children.slice(0, offset3).some(isSignificant)) {
|
|
17211
17211
|
return false;
|
|
17212
17212
|
}
|
|
17213
17213
|
}
|
|
@@ -28708,6 +28708,7 @@ __export(main_exports, {
|
|
|
28708
28708
|
NineDotMenuIcon: () => nineDotMenuIcon_default,
|
|
28709
28709
|
NotificationIcon: () => notificationIcon_default,
|
|
28710
28710
|
Paper: () => Paper,
|
|
28711
|
+
PhoneField: () => PhoneField,
|
|
28711
28712
|
Popover: () => Popover,
|
|
28712
28713
|
Popper: () => Popper,
|
|
28713
28714
|
ProjectIcon: () => projectIcon_default,
|
|
@@ -32817,23 +32818,23 @@ function DataGrid({
|
|
|
32817
32818
|
}, [resolvedColumns]);
|
|
32818
32819
|
const getLeftOffset = (col, idx) => {
|
|
32819
32820
|
if (col.pinned !== "left") return void 0;
|
|
32820
|
-
let
|
|
32821
|
+
let offset3 = 0;
|
|
32821
32822
|
for (let i = 0; i < idx; i++) {
|
|
32822
32823
|
if (visibleColumns[i].pinned === "left") {
|
|
32823
|
-
|
|
32824
|
+
offset3 += columnWidths[String(visibleColumns[i].field)] || 200;
|
|
32824
32825
|
}
|
|
32825
32826
|
}
|
|
32826
|
-
return
|
|
32827
|
+
return offset3;
|
|
32827
32828
|
};
|
|
32828
32829
|
const getRightOffset = (col, idx) => {
|
|
32829
32830
|
if (col.pinned !== "right") return void 0;
|
|
32830
|
-
let
|
|
32831
|
+
let offset3 = 0;
|
|
32831
32832
|
for (let i = visibleColumns.length - 1; i > idx; i--) {
|
|
32832
32833
|
if (visibleColumns[i].pinned === "right") {
|
|
32833
|
-
|
|
32834
|
+
offset3 += columnWidths[String(visibleColumns[i].field)] || 200;
|
|
32834
32835
|
}
|
|
32835
32836
|
}
|
|
32836
|
-
return
|
|
32837
|
+
return offset3;
|
|
32837
32838
|
};
|
|
32838
32839
|
const hasActiveFilters = advancedFilters.some((f) => f.value);
|
|
32839
32840
|
return /* @__PURE__ */ import_react22.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react22.default.createElement("h2", null, title), /* @__PURE__ */ import_react22.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react22.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react22.default.createElement(
|
|
@@ -34072,10 +34073,10 @@ var Radio = import_react27.default.forwardRef(function Radio2(props, ref) {
|
|
|
34072
34073
|
const isDisabled = disabledProp !== void 0 ? disabledProp : ctx.disabled ?? false;
|
|
34073
34074
|
const size3 = sizeProp ?? ctx.size ?? "medium";
|
|
34074
34075
|
const name = nameProp ?? ctx.name;
|
|
34075
|
-
const handleChange = () => {
|
|
34076
|
+
const handleChange = (e) => {
|
|
34076
34077
|
if (!isDisabled) {
|
|
34077
|
-
onChangeProp?.(value);
|
|
34078
|
-
ctx.onChange?.(value);
|
|
34078
|
+
onChangeProp?.(e, value);
|
|
34079
|
+
ctx.onChange?.(e, value);
|
|
34079
34080
|
}
|
|
34080
34081
|
};
|
|
34081
34082
|
const rootClasses = [
|
|
@@ -36143,7 +36144,7 @@ var Menu = ({
|
|
|
36143
36144
|
}, [open]);
|
|
36144
36145
|
(0, import_react41.useEffect)(() => {
|
|
36145
36146
|
if (!open || !anchorEl || !paperRef.current) return;
|
|
36146
|
-
const
|
|
36147
|
+
const computePosition3 = () => {
|
|
36147
36148
|
if (!anchorEl || !paperRef.current) return;
|
|
36148
36149
|
const anchorRect = anchorEl.getBoundingClientRect();
|
|
36149
36150
|
const menuRect = paperRef.current.getBoundingClientRect();
|
|
@@ -36152,20 +36153,20 @@ var Menu = ({
|
|
|
36152
36153
|
anchorOrigin.vertical,
|
|
36153
36154
|
anchorOrigin.horizontal
|
|
36154
36155
|
);
|
|
36155
|
-
const
|
|
36156
|
+
const offset3 = getTransformOffset(
|
|
36156
36157
|
menuRect,
|
|
36157
36158
|
transformOrigin.vertical,
|
|
36158
36159
|
transformOrigin.horizontal
|
|
36159
36160
|
);
|
|
36160
|
-
let left = anchor.x -
|
|
36161
|
-
let top = anchor.y -
|
|
36161
|
+
let left = anchor.x - offset3.dx;
|
|
36162
|
+
let top = anchor.y - offset3.dy;
|
|
36162
36163
|
const vw = window.innerWidth;
|
|
36163
36164
|
const vh = window.innerHeight;
|
|
36164
36165
|
left = Math.max(8, Math.min(left, vw - menuRect.width - 8));
|
|
36165
36166
|
top = Math.max(8, Math.min(top, vh - menuRect.height - 8));
|
|
36166
36167
|
setMenuStyle({ left, top });
|
|
36167
36168
|
};
|
|
36168
|
-
requestAnimationFrame(
|
|
36169
|
+
requestAnimationFrame(computePosition3);
|
|
36169
36170
|
}, [open, mounted, anchorEl, anchorOrigin, transformOrigin]);
|
|
36170
36171
|
(0, import_react41.useEffect)(() => {
|
|
36171
36172
|
if (!open) return;
|
|
@@ -36471,8 +36472,8 @@ Link.displayName = "Link";
|
|
|
36471
36472
|
// lib/Popper/Popper.tsx
|
|
36472
36473
|
var import_react45 = __toESM(require("react"), 1);
|
|
36473
36474
|
var import_react_dom5 = __toESM(require("react-dom"), 1);
|
|
36474
|
-
function computePopperPosition(anchorRect, popperRect, placement,
|
|
36475
|
-
const [skid, dist] =
|
|
36475
|
+
function computePopperPosition(anchorRect, popperRect, placement, offset3 = [0, 8]) {
|
|
36476
|
+
const [skid, dist] = offset3;
|
|
36476
36477
|
let top = 0;
|
|
36477
36478
|
let left = 0;
|
|
36478
36479
|
switch (placement) {
|
|
@@ -36570,14 +36571,14 @@ var Popper = ({
|
|
|
36570
36571
|
}
|
|
36571
36572
|
}, [open, keepMounted]);
|
|
36572
36573
|
const offsetModifier = modifiers.find((m) => m.name === "offset");
|
|
36573
|
-
const
|
|
36574
|
+
const offset3 = offsetModifier?.options?.offset ?? [0, 8];
|
|
36574
36575
|
(0, import_react45.useLayoutEffect)(() => {
|
|
36575
36576
|
if (!open || !anchorEl || !popperRef.current) return;
|
|
36576
36577
|
const compute = () => {
|
|
36577
36578
|
if (!anchorEl || !popperRef.current) return;
|
|
36578
36579
|
const anchorRect = anchorEl.getBoundingClientRect();
|
|
36579
36580
|
const popperRect = popperRef.current.getBoundingClientRect();
|
|
36580
|
-
const pos = computePopperPosition(anchorRect, popperRect, placement,
|
|
36581
|
+
const pos = computePopperPosition(anchorRect, popperRect, placement, offset3);
|
|
36581
36582
|
setPosStyle(pos);
|
|
36582
36583
|
};
|
|
36583
36584
|
requestAnimationFrame(compute);
|
|
@@ -36587,7 +36588,7 @@ var Popper = ({
|
|
|
36587
36588
|
window.removeEventListener("scroll", compute, true);
|
|
36588
36589
|
window.removeEventListener("resize", compute);
|
|
36589
36590
|
};
|
|
36590
|
-
}, [open, anchorEl, placement,
|
|
36591
|
+
}, [open, anchorEl, placement, offset3]);
|
|
36591
36592
|
if (!mounted) return null;
|
|
36592
36593
|
const classes = [
|
|
36593
36594
|
"rf-popper",
|
|
@@ -36664,9 +36665,9 @@ var Popover = ({
|
|
|
36664
36665
|
const anchorRect = anchorEl.getBoundingClientRect();
|
|
36665
36666
|
const paperRect = paperRef.current.getBoundingClientRect();
|
|
36666
36667
|
const anchor = getPoint(anchorRect, anchorOrigin.vertical, anchorOrigin.horizontal);
|
|
36667
|
-
const
|
|
36668
|
-
let left = anchor.x -
|
|
36669
|
-
let top = anchor.y -
|
|
36668
|
+
const offset3 = getTransform(paperRect, transformOrigin.vertical, transformOrigin.horizontal);
|
|
36669
|
+
let left = anchor.x - offset3.dx;
|
|
36670
|
+
let top = anchor.y - offset3.dy;
|
|
36670
36671
|
const vw = window.innerWidth;
|
|
36671
36672
|
const vh = window.innerHeight;
|
|
36672
36673
|
left = Math.max(8, Math.min(left, vw - paperRect.width - 8));
|
|
@@ -37008,8 +37009,7 @@ var ImageField = import_react48.default.forwardRef(
|
|
|
37008
37009
|
if (!file) return;
|
|
37009
37010
|
const objectUrl = URL.createObjectURL(file);
|
|
37010
37011
|
setPreview(objectUrl);
|
|
37011
|
-
onChange?.(file);
|
|
37012
|
-
e.target.value = "";
|
|
37012
|
+
onChange?.(e, file);
|
|
37013
37013
|
},
|
|
37014
37014
|
[onChange]
|
|
37015
37015
|
);
|
|
@@ -37066,9 +37066,310 @@ var ImageField = import_react48.default.forwardRef(
|
|
|
37066
37066
|
);
|
|
37067
37067
|
ImageField.displayName = "ImageField";
|
|
37068
37068
|
|
|
37069
|
+
// lib/PhoneField/PhoneField.tsx
|
|
37070
|
+
var import_react49 = __toESM(require("react"), 1);
|
|
37071
|
+
var import_country_state_city2 = require("country-state-city");
|
|
37072
|
+
var import_dom97 = require("@floating-ui/dom");
|
|
37073
|
+
function getAllCountries() {
|
|
37074
|
+
return import_country_state_city2.Country.getAllCountries().map((c) => ({
|
|
37075
|
+
isoCode: c.isoCode,
|
|
37076
|
+
name: c.name,
|
|
37077
|
+
phonecode: c.phonecode.replace("+", ""),
|
|
37078
|
+
flag: c.flag
|
|
37079
|
+
}));
|
|
37080
|
+
}
|
|
37081
|
+
function findCountryByIso(countries, iso) {
|
|
37082
|
+
return countries.find((c) => c.isoCode.toLowerCase() === iso.toLowerCase());
|
|
37083
|
+
}
|
|
37084
|
+
function sanitizeValue(val2) {
|
|
37085
|
+
return val2.replace(/^\+/, "").replace(/[^0-9]/g, "");
|
|
37086
|
+
}
|
|
37087
|
+
function detectCountryFromValue(countries, digits) {
|
|
37088
|
+
if (!digits) return null;
|
|
37089
|
+
const sorted = [...countries].sort((a, b) => b.phonecode.length - a.phonecode.length);
|
|
37090
|
+
for (const c of sorted) {
|
|
37091
|
+
if (digits.startsWith(c.phonecode)) {
|
|
37092
|
+
return { country: c, phoneNumber: digits.slice(c.phonecode.length) };
|
|
37093
|
+
}
|
|
37094
|
+
}
|
|
37095
|
+
return null;
|
|
37096
|
+
}
|
|
37097
|
+
var PhoneField = (0, import_react49.forwardRef)(function PhoneField2(props, ref) {
|
|
37098
|
+
const {
|
|
37099
|
+
value = "",
|
|
37100
|
+
onChange,
|
|
37101
|
+
label,
|
|
37102
|
+
variant = "outlined",
|
|
37103
|
+
size: size3 = "medium",
|
|
37104
|
+
error: error2 = false,
|
|
37105
|
+
helperText,
|
|
37106
|
+
fullWidth = false,
|
|
37107
|
+
disabled = false,
|
|
37108
|
+
required: required3 = false,
|
|
37109
|
+
defaultCountry = "us",
|
|
37110
|
+
onlyCountries,
|
|
37111
|
+
countryCodeEditable = true,
|
|
37112
|
+
inputProps,
|
|
37113
|
+
margin = "none",
|
|
37114
|
+
className = "",
|
|
37115
|
+
style,
|
|
37116
|
+
sx
|
|
37117
|
+
} = props;
|
|
37118
|
+
const sxClass = useSx(sx);
|
|
37119
|
+
const containerRef = (0, import_react49.useRef)(null);
|
|
37120
|
+
const inputRef = (0, import_react49.useRef)(null);
|
|
37121
|
+
const listRef = (0, import_react49.useRef)(null);
|
|
37122
|
+
const popupRef = (0, import_react49.useRef)(null);
|
|
37123
|
+
const inputId = (0, import_react49.useRef)(`rf-phone-${Math.random().toString(36).slice(2, 9)}`).current;
|
|
37124
|
+
const countries = import_react49.default.useMemo(() => {
|
|
37125
|
+
const all = getAllCountries();
|
|
37126
|
+
if (onlyCountries && onlyCountries.length > 0) {
|
|
37127
|
+
return all.filter((c) => onlyCountries.includes(c.isoCode.toLowerCase()));
|
|
37128
|
+
}
|
|
37129
|
+
return all;
|
|
37130
|
+
}, [onlyCountries]);
|
|
37131
|
+
const [selectedCountry, setSelectedCountry] = (0, import_react49.useState)(() => {
|
|
37132
|
+
const digits2 = sanitizeValue(value);
|
|
37133
|
+
if (digits2) {
|
|
37134
|
+
const detected = detectCountryFromValue(countries, digits2);
|
|
37135
|
+
if (detected) return detected.country;
|
|
37136
|
+
}
|
|
37137
|
+
return findCountryByIso(countries, defaultCountry) || countries[0];
|
|
37138
|
+
});
|
|
37139
|
+
const [open, setOpen] = (0, import_react49.useState)(false);
|
|
37140
|
+
const [focusedIdx, setFocusedIdx] = (0, import_react49.useState)(-1);
|
|
37141
|
+
const [search, setSearch] = (0, import_react49.useState)("");
|
|
37142
|
+
const prevValueRef = (0, import_react49.useRef)(value);
|
|
37143
|
+
(0, import_react49.useEffect)(() => {
|
|
37144
|
+
if (value === prevValueRef.current) return;
|
|
37145
|
+
prevValueRef.current = value;
|
|
37146
|
+
const digits2 = sanitizeValue(value);
|
|
37147
|
+
if (!digits2) return;
|
|
37148
|
+
const detected = detectCountryFromValue(countries, digits2);
|
|
37149
|
+
if (detected && detected.country.isoCode !== selectedCountry?.isoCode) {
|
|
37150
|
+
setSelectedCountry(detected.country);
|
|
37151
|
+
}
|
|
37152
|
+
}, [value, countries, selectedCountry?.isoCode]);
|
|
37153
|
+
const dialCode = selectedCountry?.phonecode || "";
|
|
37154
|
+
const digits = sanitizeValue(value);
|
|
37155
|
+
const phoneNumber = digits.startsWith(dialCode) ? digits.slice(dialCode.length) : digits;
|
|
37156
|
+
const openDropdown = (0, import_react49.useCallback)(() => {
|
|
37157
|
+
if (disabled) return;
|
|
37158
|
+
setOpen(true);
|
|
37159
|
+
setFocusedIdx(-1);
|
|
37160
|
+
setSearch("");
|
|
37161
|
+
}, [disabled]);
|
|
37162
|
+
const closeDropdown = (0, import_react49.useCallback)(() => {
|
|
37163
|
+
setOpen(false);
|
|
37164
|
+
setFocusedIdx(-1);
|
|
37165
|
+
setSearch("");
|
|
37166
|
+
}, []);
|
|
37167
|
+
(0, import_react49.useEffect)(() => {
|
|
37168
|
+
if (!open) return;
|
|
37169
|
+
const handler = (e) => {
|
|
37170
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
37171
|
+
closeDropdown();
|
|
37172
|
+
}
|
|
37173
|
+
};
|
|
37174
|
+
document.addEventListener("mousedown", handler);
|
|
37175
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
37176
|
+
}, [open, closeDropdown]);
|
|
37177
|
+
(0, import_react49.useEffect)(() => {
|
|
37178
|
+
if (!open || !containerRef.current || !popupRef.current) return;
|
|
37179
|
+
const reference = containerRef.current;
|
|
37180
|
+
const floating = popupRef.current;
|
|
37181
|
+
const updatePosition = () => {
|
|
37182
|
+
(0, import_dom97.computePosition)(reference, floating, {
|
|
37183
|
+
placement: "bottom-start",
|
|
37184
|
+
middleware: [
|
|
37185
|
+
(0, import_dom97.offset)(4),
|
|
37186
|
+
(0, import_dom97.flip)({ padding: 8 }),
|
|
37187
|
+
(0, import_dom97.shift)({ padding: 8 }),
|
|
37188
|
+
(0, import_dom97.size)({
|
|
37189
|
+
apply({ availableHeight, elements }) {
|
|
37190
|
+
Object.assign(elements.floating.style, {
|
|
37191
|
+
maxHeight: `${Math.min(280, availableHeight - 8)}px`
|
|
37192
|
+
});
|
|
37193
|
+
},
|
|
37194
|
+
padding: 8
|
|
37195
|
+
})
|
|
37196
|
+
]
|
|
37197
|
+
}).then(({ x, y, placement }) => {
|
|
37198
|
+
Object.assign(floating.style, {
|
|
37199
|
+
left: `${x}px`,
|
|
37200
|
+
top: `${y}px`
|
|
37201
|
+
});
|
|
37202
|
+
floating.dataset.placement = placement;
|
|
37203
|
+
});
|
|
37204
|
+
};
|
|
37205
|
+
updatePosition();
|
|
37206
|
+
window.addEventListener("scroll", updatePosition, true);
|
|
37207
|
+
window.addEventListener("resize", updatePosition);
|
|
37208
|
+
return () => {
|
|
37209
|
+
window.removeEventListener("scroll", updatePosition, true);
|
|
37210
|
+
window.removeEventListener("resize", updatePosition);
|
|
37211
|
+
};
|
|
37212
|
+
}, [open]);
|
|
37213
|
+
const selectCountry = (0, import_react49.useCallback)((country) => {
|
|
37214
|
+
setSelectedCountry(country);
|
|
37215
|
+
closeDropdown();
|
|
37216
|
+
const newValue = "+" + country.phonecode + phoneNumber;
|
|
37217
|
+
onChange?.(newValue, {
|
|
37218
|
+
dialCode: "+" + country.phonecode,
|
|
37219
|
+
countryCode: country.isoCode.toLowerCase(),
|
|
37220
|
+
name: country.name
|
|
37221
|
+
});
|
|
37222
|
+
inputRef.current?.focus();
|
|
37223
|
+
}, [closeDropdown, phoneNumber, onChange]);
|
|
37224
|
+
const handleInputChange = (e) => {
|
|
37225
|
+
const raw = e.target.value.replace(/[^0-9]/g, "");
|
|
37226
|
+
const newValue = "+" + dialCode + raw;
|
|
37227
|
+
onChange?.(newValue, {
|
|
37228
|
+
dialCode: "+" + selectedCountry.phonecode,
|
|
37229
|
+
countryCode: selectedCountry.isoCode.toLowerCase(),
|
|
37230
|
+
name: selectedCountry.name
|
|
37231
|
+
});
|
|
37232
|
+
};
|
|
37233
|
+
const filteredCountries = search ? countries.filter(
|
|
37234
|
+
(c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.phonecode.includes(search) || c.isoCode.toLowerCase().includes(search.toLowerCase())
|
|
37235
|
+
) : countries;
|
|
37236
|
+
const handleDropdownKeyDown = (e) => {
|
|
37237
|
+
if (e.key === "ArrowDown") {
|
|
37238
|
+
e.preventDefault();
|
|
37239
|
+
setFocusedIdx((i) => {
|
|
37240
|
+
const next = Math.min(i + 1, filteredCountries.length - 1);
|
|
37241
|
+
scrollOptionIntoView(next);
|
|
37242
|
+
return next;
|
|
37243
|
+
});
|
|
37244
|
+
} else if (e.key === "ArrowUp") {
|
|
37245
|
+
e.preventDefault();
|
|
37246
|
+
setFocusedIdx((i) => {
|
|
37247
|
+
const next = Math.max(i - 1, 0);
|
|
37248
|
+
scrollOptionIntoView(next);
|
|
37249
|
+
return next;
|
|
37250
|
+
});
|
|
37251
|
+
} else if (e.key === "Enter") {
|
|
37252
|
+
e.preventDefault();
|
|
37253
|
+
if (focusedIdx >= 0 && filteredCountries[focusedIdx]) {
|
|
37254
|
+
selectCountry(filteredCountries[focusedIdx]);
|
|
37255
|
+
}
|
|
37256
|
+
} else if (e.key === "Escape") {
|
|
37257
|
+
closeDropdown();
|
|
37258
|
+
} else if (e.key.length === 1) {
|
|
37259
|
+
setSearch((s2) => s2 + e.key);
|
|
37260
|
+
} else if (e.key === "Backspace") {
|
|
37261
|
+
setSearch((s2) => s2.slice(0, -1));
|
|
37262
|
+
}
|
|
37263
|
+
};
|
|
37264
|
+
const scrollOptionIntoView = (idx) => {
|
|
37265
|
+
requestAnimationFrame(() => {
|
|
37266
|
+
const el = listRef.current?.querySelector(`[data-idx="${idx}"]`);
|
|
37267
|
+
el?.scrollIntoView({ block: "nearest" });
|
|
37268
|
+
});
|
|
37269
|
+
};
|
|
37270
|
+
const isFloating = Boolean(value || phoneNumber);
|
|
37271
|
+
const hasLabel = Boolean(label);
|
|
37272
|
+
const rootClasses = [
|
|
37273
|
+
"rf-text-field",
|
|
37274
|
+
`rf-text-field--${variant}`,
|
|
37275
|
+
`rf-text-field--${size3}`,
|
|
37276
|
+
"rf-text-field--primary",
|
|
37277
|
+
error2 ? "rf-text-field--error" : "",
|
|
37278
|
+
fullWidth ? "rf-text-field--full-width" : "",
|
|
37279
|
+
disabled ? "rf-text-field--disabled" : "",
|
|
37280
|
+
isFloating ? "rf-text-field--floating" : "",
|
|
37281
|
+
hasLabel ? "rf-text-field--has-label" : "",
|
|
37282
|
+
"rf-text-field--adorned-start",
|
|
37283
|
+
"rf-phone-field",
|
|
37284
|
+
open ? "rf-phone-field--open" : "",
|
|
37285
|
+
margin === "normal" ? "rf-phone-field--margin-normal" : "",
|
|
37286
|
+
margin === "dense" ? "rf-phone-field--margin-dense" : "",
|
|
37287
|
+
sxClass,
|
|
37288
|
+
className
|
|
37289
|
+
].filter(Boolean).join(" ");
|
|
37290
|
+
return /* @__PURE__ */ import_react49.default.createElement(
|
|
37291
|
+
"div",
|
|
37292
|
+
{
|
|
37293
|
+
ref: (node) => {
|
|
37294
|
+
containerRef.current = node;
|
|
37295
|
+
if (typeof ref === "function") ref(node);
|
|
37296
|
+
else if (ref) ref.current = node;
|
|
37297
|
+
},
|
|
37298
|
+
className: rootClasses,
|
|
37299
|
+
style
|
|
37300
|
+
},
|
|
37301
|
+
/* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__wrapper" }, /* @__PURE__ */ import_react49.default.createElement(
|
|
37302
|
+
"div",
|
|
37303
|
+
{
|
|
37304
|
+
className: `rf-phone-field__country-selector ${disabled || !countryCodeEditable ? "rf-phone-field__country-selector--disabled" : ""}`,
|
|
37305
|
+
onClick: () => !disabled && countryCodeEditable && (open ? closeDropdown() : openDropdown()),
|
|
37306
|
+
onKeyDown: open ? handleDropdownKeyDown : void 0,
|
|
37307
|
+
tabIndex: disabled || !countryCodeEditable ? -1 : 0,
|
|
37308
|
+
role: "button",
|
|
37309
|
+
"aria-haspopup": "listbox",
|
|
37310
|
+
"aria-expanded": open,
|
|
37311
|
+
"aria-label": "Select country code"
|
|
37312
|
+
},
|
|
37313
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-phone-field__flag" }, selectedCountry?.flag),
|
|
37314
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-phone-field__dial-code" }, "+", dialCode)
|
|
37315
|
+
), /* @__PURE__ */ import_react49.default.createElement(
|
|
37316
|
+
"input",
|
|
37317
|
+
{
|
|
37318
|
+
ref: inputRef,
|
|
37319
|
+
type: "tel",
|
|
37320
|
+
className: "rf-text-field__input rf-phone-field__input",
|
|
37321
|
+
id: inputId,
|
|
37322
|
+
value: phoneNumber,
|
|
37323
|
+
onChange: handleInputChange,
|
|
37324
|
+
disabled,
|
|
37325
|
+
required: required3,
|
|
37326
|
+
placeholder: " ",
|
|
37327
|
+
maxLength: 15,
|
|
37328
|
+
...inputProps
|
|
37329
|
+
}
|
|
37330
|
+
), hasLabel && /* @__PURE__ */ import_react49.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required3 && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")), variant === "outlined" && /* @__PURE__ */ import_react49.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react49.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react49.default.createElement("span", null, label, required3 ? " *" : "")) : /* @__PURE__ */ import_react49.default.createElement("legend", { className: "rf-text-field__legend--empty" }))),
|
|
37331
|
+
helperText && /* @__PURE__ */ import_react49.default.createElement("div", { className: `rf-text-field__helper-text${error2 ? " rf-text-field__helper-text--error" : ""}` }, helperText),
|
|
37332
|
+
open && !disabled && /* @__PURE__ */ import_react49.default.createElement(
|
|
37333
|
+
"div",
|
|
37334
|
+
{
|
|
37335
|
+
ref: popupRef,
|
|
37336
|
+
className: "rf-select__popup rf-phone-field__popup",
|
|
37337
|
+
role: "presentation"
|
|
37338
|
+
},
|
|
37339
|
+
search && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-phone-field__search-indicator" }, "Search: ", search),
|
|
37340
|
+
/* @__PURE__ */ import_react49.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox" }, filteredCountries.map((country, idx) => {
|
|
37341
|
+
const isActive = selectedCountry?.isoCode === country.isoCode;
|
|
37342
|
+
const focused = focusedIdx === idx;
|
|
37343
|
+
return /* @__PURE__ */ import_react49.default.createElement(
|
|
37344
|
+
"li",
|
|
37345
|
+
{
|
|
37346
|
+
key: country.isoCode,
|
|
37347
|
+
"data-idx": idx,
|
|
37348
|
+
role: "option",
|
|
37349
|
+
"aria-selected": isActive,
|
|
37350
|
+
className: [
|
|
37351
|
+
"rf-select__option",
|
|
37352
|
+
isActive ? "rf-select__option--selected" : "",
|
|
37353
|
+
focused ? "rf-select__option--focused" : ""
|
|
37354
|
+
].filter(Boolean).join(" "),
|
|
37355
|
+
onMouseEnter: () => setFocusedIdx(idx),
|
|
37356
|
+
onMouseLeave: () => setFocusedIdx(-1),
|
|
37357
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
37358
|
+
onClick: () => selectCountry(country)
|
|
37359
|
+
},
|
|
37360
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-phone-field__option-flag" }, country.flag),
|
|
37361
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-select__option-label", title: country.name }, country.name),
|
|
37362
|
+
/* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-phone-field__option-code" }, "+", country.phonecode)
|
|
37363
|
+
);
|
|
37364
|
+
}), filteredCountries.length === 0 && /* @__PURE__ */ import_react49.default.createElement("li", { className: "rf-phone-field__no-results" }, "No countries found"))
|
|
37365
|
+
)
|
|
37366
|
+
);
|
|
37367
|
+
});
|
|
37368
|
+
PhoneField.displayName = "PhoneField";
|
|
37369
|
+
|
|
37069
37370
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
37070
|
-
var
|
|
37071
|
-
var
|
|
37371
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
37372
|
+
var import_react60 = require("@tiptap/react");
|
|
37072
37373
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
37073
37374
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
37074
37375
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -37089,21 +37390,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
37089
37390
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
37090
37391
|
|
|
37091
37392
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
37092
|
-
var
|
|
37393
|
+
var import_react51 = require("@tiptap/react");
|
|
37093
37394
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
37094
37395
|
|
|
37095
37396
|
// lib/RufousTextEditor/MentionList.tsx
|
|
37096
|
-
var
|
|
37097
|
-
var MentionList = (0,
|
|
37098
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
37397
|
+
var import_react50 = __toESM(require("react"), 1);
|
|
37398
|
+
var MentionList = (0, import_react50.forwardRef)((props, ref) => {
|
|
37399
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
|
|
37099
37400
|
const selectItem = (index) => {
|
|
37100
37401
|
const item = props.items[index];
|
|
37101
37402
|
if (item) {
|
|
37102
37403
|
props.command({ id: item.id, label: item.name });
|
|
37103
37404
|
}
|
|
37104
37405
|
};
|
|
37105
|
-
(0,
|
|
37106
|
-
(0,
|
|
37406
|
+
(0, import_react50.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
37407
|
+
(0, import_react50.useImperativeHandle)(ref, () => ({
|
|
37107
37408
|
onKeyDown: ({ event }) => {
|
|
37108
37409
|
if (event.key === "ArrowUp") {
|
|
37109
37410
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -37121,17 +37422,17 @@ var MentionList = (0, import_react49.forwardRef)((props, ref) => {
|
|
|
37121
37422
|
}
|
|
37122
37423
|
}));
|
|
37123
37424
|
if (!props.items.length) {
|
|
37124
|
-
return /* @__PURE__ */
|
|
37425
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
37125
37426
|
}
|
|
37126
|
-
return /* @__PURE__ */
|
|
37427
|
+
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react50.default.createElement(
|
|
37127
37428
|
"button",
|
|
37128
37429
|
{
|
|
37129
37430
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
37130
37431
|
key: item.id,
|
|
37131
37432
|
onClick: () => selectItem(index)
|
|
37132
37433
|
},
|
|
37133
|
-
/* @__PURE__ */
|
|
37134
|
-
/* @__PURE__ */
|
|
37434
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
37435
|
+
/* @__PURE__ */ import_react50.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
37135
37436
|
)));
|
|
37136
37437
|
});
|
|
37137
37438
|
MentionList.displayName = "MentionList";
|
|
@@ -37151,7 +37452,7 @@ function createMentionSuggestion(users) {
|
|
|
37151
37452
|
return {
|
|
37152
37453
|
onStart: (props) => {
|
|
37153
37454
|
if (!props.clientRect) return;
|
|
37154
|
-
component2 = new
|
|
37455
|
+
component2 = new import_react51.ReactRenderer(MentionList_default, {
|
|
37155
37456
|
props,
|
|
37156
37457
|
editor: props.editor
|
|
37157
37458
|
});
|
|
@@ -37189,20 +37490,20 @@ function createMentionSuggestion(users) {
|
|
|
37189
37490
|
}
|
|
37190
37491
|
|
|
37191
37492
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
37192
|
-
var
|
|
37493
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
37193
37494
|
|
|
37194
37495
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
37195
|
-
var
|
|
37496
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
37196
37497
|
var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
37197
|
-
const [speaking, setSpeaking] = (0,
|
|
37198
|
-
const [paused, setPaused] = (0,
|
|
37199
|
-
const [voices, setVoices] = (0,
|
|
37200
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
37201
|
-
const [rate, setRate] = (0,
|
|
37202
|
-
const [showPanel, setShowPanel] = (0,
|
|
37203
|
-
const utteranceRef = (0,
|
|
37204
|
-
const panelRef = (0,
|
|
37205
|
-
(0,
|
|
37498
|
+
const [speaking, setSpeaking] = (0, import_react52.useState)(false);
|
|
37499
|
+
const [paused, setPaused] = (0, import_react52.useState)(false);
|
|
37500
|
+
const [voices, setVoices] = (0, import_react52.useState)([]);
|
|
37501
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react52.useState)("");
|
|
37502
|
+
const [rate, setRate] = (0, import_react52.useState)(1);
|
|
37503
|
+
const [showPanel, setShowPanel] = (0, import_react52.useState)(false);
|
|
37504
|
+
const utteranceRef = (0, import_react52.useRef)(null);
|
|
37505
|
+
const panelRef = (0, import_react52.useRef)(null);
|
|
37506
|
+
(0, import_react52.useEffect)(() => {
|
|
37206
37507
|
const loadVoices = async () => {
|
|
37207
37508
|
const available = await window.speechSynthesis.getVoices();
|
|
37208
37509
|
setVoices(available);
|
|
@@ -37217,7 +37518,7 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37217
37518
|
window.speechSynthesis.onvoiceschanged = null;
|
|
37218
37519
|
};
|
|
37219
37520
|
}, []);
|
|
37220
|
-
(0,
|
|
37521
|
+
(0, import_react52.useEffect)(() => {
|
|
37221
37522
|
const handleClick = (e) => {
|
|
37222
37523
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
37223
37524
|
setShowPanel(false);
|
|
@@ -37226,7 +37527,7 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37226
37527
|
document.addEventListener("mousedown", handleClick);
|
|
37227
37528
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
37228
37529
|
}, []);
|
|
37229
|
-
const getTextToSpeak = (0,
|
|
37530
|
+
const getTextToSpeak = (0, import_react52.useCallback)(() => {
|
|
37230
37531
|
if (!editor) return "";
|
|
37231
37532
|
const { from, to, empty } = editor.state.selection;
|
|
37232
37533
|
if (!empty) {
|
|
@@ -37234,7 +37535,7 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37234
37535
|
}
|
|
37235
37536
|
return editor.getText();
|
|
37236
37537
|
}, [editor]);
|
|
37237
|
-
const handleSpeak = (0,
|
|
37538
|
+
const handleSpeak = (0, import_react52.useCallback)(async () => {
|
|
37238
37539
|
const text = getTextToSpeak();
|
|
37239
37540
|
if (!text.trim()) return;
|
|
37240
37541
|
if (onTextToSpeech) {
|
|
@@ -37276,24 +37577,24 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37276
37577
|
setSpeaking(true);
|
|
37277
37578
|
setPaused(false);
|
|
37278
37579
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
37279
|
-
const handlePause = (0,
|
|
37580
|
+
const handlePause = (0, import_react52.useCallback)(() => {
|
|
37280
37581
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
37281
37582
|
window.speechSynthesis.pause();
|
|
37282
37583
|
setPaused(true);
|
|
37283
37584
|
}
|
|
37284
37585
|
}, []);
|
|
37285
|
-
const handleResume = (0,
|
|
37586
|
+
const handleResume = (0, import_react52.useCallback)(() => {
|
|
37286
37587
|
if (window.speechSynthesis.paused) {
|
|
37287
37588
|
window.speechSynthesis.resume();
|
|
37288
37589
|
setPaused(false);
|
|
37289
37590
|
}
|
|
37290
37591
|
}, []);
|
|
37291
|
-
const handleStop = (0,
|
|
37592
|
+
const handleStop = (0, import_react52.useCallback)(() => {
|
|
37292
37593
|
window.speechSynthesis.cancel();
|
|
37293
37594
|
setSpeaking(false);
|
|
37294
37595
|
setPaused(false);
|
|
37295
37596
|
}, []);
|
|
37296
|
-
return /* @__PURE__ */
|
|
37597
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react52.default.createElement(
|
|
37297
37598
|
"button",
|
|
37298
37599
|
{
|
|
37299
37600
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -37307,15 +37608,15 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37307
37608
|
title: "Text to Speech"
|
|
37308
37609
|
},
|
|
37309
37610
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
37310
|
-
), showPanel && !speaking && /* @__PURE__ */
|
|
37611
|
+
), showPanel && !speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react52.default.createElement(
|
|
37311
37612
|
"select",
|
|
37312
37613
|
{
|
|
37313
37614
|
className: "tts-select",
|
|
37314
37615
|
value: selectedVoice,
|
|
37315
37616
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
37316
37617
|
},
|
|
37317
|
-
voices.map((v) => /* @__PURE__ */
|
|
37318
|
-
), /* @__PURE__ */
|
|
37618
|
+
voices.map((v) => /* @__PURE__ */ import_react52.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
37619
|
+
), /* @__PURE__ */ import_react52.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react52.default.createElement(
|
|
37319
37620
|
"input",
|
|
37320
37621
|
{
|
|
37321
37622
|
type: "range",
|
|
@@ -37326,26 +37627,26 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
|
|
|
37326
37627
|
value: rate,
|
|
37327
37628
|
onChange: (e) => setRate(Number(e.target.value))
|
|
37328
37629
|
}
|
|
37329
|
-
), /* @__PURE__ */
|
|
37630
|
+
), /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react52.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
37330
37631
|
handleSpeak();
|
|
37331
37632
|
setShowPanel(false);
|
|
37332
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
37633
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react52.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleResume, title: "Resume" }, "\u25B6") : /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handlePause, title: "Pause" }, "\u275A\u275A"), /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", onClick: handleStop, title: "Stop" }, "\u25A0")));
|
|
37333
37634
|
};
|
|
37334
37635
|
var TextToSpeech_default = TextToSpeech;
|
|
37335
37636
|
|
|
37336
37637
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
37337
|
-
var
|
|
37338
|
-
var SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
37638
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
37339
37639
|
var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
37340
|
-
const [listening, setListening] = (0,
|
|
37341
|
-
const [showPanel, setShowPanel] = (0,
|
|
37342
|
-
const [language, setLanguage] = (0,
|
|
37343
|
-
const [interim, setInterim] = (0,
|
|
37344
|
-
const recognitionRef = (0,
|
|
37345
|
-
const panelRef = (0,
|
|
37346
|
-
const isListeningRef = (0,
|
|
37640
|
+
const [listening, setListening] = (0, import_react53.useState)(false);
|
|
37641
|
+
const [showPanel, setShowPanel] = (0, import_react53.useState)(false);
|
|
37642
|
+
const [language, setLanguage] = (0, import_react53.useState)("en-US");
|
|
37643
|
+
const [interim, setInterim] = (0, import_react53.useState)("");
|
|
37644
|
+
const recognitionRef = (0, import_react53.useRef)(null);
|
|
37645
|
+
const panelRef = (0, import_react53.useRef)(null);
|
|
37646
|
+
const isListeningRef = (0, import_react53.useRef)(false);
|
|
37647
|
+
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
37347
37648
|
const supported = !!SpeechRecognitionAPI;
|
|
37348
|
-
(0,
|
|
37649
|
+
(0, import_react53.useEffect)(() => {
|
|
37349
37650
|
const handleClick = (e) => {
|
|
37350
37651
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
37351
37652
|
setShowPanel(false);
|
|
@@ -37354,7 +37655,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37354
37655
|
document.addEventListener("mousedown", handleClick);
|
|
37355
37656
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
37356
37657
|
}, []);
|
|
37357
|
-
const createRecognition = (0,
|
|
37658
|
+
const createRecognition = (0, import_react53.useCallback)(() => {
|
|
37358
37659
|
if (!supported) return null;
|
|
37359
37660
|
const recognition = new SpeechRecognitionAPI();
|
|
37360
37661
|
recognition.lang = language;
|
|
@@ -37363,7 +37664,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37363
37664
|
recognition.maxAlternatives = 1;
|
|
37364
37665
|
return recognition;
|
|
37365
37666
|
}, [supported, language]);
|
|
37366
|
-
const startSession = (0,
|
|
37667
|
+
const startSession = (0, import_react53.useCallback)((recognition) => {
|
|
37367
37668
|
if (!recognition || !editor) return;
|
|
37368
37669
|
recognition.onresult = async (event) => {
|
|
37369
37670
|
let finalText = "";
|
|
@@ -37418,7 +37719,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37418
37719
|
}
|
|
37419
37720
|
};
|
|
37420
37721
|
}, [editor, createRecognition, onSpeechToText]);
|
|
37421
|
-
const startListening = (0,
|
|
37722
|
+
const startListening = (0, import_react53.useCallback)(() => {
|
|
37422
37723
|
if (!supported || !editor) return;
|
|
37423
37724
|
const recognition = createRecognition();
|
|
37424
37725
|
if (!recognition) return;
|
|
@@ -37434,7 +37735,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37434
37735
|
setListening(false);
|
|
37435
37736
|
}
|
|
37436
37737
|
}, [supported, editor, createRecognition, startSession]);
|
|
37437
|
-
const stopListening = (0,
|
|
37738
|
+
const stopListening = (0, import_react53.useCallback)(() => {
|
|
37438
37739
|
isListeningRef.current = false;
|
|
37439
37740
|
if (recognitionRef.current) {
|
|
37440
37741
|
try {
|
|
@@ -37447,7 +37748,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37447
37748
|
setInterim("");
|
|
37448
37749
|
}, []);
|
|
37449
37750
|
if (!supported) {
|
|
37450
|
-
return /* @__PURE__ */
|
|
37751
|
+
return /* @__PURE__ */ import_react53.default.createElement("button", { className: "toolbar-btn", disabled: true, title: "Speech recognition not supported in this browser" }, "\u{1F3A4}");
|
|
37451
37752
|
}
|
|
37452
37753
|
const LANGUAGES2 = [
|
|
37453
37754
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -37469,7 +37770,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37469
37770
|
{ code: "kn-IN", label: "Kannada" },
|
|
37470
37771
|
{ code: "ml-IN", label: "Malayalam" }
|
|
37471
37772
|
];
|
|
37472
|
-
return /* @__PURE__ */
|
|
37773
|
+
return /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react53.default.createElement(
|
|
37473
37774
|
"button",
|
|
37474
37775
|
{
|
|
37475
37776
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -37483,20 +37784,20 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
|
|
|
37483
37784
|
title: listening ? "Stop recording" : "Speech to Text"
|
|
37484
37785
|
},
|
|
37485
37786
|
"\u{1F3A4}"
|
|
37486
|
-
), showPanel && !listening && /* @__PURE__ */
|
|
37787
|
+
), showPanel && !listening && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react53.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react53.default.createElement(
|
|
37487
37788
|
"select",
|
|
37488
37789
|
{
|
|
37489
37790
|
className: "stt-select",
|
|
37490
37791
|
value: language,
|
|
37491
37792
|
onChange: (e) => setLanguage(e.target.value)
|
|
37492
37793
|
},
|
|
37493
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
37494
|
-
), /* @__PURE__ */
|
|
37794
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react53.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
37795
|
+
), /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react53.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react53.default.createElement("div", { className: "stt-interim" }, interim));
|
|
37495
37796
|
};
|
|
37496
37797
|
var SpeechToText_default = SpeechToText;
|
|
37497
37798
|
|
|
37498
37799
|
// lib/RufousTextEditor/AICommands.tsx
|
|
37499
|
-
var
|
|
37800
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
37500
37801
|
var AI_COMMANDS = [
|
|
37501
37802
|
{ 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." },
|
|
37502
37803
|
{ id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
|
|
@@ -37543,16 +37844,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
37543
37844
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
37544
37845
|
};
|
|
37545
37846
|
var AICommands = ({ editor, onAICommand }) => {
|
|
37546
|
-
const [open, setOpen] = (0,
|
|
37547
|
-
const [showModal, setShowModal] = (0,
|
|
37548
|
-
const [loading, setLoading] = (0,
|
|
37549
|
-
const [promptText, setPromptText] = (0,
|
|
37550
|
-
const [resultText, setResultText] = (0,
|
|
37551
|
-
const [originalText, setOriginalText] = (0,
|
|
37552
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
37553
|
-
const [previousResults, setPreviousResults] = (0,
|
|
37554
|
-
const panelRef = (0,
|
|
37555
|
-
(0,
|
|
37847
|
+
const [open, setOpen] = (0, import_react54.useState)(false);
|
|
37848
|
+
const [showModal, setShowModal] = (0, import_react54.useState)(false);
|
|
37849
|
+
const [loading, setLoading] = (0, import_react54.useState)(false);
|
|
37850
|
+
const [promptText, setPromptText] = (0, import_react54.useState)("");
|
|
37851
|
+
const [resultText, setResultText] = (0, import_react54.useState)("");
|
|
37852
|
+
const [originalText, setOriginalText] = (0, import_react54.useState)("");
|
|
37853
|
+
const [selectionRange, setSelectionRange] = (0, import_react54.useState)(null);
|
|
37854
|
+
const [previousResults, setPreviousResults] = (0, import_react54.useState)([]);
|
|
37855
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
37856
|
+
(0, import_react54.useEffect)(() => {
|
|
37556
37857
|
const handleClick = (e) => {
|
|
37557
37858
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
37558
37859
|
setOpen(false);
|
|
@@ -37561,7 +37862,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37561
37862
|
document.addEventListener("mousedown", handleClick);
|
|
37562
37863
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
37563
37864
|
}, []);
|
|
37564
|
-
const getSelectedText = (0,
|
|
37865
|
+
const getSelectedText = (0, import_react54.useCallback)(() => {
|
|
37565
37866
|
if (!editor) return { text: "", range: null };
|
|
37566
37867
|
const { from, to, empty } = editor.state.selection;
|
|
37567
37868
|
if (!empty) {
|
|
@@ -37569,7 +37870,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37569
37870
|
}
|
|
37570
37871
|
return { text: editor.getText(), range: null };
|
|
37571
37872
|
}, [editor]);
|
|
37572
|
-
const fetchAIResult = (0,
|
|
37873
|
+
const fetchAIResult = (0, import_react54.useCallback)(async (prompt, text, prevResults = []) => {
|
|
37573
37874
|
setLoading(true);
|
|
37574
37875
|
setResultText("");
|
|
37575
37876
|
try {
|
|
@@ -37587,7 +37888,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37587
37888
|
setLoading(false);
|
|
37588
37889
|
}
|
|
37589
37890
|
}, [onAICommand]);
|
|
37590
|
-
const handleCommandSelect = (0,
|
|
37891
|
+
const handleCommandSelect = (0, import_react54.useCallback)((command) => {
|
|
37591
37892
|
const { text, range } = getSelectedText();
|
|
37592
37893
|
if (!text.trim()) return;
|
|
37593
37894
|
setOriginalText(text);
|
|
@@ -37598,7 +37899,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37598
37899
|
setShowModal(true);
|
|
37599
37900
|
fetchAIResult(command.prompt, text, []);
|
|
37600
37901
|
}, [getSelectedText, fetchAIResult]);
|
|
37601
|
-
const handleInsert = (0,
|
|
37902
|
+
const handleInsert = (0, import_react54.useCallback)(() => {
|
|
37602
37903
|
if (!resultText || !editor) return;
|
|
37603
37904
|
if (selectionRange) {
|
|
37604
37905
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -37608,7 +37909,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37608
37909
|
setShowModal(false);
|
|
37609
37910
|
setResultText("");
|
|
37610
37911
|
}, [editor, resultText, selectionRange]);
|
|
37611
|
-
const handleInsertAfter = (0,
|
|
37912
|
+
const handleInsertAfter = (0, import_react54.useCallback)(() => {
|
|
37612
37913
|
if (!resultText || !editor) return;
|
|
37613
37914
|
if (selectionRange) {
|
|
37614
37915
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -37623,11 +37924,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37623
37924
|
setShowModal(false);
|
|
37624
37925
|
setResultText("");
|
|
37625
37926
|
}, [editor, resultText, selectionRange]);
|
|
37626
|
-
const handleRefresh = (0,
|
|
37927
|
+
const handleRefresh = (0, import_react54.useCallback)(() => {
|
|
37627
37928
|
if (!originalText.trim()) return;
|
|
37628
37929
|
fetchAIResult(promptText, originalText, previousResults);
|
|
37629
37930
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
37630
|
-
const handleCancel = (0,
|
|
37931
|
+
const handleCancel = (0, import_react54.useCallback)(() => {
|
|
37631
37932
|
setShowModal(false);
|
|
37632
37933
|
setResultText("");
|
|
37633
37934
|
setPromptText("");
|
|
@@ -37636,16 +37937,16 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37636
37937
|
setPreviousResults([]);
|
|
37637
37938
|
}, []);
|
|
37638
37939
|
if (!editor) return null;
|
|
37639
|
-
return /* @__PURE__ */
|
|
37940
|
+
return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(
|
|
37640
37941
|
"button",
|
|
37641
37942
|
{
|
|
37642
37943
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
37643
37944
|
onClick: () => setOpen(!open),
|
|
37644
37945
|
title: "AI Commands"
|
|
37645
37946
|
},
|
|
37646
|
-
/* @__PURE__ */
|
|
37647
|
-
/* @__PURE__ */
|
|
37648
|
-
), open && /* @__PURE__ */
|
|
37947
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react54.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" })),
|
|
37948
|
+
/* @__PURE__ */ import_react54.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
37949
|
+
), open && /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd2) => /* @__PURE__ */ import_react54.default.createElement(
|
|
37649
37950
|
"button",
|
|
37650
37951
|
{
|
|
37651
37952
|
key: cmd2.id,
|
|
@@ -37653,7 +37954,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37653
37954
|
onClick: () => handleCommandSelect(cmd2)
|
|
37654
37955
|
},
|
|
37655
37956
|
cmd2.label
|
|
37656
|
-
))), /* @__PURE__ */
|
|
37957
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react54.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
37657
37958
|
"textarea",
|
|
37658
37959
|
{
|
|
37659
37960
|
className: "ai-modal-prompt",
|
|
@@ -37661,7 +37962,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37661
37962
|
onChange: (e) => setPromptText(e.target.value),
|
|
37662
37963
|
rows: 3
|
|
37663
37964
|
}
|
|
37664
|
-
), /* @__PURE__ */
|
|
37965
|
+
), /* @__PURE__ */ import_react54.default.createElement(
|
|
37665
37966
|
"button",
|
|
37666
37967
|
{
|
|
37667
37968
|
className: "ai-modal-robot-btn",
|
|
@@ -37669,8 +37970,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37669
37970
|
disabled: loading,
|
|
37670
37971
|
title: "Run with custom prompt"
|
|
37671
37972
|
},
|
|
37672
|
-
/* @__PURE__ */
|
|
37673
|
-
))), /* @__PURE__ */
|
|
37973
|
+
/* @__PURE__ */ import_react54.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react54.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M8 7h8" }))
|
|
37974
|
+
))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
37674
37975
|
"button",
|
|
37675
37976
|
{
|
|
37676
37977
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -37678,7 +37979,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37678
37979
|
disabled: loading || !resultText
|
|
37679
37980
|
},
|
|
37680
37981
|
"Insert"
|
|
37681
|
-
), /* @__PURE__ */
|
|
37982
|
+
), /* @__PURE__ */ import_react54.default.createElement(
|
|
37682
37983
|
"button",
|
|
37683
37984
|
{
|
|
37684
37985
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -37686,7 +37987,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37686
37987
|
disabled: loading || !resultText
|
|
37687
37988
|
},
|
|
37688
37989
|
"Insert After"
|
|
37689
|
-
), /* @__PURE__ */
|
|
37990
|
+
), /* @__PURE__ */ import_react54.default.createElement(
|
|
37690
37991
|
"button",
|
|
37691
37992
|
{
|
|
37692
37993
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
@@ -37694,13 +37995,13 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
37694
37995
|
disabled: loading,
|
|
37695
37996
|
title: "Generate another response"
|
|
37696
37997
|
},
|
|
37697
|
-
/* @__PURE__ */
|
|
37698
|
-
)), /* @__PURE__ */
|
|
37998
|
+
/* @__PURE__ */ import_react54.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_react54.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
37999
|
+
)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react54.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))));
|
|
37699
38000
|
};
|
|
37700
38001
|
var AICommands_default = AICommands;
|
|
37701
38002
|
|
|
37702
38003
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
37703
|
-
var
|
|
38004
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
37704
38005
|
var LANGUAGES = [
|
|
37705
38006
|
{ code: "af", name: "Afrikaans" },
|
|
37706
38007
|
{ code: "sq", name: "Albanian" },
|
|
@@ -37839,16 +38140,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
37839
38140
|
return null;
|
|
37840
38141
|
}
|
|
37841
38142
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
37842
|
-
const [sourceLang, setSourceLang] = (0,
|
|
37843
|
-
const [targetLang, setTargetLang] = (0,
|
|
37844
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
37845
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
37846
|
-
const [translating, setTranslating] = (0,
|
|
37847
|
-
const [error2, setError] = (0,
|
|
37848
|
-
const filteredSource = (0,
|
|
38143
|
+
const [sourceLang, setSourceLang] = (0, import_react55.useState)(initialSource || "en");
|
|
38144
|
+
const [targetLang, setTargetLang] = (0, import_react55.useState)(initialTarget || "hi");
|
|
38145
|
+
const [sourceFilter, setSourceFilter] = (0, import_react55.useState)("");
|
|
38146
|
+
const [targetFilter, setTargetFilter] = (0, import_react55.useState)("");
|
|
38147
|
+
const [translating, setTranslating] = (0, import_react55.useState)(false);
|
|
38148
|
+
const [error2, setError] = (0, import_react55.useState)("");
|
|
38149
|
+
const filteredSource = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
37849
38150
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
37850
38151
|
), [sourceFilter]);
|
|
37851
|
-
const filteredTarget = (0,
|
|
38152
|
+
const filteredTarget = (0, import_react55.useMemo)(() => LANGUAGES.filter(
|
|
37852
38153
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
37853
38154
|
), [targetFilter]);
|
|
37854
38155
|
const handleSwap = () => {
|
|
@@ -37891,7 +38192,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
37891
38192
|
setTranslating(false);
|
|
37892
38193
|
}
|
|
37893
38194
|
};
|
|
37894
|
-
return /* @__PURE__ */
|
|
38195
|
+
return /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react55.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
37895
38196
|
"input",
|
|
37896
38197
|
{
|
|
37897
38198
|
type: "text",
|
|
@@ -37900,16 +38201,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
37900
38201
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
37901
38202
|
className: "translate-filter-input"
|
|
37902
38203
|
}
|
|
37903
|
-
)), /* @__PURE__ */
|
|
38204
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang2) => /* @__PURE__ */ import_react55.default.createElement(
|
|
37904
38205
|
"button",
|
|
37905
38206
|
{
|
|
37906
38207
|
key: lang2.code,
|
|
37907
38208
|
className: `translate-item ${sourceLang === lang2.code ? "active" : ""}`,
|
|
37908
38209
|
onClick: () => setSourceLang(lang2.code)
|
|
37909
38210
|
},
|
|
37910
|
-
/* @__PURE__ */
|
|
37911
|
-
/* @__PURE__ */
|
|
37912
|
-
)))), /* @__PURE__ */
|
|
38211
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang2.code),
|
|
38212
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang2.name)
|
|
38213
|
+
)))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
37913
38214
|
"input",
|
|
37914
38215
|
{
|
|
37915
38216
|
type: "text",
|
|
@@ -37918,16 +38219,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
37918
38219
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
37919
38220
|
className: "translate-filter-input"
|
|
37920
38221
|
}
|
|
37921
|
-
)), /* @__PURE__ */
|
|
38222
|
+
)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang2) => /* @__PURE__ */ import_react55.default.createElement(
|
|
37922
38223
|
"button",
|
|
37923
38224
|
{
|
|
37924
38225
|
key: lang2.code,
|
|
37925
38226
|
className: `translate-item ${targetLang === lang2.code ? "active" : ""}`,
|
|
37926
38227
|
onClick: () => setTargetLang(lang2.code)
|
|
37927
38228
|
},
|
|
37928
|
-
/* @__PURE__ */
|
|
37929
|
-
/* @__PURE__ */
|
|
37930
|
-
))))), error2 && /* @__PURE__ */
|
|
38229
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-code" }, lang2.code),
|
|
38230
|
+
/* @__PURE__ */ import_react55.default.createElement("span", { className: "translate-name" }, lang2.name)
|
|
38231
|
+
))))), error2 && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-error" }, error2)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "\xD7 Cancel")), /* @__PURE__ */ import_react55.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "\u2714 Save"))));
|
|
37931
38232
|
};
|
|
37932
38233
|
var TranslateModal_default = TranslateModal;
|
|
37933
38234
|
|
|
@@ -38284,9 +38585,9 @@ var Fragment = class _Fragment {
|
|
|
38284
38585
|
};
|
|
38285
38586
|
Fragment.empty = new Fragment([], 0);
|
|
38286
38587
|
var found = { index: 0, offset: 0 };
|
|
38287
|
-
function retIndex(index,
|
|
38588
|
+
function retIndex(index, offset3) {
|
|
38288
38589
|
found.index = index;
|
|
38289
|
-
found.offset =
|
|
38590
|
+
found.offset = offset3;
|
|
38290
38591
|
return found;
|
|
38291
38592
|
}
|
|
38292
38593
|
function compareDeep(a, b) {
|
|
@@ -38524,25 +38825,25 @@ var Slice = class _Slice {
|
|
|
38524
38825
|
};
|
|
38525
38826
|
Slice.empty = new Slice(Fragment.empty, 0, 0);
|
|
38526
38827
|
function removeRange(content, from, to) {
|
|
38527
|
-
let { index, offset:
|
|
38828
|
+
let { index, offset: offset3 } = content.findIndex(from), child = content.maybeChild(index);
|
|
38528
38829
|
let { index: indexTo, offset: offsetTo } = content.findIndex(to);
|
|
38529
|
-
if (
|
|
38830
|
+
if (offset3 == from || child.isText) {
|
|
38530
38831
|
if (offsetTo != to && !content.child(indexTo).isText)
|
|
38531
38832
|
throw new RangeError("Removing non-flat range");
|
|
38532
38833
|
return content.cut(0, from).append(content.cut(to));
|
|
38533
38834
|
}
|
|
38534
38835
|
if (index != indexTo)
|
|
38535
38836
|
throw new RangeError("Removing non-flat range");
|
|
38536
|
-
return content.replaceChild(index, child.copy(removeRange(child.content, from -
|
|
38837
|
+
return content.replaceChild(index, child.copy(removeRange(child.content, from - offset3 - 1, to - offset3 - 1)));
|
|
38537
38838
|
}
|
|
38538
38839
|
function insertInto(content, dist, insert, parent) {
|
|
38539
|
-
let { index, offset:
|
|
38540
|
-
if (
|
|
38840
|
+
let { index, offset: offset3 } = content.findIndex(dist), child = content.maybeChild(index);
|
|
38841
|
+
if (offset3 == dist || child.isText) {
|
|
38541
38842
|
if (parent && !parent.canReplace(index, index, insert))
|
|
38542
38843
|
return null;
|
|
38543
38844
|
return content.cut(0, dist).append(insert).append(content.cut(dist));
|
|
38544
38845
|
}
|
|
38545
|
-
let inner = insertInto(child.content, dist -
|
|
38846
|
+
let inner = insertInto(child.content, dist - offset3 - 1, insert, child);
|
|
38546
38847
|
return inner && content.replaceChild(index, child.copy(inner));
|
|
38547
38848
|
}
|
|
38548
38849
|
function replace($from, $to, slice) {
|
|
@@ -38884,16 +39185,16 @@ var ResolvedPos = class _ResolvedPos {
|
|
|
38884
39185
|
let path = [];
|
|
38885
39186
|
let start = 0, parentOffset = pos;
|
|
38886
39187
|
for (let node = doc; ; ) {
|
|
38887
|
-
let { index, offset:
|
|
38888
|
-
let rem = parentOffset -
|
|
38889
|
-
path.push(node, index, start +
|
|
39188
|
+
let { index, offset: offset3 } = node.content.findIndex(parentOffset);
|
|
39189
|
+
let rem = parentOffset - offset3;
|
|
39190
|
+
path.push(node, index, start + offset3);
|
|
38890
39191
|
if (!rem)
|
|
38891
39192
|
break;
|
|
38892
39193
|
node = node.child(index);
|
|
38893
39194
|
if (node.isText)
|
|
38894
39195
|
break;
|
|
38895
39196
|
parentOffset = rem - 1;
|
|
38896
|
-
start +=
|
|
39197
|
+
start += offset3 + 1;
|
|
38897
39198
|
}
|
|
38898
39199
|
return new _ResolvedPos(pos, path, parentOffset);
|
|
38899
39200
|
}
|
|
@@ -39145,13 +39446,13 @@ var Node2 = class _Node {
|
|
|
39145
39446
|
*/
|
|
39146
39447
|
nodeAt(pos) {
|
|
39147
39448
|
for (let node = this; ; ) {
|
|
39148
|
-
let { index, offset:
|
|
39449
|
+
let { index, offset: offset3 } = node.content.findIndex(pos);
|
|
39149
39450
|
node = node.maybeChild(index);
|
|
39150
39451
|
if (!node)
|
|
39151
39452
|
return null;
|
|
39152
|
-
if (
|
|
39453
|
+
if (offset3 == pos || node.isText)
|
|
39153
39454
|
return node;
|
|
39154
|
-
pos -=
|
|
39455
|
+
pos -= offset3 + 1;
|
|
39155
39456
|
}
|
|
39156
39457
|
}
|
|
39157
39458
|
/**
|
|
@@ -39160,8 +39461,8 @@ var Node2 = class _Node {
|
|
|
39160
39461
|
node.
|
|
39161
39462
|
*/
|
|
39162
39463
|
childAfter(pos) {
|
|
39163
|
-
let { index, offset:
|
|
39164
|
-
return { node: this.content.maybeChild(index), index, offset:
|
|
39464
|
+
let { index, offset: offset3 } = this.content.findIndex(pos);
|
|
39465
|
+
return { node: this.content.maybeChild(index), index, offset: offset3 };
|
|
39165
39466
|
}
|
|
39166
39467
|
/**
|
|
39167
39468
|
Find the (direct) child node before the given offset, if any,
|
|
@@ -39171,11 +39472,11 @@ var Node2 = class _Node {
|
|
|
39171
39472
|
childBefore(pos) {
|
|
39172
39473
|
if (pos == 0)
|
|
39173
39474
|
return { node: null, index: 0, offset: 0 };
|
|
39174
|
-
let { index, offset:
|
|
39175
|
-
if (
|
|
39176
|
-
return { node: this.content.child(index), index, offset:
|
|
39475
|
+
let { index, offset: offset3 } = this.content.findIndex(pos);
|
|
39476
|
+
if (offset3 < pos)
|
|
39477
|
+
return { node: this.content.child(index), index, offset: offset3 };
|
|
39177
39478
|
let node = this.content.child(index - 1);
|
|
39178
|
-
return { node, index: index - 1, offset:
|
|
39479
|
+
return { node, index: index - 1, offset: offset3 - node.nodeSize };
|
|
39179
39480
|
}
|
|
39180
39481
|
/**
|
|
39181
39482
|
Resolve the given position in the document, returning an
|
|
@@ -39780,8 +40081,8 @@ function checkForDeadEnds(match, stream) {
|
|
|
39780
40081
|
// node_modules/prosemirror-transform/dist/index.js
|
|
39781
40082
|
var lower16 = 65535;
|
|
39782
40083
|
var factor16 = Math.pow(2, 16);
|
|
39783
|
-
function makeRecover(index,
|
|
39784
|
-
return index +
|
|
40084
|
+
function makeRecover(index, offset3) {
|
|
40085
|
+
return index + offset3 * factor16;
|
|
39785
40086
|
}
|
|
39786
40087
|
function recoverIndex(value) {
|
|
39787
40088
|
return value & lower16;
|
|
@@ -41280,37 +41581,37 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
41280
41581
|
});
|
|
41281
41582
|
|
|
41282
41583
|
// lib/RufousTextEditor/icons.tsx
|
|
41283
|
-
var
|
|
41584
|
+
var React112 = __toESM(require("react"), 1);
|
|
41284
41585
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
41285
|
-
var IconUndo = () => /* @__PURE__ */
|
|
41286
|
-
var IconRedo = () => /* @__PURE__ */
|
|
41287
|
-
var IconBold = () => /* @__PURE__ */
|
|
41288
|
-
var IconItalic = () => /* @__PURE__ */
|
|
41289
|
-
var IconLink = () => /* @__PURE__ */
|
|
41290
|
-
var IconStrike = () => /* @__PURE__ */
|
|
41291
|
-
var IconHeading = () => /* @__PURE__ */
|
|
41292
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
41293
|
-
var IconColor = () => /* @__PURE__ */
|
|
41294
|
-
var IconFont = () => /* @__PURE__ */
|
|
41295
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
41296
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
41297
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
41298
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
41299
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
41300
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
41301
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
41302
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
41303
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
41304
|
-
var IconTable = () => /* @__PURE__ */
|
|
41305
|
-
var IconImage = () => /* @__PURE__ */
|
|
41306
|
-
var IconVideo = () => /* @__PURE__ */
|
|
41307
|
-
var IconCut = () => /* @__PURE__ */
|
|
41308
|
-
var IconCopy = () => /* @__PURE__ */
|
|
41309
|
-
var IconCode = () => /* @__PURE__ */
|
|
41310
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
41311
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
41312
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
41313
|
-
var IconCheck = () => /* @__PURE__ */
|
|
41586
|
+
var IconUndo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41587
|
+
var IconRedo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41588
|
+
var IconBold = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41589
|
+
var IconItalic = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
41590
|
+
var IconLink = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41591
|
+
var IconStrike = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41592
|
+
var IconHeading = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
41593
|
+
var IconFontSize = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
41594
|
+
var IconColor = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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__ */ React112.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
41595
|
+
var IconFont = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41596
|
+
var IconLineHeight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41597
|
+
var IconBulletList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41598
|
+
var IconOrderedList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
41599
|
+
var IconAlignLeft = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
41600
|
+
var IconAlignCenter = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
41601
|
+
var IconAlignRight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
41602
|
+
var IconAlignJustify = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
41603
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
41604
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
41605
|
+
var IconTable = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41606
|
+
var IconImage = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41607
|
+
var IconVideo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41608
|
+
var IconCut = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41609
|
+
var IconCopy = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41610
|
+
var IconCode = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41611
|
+
var IconFullscreen = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
41612
|
+
var IconTranslate = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41613
|
+
var IconTaskList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.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" }));
|
|
41614
|
+
var IconCheck = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
41314
41615
|
|
|
41315
41616
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
41316
41617
|
var COLOR_PALETTE = [
|
|
@@ -41448,16 +41749,16 @@ var SPECIAL_CHARS = [
|
|
|
41448
41749
|
"\xA2"
|
|
41449
41750
|
];
|
|
41450
41751
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
41451
|
-
const [open, setOpen] = (0,
|
|
41452
|
-
const ref = (0,
|
|
41453
|
-
(0,
|
|
41752
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
41753
|
+
const ref = (0, import_react56.useRef)(null);
|
|
41754
|
+
(0, import_react56.useEffect)(() => {
|
|
41454
41755
|
const handleClick = (e) => {
|
|
41455
41756
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
41456
41757
|
};
|
|
41457
41758
|
document.addEventListener("mousedown", handleClick);
|
|
41458
41759
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
41459
41760
|
}, []);
|
|
41460
|
-
return /* @__PURE__ */
|
|
41761
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41461
41762
|
"button",
|
|
41462
41763
|
{
|
|
41463
41764
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
@@ -41465,12 +41766,12 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
41465
41766
|
title: trigger.title
|
|
41466
41767
|
},
|
|
41467
41768
|
trigger.label,
|
|
41468
|
-
/* @__PURE__ */
|
|
41469
|
-
), open && /* @__PURE__ */
|
|
41769
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
41770
|
+
), open && /* @__PURE__ */ import_react56.default.createElement("div", { className: "dropdown-menu", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children));
|
|
41470
41771
|
};
|
|
41471
41772
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
41472
|
-
const [activeTab, setActiveTab] = (0,
|
|
41473
|
-
const [url2, setUrl] = (0,
|
|
41773
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("link");
|
|
41774
|
+
const [url2, setUrl] = (0, import_react56.useState)("");
|
|
41474
41775
|
const extractIframeSrc = (html) => {
|
|
41475
41776
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
41476
41777
|
return match ? match[1] : null;
|
|
@@ -41497,14 +41798,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
41497
41798
|
}
|
|
41498
41799
|
onClose();
|
|
41499
41800
|
};
|
|
41500
|
-
return /* @__PURE__ */
|
|
41801
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41501
41802
|
"button",
|
|
41502
41803
|
{
|
|
41503
41804
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
41504
41805
|
onClick: () => setActiveTab("link")
|
|
41505
41806
|
},
|
|
41506
41807
|
"\u{1F517} Link"
|
|
41507
|
-
), /* @__PURE__ */
|
|
41808
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41508
41809
|
"button",
|
|
41509
41810
|
{
|
|
41510
41811
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -41512,7 +41813,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
41512
41813
|
},
|
|
41513
41814
|
"</>",
|
|
41514
41815
|
" Code"
|
|
41515
|
-
)), /* @__PURE__ */
|
|
41816
|
+
)), /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react56.default.createElement(
|
|
41516
41817
|
"input",
|
|
41517
41818
|
{
|
|
41518
41819
|
type: "text",
|
|
@@ -41523,7 +41824,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
41523
41824
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
41524
41825
|
autoFocus: true
|
|
41525
41826
|
}
|
|
41526
|
-
) : /* @__PURE__ */
|
|
41827
|
+
) : /* @__PURE__ */ import_react56.default.createElement(
|
|
41527
41828
|
"textarea",
|
|
41528
41829
|
{
|
|
41529
41830
|
className: "insert-panel-textarea",
|
|
@@ -41532,13 +41833,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
41532
41833
|
onChange: (e) => setUrl(e.target.value),
|
|
41533
41834
|
rows: 3
|
|
41534
41835
|
}
|
|
41535
|
-
), /* @__PURE__ */
|
|
41836
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
41536
41837
|
};
|
|
41537
41838
|
var ImagePanel = ({ editor, onClose }) => {
|
|
41538
|
-
const [activeTab, setActiveTab] = (0,
|
|
41539
|
-
const [url2, setUrl] = (0,
|
|
41540
|
-
const [isDragging, setIsDragging] = (0,
|
|
41541
|
-
const fileInputRef = (0,
|
|
41839
|
+
const [activeTab, setActiveTab] = (0, import_react56.useState)("upload");
|
|
41840
|
+
const [url2, setUrl] = (0, import_react56.useState)("");
|
|
41841
|
+
const [isDragging, setIsDragging] = (0, import_react56.useState)(false);
|
|
41842
|
+
const fileInputRef = (0, import_react56.useRef)(null);
|
|
41542
41843
|
const insertImageFromFile = (file) => {
|
|
41543
41844
|
if (!file || !editor) return;
|
|
41544
41845
|
const reader = new FileReader();
|
|
@@ -41565,21 +41866,21 @@ var ImagePanel = ({ editor, onClose }) => {
|
|
|
41565
41866
|
editor.chain().focus().setImage({ src: url2 }).run();
|
|
41566
41867
|
onClose();
|
|
41567
41868
|
};
|
|
41568
|
-
return /* @__PURE__ */
|
|
41869
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41569
41870
|
"button",
|
|
41570
41871
|
{
|
|
41571
41872
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
41572
41873
|
onClick: () => setActiveTab("upload")
|
|
41573
41874
|
},
|
|
41574
41875
|
"\u2B06 Upload"
|
|
41575
|
-
), /* @__PURE__ */
|
|
41876
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41576
41877
|
"button",
|
|
41577
41878
|
{
|
|
41578
41879
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
41579
41880
|
onClick: () => setActiveTab("url")
|
|
41580
41881
|
},
|
|
41581
41882
|
"\u{1F517} URL"
|
|
41582
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
41883
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
|
|
41583
41884
|
"div",
|
|
41584
41885
|
{
|
|
41585
41886
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -41591,9 +41892,9 @@ var ImagePanel = ({ editor, onClose }) => {
|
|
|
41591
41892
|
onDrop: handleDrop,
|
|
41592
41893
|
onClick: () => fileInputRef.current?.click()
|
|
41593
41894
|
},
|
|
41594
|
-
/* @__PURE__ */
|
|
41595
|
-
/* @__PURE__ */
|
|
41596
|
-
), /* @__PURE__ */
|
|
41895
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
41896
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
41897
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41597
41898
|
"input",
|
|
41598
41899
|
{
|
|
41599
41900
|
ref: fileInputRef,
|
|
@@ -41602,7 +41903,7 @@ var ImagePanel = ({ editor, onClose }) => {
|
|
|
41602
41903
|
style: { display: "none" },
|
|
41603
41904
|
onChange: handleFileSelect
|
|
41604
41905
|
}
|
|
41605
|
-
)) : /* @__PURE__ */
|
|
41906
|
+
)) : /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react56.default.createElement(
|
|
41606
41907
|
"input",
|
|
41607
41908
|
{
|
|
41608
41909
|
type: "text",
|
|
@@ -41613,18 +41914,18 @@ var ImagePanel = ({ editor, onClose }) => {
|
|
|
41613
41914
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
41614
41915
|
autoFocus: true
|
|
41615
41916
|
}
|
|
41616
|
-
), /* @__PURE__ */
|
|
41917
|
+
), /* @__PURE__ */ import_react56.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
41617
41918
|
};
|
|
41618
41919
|
var MAX_GRID = 10;
|
|
41619
41920
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
41620
|
-
const [hoverRow, setHoverRow] = (0,
|
|
41621
|
-
const [hoverCol, setHoverCol] = (0,
|
|
41921
|
+
const [hoverRow, setHoverRow] = (0, import_react56.useState)(0);
|
|
41922
|
+
const [hoverCol, setHoverCol] = (0, import_react56.useState)(0);
|
|
41622
41923
|
const handleInsert = () => {
|
|
41623
41924
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
41624
41925
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
41625
41926
|
onClose();
|
|
41626
41927
|
};
|
|
41627
|
-
return /* @__PURE__ */
|
|
41928
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41628
41929
|
"div",
|
|
41629
41930
|
{
|
|
41630
41931
|
className: "table-grid",
|
|
@@ -41633,7 +41934,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
41633
41934
|
setHoverCol(0);
|
|
41634
41935
|
}
|
|
41635
41936
|
},
|
|
41636
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
41937
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react56.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react56.default.createElement(
|
|
41637
41938
|
"div",
|
|
41638
41939
|
{
|
|
41639
41940
|
key: c,
|
|
@@ -41645,7 +41946,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
41645
41946
|
onClick: handleInsert
|
|
41646
41947
|
}
|
|
41647
41948
|
))))
|
|
41648
|
-
), /* @__PURE__ */
|
|
41949
|
+
), /* @__PURE__ */ import_react56.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react56.default.createElement(
|
|
41649
41950
|
"button",
|
|
41650
41951
|
{
|
|
41651
41952
|
className: "table-grid-submit",
|
|
@@ -41656,9 +41957,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
41656
41957
|
)));
|
|
41657
41958
|
};
|
|
41658
41959
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
41659
|
-
const [tab, setTab] = (0,
|
|
41660
|
-
const [activeBg, setActiveBg] = (0,
|
|
41661
|
-
const [activeText, setActiveText] = (0,
|
|
41960
|
+
const [tab, setTab] = (0, import_react56.useState)("background");
|
|
41961
|
+
const [activeBg, setActiveBg] = (0, import_react56.useState)(() => editor.getAttributes("highlight").color || null);
|
|
41962
|
+
const [activeText, setActiveText] = (0, import_react56.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
41662
41963
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
41663
41964
|
const applyColor = (color2) => {
|
|
41664
41965
|
if (tab === "background") {
|
|
@@ -41679,21 +41980,21 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
41679
41980
|
}
|
|
41680
41981
|
onClose();
|
|
41681
41982
|
};
|
|
41682
|
-
return /* @__PURE__ */
|
|
41983
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41683
41984
|
"button",
|
|
41684
41985
|
{
|
|
41685
41986
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
41686
41987
|
onClick: () => setTab("background")
|
|
41687
41988
|
},
|
|
41688
41989
|
"Background"
|
|
41689
|
-
), /* @__PURE__ */
|
|
41990
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41690
41991
|
"button",
|
|
41691
41992
|
{
|
|
41692
41993
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
41693
41994
|
onClick: () => setTab("text")
|
|
41694
41995
|
},
|
|
41695
41996
|
"Text"
|
|
41696
|
-
)), /* @__PURE__ */
|
|
41997
|
+
)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color2, i) => /* @__PURE__ */ import_react56.default.createElement(
|
|
41697
41998
|
"button",
|
|
41698
41999
|
{
|
|
41699
42000
|
key: i,
|
|
@@ -41702,18 +42003,18 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
41702
42003
|
onClick: () => applyColor(color2),
|
|
41703
42004
|
title: color2
|
|
41704
42005
|
}
|
|
41705
|
-
))), /* @__PURE__ */
|
|
42006
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react56.default.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
|
|
41706
42007
|
};
|
|
41707
42008
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech }) => {
|
|
41708
|
-
const [, setEditorState] = (0,
|
|
41709
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
41710
|
-
(0,
|
|
42009
|
+
const [, setEditorState] = (0, import_react56.useState)(0);
|
|
42010
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react56.useState)(false);
|
|
42011
|
+
(0, import_react56.useEffect)(() => {
|
|
41711
42012
|
if (!editor) return;
|
|
41712
42013
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
41713
42014
|
editor.on("transaction", onTransaction);
|
|
41714
42015
|
return () => editor.off("transaction", onTransaction);
|
|
41715
42016
|
}, [editor]);
|
|
41716
|
-
const toggleFullscreen = (0,
|
|
42017
|
+
const toggleFullscreen = (0, import_react56.useCallback)(() => {
|
|
41717
42018
|
const wrapper = document.querySelector(".editor-wrapper");
|
|
41718
42019
|
if (!wrapper) return;
|
|
41719
42020
|
if (!isFullscreen) {
|
|
@@ -41723,16 +42024,16 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41723
42024
|
}
|
|
41724
42025
|
setIsFullscreen(!isFullscreen);
|
|
41725
42026
|
}, [isFullscreen]);
|
|
41726
|
-
const insertSpecialChar = (0,
|
|
42027
|
+
const insertSpecialChar = (0, import_react56.useCallback)((char) => {
|
|
41727
42028
|
if (!editor) return;
|
|
41728
42029
|
editor.chain().focus().insertContent(char).run();
|
|
41729
42030
|
}, [editor]);
|
|
41730
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
41731
|
-
const [translateSource, setTranslateSource] = (0,
|
|
41732
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
41733
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
41734
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
41735
|
-
const handleCopy = (0,
|
|
42031
|
+
const [copySuccess, setCopySuccess] = (0, import_react56.useState)(false);
|
|
42032
|
+
const [translateSource, setTranslateSource] = (0, import_react56.useState)("en");
|
|
42033
|
+
const [translateTarget, setTranslateTarget] = (0, import_react56.useState)("hi");
|
|
42034
|
+
const [translateStatus, setTranslateStatus] = (0, import_react56.useState)("");
|
|
42035
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react56.useState)(false);
|
|
42036
|
+
const handleCopy = (0, import_react56.useCallback)(async () => {
|
|
41736
42037
|
if (!editor) return;
|
|
41737
42038
|
const { from, to, empty } = editor.state.selection;
|
|
41738
42039
|
if (empty) return;
|
|
@@ -41747,7 +42048,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41747
42048
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
41748
42049
|
}
|
|
41749
42050
|
}, [editor]);
|
|
41750
|
-
const handleQuickTranslate = (0,
|
|
42051
|
+
const handleQuickTranslate = (0, import_react56.useCallback)(async () => {
|
|
41751
42052
|
if (!editor) return;
|
|
41752
42053
|
const { from, to, empty } = editor.state.selection;
|
|
41753
42054
|
if (empty) {
|
|
@@ -41781,7 +42082,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41781
42082
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
41782
42083
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
41783
42084
|
if (!editor) return null;
|
|
41784
|
-
return /* @__PURE__ */
|
|
42085
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-row" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
41785
42086
|
"button",
|
|
41786
42087
|
{
|
|
41787
42088
|
className: "toolbar-btn",
|
|
@@ -41789,8 +42090,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41789
42090
|
disabled: !editor.can().undo(),
|
|
41790
42091
|
title: "Undo (Ctrl+Z)"
|
|
41791
42092
|
},
|
|
41792
|
-
/* @__PURE__ */
|
|
41793
|
-
), /* @__PURE__ */
|
|
42093
|
+
/* @__PURE__ */ import_react56.default.createElement(IconUndo, null)
|
|
42094
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41794
42095
|
"button",
|
|
41795
42096
|
{
|
|
41796
42097
|
className: "toolbar-btn",
|
|
@@ -41798,17 +42099,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41798
42099
|
disabled: !editor.can().redo(),
|
|
41799
42100
|
title: "Redo (Ctrl+Y)"
|
|
41800
42101
|
},
|
|
41801
|
-
/* @__PURE__ */
|
|
41802
|
-
)), /* @__PURE__ */
|
|
42102
|
+
/* @__PURE__ */ import_react56.default.createElement(IconRedo, null)
|
|
42103
|
+
)), /* @__PURE__ */ import_react56.default.createElement(
|
|
41803
42104
|
Dropdown,
|
|
41804
42105
|
{
|
|
41805
|
-
trigger: { label: /* @__PURE__ */
|
|
42106
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
41806
42107
|
},
|
|
41807
|
-
/* @__PURE__ */
|
|
41808
|
-
/* @__PURE__ */
|
|
41809
|
-
/* @__PURE__ */
|
|
41810
|
-
/* @__PURE__ */
|
|
41811
|
-
/* @__PURE__ */
|
|
42108
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react56.default.createElement("s", null, "Strikethrough")),
|
|
42109
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react56.default.createElement("u", null, "Underline")),
|
|
42110
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sup", null, "2"), " Superscript"),
|
|
42111
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react56.default.createElement("sub", null, "2"), " Subscript"),
|
|
42112
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
41812
42113
|
e.preventDefault();
|
|
41813
42114
|
const chain = editor.chain().focus();
|
|
41814
42115
|
if (!editor.state.selection.empty) {
|
|
@@ -41824,16 +42125,16 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41824
42125
|
c.run();
|
|
41825
42126
|
}
|
|
41826
42127
|
} }, "\u2715 Clear formatting")
|
|
41827
|
-
), /* @__PURE__ */
|
|
42128
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41828
42129
|
Dropdown,
|
|
41829
42130
|
{
|
|
41830
42131
|
trigger: {
|
|
41831
|
-
label: /* @__PURE__ */
|
|
42132
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconHeading, null),
|
|
41832
42133
|
title: "Block type",
|
|
41833
42134
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
41834
42135
|
}
|
|
41835
42136
|
},
|
|
41836
|
-
/* @__PURE__ */
|
|
42137
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41837
42138
|
"button",
|
|
41838
42139
|
{
|
|
41839
42140
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -41841,7 +42142,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41841
42142
|
},
|
|
41842
42143
|
"\xB6 Paragraph"
|
|
41843
42144
|
),
|
|
41844
|
-
/* @__PURE__ */
|
|
42145
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41845
42146
|
"button",
|
|
41846
42147
|
{
|
|
41847
42148
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -41849,7 +42150,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41849
42150
|
},
|
|
41850
42151
|
"Heading 1"
|
|
41851
42152
|
),
|
|
41852
|
-
/* @__PURE__ */
|
|
42153
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41853
42154
|
"button",
|
|
41854
42155
|
{
|
|
41855
42156
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -41857,7 +42158,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41857
42158
|
},
|
|
41858
42159
|
"Heading 2"
|
|
41859
42160
|
),
|
|
41860
|
-
/* @__PURE__ */
|
|
42161
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41861
42162
|
"button",
|
|
41862
42163
|
{
|
|
41863
42164
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -41865,7 +42166,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41865
42166
|
},
|
|
41866
42167
|
"Heading 3"
|
|
41867
42168
|
),
|
|
41868
|
-
/* @__PURE__ */
|
|
42169
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41869
42170
|
"button",
|
|
41870
42171
|
{
|
|
41871
42172
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -41873,7 +42174,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41873
42174
|
},
|
|
41874
42175
|
"Heading 4"
|
|
41875
42176
|
),
|
|
41876
|
-
/* @__PURE__ */
|
|
42177
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41877
42178
|
"button",
|
|
41878
42179
|
{
|
|
41879
42180
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -41881,7 +42182,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41881
42182
|
},
|
|
41882
42183
|
"\u275E Blockquote"
|
|
41883
42184
|
),
|
|
41884
|
-
/* @__PURE__ */
|
|
42185
|
+
/* @__PURE__ */ import_react56.default.createElement(
|
|
41885
42186
|
"button",
|
|
41886
42187
|
{
|
|
41887
42188
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -41890,19 +42191,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41890
42191
|
"{ }",
|
|
41891
42192
|
" Code Block"
|
|
41892
42193
|
),
|
|
41893
|
-
/* @__PURE__ */
|
|
41894
|
-
), /* @__PURE__ */
|
|
42194
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
42195
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41895
42196
|
Dropdown,
|
|
41896
42197
|
{
|
|
41897
42198
|
trigger: {
|
|
41898
|
-
label: /* @__PURE__ */
|
|
42199
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFontSize, null),
|
|
41899
42200
|
title: "Font size"
|
|
41900
42201
|
}
|
|
41901
42202
|
},
|
|
41902
42203
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size3) => {
|
|
41903
42204
|
const sizeStr = `${size3}px`;
|
|
41904
42205
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
41905
|
-
return /* @__PURE__ */
|
|
42206
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
41906
42207
|
"button",
|
|
41907
42208
|
{
|
|
41908
42209
|
key: size3,
|
|
@@ -41918,27 +42219,27 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41918
42219
|
sizeStr
|
|
41919
42220
|
);
|
|
41920
42221
|
})
|
|
41921
|
-
), /* @__PURE__ */
|
|
42222
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41922
42223
|
Dropdown,
|
|
41923
42224
|
{
|
|
41924
42225
|
trigger: {
|
|
41925
|
-
label: /* @__PURE__ */
|
|
42226
|
+
label: /* @__PURE__ */ import_react56.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react56.default.createElement(IconColor, null)),
|
|
41926
42227
|
title: "Colors"
|
|
41927
42228
|
},
|
|
41928
42229
|
keepOpen: true
|
|
41929
42230
|
},
|
|
41930
|
-
(close2) => /* @__PURE__ */
|
|
41931
|
-
), /* @__PURE__ */
|
|
42231
|
+
(close2) => /* @__PURE__ */ import_react56.default.createElement(ColorPickerPanel, { editor, onClose: close2 })
|
|
42232
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41932
42233
|
Dropdown,
|
|
41933
42234
|
{
|
|
41934
42235
|
trigger: {
|
|
41935
|
-
label: /* @__PURE__ */
|
|
42236
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconFont, null),
|
|
41936
42237
|
title: "Font family"
|
|
41937
42238
|
}
|
|
41938
42239
|
},
|
|
41939
42240
|
FONT_FAMILIES.map((font2) => {
|
|
41940
42241
|
const isActive = editor.getAttributes("textStyle").fontFamily === font2;
|
|
41941
|
-
return /* @__PURE__ */
|
|
42242
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
41942
42243
|
"button",
|
|
41943
42244
|
{
|
|
41944
42245
|
key: font2,
|
|
@@ -41955,35 +42256,35 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41955
42256
|
font2
|
|
41956
42257
|
);
|
|
41957
42258
|
})
|
|
41958
|
-
), /* @__PURE__ */
|
|
42259
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41959
42260
|
"button",
|
|
41960
42261
|
{
|
|
41961
42262
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
41962
42263
|
onClick: () => editor.chain().focus().toggleBold().run(),
|
|
41963
42264
|
title: "Bold (Ctrl+B)"
|
|
41964
42265
|
},
|
|
41965
|
-
/* @__PURE__ */
|
|
41966
|
-
), /* @__PURE__ */
|
|
42266
|
+
/* @__PURE__ */ import_react56.default.createElement(IconBold, null)
|
|
42267
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41967
42268
|
"button",
|
|
41968
42269
|
{
|
|
41969
42270
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
41970
42271
|
onClick: () => editor.chain().focus().toggleItalic().run(),
|
|
41971
42272
|
title: "Italic (Ctrl+I)"
|
|
41972
42273
|
},
|
|
41973
|
-
/* @__PURE__ */
|
|
41974
|
-
), /* @__PURE__ */
|
|
42274
|
+
/* @__PURE__ */ import_react56.default.createElement(IconItalic, null)
|
|
42275
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41975
42276
|
"button",
|
|
41976
42277
|
{
|
|
41977
42278
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
41978
42279
|
onClick: setLink,
|
|
41979
42280
|
title: "Insert Link"
|
|
41980
42281
|
},
|
|
41981
|
-
/* @__PURE__ */
|
|
41982
|
-
), /* @__PURE__ */
|
|
42282
|
+
/* @__PURE__ */ import_react56.default.createElement(IconLink, null)
|
|
42283
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
41983
42284
|
Dropdown,
|
|
41984
42285
|
{
|
|
41985
42286
|
trigger: {
|
|
41986
|
-
label: /* @__PURE__ */
|
|
42287
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconLineHeight, null),
|
|
41987
42288
|
title: "Line height"
|
|
41988
42289
|
}
|
|
41989
42290
|
},
|
|
@@ -41991,7 +42292,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
41991
42292
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
41992
42293
|
const lhStr = String(lh);
|
|
41993
42294
|
const isActive = currentLH === lhStr;
|
|
41994
|
-
return /* @__PURE__ */
|
|
42295
|
+
return /* @__PURE__ */ import_react56.default.createElement(
|
|
41995
42296
|
"button",
|
|
41996
42297
|
{
|
|
41997
42298
|
key: lh,
|
|
@@ -42007,11 +42308,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42007
42308
|
lh
|
|
42008
42309
|
);
|
|
42009
42310
|
})
|
|
42010
|
-
), /* @__PURE__ */
|
|
42311
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42011
42312
|
Dropdown,
|
|
42012
42313
|
{
|
|
42013
42314
|
trigger: {
|
|
42014
|
-
label: /* @__PURE__ */
|
|
42315
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconBulletList, null),
|
|
42015
42316
|
title: "Insert Unordered List",
|
|
42016
42317
|
className: editor.isActive("bulletList") ? "is-active" : ""
|
|
42017
42318
|
}
|
|
@@ -42021,7 +42322,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42021
42322
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
42022
42323
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
42023
42324
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
42024
|
-
].map((item) => /* @__PURE__ */
|
|
42325
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
42025
42326
|
"button",
|
|
42026
42327
|
{
|
|
42027
42328
|
key: item.label,
|
|
@@ -42046,15 +42347,15 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42046
42347
|
}).run();
|
|
42047
42348
|
}
|
|
42048
42349
|
},
|
|
42049
|
-
/* @__PURE__ */
|
|
42350
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
42050
42351
|
" ",
|
|
42051
42352
|
item.label
|
|
42052
42353
|
))
|
|
42053
|
-
), /* @__PURE__ */
|
|
42354
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42054
42355
|
Dropdown,
|
|
42055
42356
|
{
|
|
42056
42357
|
trigger: {
|
|
42057
|
-
label: /* @__PURE__ */
|
|
42358
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconOrderedList, null),
|
|
42058
42359
|
title: "Insert Ordered List",
|
|
42059
42360
|
className: editor.isActive("orderedList") ? "is-active" : ""
|
|
42060
42361
|
}
|
|
@@ -42066,7 +42367,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42066
42367
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
42067
42368
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
42068
42369
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
42069
|
-
].map((item) => /* @__PURE__ */
|
|
42370
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
42070
42371
|
"button",
|
|
42071
42372
|
{
|
|
42072
42373
|
key: item.label,
|
|
@@ -42091,25 +42392,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42091
42392
|
}).run();
|
|
42092
42393
|
}
|
|
42093
42394
|
},
|
|
42094
|
-
/* @__PURE__ */
|
|
42395
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
42095
42396
|
" ",
|
|
42096
42397
|
item.label
|
|
42097
42398
|
))
|
|
42098
|
-
), /* @__PURE__ */
|
|
42399
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42099
42400
|
Dropdown,
|
|
42100
42401
|
{
|
|
42101
42402
|
trigger: {
|
|
42102
|
-
label: /* @__PURE__ */
|
|
42403
|
+
label: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null),
|
|
42103
42404
|
title: "Align",
|
|
42104
42405
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
42105
42406
|
}
|
|
42106
42407
|
},
|
|
42107
42408
|
[
|
|
42108
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
42109
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
42110
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
42111
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
42112
|
-
].map((item) => /* @__PURE__ */
|
|
42409
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignLeft, null) },
|
|
42410
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignCenter, null) },
|
|
42411
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignRight, null) },
|
|
42412
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react56.default.createElement(IconAlignJustify, null) }
|
|
42413
|
+
].map((item) => /* @__PURE__ */ import_react56.default.createElement(
|
|
42113
42414
|
"button",
|
|
42114
42415
|
{
|
|
42115
42416
|
key: item.value,
|
|
@@ -42120,7 +42421,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42120
42421
|
" ",
|
|
42121
42422
|
item.label
|
|
42122
42423
|
))
|
|
42123
|
-
), /* @__PURE__ */
|
|
42424
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42124
42425
|
"button",
|
|
42125
42426
|
{
|
|
42126
42427
|
className: "toolbar-btn",
|
|
@@ -42140,8 +42441,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42140
42441
|
},
|
|
42141
42442
|
title: "Increase Indent"
|
|
42142
42443
|
},
|
|
42143
|
-
/* @__PURE__ */
|
|
42144
|
-
), /* @__PURE__ */
|
|
42444
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentIncrease, null)
|
|
42445
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42145
42446
|
"button",
|
|
42146
42447
|
{
|
|
42147
42448
|
className: "toolbar-btn",
|
|
@@ -42161,24 +42462,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42161
42462
|
},
|
|
42162
42463
|
title: "Decrease Indent"
|
|
42163
42464
|
},
|
|
42164
|
-
/* @__PURE__ */
|
|
42165
|
-
), /* @__PURE__ */
|
|
42465
|
+
/* @__PURE__ */ import_react56.default.createElement(IconIndentDecrease, null)
|
|
42466
|
+
), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close2) => /* @__PURE__ */ import_react56.default.createElement(TableGridSelector, { editor, onClose: close2 })), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close2) => /* @__PURE__ */ import_react56.default.createElement(ImagePanel, { editor, onClose: close2 })), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close2) => /* @__PURE__ */ import_react56.default.createElement(InsertPanel, { editor, onClose: close2, mode: "video" })), /* @__PURE__ */ import_react56.default.createElement(
|
|
42166
42467
|
"button",
|
|
42167
42468
|
{
|
|
42168
42469
|
className: "toolbar-btn",
|
|
42169
42470
|
onClick: () => document.execCommand("cut"),
|
|
42170
42471
|
title: "Cut (Ctrl+X)"
|
|
42171
42472
|
},
|
|
42172
|
-
/* @__PURE__ */
|
|
42173
|
-
), /* @__PURE__ */
|
|
42473
|
+
/* @__PURE__ */ import_react56.default.createElement(IconCut, null)
|
|
42474
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42174
42475
|
"button",
|
|
42175
42476
|
{
|
|
42176
42477
|
className: "toolbar-btn",
|
|
42177
42478
|
onClick: handleCopy,
|
|
42178
42479
|
title: "Copy selected text"
|
|
42179
42480
|
},
|
|
42180
|
-
copySuccess ? /* @__PURE__ */
|
|
42181
|
-
), /* @__PURE__ */
|
|
42481
|
+
copySuccess ? /* @__PURE__ */ import_react56.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react56.default.createElement(IconCopy, null)
|
|
42482
|
+
), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters" } }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react56.default.createElement(
|
|
42182
42483
|
"button",
|
|
42183
42484
|
{
|
|
42184
42485
|
key: char,
|
|
@@ -42186,39 +42487,39 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42186
42487
|
onClick: () => insertSpecialChar(char)
|
|
42187
42488
|
},
|
|
42188
42489
|
char
|
|
42189
|
-
)))), /* @__PURE__ */
|
|
42490
|
+
)))), /* @__PURE__ */ import_react56.default.createElement(
|
|
42190
42491
|
Dropdown,
|
|
42191
42492
|
{
|
|
42192
|
-
trigger: { label: /* @__PURE__ */
|
|
42493
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") ? "is-active" : "" }
|
|
42193
42494
|
},
|
|
42194
|
-
/* @__PURE__ */
|
|
42195
|
-
/* @__PURE__ */
|
|
42196
|
-
), /* @__PURE__ */
|
|
42495
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCode().run() }, "</>", " Inline Code"),
|
|
42496
|
+
/* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
42497
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
42197
42498
|
"button",
|
|
42198
42499
|
{
|
|
42199
42500
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
42200
42501
|
onClick: toggleFullscreen,
|
|
42201
42502
|
title: "Toggle Fullscreen"
|
|
42202
42503
|
},
|
|
42203
|
-
/* @__PURE__ */
|
|
42204
|
-
), /* @__PURE__ */
|
|
42504
|
+
/* @__PURE__ */ import_react56.default.createElement(IconFullscreen, null)
|
|
42505
|
+
), /* @__PURE__ */ import_react56.default.createElement(TextToSpeech_default, { editor, onTextToSpeech }), /* @__PURE__ */ import_react56.default.createElement(SpeechToText_default, { editor, onSpeechToText }), /* @__PURE__ */ import_react56.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
42205
42506
|
"button",
|
|
42206
42507
|
{
|
|
42207
42508
|
className: "toolbar-btn",
|
|
42208
42509
|
onClick: handleQuickTranslate,
|
|
42209
42510
|
title: "Translate selected text"
|
|
42210
42511
|
},
|
|
42211
|
-
/* @__PURE__ */
|
|
42212
|
-
), /* @__PURE__ */
|
|
42512
|
+
/* @__PURE__ */ import_react56.default.createElement(IconTranslate, null)
|
|
42513
|
+
), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react56.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), /* @__PURE__ */ import_react56.default.createElement(AICommands_default, { editor, onAICommand }), /* @__PURE__ */ import_react56.default.createElement(
|
|
42213
42514
|
Dropdown,
|
|
42214
42515
|
{
|
|
42215
|
-
trigger: { label: /* @__PURE__ */
|
|
42516
|
+
trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconTaskList, null), title: "Task list", className: editor.isActive("taskList") ? "is-active" : "" },
|
|
42216
42517
|
keepOpen: true
|
|
42217
42518
|
},
|
|
42218
42519
|
["todo", "working", "blocked", "resolved"].map((status) => {
|
|
42219
42520
|
const symbols = { todo: "\u2610", working: "\u27F3", blocked: "\u25A0", resolved: "\u2611" };
|
|
42220
42521
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
42221
|
-
return /* @__PURE__ */
|
|
42522
|
+
return /* @__PURE__ */ import_react56.default.createElement("button", { key: status, className: `dropdown-item task-status-item`, onClick: () => {
|
|
42222
42523
|
const { state } = editor;
|
|
42223
42524
|
const { schema } = state;
|
|
42224
42525
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -42251,9 +42552,9 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42251
42552
|
}
|
|
42252
42553
|
return true;
|
|
42253
42554
|
}).run();
|
|
42254
|
-
} }, /* @__PURE__ */
|
|
42555
|
+
} }, /* @__PURE__ */ import_react56.default.createElement("span", { className: `task-icon task-${status}` }, symbols[status]), " ", labels[status]);
|
|
42255
42556
|
})
|
|
42256
|
-
)), showTranslateModal && /* @__PURE__ */
|
|
42557
|
+
)), showTranslateModal && /* @__PURE__ */ import_react56.default.createElement(
|
|
42257
42558
|
TranslateModal_default,
|
|
42258
42559
|
{
|
|
42259
42560
|
editor,
|
|
@@ -42271,7 +42572,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
42271
42572
|
var Toolbar_default = Toolbar;
|
|
42272
42573
|
|
|
42273
42574
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
42274
|
-
var
|
|
42575
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
42275
42576
|
var ALIGNMENTS = [
|
|
42276
42577
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
42277
42578
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
@@ -42283,18 +42584,18 @@ var VERTICAL_ALIGNMENTS = [
|
|
|
42283
42584
|
{ value: "bottom", label: "Bottom", icon: "\u2193" }
|
|
42284
42585
|
];
|
|
42285
42586
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
42286
|
-
const [activeTab, setActiveTab] = (0,
|
|
42287
|
-
const [src, setSrc] = (0,
|
|
42288
|
-
const [title, setTitle] = (0,
|
|
42289
|
-
const [alt, setAlt] = (0,
|
|
42290
|
-
const [link2, setLink] = (0,
|
|
42291
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
42292
|
-
const [width, setWidth] = (0,
|
|
42293
|
-
const [height, setHeight] = (0,
|
|
42294
|
-
const [lockRatio, setLockRatio] = (0,
|
|
42295
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
42296
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
42297
|
-
(0,
|
|
42587
|
+
const [activeTab, setActiveTab] = (0, import_react57.useState)("image");
|
|
42588
|
+
const [src, setSrc] = (0, import_react57.useState)(node?.attrs?.src || "");
|
|
42589
|
+
const [title, setTitle] = (0, import_react57.useState)(node?.attrs?.title || "");
|
|
42590
|
+
const [alt, setAlt] = (0, import_react57.useState)(node?.attrs?.alt || "");
|
|
42591
|
+
const [link2, setLink] = (0, import_react57.useState)("");
|
|
42592
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react57.useState)(false);
|
|
42593
|
+
const [width, setWidth] = (0, import_react57.useState)("");
|
|
42594
|
+
const [height, setHeight] = (0, import_react57.useState)("");
|
|
42595
|
+
const [lockRatio, setLockRatio] = (0, import_react57.useState)(true);
|
|
42596
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react57.useState)(0);
|
|
42597
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react57.useState)(0);
|
|
42598
|
+
(0, import_react57.useEffect)(() => {
|
|
42298
42599
|
if (src) {
|
|
42299
42600
|
const img = new window.Image();
|
|
42300
42601
|
img.onload = () => {
|
|
@@ -42333,7 +42634,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42333
42634
|
editor.chain().focus().deleteSelection().run();
|
|
42334
42635
|
onClose();
|
|
42335
42636
|
};
|
|
42336
|
-
return /* @__PURE__ */
|
|
42637
|
+
return /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react57.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
42337
42638
|
"input",
|
|
42338
42639
|
{
|
|
42339
42640
|
type: "number",
|
|
@@ -42341,7 +42642,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42341
42642
|
value: width,
|
|
42342
42643
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
42343
42644
|
}
|
|
42344
|
-
), /* @__PURE__ */
|
|
42645
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
42345
42646
|
"button",
|
|
42346
42647
|
{
|
|
42347
42648
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
@@ -42349,7 +42650,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42349
42650
|
title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio"
|
|
42350
42651
|
},
|
|
42351
42652
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
42352
|
-
), /* @__PURE__ */
|
|
42653
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
42353
42654
|
"input",
|
|
42354
42655
|
{
|
|
42355
42656
|
type: "number",
|
|
@@ -42357,21 +42658,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42357
42658
|
value: height,
|
|
42358
42659
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
42359
42660
|
}
|
|
42360
|
-
))), /* @__PURE__ */
|
|
42661
|
+
))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
42361
42662
|
"button",
|
|
42362
42663
|
{
|
|
42363
42664
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
42364
42665
|
onClick: () => setActiveTab("image")
|
|
42365
42666
|
},
|
|
42366
42667
|
"Image"
|
|
42367
|
-
), /* @__PURE__ */
|
|
42668
|
+
), /* @__PURE__ */ import_react57.default.createElement(
|
|
42368
42669
|
"button",
|
|
42369
42670
|
{
|
|
42370
42671
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
42371
42672
|
onClick: () => setActiveTab("advanced")
|
|
42372
42673
|
},
|
|
42373
42674
|
"Advanced"
|
|
42374
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
42675
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react57.default.createElement(
|
|
42375
42676
|
"input",
|
|
42376
42677
|
{
|
|
42377
42678
|
type: "text",
|
|
@@ -42379,7 +42680,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42379
42680
|
value: src,
|
|
42380
42681
|
onChange: (e) => setSrc(e.target.value)
|
|
42381
42682
|
}
|
|
42382
|
-
), /* @__PURE__ */
|
|
42683
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react57.default.createElement(
|
|
42383
42684
|
"input",
|
|
42384
42685
|
{
|
|
42385
42686
|
type: "text",
|
|
@@ -42387,7 +42688,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42387
42688
|
value: title,
|
|
42388
42689
|
onChange: (e) => setTitle(e.target.value)
|
|
42389
42690
|
}
|
|
42390
|
-
), /* @__PURE__ */
|
|
42691
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react57.default.createElement(
|
|
42391
42692
|
"input",
|
|
42392
42693
|
{
|
|
42393
42694
|
type: "text",
|
|
@@ -42395,7 +42696,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42395
42696
|
value: alt,
|
|
42396
42697
|
onChange: (e) => setAlt(e.target.value)
|
|
42397
42698
|
}
|
|
42398
|
-
), /* @__PURE__ */
|
|
42699
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react57.default.createElement(
|
|
42399
42700
|
"input",
|
|
42400
42701
|
{
|
|
42401
42702
|
type: "text",
|
|
@@ -42403,23 +42704,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42403
42704
|
value: link2,
|
|
42404
42705
|
onChange: (e) => setLink(e.target.value)
|
|
42405
42706
|
}
|
|
42406
|
-
), /* @__PURE__ */
|
|
42707
|
+
), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
42407
42708
|
"input",
|
|
42408
42709
|
{
|
|
42409
42710
|
type: "checkbox",
|
|
42410
42711
|
checked: openInNewTab,
|
|
42411
42712
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
42412
42713
|
}
|
|
42413
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
42714
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react57.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react57.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "\xD7 Cancel"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
|
|
42414
42715
|
};
|
|
42415
42716
|
var ImageToolbar = ({ editor }) => {
|
|
42416
|
-
const [showModal, setShowModal] = (0,
|
|
42417
|
-
const [showAlign, setShowAlign] = (0,
|
|
42418
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
42419
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
42420
|
-
const [pos, setPos] = (0,
|
|
42421
|
-
const toolbarRef = (0,
|
|
42422
|
-
(0,
|
|
42717
|
+
const [showModal, setShowModal] = (0, import_react57.useState)(false);
|
|
42718
|
+
const [showAlign, setShowAlign] = (0, import_react57.useState)(false);
|
|
42719
|
+
const [showVAlign, setShowVAlign] = (0, import_react57.useState)(false);
|
|
42720
|
+
const [copyStatus, setCopyStatus] = (0, import_react57.useState)("");
|
|
42721
|
+
const [pos, setPos] = (0, import_react57.useState)(null);
|
|
42722
|
+
const toolbarRef = (0, import_react57.useRef)(null);
|
|
42723
|
+
(0, import_react57.useEffect)(() => {
|
|
42423
42724
|
if (!editor) return;
|
|
42424
42725
|
const update = () => {
|
|
42425
42726
|
const { selection } = editor.state;
|
|
@@ -42449,7 +42750,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
42449
42750
|
}, [editor]);
|
|
42450
42751
|
const node = editor?.state.selection.node;
|
|
42451
42752
|
const isImage = node && node.type.name === "image";
|
|
42452
|
-
if (!editor || !isImage || !pos) return showModal ? /* @__PURE__ */
|
|
42753
|
+
if (!editor || !isImage || !pos) return showModal ? /* @__PURE__ */ import_react57.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }) : null;
|
|
42453
42754
|
const handleDelete = () => {
|
|
42454
42755
|
editor.chain().focus().deleteSelection().run();
|
|
42455
42756
|
};
|
|
@@ -42504,7 +42805,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
42504
42805
|
);
|
|
42505
42806
|
setShowVAlign(false);
|
|
42506
42807
|
};
|
|
42507
|
-
return /* @__PURE__ */
|
|
42808
|
+
return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
|
|
42508
42809
|
"div",
|
|
42509
42810
|
{
|
|
42510
42811
|
className: "image-toolbar",
|
|
@@ -42512,18 +42813,18 @@ var ImageToolbar = ({ editor }) => {
|
|
|
42512
42813
|
style: { top: pos.top, left: pos.left },
|
|
42513
42814
|
onMouseDown: (e) => e.preventDefault()
|
|
42514
42815
|
},
|
|
42515
|
-
/* @__PURE__ */
|
|
42516
|
-
/* @__PURE__ */
|
|
42517
|
-
/* @__PURE__ */
|
|
42518
|
-
/* @__PURE__ */
|
|
42816
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete, title: "Delete" }, "\u{1F5D1}"),
|
|
42817
|
+
/* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true), title: "Edit properties" }, "\u270E"),
|
|
42818
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy, title: "Copy image" }, copyStatus ? "\u2713" : "\u{1F4CB}"), copyStatus && /* @__PURE__ */ import_react57.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
42819
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
42519
42820
|
setShowVAlign(!showVAlign);
|
|
42520
42821
|
setShowAlign(false);
|
|
42521
|
-
}, title: "Vertical alignment" }, "\u2195 ", /* @__PURE__ */
|
|
42522
|
-
/* @__PURE__ */
|
|
42822
|
+
}, title: "Vertical alignment" }, "\u2195 ", /* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showVAlign && /* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-menu" }, VERTICAL_ALIGNMENTS.map((a) => /* @__PURE__ */ import_react57.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setVerticalAlignmentVal(a.value) }, a.icon, " ", a.label)))),
|
|
42823
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
42523
42824
|
setShowAlign(!showAlign);
|
|
42524
42825
|
setShowVAlign(false);
|
|
42525
|
-
}, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */
|
|
42526
|
-
), showModal && /* @__PURE__ */
|
|
42826
|
+
}, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */ import_react57.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showAlign && /* @__PURE__ */ import_react57.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react57.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
42827
|
+
), showModal && /* @__PURE__ */ import_react57.default.createElement(
|
|
42527
42828
|
ImagePropertiesModal,
|
|
42528
42829
|
{
|
|
42529
42830
|
editor,
|
|
@@ -42535,17 +42836,17 @@ var ImageToolbar = ({ editor }) => {
|
|
|
42535
42836
|
var ImageToolbar_default = ImageToolbar;
|
|
42536
42837
|
|
|
42537
42838
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
42538
|
-
var
|
|
42839
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
42539
42840
|
var ALIGNMENTS2 = [
|
|
42540
42841
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
42541
42842
|
{ value: "center", label: "Center", icon: "\u2261" },
|
|
42542
42843
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
42543
42844
|
];
|
|
42544
42845
|
var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
42545
|
-
const [src, setSrc] = (0,
|
|
42546
|
-
const [width, setWidth] = (0,
|
|
42547
|
-
const [height, setHeight] = (0,
|
|
42548
|
-
const [lockRatio, setLockRatio] = (0,
|
|
42846
|
+
const [src, setSrc] = (0, import_react58.useState)(node?.attrs?.src || "");
|
|
42847
|
+
const [width, setWidth] = (0, import_react58.useState)(String(node?.attrs?.width || 640));
|
|
42848
|
+
const [height, setHeight] = (0, import_react58.useState)(String(node?.attrs?.height || 360));
|
|
42849
|
+
const [lockRatio, setLockRatio] = (0, import_react58.useState)(true);
|
|
42549
42850
|
const handleWidthChange = (val2) => {
|
|
42550
42851
|
setWidth(val2);
|
|
42551
42852
|
if (lockRatio) {
|
|
@@ -42577,7 +42878,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42577
42878
|
editor.chain().focus().deleteSelection().run();
|
|
42578
42879
|
onClose();
|
|
42579
42880
|
};
|
|
42580
|
-
return /* @__PURE__ */
|
|
42881
|
+
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, "Video 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", style: { background: "#000" } }, /* @__PURE__ */ import_react58.default.createElement(
|
|
42581
42882
|
"iframe",
|
|
42582
42883
|
{
|
|
42583
42884
|
src,
|
|
@@ -42585,7 +42886,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42585
42886
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
42586
42887
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
42587
42888
|
}
|
|
42588
|
-
)), /* @__PURE__ */
|
|
42889
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
42589
42890
|
"input",
|
|
42590
42891
|
{
|
|
42591
42892
|
type: "number",
|
|
@@ -42593,7 +42894,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42593
42894
|
value: width,
|
|
42594
42895
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
42595
42896
|
}
|
|
42596
|
-
), /* @__PURE__ */
|
|
42897
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
42597
42898
|
"button",
|
|
42598
42899
|
{
|
|
42599
42900
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
@@ -42601,7 +42902,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42601
42902
|
title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio"
|
|
42602
42903
|
},
|
|
42603
42904
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
42604
|
-
), /* @__PURE__ */
|
|
42905
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
42605
42906
|
"input",
|
|
42606
42907
|
{
|
|
42607
42908
|
type: "number",
|
|
@@ -42609,7 +42910,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42609
42910
|
value: height,
|
|
42610
42911
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
42611
42912
|
}
|
|
42612
|
-
))), /* @__PURE__ */
|
|
42913
|
+
))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
42613
42914
|
"input",
|
|
42614
42915
|
{
|
|
42615
42916
|
type: "text",
|
|
@@ -42617,7 +42918,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42617
42918
|
value: src,
|
|
42618
42919
|
onChange: (e) => setSrc(e.target.value)
|
|
42619
42920
|
}
|
|
42620
|
-
), /* @__PURE__ */
|
|
42921
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react58.default.createElement(
|
|
42621
42922
|
"input",
|
|
42622
42923
|
{
|
|
42623
42924
|
type: "number",
|
|
@@ -42625,7 +42926,7 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42625
42926
|
value: width,
|
|
42626
42927
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
42627
42928
|
}
|
|
42628
|
-
), /* @__PURE__ */
|
|
42929
|
+
), /* @__PURE__ */ import_react58.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react58.default.createElement(
|
|
42629
42930
|
"input",
|
|
42630
42931
|
{
|
|
42631
42932
|
type: "number",
|
|
@@ -42633,16 +42934,16 @@ var VideoPropertiesModal = ({ editor, node, onClose }) => {
|
|
|
42633
42934
|
value: height,
|
|
42634
42935
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
42635
42936
|
}
|
|
42636
|
-
)))), /* @__PURE__ */
|
|
42937
|
+
)))), /* @__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 }, "\xD7 Cancel"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ import_react58.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
|
|
42637
42938
|
};
|
|
42638
42939
|
var VideoToolbar = ({ editor }) => {
|
|
42639
|
-
const [showModal, setShowModal] = (0,
|
|
42640
|
-
const [showSize, setShowSize] = (0,
|
|
42641
|
-
const [showAlign, setShowAlign] = (0,
|
|
42642
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
42643
|
-
const [pos, setPos] = (0,
|
|
42644
|
-
const toolbarRef = (0,
|
|
42645
|
-
(0,
|
|
42940
|
+
const [showModal, setShowModal] = (0, import_react58.useState)(false);
|
|
42941
|
+
const [showSize, setShowSize] = (0, import_react58.useState)(false);
|
|
42942
|
+
const [showAlign, setShowAlign] = (0, import_react58.useState)(false);
|
|
42943
|
+
const [copyStatus, setCopyStatus] = (0, import_react58.useState)("");
|
|
42944
|
+
const [pos, setPos] = (0, import_react58.useState)(null);
|
|
42945
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
42946
|
+
(0, import_react58.useEffect)(() => {
|
|
42646
42947
|
if (!editor) return;
|
|
42647
42948
|
const update = () => {
|
|
42648
42949
|
const { selection } = editor.state;
|
|
@@ -42672,7 +42973,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
42672
42973
|
}, [editor]);
|
|
42673
42974
|
const node = editor?.state.selection.node;
|
|
42674
42975
|
const isVideo = node && node.type.name === "youtube";
|
|
42675
|
-
if (!editor || !isVideo || !pos) return showModal ? /* @__PURE__ */
|
|
42976
|
+
if (!editor || !isVideo || !pos) return showModal ? /* @__PURE__ */ import_react58.default.createElement(VideoPropertiesModal, { editor, node, onClose: () => setShowModal(false) }) : null;
|
|
42676
42977
|
const handleDelete = () => {
|
|
42677
42978
|
editor.chain().focus().deleteSelection().run();
|
|
42678
42979
|
};
|
|
@@ -42716,7 +43017,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
42716
43017
|
})
|
|
42717
43018
|
);
|
|
42718
43019
|
};
|
|
42719
|
-
return /* @__PURE__ */
|
|
43020
|
+
return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
42720
43021
|
"div",
|
|
42721
43022
|
{
|
|
42722
43023
|
className: "image-toolbar",
|
|
@@ -42724,30 +43025,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
42724
43025
|
style: { top: pos.top, left: pos.left },
|
|
42725
43026
|
onMouseDown: (e) => e.preventDefault()
|
|
42726
43027
|
},
|
|
42727
|
-
/* @__PURE__ */
|
|
42728
|
-
/* @__PURE__ */
|
|
42729
|
-
/* @__PURE__ */
|
|
42730
|
-
/* @__PURE__ */
|
|
43028
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete, title: "Delete" }, "\u{1F5D1}"),
|
|
43029
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true), title: "Edit properties" }, "\u270E"),
|
|
43030
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy, title: "Copy URL" }, copyStatus ? "\u2713" : "\u{1F4CB}"), copyStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
43031
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
42731
43032
|
setShowSize(!showSize);
|
|
42732
43033
|
setShowAlign(false);
|
|
42733
|
-
}, title: "Size presets" }, /* @__PURE__ */
|
|
43034
|
+
}, title: "Size presets" }, /* @__PURE__ */ import_react58.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showSize && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
42734
43035
|
handleResize("small");
|
|
42735
43036
|
setShowSize(false);
|
|
42736
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
43037
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
42737
43038
|
handleResize("medium");
|
|
42738
43039
|
setShowSize(false);
|
|
42739
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
43040
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
42740
43041
|
handleResize("large");
|
|
42741
43042
|
setShowSize(false);
|
|
42742
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
43043
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
42743
43044
|
handleResize("full");
|
|
42744
43045
|
setShowSize(false);
|
|
42745
43046
|
} }, "Full (854x480)"))),
|
|
42746
|
-
/* @__PURE__ */
|
|
43047
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
42747
43048
|
setShowAlign(!showAlign);
|
|
42748
43049
|
setShowSize(false);
|
|
42749
|
-
}, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */
|
|
42750
|
-
), showModal && /* @__PURE__ */
|
|
43050
|
+
}, title: "Horizontal alignment" }, "\u2630 ", /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")), showAlign && /* @__PURE__ */ import_react58.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react58.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
43051
|
+
), showModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
42751
43052
|
VideoPropertiesModal,
|
|
42752
43053
|
{
|
|
42753
43054
|
editor,
|
|
@@ -42774,8 +43075,8 @@ var RufousTextEditor = ({
|
|
|
42774
43075
|
className,
|
|
42775
43076
|
style
|
|
42776
43077
|
}) => {
|
|
42777
|
-
const mentionSuggestion = (0,
|
|
42778
|
-
const editor = (0,
|
|
43078
|
+
const mentionSuggestion = (0, import_react59.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
43079
|
+
const editor = (0, import_react60.useEditor)({
|
|
42779
43080
|
editable,
|
|
42780
43081
|
extensions: [
|
|
42781
43082
|
import_starter_kit.default,
|
|
@@ -42867,14 +43168,14 @@ var RufousTextEditor = ({
|
|
|
42867
43168
|
}
|
|
42868
43169
|
}
|
|
42869
43170
|
});
|
|
42870
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
42871
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
42872
|
-
const [linkText, setLinkText] = (0,
|
|
42873
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
42874
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
42875
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
42876
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
42877
|
-
const setLink = (0,
|
|
43171
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react59.useState)(false);
|
|
43172
|
+
const [linkUrl, setLinkUrl] = (0, import_react59.useState)("");
|
|
43173
|
+
const [linkText, setLinkText] = (0, import_react59.useState)("");
|
|
43174
|
+
const [linkClassName, setLinkClassName] = (0, import_react59.useState)("");
|
|
43175
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react59.useState)(true);
|
|
43176
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react59.useState)(false);
|
|
43177
|
+
const [linkSelection, setLinkSelection] = (0, import_react59.useState)(null);
|
|
43178
|
+
const setLink = (0, import_react59.useCallback)(() => {
|
|
42878
43179
|
if (!editor) return;
|
|
42879
43180
|
const attrs = editor.getAttributes("link");
|
|
42880
43181
|
const previousUrl = attrs.href || "";
|
|
@@ -42888,7 +43189,7 @@ var RufousTextEditor = ({
|
|
|
42888
43189
|
setLinkSelection({ from, to });
|
|
42889
43190
|
setLinkModalOpen(true);
|
|
42890
43191
|
}, [editor]);
|
|
42891
|
-
const handleLinkSubmit = (0,
|
|
43192
|
+
const handleLinkSubmit = (0, import_react59.useCallback)(() => {
|
|
42892
43193
|
if (!editor || !linkSelection) return;
|
|
42893
43194
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
42894
43195
|
if (linkUrl === "") {
|
|
@@ -42924,7 +43225,7 @@ var RufousTextEditor = ({
|
|
|
42924
43225
|
setLinkClassName("");
|
|
42925
43226
|
setLinkSelection(null);
|
|
42926
43227
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
42927
|
-
const handleLinkRemove = (0,
|
|
43228
|
+
const handleLinkRemove = (0, import_react59.useCallback)(() => {
|
|
42928
43229
|
if (!editor || !linkSelection) return;
|
|
42929
43230
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
42930
43231
|
setLinkModalOpen(false);
|
|
@@ -42933,7 +43234,7 @@ var RufousTextEditor = ({
|
|
|
42933
43234
|
setLinkClassName("");
|
|
42934
43235
|
setLinkSelection(null);
|
|
42935
43236
|
}, [editor, linkSelection]);
|
|
42936
|
-
const handleLinkCancel = (0,
|
|
43237
|
+
const handleLinkCancel = (0, import_react59.useCallback)(() => {
|
|
42937
43238
|
setLinkModalOpen(false);
|
|
42938
43239
|
setLinkUrl("");
|
|
42939
43240
|
setLinkText("");
|
|
@@ -42941,26 +43242,26 @@ var RufousTextEditor = ({
|
|
|
42941
43242
|
setLinkSelection(null);
|
|
42942
43243
|
editor?.chain().focus().run();
|
|
42943
43244
|
}, [editor]);
|
|
42944
|
-
const [saveFormat, setSaveFormat] = (0,
|
|
42945
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
42946
|
-
const handleSave = (0,
|
|
43245
|
+
const [saveFormat, setSaveFormat] = (0, import_react59.useState)("html");
|
|
43246
|
+
const [saveStatus, setSaveStatus] = (0, import_react59.useState)("");
|
|
43247
|
+
const handleSave = (0, import_react59.useCallback)(() => {
|
|
42947
43248
|
if (!editor || !onSaveProp) return;
|
|
42948
43249
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
42949
43250
|
setSaveStatus("Saved!");
|
|
42950
43251
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
42951
43252
|
}, [editor, onSaveProp]);
|
|
42952
|
-
const handleExport = (0,
|
|
43253
|
+
const handleExport = (0, import_react59.useCallback)(() => {
|
|
42953
43254
|
if (!editor || !onExportProp) return;
|
|
42954
43255
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
42955
43256
|
}, [editor, onExportProp]);
|
|
42956
|
-
const handleClear = (0,
|
|
43257
|
+
const handleClear = (0, import_react59.useCallback)(() => {
|
|
42957
43258
|
if (!editor) return;
|
|
42958
43259
|
if (window.confirm("Clear all content? This cannot be undone.")) {
|
|
42959
43260
|
editor.commands.clearContent();
|
|
42960
43261
|
}
|
|
42961
43262
|
}, [editor]);
|
|
42962
|
-
const providerValue = (0,
|
|
42963
|
-
return /* @__PURE__ */
|
|
43263
|
+
const providerValue = (0, import_react59.useMemo)(() => ({ editor }), [editor]);
|
|
43264
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: `rf-rte-wrapper editor-wrapper ${className || ""}`, style }, /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react59.default.createElement(
|
|
42964
43265
|
Toolbar_default,
|
|
42965
43266
|
{
|
|
42966
43267
|
editor,
|
|
@@ -42970,8 +43271,8 @@ var RufousTextEditor = ({
|
|
|
42970
43271
|
onSpeechToText,
|
|
42971
43272
|
onTextToSpeech
|
|
42972
43273
|
}
|
|
42973
|
-
), /* @__PURE__ */
|
|
42974
|
-
|
|
43274
|
+
), /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react59.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(
|
|
43275
|
+
import_react60.BubbleMenu,
|
|
42975
43276
|
{
|
|
42976
43277
|
editor,
|
|
42977
43278
|
className: "bubble-menu",
|
|
@@ -42982,31 +43283,31 @@ var RufousTextEditor = ({
|
|
|
42982
43283
|
return !selection.empty;
|
|
42983
43284
|
}
|
|
42984
43285
|
},
|
|
42985
|
-
/* @__PURE__ */
|
|
43286
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
42986
43287
|
"button",
|
|
42987
43288
|
{
|
|
42988
43289
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
42989
43290
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
42990
43291
|
},
|
|
42991
|
-
/* @__PURE__ */
|
|
43292
|
+
/* @__PURE__ */ import_react59.default.createElement("strong", null, "B")
|
|
42992
43293
|
),
|
|
42993
|
-
/* @__PURE__ */
|
|
43294
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
42994
43295
|
"button",
|
|
42995
43296
|
{
|
|
42996
43297
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
42997
43298
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
42998
43299
|
},
|
|
42999
|
-
/* @__PURE__ */
|
|
43300
|
+
/* @__PURE__ */ import_react59.default.createElement("em", null, "I")
|
|
43000
43301
|
),
|
|
43001
|
-
/* @__PURE__ */
|
|
43302
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
43002
43303
|
"button",
|
|
43003
43304
|
{
|
|
43004
43305
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
43005
43306
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
43006
43307
|
},
|
|
43007
|
-
/* @__PURE__ */
|
|
43308
|
+
/* @__PURE__ */ import_react59.default.createElement("s", null, "S")
|
|
43008
43309
|
),
|
|
43009
|
-
/* @__PURE__ */
|
|
43310
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
43010
43311
|
"button",
|
|
43011
43312
|
{
|
|
43012
43313
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -43014,7 +43315,7 @@ var RufousTextEditor = ({
|
|
|
43014
43315
|
},
|
|
43015
43316
|
"</>"
|
|
43016
43317
|
),
|
|
43017
|
-
/* @__PURE__ */
|
|
43318
|
+
/* @__PURE__ */ import_react59.default.createElement(
|
|
43018
43319
|
"button",
|
|
43019
43320
|
{
|
|
43020
43321
|
onClick: setLink,
|
|
@@ -43022,51 +43323,51 @@ var RufousTextEditor = ({
|
|
|
43022
43323
|
},
|
|
43023
43324
|
"\u{1F517}"
|
|
43024
43325
|
)
|
|
43025
|
-
), /* @__PURE__ */
|
|
43326
|
+
), /* @__PURE__ */ import_react59.default.createElement(import_react60.FloatingMenu, { editor, className: "floating-menu" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
43026
43327
|
"button",
|
|
43027
43328
|
{
|
|
43028
43329
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
43029
43330
|
className: editor?.isActive("heading", { level: 1 }) ? "is-active" : ""
|
|
43030
43331
|
},
|
|
43031
43332
|
"H1"
|
|
43032
|
-
), /* @__PURE__ */
|
|
43333
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
43033
43334
|
"button",
|
|
43034
43335
|
{
|
|
43035
43336
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
43036
43337
|
className: editor?.isActive("heading", { level: 2 }) ? "is-active" : ""
|
|
43037
43338
|
},
|
|
43038
43339
|
"H2"
|
|
43039
|
-
), /* @__PURE__ */
|
|
43340
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
43040
43341
|
"button",
|
|
43041
43342
|
{
|
|
43042
43343
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
43043
43344
|
className: editor?.isActive("bulletList") ? "is-active" : ""
|
|
43044
43345
|
},
|
|
43045
43346
|
"\u2022 List"
|
|
43046
|
-
), /* @__PURE__ */
|
|
43347
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
43047
43348
|
"button",
|
|
43048
43349
|
{
|
|
43049
43350
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
43050
43351
|
className: editor?.isActive("orderedList") ? "is-active" : ""
|
|
43051
43352
|
},
|
|
43052
43353
|
"1. List"
|
|
43053
|
-
), /* @__PURE__ */
|
|
43354
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
43054
43355
|
"button",
|
|
43055
43356
|
{
|
|
43056
43357
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
43057
43358
|
className: editor?.isActive("blockquote") ? "is-active" : ""
|
|
43058
43359
|
},
|
|
43059
43360
|
"\u201C Quote"
|
|
43060
|
-
)), /* @__PURE__ */
|
|
43361
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
43061
43362
|
"select",
|
|
43062
43363
|
{
|
|
43063
43364
|
value: saveFormat,
|
|
43064
43365
|
onChange: (e) => setSaveFormat(e.target.value),
|
|
43065
43366
|
className: "format-select"
|
|
43066
43367
|
},
|
|
43067
|
-
/* @__PURE__ */
|
|
43068
|
-
/* @__PURE__ */
|
|
43069
|
-
), onSaveProp && /* @__PURE__ */
|
|
43368
|
+
/* @__PURE__ */ import_react59.default.createElement("option", { value: "html" }, "HTML"),
|
|
43369
|
+
/* @__PURE__ */ import_react59.default.createElement("option", { value: "json" }, "JSON")
|
|
43370
|
+
), onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export"), /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleClear, className: "status-btn clear-btn" }, "Clear")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react59.default.createElement(
|
|
43070
43371
|
"input",
|
|
43071
43372
|
{
|
|
43072
43373
|
type: "url",
|
|
@@ -43079,7 +43380,7 @@ var RufousTextEditor = ({
|
|
|
43079
43380
|
placeholder: "https://example.com",
|
|
43080
43381
|
autoFocus: true
|
|
43081
43382
|
}
|
|
43082
|
-
)), /* @__PURE__ */
|
|
43383
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react59.default.createElement(
|
|
43083
43384
|
"input",
|
|
43084
43385
|
{
|
|
43085
43386
|
type: "text",
|
|
@@ -43091,7 +43392,7 @@ var RufousTextEditor = ({
|
|
|
43091
43392
|
},
|
|
43092
43393
|
placeholder: "Link text"
|
|
43093
43394
|
}
|
|
43094
|
-
)), /* @__PURE__ */
|
|
43395
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Class name"), /* @__PURE__ */ import_react59.default.createElement(
|
|
43095
43396
|
"input",
|
|
43096
43397
|
{
|
|
43097
43398
|
type: "text",
|
|
@@ -43103,21 +43404,21 @@ var RufousTextEditor = ({
|
|
|
43103
43404
|
},
|
|
43104
43405
|
placeholder: ""
|
|
43105
43406
|
}
|
|
43106
|
-
)), /* @__PURE__ */
|
|
43407
|
+
)), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
43107
43408
|
"input",
|
|
43108
43409
|
{
|
|
43109
43410
|
type: "checkbox",
|
|
43110
43411
|
checked: linkNewTab,
|
|
43111
43412
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
43112
43413
|
}
|
|
43113
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
43414
|
+
), "Open in new tab"), /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
43114
43415
|
"input",
|
|
43115
43416
|
{
|
|
43116
43417
|
type: "checkbox",
|
|
43117
43418
|
checked: linkNoFollow,
|
|
43118
43419
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
43119
43420
|
}
|
|
43120
|
-
), "No follow"))), /* @__PURE__ */
|
|
43421
|
+
), "No follow"))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update"))))));
|
|
43121
43422
|
};
|
|
43122
43423
|
// Annotate the CommonJS export names for ESM import in node:
|
|
43123
43424
|
0 && (module.exports = {
|
|
@@ -43194,6 +43495,7 @@ var RufousTextEditor = ({
|
|
|
43194
43495
|
NineDotMenuIcon,
|
|
43195
43496
|
NotificationIcon,
|
|
43196
43497
|
Paper,
|
|
43498
|
+
PhoneField,
|
|
43197
43499
|
Popover,
|
|
43198
43500
|
Popper,
|
|
43199
43501
|
ProjectIcon,
|