@rufous/ui 0.3.15 → 0.3.18
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 +706 -448
- package/dist/main.css +53 -0
- package/dist/main.d.cts +110 -2
- package/dist/main.d.ts +110 -2
- package/dist/main.js +617 -359
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -4471,7 +4471,8 @@ import {
|
|
|
4471
4471
|
ArrowUp,
|
|
4472
4472
|
ArrowDown,
|
|
4473
4473
|
Trash2,
|
|
4474
|
-
Plus
|
|
4474
|
+
Plus,
|
|
4475
|
+
ChevronsUpDown
|
|
4475
4476
|
} from "lucide-react";
|
|
4476
4477
|
function FilterSelect({
|
|
4477
4478
|
value,
|
|
@@ -4566,7 +4567,11 @@ function DataGrid({
|
|
|
4566
4567
|
onRowDoubleClick,
|
|
4567
4568
|
onCellDoubleClick,
|
|
4568
4569
|
headerActions,
|
|
4569
|
-
toolbarContent
|
|
4570
|
+
toolbarContent,
|
|
4571
|
+
searchableColumns,
|
|
4572
|
+
onSearchChange,
|
|
4573
|
+
onFiltersChange,
|
|
4574
|
+
hideTopExport = false
|
|
4570
4575
|
}) {
|
|
4571
4576
|
const sxClass = useSx(sx);
|
|
4572
4577
|
const [editingCell, setEditingCell] = useState9(null);
|
|
@@ -4671,6 +4676,9 @@ function DataGrid({
|
|
|
4671
4676
|
return next;
|
|
4672
4677
|
});
|
|
4673
4678
|
}, [initialColumnsProp]);
|
|
4679
|
+
useEffect9(() => {
|
|
4680
|
+
onFiltersChange?.(advancedFilters);
|
|
4681
|
+
}, [advancedFilters, onFiltersChange]);
|
|
4674
4682
|
const handleSort = (fieldKey, dir) => {
|
|
4675
4683
|
if (dir !== void 0) {
|
|
4676
4684
|
setSortField(fieldKey);
|
|
@@ -4720,10 +4728,10 @@ function DataGrid({
|
|
|
4720
4728
|
};
|
|
4721
4729
|
const filteredData = useMemo2(() => {
|
|
4722
4730
|
return data.filter((item) => {
|
|
4723
|
-
const
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4731
|
+
const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
|
|
4732
|
+
const matchesGlobal = !filterText || searchCols.some(
|
|
4733
|
+
(col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
|
|
4734
|
+
);
|
|
4727
4735
|
const evalFilter = (f) => {
|
|
4728
4736
|
if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
|
|
4729
4737
|
const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
|
|
@@ -4831,7 +4839,11 @@ function DataGrid({
|
|
|
4831
4839
|
}
|
|
4832
4840
|
return matchesGlobal && matchesAdvanced;
|
|
4833
4841
|
});
|
|
4834
|
-
}, [data, filterText, advancedFilters, resolvedColumns]);
|
|
4842
|
+
}, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
|
|
4843
|
+
useEffect9(() => {
|
|
4844
|
+
if (!onSearchChange || !filterText) return;
|
|
4845
|
+
if (filteredData.length === 0) onSearchChange(filterText);
|
|
4846
|
+
}, [filteredData, filterText, onSearchChange]);
|
|
4835
4847
|
const sortedData = useMemo2(() => {
|
|
4836
4848
|
if (!sortField || !sortDirection) return filteredData;
|
|
4837
4849
|
const col = resolvedColumns.find((c) => c.field === sortField);
|
|
@@ -4862,11 +4874,16 @@ function DataGrid({
|
|
|
4862
4874
|
(item) => exportableCols.map((c) => {
|
|
4863
4875
|
const field = String(c.field);
|
|
4864
4876
|
const raw = item[field];
|
|
4865
|
-
let
|
|
4866
|
-
if (c.
|
|
4867
|
-
|
|
4877
|
+
let str;
|
|
4878
|
+
if (c.exportValue) {
|
|
4879
|
+
str = c.exportValue(raw, item).replace(/"/g, '""');
|
|
4880
|
+
} else {
|
|
4881
|
+
let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
|
|
4882
|
+
if (c.valueFormatter) {
|
|
4883
|
+
val = c.valueFormatter({ value: val, row: item, field });
|
|
4884
|
+
}
|
|
4885
|
+
str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
|
|
4868
4886
|
}
|
|
4869
|
-
const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
|
|
4870
4887
|
return `"${str}"`;
|
|
4871
4888
|
}).join(",")
|
|
4872
4889
|
);
|
|
@@ -4959,7 +4976,7 @@ function DataGrid({
|
|
|
4959
4976
|
onClick: () => setShowManageColumns(true)
|
|
4960
4977
|
},
|
|
4961
4978
|
/* @__PURE__ */ React75.createElement(Columns, { size: 16 })
|
|
4962
|
-
)), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
|
|
4979
|
+
)), !hideTopExport && /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
|
|
4963
4980
|
const colField = String(col.field);
|
|
4964
4981
|
const width = columnWidths[colField] || 200;
|
|
4965
4982
|
const leftOffset = getLeftOffset(col, idx);
|
|
@@ -4980,9 +4997,8 @@ function DataGrid({
|
|
|
4980
4997
|
onClick: () => col.sortable !== false && handleSort(col.field || "")
|
|
4981
4998
|
},
|
|
4982
4999
|
col.headerName,
|
|
4983
|
-
isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size:
|
|
4984
|
-
|
|
4985
|
-
), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement(Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
|
|
5000
|
+
col.sortable !== false && /* @__PURE__ */ React75.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ React75.createElement(ChevronsUpDown, { size: 14 }))
|
|
5001
|
+
), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ React75.createElement(Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
|
|
4986
5002
|
"button",
|
|
4987
5003
|
{
|
|
4988
5004
|
className: "dg-th-menu-btn",
|
|
@@ -5074,7 +5090,7 @@ function DataGrid({
|
|
|
5074
5090
|
},
|
|
5075
5091
|
action.icon
|
|
5076
5092
|
)))));
|
|
5077
|
-
})()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
|
|
5093
|
+
})()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
|
|
5078
5094
|
FilterSelect,
|
|
5079
5095
|
{
|
|
5080
5096
|
placement: "top",
|
|
@@ -5257,6 +5273,10 @@ var CheckIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "16
|
|
|
5257
5273
|
function normaliseOptions(options) {
|
|
5258
5274
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5259
5275
|
}
|
|
5276
|
+
function OptionIcon({ icon }) {
|
|
5277
|
+
if (!icon) return null;
|
|
5278
|
+
return /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ React76.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : React76.createElement(icon, { size: 16 }));
|
|
5279
|
+
}
|
|
5260
5280
|
var Select = React76.forwardRef(function Select2(props, ref) {
|
|
5261
5281
|
const {
|
|
5262
5282
|
options: rawOptions,
|
|
@@ -5425,7 +5445,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5425
5445
|
}
|
|
5426
5446
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5427
5447
|
if (selectedOpt) {
|
|
5428
|
-
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5448
|
+
return /* @__PURE__ */ React76.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ React76.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5429
5449
|
}
|
|
5430
5450
|
return /* @__PURE__ */ React76.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5431
5451
|
};
|
|
@@ -5483,6 +5503,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
|
|
|
5483
5503
|
onMouseDown: (e) => e.preventDefault(),
|
|
5484
5504
|
onClick: (e) => selectOption(opt, e)
|
|
5485
5505
|
},
|
|
5506
|
+
/* @__PURE__ */ React76.createElement(OptionIcon, { icon: opt.icon }),
|
|
5486
5507
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5487
5508
|
/* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))
|
|
5488
5509
|
);
|
|
@@ -9403,7 +9424,7 @@ function UserSelectionField({
|
|
|
9403
9424
|
multiple,
|
|
9404
9425
|
limitTags,
|
|
9405
9426
|
loading,
|
|
9406
|
-
loadingText: /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ React107.createElement(
|
|
9427
|
+
loadingText: /* @__PURE__ */ React107.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ React107.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9407
9428
|
getOptionLabel: getLabel,
|
|
9408
9429
|
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9409
9430
|
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
@@ -9427,8 +9448,244 @@ function UserSelectionField({
|
|
|
9427
9448
|
);
|
|
9428
9449
|
}
|
|
9429
9450
|
|
|
9451
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9452
|
+
import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25 } from "react";
|
|
9453
|
+
var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9454
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9455
|
+
return options.flatMap((opt) => [
|
|
9456
|
+
{ option: opt, depth },
|
|
9457
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9458
|
+
]);
|
|
9459
|
+
}
|
|
9460
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9461
|
+
const ids = [getValue(option)];
|
|
9462
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9463
|
+
return ids;
|
|
9464
|
+
}
|
|
9465
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9466
|
+
for (const opt of options) {
|
|
9467
|
+
map.set(getValue(opt), opt);
|
|
9468
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9469
|
+
}
|
|
9470
|
+
return map;
|
|
9471
|
+
}
|
|
9472
|
+
function SmartSelect({
|
|
9473
|
+
options,
|
|
9474
|
+
value,
|
|
9475
|
+
onChange,
|
|
9476
|
+
onSearchChange,
|
|
9477
|
+
debounceMs = 300,
|
|
9478
|
+
getOptionLabel,
|
|
9479
|
+
getOptionValue,
|
|
9480
|
+
getOptionSubLabel,
|
|
9481
|
+
getOptionChildren,
|
|
9482
|
+
multiple = false,
|
|
9483
|
+
allowChildNodesSelection = true,
|
|
9484
|
+
loading = false,
|
|
9485
|
+
loadingText,
|
|
9486
|
+
filterOptions: filterOptionsProp,
|
|
9487
|
+
renderOption: renderOptionProp,
|
|
9488
|
+
limitTags,
|
|
9489
|
+
label,
|
|
9490
|
+
placeholder,
|
|
9491
|
+
variant = "outlined",
|
|
9492
|
+
size = "small",
|
|
9493
|
+
disabled = false,
|
|
9494
|
+
error = false,
|
|
9495
|
+
helperText,
|
|
9496
|
+
fullWidth = true,
|
|
9497
|
+
required = false,
|
|
9498
|
+
className,
|
|
9499
|
+
style,
|
|
9500
|
+
sx
|
|
9501
|
+
}) {
|
|
9502
|
+
const debounceTimer = useRef25(null);
|
|
9503
|
+
useEffect21(() => () => {
|
|
9504
|
+
if (debounceTimer.current) clearTimeout(debounceTimer.current);
|
|
9505
|
+
}, []);
|
|
9506
|
+
const getValue = useCallback11(
|
|
9507
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9508
|
+
[getOptionValue, getOptionLabel]
|
|
9509
|
+
);
|
|
9510
|
+
const flatItems = useMemo3(() => {
|
|
9511
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9512
|
+
return flattenTree(options, getOptionChildren);
|
|
9513
|
+
}, [options, getOptionChildren]);
|
|
9514
|
+
const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9515
|
+
const depthMap = useMemo3(() => {
|
|
9516
|
+
const map = /* @__PURE__ */ new Map();
|
|
9517
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9518
|
+
return map;
|
|
9519
|
+
}, [flatItems, getValue]);
|
|
9520
|
+
const lookup = useMemo3(
|
|
9521
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9522
|
+
[options, getOptionChildren, getValue]
|
|
9523
|
+
);
|
|
9524
|
+
const selectedKeys = useMemo3(() => {
|
|
9525
|
+
if (multiple) {
|
|
9526
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9527
|
+
}
|
|
9528
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9529
|
+
}, [multiple, value, getValue]);
|
|
9530
|
+
const handleInputChange = useCallback11((_, inputValue) => {
|
|
9531
|
+
if (!onSearchChange) return;
|
|
9532
|
+
if (debounceTimer.current) clearTimeout(debounceTimer.current);
|
|
9533
|
+
if (!inputValue) {
|
|
9534
|
+
onSearchChange("");
|
|
9535
|
+
return;
|
|
9536
|
+
}
|
|
9537
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9538
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9539
|
+
);
|
|
9540
|
+
if (hasLocalMatch) return;
|
|
9541
|
+
if (debounceMs <= 0) {
|
|
9542
|
+
onSearchChange(inputValue);
|
|
9543
|
+
} else {
|
|
9544
|
+
debounceTimer.current = setTimeout(() => {
|
|
9545
|
+
onSearchChange(inputValue);
|
|
9546
|
+
}, debounceMs);
|
|
9547
|
+
}
|
|
9548
|
+
}, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9549
|
+
const handleChange = useCallback11((_, newValue) => {
|
|
9550
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9551
|
+
onChange?.(newValue);
|
|
9552
|
+
return;
|
|
9553
|
+
}
|
|
9554
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9555
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9556
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9557
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9558
|
+
let changedKey = null;
|
|
9559
|
+
let wasAdded = false;
|
|
9560
|
+
for (const k of newKeys) {
|
|
9561
|
+
if (!currentKeys.has(k)) {
|
|
9562
|
+
changedKey = k;
|
|
9563
|
+
wasAdded = true;
|
|
9564
|
+
break;
|
|
9565
|
+
}
|
|
9566
|
+
}
|
|
9567
|
+
if (changedKey === null) {
|
|
9568
|
+
for (const k of currentKeys) {
|
|
9569
|
+
if (!newKeys.has(k)) {
|
|
9570
|
+
changedKey = k;
|
|
9571
|
+
wasAdded = false;
|
|
9572
|
+
break;
|
|
9573
|
+
}
|
|
9574
|
+
}
|
|
9575
|
+
}
|
|
9576
|
+
if (changedKey !== null) {
|
|
9577
|
+
const opt = lookup.get(changedKey);
|
|
9578
|
+
if (opt) {
|
|
9579
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9580
|
+
if (wasAdded) {
|
|
9581
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9582
|
+
} else {
|
|
9583
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9584
|
+
}
|
|
9585
|
+
}
|
|
9586
|
+
}
|
|
9587
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9588
|
+
onChange?.(result);
|
|
9589
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9590
|
+
const defaultRenderOption = useCallback11((props, option) => {
|
|
9591
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9592
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9593
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9594
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9595
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9596
|
+
"li",
|
|
9597
|
+
{
|
|
9598
|
+
key,
|
|
9599
|
+
...rest,
|
|
9600
|
+
className: muiClass,
|
|
9601
|
+
style: {
|
|
9602
|
+
...muiStyle,
|
|
9603
|
+
display: "flex",
|
|
9604
|
+
alignItems: "center",
|
|
9605
|
+
gap: 10,
|
|
9606
|
+
padding: "8px 16px",
|
|
9607
|
+
paddingLeft: 16 + depth * 20,
|
|
9608
|
+
fontSize: "0.9rem",
|
|
9609
|
+
color: "rgba(0,0,0,0.87)",
|
|
9610
|
+
cursor: "pointer",
|
|
9611
|
+
userSelect: "none",
|
|
9612
|
+
minHeight: 40,
|
|
9613
|
+
boxSizing: "border-box",
|
|
9614
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9615
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9616
|
+
listStyle: "none"
|
|
9617
|
+
}
|
|
9618
|
+
},
|
|
9619
|
+
/* @__PURE__ */ React108.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9620
|
+
/* @__PURE__ */ React108.createElement("span", { style: {
|
|
9621
|
+
color: "var(--primary-color, #a41b06)",
|
|
9622
|
+
flexShrink: 0,
|
|
9623
|
+
display: "flex",
|
|
9624
|
+
alignItems: "center",
|
|
9625
|
+
opacity: isSelected ? 1 : 0,
|
|
9626
|
+
transition: "opacity 0.1s"
|
|
9627
|
+
} }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
|
|
9628
|
+
);
|
|
9629
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9630
|
+
const computedFilterOptions = useCallback11((opts, inputValue) => {
|
|
9631
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9632
|
+
if (multiple) {
|
|
9633
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9634
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9635
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9636
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9637
|
+
) : unselected;
|
|
9638
|
+
return [...selected, ...filteredRest];
|
|
9639
|
+
}
|
|
9640
|
+
if (value != null) {
|
|
9641
|
+
const selectedLabel = getOptionLabel(value);
|
|
9642
|
+
if (inputValue === selectedLabel) {
|
|
9643
|
+
const selectedKey = getValue(value);
|
|
9644
|
+
return [
|
|
9645
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9646
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9647
|
+
];
|
|
9648
|
+
}
|
|
9649
|
+
}
|
|
9650
|
+
if (!inputValue) return opts;
|
|
9651
|
+
const q = inputValue.toLowerCase();
|
|
9652
|
+
return opts.filter(
|
|
9653
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9654
|
+
);
|
|
9655
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9656
|
+
return /* @__PURE__ */ React108.createElement(
|
|
9657
|
+
Autocomplete,
|
|
9658
|
+
{
|
|
9659
|
+
options: flatOptionsList,
|
|
9660
|
+
value: value ?? (multiple ? [] : null),
|
|
9661
|
+
onChange: handleChange,
|
|
9662
|
+
onInputChange: handleInputChange,
|
|
9663
|
+
multiple,
|
|
9664
|
+
limitTags,
|
|
9665
|
+
loading,
|
|
9666
|
+
loadingText: loadingText ?? /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9667
|
+
getOptionLabel,
|
|
9668
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9669
|
+
filterOptions: computedFilterOptions,
|
|
9670
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9671
|
+
label,
|
|
9672
|
+
placeholder: placeholder ?? label,
|
|
9673
|
+
size,
|
|
9674
|
+
variant,
|
|
9675
|
+
disabled,
|
|
9676
|
+
error,
|
|
9677
|
+
helperText,
|
|
9678
|
+
fullWidth,
|
|
9679
|
+
required,
|
|
9680
|
+
className,
|
|
9681
|
+
style,
|
|
9682
|
+
sx
|
|
9683
|
+
}
|
|
9684
|
+
);
|
|
9685
|
+
}
|
|
9686
|
+
|
|
9430
9687
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9431
|
-
import
|
|
9688
|
+
import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef33, useEffect as useEffect30 } from "react";
|
|
9432
9689
|
import { createPortal as createPortal8 } from "react-dom";
|
|
9433
9690
|
import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
|
|
9434
9691
|
import StarterKit from "@tiptap/starter-kit";
|
|
@@ -9454,7 +9711,7 @@ import { ReactRenderer } from "@tiptap/react";
|
|
|
9454
9711
|
import tippy from "tippy.js";
|
|
9455
9712
|
|
|
9456
9713
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9457
|
-
import
|
|
9714
|
+
import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState26 } from "react";
|
|
9458
9715
|
var MentionList = forwardRef11((props, ref) => {
|
|
9459
9716
|
const [selectedIndex, setSelectedIndex] = useState26(0);
|
|
9460
9717
|
const selectItem = (index) => {
|
|
@@ -9463,7 +9720,7 @@ var MentionList = forwardRef11((props, ref) => {
|
|
|
9463
9720
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
9464
9721
|
}
|
|
9465
9722
|
};
|
|
9466
|
-
|
|
9723
|
+
useEffect22(() => setSelectedIndex(0), [props.items]);
|
|
9467
9724
|
useImperativeHandle(ref, () => ({
|
|
9468
9725
|
onKeyDown: ({ event }) => {
|
|
9469
9726
|
if (event.key === "ArrowUp") {
|
|
@@ -9482,17 +9739,17 @@ var MentionList = forwardRef11((props, ref) => {
|
|
|
9482
9739
|
}
|
|
9483
9740
|
}));
|
|
9484
9741
|
if (!props.items.length) {
|
|
9485
|
-
return /* @__PURE__ */
|
|
9742
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9486
9743
|
}
|
|
9487
|
-
return /* @__PURE__ */
|
|
9744
|
+
return /* @__PURE__ */ React109.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ React109.createElement(
|
|
9488
9745
|
"button",
|
|
9489
9746
|
{
|
|
9490
9747
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9491
9748
|
key: item.id,
|
|
9492
9749
|
onClick: () => selectItem(index)
|
|
9493
9750
|
},
|
|
9494
|
-
/* @__PURE__ */
|
|
9495
|
-
/* @__PURE__ */
|
|
9751
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9752
|
+
/* @__PURE__ */ React109.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9496
9753
|
)));
|
|
9497
9754
|
});
|
|
9498
9755
|
MentionList.displayName = "MentionList";
|
|
@@ -9550,11 +9807,11 @@ function createMentionSuggestion(users) {
|
|
|
9550
9807
|
}
|
|
9551
9808
|
|
|
9552
9809
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9553
|
-
import
|
|
9810
|
+
import React115, { useState as useState31, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
|
|
9554
9811
|
import { createPortal as createPortal4 } from "react-dom";
|
|
9555
9812
|
|
|
9556
9813
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9557
|
-
import
|
|
9814
|
+
import React110, { useState as useState27, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
9558
9815
|
var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
9559
9816
|
const [speaking, setSpeaking] = useState27(false);
|
|
9560
9817
|
const [paused, setPaused] = useState27(false);
|
|
@@ -9562,9 +9819,9 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9562
9819
|
const [selectedVoice, setSelectedVoice] = useState27("");
|
|
9563
9820
|
const [rate, setRate] = useState27(1);
|
|
9564
9821
|
const [showPanel, setShowPanel] = useState27(false);
|
|
9565
|
-
const utteranceRef =
|
|
9566
|
-
const panelRef =
|
|
9567
|
-
|
|
9822
|
+
const utteranceRef = useRef26(null);
|
|
9823
|
+
const panelRef = useRef26(null);
|
|
9824
|
+
useEffect23(() => {
|
|
9568
9825
|
const synth = window.speechSynthesis;
|
|
9569
9826
|
const loadVoices = () => {
|
|
9570
9827
|
const available = synth.getVoices();
|
|
@@ -9582,7 +9839,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9582
9839
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9583
9840
|
};
|
|
9584
9841
|
}, [selectedVoice]);
|
|
9585
|
-
|
|
9842
|
+
useEffect23(() => {
|
|
9586
9843
|
const handleClick = (e) => {
|
|
9587
9844
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9588
9845
|
setShowPanel(false);
|
|
@@ -9591,7 +9848,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9591
9848
|
document.addEventListener("mousedown", handleClick);
|
|
9592
9849
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9593
9850
|
}, []);
|
|
9594
|
-
const getTextToSpeak =
|
|
9851
|
+
const getTextToSpeak = useCallback12(() => {
|
|
9595
9852
|
if (!editor) return "";
|
|
9596
9853
|
const { from, to, empty } = editor.state.selection;
|
|
9597
9854
|
if (!empty) {
|
|
@@ -9599,7 +9856,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9599
9856
|
}
|
|
9600
9857
|
return editor.getText();
|
|
9601
9858
|
}, [editor]);
|
|
9602
|
-
const handleSpeak =
|
|
9859
|
+
const handleSpeak = useCallback12(async () => {
|
|
9603
9860
|
const text = getTextToSpeak();
|
|
9604
9861
|
if (!text.trim()) return;
|
|
9605
9862
|
if (onTextToSpeech) {
|
|
@@ -9641,25 +9898,25 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9641
9898
|
setSpeaking(true);
|
|
9642
9899
|
setPaused(false);
|
|
9643
9900
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9644
|
-
const handlePause =
|
|
9901
|
+
const handlePause = useCallback12(() => {
|
|
9645
9902
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9646
9903
|
window.speechSynthesis.pause();
|
|
9647
9904
|
setPaused(true);
|
|
9648
9905
|
}
|
|
9649
9906
|
}, []);
|
|
9650
|
-
const handleResume =
|
|
9907
|
+
const handleResume = useCallback12(() => {
|
|
9651
9908
|
if (window.speechSynthesis.paused) {
|
|
9652
9909
|
window.speechSynthesis.resume();
|
|
9653
9910
|
setPaused(false);
|
|
9654
9911
|
}
|
|
9655
9912
|
}, []);
|
|
9656
|
-
const handleStop =
|
|
9913
|
+
const handleStop = useCallback12(() => {
|
|
9657
9914
|
window.speechSynthesis.cancel();
|
|
9658
9915
|
setSpeaking(false);
|
|
9659
9916
|
setPaused(false);
|
|
9660
9917
|
}, []);
|
|
9661
9918
|
useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9662
|
-
return /* @__PURE__ */
|
|
9919
|
+
return /* @__PURE__ */ React110.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React110.createElement(
|
|
9663
9920
|
"button",
|
|
9664
9921
|
{
|
|
9665
9922
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9672,15 +9929,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9672
9929
|
}
|
|
9673
9930
|
},
|
|
9674
9931
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9675
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9932
|
+
)), showPanel && !speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React110.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React110.createElement(
|
|
9676
9933
|
"select",
|
|
9677
9934
|
{
|
|
9678
9935
|
className: "tts-select",
|
|
9679
9936
|
value: selectedVoice,
|
|
9680
9937
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9681
9938
|
},
|
|
9682
|
-
voices.map((v) => /* @__PURE__ */
|
|
9683
|
-
), /* @__PURE__ */
|
|
9939
|
+
voices.map((v) => /* @__PURE__ */ React110.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
9940
|
+
), /* @__PURE__ */ React110.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ React110.createElement(
|
|
9684
9941
|
"input",
|
|
9685
9942
|
{
|
|
9686
9943
|
type: "range",
|
|
@@ -9691,26 +9948,26 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
|
|
|
9691
9948
|
value: rate,
|
|
9692
9949
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9693
9950
|
}
|
|
9694
|
-
), /* @__PURE__ */
|
|
9951
|
+
), /* @__PURE__ */ React110.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React110.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9695
9952
|
handleSpeak();
|
|
9696
9953
|
setShowPanel(false);
|
|
9697
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
9954
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React110.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React110.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React110.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React110.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9698
9955
|
});
|
|
9699
9956
|
var TextToSpeech_default = TextToSpeech;
|
|
9700
9957
|
|
|
9701
9958
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9702
|
-
import
|
|
9959
|
+
import React111, { useState as useState28, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
|
|
9703
9960
|
var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
9704
9961
|
const [listening, setListening] = useState28(false);
|
|
9705
9962
|
const [showPanel, setShowPanel] = useState28(false);
|
|
9706
9963
|
const [language, setLanguage] = useState28("en-US");
|
|
9707
9964
|
const [interim, setInterim] = useState28("");
|
|
9708
|
-
const recognitionRef =
|
|
9709
|
-
const panelRef =
|
|
9710
|
-
const isListeningRef =
|
|
9965
|
+
const recognitionRef = useRef27(null);
|
|
9966
|
+
const panelRef = useRef27(null);
|
|
9967
|
+
const isListeningRef = useRef27(false);
|
|
9711
9968
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9712
9969
|
const supported = !!SpeechRecognitionAPI;
|
|
9713
|
-
|
|
9970
|
+
useEffect24(() => {
|
|
9714
9971
|
const handleClick = (e) => {
|
|
9715
9972
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9716
9973
|
setShowPanel(false);
|
|
@@ -9719,7 +9976,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9719
9976
|
document.addEventListener("mousedown", handleClick);
|
|
9720
9977
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9721
9978
|
}, []);
|
|
9722
|
-
const createRecognition =
|
|
9979
|
+
const createRecognition = useCallback13(() => {
|
|
9723
9980
|
if (!supported) return null;
|
|
9724
9981
|
const recognition = new SpeechRecognitionAPI();
|
|
9725
9982
|
recognition.lang = language;
|
|
@@ -9728,7 +9985,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9728
9985
|
recognition.maxAlternatives = 1;
|
|
9729
9986
|
return recognition;
|
|
9730
9987
|
}, [supported, language]);
|
|
9731
|
-
const startSession =
|
|
9988
|
+
const startSession = useCallback13((recognition) => {
|
|
9732
9989
|
if (!recognition || !editor) return;
|
|
9733
9990
|
recognition.onresult = async (event) => {
|
|
9734
9991
|
let finalText = "";
|
|
@@ -9783,7 +10040,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9783
10040
|
}
|
|
9784
10041
|
};
|
|
9785
10042
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9786
|
-
const startListening =
|
|
10043
|
+
const startListening = useCallback13(() => {
|
|
9787
10044
|
if (!supported || !editor) return;
|
|
9788
10045
|
const recognition = createRecognition();
|
|
9789
10046
|
if (!recognition) return;
|
|
@@ -9799,7 +10056,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9799
10056
|
setListening(false);
|
|
9800
10057
|
}
|
|
9801
10058
|
}, [supported, editor, createRecognition, startSession]);
|
|
9802
|
-
const stopListening =
|
|
10059
|
+
const stopListening = useCallback13(() => {
|
|
9803
10060
|
isListeningRef.current = false;
|
|
9804
10061
|
if (recognitionRef.current) {
|
|
9805
10062
|
try {
|
|
@@ -9813,7 +10070,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9813
10070
|
}, []);
|
|
9814
10071
|
useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9815
10072
|
if (!supported) {
|
|
9816
|
-
return /* @__PURE__ */
|
|
10073
|
+
return /* @__PURE__ */ React111.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React111.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9817
10074
|
}
|
|
9818
10075
|
const LANGUAGES2 = [
|
|
9819
10076
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9835,7 +10092,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9835
10092
|
{ code: "kn-IN", label: "Kannada" },
|
|
9836
10093
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9837
10094
|
];
|
|
9838
|
-
return /* @__PURE__ */
|
|
10095
|
+
return /* @__PURE__ */ React111.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React111.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React111.createElement(
|
|
9839
10096
|
"button",
|
|
9840
10097
|
{
|
|
9841
10098
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9848,20 +10105,20 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
|
|
|
9848
10105
|
}
|
|
9849
10106
|
},
|
|
9850
10107
|
"\u{1F3A4}"
|
|
9851
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10108
|
+
)), showPanel && !listening && /* @__PURE__ */ React111.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React111.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React111.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React111.createElement(
|
|
9852
10109
|
"select",
|
|
9853
10110
|
{
|
|
9854
10111
|
className: "stt-select",
|
|
9855
10112
|
value: language,
|
|
9856
10113
|
onChange: (e) => setLanguage(e.target.value)
|
|
9857
10114
|
},
|
|
9858
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9859
|
-
), /* @__PURE__ */
|
|
10115
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ React111.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10116
|
+
), /* @__PURE__ */ React111.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React111.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React111.createElement("div", { className: "stt-interim" }, interim));
|
|
9860
10117
|
});
|
|
9861
10118
|
var SpeechToText_default = SpeechToText;
|
|
9862
10119
|
|
|
9863
10120
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9864
|
-
import
|
|
10121
|
+
import React112, { useState as useState29, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
|
|
9865
10122
|
import { createPortal as createPortal2 } from "react-dom";
|
|
9866
10123
|
var AI_COMMANDS = [
|
|
9867
10124
|
{ 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." },
|
|
@@ -9917,8 +10174,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9917
10174
|
const [originalText, setOriginalText] = useState29("");
|
|
9918
10175
|
const [selectionRange, setSelectionRange] = useState29(null);
|
|
9919
10176
|
const [previousResults, setPreviousResults] = useState29([]);
|
|
9920
|
-
const panelRef =
|
|
9921
|
-
|
|
10177
|
+
const panelRef = useRef28(null);
|
|
10178
|
+
useEffect25(() => {
|
|
9922
10179
|
const handleClick = (e) => {
|
|
9923
10180
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9924
10181
|
setOpen(false);
|
|
@@ -9927,7 +10184,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9927
10184
|
document.addEventListener("mousedown", handleClick);
|
|
9928
10185
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9929
10186
|
}, []);
|
|
9930
|
-
const getSelectedText =
|
|
10187
|
+
const getSelectedText = useCallback14(() => {
|
|
9931
10188
|
if (!editor) return { text: "", range: null };
|
|
9932
10189
|
const { from, to, empty } = editor.state.selection;
|
|
9933
10190
|
if (!empty) {
|
|
@@ -9935,7 +10192,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9935
10192
|
}
|
|
9936
10193
|
return { text: editor.getText(), range: null };
|
|
9937
10194
|
}, [editor]);
|
|
9938
|
-
const fetchAIResult =
|
|
10195
|
+
const fetchAIResult = useCallback14(async (prompt, text, prevResults = []) => {
|
|
9939
10196
|
setLoading(true);
|
|
9940
10197
|
setResultText("");
|
|
9941
10198
|
try {
|
|
@@ -9953,7 +10210,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9953
10210
|
setLoading(false);
|
|
9954
10211
|
}
|
|
9955
10212
|
}, [onAICommand]);
|
|
9956
|
-
const handleCommandSelect =
|
|
10213
|
+
const handleCommandSelect = useCallback14((command) => {
|
|
9957
10214
|
const { text, range } = getSelectedText();
|
|
9958
10215
|
if (!text.trim()) return;
|
|
9959
10216
|
setOriginalText(text);
|
|
@@ -9964,7 +10221,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9964
10221
|
setShowModal(true);
|
|
9965
10222
|
fetchAIResult(command.prompt, text, []);
|
|
9966
10223
|
}, [getSelectedText, fetchAIResult]);
|
|
9967
|
-
const handleInsert =
|
|
10224
|
+
const handleInsert = useCallback14(() => {
|
|
9968
10225
|
if (!resultText || !editor) return;
|
|
9969
10226
|
if (selectionRange) {
|
|
9970
10227
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -9974,7 +10231,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9974
10231
|
setShowModal(false);
|
|
9975
10232
|
setResultText("");
|
|
9976
10233
|
}, [editor, resultText, selectionRange]);
|
|
9977
|
-
const handleInsertAfter =
|
|
10234
|
+
const handleInsertAfter = useCallback14(() => {
|
|
9978
10235
|
if (!resultText || !editor) return;
|
|
9979
10236
|
if (selectionRange) {
|
|
9980
10237
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -9989,11 +10246,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9989
10246
|
setShowModal(false);
|
|
9990
10247
|
setResultText("");
|
|
9991
10248
|
}, [editor, resultText, selectionRange]);
|
|
9992
|
-
const handleRefresh =
|
|
10249
|
+
const handleRefresh = useCallback14(() => {
|
|
9993
10250
|
if (!originalText.trim()) return;
|
|
9994
10251
|
fetchAIResult(promptText, originalText, previousResults);
|
|
9995
10252
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
9996
|
-
const handleCancel =
|
|
10253
|
+
const handleCancel = useCallback14(() => {
|
|
9997
10254
|
setShowModal(false);
|
|
9998
10255
|
setResultText("");
|
|
9999
10256
|
setPromptText("");
|
|
@@ -10002,15 +10259,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10002
10259
|
setPreviousResults([]);
|
|
10003
10260
|
}, []);
|
|
10004
10261
|
if (!editor) return null;
|
|
10005
|
-
return /* @__PURE__ */
|
|
10262
|
+
return /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10006
10263
|
"button",
|
|
10007
10264
|
{
|
|
10008
10265
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
10009
10266
|
onClick: () => setOpen(!open)
|
|
10010
10267
|
},
|
|
10011
|
-
/* @__PURE__ */
|
|
10012
|
-
/* @__PURE__ */
|
|
10013
|
-
)), open && /* @__PURE__ */
|
|
10268
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React112.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
10269
|
+
/* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10270
|
+
)), open && /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React112.createElement(
|
|
10014
10271
|
"button",
|
|
10015
10272
|
{
|
|
10016
10273
|
key: cmd.id,
|
|
@@ -10018,8 +10275,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10018
10275
|
onClick: () => handleCommandSelect(cmd)
|
|
10019
10276
|
},
|
|
10020
10277
|
cmd.label
|
|
10021
|
-
))), /* @__PURE__ */
|
|
10022
|
-
/* @__PURE__ */
|
|
10278
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
|
|
10279
|
+
/* @__PURE__ */ React112.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React112.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React112.createElement(
|
|
10023
10280
|
"textarea",
|
|
10024
10281
|
{
|
|
10025
10282
|
className: "ai-modal-prompt",
|
|
@@ -10027,15 +10284,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10027
10284
|
onChange: (e) => setPromptText(e.target.value),
|
|
10028
10285
|
rows: 3
|
|
10029
10286
|
}
|
|
10030
|
-
), /* @__PURE__ */
|
|
10287
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10031
10288
|
"button",
|
|
10032
10289
|
{
|
|
10033
10290
|
className: "ai-modal-robot-btn",
|
|
10034
10291
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
10035
10292
|
disabled: loading
|
|
10036
10293
|
},
|
|
10037
|
-
/* @__PURE__ */
|
|
10038
|
-
)))), /* @__PURE__ */
|
|
10294
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React112.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React112.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React112.createElement("path", { d: "M8 7h8" }))
|
|
10295
|
+
)))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React112.createElement(
|
|
10039
10296
|
"button",
|
|
10040
10297
|
{
|
|
10041
10298
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10043,7 +10300,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10043
10300
|
disabled: loading || !resultText
|
|
10044
10301
|
},
|
|
10045
10302
|
"Insert"
|
|
10046
|
-
), /* @__PURE__ */
|
|
10303
|
+
), /* @__PURE__ */ React112.createElement(
|
|
10047
10304
|
"button",
|
|
10048
10305
|
{
|
|
10049
10306
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10051,22 +10308,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10051
10308
|
disabled: loading || !resultText
|
|
10052
10309
|
},
|
|
10053
10310
|
"Insert After"
|
|
10054
|
-
), /* @__PURE__ */
|
|
10311
|
+
), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React112.createElement(
|
|
10055
10312
|
"button",
|
|
10056
10313
|
{
|
|
10057
10314
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10058
10315
|
onClick: handleRefresh,
|
|
10059
10316
|
disabled: loading
|
|
10060
10317
|
},
|
|
10061
|
-
/* @__PURE__ */
|
|
10062
|
-
))), /* @__PURE__ */
|
|
10318
|
+
/* @__PURE__ */ React112.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React112.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React112.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10319
|
+
))), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React112.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React112.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React112.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React112.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10063
10320
|
document.body
|
|
10064
10321
|
));
|
|
10065
10322
|
};
|
|
10066
10323
|
var AICommands_default = AICommands;
|
|
10067
10324
|
|
|
10068
10325
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10069
|
-
import
|
|
10326
|
+
import React113, { useState as useState30, useMemo as useMemo4 } from "react";
|
|
10070
10327
|
import { createPortal as createPortal3 } from "react-dom";
|
|
10071
10328
|
var LANGUAGES = [
|
|
10072
10329
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10212,10 +10469,10 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10212
10469
|
const [targetFilter, setTargetFilter] = useState30("");
|
|
10213
10470
|
const [translating, setTranslating] = useState30(false);
|
|
10214
10471
|
const [error, setError] = useState30("");
|
|
10215
|
-
const filteredSource =
|
|
10472
|
+
const filteredSource = useMemo4(() => LANGUAGES.filter(
|
|
10216
10473
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10217
10474
|
), [sourceFilter]);
|
|
10218
|
-
const filteredTarget =
|
|
10475
|
+
const filteredTarget = useMemo4(() => LANGUAGES.filter(
|
|
10219
10476
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10220
10477
|
), [targetFilter]);
|
|
10221
10478
|
const handleSwap = () => {
|
|
@@ -10259,7 +10516,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10259
10516
|
}
|
|
10260
10517
|
};
|
|
10261
10518
|
return createPortal3(
|
|
10262
|
-
/* @__PURE__ */
|
|
10519
|
+
/* @__PURE__ */ React113.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React113.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React113.createElement("h3", null, "Translate options"), /* @__PURE__ */ React113.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React113.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10263
10520
|
"input",
|
|
10264
10521
|
{
|
|
10265
10522
|
type: "text",
|
|
@@ -10268,16 +10525,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10268
10525
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10269
10526
|
className: "translate-filter-input"
|
|
10270
10527
|
}
|
|
10271
|
-
)), /* @__PURE__ */
|
|
10528
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10272
10529
|
"button",
|
|
10273
10530
|
{
|
|
10274
10531
|
key: lang.code,
|
|
10275
10532
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10276
10533
|
onClick: () => setSourceLang(lang.code)
|
|
10277
10534
|
},
|
|
10278
|
-
/* @__PURE__ */
|
|
10279
|
-
/* @__PURE__ */
|
|
10280
|
-
)))), /* @__PURE__ */
|
|
10535
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10536
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10537
|
+
)))), /* @__PURE__ */ React113.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React113.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React113.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React113.createElement(
|
|
10281
10538
|
"input",
|
|
10282
10539
|
{
|
|
10283
10540
|
type: "text",
|
|
@@ -10286,16 +10543,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10286
10543
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10287
10544
|
className: "translate-filter-input"
|
|
10288
10545
|
}
|
|
10289
|
-
)), /* @__PURE__ */
|
|
10546
|
+
)), /* @__PURE__ */ React113.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React113.createElement(
|
|
10290
10547
|
"button",
|
|
10291
10548
|
{
|
|
10292
10549
|
key: lang.code,
|
|
10293
10550
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10294
10551
|
onClick: () => setTargetLang(lang.code)
|
|
10295
10552
|
},
|
|
10296
|
-
/* @__PURE__ */
|
|
10297
|
-
/* @__PURE__ */
|
|
10298
|
-
))))), error && /* @__PURE__ */
|
|
10553
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-code" }, lang.code),
|
|
10554
|
+
/* @__PURE__ */ React113.createElement("span", { className: "translate-name" }, lang.name)
|
|
10555
|
+
))))), error && /* @__PURE__ */ React113.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React113.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10299
10556
|
document.body
|
|
10300
10557
|
);
|
|
10301
10558
|
};
|
|
@@ -10946,38 +11203,38 @@ var CustomTaskItem = TaskItem.extend({
|
|
|
10946
11203
|
});
|
|
10947
11204
|
|
|
10948
11205
|
// lib/RufousTextEditor/icons.tsx
|
|
10949
|
-
import * as
|
|
11206
|
+
import * as React114 from "react";
|
|
10950
11207
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
10951
|
-
var IconUndo = () => /* @__PURE__ */
|
|
10952
|
-
var IconRedo = () => /* @__PURE__ */
|
|
10953
|
-
var IconBold = () => /* @__PURE__ */
|
|
10954
|
-
var IconItalic = () => /* @__PURE__ */
|
|
10955
|
-
var IconLink = () => /* @__PURE__ */
|
|
10956
|
-
var IconStrike = () => /* @__PURE__ */
|
|
10957
|
-
var IconHeading = () => /* @__PURE__ */
|
|
10958
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
10959
|
-
var IconColor = () => /* @__PURE__ */
|
|
10960
|
-
var IconFont = () => /* @__PURE__ */
|
|
10961
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
10962
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
10963
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
10964
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
10965
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
10966
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
10967
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
10968
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
10969
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
10970
|
-
var IconTable = () => /* @__PURE__ */
|
|
10971
|
-
var IconImage = () => /* @__PURE__ */
|
|
10972
|
-
var IconVideo = () => /* @__PURE__ */
|
|
10973
|
-
var IconCut = () => /* @__PURE__ */
|
|
10974
|
-
var IconCopy = () => /* @__PURE__ */
|
|
10975
|
-
var IconCode = () => /* @__PURE__ */
|
|
10976
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
10977
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
10978
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
10979
|
-
var IconCheck = () => /* @__PURE__ */
|
|
10980
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11208
|
+
var IconUndo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
|
|
11209
|
+
var IconRedo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
|
|
11210
|
+
var IconBold = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
|
|
11211
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11212
|
+
var IconLink = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
|
|
11213
|
+
var IconStrike = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
|
|
11214
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11215
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11216
|
+
var IconColor = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React114.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
|
|
11217
|
+
var IconFont = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
|
|
11218
|
+
var IconLineHeight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
|
|
11219
|
+
var IconBulletList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
|
|
11220
|
+
var IconOrderedList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
|
|
11221
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11222
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11223
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11224
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11225
|
+
var IconIndentIncrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11226
|
+
var IconIndentDecrease = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
|
|
11227
|
+
var IconTable = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
|
|
11228
|
+
var IconImage = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
|
|
11229
|
+
var IconVideo = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
|
|
11230
|
+
var IconCut = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
|
|
11231
|
+
var IconCopy = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
|
|
11232
|
+
var IconCode = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
|
|
11233
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11234
|
+
var IconTranslate = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
|
|
11235
|
+
var IconTaskList = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
|
|
11236
|
+
var IconCheck = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
|
|
11237
|
+
var IconPaste = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
10981
11238
|
|
|
10982
11239
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
10983
11240
|
var COLOR_PALETTE = [
|
|
@@ -11116,9 +11373,9 @@ var SPECIAL_CHARS = [
|
|
|
11116
11373
|
];
|
|
11117
11374
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
11118
11375
|
const [open, setOpen] = useState31(false);
|
|
11119
|
-
const ref =
|
|
11120
|
-
const menuRef =
|
|
11121
|
-
|
|
11376
|
+
const ref = useRef29(null);
|
|
11377
|
+
const menuRef = useRef29(null);
|
|
11378
|
+
useEffect26(() => {
|
|
11122
11379
|
const handleClick = (e) => {
|
|
11123
11380
|
const target = e.target;
|
|
11124
11381
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -11130,7 +11387,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11130
11387
|
document.addEventListener("mousedown", handleClick);
|
|
11131
11388
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
11132
11389
|
}, []);
|
|
11133
|
-
|
|
11390
|
+
useEffect26(() => {
|
|
11134
11391
|
if (!open || !menuRef.current || !ref.current) return;
|
|
11135
11392
|
const menu = menuRef.current;
|
|
11136
11393
|
const trigger2 = ref.current;
|
|
@@ -11159,16 +11416,16 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11159
11416
|
};
|
|
11160
11417
|
position();
|
|
11161
11418
|
}, [open]);
|
|
11162
|
-
return /* @__PURE__ */
|
|
11419
|
+
return /* @__PURE__ */ React115.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React115.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11163
11420
|
"button",
|
|
11164
11421
|
{
|
|
11165
11422
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11166
11423
|
onClick: () => setOpen(!open)
|
|
11167
11424
|
},
|
|
11168
11425
|
trigger.label,
|
|
11169
|
-
/* @__PURE__ */
|
|
11426
|
+
/* @__PURE__ */ React115.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11170
11427
|
)), open && createPortal4(
|
|
11171
|
-
/* @__PURE__ */
|
|
11428
|
+
/* @__PURE__ */ React115.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React115.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11172
11429
|
document.body
|
|
11173
11430
|
));
|
|
11174
11431
|
};
|
|
@@ -11206,14 +11463,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11206
11463
|
}
|
|
11207
11464
|
onClose();
|
|
11208
11465
|
};
|
|
11209
|
-
return /* @__PURE__ */
|
|
11466
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11210
11467
|
"button",
|
|
11211
11468
|
{
|
|
11212
11469
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11213
11470
|
onClick: () => setActiveTab("link")
|
|
11214
11471
|
},
|
|
11215
11472
|
"\u{1F517} Link"
|
|
11216
|
-
), /* @__PURE__ */
|
|
11473
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11217
11474
|
"button",
|
|
11218
11475
|
{
|
|
11219
11476
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11221,7 +11478,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11221
11478
|
},
|
|
11222
11479
|
"</>",
|
|
11223
11480
|
" Code"
|
|
11224
|
-
)), /* @__PURE__ */
|
|
11481
|
+
)), /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ React115.createElement(
|
|
11225
11482
|
"input",
|
|
11226
11483
|
{
|
|
11227
11484
|
type: "text",
|
|
@@ -11232,7 +11489,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11232
11489
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11233
11490
|
autoFocus: true
|
|
11234
11491
|
}
|
|
11235
|
-
) : /* @__PURE__ */
|
|
11492
|
+
) : /* @__PURE__ */ React115.createElement(
|
|
11236
11493
|
"textarea",
|
|
11237
11494
|
{
|
|
11238
11495
|
className: "insert-panel-textarea",
|
|
@@ -11241,13 +11498,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11241
11498
|
onChange: (e) => setUrl(e.target.value),
|
|
11242
11499
|
rows: 3
|
|
11243
11500
|
}
|
|
11244
|
-
), /* @__PURE__ */
|
|
11501
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11245
11502
|
};
|
|
11246
11503
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11247
11504
|
const [activeTab, setActiveTab] = useState31("upload");
|
|
11248
11505
|
const [url, setUrl] = useState31("");
|
|
11249
11506
|
const [isDragging, setIsDragging] = useState31(false);
|
|
11250
|
-
const fileInputRef =
|
|
11507
|
+
const fileInputRef = useRef29(null);
|
|
11251
11508
|
const getBase64 = (file) => {
|
|
11252
11509
|
return new Promise((resolve, reject) => {
|
|
11253
11510
|
const reader = new FileReader();
|
|
@@ -11285,21 +11542,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11285
11542
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11286
11543
|
onClose();
|
|
11287
11544
|
};
|
|
11288
|
-
return /* @__PURE__ */
|
|
11545
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11289
11546
|
"button",
|
|
11290
11547
|
{
|
|
11291
11548
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11292
11549
|
onClick: () => setActiveTab("upload")
|
|
11293
11550
|
},
|
|
11294
11551
|
"\u2B06 Upload"
|
|
11295
|
-
), /* @__PURE__ */
|
|
11552
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11296
11553
|
"button",
|
|
11297
11554
|
{
|
|
11298
11555
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11299
11556
|
onClick: () => setActiveTab("url")
|
|
11300
11557
|
},
|
|
11301
11558
|
"\u{1F517} URL"
|
|
11302
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11559
|
+
)), activeTab === "upload" ? /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement(
|
|
11303
11560
|
"div",
|
|
11304
11561
|
{
|
|
11305
11562
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11311,9 +11568,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11311
11568
|
onDrop: handleDrop,
|
|
11312
11569
|
onClick: () => fileInputRef.current?.click()
|
|
11313
11570
|
},
|
|
11314
|
-
/* @__PURE__ */
|
|
11315
|
-
/* @__PURE__ */
|
|
11316
|
-
), /* @__PURE__ */
|
|
11571
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11572
|
+
/* @__PURE__ */ React115.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11573
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11317
11574
|
"input",
|
|
11318
11575
|
{
|
|
11319
11576
|
ref: fileInputRef,
|
|
@@ -11322,7 +11579,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11322
11579
|
style: { display: "none" },
|
|
11323
11580
|
onChange: handleFileSelect
|
|
11324
11581
|
}
|
|
11325
|
-
)) : /* @__PURE__ */
|
|
11582
|
+
)) : /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ React115.createElement(
|
|
11326
11583
|
"input",
|
|
11327
11584
|
{
|
|
11328
11585
|
type: "text",
|
|
@@ -11333,7 +11590,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11333
11590
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11334
11591
|
autoFocus: true
|
|
11335
11592
|
}
|
|
11336
|
-
), /* @__PURE__ */
|
|
11593
|
+
), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11337
11594
|
};
|
|
11338
11595
|
var MAX_GRID = 10;
|
|
11339
11596
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
@@ -11344,7 +11601,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11344
11601
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11345
11602
|
onClose();
|
|
11346
11603
|
};
|
|
11347
|
-
return /* @__PURE__ */
|
|
11604
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement(
|
|
11348
11605
|
"div",
|
|
11349
11606
|
{
|
|
11350
11607
|
className: "table-grid",
|
|
@@ -11353,7 +11610,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11353
11610
|
setHoverCol(0);
|
|
11354
11611
|
}
|
|
11355
11612
|
},
|
|
11356
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11613
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ React115.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ React115.createElement(
|
|
11357
11614
|
"div",
|
|
11358
11615
|
{
|
|
11359
11616
|
key: c,
|
|
@@ -11365,7 +11622,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11365
11622
|
onClick: handleInsert
|
|
11366
11623
|
}
|
|
11367
11624
|
))))
|
|
11368
|
-
), /* @__PURE__ */
|
|
11625
|
+
), /* @__PURE__ */ React115.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ React115.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ React115.createElement(
|
|
11369
11626
|
"button",
|
|
11370
11627
|
{
|
|
11371
11628
|
className: "table-grid-submit",
|
|
@@ -11399,42 +11656,42 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11399
11656
|
}
|
|
11400
11657
|
onClose();
|
|
11401
11658
|
};
|
|
11402
|
-
return /* @__PURE__ */
|
|
11659
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ React115.createElement(
|
|
11403
11660
|
"button",
|
|
11404
11661
|
{
|
|
11405
11662
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11406
11663
|
onClick: () => setTab("background")
|
|
11407
11664
|
},
|
|
11408
11665
|
"Background"
|
|
11409
|
-
), /* @__PURE__ */
|
|
11666
|
+
), /* @__PURE__ */ React115.createElement(
|
|
11410
11667
|
"button",
|
|
11411
11668
|
{
|
|
11412
11669
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11413
11670
|
onClick: () => setTab("text")
|
|
11414
11671
|
},
|
|
11415
11672
|
"Text"
|
|
11416
|
-
)), /* @__PURE__ */
|
|
11673
|
+
)), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React115.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11417
11674
|
"button",
|
|
11418
11675
|
{
|
|
11419
11676
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11420
11677
|
style: { background: color },
|
|
11421
11678
|
onClick: () => applyColor(color)
|
|
11422
11679
|
}
|
|
11423
|
-
)))), /* @__PURE__ */
|
|
11680
|
+
)))), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React115.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11424
11681
|
};
|
|
11425
11682
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11426
11683
|
const [, setEditorState] = useState31(0);
|
|
11427
11684
|
const [todoEnabled, setTodoEnabled] = useState31(false);
|
|
11428
|
-
const ttsRef =
|
|
11429
|
-
const sttRef =
|
|
11685
|
+
const ttsRef = useRef29(null);
|
|
11686
|
+
const sttRef = useRef29(null);
|
|
11430
11687
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
11431
|
-
|
|
11688
|
+
useEffect26(() => {
|
|
11432
11689
|
if (!editor) return;
|
|
11433
11690
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
11434
11691
|
editor.on("transaction", onTransaction);
|
|
11435
11692
|
return () => editor.off("transaction", onTransaction);
|
|
11436
11693
|
}, [editor]);
|
|
11437
|
-
const insertSpecialChar =
|
|
11694
|
+
const insertSpecialChar = useCallback15((char) => {
|
|
11438
11695
|
if (!editor) return;
|
|
11439
11696
|
editor.chain().focus().insertContent(char).run();
|
|
11440
11697
|
}, [editor]);
|
|
@@ -11443,7 +11700,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11443
11700
|
const [translateTarget, setTranslateTarget] = useState31("hi");
|
|
11444
11701
|
const [translateStatus, setTranslateStatus] = useState31("");
|
|
11445
11702
|
const [showTranslateModal, setShowTranslateModal] = useState31(false);
|
|
11446
|
-
const handleCopy =
|
|
11703
|
+
const handleCopy = useCallback15(async () => {
|
|
11447
11704
|
if (!editor) return;
|
|
11448
11705
|
const { from, to, empty } = editor.state.selection;
|
|
11449
11706
|
if (empty) return;
|
|
@@ -11458,7 +11715,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11458
11715
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11459
11716
|
}
|
|
11460
11717
|
}, [editor]);
|
|
11461
|
-
const handlePaste =
|
|
11718
|
+
const handlePaste = useCallback15(async () => {
|
|
11462
11719
|
if (!editor) return;
|
|
11463
11720
|
try {
|
|
11464
11721
|
const text = await navigator.clipboard.readText();
|
|
@@ -11467,7 +11724,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11467
11724
|
document.execCommand("paste");
|
|
11468
11725
|
}
|
|
11469
11726
|
}, [editor]);
|
|
11470
|
-
const handleQuickTranslate =
|
|
11727
|
+
const handleQuickTranslate = useCallback15(async () => {
|
|
11471
11728
|
if (!editor) return;
|
|
11472
11729
|
const { from, to, empty } = editor.state.selection;
|
|
11473
11730
|
if (empty) {
|
|
@@ -11501,32 +11758,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11501
11758
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11502
11759
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11503
11760
|
if (!editor) return null;
|
|
11504
|
-
return /* @__PURE__ */
|
|
11761
|
+
return /* @__PURE__ */ React115.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React115.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11505
11762
|
"button",
|
|
11506
11763
|
{
|
|
11507
11764
|
className: "toolbar-btn",
|
|
11508
11765
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11509
11766
|
disabled: !editor.can().undo()
|
|
11510
11767
|
},
|
|
11511
|
-
/* @__PURE__ */
|
|
11512
|
-
)), show("redo") && /* @__PURE__ */
|
|
11768
|
+
/* @__PURE__ */ React115.createElement(IconUndo, null)
|
|
11769
|
+
)), show("redo") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11513
11770
|
"button",
|
|
11514
11771
|
{
|
|
11515
11772
|
className: "toolbar-btn",
|
|
11516
11773
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11517
11774
|
disabled: !editor.can().redo()
|
|
11518
11775
|
},
|
|
11519
|
-
/* @__PURE__ */
|
|
11520
|
-
))), show("ai") && /* @__PURE__ */
|
|
11776
|
+
/* @__PURE__ */ React115.createElement(IconRedo, null)
|
|
11777
|
+
))), show("ai") && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React115.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React115.createElement(
|
|
11521
11778
|
Dropdown,
|
|
11522
11779
|
{
|
|
11523
11780
|
trigger: {
|
|
11524
|
-
label: /* @__PURE__ */
|
|
11781
|
+
label: /* @__PURE__ */ React115.createElement(IconHeading, null),
|
|
11525
11782
|
title: "Block type",
|
|
11526
11783
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11527
11784
|
}
|
|
11528
11785
|
},
|
|
11529
|
-
/* @__PURE__ */
|
|
11786
|
+
/* @__PURE__ */ React115.createElement(
|
|
11530
11787
|
"button",
|
|
11531
11788
|
{
|
|
11532
11789
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11534,7 +11791,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11534
11791
|
},
|
|
11535
11792
|
"\xB6 Paragraph"
|
|
11536
11793
|
),
|
|
11537
|
-
/* @__PURE__ */
|
|
11794
|
+
/* @__PURE__ */ React115.createElement(
|
|
11538
11795
|
"button",
|
|
11539
11796
|
{
|
|
11540
11797
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11542,7 +11799,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11542
11799
|
},
|
|
11543
11800
|
"Heading 1"
|
|
11544
11801
|
),
|
|
11545
|
-
/* @__PURE__ */
|
|
11802
|
+
/* @__PURE__ */ React115.createElement(
|
|
11546
11803
|
"button",
|
|
11547
11804
|
{
|
|
11548
11805
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11550,7 +11807,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11550
11807
|
},
|
|
11551
11808
|
"Heading 2"
|
|
11552
11809
|
),
|
|
11553
|
-
/* @__PURE__ */
|
|
11810
|
+
/* @__PURE__ */ React115.createElement(
|
|
11554
11811
|
"button",
|
|
11555
11812
|
{
|
|
11556
11813
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11558,7 +11815,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11558
11815
|
},
|
|
11559
11816
|
"Heading 3"
|
|
11560
11817
|
),
|
|
11561
|
-
/* @__PURE__ */
|
|
11818
|
+
/* @__PURE__ */ React115.createElement(
|
|
11562
11819
|
"button",
|
|
11563
11820
|
{
|
|
11564
11821
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11566,7 +11823,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11566
11823
|
},
|
|
11567
11824
|
"Heading 4"
|
|
11568
11825
|
),
|
|
11569
|
-
/* @__PURE__ */
|
|
11826
|
+
/* @__PURE__ */ React115.createElement(
|
|
11570
11827
|
"button",
|
|
11571
11828
|
{
|
|
11572
11829
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11574,7 +11831,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11574
11831
|
},
|
|
11575
11832
|
"\u275E Blockquote"
|
|
11576
11833
|
),
|
|
11577
|
-
/* @__PURE__ */
|
|
11834
|
+
/* @__PURE__ */ React115.createElement(
|
|
11578
11835
|
"button",
|
|
11579
11836
|
{
|
|
11580
11837
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11583,19 +11840,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11583
11840
|
"{ }",
|
|
11584
11841
|
" Code Block"
|
|
11585
11842
|
),
|
|
11586
|
-
/* @__PURE__ */
|
|
11587
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11843
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11844
|
+
), show("fontsize") && /* @__PURE__ */ React115.createElement(
|
|
11588
11845
|
Dropdown,
|
|
11589
11846
|
{
|
|
11590
11847
|
trigger: {
|
|
11591
|
-
label: /* @__PURE__ */
|
|
11848
|
+
label: /* @__PURE__ */ React115.createElement(IconFontSize, null),
|
|
11592
11849
|
title: "Font size"
|
|
11593
11850
|
}
|
|
11594
11851
|
},
|
|
11595
11852
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11596
11853
|
const sizeStr = `${size}px`;
|
|
11597
11854
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11598
|
-
return /* @__PURE__ */
|
|
11855
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11599
11856
|
"button",
|
|
11600
11857
|
{
|
|
11601
11858
|
key: size,
|
|
@@ -11611,17 +11868,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11611
11868
|
sizeStr
|
|
11612
11869
|
);
|
|
11613
11870
|
})
|
|
11614
|
-
), show("font") && /* @__PURE__ */
|
|
11871
|
+
), show("font") && /* @__PURE__ */ React115.createElement(
|
|
11615
11872
|
Dropdown,
|
|
11616
11873
|
{
|
|
11617
11874
|
trigger: {
|
|
11618
|
-
label: /* @__PURE__ */
|
|
11875
|
+
label: /* @__PURE__ */ React115.createElement(IconFont, null),
|
|
11619
11876
|
title: "Font family"
|
|
11620
11877
|
}
|
|
11621
11878
|
},
|
|
11622
11879
|
FONT_FAMILIES.map((font) => {
|
|
11623
11880
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11624
|
-
return /* @__PURE__ */
|
|
11881
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11625
11882
|
"button",
|
|
11626
11883
|
{
|
|
11627
11884
|
key: font,
|
|
@@ -11638,40 +11895,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11638
11895
|
font
|
|
11639
11896
|
);
|
|
11640
11897
|
})
|
|
11641
|
-
), show("color") && /* @__PURE__ */
|
|
11898
|
+
), show("color") && /* @__PURE__ */ React115.createElement(
|
|
11642
11899
|
Dropdown,
|
|
11643
11900
|
{
|
|
11644
11901
|
trigger: {
|
|
11645
|
-
label: /* @__PURE__ */
|
|
11902
|
+
label: /* @__PURE__ */ React115.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React115.createElement(IconColor, null)),
|
|
11646
11903
|
title: "Colors"
|
|
11647
11904
|
},
|
|
11648
11905
|
keepOpen: true
|
|
11649
11906
|
},
|
|
11650
|
-
(close) => /* @__PURE__ */
|
|
11651
|
-
), show("bold") && /* @__PURE__ */
|
|
11907
|
+
(close) => /* @__PURE__ */ React115.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11908
|
+
), show("bold") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11652
11909
|
"button",
|
|
11653
11910
|
{
|
|
11654
11911
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11655
11912
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11656
11913
|
},
|
|
11657
|
-
/* @__PURE__ */
|
|
11658
|
-
)), show("italic") && /* @__PURE__ */
|
|
11914
|
+
/* @__PURE__ */ React115.createElement(IconBold, null)
|
|
11915
|
+
)), show("italic") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11659
11916
|
"button",
|
|
11660
11917
|
{
|
|
11661
11918
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11662
11919
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11663
11920
|
},
|
|
11664
|
-
/* @__PURE__ */
|
|
11665
|
-
)), show("strike") && /* @__PURE__ */
|
|
11921
|
+
/* @__PURE__ */ React115.createElement(IconItalic, null)
|
|
11922
|
+
)), show("strike") && /* @__PURE__ */ React115.createElement(
|
|
11666
11923
|
Dropdown,
|
|
11667
11924
|
{
|
|
11668
|
-
trigger: { label: /* @__PURE__ */
|
|
11925
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11669
11926
|
},
|
|
11670
|
-
/* @__PURE__ */
|
|
11671
|
-
/* @__PURE__ */
|
|
11672
|
-
/* @__PURE__ */
|
|
11673
|
-
/* @__PURE__ */
|
|
11674
|
-
/* @__PURE__ */
|
|
11927
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ React115.createElement("s", null, "Strikethrough")),
|
|
11928
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ React115.createElement("u", null, "Underline")),
|
|
11929
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ React115.createElement("sup", null, "2"), " Superscript"),
|
|
11930
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ React115.createElement("sub", null, "2"), " Subscript"),
|
|
11931
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11675
11932
|
e.preventDefault();
|
|
11676
11933
|
const chain = editor.chain().focus();
|
|
11677
11934
|
if (!editor.state.selection.empty) {
|
|
@@ -11687,25 +11944,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11687
11944
|
c.run();
|
|
11688
11945
|
}
|
|
11689
11946
|
} }, "\u2715 Clear formatting")
|
|
11690
|
-
), show("link") && /* @__PURE__ */
|
|
11947
|
+
), show("link") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11691
11948
|
"button",
|
|
11692
11949
|
{
|
|
11693
11950
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11694
11951
|
onClick: setLink
|
|
11695
11952
|
},
|
|
11696
|
-
/* @__PURE__ */
|
|
11697
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
11953
|
+
/* @__PURE__ */ React115.createElement(IconLink, null)
|
|
11954
|
+
)), show("lineheight") && /* @__PURE__ */ React115.createElement(
|
|
11698
11955
|
Dropdown,
|
|
11699
11956
|
{
|
|
11700
11957
|
trigger: {
|
|
11701
|
-
label: /* @__PURE__ */
|
|
11958
|
+
label: /* @__PURE__ */ React115.createElement(IconLineHeight, null),
|
|
11702
11959
|
title: "Line height"
|
|
11703
11960
|
}
|
|
11704
11961
|
},
|
|
11705
11962
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11706
11963
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11707
11964
|
const isActive = currentLH === lh;
|
|
11708
|
-
return /* @__PURE__ */
|
|
11965
|
+
return /* @__PURE__ */ React115.createElement(
|
|
11709
11966
|
"button",
|
|
11710
11967
|
{
|
|
11711
11968
|
key: lh,
|
|
@@ -11721,19 +11978,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11721
11978
|
lh
|
|
11722
11979
|
);
|
|
11723
11980
|
})
|
|
11724
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
11981
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11725
11982
|
"button",
|
|
11726
11983
|
{
|
|
11727
11984
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11728
11985
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11729
11986
|
},
|
|
11730
|
-
/* @__PURE__ */
|
|
11731
|
-
)), /* @__PURE__ */
|
|
11987
|
+
/* @__PURE__ */ React115.createElement(IconBulletList, null)
|
|
11988
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11732
11989
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11733
11990
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11734
11991
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11735
11992
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11736
|
-
].map((item) => /* @__PURE__ */
|
|
11993
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11737
11994
|
"button",
|
|
11738
11995
|
{
|
|
11739
11996
|
key: item.label,
|
|
@@ -11758,24 +12015,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11758
12015
|
}).run();
|
|
11759
12016
|
}
|
|
11760
12017
|
},
|
|
11761
|
-
/* @__PURE__ */
|
|
12018
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11762
12019
|
" ",
|
|
11763
12020
|
item.label
|
|
11764
|
-
)))), show("ol") && /* @__PURE__ */
|
|
12021
|
+
)))), show("ol") && /* @__PURE__ */ React115.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11765
12022
|
"button",
|
|
11766
12023
|
{
|
|
11767
12024
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11768
12025
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11769
12026
|
},
|
|
11770
|
-
/* @__PURE__ */
|
|
11771
|
-
)), /* @__PURE__ */
|
|
12027
|
+
/* @__PURE__ */ React115.createElement(IconOrderedList, null)
|
|
12028
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11772
12029
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11773
12030
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11774
12031
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11775
12032
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11776
12033
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11777
12034
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11778
|
-
].map((item) => /* @__PURE__ */
|
|
12035
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11779
12036
|
"button",
|
|
11780
12037
|
{
|
|
11781
12038
|
key: item.label,
|
|
@@ -11800,24 +12057,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11800
12057
|
}).run();
|
|
11801
12058
|
}
|
|
11802
12059
|
},
|
|
11803
|
-
/* @__PURE__ */
|
|
12060
|
+
/* @__PURE__ */ React115.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11804
12061
|
" ",
|
|
11805
12062
|
item.label
|
|
11806
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12063
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React115.createElement(
|
|
11807
12064
|
Dropdown,
|
|
11808
12065
|
{
|
|
11809
12066
|
trigger: {
|
|
11810
|
-
label: /* @__PURE__ */
|
|
12067
|
+
label: /* @__PURE__ */ React115.createElement(IconAlignLeft, null),
|
|
11811
12068
|
title: "Align",
|
|
11812
12069
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11813
12070
|
}
|
|
11814
12071
|
},
|
|
11815
12072
|
[
|
|
11816
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11817
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11818
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11819
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11820
|
-
].map((item) => /* @__PURE__ */
|
|
12073
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ React115.createElement(IconAlignLeft, null) },
|
|
12074
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ React115.createElement(IconAlignCenter, null) },
|
|
12075
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ React115.createElement(IconAlignRight, null) },
|
|
12076
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ React115.createElement(IconAlignJustify, null) }
|
|
12077
|
+
].map((item) => /* @__PURE__ */ React115.createElement(
|
|
11821
12078
|
"button",
|
|
11822
12079
|
{
|
|
11823
12080
|
key: item.value,
|
|
@@ -11828,7 +12085,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11828
12085
|
" ",
|
|
11829
12086
|
item.label
|
|
11830
12087
|
))
|
|
11831
|
-
), show("indent") && /* @__PURE__ */
|
|
12088
|
+
), show("indent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11832
12089
|
"button",
|
|
11833
12090
|
{
|
|
11834
12091
|
className: "toolbar-btn",
|
|
@@ -11847,8 +12104,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11847
12104
|
}).run();
|
|
11848
12105
|
}
|
|
11849
12106
|
},
|
|
11850
|
-
/* @__PURE__ */
|
|
11851
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12107
|
+
/* @__PURE__ */ React115.createElement(IconIndentIncrease, null)
|
|
12108
|
+
)), show("outdent") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11852
12109
|
"button",
|
|
11853
12110
|
{
|
|
11854
12111
|
className: "toolbar-btn",
|
|
@@ -11867,29 +12124,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11867
12124
|
}).run();
|
|
11868
12125
|
}
|
|
11869
12126
|
},
|
|
11870
|
-
/* @__PURE__ */
|
|
11871
|
-
))), show("table") && /* @__PURE__ */
|
|
12127
|
+
/* @__PURE__ */ React115.createElement(IconIndentDecrease, null)
|
|
12128
|
+
))), show("table") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React115.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React115.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11872
12129
|
"button",
|
|
11873
12130
|
{
|
|
11874
12131
|
className: "toolbar-btn",
|
|
11875
12132
|
onClick: () => document.execCommand("cut")
|
|
11876
12133
|
},
|
|
11877
|
-
/* @__PURE__ */
|
|
11878
|
-
)), show("copy") && /* @__PURE__ */
|
|
12134
|
+
/* @__PURE__ */ React115.createElement(IconCut, null)
|
|
12135
|
+
)), show("copy") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11879
12136
|
"button",
|
|
11880
12137
|
{
|
|
11881
12138
|
className: "toolbar-btn",
|
|
11882
12139
|
onClick: handleCopy
|
|
11883
12140
|
},
|
|
11884
|
-
copySuccess ? /* @__PURE__ */
|
|
11885
|
-
)), show("paste") && /* @__PURE__ */
|
|
12141
|
+
copySuccess ? /* @__PURE__ */ React115.createElement(IconCheck, null) : /* @__PURE__ */ React115.createElement(IconCopy, null)
|
|
12142
|
+
)), show("paste") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11886
12143
|
"button",
|
|
11887
12144
|
{
|
|
11888
12145
|
className: "toolbar-btn",
|
|
11889
12146
|
onClick: handlePaste
|
|
11890
12147
|
},
|
|
11891
|
-
/* @__PURE__ */
|
|
11892
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12148
|
+
/* @__PURE__ */ React115.createElement(IconPaste, null)
|
|
12149
|
+
)), show("specialchars") && /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React115.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React115.createElement(
|
|
11893
12150
|
"button",
|
|
11894
12151
|
{
|
|
11895
12152
|
key: char,
|
|
@@ -11897,12 +12154,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11897
12154
|
onClick: () => insertSpecialChar(char)
|
|
11898
12155
|
},
|
|
11899
12156
|
char
|
|
11900
|
-
)))), show("code") && /* @__PURE__ */
|
|
12157
|
+
)))), show("code") && /* @__PURE__ */ React115.createElement(
|
|
11901
12158
|
Dropdown,
|
|
11902
12159
|
{
|
|
11903
|
-
trigger: { label: /* @__PURE__ */
|
|
12160
|
+
trigger: { label: /* @__PURE__ */ React115.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11904
12161
|
},
|
|
11905
|
-
/* @__PURE__ */
|
|
12162
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11906
12163
|
if (editor.isActive("codeBlock")) {
|
|
11907
12164
|
const text = (() => {
|
|
11908
12165
|
const { $from } = editor.state.selection;
|
|
@@ -11920,22 +12177,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11920
12177
|
editor.chain().focus().toggleCode().run();
|
|
11921
12178
|
}
|
|
11922
12179
|
} }, "</>", " Inline Code"),
|
|
11923
|
-
/* @__PURE__ */
|
|
11924
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12180
|
+
/* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12181
|
+
), show("fullscreen") && /* @__PURE__ */ React115.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11925
12182
|
"button",
|
|
11926
12183
|
{
|
|
11927
12184
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11928
12185
|
onClick: onToggleFullscreen
|
|
11929
12186
|
},
|
|
11930
|
-
/* @__PURE__ */
|
|
11931
|
-
)), show("tts") && /* @__PURE__ */
|
|
12187
|
+
/* @__PURE__ */ React115.createElement(IconFullscreen, null)
|
|
12188
|
+
)), show("tts") && /* @__PURE__ */ React115.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React115.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React115.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11932
12189
|
"button",
|
|
11933
12190
|
{
|
|
11934
12191
|
className: "toolbar-btn",
|
|
11935
12192
|
onClick: handleQuickTranslate
|
|
11936
12193
|
},
|
|
11937
|
-
/* @__PURE__ */
|
|
11938
|
-
)), /* @__PURE__ */
|
|
12194
|
+
/* @__PURE__ */ React115.createElement(IconTranslate, null)
|
|
12195
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React115.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React115.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
11939
12196
|
"button",
|
|
11940
12197
|
{
|
|
11941
12198
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -11978,11 +12235,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11978
12235
|
}
|
|
11979
12236
|
}
|
|
11980
12237
|
},
|
|
11981
|
-
/* @__PURE__ */
|
|
11982
|
-
)), /* @__PURE__ */
|
|
12238
|
+
/* @__PURE__ */ React115.createElement(IconTaskList, null)
|
|
12239
|
+
)), /* @__PURE__ */ React115.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
11983
12240
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
11984
12241
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
11985
|
-
return /* @__PURE__ */
|
|
12242
|
+
return /* @__PURE__ */ React115.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
11986
12243
|
const { state } = editor;
|
|
11987
12244
|
const { schema } = state;
|
|
11988
12245
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -12015,8 +12272,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12015
12272
|
}
|
|
12016
12273
|
return true;
|
|
12017
12274
|
}).run();
|
|
12018
|
-
} }, /* @__PURE__ */
|
|
12019
|
-
})))), onClose && /* @__PURE__ */
|
|
12275
|
+
} }, /* @__PURE__ */ React115.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React115.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12276
|
+
})))), onClose && /* @__PURE__ */ React115.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React115.createElement(
|
|
12020
12277
|
"button",
|
|
12021
12278
|
{
|
|
12022
12279
|
className: "toolbar-btn btn-cross",
|
|
@@ -12032,8 +12289,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12032
12289
|
onClose();
|
|
12033
12290
|
}
|
|
12034
12291
|
},
|
|
12035
|
-
/* @__PURE__ */
|
|
12036
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12292
|
+
/* @__PURE__ */ React115.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12293
|
+
))), showTranslateModal && /* @__PURE__ */ React115.createElement(
|
|
12037
12294
|
TranslateModal_default,
|
|
12038
12295
|
{
|
|
12039
12296
|
editor,
|
|
@@ -12051,7 +12308,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12051
12308
|
var Toolbar_default = Toolbar;
|
|
12052
12309
|
|
|
12053
12310
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12054
|
-
import
|
|
12311
|
+
import React116, { useState as useState32, useEffect as useEffect27, useRef as useRef30 } from "react";
|
|
12055
12312
|
import { createPortal as createPortal5 } from "react-dom";
|
|
12056
12313
|
var ALIGNMENTS = [
|
|
12057
12314
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12070,7 +12327,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12070
12327
|
const [lockRatio, setLockRatio] = useState32(true);
|
|
12071
12328
|
const [naturalWidth, setNaturalWidth] = useState32(0);
|
|
12072
12329
|
const [naturalHeight, setNaturalHeight] = useState32(0);
|
|
12073
|
-
|
|
12330
|
+
useEffect27(() => {
|
|
12074
12331
|
if (src) {
|
|
12075
12332
|
const img = new window.Image();
|
|
12076
12333
|
img.onload = () => {
|
|
@@ -12109,7 +12366,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12109
12366
|
editor.chain().focus().deleteSelection().run();
|
|
12110
12367
|
onClose();
|
|
12111
12368
|
};
|
|
12112
|
-
return /* @__PURE__ */
|
|
12369
|
+
return /* @__PURE__ */ React116.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React116.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React116.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React116.createElement("h3", null, "Image properties"), /* @__PURE__ */ React116.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React116.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React116.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ React116.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ React116.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React116.createElement(
|
|
12113
12370
|
"input",
|
|
12114
12371
|
{
|
|
12115
12372
|
type: "number",
|
|
@@ -12117,14 +12374,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12117
12374
|
value: width,
|
|
12118
12375
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12119
12376
|
}
|
|
12120
|
-
), /* @__PURE__ */
|
|
12377
|
+
), /* @__PURE__ */ React116.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
12121
12378
|
"button",
|
|
12122
12379
|
{
|
|
12123
12380
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12124
12381
|
onClick: () => setLockRatio(!lockRatio)
|
|
12125
12382
|
},
|
|
12126
12383
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12127
|
-
)), /* @__PURE__ */
|
|
12384
|
+
)), /* @__PURE__ */ React116.createElement(
|
|
12128
12385
|
"input",
|
|
12129
12386
|
{
|
|
12130
12387
|
type: "number",
|
|
@@ -12132,21 +12389,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12132
12389
|
value: height,
|
|
12133
12390
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12134
12391
|
}
|
|
12135
|
-
))), /* @__PURE__ */
|
|
12392
|
+
))), /* @__PURE__ */ React116.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ React116.createElement(
|
|
12136
12393
|
"button",
|
|
12137
12394
|
{
|
|
12138
12395
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12139
12396
|
onClick: () => setActiveTab("image")
|
|
12140
12397
|
},
|
|
12141
12398
|
"Image"
|
|
12142
|
-
), /* @__PURE__ */
|
|
12399
|
+
), /* @__PURE__ */ React116.createElement(
|
|
12143
12400
|
"button",
|
|
12144
12401
|
{
|
|
12145
12402
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12146
12403
|
onClick: () => setActiveTab("advanced")
|
|
12147
12404
|
},
|
|
12148
12405
|
"Advanced"
|
|
12149
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12406
|
+
)), activeTab === "image" ? /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ React116.createElement(
|
|
12150
12407
|
"input",
|
|
12151
12408
|
{
|
|
12152
12409
|
type: "text",
|
|
@@ -12154,7 +12411,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12154
12411
|
value: src,
|
|
12155
12412
|
onChange: (e) => setSrc(e.target.value)
|
|
12156
12413
|
}
|
|
12157
|
-
), /* @__PURE__ */
|
|
12414
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ React116.createElement(
|
|
12158
12415
|
"input",
|
|
12159
12416
|
{
|
|
12160
12417
|
type: "text",
|
|
@@ -12162,7 +12419,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12162
12419
|
value: title,
|
|
12163
12420
|
onChange: (e) => setTitle(e.target.value)
|
|
12164
12421
|
}
|
|
12165
|
-
), /* @__PURE__ */
|
|
12422
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ React116.createElement(
|
|
12166
12423
|
"input",
|
|
12167
12424
|
{
|
|
12168
12425
|
type: "text",
|
|
@@ -12170,7 +12427,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12170
12427
|
value: alt,
|
|
12171
12428
|
onChange: (e) => setAlt(e.target.value)
|
|
12172
12429
|
}
|
|
12173
|
-
), /* @__PURE__ */
|
|
12430
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ React116.createElement(
|
|
12174
12431
|
"input",
|
|
12175
12432
|
{
|
|
12176
12433
|
type: "text",
|
|
@@ -12178,14 +12435,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12178
12435
|
value: link,
|
|
12179
12436
|
onChange: (e) => setLink(e.target.value)
|
|
12180
12437
|
}
|
|
12181
|
-
), /* @__PURE__ */
|
|
12438
|
+
), /* @__PURE__ */ React116.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ React116.createElement(
|
|
12182
12439
|
"input",
|
|
12183
12440
|
{
|
|
12184
12441
|
type: "checkbox",
|
|
12185
12442
|
checked: openInNewTab,
|
|
12186
12443
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12187
12444
|
}
|
|
12188
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12445
|
+
), "Open link in new tab")) : /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React116.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12189
12446
|
};
|
|
12190
12447
|
var ImageToolbar = ({ editor }) => {
|
|
12191
12448
|
const [showModal, setShowModal] = useState32(false);
|
|
@@ -12193,8 +12450,8 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12193
12450
|
const [showVAlign, setShowVAlign] = useState32(false);
|
|
12194
12451
|
const [copyStatus, setCopyStatus] = useState32("");
|
|
12195
12452
|
const [pos, setPos] = useState32(null);
|
|
12196
|
-
const toolbarRef =
|
|
12197
|
-
|
|
12453
|
+
const toolbarRef = useRef30(null);
|
|
12454
|
+
useEffect27(() => {
|
|
12198
12455
|
if (!editor) return;
|
|
12199
12456
|
const update = () => {
|
|
12200
12457
|
const { selection } = editor.state;
|
|
@@ -12224,7 +12481,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12224
12481
|
const node = editor?.state.selection.node;
|
|
12225
12482
|
const isImage = node && node.type.name === "image";
|
|
12226
12483
|
if (!editor || !isImage || !pos) return showModal ? createPortal5(
|
|
12227
|
-
/* @__PURE__ */
|
|
12484
|
+
/* @__PURE__ */ React116.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12228
12485
|
document.body
|
|
12229
12486
|
) : null;
|
|
12230
12487
|
const handleDelete = () => {
|
|
@@ -12301,7 +12558,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12301
12558
|
setShowVAlign(false);
|
|
12302
12559
|
};
|
|
12303
12560
|
return createPortal5(
|
|
12304
|
-
/* @__PURE__ */
|
|
12561
|
+
/* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(
|
|
12305
12562
|
"div",
|
|
12306
12563
|
{
|
|
12307
12564
|
className: "image-toolbar",
|
|
@@ -12309,14 +12566,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12309
12566
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12310
12567
|
onMouseDown: (e) => e.preventDefault()
|
|
12311
12568
|
},
|
|
12312
|
-
/* @__PURE__ */
|
|
12313
|
-
/* @__PURE__ */
|
|
12314
|
-
/* @__PURE__ */
|
|
12315
|
-
/* @__PURE__ */
|
|
12569
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12570
|
+
/* @__PURE__ */ React116.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12571
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React116.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12572
|
+
/* @__PURE__ */ React116.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React116.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12316
12573
|
setShowAlign(!showAlign);
|
|
12317
12574
|
setShowVAlign(false);
|
|
12318
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12319
|
-
), showModal && /* @__PURE__ */
|
|
12575
|
+
} }, "\u2630 ", /* @__PURE__ */ React116.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React116.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React116.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12576
|
+
), showModal && /* @__PURE__ */ React116.createElement(
|
|
12320
12577
|
ImagePropertiesModal,
|
|
12321
12578
|
{
|
|
12322
12579
|
editor,
|
|
@@ -12330,7 +12587,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12330
12587
|
var ImageToolbar_default = ImageToolbar;
|
|
12331
12588
|
|
|
12332
12589
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12333
|
-
import
|
|
12590
|
+
import React117, { useState as useState33, useEffect as useEffect28, useRef as useRef31 } from "react";
|
|
12334
12591
|
import { createPortal as createPortal6 } from "react-dom";
|
|
12335
12592
|
var ALIGNMENTS2 = [
|
|
12336
12593
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12375,7 +12632,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12375
12632
|
onClose();
|
|
12376
12633
|
};
|
|
12377
12634
|
const isYoutube = nodeType === "youtube";
|
|
12378
|
-
return /* @__PURE__ */
|
|
12635
|
+
return /* @__PURE__ */ React117.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React117.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React117.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React117.createElement("h3", null, "Video properties"), /* @__PURE__ */ React117.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React117.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React117.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ React117.createElement(
|
|
12379
12636
|
"iframe",
|
|
12380
12637
|
{
|
|
12381
12638
|
src,
|
|
@@ -12383,14 +12640,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12383
12640
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12384
12641
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12385
12642
|
}
|
|
12386
|
-
) : /* @__PURE__ */
|
|
12643
|
+
) : /* @__PURE__ */ React117.createElement(
|
|
12387
12644
|
"video",
|
|
12388
12645
|
{
|
|
12389
12646
|
src,
|
|
12390
12647
|
controls: true,
|
|
12391
12648
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12392
12649
|
}
|
|
12393
|
-
)), /* @__PURE__ */
|
|
12650
|
+
)), /* @__PURE__ */ React117.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React117.createElement(
|
|
12394
12651
|
"input",
|
|
12395
12652
|
{
|
|
12396
12653
|
type: "number",
|
|
@@ -12398,14 +12655,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12398
12655
|
value: width,
|
|
12399
12656
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12400
12657
|
}
|
|
12401
|
-
), /* @__PURE__ */
|
|
12658
|
+
), /* @__PURE__ */ React117.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React117.createElement(
|
|
12402
12659
|
"button",
|
|
12403
12660
|
{
|
|
12404
12661
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12405
12662
|
onClick: () => setLockRatio(!lockRatio)
|
|
12406
12663
|
},
|
|
12407
12664
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12408
|
-
)), /* @__PURE__ */
|
|
12665
|
+
)), /* @__PURE__ */ React117.createElement(
|
|
12409
12666
|
"input",
|
|
12410
12667
|
{
|
|
12411
12668
|
type: "number",
|
|
@@ -12413,7 +12670,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12413
12670
|
value: height,
|
|
12414
12671
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12415
12672
|
}
|
|
12416
|
-
))), /* @__PURE__ */
|
|
12673
|
+
))), /* @__PURE__ */ React117.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ React117.createElement(
|
|
12417
12674
|
"input",
|
|
12418
12675
|
{
|
|
12419
12676
|
type: "text",
|
|
@@ -12421,7 +12678,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12421
12678
|
value: src,
|
|
12422
12679
|
onChange: (e) => setSrc(e.target.value)
|
|
12423
12680
|
}
|
|
12424
|
-
), /* @__PURE__ */
|
|
12681
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ React117.createElement(
|
|
12425
12682
|
"input",
|
|
12426
12683
|
{
|
|
12427
12684
|
type: "number",
|
|
@@ -12429,7 +12686,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12429
12686
|
value: width,
|
|
12430
12687
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12431
12688
|
}
|
|
12432
|
-
), /* @__PURE__ */
|
|
12689
|
+
), /* @__PURE__ */ React117.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ React117.createElement(
|
|
12433
12690
|
"input",
|
|
12434
12691
|
{
|
|
12435
12692
|
type: "number",
|
|
@@ -12437,7 +12694,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12437
12694
|
value: height,
|
|
12438
12695
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12439
12696
|
}
|
|
12440
|
-
)))), /* @__PURE__ */
|
|
12697
|
+
)))), /* @__PURE__ */ React117.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12441
12698
|
};
|
|
12442
12699
|
var VideoToolbar = ({ editor }) => {
|
|
12443
12700
|
const [showModal, setShowModal] = useState33(false);
|
|
@@ -12445,8 +12702,8 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12445
12702
|
const [showAlign, setShowAlign] = useState33(false);
|
|
12446
12703
|
const [copyStatus, setCopyStatus] = useState33("");
|
|
12447
12704
|
const [pos, setPos] = useState33(null);
|
|
12448
|
-
const toolbarRef =
|
|
12449
|
-
|
|
12705
|
+
const toolbarRef = useRef31(null);
|
|
12706
|
+
useEffect28(() => {
|
|
12450
12707
|
if (!editor) return;
|
|
12451
12708
|
const update = () => {
|
|
12452
12709
|
const { selection } = editor.state;
|
|
@@ -12477,7 +12734,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12477
12734
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12478
12735
|
const nodeType = node?.type.name;
|
|
12479
12736
|
if (!editor || !isVideo || !pos) return showModal ? createPortal6(
|
|
12480
|
-
/* @__PURE__ */
|
|
12737
|
+
/* @__PURE__ */ React117.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12481
12738
|
document.body
|
|
12482
12739
|
) : null;
|
|
12483
12740
|
const handleDelete = () => {
|
|
@@ -12524,7 +12781,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12524
12781
|
);
|
|
12525
12782
|
};
|
|
12526
12783
|
return createPortal6(
|
|
12527
|
-
/* @__PURE__ */
|
|
12784
|
+
/* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(
|
|
12528
12785
|
"div",
|
|
12529
12786
|
{
|
|
12530
12787
|
className: "image-toolbar",
|
|
@@ -12532,30 +12789,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12532
12789
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12533
12790
|
onMouseDown: (e) => e.preventDefault()
|
|
12534
12791
|
},
|
|
12535
|
-
/* @__PURE__ */
|
|
12536
|
-
/* @__PURE__ */
|
|
12537
|
-
/* @__PURE__ */
|
|
12538
|
-
/* @__PURE__ */
|
|
12792
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12793
|
+
/* @__PURE__ */ React117.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12794
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React117.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12795
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12539
12796
|
setShowSize(!showSize);
|
|
12540
12797
|
setShowAlign(false);
|
|
12541
|
-
} }, /* @__PURE__ */
|
|
12798
|
+
} }, /* @__PURE__ */ React117.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12542
12799
|
handleResize("small");
|
|
12543
12800
|
setShowSize(false);
|
|
12544
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12801
|
+
} }, "Small (320x180)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12545
12802
|
handleResize("medium");
|
|
12546
12803
|
setShowSize(false);
|
|
12547
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12804
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12548
12805
|
handleResize("large");
|
|
12549
12806
|
setShowSize(false);
|
|
12550
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12807
|
+
} }, "Large (640x360)"), /* @__PURE__ */ React117.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12551
12808
|
handleResize("full");
|
|
12552
12809
|
setShowSize(false);
|
|
12553
12810
|
} }, "Full (854x480)"))),
|
|
12554
|
-
/* @__PURE__ */
|
|
12811
|
+
/* @__PURE__ */ React117.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React117.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React117.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12555
12812
|
setShowAlign(!showAlign);
|
|
12556
12813
|
setShowSize(false);
|
|
12557
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12558
|
-
), showModal && /* @__PURE__ */
|
|
12814
|
+
} }, "\u2630 ", /* @__PURE__ */ React117.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React117.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React117.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12815
|
+
), showModal && /* @__PURE__ */ React117.createElement(
|
|
12559
12816
|
VideoPropertiesModal,
|
|
12560
12817
|
{
|
|
12561
12818
|
editor,
|
|
@@ -12570,22 +12827,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12570
12827
|
var VideoToolbar_default = VideoToolbar;
|
|
12571
12828
|
|
|
12572
12829
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12573
|
-
import
|
|
12830
|
+
import React118, { useState as useState34, useEffect as useEffect29, useRef as useRef32 } from "react";
|
|
12574
12831
|
import { createPortal as createPortal7 } from "react-dom";
|
|
12575
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12576
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12577
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12578
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12579
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12580
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12581
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12582
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12583
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12584
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12832
|
+
var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12833
|
+
var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12834
|
+
var IconAddColBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12835
|
+
var IconAddColAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12836
|
+
var IconDeleteRow = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12837
|
+
var IconDeleteCol = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12838
|
+
var IconDeleteTable = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12839
|
+
var IconMergeCells = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React118.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12840
|
+
var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12841
|
+
var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12585
12842
|
var TableToolbar = ({ editor }) => {
|
|
12586
12843
|
const [pos, setPos] = useState34(null);
|
|
12587
|
-
const toolbarRef =
|
|
12588
|
-
|
|
12844
|
+
const toolbarRef = useRef32(null);
|
|
12845
|
+
useEffect29(() => {
|
|
12589
12846
|
if (!editor) return;
|
|
12590
12847
|
const update = () => {
|
|
12591
12848
|
if (!editor.isActive("table")) {
|
|
@@ -12629,7 +12886,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12629
12886
|
const canSplit = editor.can().splitCell();
|
|
12630
12887
|
const prevent = (e) => e.preventDefault();
|
|
12631
12888
|
return createPortal7(
|
|
12632
|
-
/* @__PURE__ */
|
|
12889
|
+
/* @__PURE__ */ React118.createElement(
|
|
12633
12890
|
"div",
|
|
12634
12891
|
{
|
|
12635
12892
|
ref: toolbarRef,
|
|
@@ -12637,19 +12894,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12637
12894
|
style: { top: pos.top, left: pos.left },
|
|
12638
12895
|
onMouseDown: prevent
|
|
12639
12896
|
},
|
|
12640
|
-
/* @__PURE__ */
|
|
12641
|
-
/* @__PURE__ */
|
|
12642
|
-
/* @__PURE__ */
|
|
12643
|
-
/* @__PURE__ */
|
|
12644
|
-
/* @__PURE__ */
|
|
12645
|
-
/* @__PURE__ */
|
|
12646
|
-
/* @__PURE__ */
|
|
12647
|
-
/* @__PURE__ */
|
|
12648
|
-
/* @__PURE__ */
|
|
12649
|
-
/* @__PURE__ */
|
|
12650
|
-
/* @__PURE__ */
|
|
12651
|
-
/* @__PURE__ */
|
|
12652
|
-
/* @__PURE__ */
|
|
12897
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddRowBefore, null))),
|
|
12898
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddRowAfter, null))),
|
|
12899
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React118.createElement(IconDeleteRow, null))),
|
|
12900
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12901
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React118.createElement(IconAddColBefore, null))),
|
|
12902
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React118.createElement(IconAddColAfter, null))),
|
|
12903
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React118.createElement(IconDeleteCol, null))),
|
|
12904
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12905
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React118.createElement(IconMergeCells, null))),
|
|
12906
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React118.createElement(IconSplitCell, null))),
|
|
12907
|
+
/* @__PURE__ */ React118.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12908
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React118.createElement(IconToggleHeader, null))),
|
|
12909
|
+
/* @__PURE__ */ React118.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React118.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React118.createElement(IconDeleteTable, null)))
|
|
12653
12910
|
),
|
|
12654
12911
|
document.body
|
|
12655
12912
|
);
|
|
@@ -12815,7 +13072,7 @@ var RufousTextEditor = ({
|
|
|
12815
13072
|
sx
|
|
12816
13073
|
}) => {
|
|
12817
13074
|
const sxClass = useSx(sx);
|
|
12818
|
-
const toolbarButtons =
|
|
13075
|
+
const toolbarButtons = useMemo5(() => {
|
|
12819
13076
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12820
13077
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12821
13078
|
if (hideButtons) {
|
|
@@ -12823,13 +13080,13 @@ var RufousTextEditor = ({
|
|
|
12823
13080
|
}
|
|
12824
13081
|
return visible;
|
|
12825
13082
|
}, [buttons, variant, hideButtons]);
|
|
12826
|
-
const mentionSuggestion =
|
|
12827
|
-
const onChangeRef =
|
|
12828
|
-
const onBlurRef =
|
|
12829
|
-
|
|
13083
|
+
const mentionSuggestion = useMemo5(() => createMentionSuggestion(mentions), [mentions]);
|
|
13084
|
+
const onChangeRef = useRef33(onChange);
|
|
13085
|
+
const onBlurRef = useRef33(onBlur);
|
|
13086
|
+
useEffect30(() => {
|
|
12830
13087
|
onChangeRef.current = onChange;
|
|
12831
13088
|
}, [onChange]);
|
|
12832
|
-
|
|
13089
|
+
useEffect30(() => {
|
|
12833
13090
|
onBlurRef.current = onBlur;
|
|
12834
13091
|
}, [onBlur]);
|
|
12835
13092
|
const isEditable = editable && !disabled;
|
|
@@ -12930,8 +13187,8 @@ var RufousTextEditor = ({
|
|
|
12930
13187
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12931
13188
|
}
|
|
12932
13189
|
});
|
|
12933
|
-
const wrapperRef =
|
|
12934
|
-
|
|
13190
|
+
const wrapperRef = useRef33(null);
|
|
13191
|
+
useEffect30(() => {
|
|
12935
13192
|
if (!editor) return;
|
|
12936
13193
|
let blurTimer = null;
|
|
12937
13194
|
const handler = ({ event }) => {
|
|
@@ -12949,7 +13206,7 @@ var RufousTextEditor = ({
|
|
|
12949
13206
|
if (blurTimer) clearTimeout(blurTimer);
|
|
12950
13207
|
};
|
|
12951
13208
|
}, [editor]);
|
|
12952
|
-
const setLinkRef =
|
|
13209
|
+
const setLinkRef = useRef33(null);
|
|
12953
13210
|
const [linkModalOpen, setLinkModalOpen] = useState35(false);
|
|
12954
13211
|
const [linkUrl, setLinkUrl] = useState35("");
|
|
12955
13212
|
const [linkText, setLinkText] = useState35("");
|
|
@@ -12957,7 +13214,7 @@ var RufousTextEditor = ({
|
|
|
12957
13214
|
const [linkNewTab, setLinkNewTab] = useState35(true);
|
|
12958
13215
|
const [linkNoFollow, setLinkNoFollow] = useState35(true);
|
|
12959
13216
|
const [linkSelection, setLinkSelection] = useState35(null);
|
|
12960
|
-
const setLink =
|
|
13217
|
+
const setLink = useCallback16(() => {
|
|
12961
13218
|
if (!editor) return;
|
|
12962
13219
|
const attrs = editor.getAttributes("link");
|
|
12963
13220
|
const previousUrl = attrs.href || "";
|
|
@@ -12994,10 +13251,10 @@ var RufousTextEditor = ({
|
|
|
12994
13251
|
setLinkSelection({ from, to });
|
|
12995
13252
|
setLinkModalOpen(true);
|
|
12996
13253
|
}, [editor]);
|
|
12997
|
-
|
|
13254
|
+
useEffect30(() => {
|
|
12998
13255
|
setLinkRef.current = setLink;
|
|
12999
13256
|
}, [setLink]);
|
|
13000
|
-
|
|
13257
|
+
useEffect30(() => {
|
|
13001
13258
|
if (!editor?.view) return;
|
|
13002
13259
|
const handleKeyDown = (event) => {
|
|
13003
13260
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -13029,7 +13286,7 @@ var RufousTextEditor = ({
|
|
|
13029
13286
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
13030
13287
|
};
|
|
13031
13288
|
}, [editor]);
|
|
13032
|
-
const handleLinkSubmit =
|
|
13289
|
+
const handleLinkSubmit = useCallback16(() => {
|
|
13033
13290
|
if (!editor || !linkSelection) return;
|
|
13034
13291
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
13035
13292
|
if (linkUrl === "") {
|
|
@@ -13065,7 +13322,7 @@ var RufousTextEditor = ({
|
|
|
13065
13322
|
setLinkClassName("");
|
|
13066
13323
|
setLinkSelection(null);
|
|
13067
13324
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13068
|
-
const handleLinkRemove =
|
|
13325
|
+
const handleLinkRemove = useCallback16(() => {
|
|
13069
13326
|
if (!editor || !linkSelection) return;
|
|
13070
13327
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13071
13328
|
setLinkModalOpen(false);
|
|
@@ -13074,7 +13331,7 @@ var RufousTextEditor = ({
|
|
|
13074
13331
|
setLinkClassName("");
|
|
13075
13332
|
setLinkSelection(null);
|
|
13076
13333
|
}, [editor, linkSelection]);
|
|
13077
|
-
const handleLinkCancel =
|
|
13334
|
+
const handleLinkCancel = useCallback16(() => {
|
|
13078
13335
|
setLinkModalOpen(false);
|
|
13079
13336
|
setLinkUrl("");
|
|
13080
13337
|
setLinkText("");
|
|
@@ -13083,20 +13340,20 @@ var RufousTextEditor = ({
|
|
|
13083
13340
|
editor?.chain().focus().run();
|
|
13084
13341
|
}, [editor]);
|
|
13085
13342
|
const [saveStatus, setSaveStatus] = useState35("");
|
|
13086
|
-
const handleSave =
|
|
13343
|
+
const handleSave = useCallback16(() => {
|
|
13087
13344
|
if (!editor || !onSaveProp) return;
|
|
13088
13345
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13089
13346
|
setSaveStatus("Saved!");
|
|
13090
13347
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13091
13348
|
}, [editor, onSaveProp]);
|
|
13092
|
-
const handleExport =
|
|
13349
|
+
const handleExport = useCallback16(() => {
|
|
13093
13350
|
if (!editor || !onExportProp) return;
|
|
13094
13351
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13095
13352
|
}, [editor, onExportProp]);
|
|
13096
|
-
const providerValue =
|
|
13353
|
+
const providerValue = useMemo5(() => ({ editor }), [editor]);
|
|
13097
13354
|
const [isFullscreen, setIsFullscreen] = useState35(false);
|
|
13098
|
-
const toggleFullscreen =
|
|
13099
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13355
|
+
const toggleFullscreen = useCallback16(() => setIsFullscreen((prev) => !prev), []);
|
|
13356
|
+
const wrapperJsx = /* @__PURE__ */ React119.createElement(
|
|
13100
13357
|
"div",
|
|
13101
13358
|
{
|
|
13102
13359
|
ref: wrapperRef,
|
|
@@ -13107,7 +13364,7 @@ var RufousTextEditor = ({
|
|
|
13107
13364
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13108
13365
|
}
|
|
13109
13366
|
},
|
|
13110
|
-
/* @__PURE__ */
|
|
13367
|
+
/* @__PURE__ */ React119.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React119.createElement(
|
|
13111
13368
|
Toolbar_default,
|
|
13112
13369
|
{
|
|
13113
13370
|
editor,
|
|
@@ -13122,7 +13379,7 @@ var RufousTextEditor = ({
|
|
|
13122
13379
|
isFullscreen,
|
|
13123
13380
|
onToggleFullscreen: toggleFullscreen
|
|
13124
13381
|
}
|
|
13125
|
-
), /* @__PURE__ */
|
|
13382
|
+
), /* @__PURE__ */ React119.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React119.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React119.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React119.createElement(
|
|
13126
13383
|
BubbleMenu,
|
|
13127
13384
|
{
|
|
13128
13385
|
editor,
|
|
@@ -13140,31 +13397,31 @@ var RufousTextEditor = ({
|
|
|
13140
13397
|
}
|
|
13141
13398
|
}
|
|
13142
13399
|
},
|
|
13143
|
-
/* @__PURE__ */
|
|
13400
|
+
/* @__PURE__ */ React119.createElement(
|
|
13144
13401
|
"button",
|
|
13145
13402
|
{
|
|
13146
13403
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13147
13404
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13148
13405
|
},
|
|
13149
|
-
/* @__PURE__ */
|
|
13406
|
+
/* @__PURE__ */ React119.createElement("strong", null, "B")
|
|
13150
13407
|
),
|
|
13151
|
-
/* @__PURE__ */
|
|
13408
|
+
/* @__PURE__ */ React119.createElement(
|
|
13152
13409
|
"button",
|
|
13153
13410
|
{
|
|
13154
13411
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13155
13412
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13156
13413
|
},
|
|
13157
|
-
/* @__PURE__ */
|
|
13414
|
+
/* @__PURE__ */ React119.createElement("em", null, "I")
|
|
13158
13415
|
),
|
|
13159
|
-
/* @__PURE__ */
|
|
13416
|
+
/* @__PURE__ */ React119.createElement(
|
|
13160
13417
|
"button",
|
|
13161
13418
|
{
|
|
13162
13419
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13163
13420
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13164
13421
|
},
|
|
13165
|
-
/* @__PURE__ */
|
|
13422
|
+
/* @__PURE__ */ React119.createElement("s", null, "S")
|
|
13166
13423
|
),
|
|
13167
|
-
/* @__PURE__ */
|
|
13424
|
+
/* @__PURE__ */ React119.createElement(
|
|
13168
13425
|
"button",
|
|
13169
13426
|
{
|
|
13170
13427
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13172,7 +13429,7 @@ var RufousTextEditor = ({
|
|
|
13172
13429
|
},
|
|
13173
13430
|
"</>"
|
|
13174
13431
|
),
|
|
13175
|
-
/* @__PURE__ */
|
|
13432
|
+
/* @__PURE__ */ React119.createElement(
|
|
13176
13433
|
"button",
|
|
13177
13434
|
{
|
|
13178
13435
|
onClick: setLink,
|
|
@@ -13180,7 +13437,7 @@ var RufousTextEditor = ({
|
|
|
13180
13437
|
},
|
|
13181
13438
|
"\u{1F517}"
|
|
13182
13439
|
)
|
|
13183
|
-
), editor && /* @__PURE__ */
|
|
13440
|
+
), editor && /* @__PURE__ */ React119.createElement(
|
|
13184
13441
|
FloatingMenu,
|
|
13185
13442
|
{
|
|
13186
13443
|
editor,
|
|
@@ -13195,7 +13452,7 @@ var RufousTextEditor = ({
|
|
|
13195
13452
|
}
|
|
13196
13453
|
}
|
|
13197
13454
|
},
|
|
13198
|
-
/* @__PURE__ */
|
|
13455
|
+
/* @__PURE__ */ React119.createElement(
|
|
13199
13456
|
"button",
|
|
13200
13457
|
{
|
|
13201
13458
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13203,7 +13460,7 @@ var RufousTextEditor = ({
|
|
|
13203
13460
|
},
|
|
13204
13461
|
"H1"
|
|
13205
13462
|
),
|
|
13206
|
-
/* @__PURE__ */
|
|
13463
|
+
/* @__PURE__ */ React119.createElement(
|
|
13207
13464
|
"button",
|
|
13208
13465
|
{
|
|
13209
13466
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13211,7 +13468,7 @@ var RufousTextEditor = ({
|
|
|
13211
13468
|
},
|
|
13212
13469
|
"H2"
|
|
13213
13470
|
),
|
|
13214
|
-
/* @__PURE__ */
|
|
13471
|
+
/* @__PURE__ */ React119.createElement(
|
|
13215
13472
|
"button",
|
|
13216
13473
|
{
|
|
13217
13474
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13219,7 +13476,7 @@ var RufousTextEditor = ({
|
|
|
13219
13476
|
},
|
|
13220
13477
|
"\u2022 List"
|
|
13221
13478
|
),
|
|
13222
|
-
/* @__PURE__ */
|
|
13479
|
+
/* @__PURE__ */ React119.createElement(
|
|
13223
13480
|
"button",
|
|
13224
13481
|
{
|
|
13225
13482
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13227,7 +13484,7 @@ var RufousTextEditor = ({
|
|
|
13227
13484
|
},
|
|
13228
13485
|
"1. List"
|
|
13229
13486
|
),
|
|
13230
|
-
/* @__PURE__ */
|
|
13487
|
+
/* @__PURE__ */ React119.createElement(
|
|
13231
13488
|
"button",
|
|
13232
13489
|
{
|
|
13233
13490
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13235,8 +13492,8 @@ var RufousTextEditor = ({
|
|
|
13235
13492
|
},
|
|
13236
13493
|
"\u201C Quote"
|
|
13237
13494
|
)
|
|
13238
|
-
), /* @__PURE__ */
|
|
13239
|
-
/* @__PURE__ */
|
|
13495
|
+
), /* @__PURE__ */ React119.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React119.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React119.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React119.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React119.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React119.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
|
|
13496
|
+
/* @__PURE__ */ React119.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React119.createElement(
|
|
13240
13497
|
"input",
|
|
13241
13498
|
{
|
|
13242
13499
|
type: "url",
|
|
@@ -13249,7 +13506,7 @@ var RufousTextEditor = ({
|
|
|
13249
13506
|
placeholder: "https://example.com",
|
|
13250
13507
|
autoFocus: true
|
|
13251
13508
|
}
|
|
13252
|
-
)), /* @__PURE__ */
|
|
13509
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React119.createElement(
|
|
13253
13510
|
"input",
|
|
13254
13511
|
{
|
|
13255
13512
|
type: "text",
|
|
@@ -13261,24 +13518,24 @@ var RufousTextEditor = ({
|
|
|
13261
13518
|
},
|
|
13262
13519
|
placeholder: "Link text"
|
|
13263
13520
|
}
|
|
13264
|
-
)), /* @__PURE__ */
|
|
13521
|
+
)), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13265
13522
|
"input",
|
|
13266
13523
|
{
|
|
13267
13524
|
type: "checkbox",
|
|
13268
13525
|
checked: linkNewTab,
|
|
13269
13526
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13270
13527
|
}
|
|
13271
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13528
|
+
), "Open in new tab"), /* @__PURE__ */ React119.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React119.createElement(
|
|
13272
13529
|
"input",
|
|
13273
13530
|
{
|
|
13274
13531
|
type: "checkbox",
|
|
13275
13532
|
checked: linkNoFollow,
|
|
13276
13533
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13277
13534
|
}
|
|
13278
|
-
), "No follow"))), /* @__PURE__ */
|
|
13535
|
+
), "No follow"))), /* @__PURE__ */ React119.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React119.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13279
13536
|
document.body
|
|
13280
13537
|
)),
|
|
13281
|
-
helperText && /* @__PURE__ */
|
|
13538
|
+
helperText && /* @__PURE__ */ React119.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13282
13539
|
);
|
|
13283
13540
|
return isFullscreen ? createPortal8(wrapperJsx, document.body) : wrapperJsx;
|
|
13284
13541
|
};
|
|
@@ -13289,7 +13546,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13289
13546
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13290
13547
|
} catch {
|
|
13291
13548
|
}
|
|
13292
|
-
return /* @__PURE__ */
|
|
13549
|
+
return /* @__PURE__ */ React119.createElement(
|
|
13293
13550
|
"div",
|
|
13294
13551
|
{
|
|
13295
13552
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13403,6 +13660,7 @@ export {
|
|
|
13403
13660
|
Skeleton,
|
|
13404
13661
|
Slide,
|
|
13405
13662
|
Slider,
|
|
13663
|
+
SmartSelect,
|
|
13406
13664
|
Snackbar,
|
|
13407
13665
|
softSkillsIcon_default as SoftSkillsIcon,
|
|
13408
13666
|
Stack,
|