@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.cjs
CHANGED
|
@@ -133,6 +133,7 @@ __export(main_exports, {
|
|
|
133
133
|
Skeleton: () => Skeleton,
|
|
134
134
|
Slide: () => Slide,
|
|
135
135
|
Slider: () => Slider,
|
|
136
|
+
SmartSelect: () => SmartSelect,
|
|
136
137
|
Snackbar: () => Snackbar,
|
|
137
138
|
SoftSkillsIcon: () => softSkillsIcon_default,
|
|
138
139
|
Stack: () => Stack,
|
|
@@ -4696,7 +4697,11 @@ function DataGrid({
|
|
|
4696
4697
|
onRowDoubleClick,
|
|
4697
4698
|
onCellDoubleClick,
|
|
4698
4699
|
headerActions,
|
|
4699
|
-
toolbarContent
|
|
4700
|
+
toolbarContent,
|
|
4701
|
+
searchableColumns,
|
|
4702
|
+
onSearchChange,
|
|
4703
|
+
onFiltersChange,
|
|
4704
|
+
hideTopExport = false
|
|
4700
4705
|
}) {
|
|
4701
4706
|
const sxClass = useSx(sx);
|
|
4702
4707
|
const [editingCell, setEditingCell] = (0, import_react23.useState)(null);
|
|
@@ -4801,6 +4806,9 @@ function DataGrid({
|
|
|
4801
4806
|
return next;
|
|
4802
4807
|
});
|
|
4803
4808
|
}, [initialColumnsProp]);
|
|
4809
|
+
(0, import_react23.useEffect)(() => {
|
|
4810
|
+
onFiltersChange?.(advancedFilters);
|
|
4811
|
+
}, [advancedFilters, onFiltersChange]);
|
|
4804
4812
|
const handleSort = (fieldKey, dir) => {
|
|
4805
4813
|
if (dir !== void 0) {
|
|
4806
4814
|
setSortField(fieldKey);
|
|
@@ -4850,10 +4858,10 @@ function DataGrid({
|
|
|
4850
4858
|
};
|
|
4851
4859
|
const filteredData = (0, import_react23.useMemo)(() => {
|
|
4852
4860
|
return data.filter((item) => {
|
|
4853
|
-
const
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4861
|
+
const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
|
|
4862
|
+
const matchesGlobal = !filterText || searchCols.some(
|
|
4863
|
+
(col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
|
|
4864
|
+
);
|
|
4857
4865
|
const evalFilter = (f) => {
|
|
4858
4866
|
if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
|
|
4859
4867
|
const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
|
|
@@ -4961,7 +4969,11 @@ function DataGrid({
|
|
|
4961
4969
|
}
|
|
4962
4970
|
return matchesGlobal && matchesAdvanced;
|
|
4963
4971
|
});
|
|
4964
|
-
}, [data, filterText, advancedFilters, resolvedColumns]);
|
|
4972
|
+
}, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
|
|
4973
|
+
(0, import_react23.useEffect)(() => {
|
|
4974
|
+
if (!onSearchChange || !filterText) return;
|
|
4975
|
+
if (filteredData.length === 0) onSearchChange(filterText);
|
|
4976
|
+
}, [filteredData, filterText, onSearchChange]);
|
|
4965
4977
|
const sortedData = (0, import_react23.useMemo)(() => {
|
|
4966
4978
|
if (!sortField || !sortDirection) return filteredData;
|
|
4967
4979
|
const col = resolvedColumns.find((c) => c.field === sortField);
|
|
@@ -4992,11 +5004,16 @@ function DataGrid({
|
|
|
4992
5004
|
(item) => exportableCols.map((c) => {
|
|
4993
5005
|
const field = String(c.field);
|
|
4994
5006
|
const raw = item[field];
|
|
4995
|
-
let
|
|
4996
|
-
if (c.
|
|
4997
|
-
|
|
5007
|
+
let str;
|
|
5008
|
+
if (c.exportValue) {
|
|
5009
|
+
str = c.exportValue(raw, item).replace(/"/g, '""');
|
|
5010
|
+
} else {
|
|
5011
|
+
let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
|
|
5012
|
+
if (c.valueFormatter) {
|
|
5013
|
+
val = c.valueFormatter({ value: val, row: item, field });
|
|
5014
|
+
}
|
|
5015
|
+
str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
|
|
4998
5016
|
}
|
|
4999
|
-
const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
|
|
5000
5017
|
return `"${str}"`;
|
|
5001
5018
|
}).join(",")
|
|
5002
5019
|
);
|
|
@@ -5089,7 +5106,7 @@ function DataGrid({
|
|
|
5089
5106
|
onClick: () => setShowManageColumns(true)
|
|
5090
5107
|
},
|
|
5091
5108
|
/* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
|
|
5092
|
-
)), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
|
|
5109
|
+
)), !hideTopExport && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
|
|
5093
5110
|
const colField = String(col.field);
|
|
5094
5111
|
const width = columnWidths[colField] || 200;
|
|
5095
5112
|
const leftOffset = getLeftOffset(col, idx);
|
|
@@ -5110,9 +5127,8 @@ function DataGrid({
|
|
|
5110
5127
|
onClick: () => col.sortable !== false && handleSort(col.field || "")
|
|
5111
5128
|
},
|
|
5112
5129
|
col.headerName,
|
|
5113
|
-
isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size:
|
|
5114
|
-
|
|
5115
|
-
), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5130
|
+
col.sortable !== false && /* @__PURE__ */ import_react23.default.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronsUpDown, { size: 14 }))
|
|
5131
|
+
), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
|
|
5116
5132
|
"button",
|
|
5117
5133
|
{
|
|
5118
5134
|
className: "dg-th-menu-btn",
|
|
@@ -5204,7 +5220,7 @@ function DataGrid({
|
|
|
5204
5220
|
},
|
|
5205
5221
|
action.icon
|
|
5206
5222
|
)))));
|
|
5207
|
-
})()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
|
|
5223
|
+
})()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
|
|
5208
5224
|
FilterSelect,
|
|
5209
5225
|
{
|
|
5210
5226
|
placement: "top",
|
|
@@ -5382,6 +5398,10 @@ var CheckIcon2 = () => /* @__PURE__ */ import_react24.default.createElement("svg
|
|
|
5382
5398
|
function normaliseOptions(options) {
|
|
5383
5399
|
return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
|
|
5384
5400
|
}
|
|
5401
|
+
function OptionIcon({ icon }) {
|
|
5402
|
+
if (!icon) return null;
|
|
5403
|
+
return /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-icon", "aria-hidden": "true" }, typeof icon === "string" ? /* @__PURE__ */ import_react24.default.createElement("img", { src: icon, alt: "", className: "rf-select__option-icon-img" }) : import_react24.default.createElement(icon, { size: 16 }));
|
|
5404
|
+
}
|
|
5385
5405
|
var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
5386
5406
|
const {
|
|
5387
5407
|
options: rawOptions,
|
|
@@ -5550,7 +5570,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5550
5570
|
}
|
|
5551
5571
|
const selectedOpt = options.find((o) => o.value === value);
|
|
5552
5572
|
if (selectedOpt) {
|
|
5553
|
-
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
|
|
5573
|
+
return /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__display" }, /* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: selectedOpt.icon }), selectedOpt.label);
|
|
5554
5574
|
}
|
|
5555
5575
|
return /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
|
|
5556
5576
|
};
|
|
@@ -5608,6 +5628,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
|
|
|
5608
5628
|
onMouseDown: (e) => e.preventDefault(),
|
|
5609
5629
|
onClick: (e) => selectOption(opt, e)
|
|
5610
5630
|
},
|
|
5631
|
+
/* @__PURE__ */ import_react24.default.createElement(OptionIcon, { icon: opt.icon }),
|
|
5611
5632
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
|
|
5612
5633
|
/* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(CheckIcon2, null))
|
|
5613
5634
|
);
|
|
@@ -9464,7 +9485,7 @@ function UserSelectionField({
|
|
|
9464
9485
|
multiple,
|
|
9465
9486
|
limitTags,
|
|
9466
9487
|
loading,
|
|
9467
|
-
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement(
|
|
9488
|
+
loadingText: /* @__PURE__ */ import_react50.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0" } }, /* @__PURE__ */ import_react50.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026")),
|
|
9468
9489
|
getOptionLabel: getLabel,
|
|
9469
9490
|
isOptionEqualToValue: (opt, val) => getOptionId(opt) === getOptionId(val),
|
|
9470
9491
|
filterOptions: filterOptionsProp ? (opts, inputValue) => filterOptionsProp(opts, inputValue) : (opts, inputValue) => inputValue ? opts.filter((opt) => matchesSearch(opt, inputValue)) : opts,
|
|
@@ -9488,10 +9509,246 @@ function UserSelectionField({
|
|
|
9488
9509
|
);
|
|
9489
9510
|
}
|
|
9490
9511
|
|
|
9512
|
+
// lib/SmartSelect/SmartSelect.tsx
|
|
9513
|
+
var import_react51 = __toESM(require("react"), 1);
|
|
9514
|
+
var CheckIcon3 = () => /* @__PURE__ */ import_react51.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react51.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
|
|
9515
|
+
function flattenTree(options, getChildren, depth = 0) {
|
|
9516
|
+
return options.flatMap((opt) => [
|
|
9517
|
+
{ option: opt, depth },
|
|
9518
|
+
...getChildren ? flattenTree(getChildren(opt) ?? [], getChildren, depth + 1) : []
|
|
9519
|
+
]);
|
|
9520
|
+
}
|
|
9521
|
+
function collectDescendants2(option, getChildren, getValue) {
|
|
9522
|
+
const ids = [getValue(option)];
|
|
9523
|
+
getChildren(option)?.forEach((c) => ids.push(...collectDescendants2(c, getChildren, getValue)));
|
|
9524
|
+
return ids;
|
|
9525
|
+
}
|
|
9526
|
+
function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new Map()) {
|
|
9527
|
+
for (const opt of options) {
|
|
9528
|
+
map.set(getValue(opt), opt);
|
|
9529
|
+
if (getChildren) buildLookup(getChildren(opt) ?? [], getChildren, getValue, map);
|
|
9530
|
+
}
|
|
9531
|
+
return map;
|
|
9532
|
+
}
|
|
9533
|
+
function SmartSelect({
|
|
9534
|
+
options,
|
|
9535
|
+
value,
|
|
9536
|
+
onChange,
|
|
9537
|
+
onSearchChange,
|
|
9538
|
+
debounceMs = 300,
|
|
9539
|
+
getOptionLabel,
|
|
9540
|
+
getOptionValue,
|
|
9541
|
+
getOptionSubLabel,
|
|
9542
|
+
getOptionChildren,
|
|
9543
|
+
multiple = false,
|
|
9544
|
+
allowChildNodesSelection = true,
|
|
9545
|
+
loading = false,
|
|
9546
|
+
loadingText,
|
|
9547
|
+
filterOptions: filterOptionsProp,
|
|
9548
|
+
renderOption: renderOptionProp,
|
|
9549
|
+
limitTags,
|
|
9550
|
+
label,
|
|
9551
|
+
placeholder,
|
|
9552
|
+
variant = "outlined",
|
|
9553
|
+
size = "small",
|
|
9554
|
+
disabled = false,
|
|
9555
|
+
error = false,
|
|
9556
|
+
helperText,
|
|
9557
|
+
fullWidth = true,
|
|
9558
|
+
required = false,
|
|
9559
|
+
className,
|
|
9560
|
+
style,
|
|
9561
|
+
sx
|
|
9562
|
+
}) {
|
|
9563
|
+
const debounceTimer = (0, import_react51.useRef)(null);
|
|
9564
|
+
(0, import_react51.useEffect)(() => () => {
|
|
9565
|
+
if (debounceTimer.current) clearTimeout(debounceTimer.current);
|
|
9566
|
+
}, []);
|
|
9567
|
+
const getValue = (0, import_react51.useCallback)(
|
|
9568
|
+
(o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
|
|
9569
|
+
[getOptionValue, getOptionLabel]
|
|
9570
|
+
);
|
|
9571
|
+
const flatItems = (0, import_react51.useMemo)(() => {
|
|
9572
|
+
if (!getOptionChildren) return options.map((o) => ({ option: o, depth: 0 }));
|
|
9573
|
+
return flattenTree(options, getOptionChildren);
|
|
9574
|
+
}, [options, getOptionChildren]);
|
|
9575
|
+
const flatOptionsList = (0, import_react51.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
|
|
9576
|
+
const depthMap = (0, import_react51.useMemo)(() => {
|
|
9577
|
+
const map = /* @__PURE__ */ new Map();
|
|
9578
|
+
flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
|
|
9579
|
+
return map;
|
|
9580
|
+
}, [flatItems, getValue]);
|
|
9581
|
+
const lookup = (0, import_react51.useMemo)(
|
|
9582
|
+
() => buildLookup(options, getOptionChildren, getValue),
|
|
9583
|
+
[options, getOptionChildren, getValue]
|
|
9584
|
+
);
|
|
9585
|
+
const selectedKeys = (0, import_react51.useMemo)(() => {
|
|
9586
|
+
if (multiple) {
|
|
9587
|
+
return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
|
|
9588
|
+
}
|
|
9589
|
+
return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
|
|
9590
|
+
}, [multiple, value, getValue]);
|
|
9591
|
+
const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
|
|
9592
|
+
if (!onSearchChange) return;
|
|
9593
|
+
if (debounceTimer.current) clearTimeout(debounceTimer.current);
|
|
9594
|
+
if (!inputValue) {
|
|
9595
|
+
onSearchChange("");
|
|
9596
|
+
return;
|
|
9597
|
+
}
|
|
9598
|
+
const hasLocalMatch = flatOptionsList.some(
|
|
9599
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9600
|
+
);
|
|
9601
|
+
if (hasLocalMatch) return;
|
|
9602
|
+
if (debounceMs <= 0) {
|
|
9603
|
+
onSearchChange(inputValue);
|
|
9604
|
+
} else {
|
|
9605
|
+
debounceTimer.current = setTimeout(() => {
|
|
9606
|
+
onSearchChange(inputValue);
|
|
9607
|
+
}, debounceMs);
|
|
9608
|
+
}
|
|
9609
|
+
}, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
|
|
9610
|
+
const handleChange = (0, import_react51.useCallback)((_, newValue) => {
|
|
9611
|
+
if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
|
|
9612
|
+
onChange?.(newValue);
|
|
9613
|
+
return;
|
|
9614
|
+
}
|
|
9615
|
+
const currentArr = Array.isArray(value) ? value : [];
|
|
9616
|
+
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
9617
|
+
const currentKeys = new Set(currentArr.map((v) => getValue(v)));
|
|
9618
|
+
const newKeys = new Set(newArr.map((v) => getValue(v)));
|
|
9619
|
+
let changedKey = null;
|
|
9620
|
+
let wasAdded = false;
|
|
9621
|
+
for (const k of newKeys) {
|
|
9622
|
+
if (!currentKeys.has(k)) {
|
|
9623
|
+
changedKey = k;
|
|
9624
|
+
wasAdded = true;
|
|
9625
|
+
break;
|
|
9626
|
+
}
|
|
9627
|
+
}
|
|
9628
|
+
if (changedKey === null) {
|
|
9629
|
+
for (const k of currentKeys) {
|
|
9630
|
+
if (!newKeys.has(k)) {
|
|
9631
|
+
changedKey = k;
|
|
9632
|
+
wasAdded = false;
|
|
9633
|
+
break;
|
|
9634
|
+
}
|
|
9635
|
+
}
|
|
9636
|
+
}
|
|
9637
|
+
if (changedKey !== null) {
|
|
9638
|
+
const opt = lookup.get(changedKey);
|
|
9639
|
+
if (opt) {
|
|
9640
|
+
const descendants = collectDescendants2(opt, getOptionChildren, getValue);
|
|
9641
|
+
if (wasAdded) {
|
|
9642
|
+
descendants.forEach((k) => newKeys.add(k));
|
|
9643
|
+
} else {
|
|
9644
|
+
descendants.forEach((k) => newKeys.delete(k));
|
|
9645
|
+
}
|
|
9646
|
+
}
|
|
9647
|
+
}
|
|
9648
|
+
const result = Array.from(newKeys).map((k) => lookup.get(k)).filter((o) => o !== void 0);
|
|
9649
|
+
onChange?.(result);
|
|
9650
|
+
}, [multiple, allowChildNodesSelection, getOptionChildren, value, getValue, lookup, onChange]);
|
|
9651
|
+
const defaultRenderOption = (0, import_react51.useCallback)((props, option) => {
|
|
9652
|
+
const { key, className: muiClass, style: muiStyle, ...rest } = props;
|
|
9653
|
+
const depth = depthMap.get(getValue(option)) ?? 0;
|
|
9654
|
+
const subLabel = getOptionSubLabel?.(option);
|
|
9655
|
+
const isSelected = selectedKeys.has(getValue(option));
|
|
9656
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9657
|
+
"li",
|
|
9658
|
+
{
|
|
9659
|
+
key,
|
|
9660
|
+
...rest,
|
|
9661
|
+
className: muiClass,
|
|
9662
|
+
style: {
|
|
9663
|
+
...muiStyle,
|
|
9664
|
+
display: "flex",
|
|
9665
|
+
alignItems: "center",
|
|
9666
|
+
gap: 10,
|
|
9667
|
+
padding: "8px 16px",
|
|
9668
|
+
paddingLeft: 16 + depth * 20,
|
|
9669
|
+
fontSize: "0.9rem",
|
|
9670
|
+
color: "rgba(0,0,0,0.87)",
|
|
9671
|
+
cursor: "pointer",
|
|
9672
|
+
userSelect: "none",
|
|
9673
|
+
minHeight: 40,
|
|
9674
|
+
boxSizing: "border-box",
|
|
9675
|
+
fontWeight: isSelected ? 500 : void 0,
|
|
9676
|
+
backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
|
|
9677
|
+
listStyle: "none"
|
|
9678
|
+
}
|
|
9679
|
+
},
|
|
9680
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
|
|
9681
|
+
/* @__PURE__ */ import_react51.default.createElement("span", { style: {
|
|
9682
|
+
color: "var(--primary-color, #a41b06)",
|
|
9683
|
+
flexShrink: 0,
|
|
9684
|
+
display: "flex",
|
|
9685
|
+
alignItems: "center",
|
|
9686
|
+
opacity: isSelected ? 1 : 0,
|
|
9687
|
+
transition: "opacity 0.1s"
|
|
9688
|
+
} }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
|
|
9689
|
+
);
|
|
9690
|
+
}, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
|
|
9691
|
+
const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue) => {
|
|
9692
|
+
if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
|
|
9693
|
+
if (multiple) {
|
|
9694
|
+
const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
|
|
9695
|
+
const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
|
|
9696
|
+
const filteredRest = inputValue ? unselected.filter(
|
|
9697
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
|
|
9698
|
+
) : unselected;
|
|
9699
|
+
return [...selected, ...filteredRest];
|
|
9700
|
+
}
|
|
9701
|
+
if (value != null) {
|
|
9702
|
+
const selectedLabel = getOptionLabel(value);
|
|
9703
|
+
if (inputValue === selectedLabel) {
|
|
9704
|
+
const selectedKey = getValue(value);
|
|
9705
|
+
return [
|
|
9706
|
+
...opts.filter((o) => getValue(o) === selectedKey),
|
|
9707
|
+
...opts.filter((o) => getValue(o) !== selectedKey)
|
|
9708
|
+
];
|
|
9709
|
+
}
|
|
9710
|
+
}
|
|
9711
|
+
if (!inputValue) return opts;
|
|
9712
|
+
const q = inputValue.toLowerCase();
|
|
9713
|
+
return opts.filter(
|
|
9714
|
+
(opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
|
|
9715
|
+
);
|
|
9716
|
+
}, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
|
|
9717
|
+
return /* @__PURE__ */ import_react51.default.createElement(
|
|
9718
|
+
Autocomplete,
|
|
9719
|
+
{
|
|
9720
|
+
options: flatOptionsList,
|
|
9721
|
+
value: value ?? (multiple ? [] : null),
|
|
9722
|
+
onChange: handleChange,
|
|
9723
|
+
onInputChange: handleInputChange,
|
|
9724
|
+
multiple,
|
|
9725
|
+
limitTags,
|
|
9726
|
+
loading,
|
|
9727
|
+
loadingText: loadingText ?? /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
|
|
9728
|
+
getOptionLabel,
|
|
9729
|
+
isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
|
|
9730
|
+
filterOptions: computedFilterOptions,
|
|
9731
|
+
renderOption: renderOptionProp ?? defaultRenderOption,
|
|
9732
|
+
label,
|
|
9733
|
+
placeholder: placeholder ?? label,
|
|
9734
|
+
size,
|
|
9735
|
+
variant,
|
|
9736
|
+
disabled,
|
|
9737
|
+
error,
|
|
9738
|
+
helperText,
|
|
9739
|
+
fullWidth,
|
|
9740
|
+
required,
|
|
9741
|
+
className,
|
|
9742
|
+
style,
|
|
9743
|
+
sx
|
|
9744
|
+
}
|
|
9745
|
+
);
|
|
9746
|
+
}
|
|
9747
|
+
|
|
9491
9748
|
// lib/RufousTextEditor/RufousTextEditor.tsx
|
|
9492
|
-
var
|
|
9749
|
+
var import_react62 = __toESM(require("react"), 1);
|
|
9493
9750
|
var import_react_dom18 = require("react-dom");
|
|
9494
|
-
var
|
|
9751
|
+
var import_react63 = require("@tiptap/react");
|
|
9495
9752
|
var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
|
|
9496
9753
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
9497
9754
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
@@ -9511,21 +9768,21 @@ var import_extension_character_count = __toESM(require("@tiptap/extension-charac
|
|
|
9511
9768
|
var import_extension_mention = __toESM(require("@tiptap/extension-mention"), 1);
|
|
9512
9769
|
|
|
9513
9770
|
// lib/RufousTextEditor/mentionSuggestion.tsx
|
|
9514
|
-
var
|
|
9771
|
+
var import_react53 = require("@tiptap/react");
|
|
9515
9772
|
var import_tippy = __toESM(require("tippy.js"), 1);
|
|
9516
9773
|
|
|
9517
9774
|
// lib/RufousTextEditor/MentionList.tsx
|
|
9518
|
-
var
|
|
9519
|
-
var MentionList = (0,
|
|
9520
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
9775
|
+
var import_react52 = __toESM(require("react"), 1);
|
|
9776
|
+
var MentionList = (0, import_react52.forwardRef)((props, ref) => {
|
|
9777
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react52.useState)(0);
|
|
9521
9778
|
const selectItem = (index) => {
|
|
9522
9779
|
const item = props.items[index];
|
|
9523
9780
|
if (item) {
|
|
9524
9781
|
props.command({ id: item.id, label: item.shortName || item.name });
|
|
9525
9782
|
}
|
|
9526
9783
|
};
|
|
9527
|
-
(0,
|
|
9528
|
-
(0,
|
|
9784
|
+
(0, import_react52.useEffect)(() => setSelectedIndex(0), [props.items]);
|
|
9785
|
+
(0, import_react52.useImperativeHandle)(ref, () => ({
|
|
9529
9786
|
onKeyDown: ({ event }) => {
|
|
9530
9787
|
if (event.key === "ArrowUp") {
|
|
9531
9788
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
|
@@ -9543,17 +9800,17 @@ var MentionList = (0, import_react51.forwardRef)((props, ref) => {
|
|
|
9543
9800
|
}
|
|
9544
9801
|
}));
|
|
9545
9802
|
if (!props.items.length) {
|
|
9546
|
-
return /* @__PURE__ */
|
|
9803
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
|
|
9547
9804
|
}
|
|
9548
|
-
return /* @__PURE__ */
|
|
9805
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ import_react52.default.createElement(
|
|
9549
9806
|
"button",
|
|
9550
9807
|
{
|
|
9551
9808
|
className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
|
|
9552
9809
|
key: item.id,
|
|
9553
9810
|
onClick: () => selectItem(index)
|
|
9554
9811
|
},
|
|
9555
|
-
/* @__PURE__ */
|
|
9556
|
-
/* @__PURE__ */
|
|
9812
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
|
|
9813
|
+
/* @__PURE__ */ import_react52.default.createElement("span", { className: "rf-rte-mention-name" }, item.name)
|
|
9557
9814
|
)));
|
|
9558
9815
|
});
|
|
9559
9816
|
MentionList.displayName = "MentionList";
|
|
@@ -9573,7 +9830,7 @@ function createMentionSuggestion(users) {
|
|
|
9573
9830
|
return {
|
|
9574
9831
|
onStart: (props) => {
|
|
9575
9832
|
if (!props.clientRect) return;
|
|
9576
|
-
component = new
|
|
9833
|
+
component = new import_react53.ReactRenderer(MentionList_default, {
|
|
9577
9834
|
props,
|
|
9578
9835
|
editor: props.editor
|
|
9579
9836
|
});
|
|
@@ -9611,21 +9868,21 @@ function createMentionSuggestion(users) {
|
|
|
9611
9868
|
}
|
|
9612
9869
|
|
|
9613
9870
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
9614
|
-
var
|
|
9871
|
+
var import_react58 = __toESM(require("react"), 1);
|
|
9615
9872
|
var import_react_dom14 = require("react-dom");
|
|
9616
9873
|
|
|
9617
9874
|
// lib/RufousTextEditor/TextToSpeech.tsx
|
|
9618
|
-
var
|
|
9619
|
-
var TextToSpeech = (0,
|
|
9620
|
-
const [speaking, setSpeaking] = (0,
|
|
9621
|
-
const [paused, setPaused] = (0,
|
|
9622
|
-
const [voices, setVoices] = (0,
|
|
9623
|
-
const [selectedVoice, setSelectedVoice] = (0,
|
|
9624
|
-
const [rate, setRate] = (0,
|
|
9625
|
-
const [showPanel, setShowPanel] = (0,
|
|
9626
|
-
const utteranceRef = (0,
|
|
9627
|
-
const panelRef = (0,
|
|
9628
|
-
(0,
|
|
9875
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
9876
|
+
var TextToSpeech = (0, import_react54.forwardRef)(({ editor, onTextToSpeech }, ref) => {
|
|
9877
|
+
const [speaking, setSpeaking] = (0, import_react54.useState)(false);
|
|
9878
|
+
const [paused, setPaused] = (0, import_react54.useState)(false);
|
|
9879
|
+
const [voices, setVoices] = (0, import_react54.useState)([]);
|
|
9880
|
+
const [selectedVoice, setSelectedVoice] = (0, import_react54.useState)("");
|
|
9881
|
+
const [rate, setRate] = (0, import_react54.useState)(1);
|
|
9882
|
+
const [showPanel, setShowPanel] = (0, import_react54.useState)(false);
|
|
9883
|
+
const utteranceRef = (0, import_react54.useRef)(null);
|
|
9884
|
+
const panelRef = (0, import_react54.useRef)(null);
|
|
9885
|
+
(0, import_react54.useEffect)(() => {
|
|
9629
9886
|
const synth = window.speechSynthesis;
|
|
9630
9887
|
const loadVoices = () => {
|
|
9631
9888
|
const available = synth.getVoices();
|
|
@@ -9643,7 +9900,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9643
9900
|
synth.removeEventListener("voiceschanged", loadVoices);
|
|
9644
9901
|
};
|
|
9645
9902
|
}, [selectedVoice]);
|
|
9646
|
-
(0,
|
|
9903
|
+
(0, import_react54.useEffect)(() => {
|
|
9647
9904
|
const handleClick = (e) => {
|
|
9648
9905
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9649
9906
|
setShowPanel(false);
|
|
@@ -9652,7 +9909,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9652
9909
|
document.addEventListener("mousedown", handleClick);
|
|
9653
9910
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9654
9911
|
}, []);
|
|
9655
|
-
const getTextToSpeak = (0,
|
|
9912
|
+
const getTextToSpeak = (0, import_react54.useCallback)(() => {
|
|
9656
9913
|
if (!editor) return "";
|
|
9657
9914
|
const { from, to, empty } = editor.state.selection;
|
|
9658
9915
|
if (!empty) {
|
|
@@ -9660,7 +9917,7 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9660
9917
|
}
|
|
9661
9918
|
return editor.getText();
|
|
9662
9919
|
}, [editor]);
|
|
9663
|
-
const handleSpeak = (0,
|
|
9920
|
+
const handleSpeak = (0, import_react54.useCallback)(async () => {
|
|
9664
9921
|
const text = getTextToSpeak();
|
|
9665
9922
|
if (!text.trim()) return;
|
|
9666
9923
|
if (onTextToSpeech) {
|
|
@@ -9702,25 +9959,25 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9702
9959
|
setSpeaking(true);
|
|
9703
9960
|
setPaused(false);
|
|
9704
9961
|
}, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
|
|
9705
|
-
const handlePause = (0,
|
|
9962
|
+
const handlePause = (0, import_react54.useCallback)(() => {
|
|
9706
9963
|
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
|
|
9707
9964
|
window.speechSynthesis.pause();
|
|
9708
9965
|
setPaused(true);
|
|
9709
9966
|
}
|
|
9710
9967
|
}, []);
|
|
9711
|
-
const handleResume = (0,
|
|
9968
|
+
const handleResume = (0, import_react54.useCallback)(() => {
|
|
9712
9969
|
if (window.speechSynthesis.paused) {
|
|
9713
9970
|
window.speechSynthesis.resume();
|
|
9714
9971
|
setPaused(false);
|
|
9715
9972
|
}
|
|
9716
9973
|
}, []);
|
|
9717
|
-
const handleStop = (0,
|
|
9974
|
+
const handleStop = (0, import_react54.useCallback)(() => {
|
|
9718
9975
|
window.speechSynthesis.cancel();
|
|
9719
9976
|
setSpeaking(false);
|
|
9720
9977
|
setPaused(false);
|
|
9721
9978
|
}, []);
|
|
9722
|
-
(0,
|
|
9723
|
-
return /* @__PURE__ */
|
|
9979
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
|
|
9980
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement(
|
|
9724
9981
|
"button",
|
|
9725
9982
|
{
|
|
9726
9983
|
className: `toolbar-btn ${speaking ? "is-active" : ""}`,
|
|
@@ -9733,15 +9990,15 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9733
9990
|
}
|
|
9734
9991
|
},
|
|
9735
9992
|
speaking ? "\u23F9" : "\u{1F50A}"
|
|
9736
|
-
)), showPanel && !speaking && /* @__PURE__ */
|
|
9993
|
+
)), showPanel && !speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9737
9994
|
"select",
|
|
9738
9995
|
{
|
|
9739
9996
|
className: "tts-select",
|
|
9740
9997
|
value: selectedVoice,
|
|
9741
9998
|
onChange: (e) => setSelectedVoice(e.target.value)
|
|
9742
9999
|
},
|
|
9743
|
-
voices.map((v) => /* @__PURE__ */
|
|
9744
|
-
), /* @__PURE__ */
|
|
10000
|
+
voices.map((v) => /* @__PURE__ */ import_react54.default.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
|
|
10001
|
+
), /* @__PURE__ */ import_react54.default.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ import_react54.default.createElement(
|
|
9745
10002
|
"input",
|
|
9746
10003
|
{
|
|
9747
10004
|
type: "range",
|
|
@@ -9752,26 +10009,26 @@ var TextToSpeech = (0, import_react53.forwardRef)(({ editor, onTextToSpeech }, r
|
|
|
9752
10009
|
value: rate,
|
|
9753
10010
|
onChange: (e) => setRate(Number(e.target.value))
|
|
9754
10011
|
}
|
|
9755
|
-
), /* @__PURE__ */
|
|
10012
|
+
), /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "tts-speak-btn", onClick: () => {
|
|
9756
10013
|
handleSpeak();
|
|
9757
10014
|
setShowPanel(false);
|
|
9758
|
-
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */
|
|
10015
|
+
} }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react54.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ import_react54.default.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
|
|
9759
10016
|
});
|
|
9760
10017
|
var TextToSpeech_default = TextToSpeech;
|
|
9761
10018
|
|
|
9762
10019
|
// lib/RufousTextEditor/SpeechToText.tsx
|
|
9763
|
-
var
|
|
9764
|
-
var SpeechToText = (0,
|
|
9765
|
-
const [listening, setListening] = (0,
|
|
9766
|
-
const [showPanel, setShowPanel] = (0,
|
|
9767
|
-
const [language, setLanguage] = (0,
|
|
9768
|
-
const [interim, setInterim] = (0,
|
|
9769
|
-
const recognitionRef = (0,
|
|
9770
|
-
const panelRef = (0,
|
|
9771
|
-
const isListeningRef = (0,
|
|
10020
|
+
var import_react55 = __toESM(require("react"), 1);
|
|
10021
|
+
var SpeechToText = (0, import_react55.forwardRef)(({ editor, onSpeechToText }, ref) => {
|
|
10022
|
+
const [listening, setListening] = (0, import_react55.useState)(false);
|
|
10023
|
+
const [showPanel, setShowPanel] = (0, import_react55.useState)(false);
|
|
10024
|
+
const [language, setLanguage] = (0, import_react55.useState)("en-US");
|
|
10025
|
+
const [interim, setInterim] = (0, import_react55.useState)("");
|
|
10026
|
+
const recognitionRef = (0, import_react55.useRef)(null);
|
|
10027
|
+
const panelRef = (0, import_react55.useRef)(null);
|
|
10028
|
+
const isListeningRef = (0, import_react55.useRef)(false);
|
|
9772
10029
|
const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
|
|
9773
10030
|
const supported = !!SpeechRecognitionAPI;
|
|
9774
|
-
(0,
|
|
10031
|
+
(0, import_react55.useEffect)(() => {
|
|
9775
10032
|
const handleClick = (e) => {
|
|
9776
10033
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9777
10034
|
setShowPanel(false);
|
|
@@ -9780,7 +10037,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9780
10037
|
document.addEventListener("mousedown", handleClick);
|
|
9781
10038
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9782
10039
|
}, []);
|
|
9783
|
-
const createRecognition = (0,
|
|
10040
|
+
const createRecognition = (0, import_react55.useCallback)(() => {
|
|
9784
10041
|
if (!supported) return null;
|
|
9785
10042
|
const recognition = new SpeechRecognitionAPI();
|
|
9786
10043
|
recognition.lang = language;
|
|
@@ -9789,7 +10046,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9789
10046
|
recognition.maxAlternatives = 1;
|
|
9790
10047
|
return recognition;
|
|
9791
10048
|
}, [supported, language]);
|
|
9792
|
-
const startSession = (0,
|
|
10049
|
+
const startSession = (0, import_react55.useCallback)((recognition) => {
|
|
9793
10050
|
if (!recognition || !editor) return;
|
|
9794
10051
|
recognition.onresult = async (event) => {
|
|
9795
10052
|
let finalText = "";
|
|
@@ -9844,7 +10101,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9844
10101
|
}
|
|
9845
10102
|
};
|
|
9846
10103
|
}, [editor, createRecognition, onSpeechToText]);
|
|
9847
|
-
const startListening = (0,
|
|
10104
|
+
const startListening = (0, import_react55.useCallback)(() => {
|
|
9848
10105
|
if (!supported || !editor) return;
|
|
9849
10106
|
const recognition = createRecognition();
|
|
9850
10107
|
if (!recognition) return;
|
|
@@ -9860,7 +10117,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9860
10117
|
setListening(false);
|
|
9861
10118
|
}
|
|
9862
10119
|
}, [supported, editor, createRecognition, startSession]);
|
|
9863
|
-
const stopListening = (0,
|
|
10120
|
+
const stopListening = (0, import_react55.useCallback)(() => {
|
|
9864
10121
|
isListeningRef.current = false;
|
|
9865
10122
|
if (recognitionRef.current) {
|
|
9866
10123
|
try {
|
|
@@ -9872,9 +10129,9 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9872
10129
|
setListening(false);
|
|
9873
10130
|
setInterim("");
|
|
9874
10131
|
}, []);
|
|
9875
|
-
(0,
|
|
10132
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
|
|
9876
10133
|
if (!supported) {
|
|
9877
|
-
return /* @__PURE__ */
|
|
10134
|
+
return /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
|
|
9878
10135
|
}
|
|
9879
10136
|
const LANGUAGES2 = [
|
|
9880
10137
|
{ code: "en-US", label: "English (US)" },
|
|
@@ -9896,7 +10153,7 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9896
10153
|
{ code: "kn-IN", label: "Kannada" },
|
|
9897
10154
|
{ code: "ml-IN", label: "Malayalam" }
|
|
9898
10155
|
];
|
|
9899
|
-
return /* @__PURE__ */
|
|
10156
|
+
return /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ import_react55.default.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ import_react55.default.createElement(
|
|
9900
10157
|
"button",
|
|
9901
10158
|
{
|
|
9902
10159
|
className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
|
|
@@ -9909,20 +10166,20 @@ var SpeechToText = (0, import_react54.forwardRef)(({ editor, onSpeechToText }, r
|
|
|
9909
10166
|
}
|
|
9910
10167
|
},
|
|
9911
10168
|
"\u{1F3A4}"
|
|
9912
|
-
)), showPanel && !listening && /* @__PURE__ */
|
|
10169
|
+
)), showPanel && !listening && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ import_react55.default.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ import_react55.default.createElement(
|
|
9913
10170
|
"select",
|
|
9914
10171
|
{
|
|
9915
10172
|
className: "stt-select",
|
|
9916
10173
|
value: language,
|
|
9917
10174
|
onChange: (e) => setLanguage(e.target.value)
|
|
9918
10175
|
},
|
|
9919
|
-
LANGUAGES2.map((l) => /* @__PURE__ */
|
|
9920
|
-
), /* @__PURE__ */
|
|
10176
|
+
LANGUAGES2.map((l) => /* @__PURE__ */ import_react55.default.createElement("option", { key: l.code, value: l.code }, l.label))
|
|
10177
|
+
), /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react55.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react55.default.createElement("div", { className: "stt-interim" }, interim));
|
|
9921
10178
|
});
|
|
9922
10179
|
var SpeechToText_default = SpeechToText;
|
|
9923
10180
|
|
|
9924
10181
|
// lib/RufousTextEditor/AICommands.tsx
|
|
9925
|
-
var
|
|
10182
|
+
var import_react56 = __toESM(require("react"), 1);
|
|
9926
10183
|
var import_react_dom12 = require("react-dom");
|
|
9927
10184
|
var AI_COMMANDS = [
|
|
9928
10185
|
{ id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
|
|
@@ -9970,16 +10227,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
|
|
|
9970
10227
|
return data.choices?.[0]?.message?.content?.trim() || "";
|
|
9971
10228
|
};
|
|
9972
10229
|
var AICommands = ({ editor, onAICommand }) => {
|
|
9973
|
-
const [open, setOpen] = (0,
|
|
9974
|
-
const [showModal, setShowModal] = (0,
|
|
9975
|
-
const [loading, setLoading] = (0,
|
|
9976
|
-
const [promptText, setPromptText] = (0,
|
|
9977
|
-
const [resultText, setResultText] = (0,
|
|
9978
|
-
const [originalText, setOriginalText] = (0,
|
|
9979
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
9980
|
-
const [previousResults, setPreviousResults] = (0,
|
|
9981
|
-
const panelRef = (0,
|
|
9982
|
-
(0,
|
|
10230
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
10231
|
+
const [showModal, setShowModal] = (0, import_react56.useState)(false);
|
|
10232
|
+
const [loading, setLoading] = (0, import_react56.useState)(false);
|
|
10233
|
+
const [promptText, setPromptText] = (0, import_react56.useState)("");
|
|
10234
|
+
const [resultText, setResultText] = (0, import_react56.useState)("");
|
|
10235
|
+
const [originalText, setOriginalText] = (0, import_react56.useState)("");
|
|
10236
|
+
const [selectionRange, setSelectionRange] = (0, import_react56.useState)(null);
|
|
10237
|
+
const [previousResults, setPreviousResults] = (0, import_react56.useState)([]);
|
|
10238
|
+
const panelRef = (0, import_react56.useRef)(null);
|
|
10239
|
+
(0, import_react56.useEffect)(() => {
|
|
9983
10240
|
const handleClick = (e) => {
|
|
9984
10241
|
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
|
9985
10242
|
setOpen(false);
|
|
@@ -9988,7 +10245,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9988
10245
|
document.addEventListener("mousedown", handleClick);
|
|
9989
10246
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
9990
10247
|
}, []);
|
|
9991
|
-
const getSelectedText = (0,
|
|
10248
|
+
const getSelectedText = (0, import_react56.useCallback)(() => {
|
|
9992
10249
|
if (!editor) return { text: "", range: null };
|
|
9993
10250
|
const { from, to, empty } = editor.state.selection;
|
|
9994
10251
|
if (!empty) {
|
|
@@ -9996,7 +10253,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
9996
10253
|
}
|
|
9997
10254
|
return { text: editor.getText(), range: null };
|
|
9998
10255
|
}, [editor]);
|
|
9999
|
-
const fetchAIResult = (0,
|
|
10256
|
+
const fetchAIResult = (0, import_react56.useCallback)(async (prompt, text, prevResults = []) => {
|
|
10000
10257
|
setLoading(true);
|
|
10001
10258
|
setResultText("");
|
|
10002
10259
|
try {
|
|
@@ -10014,7 +10271,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10014
10271
|
setLoading(false);
|
|
10015
10272
|
}
|
|
10016
10273
|
}, [onAICommand]);
|
|
10017
|
-
const handleCommandSelect = (0,
|
|
10274
|
+
const handleCommandSelect = (0, import_react56.useCallback)((command) => {
|
|
10018
10275
|
const { text, range } = getSelectedText();
|
|
10019
10276
|
if (!text.trim()) return;
|
|
10020
10277
|
setOriginalText(text);
|
|
@@ -10025,7 +10282,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10025
10282
|
setShowModal(true);
|
|
10026
10283
|
fetchAIResult(command.prompt, text, []);
|
|
10027
10284
|
}, [getSelectedText, fetchAIResult]);
|
|
10028
|
-
const handleInsert = (0,
|
|
10285
|
+
const handleInsert = (0, import_react56.useCallback)(() => {
|
|
10029
10286
|
if (!resultText || !editor) return;
|
|
10030
10287
|
if (selectionRange) {
|
|
10031
10288
|
editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
|
|
@@ -10035,7 +10292,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10035
10292
|
setShowModal(false);
|
|
10036
10293
|
setResultText("");
|
|
10037
10294
|
}, [editor, resultText, selectionRange]);
|
|
10038
|
-
const handleInsertAfter = (0,
|
|
10295
|
+
const handleInsertAfter = (0, import_react56.useCallback)(() => {
|
|
10039
10296
|
if (!resultText || !editor) return;
|
|
10040
10297
|
if (selectionRange) {
|
|
10041
10298
|
editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
|
|
@@ -10050,11 +10307,11 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10050
10307
|
setShowModal(false);
|
|
10051
10308
|
setResultText("");
|
|
10052
10309
|
}, [editor, resultText, selectionRange]);
|
|
10053
|
-
const handleRefresh = (0,
|
|
10310
|
+
const handleRefresh = (0, import_react56.useCallback)(() => {
|
|
10054
10311
|
if (!originalText.trim()) return;
|
|
10055
10312
|
fetchAIResult(promptText, originalText, previousResults);
|
|
10056
10313
|
}, [originalText, promptText, previousResults, fetchAIResult]);
|
|
10057
|
-
const handleCancel = (0,
|
|
10314
|
+
const handleCancel = (0, import_react56.useCallback)(() => {
|
|
10058
10315
|
setShowModal(false);
|
|
10059
10316
|
setResultText("");
|
|
10060
10317
|
setPromptText("");
|
|
@@ -10063,15 +10320,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10063
10320
|
setPreviousResults([]);
|
|
10064
10321
|
}, []);
|
|
10065
10322
|
if (!editor) return null;
|
|
10066
|
-
return /* @__PURE__ */
|
|
10323
|
+
return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10067
10324
|
"button",
|
|
10068
10325
|
{
|
|
10069
10326
|
className: `toolbar-btn ${open ? "is-active" : ""}`,
|
|
10070
10327
|
onClick: () => setOpen(!open)
|
|
10071
10328
|
},
|
|
10072
|
-
/* @__PURE__ */
|
|
10073
|
-
/* @__PURE__ */
|
|
10074
|
-
)), open && /* @__PURE__ */
|
|
10329
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ import_react56.default.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
|
|
10330
|
+
/* @__PURE__ */ import_react56.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
10331
|
+
)), open && /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ import_react56.default.createElement(
|
|
10075
10332
|
"button",
|
|
10076
10333
|
{
|
|
10077
10334
|
key: cmd.id,
|
|
@@ -10079,8 +10336,8 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10079
10336
|
onClick: () => handleCommandSelect(cmd)
|
|
10080
10337
|
},
|
|
10081
10338
|
cmd.label
|
|
10082
|
-
))), /* @__PURE__ */
|
|
10083
|
-
/* @__PURE__ */
|
|
10339
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
|
|
10340
|
+
/* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react56.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10084
10341
|
"textarea",
|
|
10085
10342
|
{
|
|
10086
10343
|
className: "ai-modal-prompt",
|
|
@@ -10088,15 +10345,15 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10088
10345
|
onChange: (e) => setPromptText(e.target.value),
|
|
10089
10346
|
rows: 3
|
|
10090
10347
|
}
|
|
10091
|
-
), /* @__PURE__ */
|
|
10348
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10092
10349
|
"button",
|
|
10093
10350
|
{
|
|
10094
10351
|
className: "ai-modal-robot-btn",
|
|
10095
10352
|
onClick: () => fetchAIResult(promptText, originalText),
|
|
10096
10353
|
disabled: loading
|
|
10097
10354
|
},
|
|
10098
|
-
/* @__PURE__ */
|
|
10099
|
-
)))), /* @__PURE__ */
|
|
10355
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react56.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M8 7h8" }))
|
|
10356
|
+
)))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10100
10357
|
"button",
|
|
10101
10358
|
{
|
|
10102
10359
|
className: "ai-modal-action-btn ai-modal-insert-btn",
|
|
@@ -10104,7 +10361,7 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10104
10361
|
disabled: loading || !resultText
|
|
10105
10362
|
},
|
|
10106
10363
|
"Insert"
|
|
10107
|
-
), /* @__PURE__ */
|
|
10364
|
+
), /* @__PURE__ */ import_react56.default.createElement(
|
|
10108
10365
|
"button",
|
|
10109
10366
|
{
|
|
10110
10367
|
className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
|
|
@@ -10112,22 +10369,22 @@ var AICommands = ({ editor, onAICommand }) => {
|
|
|
10112
10369
|
disabled: loading || !resultText
|
|
10113
10370
|
},
|
|
10114
10371
|
"Insert After"
|
|
10115
|
-
), /* @__PURE__ */
|
|
10372
|
+
), /* @__PURE__ */ import_react56.default.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ import_react56.default.createElement(
|
|
10116
10373
|
"button",
|
|
10117
10374
|
{
|
|
10118
10375
|
className: "ai-modal-action-btn ai-modal-refresh-btn",
|
|
10119
10376
|
onClick: handleRefresh,
|
|
10120
10377
|
disabled: loading
|
|
10121
10378
|
},
|
|
10122
|
-
/* @__PURE__ */
|
|
10123
|
-
))), /* @__PURE__ */
|
|
10379
|
+
/* @__PURE__ */ import_react56.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react56.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react56.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
|
|
10380
|
+
))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react56.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
|
|
10124
10381
|
document.body
|
|
10125
10382
|
));
|
|
10126
10383
|
};
|
|
10127
10384
|
var AICommands_default = AICommands;
|
|
10128
10385
|
|
|
10129
10386
|
// lib/RufousTextEditor/TranslateModal.tsx
|
|
10130
|
-
var
|
|
10387
|
+
var import_react57 = __toESM(require("react"), 1);
|
|
10131
10388
|
var import_react_dom13 = require("react-dom");
|
|
10132
10389
|
var LANGUAGES = [
|
|
10133
10390
|
{ code: "af", name: "Afrikaans" },
|
|
@@ -10267,16 +10524,16 @@ async function translateText(text, sourceLang, targetLang) {
|
|
|
10267
10524
|
return null;
|
|
10268
10525
|
}
|
|
10269
10526
|
var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
|
|
10270
|
-
const [sourceLang, setSourceLang] = (0,
|
|
10271
|
-
const [targetLang, setTargetLang] = (0,
|
|
10272
|
-
const [sourceFilter, setSourceFilter] = (0,
|
|
10273
|
-
const [targetFilter, setTargetFilter] = (0,
|
|
10274
|
-
const [translating, setTranslating] = (0,
|
|
10275
|
-
const [error, setError] = (0,
|
|
10276
|
-
const filteredSource = (0,
|
|
10527
|
+
const [sourceLang, setSourceLang] = (0, import_react57.useState)(initialSource || "en");
|
|
10528
|
+
const [targetLang, setTargetLang] = (0, import_react57.useState)(initialTarget || "hi");
|
|
10529
|
+
const [sourceFilter, setSourceFilter] = (0, import_react57.useState)("");
|
|
10530
|
+
const [targetFilter, setTargetFilter] = (0, import_react57.useState)("");
|
|
10531
|
+
const [translating, setTranslating] = (0, import_react57.useState)(false);
|
|
10532
|
+
const [error, setError] = (0, import_react57.useState)("");
|
|
10533
|
+
const filteredSource = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10277
10534
|
(l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
|
|
10278
10535
|
), [sourceFilter]);
|
|
10279
|
-
const filteredTarget = (0,
|
|
10536
|
+
const filteredTarget = (0, import_react57.useMemo)(() => LANGUAGES.filter(
|
|
10280
10537
|
(l) => l.name.toLowerCase().includes(targetFilter.toLowerCase()) || l.code.toLowerCase().includes(targetFilter.toLowerCase())
|
|
10281
10538
|
), [targetFilter]);
|
|
10282
10539
|
const handleSwap = () => {
|
|
@@ -10320,7 +10577,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10320
10577
|
}
|
|
10321
10578
|
};
|
|
10322
10579
|
return (0, import_react_dom13.createPortal)(
|
|
10323
|
-
/* @__PURE__ */
|
|
10580
|
+
/* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10324
10581
|
"input",
|
|
10325
10582
|
{
|
|
10326
10583
|
type: "text",
|
|
@@ -10329,16 +10586,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10329
10586
|
onChange: (e) => setSourceFilter(e.target.value),
|
|
10330
10587
|
className: "translate-filter-input"
|
|
10331
10588
|
}
|
|
10332
|
-
)), /* @__PURE__ */
|
|
10589
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10333
10590
|
"button",
|
|
10334
10591
|
{
|
|
10335
10592
|
key: lang.code,
|
|
10336
10593
|
className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
|
|
10337
10594
|
onClick: () => setSourceLang(lang.code)
|
|
10338
10595
|
},
|
|
10339
|
-
/* @__PURE__ */
|
|
10340
|
-
/* @__PURE__ */
|
|
10341
|
-
)))), /* @__PURE__ */
|
|
10596
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10597
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10598
|
+
)))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react57.default.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
|
|
10342
10599
|
"input",
|
|
10343
10600
|
{
|
|
10344
10601
|
type: "text",
|
|
@@ -10347,16 +10604,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
|
|
|
10347
10604
|
onChange: (e) => setTargetFilter(e.target.value),
|
|
10348
10605
|
className: "translate-filter-input"
|
|
10349
10606
|
}
|
|
10350
|
-
)), /* @__PURE__ */
|
|
10607
|
+
)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react57.default.createElement(
|
|
10351
10608
|
"button",
|
|
10352
10609
|
{
|
|
10353
10610
|
key: lang.code,
|
|
10354
10611
|
className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
|
|
10355
10612
|
onClick: () => setTargetLang(lang.code)
|
|
10356
10613
|
},
|
|
10357
|
-
/* @__PURE__ */
|
|
10358
|
-
/* @__PURE__ */
|
|
10359
|
-
))))), error && /* @__PURE__ */
|
|
10614
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-code" }, lang.code),
|
|
10615
|
+
/* @__PURE__ */ import_react57.default.createElement("span", { className: "translate-name" }, lang.name)
|
|
10616
|
+
))))), error && /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
|
|
10360
10617
|
document.body
|
|
10361
10618
|
);
|
|
10362
10619
|
};
|
|
@@ -11007,38 +11264,38 @@ var CustomTaskItem = import_extension_task_item.default.extend({
|
|
|
11007
11264
|
});
|
|
11008
11265
|
|
|
11009
11266
|
// lib/RufousTextEditor/icons.tsx
|
|
11010
|
-
var
|
|
11267
|
+
var React114 = __toESM(require("react"), 1);
|
|
11011
11268
|
var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
|
|
11012
|
-
var IconUndo = () => /* @__PURE__ */
|
|
11013
|
-
var IconRedo = () => /* @__PURE__ */
|
|
11014
|
-
var IconBold = () => /* @__PURE__ */
|
|
11015
|
-
var IconItalic = () => /* @__PURE__ */
|
|
11016
|
-
var IconLink = () => /* @__PURE__ */
|
|
11017
|
-
var IconStrike = () => /* @__PURE__ */
|
|
11018
|
-
var IconHeading = () => /* @__PURE__ */
|
|
11019
|
-
var IconFontSize = () => /* @__PURE__ */
|
|
11020
|
-
var IconColor = () => /* @__PURE__ */
|
|
11021
|
-
var IconFont = () => /* @__PURE__ */
|
|
11022
|
-
var IconLineHeight = () => /* @__PURE__ */
|
|
11023
|
-
var IconBulletList = () => /* @__PURE__ */
|
|
11024
|
-
var IconOrderedList = () => /* @__PURE__ */
|
|
11025
|
-
var IconAlignLeft = () => /* @__PURE__ */
|
|
11026
|
-
var IconAlignCenter = () => /* @__PURE__ */
|
|
11027
|
-
var IconAlignRight = () => /* @__PURE__ */
|
|
11028
|
-
var IconAlignJustify = () => /* @__PURE__ */
|
|
11029
|
-
var IconIndentIncrease = () => /* @__PURE__ */
|
|
11030
|
-
var IconIndentDecrease = () => /* @__PURE__ */
|
|
11031
|
-
var IconTable = () => /* @__PURE__ */
|
|
11032
|
-
var IconImage = () => /* @__PURE__ */
|
|
11033
|
-
var IconVideo = () => /* @__PURE__ */
|
|
11034
|
-
var IconCut = () => /* @__PURE__ */
|
|
11035
|
-
var IconCopy = () => /* @__PURE__ */
|
|
11036
|
-
var IconCode = () => /* @__PURE__ */
|
|
11037
|
-
var IconFullscreen = () => /* @__PURE__ */
|
|
11038
|
-
var IconTranslate = () => /* @__PURE__ */
|
|
11039
|
-
var IconTaskList = () => /* @__PURE__ */
|
|
11040
|
-
var IconCheck = () => /* @__PURE__ */
|
|
11041
|
-
var IconPaste = () => /* @__PURE__ */
|
|
11269
|
+
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" }));
|
|
11270
|
+
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" }));
|
|
11271
|
+
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" }));
|
|
11272
|
+
var IconItalic = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
|
|
11273
|
+
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" }));
|
|
11274
|
+
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" }));
|
|
11275
|
+
var IconHeading = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
|
|
11276
|
+
var IconFontSize = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
|
|
11277
|
+
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" }));
|
|
11278
|
+
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" }));
|
|
11279
|
+
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" }));
|
|
11280
|
+
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" }));
|
|
11281
|
+
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" }));
|
|
11282
|
+
var IconAlignLeft = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
|
|
11283
|
+
var IconAlignCenter = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
|
|
11284
|
+
var IconAlignRight = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
|
|
11285
|
+
var IconAlignJustify = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
|
|
11286
|
+
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" }));
|
|
11287
|
+
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" }));
|
|
11288
|
+
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" }));
|
|
11289
|
+
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" }));
|
|
11290
|
+
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" }));
|
|
11291
|
+
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" }));
|
|
11292
|
+
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" }));
|
|
11293
|
+
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" }));
|
|
11294
|
+
var IconFullscreen = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
|
|
11295
|
+
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" }));
|
|
11296
|
+
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" }));
|
|
11297
|
+
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" }));
|
|
11298
|
+
var IconPaste = () => /* @__PURE__ */ React114.createElement("svg", { ...s }, /* @__PURE__ */ React114.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
|
|
11042
11299
|
|
|
11043
11300
|
// lib/RufousTextEditor/Toolbar.tsx
|
|
11044
11301
|
var COLOR_PALETTE = [
|
|
@@ -11176,10 +11433,10 @@ var SPECIAL_CHARS = [
|
|
|
11176
11433
|
"\xA2"
|
|
11177
11434
|
];
|
|
11178
11435
|
var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
11179
|
-
const [open, setOpen] = (0,
|
|
11180
|
-
const ref = (0,
|
|
11181
|
-
const menuRef = (0,
|
|
11182
|
-
(0,
|
|
11436
|
+
const [open, setOpen] = (0, import_react58.useState)(false);
|
|
11437
|
+
const ref = (0, import_react58.useRef)(null);
|
|
11438
|
+
const menuRef = (0, import_react58.useRef)(null);
|
|
11439
|
+
(0, import_react58.useEffect)(() => {
|
|
11183
11440
|
const handleClick = (e) => {
|
|
11184
11441
|
const target = e.target;
|
|
11185
11442
|
const inTrigger = ref.current?.contains(target);
|
|
@@ -11191,7 +11448,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11191
11448
|
document.addEventListener("mousedown", handleClick);
|
|
11192
11449
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
11193
11450
|
}, []);
|
|
11194
|
-
(0,
|
|
11451
|
+
(0, import_react58.useEffect)(() => {
|
|
11195
11452
|
if (!open || !menuRef.current || !ref.current) return;
|
|
11196
11453
|
const menu = menuRef.current;
|
|
11197
11454
|
const trigger2 = ref.current;
|
|
@@ -11220,22 +11477,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
|
|
|
11220
11477
|
};
|
|
11221
11478
|
position();
|
|
11222
11479
|
}, [open]);
|
|
11223
|
-
return /* @__PURE__ */
|
|
11480
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11224
11481
|
"button",
|
|
11225
11482
|
{
|
|
11226
11483
|
className: `toolbar-btn ${trigger.className || ""}`,
|
|
11227
11484
|
onClick: () => setOpen(!open)
|
|
11228
11485
|
},
|
|
11229
11486
|
trigger.label,
|
|
11230
|
-
/* @__PURE__ */
|
|
11487
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
|
|
11231
11488
|
)), open && (0, import_react_dom14.createPortal)(
|
|
11232
|
-
/* @__PURE__ */
|
|
11489
|
+
/* @__PURE__ */ import_react58.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react58.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
|
|
11233
11490
|
document.body
|
|
11234
11491
|
));
|
|
11235
11492
|
};
|
|
11236
11493
|
var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
11237
|
-
const [activeTab, setActiveTab] = (0,
|
|
11238
|
-
const [url, setUrl] = (0,
|
|
11494
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("link");
|
|
11495
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11239
11496
|
const extractIframeSrc = (html) => {
|
|
11240
11497
|
const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
|
|
11241
11498
|
return match ? match[1] : null;
|
|
@@ -11267,14 +11524,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11267
11524
|
}
|
|
11268
11525
|
onClose();
|
|
11269
11526
|
};
|
|
11270
|
-
return /* @__PURE__ */
|
|
11527
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11271
11528
|
"button",
|
|
11272
11529
|
{
|
|
11273
11530
|
className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
|
|
11274
11531
|
onClick: () => setActiveTab("link")
|
|
11275
11532
|
},
|
|
11276
11533
|
"\u{1F517} Link"
|
|
11277
|
-
), /* @__PURE__ */
|
|
11534
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11278
11535
|
"button",
|
|
11279
11536
|
{
|
|
11280
11537
|
className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
|
|
@@ -11282,7 +11539,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11282
11539
|
},
|
|
11283
11540
|
"</>",
|
|
11284
11541
|
" Code"
|
|
11285
|
-
)), /* @__PURE__ */
|
|
11542
|
+
)), /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ import_react58.default.createElement(
|
|
11286
11543
|
"input",
|
|
11287
11544
|
{
|
|
11288
11545
|
type: "text",
|
|
@@ -11293,7 +11550,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11293
11550
|
onKeyDown: (e) => e.key === "Enter" && handleInsert(),
|
|
11294
11551
|
autoFocus: true
|
|
11295
11552
|
}
|
|
11296
|
-
) : /* @__PURE__ */
|
|
11553
|
+
) : /* @__PURE__ */ import_react58.default.createElement(
|
|
11297
11554
|
"textarea",
|
|
11298
11555
|
{
|
|
11299
11556
|
className: "insert-panel-textarea",
|
|
@@ -11302,13 +11559,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
|
|
|
11302
11559
|
onChange: (e) => setUrl(e.target.value),
|
|
11303
11560
|
rows: 3
|
|
11304
11561
|
}
|
|
11305
|
-
), /* @__PURE__ */
|
|
11562
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
|
|
11306
11563
|
};
|
|
11307
11564
|
var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
11308
|
-
const [activeTab, setActiveTab] = (0,
|
|
11309
|
-
const [url, setUrl] = (0,
|
|
11310
|
-
const [isDragging, setIsDragging] = (0,
|
|
11311
|
-
const fileInputRef = (0,
|
|
11565
|
+
const [activeTab, setActiveTab] = (0, import_react58.useState)("upload");
|
|
11566
|
+
const [url, setUrl] = (0, import_react58.useState)("");
|
|
11567
|
+
const [isDragging, setIsDragging] = (0, import_react58.useState)(false);
|
|
11568
|
+
const fileInputRef = (0, import_react58.useRef)(null);
|
|
11312
11569
|
const getBase64 = (file) => {
|
|
11313
11570
|
return new Promise((resolve, reject) => {
|
|
11314
11571
|
const reader = new FileReader();
|
|
@@ -11346,21 +11603,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11346
11603
|
editor.chain().focus().setImage({ src: url }).run();
|
|
11347
11604
|
onClose();
|
|
11348
11605
|
};
|
|
11349
|
-
return /* @__PURE__ */
|
|
11606
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11350
11607
|
"button",
|
|
11351
11608
|
{
|
|
11352
11609
|
className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
|
|
11353
11610
|
onClick: () => setActiveTab("upload")
|
|
11354
11611
|
},
|
|
11355
11612
|
"\u2B06 Upload"
|
|
11356
|
-
), /* @__PURE__ */
|
|
11613
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11357
11614
|
"button",
|
|
11358
11615
|
{
|
|
11359
11616
|
className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
|
|
11360
11617
|
onClick: () => setActiveTab("url")
|
|
11361
11618
|
},
|
|
11362
11619
|
"\u{1F517} URL"
|
|
11363
|
-
)), activeTab === "upload" ? /* @__PURE__ */
|
|
11620
|
+
)), activeTab === "upload" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(
|
|
11364
11621
|
"div",
|
|
11365
11622
|
{
|
|
11366
11623
|
className: `drop-zone ${isDragging ? "dragging" : ""}`,
|
|
@@ -11372,9 +11629,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11372
11629
|
onDrop: handleDrop,
|
|
11373
11630
|
onClick: () => fileInputRef.current?.click()
|
|
11374
11631
|
},
|
|
11375
|
-
/* @__PURE__ */
|
|
11376
|
-
/* @__PURE__ */
|
|
11377
|
-
), /* @__PURE__ */
|
|
11632
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
|
|
11633
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "drop-zone-text-sub" }, "or click")
|
|
11634
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11378
11635
|
"input",
|
|
11379
11636
|
{
|
|
11380
11637
|
ref: fileInputRef,
|
|
@@ -11383,7 +11640,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11383
11640
|
style: { display: "none" },
|
|
11384
11641
|
onChange: handleFileSelect
|
|
11385
11642
|
}
|
|
11386
|
-
)) : /* @__PURE__ */
|
|
11643
|
+
)) : /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11387
11644
|
"input",
|
|
11388
11645
|
{
|
|
11389
11646
|
type: "text",
|
|
@@ -11394,18 +11651,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
|
|
|
11394
11651
|
onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
|
|
11395
11652
|
autoFocus: true
|
|
11396
11653
|
}
|
|
11397
|
-
), /* @__PURE__ */
|
|
11654
|
+
), /* @__PURE__ */ import_react58.default.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
|
|
11398
11655
|
};
|
|
11399
11656
|
var MAX_GRID = 10;
|
|
11400
11657
|
var TableGridSelector = ({ editor, onClose }) => {
|
|
11401
|
-
const [hoverRow, setHoverRow] = (0,
|
|
11402
|
-
const [hoverCol, setHoverCol] = (0,
|
|
11658
|
+
const [hoverRow, setHoverRow] = (0, import_react58.useState)(0);
|
|
11659
|
+
const [hoverCol, setHoverCol] = (0, import_react58.useState)(0);
|
|
11403
11660
|
const handleInsert = () => {
|
|
11404
11661
|
if (!editor || hoverRow === 0 || hoverCol === 0) return;
|
|
11405
11662
|
editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
|
|
11406
11663
|
onClose();
|
|
11407
11664
|
};
|
|
11408
|
-
return /* @__PURE__ */
|
|
11665
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11409
11666
|
"div",
|
|
11410
11667
|
{
|
|
11411
11668
|
className: "table-grid",
|
|
@@ -11414,7 +11671,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11414
11671
|
setHoverCol(0);
|
|
11415
11672
|
}
|
|
11416
11673
|
},
|
|
11417
|
-
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */
|
|
11674
|
+
Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ import_react58.default.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11418
11675
|
"div",
|
|
11419
11676
|
{
|
|
11420
11677
|
key: c,
|
|
@@ -11426,7 +11683,7 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11426
11683
|
onClick: handleInsert
|
|
11427
11684
|
}
|
|
11428
11685
|
))))
|
|
11429
|
-
), /* @__PURE__ */
|
|
11686
|
+
), /* @__PURE__ */ import_react58.default.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ import_react58.default.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ import_react58.default.createElement(
|
|
11430
11687
|
"button",
|
|
11431
11688
|
{
|
|
11432
11689
|
className: "table-grid-submit",
|
|
@@ -11437,9 +11694,9 @@ var TableGridSelector = ({ editor, onClose }) => {
|
|
|
11437
11694
|
)));
|
|
11438
11695
|
};
|
|
11439
11696
|
var ColorPickerPanel = ({ editor, onClose }) => {
|
|
11440
|
-
const [tab, setTab] = (0,
|
|
11441
|
-
const [activeBg, setActiveBg] = (0,
|
|
11442
|
-
const [activeText, setActiveText] = (0,
|
|
11697
|
+
const [tab, setTab] = (0, import_react58.useState)("background");
|
|
11698
|
+
const [activeBg, setActiveBg] = (0, import_react58.useState)(() => editor.getAttributes("highlight").color || null);
|
|
11699
|
+
const [activeText, setActiveText] = (0, import_react58.useState)(() => editor.getAttributes("textStyle").color || null);
|
|
11443
11700
|
const activeColor = tab === "background" ? activeBg : activeText;
|
|
11444
11701
|
const applyColor = (color) => {
|
|
11445
11702
|
if (tab === "background") {
|
|
@@ -11460,51 +11717,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
|
|
|
11460
11717
|
}
|
|
11461
11718
|
onClose();
|
|
11462
11719
|
};
|
|
11463
|
-
return /* @__PURE__ */
|
|
11720
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11464
11721
|
"button",
|
|
11465
11722
|
{
|
|
11466
11723
|
className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
|
|
11467
11724
|
onClick: () => setTab("background")
|
|
11468
11725
|
},
|
|
11469
11726
|
"Background"
|
|
11470
|
-
), /* @__PURE__ */
|
|
11727
|
+
), /* @__PURE__ */ import_react58.default.createElement(
|
|
11471
11728
|
"button",
|
|
11472
11729
|
{
|
|
11473
11730
|
className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
|
|
11474
11731
|
onClick: () => setTab("text")
|
|
11475
11732
|
},
|
|
11476
11733
|
"Text"
|
|
11477
|
-
)), /* @__PURE__ */
|
|
11734
|
+
)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ import_react58.default.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11478
11735
|
"button",
|
|
11479
11736
|
{
|
|
11480
11737
|
className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
|
|
11481
11738
|
style: { background: color },
|
|
11482
11739
|
onClick: () => applyColor(color)
|
|
11483
11740
|
}
|
|
11484
|
-
)))), /* @__PURE__ */
|
|
11741
|
+
)))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
|
|
11485
11742
|
};
|
|
11486
11743
|
var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
|
|
11487
|
-
const [, setEditorState] = (0,
|
|
11488
|
-
const [todoEnabled, setTodoEnabled] = (0,
|
|
11489
|
-
const ttsRef = (0,
|
|
11490
|
-
const sttRef = (0,
|
|
11744
|
+
const [, setEditorState] = (0, import_react58.useState)(0);
|
|
11745
|
+
const [todoEnabled, setTodoEnabled] = (0, import_react58.useState)(false);
|
|
11746
|
+
const ttsRef = (0, import_react58.useRef)(null);
|
|
11747
|
+
const sttRef = (0, import_react58.useRef)(null);
|
|
11491
11748
|
const show = (id) => !visibleButtons || visibleButtons.has(id);
|
|
11492
|
-
(0,
|
|
11749
|
+
(0, import_react58.useEffect)(() => {
|
|
11493
11750
|
if (!editor) return;
|
|
11494
11751
|
const onTransaction = () => setEditorState((n) => n + 1);
|
|
11495
11752
|
editor.on("transaction", onTransaction);
|
|
11496
11753
|
return () => editor.off("transaction", onTransaction);
|
|
11497
11754
|
}, [editor]);
|
|
11498
|
-
const insertSpecialChar = (0,
|
|
11755
|
+
const insertSpecialChar = (0, import_react58.useCallback)((char) => {
|
|
11499
11756
|
if (!editor) return;
|
|
11500
11757
|
editor.chain().focus().insertContent(char).run();
|
|
11501
11758
|
}, [editor]);
|
|
11502
|
-
const [copySuccess, setCopySuccess] = (0,
|
|
11503
|
-
const [translateSource, setTranslateSource] = (0,
|
|
11504
|
-
const [translateTarget, setTranslateTarget] = (0,
|
|
11505
|
-
const [translateStatus, setTranslateStatus] = (0,
|
|
11506
|
-
const [showTranslateModal, setShowTranslateModal] = (0,
|
|
11507
|
-
const handleCopy = (0,
|
|
11759
|
+
const [copySuccess, setCopySuccess] = (0, import_react58.useState)(false);
|
|
11760
|
+
const [translateSource, setTranslateSource] = (0, import_react58.useState)("en");
|
|
11761
|
+
const [translateTarget, setTranslateTarget] = (0, import_react58.useState)("hi");
|
|
11762
|
+
const [translateStatus, setTranslateStatus] = (0, import_react58.useState)("");
|
|
11763
|
+
const [showTranslateModal, setShowTranslateModal] = (0, import_react58.useState)(false);
|
|
11764
|
+
const handleCopy = (0, import_react58.useCallback)(async () => {
|
|
11508
11765
|
if (!editor) return;
|
|
11509
11766
|
const { from, to, empty } = editor.state.selection;
|
|
11510
11767
|
if (empty) return;
|
|
@@ -11519,7 +11776,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11519
11776
|
setTimeout(() => setCopySuccess(false), 2e3);
|
|
11520
11777
|
}
|
|
11521
11778
|
}, [editor]);
|
|
11522
|
-
const handlePaste = (0,
|
|
11779
|
+
const handlePaste = (0, import_react58.useCallback)(async () => {
|
|
11523
11780
|
if (!editor) return;
|
|
11524
11781
|
try {
|
|
11525
11782
|
const text = await navigator.clipboard.readText();
|
|
@@ -11528,7 +11785,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11528
11785
|
document.execCommand("paste");
|
|
11529
11786
|
}
|
|
11530
11787
|
}, [editor]);
|
|
11531
|
-
const handleQuickTranslate = (0,
|
|
11788
|
+
const handleQuickTranslate = (0, import_react58.useCallback)(async () => {
|
|
11532
11789
|
if (!editor) return;
|
|
11533
11790
|
const { from, to, empty } = editor.state.selection;
|
|
11534
11791
|
if (empty) {
|
|
@@ -11562,32 +11819,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11562
11819
|
setTimeout(() => setTranslateStatus(""), 2e3);
|
|
11563
11820
|
}, [editor, translateSource, translateTarget, onTranslate]);
|
|
11564
11821
|
if (!editor) return null;
|
|
11565
|
-
return /* @__PURE__ */
|
|
11822
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11566
11823
|
"button",
|
|
11567
11824
|
{
|
|
11568
11825
|
className: "toolbar-btn",
|
|
11569
11826
|
onClick: () => editor.chain().focus().undo().run(),
|
|
11570
11827
|
disabled: !editor.can().undo()
|
|
11571
11828
|
},
|
|
11572
|
-
/* @__PURE__ */
|
|
11573
|
-
)), show("redo") && /* @__PURE__ */
|
|
11829
|
+
/* @__PURE__ */ import_react58.default.createElement(IconUndo, null)
|
|
11830
|
+
)), show("redo") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11574
11831
|
"button",
|
|
11575
11832
|
{
|
|
11576
11833
|
className: "toolbar-btn",
|
|
11577
11834
|
onClick: () => editor.chain().focus().redo().run(),
|
|
11578
11835
|
disabled: !editor.can().redo()
|
|
11579
11836
|
},
|
|
11580
|
-
/* @__PURE__ */
|
|
11581
|
-
))), show("ai") && /* @__PURE__ */
|
|
11837
|
+
/* @__PURE__ */ import_react58.default.createElement(IconRedo, null)
|
|
11838
|
+
))), show("ai") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react58.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11582
11839
|
Dropdown,
|
|
11583
11840
|
{
|
|
11584
11841
|
trigger: {
|
|
11585
|
-
label: /* @__PURE__ */
|
|
11842
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconHeading, null),
|
|
11586
11843
|
title: "Block type",
|
|
11587
11844
|
className: editor.isActive("heading") ? "is-active" : ""
|
|
11588
11845
|
}
|
|
11589
11846
|
},
|
|
11590
|
-
/* @__PURE__ */
|
|
11847
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11591
11848
|
"button",
|
|
11592
11849
|
{
|
|
11593
11850
|
className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11595,7 +11852,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11595
11852
|
},
|
|
11596
11853
|
"\xB6 Paragraph"
|
|
11597
11854
|
),
|
|
11598
|
-
/* @__PURE__ */
|
|
11855
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11599
11856
|
"button",
|
|
11600
11857
|
{
|
|
11601
11858
|
className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
|
|
@@ -11603,7 +11860,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11603
11860
|
},
|
|
11604
11861
|
"Heading 1"
|
|
11605
11862
|
),
|
|
11606
|
-
/* @__PURE__ */
|
|
11863
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11607
11864
|
"button",
|
|
11608
11865
|
{
|
|
11609
11866
|
className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
|
|
@@ -11611,7 +11868,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11611
11868
|
},
|
|
11612
11869
|
"Heading 2"
|
|
11613
11870
|
),
|
|
11614
|
-
/* @__PURE__ */
|
|
11871
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11615
11872
|
"button",
|
|
11616
11873
|
{
|
|
11617
11874
|
className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
|
|
@@ -11619,7 +11876,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11619
11876
|
},
|
|
11620
11877
|
"Heading 3"
|
|
11621
11878
|
),
|
|
11622
|
-
/* @__PURE__ */
|
|
11879
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11623
11880
|
"button",
|
|
11624
11881
|
{
|
|
11625
11882
|
className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
|
|
@@ -11627,7 +11884,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11627
11884
|
},
|
|
11628
11885
|
"Heading 4"
|
|
11629
11886
|
),
|
|
11630
|
-
/* @__PURE__ */
|
|
11887
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11631
11888
|
"button",
|
|
11632
11889
|
{
|
|
11633
11890
|
className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
|
|
@@ -11635,7 +11892,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11635
11892
|
},
|
|
11636
11893
|
"\u275E Blockquote"
|
|
11637
11894
|
),
|
|
11638
|
-
/* @__PURE__ */
|
|
11895
|
+
/* @__PURE__ */ import_react58.default.createElement(
|
|
11639
11896
|
"button",
|
|
11640
11897
|
{
|
|
11641
11898
|
className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
|
|
@@ -11644,19 +11901,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11644
11901
|
"{ }",
|
|
11645
11902
|
" Code Block"
|
|
11646
11903
|
),
|
|
11647
|
-
/* @__PURE__ */
|
|
11648
|
-
), show("fontsize") && /* @__PURE__ */
|
|
11904
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
|
|
11905
|
+
), show("fontsize") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11649
11906
|
Dropdown,
|
|
11650
11907
|
{
|
|
11651
11908
|
trigger: {
|
|
11652
|
-
label: /* @__PURE__ */
|
|
11909
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFontSize, null),
|
|
11653
11910
|
title: "Font size"
|
|
11654
11911
|
}
|
|
11655
11912
|
},
|
|
11656
11913
|
[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
|
|
11657
11914
|
const sizeStr = `${size}px`;
|
|
11658
11915
|
const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
|
|
11659
|
-
return /* @__PURE__ */
|
|
11916
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11660
11917
|
"button",
|
|
11661
11918
|
{
|
|
11662
11919
|
key: size,
|
|
@@ -11672,17 +11929,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11672
11929
|
sizeStr
|
|
11673
11930
|
);
|
|
11674
11931
|
})
|
|
11675
|
-
), show("font") && /* @__PURE__ */
|
|
11932
|
+
), show("font") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11676
11933
|
Dropdown,
|
|
11677
11934
|
{
|
|
11678
11935
|
trigger: {
|
|
11679
|
-
label: /* @__PURE__ */
|
|
11936
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconFont, null),
|
|
11680
11937
|
title: "Font family"
|
|
11681
11938
|
}
|
|
11682
11939
|
},
|
|
11683
11940
|
FONT_FAMILIES.map((font) => {
|
|
11684
11941
|
const isActive = editor.getAttributes("textStyle").fontFamily === font;
|
|
11685
|
-
return /* @__PURE__ */
|
|
11942
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11686
11943
|
"button",
|
|
11687
11944
|
{
|
|
11688
11945
|
key: font,
|
|
@@ -11699,40 +11956,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11699
11956
|
font
|
|
11700
11957
|
);
|
|
11701
11958
|
})
|
|
11702
|
-
), show("color") && /* @__PURE__ */
|
|
11959
|
+
), show("color") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11703
11960
|
Dropdown,
|
|
11704
11961
|
{
|
|
11705
11962
|
trigger: {
|
|
11706
|
-
label: /* @__PURE__ */
|
|
11963
|
+
label: /* @__PURE__ */ import_react58.default.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react58.default.createElement(IconColor, null)),
|
|
11707
11964
|
title: "Colors"
|
|
11708
11965
|
},
|
|
11709
11966
|
keepOpen: true
|
|
11710
11967
|
},
|
|
11711
|
-
(close) => /* @__PURE__ */
|
|
11712
|
-
), show("bold") && /* @__PURE__ */
|
|
11968
|
+
(close) => /* @__PURE__ */ import_react58.default.createElement(ColorPickerPanel, { editor, onClose: close })
|
|
11969
|
+
), show("bold") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11713
11970
|
"button",
|
|
11714
11971
|
{
|
|
11715
11972
|
className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
|
|
11716
11973
|
onClick: () => editor.chain().focus().toggleBold().run()
|
|
11717
11974
|
},
|
|
11718
|
-
/* @__PURE__ */
|
|
11719
|
-
)), show("italic") && /* @__PURE__ */
|
|
11975
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBold, null)
|
|
11976
|
+
)), show("italic") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11720
11977
|
"button",
|
|
11721
11978
|
{
|
|
11722
11979
|
className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
|
|
11723
11980
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
|
11724
11981
|
},
|
|
11725
|
-
/* @__PURE__ */
|
|
11726
|
-
)), show("strike") && /* @__PURE__ */
|
|
11982
|
+
/* @__PURE__ */ import_react58.default.createElement(IconItalic, null)
|
|
11983
|
+
)), show("strike") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11727
11984
|
Dropdown,
|
|
11728
11985
|
{
|
|
11729
|
-
trigger: { label: /* @__PURE__ */
|
|
11986
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
|
|
11730
11987
|
},
|
|
11731
|
-
/* @__PURE__ */
|
|
11732
|
-
/* @__PURE__ */
|
|
11733
|
-
/* @__PURE__ */
|
|
11734
|
-
/* @__PURE__ */
|
|
11735
|
-
/* @__PURE__ */
|
|
11988
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ import_react58.default.createElement("s", null, "Strikethrough")),
|
|
11989
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ import_react58.default.createElement("u", null, "Underline")),
|
|
11990
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sup", null, "2"), " Superscript"),
|
|
11991
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ import_react58.default.createElement("sub", null, "2"), " Subscript"),
|
|
11992
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
|
|
11736
11993
|
e.preventDefault();
|
|
11737
11994
|
const chain = editor.chain().focus();
|
|
11738
11995
|
if (!editor.state.selection.empty) {
|
|
@@ -11748,25 +12005,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11748
12005
|
c.run();
|
|
11749
12006
|
}
|
|
11750
12007
|
} }, "\u2715 Clear formatting")
|
|
11751
|
-
), show("link") && /* @__PURE__ */
|
|
12008
|
+
), show("link") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11752
12009
|
"button",
|
|
11753
12010
|
{
|
|
11754
12011
|
className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
|
|
11755
12012
|
onClick: setLink
|
|
11756
12013
|
},
|
|
11757
|
-
/* @__PURE__ */
|
|
11758
|
-
)), show("lineheight") && /* @__PURE__ */
|
|
12014
|
+
/* @__PURE__ */ import_react58.default.createElement(IconLink, null)
|
|
12015
|
+
)), show("lineheight") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11759
12016
|
Dropdown,
|
|
11760
12017
|
{
|
|
11761
12018
|
trigger: {
|
|
11762
|
-
label: /* @__PURE__ */
|
|
12019
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconLineHeight, null),
|
|
11763
12020
|
title: "Line height"
|
|
11764
12021
|
}
|
|
11765
12022
|
},
|
|
11766
12023
|
["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
|
|
11767
12024
|
const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
|
|
11768
12025
|
const isActive = currentLH === lh;
|
|
11769
|
-
return /* @__PURE__ */
|
|
12026
|
+
return /* @__PURE__ */ import_react58.default.createElement(
|
|
11770
12027
|
"button",
|
|
11771
12028
|
{
|
|
11772
12029
|
key: lh,
|
|
@@ -11782,19 +12039,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11782
12039
|
lh
|
|
11783
12040
|
);
|
|
11784
12041
|
})
|
|
11785
|
-
)), (show("ul") || show("ol")) && /* @__PURE__ */
|
|
12042
|
+
)), (show("ul") || show("ol")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11786
12043
|
"button",
|
|
11787
12044
|
{
|
|
11788
12045
|
className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
|
|
11789
12046
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
|
11790
12047
|
},
|
|
11791
|
-
/* @__PURE__ */
|
|
11792
|
-
)), /* @__PURE__ */
|
|
12048
|
+
/* @__PURE__ */ import_react58.default.createElement(IconBulletList, null)
|
|
12049
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11793
12050
|
{ label: "Default", style: null, icon: "\u2022" },
|
|
11794
12051
|
{ label: "Circle", style: "circle", icon: "\u25CB" },
|
|
11795
12052
|
{ label: "Dot", style: "disc", icon: "\u2219" },
|
|
11796
12053
|
{ label: "Square", style: "square", icon: "\u25A0" }
|
|
11797
|
-
].map((item) => /* @__PURE__ */
|
|
12054
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11798
12055
|
"button",
|
|
11799
12056
|
{
|
|
11800
12057
|
key: item.label,
|
|
@@ -11819,24 +12076,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11819
12076
|
}).run();
|
|
11820
12077
|
}
|
|
11821
12078
|
},
|
|
11822
|
-
/* @__PURE__ */
|
|
12079
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11823
12080
|
" ",
|
|
11824
12081
|
item.label
|
|
11825
|
-
)))), show("ol") && /* @__PURE__ */
|
|
12082
|
+
)))), show("ol") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11826
12083
|
"button",
|
|
11827
12084
|
{
|
|
11828
12085
|
className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
|
|
11829
12086
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
|
11830
12087
|
},
|
|
11831
|
-
/* @__PURE__ */
|
|
11832
|
-
)), /* @__PURE__ */
|
|
12088
|
+
/* @__PURE__ */ import_react58.default.createElement(IconOrderedList, null)
|
|
12089
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
|
|
11833
12090
|
{ label: "Default", style: "decimal", icon: "1." },
|
|
11834
12091
|
{ label: "Lower Alpha", style: "lower-alpha", icon: "a." },
|
|
11835
12092
|
{ label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
|
|
11836
12093
|
{ label: "Lower Roman", style: "lower-roman", icon: "i." },
|
|
11837
12094
|
{ label: "Upper Alpha", style: "upper-alpha", icon: "A." },
|
|
11838
12095
|
{ label: "Upper Roman", style: "upper-roman", icon: "I." }
|
|
11839
|
-
].map((item) => /* @__PURE__ */
|
|
12096
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11840
12097
|
"button",
|
|
11841
12098
|
{
|
|
11842
12099
|
key: item.label,
|
|
@@ -11861,24 +12118,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11861
12118
|
}).run();
|
|
11862
12119
|
}
|
|
11863
12120
|
},
|
|
11864
|
-
/* @__PURE__ */
|
|
12121
|
+
/* @__PURE__ */ import_react58.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
|
|
11865
12122
|
" ",
|
|
11866
12123
|
item.label
|
|
11867
|
-
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */
|
|
12124
|
+
))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11868
12125
|
Dropdown,
|
|
11869
12126
|
{
|
|
11870
12127
|
trigger: {
|
|
11871
|
-
label: /* @__PURE__ */
|
|
12128
|
+
label: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null),
|
|
11872
12129
|
title: "Align",
|
|
11873
12130
|
className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
|
|
11874
12131
|
}
|
|
11875
12132
|
},
|
|
11876
12133
|
[
|
|
11877
|
-
{ label: "Align Left", value: "left", icon: /* @__PURE__ */
|
|
11878
|
-
{ label: "Align Center", value: "center", icon: /* @__PURE__ */
|
|
11879
|
-
{ label: "Align Right", value: "right", icon: /* @__PURE__ */
|
|
11880
|
-
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */
|
|
11881
|
-
].map((item) => /* @__PURE__ */
|
|
12134
|
+
{ label: "Align Left", value: "left", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignLeft, null) },
|
|
12135
|
+
{ label: "Align Center", value: "center", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignCenter, null) },
|
|
12136
|
+
{ label: "Align Right", value: "right", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignRight, null) },
|
|
12137
|
+
{ label: "Align Justify", value: "justify", icon: /* @__PURE__ */ import_react58.default.createElement(IconAlignJustify, null) }
|
|
12138
|
+
].map((item) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11882
12139
|
"button",
|
|
11883
12140
|
{
|
|
11884
12141
|
key: item.value,
|
|
@@ -11889,7 +12146,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11889
12146
|
" ",
|
|
11890
12147
|
item.label
|
|
11891
12148
|
))
|
|
11892
|
-
), show("indent") && /* @__PURE__ */
|
|
12149
|
+
), show("indent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11893
12150
|
"button",
|
|
11894
12151
|
{
|
|
11895
12152
|
className: "toolbar-btn",
|
|
@@ -11908,8 +12165,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11908
12165
|
}).run();
|
|
11909
12166
|
}
|
|
11910
12167
|
},
|
|
11911
|
-
/* @__PURE__ */
|
|
11912
|
-
)), show("outdent") && /* @__PURE__ */
|
|
12168
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentIncrease, null)
|
|
12169
|
+
)), show("outdent") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11913
12170
|
"button",
|
|
11914
12171
|
{
|
|
11915
12172
|
className: "toolbar-btn",
|
|
@@ -11928,29 +12185,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11928
12185
|
}).run();
|
|
11929
12186
|
}
|
|
11930
12187
|
},
|
|
11931
|
-
/* @__PURE__ */
|
|
11932
|
-
))), show("table") && /* @__PURE__ */
|
|
12188
|
+
/* @__PURE__ */ import_react58.default.createElement(IconIndentDecrease, null)
|
|
12189
|
+
))), show("table") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react58.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11933
12190
|
"button",
|
|
11934
12191
|
{
|
|
11935
12192
|
className: "toolbar-btn",
|
|
11936
12193
|
onClick: () => document.execCommand("cut")
|
|
11937
12194
|
},
|
|
11938
|
-
/* @__PURE__ */
|
|
11939
|
-
)), show("copy") && /* @__PURE__ */
|
|
12195
|
+
/* @__PURE__ */ import_react58.default.createElement(IconCut, null)
|
|
12196
|
+
)), show("copy") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11940
12197
|
"button",
|
|
11941
12198
|
{
|
|
11942
12199
|
className: "toolbar-btn",
|
|
11943
12200
|
onClick: handleCopy
|
|
11944
12201
|
},
|
|
11945
|
-
copySuccess ? /* @__PURE__ */
|
|
11946
|
-
)), show("paste") && /* @__PURE__ */
|
|
12202
|
+
copySuccess ? /* @__PURE__ */ import_react58.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react58.default.createElement(IconCopy, null)
|
|
12203
|
+
)), show("paste") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11947
12204
|
"button",
|
|
11948
12205
|
{
|
|
11949
12206
|
className: "toolbar-btn",
|
|
11950
12207
|
onClick: handlePaste
|
|
11951
12208
|
},
|
|
11952
|
-
/* @__PURE__ */
|
|
11953
|
-
)), show("specialchars") && /* @__PURE__ */
|
|
12209
|
+
/* @__PURE__ */ import_react58.default.createElement(IconPaste, null)
|
|
12210
|
+
)), show("specialchars") && /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react58.default.createElement(
|
|
11954
12211
|
"button",
|
|
11955
12212
|
{
|
|
11956
12213
|
key: char,
|
|
@@ -11958,12 +12215,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11958
12215
|
onClick: () => insertSpecialChar(char)
|
|
11959
12216
|
},
|
|
11960
12217
|
char
|
|
11961
|
-
)))), show("code") && /* @__PURE__ */
|
|
12218
|
+
)))), show("code") && /* @__PURE__ */ import_react58.default.createElement(
|
|
11962
12219
|
Dropdown,
|
|
11963
12220
|
{
|
|
11964
|
-
trigger: { label: /* @__PURE__ */
|
|
12221
|
+
trigger: { label: /* @__PURE__ */ import_react58.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
|
|
11965
12222
|
},
|
|
11966
|
-
/* @__PURE__ */
|
|
12223
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
11967
12224
|
if (editor.isActive("codeBlock")) {
|
|
11968
12225
|
const text = (() => {
|
|
11969
12226
|
const { $from } = editor.state.selection;
|
|
@@ -11981,22 +12238,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
11981
12238
|
editor.chain().focus().toggleCode().run();
|
|
11982
12239
|
}
|
|
11983
12240
|
} }, "</>", " Inline Code"),
|
|
11984
|
-
/* @__PURE__ */
|
|
11985
|
-
), show("fullscreen") && /* @__PURE__ */
|
|
12241
|
+
/* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
|
|
12242
|
+
), show("fullscreen") && /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11986
12243
|
"button",
|
|
11987
12244
|
{
|
|
11988
12245
|
className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
|
|
11989
12246
|
onClick: onToggleFullscreen
|
|
11990
12247
|
},
|
|
11991
|
-
/* @__PURE__ */
|
|
11992
|
-
)), show("tts") && /* @__PURE__ */
|
|
12248
|
+
/* @__PURE__ */ import_react58.default.createElement(IconFullscreen, null)
|
|
12249
|
+
)), show("tts") && /* @__PURE__ */ import_react58.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react58.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
11993
12250
|
"button",
|
|
11994
12251
|
{
|
|
11995
12252
|
className: "toolbar-btn",
|
|
11996
12253
|
onClick: handleQuickTranslate
|
|
11997
12254
|
},
|
|
11998
|
-
/* @__PURE__ */
|
|
11999
|
-
)), /* @__PURE__ */
|
|
12255
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTranslate, null)
|
|
12256
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react58.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12000
12257
|
"button",
|
|
12001
12258
|
{
|
|
12002
12259
|
className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
|
|
@@ -12039,11 +12296,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12039
12296
|
}
|
|
12040
12297
|
}
|
|
12041
12298
|
},
|
|
12042
|
-
/* @__PURE__ */
|
|
12043
|
-
)), /* @__PURE__ */
|
|
12299
|
+
/* @__PURE__ */ import_react58.default.createElement(IconTaskList, null)
|
|
12300
|
+
)), /* @__PURE__ */ import_react58.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
|
|
12044
12301
|
const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
|
|
12045
12302
|
const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
|
|
12046
|
-
return /* @__PURE__ */
|
|
12303
|
+
return /* @__PURE__ */ import_react58.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
|
|
12047
12304
|
const { state } = editor;
|
|
12048
12305
|
const { schema } = state;
|
|
12049
12306
|
const taskItemType = schema.nodes.taskItem;
|
|
@@ -12076,8 +12333,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12076
12333
|
}
|
|
12077
12334
|
return true;
|
|
12078
12335
|
}).run();
|
|
12079
|
-
} }, /* @__PURE__ */
|
|
12080
|
-
})))), onClose && /* @__PURE__ */
|
|
12336
|
+
} }, /* @__PURE__ */ import_react58.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react58.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
|
|
12337
|
+
})))), onClose && /* @__PURE__ */ import_react58.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react58.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react58.default.createElement(
|
|
12081
12338
|
"button",
|
|
12082
12339
|
{
|
|
12083
12340
|
className: "toolbar-btn btn-cross",
|
|
@@ -12093,8 +12350,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12093
12350
|
onClose();
|
|
12094
12351
|
}
|
|
12095
12352
|
},
|
|
12096
|
-
/* @__PURE__ */
|
|
12097
|
-
))), showTranslateModal && /* @__PURE__ */
|
|
12353
|
+
/* @__PURE__ */ import_react58.default.createElement(closeIcon_default, { color: "#a81c08" })
|
|
12354
|
+
))), showTranslateModal && /* @__PURE__ */ import_react58.default.createElement(
|
|
12098
12355
|
TranslateModal_default,
|
|
12099
12356
|
{
|
|
12100
12357
|
editor,
|
|
@@ -12112,7 +12369,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
|
|
|
12112
12369
|
var Toolbar_default = Toolbar;
|
|
12113
12370
|
|
|
12114
12371
|
// lib/RufousTextEditor/ImageToolbar.tsx
|
|
12115
|
-
var
|
|
12372
|
+
var import_react59 = __toESM(require("react"), 1);
|
|
12116
12373
|
var import_react_dom15 = require("react-dom");
|
|
12117
12374
|
var ALIGNMENTS = [
|
|
12118
12375
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12120,18 +12377,18 @@ var ALIGNMENTS = [
|
|
|
12120
12377
|
{ value: "right", label: "Right", icon: "\u2263" }
|
|
12121
12378
|
];
|
|
12122
12379
|
var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
12123
|
-
const [activeTab, setActiveTab] = (0,
|
|
12124
|
-
const [src, setSrc] = (0,
|
|
12125
|
-
const [title, setTitle] = (0,
|
|
12126
|
-
const [alt, setAlt] = (0,
|
|
12127
|
-
const [link, setLink] = (0,
|
|
12128
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
12129
|
-
const [width, setWidth] = (0,
|
|
12130
|
-
const [height, setHeight] = (0,
|
|
12131
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12132
|
-
const [naturalWidth, setNaturalWidth] = (0,
|
|
12133
|
-
const [naturalHeight, setNaturalHeight] = (0,
|
|
12134
|
-
(0,
|
|
12380
|
+
const [activeTab, setActiveTab] = (0, import_react59.useState)("image");
|
|
12381
|
+
const [src, setSrc] = (0, import_react59.useState)(node?.attrs?.src || "");
|
|
12382
|
+
const [title, setTitle] = (0, import_react59.useState)(node?.attrs?.title || "");
|
|
12383
|
+
const [alt, setAlt] = (0, import_react59.useState)(node?.attrs?.alt || "");
|
|
12384
|
+
const [link, setLink] = (0, import_react59.useState)("");
|
|
12385
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
|
|
12386
|
+
const [width, setWidth] = (0, import_react59.useState)("");
|
|
12387
|
+
const [height, setHeight] = (0, import_react59.useState)("");
|
|
12388
|
+
const [lockRatio, setLockRatio] = (0, import_react59.useState)(true);
|
|
12389
|
+
const [naturalWidth, setNaturalWidth] = (0, import_react59.useState)(0);
|
|
12390
|
+
const [naturalHeight, setNaturalHeight] = (0, import_react59.useState)(0);
|
|
12391
|
+
(0, import_react59.useEffect)(() => {
|
|
12135
12392
|
if (src) {
|
|
12136
12393
|
const img = new window.Image();
|
|
12137
12394
|
img.onload = () => {
|
|
@@ -12170,7 +12427,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12170
12427
|
editor.chain().focus().deleteSelection().run();
|
|
12171
12428
|
onClose();
|
|
12172
12429
|
};
|
|
12173
|
-
return /* @__PURE__ */
|
|
12430
|
+
return /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react59.default.createElement("h3", null, "Image properties"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ import_react59.default.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12174
12431
|
"input",
|
|
12175
12432
|
{
|
|
12176
12433
|
type: "number",
|
|
@@ -12178,14 +12435,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12178
12435
|
value: width,
|
|
12179
12436
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12180
12437
|
}
|
|
12181
|
-
), /* @__PURE__ */
|
|
12438
|
+
), /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12182
12439
|
"button",
|
|
12183
12440
|
{
|
|
12184
12441
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12185
12442
|
onClick: () => setLockRatio(!lockRatio)
|
|
12186
12443
|
},
|
|
12187
12444
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12188
|
-
)), /* @__PURE__ */
|
|
12445
|
+
)), /* @__PURE__ */ import_react59.default.createElement(
|
|
12189
12446
|
"input",
|
|
12190
12447
|
{
|
|
12191
12448
|
type: "number",
|
|
@@ -12193,21 +12450,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12193
12450
|
value: height,
|
|
12194
12451
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12195
12452
|
}
|
|
12196
|
-
))), /* @__PURE__ */
|
|
12453
|
+
))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12197
12454
|
"button",
|
|
12198
12455
|
{
|
|
12199
12456
|
className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
|
|
12200
12457
|
onClick: () => setActiveTab("image")
|
|
12201
12458
|
},
|
|
12202
12459
|
"Image"
|
|
12203
|
-
), /* @__PURE__ */
|
|
12460
|
+
), /* @__PURE__ */ import_react59.default.createElement(
|
|
12204
12461
|
"button",
|
|
12205
12462
|
{
|
|
12206
12463
|
className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
|
|
12207
12464
|
onClick: () => setActiveTab("advanced")
|
|
12208
12465
|
},
|
|
12209
12466
|
"Advanced"
|
|
12210
|
-
)), activeTab === "image" ? /* @__PURE__ */
|
|
12467
|
+
)), activeTab === "image" ? /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12211
12468
|
"input",
|
|
12212
12469
|
{
|
|
12213
12470
|
type: "text",
|
|
@@ -12215,7 +12472,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12215
12472
|
value: src,
|
|
12216
12473
|
onChange: (e) => setSrc(e.target.value)
|
|
12217
12474
|
}
|
|
12218
|
-
), /* @__PURE__ */
|
|
12475
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12219
12476
|
"input",
|
|
12220
12477
|
{
|
|
12221
12478
|
type: "text",
|
|
@@ -12223,7 +12480,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12223
12480
|
value: title,
|
|
12224
12481
|
onChange: (e) => setTitle(e.target.value)
|
|
12225
12482
|
}
|
|
12226
|
-
), /* @__PURE__ */
|
|
12483
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12227
12484
|
"input",
|
|
12228
12485
|
{
|
|
12229
12486
|
type: "text",
|
|
@@ -12231,7 +12488,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12231
12488
|
value: alt,
|
|
12232
12489
|
onChange: (e) => setAlt(e.target.value)
|
|
12233
12490
|
}
|
|
12234
|
-
), /* @__PURE__ */
|
|
12491
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ import_react59.default.createElement(
|
|
12235
12492
|
"input",
|
|
12236
12493
|
{
|
|
12237
12494
|
type: "text",
|
|
@@ -12239,23 +12496,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
|
|
|
12239
12496
|
value: link,
|
|
12240
12497
|
onChange: (e) => setLink(e.target.value)
|
|
12241
12498
|
}
|
|
12242
|
-
), /* @__PURE__ */
|
|
12499
|
+
), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
|
|
12243
12500
|
"input",
|
|
12244
12501
|
{
|
|
12245
12502
|
type: "checkbox",
|
|
12246
12503
|
checked: openInNewTab,
|
|
12247
12504
|
onChange: (e) => setOpenInNewTab(e.target.checked)
|
|
12248
12505
|
}
|
|
12249
|
-
), "Open link in new tab")) : /* @__PURE__ */
|
|
12506
|
+
), "Open link in new tab")) : /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react59.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react59.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react59.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12250
12507
|
};
|
|
12251
12508
|
var ImageToolbar = ({ editor }) => {
|
|
12252
|
-
const [showModal, setShowModal] = (0,
|
|
12253
|
-
const [showAlign, setShowAlign] = (0,
|
|
12254
|
-
const [showVAlign, setShowVAlign] = (0,
|
|
12255
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12256
|
-
const [pos, setPos] = (0,
|
|
12257
|
-
const toolbarRef = (0,
|
|
12258
|
-
(0,
|
|
12509
|
+
const [showModal, setShowModal] = (0, import_react59.useState)(false);
|
|
12510
|
+
const [showAlign, setShowAlign] = (0, import_react59.useState)(false);
|
|
12511
|
+
const [showVAlign, setShowVAlign] = (0, import_react59.useState)(false);
|
|
12512
|
+
const [copyStatus, setCopyStatus] = (0, import_react59.useState)("");
|
|
12513
|
+
const [pos, setPos] = (0, import_react59.useState)(null);
|
|
12514
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
12515
|
+
(0, import_react59.useEffect)(() => {
|
|
12259
12516
|
if (!editor) return;
|
|
12260
12517
|
const update = () => {
|
|
12261
12518
|
const { selection } = editor.state;
|
|
@@ -12285,7 +12542,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12285
12542
|
const node = editor?.state.selection.node;
|
|
12286
12543
|
const isImage = node && node.type.name === "image";
|
|
12287
12544
|
if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
|
|
12288
|
-
/* @__PURE__ */
|
|
12545
|
+
/* @__PURE__ */ import_react59.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
|
|
12289
12546
|
document.body
|
|
12290
12547
|
) : null;
|
|
12291
12548
|
const handleDelete = () => {
|
|
@@ -12362,7 +12619,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12362
12619
|
setShowVAlign(false);
|
|
12363
12620
|
};
|
|
12364
12621
|
return (0, import_react_dom15.createPortal)(
|
|
12365
|
-
/* @__PURE__ */
|
|
12622
|
+
/* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
|
|
12366
12623
|
"div",
|
|
12367
12624
|
{
|
|
12368
12625
|
className: "image-toolbar",
|
|
@@ -12370,14 +12627,14 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12370
12627
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12371
12628
|
onMouseDown: (e) => e.preventDefault()
|
|
12372
12629
|
},
|
|
12373
|
-
/* @__PURE__ */
|
|
12374
|
-
/* @__PURE__ */
|
|
12375
|
-
/* @__PURE__ */
|
|
12376
|
-
/* @__PURE__ */
|
|
12630
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12631
|
+
/* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12632
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12633
|
+
/* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react59.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12377
12634
|
setShowAlign(!showAlign);
|
|
12378
12635
|
setShowVAlign(false);
|
|
12379
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12380
|
-
), showModal && /* @__PURE__ */
|
|
12636
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react59.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react59.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ import_react59.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12637
|
+
), showModal && /* @__PURE__ */ import_react59.default.createElement(
|
|
12381
12638
|
ImagePropertiesModal,
|
|
12382
12639
|
{
|
|
12383
12640
|
editor,
|
|
@@ -12391,7 +12648,7 @@ var ImageToolbar = ({ editor }) => {
|
|
|
12391
12648
|
var ImageToolbar_default = ImageToolbar;
|
|
12392
12649
|
|
|
12393
12650
|
// lib/RufousTextEditor/VideoToolbar.tsx
|
|
12394
|
-
var
|
|
12651
|
+
var import_react60 = __toESM(require("react"), 1);
|
|
12395
12652
|
var import_react_dom16 = require("react-dom");
|
|
12396
12653
|
var ALIGNMENTS2 = [
|
|
12397
12654
|
{ value: "left", label: "Left", icon: "\u2630" },
|
|
@@ -12400,10 +12657,10 @@ var ALIGNMENTS2 = [
|
|
|
12400
12657
|
];
|
|
12401
12658
|
var VIDEO_TYPES = ["youtube", "video"];
|
|
12402
12659
|
var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
12403
|
-
const [src, setSrc] = (0,
|
|
12404
|
-
const [width, setWidth] = (0,
|
|
12405
|
-
const [height, setHeight] = (0,
|
|
12406
|
-
const [lockRatio, setLockRatio] = (0,
|
|
12660
|
+
const [src, setSrc] = (0, import_react60.useState)(node?.attrs?.src || "");
|
|
12661
|
+
const [width, setWidth] = (0, import_react60.useState)(String(node?.attrs?.width || 640));
|
|
12662
|
+
const [height, setHeight] = (0, import_react60.useState)(String(node?.attrs?.height || 360));
|
|
12663
|
+
const [lockRatio, setLockRatio] = (0, import_react60.useState)(true);
|
|
12407
12664
|
const handleWidthChange = (val) => {
|
|
12408
12665
|
setWidth(val);
|
|
12409
12666
|
if (lockRatio) {
|
|
@@ -12436,7 +12693,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12436
12693
|
onClose();
|
|
12437
12694
|
};
|
|
12438
12695
|
const isYoutube = nodeType === "youtube";
|
|
12439
|
-
return /* @__PURE__ */
|
|
12696
|
+
return /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react60.default.createElement("h3", null, "Video properties"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ import_react60.default.createElement(
|
|
12440
12697
|
"iframe",
|
|
12441
12698
|
{
|
|
12442
12699
|
src,
|
|
@@ -12444,14 +12701,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12444
12701
|
style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
|
|
12445
12702
|
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
12446
12703
|
}
|
|
12447
|
-
) : /* @__PURE__ */
|
|
12704
|
+
) : /* @__PURE__ */ import_react60.default.createElement(
|
|
12448
12705
|
"video",
|
|
12449
12706
|
{
|
|
12450
12707
|
src,
|
|
12451
12708
|
controls: true,
|
|
12452
12709
|
style: { width: "100%", aspectRatio: "16/9", display: "block" }
|
|
12453
12710
|
}
|
|
12454
|
-
)), /* @__PURE__ */
|
|
12711
|
+
)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12455
12712
|
"input",
|
|
12456
12713
|
{
|
|
12457
12714
|
type: "number",
|
|
@@ -12459,14 +12716,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12459
12716
|
value: width,
|
|
12460
12717
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12461
12718
|
}
|
|
12462
|
-
), /* @__PURE__ */
|
|
12719
|
+
), /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement(
|
|
12463
12720
|
"button",
|
|
12464
12721
|
{
|
|
12465
12722
|
className: `lock-btn ${lockRatio ? "locked" : ""}`,
|
|
12466
12723
|
onClick: () => setLockRatio(!lockRatio)
|
|
12467
12724
|
},
|
|
12468
12725
|
lockRatio ? "\u{1F512}" : "\u{1F513}"
|
|
12469
|
-
)), /* @__PURE__ */
|
|
12726
|
+
)), /* @__PURE__ */ import_react60.default.createElement(
|
|
12470
12727
|
"input",
|
|
12471
12728
|
{
|
|
12472
12729
|
type: "number",
|
|
@@ -12474,7 +12731,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12474
12731
|
value: height,
|
|
12475
12732
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12476
12733
|
}
|
|
12477
|
-
))), /* @__PURE__ */
|
|
12734
|
+
))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12478
12735
|
"input",
|
|
12479
12736
|
{
|
|
12480
12737
|
type: "text",
|
|
@@ -12482,7 +12739,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12482
12739
|
value: src,
|
|
12483
12740
|
onChange: (e) => setSrc(e.target.value)
|
|
12484
12741
|
}
|
|
12485
|
-
), /* @__PURE__ */
|
|
12742
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12486
12743
|
"input",
|
|
12487
12744
|
{
|
|
12488
12745
|
type: "number",
|
|
@@ -12490,7 +12747,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12490
12747
|
value: width,
|
|
12491
12748
|
onChange: (e) => handleWidthChange(e.target.value)
|
|
12492
12749
|
}
|
|
12493
|
-
), /* @__PURE__ */
|
|
12750
|
+
), /* @__PURE__ */ import_react60.default.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ import_react60.default.createElement(
|
|
12494
12751
|
"input",
|
|
12495
12752
|
{
|
|
12496
12753
|
type: "number",
|
|
@@ -12498,16 +12755,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
|
|
|
12498
12755
|
value: height,
|
|
12499
12756
|
onChange: (e) => handleHeightChange(e.target.value)
|
|
12500
12757
|
}
|
|
12501
|
-
)))), /* @__PURE__ */
|
|
12758
|
+
)))), /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react60.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
|
|
12502
12759
|
};
|
|
12503
12760
|
var VideoToolbar = ({ editor }) => {
|
|
12504
|
-
const [showModal, setShowModal] = (0,
|
|
12505
|
-
const [showSize, setShowSize] = (0,
|
|
12506
|
-
const [showAlign, setShowAlign] = (0,
|
|
12507
|
-
const [copyStatus, setCopyStatus] = (0,
|
|
12508
|
-
const [pos, setPos] = (0,
|
|
12509
|
-
const toolbarRef = (0,
|
|
12510
|
-
(0,
|
|
12761
|
+
const [showModal, setShowModal] = (0, import_react60.useState)(false);
|
|
12762
|
+
const [showSize, setShowSize] = (0, import_react60.useState)(false);
|
|
12763
|
+
const [showAlign, setShowAlign] = (0, import_react60.useState)(false);
|
|
12764
|
+
const [copyStatus, setCopyStatus] = (0, import_react60.useState)("");
|
|
12765
|
+
const [pos, setPos] = (0, import_react60.useState)(null);
|
|
12766
|
+
const toolbarRef = (0, import_react60.useRef)(null);
|
|
12767
|
+
(0, import_react60.useEffect)(() => {
|
|
12511
12768
|
if (!editor) return;
|
|
12512
12769
|
const update = () => {
|
|
12513
12770
|
const { selection } = editor.state;
|
|
@@ -12538,7 +12795,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12538
12795
|
const isVideo = node && VIDEO_TYPES.includes(node.type.name);
|
|
12539
12796
|
const nodeType = node?.type.name;
|
|
12540
12797
|
if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
|
|
12541
|
-
/* @__PURE__ */
|
|
12798
|
+
/* @__PURE__ */ import_react60.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
|
|
12542
12799
|
document.body
|
|
12543
12800
|
) : null;
|
|
12544
12801
|
const handleDelete = () => {
|
|
@@ -12585,7 +12842,7 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12585
12842
|
);
|
|
12586
12843
|
};
|
|
12587
12844
|
return (0, import_react_dom16.createPortal)(
|
|
12588
|
-
/* @__PURE__ */
|
|
12845
|
+
/* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
|
|
12589
12846
|
"div",
|
|
12590
12847
|
{
|
|
12591
12848
|
className: "image-toolbar",
|
|
@@ -12593,30 +12850,30 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12593
12850
|
style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
|
|
12594
12851
|
onMouseDown: (e) => e.preventDefault()
|
|
12595
12852
|
},
|
|
12596
|
-
/* @__PURE__ */
|
|
12597
|
-
/* @__PURE__ */
|
|
12598
|
-
/* @__PURE__ */
|
|
12599
|
-
/* @__PURE__ */
|
|
12853
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
|
|
12854
|
+
/* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
|
|
12855
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ import_react60.default.createElement("span", { className: "img-copy-toast" }, copyStatus)),
|
|
12856
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12600
12857
|
setShowSize(!showSize);
|
|
12601
12858
|
setShowAlign(false);
|
|
12602
|
-
} }, /* @__PURE__ */
|
|
12859
|
+
} }, /* @__PURE__ */ import_react60.default.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12603
12860
|
handleResize("small");
|
|
12604
12861
|
setShowSize(false);
|
|
12605
|
-
} }, "Small (320x180)"), /* @__PURE__ */
|
|
12862
|
+
} }, "Small (320x180)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12606
12863
|
handleResize("medium");
|
|
12607
12864
|
setShowSize(false);
|
|
12608
|
-
} }, "Medium (480x270)"), /* @__PURE__ */
|
|
12865
|
+
} }, "Medium (480x270)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12609
12866
|
handleResize("large");
|
|
12610
12867
|
setShowSize(false);
|
|
12611
|
-
} }, "Large (640x360)"), /* @__PURE__ */
|
|
12868
|
+
} }, "Large (640x360)"), /* @__PURE__ */ import_react60.default.createElement("button", { className: "dropdown-item", onClick: () => {
|
|
12612
12869
|
handleResize("full");
|
|
12613
12870
|
setShowSize(false);
|
|
12614
12871
|
} }, "Full (854x480)"))),
|
|
12615
|
-
/* @__PURE__ */
|
|
12872
|
+
/* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ import_react60.default.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ import_react60.default.createElement("button", { className: "img-tool-btn", onClick: () => {
|
|
12616
12873
|
setShowAlign(!showAlign);
|
|
12617
12874
|
setShowSize(false);
|
|
12618
|
-
} }, "\u2630 ", /* @__PURE__ */
|
|
12619
|
-
), showModal && /* @__PURE__ */
|
|
12875
|
+
} }, "\u2630 ", /* @__PURE__ */ import_react60.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ import_react60.default.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ import_react60.default.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
|
|
12876
|
+
), showModal && /* @__PURE__ */ import_react60.default.createElement(
|
|
12620
12877
|
VideoPropertiesModal,
|
|
12621
12878
|
{
|
|
12622
12879
|
editor,
|
|
@@ -12631,22 +12888,22 @@ var VideoToolbar = ({ editor }) => {
|
|
|
12631
12888
|
var VideoToolbar_default = VideoToolbar;
|
|
12632
12889
|
|
|
12633
12890
|
// lib/RufousTextEditor/TableToolbar.tsx
|
|
12634
|
-
var
|
|
12891
|
+
var import_react61 = __toESM(require("react"), 1);
|
|
12635
12892
|
var import_react_dom17 = require("react-dom");
|
|
12636
|
-
var IconAddRowBefore = () => /* @__PURE__ */
|
|
12637
|
-
var IconAddRowAfter = () => /* @__PURE__ */
|
|
12638
|
-
var IconAddColBefore = () => /* @__PURE__ */
|
|
12639
|
-
var IconAddColAfter = () => /* @__PURE__ */
|
|
12640
|
-
var IconDeleteRow = () => /* @__PURE__ */
|
|
12641
|
-
var IconDeleteCol = () => /* @__PURE__ */
|
|
12642
|
-
var IconDeleteTable = () => /* @__PURE__ */
|
|
12643
|
-
var IconMergeCells = () => /* @__PURE__ */
|
|
12644
|
-
var IconSplitCell = () => /* @__PURE__ */
|
|
12645
|
-
var IconToggleHeader = () => /* @__PURE__ */
|
|
12893
|
+
var IconAddRowBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
|
|
12894
|
+
var IconAddRowAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
|
|
12895
|
+
var IconAddColBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
|
|
12896
|
+
var IconAddColAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
|
|
12897
|
+
var IconDeleteRow = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
|
|
12898
|
+
var IconDeleteCol = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
|
|
12899
|
+
var IconDeleteTable = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
|
|
12900
|
+
var IconMergeCells = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M8 15h8v2H8z" }));
|
|
12901
|
+
var IconSplitCell = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
|
|
12902
|
+
var IconToggleHeader = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react61.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
|
|
12646
12903
|
var TableToolbar = ({ editor }) => {
|
|
12647
|
-
const [pos, setPos] = (0,
|
|
12648
|
-
const toolbarRef = (0,
|
|
12649
|
-
(0,
|
|
12904
|
+
const [pos, setPos] = (0, import_react61.useState)(null);
|
|
12905
|
+
const toolbarRef = (0, import_react61.useRef)(null);
|
|
12906
|
+
(0, import_react61.useEffect)(() => {
|
|
12650
12907
|
if (!editor) return;
|
|
12651
12908
|
const update = () => {
|
|
12652
12909
|
if (!editor.isActive("table")) {
|
|
@@ -12690,7 +12947,7 @@ var TableToolbar = ({ editor }) => {
|
|
|
12690
12947
|
const canSplit = editor.can().splitCell();
|
|
12691
12948
|
const prevent = (e) => e.preventDefault();
|
|
12692
12949
|
return (0, import_react_dom17.createPortal)(
|
|
12693
|
-
/* @__PURE__ */
|
|
12950
|
+
/* @__PURE__ */ import_react61.default.createElement(
|
|
12694
12951
|
"div",
|
|
12695
12952
|
{
|
|
12696
12953
|
ref: toolbarRef,
|
|
@@ -12698,19 +12955,19 @@ var TableToolbar = ({ editor }) => {
|
|
|
12698
12955
|
style: { top: pos.top, left: pos.left },
|
|
12699
12956
|
onMouseDown: prevent
|
|
12700
12957
|
},
|
|
12701
|
-
/* @__PURE__ */
|
|
12702
|
-
/* @__PURE__ */
|
|
12703
|
-
/* @__PURE__ */
|
|
12704
|
-
/* @__PURE__ */
|
|
12705
|
-
/* @__PURE__ */
|
|
12706
|
-
/* @__PURE__ */
|
|
12707
|
-
/* @__PURE__ */
|
|
12708
|
-
/* @__PURE__ */
|
|
12709
|
-
/* @__PURE__ */
|
|
12710
|
-
/* @__PURE__ */
|
|
12711
|
-
/* @__PURE__ */
|
|
12712
|
-
/* @__PURE__ */
|
|
12713
|
-
/* @__PURE__ */
|
|
12958
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowBefore, null))),
|
|
12959
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddRowAfter, null))),
|
|
12960
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteRow, null))),
|
|
12961
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12962
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColBefore, null))),
|
|
12963
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ import_react61.default.createElement(IconAddColAfter, null))),
|
|
12964
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteCol, null))),
|
|
12965
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12966
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ import_react61.default.createElement(IconMergeCells, null))),
|
|
12967
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ import_react61.default.createElement(IconSplitCell, null))),
|
|
12968
|
+
/* @__PURE__ */ import_react61.default.createElement("span", { className: "rf-table-toolbar-sep" }),
|
|
12969
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ import_react61.default.createElement(IconToggleHeader, null))),
|
|
12970
|
+
/* @__PURE__ */ import_react61.default.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ import_react61.default.createElement(IconDeleteTable, null)))
|
|
12714
12971
|
),
|
|
12715
12972
|
document.body
|
|
12716
12973
|
);
|
|
@@ -12876,7 +13133,7 @@ var RufousTextEditor = ({
|
|
|
12876
13133
|
sx
|
|
12877
13134
|
}) => {
|
|
12878
13135
|
const sxClass = useSx(sx);
|
|
12879
|
-
const toolbarButtons = (0,
|
|
13136
|
+
const toolbarButtons = (0, import_react62.useMemo)(() => {
|
|
12880
13137
|
const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
|
|
12881
13138
|
const visible = new Set(list.filter((b) => b !== "|"));
|
|
12882
13139
|
if (hideButtons) {
|
|
@@ -12884,17 +13141,17 @@ var RufousTextEditor = ({
|
|
|
12884
13141
|
}
|
|
12885
13142
|
return visible;
|
|
12886
13143
|
}, [buttons, variant, hideButtons]);
|
|
12887
|
-
const mentionSuggestion = (0,
|
|
12888
|
-
const onChangeRef = (0,
|
|
12889
|
-
const onBlurRef = (0,
|
|
12890
|
-
(0,
|
|
13144
|
+
const mentionSuggestion = (0, import_react62.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
|
|
13145
|
+
const onChangeRef = (0, import_react62.useRef)(onChange);
|
|
13146
|
+
const onBlurRef = (0, import_react62.useRef)(onBlur);
|
|
13147
|
+
(0, import_react62.useEffect)(() => {
|
|
12891
13148
|
onChangeRef.current = onChange;
|
|
12892
13149
|
}, [onChange]);
|
|
12893
|
-
(0,
|
|
13150
|
+
(0, import_react62.useEffect)(() => {
|
|
12894
13151
|
onBlurRef.current = onBlur;
|
|
12895
13152
|
}, [onBlur]);
|
|
12896
13153
|
const isEditable = editable && !disabled;
|
|
12897
|
-
const editor = (0,
|
|
13154
|
+
const editor = (0, import_react63.useEditor)({
|
|
12898
13155
|
editable: isEditable,
|
|
12899
13156
|
extensions: [
|
|
12900
13157
|
import_starter_kit.default,
|
|
@@ -12991,8 +13248,8 @@ var RufousTextEditor = ({
|
|
|
12991
13248
|
onChangeRef.current?.(e.getHTML(), e.getJSON());
|
|
12992
13249
|
}
|
|
12993
13250
|
});
|
|
12994
|
-
const wrapperRef = (0,
|
|
12995
|
-
(0,
|
|
13251
|
+
const wrapperRef = (0, import_react62.useRef)(null);
|
|
13252
|
+
(0, import_react62.useEffect)(() => {
|
|
12996
13253
|
if (!editor) return;
|
|
12997
13254
|
let blurTimer = null;
|
|
12998
13255
|
const handler = ({ event }) => {
|
|
@@ -13010,15 +13267,15 @@ var RufousTextEditor = ({
|
|
|
13010
13267
|
if (blurTimer) clearTimeout(blurTimer);
|
|
13011
13268
|
};
|
|
13012
13269
|
}, [editor]);
|
|
13013
|
-
const setLinkRef = (0,
|
|
13014
|
-
const [linkModalOpen, setLinkModalOpen] = (0,
|
|
13015
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
13016
|
-
const [linkText, setLinkText] = (0,
|
|
13017
|
-
const [linkClassName, setLinkClassName] = (0,
|
|
13018
|
-
const [linkNewTab, setLinkNewTab] = (0,
|
|
13019
|
-
const [linkNoFollow, setLinkNoFollow] = (0,
|
|
13020
|
-
const [linkSelection, setLinkSelection] = (0,
|
|
13021
|
-
const setLink = (0,
|
|
13270
|
+
const setLinkRef = (0, import_react62.useRef)(null);
|
|
13271
|
+
const [linkModalOpen, setLinkModalOpen] = (0, import_react62.useState)(false);
|
|
13272
|
+
const [linkUrl, setLinkUrl] = (0, import_react62.useState)("");
|
|
13273
|
+
const [linkText, setLinkText] = (0, import_react62.useState)("");
|
|
13274
|
+
const [linkClassName, setLinkClassName] = (0, import_react62.useState)("");
|
|
13275
|
+
const [linkNewTab, setLinkNewTab] = (0, import_react62.useState)(true);
|
|
13276
|
+
const [linkNoFollow, setLinkNoFollow] = (0, import_react62.useState)(true);
|
|
13277
|
+
const [linkSelection, setLinkSelection] = (0, import_react62.useState)(null);
|
|
13278
|
+
const setLink = (0, import_react62.useCallback)(() => {
|
|
13022
13279
|
if (!editor) return;
|
|
13023
13280
|
const attrs = editor.getAttributes("link");
|
|
13024
13281
|
const previousUrl = attrs.href || "";
|
|
@@ -13055,10 +13312,10 @@ var RufousTextEditor = ({
|
|
|
13055
13312
|
setLinkSelection({ from, to });
|
|
13056
13313
|
setLinkModalOpen(true);
|
|
13057
13314
|
}, [editor]);
|
|
13058
|
-
(0,
|
|
13315
|
+
(0, import_react62.useEffect)(() => {
|
|
13059
13316
|
setLinkRef.current = setLink;
|
|
13060
13317
|
}, [setLink]);
|
|
13061
|
-
(0,
|
|
13318
|
+
(0, import_react62.useEffect)(() => {
|
|
13062
13319
|
if (!editor?.view) return;
|
|
13063
13320
|
const handleKeyDown = (event) => {
|
|
13064
13321
|
if ((event.ctrlKey || event.metaKey) && event.key === "k") {
|
|
@@ -13090,7 +13347,7 @@ var RufousTextEditor = ({
|
|
|
13090
13347
|
editor.view.dom.removeEventListener("keydown", handleKeyDown);
|
|
13091
13348
|
};
|
|
13092
13349
|
}, [editor]);
|
|
13093
|
-
const handleLinkSubmit = (0,
|
|
13350
|
+
const handleLinkSubmit = (0, import_react62.useCallback)(() => {
|
|
13094
13351
|
if (!editor || !linkSelection) return;
|
|
13095
13352
|
editor.chain().focus().setTextSelection(linkSelection).run();
|
|
13096
13353
|
if (linkUrl === "") {
|
|
@@ -13126,7 +13383,7 @@ var RufousTextEditor = ({
|
|
|
13126
13383
|
setLinkClassName("");
|
|
13127
13384
|
setLinkSelection(null);
|
|
13128
13385
|
}, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
|
|
13129
|
-
const handleLinkRemove = (0,
|
|
13386
|
+
const handleLinkRemove = (0, import_react62.useCallback)(() => {
|
|
13130
13387
|
if (!editor || !linkSelection) return;
|
|
13131
13388
|
editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
|
|
13132
13389
|
setLinkModalOpen(false);
|
|
@@ -13135,7 +13392,7 @@ var RufousTextEditor = ({
|
|
|
13135
13392
|
setLinkClassName("");
|
|
13136
13393
|
setLinkSelection(null);
|
|
13137
13394
|
}, [editor, linkSelection]);
|
|
13138
|
-
const handleLinkCancel = (0,
|
|
13395
|
+
const handleLinkCancel = (0, import_react62.useCallback)(() => {
|
|
13139
13396
|
setLinkModalOpen(false);
|
|
13140
13397
|
setLinkUrl("");
|
|
13141
13398
|
setLinkText("");
|
|
@@ -13143,21 +13400,21 @@ var RufousTextEditor = ({
|
|
|
13143
13400
|
setLinkSelection(null);
|
|
13144
13401
|
editor?.chain().focus().run();
|
|
13145
13402
|
}, [editor]);
|
|
13146
|
-
const [saveStatus, setSaveStatus] = (0,
|
|
13147
|
-
const handleSave = (0,
|
|
13403
|
+
const [saveStatus, setSaveStatus] = (0, import_react62.useState)("");
|
|
13404
|
+
const handleSave = (0, import_react62.useCallback)(() => {
|
|
13148
13405
|
if (!editor || !onSaveProp) return;
|
|
13149
13406
|
onSaveProp(editor.getHTML(), editor.getJSON());
|
|
13150
13407
|
setSaveStatus("Saved!");
|
|
13151
13408
|
setTimeout(() => setSaveStatus(""), 2e3);
|
|
13152
13409
|
}, [editor, onSaveProp]);
|
|
13153
|
-
const handleExport = (0,
|
|
13410
|
+
const handleExport = (0, import_react62.useCallback)(() => {
|
|
13154
13411
|
if (!editor || !onExportProp) return;
|
|
13155
13412
|
onExportProp(editor.getHTML(), editor.getJSON());
|
|
13156
13413
|
}, [editor, onExportProp]);
|
|
13157
|
-
const providerValue = (0,
|
|
13158
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
13159
|
-
const toggleFullscreen = (0,
|
|
13160
|
-
const wrapperJsx = /* @__PURE__ */
|
|
13414
|
+
const providerValue = (0, import_react62.useMemo)(() => ({ editor }), [editor]);
|
|
13415
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react62.useState)(false);
|
|
13416
|
+
const toggleFullscreen = (0, import_react62.useCallback)(() => setIsFullscreen((prev) => !prev), []);
|
|
13417
|
+
const wrapperJsx = /* @__PURE__ */ import_react62.default.createElement(
|
|
13161
13418
|
"div",
|
|
13162
13419
|
{
|
|
13163
13420
|
ref: wrapperRef,
|
|
@@ -13168,7 +13425,7 @@ var RufousTextEditor = ({
|
|
|
13168
13425
|
...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
|
|
13169
13426
|
}
|
|
13170
13427
|
},
|
|
13171
|
-
/* @__PURE__ */
|
|
13428
|
+
/* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13172
13429
|
Toolbar_default,
|
|
13173
13430
|
{
|
|
13174
13431
|
editor,
|
|
@@ -13183,8 +13440,8 @@ var RufousTextEditor = ({
|
|
|
13183
13440
|
isFullscreen,
|
|
13184
13441
|
onToggleFullscreen: toggleFullscreen
|
|
13185
13442
|
}
|
|
13186
|
-
), /* @__PURE__ */
|
|
13187
|
-
|
|
13443
|
+
), /* @__PURE__ */ import_react62.default.createElement(import_react63.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react62.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react62.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13444
|
+
import_react63.BubbleMenu,
|
|
13188
13445
|
{
|
|
13189
13446
|
editor,
|
|
13190
13447
|
className: "bubble-menu",
|
|
@@ -13201,31 +13458,31 @@ var RufousTextEditor = ({
|
|
|
13201
13458
|
}
|
|
13202
13459
|
}
|
|
13203
13460
|
},
|
|
13204
|
-
/* @__PURE__ */
|
|
13461
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13205
13462
|
"button",
|
|
13206
13463
|
{
|
|
13207
13464
|
onClick: () => editor?.chain().focus().toggleBold().run(),
|
|
13208
13465
|
className: editor?.isActive("bold") ? "is-active" : ""
|
|
13209
13466
|
},
|
|
13210
|
-
/* @__PURE__ */
|
|
13467
|
+
/* @__PURE__ */ import_react62.default.createElement("strong", null, "B")
|
|
13211
13468
|
),
|
|
13212
|
-
/* @__PURE__ */
|
|
13469
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13213
13470
|
"button",
|
|
13214
13471
|
{
|
|
13215
13472
|
onClick: () => editor?.chain().focus().toggleItalic().run(),
|
|
13216
13473
|
className: editor?.isActive("italic") ? "is-active" : ""
|
|
13217
13474
|
},
|
|
13218
|
-
/* @__PURE__ */
|
|
13475
|
+
/* @__PURE__ */ import_react62.default.createElement("em", null, "I")
|
|
13219
13476
|
),
|
|
13220
|
-
/* @__PURE__ */
|
|
13477
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13221
13478
|
"button",
|
|
13222
13479
|
{
|
|
13223
13480
|
onClick: () => editor?.chain().focus().toggleStrike().run(),
|
|
13224
13481
|
className: editor?.isActive("strike") ? "is-active" : ""
|
|
13225
13482
|
},
|
|
13226
|
-
/* @__PURE__ */
|
|
13483
|
+
/* @__PURE__ */ import_react62.default.createElement("s", null, "S")
|
|
13227
13484
|
),
|
|
13228
|
-
/* @__PURE__ */
|
|
13485
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13229
13486
|
"button",
|
|
13230
13487
|
{
|
|
13231
13488
|
onClick: () => editor?.chain().focus().toggleCode().run(),
|
|
@@ -13233,7 +13490,7 @@ var RufousTextEditor = ({
|
|
|
13233
13490
|
},
|
|
13234
13491
|
"</>"
|
|
13235
13492
|
),
|
|
13236
|
-
/* @__PURE__ */
|
|
13493
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13237
13494
|
"button",
|
|
13238
13495
|
{
|
|
13239
13496
|
onClick: setLink,
|
|
@@ -13241,8 +13498,8 @@ var RufousTextEditor = ({
|
|
|
13241
13498
|
},
|
|
13242
13499
|
"\u{1F517}"
|
|
13243
13500
|
)
|
|
13244
|
-
), editor && /* @__PURE__ */
|
|
13245
|
-
|
|
13501
|
+
), editor && /* @__PURE__ */ import_react62.default.createElement(
|
|
13502
|
+
import_react63.FloatingMenu,
|
|
13246
13503
|
{
|
|
13247
13504
|
editor,
|
|
13248
13505
|
className: "floating-menu",
|
|
@@ -13256,7 +13513,7 @@ var RufousTextEditor = ({
|
|
|
13256
13513
|
}
|
|
13257
13514
|
}
|
|
13258
13515
|
},
|
|
13259
|
-
/* @__PURE__ */
|
|
13516
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13260
13517
|
"button",
|
|
13261
13518
|
{
|
|
13262
13519
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
@@ -13264,7 +13521,7 @@ var RufousTextEditor = ({
|
|
|
13264
13521
|
},
|
|
13265
13522
|
"H1"
|
|
13266
13523
|
),
|
|
13267
|
-
/* @__PURE__ */
|
|
13524
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13268
13525
|
"button",
|
|
13269
13526
|
{
|
|
13270
13527
|
onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
@@ -13272,7 +13529,7 @@ var RufousTextEditor = ({
|
|
|
13272
13529
|
},
|
|
13273
13530
|
"H2"
|
|
13274
13531
|
),
|
|
13275
|
-
/* @__PURE__ */
|
|
13532
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13276
13533
|
"button",
|
|
13277
13534
|
{
|
|
13278
13535
|
onClick: () => editor?.chain().focus().toggleBulletList().run(),
|
|
@@ -13280,7 +13537,7 @@ var RufousTextEditor = ({
|
|
|
13280
13537
|
},
|
|
13281
13538
|
"\u2022 List"
|
|
13282
13539
|
),
|
|
13283
|
-
/* @__PURE__ */
|
|
13540
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13284
13541
|
"button",
|
|
13285
13542
|
{
|
|
13286
13543
|
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
|
|
@@ -13288,7 +13545,7 @@ var RufousTextEditor = ({
|
|
|
13288
13545
|
},
|
|
13289
13546
|
"1. List"
|
|
13290
13547
|
),
|
|
13291
|
-
/* @__PURE__ */
|
|
13548
|
+
/* @__PURE__ */ import_react62.default.createElement(
|
|
13292
13549
|
"button",
|
|
13293
13550
|
{
|
|
13294
13551
|
onClick: () => editor?.chain().focus().toggleBlockquote().run(),
|
|
@@ -13296,8 +13553,8 @@ var RufousTextEditor = ({
|
|
|
13296
13553
|
},
|
|
13297
13554
|
"\u201C Quote"
|
|
13298
13555
|
)
|
|
13299
|
-
), /* @__PURE__ */
|
|
13300
|
-
/* @__PURE__ */
|
|
13556
|
+
), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react62.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
|
|
13557
|
+
/* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13301
13558
|
"input",
|
|
13302
13559
|
{
|
|
13303
13560
|
type: "url",
|
|
@@ -13310,7 +13567,7 @@ var RufousTextEditor = ({
|
|
|
13310
13567
|
placeholder: "https://example.com",
|
|
13311
13568
|
autoFocus: true
|
|
13312
13569
|
}
|
|
13313
|
-
)), /* @__PURE__ */
|
|
13570
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react62.default.createElement(
|
|
13314
13571
|
"input",
|
|
13315
13572
|
{
|
|
13316
13573
|
type: "text",
|
|
@@ -13322,24 +13579,24 @@ var RufousTextEditor = ({
|
|
|
13322
13579
|
},
|
|
13323
13580
|
placeholder: "Link text"
|
|
13324
13581
|
}
|
|
13325
|
-
)), /* @__PURE__ */
|
|
13582
|
+
)), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13326
13583
|
"input",
|
|
13327
13584
|
{
|
|
13328
13585
|
type: "checkbox",
|
|
13329
13586
|
checked: linkNewTab,
|
|
13330
13587
|
onChange: (e) => setLinkNewTab(e.target.checked)
|
|
13331
13588
|
}
|
|
13332
|
-
), "Open in new tab"), /* @__PURE__ */
|
|
13589
|
+
), "Open in new tab"), /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react62.default.createElement(
|
|
13333
13590
|
"input",
|
|
13334
13591
|
{
|
|
13335
13592
|
type: "checkbox",
|
|
13336
13593
|
checked: linkNoFollow,
|
|
13337
13594
|
onChange: (e) => setLinkNoFollow(e.target.checked)
|
|
13338
13595
|
}
|
|
13339
|
-
), "No follow"))), /* @__PURE__ */
|
|
13596
|
+
), "No follow"))), /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react62.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
|
|
13340
13597
|
document.body
|
|
13341
13598
|
)),
|
|
13342
|
-
helperText && /* @__PURE__ */
|
|
13599
|
+
helperText && /* @__PURE__ */ import_react62.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
|
|
13343
13600
|
);
|
|
13344
13601
|
return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
|
|
13345
13602
|
};
|
|
@@ -13350,7 +13607,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13350
13607
|
transformedContent = transformLegacyTodos(transformedContent);
|
|
13351
13608
|
} catch {
|
|
13352
13609
|
}
|
|
13353
|
-
return /* @__PURE__ */
|
|
13610
|
+
return /* @__PURE__ */ import_react62.default.createElement(
|
|
13354
13611
|
"div",
|
|
13355
13612
|
{
|
|
13356
13613
|
className: `rf-rte-content ${sxClass} ${className || ""}`,
|
|
@@ -13465,6 +13722,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
|
|
|
13465
13722
|
Skeleton,
|
|
13466
13723
|
Slide,
|
|
13467
13724
|
Slider,
|
|
13725
|
+
SmartSelect,
|
|
13468
13726
|
Snackbar,
|
|
13469
13727
|
SoftSkillsIcon,
|
|
13470
13728
|
Stack,
|