@windoc/react 0.3.11 → 0.3.13
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/index.d.mts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/index.js +898 -590
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +882 -576
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/styles/editor.css +187 -193
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Editor.tsx
|
|
2
|
-
import { useEffect as useEffect4, useRef as
|
|
2
|
+
import { useEffect as useEffect4, useRef as useRef18, useState as useState13 } from "react";
|
|
3
3
|
|
|
4
4
|
// src/EditorContext.tsx
|
|
5
5
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
@@ -8,13 +8,14 @@ var EditorContext = createContext(null);
|
|
|
8
8
|
function EditorProvider({
|
|
9
9
|
editorRef,
|
|
10
10
|
rangeStyle,
|
|
11
|
+
isInTable,
|
|
11
12
|
children
|
|
12
13
|
}) {
|
|
13
14
|
const [isApple, setIsApple] = useState(false);
|
|
14
15
|
useEffect(() => {
|
|
15
16
|
setIsApple(/Mac OS X/.test(navigator.userAgent));
|
|
16
17
|
}, []);
|
|
17
|
-
return /* @__PURE__ */ jsx(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle }, children });
|
|
18
|
+
return /* @__PURE__ */ jsx(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle, isInTable }, children });
|
|
18
19
|
}
|
|
19
20
|
function useEditor() {
|
|
20
21
|
const ctx = useContext(EditorContext);
|
|
@@ -105,68 +106,358 @@ function RedoTool() {
|
|
|
105
106
|
);
|
|
106
107
|
}
|
|
107
108
|
|
|
108
|
-
// src/toolbar/
|
|
109
|
+
// src/toolbar/TableCellBgColorTool.tsx
|
|
109
110
|
import { useRef, useState as useState3 } from "react";
|
|
110
|
-
import {
|
|
111
|
-
|
|
111
|
+
import { PaintBucket, RotateCcw } from "lucide-react";
|
|
112
|
+
import { jsx as jsx5, jsxs } from "react/jsx-runtime";
|
|
113
|
+
var COLOR_PALETTE = [
|
|
114
|
+
[
|
|
115
|
+
"#000000",
|
|
116
|
+
"#434343",
|
|
117
|
+
"#666666",
|
|
118
|
+
"#999999",
|
|
119
|
+
"#b7b7b7",
|
|
120
|
+
"#cccccc",
|
|
121
|
+
"#d9d9d9",
|
|
122
|
+
"#efefef",
|
|
123
|
+
"#f3f3f3",
|
|
124
|
+
"#ffffff"
|
|
125
|
+
],
|
|
126
|
+
[
|
|
127
|
+
"#980000",
|
|
128
|
+
"#ff0000",
|
|
129
|
+
"#ff9900",
|
|
130
|
+
"#ffff00",
|
|
131
|
+
"#00ff00",
|
|
132
|
+
"#00ffff",
|
|
133
|
+
"#4a86e8",
|
|
134
|
+
"#0000ff",
|
|
135
|
+
"#9900ff",
|
|
136
|
+
"#ff00ff"
|
|
137
|
+
],
|
|
138
|
+
[
|
|
139
|
+
"#e6b8af",
|
|
140
|
+
"#f4cccc",
|
|
141
|
+
"#fce5cd",
|
|
142
|
+
"#fff2cc",
|
|
143
|
+
"#d9ead3",
|
|
144
|
+
"#d0e0e3",
|
|
145
|
+
"#c9daf8",
|
|
146
|
+
"#cfe2f3",
|
|
147
|
+
"#d9d2e9",
|
|
148
|
+
"#ead1dc"
|
|
149
|
+
],
|
|
150
|
+
[
|
|
151
|
+
"#dd7e6b",
|
|
152
|
+
"#ea9999",
|
|
153
|
+
"#f9cb9c",
|
|
154
|
+
"#ffe599",
|
|
155
|
+
"#b6d7a8",
|
|
156
|
+
"#a2c4c9",
|
|
157
|
+
"#a4c2f4",
|
|
158
|
+
"#9fc5e8",
|
|
159
|
+
"#b4a7d6",
|
|
160
|
+
"#d5a6bd"
|
|
161
|
+
],
|
|
162
|
+
[
|
|
163
|
+
"#cc4125",
|
|
164
|
+
"#e06666",
|
|
165
|
+
"#f6b26b",
|
|
166
|
+
"#ffd966",
|
|
167
|
+
"#93c47d",
|
|
168
|
+
"#76a5af",
|
|
169
|
+
"#6d9eeb",
|
|
170
|
+
"#6fa8dc",
|
|
171
|
+
"#8e7cc3",
|
|
172
|
+
"#c27ba0"
|
|
173
|
+
],
|
|
174
|
+
[
|
|
175
|
+
"#a61c00",
|
|
176
|
+
"#cc0000",
|
|
177
|
+
"#e69138",
|
|
178
|
+
"#f1c232",
|
|
179
|
+
"#6aa84f",
|
|
180
|
+
"#45818e",
|
|
181
|
+
"#3c78d8",
|
|
182
|
+
"#3d85c6",
|
|
183
|
+
"#674ea7",
|
|
184
|
+
"#a64d79"
|
|
185
|
+
],
|
|
186
|
+
[
|
|
187
|
+
"#85200c",
|
|
188
|
+
"#990000",
|
|
189
|
+
"#b45f06",
|
|
190
|
+
"#bf9000",
|
|
191
|
+
"#38761d",
|
|
192
|
+
"#134f5c",
|
|
193
|
+
"#1155cc",
|
|
194
|
+
"#0b5394",
|
|
195
|
+
"#351c75",
|
|
196
|
+
"#741b47"
|
|
197
|
+
],
|
|
198
|
+
[
|
|
199
|
+
"#5b0f00",
|
|
200
|
+
"#660000",
|
|
201
|
+
"#783f04",
|
|
202
|
+
"#7f6000",
|
|
203
|
+
"#274e13",
|
|
204
|
+
"#0c343d",
|
|
205
|
+
"#1c4587",
|
|
206
|
+
"#073763",
|
|
207
|
+
"#20124d",
|
|
208
|
+
"#4c1130"
|
|
209
|
+
]
|
|
210
|
+
];
|
|
211
|
+
function TableCellBgColorTool() {
|
|
112
212
|
const { editorRef } = useEditor();
|
|
113
|
-
const
|
|
114
|
-
const [
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
editorRef.current?.command.
|
|
118
|
-
|
|
213
|
+
const dropdownRef = useRef(null);
|
|
214
|
+
const [activeColor, setActiveColor] = useState3("");
|
|
215
|
+
const handleColor = (color) => {
|
|
216
|
+
setActiveColor(color);
|
|
217
|
+
editorRef.current?.command.executeTableTdBackgroundColor(color);
|
|
218
|
+
dropdownRef.current?.classList.remove("visible");
|
|
119
219
|
};
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
220
|
+
const handleNone = () => {
|
|
221
|
+
setActiveColor("");
|
|
222
|
+
editorRef.current?.command.executeTableTdBackgroundColor("");
|
|
223
|
+
dropdownRef.current?.classList.remove("visible");
|
|
124
224
|
};
|
|
125
225
|
return /* @__PURE__ */ jsxs(
|
|
126
226
|
"div",
|
|
127
227
|
{
|
|
128
|
-
className: "menu-
|
|
129
|
-
|
|
228
|
+
className: "menu-item__td-bg-color",
|
|
229
|
+
title: "Cell background color",
|
|
230
|
+
onClick: () => dropdownRef.current?.classList.toggle("visible"),
|
|
130
231
|
children: [
|
|
131
|
-
/* @__PURE__ */ jsx5(
|
|
132
|
-
/* @__PURE__ */ jsx5("
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
/* @__PURE__ */ jsx5(
|
|
232
|
+
/* @__PURE__ */ jsx5(PaintBucket, { size: 14 }),
|
|
233
|
+
/* @__PURE__ */ jsx5("span", { style: { backgroundColor: activeColor || "transparent", border: activeColor ? "none" : "1px dashed #ccc" } }),
|
|
234
|
+
/* @__PURE__ */ jsx5("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
235
|
+
/* @__PURE__ */ jsxs("button", { className: "color-palette-reset", onClick: handleNone, children: [
|
|
236
|
+
/* @__PURE__ */ jsx5(RotateCcw, { size: 12 }),
|
|
237
|
+
"No fill"
|
|
136
238
|
] }),
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
239
|
+
/* @__PURE__ */ jsx5("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ jsx5("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx5(
|
|
240
|
+
"div",
|
|
241
|
+
{
|
|
242
|
+
className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
243
|
+
style: { backgroundColor: color },
|
|
244
|
+
onClick: () => handleColor(color),
|
|
245
|
+
title: color
|
|
246
|
+
},
|
|
247
|
+
color
|
|
248
|
+
)) }, ri)) })
|
|
249
|
+
] }) })
|
|
250
|
+
]
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
// src/toolbar/TableCellBorderColorTool.tsx
|
|
256
|
+
import { useRef as useRef2, useState as useState4 } from "react";
|
|
257
|
+
import { PenLine, RotateCcw as RotateCcw2 } from "lucide-react";
|
|
258
|
+
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
259
|
+
var COLOR_PALETTE2 = [
|
|
260
|
+
[
|
|
261
|
+
"#000000",
|
|
262
|
+
"#434343",
|
|
263
|
+
"#666666",
|
|
264
|
+
"#999999",
|
|
265
|
+
"#b7b7b7",
|
|
266
|
+
"#cccccc",
|
|
267
|
+
"#d9d9d9",
|
|
268
|
+
"#efefef",
|
|
269
|
+
"#f3f3f3",
|
|
270
|
+
"#ffffff"
|
|
271
|
+
],
|
|
272
|
+
[
|
|
273
|
+
"#980000",
|
|
274
|
+
"#ff0000",
|
|
275
|
+
"#ff9900",
|
|
276
|
+
"#ffff00",
|
|
277
|
+
"#00ff00",
|
|
278
|
+
"#00ffff",
|
|
279
|
+
"#4a86e8",
|
|
280
|
+
"#0000ff",
|
|
281
|
+
"#9900ff",
|
|
282
|
+
"#ff00ff"
|
|
283
|
+
],
|
|
284
|
+
[
|
|
285
|
+
"#e6b8af",
|
|
286
|
+
"#f4cccc",
|
|
287
|
+
"#fce5cd",
|
|
288
|
+
"#fff2cc",
|
|
289
|
+
"#d9ead3",
|
|
290
|
+
"#d0e0e3",
|
|
291
|
+
"#c9daf8",
|
|
292
|
+
"#cfe2f3",
|
|
293
|
+
"#d9d2e9",
|
|
294
|
+
"#ead1dc"
|
|
295
|
+
],
|
|
296
|
+
[
|
|
297
|
+
"#dd7e6b",
|
|
298
|
+
"#ea9999",
|
|
299
|
+
"#f9cb9c",
|
|
300
|
+
"#ffe599",
|
|
301
|
+
"#b6d7a8",
|
|
302
|
+
"#a2c4c9",
|
|
303
|
+
"#a4c2f4",
|
|
304
|
+
"#9fc5e8",
|
|
305
|
+
"#b4a7d6",
|
|
306
|
+
"#d5a6bd"
|
|
307
|
+
],
|
|
308
|
+
[
|
|
309
|
+
"#cc4125",
|
|
310
|
+
"#e06666",
|
|
311
|
+
"#f6b26b",
|
|
312
|
+
"#ffd966",
|
|
313
|
+
"#93c47d",
|
|
314
|
+
"#76a5af",
|
|
315
|
+
"#6d9eeb",
|
|
316
|
+
"#6fa8dc",
|
|
317
|
+
"#8e7cc3",
|
|
318
|
+
"#c27ba0"
|
|
319
|
+
],
|
|
320
|
+
[
|
|
321
|
+
"#a61c00",
|
|
322
|
+
"#cc0000",
|
|
323
|
+
"#e69138",
|
|
324
|
+
"#f1c232",
|
|
325
|
+
"#6aa84f",
|
|
326
|
+
"#45818e",
|
|
327
|
+
"#3c78d8",
|
|
328
|
+
"#3d85c6",
|
|
329
|
+
"#674ea7",
|
|
330
|
+
"#a64d79"
|
|
331
|
+
],
|
|
332
|
+
[
|
|
333
|
+
"#85200c",
|
|
334
|
+
"#990000",
|
|
335
|
+
"#b45f06",
|
|
336
|
+
"#bf9000",
|
|
337
|
+
"#38761d",
|
|
338
|
+
"#134f5c",
|
|
339
|
+
"#1155cc",
|
|
340
|
+
"#0b5394",
|
|
341
|
+
"#351c75",
|
|
342
|
+
"#741b47"
|
|
343
|
+
],
|
|
344
|
+
[
|
|
345
|
+
"#5b0f00",
|
|
346
|
+
"#660000",
|
|
347
|
+
"#783f04",
|
|
348
|
+
"#7f6000",
|
|
349
|
+
"#274e13",
|
|
350
|
+
"#0c343d",
|
|
351
|
+
"#1c4587",
|
|
352
|
+
"#073763",
|
|
353
|
+
"#20124d",
|
|
354
|
+
"#4c1130"
|
|
355
|
+
]
|
|
356
|
+
];
|
|
357
|
+
function TableCellBorderColorTool() {
|
|
358
|
+
const { editorRef } = useEditor();
|
|
359
|
+
const dropdownRef = useRef2(null);
|
|
360
|
+
const [activeColor, setActiveColor] = useState4("#000000");
|
|
361
|
+
const handleColor = (color) => {
|
|
362
|
+
setActiveColor(color);
|
|
363
|
+
editorRef.current?.command.executeTableTdBorderColor(color);
|
|
364
|
+
dropdownRef.current?.classList.remove("visible");
|
|
365
|
+
};
|
|
366
|
+
const handleReset = () => {
|
|
367
|
+
setActiveColor("#000000");
|
|
368
|
+
editorRef.current?.command.executeTableTdBorderColor("");
|
|
369
|
+
dropdownRef.current?.classList.remove("visible");
|
|
370
|
+
};
|
|
371
|
+
return /* @__PURE__ */ jsxs2(
|
|
372
|
+
"div",
|
|
373
|
+
{
|
|
374
|
+
className: "menu-item__td-border-color",
|
|
375
|
+
title: "Cell border color",
|
|
376
|
+
onClick: () => dropdownRef.current?.classList.toggle("visible"),
|
|
377
|
+
children: [
|
|
378
|
+
/* @__PURE__ */ jsx6(PenLine, { size: 14 }),
|
|
379
|
+
/* @__PURE__ */ jsx6("span", { style: { backgroundColor: activeColor } }),
|
|
380
|
+
/* @__PURE__ */ jsx6("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs2("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
381
|
+
/* @__PURE__ */ jsxs2("button", { className: "color-palette-reset", onClick: handleReset, children: [
|
|
382
|
+
/* @__PURE__ */ jsx6(RotateCcw2, { size: 12 }),
|
|
383
|
+
"Reset"
|
|
384
|
+
] }),
|
|
385
|
+
/* @__PURE__ */ jsx6("div", { className: "color-palette-grid", children: COLOR_PALETTE2.map((row, ri) => /* @__PURE__ */ jsx6("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx6(
|
|
386
|
+
"div",
|
|
387
|
+
{
|
|
388
|
+
className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
389
|
+
style: { backgroundColor: color },
|
|
390
|
+
onClick: () => handleColor(color),
|
|
391
|
+
title: color
|
|
392
|
+
},
|
|
393
|
+
color
|
|
394
|
+
)) }, ri)) })
|
|
154
395
|
] }) })
|
|
155
396
|
]
|
|
156
397
|
}
|
|
157
398
|
);
|
|
158
399
|
}
|
|
159
400
|
|
|
401
|
+
// src/toolbar/ColumnTool.tsx
|
|
402
|
+
import { useRef as useRef3, useState as useState5 } from "react";
|
|
403
|
+
import { ChevronDown } from "lucide-react";
|
|
404
|
+
import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
405
|
+
function ColumnTool() {
|
|
406
|
+
const { editorRef } = useEditor();
|
|
407
|
+
const optionsRef = useRef3(null);
|
|
408
|
+
const [currentColumns, setCurrentColumns] = useState5(1);
|
|
409
|
+
const [gap, setGap] = useState5(20);
|
|
410
|
+
const toggle = () => optionsRef.current?.classList.toggle("visible");
|
|
411
|
+
const handleColumn = (col) => {
|
|
412
|
+
editorRef.current?.command.executeColumnCount(col);
|
|
413
|
+
setCurrentColumns(col);
|
|
414
|
+
};
|
|
415
|
+
const handleGapChange = (value) => {
|
|
416
|
+
const clampedValue = Math.max(0, Math.min(100, value));
|
|
417
|
+
setGap(clampedValue);
|
|
418
|
+
editorRef.current?.command.executeColumnGap(clampedValue);
|
|
419
|
+
};
|
|
420
|
+
return /* @__PURE__ */ jsxs3("div", { className: "menu-item__select-group", children: [
|
|
421
|
+
/* @__PURE__ */ jsx7("div", { className: "menu-item__select-text", title: "Column Layout", onClick: toggle, children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
|
|
422
|
+
/* @__PURE__ */ jsxs3("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
|
|
423
|
+
/* @__PURE__ */ jsx7(ChevronDown, { size: 10, strokeWidth: 2.5 }),
|
|
424
|
+
/* @__PURE__ */ jsx7("div", { className: "options", ref: optionsRef, style: { width: "130px" }, children: /* @__PURE__ */ jsxs3("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
425
|
+
/* @__PURE__ */ jsxs3("ul", { children: [
|
|
426
|
+
/* @__PURE__ */ jsx7("li", { onClick: () => handleColumn(1), children: "1 Column" }),
|
|
427
|
+
/* @__PURE__ */ jsx7("li", { onClick: () => handleColumn(2), children: "2 Columns" })
|
|
428
|
+
] }),
|
|
429
|
+
currentColumns > 1 && /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
430
|
+
/* @__PURE__ */ jsx7("div", { className: "option-divider" }),
|
|
431
|
+
/* @__PURE__ */ jsxs3("div", { className: "option-row", children: [
|
|
432
|
+
/* @__PURE__ */ jsx7("label", { children: "Gap (px)" }),
|
|
433
|
+
/* @__PURE__ */ jsx7(
|
|
434
|
+
"input",
|
|
435
|
+
{
|
|
436
|
+
type: "number",
|
|
437
|
+
min: 0,
|
|
438
|
+
max: 100,
|
|
439
|
+
value: gap,
|
|
440
|
+
onChange: (e) => handleGapChange(Number(e.target.value)),
|
|
441
|
+
onClick: (e) => e.stopPropagation()
|
|
442
|
+
}
|
|
443
|
+
)
|
|
444
|
+
] })
|
|
445
|
+
] })
|
|
446
|
+
] }) })
|
|
447
|
+
] })
|
|
448
|
+
] });
|
|
449
|
+
}
|
|
450
|
+
|
|
160
451
|
// src/toolbar/TableTool.tsx
|
|
161
|
-
import { useState as
|
|
452
|
+
import { useState as useState6, useEffect as useEffect2, useRef as useRef4 } from "react";
|
|
162
453
|
import { Table } from "lucide-react";
|
|
163
|
-
import { jsx as
|
|
454
|
+
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
164
455
|
function TableTool() {
|
|
165
456
|
const { editorRef } = useEditor();
|
|
166
|
-
const [visible, setVisible] =
|
|
167
|
-
const [hoverRow, setHoverRow] =
|
|
168
|
-
const [hoverCol, setHoverCol] =
|
|
169
|
-
const containerRef =
|
|
457
|
+
const [visible, setVisible] = useState6(false);
|
|
458
|
+
const [hoverRow, setHoverRow] = useState6(0);
|
|
459
|
+
const [hoverCol, setHoverCol] = useState6(0);
|
|
460
|
+
const containerRef = useRef4(null);
|
|
170
461
|
useEffect2(() => {
|
|
171
462
|
if (!visible) return;
|
|
172
463
|
const handleClickOutside = (e) => {
|
|
@@ -187,8 +478,8 @@ function TableTool() {
|
|
|
187
478
|
setHoverRow(0);
|
|
188
479
|
setHoverCol(0);
|
|
189
480
|
};
|
|
190
|
-
return /* @__PURE__ */
|
|
191
|
-
/* @__PURE__ */
|
|
481
|
+
return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
|
|
482
|
+
/* @__PURE__ */ jsx8(
|
|
192
483
|
Table,
|
|
193
484
|
{
|
|
194
485
|
size: 16,
|
|
@@ -196,9 +487,9 @@ function TableTool() {
|
|
|
196
487
|
style: { cursor: "pointer" }
|
|
197
488
|
}
|
|
198
489
|
),
|
|
199
|
-
visible && /* @__PURE__ */
|
|
200
|
-
/* @__PURE__ */
|
|
201
|
-
/* @__PURE__ */
|
|
490
|
+
visible && /* @__PURE__ */ jsxs4("div", { className: "table-dropdown", children: [
|
|
491
|
+
/* @__PURE__ */ jsx8("div", { className: "table-dropdown-header", children: /* @__PURE__ */ jsx8("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
|
|
492
|
+
/* @__PURE__ */ jsx8("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ jsx8("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ jsx8(
|
|
202
493
|
"div",
|
|
203
494
|
{
|
|
204
495
|
className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
|
|
@@ -214,8 +505,9 @@ function TableTool() {
|
|
|
214
505
|
}
|
|
215
506
|
|
|
216
507
|
// src/toolbar/TitleTool.tsx
|
|
217
|
-
import { useRef as
|
|
218
|
-
import {
|
|
508
|
+
import { useRef as useRef5 } from "react";
|
|
509
|
+
import { ChevronDown as ChevronDown2 } from "lucide-react";
|
|
510
|
+
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
219
511
|
var LEVELS = [
|
|
220
512
|
{ level: null, label: "Body" },
|
|
221
513
|
{ level: "first", label: "Heading 1" },
|
|
@@ -227,37 +519,37 @@ var LEVELS = [
|
|
|
227
519
|
];
|
|
228
520
|
function TitleTool() {
|
|
229
521
|
const { editorRef, rangeStyle } = useEditor();
|
|
230
|
-
const optionsRef =
|
|
522
|
+
const optionsRef = useRef5(null);
|
|
231
523
|
const activeLevel = rangeStyle?.level || null;
|
|
232
524
|
const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
|
|
233
|
-
const
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
"div",
|
|
238
|
-
|
|
239
|
-
className: "
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
onClick: () => handleTitle(level),
|
|
249
|
-
children: label
|
|
525
|
+
const toggle = () => optionsRef.current?.classList.toggle("visible");
|
|
526
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
527
|
+
return /* @__PURE__ */ jsxs5("div", { className: "menu-item__select-group", children: [
|
|
528
|
+
/* @__PURE__ */ jsx9("div", { className: "menu-item__select-text", title: "Toggle Heading", onClick: toggle, children: activeLabel }),
|
|
529
|
+
/* @__PURE__ */ jsxs5("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
|
|
530
|
+
/* @__PURE__ */ jsx9(ChevronDown2, { size: 10, strokeWidth: 2.5 }),
|
|
531
|
+
/* @__PURE__ */ jsx9("div", { className: "options", ref: optionsRef, style: { width: "100px" }, children: /* @__PURE__ */ jsx9("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx9(
|
|
532
|
+
"li",
|
|
533
|
+
{
|
|
534
|
+
className: activeLevel === level ? "active" : "",
|
|
535
|
+
...level ? { "data-level": level } : {},
|
|
536
|
+
onClick: (e) => {
|
|
537
|
+
e.stopPropagation();
|
|
538
|
+
editorRef.current?.command.executeTitle(level);
|
|
539
|
+
close();
|
|
250
540
|
},
|
|
251
|
-
label
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
541
|
+
children: label
|
|
542
|
+
},
|
|
543
|
+
label
|
|
544
|
+
)) }) })
|
|
545
|
+
] })
|
|
546
|
+
] });
|
|
256
547
|
}
|
|
257
548
|
|
|
258
549
|
// src/toolbar/FontTool.tsx
|
|
259
|
-
import { useRef as
|
|
260
|
-
import {
|
|
550
|
+
import { useRef as useRef6 } from "react";
|
|
551
|
+
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
552
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
261
553
|
var FONTS = [
|
|
262
554
|
{ family: "Arial", label: "Arial" },
|
|
263
555
|
{ family: "Times New Roman", label: "Times New Roman" },
|
|
@@ -270,105 +562,104 @@ var FONTS = [
|
|
|
270
562
|
];
|
|
271
563
|
function FontTool() {
|
|
272
564
|
const { editorRef, rangeStyle } = useEditor();
|
|
273
|
-
const optionsRef =
|
|
565
|
+
const optionsRef = useRef6(null);
|
|
274
566
|
const activeFont = rangeStyle?.font || "Arial";
|
|
275
567
|
const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
|
|
276
|
-
const
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
"div",
|
|
281
|
-
|
|
282
|
-
className: "
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
{
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
onClick: () => handleFont(family),
|
|
293
|
-
children: label
|
|
568
|
+
const toggle = () => optionsRef.current?.classList.toggle("visible");
|
|
569
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
570
|
+
return /* @__PURE__ */ jsxs6("div", { className: "menu-item__select-group", children: [
|
|
571
|
+
/* @__PURE__ */ jsx10("div", { className: "menu-item__select-text", title: "Font", onClick: toggle, children: activeLabel }),
|
|
572
|
+
/* @__PURE__ */ jsxs6("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
|
|
573
|
+
/* @__PURE__ */ jsx10(ChevronDown3, { size: 10, strokeWidth: 2.5 }),
|
|
574
|
+
/* @__PURE__ */ jsx10("div", { className: "options", ref: optionsRef, style: { width: "150px" }, children: /* @__PURE__ */ jsx10("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx10(
|
|
575
|
+
"li",
|
|
576
|
+
{
|
|
577
|
+
"data-family": family,
|
|
578
|
+
className: activeFont === family ? "active" : "",
|
|
579
|
+
style: { fontFamily: family },
|
|
580
|
+
onClick: (e) => {
|
|
581
|
+
e.stopPropagation();
|
|
582
|
+
editorRef.current?.command.executeFont(family);
|
|
583
|
+
close();
|
|
294
584
|
},
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
585
|
+
children: label
|
|
586
|
+
},
|
|
587
|
+
family
|
|
588
|
+
)) }) })
|
|
589
|
+
] })
|
|
590
|
+
] });
|
|
300
591
|
}
|
|
301
592
|
|
|
302
593
|
// src/toolbar/FontSizeTool.tsx
|
|
303
|
-
import { useRef as
|
|
304
|
-
import {
|
|
594
|
+
import { useRef as useRef7 } from "react";
|
|
595
|
+
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
596
|
+
import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
305
597
|
var SIZES = [72, 48, 36, 24, 20, 18, 16, 14, 12, 11, 10, 9, 8, 7];
|
|
306
598
|
function FontSizeTool() {
|
|
307
599
|
const { editorRef, rangeStyle } = useEditor();
|
|
308
|
-
const optionsRef =
|
|
600
|
+
const optionsRef = useRef7(null);
|
|
309
601
|
const activeSize = rangeStyle?.size ?? 11;
|
|
310
|
-
const
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
"div",
|
|
315
|
-
|
|
316
|
-
className: "
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
onClick: () => handleSize(size),
|
|
325
|
-
children: size
|
|
602
|
+
const toggle = () => optionsRef.current?.classList.toggle("visible");
|
|
603
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
604
|
+
return /* @__PURE__ */ jsxs7("div", { className: "menu-item__select-group", children: [
|
|
605
|
+
/* @__PURE__ */ jsx11("div", { className: "menu-item__select-text", title: "Font Size", onClick: toggle, children: activeSize }),
|
|
606
|
+
/* @__PURE__ */ jsxs7("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
|
|
607
|
+
/* @__PURE__ */ jsx11(ChevronDown4, { size: 10, strokeWidth: 2.5 }),
|
|
608
|
+
/* @__PURE__ */ jsx11("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ jsx11("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx11(
|
|
609
|
+
"li",
|
|
610
|
+
{
|
|
611
|
+
className: activeSize === size ? "active" : "",
|
|
612
|
+
onClick: (e) => {
|
|
613
|
+
e.stopPropagation();
|
|
614
|
+
editorRef.current?.command.executeSize(size);
|
|
615
|
+
close();
|
|
326
616
|
},
|
|
327
|
-
size
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
617
|
+
children: size
|
|
618
|
+
},
|
|
619
|
+
size
|
|
620
|
+
)) }) })
|
|
621
|
+
] })
|
|
622
|
+
] });
|
|
332
623
|
}
|
|
333
624
|
|
|
334
625
|
// src/toolbar/LineHeightTool.tsx
|
|
335
|
-
import { useRef as
|
|
336
|
-
import {
|
|
626
|
+
import { useRef as useRef8 } from "react";
|
|
627
|
+
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
628
|
+
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
337
629
|
var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
|
|
338
630
|
function LineHeightTool() {
|
|
339
631
|
const { editorRef, rangeStyle } = useEditor();
|
|
340
|
-
const optionsRef =
|
|
632
|
+
const optionsRef = useRef8(null);
|
|
341
633
|
const activeMargin = rangeStyle?.rowMargin ?? 1;
|
|
342
634
|
const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
|
|
343
|
-
const
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
"div",
|
|
348
|
-
|
|
349
|
-
className: "
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
onClick: () => handleLineHeight(h),
|
|
358
|
-
children: h
|
|
635
|
+
const toggle = () => optionsRef.current?.classList.toggle("visible");
|
|
636
|
+
const close = () => optionsRef.current?.classList.remove("visible");
|
|
637
|
+
return /* @__PURE__ */ jsxs8("div", { className: "menu-item__select-group", children: [
|
|
638
|
+
/* @__PURE__ */ jsx12("div", { className: "menu-item__select-text", title: "Line Height", onClick: toggle, children: activeLabel }),
|
|
639
|
+
/* @__PURE__ */ jsxs8("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
|
|
640
|
+
/* @__PURE__ */ jsx12(ChevronDown5, { size: 10, strokeWidth: 2.5 }),
|
|
641
|
+
/* @__PURE__ */ jsx12("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ jsx12("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx12(
|
|
642
|
+
"li",
|
|
643
|
+
{
|
|
644
|
+
className: String(activeMargin) === h || activeLabel === h ? "active" : "",
|
|
645
|
+
onClick: (e) => {
|
|
646
|
+
e.stopPropagation();
|
|
647
|
+
editorRef.current?.command.executeRowMargin(Number(h));
|
|
648
|
+
close();
|
|
359
649
|
},
|
|
360
|
-
h
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
650
|
+
children: h
|
|
651
|
+
},
|
|
652
|
+
h
|
|
653
|
+
)) }) })
|
|
654
|
+
] })
|
|
655
|
+
] });
|
|
365
656
|
}
|
|
366
657
|
|
|
367
658
|
// src/toolbar/ColorTool.tsx
|
|
368
|
-
import { useRef as
|
|
369
|
-
import { Baseline, RotateCcw } from "lucide-react";
|
|
370
|
-
import { jsx as
|
|
371
|
-
var
|
|
659
|
+
import { useRef as useRef9 } from "react";
|
|
660
|
+
import { Baseline, RotateCcw as RotateCcw3 } from "lucide-react";
|
|
661
|
+
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
662
|
+
var COLOR_PALETTE3 = [
|
|
372
663
|
[
|
|
373
664
|
"#000000",
|
|
374
665
|
"#434343",
|
|
@@ -468,7 +759,7 @@ var COLOR_PALETTE = [
|
|
|
468
759
|
];
|
|
469
760
|
function ColorTool() {
|
|
470
761
|
const { editorRef, rangeStyle } = useEditor();
|
|
471
|
-
const dropdownRef =
|
|
762
|
+
const dropdownRef = useRef9(null);
|
|
472
763
|
const activeColor = rangeStyle?.color || "#000000";
|
|
473
764
|
const handleColor = (color) => {
|
|
474
765
|
editorRef.current?.command.executeColor(color);
|
|
@@ -476,22 +767,22 @@ function ColorTool() {
|
|
|
476
767
|
const handleReset = () => {
|
|
477
768
|
editorRef.current?.command.executeColor(null);
|
|
478
769
|
};
|
|
479
|
-
return /* @__PURE__ */
|
|
770
|
+
return /* @__PURE__ */ jsxs9(
|
|
480
771
|
"div",
|
|
481
772
|
{
|
|
482
773
|
className: "menu-item__color",
|
|
483
774
|
title: "Font Color",
|
|
484
775
|
onClick: () => dropdownRef.current?.classList.toggle("visible"),
|
|
485
776
|
children: [
|
|
486
|
-
/* @__PURE__ */
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
490
|
-
/* @__PURE__ */
|
|
491
|
-
/* @__PURE__ */
|
|
777
|
+
/* @__PURE__ */ jsx13(Baseline, { size: 16 }),
|
|
778
|
+
/* @__PURE__ */ jsx13("span", { style: { backgroundColor: activeColor } }),
|
|
779
|
+
/* @__PURE__ */ jsx13("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
|
|
780
|
+
/* @__PURE__ */ jsx13("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs9("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
781
|
+
/* @__PURE__ */ jsxs9("button", { className: "color-palette-reset", onClick: handleReset, children: [
|
|
782
|
+
/* @__PURE__ */ jsx13(RotateCcw3, { size: 12 }),
|
|
492
783
|
"Reset"
|
|
493
784
|
] }),
|
|
494
|
-
/* @__PURE__ */
|
|
785
|
+
/* @__PURE__ */ jsx13("div", { className: "color-palette-grid", children: COLOR_PALETTE3.map((row, ri) => /* @__PURE__ */ jsx13("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx13(
|
|
495
786
|
"div",
|
|
496
787
|
{
|
|
497
788
|
className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
@@ -508,9 +799,9 @@ function ColorTool() {
|
|
|
508
799
|
}
|
|
509
800
|
|
|
510
801
|
// src/toolbar/HighlightTool.tsx
|
|
511
|
-
import { useRef as
|
|
512
|
-
import { Highlighter, RotateCcw as
|
|
513
|
-
import { jsx as
|
|
802
|
+
import { useRef as useRef10 } from "react";
|
|
803
|
+
import { Highlighter, RotateCcw as RotateCcw4 } from "lucide-react";
|
|
804
|
+
import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
514
805
|
var HIGHLIGHT_PALETTE = [
|
|
515
806
|
[
|
|
516
807
|
"#000000",
|
|
@@ -611,7 +902,7 @@ var HIGHLIGHT_PALETTE = [
|
|
|
611
902
|
];
|
|
612
903
|
function HighlightTool() {
|
|
613
904
|
const { editorRef, rangeStyle } = useEditor();
|
|
614
|
-
const dropdownRef =
|
|
905
|
+
const dropdownRef = useRef10(null);
|
|
615
906
|
const activeColor = rangeStyle?.highlight || "";
|
|
616
907
|
const handleColor = (color) => {
|
|
617
908
|
editorRef.current?.command.executeHighlight(color);
|
|
@@ -619,22 +910,22 @@ function HighlightTool() {
|
|
|
619
910
|
const handleReset = () => {
|
|
620
911
|
editorRef.current?.command.executeHighlight(null);
|
|
621
912
|
};
|
|
622
|
-
return /* @__PURE__ */
|
|
913
|
+
return /* @__PURE__ */ jsxs10(
|
|
623
914
|
"div",
|
|
624
915
|
{
|
|
625
916
|
className: "menu-item__highlight",
|
|
626
917
|
title: "Highlight",
|
|
627
918
|
onClick: () => dropdownRef.current?.classList.toggle("visible"),
|
|
628
919
|
children: [
|
|
629
|
-
/* @__PURE__ */
|
|
630
|
-
/* @__PURE__ */
|
|
631
|
-
/* @__PURE__ */
|
|
632
|
-
/* @__PURE__ */
|
|
633
|
-
/* @__PURE__ */
|
|
634
|
-
/* @__PURE__ */
|
|
920
|
+
/* @__PURE__ */ jsx14(Highlighter, { size: 16 }),
|
|
921
|
+
/* @__PURE__ */ jsx14("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
|
|
922
|
+
/* @__PURE__ */ jsx14("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
|
|
923
|
+
/* @__PURE__ */ jsx14("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs10("div", { onClick: (e) => e.stopPropagation(), children: [
|
|
924
|
+
/* @__PURE__ */ jsxs10("button", { className: "color-palette-reset", onClick: handleReset, children: [
|
|
925
|
+
/* @__PURE__ */ jsx14(RotateCcw4, { size: 12 }),
|
|
635
926
|
"None"
|
|
636
927
|
] }),
|
|
637
|
-
/* @__PURE__ */
|
|
928
|
+
/* @__PURE__ */ jsx14("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ jsx14("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx14(
|
|
638
929
|
"div",
|
|
639
930
|
{
|
|
640
931
|
className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
|
|
@@ -652,173 +943,172 @@ function HighlightTool() {
|
|
|
652
943
|
|
|
653
944
|
// src/toolbar/BoldTool.tsx
|
|
654
945
|
import { Bold } from "lucide-react";
|
|
655
|
-
import { jsx as
|
|
946
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
656
947
|
function BoldTool() {
|
|
657
948
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
658
949
|
const isActive = rangeStyle?.bold === true;
|
|
659
|
-
return /* @__PURE__ */
|
|
950
|
+
return /* @__PURE__ */ jsx15(
|
|
660
951
|
"div",
|
|
661
952
|
{
|
|
662
953
|
className: `menu-item__bold ${isActive ? "active" : ""}`,
|
|
663
954
|
title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`,
|
|
664
955
|
onClick: () => editorRef.current?.command.executeBold(),
|
|
665
|
-
children: /* @__PURE__ */
|
|
956
|
+
children: /* @__PURE__ */ jsx15(Bold, { size: 16 })
|
|
666
957
|
}
|
|
667
958
|
);
|
|
668
959
|
}
|
|
669
960
|
|
|
670
961
|
// src/toolbar/ItalicTool.tsx
|
|
671
962
|
import { Italic } from "lucide-react";
|
|
672
|
-
import { jsx as
|
|
963
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
673
964
|
function ItalicTool() {
|
|
674
965
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
675
966
|
const isActive = rangeStyle?.italic === true;
|
|
676
|
-
return /* @__PURE__ */
|
|
967
|
+
return /* @__PURE__ */ jsx16(
|
|
677
968
|
"div",
|
|
678
969
|
{
|
|
679
970
|
className: `menu-item__italic ${isActive ? "active" : ""}`,
|
|
680
971
|
title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`,
|
|
681
972
|
onClick: () => editorRef.current?.command.executeItalic(),
|
|
682
|
-
children: /* @__PURE__ */
|
|
973
|
+
children: /* @__PURE__ */ jsx16(Italic, { size: 16 })
|
|
683
974
|
}
|
|
684
975
|
);
|
|
685
976
|
}
|
|
686
977
|
|
|
687
978
|
// src/toolbar/UnderlineTool.tsx
|
|
688
|
-
import { useRef as
|
|
689
|
-
import { Underline as UnderlineIcon } from "lucide-react";
|
|
690
|
-
import { jsx as
|
|
979
|
+
import { useRef as useRef11 } from "react";
|
|
980
|
+
import { Underline as UnderlineIcon, ChevronDown as ChevronDown6 } from "lucide-react";
|
|
981
|
+
import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
691
982
|
var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
|
|
692
983
|
function UnderlineTool() {
|
|
693
984
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
694
|
-
const optionsRef =
|
|
985
|
+
const optionsRef = useRef11(null);
|
|
695
986
|
const isActive = rangeStyle?.underline === true;
|
|
696
|
-
return /* @__PURE__ */
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
{
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
987
|
+
return /* @__PURE__ */ jsxs11("div", { className: "menu-item__underline-group", children: [
|
|
988
|
+
/* @__PURE__ */ jsx17(
|
|
989
|
+
"div",
|
|
990
|
+
{
|
|
991
|
+
className: `menu-item__underline-btn${isActive ? " active" : ""}`,
|
|
992
|
+
title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`,
|
|
993
|
+
onClick: () => editorRef.current?.command.executeUnderline(),
|
|
994
|
+
children: /* @__PURE__ */ jsx17(UnderlineIcon, { size: 16 })
|
|
995
|
+
}
|
|
996
|
+
),
|
|
997
|
+
/* @__PURE__ */ jsxs11(
|
|
998
|
+
"div",
|
|
999
|
+
{
|
|
1000
|
+
className: "menu-item__underline-arrow",
|
|
1001
|
+
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1002
|
+
children: [
|
|
1003
|
+
/* @__PURE__ */ jsx17(ChevronDown6, { size: 10, strokeWidth: 2.5 }),
|
|
1004
|
+
/* @__PURE__ */ jsx17("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx17("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx17(
|
|
1005
|
+
"li",
|
|
1006
|
+
{
|
|
1007
|
+
"data-decoration-style": style,
|
|
1008
|
+
onClick: (e) => {
|
|
1009
|
+
e.stopPropagation();
|
|
1010
|
+
editorRef.current?.command.executeUnderline({ style });
|
|
1011
|
+
optionsRef.current?.classList.remove("visible");
|
|
1012
|
+
},
|
|
1013
|
+
children: /* @__PURE__ */ jsx17("i", {})
|
|
723
1014
|
},
|
|
724
|
-
|
|
725
|
-
}
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
);
|
|
1015
|
+
style
|
|
1016
|
+
)) }) })
|
|
1017
|
+
]
|
|
1018
|
+
}
|
|
1019
|
+
)
|
|
1020
|
+
] });
|
|
731
1021
|
}
|
|
732
1022
|
|
|
733
1023
|
// src/toolbar/StrikeoutTool.tsx
|
|
734
1024
|
import { Strikethrough } from "lucide-react";
|
|
735
|
-
import { jsx as
|
|
1025
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
736
1026
|
function StrikeoutTool() {
|
|
737
1027
|
const { editorRef, rangeStyle } = useEditor();
|
|
738
1028
|
const isActive = rangeStyle?.strikeout === true;
|
|
739
|
-
return /* @__PURE__ */
|
|
1029
|
+
return /* @__PURE__ */ jsx18(
|
|
740
1030
|
"div",
|
|
741
1031
|
{
|
|
742
1032
|
className: `menu-item__strikeout ${isActive ? "active" : ""}`,
|
|
743
1033
|
title: "Strikethrough",
|
|
744
1034
|
onClick: () => editorRef.current?.command.executeStrikeout(),
|
|
745
|
-
children: /* @__PURE__ */
|
|
1035
|
+
children: /* @__PURE__ */ jsx18(Strikethrough, { size: 16 })
|
|
746
1036
|
}
|
|
747
1037
|
);
|
|
748
1038
|
}
|
|
749
1039
|
|
|
750
1040
|
// src/toolbar/LeftAlignTool.tsx
|
|
751
1041
|
import { AlignLeft } from "lucide-react";
|
|
752
|
-
import { jsx as
|
|
1042
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
753
1043
|
function LeftAlignTool() {
|
|
754
1044
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
755
1045
|
const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
|
|
756
|
-
return /* @__PURE__ */
|
|
1046
|
+
return /* @__PURE__ */ jsx19(
|
|
757
1047
|
"div",
|
|
758
1048
|
{
|
|
759
1049
|
className: `menu-item__left ${isActive ? "active" : ""}`,
|
|
760
1050
|
title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`,
|
|
761
1051
|
onClick: () => editorRef.current?.command.executeRowFlex("left"),
|
|
762
|
-
children: /* @__PURE__ */
|
|
1052
|
+
children: /* @__PURE__ */ jsx19(AlignLeft, { size: 16 })
|
|
763
1053
|
}
|
|
764
1054
|
);
|
|
765
1055
|
}
|
|
766
1056
|
|
|
767
1057
|
// src/toolbar/CenterAlignTool.tsx
|
|
768
1058
|
import { AlignCenter } from "lucide-react";
|
|
769
|
-
import { jsx as
|
|
1059
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
770
1060
|
function CenterAlignTool() {
|
|
771
1061
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
772
1062
|
const isActive = rangeStyle?.rowFlex === "center";
|
|
773
|
-
return /* @__PURE__ */
|
|
1063
|
+
return /* @__PURE__ */ jsx20(
|
|
774
1064
|
"div",
|
|
775
1065
|
{
|
|
776
1066
|
className: `menu-item__center ${isActive ? "active" : ""}`,
|
|
777
1067
|
title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`,
|
|
778
1068
|
onClick: () => editorRef.current?.command.executeRowFlex("center"),
|
|
779
|
-
children: /* @__PURE__ */
|
|
1069
|
+
children: /* @__PURE__ */ jsx20(AlignCenter, { size: 16 })
|
|
780
1070
|
}
|
|
781
1071
|
);
|
|
782
1072
|
}
|
|
783
1073
|
|
|
784
1074
|
// src/toolbar/RightAlignTool.tsx
|
|
785
1075
|
import { AlignRight } from "lucide-react";
|
|
786
|
-
import { jsx as
|
|
1076
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
787
1077
|
function RightAlignTool() {
|
|
788
1078
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
789
1079
|
const isActive = rangeStyle?.rowFlex === "right";
|
|
790
|
-
return /* @__PURE__ */
|
|
1080
|
+
return /* @__PURE__ */ jsx21(
|
|
791
1081
|
"div",
|
|
792
1082
|
{
|
|
793
1083
|
className: `menu-item__right ${isActive ? "active" : ""}`,
|
|
794
1084
|
title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`,
|
|
795
1085
|
onClick: () => editorRef.current?.command.executeRowFlex("right"),
|
|
796
|
-
children: /* @__PURE__ */
|
|
1086
|
+
children: /* @__PURE__ */ jsx21(AlignRight, { size: 16 })
|
|
797
1087
|
}
|
|
798
1088
|
);
|
|
799
1089
|
}
|
|
800
1090
|
|
|
801
1091
|
// src/toolbar/JustifyTool.tsx
|
|
802
1092
|
import { AlignJustify } from "lucide-react";
|
|
803
|
-
import { jsx as
|
|
1093
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
804
1094
|
function JustifyTool() {
|
|
805
1095
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
806
1096
|
const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
|
|
807
|
-
return /* @__PURE__ */
|
|
1097
|
+
return /* @__PURE__ */ jsx22(
|
|
808
1098
|
"div",
|
|
809
1099
|
{
|
|
810
1100
|
className: `menu-item__justify ${isActive ? "active" : ""}`,
|
|
811
1101
|
title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`,
|
|
812
1102
|
onClick: () => editorRef.current?.command.executeRowFlex("justify"),
|
|
813
|
-
children: /* @__PURE__ */
|
|
1103
|
+
children: /* @__PURE__ */ jsx22(AlignJustify, { size: 16 })
|
|
814
1104
|
}
|
|
815
1105
|
);
|
|
816
1106
|
}
|
|
817
1107
|
|
|
818
1108
|
// src/toolbar/ListTool.tsx
|
|
819
|
-
import { useRef as
|
|
820
|
-
import { List, ListOrdered, Indent, Outdent } from "lucide-react";
|
|
821
|
-
import { jsx as
|
|
1109
|
+
import { useRef as useRef12 } from "react";
|
|
1110
|
+
import { List, ListOrdered, ChevronDown as ChevronDown7, Indent, Outdent } from "lucide-react";
|
|
1111
|
+
import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
822
1112
|
var OL_PRESETS = [
|
|
823
1113
|
{ preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
|
|
824
1114
|
{ preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
|
|
@@ -839,14 +1129,14 @@ function PresetCell({
|
|
|
839
1129
|
option,
|
|
840
1130
|
onClick
|
|
841
1131
|
}) {
|
|
842
|
-
return /* @__PURE__ */
|
|
1132
|
+
return /* @__PURE__ */ jsx23("div", { onClick, className: "list-preset-cell", title: option.label, children: option.preview.map((item, i) => /* @__PURE__ */ jsxs12(
|
|
843
1133
|
"div",
|
|
844
1134
|
{
|
|
845
1135
|
className: "list-preset-line",
|
|
846
1136
|
style: { paddingLeft: `${i * 10}px` },
|
|
847
1137
|
children: [
|
|
848
|
-
/* @__PURE__ */
|
|
849
|
-
/* @__PURE__ */
|
|
1138
|
+
/* @__PURE__ */ jsx23("span", { className: "list-preset-marker", children: item }),
|
|
1139
|
+
/* @__PURE__ */ jsx23("span", { className: "list-preset-text" })
|
|
850
1140
|
]
|
|
851
1141
|
},
|
|
852
1142
|
i
|
|
@@ -854,13 +1144,9 @@ function PresetCell({
|
|
|
854
1144
|
}
|
|
855
1145
|
function ListTool() {
|
|
856
1146
|
const { editorRef, isApple, rangeStyle } = useEditor();
|
|
857
|
-
const optionsRef =
|
|
1147
|
+
const optionsRef = useRef12(null);
|
|
858
1148
|
const isActive = !!rangeStyle?.listType;
|
|
859
1149
|
const close = () => optionsRef.current?.classList.remove("visible");
|
|
860
|
-
const handleList = (type, style) => {
|
|
861
|
-
editorRef.current?.command.executeList(type, style);
|
|
862
|
-
close();
|
|
863
|
-
};
|
|
864
1150
|
const handlePreset = (type, preset) => {
|
|
865
1151
|
const style = type === "ol" ? "decimal" : "disc";
|
|
866
1152
|
editorRef.current?.command.executeListWithPreset(type, style, preset);
|
|
@@ -876,114 +1162,122 @@ function ListTool() {
|
|
|
876
1162
|
editorRef.current?.command.executeListOutdent();
|
|
877
1163
|
close();
|
|
878
1164
|
};
|
|
879
|
-
return /* @__PURE__ */
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
1165
|
+
return /* @__PURE__ */ jsxs12("div", { className: "menu-item__list-group", children: [
|
|
1166
|
+
/* @__PURE__ */ jsx23(
|
|
1167
|
+
"div",
|
|
1168
|
+
{
|
|
1169
|
+
className: `menu-item__list-btn${isActive ? " active" : ""}`,
|
|
1170
|
+
title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`,
|
|
1171
|
+
onClick: () => handlePreset("ul", "ulDefault"),
|
|
1172
|
+
children: /* @__PURE__ */ jsx23(List, { size: 16 })
|
|
1173
|
+
}
|
|
1174
|
+
),
|
|
1175
|
+
/* @__PURE__ */ jsxs12(
|
|
1176
|
+
"div",
|
|
1177
|
+
{
|
|
1178
|
+
className: "menu-item__list-arrow",
|
|
1179
|
+
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1180
|
+
children: [
|
|
1181
|
+
/* @__PURE__ */ jsx23(ChevronDown7, { size: 10, strokeWidth: 2.5 }),
|
|
1182
|
+
/* @__PURE__ */ jsx23("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px" }, children: [
|
|
1183
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
|
|
1184
|
+
/* @__PURE__ */ jsx23(
|
|
1185
|
+
"button",
|
|
1186
|
+
{
|
|
1187
|
+
onClick: (e) => {
|
|
1188
|
+
e.stopPropagation();
|
|
1189
|
+
editorRef.current?.command.executeList("ul", "checkbox");
|
|
1190
|
+
close();
|
|
1191
|
+
},
|
|
1192
|
+
className: "list-quick-btn",
|
|
1193
|
+
children: "Checkbox"
|
|
1194
|
+
}
|
|
1195
|
+
),
|
|
1196
|
+
/* @__PURE__ */ jsx23(
|
|
1197
|
+
"button",
|
|
1198
|
+
{
|
|
1199
|
+
onClick: handleIndent,
|
|
1200
|
+
className: "list-quick-btn",
|
|
1201
|
+
title: "Indent (Tab)",
|
|
1202
|
+
children: /* @__PURE__ */ jsx23(Indent, { size: 14 })
|
|
1203
|
+
}
|
|
1204
|
+
),
|
|
1205
|
+
/* @__PURE__ */ jsx23(
|
|
1206
|
+
"button",
|
|
1207
|
+
{
|
|
1208
|
+
onClick: handleOutdent,
|
|
1209
|
+
className: "list-quick-btn",
|
|
1210
|
+
title: "Outdent (Shift+Tab)",
|
|
1211
|
+
children: /* @__PURE__ */ jsx23(Outdent, { size: 14 })
|
|
1212
|
+
}
|
|
1213
|
+
)
|
|
1214
|
+
] }),
|
|
1215
|
+
/* @__PURE__ */ jsxs12("div", { style: { marginBottom: "8px" }, children: [
|
|
1216
|
+
/* @__PURE__ */ jsxs12(
|
|
1217
|
+
"div",
|
|
1218
|
+
{
|
|
1219
|
+
style: {
|
|
1220
|
+
display: "flex",
|
|
1221
|
+
alignItems: "center",
|
|
1222
|
+
gap: "4px",
|
|
1223
|
+
fontSize: "11px",
|
|
1224
|
+
color: "#667085",
|
|
1225
|
+
marginBottom: "6px",
|
|
1226
|
+
fontWeight: 500
|
|
1227
|
+
},
|
|
1228
|
+
children: [
|
|
1229
|
+
/* @__PURE__ */ jsx23(ListOrdered, { size: 12 }),
|
|
1230
|
+
"Ordered List"
|
|
1231
|
+
]
|
|
1232
|
+
}
|
|
1233
|
+
),
|
|
1234
|
+
/* @__PURE__ */ jsx23("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ jsx23(
|
|
1235
|
+
PresetCell,
|
|
1236
|
+
{
|
|
1237
|
+
option,
|
|
1238
|
+
onClick: () => handlePreset("ol", option.preset)
|
|
934
1239
|
},
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1240
|
+
option.preset
|
|
1241
|
+
)) })
|
|
1242
|
+
] }),
|
|
1243
|
+
/* @__PURE__ */ jsxs12("div", { children: [
|
|
1244
|
+
/* @__PURE__ */ jsxs12(
|
|
1245
|
+
"div",
|
|
1246
|
+
{
|
|
1247
|
+
style: {
|
|
1248
|
+
display: "flex",
|
|
1249
|
+
alignItems: "center",
|
|
1250
|
+
gap: "4px",
|
|
1251
|
+
fontSize: "11px",
|
|
1252
|
+
color: "#667085",
|
|
1253
|
+
marginBottom: "6px",
|
|
1254
|
+
fontWeight: 500
|
|
1255
|
+
},
|
|
1256
|
+
children: [
|
|
1257
|
+
/* @__PURE__ */ jsx23(List, { size: 12 }),
|
|
1258
|
+
"Unordered List"
|
|
1259
|
+
]
|
|
1260
|
+
}
|
|
1261
|
+
),
|
|
1262
|
+
/* @__PURE__ */ jsx23("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ jsx23(
|
|
1263
|
+
PresetCell,
|
|
1264
|
+
{
|
|
1265
|
+
option,
|
|
1266
|
+
onClick: () => handlePreset("ul", option.preset)
|
|
962
1267
|
},
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
{
|
|
972
|
-
option,
|
|
973
|
-
onClick: () => handlePreset("ul", option.preset)
|
|
974
|
-
},
|
|
975
|
-
option.preset
|
|
976
|
-
)) })
|
|
977
|
-
] })
|
|
978
|
-
] }) })
|
|
979
|
-
]
|
|
980
|
-
}
|
|
981
|
-
);
|
|
1268
|
+
option.preset
|
|
1269
|
+
)) })
|
|
1270
|
+
] })
|
|
1271
|
+
] }) })
|
|
1272
|
+
]
|
|
1273
|
+
}
|
|
1274
|
+
)
|
|
1275
|
+
] });
|
|
982
1276
|
}
|
|
983
1277
|
|
|
984
1278
|
// src/toolbar/ImageTool.tsx
|
|
985
1279
|
import { Image as ImageIcon } from "lucide-react";
|
|
986
|
-
import { jsx as
|
|
1280
|
+
import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
987
1281
|
function ImageTool() {
|
|
988
1282
|
const { editorRef } = useEditor();
|
|
989
1283
|
const handleImageUpload = (e) => {
|
|
@@ -1004,14 +1298,14 @@ function ImageTool() {
|
|
|
1004
1298
|
};
|
|
1005
1299
|
e.target.value = "";
|
|
1006
1300
|
};
|
|
1007
|
-
return /* @__PURE__ */
|
|
1301
|
+
return /* @__PURE__ */ jsxs13(
|
|
1008
1302
|
"div",
|
|
1009
1303
|
{
|
|
1010
1304
|
className: "menu-item__image",
|
|
1011
1305
|
onClick: () => document.getElementById("image")?.click(),
|
|
1012
1306
|
children: [
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1307
|
+
/* @__PURE__ */ jsx24(ImageIcon, { size: 16 }),
|
|
1308
|
+
/* @__PURE__ */ jsx24(
|
|
1015
1309
|
"input",
|
|
1016
1310
|
{
|
|
1017
1311
|
type: "file",
|
|
@@ -1026,9 +1320,9 @@ function ImageTool() {
|
|
|
1026
1320
|
}
|
|
1027
1321
|
|
|
1028
1322
|
// src/toolbar/SeparatorTool.tsx
|
|
1029
|
-
import { useRef as
|
|
1323
|
+
import { useRef as useRef13, useState as useState7 } from "react";
|
|
1030
1324
|
import { Minus } from "lucide-react";
|
|
1031
|
-
import { jsx as
|
|
1325
|
+
import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1032
1326
|
var DASH_STYLES = [
|
|
1033
1327
|
{ label: "Solid", dashArray: [] },
|
|
1034
1328
|
{ label: "Dotted", dashArray: [1, 1] },
|
|
@@ -1042,8 +1336,8 @@ var LINE_WIDTHS = [
|
|
|
1042
1336
|
];
|
|
1043
1337
|
function SeparatorTool() {
|
|
1044
1338
|
const { editorRef } = useEditor();
|
|
1045
|
-
const optionsRef =
|
|
1046
|
-
const [selectedWidth, setSelectedWidth] =
|
|
1339
|
+
const optionsRef = useRef13(null);
|
|
1340
|
+
const [selectedWidth, setSelectedWidth] = useState7(1);
|
|
1047
1341
|
const lineColor = "#344054";
|
|
1048
1342
|
const handleSeparator = (e, dashArray) => {
|
|
1049
1343
|
e.stopPropagation();
|
|
@@ -1052,7 +1346,7 @@ function SeparatorTool() {
|
|
|
1052
1346
|
});
|
|
1053
1347
|
optionsRef.current?.classList.remove("visible");
|
|
1054
1348
|
};
|
|
1055
|
-
return /* @__PURE__ */
|
|
1349
|
+
return /* @__PURE__ */ jsx25("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ jsxs14(
|
|
1056
1350
|
"span",
|
|
1057
1351
|
{
|
|
1058
1352
|
className: "menu-item__separator",
|
|
@@ -1071,15 +1365,15 @@ function SeparatorTool() {
|
|
|
1071
1365
|
position: "relative"
|
|
1072
1366
|
},
|
|
1073
1367
|
children: [
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
1368
|
+
/* @__PURE__ */ jsx25(Minus, { size: 16 }),
|
|
1369
|
+
/* @__PURE__ */ jsx25(
|
|
1076
1370
|
"div",
|
|
1077
1371
|
{
|
|
1078
1372
|
className: "options",
|
|
1079
1373
|
ref: optionsRef,
|
|
1080
1374
|
style: { width: "220px", height: "auto" },
|
|
1081
|
-
children: /* @__PURE__ */
|
|
1082
|
-
/* @__PURE__ */
|
|
1375
|
+
children: /* @__PURE__ */ jsxs14("div", { style: { padding: "8px 10px 10px" }, children: [
|
|
1376
|
+
/* @__PURE__ */ jsx25("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs14(
|
|
1083
1377
|
"li",
|
|
1084
1378
|
{
|
|
1085
1379
|
onClick: (e) => handleSeparator(e, dashArray),
|
|
@@ -1092,12 +1386,12 @@ function SeparatorTool() {
|
|
|
1092
1386
|
borderRadius: "4px"
|
|
1093
1387
|
},
|
|
1094
1388
|
children: [
|
|
1095
|
-
/* @__PURE__ */
|
|
1389
|
+
/* @__PURE__ */ jsx25(
|
|
1096
1390
|
"svg",
|
|
1097
1391
|
{
|
|
1098
1392
|
style: { flex: 1, minWidth: 0, overflow: "hidden" },
|
|
1099
1393
|
height: "8",
|
|
1100
|
-
children: /* @__PURE__ */
|
|
1394
|
+
children: /* @__PURE__ */ jsx25(
|
|
1101
1395
|
"line",
|
|
1102
1396
|
{
|
|
1103
1397
|
x1: "0",
|
|
@@ -1111,7 +1405,7 @@ function SeparatorTool() {
|
|
|
1111
1405
|
)
|
|
1112
1406
|
}
|
|
1113
1407
|
),
|
|
1114
|
-
/* @__PURE__ */
|
|
1408
|
+
/* @__PURE__ */ jsx25(
|
|
1115
1409
|
"span",
|
|
1116
1410
|
{
|
|
1117
1411
|
style: {
|
|
@@ -1127,7 +1421,7 @@ function SeparatorTool() {
|
|
|
1127
1421
|
},
|
|
1128
1422
|
label
|
|
1129
1423
|
)) }),
|
|
1130
|
-
/* @__PURE__ */
|
|
1424
|
+
/* @__PURE__ */ jsxs14(
|
|
1131
1425
|
"div",
|
|
1132
1426
|
{
|
|
1133
1427
|
style: {
|
|
@@ -1136,7 +1430,7 @@ function SeparatorTool() {
|
|
|
1136
1430
|
paddingTop: "8px"
|
|
1137
1431
|
},
|
|
1138
1432
|
children: [
|
|
1139
|
-
/* @__PURE__ */
|
|
1433
|
+
/* @__PURE__ */ jsx25(
|
|
1140
1434
|
"div",
|
|
1141
1435
|
{
|
|
1142
1436
|
style: {
|
|
@@ -1148,7 +1442,7 @@ function SeparatorTool() {
|
|
|
1148
1442
|
children: "Line Width"
|
|
1149
1443
|
}
|
|
1150
1444
|
),
|
|
1151
|
-
/* @__PURE__ */
|
|
1445
|
+
/* @__PURE__ */ jsx25("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx25(
|
|
1152
1446
|
"button",
|
|
1153
1447
|
{
|
|
1154
1448
|
onClick: (e) => {
|
|
@@ -1182,11 +1476,11 @@ function SeparatorTool() {
|
|
|
1182
1476
|
}
|
|
1183
1477
|
|
|
1184
1478
|
// src/toolbar/WatermarkTool.tsx
|
|
1185
|
-
import { useRef as
|
|
1186
|
-
import { jsx as
|
|
1479
|
+
import { useRef as useRef14 } from "react";
|
|
1480
|
+
import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1187
1481
|
function InsertElementTool() {
|
|
1188
1482
|
const { editorRef } = useEditor();
|
|
1189
|
-
const optionsRef =
|
|
1483
|
+
const optionsRef = useRef14(null);
|
|
1190
1484
|
const handleHeader = () => {
|
|
1191
1485
|
if (!editorRef.current) return;
|
|
1192
1486
|
const options = editorRef.current.command.getOptions();
|
|
@@ -1196,41 +1490,41 @@ function InsertElementTool() {
|
|
|
1196
1490
|
}
|
|
1197
1491
|
editorRef.current.command.executeSetZone("header");
|
|
1198
1492
|
};
|
|
1199
|
-
return /* @__PURE__ */
|
|
1493
|
+
return /* @__PURE__ */ jsxs15(
|
|
1200
1494
|
"div",
|
|
1201
1495
|
{
|
|
1202
1496
|
className: "menu-item__insert-element",
|
|
1203
1497
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1204
1498
|
children: [
|
|
1205
|
-
/* @__PURE__ */
|
|
1206
|
-
/* @__PURE__ */
|
|
1499
|
+
/* @__PURE__ */ jsx26("i", { title: "Insert Element" }),
|
|
1500
|
+
/* @__PURE__ */ jsx26("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx26("ul", { children: /* @__PURE__ */ jsx26("li", { onClick: handleHeader, children: "Add Header" }) }) })
|
|
1207
1501
|
]
|
|
1208
1502
|
}
|
|
1209
1503
|
);
|
|
1210
1504
|
}
|
|
1211
1505
|
|
|
1212
1506
|
// src/toolbar/PageBreakTool.tsx
|
|
1213
|
-
import { useRef as
|
|
1214
|
-
import { jsx as
|
|
1507
|
+
import { useRef as useRef15 } from "react";
|
|
1508
|
+
import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1215
1509
|
function PageBreakTool() {
|
|
1216
1510
|
const { editorRef } = useEditor();
|
|
1217
|
-
const optionsRef =
|
|
1511
|
+
const optionsRef = useRef15(null);
|
|
1218
1512
|
const handlePageBreak = () => {
|
|
1219
1513
|
editorRef.current?.command.executePageBreak();
|
|
1220
1514
|
};
|
|
1221
1515
|
const handleColumnBreak = () => {
|
|
1222
1516
|
editorRef.current?.command.executeColumnBreak();
|
|
1223
1517
|
};
|
|
1224
|
-
return /* @__PURE__ */
|
|
1518
|
+
return /* @__PURE__ */ jsxs16(
|
|
1225
1519
|
"div",
|
|
1226
1520
|
{
|
|
1227
1521
|
className: "menu-item__page-break",
|
|
1228
1522
|
onClick: () => optionsRef.current?.classList.toggle("visible"),
|
|
1229
1523
|
children: [
|
|
1230
|
-
/* @__PURE__ */
|
|
1231
|
-
/* @__PURE__ */
|
|
1232
|
-
/* @__PURE__ */
|
|
1233
|
-
/* @__PURE__ */
|
|
1524
|
+
/* @__PURE__ */ jsx27("i", { title: "Break" }),
|
|
1525
|
+
/* @__PURE__ */ jsx27("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs16("ul", { children: [
|
|
1526
|
+
/* @__PURE__ */ jsx27("li", { onClick: handlePageBreak, children: "Page Break" }),
|
|
1527
|
+
/* @__PURE__ */ jsx27("li", { onClick: handleColumnBreak, children: "Column Break" })
|
|
1234
1528
|
] }) })
|
|
1235
1529
|
]
|
|
1236
1530
|
}
|
|
@@ -1238,124 +1532,132 @@ function PageBreakTool() {
|
|
|
1238
1532
|
}
|
|
1239
1533
|
|
|
1240
1534
|
// src/EditorToolbar.tsx
|
|
1241
|
-
import { jsx as
|
|
1535
|
+
import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1242
1536
|
function EditorToolbar() {
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
/* @__PURE__ */
|
|
1537
|
+
const { isInTable } = useEditor();
|
|
1538
|
+
return /* @__PURE__ */ jsxs17("div", { className: "menu", "editor-component": "menu", children: [
|
|
1539
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1540
|
+
/* @__PURE__ */ jsx28(UndoTool, {}),
|
|
1541
|
+
/* @__PURE__ */ jsx28(RedoTool, {})
|
|
1247
1542
|
] }),
|
|
1248
|
-
/* @__PURE__ */
|
|
1249
|
-
/* @__PURE__ */
|
|
1250
|
-
/* @__PURE__ */
|
|
1251
|
-
/* @__PURE__ */
|
|
1252
|
-
/* @__PURE__ */
|
|
1253
|
-
/* @__PURE__ */
|
|
1543
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1544
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(ColumnTool, {}) }),
|
|
1545
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1546
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1547
|
+
/* @__PURE__ */ jsx28(PageBreakTool, {}),
|
|
1548
|
+
/* @__PURE__ */ jsx28(SeparatorTool, {})
|
|
1254
1549
|
] }),
|
|
1255
|
-
/* @__PURE__ */
|
|
1256
|
-
/* @__PURE__ */
|
|
1257
|
-
/* @__PURE__ */
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1550
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1551
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(TableTool, {}) }),
|
|
1552
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1553
|
+
isInTable && /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
1554
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1555
|
+
/* @__PURE__ */ jsx28(TableCellBgColorTool, {}),
|
|
1556
|
+
/* @__PURE__ */ jsx28(TableCellBorderColorTool, {})
|
|
1557
|
+
] }),
|
|
1558
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" })
|
|
1263
1559
|
] }),
|
|
1264
|
-
/* @__PURE__ */
|
|
1265
|
-
|
|
1266
|
-
/* @__PURE__ */
|
|
1267
|
-
/* @__PURE__ */
|
|
1268
|
-
/* @__PURE__ */
|
|
1269
|
-
/* @__PURE__ */ jsx26(ItalicTool, {}),
|
|
1270
|
-
/* @__PURE__ */ jsx26(UnderlineTool, {}),
|
|
1271
|
-
/* @__PURE__ */ jsx26(StrikeoutTool, {})
|
|
1560
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1561
|
+
/* @__PURE__ */ jsx28(TitleTool, {}),
|
|
1562
|
+
/* @__PURE__ */ jsx28(FontTool, {}),
|
|
1563
|
+
/* @__PURE__ */ jsx28(FontSizeTool, {}),
|
|
1564
|
+
/* @__PURE__ */ jsx28(LineHeightTool, {})
|
|
1272
1565
|
] }),
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
/* @__PURE__ */
|
|
1275
|
-
/* @__PURE__ */
|
|
1276
|
-
/* @__PURE__ */
|
|
1277
|
-
/* @__PURE__ */
|
|
1278
|
-
/* @__PURE__ */
|
|
1566
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1567
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1568
|
+
/* @__PURE__ */ jsx28(ColorTool, {}),
|
|
1569
|
+
/* @__PURE__ */ jsx28(HighlightTool, {}),
|
|
1570
|
+
/* @__PURE__ */ jsx28(BoldTool, {}),
|
|
1571
|
+
/* @__PURE__ */ jsx28(ItalicTool, {}),
|
|
1572
|
+
/* @__PURE__ */ jsx28(UnderlineTool, {}),
|
|
1573
|
+
/* @__PURE__ */ jsx28(StrikeoutTool, {})
|
|
1279
1574
|
] }),
|
|
1280
|
-
/* @__PURE__ */
|
|
1281
|
-
/* @__PURE__ */
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1575
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1576
|
+
/* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
|
|
1577
|
+
/* @__PURE__ */ jsx28(LeftAlignTool, {}),
|
|
1578
|
+
/* @__PURE__ */ jsx28(CenterAlignTool, {}),
|
|
1579
|
+
/* @__PURE__ */ jsx28(RightAlignTool, {}),
|
|
1580
|
+
/* @__PURE__ */ jsx28(JustifyTool, {})
|
|
1581
|
+
] }),
|
|
1582
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1583
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(ListTool, {}) }),
|
|
1584
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-divider" }),
|
|
1585
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(ImageTool, {}) }),
|
|
1586
|
+
/* @__PURE__ */ jsx28("div", { className: "menu-item", children: /* @__PURE__ */ jsx28(InsertElementTool, {}) })
|
|
1285
1587
|
] });
|
|
1286
1588
|
}
|
|
1287
1589
|
|
|
1288
1590
|
// src/footer/CatalogToggleTool.tsx
|
|
1289
|
-
import { jsx as
|
|
1591
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
1290
1592
|
function CatalogToggleTool() {
|
|
1291
1593
|
const { handleToggleCatalogAction } = useFooter();
|
|
1292
|
-
return /* @__PURE__ */
|
|
1594
|
+
return /* @__PURE__ */ jsx29(
|
|
1293
1595
|
"div",
|
|
1294
1596
|
{
|
|
1295
1597
|
className: "catalog-mode",
|
|
1296
1598
|
title: "Catalog",
|
|
1297
1599
|
onClick: handleToggleCatalogAction,
|
|
1298
|
-
children: /* @__PURE__ */
|
|
1600
|
+
children: /* @__PURE__ */ jsx29("i", {})
|
|
1299
1601
|
}
|
|
1300
1602
|
);
|
|
1301
1603
|
}
|
|
1302
1604
|
|
|
1303
1605
|
// src/footer/PageModeTool.tsx
|
|
1304
|
-
import { useState as
|
|
1305
|
-
import { jsx as
|
|
1606
|
+
import { useState as useState8 } from "react";
|
|
1607
|
+
import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1306
1608
|
function PageModeTool() {
|
|
1307
1609
|
const { editorRef } = useEditor();
|
|
1308
|
-
const [visible, setVisible] =
|
|
1610
|
+
const [visible, setVisible] = useState8(false);
|
|
1309
1611
|
const handlePageMode = (mode) => {
|
|
1310
1612
|
editorRef.current?.command.executePageMode(mode);
|
|
1311
1613
|
setVisible(false);
|
|
1312
1614
|
};
|
|
1313
|
-
return /* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__PURE__ */
|
|
1316
|
-
/* @__PURE__ */
|
|
1317
|
-
/* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ jsxs18("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
|
|
1616
|
+
/* @__PURE__ */ jsx30("i", { title: "Page Mode" }),
|
|
1617
|
+
/* @__PURE__ */ jsx30("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs18("ul", { children: [
|
|
1618
|
+
/* @__PURE__ */ jsx30("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
|
|
1619
|
+
/* @__PURE__ */ jsx30("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
|
|
1318
1620
|
] }) })
|
|
1319
1621
|
] });
|
|
1320
1622
|
}
|
|
1321
1623
|
|
|
1322
1624
|
// src/footer/FooterStatus.tsx
|
|
1323
|
-
import { Fragment as
|
|
1625
|
+
import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1324
1626
|
function FooterStatus() {
|
|
1325
1627
|
const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
|
|
1326
|
-
return /* @__PURE__ */
|
|
1327
|
-
/* @__PURE__ */
|
|
1628
|
+
return /* @__PURE__ */ jsxs19(Fragment3, { children: [
|
|
1629
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
1328
1630
|
"Visible Pages: ",
|
|
1329
|
-
/* @__PURE__ */
|
|
1631
|
+
/* @__PURE__ */ jsx31("span", { className: "page-no-list", children: pageNoList })
|
|
1330
1632
|
] }),
|
|
1331
|
-
/* @__PURE__ */
|
|
1332
|
-
/* @__PURE__ */
|
|
1633
|
+
/* @__PURE__ */ jsx31("span", { className: "footer-divider" }),
|
|
1634
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
1333
1635
|
"Pages: ",
|
|
1334
|
-
/* @__PURE__ */
|
|
1636
|
+
/* @__PURE__ */ jsx31("span", { className: "page-no", children: pageNo }),
|
|
1335
1637
|
"/",
|
|
1336
|
-
/* @__PURE__ */
|
|
1638
|
+
/* @__PURE__ */ jsx31("span", { className: "page-size", children: pageSize })
|
|
1337
1639
|
] }),
|
|
1338
|
-
/* @__PURE__ */
|
|
1339
|
-
/* @__PURE__ */
|
|
1640
|
+
/* @__PURE__ */ jsx31("span", { className: "footer-divider" }),
|
|
1641
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
1340
1642
|
"Words: ",
|
|
1341
|
-
/* @__PURE__ */
|
|
1643
|
+
/* @__PURE__ */ jsx31("span", { className: "word-count", children: wordCount })
|
|
1342
1644
|
] }),
|
|
1343
|
-
/* @__PURE__ */
|
|
1344
|
-
/* @__PURE__ */
|
|
1645
|
+
/* @__PURE__ */ jsx31("span", { className: "footer-divider" }),
|
|
1646
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
1345
1647
|
"Row: ",
|
|
1346
|
-
/* @__PURE__ */
|
|
1648
|
+
/* @__PURE__ */ jsx31("span", { className: "row-no", children: rowNo })
|
|
1347
1649
|
] }),
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1650
|
+
/* @__PURE__ */ jsx31("span", { className: "footer-divider" }),
|
|
1651
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
1350
1652
|
"Column: ",
|
|
1351
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsx31("span", { className: "col-no", children: colNo })
|
|
1352
1654
|
] })
|
|
1353
1655
|
] });
|
|
1354
1656
|
}
|
|
1355
1657
|
|
|
1356
1658
|
// src/footer/EditorModeTool.tsx
|
|
1357
|
-
import { useState as
|
|
1358
|
-
import { jsx as
|
|
1659
|
+
import { useState as useState9, useRef as useRef16 } from "react";
|
|
1660
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
1359
1661
|
var MODE_LIST = [
|
|
1360
1662
|
{ mode: "edit", name: "Edit Mode" },
|
|
1361
1663
|
{ mode: "clean", name: "Clean Mode" },
|
|
@@ -1367,8 +1669,8 @@ var MODE_LIST = [
|
|
|
1367
1669
|
];
|
|
1368
1670
|
function EditorModeTool() {
|
|
1369
1671
|
const { editorRef } = useEditor();
|
|
1370
|
-
const [editorMode, setEditorMode] =
|
|
1371
|
-
const modeIndexRef =
|
|
1672
|
+
const [editorMode, setEditorMode] = useState9("Edit Mode");
|
|
1673
|
+
const modeIndexRef = useRef16(0);
|
|
1372
1674
|
const handleModeChange = () => {
|
|
1373
1675
|
modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
|
|
1374
1676
|
const { name, mode } = MODE_LIST[modeIndexRef.current];
|
|
@@ -1385,7 +1687,7 @@ function EditorModeTool() {
|
|
|
1385
1687
|
}
|
|
1386
1688
|
});
|
|
1387
1689
|
};
|
|
1388
|
-
return /* @__PURE__ */
|
|
1690
|
+
return /* @__PURE__ */ jsx32(
|
|
1389
1691
|
"div",
|
|
1390
1692
|
{
|
|
1391
1693
|
className: "editor-mode",
|
|
@@ -1397,26 +1699,26 @@ function EditorModeTool() {
|
|
|
1397
1699
|
}
|
|
1398
1700
|
|
|
1399
1701
|
// src/footer/PageScaleMinusTool.tsx
|
|
1400
|
-
import { jsx as
|
|
1702
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
1401
1703
|
function PageScaleMinusTool() {
|
|
1402
1704
|
const { editorRef } = useEditor();
|
|
1403
|
-
return /* @__PURE__ */
|
|
1705
|
+
return /* @__PURE__ */ jsx33(
|
|
1404
1706
|
"div",
|
|
1405
1707
|
{
|
|
1406
1708
|
className: "page-scale-minus",
|
|
1407
1709
|
title: "Zoom Out (Ctrl+-)",
|
|
1408
1710
|
onClick: () => editorRef.current?.command.executePageScaleMinus(),
|
|
1409
|
-
children: /* @__PURE__ */
|
|
1711
|
+
children: /* @__PURE__ */ jsx33("i", {})
|
|
1410
1712
|
}
|
|
1411
1713
|
);
|
|
1412
1714
|
}
|
|
1413
1715
|
|
|
1414
1716
|
// src/footer/PageScalePercentageTool.tsx
|
|
1415
|
-
import { jsxs as
|
|
1717
|
+
import { jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1416
1718
|
function PageScalePercentageTool() {
|
|
1417
1719
|
const { editorRef } = useEditor();
|
|
1418
1720
|
const { pageScale } = useFooter();
|
|
1419
|
-
return /* @__PURE__ */
|
|
1721
|
+
return /* @__PURE__ */ jsxs20(
|
|
1420
1722
|
"span",
|
|
1421
1723
|
{
|
|
1422
1724
|
className: "page-scale-percentage",
|
|
@@ -1431,23 +1733,23 @@ function PageScalePercentageTool() {
|
|
|
1431
1733
|
}
|
|
1432
1734
|
|
|
1433
1735
|
// src/footer/PageScaleAddTool.tsx
|
|
1434
|
-
import { jsx as
|
|
1736
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1435
1737
|
function PageScaleAddTool() {
|
|
1436
1738
|
const { editorRef } = useEditor();
|
|
1437
|
-
return /* @__PURE__ */
|
|
1739
|
+
return /* @__PURE__ */ jsx34(
|
|
1438
1740
|
"div",
|
|
1439
1741
|
{
|
|
1440
1742
|
className: "page-scale-add",
|
|
1441
1743
|
title: "Zoom In (Ctrl+=)",
|
|
1442
1744
|
onClick: () => editorRef.current?.command.executePageScaleAdd(),
|
|
1443
|
-
children: /* @__PURE__ */
|
|
1745
|
+
children: /* @__PURE__ */ jsx34("i", {})
|
|
1444
1746
|
}
|
|
1445
1747
|
);
|
|
1446
1748
|
}
|
|
1447
1749
|
|
|
1448
1750
|
// src/footer/PaperSizeTool.tsx
|
|
1449
|
-
import { useState as
|
|
1450
|
-
import { jsx as
|
|
1751
|
+
import { useState as useState10 } from "react";
|
|
1752
|
+
import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1451
1753
|
var SIZES2 = [
|
|
1452
1754
|
{ label: "A4", width: 794, height: 1123, active: true },
|
|
1453
1755
|
{ label: "A2", width: 1593, height: 2251 },
|
|
@@ -1456,14 +1758,14 @@ var SIZES2 = [
|
|
|
1456
1758
|
];
|
|
1457
1759
|
function PaperSizeTool() {
|
|
1458
1760
|
const { editorRef } = useEditor();
|
|
1459
|
-
const [visible, setVisible] =
|
|
1761
|
+
const [visible, setVisible] = useState10(false);
|
|
1460
1762
|
const handlePaperSize = (width, height) => {
|
|
1461
1763
|
editorRef.current?.command.executePaperSize(width, height);
|
|
1462
1764
|
setVisible(false);
|
|
1463
1765
|
};
|
|
1464
|
-
return /* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1766
|
+
return /* @__PURE__ */ jsxs21("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
|
|
1767
|
+
/* @__PURE__ */ jsx35("i", { title: "Paper Type" }),
|
|
1768
|
+
/* @__PURE__ */ jsx35("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx35("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx35(
|
|
1467
1769
|
"li",
|
|
1468
1770
|
{
|
|
1469
1771
|
onClick: () => handlePaperSize(width, height),
|
|
@@ -1476,19 +1778,19 @@ function PaperSizeTool() {
|
|
|
1476
1778
|
}
|
|
1477
1779
|
|
|
1478
1780
|
// src/footer/PaperDirectionTool.tsx
|
|
1479
|
-
import { useState as
|
|
1480
|
-
import { jsx as
|
|
1781
|
+
import { useState as useState11 } from "react";
|
|
1782
|
+
import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1481
1783
|
function PaperDirectionTool() {
|
|
1482
1784
|
const { editorRef } = useEditor();
|
|
1483
|
-
const [visible, setVisible] =
|
|
1785
|
+
const [visible, setVisible] = useState11(false);
|
|
1484
1786
|
const handlePaperDirection = (direction) => {
|
|
1485
1787
|
editorRef.current?.command.executePaperDirection(direction);
|
|
1486
1788
|
setVisible(false);
|
|
1487
1789
|
};
|
|
1488
|
-
return /* @__PURE__ */
|
|
1489
|
-
/* @__PURE__ */
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1790
|
+
return /* @__PURE__ */ jsxs22("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
|
|
1791
|
+
/* @__PURE__ */ jsx36("i", { title: "Paper Direction" }),
|
|
1792
|
+
/* @__PURE__ */ jsx36("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs22("ul", { children: [
|
|
1793
|
+
/* @__PURE__ */ jsx36(
|
|
1492
1794
|
"li",
|
|
1493
1795
|
{
|
|
1494
1796
|
onClick: () => handlePaperDirection("vertical"),
|
|
@@ -1496,14 +1798,14 @@ function PaperDirectionTool() {
|
|
|
1496
1798
|
children: "Portrait"
|
|
1497
1799
|
}
|
|
1498
1800
|
),
|
|
1499
|
-
/* @__PURE__ */
|
|
1801
|
+
/* @__PURE__ */ jsx36("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
|
|
1500
1802
|
] }) })
|
|
1501
1803
|
] });
|
|
1502
1804
|
}
|
|
1503
1805
|
|
|
1504
1806
|
// src/footer/PaperMarginTool.tsx
|
|
1505
1807
|
import { pxToCm, cmToPx } from "@windoc/core";
|
|
1506
|
-
import { jsx as
|
|
1808
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
1507
1809
|
function PaperMarginTool() {
|
|
1508
1810
|
const { editorRef } = useEditor();
|
|
1509
1811
|
const handlePaperMargin = async () => {
|
|
@@ -1564,19 +1866,19 @@ function PaperMarginTool() {
|
|
|
1564
1866
|
}
|
|
1565
1867
|
});
|
|
1566
1868
|
};
|
|
1567
|
-
return /* @__PURE__ */
|
|
1869
|
+
return /* @__PURE__ */ jsx37(
|
|
1568
1870
|
"div",
|
|
1569
1871
|
{
|
|
1570
1872
|
className: "paper-margin",
|
|
1571
1873
|
title: "Page Margins",
|
|
1572
1874
|
onClick: handlePaperMargin,
|
|
1573
|
-
children: /* @__PURE__ */
|
|
1875
|
+
children: /* @__PURE__ */ jsx37("i", {})
|
|
1574
1876
|
}
|
|
1575
1877
|
);
|
|
1576
1878
|
}
|
|
1577
1879
|
|
|
1578
1880
|
// src/footer/FullscreenTool.tsx
|
|
1579
|
-
import { jsx as
|
|
1881
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
1580
1882
|
function FullscreenTool() {
|
|
1581
1883
|
const handleFullscreen = () => {
|
|
1582
1884
|
if (!document.fullscreenElement) {
|
|
@@ -1585,11 +1887,11 @@ function FullscreenTool() {
|
|
|
1585
1887
|
document.exitFullscreen();
|
|
1586
1888
|
}
|
|
1587
1889
|
};
|
|
1588
|
-
return /* @__PURE__ */
|
|
1890
|
+
return /* @__PURE__ */ jsx38("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx38("i", {}) });
|
|
1589
1891
|
}
|
|
1590
1892
|
|
|
1591
1893
|
// src/footer/EditorOptionTool.tsx
|
|
1592
|
-
import { jsx as
|
|
1894
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
1593
1895
|
function EditorOptionTool() {
|
|
1594
1896
|
const { editorRef } = useEditor();
|
|
1595
1897
|
const handleEditorOption = async () => {
|
|
@@ -1617,21 +1919,21 @@ function EditorOptionTool() {
|
|
|
1617
1919
|
}
|
|
1618
1920
|
});
|
|
1619
1921
|
};
|
|
1620
|
-
return /* @__PURE__ */
|
|
1922
|
+
return /* @__PURE__ */ jsx39(
|
|
1621
1923
|
"div",
|
|
1622
1924
|
{
|
|
1623
1925
|
className: "editor-option",
|
|
1624
1926
|
title: "Editor Settings",
|
|
1625
1927
|
onClick: handleEditorOption,
|
|
1626
|
-
children: /* @__PURE__ */
|
|
1928
|
+
children: /* @__PURE__ */ jsx39("i", {})
|
|
1627
1929
|
}
|
|
1628
1930
|
);
|
|
1629
1931
|
}
|
|
1630
1932
|
|
|
1631
1933
|
// src/footer/WatermarkFooterTool.tsx
|
|
1632
|
-
import { useState as
|
|
1633
|
-
import { Fragment as
|
|
1634
|
-
var
|
|
1934
|
+
import { useState as useState12, useRef as useRef17, useEffect as useEffect3, useCallback } from "react";
|
|
1935
|
+
import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1936
|
+
var COLOR_PALETTE4 = [
|
|
1635
1937
|
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
|
|
1636
1938
|
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
|
|
1637
1939
|
["#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc"]
|
|
@@ -1642,20 +1944,20 @@ var FONTS2 = [
|
|
|
1642
1944
|
];
|
|
1643
1945
|
function WatermarkFooterTool() {
|
|
1644
1946
|
const { editorRef } = useEditor();
|
|
1645
|
-
const [visible, setVisible] =
|
|
1646
|
-
const [tab, setTab] =
|
|
1647
|
-
const containerRef =
|
|
1648
|
-
const panelRef =
|
|
1649
|
-
const fileInputRef =
|
|
1650
|
-
const [text, setText] =
|
|
1651
|
-
const [font, setFont] =
|
|
1652
|
-
const [color, setColor] =
|
|
1653
|
-
const [opacity, setOpacity] =
|
|
1654
|
-
const [rotation, setRotation] =
|
|
1655
|
-
const [inFront, setInFront] =
|
|
1656
|
-
const [imageData, setImageData] =
|
|
1657
|
-
const [imgWidth, setImgWidth] =
|
|
1658
|
-
const [imgHeight, setImgHeight] =
|
|
1947
|
+
const [visible, setVisible] = useState12(false);
|
|
1948
|
+
const [tab, setTab] = useState12("text");
|
|
1949
|
+
const containerRef = useRef17(null);
|
|
1950
|
+
const panelRef = useRef17(null);
|
|
1951
|
+
const fileInputRef = useRef17(null);
|
|
1952
|
+
const [text, setText] = useState12("WATERMARK");
|
|
1953
|
+
const [font, setFont] = useState12("Arial");
|
|
1954
|
+
const [color, setColor] = useState12("#AEB5C0");
|
|
1955
|
+
const [opacity, setOpacity] = useState12(30);
|
|
1956
|
+
const [rotation, setRotation] = useState12(-45);
|
|
1957
|
+
const [inFront, setInFront] = useState12(false);
|
|
1958
|
+
const [imageData, setImageData] = useState12("");
|
|
1959
|
+
const [imgWidth, setImgWidth] = useState12(200);
|
|
1960
|
+
const [imgHeight, setImgHeight] = useState12(200);
|
|
1659
1961
|
useEffect3(() => {
|
|
1660
1962
|
if (!visible) return;
|
|
1661
1963
|
const handler = (e) => {
|
|
@@ -1739,16 +2041,16 @@ function WatermarkFooterTool() {
|
|
|
1739
2041
|
editorRef.current?.command.executeDeleteWatermark();
|
|
1740
2042
|
setVisible(false);
|
|
1741
2043
|
};
|
|
1742
|
-
return /* @__PURE__ */
|
|
2044
|
+
return /* @__PURE__ */ jsxs23(
|
|
1743
2045
|
"div",
|
|
1744
2046
|
{
|
|
1745
2047
|
className: "watermark-footer",
|
|
1746
2048
|
ref: containerRef,
|
|
1747
2049
|
onClick: () => setVisible(!visible),
|
|
1748
2050
|
children: [
|
|
1749
|
-
/* @__PURE__ */
|
|
1750
|
-
visible && /* @__PURE__ */
|
|
1751
|
-
/* @__PURE__ */
|
|
2051
|
+
/* @__PURE__ */ jsx40("i", { title: "Watermark" }),
|
|
2052
|
+
visible && /* @__PURE__ */ jsxs23(Fragment4, { children: [
|
|
2053
|
+
/* @__PURE__ */ jsx40(
|
|
1752
2054
|
"div",
|
|
1753
2055
|
{
|
|
1754
2056
|
className: "wm-panel-mask",
|
|
@@ -1758,19 +2060,19 @@ function WatermarkFooterTool() {
|
|
|
1758
2060
|
}
|
|
1759
2061
|
}
|
|
1760
2062
|
),
|
|
1761
|
-
/* @__PURE__ */
|
|
2063
|
+
/* @__PURE__ */ jsxs23(
|
|
1762
2064
|
"div",
|
|
1763
2065
|
{
|
|
1764
2066
|
className: "watermark-footer-panel",
|
|
1765
2067
|
ref: panelRef,
|
|
1766
2068
|
onClick: (e) => e.stopPropagation(),
|
|
1767
2069
|
children: [
|
|
1768
|
-
/* @__PURE__ */
|
|
1769
|
-
/* @__PURE__ */
|
|
1770
|
-
/* @__PURE__ */
|
|
2070
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-title", children: [
|
|
2071
|
+
/* @__PURE__ */ jsx40("span", { children: "Watermark" }),
|
|
2072
|
+
/* @__PURE__ */ jsx40("i", { onClick: () => setVisible(false) })
|
|
1771
2073
|
] }),
|
|
1772
|
-
/* @__PURE__ */
|
|
1773
|
-
/* @__PURE__ */
|
|
2074
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-tabs", children: [
|
|
2075
|
+
/* @__PURE__ */ jsx40(
|
|
1774
2076
|
"button",
|
|
1775
2077
|
{
|
|
1776
2078
|
className: `wm-panel-tab ${tab === "text" ? "active" : ""}`,
|
|
@@ -1778,7 +2080,7 @@ function WatermarkFooterTool() {
|
|
|
1778
2080
|
children: "Text"
|
|
1779
2081
|
}
|
|
1780
2082
|
),
|
|
1781
|
-
/* @__PURE__ */
|
|
2083
|
+
/* @__PURE__ */ jsx40(
|
|
1782
2084
|
"button",
|
|
1783
2085
|
{
|
|
1784
2086
|
className: `wm-panel-tab ${tab === "image" ? "active" : ""}`,
|
|
@@ -1787,11 +2089,11 @@ function WatermarkFooterTool() {
|
|
|
1787
2089
|
}
|
|
1788
2090
|
)
|
|
1789
2091
|
] }),
|
|
1790
|
-
/* @__PURE__ */
|
|
1791
|
-
tab === "text" ? /* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
/* @__PURE__ */
|
|
2092
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-body", children: [
|
|
2093
|
+
tab === "text" ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
|
|
2094
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2095
|
+
/* @__PURE__ */ jsx40("label", { children: "Text" }),
|
|
2096
|
+
/* @__PURE__ */ jsx40(
|
|
1795
2097
|
"input",
|
|
1796
2098
|
{
|
|
1797
2099
|
type: "text",
|
|
@@ -1801,20 +2103,20 @@ function WatermarkFooterTool() {
|
|
|
1801
2103
|
}
|
|
1802
2104
|
)
|
|
1803
2105
|
] }),
|
|
1804
|
-
/* @__PURE__ */
|
|
1805
|
-
/* @__PURE__ */
|
|
1806
|
-
/* @__PURE__ */
|
|
2106
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2107
|
+
/* @__PURE__ */ jsx40("label", { children: "Font" }),
|
|
2108
|
+
/* @__PURE__ */ jsx40(
|
|
1807
2109
|
"select",
|
|
1808
2110
|
{
|
|
1809
2111
|
value: font,
|
|
1810
2112
|
onChange: (e) => setFont(e.target.value),
|
|
1811
|
-
children: FONTS2.map((f) => /* @__PURE__ */
|
|
2113
|
+
children: FONTS2.map((f) => /* @__PURE__ */ jsx40("option", { value: f.family, children: f.label }, f.family))
|
|
1812
2114
|
}
|
|
1813
2115
|
)
|
|
1814
2116
|
] }),
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1817
|
-
/* @__PURE__ */
|
|
2117
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2118
|
+
/* @__PURE__ */ jsx40("label", { children: "Color" }),
|
|
2119
|
+
/* @__PURE__ */ jsx40("div", { className: "wm-panel-colors", children: COLOR_PALETTE4.flat().map((c) => /* @__PURE__ */ jsx40(
|
|
1818
2120
|
"div",
|
|
1819
2121
|
{
|
|
1820
2122
|
className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
|
|
@@ -1824,10 +2126,10 @@ function WatermarkFooterTool() {
|
|
|
1824
2126
|
c
|
|
1825
2127
|
)) })
|
|
1826
2128
|
] })
|
|
1827
|
-
] }) : /* @__PURE__ */
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
/* @__PURE__ */
|
|
1830
|
-
/* @__PURE__ */
|
|
2129
|
+
] }) : /* @__PURE__ */ jsxs23(Fragment4, { children: [
|
|
2130
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2131
|
+
/* @__PURE__ */ jsx40("label", { children: "Image" }),
|
|
2132
|
+
/* @__PURE__ */ jsxs23(
|
|
1831
2133
|
"div",
|
|
1832
2134
|
{
|
|
1833
2135
|
style: {
|
|
@@ -1836,7 +2138,7 @@ function WatermarkFooterTool() {
|
|
|
1836
2138
|
gap: "6px"
|
|
1837
2139
|
},
|
|
1838
2140
|
children: [
|
|
1839
|
-
/* @__PURE__ */
|
|
2141
|
+
/* @__PURE__ */ jsx40(
|
|
1840
2142
|
"button",
|
|
1841
2143
|
{
|
|
1842
2144
|
className: "wm-panel-upload",
|
|
@@ -1844,7 +2146,7 @@ function WatermarkFooterTool() {
|
|
|
1844
2146
|
children: "Choose File"
|
|
1845
2147
|
}
|
|
1846
2148
|
),
|
|
1847
|
-
/* @__PURE__ */
|
|
2149
|
+
/* @__PURE__ */ jsx40(
|
|
1848
2150
|
"input",
|
|
1849
2151
|
{
|
|
1850
2152
|
ref: fileInputRef,
|
|
@@ -1854,12 +2156,12 @@ function WatermarkFooterTool() {
|
|
|
1854
2156
|
onChange: handleFileUpload
|
|
1855
2157
|
}
|
|
1856
2158
|
),
|
|
1857
|
-
imageData && /* @__PURE__ */
|
|
2159
|
+
imageData && /* @__PURE__ */ jsx40("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
|
|
1858
2160
|
]
|
|
1859
2161
|
}
|
|
1860
2162
|
)
|
|
1861
2163
|
] }),
|
|
1862
|
-
imageData && /* @__PURE__ */
|
|
2164
|
+
imageData && /* @__PURE__ */ jsx40("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx40("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx40(
|
|
1863
2165
|
"img",
|
|
1864
2166
|
{
|
|
1865
2167
|
src: imageData,
|
|
@@ -1871,10 +2173,10 @@ function WatermarkFooterTool() {
|
|
|
1871
2173
|
}
|
|
1872
2174
|
}
|
|
1873
2175
|
) }) }),
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1876
|
-
/* @__PURE__ */
|
|
1877
|
-
/* @__PURE__ */
|
|
2176
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field-row", children: [
|
|
2177
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2178
|
+
/* @__PURE__ */ jsx40("label", { children: "W" }),
|
|
2179
|
+
/* @__PURE__ */ jsx40(
|
|
1878
2180
|
"input",
|
|
1879
2181
|
{
|
|
1880
2182
|
type: "number",
|
|
@@ -1884,9 +2186,9 @@ function WatermarkFooterTool() {
|
|
|
1884
2186
|
}
|
|
1885
2187
|
)
|
|
1886
2188
|
] }),
|
|
1887
|
-
/* @__PURE__ */
|
|
1888
|
-
/* @__PURE__ */
|
|
1889
|
-
/* @__PURE__ */
|
|
2189
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field wm-panel-field-half", children: [
|
|
2190
|
+
/* @__PURE__ */ jsx40("label", { children: "H" }),
|
|
2191
|
+
/* @__PURE__ */ jsx40(
|
|
1890
2192
|
"input",
|
|
1891
2193
|
{
|
|
1892
2194
|
type: "number",
|
|
@@ -1898,15 +2200,15 @@ function WatermarkFooterTool() {
|
|
|
1898
2200
|
] })
|
|
1899
2201
|
] })
|
|
1900
2202
|
] }),
|
|
1901
|
-
/* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
2203
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2204
|
+
/* @__PURE__ */ jsxs23("label", { children: [
|
|
1903
2205
|
"Opacity ",
|
|
1904
|
-
/* @__PURE__ */
|
|
2206
|
+
/* @__PURE__ */ jsxs23("span", { className: "wm-panel-value", children: [
|
|
1905
2207
|
opacity,
|
|
1906
2208
|
"%"
|
|
1907
2209
|
] })
|
|
1908
2210
|
] }),
|
|
1909
|
-
/* @__PURE__ */
|
|
2211
|
+
/* @__PURE__ */ jsx40(
|
|
1910
2212
|
"input",
|
|
1911
2213
|
{
|
|
1912
2214
|
type: "range",
|
|
@@ -1918,15 +2220,15 @@ function WatermarkFooterTool() {
|
|
|
1918
2220
|
}
|
|
1919
2221
|
)
|
|
1920
2222
|
] }),
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
2223
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2224
|
+
/* @__PURE__ */ jsxs23("label", { children: [
|
|
1923
2225
|
"Rotation ",
|
|
1924
|
-
/* @__PURE__ */
|
|
2226
|
+
/* @__PURE__ */ jsxs23("span", { className: "wm-panel-value", children: [
|
|
1925
2227
|
rotation,
|
|
1926
2228
|
"\xB0"
|
|
1927
2229
|
] })
|
|
1928
2230
|
] }),
|
|
1929
|
-
/* @__PURE__ */
|
|
2231
|
+
/* @__PURE__ */ jsx40(
|
|
1930
2232
|
"input",
|
|
1931
2233
|
{
|
|
1932
2234
|
type: "range",
|
|
@@ -1938,10 +2240,10 @@ function WatermarkFooterTool() {
|
|
|
1938
2240
|
}
|
|
1939
2241
|
)
|
|
1940
2242
|
] }),
|
|
1941
|
-
/* @__PURE__ */
|
|
1942
|
-
/* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
/* @__PURE__ */
|
|
2243
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-field", children: [
|
|
2244
|
+
/* @__PURE__ */ jsx40("label", { children: "Position" }),
|
|
2245
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-toggle", children: [
|
|
2246
|
+
/* @__PURE__ */ jsx40(
|
|
1945
2247
|
"button",
|
|
1946
2248
|
{
|
|
1947
2249
|
className: !inFront ? "active" : "",
|
|
@@ -1949,7 +2251,7 @@ function WatermarkFooterTool() {
|
|
|
1949
2251
|
children: "Behind"
|
|
1950
2252
|
}
|
|
1951
2253
|
),
|
|
1952
|
-
/* @__PURE__ */
|
|
2254
|
+
/* @__PURE__ */ jsx40(
|
|
1953
2255
|
"button",
|
|
1954
2256
|
{
|
|
1955
2257
|
className: inFront ? "active" : "",
|
|
@@ -1960,9 +2262,9 @@ function WatermarkFooterTool() {
|
|
|
1960
2262
|
] })
|
|
1961
2263
|
] })
|
|
1962
2264
|
] }),
|
|
1963
|
-
/* @__PURE__ */
|
|
1964
|
-
/* @__PURE__ */
|
|
1965
|
-
/* @__PURE__ */
|
|
2265
|
+
/* @__PURE__ */ jsxs23("div", { className: "wm-panel-actions", children: [
|
|
2266
|
+
/* @__PURE__ */ jsx40("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
|
|
2267
|
+
/* @__PURE__ */ jsx40("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
|
|
1966
2268
|
] })
|
|
1967
2269
|
]
|
|
1968
2270
|
}
|
|
@@ -1974,31 +2276,31 @@ function WatermarkFooterTool() {
|
|
|
1974
2276
|
}
|
|
1975
2277
|
|
|
1976
2278
|
// src/EditorFooter.tsx
|
|
1977
|
-
import { jsx as
|
|
2279
|
+
import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1978
2280
|
function EditorFooter() {
|
|
1979
|
-
return /* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
2281
|
+
return /* @__PURE__ */ jsxs24("div", { className: "footer", "editor-component": "footer", children: [
|
|
2282
|
+
/* @__PURE__ */ jsxs24("div", { children: [
|
|
2283
|
+
/* @__PURE__ */ jsx41(CatalogToggleTool, {}),
|
|
2284
|
+
/* @__PURE__ */ jsx41(PageModeTool, {}),
|
|
2285
|
+
/* @__PURE__ */ jsx41(FooterStatus, {})
|
|
1984
2286
|
] }),
|
|
1985
|
-
/* @__PURE__ */
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
1990
|
-
/* @__PURE__ */
|
|
1991
|
-
/* @__PURE__ */
|
|
1992
|
-
/* @__PURE__ */
|
|
1993
|
-
/* @__PURE__ */
|
|
1994
|
-
/* @__PURE__ */
|
|
1995
|
-
/* @__PURE__ */
|
|
2287
|
+
/* @__PURE__ */ jsx41(EditorModeTool, {}),
|
|
2288
|
+
/* @__PURE__ */ jsxs24("div", { children: [
|
|
2289
|
+
/* @__PURE__ */ jsx41(PageScaleMinusTool, {}),
|
|
2290
|
+
/* @__PURE__ */ jsx41(PageScalePercentageTool, {}),
|
|
2291
|
+
/* @__PURE__ */ jsx41(PageScaleAddTool, {}),
|
|
2292
|
+
/* @__PURE__ */ jsx41(PaperSizeTool, {}),
|
|
2293
|
+
/* @__PURE__ */ jsx41(PaperDirectionTool, {}),
|
|
2294
|
+
/* @__PURE__ */ jsx41(PaperMarginTool, {}),
|
|
2295
|
+
/* @__PURE__ */ jsx41(WatermarkFooterTool, {}),
|
|
2296
|
+
/* @__PURE__ */ jsx41(FullscreenTool, {}),
|
|
2297
|
+
/* @__PURE__ */ jsx41(EditorOptionTool, {})
|
|
1996
2298
|
] })
|
|
1997
2299
|
] });
|
|
1998
2300
|
}
|
|
1999
2301
|
|
|
2000
2302
|
// src/Editor.tsx
|
|
2001
|
-
import { jsx as
|
|
2303
|
+
import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2002
2304
|
function Editor({
|
|
2003
2305
|
defaultValue,
|
|
2004
2306
|
options: userOptions,
|
|
@@ -2014,7 +2316,7 @@ function Editor({
|
|
|
2014
2316
|
style,
|
|
2015
2317
|
onDrop: userOnDrop
|
|
2016
2318
|
}) {
|
|
2017
|
-
return /* @__PURE__ */
|
|
2319
|
+
return /* @__PURE__ */ jsx42(FooterProvider, { children: /* @__PURE__ */ jsx42(
|
|
2018
2320
|
EditorInner,
|
|
2019
2321
|
{
|
|
2020
2322
|
defaultValue,
|
|
@@ -2048,9 +2350,10 @@ function EditorInner({
|
|
|
2048
2350
|
style,
|
|
2049
2351
|
onDrop: userOnDrop
|
|
2050
2352
|
}) {
|
|
2051
|
-
const containerRef =
|
|
2052
|
-
const editorRef =
|
|
2053
|
-
const [rangeStyle, setRangeStyle] =
|
|
2353
|
+
const containerRef = useRef18(null);
|
|
2354
|
+
const editorRef = useRef18(null);
|
|
2355
|
+
const [rangeStyle, setRangeStyle] = useState13(null);
|
|
2356
|
+
const [isInTable, setIsInTable] = useState13(false);
|
|
2054
2357
|
const {
|
|
2055
2358
|
setPageNoList,
|
|
2056
2359
|
setPageNo,
|
|
@@ -2087,6 +2390,7 @@ function EditorInner({
|
|
|
2087
2390
|
setRangeStyle(payload);
|
|
2088
2391
|
onRangeStyleChange?.(payload);
|
|
2089
2392
|
const rangeContext = instance?.command.getRangeContext();
|
|
2393
|
+
setIsInTable(rangeContext?.isTable === true);
|
|
2090
2394
|
if (rangeContext) {
|
|
2091
2395
|
setRowNo(rangeContext.startRowNo + 1);
|
|
2092
2396
|
setColNo(rangeContext.startColNo + 1);
|
|
@@ -2208,11 +2512,11 @@ function EditorInner({
|
|
|
2208
2512
|
e.preventDefault();
|
|
2209
2513
|
e.dataTransfer.dropEffect = "copy";
|
|
2210
2514
|
};
|
|
2211
|
-
return /* @__PURE__ */
|
|
2212
|
-
toolbar && !renderToolbar && /* @__PURE__ */
|
|
2515
|
+
return /* @__PURE__ */ jsxs25(EditorProvider, { editorRef, rangeStyle, isInTable, children: [
|
|
2516
|
+
toolbar && !renderToolbar && /* @__PURE__ */ jsx42(EditorToolbar, {}),
|
|
2213
2517
|
renderToolbar,
|
|
2214
2518
|
children,
|
|
2215
|
-
/* @__PURE__ */
|
|
2519
|
+
/* @__PURE__ */ jsx42(
|
|
2216
2520
|
"div",
|
|
2217
2521
|
{
|
|
2218
2522
|
className: className ?? "editor",
|
|
@@ -2222,7 +2526,7 @@ function EditorInner({
|
|
|
2222
2526
|
onDragOver: handleDragOver
|
|
2223
2527
|
}
|
|
2224
2528
|
),
|
|
2225
|
-
footer && !renderFooter && /* @__PURE__ */
|
|
2529
|
+
footer && !renderFooter && /* @__PURE__ */ jsx42(EditorFooter, {}),
|
|
2226
2530
|
renderFooter
|
|
2227
2531
|
] });
|
|
2228
2532
|
}
|
|
@@ -2262,6 +2566,8 @@ export {
|
|
|
2262
2566
|
RightAlignTool,
|
|
2263
2567
|
SeparatorTool,
|
|
2264
2568
|
StrikeoutTool,
|
|
2569
|
+
TableCellBgColorTool,
|
|
2570
|
+
TableCellBorderColorTool,
|
|
2265
2571
|
TableTool,
|
|
2266
2572
|
TitleTool,
|
|
2267
2573
|
UnderlineTool,
|